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

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

@@ -1,39 +1,39 @@
 ---
 id: Toolbar
 section: components
-cssPrefix: pf-v5-c-toolbar
+cssPrefix: pf-v6-c-toolbar
 ---import './Toolbar.css'
 
 <!-- TODO: add documentation for resize observer/responsive variable usage -->
 
-Toolbar relies on groups (`.pf-v5-c-toolbar__group`) and items (`.pf-v5-c-toolbar__item`), with default col/row gap values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. The default `column-gap` value for items and groups is set to `--pf-v5-c--ColumnGap`, whose value is `--pf-t--global--spacer--sm` or 8px.
+Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolbar__item`), with default col/row gap values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. The default `column-gap` value for items and groups is set to `--pf-v6-c--ColumnGap`, whose value is `--pf-t--global--spacer--sm` or 8px.
 
 ### Default spacing for items and groups:
 
 | Class | CSS Variable | Computed Value |
 | -- | -- | -- |
-| `.pf-v5-c-toolbar__group` | `--pf-v5-c-toolbar__group--ColumnGap` | `8px` |
-| `.pf-v5-c-toolbar__item` | `--pf-v5-c-toolbar__item--ColumnGap` | `8px` |
+| `.pf-v6-c-toolbar__group` | `--pf-v6-c-toolbar__group--ColumnGap` | `8px` |
+| `.pf-v6-c-toolbar__item` | `--pf-v6-c-toolbar__item--ColumnGap` | `8px` |
 
 ### Toolbar item types
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-pagination` | `.pf-v5-c-toolbar__item` | Initiates pagination and margin. |
+| `.pf-m-pagination` | `.pf-v6-c-toolbar__item` | Initiates pagination and margin. |
 
 ### Modifiers
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-[hidden/visible]` | `.pf-v5-c-toolbar > *` | Modifies toolbar element to be hidden/visible. |
-| `.pf-m-flex-grow` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element to `flex-grow: 1`, allowing it to consume available main-axis space. |
-| `.pf-m-align-[start/end]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
-| `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
-| `.pf-m-align-self-[stretch/baseline/start/center/end]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) self alignment. |
+| `.pf-m-[hidden/visible]` | `.pf-v6-c-toolbar > *` | Modifies toolbar element to be hidden/visible. |
+| `.pf-m-flex-grow` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element to `flex-grow: 1`, allowing it to consume available main-axis space. |
+| `.pf-m-align-[start/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
+| `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__content`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
+| `.pf-m-align-self-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) self alignment. |
 
 ### Special notes
 
-Several components in the following examples do not include functional and/or accessibility specifications (for example `.pf-v5-c-select`, `.pf-v5-c-options-menu`). Rather, `.pf-v5-c-toolbar` focuses on functionality and accessibility specifications that apply to it only.
+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`.**
 
@@ -68,8 +68,8 @@ Several components in the following examples do not include functional and/or ac
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-toolbar__item` | `<div>` | Initiates the toolbar component item. **Required** |
-| `.pf-v5-c-toolbar__group` | `<div>` | Initiates the toolbar component group. |
+| `.pf-v6-c-toolbar__item` | `<div>` | Initiates the toolbar component item. **Required** |
+| `.pf-v6-c-toolbar__group` | `<div>` | Initiates the toolbar component group. |
 
 ### Adjusted group column gap
 
@@ -136,8 +136,8 @@ Several components in the following examples do not include functional and/or ac
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-column-gap-[none/sm/md/lg]` | `.pf-v5-c-toolbar__group` | Modifies toolbar group child spacing. |
-| `.pf-m-inset-[none/sm/md/lg/xl/2xl]` | `.pf-v5-c-toolbar` | Modifies toolbar horizontal. |
+| `.pf-m-column-gap-[none/sm/md/lg]` | `.pf-v6-c-toolbar__group` | Modifies toolbar group child spacing. |
+| `.pf-m-inset-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar` | Modifies toolbar horizontal. |
 
 ### Width control
 
@@ -148,7 +148,7 @@ Several components in the following examples do not include functional and/or ac
       <div class="pf-v6-c-toolbar__group">
         <div
           class="pf-v6-c-toolbar__item"
-          style="--pf-v5-c-toolbar__item--Width: 80px; --pf-v5-c-toolbar__item--Width-on-xl: 10rem"
+          style="--pf-v6-c-toolbar__item--Width: 80px; --pf-v6-c-toolbar__item--Width-on-xl: 10rem"
         >Item</div>
         <div class="pf-v6-c-toolbar__item">Item</div>
       </div>
@@ -165,8 +165,8 @@ Several components in the following examples do not include functional and/or ac
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `--pf-v5-c-toolbar__item--Width: {width}` | `.pf-v5-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-v5-c-toolbar__item--MinWidth: {width}` | `.pf-v5-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](/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). |
 
 ### Group types
 
