@patternfly/patternfly 6.0.0-alpha.98 → 6.0.0-alpha.99

package/docs/components/Slider/examples/Slider.md

@@ -1,13 +1,13 @@
 ---
 id: 'Slider'
 section: components
-cssPrefix: pf-v5-c-slider
+cssPrefix: pf-v6-c-slider
 ---## Examples
 
 ### Discrete
 
 ```html
-<div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 62.5%;">
+<div class="pf-v6-c-slider" style="--pf-v6-c-slider--value: 62.5%;">
   <div class="pf-v6-c-slider__main">
     <div class="pf-v6-c-slider__rail">
       <div class="pf-v6-c-slider__rail-track"></div>
@@ -90,7 +90,7 @@ cssPrefix: pf-v5-c-slider
 ### Continuous
 
 ```html
-<div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
+<div class="pf-v6-c-slider" style="--pf-v6-c-slider--value: 50%;">
   <div class="pf-v6-c-slider__main">
     <div class="pf-v6-c-slider__rail">
       <div class="pf-v6-c-slider__rail-track"></div>
@@ -107,7 +107,7 @@ cssPrefix: pf-v5-c-slider
   </div>
 </div>
 
-<div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
+<div class="pf-v6-c-slider" style="--pf-v6-c-slider--value: 50%;">
   <div class="pf-v6-c-slider__main">
     <div class="pf-v6-c-slider__rail">
       <div class="pf-v6-c-slider__rail-track"></div>
@@ -147,7 +147,7 @@ cssPrefix: pf-v5-c-slider
 ```html
 <div
   class="pf-v6-c-slider"
-  style="--pf-v5-c-slider--value: 62.5%; --pf-v5-c-slider__value--c-form-control--width-chars: 1;"
+  style="--pf-v6-c-slider--value: 62.5%; --pf-v6-c-slider__value--c-form-control--width-chars: 1;"
 >
   <div class="pf-v6-c-slider__main">
     <div class="pf-v6-c-slider__rail">
@@ -233,7 +233,7 @@ cssPrefix: pf-v5-c-slider
 
 <br />
 
-<div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
+<div class="pf-v6-c-slider" style="--pf-v6-c-slider--value: 50%;">
   <div class="pf-v6-c-slider__main">
     <div class="pf-v6-c-slider__rail">
       <div class="pf-v6-c-slider__rail-track"></div>
@@ -299,7 +299,7 @@ cssPrefix: pf-v5-c-slider
 
 <br />
 
-<div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
+<div class="pf-v6-c-slider" style="--pf-v6-c-slider--value: 50%;">
   <div class="pf-v6-c-slider__main">
     <div class="pf-v6-c-slider__rail">
       <div class="pf-v6-c-slider__rail-track"></div>
@@ -333,7 +333,7 @@ cssPrefix: pf-v5-c-slider
 ### Thumb value input
 
 ```html
-<div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
+<div class="pf-v6-c-slider" style="--pf-v6-c-slider--value: 50%;">
   <div class="pf-v6-c-slider__main">
     <div class="pf-v6-c-slider__rail">
       <div class="pf-v6-c-slider__rail-track"></div>
@@ -367,7 +367,7 @@ cssPrefix: pf-v5-c-slider
 ### Actions
 
 ```html
-<div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
+<div class="pf-v6-c-slider" style="--pf-v6-c-slider--value: 50%;">
   <div class="pf-v6-c-slider__actions">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Minus">
       <i class="fas fa-fw fa-minus" aria-hidden="true"></i>
@@ -397,7 +397,7 @@ cssPrefix: pf-v5-c-slider
 <br />
 <br />
 
-<div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
+<div class="pf-v6-c-slider" style="--pf-v6-c-slider--value: 50%;">
   <div class="pf-v6-c-slider__main">
     <div class="pf-v6-c-slider__rail">
       <div class="pf-v6-c-slider__rail-track"></div>
@@ -439,7 +439,7 @@ cssPrefix: pf-v5-c-slider
 <br />
 <br />
 
-<div class="pf-v6-c-slider" style="--pf-v5-c-slider--value: 50%;">
+<div class="pf-v6-c-slider" style="--pf-v6-c-slider--value: 50%;">
   <div class="pf-v6-c-slider__main">
     <div class="pf-v6-c-slider__rail">
       <div class="pf-v6-c-slider__rail-track"></div>
@@ -480,7 +480,7 @@ cssPrefix: pf-v5-c-slider
 ```html
 <div
   class="pf-v6-c-slider pf-m-disabled"
