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

package/docs/components/OptionsMenu/deprecated/options-menu.md

@@ -2,7 +2,7 @@
 id: Options menu
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-options-menu
+cssPrefix: pf-v6-c-options-menu
 deprecated: true
 ---import './options-menu.css'
 
@@ -985,30 +985,30 @@ deprecated: true
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role` or `aria` | `pf-v5-c-options-menu` |  accessibility notes. |
-| `disabled` | `.pf-v5-c-options-menu__toggle`, `.pf-v5-c-options-menu__toggle-button` | Disables the options menu toggle and toggle button and removes it from keyboard focus. |
+| `role` or `aria` | `pf-v6-c-options-menu` |  accessibility notes. |
+| `disabled` | `.pf-v6-c-options-menu__toggle`, `.pf-v6-c-options-menu__toggle-button` | Disables the options menu toggle and toggle button and removes it from keyboard focus. |
 *Note:* The attribute `aria-selected="true"` should be set programmatically to the selected item(s).
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-options-menu` | `<div>` |  Initiates a custom options menu. |
-| `.pf-v5-c-options-menu__toggle` | `<button>` |  Initiates a custom toggle. |
-| `.pf-v5-c-options-menu__toggle-text` | `<span>` | Initiates a wrapper for toggle text.
-| `.pf-v5-c-options-menu__toggle-icon` | `<i>` | Initiates the up/down arrow beside toggle text. |
-| `.pf-v5-c-options-menu__toggle-button` | `<button>` | Initiates a custom toggle button for use when `.pf-v5-c-options-menu__toggle` is a `<div>` or non-interactive element. |
-| `.pf-v5-c-options-menu__menu` | `<ul>` |  Initiates the custom options-menu menu. |
-| `.pf-v5-c-options-menu__menu-item` | `<li>` |  Initiates the items in the custom options-menu menu. |
-| `.pf-v5-c-options-menu__menu-item-icon` | `<i>` |  Initiates the icon to indicate selected menu items. |
-| `.pf-v5-c-options-menu__group` | `<section>` | Defines a group of items in an options menu. **Required when there is more than one group in an options menu**. |
-| `.pf-v5-c-options-menu__group-title` | `<h1>` | Defines the title for a group of items in an options menu. |
-| `.pf-m-top` | `.pf-v5-c-options-menu` | Modifies to display the menu above the toggle. |
-| `.pf-m-align-right` | `.pf-v5-c-options-menu__menu` | Modifies to display the menu aligned to the right edge of the toggle |
-| `.pf-m-expanded` | `.pf-v5-c-options-menu` |  Modifies for the expanded state. |
-| `.pf-m-static` | `.pf-v5-c-options-menu__menu` | Modifies the menu to be statically positioned to support custom positioning. |
-| `.pf-m-plain` | `.pf-v5-c-options-menu__toggle` |  Modifies to display the toggle with no border. **Note:** Can be combined with `.pf-m-text` to create a normal text toggle with no border. |
-| `.pf-m-disabled` | `.pf-v5-c-options-menu__toggle` | Modifies to display the options menu toggle as disabled. This applies to `pf-v5-c-options-menu__toggle` and should not be used in lieu of the `disabled` attribute on `pf-v5-c-options-menu__toggle`. When this is used, `disabled` should also be added to any form elements in `.pf-v5-c-options-menu__toggle` |
-| `.pf-m-text` | `.pf-v5-c-options-menu__toggle` |  For use when the `.pf-v5-c-options-menu__toggle` is a `<div>` or some non-interactive elment, and you're using a custom `.pf-v5-c-options-menu__toggle-button` to toggle the options menu. |
-| `.pf-m-active` | `.pf-v5-c-options-menu__toggle` | Forces display of the active state of the toggle. |
-| `.pf-m-selected` | `.pf-v5-c-options-menu__menu-item` | Modifies the menu item for the selected state. |
+| `.pf-v6-c-options-menu` | `<div>` |  Initiates a custom options menu. |
+| `.pf-v6-c-options-menu__toggle` | `<button>` |  Initiates a custom toggle. |
+| `.pf-v6-c-options-menu__toggle-text` | `<span>` | Initiates a wrapper for toggle text.
+| `.pf-v6-c-options-menu__toggle-icon` | `<i>` | Initiates the up/down arrow beside toggle text. |
+| `.pf-v6-c-options-menu__toggle-button` | `<button>` | Initiates a custom toggle button for use when `.pf-v6-c-options-menu__toggle` is a `<div>` or non-interactive element. |
+| `.pf-v6-c-options-menu__menu` | `<ul>` |  Initiates the custom options-menu menu. |
+| `.pf-v6-c-options-menu__menu-item` | `<li>` |  Initiates the items in the custom options-menu menu. |
+| `.pf-v6-c-options-menu__menu-item-icon` | `<i>` |  Initiates the icon to indicate selected menu items. |
+| `.pf-v6-c-options-menu__group` | `<section>` | Defines a group of items in an options menu. **Required when there is more than one group in an options menu**. |
+| `.pf-v6-c-options-menu__group-title` | `<h1>` | Defines the title for a group of items in an options menu. |
+| `.pf-m-top` | `.pf-v6-c-options-menu` | Modifies to display the menu above the toggle. |
+| `.pf-m-align-right` | `.pf-v6-c-options-menu__menu` | Modifies to display the menu aligned to the right edge of the toggle |
+| `.pf-m-expanded` | `.pf-v6-c-options-menu` |  Modifies for the expanded state. |
+| `.pf-m-static` | `.pf-v6-c-options-menu__menu` | Modifies the menu to be statically positioned to support custom positioning. |
+| `.pf-m-plain` | `.pf-v6-c-options-menu__toggle` |  Modifies to display the toggle with no border. **Note:** Can be combined with `.pf-m-text` to create a normal text toggle with no border. |
+| `.pf-m-disabled` | `.pf-v6-c-options-menu__toggle` | Modifies to display the options menu toggle as disabled. This applies to `pf-v6-c-options-menu__toggle` and should not be used in lieu of the `disabled` attribute on `pf-v6-c-options-menu__toggle`. When this is used, `disabled` should also be added to any form elements in `.pf-v6-c-options-menu__toggle` |
+| `.pf-m-text` | `.pf-v6-c-options-menu__toggle` |  For use when the `.pf-v6-c-options-menu__toggle` is a `<div>` or some non-interactive elment, and you're using a custom `.pf-v6-c-options-menu__toggle-button` to toggle the options menu. |
+| `.pf-m-active` | `.pf-v6-c-options-menu__toggle` | Forces display of the active state of the toggle. |
+| `.pf-m-selected` | `.pf-v6-c-options-menu__menu-item` | Modifies the menu item for the selected state. |

