@patternfly/patternfly 6.5.0-prerelease.4 → 6.5.0-prerelease.41

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

@@ -1669,8 +1669,8 @@ description-list--aria-label="Horizontal 2 column auto term width example" descr
 | `.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](/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-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](/foundations-and-styles/design-tokens/all-design-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](/foundations-and-styles/design-tokens/all-design-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](/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). |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be hidden, at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-divider` | Modifies a divider to be shown, at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |

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,19 +870,24 @@ 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-static{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-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](/foundations-and-styles/design-tokens/all-design-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. |
 | `.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](/tokens/all-patternfly-tokens). |
+| `.pf-m-width-{25, 33, 50, 66, 75, 100}{-on-[breakpoint]}` | `.pf-v6-c-drawer__panel` | Modifies the drawer panel width at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-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/Icon/examples/Icon.md

@@ -295,7 +295,7 @@ extra large
 
 The icon element is a container used to maintain a stable space for an icon or spinner, regardless of size or aspect ratio of the contents.
 
-Refer to the [icons](/design-foundations/icons) page for information about the PatternFly icon set and guidelines for use.
+Refer to the [icons](/foundations-and-styles/iconography) page for information about the PatternFly icon set and guidelines for use.
 
 ### Usage
 

package/docs/components/InputGroup/examples/InputGroup.md

@@ -263,7 +263,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 
 ### Accessibility
 
-When using the `.pf-v6-c-input-group` always ensure labels are used outside the input group with the `.pf-v6-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
+When using the `.pf-v6-c-input-group` always ensure labels are used outside the input group with the `.pf-v6-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/forms/form).
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |

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

@@ -855,7 +855,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](/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-expandable{-on-[breakpoint]}` | `.pf-v6-c-jump-links` | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-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](/foundations-and-styles/design-tokens/all-design-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

@@ -684,6 +684,72 @@ cssPrefix: pf-v6-c-masthead
 
 ```
 
+### Docked
+
+```html isBeta
+<header class="pf-v6-c-masthead pf-m-docked" id="docked-masthead-example">
+  <div class="pf-v6-c-masthead__main">
+    <div class="pf-v6-c-masthead__brand">
+      <a class="pf-v6-c-masthead__logo" href="#">
+        <svg width="37px" height="37px" viewBox="0 0 158 158">
+          <title>PF-HorizontalLogo-Color</title>
+          <defs>
+            <linearGradient
+              x1="68%"
+              y1="2.25860997e-13%"
+              x2="32%"
+              y2="100%"
+              id="linearGradient-1"
+            >
+              <stop stop-color="#2B9AF3" offset="0%" />
+              <stop
+                stop-color="#73BCF7"
+                stop-opacity="0.502212631"
+                offset="100%"
+              />
+            </linearGradient>
+          </defs>
+          <g
+            id="PF-IconLogo-color"
+            stroke="none"
+            stroke-width="1"
+            fill="none"
+            fill-rule="evenodd"
+          >
+            <g id="Logo">
+              <path
+                d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
+                id="Rectangle-Copy-17"
+                fill="#0066CC"
+              />
+              <path
+                d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
+                id="Path-2"
+                fill="url(#linearGradient-1)"
+              />
+              <path
+                d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
+                id="Path-2"
+                fill="url(#linearGradient-1)"
+                transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
+              />
+            </g>
+          </g>
+        </svg>
+      </a>
+    </div>
+  </div>
+  <div class="pf-v6-c-masthead__content">
+    <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Chat">
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-comment-alt" aria-hidden="true"></i>
+      </span>
+    </button>
+  </div>
+</header>
+
+```
+
 ## Documentation
 
 ### Usage
@@ -696,4 +762,5 @@ 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](/tokens/all-patternfly-tokens). |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-masthead` | Modifies masthead horizontal padding at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-docked` | `.pf-v6-c-masthead` | Modifies masthead for use with docked nav. |

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

@@ -6450,8 +6450,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](/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-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](/foundations-and-styles/design-tokens/all-design-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](/foundations-and-styles/design-tokens/all-design-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/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/ModalBox/examples/ModalBox.md

@@ -597,7 +597,7 @@ A modal box is a generic rectangular container that can be used to build modals.
 | `aria-describedby="[id value of applicable content]"` | `.pf-v6-c-modal-box` | Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal. |
 | `aria-modal="true"` | `.pf-v6-c-modal-box` | Tells assistive technologies that the windows underneath the current modal are not available for interaction. **Required**|
 | `aria-label="Close"` | `.pf-v6-c-modal-box__close .pf-v6-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
-| `aria-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-v6-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
+| `aria-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-v6-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/develop#trapping-focus). **Required** |
 | `form="[id of form in modal body]"` | `.pf-v6-c-modal-box__footer .pf-v6-c-button` | Associates a submit button in the modal footer with a form in the modal body. For use when the submit button is outside of the `<form>` that the button submits. |
 | `tabindex="0"` | `.pf-v6-c-modal-box__body` | If a modal box body has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the body must include either a focusable element within the scrollable region or the body itself must be focusable by adding `tabindex="0"`. |
 

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

@@ -2474,6 +2474,49 @@ cssPrefix: pf-v6-c-nav
 
 ```
 
+### Docked nav
+
+```html isBeta
+<nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
+  <ul class="pf-v6-c-nav__list" role="list">
+    <li class="pf-v6-c-nav__item">
+      <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
+        <span class="pf-v6-c-nav__link-icon">
+          <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
+        </span>
+      </a>
+    </li>
+    <li class="pf-v6-c-nav__item">
+      <a
+        href="#"
+        class="pf-v6-c-nav__link pf-m-current"
+        aria-current="page"
+        aria-label="Folder"
+      >
+        <span class="pf-v6-c-nav__link-icon">
+          <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
+        </span>
+      </a>
+    </li>
+    <li class="pf-v6-c-nav__item">
+      <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
+        <span class="pf-v6-c-nav__link-icon">
+          <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
+        </span>
+      </a>
+    </li>
+    <li class="pf-v6-c-nav__item">
+      <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
+        <span class="pf-v6-c-nav__link-icon">
+          <i class="fas fa-fw fa-code" aria-hidden="true"></i>
+        </span>
+      </a>
+    </li>
+  </ul>
+</nav>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -2514,6 +2557,7 @@ The navigation system relies on several different sub-components:
 | `.pf-v6-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
 | `.pf-m-horizontal` | `.pf-v6-c-nav` | Modifies nav for the horizontal variation. |
 | `.pf-m-horizontal-subnav` | `.pf-v6-c-nav` | Modifies nav for the horizontal subnav variation. |
+| `.pf-m-docked` | `.pf-v6-c-nav` | Modifies nav for the docked variation. |
 | `.pf-m-flyout` | `.pf-v6-c-nav__item` | Modifies nav item for the flyout variation. |
 | `.pf-m-scrollable` | `.pf-v6-c-nav` | Modifies nav for the scrollable state. |
 | `.pf-m-expanded` | `.pf-v6-c-nav__item` | Modifies for the expanded state. |

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

@@ -514,6 +514,42 @@ wrapperTag: div
 
 ```
 
+### With dock
+
+```html isBeta
+<div class="pf-v6-c-page pf-m-dock">
+  <div class="pf-v6-c-page__dock">
+    <header class="pf-v6-c-masthead pf-m-docked">
+      <div class="pf-v6-c-masthead__main">
+        <div class="pf-v6-c-masthead__brand">logo</div>
+      </div>
+      <div class="pf-v6-c-masthead__content">
+        <button
+          class="pf-v6-c-button pf-m-plain"
+          type="button"
+          aria-label="Chat"
+        >
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-comment-alt" aria-hidden="true"></i>
+          </span>
+        </button>
+      </div>
+    </header>
+  </div>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section class="pf-v6-c-page__main-section">
+        <div class="pf-v6-c-page__main-body">
+          This is a default
+          <code>.pf-v6-c-page__main-section</code>.
+        </div>
+      </section>
+    </main>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -545,14 +581,15 @@ This component provides the basic chrome for a page, including sidebar and main
 | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
 | `.pf-v6-c-page__main-group` | `<div>` | Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
 | `.pf-v6-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
+| `.pf-m-dock` | `.pf-v6-c-page` | Modifies the page grid to have a dock. |
 | `.pf-m-no-sidebar` | `.pf-v6-c-page` | Modifies the page grid for layouts without a sidebar. |
 | `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |
 | `.pf-m-collapsed` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the collapsed state. |
 | `.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](/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-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/foundations-and-styles/design-tokens/all-design-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](/foundations-and-styles/design-tokens/all-design-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

@@ -1224,13 +1224,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](/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-display-summary{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-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](/tokens/all-patternfly-tokens). |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies pagination horizontal padding at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-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

@@ -959,8 +959,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](/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-vertical{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper vertical layout at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-horizontal{-on-[breakpoint]}`| `.pf-v6-c-progress-stepper` | Modifies progress stepper horizontal layout at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-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](/tokens/all-patternfly-tokens). **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](/foundations-and-styles/design-tokens/all-design-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

@@ -133,10 +133,11 @@ cssPrefix: pf-v6-c-table
 ### Responsive layout modifier usage
 
 These classes can be used to ensure that the table changes between the tabular and grid-based layout at an appropriate screen width.
+**Note:** If a wrapping element creates an `inline-size` or `size` container with the container name `pf-v6-contain-table`, the breakpoints will apply to the container's width.
 
 | 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](/tokens/all-patternfly-tokens). |
+| `.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](/foundations-and-styles/design-tokens/all-design-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
@@ -18188,8 +18189,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](/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). |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-table tr > th`, `.pf-v6-c-table tr > td` | Hides a table cell at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-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](/foundations-and-styles/design-tokens/all-design-tokens). |
 
 ## Text control modifiers