@patternfly/patternfly 6.5.0-prerelease.26 → 6.5.0-prerelease.28

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

@@ -875,8 +875,8 @@ cssPrefix: pf-v6-c-drawer
 | `.pf-m-panel-left` | `.pf-v6-c-drawer` | Modifies the drawer panel to expand from the left. |
 | `.pf-m-panel-bottom` | `.pf-v6-c-drawer` | Modifies the drawer panel to expand from the bottom. **Note:** percentage based panel sizes require the drawer component's parent element have an implicit or explicit height. |
 | `.pf-m-expanded` | `.pf-v6-c-drawer` | Modifies the drawer panel for the expanded state. |
-| `.pf-m-static{-on-[lg, xl, 2xl]}` | `.pf-v6-c-drawer` | Modifies the drawer panel state to always show both content and panel at optional [breakpoint](/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. |
@@ -885,7 +885,7 @@ cssPrefix: pf-v6-c-drawer
 | `.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. |

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/icons) page for information about the PatternFly icon set and guidelines for use.
 
 ### Usage
 

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

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

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/Page/examples/Page.md

@@ -551,8 +551,8 @@ This component provides the basic chrome for a page, including sidebar and main
 | `.pf-m-page-insets` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body padding/inset to visually match padding of page elements. |
 | `.pf-m-context-selector` | `.pf-v6-c-page__sidebar-body` | Modifies a sidebar body to contain a context selector. |
 | `.pf-m-inset-none` | `.pf-v6-c-page__sidebar-body` | Removes a sidebar body left/right inset. |
-| `.pf-m-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/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

@@ -136,7 +136,7 @@ These classes can be used to ensure that the table changes between the tabular a
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-grid-md`, `.pf-m-grid-lg`, `.pf-m-grid-xl`, `.pf-m-grid-2xl` | `.pf-v6-c-table` | Changes tabular layout to responsive, grid based layout at optional [breakpoint](/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 +18188,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
 

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

@@ -11379,11 +11379,11 @@ Whenever a list of tabs is unique on the current page, it can be used in a `<nav
 | `.pf-m-box` | `.pf-v6-c-tabs` | Applies box styling to the tab component. |
 | `.pf-m-vertical` | `.pf-v6-c-tabs` | Applies vertical styling to the tab component. |
 | `.pf-m-fill` | `.pf-v6-c-tabs` | Modifies the tabs to fill the available space. |
-| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-v6-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[md, lg, xl, 2xl]}` | `.pf-v6-c-tabs` | Modifies tabs horizontal padding at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 | `.pf-m-page-insets` | `.pf-v6-c-tabs` | Modifies the tabs component padding/inset to visually match padding of page elements. |
 | `.pf-m-secondary` | `.pf-v6-c-tabs.pf-m-box` | Modifies the tabs component tab background colors for the box variant. |
-| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/tokens/all-patternfly-tokens). **Note:** works with vertical tabs only. |
-| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be expandable via a toggle at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). **Note:** works with vertical tabs only. |
+| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v6-c-tabs` | Modifies the tabs component to be non-expandable at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 | `.pf-m-expanded` | `.pf-v6-c-tabs` | Modifies the expandable tabs component for the expanded state. |
 | `.pf-m-animate-current` | `.pf-v6-c-tabs` | Modifies tabs to animate movement of the current tab accent line. |
 | `.pf-m-initializing-accent` | `.pf-v6-c-tabs.pf-m-animate-current` | Modifies tabs styles while initializing the "current" tab's accent styles. |

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

@@ -14,8 +14,8 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
 | -- | -- | -- |
 | `.pf-v6-c-toolbar__group` | `--pf-v6-c-toolbar__group--ColumnGap` | `16px` |
 | `.pf-v6-c-toolbar__item` | `--pf-v6-c-toolbar__item--ColumnGap` | `16px` |
-| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 
 ### Toolbar item types
 