package/docs/components/OverflowMenu/examples/overflow-menu.md

@@ -1,14 +1,14 @@
 ---
 id: Overflow menu
 section: components
-cssPrefix: pf-v5-c-overflow-menu
+cssPrefix: pf-v6-c-overflow-menu
 ---import './overflow-menu.css'
 
 ## Introduction
 
-The overflow menu component condenses actions inside `.pf-v5-c-overflow-menu__content` container into a single dropdown button wrapped in `.pf-v5-c-overflow-menu__control`.
+The overflow menu component condenses actions inside `.pf-v6-c-overflow-menu__content` container into a single dropdown button wrapped in `.pf-v6-c-overflow-menu__control`.
 
-The overflow menu relies on groups (`.pf-v5-c-overflow-menu__group`) and items (`.pf-v5-c-overflow-menu__item`), with default spacer values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. Each modifier applies a unique CSS variable, therefore, the base spacer value for all elements can be customized and item/groups spacers can be themed individually. The default spacer value for items and groups is set to `--pf-v5-c-toolbar--spacer--base`, whose value is `--pf-v5-global--spacer--md` or 16px.
+The overflow menu relies on groups (`.pf-v6-c-overflow-menu__group`) and items (`.pf-v6-c-overflow-menu__item`), with default spacer values. Groups and items can be siblings and/or items can be nested within groups. Modifier selectors adjust spacing based on the type of group. Each modifier applies a unique CSS variable, therefore, the base spacer value for all elements can be customized and item/groups spacers can be themed individually. The default spacer value for items and groups is set to `--pf-v6-c-toolbar--spacer--base`, whose value is `--pf-v6-global--spacer--md` or 16px.
 
 ### Simple collapsed
 
@@ -73,18 +73,18 @@ The overflow menu relies on groups (`.pf-v5-c-overflow-menu__group`) and items (
 
 | Class | CSS Variable | Computed Value |
 | -- | -- | -- |
-| `.pf-v5-c-overflow-menu__group` | `--pf-v5-c-overflow-menu__group--spacer` | `16px` |
-| `.pf-v5-c-overflow-menu__item` | `--pf-v5-c-overflow-menu__item--spacer` | `16px` |
+| `.pf-v6-c-overflow-menu__group` | `--pf-v6-c-overflow-menu__group--spacer` | `16px` |
+| `.pf-v6-c-overflow-menu__item` | `--pf-v6-c-overflow-menu__item--spacer` | `16px` |
 
 ### Overflow menu item types
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-overflow-menu` | `<div>` | Initiates an overflow menu. **Required** |
-| `.pf-v5-c-overflow-menu__content` | `<div>` | Initiates an overflow menu content section. **Required** |
-| `.pf-v5-c-overflow-menu__control` | `<div>` | Initiates the overflow menu control. **Required** |
-| `.pf-v5-c-overflow-menu__group` | `<div>` | Initiates an overflow menu group. |
-| `.pf-v5-c-overflow-menu__item` | `<div>` | Initiates an overflow menu item. **Required** |
+| `.pf-v6-c-overflow-menu` | `<div>` | Initiates an overflow menu. **Required** |
+| `.pf-v6-c-overflow-menu__content` | `<div>` | Initiates an overflow menu content section. **Required** |
+| `.pf-v6-c-overflow-menu__control` | `<div>` | Initiates the overflow menu control. **Required** |
+| `.pf-v6-c-overflow-menu__group` | `<div>` | Initiates an overflow menu group. |
+| `.pf-v6-c-overflow-menu__item` | `<div>` | Initiates an overflow menu item. **Required** |
 
 ### Group types
 
@@ -147,9 +147,9 @@ The action group consists of a primary and secondary action. Any additional acti
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-overflow-menu__group` | `<div>` | Initiates an overflow menu component group. |
-| `.pf-m-button-group` | `.pf-v5-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v5-c-overflow-menu__group--m-button-group--spacer)`. Child `.pf-v5-c-button` spacer value is set to `var(--pf-v5-c-overflow-menu__group--m-button-group--space-items)`. |
-| `.pf-m-icon-button-group` | `.pf-v5-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v5-c-overflow-menu__group--m-icon-button-group--spacer)`. Child `.pf-v5-c-button.pf-m-button-plain` spacer value is set to `var(--pf-v5-c-overflow-menu__group--m-icon-button-group--space-items)`. |
+| `.pf-v6-c-overflow-menu__group` | `<div>` | Initiates an overflow menu component group. |
+| `.pf-m-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--spacer)`. Child `.pf-v6-c-button` spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--space-items)`. |
+| `.pf-m-icon-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--spacer)`. Child `.pf-v6-c-button.pf-m-button-plain` spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--space-items)`. |
 
 ### Additional options in dropdown (hidden)
 