-  style="--pf-v5-c-slider--value: 62.5%;"
+  style="--pf-v6-c-slider--value: 62.5%;"
 >
   <div class="pf-v6-c-slider__main">
     <div class="pf-v6-c-slider__rail">
@@ -562,7 +562,7 @@ cssPrefix: pf-v5-c-slider
 <br />
 <br />
 
-<div class="pf-v6-c-slider pf-m-disabled" style="--pf-v5-c-slider--value: 50%;">
+<div class="pf-v6-c-slider pf-m-disabled" style="--pf-v6-c-slider--value: 50%;">
   <div class="pf-v6-c-slider__main">
     <div class="pf-v6-c-slider__rail">
       <div class="pf-v6-c-slider__rail-track"></div>
@@ -639,28 +639,28 @@ cssPrefix: pf-v5-c-slider
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role="slider"` | `.pf-v5-c-slider__thumb` | Identifies the element as a slider. **Required** |
-| `tabindex="0"` | `.pf-v5-c-slider__thumb` | Includes the slider thumb in the page tab sequence. **Note:** only for use with non-disabled slider. **Required** |
-| `aria-disabled="true"` | `.pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__thumb` | Indicates that the slider thumb is disabled. **Required** |
-| `aria-valuemin="[value]"` | `.pf-v5-c-slider__thumb` | Specifies the minimum value of the slider. **Required** |
-| `aria-valuemax="[value]"` | `.pf-v5-c-slider__thumb` | Specifies the maximum value of the slider. **Required** |
-| `aria-valuenow="[value]"` | `.pf-v5-c-slider__thumb` | Specifies the current value of the slider. **Required** |
+| `role="slider"` | `.pf-v6-c-slider__thumb` | Identifies the element as a slider. **Required** |
+| `tabindex="0"` | `.pf-v6-c-slider__thumb` | Includes the slider thumb in the page tab sequence. **Note:** only for use with non-disabled slider. **Required** |
+| `aria-disabled="true"` | `.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb` | Indicates that the slider thumb is disabled. **Required** |
+| `aria-valuemin="[value]"` | `.pf-v6-c-slider__thumb` | Specifies the minimum value of the slider. **Required** |
+| `aria-valuemax="[value]"` | `.pf-v6-c-slider__thumb` | Specifies the maximum value of the slider. **Required** |
+| `aria-valuenow="[value]"` | `.pf-v6-c-slider__thumb` | Specifies the current value of the slider. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-slider` | `<div>` | Initiates the slider component. **Required** |
-| `.pf-v5-c-slider__main` | `<div>` | Initiates the slider main element. **Required** |
-| `.pf-v5-c-slider__rail` | `<div>` | Initiates the slider rail. **Required** |
-| `.pf-v5-c-slider__rail-track` | `<div>` | Initiates the slider rail track. **Required** |
-| `.pf-v5-c-slider__steps` | `<div>` | Initiates the slider steps. |
-| `.pf-v5-c-slider__step` | `<div>` | Initiates a slider step. |
-| `.pf-v5-c-slider__step-tick` | `<div>` | Initiates a slider step tick. |
-| `.pf-v5-c-slider__step-label` | `<div>` | Initiates a slider step label. |
-| `.pf-v5-c-slider__thumb` | `<div>` | Initiates the slider thumb. **Required** |
-| `.pf-v5-c-slider__value` | `<div>` | Initiates the slider value. |
-| `.pf-v5-c-slider__actions` | `<div>` | Initiates the slider actions. |
-| `.pf-m-disabled` | `.pf-v5-c-slider` | Modifies the slider for the disabled state. |
-| `.pf-m-floating` | `.pf-v5-c-slider__thumb` | Modifies the slider value to float above the thumb. |
-| `--pf-v5-c-slider--value` | `.pf-v5-c-slider` | Applies appropriate slider styles based on the current value. **Required** |
+| `.pf-v6-c-slider` | `<div>` | Initiates the slider component. **Required** |
+| `.pf-v6-c-slider__main` | `<div>` | Initiates the slider main element. **Required** |
+| `.pf-v6-c-slider__rail` | `<div>` | Initiates the slider rail. **Required** |
+| `.pf-v6-c-slider__rail-track` | `<div>` | Initiates the slider rail track. **Required** |
+| `.pf-v6-c-slider__steps` | `<div>` | Initiates the slider steps. |
+| `.pf-v6-c-slider__step` | `<div>` | Initiates a slider step. |
+| `.pf-v6-c-slider__step-tick` | `<div>` | Initiates a slider step tick. |
+| `.pf-v6-c-slider__step-label` | `<div>` | Initiates a slider step label. |
+| `.pf-v6-c-slider__thumb` | `<div>` | Initiates the slider thumb. **Required** |
+| `.pf-v6-c-slider__value` | `<div>` | Initiates the slider value. |
+| `.pf-v6-c-slider__actions` | `<div>` | Initiates the slider actions. |
+| `.pf-m-disabled` | `.pf-v6-c-slider` | Modifies the slider for the disabled state. |
+| `.pf-m-floating` | `.pf-v6-c-slider__thumb` | Modifies the slider value to float above the thumb. |
+| `--pf-v6-c-slider--value` | `.pf-v6-c-slider` | Applies appropriate slider styles based on the current value. **Required** |

