From d678e8169f06188f16eb78a9679e21d081caf3e5 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Fri, 8 May 2026 14:08:10 -0400
Subject: [PATCH 1/4] feat(spinner): add pf-v6-spinner element

Port pf-v5-spinner to pf-v6-spinner with v6 design tokens and API:

- Migrate CSS tokens from --pf-v5-* to --pf-v6-* namespace
- Update icon size tokens to --pf-t--global--icon--size--* (v6)
- Add `xs` size variant (new in v6)
- Add `inline` boolean attribute for font-size-inherited spinners
- Add `accessible-label` attribute (abstracts aria-label via internals)
- Set role=progressbar and aria-valuetext via InternalsController
- Export `SpinnerSize` type union
- Avoid sprouting default `size` attribute (CSS handles xl default)
- Add demos: basic, size-variations, custom-size, inline-size
- Add unit tests with a11ySnapshot assertions and size measurements
- Update elements/package.json exports

Closes #3037

Assisted-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 elements/package.json                         |   1 +
 elements/pf-v6-spinner/demo/basic.html        |  17 +++
 elements/pf-v6-spinner/demo/custom-size.html  |  17 +++
 elements/pf-v6-spinner/demo/inline-size.html  |  35 +++++
 .../pf-v6-spinner/demo/size-variations.html   |  24 ++++
 elements/pf-v6-spinner/pf-v6-spinner.css      | 105 ++++++++++++++
 elements/pf-v6-spinner/pf-v6-spinner.ts       |  69 +++++++++
 .../pf-v6-spinner/test/pf-v6-spinner.spec.ts  | 131 ++++++++++++++++++
 8 files changed, 399 insertions(+)
 create mode 100644 elements/pf-v6-spinner/demo/basic.html
 create mode 100644 elements/pf-v6-spinner/demo/custom-size.html
 create mode 100644 elements/pf-v6-spinner/demo/inline-size.html
 create mode 100644 elements/pf-v6-spinner/demo/size-variations.html
 create mode 100644 elements/pf-v6-spinner/pf-v6-spinner.css
 create mode 100644 elements/pf-v6-spinner/pf-v6-spinner.ts
 create mode 100644 elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts

diff --git a/elements/package.json b/elements/package.json
index fe8dda2080..6e3341d464 100644
--- a/elements/package.json
+++ b/elements/package.json
@@ -49,6 +49,7 @@
     "./pf-v5-progress/pf-v5-progress.js": "./pf-v5-progress/pf-v5-progress.js",
     "./pf-v5-search-input/pf-v5-search-input.js": "./pf-v5-search-input/pf-v5-search-input.js",
     "./pf-v5-spinner/pf-v5-spinner.js": "./pf-v5-spinner/pf-v5-spinner.js",
+    "./pf-v6-spinner/pf-v6-spinner.js": "./pf-v6-spinner/pf-v6-spinner.js",
     "./pf-v5-switch/pf-v5-switch.js": "./pf-v5-switch/pf-v5-switch.js",
     "./pf-v5-table/context.js": "./pf-v5-table/context.js",
     "./pf-v5-table/pf-v5-caption.js": "./pf-v5-table/pf-v5-caption.js",