@@ -378,10 +378,10 @@ The action group consists of a primary and secondary action. Any additional acti
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-overflow-menu` | `<div>` | Initiates an overflow menu. **Required** |
-| `.pf-v5-c-overflow-menu__content` | `<div>` | Initiates an overflow menu content section. **Required** |
-| `.pf-v5-c-overflow-menu__control` | `<div>` | Initiates the overflow menu control. **Required** |
-| `.pf-v5-c-overflow-menu__group` | `<div>` | Initiates an overflow menu group. |
-| `.pf-v5-c-overflow-menu__item` | `<div>` | Initiates an overflow menu item. **Required** |
-| `.pf-m-button-group` | `.pf-v5-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v5-c-overflow-menu__group--m-button-group--spacer)`. Child spacer value is set to `var(--pf-v5-c-overflow-menu__group--m-button-group--space-items)`. |
-| `.pf-m-icon-button-group` | `.pf-v5-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v5-c-overflow-menu__group--m-icon-button-group--spacer)`. Child spacer value is set to `var(--pf-v5-c-overflow-menu__group--m-icon-button-group--space-items)`. |
+| `.pf-v6-c-overflow-menu` | `<div>` | Initiates an overflow menu. **Required** |
+| `.pf-v6-c-overflow-menu__content` | `<div>` | Initiates an overflow menu content section. **Required** |
+| `.pf-v6-c-overflow-menu__control` | `<div>` | Initiates the overflow menu control. **Required** |
+| `.pf-v6-c-overflow-menu__group` | `<div>` | Initiates an overflow menu group. |
+| `.pf-v6-c-overflow-menu__item` | `<div>` | Initiates an overflow menu item. **Required** |
+| `.pf-m-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--spacer)`. Child spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-button-group--space-items)`. |
+| `.pf-m-icon-button-group` | `.pf-v6-c-overflow-menu__group` | Modifies overflow menu group spacing. Spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--spacer)`. Child spacer value is set to `var(--pf-v6-c-overflow-menu__group--m-icon-button-group--space-items)`. |

package/docs/components/Page/deprecated/PageHeader.md

@@ -24,22 +24,22 @@ deprecated: true
   <main class="pf-v6-c-page__main" tabindex="-1">
     <section class="pf-v6-c-page__main-section pf-m-dark-100">
       This
-      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-v6-c-page__main-section</code> uses
       <code>.pf-m-dark-100</code>.
     </section>
     <section class="pf-v6-c-page__main-section pf-m-dark-200">
       This
-      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-v6-c-page__main-section</code> uses
       <code>.pf-m-dark-200</code>.
     </section>
     <section class="pf-v6-c-page__main-section pf-m-light">
       This
-      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-v6-c-page__main-section</code> uses
       <code>.pf-m-light</code>.
     </section>
     <section class="pf-v6-c-page__main-section">
       This is a default
-      <code>.pf-v5-c-page__main-section</code>.
+      <code>.pf-v6-c-page__main-section</code>.
     </section>
   </main>
 </div>
@@ -137,18 +137,18 @@ deprecated: true
   <main class="pf-v6-c-page__main" tabindex="-1">
     <section class="pf-v6-c-page__main-section">
       This
-      <code>.pf-v5-c-page__main-section</code> has default padding.
+      <code>.pf-v6-c-page__main-section</code> has default padding.
     </section>
     <section class="pf-v6-c-page__main-section pf-m-no-padding pf-m-light">
       This
-      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-v6-c-page__main-section</code> uses
       <code>.pf-m-no-padding</code> to remove all padding.
     </section>
     <section
       class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
     >
       This
-      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-v6-c-page__main-section</code> uses
       <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
       <code>md</code> breakpoint.
     </section>
@@ -173,25 +173,25 @@ deprecated: true
   </div>
   <main class="pf-v6-c-page__main" tabindex="-1">
     <section class="pf-v6-c-page__main-subnav">
-      <code>.pf-v5-c-page__main-subnav</code> for horizontal subnav navigation
+      <code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
     </section>
     <section class="pf-v6-c-page__main-nav">
-      <code>.pf-v5-c-page__main-nav</code> for tertiary navigation
+      <code>.pf-v6-c-page__main-nav</code> for tertiary navigation
     </section>
     <section class="pf-v6-c-page__main-tabs">
-      <code>.pf-v5-c-page__main-tabs</code> for tabs
+      <code>.pf-v6-c-page__main-tabs</code> for tabs
     </section>
     <div class="pf-v6-c-page__main-group">
-      <code>.pf-v5-c-page__main-group</code> for a group of page sections
+      <code>.pf-v6-c-page__main-group</code> for a group of page sections
     </div>
     <section class="pf-v6-c-page__main-breadcrumb">
-      <code>.pf-v5-c-page__main-breadcrumb</code> for breadcrumbs
+      <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
     </section>
     <section class="pf-v6-c-page__main-section">
-      <code>.pf-v5-c-page__main-section</code> for main sections
+      <code>.pf-v6-c-page__main-section</code> for main sections
     </section>
     <section class="pf-v6-c-page__main-wizard">
-      <code>.pf-v5-c-page__main-wizard</code> for wizards
+      <code>.pf-v6-c-page__main-wizard</code> for wizards
     </section>
   </main>
 </div>
@@ -217,7 +217,7 @@ deprecated: true
         <div class="pf-v6-c-card">
           <div class="pf-v6-c-card__body">
             When a width limited page section is wider than the value of
-            <code>--pf-v5-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
+            <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
             <br />
             <br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
           </div>
@@ -239,23 +239,23 @@ The page header component is a deprecated approach to building a header on the p
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role="banner"` | `.pf-v5-c-page__header` | Identifies the element that serves as the banner region. |
-| `aria-expanded="true/false"` | `.pf-v5-c-page__header-brand-toggle > .pf-v5-c-button` | Indicates that the expandable content is visible and the current state of the contents. **Required** |
-| `aria-controls="[id of nav]"` | `.pf-v5-c-page__header-brand-toggle > .pf-v5-c-button` | Identifies the element controlled by the toggle. **Required**
+| `role="banner"` | `.pf-v6-c-page__header` | Identifies the element that serves as the banner region. |
+| `aria-expanded="true/false"` | `.pf-v6-c-page__header-brand-toggle > .pf-v6-c-button` | Indicates that the expandable content is visible and the current state of the contents. **Required** |
+| `aria-controls="[id of nav]"` | `.pf-v6-c-page__header-brand-toggle > .pf-v6-c-button` | Identifies the element controlled by the toggle. **Required**
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-page__header` | `<header>` |   Declares the page header. |
-| `.pf-v5-c-page__header-brand` | `<div>` |   Creates a header container to nest the brand component. |
-| `.pf-v5-c-page__header-brand-toggle` | `<div>` |   Creates a container to nest the sidebar toggle. |
-| `.pf-v5-c-page__header-brand-link` | `<a>`, `<span>` |   Creates a link for the brand logo. Use a `<span>` if there is no link. |
-| `.pf-v5-c-page__header-selector` | `<div>` |   Creates a header container to nest the context selector component. |
-| `.pf-v5-c-page__header-nav` | `<div>` |   Creates a container to nest the navigation component in the header. |
-| `.pf-v5-c-page__header-tools` | `<div>` |   Creates a container to nest the icons and menus in header. |
-| `.pf-v5-c-page__header-tools-group` | `<div>` |  Creates a container for grouping sets of icons and menus in header. |
-| `.pf-v5-c-page__header-tools-item` | `<div>` |  Creates a container for an item in a header tools group. |
-| `.pf-m-selected` | `.pf-v5-c-page__header-tools-item` | Modifies a header tools item to indicate that the button inside is in the selected state. |
-| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v5-c-page__header-tools-group`, `.pf-v5-c-page__header-tools-item` | Hides a header tools group or item at an optional breakpoint, or hides it at all [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) with `.pf-m-hidden`. |
-| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v5-c-page__header-tools-group`, `.pf-v5-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-v6-c-page__header` | `<header>` |   Declares the page header. |
+| `.pf-v6-c-page__header-brand` | `<div>` |   Creates a header container to nest the brand component. |
+| `.pf-v6-c-page__header-brand-toggle` | `<div>` |   Creates a container to nest the sidebar toggle. |
+| `.pf-v6-c-page__header-brand-link` | `<a>`, `<span>` |   Creates a link for the brand logo. Use a `<span>` if there is no link. |
+| `.pf-v6-c-page__header-selector` | `<div>` |   Creates a header container to nest the context selector component. |
+| `.pf-v6-c-page__header-nav` | `<div>` |   Creates a container to nest the navigation component in the header. |
+| `.pf-v6-c-page__header-tools` | `<div>` |   Creates a container to nest the icons and menus in header. |
+| `.pf-v6-c-page__header-tools-group` | `<div>` |  Creates a container for grouping sets of icons and menus in header. |
+| `.pf-v6-c-page__header-tools-item` | `<div>` |  Creates a container for an item in a header tools group. |
+| `.pf-m-selected` | `.pf-v6-c-page__header-tools-item` | Modifies a header tools item to indicate that the button inside is in the selected state. |
+| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-v6-c-page__header-tools-group`, `.pf-v6-c-page__header-tools-item` | Hides a header tools group or item at an optional breakpoint, or hides it at all [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) with `.pf-m-hidden`. |
+| `.pf-m-visible{-on-[breakpoint]}` | `.pf-v6-c-page__header-tools-group`, `.pf-v6-c-page__header-tools-item` | Shows a header tools group or item at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

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