package/docs/components/Spinner/examples/Spinner.md

@@ -1,7 +1,7 @@
 ---
 id: Spinner
 section: components
-cssPrefix: pf-v5-c-spinner
+cssPrefix: pf-v6-c-spinner
 ---## Examples
 
 ### Basic
@@ -83,7 +83,7 @@ An inline spinner inherits its font-size, so its size will match the content aro
   role="progressbar"
   viewBox="0 0 100 100"
   aria-label="Loading..."
-  style="--pf-v5-c-spinner--diameter: 80px;"
+  style="--pf-v6-c-spinner--diameter: 80px;"
 >
   <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
 </svg>
@@ -96,10 +96,10 @@ An inline spinner inherits its font-size, so its size will match the content aro
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role="progressbar"` | `.pf-v5-c-spinner` | Indicates to assistive technologies that this is an indeterminate progress indicator. |
-| `aria-label="Loading..."` | `.pf-v5-c-spinner` | Provides an accessible name for the spinner. **Note: one of `aria-label` or `aria-labelledby` is required.** |
-| `aria-labelledby="[id of spinner label]"` | `.pf-v5-c-spinner` | Gives the spinner an accessible name by referring to the element that labels the spinner. |
-| `aria-describedby="[id of spinner description]"` | `.pf-v5-c-spinner` | Gives the spinner an accessible description by referring to the element that describes the spinner. |
+| `role="progressbar"` | `.pf-v6-c-spinner` | Indicates to assistive technologies that this is an indeterminate progress indicator. |
+| `aria-label="Loading..."` | `.pf-v6-c-spinner` | Provides an accessible name for the spinner. **Note: one of `aria-label` or `aria-labelledby` is required.** |
+| `aria-labelledby="[id of spinner label]"` | `.pf-v6-c-spinner` | Gives the spinner an accessible name by referring to the element that labels the spinner. |
+| `aria-describedby="[id of spinner description]"` | `.pf-v6-c-spinner` | Gives the spinner an accessible description by referring to the element that describes the spinner. |
 
 Note: If the spinner is showing that loading of a particular region of a page is in process, the author should use `aria-describedby` to point to the status, and set the `aria-busy` attribute to `true` on the region until it is finished loading.
 
@@ -109,16 +109,16 @@ Note: A [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-spinner` | `<svg>` |  Creates a spinner component. The default is an extra large spinner. **Required**|
-| `.pf-v5-c-spinner__path` | `<circle>` |  Creates a spinner circle component. **Required**|
-| `--pf-v5-c-spinner--diameter` | `.pf-v5-c-spinner` | Modifies the value for `--pf-v5-c-spinner--diameter` declaration. |
+| `.pf-v6-c-spinner` | `<svg>` |  Creates a spinner component. The default is an extra large spinner. **Required**|
+| `.pf-v6-c-spinner__path` | `<circle>` |  Creates a spinner circle component. **Required**|
+| `--pf-v6-c-spinner--diameter` | `.pf-v6-c-spinner` | Modifies the value for `--pf-v6-c-spinner--diameter` declaration. |
 
 ### Modifiers
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-sm` | `.pf-v5-c-spinner` |  Creates a small spinner. |
-| `.pf-m-md` | `.pf-v5-c-spinner` |  Creates a medium spinner. |
-| `.pf-m-lg` | `.pf-v5-c-spinner` |  Creates a large spinner. |
-| `.pf-m-xl` | `.pf-v5-c-spinner` |  Creates an extra-large spinner. |
-| `.pf-m-inline` | `.pf-v5-c-spinner` |  Creates an inline spinner. |
+| `.pf-m-sm` | `.pf-v6-c-spinner` |  Creates a small spinner. |
+| `.pf-m-md` | `.pf-v6-c-spinner` |  Creates a medium spinner. |
+| `.pf-m-lg` | `.pf-v6-c-spinner` |  Creates a large spinner. |
+| `.pf-m-xl` | `.pf-v6-c-spinner` |  Creates an extra-large spinner. |
+| `.pf-m-inline` | `.pf-v6-c-spinner` |  Creates an inline spinner. |

package/docs/components/Switch/examples/Switch.md

@@ -1,7 +1,7 @@
 ---
 id: Switch
 section: components
-cssPrefix: pf-v5-c-switch
+cssPrefix: pf-v6-c-switch
 ---## Examples
 
 ### Basic
@@ -313,23 +313,23 @@ Use checkbox if your user has to perform additional steps for changes to become
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-labelledby="..."` or `aria-label="..."` | `.pf-v5-c-switch__input` | Indicates the action triggered by the switch. If an additional text label is included with the switch besides `.pf-v5-c-switch__label.pf-m-on`, then `aria-labelledby` can reference the `id` of this text, or this text can be used as the value for `aria-label`. If the text included for `.pf-v5-c-switch__label.pf-m-on` provides additional meaning to the primary label that's referenced, then it can also be represented as part of the `aria-labelledby` or `aria-label` attribute. **Required** |
+| `aria-labelledby="..."` or `aria-label="..."` | `.pf-v6-c-switch__input` | Indicates the action triggered by the switch. If an additional text label is included with the switch besides `.pf-v6-c-switch__label.pf-m-on`, then `aria-labelledby` can reference the `id` of this text, or this text can be used as the value for `aria-label`. If the text included for `.pf-v6-c-switch__label.pf-m-on` provides additional meaning to the primary label that's referenced, then it can also be represented as part of the `aria-labelledby` or `aria-label` attribute. **Required** |
 | `for` | `<label>` | Each `<label>` must have a `for` attribute that matches its input id. **Required** |
 | `id` | `<input type="checkbox">` | Each `<input>` must have an `id` attribute that matches its label's `for` value. **Required** |
