@patternfly/patternfly 6.2.0-prerelease.2 → 6.2.0-prerelease.21

package/docs/components/Tabs/examples/Tabs.md

@@ -9099,14 +9099,137 @@ cssPrefix: pf-v6-c-tabs
 
 ```
 
+## Tab content
+
+### Default tab content example
+
+```html
+<section
+  class="pf-v6-c-tab-content"
+  id="basic-tab1-panel"
+  role="tabpanel"
+  tabindex="0"
+>
+  <div class="pf-v6-c-tab-content__body">Panel 1</div>
+</section>
+<section
+  class="pf-v6-c-tab-content"
+  id="basic-tab2-panel"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body">Panel 2</div>
+</section>
+<section
+  class="pf-v6-c-tab-content"
+  id="basic-tab3-panel"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body">Panel 3</div>
+</section>
+<section
+  class="pf-v6-c-tab-content"
+  id="basic-tab4-panel"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body">Panel 4</div>
+</section>
+
+```
+
+### Padding
+
+```html
+<section
+  class="pf-v6-c-tab-content"
+  id="tab1-panel-with-padding"
+  role="tabpanel"
+  tabindex="0"
+>
+  <div class="pf-v6-c-tab-content__body pf-m-padding">Panel 1</div>
+</section>
+<section
+  class="pf-v6-c-tab-content"
+  id="tab2-panel-with-padding"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body pf-m-padding">Panel 2</div>
+</section>
+<section
+  class="pf-v6-c-tab-content"
+  id="tab3-panel-with-padding"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body pf-m-padding">Panel 3</div>
+</section>
+<section
+  class="pf-v6-c-tab-content"
+  id="tab4-panel-with-padding"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body pf-m-padding">Panel 4</div>
+</section>
+
+```
+
+### Secondary
+
+```html
+<section
+  class="pf-v6-c-tab-content pf-m-secondary"
+  id="secondary-tab1-panel"
+  role="tabpanel"
+  tabindex="0"
+>
+  <div class="pf-v6-c-tab-content__body">Panel 1</div>
+</section>
+<section
+  class="pf-v6-c-tab-content pf-m-secondary"
+  id="secondary-tab2-panel"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body">Panel 2</div>
+</section>
+<section
+  class="pf-v6-c-tab-content pf-m-secondary"
+  id="secondary-tab3-panel"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body">Panel 3</div>
+</section>
+<section
+  class="pf-v6-c-tab-content pf-m-secondary"
+  id="secondary-tab4-panel"
+  role="tabpanel"
+  tabindex="0"
+  hidden
+>
+  <div class="pf-v6-c-tab-content__body">Panel 4</div>
+</section>
+
+```
+
 ## Documentation
 
-### Overview
+### Tabs overview
 
 The tabs component should only be used to change content views within a page. The similar-looking but semantically different [horizontal nav component](/components/navigation/#horizontal) is available for general navigation use cases.
 
-Tabs should be used with the [tab content component](/components/tab-content).
-
 Whenever a list of tabs is unique on the current page, it can be used in a `<nav>` element. Cases where the same set of tabs are duplicated in multiple regions on a page (e.g. cards on a dashboard) are less likely to benefit from using the `<nav>` element.
 
 ### Usage
@@ -9136,11 +9259,30 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
 | `.pf-m-action` | `.pf-v6-c-tabs__item` | Indicates that a tab item contains actions other than the tab link. |
 | `.pf-m-overflow` | `.pf-v6-c-tabs__item` | Applies overflow menu styling to a tab item. |
 | `.pf-m-expanded` | `.pf-v6-c-tabs__item` | Applies expanded styling to the overflow menu tab item. |
-| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-v6-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-v6-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/tokens/all-patternfly-tokens). |
 | `.pf-m-page-insets` | `.pf-v6-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
 | `.pf-m-secondary` | `.pf-v6-c-tabs.pf-m-box` | Modifies the tabs component tab background colors for the box variant. |
-| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical tabs only. |
-| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/tokens/all-patternfly-tokens). **Note:** works with vertical tabs only. |
+| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/tokens/all-patternfly-tokens). |
 | `.pf-m-expanded` | `.pf-v6-c-tabs` | Modifies the expandable tabs component for the expanded state. |
 | `.pf-m-disabled` | `a.pf-v6-c-tabs__link` | Modifies a tabs link for disabled styles. |
 | `.pf-m-aria-disabled` | `.pf-v6-c-tabs__link` | Modifies a tabs link for disabled styles, but is still hoverable/focusable. |