@@ -1,7 +1,7 @@
 ---
 id: Page
 section: components
-cssPrefix: pf-v5-c-page
+cssPrefix: pf-v6-c-page
 wrapperTag: div
 ---import './Page.css'
 
@@ -34,16 +34,16 @@ wrapperTag: div
   <main class="pf-v6-c-page__main" tabindex="-1">
     <section class="pf-v6-c-page__main-section">
       This is a default
-      <code>.pf-v5-c-page__main-section</code>.
+      <code>.pf-v6-c-page__main-section</code>.
     </section>
     <section class="pf-v6-c-page__main-section pf-m-secondary">
       This
-      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-v6-c-page__main-section</code> uses
       <code>.pf-m-secondary</code>.
     </section>
     <section class="pf-v6-c-page__main-section">
       This is a default
-      <code>.pf-v5-c-page__main-section</code>.
+      <code>.pf-v6-c-page__main-section</code>.
     </section>
   </main>
 </div>
@@ -74,16 +74,16 @@ wrapperTag: div
   <main class="pf-v6-c-page__main" tabindex="-1">
     <section class="pf-v6-c-page__main-section">
       This is a default
-      <code>.pf-v5-c-page__main-section</code>.
+      <code>.pf-v6-c-page__main-section</code>.
     </section>
     <section class="pf-v6-c-page__main-section pf-m-secondary">
       This