@@ -271,8 +271,8 @@ Several components in the following examples do not include functional and/or ac
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group column gap. |
-| `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group column gap. |
+| `.pf-m-filter-group` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap. |
+| `.pf-m-icon-button-group` | `.pf-v6-c-toolbar__group` | Modifies toolbar group column gap. |
 
 ### Toggle group
 
@@ -290,19 +290,7 @@ Several components in the following examples do not include functional and/or ac
             aria-controls="toolbar-toggle-group-example-expandable-content"
           >
             <span class="pf-v6-c-menu-toggle__icon">
-              <svg
-                class="pf-v5-svg"
-                viewBox="0 0 192 512"
-                fill="currentColor"
-                aria-hidden="true"
-                role="img"
-                width="1em"
-                height="1em"
-              >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+              <i class="fas fa-filter" aria-hidden="true"></i>
             </span>
           </button>
         </div>
@@ -320,19 +308,7 @@ Several components in the following examples do not include functional and/or ac
                 id="toolbar-toggle-group-example-search-filter-menu"
               >
                 <span class="pf-v6-c-menu-toggle__icon">
-                  <svg
-                    class="pf-v5-svg"
-                    viewBox="0 0 192 512"
-                    fill="currentColor"
-                    aria-hidden="true"
-                    role="img"
-                    width="1em"
-                    height="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
+                  <i class="fas fa-filter" aria-hidden="true"></i>
                 </span>
                 <span class="pf-v6-c-menu-toggle__text">Name</span>
                 <span class="pf-v6-c-menu-toggle__controls">
@@ -422,19 +398,7 @@ Several components in the following examples do not include functional and/or ac
             aria-controls="toolbar-toggle-group-collapsed-example-expandable-content"
           >
             <span class="pf-v6-c-menu-toggle__icon">
-              <svg
-                class="pf-v5-svg"
-                viewBox="0 0 192 512"
-                fill="currentColor"
-                aria-hidden="true"
-                role="img"
-                width="1em"
-                height="1em"
-              >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+              <i class="fas fa-filter" aria-hidden="true"></i>
             </span>
           </button>
         </div>
@@ -458,19 +422,7 @@ Several components in the following examples do not include functional and/or ac
               id="toolbar-toggle-group-collapsed-example-search-filter-menu"
             >
               <span class="pf-v6-c-menu-toggle__icon">
-                <svg
-                  class="pf-v5-svg"
-                  viewBox="0 0 192 512"
-                  fill="currentColor"
-                  aria-hidden="true"
-                  role="img"
-                  width="1em"
-                  height="1em"
-                >
-                  <path
-                    d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                  />
-                </svg>
+                <i class="fas fa-filter" aria-hidden="true"></i>
               </span>
               <span class="pf-v6-c-menu-toggle__text">Name</span>
               <span class="pf-v6-c-menu-toggle__controls">
@@ -546,24 +498,24 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `hidden` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__toggle`, `.pf-v5-c-toolbar__expandable-content` |  Indicates that the toggle group element is hidden. **Required** |
-| `aria-expanded="[true/false]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` |  Indicates that the expandable content is visible/hidden. **Required** |
-| `aria-controls="[id of expandable content]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` |  Identifies the expanded content controlled by the toggle button. **Required** |
-| `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
+| `hidden` | `.pf-v6-c-toolbar__item`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__toggle`, `.pf-v6-c-toolbar__expandable-content` |  Indicates that the toggle group element is hidden. **Required** |
+| `aria-expanded="[true/false]"` | `.pf-v6-c-toolbar__toggle > .pf-v6-c-button` |  Indicates that the expandable content is visible/hidden. **Required** |
+| `aria-controls="[id of expandable content]"` | `.pf-v6-c-toolbar__toggle > .pf-v6-c-button` |  Identifies the expanded content controlled by the toggle button. **Required** |
+| `id="[expandable-content_id]"` | `.pf-v6-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
 
 ### Responsive attributes
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-haspopup=true` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` | When expandable content appears above content (mobile viewport), `aria-haspopup=true` should be applied to indicate that focus should be trapped. **Required** |
+| `aria-haspopup=true` | `.pf-v6-c-toolbar__toggle > .pf-v6-c-button` | When expandable content appears above content (mobile viewport), `aria-haspopup=true` should be applied to indicate that focus should be trapped. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-[show/hide][-on-[sm/md/lg/xl/2xl]]` | `.pf-v5-c-toolbar__group.pf-m-toggle-group`, `.pf-v5-c-toolbar__expandable-content` | Modifies toolbar element visibility. |
-| `.pf-m-chip-container` | `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
-| `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content`, `.pf-v5-c-toolbar__toggle` | Modifies the component for the expanded state. |
+| `.pf-m-[show/hide][-on-[sm/md/lg/xl/2xl]]` | `.pf-v6-c-toolbar__group.pf-m-toggle-group`, `.pf-v6-c-toolbar__expandable-content` | Modifies toolbar element visibility. |
+| `.pf-m-chip-container` | `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
+| `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content`, `.pf-v6-c-toolbar__toggle` | Modifies the component for the expanded state. |
 
 ### Selected
 
