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

package/docs/components/Banner/examples/Banner.md

@@ -1,7 +1,7 @@
 ---
 id: 'Banner'
 section: components
-cssPrefix: pf-v5-c-banner
+cssPrefix: pf-v6-c-banner
 ---## Examples
 
 ### Basic
@@ -93,7 +93,7 @@ Banners can be styled with one of 9 different nonstatus colors. A nonstatus bann
 
 ### Status
 
-When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-v5-screen-reader` or an equivalent.
+When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-v6-screen-reader` or an equivalent.
 
 ```html
 <div class="pf-v6-c-banner pf-m-success">
@@ -167,18 +167,18 @@ When a banner is used to convey status, it is advised to add an icon that also c
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-banner` | `<div>` |  Initiates a banner. **Required** |
-| `.pf-m-red` | `.pf-v5-c-banner` |  Modifies banner for red styling. |
-| `.pf-m-orangered` | `.pf-v5-c-banner` |  Modifies banner for orangered styling. |
-| `.pf-m-orange` | `.pf-v5-c-banner` |  Modifies banner for orange styling. |
-| `.pf-m-gold` | `.pf-v5-c-banner` |  Modifies banner for gold styling. |
-| `.pf-m-green` | `.pf-v5-c-banner` |  Modifies banner for green styling. |
-| `.pf-m-cyan` | `.pf-v5-c-banner` |  Modifies banner for cyan styling. |
-| `.pf-m-blue` | `.pf-v5-c-banner` |  Modifies banner for blue styling. |
-| `.pf-m-purple` | `.pf-v5-c-banner` |  Modifies banner for purple styling. |
-| `.pf-m-success` | `.pf-v5-c-banner` |  Modifies banner for success status styling. |
-| `.pf-m-warning` | `.pf-v5-c-banner` |  Modifies banner for warning status styling. |
-| `.pf-m-danger` | `.pf-v5-c-banner` |  Modifies banner for danger status styling. |
-| `.pf-m-info` | `.pf-v5-c-banner` |  Modifies banner for info status styling. |
-| `.pf-m-custom` | `.pf-v5-c-banner` |  Modifies banner for custom status styling. |
-| `.pf-m-sticky` | `.pf-v5-c-banner` |  Modifies banner to be sticky to the top of its container. |
+| `.pf-v6-c-banner` | `<div>` |  Initiates a banner. **Required** |
+| `.pf-m-red` | `.pf-v6-c-banner` |  Modifies banner for red styling. |
+| `.pf-m-orangered` | `.pf-v6-c-banner` |  Modifies banner for orangered styling. |
+| `.pf-m-orange` | `.pf-v6-c-banner` |  Modifies banner for orange styling. |
+| `.pf-m-gold` | `.pf-v6-c-banner` |  Modifies banner for gold styling. |
+| `.pf-m-green` | `.pf-v6-c-banner` |  Modifies banner for green styling. |
+| `.pf-m-cyan` | `.pf-v6-c-banner` |  Modifies banner for cyan styling. |
+| `.pf-m-blue` | `.pf-v6-c-banner` |  Modifies banner for blue styling. |
+| `.pf-m-purple` | `.pf-v6-c-banner` |  Modifies banner for purple styling. |
+| `.pf-m-success` | `.pf-v6-c-banner` |  Modifies banner for success status styling. |
+| `.pf-m-warning` | `.pf-v6-c-banner` |  Modifies banner for warning status styling. |
+| `.pf-m-danger` | `.pf-v6-c-banner` |  Modifies banner for danger status styling. |
+| `.pf-m-info` | `.pf-v6-c-banner` |  Modifies banner for info status styling. |
+| `.pf-m-custom` | `.pf-v6-c-banner` |  Modifies banner for custom status styling. |
+| `.pf-m-sticky` | `.pf-v6-c-banner` |  Modifies banner to be sticky to the top of its container. |

package/docs/components/Brand/examples/Brand.css

@@ -1,12 +1,12 @@
 .show-dark,