@@ -37,7 +37,7 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
 
 Several components in the following examples do not include functional and/or accessibility specifications (for example `.pf-v6-c-select`, `.pf-v6-c-options-menu`). Rather, `.pf-v6-c-toolbar` focuses on functionality and accessibility specifications that apply to it only.
 
-**Available [breakpoints](/tokens/all-patternfly-tokens) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
+**Available [breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
 
 ## Examples
 
@@ -181,8 +181,8 @@ Several components in the following examples do not include functional and/or ac
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the width value of a toolbar item at optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the min width value of a toolbar item at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the width value of a toolbar item at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the min width value of a toolbar item at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 
 ## Group types
 
@@ -2674,5 +2674,5 @@ As the toolbar component is a hybrid layout and component, some of its elements
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.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](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |

package/docs/demos/Compass/examples/Compass.md

@@ -1,6 +1,6 @@
 ---
 id: Compass
-section: PatternFly-AI
+section: AI
 subsection: Generative UIs
 wrapperTag: div
 ---## Examples
@@ -9,7 +9,7 @@ wrapperTag: div
 
 ```html isFullscreen isBeta
 <div
-  class="pf-v6-c-compass"
+  class="pf-v6-c-compass pf-m-animate-smoothly"
   style="
         --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
         --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
@@ -404,7 +404,7 @@ wrapperTag: div
     </div>
     <div class="pf-v6-c-compass__profile">
       <button
-        class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
+        class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
         type="button"
         aria-expanded="false"
         aria-label="Menu toggle"
@@ -1323,7 +1323,7 @@ wrapperTag: div
 
 ```html isFullscreen isBeta
 <div
-  class="pf-v6-c-compass"
+  class="pf-v6-c-compass pf-m-animate-smoothly"
   style="
         --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
         --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
@@ -1714,7 +1714,7 @@ wrapperTag: div
     </div>
     <div class="pf-v6-c-compass__profile">
       <button
-        class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
+        class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
         type="button"
         aria-expanded="false"
         aria-label="Menu toggle"
@@ -2859,7 +2859,7 @@ wrapperTag: div
 
 ```html isFullscreen isBeta
 <div
-  class="pf-v6-c-compass"
+  class="pf-v6-c-compass pf-m-animate-smoothly"
   style="
         --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
         --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
@@ -3254,7 +3254,7 @@ wrapperTag: div
     </div>
     <div class="pf-v6-c-compass__profile">
       <button
-        class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
+        class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
         type="button"
         aria-expanded="false"
         aria-label="Menu toggle"
@@ -4850,7 +4850,7 @@ wrapperTag: div
     <div class="pf-v6-c-drawer__content">
       <div class="pf-v6-c-drawer__body">
         <div
-          class="pf-v6-c-compass"
+          class="pf-v6-c-compass pf-m-animate-smoothly"
           style="
                           --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.png);
                           --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.png);
@@ -5266,7 +5266,7 @@ wrapperTag: div
             </div>
             <div class="pf-v6-c-compass__profile">
               <button
-                class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
+                class="pf-v6-c-menu-toggle pf-m-circle pf-m-text pf-m-plain"
                 type="button"
                 aria-expanded="false"
                 aria-label="Menu toggle"

package/docs/layouts/Bullseye/examples/Bullseye.css

@@ -1,5 +1,5 @@
-.ws-core-l-bullseye .pf-v6-l-bullseye,
-.ws-core-l-bullseye .pf-v6-l-bullseye__item {
+.ws-core-f-bullseye .pf-v6-l-bullseye,
+.ws-core-f-bullseye .pf-v6-l-bullseye__item {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Bullseye/examples/Bullseye.md

@@ -1,6 +1,7 @@
 ---
 id: Bullseye
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-bullseye
 ---import './Bullseye.css'
 

package/docs/layouts/Flex/examples/Flex.css

@@ -1,6 +1,6 @@
-.ws-core-l-flex-border,
-.ws-core-l-flex .pf-v6-l-flex .pf-v6-l-flex,
-.ws-core-l-flex .pf-v6-l-flex__item {
+.ws-core-f-flex-border,
+.ws-core-f-flex .pf-v6-l-flex .pf-v6-l-flex,
+.ws-core-f-flex .pf-v6-l-flex__item {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

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

@@ -1,6 +1,7 @@
 ---
 id: Flex
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-flex
 ---import './Flex.css'
 
@@ -20,7 +21,7 @@ The flex layout provides two ways of spacing its direct children.
 
 ### Breakpoints
 
-[Breakpoints](/tokens/all-patternfly-tokens) `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl` are provided.
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl` are provided.
 
 ### Usefulness
 

package/docs/layouts/Gallery/examples/Gallery.css

@@ -1,5 +1,5 @@
-.ws-core-l-gallery .pf-v6-l-gallery,
-.ws-core-l-gallery .pf-v6-l-gallery__item {
+.ws-core-f-gallery .pf-v6-l-gallery,
+.ws-core-f-gallery .pf-v6-l-gallery__item {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

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

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

package/docs/layouts/Grid/examples/Grid.css

@@ -1,4 +1,4 @@
-.ws-core-l-grid .pf-v6-l-grid__item {
+.ws-core-f-grid .pf-v6-l-grid__item {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

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

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

package/docs/layouts/Level/examples/Level.css

@@ -1,12 +1,12 @@
-.ws-core-l-level .ws-preview-html {
+.ws-core-f-level .ws-preview-html {
   display: flex;
   flex-wrap: wrap;
   min-height: 160px;
 }
-.ws-core-l-level :is(.pf-v6-l-level, .pf-v6-l-level__item, .pf-v6-l-level > *) {
+.ws-core-f-level :is(.pf-v6-l-level, .pf-v6-l-level__item, .pf-v6-l-level > *) {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }
-.ws-core-l-level .pf-v6-l-level {
+.ws-core-f-level .pf-v6-l-level {
   width: 100%;
 }

package/docs/layouts/Level/examples/Level.md

@@ -1,6 +1,7 @@
 ---
 id: Level
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-level
 ---import './Level.css'
 

package/docs/layouts/Split/examples/Split.css

@@ -1,4 +1,4 @@
-.ws-core-l-split :is(.pf-v6-l-split, .pf-v6-l-split__item, .pf-v6-l-split > *) {
+.ws-core-f-split :is(.pf-v6-l-split, .pf-v6-l-split__item, .pf-v6-l-split > *) {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Split/examples/Split.md

@@ -1,6 +1,7 @@
 ---
 id: Split
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-split
 ---import './Split.css'
 

package/docs/layouts/Stack/examples/Stack.css

@@ -1,15 +1,15 @@
-.ws-core-l-stack :is(.pf-v6-l-stack, .pf-v6-l-stack__item, .pf-v6-l-stack > *) {
+.ws-core-f-stack :is(.pf-v6-l-stack, .pf-v6-l-stack__item, .pf-v6-l-stack > *) {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }
 
-.ws-core-l-stack .ws-preview-html {
+.ws-core-f-stack .ws-preview-html {
   display: flex;
   flex-direction: column;
   min-height: 30rem;
   width: 100%;
 }
 
-.ws-core-l-stack .pf-v6-l-stack {
+.ws-core-f-stack .pf-v6-l-stack {
   flex-grow: 1;
 }

package/docs/layouts/Stack/examples/Stack.md

@@ -1,6 +1,7 @@
 ---
 id: Stack
-section: layouts
+section: foundations-and-styles
+subsection: layouts
 cssPrefix: pf-v6-l-stack
 ---import './Stack.css'
 

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

@@ -1,6 +1,7 @@
 ---
 id: Accessibility
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 ---## Examples
 
 ### Screen reader only
@@ -34,7 +35,7 @@ The text underneath is hidden.
 
 ### Overview
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-screen-reader-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-screen-reader-on-lg`
 
 ### Usage
 

package/docs/utilities/Alignment/examples/Alignment.css

@@ -1,7 +1,7 @@
-.ws-core-u-alignment .pf-v6-u-text-align-start,
-.ws-core-u-alignment .pf-v6-u-text-align-center,
-.ws-core-u-alignment .pf-v6-u-text-align-end,
-.ws-core-u-alignment .pf-v6-u-text-align-justify {
+.ws-core-f-alignment .pf-v6-u-text-align-start,
+.ws-core-f-alignment .pf-v6-u-text-align-center,
+.ws-core-f-alignment .pf-v6-u-text-align-end,
+.ws-core-f-alignment .pf-v6-u-text-align-justify {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

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

@@ -1,6 +1,7 @@
 ---
 id: Alignment
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 ---import './Alignment.css'
 
 ## Examples
@@ -23,7 +24,7 @@ section: utility-classes
 
 ### Overview
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-text-align-start-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-text-align-start-on-lg`
 
 ### Usage
 

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

@@ -1,6 +1,7 @@
 ---
 id: Background color
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 ---## Examples
 
 ### Standard background colors
@@ -24,11 +25,11 @@ section: utility-classes
 
 These background color utilities can be used to modify the background color of an element. In most cases, using the components with available modifiers should be sufficient to implement most designs, and should be preferred over customizations using these utilities.
 
-Care should be taken especially when applying background colors, as this can have a negative effect on the readability and accessibility of text. Refer to [contrast ratios](/design-foundations/colors#contrast-ratios) for more information.
+Care should be taken especially when applying background colors, as this can have a negative effect on the readability and accessibility of text. Refer to [contrast ratios](/foundations-and-styles/colors#contrast-ratios) for more information.
 
-Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/utility-classes/text#inverse-colors).
+Note that "inverse" background colors are labeled as such to indicate that they are best used with the ["inverse" text colors](/foundations-and-styles/utility-classes/text#inverse-colors).
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-background-color-disabled-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-background-color-disabled-on-lg`
 
 ### Usage
 

package/docs/utilities/BoxShadow/examples/box-shadow.css

@@ -1,9 +1,9 @@
-.ws-core-u-box-shadow .ws-preview-html {
+.ws-core-f-box-shadow .ws-preview-html {
   display: flex;
   flex-direction: column;
   gap: var(--pf-t--global--spacer--xl);
 }
 
-.ws-core-u-box-shadow [class*="pf-v6-u-box-shadow"] {
+.ws-core-f-box-shadow [class*="pf-v6-u-box-shadow"] {
   padding: var(--pf-t--global--spacer--md);
 }

package/docs/utilities/BoxShadow/examples/box-shadow.md

@@ -1,6 +1,7 @@
 ---
 id: Box shadow
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 ---import './box-shadow.css'
 
 ## Examples

package/docs/utilities/Display/examples/Display.css

@@ -1,4 +1,4 @@
-.ws-core-u-display [class*="pf-v6-u-display-"] {
+.ws-core-f-display [class*="pf-v6-u-display-"] {
   padding: var(--pf-t--global--spacer--sm);
   border: var(--pf-t--global--border--width--box--default) dashed var(--pf-t--global--border--color--default);
 }

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

@@ -1,6 +1,7 @@
 ---
 id: Display
-section: utility-classes
+section: foundations-and-styles
+subsection: utility-classes
 ---import './Display.css'
 
 ## Examples
@@ -83,7 +84,7 @@ section: utility-classes
 
 ### Overview
 
-[Breakpoints](/tokens/all-patternfly-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-display-inline-block-on-lg`
+[Breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are optional. Breakpoint options include: base (no breakpoint value), `-on-sm`, `-on-md`, `-on-lg`, and `-on-xl`. Example: `.pf-v6-u-display-inline-block-on-lg`
 
 ### Usage