@@ -619,19 +571,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
             aria-controls="toolbar-selected-filters-toggle-group-collapsed-example-expandable-content"
           >
             <span class="pf-v6-c-menu-toggle__icon">
-              <svg
-                class="pf-v5-svg"
-                viewBox="0 0 192 512"
-                fill="currentColor"
-                aria-hidden="true"
-                role="img"
-                width="1em"
-                height="1em"
-              >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+              <i class="fas fa-filter" aria-hidden="true"></i>
             </span>
           </button>
         </div>
@@ -649,19 +589,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
                 id="toolbar-selected-filters-toggle-group-collapsed-example-search-filter-menu"
               >
                 <span class="pf-v6-c-menu-toggle__icon">
-                  <svg
-                    class="pf-v5-svg"
-                    viewBox="0 0 192 512"
-                    fill="currentColor"
-                    aria-hidden="true"
-                    role="img"
-                    width="1em"
-                    height="1em"
-                  >
-                    <path
-                      d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                    />
-                  </svg>
+                  <i class="fas fa-filter" aria-hidden="true"></i>
                 </span>
                 <span class="pf-v6-c-menu-toggle__text">Name</span>
                 <span class="pf-v6-c-menu-toggle__controls">
@@ -1012,19 +940,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
             aria-controls="toolbar-selected-filters-toggle-group-expanded-example-expandable-content"
           >
             <span class="pf-v6-c-menu-toggle__icon">
-              <svg
-                class="pf-v5-svg"
-                viewBox="0 0 192 512"
-                fill="currentColor"
-                aria-hidden="true"
-                role="img"
-                width="1em"
-                height="1em"
-              >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+              <i class="fas fa-filter" aria-hidden="true"></i>
             </span>
           </button>
         </div>
@@ -1093,19 +1009,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
               id="toolbar-selected-filters-toggle-group-expanded-example-search-filter-menu"
             >
               <span class="pf-v6-c-menu-toggle__icon">
-                <svg
-                  class="pf-v5-svg"
-                  viewBox="0 0 192 512"
-                  fill="currentColor"
-                  aria-hidden="true"
-                  role="img"
-                  width="1em"
-                  height="1em"
-                >
-                  <path
-                    d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                  />
-                </svg>
+                <i class="fas fa-filter" aria-hidden="true"></i>
               </span>
               <span class="pf-v6-c-menu-toggle__text">Name</span>
               <span class="pf-v6-c-menu-toggle__controls">
@@ -1390,19 +1294,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
             aria-controls="toolbar-selected-filters-example-expandable-content"
           >
             <span class="pf-v6-c-menu-toggle__icon">
-              <svg
-                class="pf-v5-svg"
-                viewBox="0 0 192 512"
-                fill="currentColor"
-                aria-hidden="true"
-                role="img"
-                width="1em"
-                height="1em"
-              >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+              <i class="fas fa-filter" aria-hidden="true"></i>
             </span>
           </button>
         </div>
@@ -1721,19 +1613,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
             aria-controls="toolbar-stacked-example-expandable-content"
           >
             <span class="pf-v6-c-menu-toggle__icon">
