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

package/docs/components/Alert/examples/Alert.md

@@ -727,6 +727,12 @@ For sighted users, interactive elements can be included in this message in one o
         <span class="pf-v6-screen-reader">Success alert:</span>
         Success toast alert title
       </p>
+      <div class="pf-v6-c-alert__description">
+        <p>
+          Info toast alert description. From the settings tab, click
+          <a href="#">View logs</a>&nbsp;to review the details.
+        </p>
+      </div>
       <div class="pf-v6-c-alert__action">
         <button
           class="pf-v6-c-button pf-m-plain"

package/docs/components/Avatar/examples/Avatar.md

@@ -88,7 +88,7 @@ The avatar component provides a default SVG icon. If an image is used it should
 | -- | -- | -- |
 | `.pf-v6-c-avatar` | `<img>` |  Initiates an avatar image. **Required** |
 | `.pf-m-bordered` | `.pf-v6-c-avatar` | Modifies an avatar to have a border. |
-| `.pf-m-sm{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-md{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** This is the default size. |
-| `.pf-m-lg{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-xl{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-sm{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-md{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/tokens/all-patternfly-tokens). **Note:** This is the default size. |
+| `.pf-m-lg{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-xl{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/tokens/all-patternfly-tokens). |

package/docs/components/Brand/examples/Brand.md

@@ -83,5 +83,5 @@ Simple brand component.
 | -- | -- | -- |
 | `.pf-v6-c-brand` | `<img>, <picture>` |  Initiates a brand image. **Required** |
 | `.pf-m-picture` | `.pf-v6-c-brand` |  Modifies a brand image to a picture. |
-| `--pf-v6-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-v6-c-brand` |  Modifies the width value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `--pf-v6-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-v6-c-brand` |  Modifies the height value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-v6-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-v6-c-brand` |  Modifies the width value of a picture on optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-v6-c-brand` |  Modifies the height value of a picture on optional [breakpoint](/tokens/all-patternfly-tokens). |

package/docs/components/Button/examples/Button.md

@@ -1999,6 +1999,32 @@ For when a plain/icon button is placed inline with text
 
 ```
 
+### Favorite
+
+A favorite button should use a plain button with the star icon. Applying `.pf-m-favorited` to the button initiates a microanimation and indicates that the item is favorited.
+
+```html
+<button
+  class="pf-v6-c-button pf-m-favorite pf-m-plain"
+  type="button"
+  aria-label="not starred"
+>
+  <span class="pf-v6-c-button__icon">
+    <i class="fas fa-star" aria-hidden="true"></i>
+  </span>
+</button>
+<button
+  class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
+  type="button"
+  aria-label="starred"
+>
+  <span class="pf-v6-c-button__icon">
+    <i class="fas fa-star" aria-hidden="true"></i>
+  </span>
+</button>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -2052,3 +2078,6 @@ Semantic buttons and links are important for usability as well as accessibility.
 | `.pf-m-progress` | `.pf-v6-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
 | `.pf-m-in-progress` | `.pf-v6-c-button` | Indicates that the button is in the in progress state. |
 | `.pf-m-stateful` | `.pf-v6-c-button` | Indicates that the button is used for one of read, unread, and attention states. **Note:** Always use with a modifier of `.pf-m-read`, `.pf-m-unread`, or `.pf-m-attention`. |
+| `.pf-m-notify` | `.pf-v6-c-button` | Indicates that the button should show the user notification of an event. **Note:** This is intended for use with a bell icon in the notification badge. |
+| `.pf-m-favorite` | `.pf-v6-c-button .pf-m-plain` | Modifies a plain button to be a favorite button. **Note:** This is intended for use with a star icon. |
+| `.pf-m-favorited` | `.pf-v6-c-button .pf-m-plain .pf-m-favorite` | Modifies a favorite button to indicate that item is favorited.  |

package/docs/components/Card/examples/Card.md

@@ -212,6 +212,35 @@ cssPrefix: pf-v6-c-card
 
 ```
 
+### Card with header that wraps
+
+```html
+<div class="pf-v6-c-card">
+  <div class="pf-v6-c-card__header pf-m-wrap">
+    <div class="pf-v6-c-card__actions pf-m-no-offset">
+      <button class="pf-v6-c-button pf-m-primary" type="button">
+        <span class="pf-v6-c-button__text">Primary action</span>
+      </button>
+
+      <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <span class="pf-v6-c-button__text">Secondary action</span>
+      </button>
+
+      <button class="pf-v6-c-button pf-m-tertiary" type="button">
+        <span class="pf-v6-c-button__text">Tertiary action</span>
+      </button>
+    </div>
+    <div class="pf-v6-c-card__title">
+      <h2
+        class="pf-v6-c-card__title-text"
+      >This is a longer card title that takes up more space</h2>
+    </div>
+  </div>
+  <div class="pf-v6-c-card__body">This is the card body</div>
+</div>
+
+```
+
 ### Actions with no offset
 
 ```html
@@ -1690,6 +1719,7 @@ A card is a generic rectangular container that can be used to build other compon
 | `.pf-v6-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-v6-c-card` appear focused. |
 | `.pf-m-compact` | `.pf-v6-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
 | `.pf-m-display-lg` | `.pf-v6-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
+| `.pf-m-wrap` | `.pf-v6-c-card__header` | Modifies the card header to wrap its children. |
 | `.pf-m-no-fill` | `.pf-v6-c-card__body` | Sets a `.pf-v6-c-card__body` not to fill the available space in `.pf-v6-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
 | `.pf-m-selectable` | `.pf-v6-c-card` | Modifies a card to be selectable.  |
 | `.pf-m-clickable` | `.pf-v6-c-card` | Modifies a card to be clickable. |

package/docs/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -503,6 +503,34 @@ cssPrefix: pf-v6-c-clipboard-copy
 
 ```
 
+### Inline compact with truncation
+
+```html
+<div class="pf-v6-c-clipboard-copy pf-m-inline pf-m-truncate">
+  <span class="pf-v6-c-clipboard-copy__text">
+    <span class="pf-v6-c-truncate">
+      <span
+        class="pf-v6-c-truncate__start"
+      >This lengthy, copyable content will be truncated with default settings when the truncation prop is simply set to true. This is useful for quickly applying truncation without needing to worry about any other properties to set.</span>
+    </span>
+  </span>
+  <span class="pf-v6-c-clipboard-copy__actions">
+    <span class="pf-v6-c-clipboard-copy__actions-item">
+      <button
+        class="pf-v6-c-button pf-m-no-padding pf-m-plain"
+        type="button"
+        aria-label="Copy to clipboard"
+      >
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-copy" aria-hidden="true"></i>
+        </span>
+      </button>
+    </span>
+  </span>
+</div>
+
+```
+
 ## Documentation
 
 ### Accessibility
@@ -529,6 +557,7 @@ cssPrefix: pf-v6-c-clipboard-copy
 | `.pf-v6-c-clipboard-copy__actions-item` | `<span>` | Initiates the inline copy clipboard actions item element. **Required** |
 | `.pf-m-inline` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for inline styles. |
 | `.pf-m-block` | `.pf-v6-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting. |
+| `.pf-m-truncate` | `.pf-v6-c-clipboard-copy.pf-m-truncate` | Modifies the inline copy clipboard component for use with text used in trucate component. |
 | `.pf-m-expanded` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state. |
 | `.pf-m-expanded` | `.pf-v6-c-button.pf-m-control` | Modifies the control toggle button for the expanded state. |
 | `.pf-m-code` | `code.pf-v6-c-clipboard-copy__text` | Modifies the inline copy clipboard text styles for use with the `<code>` element. |

package/docs/components/DataList/examples/DataList.md

@@ -316,8 +316,8 @@ When a list item includes more than one block of content, it can be difficult fo
 | `.pf-v6-c-data-list__item-action` | `<div>` | Initiates a container for the data list actions. For example, add `.pf-v6-c-data-list__action` here. **Required** |
 | `.pf-v6-c-data-list__check`  | `<div>` | Initiates a data list check cell. **Required** |
 | `.pf-v6-c-data-list__action` | `<div>` | Initiates a data list action button cell. **Required** |
-| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Hides an actions container at optional [breakpoint](/tokens/all-patternfly-tokens), or hides it at all breakpoints with `.pf-m-hidden`. |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-data-list__item-action` | Shows an actions container at optional [breakpoint](/tokens/all-patternfly-tokens). |
 
 ### Expandable
 
@@ -2244,4 +2244,4 @@ The DataList component provides a flexible alternative to the Table component, w
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-v6-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |
+| `.pf-m-grid{-[none, sm, md, lg, xl, 2xl]}` | `.pf-v6-c-data-list` | Modifies the data list to switch to a grid layout at a specified [breakpoint](/tokens/all-patternfly-tokens). `.pf-m-grid` will display the grid layout at all breakpoints. `.pf-m-grid-none` will display the desktop layout at all breakpoints. **Note:** Without a grid modifier, the data list will display the grid layout by default and switch to the desktop layout at a medium breakpoint. |

package/docs/components/DescriptionList/examples/DescriptionList.md

@@ -1613,8 +1613,8 @@ Cards can be used as description list group wrappers. Using cards in this way ap
 | `.pf-m-auto-column-widths` | `.pf-v6-c-description-list` | Modifies the description list to format automatically. |
 | `.pf-m-inline-grid` | `.pf-v6-c-description-list` | Modifies the description list display to inline-grid. |
 | `.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-description-list` | Modifies the description list number of columns. |
-| `--pf-v6-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `--pf-v6-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-v6-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list` | Modifies the min value of the `grid-template-columns` declaration at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}` | `.pf-v6-c-description-list.pf-m-horizontal` | Modifies the description list term width at optional [breakpoint](/tokens/all-patternfly-tokens). |
 
 <!-- | `.pf-m-order[0-12]{-on-[breakpoint]}` | `.pf-v6-c-description-list__group` | Modifies the order of the flex layout element. |
 | `.pf-m-order-first{-on-[breakpoint]}` | `.pf-v6-c-description-list__group` | Modifies the order of the flex layout element to -1. |

package/docs/components/Divider/examples/Divider.md

@@ -134,5 +134,5 @@ The divider renders as an `<hr>` by default. It is possible to make the divider
 | `.pf-v6-c-divider` | `<hr>`, `<li>`, `<div>` | Defines the divider component. |
 | `.pf-m-vertical` | `.pf-v6-c-divider` | Modifies the divider component from horizontal to vertical. This modifier requires that the parent has an explicit or implicit height, or has a flex or grid based layout parent. |
 | `.pf-m-inset-{none, sm, md, lg, xl, 2xl, 3xl}{-on-[sm, md, lg, xl, 2xl]}` | `.pf-v6-c-divider` | Modifies divider padding/inset to visually match padding of other adjacent components. |
-| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be hidden, at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/tokens/all-patternfly-tokens). |

package/docs/components/Drawer/examples/Drawer.md

@@ -808,15 +808,15 @@ cssPrefix: pf-v6-c-drawer
 | `.pf-m-panel-left` | `.pf-v6-c-drawer` | Modifies the drawer panel to expand from the left. |
 | `.pf-m-panel-bottom` | `.pf-v6-c-drawer` | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height. |
 | `.pf-m-expanded` | `.pf-v6-c-drawer` | Modifies the drawer panel for the expanded state. |
-| `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) will default to the `md` breakpoint. |
+| `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-inline{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer so the content element and panel element are displayed side by side. `.pf-m-inline` used without a [breakpoint](/tokens/all-patternfly-tokens) will default to the `md` breakpoint. |
 | `.pf-m-no-border` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel border treatment to disable all border treatment. |
 | `.pf-m-padding` | `.pf-v6-c-drawer__body` | Modifies the element to add padding. |
 | `.pf-m-no-padding` | `.pf-v6-c-drawer__body` | Modifies the element to remove padding. |
 | `.pf-m-no-background` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__panel` | Modifies the drawer element background color to transparent. |
 | `.pf-m-primary` | `.pf-v6-c-drawer__content` | Modifies the drawer content to use the primary background color. |
 | `.pf-m-secondary` | `.pf-v6-c-drawer__section`, `.pf-v6-c-drawer__content`, `.pf-v6-c-drawer__panel` | Modifies the drawer element to use the secondary background color. |
-| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/tokens/all-patternfly-tokens). |
 | `.pf-m-resizable` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel to be resizable. Intended for use with the `.pf-v6-c-drawer__splitter` element. |
 | `--pf-v6-c-drawer__panel--md--FlexBasis--min` | `.pf-v6-c-drawer__panel` | Defines the drawer panel minimum size. |
 | `--pf-v6-c-drawer__panel--md--FlexBasis` | `.pf-v6-c-drawer__panel` | Defines the drawer panel size. |

package/docs/components/JumpLinks/examples/JumpLinks.md

@@ -752,7 +752,7 @@ cssPrefix: pf-v6-c-jump-links
 | `.pf-v6-c-jump-links__link-text` | `<div>` | Initiates the jump links link text. |
 | `.pf-m-vertical` | `.pf-v6-c-jump-links` | Modifies the jump links component to be vertical. |
 | `.pf-m-center` | `.pf-v6-c-jump-links` | Modifies the jump links component to center its list and label. |
-| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-v6-c-jump-links` | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical jump links only. |
-| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v6-c-jump-links` | Modifies the jump links 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-jump-links` | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/tokens/all-patternfly-tokens). **Note:** works with vertical jump links only. |
+| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v6-c-jump-links` | Modifies the jump links component to be non-expandable at optional [breakpoint](/tokens/all-patternfly-tokens). |
 | `.pf-m-expanded` | `.pf-v6-c-jump-links` | Modifies the expandable jump links component for the expanded state. |
 | `.pf-m-current` | `.pf-v6-c-jump-links__item`| Modifies the jump links item to be current. |

package/docs/components/Masthead/examples/masthead.md

@@ -618,4 +618,4 @@ cssPrefix: pf-v6-c-masthead
 | `.pf-v6-c-masthead__brand` | `<div>` | Initiates the masthead content component. |
 | `.pf-v6-c-masthead__logo` | `<a>, <div>` | Initiates the masthead content component. |
 | `.pf-v6-c-masthead__content` | `<div>` | Initiates the masthead content component. |
-| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-masthead` | Modifies masthead 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-[breakpoint]}` | `.pf-v6-c-masthead` | Modifies masthead horizontal padding at optional [breakpoint](/tokens/all-patternfly-tokens). |

package/docs/components/Menu/examples/Menu.md

@@ -5640,9 +5640,9 @@ cssPrefix: pf-v6-c-menu
             </span>
             <span class="pf-v6-c-menu__item-description">This is a description</span>
           </a>
-          <div class="pf-v6-c-menu__item-action pf-m-favorited">
+          <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Starred"
@@ -5666,9 +5666,9 @@ cssPrefix: pf-v6-c-menu
             </span>
             <span class="pf-v6-c-menu__item-description">This is a description</span>
           </a>
-          <div class="pf-v6-c-menu__item-action pf-m-favorited">
+          <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Starred"
@@ -5699,7 +5699,7 @@ cssPrefix: pf-v6-c-menu
           </a>
           <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Not starred"
@@ -5728,7 +5728,7 @@ cssPrefix: pf-v6-c-menu
           </a>
           <div class="pf-v6-c-menu__item-action">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorite pf-m-plain"
               type="button"
               role="menuitem"
               aria-label="Not starred"
@@ -6334,8 +6334,8 @@ cssPrefix: pf-v6-c-menu
 | `.pf-v6-c-menu__item-action-icon` | `<span>` | Initiates the menu item action icon. |
 | `.pf-v6-c-menu__item-external-icon` | `<span>` | Initiates the menu item external icon. |
 | `.pf-v6-c-menu__footer` | `<div>` | Initiates the menu footer. |
-| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-menu__list`, `.pf-v6-c-menu__list-item`, `.pf-v6-c-menu__group` | Modifies a menu element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-menu__list`, `.pf-v6-c-menu__list-item`, `.pf-v6-c-menu__group` | Modifies a menu element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-menu__list`, `.pf-v6-c-menu__list-item`, `.pf-v6-c-menu__group` | Modifies a menu element to be hidden, at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-menu__list`, `.pf-v6-c-menu__list-item`, `.pf-v6-c-menu__group` | Modifies a menu element to be shown, at optional [breakpoint](/tokens/all-patternfly-tokens). |
 | `.pf-m-favorite` | `.pf-v6-c-menu__item-action` | Modifies the menu item action to handle the favorite icon. |
 | `.pf-m-favorited` | `.pf-v6-c-menu__item-action.pf-m-favorite` | Modifies the menu item action icon to be favorited. |
 | `.pf-m-selected` | `.pf-v6-c-menu__item` | Modifies the menu item to be selected. |

package/docs/components/Nav/examples/Navigation.md

@@ -230,6 +230,7 @@ cssPrefix: pf-v6-c-nav
         class="pf-v6-c-nav__subnav"
         aria-labelledby="expandable-example3"
         hidden
+        inert
       >
         <ul class="pf-v6-c-nav__list" role="list">
           <li class="pf-v6-c-nav__item">
@@ -376,6 +377,7 @@ cssPrefix: pf-v6-c-nav
         class="pf-v6-c-nav__subnav"
         aria-labelledby="nav-mixed-link4"
         hidden
+        inert
       >
         <ul class="pf-v6-c-nav__list" role="list">
           <li class="pf-v6-c-nav__item">
@@ -442,6 +444,7 @@ cssPrefix: pf-v6-c-nav
         class="pf-v6-c-nav__subnav"
         aria-labelledby="expandable-third-level-example-example-1"
         hidden
+        inert
       >
         <ul class="pf-v6-c-nav__list" role="list">
           <li class="pf-v6-c-nav__item">

package/docs/components/Page/examples/Page.md

@@ -417,8 +417,8 @@ This component provides the basic chrome for a page, including sidebar and main
 | `.pf-m-page-insets` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
 | `.pf-m-context-selector` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body to contain a context selector. |
 | `.pf-m-inset-none` | `.pf-v6-c-page__sidebar-body` | Removes a sidebar body left/right inset. |
-| `.pf-m-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
-| `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/tokens/all-patternfly-tokens). Should be used with pf-m-no-padding. |
+| `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/tokens/all-patternfly-tokens). |
 | `.pf-m-fill` | `.pf-v6-c-page__main-container`, `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element to grow to fill the available space. Note that `.pf-v6-c-page__main-container` must also have `.pf-m-fill` applied in order for the section to have space to stretch to full height.|
 | `.pf-m-no-fill` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__main-group`, `.pf-v6-c-page__main-wizard`, `.pf-v6-c-page__sidebar-body` | Modifies the element not to grow to fill the available vertical space. |
 | `.pf-m-limit-width` | `.pf-v6-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |

package/docs/components/Pagination/examples/Pagination.md

@@ -1113,13 +1113,13 @@ cssPrefix: pf-v6-c-pagination
 | `.pf-v6-c-pagination__nav` | `<nav>` |  Initiates pagination nav. |
 | `.pf-v6-c-pagination__nav-control` | `<div>` |  Initiates pagination nav control. |
 | `.pf-v6-c-pagination__nav-page-select` | `<div>` |  Initiates pagination nav page select. |
-| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/tokens/all-patternfly-tokens). |
 | `.pf-m-bottom` | `.pf-v6-c-pagination` | Modifies for bottom pagination component styles. |
 | `.pf-m-compact` | `.pf-v6-c-pagination` | Modifies for compact pagination component styles. |
 | `.pf-m-static` | `.pf-v6-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
 | `.pf-m-sticky` | `.pf-v6-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-v6-c-pagination.pf-m-bottom`. |
-| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies pagination 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-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies pagination horizontal padding at optional [breakpoint](/tokens/all-patternfly-tokens). |
 | `.pf-m-page-insets` | `.pf-v6-c-pagination` |  Modifies the pagination component padding/inset to visually match padding of page elements. |
 | `.pf-m-first` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the first page button. |
 | `.pf-m-prev` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the previous page button. |

package/docs/components/ProgressStepper/examples/ProgressStepper.md

@@ -933,8 +933,8 @@ Steps can be modified with `.pf-m-success`, `.pf-m-warning`, `.pf-m-danger`, `.p
 | `.progress-stepper__step-title` | `<div>`, `<button>` | Contains the title of the step. **Note:** the step title is a `<button>` when it has `.pf-m-help-text` and is used to trigger a popover with help text. |
 | `.progress-stepper__step-description` | `<div>` | Contains the description of the step. |
 | `.pf-m-center`| `.pf-v6-c-progress-stepper` | Modifies to center each step. |
-| `.pf-m-vertical{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper vertical layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-horizontal{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper horizontal layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-vertical{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper vertical layout at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-horizontal{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper horizontal layout at optional [breakpoint](/tokens/all-patternfly-tokens). |
 | `.pf-m-compact`| `.pf-v6-c-progress-stepper` | Modifies for compact styling. |
 | `.pf-m-success`| `.pf-v6-c-progress-stepper__step` | Modifies for success styling. |
 | `.pf-m-warning`| `.pf-v6-c-progress-stepper__step` | Modifies for warning styling. |

package/docs/components/Sidebar/examples/Sidebar.md

@@ -265,6 +265,6 @@ cssPrefix: pf-v6-c-sidebar
 | `.pf-m-panel-right` | `.pf-v6-c-sidebar` | Modifies the sidebar to place the panel to the right of the content. |
 | `.pf-m-sticky` | `.pf-v6-c-sidebar__panel` | Modifies the panel to be sticky to the top of the layout. |
 | `.pf-m-static` | `.pf-v6-c-sidebar__panel` | Modifies the panel to be positioned statically. |
-| `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-sidebar__panel` | Modifies the panel width at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** does not apply when the panel is stacked on top of the content. |
+| `.pf-m-width-{default, 25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-sidebar__panel` | Modifies the panel width at optional [breakpoint](/tokens/all-patternfly-tokens). **Note:** does not apply when the panel is stacked on top of the content. |
 | `.pf-m-no-background` | `.pf-v6-c-sidebar`, `.pf-v6-c-sidebar__panel, .pf-v6-c-sidebar__content` | Modifies the element to have a transparent background. |
 | `.pf-m-secondary` | `.pf-v6-c-sidebar__panel, .pf-v6-c-sidebar__content` | Modifies the element to have secondary styling. |

package/docs/components/Table/examples/Table.md

@@ -136,7 +136,7 @@ These classes can be used to ensure that the table changes between the tabular a
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-v6-c-table` | Changes tabular layout to responsive, grid based layout at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-v6-c-table` | Changes tabular layout to responsive, grid based layout at optional [breakpoint](/tokens/all-patternfly-tokens). |
 | `.pf-m-grid` | `.pf-v6-c-table` | Changes tabular layout to responsive, grid based layout. This approach requires JavaScript to set this class at some prescribed viewport width value. |
 
 ## Sortable
@@ -15516,8 +15516,8 @@ Width modifiers control the width of the columns. To control the responsive beha
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-table tr > th`, `.pf-v6-c-table tr > td` | Hides a table cell at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes), or hides it at all breakpoints with `.pf-m-hidden`. **Note: Needs to apply to all cells in the column you want to hide.** |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-table tr > th`, `.pf-v6-c-table tr > td` | Shows a table cell at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-table tr > th`, `.pf-v6-c-table tr > td` | Hides a table cell at optional [breakpoint](/tokens/all-patternfly-tokens), or hides it at all breakpoints with `.pf-m-hidden`. **Note: Needs to apply to all cells in the column you want to hide.** |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-table tr > th`, `.pf-v6-c-table tr > td` | Shows a table cell at optional [breakpoint](/tokens/all-patternfly-tokens). |
 
 ## Text control modifiers
 
@@ -20222,12 +20222,9 @@ For sticky columns to function correctly, the parent table's width must be contr
         </label>
       </td>
 
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-favorite-button1"
@@ -20284,7 +20281,7 @@ For sticky columns to function correctly, the parent table's width must be contr
 
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-favorite-button2"
@@ -20337,12 +20334,9 @@ For sticky columns to function correctly, the parent table's width must be contr
         </label>
       </td>
 
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-favorite-button3"
@@ -20397,7 +20391,7 @@ For sticky columns to function correctly, the parent table's width must be contr
 
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-favorite-button4"
@@ -20459,7 +20453,7 @@ For sticky columns to function correctly, the parent table's width must be contr
         <div class="pf-v6-c-action-list pf-m-icons">
           <div class="pf-v6-c-action-list__item">
             <button
-              class="pf-v6-c-button pf-m-plain"
+              class="pf-v6-c-button pf-m-favorite pf-m-plain"
               type="button"
               aria-label="Favorite all"
             >
@@ -20502,12 +20496,9 @@ For sticky columns to function correctly, the parent table's width must be contr
 
   <tbody class="pf-v6-c-table__tbody" role="rowgroup">
     <tr class="pf-v6-c-table__tr" role="row">
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-sortable-favorite-button1"
@@ -20534,12 +20525,9 @@ For sticky columns to function correctly, the parent table's width must be contr
     </tr>
 
     <tr class="pf-v6-c-table__tr" role="row">
-      <td
-        class="pf-v6-c-table__td pf-v6-c-table__favorite pf-m-favorited"
-        role="cell"
-      >
+      <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorited pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Starred"
           id="table-favorites-sortable-favorite-button3"
@@ -20566,7 +20554,7 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr class="pf-v6-c-table__tr" role="row">
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-sortable-favorite-button2"
@@ -20593,7 +20581,7 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr class="pf-v6-c-table__tr" role="row">
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-sortable-favorite-button4"
@@ -20620,7 +20608,7 @@ For sticky columns to function correctly, the parent table's width must be contr
     <tr class="pf-v6-c-table__tr" role="row">
       <td class="pf-v6-c-table__td pf-v6-c-table__favorite" role="cell">
         <button
-          class="pf-v6-c-button pf-m-plain"
+          class="pf-v6-c-button pf-m-favorite pf-m-plain"
           type="button"
           aria-label="Not starred"
           id="table-favorites-sortable-favorite-button5"