-:where(.pf-v5-theme-dark) .show-light {
+:where(.pf-v6-theme-dark) .show-light {
   display: none;
 }
 
-:where(.pf-v5-theme-dark) .show-dark {
+:where(.pf-v6-theme-dark) .show-dark {
   display: revert;
 }
 
-:where(.pf-v5-theme-dark) .show-dark .pf-m-picture {
+:where(.pf-v6-theme-dark) .show-dark .pf-m-picture {
   display: inline-flex;
 }

package/docs/components/Brand/examples/Brand.md

@@ -32,7 +32,7 @@ section: components
 <div class="show-light">
   <picture
     class="pf-v6-c-brand pf-m-picture"
-    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-md: 220px;"
+    style="--pf-v6-c-brand--Width: 40px; --pf-v6-c-brand--Width-on-md: 220px;"
   >
     <source
       media="(min-width: 768px)"
@@ -49,7 +49,7 @@ section: components
 <div class="show-dark">
   <picture
     class="pf-v6-c-brand pf-m-picture"
-    style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-md: 220px;"
+    style="--pf-v6-c-brand--Width: 40px; --pf-v6-c-brand--Width-on-md: 220px;"
   >
     <source
       media="(min-width: 768px)"
@@ -75,13 +75,13 @@ Simple brand component.
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `alt` | `.pf-v5-c-brand` | The alt attribute specifies an alternate text for an image, if the image cannot be displayed. **Required** |
+| `alt` | `.pf-v6-c-brand` | The alt attribute specifies an alternate text for an image, if the image cannot be displayed. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-brand` | `<img>, <picture>` |  Initiates a brand image. **Required** |
-| `.pf-m-picture` | `.pf-v5-c-brand` |  Modifies a brand image to a picture. |
-| `--pf-v5-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-v5-c-brand` |  Modifies the width value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `--pf-v5-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-v5-c-brand` |  Modifies the height value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-v6-c-brand` | `<img>, <picture>` |  Initiates a brand image. **Required** |
+| `.pf-m-picture` | `.pf-v6-c-brand` |  Modifies a brand image to a picture. |
+| `--pf-v6-c-brand--Width{-on-[breakpoint]}: {width}` | `.pf-v6-c-brand` |  Modifies the width value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `--pf-v6-c-brand--Height{-on-[breakpoint]}: {height}` | `.pf-v6-c-brand` |  Modifies the height value of a picture on optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/components/Breadcrumb/examples/Breadcrumb.md

@@ -1,7 +1,7 @@
 ---
 id: Breadcrumb
 section: components
-cssPrefix: pf-v5-c-breadcrumb
+cssPrefix: pf-v6-c-breadcrumb
 ---import './Breadcrumb.css'
 
 ## Examples
@@ -281,7 +281,7 @@ cssPrefix: pf-v5-c-breadcrumb
 
 A breadcrumb is a list of links to display a user's navigational hierarchy. The last item of the breadcrumb list indicates the current page's location.
 
-* `.pf-v5-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
+* `.pf-v6-c-breadcrumb__list` is the default breadcrumb navigation. It provides links to previous navigation pages and also shows the current page's location.
 
 In the event that a page does not have a traditional `<h1>` page title, a heading can be included in the breadcrumbs and an optional link within.
 
@@ -289,18 +289,18 @@ In the event that a page does not have a traditional `<h1>` page title, a headin
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-label="[landmark description]"` | `.pf-v5-c-breadcrumb` |  Describes `<nav>` landmark. |
-| `aria-label="[link name]"` | `.pf-v5-c-breadcrumb__link` | If link has no text (icon), add an aria-label. |
-| `aria-current="page"` | `.pf-v5-c-breadcrumb__item`, `.pf-v5-c-breadcrumb__link` |  Indicates the current page within a set of pages. |
+| `aria-label="[landmark description]"` | `.pf-v6-c-breadcrumb` |  Describes `<nav>` landmark. |
+| `aria-label="[link name]"` | `.pf-v6-c-breadcrumb__link` | If link has no text (icon), add an aria-label. |
+| `aria-current="page"` | `.pf-v6-c-breadcrumb__item`, `.pf-v6-c-breadcrumb__link` |  Indicates the current page within a set of pages. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-breadcrumb` | `<nav>` | Initiates a primary breadcrumb element. **Required** |
-| `.pf-v5-c-breadcrumb__list` | `<ol>` | Initiates default breadcrumb ordered list. |
-| `.pf-v5-c-breadcrumb__item` | `<li>` | Initiates default breadcrumb list item. |
-| `.pf-v5-c-breadcrumb__item-divider` | `<span>` | Initiates default breadcrumb list item divider. |
-| `.pf-v5-c-breadcrumb__link` | `<a>`, `<button>` | Initiates default breadcrumb list link. |
-| `.pf-v5-c-breadcrumb__title` | `<h1>` | Initiates breadcrumb header. |
-| `.pf-m-current` | `.pf-v5-c-breadcrumb__link` | Modifies to display the list item as the current item. |
+| `.pf-v6-c-breadcrumb` | `<nav>` | Initiates a primary breadcrumb element. **Required** |
+| `.pf-v6-c-breadcrumb__list` | `<ol>` | Initiates default breadcrumb ordered list. |
+| `.pf-v6-c-breadcrumb__item` | `<li>` | Initiates default breadcrumb list item. |
+| `.pf-v6-c-breadcrumb__item-divider` | `<span>` | Initiates default breadcrumb list item divider. |
+| `.pf-v6-c-breadcrumb__link` | `<a>`, `<button>` | Initiates default breadcrumb list link. |
+| `.pf-v6-c-breadcrumb__title` | `<h1>` | Initiates breadcrumb header. |
+| `.pf-m-current` | `.pf-v6-c-breadcrumb__link` | Modifies to display the list item as the current item. |

package/docs/components/Button/examples/Button.css

@@ -1,8 +1,8 @@
-.ws-core-c-button .pf-v5-c-button {
+.ws-core-c-button .pf-v6-c-button {
   margin-inline-end: 6px;
   margin-block-end: 6px;
 }
 
-#ws-core-c-button-plain-with-no-padding .pf-v5-c-button {
+#ws-core-c-button-plain-with-no-padding .pf-v6-c-button {
   margin: 0;
 }

package/docs/components/Button/examples/Button.md

@@ -1,7 +1,7 @@
 ---
 id: Button
 section: components
-cssPrefix: pf-v5-c-button
+cssPrefix: pf-v6-c-button
 ---import './Button.css'
 
 ## Examples
@@ -1844,42 +1844,42 @@ Semantic buttons and links are important for usability as well as accessibility.
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-pressed="true or false"` | `.pf-v5-c-button` | Indicates that the button is a toggle. When set to "true", `pf-m-active` should also be set so that the button displays in an active state. **Required when button is a toggle** |
-| `aria-label="[button label text]"` | `.pf-v5-c-button.pf-m-plain` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
-| `aria-label="[descriptive text]"` | `a.pf-v5-c-button`, `span.pf-v5-c-button.pf-m-link.pf-m-inline` | The button component's text should adequately describe its purpose. If it does not, `aria-label` can provide more detailed interaction information. |
-| `disabled` | `button.pf-v5-c-button` | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. **Required when button is disabled** |
-| `aria-disabled="true"` | `button.pf-v5-c-button` | When a button element is used, indicates that it is unavailable but does not prevent keyboard or hover interactions. Used when a disabled button provides interactive elements like a tooltip. |
-| `aria-disabled="true"` | `a.pf-v5-c-button.pf-m-disabled`, `span.pf-v5-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, indicates that it is unavailable. **Required when element is disabled** |
-| `aria-expanded="true"` | `.pf-v5-c-button.pf-m-expanded` | Indicates that the expanded content element is visible. **Required** |
-| `tabindex="-1"` | `a.pf-v5-c-button.pf-m-disabled`, `span.pf-v5-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, removes it from keyboard focus. **Required when element is disabled** |
-| `tabindex="0"` | `span.pf-v5-c-button.pf-m-link.pf-m-inline` | Inserts the span into the tab order of the page so that it is focusable. **Required when the element is a span** |
+| `aria-pressed="true or false"` | `.pf-v6-c-button` | Indicates that the button is a toggle. When set to "true", `pf-m-active` should also be set so that the button displays in an active state. **Required when button is a toggle** |
+| `aria-label="[button label text]"` | `.pf-v6-c-button.pf-m-plain` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
+| `aria-label="[descriptive text]"` | `a.pf-v6-c-button`, `span.pf-v6-c-button.pf-m-link.pf-m-inline` | The button component's text should adequately describe its purpose. If it does not, `aria-label` can provide more detailed interaction information. |
+| `disabled` | `button.pf-v6-c-button` | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. **Required when button is disabled** |
+| `aria-disabled="true"` | `button.pf-v6-c-button` | When a button element is used, indicates that it is unavailable but does not prevent keyboard or hover interactions. Used when a disabled button provides interactive elements like a tooltip. |
+| `aria-disabled="true"` | `a.pf-v6-c-button.pf-m-disabled`, `span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, indicates that it is unavailable. **Required when element is disabled** |
+| `aria-expanded="true"` | `.pf-v6-c-button.pf-m-expanded` | Indicates that the expanded content element is visible. **Required** |
+| `tabindex="-1"` | `a.pf-v6-c-button.pf-m-disabled`, `span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, removes it from keyboard focus. **Required when element is disabled** |
+| `tabindex="0"` | `span.pf-v6-c-button.pf-m-link.pf-m-inline` | Inserts the span into the tab order of the page so that it is focusable. **Required when the element is a span** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-button` | `<button>, <span>` |  Initiates a button. Always use it with a modifier class. **Required** |
-| `.pf-v5-c-button__icon` | `<span>` | Initiates a button icon. |
-| `.pf-v5-c-button__progress` | `<span>` | Initiates a button progress container. |
-| `.pf-v5-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons.|
-| `.pf-m-primary` | `.pf-v5-c-button` | Modifies for primary styles. |
-| `.pf-m-secondary` | `.pf-v5-c-button` | Modifies for secondary styles. |
-| `.pf-m-tertiary` | `.pf-v5-c-button` | Modifies for tertiary styles. |
-| `.pf-m-danger` | `.pf-v5-c-button` | Modifies for danger styles. |
-| `.pf-m-warning` | `.pf-v5-c-button` | Modifies for warning styles. |
-| `.pf-m-link` | `.pf-v5-c-button` | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
-| `.pf-m-plain` | `.pf-v5-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc. |
-| `.pf-m-no-padding` | `.pf-v5-c-button.pf-m-plain` | Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them. |
-| `.pf-m-inline` | `.pf-v5-c-button.pf-m-link` | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |
-| `.pf-m-block` | `.pf-v5-c-button` | Creates a block level button. |
-| `.pf-m-control` | `.pf-v5-c-button` | Modifies for control styles. **Note:** This modifier should only be used when using buttons in the Input Group or Clipboard Copy components. |
-| `.pf-m-expanded` | `.pf-v5-c-button.pf-m-control` | Modifies a control button for the expanded state. |
-| `.pf-m-start` | `.pf-v5-c-button__icon` | Applies right spacing to an icon inside of a button when the icon comes before text. |
-| `.pf-m-end` | `.pf-v5-c-button__icon` | Applies left spacing to an icon inside of a button when the icon comes after text. |
-| `.pf-m-active` | `.pf-v5-c-button` | Forces display of the active state of the button. This modifier should be used when `aria-pressed` is set to true so that the button displays in an active state. |
-| `.pf-m-small` | `.pf-v5-c-button` | Modifies the button so that it has small font size. |
-| `.pf-m-aria-disabled` | `.pf-v5-c-button` | Modifies a button to be visually disabled, yet is still focusable. |
-| `.pf-m-display-lg` | `.pf-v5-c-button`, `pf-v5-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
-| `.pf-m-progress` | `.pf-v5-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
-| `.pf-m-in-progress` | `.pf-v5-c-button` | Indicates that the button is in the in progress state. |
-| `.pf-m-stateful` | `.pf-v5-c-button` | Indicates that the button is used for one of read, unread, and attention states. **Note:** Always use with a modifier of `.pf-m-read`, `.pf-m-unread`, or `.pf-m-attention`. |
+| `.pf-v6-c-button` | `<button>, <span>` |  Initiates a button. Always use it with a modifier class. **Required** |
+| `.pf-v6-c-button__icon` | `<span>` | Initiates a button icon. |
+| `.pf-v6-c-button__progress` | `<span>` | Initiates a button progress container. |
+| `.pf-v6-c-button__count` | `<span>` | Initiates a button count container. **Note:** Count should only be used on link buttons.|
+| `.pf-m-primary` | `.pf-v6-c-button` | Modifies for primary styles. |
+| `.pf-m-secondary` | `.pf-v6-c-button` | Modifies for secondary styles. |
+| `.pf-m-tertiary` | `.pf-v6-c-button` | Modifies for tertiary styles. |
+| `.pf-m-danger` | `.pf-v6-c-button` | Modifies for danger styles. |
+| `.pf-m-warning` | `.pf-v6-c-button` | Modifies for warning styles. |
+| `.pf-m-link` | `.pf-v6-c-button` | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
+| `.pf-m-plain` | `.pf-v6-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc. |
+| `.pf-m-no-padding` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them. |
+| `.pf-m-inline` | `.pf-v6-c-button.pf-m-link` | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |
+| `.pf-m-block` | `.pf-v6-c-button` | Creates a block level button. |
+| `.pf-m-control` | `.pf-v6-c-button` | Modifies for control styles. **Note:** This modifier should only be used when using buttons in the Input Group or Clipboard Copy components. |
+| `.pf-m-expanded` | `.pf-v6-c-button.pf-m-control` | Modifies a control button for the expanded state. |
+| `.pf-m-start` | `.pf-v6-c-button__icon` | Applies right spacing to an icon inside of a button when the icon comes before text. |
+| `.pf-m-end` | `.pf-v6-c-button__icon` | Applies left spacing to an icon inside of a button when the icon comes after text. |
+| `.pf-m-active` | `.pf-v6-c-button` | Forces display of the active state of the button. This modifier should be used when `aria-pressed` is set to true so that the button displays in an active state. |
+| `.pf-m-small` | `.pf-v6-c-button` | Modifies the button so that it has small font size. |
+| `.pf-m-aria-disabled` | `.pf-v6-c-button` | Modifies a button to be visually disabled, yet is still focusable. |
+| `.pf-m-display-lg` | `.pf-v6-c-button`, `pf-v6-c-button.pf-m-link` | Modifies the button and link button for large display styling. For example, use this modifier to achieve "call to action" styles. |
+| `.pf-m-progress` | `.pf-v6-c-button` | Indicates that the button supports the progress state. **Note:** Not used with the plain variation. |
+| `.pf-m-in-progress` | `.pf-v6-c-button` | Indicates that the button is in the in progress state. |
+| `.pf-m-stateful` | `.pf-v6-c-button` | Indicates that the button is used for one of read, unread, and attention states. **Note:** Always use with a modifier of `.pf-m-read`, `.pf-m-unread`, or `.pf-m-attention`. |

package/docs/components/CalendarMonth/examples/CalendarMonth.md

@@ -2,7 +2,7 @@
 id: 'Calendar month'
 section: components
 subsection: date-and-time
-cssPrefix: pf-v5-c-calendar-month
+cssPrefix: pf-v6-c-calendar-month
 ---## Examples
 
 ### Date selected
@@ -1486,36 +1486,36 @@ cssPrefix: pf-v5-c-calendar-month
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-hidden="true"` | `.pf-v5-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
-| `aria-hidden="true"` | `.pf-v5-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
-| `.pf-v5-screen-reader` | `.pf-v5-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
-| `aria-label="[Prev/Next] month"` | `.pf-v5-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
-| `disabled` | `.pf-v5-c-calendar-month__date` | Indicates that a date is selected. **Required when the parent is `.pf-v5-c-calendar-month__dates-cell.pf-m-disabled`** |
-| `aria-label="[date] [month] [year]"` | `.pf-v5-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |
+| `aria-hidden="true"` | `.pf-v6-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
+| `aria-hidden="true"` | `.pf-v6-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
+| `.pf-v6-screen-reader` | `.pf-v6-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
+| `aria-label="[Prev/Next] month"` | `.pf-v6-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
+| `disabled` | `.pf-v6-c-calendar-month__date` | Indicates that a date is selected. **Required when the parent is `.pf-v6-c-calendar-month__dates-cell.pf-m-disabled`** |
+| `aria-label="[date] [month] [year]"` | `.pf-v6-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-calendar-month` | `<div>` | Initiates the calendar month component. **Required** |
-| `.pf-v5-c-calendar-month__header` | `<div>` | Initiates the calendar month header. **Required** |
-| `.pf-v5-c-calendar-month__header-nav-control` | `<div>` | Initiates a nav control for navigating by month. **Required** |
-| `.pf-v5-c-calendar-month__header-month` | `<div>` | Initiates the month select. **Required** |
-| `.pf-v5-c-calendar-month__header-year` | `<div>` | Initiates the year input. **Required** |
-| `.pf-v5-c-calendar-month__calendar` | `<table>` | Initiates the calendar. **Required** |
-| `.pf-v5-c-calendar-month__days` | `<thead>` | Initiates the calendar days section. **Required** |
-| `.pf-v5-c-calendar-month__days-row` | `<tr>` | Initiates the calendar days row. **Required** |
-| `.pf-v5-c-calendar-month__day` | `<th>` | Initiates a calendar day. **Required** |
-| `.pf-v5-c-calendar-month__dates` | `<tbody>` | Initiates the calendar dates section. **Required** |
-| `.pf-v5-c-calendar-month__dates-row` | `<tr>` | Initiates a calendar dates row. **Required** |
-| `.pf-v5-c-calendar-month__dates-cell` | `<td>` | Initiates a calendar date cell. **Required** |
-| `.pf-v5-c-calendar-month__date` | `<button>` | Initiates a calendar date. **Required** |
-| `.pf-m-prev-month` | `.pf-v5-c-calendar-month__header-nav-control` | Indicates a nav control is the previous month. **Required** |
-| `.pf-m-next-month` | `.pf-v5-c-calendar-month__header-nav-control` | Indicates a nav control is the next month. **Required** |
-| `.pf-m-current` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is the current day. **Required** |
-| `.pf-m-selected` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is selected. |
-| `.pf-m-start-range` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is the start of a range. |
-| `.pf-m-in-range` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is in a range. |
-| `.pf-m-end-range` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is the end of a range. |
-| `.pf-m-adjacent-month` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is in an adjacent month. |
-| `.pf-m-disabled` | `.pf-v5-c-calendar-month__dates-cell` | Indicates a date is disabled and unavailable. |
+| `.pf-v6-c-calendar-month` | `<div>` | Initiates the calendar month component. **Required** |
+| `.pf-v6-c-calendar-month__header` | `<div>` | Initiates the calendar month header. **Required** |
+| `.pf-v6-c-calendar-month__header-nav-control` | `<div>` | Initiates a nav control for navigating by month. **Required** |
+| `.pf-v6-c-calendar-month__header-month` | `<div>` | Initiates the month select. **Required** |
+| `.pf-v6-c-calendar-month__header-year` | `<div>` | Initiates the year input. **Required** |
+| `.pf-v6-c-calendar-month__calendar` | `<table>` | Initiates the calendar. **Required** |
+| `.pf-v6-c-calendar-month__days` | `<thead>` | Initiates the calendar days section. **Required** |
+| `.pf-v6-c-calendar-month__days-row` | `<tr>` | Initiates the calendar days row. **Required** |
+| `.pf-v6-c-calendar-month__day` | `<th>` | Initiates a calendar day. **Required** |
+| `.pf-v6-c-calendar-month__dates` | `<tbody>` | Initiates the calendar dates section. **Required** |
+| `.pf-v6-c-calendar-month__dates-row` | `<tr>` | Initiates a calendar dates row. **Required** |
+| `.pf-v6-c-calendar-month__dates-cell` | `<td>` | Initiates a calendar date cell. **Required** |
+| `.pf-v6-c-calendar-month__date` | `<button>` | Initiates a calendar date. **Required** |
+| `.pf-m-prev-month` | `.pf-v6-c-calendar-month__header-nav-control` | Indicates a nav control is the previous month. **Required** |
+| `.pf-m-next-month` | `.pf-v6-c-calendar-month__header-nav-control` | Indicates a nav control is the next month. **Required** |
+| `.pf-m-current` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is the current day. **Required** |
+| `.pf-m-selected` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is selected. |
+| `.pf-m-start-range` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is the start of a range. |
+| `.pf-m-in-range` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is in a range. |
+| `.pf-m-end-range` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is the end of a range. |
+| `.pf-m-adjacent-month` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is in an adjacent month. |
+| `.pf-m-disabled` | `.pf-v6-c-calendar-month__dates-cell` | Indicates a date is disabled and unavailable. |

package/docs/components/Card/examples/Card.md

@@ -1,7 +1,7 @@
 ---
 id: Card
 section: components
-cssPrefix: pf-v5-c-card
+cssPrefix: pf-v6-c-card
 ---import './Card.css'
 
 ## Examples
@@ -1961,32 +1961,32 @@ A card is a generic rectangular container that can be used to build other compon
 
 | Class | Applied | Outcome |
 | ---- | ---- | ---- |
-| `.pf-v5-c-card` | `<div>` | Creates a card component.  **Required** |
-| `.pf-v5-c-card__title` | `<div>` | Creates a card title container. |
-| `.pf-v5-c-card__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates a card title text element. |
-| `.pf-v5-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-v5-c-card__body` elements. |
-| `.pf-v5-c-card__footer` | `<div>` | Creates the footer of a card. |
-| `.pf-v5-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
-| `.pf-v5-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
-| `.pf-v5-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
-| `.pf-v5-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
-| `.pf-v5-c-card__selectable-actions` | `<div>` | Creates an element to hold a checkbox or radio and the related label used to make a card selectable or clickable. |
-| `.pf-v5-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. **Required if `.pf-v5-c-card__header` has content outside of a card header toggle or card header actions** |
-| `.pf-v5-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
-| `.pf-v5-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-v5-c-card` appear focused. |
-| `.pf-m-compact` | `.pf-v5-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
-| `.pf-m-display-lg` | `.pf-v5-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
-| `.pf-m-no-fill` | `.pf-v5-c-card__body` | Sets a `.pf-v5-c-card__body` not to fill the available space in `.pf-v5-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
-| `.pf-m-selectable` | `.pf-v5-c-card` | Modifies a card to be selectable.  |
-| `.pf-m-clickable` | `.pf-v5-c-card` | Modifies a card to be clickable. |
-| `.pf-m-selected` | `.pf-v5-c-card` | Modifies a selectable card for selected state styling. Can be used in addition to indicating selection via the `.pf-v5-c-card__input`. |
-| `.pf-m-current` | `.pf-v5-c-card` | Modifies a card that is both clickable and selectable for clicked state styling. |
-| `.pf-m-disabled` | `.pf-v5-c-card` | Modifies a card so it is not selectable or clickable.  |
-| `.pf-m-secondary` | `.pf-v5-c-card` | Modifies the card to have secondary styling. |
-| `.pf-m-flat` | `.pf-v5-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
-| `.pf-m-rounded` | `.pf-v5-c-card` | Modifies the card to have rounded corners. |
-| `.pf-m-plain` | `.pf-v5-c-card` | Modifies the card to have no box shadow and no background color. |
-| `.pf-m-expanded` | `.pf-v5-c-card` | Modifies the card for the expanded state. |
-| `.pf-m-toggle-right` | `.pf-v5-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
-| `.pf-m-full-height` | `.pf-v5-c-card` | Modifies the card to full height of its parent. |
-| `.pf-m-no-offset` | `.pf-v5-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
+| `.pf-v6-c-card` | `<div>` | Creates a card component.  **Required** |
+| `.pf-v6-c-card__title` | `<div>` | Creates a card title container. |
+| `.pf-v6-c-card__title-text` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>`, `<div>` | Creates a card title text element. |
+| `.pf-v6-c-card__body` | `<div>` | Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple `.pf-v6-c-card__body` elements. |
+| `.pf-v6-c-card__footer` | `<div>` | Creates the footer of a card. |
+| `.pf-v6-c-card__header` | `<div>` | Creates the header of the card where images, actions, and/or the card title can go. |
+| `.pf-v6-c-card__header-toggle` | `<div>` | Creates the expandable card toggle. |
+| `.pf-v6-c-card__header-toggle-icon` | `<span>` | Creates the expandable card toggle icon. |
+| `.pf-v6-c-card__actions` | `<div>` | Creates an actions element to be used in the card header. |
+| `.pf-v6-c-card__selectable-actions` | `<div>` | Creates an element to hold a checkbox or radio and the related label used to make a card selectable or clickable. |
+| `.pf-v6-c-card__header-main` | `<div>` | Creates a wrapper element to be used in the card header when using an image, logo, or text. **Required if `.pf-v6-c-card__header` has content outside of a card header toggle or card header actions** |
+| `.pf-v6-c-card__expandable-content` | `<div>` | Creates the expandable card's expandable content. |
+| `.pf-v6-c-card__sr-input` | `<input>` | Creates an input which, when focused, makes a following `.pf-v6-c-card` appear focused. |
+| `.pf-m-compact` | `.pf-v6-c-card` | Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred. |
+| `.pf-m-display-lg` | `.pf-v6-c-card` | Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases. |
+| `.pf-m-no-fill` | `.pf-v6-c-card__body` | Sets a `.pf-v6-c-card__body` not to fill the available space in `.pf-v6-c-card`. `.pf-m-no-fill` can be added to multiple card bodies. |
+| `.pf-m-selectable` | `.pf-v6-c-card` | Modifies a card to be selectable.  |
+| `.pf-m-clickable` | `.pf-v6-c-card` | Modifies a card to be clickable. |
+| `.pf-m-selected` | `.pf-v6-c-card` | Modifies a selectable card for selected state styling. Can be used in addition to indicating selection via the `.pf-v6-c-card__input`. |
+| `.pf-m-current` | `.pf-v6-c-card` | Modifies a card that is both clickable and selectable for clicked state styling. |
+| `.pf-m-disabled` | `.pf-v6-c-card` | Modifies a card so it is not selectable or clickable.  |
+| `.pf-m-secondary` | `.pf-v6-c-card` | Modifies the card to have secondary styling. |
+| `.pf-m-flat` | `.pf-v6-c-card` | Modifies the card to have a border instead of a shadow. `.pf-m-flat` is for use in layouts where cards are against a white background. |
+| `.pf-m-rounded` | `.pf-v6-c-card` | Modifies the card to have rounded corners. |
+| `.pf-m-plain` | `.pf-v6-c-card` | Modifies the card to have no box shadow and no background color. |
+| `.pf-m-expanded` | `.pf-v6-c-card` | Modifies the card for the expanded state. |
+| `.pf-m-toggle-right` | `.pf-v6-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
+| `.pf-m-full-height` | `.pf-v6-c-card` | Modifies the card to full height of its parent. |
+| `.pf-m-no-offset` | `.pf-v6-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |

package/docs/components/Check/examples/Check.md

@@ -2,7 +2,7 @@
 id: Checkbox
 section: components
 subsection: forms
-cssPrefix: pf-v5-c-check
+cssPrefix: pf-v6-c-check
 ---## Examples
 
 ### Basic
@@ -224,19 +224,19 @@ If you extend this component or modify the styles of this component, then make s
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `disabled` | `.pf-v5-c-check__input` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
-| `required` | `.pf-v5-c-check__input` | Indicates that the element is required. |
-| `aria-describedby` | `.pf-v5-c-check__input` |  When using `.pf-v5-c-check__description` make use of this on the input. |
+| `disabled` | `.pf-v6-c-check__input` | Indicates that the element is unavailable and removes it from keyboard focus. **Required when input is disabled** |
+| `required` | `.pf-v6-c-check__input` | Indicates that the element is required. |
+| `aria-describedby` | `.pf-v6-c-check__input` |  When using `.pf-v6-c-check__description` make use of this on the input. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-check` | `<div>`, `<label>` |  Initiates the check component. **Required**  |
-| `.pf-v5-c-check__input` | `<input type="checkbox">` |  Initiates a check input. **Required**  |
-| `.pf-v5-c-check__label` | `<label>`, `<span>` |  Initiates a label. **Required**  |
-| `.pf-v5-c-check__label-required` | `<span>` |  Initiates a required indicator. |
-| `.pf-v5-c-check__description` | `<span>` |  Initiates a check description. |
-| `.pf-v5-c-check__body` | `<span>` |  Initiates a check body. |
-| `.pf-m-standalone` | `.pf-v5-c-check` |  Modifies the check component for use with a standalone `<input type="checkbox">`. **Required when there is no label** |
-| `.pf-m-disabled` | `.pf-v5-c-check__label` |  Modifies the check component for the disabled state. **Required when input is disabled** |
+| `.pf-v6-c-check` | `<div>`, `<label>` |  Initiates the check component. **Required**  |
+| `.pf-v6-c-check__input` | `<input type="checkbox">` |  Initiates a check input. **Required**  |
+| `.pf-v6-c-check__label` | `<label>`, `<span>` |  Initiates a label. **Required**  |
+| `.pf-v6-c-check__label-required` | `<span>` |  Initiates a required indicator. |
+| `.pf-v6-c-check__description` | `<span>` |  Initiates a check description. |
+| `.pf-v6-c-check__body` | `<span>` |  Initiates a check body. |
+| `.pf-m-standalone` | `.pf-v6-c-check` |  Modifies the check component for use with a standalone `<input type="checkbox">`. **Required when there is no label** |
+| `.pf-m-disabled` | `.pf-v6-c-check__label` |  Modifies the check component for the disabled state. **Required when input is disabled** |

package/docs/components/Chip/examples/Chip.md

@@ -1,7 +1,7 @@
 ---
 id: Chip
 section: components
-cssPrefix: ['pf-v5-c-chip', 'pf-v5-c-chip-group']
+cssPrefix: ['pf-v6-c-chip', 'pf-v6-c-chip-group']
 ---## Examples
 
 ### Chip variants
@@ -800,21 +800,21 @@ A Chip is used to display items that have been filtered or selected from a large
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-label="[button label text]"` | `.pf-v5-c-button` |  Provides an accessible name for the button when an icon is used instead of text. Required when an icon is used with no supporting text. |
-| `aria-labelledby="[id value of .pf-v5-c-button]"` | `.pf-v5-c-button` | Gives the button an accessible name by referring to the element that provides the position of the button within a list. Required when the button is being removed. |
+| `aria-label="[button label text]"` | `.pf-v6-c-button` |  Provides an accessible name for the button when an icon is used instead of text. Required when an icon is used with no supporting text. |
+| `aria-labelledby="[id value of .pf-v6-c-button]"` | `.pf-v6-c-button` | Gives the button an accessible name by referring to the element that provides the position of the button within a list. Required when the button is being removed. |
 | `aria-hidden="true"` | `<i>` |  Hides the icon from assistive technologies. |
 
 ### Chip usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-chip` | `<div>`, `<button>`, | Initiates the chip component. Use a `<button>` with overflow chips **Required** |
-| `.pf-v5-c-chip__content` | `<span>` | Creates a content wrapper for the chip. **Required** |
-| `.pf-v5-c-chip__text` | `<span>` | Initiates the text inside the chip. **Required** |
-| `.pf-v5-c-chip__icon` | `<span>` | Initiates the icon inside the chip. |
-| `.pf-v5-c-chip__actions` | `<span>` | Creates a wrapper for chip actions. **Required for removable chips** |
-| `.pf-m-overflow` | `button.pf-v5-c-chip` | Applies styling of the overflow chip. |
-| `.pf-m-draggable` | `.pf-v5-c-chip` | Modifies the chip to be in the draggable state. |
+| `.pf-v6-c-chip` | `<div>`, `<button>`, | Initiates the chip component. Use a `<button>` with overflow chips **Required** |
+| `.pf-v6-c-chip__content` | `<span>` | Creates a content wrapper for the chip. **Required** |
+| `.pf-v6-c-chip__text` | `<span>` | Initiates the text inside the chip. **Required** |
+| `.pf-v6-c-chip__icon` | `<span>` | Initiates the icon inside the chip. |
+| `.pf-v6-c-chip__actions` | `<span>` | Creates a wrapper for chip actions. **Required for removable chips** |
+| `.pf-m-overflow` | `button.pf-v6-c-chip` | Applies styling of the overflow chip. |
+| `.pf-m-draggable` | `.pf-v6-c-chip` | Modifies the chip to be in the draggable state. |
 
 ### Chip group overview
 
@@ -828,19 +828,19 @@ The chip group requires the [chip component](#chip-overview). **All single chip
 
 | Attributes for closable chip group button | Applied to | Outcome |
 | -- | -- | -- |
-| `role="list"` | `.pf-v5-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-v5-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
-| `aria-label="[button label text]"` | `.pf-v5-c-chip-group__close > button` |  Provides an accessible name for a chip group close when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
-| `aria-labelledby="[id value of .pf-v5-c-chip-group__close > button] [id value of .pf-v5-c-chip-group__label]"` | `.pf-v5-c-chip-group__close > button` | Provides an accessible name for the button. **Required** |
+| `role="list"` | `.pf-v6-c-chip-group__list` | Indicates that the chip group list is a list element. This role is redundant since `.pf-v6-c-chip-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
+| `aria-label="[button label text]"` | `.pf-v6-c-chip-group__close > button` |  Provides an accessible name for a chip group close when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
+| `aria-labelledby="[id value of .pf-v6-c-chip-group__close > button] [id value of .pf-v6-c-chip-group__label]"` | `.pf-v6-c-chip-group__close > button` | Provides an accessible name for the button. **Required** |
 
 ### Chip group usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-chip-group` | `<div>` | Initiates the chip group component. **Required.** |
-| `.pf-v5-c-chip-group__list` | `<ul>` | Initiates the container for a list of chips. **Required.** |
-| `.pf-v5-c-chip-group__list-item` | `<li>` | Initiates the list item inside of the chip group. **Required.** |
-| `.pf-v5-c-chip-group__label` | `<span>` | Initiates the label to be used in the chip group. |
-| `.pf-v5-c-chip-group__close` | `<div>` | Initiates the container used for the button to remove the chip group. |
-| `.pf-v5-c-chip-group__main` | `<div>` | Initiates the container for the label and list elements so that they wrap together. **Required** |
-| `.pf-v5-c-button` | `.pf-v5-c-chip-group__close <button>` | Initiates the button used to remove the chip group. |
-| `.pf-m-category` | `.pf-v5-c-chip-group` | Modifies the chip group to support category styling. |
+| `.pf-v6-c-chip-group` | `<div>` | Initiates the chip group component. **Required.** |
+| `.pf-v6-c-chip-group__list` | `<ul>` | Initiates the container for a list of chips. **Required.** |
+| `.pf-v6-c-chip-group__list-item` | `<li>` | Initiates the list item inside of the chip group. **Required.** |
+| `.pf-v6-c-chip-group__label` | `<span>` | Initiates the label to be used in the chip group. |
+| `.pf-v6-c-chip-group__close` | `<div>` | Initiates the container used for the button to remove the chip group. |
+| `.pf-v6-c-chip-group__main` | `<div>` | Initiates the container for the label and list elements so that they wrap together. **Required** |
+| `.pf-v6-c-button` | `.pf-v6-c-chip-group__close <button>` | Initiates the button used to remove the chip group. |
+| `.pf-m-category` | `.pf-v6-c-chip-group` | Modifies the chip group to support category styling. |

package/docs/components/ClipboardCopy/examples/ClipboardCopy.md

@@ -1,7 +1,7 @@
 ---
 id: Clipboard copy
 section: components
-cssPrefix: pf-v5-c-clipboard-copy
+cssPrefix: pf-v6-c-clipboard-copy
 ---## Examples
 
 ### Basic
@@ -261,7 +261,7 @@ cssPrefix: pf-v5-c-clipboard-copy
         {"value": "Close", "onclick": "CloseDoc()"}
       ]
     }
-  }} 
+  }}
   </pre>
   </div>
 </div>