+
+### Tab content accessibility
+
+| Attribute | Applied to | Outcome |
+| -- | -- | -- |
+| `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**
+
+### Tab content usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.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. |

package/docs/components/TextInputGroup/examples/TextInputGroup.md

@@ -1461,8 +1461,18 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
+| `.pf-v6-c-text-input-group` | `<div>` | Creates a text input group. *Required* |
+| `.pf-v6-c-text-input-group__main` | `<div>` | Creates a wrapper for the main content. *Required* |
+| `.pf-v6-c-text-input-group__text` | `<span>` | Creates the text container. *Required*|
+| `.pf-v6-c-text-input-group__icon` | `<span>` | Creates a container for an icon. |
+| `.pf-v6-c-text-input-group__text-input` | `<input>` | Creates a text input. *Required* |
+| `.pf-v6-c-text-input-group__utilities` | `<div>` | Creates text input utilities container. |
+| `.pf-v6-c-text-input-group__group` | `<div>` | Creates text input prev/next nav group. |
+| `.pf-m-plain` | `.pf-v6-c-text-input-group` | Applies plain styling. Only use this variant when the text input group is contained in an ancestor with its own border or background styling. |
+| `.pf-m-disabled` | `.pf-v6-c-text-input-group` | Applies disabled styling. The `<input>` should also be `disabled`. |
 | `.pf-m-success` | `.pf-v6-c-text-input-group` | Applies success validation styling. |
 | `.pf-m-warning` | `.pf-v6-c-text-input-group` | Applies warning validation styling. |
 | `.pf-m-error` | `.pf-v6-c-text-input-group` | Applies error validation styling. |
 | `.pf-m-icon` | `.pf-v6-c-text-input-group__main` | Applies styling when icons are included in the container. |
 | `.pf-m-status` | `.pf-v6-c-text-input-group__icon` | Applies status styling to the icon, matching the status modifier applied to `.pf-v6-c-text-input-group`. |
+| `.pf-m-hint` | `.pf-v6-c-text-input-group__text-input` | Applies styling when hints are included in the container. |

package/docs/components/Toolbar/examples/Toolbar.css

@@ -28,6 +28,7 @@
 #ws-core-c-toolbar-adjusted-group-column-gap .pf-v6-c-toolbar__group,
 #ws-core-e-toolbar-simple .pf-v6-c-toolbar,
 #ws-core-e-toolbar-simple .pf-v6-c-toolbar__group,
+#ws-core-c-toolbar-no-padding .pf-v6-c-toolbar,
 #ws-core-e-toolbar-adjusted-spacers .pf-v6-c-toolbar,
 #ws-core-e-toolbar-adjusted-group-spacers .pf-v6-c-toolbar,
 #ws-core-c-toolbar-simple .pf-v6-c-toolbar,
@@ -50,6 +51,7 @@
 #ws-core-e-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
 #ws-core-e-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-simple .pf-v6-c-toolbar__item,
+#ws-core-c-toolbar-no-padding .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-insets .pf-v6-c-toolbar__item,
@@ -64,6 +66,7 @@
 #ws-core-e-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
 #ws-core-e-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-simple .pf-v6-c-toolbar__item,
+#ws-core-c-toolbar-no-padding .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-insets .pf-v6-c-toolbar__item,

package/docs/components/Toolbar/examples/Toolbar.md

@@ -14,8 +14,8 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
 | -- | -- | -- |
 | `.pf-v6-c-toolbar__group` | `--pf-v6-c-toolbar__group--ColumnGap` | `16px` |
 | `.pf-v6-c-toolbar__item` | `--pf-v6-c-toolbar__item--ColumnGap` | `16px` |
-| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
 
 ### Toolbar item types
 
@@ -37,7 +37,7 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
 
 Several components in the following examples do not include functional and/or accessibility specifications (for example `.pf-v6-c-select`, `.pf-v6-c-options-menu`). Rather, `.pf-v6-c-toolbar` focuses on functionality and accessibility specifications that apply to it only.
 
-**Available [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
+**Available [breakpoints](/tokens/all-patternfly-tokens) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
 
 ## Examples
 
@@ -75,6 +75,33 @@ Several components in the following examples do not include functional and/or ac
 | `.pf-v6-c-toolbar__item` | `<div>` | Initiates the toolbar component item. **Required** |
 | `.pf-v6-c-toolbar__group` | `<div>` | Initiates the toolbar component group. |
 
+### No padding
+
+```html
+<div class="pf-v6-c-toolbar pf-m-no-padding" id="toolbar-simple-example">
+  <div class="pf-v6-c-toolbar__content">
+    <div class="pf-v6-c-toolbar__content-section">
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <hr class="pf-v6-c-divider pf-m-vertical" />
+
+      <div class="pf-v6-c-toolbar__group">
+        <div class="pf-v6-c-toolbar__item">Item</div>
+        <div class="pf-v6-c-toolbar__item">Item</div>
+        <div class="pf-v6-c-toolbar__item">Item</div>
+      </div>
+
+      <hr class="pf-v6-c-divider pf-m-vertical" />
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+    </div>
+  </div>
+</div>
+
+```
+
 ### Adjusted group column gap
 
 ```html