-              <svg
-                class="pf-v5-svg"
-                viewBox="0 0 192 512"
-                fill="currentColor"
-                aria-hidden="true"
-                role="img"
-                width="1em"
-                height="1em"
-              >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+              <i class="fas fa-filter" aria-hidden="true"></i>
             </span>
           </button>
         </div>
@@ -2072,19 +1952,7 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
             aria-controls="toolbar-stacked-collapsed-example-expandable-content"
           >
             <span class="pf-v6-c-menu-toggle__icon">
-              <svg
-                class="pf-v5-svg"
-                viewBox="0 0 192 512"
-                fill="currentColor"
-                aria-hidden="true"
-                role="img"
-                width="1em"
-                height="1em"
-              >
-                <path
-                  d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-                />
-              </svg>
+              <i class="fas fa-filter" aria-hidden="true"></i>
             </span>
           </button>
         </div>
@@ -2374,47 +2242,47 @@ As the toolbar component is a hybrid layout and component, some of its elements
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-toolbar` | `<div>` | Initiates the toolbar component. **Required** |
-| `.pf-v5-c-toolbar__item` | `<div>` | Initiates a toolbar item. **Required** |
-| `.pf-v5-c-toolbar__group` | `<div>` | Initiates a toolbar group. |
-| `.pf-v5-c-toolbar__content` | `<div>` | Initiates a toolbar content container. **Required** |
-| `.pf-v5-c-toolbar__content-section` | `<div>` | Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one `.pf-v5-c-toolbar__content-section` per `.pf-v5-c-toolbar__content` **Required** |
-| `.pf-v5-c-toolbar__expandable-content` | `<div>` | Initiates a toolbar expandable content section. |
-| `.pf-m-sticky` | `.pf-v5-c-toolbar` | Modifies toolbar component to be sticky to the top of its container. |
-| `.pf-m-full-height` | `.pf-v5-c-toolbar`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies toolbar component to full height of its container and removes vertical padding. |
-| `.pf-m-static` | `.pf-v5-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-expanded` | `.pf-v5-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
-| `.pf-m-expanded` | `.pf-v5-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |
-| `.pf-m-icon-button-group` | `.pf-v5-c-toolbar__group` | Initiates icon button group spacing. |
-| `.pf-m-filter-group` | `.pf-v5-c-toolbar__group` | Initiates filter group spacing. |
-| `.pf-m-chip-container` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
-| `.pf-m-overflow-container` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
-| `.pf-m-expanded` | `.pf-v5-c-toolbar__expandable-content`, `.pf-v5-c-toolbar__toggle` | Modifies the component for the expanded state. |
-| `.pf-m-[wrap/nowrap]` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies the toolbar element to wrap/not wrap. |
-| `.pf-m-align-[start/end]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
-| `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v5-c-toolbar__content`, `.pf-v5-c-toolbar__content-section`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
-| `.pf-m-align-self-[stretch/baseline/start/center/end]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) self alignment. |
+| `.pf-v6-c-toolbar` | `<div>` | Initiates the toolbar component. **Required** |
+| `.pf-v6-c-toolbar__item` | `<div>` | Initiates a toolbar item. **Required** |
+| `.pf-v6-c-toolbar__group` | `<div>` | Initiates a toolbar group. |
+| `.pf-v6-c-toolbar__content` | `<div>` | Initiates a toolbar content container. **Required** |
+| `.pf-v6-c-toolbar__content-section` | `<div>` | Initiates a toolbar content section. This is used to separate static elements from dynamic elements within a content container. There should be no more than one `.pf-v6-c-toolbar__content-section` per `.pf-v6-c-toolbar__content` **Required** |
+| `.pf-v6-c-toolbar__expandable-content` | `<div>` | Initiates a toolbar expandable content section. |
+| `.pf-m-sticky` | `.pf-v6-c-toolbar` | Modifies toolbar component to be sticky to the top of its container. |
+| `.pf-m-full-height` | `.pf-v6-c-toolbar`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group` | Modifies toolbar component to full height of its container and removes vertical padding. |
+| `.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-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. |
+| `.pf-m-icon-button-group` | `.pf-v6-c-toolbar__group` | Initiates icon button group spacing. |
+| `.pf-m-filter-group` | `.pf-v6-c-toolbar__group` | Initiates filter group spacing. |
+| `.pf-m-chip-container` | `.pf-v6-c-toolbar__content`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
+| `.pf-m-overflow-container` | `.pf-v6-c-toolbar__item`, `.pf-v6-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
+| `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content`, `.pf-v6-c-toolbar__toggle` | Modifies the component for the expanded state. |
+| `.pf-m-[wrap/nowrap]` | `.pf-v6-c-toolbar__content`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies the toolbar element to wrap/not wrap. |
+| `.pf-m-align-[start/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar [main axis](https://developer.mozilla.org/en-US/docs/Glossary/Main_Axis) element alignment. |
+| `.pf-m-align-items-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__content`, `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) child alignment. |
+| `.pf-m-align-self-[stretch/baseline/start/center/end]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar element [cross axis](https://developer.mozilla.org/en-US/docs/Glossary/Cross_Axis) self alignment. |
 
 ### Accessibility
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `hidden` | `.pf-v5-c-toolbar__item`, `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__toggle`, `.pf-v5-c-toolbar__expandable-content` |  Indicates that the toolbar element is hidden. **Required** |
-| `aria-expanded="[true/false]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` |  Indicates the the expandable content is hidden/visible. **Required** |
-| `aria-controls="[id of expandable content]"` | `.pf-v5-c-toolbar__toggle > .pf-v5-c-button` |  Identifies the expanded content controlled by the toggle button. **Required** |
-| `id="[expandable-content_id]"` | `.pf-v5-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
-| `aria-label="Expand all"` | `.pf-v5-c-toolbar__item.pf-m-expand-all` | Provides an accessible label for the expand all item button. **Required** |
-| `aria-label="Collapse all"` | `.pf-v5-c-toolbar__item.pf-m-expand-all.pf-m-expanded` | Provides an accessible label for the expand all item button. **Required** |
+| `hidden` | `.pf-v6-c-toolbar__item`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__toggle`, `.pf-v6-c-toolbar__expandable-content` |  Indicates that the toolbar element is hidden. **Required** |
+| `aria-expanded="[true/false]"` | `.pf-v6-c-toolbar__toggle > .pf-v6-c-button` |  Indicates the the expandable content is hidden/visible. **Required** |
+| `aria-controls="[id of expandable content]"` | `.pf-v6-c-toolbar__toggle > .pf-v6-c-button` |  Identifies the expanded content controlled by the toggle button. **Required** |
+| `id="[expandable-content_id]"` | `.pf-v6-c-toolbar__expandable-content` | Provides a reference for toggle button description. **Required** |
+| `aria-label="Expand all"` | `.pf-v6-c-toolbar__item.pf-m-expand-all` | Provides an accessible label for the expand all item button. **Required** |
+| `aria-label="Collapse all"` | `.pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded` | Provides an accessible label for the expand all item button. **Required** |
 
 ### Toggle group usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-toggle-group` | `.pf-v5-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