diff --git a/elements/pf-v6-spinner/demo/basic.html b/elements/pf-v6-spinner/demo/basic.html
new file mode 100644
index 0000000000..38bfd69761
--- /dev/null
+++ b/elements/pf-v6-spinner/demo/basic.html
@@ -0,0 +1,17 @@
+---
+name: Basic
+description: A basic spinner indicates that an action is in progress.
+---
+<section>
+  <pf-v6-spinner accessible-label="Loading contents">Loading...</pf-v6-spinner>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+</script>
+
+<style>
+  section {
+    padding: 1em;
+  }
+</style>
diff --git a/elements/pf-v6-spinner/demo/custom-size.html b/elements/pf-v6-spinner/demo/custom-size.html
new file mode 100644
index 0000000000..5c0b3f6d31
--- /dev/null
+++ b/elements/pf-v6-spinner/demo/custom-size.html
@@ -0,0 +1,17 @@
+---
+name: Custom size
+description: A spinner can have a custom diameter using the `diameter` attribute.
+---
+<section>
+  <pf-v6-spinner diameter="80px" accessible-label="Custom size spinner">Loading...</pf-v6-spinner>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+</script>
+
+<style>
+  section {
+    padding: 1em;
+  }
+</style>
diff --git a/elements/pf-v6-spinner/demo/inline-size.html b/elements/pf-v6-spinner/demo/inline-size.html
new file mode 100644
index 0000000000..ac12dc37a2
--- /dev/null
+++ b/elements/pf-v6-spinner/demo/inline-size.html
@@ -0,0 +1,35 @@
+---
+name: Inline size
+description: An inline spinner inherits its font size, so its size will match the content around it.
+---
+<section>
+  <h1>
+    Heading
+    <pf-v6-spinner inline accessible-label="Spinner in a heading">Loading...</pf-v6-spinner>
+  </h1>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit nisi in cursus maximus.</p>
+  <h2>
+    Second level
+    <pf-v6-spinner inline accessible-label="Spinner in a subheading">Loading...</pf-v6-spinner>
+  </h2>
+  <p>
+    Curabitur accumsan turpis pharetra blandit. Quisque condimentum maximus mi,
+    <pf-v6-spinner inline accessible-label="Spinner in a paragraph">Loading...</pf-v6-spinner>
+    sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis.
+    Suspendisse potenti.
+  </p>
+  <small>
+    Sometimes you need small text
+    <pf-v6-spinner inline accessible-label="Spinner in small text">Loading...</pf-v6-spinner>
+  </small>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+</script>
+
+<style>
+  section {
+    padding: 1em;
+  }
+</style>
diff --git a/elements/pf-v6-spinner/demo/size-variations.html b/elements/pf-v6-spinner/demo/size-variations.html
new file mode 100644
index 0000000000..16c5cd04af
--- /dev/null
+++ b/elements/pf-v6-spinner/demo/size-variations.html
@@ -0,0 +1,24 @@
+---
+name: Size variations
+description: Spinners can be sized using the `size` attribute with values `xs`, `sm`, `md`, `lg`, and `xl`.
+---
+<section>
+  <pf-v6-spinner size="xs" accessible-label="Extra small spinner">Loading...</pf-v6-spinner>
+  <pf-v6-spinner size="sm" accessible-label="Small spinner">Loading...</pf-v6-spinner>
+  <pf-v6-spinner size="md" accessible-label="Medium spinner">Loading...</pf-v6-spinner>
+  <pf-v6-spinner size="lg" accessible-label="Large spinner">Loading...</pf-v6-spinner>
+  <pf-v6-spinner size="xl" accessible-label="Extra large spinner">Loading...</pf-v6-spinner>
+</section>
+
+<script type="module">
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+</script>
+
+<style>
+  section {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+    padding: 1em;
+  }
+</style>
diff --git a/elements/pf-v6-spinner/pf-v6-spinner.css b/elements/pf-v6-spinner/pf-v6-spinner.css
new file mode 100644
index 0000000000..8fb49f22cb
--- /dev/null
+++ b/elements/pf-v6-spinner/pf-v6-spinner.css
@@ -0,0 +1,105 @@
+:host {
+  display: inline-block;
+  width: min-content;
+  min-height: 0;
+  aspect-ratio: 1 / 1;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+svg {
+  overflow: hidden;
+  width: var(--pf-v6-c-spinner--Width,
+    var(--pf-v6-c-spinner--diameter,
+      var(--pf-t--global--icon--size--2xl, 3.5rem)));
+  height: var(--pf-v6-c-spinner--Height,
+    var(--pf-v6-c-spinner--diameter,
+      var(--pf-t--global--icon--size--2xl, 3.5rem)));
+  animation:
+    rotate
+    calc(var(--pf-v6-c-spinner--AnimationDuration, 1.4s) * 2)
+    var(--pf-v6-c-spinner--AnimationTimingFunction, linear) infinite;
+}
+
+circle {
+  width: 100%;
+  height: 100%;
+  transform-origin: 50% 50%;
+  stroke-linecap: round;
+  stroke-dasharray: 283;
+  stroke-dashoffset: 280;
+  stroke: var(--pf-v6-c-spinner--Color,
+    var(--pf-t--global--icon--color--brand--default, #0066cc));
+  stroke-width: var(--pf-v6-c-spinner--StrokeWidth, 10);
+  animation:
+    dash
+    var(--pf-v6-c-spinner--AnimationDuration, 1.4s)
+    var(--pf-v6-c-spinner__path--AnimationTimingFunction, ease-in-out) infinite;
+}
+
+:host([size="xs"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter,
+    var(--pf-t--global--icon--size--sm, 0.75rem));
+
+  & circle {
+    stroke-width: var(--pf-v6-c-spinner--StrokeWidth, 15);
+  }
+}
+
+:host([size="sm"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter,
+    var(--pf-t--global--icon--size--md, 0.875rem));
+}
+
+:host([size="md"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-md--diameter,
+    var(--pf-t--global--icon--size--lg, 1rem));
+}
+
+:host([size="lg"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-lg--diameter,
+    var(--pf-t--global--icon--size--xl, 1.5rem));
+}
+
+:host([size="xl"]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xl--diameter,
+    var(--pf-t--global--icon--size--2xl, 3.5rem));
+}
+
+:host([inline]) svg {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter, 1em);
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes dash {
+  0% {
+    stroke-dashoffset: 280;
+    transform: rotate(0);
+  }
+
+  15% {
+    stroke-width: calc(var(--pf-v6-c-spinner__path--StrokeWidth,
+      var(--pf-v6-c-spinner--StrokeWidth, 10)) - 4);
+  }
+
+  40% {
+    stroke-dasharray: 220;
+    stroke-dashoffset: 150;
+  }
+
+  100% {
+    stroke-dashoffset: 280;
+    transform: rotate(720deg);
+  }
+}
diff --git a/elements/pf-v6-spinner/pf-v6-spinner.ts b/elements/pf-v6-spinner/pf-v6-spinner.ts
new file mode 100644
index 0000000000..a5c4b5d24c
--- /dev/null
+++ b/elements/pf-v6-spinner/pf-v6-spinner.ts
@@ -0,0 +1,69 @@
+import { LitElement, html, type TemplateResult } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { property } from 'lit/decorators/property.js';
+
+import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
+
+import styles from './pf-v6-spinner.css';
+
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * A **spinner** is an animated visual that indicates when a quick action is
+ * in progress. For actions that may take a long time, use a progress bar instead.
+ * @summary Indicates that an action is in progress.
+ * @cssprop {<length>} [--pf-v6-c-spinner--diameter] - Custom diameter of the spinner
+ * @cssprop {<color>} [--pf-v6-c-spinner--Color] - Color of the spinner stroke
+ * @cssprop {<time>} [--pf-v6-c-spinner--AnimationDuration=1.4s] - Duration of one animation cycle
+ * @cssprop {<number>} [--pf-v6-c-spinner--StrokeWidth=10] - Width of the spinner stroke
+ */
+@customElement('pf-v6-spinner')
+export class PfV6Spinner extends LitElement {
+  static readonly styles: CSSStyleSheet[] = [styles];
+
+  /** Preset sizes for the spinner */
+  @property({ reflect: true }) size?: SpinnerSize;
+
+  /**
+   * When true, the spinner inherits its font size from the surrounding text,
+   * allowing it to display inline with content.
+   */
+  @property({ type: Boolean, reflect: true }) inline = false;
+
+  /** Custom diameter of spinner set as CSS variable */
+  @property({ reflect: true }) diameter?: string;
+
+  /** Accessible label describing what is loading */
+  @property({ attribute: 'accessible-label' }) accessibleLabel?: string;
+
+  #internals = InternalsController.of(this, {
+    role: 'progressbar',
+    ariaValueText: 'Loading...',
+    ariaLabel: 'Loading...',
+  });
+
+  override willUpdate(changed: Map<PropertyKey, unknown>): void {
+    if (changed.has('accessibleLabel')) {
+      this.#internals.ariaLabel = this.accessibleLabel ?? 'Loading...';
+    }
+  }
+
+  override render(): TemplateResult<1> {
+    const { diameter } = this;
+    return html`
+      <svg viewBox="0 0 100 100"
+           style="${styleMap({
+              '--pf-v6-c-spinner--diameter': diameter ?? null,
+            })}">
+        <circle cx="50" cy="50" r="45" fill="none" />
+      </svg>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'pf-v6-spinner': PfV6Spinner;
+  }
+}
diff --git a/elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts b/elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts
new file mode 100644
index 0000000000..13f8169934
--- /dev/null
+++ b/elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts
@@ -0,0 +1,131 @@
+import { expect, html } from '@open-wc/testing';
+import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
+import { a11ySnapshot } from '@patternfly/pfe-tools/test/a11y-snapshot.js';
+import { PfV6Spinner } from '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
+
+describe('<pf-v6-spinner>', function() {
+  it('imperatively instantiates', function() {
+    expect(document.createElement('pf-v6-spinner')).to.be.an.instanceof(PfV6Spinner);
+  });
+
+  it('should upgrade', async function() {
+    const element = await createFixture<PfV6Spinner>(html`<pf-v6-spinner>Loading...</pf-v6-spinner>`);
+    expect(element, 'pf-v6-spinner should be an instance of PfV6Spinner')
+        .to.be.an.instanceOf(customElements.get('pf-v6-spinner'))
+        .and
+        .to.be.an.instanceOf(PfV6Spinner);
+  });
+
+  describe('default state', function() {
+    let element: PfV6Spinner;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Spinner>(html`<pf-v6-spinner>Loading...</pf-v6-spinner>`);
+    });
+
+    it('does not sprout a size attribute by default', function() {
+      expect(element.hasAttribute('size')).to.be.false;
+    });
+
+    it('renders at xl size by default', function() {
+      const { fontSize } = getComputedStyle(document.documentElement);
+      const expected = 3.5 * parseFloat(fontSize);
+      expect(element.offsetWidth).to.equal(expected);
+    });
+
+    it('defaults inline to false', function() {
+      expect(element.inline).to.equal(false);
+    });
+
+    it('is accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+
+    it('has progressbar role in a11y tree', async function() {
+      const snapshot = await a11ySnapshot();
+      const spinnerNode = snapshot.children?.find(
+        (child: { role: string }) => child.role === 'progressbar'
+      );
+      expect(spinnerNode).to.exist;
+    });
+  });
+
+  describe('accessible-label attribute', function() {
+    let element: PfV6Spinner;
+    beforeEach(async function() {
+      element = await createFixture<PfV6Spinner>(html`
+        <pf-v6-spinner accessible-label="Loading results">Loading...</pf-v6-spinner>
+      `);
+    });
+
+    it('is accessible', async function() {
+      await expect(element).to.be.accessible();
+    });
+
+    it('reflects custom accessible label in a11y tree', async function() {
+      const snapshot = await a11ySnapshot();
+      const spinnerNode = snapshot.children?.find(
+        (child: { role: string }) => child.role === 'progressbar'
+      );
+      expect(spinnerNode).to.exist;
+      expect(spinnerNode?.name).to.equal('Loading results');
+    });
+  });
+
+  describe('size attribute', function() {
+    let element: PfV6Spinner;
+
+    function convertRemToPixels(rem: `${number}rem`) {
+      const { fontSize } = getComputedStyle(document.documentElement);
+      return parseFloat(rem) * parseFloat(fontSize);
+    }
+
+    beforeEach(async function() {
+      element = await createFixture<PfV6Spinner>(html`
+        <pf-v6-spinner>Loading...</pf-v6-spinner>
+      `);
+    });
+
+    for (const [size, expected] of [
+      ['xs', '0.75rem'],
+      ['sm', '0.875rem'],
+      ['md', '1rem'],
+      ['lg', '1.5rem'],
+      ['xl', '3.5rem'],
+    ] as const) {
+      it(size, async function() {
+        element.size = size;
+        await element.updateComplete;
+        expect(element.offsetWidth).to.equal(convertRemToPixels(expected));
+      });
+    }
+  });
+
+  describe('diameter attribute', function() {
+    it('sets the element diameter', async function() {
+      const customDiameterValue = 80;
+      const element = await createFixture<PfV6Spinner>(html`
+        <pf-v6-spinner diameter="${customDiameterValue}px">Loading...</pf-v6-spinner>
+      `);
+      expect(element.offsetWidth).to.equal(customDiameterValue);
+    });
+  });
+
+  describe('inline attribute', function() {
+    let container: HTMLParagraphElement;
+    let element: PfV6Spinner;
+    beforeEach(async function() {
+      container = await createFixture<HTMLParagraphElement>(html`
+        <p style="font-size: 32px;">
+          Text
+          <pf-v6-spinner inline accessible-label="Inline spinner">Loading...</pf-v6-spinner>
+        </p>
+      `);
+      element = container.querySelector('pf-v6-spinner')!;
+      await element.updateComplete;
+    });
+
+    it('inherits font size from surrounding content', function() {
+      expect(element.offsetWidth).to.equal(32);
+    });
+  });
+});

From d6baf447617c62cbf620aad445034c334ed7e8eb Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Fri, 8 May 2026 15:28:46 -0400
Subject: [PATCH 2/4] fix(spinner): apply review fixes

- Remove unused styleMap import
- Use `static styles = [styles]` array form convention
- Move diameter CSS custom property to willUpdate (host style)
- Sync ariaValueText with accessibleLabel changes
- Simplify render return type to TemplateResult
- Use individual rotate property instead of transform function
- Add prefers-reduced-motion media query
- Add cem generate output path to config

Assisted-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .config/cem.yaml                         |  1 +
 elements/pf-v6-spinner/pf-v6-spinner.css | 15 +++++++++++----
 elements/pf-v6-spinner/pf-v6-spinner.ts  | 22 +++++++++++++---------
 3 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/.config/cem.yaml b/.config/cem.yaml
index febc90fcec..86f5f070a6 100644
--- a/.config/cem.yaml
+++ b/.config/cem.yaml
@@ -1,5 +1,6 @@
 sourceControlRootUrl: https://github.com/patternfly/patternfly-elements/tree/main/
 generate:
+  output: ./elements/custom-elements.json
   files:
     - ./elements/*/*.ts
     - ./core/*/*.ts
diff --git a/elements/pf-v6-spinner/pf-v6-spinner.css b/elements/pf-v6-spinner/pf-v6-spinner.css
index 8fb49f22cb..cbe75ade0d 100644
--- a/elements/pf-v6-spinner/pf-v6-spinner.css
+++ b/elements/pf-v6-spinner/pf-v6-spinner.css
@@ -74,18 +74,18 @@ circle {
 
 @keyframes rotate {
   0% {
-    transform: rotate(0deg);
+    rotate: 0deg;
   }
 
   100% {
-    transform: rotate(360deg);
+    rotate: 360deg;
   }
 }
 
 @keyframes dash {
   0% {
     stroke-dashoffset: 280;
-    transform: rotate(0);
+    rotate: 0deg;
   }
 
   15% {
@@ -100,6 +100,13 @@ circle {
 
   100% {
     stroke-dashoffset: 280;
-    transform: rotate(720deg);
+    rotate: 720deg;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  svg,
+  circle {
+    animation-duration: 0s;
   }
 }
diff --git a/elements/pf-v6-spinner/pf-v6-spinner.ts b/elements/pf-v6-spinner/pf-v6-spinner.ts
index a5c4b5d24c..06e58f356e 100644
--- a/elements/pf-v6-spinner/pf-v6-spinner.ts
+++ b/elements/pf-v6-spinner/pf-v6-spinner.ts
@@ -1,6 +1,5 @@
 import { LitElement, html, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
-import { styleMap } from 'lit/directives/style-map.js';
 import { property } from 'lit/decorators/property.js';
 
 import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
@@ -20,7 +19,7 @@ export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  */
 @customElement('pf-v6-spinner')
 export class PfV6Spinner extends LitElement {
-  static readonly styles: CSSStyleSheet[] = [styles];
+  static styles = [styles];
 
   /** Preset sizes for the spinner */
   @property({ reflect: true }) size?: SpinnerSize;
@@ -45,17 +44,22 @@ export class PfV6Spinner extends LitElement {
 
   override willUpdate(changed: Map<PropertyKey, unknown>): void {
     if (changed.has('accessibleLabel')) {
-      this.#internals.ariaLabel = this.accessibleLabel ?? 'Loading...';
+      const label = this.accessibleLabel ?? 'Loading...';
+      this.#internals.ariaLabel = label;
+      this.#internals.ariaValueText = label;
+    }
+    if (changed.has('diameter')) {
+      if (this.diameter) {
+        this.style.setProperty('--pf-v6-c-spinner--diameter', this.diameter);
+      } else {
+        this.style.removeProperty('--pf-v6-c-spinner--diameter');
+      }
     }
   }
 
-  override render(): TemplateResult<1> {
-    const { diameter } = this;
+  override render(): TemplateResult {
     return html`
-      <svg viewBox="0 0 100 100"
-           style="${styleMap({
-              '--pf-v6-c-spinner--diameter': diameter ?? null,
-            })}">
+      <svg viewBox="0 0 100 100">
         <circle cx="50" cy="50" r="45" fill="none" />
       </svg>
     `;

From cce4383a1ce976382332d34bc53d07a35b7b9408 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Fri, 8 May 2026 16:22:09 -0400
Subject: [PATCH 3/4] fix(spinner): a11y improvement

---
 elements/pf-v6-spinner/pf-v6-spinner.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/elements/pf-v6-spinner/pf-v6-spinner.ts b/elements/pf-v6-spinner/pf-v6-spinner.ts
index 06e58f356e..3d77fc1a5c 100644
--- a/elements/pf-v6-spinner/pf-v6-spinner.ts
+++ b/elements/pf-v6-spinner/pf-v6-spinner.ts
@@ -19,7 +19,7 @@ export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  */
 @customElement('pf-v6-spinner')
 export class PfV6Spinner extends LitElement {
-  static styles = [styles];
+  static readonly styles: CSSStyleSheet[] = [styles];
 
   /** Preset sizes for the spinner */
   @property({ reflect: true }) size?: SpinnerSize;
@@ -59,7 +59,7 @@ export class PfV6Spinner extends LitElement {
 
   override render(): TemplateResult {
     return html`