@@ -154,8 +181,8 @@ Several components in the following examples do not include functional and/or ac
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the width value of a toolbar item at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the min width value of a toolbar item at optional [breakpoint](/tokens/all-patternfly-tokens). |
 
 ## Group types
 
@@ -2607,6 +2634,7 @@ As the toolbar component is a hybrid layout and component, some of its elements
 | `.pf-m-static` | `.pf-v6-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
 | `.pf-m-primary` | `.pf-v6-c-toolbar` | Modifies toolbar to have primary background color. |
 | `.pf-m-secondary` | `.pf-v6-c-toolbar` | Modifies toolbar to have secondary background color. |
+| `.pf-m-no-padding` | `.pf-v6-c-toolbar` | Modifies toolbar to have no padding. |
 | `.pf-m-no-background` | `.pf-v6-c-toolbar` | Modifies toolbar to have no background color. |
 | `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
 | `.pf-m-expanded` | `.pf-v6-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
@@ -2646,5 +2674,5 @@ As the toolbar component is a hybrid layout and component, some of its elements
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |

package/docs/demos/Card/examples/Card.md

@@ -444,7 +444,7 @@ wrapperTag: div
           <h2 class="pf-v6-c-card__title-text">5 Clusters</h2>
         </div>
         <div class="pf-v6-c-card__body">
-          <span class="pf-v6-c-icon">
+          <span class="pf-v6-c-icon pf-m-inline">
             <span class="pf-v6-c-icon__content pf-m-success">
               <i class="fas fa-check-circle" aria-hidden="true"></i>
             </span>
@@ -456,7 +456,7 @@ wrapperTag: div
           <h2 class="pf-v6-c-card__title-text">15 Clusters</h2>
         </div>
         <div class="pf-v6-c-card__body">
-          <span class="pf-v6-c-icon">
+          <span class="pf-v6-c-icon pf-m-inline">
             <span class="pf-v6-c-icon__content pf-m-warning">
               <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
             </span>
@@ -468,7 +468,7 @@ wrapperTag: div
           <h2 class="pf-v6-c-card__title-text">3 Clusters</h2>
         </div>
         <div class="pf-v6-c-card__body">
-          <span class="pf-v6-c-icon">
+          <span class="pf-v6-c-icon pf-m-inline">
             <span class="pf-v6-c-icon__content pf-m-danger">
               <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
             </span>
@@ -487,7 +487,7 @@ wrapperTag: div
           <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-success">
                     <i class="fas fa-check-circle" aria-hidden="true"></i>
                   </span>
@@ -500,7 +500,7 @@ wrapperTag: div
             <hr class="pf-v6-c-divider pf-m-vertical" />
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-warning">
                     <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                   </span>
@@ -521,7 +521,7 @@ wrapperTag: div
           <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-success">
                     <i class="fas fa-check-circle" aria-hidden="true"></i>
                   </span>
@@ -534,7 +534,7 @@ wrapperTag: div
             <hr class="pf-v6-c-divider pf-m-vertical" />
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-danger">
                     <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                   </span>
@@ -555,7 +555,7 @@ wrapperTag: div
           <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-warning">
                     <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                   </span>
@@ -568,7 +568,7 @@ wrapperTag: div
             <hr class="pf-v6-c-divider pf-m-vertical" />
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-danger">
                     <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                   </span>
@@ -600,7 +600,7 @@ wrapperTag: div
           >
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-danger">
                     <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                   </span>
@@ -613,7 +613,7 @@ wrapperTag: div
             </div>
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-warning">
                     <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                   </span>
@@ -637,7 +637,7 @@ wrapperTag: div
           >
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-success">
                     <i class="fas fa-check-circle" aria-hidden="true"></i>
                   </span>
@@ -650,7 +650,7 @@ wrapperTag: div
             </div>
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-warning">
                     <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                   </span>
@@ -674,7 +674,7 @@ wrapperTag: div
           >
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-warning">
                     <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                   </span>
@@ -687,7 +687,7 @@ wrapperTag: div
             </div>
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-danger">
                     <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                   </span>
@@ -767,7 +767,7 @@ wrapperTag: div
                 <div class="pf-v6-l-grid">
                   <div class="pf-v6-l-grid__item pf-m-3-col">
                     <svg
-                      class="pf-v6-c-spinner pf-m-md"
+                      class="pf-v6-c-spinner pf-m-inline"
                       role="progressbar"
                       viewBox="0 0 100 100"
                       aria-label="Loading"
@@ -801,7 +801,11 @@ wrapperTag: div
               <span class="pf-v6-c-description-list__text">
                 <div class="pf-v6-l-flex">
                   <div class="pf-v6-l-flex__item">
-                    <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+                    <span class="pf-v6-c-icon pf-m-inline">
+                      <span class="pf-v6-c-icon__content pf-m-success">
+                        <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+                      </span>
+                    </span>
                   </div>
                   <div class="pf-v6-l-flex__item">
                     <h3 class="pf-v6-c-title pf-m-md">Ready</h3>
@@ -824,7 +828,7 @@ wrapperTag: div
                 <div class="pf-v6-l-grid">
                   <div class="pf-v6-l-grid__item pf-m-3-col">
                     <svg
-                      class="pf-v6-c-spinner pf-m-md"
+                      class="pf-v6-c-spinner pf-m-inline"
                       role="progressbar"
                       viewBox="0 0 100 100"
                       aria-label="Loading"
@@ -858,7 +862,11 @@ wrapperTag: div
               <span class="pf-v6-c-description-list__text">
                 <div class="pf-v6-l-flex">
                   <div class="pf-v6-l-flex__item">
-                    <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+                    <span class="pf-v6-c-icon pf-m-inline">
+                      <span class="pf-v6-c-icon__content pf-m-success">
+                        <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+                      </span>
+                    </span>
                   </div>
                   <div class="pf-v6-l-flex__item">
                     <h3 class="pf-v6-c-title pf-m-md">Ready</h3>
@@ -1935,7 +1943,7 @@ wrapperTag: div
       <div class="pf-v6-l-flex pf-m-column">
         <span>System</span>
         <div class="pf-v6-l-flex pf-m-space-items-sm">
-          <span class="pf-v6-c-icon">
+          <span class="pf-v6-c-icon pf-m-inline">
             <span class="pf-v6-c-icon__content pf-m-danger">
               <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
             </span>
@@ -2907,7 +2915,7 @@ wrapperTag: div
           <dt class="pf-v6-c-description-list__term">
             <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-danger">
                     <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                   </span>
@@ -2936,7 +2944,7 @@ wrapperTag: div
           <dt class="pf-v6-c-description-list__term">
             <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-success">
                     <i class="fas fa-check-circle" aria-hidden="true"></i>
                   </span>
@@ -2966,7 +2974,7 @@ wrapperTag: div
             <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
                 <svg
-                  class="pf-v6-c-spinner pf-m-md"
+                  class="pf-v6-c-spinner pf-m-inline"
                   role="progressbar"
                   viewBox="0 0 100 100"
                   aria-label="Loading"
@@ -3003,7 +3011,7 @@ wrapperTag: div
           <dt class="pf-v6-c-description-list__term">
             <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-success">
                     <i class="fas fa-check-circle" aria-hidden="true"></i>
                   </span>

package/docs/demos/CardView/examples/CardView.md

@@ -254,6 +254,7 @@ section: patterns
               class="pf-v6-c-nav__subnav"
               aria-labelledby="card-view-basic-example-expandable-nav-link2"
               hidden
+              inert
             >
               <ul class="pf-v6-c-nav__list" role="list">
                 <li class="pf-v6-c-nav__item">
@@ -286,6 +287,7 @@ section: patterns
               class="pf-v6-c-nav__subnav"
               aria-labelledby="card-view-basic-example-expandable-nav-link3"
               hidden
+              inert
             >
               <ul class="pf-v6-c-nav__list" role="list">
                 <li class="pf-v6-c-nav__item">

package/docs/demos/Nav/examples/Nav.md

@@ -890,6 +890,7 @@ section: components
               class="pf-v6-c-nav__subnav"
               aria-labelledby="nav-expandable-example-expandable-nav-link2"
               hidden
+              inert
             >
               <ul class="pf-v6-c-nav__list" role="list">
                 <li class="pf-v6-c-nav__item">
@@ -922,6 +923,7 @@ section: components
               class="pf-v6-c-nav__subnav"
               aria-labelledby="nav-expandable-example-expandable-nav-link3"
               hidden
+              inert
             >
               <ul class="pf-v6-c-nav__list" role="list">
                 <li class="pf-v6-c-nav__item">

package/docs/layouts/Flex/examples/Flex.md

@@ -20,7 +20,7 @@ The flex layout provides two ways of spacing its direct children.
 
 ### Breakpoints
 
-[Breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl` are provided.
+[Breakpoints](/tokens/all-patternfly-tokens) `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl` are provided.
 
 ### Usefulness
 

