feat(spinner)!: port to pf-v6-spinner

.changeset/sixty-crabs-mate.md

@@ -0,0 +1,22 @@
+---
+"@patternfly/elements": major
+---
+
+✨ Added `<pf-v6-spinner>` replacing `<pf-v5-spinner>`. Spinner now follows
+PatternFly v6 design specs.
+
+```html
+<pf-v6-spinner accessible-label="Loading data">Loading...</pf-v6-spinner>
+```
+
+** Breaking Changes from v5 **
+
+- Renamed tag from `<pf-v5-spinner>` to `<pf-v6-spinner>`
+- ✨ Added `inline` attribute to inherit font size for inline display
+- ✨ Added `accessible-label` attribute for screen reader text
+- ✨ Added `xs` size preset
+- ✨ Added ARIA `progressbar` role with `aria-label` and `aria-valuetext`
+- CSS custom properties renamed from `--pf-v5-c-spinner--*` to `--pf-v6-c-spinner--*`
+- Default size changed from `xl` to `unset` (defaults to xl dimensions via CSS)
+- Removed `diameter` attribute (use `--pf-v6-c-spinner--diameter` CSS custom property
+instead)

docs/main.mjs

@@ -25,7 +25,7 @@ import '@patternfly/elements/pf-v5-progress/pf-v5-progress.js';
 import '@patternfly/elements/pf-v5-progress-stepper/pf-v5-progress-stepper.js';
 import '@patternfly/elements/pf-v5-search-input/pf-v5-search-input.js';
 import '@patternfly/elements/pf-v5-select/pf-v5-select.js';
-import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
+import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
 import '@patternfly/elements/pf-v5-switch/pf-v5-switch.js';
 import '@patternfly/elements/pf-v5-table/pf-v5-table.js';
 import '@patternfly/elements/pf-v5-tabs/pf-v5-tabs.js';

elements/pf-v5-button/demo/stateful.html

@@ -12,7 +12,7 @@
 
 <script type="module">
   import '@patternfly/elements/pf-v5-button/pf-v5-button.js';
-  import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
+  import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
 
   const logsBtn = document.getElementById('loading-logs');
   const loadBtn = document.getElementById('loading-scdr');

elements/pf-v5-button/pf-v5-button.ts

@@ -8,7 +8,7 @@ import { InternalsController } from '@patternfly/pfe-core/controllers/internals-
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 
 import '@patternfly/elements/pf-v5-icon/pf-v5-icon.js';
-import '@patternfly/elements/pf-v5-spinner/pf-v5-spinner.js';
+import '@patternfly/elements/pf-v6-spinner/pf-v6-spinner.js';
 
 import tokensStyles from './pf-v5-button-tokens.css';
 import iconStyles from './pf-v5-button-icon.css';
@@ -152,9 +152,9 @@ export class PfV5Button extends LitElement {
                  icon="${ifDefined(this.icon)}"
                  set="${ifDefined(this.iconSet)}"
                  ?hidden="${!this.icon || this.loading}"></pf-v5-icon>
-        <pf-v5-spinner size="md"
+        <pf-v6-spinner size="md"
                     ?hidden="${!this.loading}"
-                    aria-label="${this.getAttribute('loading-label') ?? 'loading'}"></pf-v5-spinner>
+                    aria-label="${this.getAttribute('loading-label') ?? 'loading'}"></pf-v6-spinner>
       </slot>
       <slot id="text"></slot>
     `;