-      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-v6-c-page__main-section</code> uses
       <code>.pf-m-secondary</code>.
     </section>
     <section class="pf-v6-c-page__main-section">
       This is a default
-      <code>.pf-v5-c-page__main-section</code>.
+      <code>.pf-v6-c-page__main-section</code>.
     </section>
   </main>
 </div>
@@ -188,18 +188,18 @@ wrapperTag: div
   <main class="pf-v6-c-page__main" tabindex="-1">
     <section class="pf-v6-c-page__main-section">
       This
-      <code>.pf-v5-c-page__main-section</code> has default padding.
+      <code>.pf-v6-c-page__main-section</code> has default padding.
     </section>
     <section class="pf-v6-c-page__main-section pf-m-no-padding">
       This
-      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-v6-c-page__main-section</code> uses
       <code>.pf-m-no-padding</code> to remove all padding.
     </section>
     <section
       class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
     >
       This
-      <code>.pf-v5-c-page__main-section</code> uses
+      <code>.pf-v6-c-page__main-section</code> uses
       <code>.pf-m-no-padding .pf-m-padding-on-md</code> to remove padding up to the
       <code>md</code> breakpoint.
     </section>
@@ -234,25 +234,25 @@ wrapperTag: div
   </div>
   <main class="pf-v6-c-page__main" tabindex="-1">
     <section class="pf-v6-c-page__main-subnav">
-      <code>.pf-v5-c-page__main-subnav</code> for horizontal subnav navigation
+      <code>.pf-v6-c-page__main-subnav</code> for horizontal subnav navigation
     </section>
     <section class="pf-v6-c-page__main-nav">
-      <code>.pf-v5-c-page__main-nav</code> for tertiary navigation
+      <code>.pf-v6-c-page__main-nav</code> for tertiary navigation
     </section>
     <section class="pf-v6-c-page__main-tabs">
-      <code>.pf-v5-c-page__main-tabs</code> for tabs
+      <code>.pf-v6-c-page__main-tabs</code> for tabs
     </section>
     <div class="pf-v6-c-page__main-group">
-      <code>.pf-v5-c-page__main-group</code> for a group of page sections
+      <code>.pf-v6-c-page__main-group</code> for a group of page sections
     </div>
     <section class="pf-v6-c-page__main-breadcrumb">
-      <code>.pf-v5-c-page__main-breadcrumb</code> for breadcrumbs
+      <code>.pf-v6-c-page__main-breadcrumb</code> for breadcrumbs
     </section>
     <section class="pf-v6-c-page__main-section">
-      <code>.pf-v5-c-page__main-section</code> for main sections
+      <code>.pf-v6-c-page__main-section</code> for main sections
     </section>
     <section class="pf-v6-c-page__main-wizard">
-      <code>.pf-v5-c-page__main-wizard</code> for wizards
+      <code>.pf-v6-c-page__main-wizard</code> for wizards
     </section>
   </main>
 </div>
@@ -288,7 +288,7 @@ wrapperTag: div
         <div class="pf-v6-c-card">
           <div class="pf-v6-c-card__body">
             When a width limited page section is wider than the value of
-            <code>--pf-v5-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
+            <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
             <br />
             <br />The content in this example is placed in a card to better illustrate how the section behaves when it is centered. A card is not required to center a page section.
           </div>