-| `.pf-m-[show/hide]` | `.pf-v5-c-toolbar__group.pf-m-toggle-group`, `.pf-v5-c-toolbar__expandable-content` | Modifies toolbar element to hidden. |
+| `.pf-m-toggle-group` | `.pf-v6-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
+| `.pf-m-[show/hide]` | `.pf-v6-c-toolbar__group.pf-m-toggle-group`, `.pf-v6-c-toolbar__expandable-content` | Modifies toolbar element to hidden. |
 
 ### Spacer system
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v5-c-toolbar__group`, `.pf-v5-c-toolbar__item` | Modifies 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](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/components/Tooltip/examples/Tooltip.md

@@ -1,7 +1,7 @@
 ---
 id: Tooltip
 section: components
-cssPrefix: pf-v5-c-tooltip
+cssPrefix: pf-v6-c-tooltip
 ---import "./Tooltip.css"
 
 ## Examples
@@ -132,11 +132,11 @@ A tooltip is used to provide contextual information for another component on hov
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-tooltip` | `<div>` |  Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required**|
-| `.pf-v5-c-tooltip__arrow` | `<div>` |  Creates an arrow pointing towards the element the tooltip describes. **Required** |
-| `.pf-v5-c-tooltip__content` | `<div>` |  Creates the body of the tooltip. **Required** |
-| `.pf-m-left{-top/bottom}` | `.pf-v5-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
-| `.pf-m-right{-top/bottom}` | `.pf-v5-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
-| `.pf-m-top{-left/right}` | `.pf-v5-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
-| `.pf-m-bottom{-left/right}` | `.pf-v5-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
-| `.pf-m-text-align-left` | `.pf-v5-c-tooltip__content` | Modifies tooltip content to text align left. |
+| `.pf-v6-c-tooltip` | `<div>` |  Creates a tooltip. Always use with a modifier class that positions the tooltip relative to the element it describes. **Required**|
+| `.pf-v6-c-tooltip__arrow` | `<div>` |  Creates an arrow pointing towards the element the tooltip describes. **Required** |
+| `.pf-v6-c-tooltip__content` | `<div>` |  Creates the body of the tooltip. **Required** |
+| `.pf-m-left{-top/bottom}` | `.pf-v6-c-tooltip` | Positions the tooltip to the left (or left top/left bottom) of the element. |
+| `.pf-m-right{-top/bottom}` | `.pf-v6-c-tooltip` | Positions the tooltip to the right (or right top/right bottom) of the element. |
+| `.pf-m-top{-left/right}` | `.pf-v6-c-tooltip` | Positions the tooltip to the top (or top left/top right) of the element. |
+| `.pf-m-bottom{-left/right}` | `.pf-v6-c-tooltip` | Positions the tooltip to the bottom (or bottom left/bottom right) of the element. |
+| `.pf-m-text-align-left` | `.pf-v6-c-tooltip__content` | Modifies tooltip content to text align left. |

package/docs/components/TreeView/examples/TreeView.md

@@ -1,7 +1,7 @@
 ---
 id: Tree view
 section: components
-cssPrefix: pf-v5-c-tree-view
+cssPrefix: pf-v6-c-tree-view
 ---## Examples
 
 ### Default
@@ -3440,38 +3440,38 @@ cssPrefix: pf-v5-c-tree-view
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role="tree"` | `.pf-v5-c-tree-view__list` | Identifies the `ul` as a tree widget. **Place on the outermost `ul` only** |
-| `role="group"` | `.pf-v5-c-tree-view__list` | Identifies the `ul` element as a container of treeitem elements that form a branch of the tree. **Place on all `ul`s except the first `ul`** |
-| `role="treeitem"` | `.pf-v5-c-tree-view__list-item` | Hides the implicit listitem role of the li element from assistive technologies. |
-| `aria-expanded="false"` | `.pf-v5-c-tree-view__list-item` | For an expandable item, indicates the parent node is closed, i.e., the descendant elements are not visible. |
-| `aria-expanded="true"` | `.pf-v5-c-tree-view__list-item.pf-m-expanded` | Indicates the parent node is open, i.e., the descendant elements are visible. |
-| `tabindex="-1"` | `.pf-v5-c-tree-view__list-item` | Makes the element with the treeitem role focusable without including it in the tab sequence of the page. |
-| `tabindex="0"` | `.pf-v5-c-tree-view__list-item` | Includes the element with the treeitem role in the tab sequence. Only one treeitem in the tree has tabindex="0". When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus. |
-| `aria-label="[button label text]"` | `.pf-v5-c-tree-view__action` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
+| `role="tree"` | `.pf-v6-c-tree-view__list` | Identifies the `ul` as a tree widget. **Place on the outermost `ul` only** |
+| `role="group"` | `.pf-v6-c-tree-view__list` | Identifies the `ul` element as a container of treeitem elements that form a branch of the tree. **Place on all `ul`s except the first `ul`** |
+| `role="treeitem"` | `.pf-v6-c-tree-view__list-item` | Hides the implicit listitem role of the li element from assistive technologies. |
+| `aria-expanded="false"` | `.pf-v6-c-tree-view__list-item` | For an expandable item, indicates the parent node is closed, i.e., the descendant elements are not visible. |
+| `aria-expanded="true"` | `.pf-v6-c-tree-view__list-item.pf-m-expanded` | Indicates the parent node is open, i.e., the descendant elements are visible. |
+| `tabindex="-1"` | `.pf-v6-c-tree-view__list-item` | Makes the element with the treeitem role focusable without including it in the tab sequence of the page. |
+| `tabindex="0"` | `.pf-v6-c-tree-view__list-item` | Includes the element with the treeitem role in the tab sequence. Only one treeitem in the tree has tabindex="0". When the user moves focus in the tree, the element included in the tab sequence changes to the element with focus. |
+| `aria-label="[button label text]"` | `.pf-v6-c-tree-view__action` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
 
 ### Usage
 
 | Class | Applied | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-tree-view` | `<div>` | Initiates the tree view container. **Required** |
-| `.pf-v5-c-tree-view__list` | `<ul>` | Initiates a tree view list. **Required** |
-| `.pf-v5-c-tree-view__list-item` | `<li>` | Initiates a tree view list item. **Required** |
-| `.pf-v5-c-tree-view__content` | `<div>` | Initiates a tree view node. **Required** |
-| `.pf-v5-c-tree-view__node` | `<button>`, `<label>` | Initiates a tree view node. **Required** |
-| `.pf-v5-c-tree-view__node-container` | `<span>` | Initiates a tree view node container. **Required for compact variant** |
-| `.pf-v5-c-tree-view__node-content` | `<span>` | Initiates a tree view node content container used to stack elements. |
-| `.pf-v5-c-tree-view__node-count` | `<span>` | Initiates a tree view node count. |
-| `.pf-v5-c-tree-view__node-toggle` | `<span>`, `<button>` | Initiates a tree view toggle. |
-| `.pf-v5-c-tree-view__node-toggle-icon` | `<span>` | Initiates a tree view toggle icon. |
-| `.pf-v5-c-tree-view__node-title` | `<span>` | Initiates a tree view node title. |
-| `.pf-v5-c-tree-view__node-text` | `<span>`, `<button>` | Initiates tree view text. **Note:** Use a `<button>` when the node is expandable and selectable. |
-| `.pf-v5-c-tree-view__node-icon` | `<span>` | Initiates a tree view icon. |
-| `.pf-v5-c-tree-view__node-check` | `<span>` | Initiates a tree view check. |
-| `.pf-v5-c-tree-view__action` | `<div>` | Initiates a tree view action wrapper. |
-| `.pf-v5-c-tree-view__search` | `<div>` | Initiates a tree view search wrapper. |
-| `.pf-m-guides` | `.pf-v5-c-tree-view` | Modifies the tree view to the guides presentation. |
-| `.pf-m-compact` | `.pf-v5-c-tree-view` | Modifies the tree view to the compact presentation. |
-| `.pf-m-no-background` | `.pf-v5-c-tree-view.pf-m-compact` | Modifies the tree view compact variant node containers to have a transparent background. |
-| `.pf-m-current` | `.pf-v5-c-tree-view__node` | Modifies the tree view node to be current. |
-| `.pf-m-selectable` | `.pf-v5-c-tree-view__node` | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it. |
-| `.pf-m-truncate` | `.pf-v5-c-tree-view`, `.pf-v5-c-tree-view__node-title`, `.pf-v5-c-tree-view__node-text` | Modifies the tree view title or text to truncate. |
+| `.pf-v6-c-tree-view` | `<div>` | Initiates the tree view container. **Required** |
+| `.pf-v6-c-tree-view__list` | `<ul>` | Initiates a tree view list. **Required** |
+| `.pf-v6-c-tree-view__list-item` | `<li>` | Initiates a tree view list item. **Required** |
+| `.pf-v6-c-tree-view__content` | `<div>` | Initiates a tree view node. **Required** |
+| `.pf-v6-c-tree-view__node` | `<button>`, `<label>` | Initiates a tree view node. **Required** |
+| `.pf-v6-c-tree-view__node-container` | `<span>` | Initiates a tree view node container. **Required for compact variant** |
+| `.pf-v6-c-tree-view__node-content` | `<span>` | Initiates a tree view node content container used to stack elements. |
+| `.pf-v6-c-tree-view__node-count` | `<span>` | Initiates a tree view node count. |
+| `.pf-v6-c-tree-view__node-toggle` | `<span>`, `<button>` | Initiates a tree view toggle. |
+| `.pf-v6-c-tree-view__node-toggle-icon` | `<span>` | Initiates a tree view toggle icon. |
+| `.pf-v6-c-tree-view__node-title` | `<span>` | Initiates a tree view node title. |
+| `.pf-v6-c-tree-view__node-text` | `<span>`, `<button>` | Initiates tree view text. **Note:** Use a `<button>` when the node is expandable and selectable. |
+| `.pf-v6-c-tree-view__node-icon` | `<span>` | Initiates a tree view icon. |
+| `.pf-v6-c-tree-view__node-check` | `<span>` | Initiates a tree view check. |
+| `.pf-v6-c-tree-view__action` | `<div>` | Initiates a tree view action wrapper. |
+| `.pf-v6-c-tree-view__search` | `<div>` | Initiates a tree view search wrapper. |
+| `.pf-m-guides` | `.pf-v6-c-tree-view` | Modifies the tree view to the guides presentation. |
+| `.pf-m-compact` | `.pf-v6-c-tree-view` | Modifies the tree view to the compact presentation. |
+| `.pf-m-no-background` | `.pf-v6-c-tree-view.pf-m-compact` | Modifies the tree view compact variant node containers to have a transparent background. |
+| `.pf-m-current` | `.pf-v6-c-tree-view__node` | Modifies the tree view node to be current. |
+| `.pf-m-selectable` | `.pf-v6-c-tree-view__node` | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it. |
+| `.pf-m-truncate` | `.pf-v6-c-tree-view`, `.pf-v6-c-tree-view__node-title`, `.pf-v6-c-tree-view__node-text` | Modifies the tree view title or text to truncate. |

package/docs/components/Truncate/examples/Truncate.md

@@ -1,19 +1,19 @@
 ---
 id: 'Truncate'
 section: components
-cssPrefix: pf-v5-c-truncate
+cssPrefix: pf-v6-c-truncate
 ---import './Truncate.css'
 
 ## Examples
 
 ### Notes
 
-The truncate component contains two child elements, `.pf-v5-c-truncate__start` and `.pf-v5-c-truncate__end`. If both `start` and `end` are present within `.pf-v5-c-truncate`, trucation will occur in the middle of the string. If only `.pf-v5-c-truncate__start` is present, truncation will occur at the end of the string. If only `.pf-v5-c-truncate__end` is present, truncation will occur at the beginning of the string. A `.pf-v5-c-popover` will be automatically applied to the PatternFly React implementation. `‎` must be included at the end of string to denote the ending punctuation mark. Otherwise it will occur and the beggining of truncation for a `pf-v5-c-truncate__end` element.
+The truncate component contains two child elements, `.pf-v6-c-truncate__start` and `.pf-v6-c-truncate__end`. If both `start` and `end` are present within `.pf-v6-c-truncate`, trucation will occur in the middle of the string. If only `.pf-v6-c-truncate__start` is present, truncation will occur at the end of the string. If only `.pf-v6-c-truncate__end` is present, truncation will occur at the beginning of the string. A `.pf-v6-c-popover` will be automatically applied to the PatternFly React implementation. `‎` must be included at the end of string to denote the ending punctuation mark. Otherwise it will occur and the beggining of truncation for a `pf-v6-c-truncate__end` element.
 
 ### Default
 
 ```html
-<div class="pf-v5-c-truncate--example">
+<div class="pf-v6-c-truncate--example">
   <span class="pf-v6-c-truncate">
     <span
       class="pf-v6-c-truncate__start"
@@ -26,7 +26,7 @@ The truncate component contains two child elements, `.pf-v5-c-truncate__start` a
 ### Middle
 
 ```html
-<div class="pf-v5-c-truncate--example">
+<div class="pf-v6-c-truncate--example">
   <span class="pf-v6-c-truncate">
     <span
       class="pf-v6-c-truncate__start"
@@ -40,7 +40,7 @@ The truncate component contains two child elements, `.pf-v5-c-truncate__start` a
 ### Start
 
 ```html
-<div class="pf-v5-c-truncate--example">
+<div class="pf-v6-c-truncate--example">
   <span class="pf-v6-c-truncate">
     <span
       class="pf-v6-c-truncate__end"
@@ -56,6 +56,6 @@ The truncate component contains two child elements, `.pf-v5-c-truncate__start` a
 
 | Class | Applied | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-truncate` | `<span>` | Initiates the truncate component. |
-| `.pf-v5-c-truncate__start` | `<span>` | Defines the truncate component starting text. |
-| `.pf-v5-c-truncate__end` | `<span>` | Defines the truncate component ending text. |
+| `.pf-v6-c-truncate` | `<span>` | Initiates the truncate component. |
+| `.pf-v6-c-truncate__start` | `<span>` | Defines the truncate component starting text. |
+| `.pf-v6-c-truncate__end` | `<span>` | Defines the truncate component ending text. |