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

package/components/Toolbar/toolbar.css

@@ -73,15 +73,19 @@
   }
 }
 
-:root,
-[data-theme=pf-v6-c-toolbar] {
+:where(:root),
+:where(.pf-v6-c-toolbar) {
   --pf-v6-c-toolbar--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toolbar--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--PaddingBlock: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--PaddingInline: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-toolbar--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-toolbar__item--Width: auto;
+  --pf-v6-c-toolbar__item--MinWidth: auto;
   --pf-v6-c-toolbar__item--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-toolbar__item--m-overflow-container--MinWidth: 0;
+  --pf-v6-c-toolbar__group--m-overflow-container--MinWidth: 0;
   --pf-v6-c-toolbar__content--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toolbar__content--PaddingBlock: var(--pf-t--global--spacer--md);
   --pf-v6-c-toolbar__content--PaddingInline: var(--pf-v6-c-toolbar--PaddingInline);
@@ -171,8 +175,62 @@
 }
 
 .pf-v6-c-toolbar__item {
+  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
+  --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
   row-gap: var(--pf-v6-c-toolbar__item--RowGap, var(--pf-v6-c-toolbar--RowGap));
   column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
+  width: var(--pf-v6-c-toolbar__item--Width--base);
+  min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
+}
+@media (min-width: 576px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-xl, var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-2xl, var(--pf-v6-c-toolbar__item--Width-on-xl, var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth));
+  }
+}
+@media (min-width: 768px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-xl, var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-v6-c-toolbar__item {
+    --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-2xl, var(--pf-v6-c-toolbar__item--MinWidth-on-xl, var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth))))));
+  }
 }
 .pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded {
   --pf-v6-c-toolbar__expand-all-icon--Rotate: var(--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate);
@@ -186,6 +244,9 @@
 .pf-v6-c-toolbar__item.pf-m-pagination.pf-v6-c-pagination {
   flex-wrap: nowrap;
 }
+.pf-v6-c-toolbar__item.pf-m-overflow-container {
+  min-width: var(--pf-v6-c-toolbar__item--m-overflow-container--MinWidth);
+}
 
 .pf-v6-c-toolbar__group {
   row-gap: var(--pf-v6-c-toolbar__group--RowGap, var(--pf-v6-c-toolbar--RowGap));
@@ -204,6 +265,9 @@
 .pf-v6-c-toolbar__group.pf-m-chip-group {
   flex: 1;
 }
+.pf-v6-c-toolbar__group.pf-m-overflow-container {
+  min-width: var(--pf-v6-c-toolbar__group--m-overflow-container--MinWidth);
+}
 
 .pf-v6-c-toolbar__expandable-content {
   position: absolute;

package/components/Toolbar/toolbar.scss

@@ -8,8 +8,8 @@ $pf-v5--include-toolbar-breakpoints: true !default;
   $pf-v5-c-toolbar--breakpoint-map: build-breakpoint-map('base', 'sm', 'md', 'lg', 'xl', '2xl');
 }
 
-:root,
-[data-theme="#{$toolbar}"] {
+:where(:root),
+:where(.#{$toolbar}) {
   --#{$toolbar}--RowGap: var(--pf-t--global--spacer--sm);
   --#{$toolbar}--ColumnGap: var(--pf-t--global--spacer--md);
   --#{$toolbar}--PaddingBlock: var(--pf-t--global--spacer--md);
@@ -18,7 +18,13 @@ $pf-v5--include-toolbar-breakpoints: true !default;
   --#{$toolbar}--FontSize: var(--pf-t--global--font--size--body--default);
 
   // * Toolbar item
+  --#{$toolbar}__item--Width: auto;
+  --#{$toolbar}__item--MinWidth: auto;
   --#{$toolbar}__item--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$toolbar}__item--m-overflow-container--MinWidth: 0;
+
+  // * Toolbar group
+  --#{$toolbar}__group--m-overflow-container--MinWidth: 0;
 
   // * Toolbar content * Toolbar expandable content
   --#{$toolbar}__content--RowGap: var(--pf-t--global--spacer--sm);
@@ -154,8 +160,13 @@ $pf-v5--include-toolbar-breakpoints: true !default;
 
 // - Toolbar item
 .#{$toolbar}__item {
+  @include pf-v5-build-css-variable-stack("--#{$toolbar}__item--Width--base", "--#{$toolbar}__item--Width", $pf-v5-c-toolbar--breakpoint-map);
+  @include pf-v5-build-css-variable-stack("--#{$toolbar}__item--MinWidth--base", "--#{$toolbar}__item--MinWidth", $pf-v5-c-toolbar--breakpoint-map);
+
   row-gap: var(--#{$toolbar}__item--RowGap, var(--#{$toolbar}--RowGap));
   column-gap: var(--#{$toolbar}__item--ColumnGap);
+  width: var(--#{$toolbar}__item--Width--base);
+  min-width: var(--#{$toolbar}__item--MinWidth--base);
 
   // - Toolbar expand
   &.pf-m-expand-all.pf-m-expanded {
@@ -175,6 +186,10 @@ $pf-v5--include-toolbar-breakpoints: true !default;
       flex-wrap: nowrap;
     }
   }
+
+  &.pf-m-overflow-container {
+    min-width: var(--#{$toolbar}__item--m-overflow-container--MinWidth);
+  }
 }
 
 // - Toolbar group
@@ -202,6 +217,10 @@ $pf-v5--include-toolbar-breakpoints: true !default;
   &.pf-m-chip-group {
     flex: 1;
   }
+
+  &.pf-m-overflow-container {
+    min-width: var(--#{$toolbar}__group--m-overflow-container--MinWidth);
+  }
 }
 
 // - Toolbar expandable content

package/docs/components/AboutModalBox/examples/AboutModalBox.md

@@ -1,7 +1,7 @@
 ---
 id: About modal
 section: components
-cssPrefix: pf-v5-c-about-modal-box
+cssPrefix: pf-v6-c-about-modal-box
 ---## Examples
 
 ### Basic
@@ -42,24 +42,24 @@ cssPrefix: pf-v5-c-about-modal-box
 
 ## Documentation
 
-In order to add a background image, set the `--pf-v5-c-about-modal-box--BackgroundImage` CSS variable to the path of the image. For example: `--pf-v5-c-about-modal-box--BackgroundImage: url(custom/path/image.jpg);`
+In order to add a background image, set the `--pf-v6-c-about-modal-box--BackgroundImage` CSS variable to the path of the image. For example: `--pf-v6-c-about-modal-box--BackgroundImage: url(custom/path/image.jpg);`
 
 ### Accessibility
 
 | Attribute | Applies to | Outcome |
 | -- | -- | -- |
-| `aria-label="Close Dialog"` | `.pf-v5-c-modal-box__close .pf-v5-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required** |
+| `aria-label="Close Dialog"` | `.pf-v6-c-modal-box__close .pf-v6-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-about-modal-box` |  `<div>`, `<article>`  |  Initiates a modal box. |
-| `.pf-v5-c-about-modal-box__brand` |  `<div>` |  Initiates a modal box brand cell. |
-| `.pf-v5-c-about-modal-box__brand-image` |  `<img>` |  Initiates a modal box brand image. |
-| `.pf-v5-c-about-modal-box__close` |  `<div>` |  Initiates a modal box close cell. |
-| `.pf-v5-c-about-modal-box__header` |  `<div>`, `<header>` |  Initiates a modal box header cell. |
-| `.pf-v5-c-about-modal-box__content` |  `<div>` |  Initiates a modal box content cell. |
-| `.pf-v5-c-about-modal-box__body` |  `<div>` |  Initiates a modal box body cell. |
-| `.pf-v5-c-about-modal-box__strapline` |  `<p>` |  Initiates a modal box strapline cell. |
-| `--pf-v5-c-about-modal-box--BackgroundImage` |  `.pf-v5-c-about-modal-box` |  Sets the background image for the about modal. |
+| `.pf-v6-c-about-modal-box` |  `<div>`, `<article>`  |  Initiates a modal box. |
+| `.pf-v6-c-about-modal-box__brand` |  `<div>` |  Initiates a modal box brand cell. |
+| `.pf-v6-c-about-modal-box__brand-image` |  `<img>` |  Initiates a modal box brand image. |
+| `.pf-v6-c-about-modal-box__close` |  `<div>` |  Initiates a modal box close cell. |
+| `.pf-v6-c-about-modal-box__header` |  `<div>`, `<header>` |  Initiates a modal box header cell. |
+| `.pf-v6-c-about-modal-box__content` |  `<div>` |  Initiates a modal box content cell. |
+| `.pf-v6-c-about-modal-box__body` |  `<div>` |  Initiates a modal box body cell. |
+| `.pf-v6-c-about-modal-box__strapline` |  `<p>` |  Initiates a modal box strapline cell. |
+| `--pf-v6-c-about-modal-box--BackgroundImage` |  `.pf-v6-c-about-modal-box` |  Sets the background image for the about modal. |

package/docs/components/Accordion/examples/Accordion.md

@@ -1,7 +1,7 @@
 ---
 id: Accordion
 section: components
-cssPrefix: pf-v5-c-accordion
+cssPrefix: pf-v6-c-accordion
 ---## Examples
 
 ### Fluid
@@ -694,31 +694,31 @@ cssPrefix: pf-v5-c-accordion
 
 There are two variations to build the accordion component. The first is to use `<div>` and `<h1 - h6>` tags:
 
-* `.pf-v5-c-accordion` is placed on a `<div>`,
-* `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<h1-h6>`, and
-* `.pf-v5-c-accordion__expandable-content` is placed on a `<div>`.
+* `.pf-v6-c-accordion` is placed on a `<div>`,
+* `.pf-v6-c-accordion__toggle` is placed on a `<button>` that is inside a `<h1-h6>`, and
+* `.pf-v6-c-accordion__expandable-content` is placed on a `<div>`.
 
 The heading level that you use should fit within the rest of the headings outlined on your page.
 
 Another variation is using the definition list:
 
-* `.pf-v5-c-accordion` is placed on a `<dl>`,
-* `.pf-v5-c-accordion__toggle` is placed on a `<button>` that is inside a `<dt>`, and
-* `.pf-v5-c-accordion__expandable-content` is placed on a `<dd>`.
+* `.pf-v6-c-accordion` is placed on a `<dl>`,
+* `.pf-v6-c-accordion__toggle` is placed on a `<button>` that is inside a `<dt>`, and
+* `.pf-v6-c-accordion__expandable-content` is placed on a `<dd>`.
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-accordion` | `<div>`, `<dl>` | Initiates an accordion component. **Required**|
-| `.pf-v5-c-accordion__item` | `<div>` | Initiates an accordion item component. **Required**|
-| `.pf-v5-c-accordion__toggle` | `<h1-h6><button>`, `<dt><button>` | Initiates a toggle in the accordion. **Required** |
-| `.pf-v5-c-accordion__toggle-text` | `<span>` | Initiates the text inside the toggle. **Required** |
-| `.pf-v5-c-accordion__toggle-icon` | `<span>` | Initiates the toggle icon wrapper. **Required** |
-| `.pf-v5-c-accordion__expandable-content` | `<div>`, `<dd>` | Initiates expandable content. **Must be paired with a button** |
-| `.pf-v5-c-accordion__expandable-content-body` | `<div>` | Initiates expandable content body. **Required** |
-| `.pf-m-bordered` | `.pf-v5-c-accordion` | Modifies the accordion to add borders between items. |
-| `.pf-m-display-lg` | `.pf-v5-c-accordion` | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
-| `.pf-m-toggle-start` | `.pf-v5-c-accordion` | Modifies accordion styling when accordion toggle icons are rendered at the start of the toggle, before the toggle text. |
-| `.pf-m-expanded` | `.pf-v5-c-accordion__item` | Modifies the accordion item for the expanded state. |
-| `.pf-m-fixed` | `.pf-v5-c-accordion__expandable-content` | Modifies the expandable content for the fixed state. |
+| `.pf-v6-c-accordion` | `<div>`, `<dl>` | Initiates an accordion component. **Required**|
+| `.pf-v6-c-accordion__item` | `<div>` | Initiates an accordion item component. **Required**|
+| `.pf-v6-c-accordion__toggle` | `<h1-h6><button>`, `<dt><button>` | Initiates a toggle in the accordion. **Required** |
+| `.pf-v6-c-accordion__toggle-text` | `<span>` | Initiates the text inside the toggle. **Required** |
+| `.pf-v6-c-accordion__toggle-icon` | `<span>` | Initiates the toggle icon wrapper. **Required** |
+| `.pf-v6-c-accordion__expandable-content` | `<div>`, `<dd>` | Initiates expandable content. **Must be paired with a button** |
+| `.pf-v6-c-accordion__expandable-content-body` | `<div>` | Initiates expandable content body. **Required** |
+| `.pf-m-bordered` | `.pf-v6-c-accordion` | Modifies the accordion to add borders between items. |
+| `.pf-m-display-lg` | `.pf-v6-c-accordion` | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
+| `.pf-m-toggle-start` | `.pf-v6-c-accordion` | Modifies accordion styling when accordion toggle icons are rendered at the start of the toggle, before the toggle text. |
+| `.pf-m-expanded` | `.pf-v6-c-accordion__item` | Modifies the accordion item for the expanded state. |
+| `.pf-m-fixed` | `.pf-v6-c-accordion__expandable-content` | Modifies the expandable content for the fixed state. |

package/docs/components/ActionList/examples/ActionList.md

@@ -1,7 +1,7 @@
 ---
 id: Action list
 section: components
-cssPrefix: pf-v5-c-action-list
+cssPrefix: pf-v6-c-action-list
 ---## Examples
 
 ### Action list single group
@@ -162,7 +162,7 @@ In modals, forms, data lists
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-action-list` | `<div>` | Initiates the action list container. |
-| `.pf-v5-c-action-list__item` | `<div>` | Initiates the action list item container. |
-| `.pf-v5-c-action-list__group` | `<div>` | Initiates the action list group container. |
-| `.pf-m-icons` | `.pf-v5-c-action-list`, `.pf-v5-c-action-list__group` | Modifies the action list and/or group to support icon buttons. If applied to `.pf-v5-c-action-list`, all nested groups will inherit this modification. |
+| `.pf-v6-c-action-list` | `<div>` | Initiates the action list container. |
+| `.pf-v6-c-action-list__item` | `<div>` | Initiates the action list item container. |
+| `.pf-v6-c-action-list__group` | `<div>` | Initiates the action list group container. |
+| `.pf-m-icons` | `.pf-v6-c-action-list`, `.pf-v6-c-action-list__group` | Modifies the action list and/or group to support icon buttons. If applied to `.pf-v6-c-action-list`, all nested groups will inherit this modification. |

package/docs/components/Alert/examples/Alert.md

@@ -1,7 +1,7 @@
 ---
 id: Alert
 section: components
-cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
+cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
 ---## Alert examples
 
 ### Types
@@ -196,13 +196,13 @@ cssPrefix: ['pf-v5-c-alert','pf-v5-c-alert-group']
   </div>
   <p
     class="pf-v6-c-alert__title pf-m-truncate"
-    style="--pf-v5-c-alert__title--max-lines: 2"
+    style="--pf-v6-c-alert__title--max-lines: 2"
   >
     <span class="pf-v6-screen-reader">Success alert:</span>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque cursus enim fringilla tincidunt. Proin lobortis aliquam dictum. Nam vel ullamcorper nulla, nec blandit dolor. Vivamus pellentesque neque justo, nec accumsan nulla rhoncus id. Suspendisse mollis, tortor quis faucibus volutpat, sem leo fringilla turpis, ac lacinia augue metus in nulla. Cras vestibulum lacinia orci. Pellentesque sodales consequat interdum. Sed porttitor tincidunt metus nec iaculis. Pellentesque non commodo justo. Morbi feugiat rhoncus neque, vitae facilisis diam aliquam nec. Sed dapibus vitae quam at tristique. Nunc vel commodo mi. Mauris et rhoncus leo.
   </p>
   <div class="pf-v6-c-alert__description">
-    <p>This example uses ".pf-m-truncate" and sets "--pf-v5-c-alert__title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</p>
+    <p>This example uses ".pf-m-truncate" and sets "--pf-v6-c-alert__title--max-lines: 2" to limit title to two lines and truncate any overflow text with ellipses.</p>
   </div>
 </div>
 
@@ -678,7 +678,7 @@ When toast alerts include a link or action, these elements are not announced as
 For sighted users, interactive elements can be included in this message in one of the following ways:
 
 * Using a link to the Builds page: "The build is complete. Go to the [Builds](#) page to download" using `<a href="#">Builds</a>`
-* Using a button to download: "The build is complete. Go to the Builds page to <button class="pf-v5-c-button pf-m-link pf-m-inline" type="button">download</button>" using `<button class="pf-v5-c-button pf-m-link pf-m-inline type="button">download</button>`
+* Using a button to download: "The build is complete. Go to the Builds page to <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">download</button>" using `<button class="pf-v6-c-button pf-m-link pf-m-inline type="button">download</button>`
 
 ```html isFullscreen
 <ul class="pf-v6-c-alert-group pf-m-toast" role="list">
@@ -770,24 +770,24 @@ Add a modifier class to the default alert to change the color: `.pf-m-success`,
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-alert` | `<div>` | Initiates the alert component. Always use with a status modifier class. **Required** |
-| `.pf-v5-c-alert__toggle` | `<div>` | Defines the expandable alert toggle icon. **Required for expandable alerts** |
-| `.pf-v5-c-alert__toggle-icon` | `<span>` | Defines the expandable alert toggle icon. **Required for expandable alerts** |
-| `.pf-v5-c-alert__icon` | `<div>` | Defines the alert icon. **Required** |
-| `.pf-v5-c-alert__title` | `<p>, <h1-h6>` | Defines the alert title. **Required** |
-| `.pf-v5-c-alert__description` | `<div>` | Defines the alert description area. |
-| `.pf-v5-c-alert__action` | `<div>` | Defines the action button wrapper. Should contain `.pf-v5-c-button.pf-m-plain` for close action or `.pf-v5-c-button.pf-m-link` for link text. It should only include one action. |
-| `.pf-v5-c-alert__action-group` | `<div>` | Defines the action button group. Should contain `.pf-v5-c-button.pf-m-link.pf-m-inline` for inline link text. **Note:** only inline link buttons are supported in the alert action group. |
-| `.pf-m-custom` | `.pf-v5-c-alert` | Applies custom status styling. |
-| `.pf-m-success` | `.pf-v5-c-alert` | Applies success status styling. |
-| `.pf-m-danger` | `.pf-v5-c-alert` | Applies danger status styling. |
-| `.pf-m-warning` | `.pf-v5-c-alert` | Applies warning status styling. |
-| `.pf-m-info` | `.pf-v5-c-alert` | Applies info status styling. |
-| `.pf-m-inline` | `.pf-v5-c-alert` | Applies inline styling. |
-| `.pf-m-plain` | `.pf-v5-c-alert.pf-m-inline` | Applies plain styling to an inline alert. |
-| `.pf-m-expandable` | `.pf-v5-c-alert` | Applies expandable styles to the alert. |
-| `.pf-m-expanded` | `.pf-v5-c-alert.pf-m-expandable` | Applies expanded styles to an expandable alert. |
-| `.pf-m-truncate` | `.pf-v5-c-alert__title` | Modifies the title to display a single line and truncate any overflow text with ellipses. **Note:** you can specify the max number of lines to show by setting the `--pf-v5-c-alert__title--max-lines` (the default value is `1`). |
+| `.pf-v6-c-alert` | `<div>` | Initiates the alert component. Always use with a status modifier class. **Required** |
+| `.pf-v6-c-alert__toggle` | `<div>` | Defines the expandable alert toggle icon. **Required for expandable alerts** |
+| `.pf-v6-c-alert__toggle-icon` | `<span>` | Defines the expandable alert toggle icon. **Required for expandable alerts** |
+| `.pf-v6-c-alert__icon` | `<div>` | Defines the alert icon. **Required** |
+| `.pf-v6-c-alert__title` | `<p>, <h1-h6>` | Defines the alert title. **Required** |
+| `.pf-v6-c-alert__description` | `<div>` | Defines the alert description area. |
+| `.pf-v6-c-alert__action` | `<div>` | Defines the action button wrapper. Should contain `.pf-v6-c-button.pf-m-plain` for close action or `.pf-v6-c-button.pf-m-link` for link text. It should only include one action. |
+| `.pf-v6-c-alert__action-group` | `<div>` | Defines the action button group. Should contain `.pf-v6-c-button.pf-m-link.pf-m-inline` for inline link text. **Note:** only inline link buttons are supported in the alert action group. |
+| `.pf-m-custom` | `.pf-v6-c-alert` | Applies custom status styling. |
+| `.pf-m-success` | `.pf-v6-c-alert` | Applies success status styling. |
+| `.pf-m-danger` | `.pf-v6-c-alert` | Applies danger status styling. |
+| `.pf-m-warning` | `.pf-v6-c-alert` | Applies warning status styling. |
+| `.pf-m-info` | `.pf-v6-c-alert` | Applies info status styling. |
+| `.pf-m-inline` | `.pf-v6-c-alert` | Applies inline styling. |
+| `.pf-m-plain` | `.pf-v6-c-alert.pf-m-inline` | Applies plain styling to an inline alert. |
+| `.pf-m-expandable` | `.pf-v6-c-alert` | Applies expandable styles to the alert. |
+| `.pf-m-expanded` | `.pf-v6-c-alert.pf-m-expandable` | Applies expanded styles to an expandable alert. |
+| `.pf-m-truncate` | `.pf-v6-c-alert__title` | Modifies the title to display a single line and truncate any overflow text with ellipses. **Note:** you can specify the max number of lines to show by setting the `--pf-v6-c-alert__title--max-lines` (the default value is `1`). |
 
 ### Alert group overview
 
@@ -797,7 +797,7 @@ The alert component is used to contain and align consecutive alerts.  Alert grou
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-alert-group` | `<ul>` | Creates an alert group component. **Required** |
-| `.pf-v5-c-alert-group__item` | `<li>` | Creates an alert group item. **Required** |
-| `.pf-v5-c-alert-group__overflow-button` | `<button>` | Applies overflow button styling to an alert group overflow button. |
-| `.pf-m-toast`| `.pf-v5-c-alert-group` | Applies toast alert styling to an alert group. |
+| `.pf-v6-c-alert-group` | `<ul>` | Creates an alert group component. **Required** |
+| `.pf-v6-c-alert-group__item` | `<li>` | Creates an alert group item. **Required** |
+| `.pf-v6-c-alert-group__overflow-button` | `<button>` | Applies overflow button styling to an alert group overflow button. |
+| `.pf-m-toast`| `.pf-v6-c-alert-group` | Applies toast alert styling to an alert group. |

package/docs/components/AppLauncher/deprecated/application-launcher.md

@@ -2,7 +2,7 @@
 id: Application launcher
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-app-launcher
+cssPrefix: pf-v6-c-app-launcher
 deprecated: true
 ---import './application-launcher.css'
 
@@ -755,38 +755,38 @@ deprecated: true
 
 | Attribute | Applied | Outcome |
 | -- | -- | -- |
-| `aria-label="Application launcher"` | `.pf-v5-c-app-launcher` |  Gives the app launcher element an accessible name. **Required** |
-| `aria-expanded="false"` | `.pf-v5-c-button` |  Indicates that the menu is hidden. |
-| `aria-expanded="true"` | `.pf-v5-c-button` |  Indicates that the menu is visible. |
-| `aria-label="Actions"` | `.pf-v5-c-button` | Provides an accessible name for the app launcher when an icon is used. **Required** |
-| `hidden` | `.pf-v5-c-app-launcher__menu` | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
-| `disabled` | `.pf-v5-c-app-launcher__toggle` | Disables the app launcher toggle and removes it from keyboard focus. |
-| `disabled` | `button.pf-v5-c-app-launcher__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
-| `aria-disabled="true"` | `a.pf-v5-c-app-launcher__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
-| `tabindex="-1"` | `a.pf-v5-c-app-launcher__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
-| `aria-hidden="true"` | `.pf-v5-c-app-launcher__menu-item-external-icon > *` | Hides the icon from assistive technologies. |
+| `aria-label="Application launcher"` | `.pf-v6-c-app-launcher` |  Gives the app launcher element an accessible name. **Required** |
+| `aria-expanded="false"` | `.pf-v6-c-button` |  Indicates that the menu is hidden. |
+| `aria-expanded="true"` | `.pf-v6-c-button` |  Indicates that the menu is visible. |
+| `aria-label="Actions"` | `.pf-v6-c-button` | Provides an accessible name for the app launcher when an icon is used. **Required** |
+| `hidden` | `.pf-v6-c-app-launcher__menu` | Indicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
+| `disabled` | `.pf-v6-c-app-launcher__toggle` | Disables the app launcher toggle and removes it from keyboard focus. |
+| `disabled` | `button.pf-v6-c-app-launcher__menu-item` | When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus. |
+| `aria-disabled="true"` | `a.pf-v6-c-app-launcher__menu-item` | When the menu item uses a link element, indicates that it is unavailable. |
+| `tabindex="-1"` | `a.pf-v6-c-app-launcher__menu-item` | When the menu item uses a link element, removes it from keyboard focus. |
+| `aria-hidden="true"` | `.pf-v6-c-app-launcher__menu-item-external-icon > *` | Hides the icon from assistive technologies. |
 
 ### Usage
 
 | Class | Applied | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-app-launcher` | `<nav>` | Defines the parent wrapper of the app launcher. |
-| `.pf-v5-c-app-launcher__toggle` | `<button>` | Defines the app launcher toggle. |
-| `.pf-v5-c-app-launcher__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. Use a `<div>` if your app launcher has groups. |
-| `.pf-v5-c-app-launcher__menu-search` | `<div>` | Defines the wrapper for the search input. |
-| `.pf-v5-c-app-launcher__group` | `<section>` | Defines a group of items. Required when there is more than one group. |
-| `.pf-v5-c-app-launcher__group-title` | `<h1>` | Defines a title for a group of items. |
-| `.pf-v5-c-app-launcher__menu-wrapper` | `<li>` | Defines a menu wrapper for use with multiple actionable items in a single item row. |
-| `.pf-v5-c-app-launcher__menu-item` | `<a>`, `<button>` | Defines a menu item. |
-| `.pf-v5-c-app-launcher__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
-| `.pf-v5-c-app-launcher__menu-item-external-icon` | `<span>` | Defines the wrapper for the external link icon that appears on hover/focus. Use with `.pf-m-external`. |
-| `.pf-m-expanded` | `.pf-v5-c-app-launcher` | Modifies for the expanded state. |
-| `.pf-m-top` | `.pf-v5-c-app-launcher` | Modifies to display the menu above the toggle. |
-| `.pf-m-align-right` | `.pf-v5-c-app-launcher__menu` | Modifies to display the menu aligned to the right edge of the toggle. |
-| `.pf-m-static` | `.pf-v5-c-app-launcher__menu` | Modifies to position the menu statically to support custom positioning. |
-| `.pf-m-disabled` | `a.pf-v5-c-app-launcher__menu-item` | Modifies to display the menu item as disabled. |
-| `.pf-m-external` | `.pf-v5-c-app-launcher__menu-item` | Modifies to display the menu item as having an external link icon on hover/focus. |
-| `.pf-m-favorite` | `.pf-v5-c-app-launcher__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. |
-| `.pf-m-link` | `.pf-v5-c-app-launcher__menu-item.pf-m-wrapper > .pf-v5-c-app-launcher__menu-item` | Modifies item for link styles. |
-| `.pf-m-action` | `.pf-v5-c-app-launcher__menu-item.pf-m-wrapper > .pf-v5-c-app-launcher__menu-item` | Modifies item to for action styles. |
-| `.pf-m-active` | `.pf-v5-c-app-launcher__toggle` | Forces display of the active state of the toggle. |
+| `.pf-v6-c-app-launcher` | `<nav>` | Defines the parent wrapper of the app launcher. |
+| `.pf-v6-c-app-launcher__toggle` | `<button>` | Defines the app launcher toggle. |
+| `.pf-v6-c-app-launcher__menu` | `<ul>`, `<div>` | Defines the parent wrapper of the menu items. Use a `<div>` if your app launcher has groups. |
+| `.pf-v6-c-app-launcher__menu-search` | `<div>` | Defines the wrapper for the search input. |
+| `.pf-v6-c-app-launcher__group` | `<section>` | Defines a group of items. Required when there is more than one group. |
+| `.pf-v6-c-app-launcher__group-title` | `<h1>` | Defines a title for a group of items. |
+| `.pf-v6-c-app-launcher__menu-wrapper` | `<li>` | Defines a menu wrapper for use with multiple actionable items in a single item row. |
+| `.pf-v6-c-app-launcher__menu-item` | `<a>`, `<button>` | Defines a menu item. |
+| `.pf-v6-c-app-launcher__menu-item-icon` | `<span>` | Defines the wrapper for the menu item icon. |
+| `.pf-v6-c-app-launcher__menu-item-external-icon` | `<span>` | Defines the wrapper for the external link icon that appears on hover/focus. Use with `.pf-m-external`. |
+| `.pf-m-expanded` | `.pf-v6-c-app-launcher` | Modifies for the expanded state. |
+| `.pf-m-top` | `.pf-v6-c-app-launcher` | Modifies to display the menu above the toggle. |
+| `.pf-m-align-right` | `.pf-v6-c-app-launcher__menu` | Modifies to display the menu aligned to the right edge of the toggle. |
+| `.pf-m-static` | `.pf-v6-c-app-launcher__menu` | Modifies to position the menu statically to support custom positioning. |
+| `.pf-m-disabled` | `a.pf-v6-c-app-launcher__menu-item` | Modifies to display the menu item as disabled. |
+| `.pf-m-external` | `.pf-v6-c-app-launcher__menu-item` | Modifies to display the menu item as having an external link icon on hover/focus. |
+| `.pf-m-favorite` | `.pf-v6-c-app-launcher__menu-wrapper` | Modifies wrapper to indicate that the item row has been favorited. |
+| `.pf-m-link` | `.pf-v6-c-app-launcher__menu-item.pf-m-wrapper > .pf-v6-c-app-launcher__menu-item` | Modifies item for link styles. |
+| `.pf-m-action` | `.pf-v6-c-app-launcher__menu-item.pf-m-wrapper > .pf-v6-c-app-launcher__menu-item` | Modifies item to for action styles. |
+| `.pf-m-active` | `.pf-v6-c-app-launcher__toggle` | Forces display of the active state of the toggle. |

package/docs/components/Avatar/examples/Avatar.md

@@ -1,7 +1,7 @@
 ---
 id: Avatar
 section: components
-cssPrefix: pf-v5-c-avatar
+cssPrefix: pf-v6-c-avatar
 ---## Examples
 
 ### Basic
@@ -80,15 +80,15 @@ The avatar component provides a default SVG icon. If an image is used it should
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `alt` | `.pf-v5-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required** |
+| `alt` | `.pf-v6-c-avatar` | The alt attribute describes the appearance and function of the avatar image. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-avatar` | `<img>` |  Initiates an avatar image. **Required** |
-| `.pf-m-bordered` | `.pf-v5-c-avatar` | Modifies an avatar to have a border. |
-| `.pf-m-sm{-on-[breakpoint]}` | `.pf-v5-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-md{-on-[breakpoint]}` | `.pf-v5-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** This is the default size. |
-| `.pf-m-lg{-on-[breakpoint]}` | `.pf-v5-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-xl{-on-[breakpoint]}` | `.pf-v5-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-v6-c-avatar` | `<img>` |  Initiates an avatar image. **Required** |
+| `.pf-m-bordered` | `.pf-v6-c-avatar` | Modifies an avatar to have a border. |
+| `.pf-m-sm{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be small on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-md{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be medium on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** This is the default size. |
+| `.pf-m-lg{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-xl{-on-[breakpoint]}` | `.pf-v6-c-avatar` | Modifies an avatar to be extra large on an optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |

package/docs/components/BackToTop/examples/BackToTop.md

@@ -1,7 +1,7 @@
 ---
 id: 'Back to top'
 section: components
-cssPrefix: pf-v5-c-back-to-top
+cssPrefix: pf-v6-c-back-to-top
 ---import './BackToTop.css'
 
 ## Examples
@@ -26,5 +26,5 @@ cssPrefix: pf-v5-c-back-to-top
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-back-to-top` | `<div>` | Initiates the back to top component. **Required** |
-| `.pf-m-hidden` | `.pf-v5-c-back-to-top` | Modifies the component to be hidden. |
+| `.pf-v6-c-back-to-top` | `<div>` | Initiates the back to top component. **Required** |
+| `.pf-m-hidden` | `.pf-v6-c-back-to-top` | Modifies the component to be hidden. |

package/docs/components/Backdrop/examples/Backdrop.md

@@ -1,7 +1,7 @@
 ---
 id: Backdrop
 section: components
-cssPrefix: pf-v5-c-backdrop
+cssPrefix: pf-v6-c-backdrop
 ---## Examples
 
 ### Basic
@@ -21,5 +21,5 @@ This component puts a backdrop over the entire viewport.
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-backdrop` | `<div>` |  Initiates backdrop. **Required** |
-| `.pf-v5-c-backdrop__open` | `<body>` |  Lock scrolling when backdrop is active. This class should be set on `<body>` while backdrop is active and removed while backdrop is inactive. **Required** |
+| `.pf-v6-c-backdrop` | `<div>` |  Initiates backdrop. **Required** |
+| `.pf-v6-c-backdrop__open` | `<body>` |  Lock scrolling when backdrop is active. This class should be set on `<body>` while backdrop is active and removed while backdrop is inactive. **Required** |

package/docs/components/BackgroundImage/examples/BackgroundImage.md

@@ -1,7 +1,7 @@
 ---
 id: Background image
 section: components
-cssPrefix: pf-v5-c-background-image
+cssPrefix: pf-v6-c-background-image
 ---## Examples
 
 ### Basic
@@ -18,11 +18,11 @@ cssPrefix: pf-v5-c-background-image
 
 ### Overview
 
-In order to set the background image to be used, set the `--pf-v5-c-background-image--BackgroundImage` CSS variable to the path of the image. For example: `--pf-v5-c-background-image--BackgroundImage: url(custom/path/image.jpg);`
+In order to set the background image to be used, set the `--pf-v6-c-background-image--BackgroundImage` CSS variable to the path of the image. For example: `--pf-v6-c-background-image--BackgroundImage: url(custom/path/image.jpg);`
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-background-image` | `*` | A fixed background image is applied to the background of the page. |
-| `--pf-v5-c-background-image--BackgroundImage` | `.pf-v5-c-background-image` | Sets the background image to be used. **Required** |
+| `.pf-v6-c-background-image` | `*` | A fixed background image is applied to the background of the page. |
+| `--pf-v6-c-background-image--BackgroundImage` | `.pf-v6-c-background-image` | Sets the background image to be used. **Required** |

package/docs/components/Badge/examples/Badge.md

@@ -1,7 +1,7 @@
 ---
 id: Badge
 section: components
-cssPrefix: pf-v5-c-badge
+cssPrefix: pf-v6-c-badge
 ---## Examples
 
 ### Read
@@ -60,13 +60,13 @@ cssPrefix: pf-v5-c-badge
 
 ### Overview
 
-Always add a modifier class. Never use the class `.pf-v5-c-badge` on its own.
+Always add a modifier class. Never use the class `.pf-v6-c-badge` on its own.
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
-| `.pf-v5-c-badge__toggle-icon` | `<span>` | Initiates a badge toggle icon. |
-| `.pf-m-read` | `.pf-v5-c-badge` | Applies read badge styling. |
-| `.pf-m-unread` | `.pf-v5-c-badge` | Applies unread badge styling. |
+| `.pf-v6-c-badge` | `<span>` | Initiates a badge. **Always use with a modifier class.** |
+| `.pf-v6-c-badge__toggle-icon` | `<span>` | Initiates a badge toggle icon. |
+| `.pf-m-read` | `.pf-v6-c-badge` | Applies read badge styling. |
+| `.pf-m-unread` | `.pf-v6-c-badge` | Applies unread badge styling. |