@@ -310,44 +310,45 @@ This component provides the basic chrome for a page, including sidebar and main
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role="main"` | `.pf-v5-c-page__main` | Identifies the element that serves as the main region. |
-| `tabindex="-1"` | `.pf-v5-c-page__main` | Allows the main region to receive programmatic focus. **Required** |
-| `id="[id]"` | `.pf-v5-c-page__main` | Provides a hook for sending focus to new content. **Required** |
-| `tabindex="0"` | `.pf-v5-c-page__main-section.pf-m-overflow-scroll` | If a page section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the page section must include either a focusable element within the scrollable region or the page section itself must be focusable by adding `tabindex="0"`. |
+| `role="main"` | `.pf-v6-c-page__main` | Identifies the element that serves as the main region. |
+| `tabindex="-1"` | `.pf-v6-c-page__main` | Allows the main region to receive programmatic focus. **Required** |
+| `id="[id]"` | `.pf-v6-c-page__main` | Provides a hook for sending focus to new content. **Required** |
+| `tabindex="0"` | `.pf-v6-c-page__main-section.pf-m-overflow-scroll` | If a page section has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the page section must include either a focusable element within the scrollable region or the page section itself must be focusable by adding `tabindex="0"`. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-page` | `<div>` |   Declares the page component. |
-| `.pf-v5-c-page__sidebar` | `<aside>` |   Declares the page sidebar. |
-| `.pf-v5-c-page__sidebar-body` | `<div>` | Creates a wrapper within the sidebar to hold content. **Note: The last/only `.pf-v5-c-page__sidebar-body` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
-| `.pf-v5-c-page__main` | `<main>` |   Declares the main page area. |
-| `.pf-v5-c-page__main-nav` | `<section>` |   Creates a container to nest the navigation component in the main page area. |
-| `.pf-v5-c-page__main-breadcrumb` | `<section>` |   Creates a container to nest the breadcrumb component in the main page area. |
-| `.pf-v5-c-page__main-section` | `<section>` |  Creates a section container in the main page area. **Note: The last/only `.pf-v5-c-page__main-section` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.**  |
-| `.pf-v5-c-page__main-tabs` | `<section>` | Creates a container to nest the tabs component in the main page area. |
-| `.pf-v5-c-page__main-wizard` | `<section>` | Creates a container to nest the wizard component in the main page area. |
-| `.pf-v5-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required when using `.pf-m-limit-width` on `.pf-v5-c-page__main-section`** |
-| `.pf-v5-c-page__main-group` | `<div>` | Creates the group of `.pf-v5-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
-| `.pf-v5-c-page__drawer` | `<div>` |  Creates a container for the drawer component when placing the main page element in the drawer body. |
-| `.pf-m-expanded` | `.pf-v5-c-page__sidebar` |  Modifies the sidebar for the expanded state. |
-| `.pf-m-collapsed` | `.pf-v5-c-page__sidebar` |  Modifies the sidebar for the collapsed state. |
-| `.pf-m-page-insets` | `.pf-v5-c-page__sidebar-body` |  Modifies a sidebar body padding/inset to visually match padding of page elements. |
-| `.pf-m-inset-none` | `.pf-v5-c-page__sidebar-body` | Removes a sidebar body left/right inset. |
-| `.pf-m-light` | `.pf-v5-c-page__sidebar` |  Modifies the sidebar the light variation. **Note: for use with a light themed nav component** |
-| `.pf-m-light` | `.pf-v5-c-page__main-section` | Modifies a main page section to have a light theme. |
-| `.pf-m-dark-200` | `.pf-v5-c-page__main-section` |  Modifies a main page section to have a dark theme and a dark transparent background. |
-| `.pf-m-dark-100` | `.pf-v5-c-page__main-section` |  Modifies a main page section to have a dark theme and a darker transparent background. |
-| `.pf-m-light-200` | `.pf-v5-c-page__main-wizard` | Modifies a wizard page section to have a light 200 theme. |
-| `.pf-m-padding{-on-[breakpoint]}` | `.pf-v5-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
-| `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v5-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-fill` | `.pf-v5-c-page__main-section`, `.pf-v5-c-page__sidebar-body` | Modifies the element to grow to fill the available space. |
-| `.pf-m-no-fill` | `.pf-v5-c-page__main-section`, `.pf-v5-c-page__sidebar-body` | Modifies the element to not grow to fill the available vertical space. |
-| `.pf-m-limit-width` | `.pf-v5-c-page__main-section` | Modifies a page section to limit the `max-width` of the content inside. |
-| `.pf-m-align-center` | `.pf-v5-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
-| `.pf-m-sticky-top{-on-[breakpoint]-height}` | `.pf-v5-c-page__main-*` | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint. |
-| `.pf-m-sticky-bottom{-on-[breakpoint]-height}` | `.pf-v5-c-page__main-*` | Modifies a section/group to be sticky to the bottom of its container at an optional height breakpoint. |
-| `.pf-m-shadow-bottom` | `.pf-v5-c-page__main-*` | Modifies a section/group to have a bottom shadow. |
-| `.pf-m-shadow-top` | `.pf-v5-c-page__main-*` | Modifies a section/group to have a top shadow. |
-| `.pf-m-overflow-scroll` | `.pf-v5-c-page__main-*` | Modifies a section/group to show a scrollbar if it has overflow content. |
+| `.pf-v6-c-page` | `<div>` | Declares the page component. |
+| `.pf-v6-c-page__sidebar` | `<aside>` | Declares the page sidebar. |
+| `.pf-v6-c-page__sidebar-body` | `<div>` | Creates a wrapper within the sidebar to hold content. **Note: The last/only `.pf-v6-c-page__sidebar-body` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.** |
+| `.pf-v6-c-page__main` | `<main>` | Declares the main page area. |
+| `.pf-v6-c-page__main-nav` | `<section>` | Creates a container to nest the (deprecated) tertiary navigation component in the main page area. |
+| `.pf-v6-c-page__main-subnav` | `<section>` | Creates a container to nest the horizontal subnav navigation component in the main page area. |
+| `.pf-v6-c-page__main-breadcrumb` | `<section>` | Creates a container to nest the breadcrumb component in the main page area. |
+| `.pf-v6-c-page__main-section` | `<section>` | Creates a section container in the main page area. **Note: The last/only `.pf-v6-c-page__main-section` element will grow to fill the availble vertical space. You can change this behavior using `.pf-m-fill` and `.pf-m-no-fill`, which are documented below.**  |
+| `.pf-v6-c-page__main-tabs` | `<section>` | Creates a container to nest the tabs component in the main page area. |
+| `.pf-v6-c-page__main-wizard` | `<section>` | Creates a container to nest the wizard component in the main page area. |
+| `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required when using `.pf-m-limit-width` on `.pf-v6-c-page__main-section`** |
+| `.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-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-inset-none` | `.pf-v6-c-page__sidebar-body` | Removes a sidebar body left/right inset. |
+| `.pf-m-light` | `.pf-v6-c-page__sidebar` | Modifies the sidebar the light variation. **Note: for use with a light themed nav component** |
+| `.pf-m-light` | `.pf-v6-c-page__main-section` | Modifies a main page section to have a light theme. |
+| `.pf-m-dark-200` | `.pf-v6-c-page__main-section` | Modifies a main page section to have a dark theme and a dark transparent background. |
+| `.pf-m-dark-100` | `.pf-v6-c-page__main-section` | Modifies a main page section to have a dark theme and a darker transparent background. |
+| `.pf-m-light-200` | `.pf-v6-c-page__main-wizard` | Modifies a wizard page section to have a light 200 theme. |
+| `.pf-m-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Modifies the main page section to add padding back in at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). Should be used with pf-m-no-padding. |
+| `.pf-m-no-padding{-on-[breakpoint]}` | `.pf-v6-c-page__main-section` | Removes padding from the main page section at an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-fill` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__sidebar-body` | Modifies the element to grow to fill the available space. |
+| `.pf-m-no-fill` | `.pf-v6-c-page__main-section`, `.pf-v6-c-page__sidebar-body` | Modifies the element to not 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. |
+| `.pf-m-align-center` | `.pf-v6-c-page__main-section.pf-m-limit-width` | Modifies a page section body to align center. |
+| `.pf-m-sticky-top{-on-[breakpoint]-height}` | `.pf-v6-c-page__main-*` | Modifies a section/group to be sticky to the top of its container at an optional height breakpoint. |
+| `.pf-m-sticky-bottom{-on-[breakpoint]-height}` | `.pf-v6-c-page__main-*` | Modifies a section/group to be sticky to the bottom of its container at an optional height breakpoint. |
+| `.pf-m-shadow-bottom` | `.pf-v6-c-page__main-*` | Modifies a section/group to have a bottom shadow. |
+| `.pf-m-shadow-top` | `.pf-v6-c-page__main-*` | Modifies a section/group to have a top shadow. |
+| `.pf-m-overflow-scroll` | `.pf-v6-c-page__main-*` | Modifies a section/group to show a scrollbar if it has overflow content. |

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