package/docs/layouts/Gallery/examples/Gallery.md

@@ -174,5 +174,5 @@ The gallery layout is designed so that all of its children are of uniform size,
 | `.pf-v6-l-gallery` |  `<div>` |  Initializes a Gallery layout |
 | `.pf-v6-l-gallery__item` | `<div>` |  Explicitly sets the child for the gallery. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
 | `.pf-m-gutter` | `.pf-v6-l-gallery` | Adds space between children by using the globally defined gutter value. |
-| `--pf-v6-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the min value of `grid-template-columns` declaration at the optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `--pf-v6-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the max value of `grid-template-columns` declaration at the optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-v6-l-gallery--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the min value of `grid-template-columns` declaration at the optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-l-gallery--GridTemplateColumns--max{-on-[breakpoint]}: {width}` | `.pf-v6-l-gallery` | Modifies the max value of `grid-template-columns` declaration at the optional [breakpoint](/tokens/all-patternfly-tokens). |

package/docs/layouts/Grid/examples/Grid.md

@@ -318,7 +318,7 @@ The grid layout is based on CSS Grid’s two-dimensional system of columns and r
 | `.pf-v6-l-grid` | `<div>` | Initializes the grid layout. |
 | `.pf-v6-l-grid__item` | `<div>` | Explicitly sets a child of the grid. This class isn't necessary, but it is included to keep inline with BEM convention, and to provide an entity that will later be used for applying modifiers. |
 | `.pf-m-gutter` | `.pf-v6-l-grid` | Adds space between children by using the globally defined gutter value. |
-| `.pf-m-all-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid` | Defines grid item size on grid container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item size at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  Although not required, they are strongly suggested. If not used, grid item will default to 12 col. |
-| `.pf-m-{2-x}-row{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item row span at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes).  For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: .pf-m-8-col.pf-m-2-row + .pf-m-4-col + .pf-m-4-col. There is no limit to number of spanned rows. |
-| `--pf-v6-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-grid > .pf-v6-l-grid`, `.pf-v6-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-all-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid` | Defines grid item size on grid container at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-{1-12}-col{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item size at optional [breakpoint](/tokens/all-patternfly-tokens).  Although not required, they are strongly suggested. If not used, grid item will default to 12 col. |
+| `.pf-m-{2-x}-row{-on-[breakpoint]}` | `.pf-v6-l-grid__item` | Defines grid item row span at optional [breakpoint](/tokens/all-patternfly-tokens).  For row spans to function correctly, the value of of the current row plus the grid items to span must be equal to or less than 12. Example: `.pf-m-8-col.pf-m-2-row` + `.pf-m-4-col` + `.pf-m-4-col`. There is no limit to number of spanned rows. |
+| `--pf-v6-l-grid--item--Order{-on-[breakpoint]}: {order}` | `.pf-v6-l-grid > .pf-v6-l-grid`, `.pf-v6-l-grid__item` | Modifies the order of the grid layout element at optional [breakpoint](/tokens/all-patternfly-tokens). |

package/docs/utilities/Accessibility/examples/Accessibility.md

@@ -34,7 +34,7 @@ The text underneath is hidden.
 
 ### Overview
 
-[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-screen-reader-on-lg**
+[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-screen-reader-on-lg`
 
 ### Usage
 

package/docs/utilities/Alignment/examples/Alignment.md

@@ -23,7 +23,7 @@ section: utility-classes
 
 ### Overview
 
-[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-text-align-start-on-lg**
+[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-text-align-start-on-lg`
 
 ### Usage
 

package/docs/utilities/BackgroundColor/examples/BackgroundColor.md

@@ -28,7 +28,7 @@ Care should be taken especially when applying background colors, as this can hav
 
 Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utility-classes/text#inverse-colors).
 
-[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-background-color-disabled-on-lg**
+[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-background-color-disabled-on-lg`
 
 ### Usage
 

package/docs/utilities/Display/examples/Display.md

@@ -83,7 +83,7 @@ section: utility-classes
 
 ### Overview
 
-[Breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) is optional. Breakpoints: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. **Example .pf-v6-u-display-inline-block-on-lg**
+[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-display-inline-block-on-lg`
 
 ### Usage