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

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

@@ -449,7 +449,7 @@ cssPrefix: pf-v6-c-drawer
       </div>
       <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
       <div
-        class="pf-v6-c-drawer__body pf-m-paddinng"
+        class="pf-v6-c-drawer__body"
         style="--pf-v6-c-drawer__panel__body--PaddingInlineStart: 48px;"
       >Drawer panel body content with modified inline start padding</div>
     </div>
@@ -767,22 +767,79 @@ cssPrefix: pf-v6-c-drawer
 
 ```
 
-### Accessibility
+### Pill
 
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `role="separator"` | `.pf-v6-c-drawer__splitter` | Indicates that the splitter is a separator. **Required** |
-| `tabindex="0"` | `.pf-v6-c-drawer__splitter` | Inserts the splitter into the tab order of the page so that it is focusable. **Required** |
-| `aria-orientation="horizontal"` | `.pf-v6-c-drawer__splitter` | Indicates that the splitter is oriented horizontally. |
-| `aria-orientation="vertical"` | `.pf-v6-c-drawer__splitter.pf-m-vertical` | Indicates that the splitter is oriented vertically. |
+```html isBeta
+<div class="pf-v6-c-drawer pf-m-expanded pf-m-pill">
+  <div class="pf-v6-c-drawer__main">
+    <div class="pf-v6-c-drawer__content">
+      <div
+        class="pf-v6-c-drawer__body"
+      >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
+    </div>
+    <div class="pf-v6-c-drawer__panel">
+      <div class="pf-v6-c-drawer__head">
+        <span>Drawer panel header content</span>
+        <div class="pf-v6-c-drawer__actions">
+          <div class="pf-v6-c-drawer__close">
+            <button
+              class="pf-v6-c-button pf-m-plain"
+              type="button"
+              aria-label="Close drawer panel"
+            >
+              <span class="pf-v6-c-button__icon">
+                <i class="fas fa-times" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-drawer__description"
+      >This is a helpful description of the drawer panel.</div>
+      <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
+    </div>
+  </div>
+</div>
 