@@ -1,7 +1,7 @@
 ---
 id: Pagination
 section: components
-cssPrefix: pf-v5-c-pagination
+cssPrefix: pf-v6-c-pagination
 ---import './Pagination.css'
 
 ## Examples
@@ -1511,37 +1511,37 @@ cssPrefix: pf-v5-c-pagination
 
 ## Documentation
 
-Note: `<button>` or `<a>` elements can be used in `.pf-v5-c-pagination__nav-page-select`.
+Note: `<button>` or `<a>` elements can be used in `.pf-v6-c-pagination__nav-page-select`.
 
 ### Accessibility
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-label`  | `.pf-v5-c-pagination__nav` |  Provides an accessible name for pagination navigation element. **Required** |
-| `type="number"` | `.pf-v5-c-pagination__nav-page-select` > `.pf-v5-c-form-control` | Defines a field as a number. **Required** |
-| `value` | `.pf-v5-c-pagination__nav-page-select` > `.pf-v5-c-form-control` | Provides initial integer value. **Required** |
-| `min` | `.pf-v5-c-pagination__nav-page-select` > `.pf-v5-c-form-control` | Provides minimum integer value. **Required** |
-| `max` | `.pf-v5-c-pagination__nav-page-select` > `.pf-v5-c-form-control` | Provides max integer value. **Required** |
+| `aria-label`  | `.pf-v6-c-pagination__nav` |  Provides an accessible name for pagination navigation element. **Required** |
+| `type="number"` | `.pf-v6-c-pagination__nav-page-select` > `.pf-v6-c-form-control` | Defines a field as a number. **Required** |
+| `value` | `.pf-v6-c-pagination__nav-page-select` > `.pf-v6-c-form-control` | Provides initial integer value. **Required** |
+| `min` | `.pf-v6-c-pagination__nav-page-select` > `.pf-v6-c-form-control` | Provides minimum integer value. **Required** |
+| `max` | `.pf-v6-c-pagination__nav-page-select` > `.pf-v6-c-form-control` | Provides max integer value. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-pagination` | `<div>` |  Initiates pagination. |
-| `.pf-v5-c-pagination__current` | `<div>` |  Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`. |
-| `.pf-v5-c-pagination__total-items` | `<div>` | Initiates element to replace the options menu on summary. |
-| `.pf-v5-c-pagination__nav` | `<nav>` |  Initiates pagination nav. |
-| `.pf-v5-c-pagination__nav-control` | `<div>` |  Initiates pagination nav control. |
-| `.pf-v5-c-pagination__nav-page-select` | `<div>` |  Initiates pagination nav page select. |
-| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-v5-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-v5-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-bottom` | `.pf-v5-c-pagination` | Modifies for bottom pagination component styles. |
-| `.pf-m-compact` | `.pf-v5-c-pagination` | Modifies for compact pagination component styles. |
-| `.pf-m-static` | `.pf-v5-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
-| `.pf-m-sticky` | `.pf-v5-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-v5-c-pagination.pf-m-bottom`. |
-| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v5-c-pagination` | Modifies pagination horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-page-insets` | `.pf-v5-c-pagination` |  Modifies the pagination component padding/inset to visually match padding of page elements. |
-| `.pf-m-first` | `.pf-v5-c-pagination__nav-control` | Indicates the control is for the first page button. |
-| `.pf-m-prev` | `.pf-v5-c-pagination__nav-control` | Indicates the control is for the previous page button. |
-| `.pf-m-next` | `.pf-v5-c-pagination__nav-control` | Indicates the control is for the next page button. |
-| `.pf-m-last` | `.pf-v5-c-pagination__nav-control` | Indicates the control is for the last page button. |
+| `.pf-v6-c-pagination` | `<div>` |  Initiates pagination. |
+| `.pf-v6-c-pagination__current` | `<div>` |  Initiates element to display currently displayed items for use in responsive view. Only needed for default pagination, not `.pf-m-bottom`. |
+| `.pf-v6-c-pagination__total-items` | `<div>` | Initiates element to replace the options menu on summary. |
+| `.pf-v6-c-pagination__nav` | `<nav>` |  Initiates pagination nav. |
+| `.pf-v6-c-pagination__nav-control` | `<div>` |  Initiates pagination nav control. |
+| `.pf-v6-c-pagination__nav-page-select` | `<div>` |  Initiates pagination nav page select. |
+| `.pf-m-display-summary{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for summary display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-display-full{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies for full display pagination component styles at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-bottom` | `.pf-v6-c-pagination` | Modifies for bottom pagination component styles. |
+| `.pf-m-compact` | `.pf-v6-c-pagination` | Modifies for compact pagination component styles. |
+| `.pf-m-static` | `.pf-v6-c-pagination.pf-m-bottom` | Modifies bottom pagination to not be positioned sticky on summary. |
+| `.pf-m-sticky` | `.pf-v6-c-pagination` | Modifies the pagination to be sticky to its container. It will be sticky to the top of the container by default, and sticky to the bottom of the container when applied to `.pf-v6-c-pagination.pf-m-bottom`. |
+| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-v6-c-pagination` | Modifies pagination horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-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. |
+| `.pf-m-next` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the next page button. |
+| `.pf-m-last` | `.pf-v6-c-pagination__nav-control` | Indicates the control is for the last page button. |

package/docs/components/Panel/examples/Panel.md

@@ -1,7 +1,7 @@
 ---
 id: 'Panel'
 section: components
-cssPrefix: pf-v5-c-panel
+cssPrefix: pf-v6-c-panel
 ---## Examples
 
 ### Basic
@@ -163,12 +163,12 @@ cssPrefix: pf-v5-c-panel
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-panel` | `<div>` | Initiates the panel. **Required** |
-| `.pf-v5-c-panel__header` | `<div>` | Initiates the panel header. |
-| `.pf-v5-c-panel__main` | `<div>` | Initiates the panel main content. |
-| `.pf-v5-c-panel__main-body` | `<div>` | Initiates a panel content body container. |
-| `.pf-v5-c-panel__footer` | `<div>` | Initiates the panel footer. |
-| `.pf-m-bordered` | `.pf-v5-c-panel` | Modifies the panel for bordered styles. |
-| `.pf-m-raised` | `.pf-v5-c-panel` | Modifies the panel for raised styles. |
-| `.pf-m-scrollable` | `.pf-v5-c-panel` | Modifies the panel for scrollable styles. |
-| `.pf-m-secondary` | `.pf-v5-c-panel` | Modifies the panel for secondary styles. |
+| `.pf-v6-c-panel` | `<div>` | Initiates the panel. **Required** |
+| `.pf-v6-c-panel__header` | `<div>` | Initiates the panel header. |
+| `.pf-v6-c-panel__main` | `<div>` | Initiates the panel main content. |
+| `.pf-v6-c-panel__main-body` | `<div>` | Initiates a panel content body container. |
+| `.pf-v6-c-panel__footer` | `<div>` | Initiates the panel footer. |
+| `.pf-m-bordered` | `.pf-v6-c-panel` | Modifies the panel for bordered styles. |
+| `.pf-m-raised` | `.pf-v6-c-panel` | Modifies the panel for raised styles. |
+| `.pf-m-scrollable` | `.pf-v6-c-panel` | Modifies the panel for scrollable styles. |
+| `.pf-m-secondary` | `.pf-v6-c-panel` | Modifies the panel for secondary styles. |