-| `id` | `.pf-v5-c-switch__label` | Each `.pf-v5-c-switch__label` must have an `id` attribute that matches the `aria-labelledby` on `.pf-v5-c-switch__input`. |
-| `checked` | `.pf-v5-c-switch__input` |  Indicates that the input is checked |
-| `disabled` | `.pf-v5-c-switch__input` |  Indicates that the input is disabled |
-| `aria-hidden="true"` | `.pf-v5-c-switch__label` | Hides the text from the screen reader. |
+| `id` | `.pf-v6-c-switch__label` | Each `.pf-v6-c-switch__label` must have an `id` attribute that matches the `aria-labelledby` on `.pf-v6-c-switch__input`. |
+| `checked` | `.pf-v6-c-switch__input` |  Indicates that the input is checked |
+| `disabled` | `.pf-v6-c-switch__input` |  Indicates that the input is disabled |
+| `aria-hidden="true"` | `.pf-v6-c-switch__label` | Hides the text from the screen reader. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-switch` | `<label>` |  Initiates a switch. **Required**  |
-| `.pf-v5-c-switch__input` | `<input type="checkbox">` |  Hide the checkbox inside the switch. **Required**  |
-| `.pf-v5-c-switch__toggle` | `<span>` |  Initiates the toggle inside the switch. **Required**  |
-| `.pf-v5-c-switch__toggle-icon` | `<span>` | Initiates the switch toggle icon wrapper. **Required when the switch is used without a label** |
-| `.pf-v5-c-switch__label` | `<span>` |  Initiates a label inside the switch. |
-| `.pf-m-on` | `.pf-v5-c-switch__label` | Modifies the switch label to display the on message. |
-| `.pf-m-off` | `.pf-v5-c-switch__label` | Modifies the switch label to display the off message. |
-| `.pf-m-reverse` | `.pf-v5-c-switch` | Positions the switch toggle to the right of the label. |
+| `.pf-v6-c-switch` | `<label>` |  Initiates a switch. **Required**  |
+| `.pf-v6-c-switch__input` | `<input type="checkbox">` |  Hide the checkbox inside the switch. **Required**  |
+| `.pf-v6-c-switch__toggle` | `<span>` |  Initiates the toggle inside the switch. **Required**  |
+| `.pf-v6-c-switch__toggle-icon` | `<span>` | Initiates the switch toggle icon wrapper. **Required when the switch is used without a label** |
+| `.pf-v6-c-switch__label` | `<span>` |  Initiates a label inside the switch. |
+| `.pf-m-on` | `.pf-v6-c-switch__label` | Modifies the switch label to display the on message. |
+| `.pf-m-off` | `.pf-v6-c-switch__label` | Modifies the switch label to display the off message. |
+| `.pf-m-reverse` | `.pf-v6-c-switch` | Positions the switch toggle to the right of the label. |

package/docs/components/TabContent/examples/TabContent.md

@@ -1,7 +1,7 @@
 ---
 id: Tab content
 section: components
-cssPrefix: pf-v5-c-tab-content
+cssPrefix: pf-v6-c-tab-content
 ---## Examples
 
 ### Basic
@@ -137,17 +137,17 @@ Tab content should be used with the [tabs component](/components/tabs).
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role="tabpanel"` | `.pf-v5-c-tab-content` | Indicates that the element serves as a container for a set of tabs. **Required** |
-| `aria-labelledby=[ID of tab element]` | `.pf-v5-c-tab-content` | Provides an accessible name for the tab panel by referring to the tab element that controls it. **Required**
-| `id=[ID of tab panel]` | `.pf-v5-c-tab-content` | Provides an ID for the tab panel, and should be used as the value of `aria-controls` on the tab element that controls the panel.  **Required**
-| `hidden` | `.pf-v5-c-tab-content` | Indicates that the tab panel is not visible. **Required on all but the active tab panel**
-| `tabindex="0"` | `.pf-v5-c-tab-content` | Puts the tab panel in the page tab sequence and facilitates movement to panel content for assistive technology users. **Required**
+| `role="tabpanel"` | `.pf-v6-c-tab-content` | Indicates that the element serves as a container for a set of tabs. **Required** |
+| `aria-labelledby=[ID of tab element]` | `.pf-v6-c-tab-content` | Provides an accessible name for the tab panel by referring to the tab element that controls it. **Required**
+| `id=[ID of tab panel]` | `.pf-v6-c-tab-content` | Provides an ID for the tab panel, and should be used as the value of `aria-controls` on the tab element that controls the panel.  **Required**
+| `hidden` | `.pf-v6-c-tab-content` | Indicates that the tab panel is not visible. **Required on all but the active tab panel**
+| `tabindex="0"` | `.pf-v6-c-tab-content` | Puts the tab panel in the page tab sequence and facilitates movement to panel content for assistive technology users. **Required**
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-tab-content` | `<section>` |  Initiates the tab content component. **Required** |
-| `.pf-v5-c-tab-content__body` | `<div>` |  Initiates the tab content body component. |
-| `.pf-m-padding` | `.pf-v5-c-tab-content__body` | Modifies the tab content body component padding. |
-| `.pf-m-secondary` | `.pf-v5-c-tab-content` |  Modifies the tab content component for secondary styles. |
+| `.pf-v6-c-tab-content` | `<section>` |  Initiates the tab content component. **Required** |
+| `.pf-v6-c-tab-content__body` | `<div>` |  Initiates the tab content body component. |
+| `.pf-m-padding` | `.pf-v6-c-tab-content__body` | Modifies the tab content body component padding. |
+| `.pf-m-secondary` | `.pf-v6-c-tab-content` |  Modifies the tab content component for secondary styles. |