-### Usage
+```
 
-| Class | Applied to | Outcome |
-| -- | -- | -- |
-| `.pf-v6-c-drawer__splitter` | `<div>` | Initiates the splitter. |
-| `.pf-v6-c-drawer__splitter-handle` | `<div>` | Initiates the splitter handle element. |
-| `.pf-m-vertical` |  `.pf-v6-c-drawer__splitter` | Modifies the splitter to be vertical. |
+### Pill inline
+
+```html isBeta
+<div class="pf-v6-c-drawer pf-m-expanded pf-m-inline pf-m-pill">
+  <div class="pf-v6-c-drawer__main">
+    <div class="pf-v6-c-drawer__content">
+      <div
+        class="pf-v6-c-drawer__body"
+      >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
+    </div>
+    <div class="pf-v6-c-drawer__panel">
+      <div class="pf-v6-c-drawer__head">
+        <span>Drawer panel header content</span>
+        <div class="pf-v6-c-drawer__actions">
+          <div class="pf-v6-c-drawer__close">
+            <button
+              class="pf-v6-c-button pf-m-plain"
+              type="button"
+              aria-label="Close drawer panel"
+            >
+              <span class="pf-v6-c-button__icon">
+                <i class="fas fa-times" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="pf-v6-c-drawer__description"
+      >This is a helpful description of the drawer panel.</div>
+      <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
+    </div>
+  </div>
+</div>
+
+```
 
 ## Documentation
 
@@ -793,6 +850,10 @@ cssPrefix: pf-v6-c-drawer
 | `aria-expanded="true"` | `action that opens drawer` | Indicates that the expandable content is visible. **Required** |
 | `aria-expanded="false"` | `action that opens drawer` | Indicates that the expandable content is hidden. **Required** |
 | `hidden` | `.pf-v6-c-drawer__panel` | Hides the drawer panel from assistive technologies. **Required** |
+| `role="separator"` | `.pf-v6-c-drawer__splitter` | Indicates that the splitter is a separator. **Required** |
+| `tabindex="0"` | `.pf-v6-c-drawer__splitter` | Inserts the splitter into the tab order of the page so that it is focusable. **Required** |
+| `aria-orientation="horizontal"` | `.pf-v6-c-drawer__splitter` | Indicates that the splitter is oriented horizontally. |
+| `aria-orientation="vertical"` | `.pf-v6-c-drawer__splitter.pf-m-vertical` | Indicates that the splitter is oriented vertically. |
 
 ### Usage
 
@@ -809,11 +870,15 @@ cssPrefix: pf-v6-c-drawer
 | `.pf-v6-c-drawer__actions` | `<div>` | Initiates an actions container within `.pf-v6--drawer__head`. |
 | `.pf-v6-c-drawer__close` | `<div>` | Identifies the drawer close button within `.pf-v6-c-drawer__actions`. |
 | `.pf-v6-c-drawer__description` | `<div>` | Initiates a drawer panel description. |
+| `.pf-v6-c-drawer__splitter` | `<div>` | Initiates the splitter. |
+| `.pf-v6-c-drawer__splitter-handle` | `<div>` | Initiates the splitter handle element. |
 | `.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](/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-pill` | `.pf-v6-c-drawer` | Modifies the drawer for pill styles. |
+| `.pf-m-no-glass` | `.pf-v6-c-drawer__panel.pf-m-pill` | Modifies the drawer panel to remove glass styling when using glass theme. |
 | `.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. |
@@ -822,6 +887,7 @@ cssPrefix: pf-v6-c-drawer
 | `.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](/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-m-vertical` |  `.pf-v6-c-drawer__splitter` | Modifies the splitter to be vertical. |
 | `--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. |
 | `--pf-v6-c-drawer__panel--md--FlexBasis--max` | `.pf-v6-c-drawer__panel` | Defines the drawer panel maximum size. |

package/docs/components/Hero/examples/Hero.md

@@ -0,0 +1,25 @@
+---
+id: 'Hero'
+beta: true
+section: components
+cssPrefix: pf-v6-c-hero
+---## Examples
+
+### Basic
+
+```html isBeta
+<div class="pf-v6-c-hero">
+  <div class="pf-v6-c-hero__body">Basic hero content</div>
+</div>
+
+```
+
+## Documentation
+
+### Usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-v6-c-hero` | `<div>` | Initiates the hero. **Required** |
+| `.pf-v6-c-hero__body` | `<div>` | Initiates the hero body. |
+| `.pf-m-no-glass` | `.pf-v6-c-hero` | Modifies the hero to remove glass styling when using glass theme. |

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -262,6 +262,45 @@ cssPrefix: pf-v6-c-menu-toggle
 
 ```
 
+### Plain circle
+
+```html isBeta
+<button
+  class="pf-v6-c-menu-toggle pf-m-circle pf-m-plain"
+  type="button"
+  aria-expanded="false"
+  aria-label="Circle styled actions"
+>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+  </span>
+</button>
+&nbsp;
+<button
+  class="pf-v6-c-menu-toggle pf-m-circle pf-m-expanded pf-m-plain"
+  type="button"
+  aria-expanded="true"
+  aria-label="Circle and expanded styled actions"
+>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+  </span>
+</button>
+&nbsp;
+<button
+  class="pf-v6-c-menu-toggle pf-m-circle pf-m-plain pf-m-disabled"
+  type="button"
+  aria-expanded="false"
+  disabled
+  aria-label="Circle and disabled styled actions"
+>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+  </span>
+</button>
+
+```
+
 ### Plain with text
 
 ```html
@@ -2189,6 +2228,7 @@ Shown with default, primary, and secondary styling
 | `.pf-m-secondary` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
 | `.pf-m-text` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
 | `.pf-m-plain` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
+| `.pf-m-circle` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to be circular in shape. This is intended to be applied only to a plain menu toggle without any text. |
 | `.pf-m-expanded` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
 | `.pf-m-full-height` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
 | `.pf-m-full-width` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full width of parent. |

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

@@ -8179,6 +8179,94 @@ Note: To apply padding to `.pf-v6-c-table__expandable-row`, wrap the content in
 | `.pf-m-no-background` | `.pf-v6-c-table__expandable-row-content` | Modifies the expandable row content to have a transparent background. For in compound expandable when the parent expandable row has no padding with `.pf-m-no-padding`. |
 | `.pf-m-no-animate-expand` | `.pf-v6-c-table__control-row.pf-m-expanded` | Disables animation on a compound expandable row. **Note:** Used to disable the animation when clicking between compound expandable items. |
 
+## Plain variant
+
+### Plain example
+
+```html isBeta
+<table
+  class="pf-v6-c-table pf-m-grid-md pf-m-plain"
+  role="grid"
+  aria-label="This is a plain table example"
+  id="table-plain"
+>
+  <caption class="pf-v6-c-table__caption">This is the table caption</caption>
+
+  <thead class="pf-v6-c-table__thead">
+    <tr class="pf-v6-c-table__tr" role="row">
+      <th class="pf-v6-c-table__th" role="columnheader" scope="col">Repositories</th>
+
+      <th class="pf-v6-c-table__th" role="columnheader" scope="col">Branches</th>
+
+      <th
+        class="pf-v6-c-table__th"
+        role="columnheader"
+        scope="col"
+      >Pull requests</th>
+
+      <th class="pf-v6-c-table__th" role="columnheader" scope="col">Workspaces</th>
+
+      <th class="pf-v6-c-table__th" role="columnheader" scope="col">Last commit</th>
+    </tr>
+  </thead>
+
+  <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"
+        role="cell"
+        data-label="Repository name"
+      >Repository 1</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
+      <td
+        class="pf-v6-c-table__td"
+        role="cell"
+        data-label="Last commit"
+      >2 days ago</td>
+    </tr>
+    <tr class="pf-v6-c-table__tr" role="row">
+      <td
+        class="pf-v6-c-table__td"
+        role="cell"
+        data-label="Repository name"
+      >Repository 2</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
+      <td
+        class="pf-v6-c-table__td"
+        role="cell"
+        data-label="Last commit"
+      >2 days ago</td>
+    </tr>
+    <tr class="pf-v6-c-table__tr" role="row">
+      <td
+        class="pf-v6-c-table__td"
+        role="cell"
+        data-label="Repository name"
+      >Repository 3</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Branches">10</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Pull requests">25</td>
+      <td class="pf-v6-c-table__td" role="cell" data-label="Workspaces">5</td>
+      <td
+        class="pf-v6-c-table__td"
+        role="cell"
+        data-label="Last commit"
+      >2 days ago</td>
+    </tr>
+  </tbody>
+</table>
+
+```
+
+### Plain variant usage
+
+| Class | Applied to | Outcome |
+| -- | -- | -- |
+| `.pf-m-plain` | `.pf-v6-c-table` | Modifies the table to have a transparent background. |
+
 ## Compact variant
 
 ### Compact example

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

@@ -2687,12 +2687,7 @@ cssPrefix: pf-v6-c-tabs
 ### Using the nav element example
 
 ```html
-<nav
-  class="pf-v6-c-tabs pf-m-scrollable"
-  aria-label="Tabs nav"
-  role="region"
-  id="using-the-nav-element"
->
+<nav class="pf-v6-c-tabs pf-m-scrollable" aria-label="Tabs nav">
   <div class="pf-v6-c-tabs__scroll-button">
     <button
       class="pf-v6-c-button pf-m-plain"
@@ -2789,12 +2784,7 @@ cssPrefix: pf-v6-c-tabs
 ### Sub tabs using the nav element example
 
 ```html
-<nav
-  class="pf-v6-c-tabs"
-  aria-label="Tabs primary nav"
-  role="region"
-  id="sub-tabs-using-the-nav-element"
->
+<nav class="pf-v6-c-tabs" aria-label="Tabs primary nav">
   <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
     <button
       class="pf-v6-c-button pf-m-plain"
@@ -2885,12 +2875,7 @@ cssPrefix: pf-v6-c-tabs
   </div>
 </nav>
 
-<nav
-  class="pf-v6-c-tabs pf-m-subtab"
-  aria-label="Tabs subtab nav"
-  role="region"
-  id="sub-tabs-using-the-nav-element-subtab"
->
+<nav class="pf-v6-c-tabs pf-m-subtab" aria-label="Tabs subtab nav">
   <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
     <button
       class="pf-v6-c-button pf-m-plain"
@@ -2986,6 +2971,199 @@ cssPrefix: pf-v6-c-tabs
 
 ```
 
+### Site navigation variation
+
+```html isBeta
+<nav
+  class="pf-v6-c-tabs pf-m-nav"
+  aria-label="Site navigation variation example"
+>
+  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
+    <button
+      class="pf-v6-c-button pf-m-small pf-m-plain"
+      type="button"
+      aria-label="Scroll left"
+      disabled
+    >
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-angle-left" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+  <ul class="pf-v6-c-tabs__list" role="tablist">
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-users-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Users</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-containers-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Containers</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-database-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Database</span>
+      </button>
+    </li>
+
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-server-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Server</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-system-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">System</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-network-wired-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Network</span>
+      </button>
+    </li>
+  </ul>
+
+  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
+    <button
+      class="pf-v6-c-button pf-m-small pf-m-plain"
+      type="button"
+      aria-label="Scroll right"
+      disabled
+    >
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+</nav><br/ >
+As sub navigation:
+<nav
+  class="pf-v6-c-tabs pf-m-subtab pf-m-nav"
+  aria-label="Site sub-navigation variation example"
+>
+  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
+    <button
+      class="pf-v6-c-button pf-m-small pf-m-plain"
+      type="button"
+      aria-label="Scroll left"
+      disabled
+    >
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-angle-left" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+  <ul class="pf-v6-c-tabs__list" role="tablist">
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-users-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Users</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-containers-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Containers</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-database-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Database</span>
+      </button>
+    </li>
+
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-server-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Server</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-system-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">System</span>
+      </button>
+    </li>
+    <li class="pf-v6-c-tabs__item" role="presentation">
+      <button
+        type="button"
+        class="pf-v6-c-tabs__link"
+        role="tab"
+        id="nav-tabs-network-wired-link"
+      >
+        <span class="pf-v6-c-tabs__item-text">Network</span>
+      </button>
+    </li>
+  </ul>
+
+  <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
+    <button
+      class="pf-v6-c-button pf-m-small pf-m-plain"
+      type="button"
+      aria-label="Scroll right"
+      disabled
+    >
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+</nav>
+
+```
+
 ## Tab item actions
 
 ### Help button example
@@ -10475,6 +10653,7 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
 | `.pf-m-initializing-accent` | `.pf-v6-c-tabs.pf-m-animate-current` | Modifies tabs styles while initializing the "current" tab's accent styles. |
 | `--pf-v6-c-tabs--link-accent--start` | `.pf-v6-c-tabs.pf-m-animate-current` | Sets the value for the "start" inset of the current tab's accent. |
 | `--pf-v6-c-tabs--link-accent--length` | `.pf-v6-c-tabs.pf-m-animate-current` | Sets the value for the length of the current tab's accent. |
+| `.pf-m-nav` | `.pf-v6-c-tabs` | Applies site navigation styling to the tab component. |
 | `.pf-m-current` | `.pf-v6-c-tabs__item` | Indicates that a tab item is currently selected. |
 | `.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. |

package/docs/components/Wizard/examples/Wizard.md

@@ -846,23 +846,23 @@ wrapperTag: div
               </div>
             </div>
             <div class="pf-v6-c-drawer__panel pf-m-width-33">
-              <div class="pf-v6-c-drawer__body">
-                <div class="pf-v6-c-drawer__head">
-                  <div class="pf-v6-c-drawer__actions">
-                    <div class="pf-v6-c-drawer__close">
-                      <button
-                        class="pf-v6-c-button pf-m-plain"
-                        type="button"
-                        aria-label="Close drawer panel"
-                      >
-                        <span class="pf-v6-c-button__icon">
-                          <i class="fas fa-times" aria-hidden="true"></i>
-                        </span>
-                      </button>
-                    </div>
-                  </div>drawer-panel
+              <div class="pf-v6-c-drawer__head">
+                drawer-panel
+                <div class="pf-v6-c-drawer__actions">
+                  <div class="pf-v6-c-drawer__close">
+                    <button
+                      class="pf-v6-c-button pf-m-plain"
+                      type="button"
+                      aria-label="Close drawer panel"
+                    >
+                      <span class="pf-v6-c-button__icon">
+                        <i class="fas fa-times" aria-hidden="true"></i>
+                      </span>
+                    </button>
+                  </div>
                 </div>
               </div>
+              <div class="pf-v6-c-drawer__body">drawer-body</div>
             </div>
           </div>
           <footer class="pf-v6-c-wizard__footer">