@@ -464,26 +464,26 @@ cssPrefix: pf-v5-c-clipboard-copy
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-label="Copy to clipboard"`, `aria-label="Show content"` | `.pf-v5-c-button.pf-m-control` | Provides an accessible name for the button when an icon is used instead of text. **Required when an icon is used with no supporting text.** |
-| `aria-label="[input label text]"` | `.pf-v5-c-form-control` | Provides an accessible label for the input. Provide a label that describes the contents in the input. **Required** |
+| `aria-label="Copy to clipboard"`, `aria-label="Show content"` | `.pf-v6-c-button.pf-m-control` | Provides an accessible name for the button when an icon is used instead of text. **Required when an icon is used with no supporting text.** |
+| `aria-label="[input label text]"` | `.pf-v6-c-form-control` | Provides an accessible label for the input. Provide a label that describes the contents in the input. **Required** |
 | `aria-hidden="true"` | `<i>` |  Hides the icon from assistive technologies. |
-| `aria-controls="[id of expandable element]"` | `.pf-v5-c-button.pf-m-control` | Identifies the element controlled by the toggle button. **Required** |
-| `hidden` | `.pf-v5-c-clipboard-copy__expandable-content` | Indicates that the expandable content is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
-| `aria-labelledby="[id of button] [id of input label]"` | `.pf-v5-c-button.pf-m-control` | Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. **Important:** If the label is defined on the `<input>` using `aria-label`, then use the `id` of the `<input>`. If the label is defined in a `<label>`, then use the `id` of the `<label>`. **Alternatively** this attribute can be ignored if the text input label is defined as part of the value in `aria-label`. |
+| `aria-controls="[id of expandable element]"` | `.pf-v6-c-button.pf-m-control` | Identifies the element controlled by the toggle button. **Required** |
+| `hidden` | `.pf-v6-c-clipboard-copy__expandable-content` | Indicates that the expandable content is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
+| `aria-labelledby="[id of button] [id of input label]"` | `.pf-v6-c-button.pf-m-control` | Provides an accessible name that is unique and communicates context of the button. Required when more than one ClipboardCopy component exists on the page. **Important:** If the label is defined on the `<input>` using `aria-label`, then use the `id` of the `<input>`. If the label is defined in a `<label>`, then use the `id` of the `<label>`. **Alternatively** this attribute can be ignored if the text input label is defined as part of the value in `aria-label`. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-clipboard-copy` | `<div>` | Initiates a clipboard copy component. **Required** |
-| `.pf-v5-c-clipboard-copy__group` | `<div>` | Initiates a wrapper for the clipboard copy group. **Required** |
-| `.pf-v5-c-clipboard-copy__toggle-icon` | `<div>` | Initiates a toggle button icon. |
-| `.pf-v5-c-clipboard-copy__expandable-content` | `<div>` | Initiates an expandable element. |
-| `.pf-v5-c-clipboard-copy__text` | `<span>` | Initiates the inline copy clipboard text element. **Required** |
-| `.pf-v5-c-clipboard-copy__actions` | `<span>` | Initiates the inline copy clipboard actions element. **Required** |
-| `.pf-v5-c-clipboard-copy__actions-item` | `<span>` | Initiates the inline copy clipboard actions item element. **Required** |
-| `.pf-m-inline` | `.pf-v5-c-clipboard-copy` | Modifies the clipboard copy component for inline styles. |
-| `.pf-m-block` | `.pf-v5-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting. |
-| `.pf-m-expanded` | `.pf-v5-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state. |
-| `.pf-m-expanded` | `.pf-v5-c-button.pf-m-control` | Modifies the control toggle button for the expanded state. |
-| `.pf-m-code` | `code.pf-v5-c-clipboard-copy__text` | Modifies the inline copy clipboard text styles for use with the `<code>` element. |
+| `.pf-v6-c-clipboard-copy` | `<div>` | Initiates a clipboard copy component. **Required** |
+| `.pf-v6-c-clipboard-copy__group` | `<div>` | Initiates a wrapper for the clipboard copy group. **Required** |
+| `.pf-v6-c-clipboard-copy__toggle-icon` | `<div>` | Initiates a toggle button icon. |
+| `.pf-v6-c-clipboard-copy__expandable-content` | `<div>` | Initiates an expandable element. |
+| `.pf-v6-c-clipboard-copy__text` | `<span>` | Initiates the inline copy clipboard text element. **Required** |
+| `.pf-v6-c-clipboard-copy__actions` | `<span>` | Initiates the inline copy clipboard actions element. **Required** |
+| `.pf-v6-c-clipboard-copy__actions-item` | `<span>` | Initiates the inline copy clipboard actions item element. **Required** |
+| `.pf-m-inline` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for inline styles. |
+| `.pf-m-block` | `.pf-v6-c-clipboard-copy.pf-m-inline` | Modifies the inline copy clipboard component to have block formatting. |
+| `.pf-m-expanded` | `.pf-v6-c-clipboard-copy` | Modifies the clipboard copy component for the expanded state. |
+| `.pf-m-expanded` | `.pf-v6-c-button.pf-m-control` | Modifies the control toggle button for the expanded state. |
+| `.pf-m-code` | `code.pf-v6-c-clipboard-copy__text` | Modifies the inline copy clipboard text styles for use with the `<code>` element. |