-      <svg viewBox="0 0 100 100">
+      <svg viewBox="0 0 100 100" aria-hidden="true">
         <circle cx="50" cy="50" r="45" fill="none" />
       </svg>
     `;

From cfc6fcb50dbc565f6897ccb60b935c1c0401c202 Mon Sep 17 00:00:00 2001
From: Steven Spriggs <steven.spriggs@gmail.com>
Date: Fri, 8 May 2026 16:23:05 -0400
Subject: [PATCH 4/4] test(spinner): improve tests

---
 elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts b/elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts
index 13f8169934..e0bc75232b 100644
--- a/elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts
+++ b/elements/pf-v6-spinner/test/pf-v6-spinner.spec.ts
@@ -46,6 +46,8 @@ describe('<pf-v6-spinner>', function() {
         (child: { role: string }) => child.role === 'progressbar'
       );
       expect(spinnerNode).to.exist;
+      expect(spinnerNode?.name).to.equal('Loading...');
+      expect(spinnerNode?.valuetext).to.equal('Loading...');
     });
   });
 
@@ -68,6 +70,7 @@ describe('<pf-v6-spinner>', function() {
       );
       expect(spinnerNode).to.exist;
       expect(spinnerNode?.name).to.equal('Loading results');
+      expect(spinnerNode?.valuetext).to.equal('Loading results');
     });
   });