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

package/docs/components/ModalBox/examples/ModalBox.md

@@ -1,7 +1,7 @@
 ---
 id: Modal
 section: components
-cssPrefix: pf-v5-c-modal-box
+cssPrefix: pf-v6-c-modal-box
 ---import './ModalBox.css'
 
 ## Examples
@@ -470,50 +470,91 @@ cssPrefix: pf-v5-c-modal-box
 
 ```
 
+### Danger alert with modifier on modal title
+
+The status modifier classes can be applied directly to the modal title element, instead of the parent modal.
+
+```html isFullscreen isBeta
+<div
+  class="pf-v6-c-modal-box"
+  role="dialog"
+  aria-modal="true"
+  aria-labelledby="danger-alert-title-title"
+  aria-describedby="danger-alert-title-description"
+>
+  <div class="pf-v6-c-modal-box__close">
+    <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
+      <i class="fas fa-times" aria-hidden="true"></i>
+    </button>
+  </div>
+  <header class="pf-v6-c-modal-box__header">
+    <h1
+      class="pf-v6-c-modal-box__title pf-m-icon pf-m-danger"
+      id="danger-alert-title-title"
+    >
+      <span class="pf-v6-c-modal-box__title-icon">
+        <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
+      </span>
+      <span class="pf-v6-u-screen-reader">
+        Danger
+        alert:
+      </span>
+      <span class="pf-v6-c-modal-box__title-text">Danger alert modal title</span>
+    </h1>
+  </header>
+  <div
+    class="pf-v6-c-modal-box__body"
+    id="danger-alert-title-description"
+  >To support screen reader user awareness of the dialog text, the dialog text is wrapped in a div that is referenced by aria-describedby.</div>
+  <footer class="pf-v6-c-modal-box__footer">Modal footer</footer>
+</div>
+
+```
+
 ## Documentation
 
 ### Overview
 
-A modal box is a generic rectangular container that can be used to build modals. A modal box can have the following sections: header, title, description, body, and footer. With normal use of the modal, a title or body is required. Alternatively, no child elements can be used, and the `.pf-v5-c-modal-box` container will  serve as a generic container with no padding for custom modal content. If no `.pf-v5-c-modal-box__title` is used, `aria-label="[title of modal]"` must be provided for `.pf-v5-c-modal-box`.
+A modal box is a generic rectangular container that can be used to build modals. A modal box can have the following sections: header, title, description, body, and footer. With normal use of the modal, a title or body is required. Alternatively, no child elements can be used, and the `.pf-v6-c-modal-box` container will  serve as a generic container with no padding for custom modal content. If no `.pf-v6-c-modal-box__title` is used, `aria-label="[title of modal]"` must be provided for `.pf-v6-c-modal-box`.
 
 ### Accessibility
 
 | Attribute | Applies to | Outcome |
 | -- | -- | -- |
-| `role="dialog"` | `.pf-v5-c-modal-box` | Identifies the element that serves as the modal container. **Required** |
-| `aria-labelledby="[id value of .pf-v5-c-modal-box__title or custom modal title]"` | `.pf-v5-c-modal-box` | Gives the modal an accessible name by referring to the element that provides the dialog title. **Required when .pf-v5-c-title is present** |
-| `aria-label="[title of modal]"` | `.pf-v5-c-modal-box` | Gives the modal an accessible name. **Required when `.pf-v5-c-modal-box__title` is *not* present** |
-| `aria-describedby="[id value of applicable content]"` | `.pf-v5-c-modal-box` | Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal. |
-| `aria-modal="true"` | `.pf-v5-c-modal-box` | Tells assistive technologies that the windows underneath the current modal are not available for interaction. **Required**|
-| `aria-label="Close"` | `.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-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-v5-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
-| `form="[id of form in modal body]"` | `.pf-v5-c-modal-box__footer .pf-v5-c-button` | Associates a submit button in the modal footer with a form in the modal body. For use when the submit button is outside of the `<form>` that the button submits. |
-| `tabindex="0"` | `.pf-v5-c-modal-box__body` | If a modal box body has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the body must include either a focusable element within the scrollable region or the body itself must be focusable by adding `tabindex="0"`. |
+| `role="dialog"` | `.pf-v6-c-modal-box` | Identifies the element that serves as the modal container. **Required** |
+| `aria-labelledby="[id value of .pf-v6-c-modal-box__title or custom modal title]"` | `.pf-v6-c-modal-box` | Gives the modal an accessible name by referring to the element that provides the dialog title. **Required when .pf-v6-c-title is present** |
+| `aria-label="[title of modal]"` | `.pf-v6-c-modal-box` | Gives the modal an accessible name. **Required when `.pf-v6-c-modal-box__title` is *not* present** |
+| `aria-describedby="[id value of applicable content]"` | `.pf-v6-c-modal-box` | Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal. |
+| `aria-modal="true"` | `.pf-v6-c-modal-box` | Tells assistive technologies that the windows underneath the current modal are not available for interaction. **Required**|
+| `aria-label="Close"` | `.pf-v6-c-modal-box__close .pf-v6-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
+| `aria-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-v6-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
+| `form="[id of form in modal body]"` | `.pf-v6-c-modal-box__footer .pf-v6-c-button` | Associates a submit button in the modal footer with a form in the modal body. For use when the submit button is outside of the `<form>` that the button submits. |
+| `tabindex="0"` | `.pf-v6-c-modal-box__body` | If a modal box body has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the body must include either a focusable element within the scrollable region or the body itself must be focusable by adding `tabindex="0"`. |
 
 ### Usage
 
 | Class | Applied | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-modal-box` | `<div>` | Initiates a modal box. **Required** |
-| `.pf-v5-c-modal-box__close` | `<div>` | Creates a container for the modal box close button. **Required** if there is a close button. |
-| `.pf-v5-c-button.pf-m-plain` | `<button>` | Initiates a modal box close button. |
-| `.pf-v5-c-modal-box__header` | `<header>` | Initiates a modal box header. **Required** if using a `.pf-v5-c-modal-box__title`. |
-| `.pf-v5-c-modal-box__header-main` | `<div>` | Initiates a modal box header main container. **Required** when `pf-v5-c-modal-box__header-help` is used. |
-| `.pf-v5-c-modal-box__header-help` | `<div>` | Initiates the help button container in the modal box header actions. |
-| `.pf-v5-c-modal-box__title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a modal box title. **Required** if using a modal description. |
-| `.pf-v5-c-modal-box__title-icon` | `<span>` | Initiates a container for the modal box title icon. |
-| `.pf-v5-c-modal-box__title-text` | `<span>` | Initiates a container for the modal box title text. |
-| `.pf-v5-c-modal-box__description` | `<div>` | Initiates a modal box description. |
-| `.pf-v5-c-modal-box__body` | `<div>` | Initiates a modal box body. |
-| `.pf-v5-c-modal-box__footer` | `<footer>` | Initiates a modal box footer. |
-| `.pf-m-sm` | `.pf-v5-c-modal-box` | Modifies for a small modal box width. |
-| `.pf-m-md` | `.pf-v5-c-modal-box` | Modifies for a medium modal box width. |
-| `.pf-m-lg` | `.pf-v5-c-modal-box` | Modifies for a large modal box width. |
-| `.pf-m-align-top` | `.pf-v5-c-modal-box` | Modifies for top alignment.  |
-| `.pf-m-icon` | `.pf-v5-c-modal-box__title` | Modifies the title layout to accommodate an icon. |
-| `.pf-m-custom` | `.pf-v5-c-modal-box` | Modifies for the custom alert state. |
-| `.pf-m-info` | `.pf-v5-c-modal-box` | Modifies for the info alert state. |
-| `.pf-m-success` | `.pf-v5-c-modal-box` | Modifies for the success alert state. |
-| `.pf-m-warning` | `.pf-v5-c-modal-box` | Modifies for the warning alert state. |
-| `.pf-m-danger` | `.pf-v5-c-modal-box` | Modifies for the danger alert state. |
-| `.pf-m-help` | `.pf-v5-c-modal-box__header` | Modifies the modal box header to support the help action |
+| `.pf-v6-c-modal-box` | `<div>` | Initiates a modal box. **Required** |
+| `.pf-v6-c-modal-box__close` | `<div>` | Creates a container for the modal box close button. **Required** if there is a close button. |
+| `.pf-v6-c-button.pf-m-plain` | `<button>` | Initiates a modal box close button. |
+| `.pf-v6-c-modal-box__header` | `<header>` | Initiates a modal box header. **Required** if using a `.pf-v6-c-modal-box__title`. |
+| `.pf-v6-c-modal-box__header-main` | `<div>` | Initiates a modal box header main container. **Required** when `pf-v6-c-modal-box__header-help` is used. |
+| `.pf-v6-c-modal-box__header-help` | `<div>` | Initiates the help button container in the modal box header actions. |
+| `.pf-v6-c-modal-box__title` | `<h1>`,`<h2>`,`<h3>`,`<h4>`,`<h5>`,`<h6>`, `<div>` | Initiates a modal box title. **Required** if using a modal description. |
+| `.pf-v6-c-modal-box__title-icon` | `<span>` | Initiates a container for the modal box title icon. |
+| `.pf-v6-c-modal-box__title-text` | `<span>` | Initiates a container for the modal box title text. |
+| `.pf-v6-c-modal-box__description` | `<div>` | Initiates a modal box description. |
+| `.pf-v6-c-modal-box__body` | `<div>` | Initiates a modal box body. |
+| `.pf-v6-c-modal-box__footer` | `<footer>` | Initiates a modal box footer. |
+| `.pf-m-sm` | `.pf-v6-c-modal-box` | Modifies for a small modal box width. |
+| `.pf-m-md` | `.pf-v6-c-modal-box` | Modifies for a medium modal box width. |
+| `.pf-m-lg` | `.pf-v6-c-modal-box` | Modifies for a large modal box width. |
+| `.pf-m-align-top` | `.pf-v6-c-modal-box` | Modifies for top alignment.  |
+| `.pf-m-icon` | `.pf-v6-c-modal-box__title` | Modifies the title layout to accommodate an icon. |
+| `.pf-m-custom` | `.pf-v6-c-modal-box`, `.pf-v6-c-modal-box__title` | Modifies for the custom alert state. |
+| `.pf-m-info` | `.pf-v6-c-modal-box`, `.pf-v6-c-modal-box__title` | Modifies for the info alert state. |
+| `.pf-m-success` | `.pf-v6-c-modal-box`, `.pf-v6-c-modal-box__title` | Modifies for the success alert state. |
+| `.pf-m-warning` | `.pf-v6-c-modal-box`, `.pf-v6-c-modal-box__title` | Modifies for the warning alert state. |
+| `.pf-m-danger` | `.pf-v6-c-modal-box`, `.pf-v6-c-modal-box__title` | Modifies for the danger alert state. |
+| `.pf-m-help` | `.pf-v6-c-modal-box__header` | Modifies the modal box header to support the help action |

package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -2,7 +2,7 @@
 id: 'Multiple file upload'
 section: components
 subsection: file-upload
-cssPrefix: pf-v5-c-multiple-file-upload
+cssPrefix: pf-v6-c-multiple-file-upload
 ---## Examples
 
 ### Basic
@@ -708,23 +708,23 @@ cssPrefix: pf-v5-c-multiple-file-upload
 
 | Class | Applied | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-multiple-file-upload` | `<div>` | Initiates the multiple file upload component. **Required** |
-| `.pf-v5-c-multiple-file-upload__main` | `<div>` | Defines the main section. |
-| `.pf-v5-c-multiple-file-upload__title` | `<div>` | Defines the title. |
-| `.pf-v5-c-multiple-file-upload__title-icon` | `<div>` | Defines the title icon. |
-| `.pf-v5-c-multiple-file-upload__title-text` | `<div>` | Defines the title text. |
-| `.pf-v5-c-multiple-file-upload__title-text-separator` | `<div>` | Defines the title text separator. |
-| `.pf-v5-c-multiple-file-upload__upload` | `<div>` | Defines the upload button. |
-| `.pf-v5-c-multiple-file-upload__info` | `<div>` | Defines the info section. |
-| `.pf-v5-c-multiple-file-upload__status` | `<div>` | Defines the status section. |
-| `.pf-v5-c-multiple-file-upload__status-progress` | `<div>` | Defines the status toggle progress. |
-| `.pf-v5-c-multiple-file-upload__status-progress-icon` | `<div>` | Defines the status toggle progress icon. |
-| `.pf-v5-c-multiple-file-upload__status-progress-text` | `<div>` | Defines the status toggle progress text. |
-| `.pf-v5-c-multiple-file-upload__status-list` | `<div>` | Defines the status item list. |
-| `.pf-v5-c-multiple-file-upload__status-item` | `<div>` | Defines a status item. |
-| `.pf-v5-c-multiple-file-upload__status-item-icon` | `<div>` | Defines the status item icon. |
-| `.pf-v5-c-multiple-file-upload__status-item-main` | `<div>` | Defines the status item main progress section. |
-| `.pf-v5-c-multiple-file-upload__status-item-close` | `<div>` | Defines the status item close button. |
-| `.pf-v5-c-multiple-file-upload__status-item-progress` | `<div>` | Defines the status item progress description. |
-| `.pf-v5-c-multiple-file-upload__status-item-progress-text` | `<div>` | Defines the status item progress description text. |
-| `.pf-v5-c-multiple-file-upload__status-item-progress-size` | `<div>` | Defines the status item progress description size. |
+| `.pf-v6-c-multiple-file-upload` | `<div>` | Initiates the multiple file upload component. **Required** |
+| `.pf-v6-c-multiple-file-upload__main` | `<div>` | Defines the main section. |
+| `.pf-v6-c-multiple-file-upload__title` | `<div>` | Defines the title. |
+| `.pf-v6-c-multiple-file-upload__title-icon` | `<div>` | Defines the title icon. |
+| `.pf-v6-c-multiple-file-upload__title-text` | `<div>` | Defines the title text. |
+| `.pf-v6-c-multiple-file-upload__title-text-separator` | `<div>` | Defines the title text separator. |
+| `.pf-v6-c-multiple-file-upload__upload` | `<div>` | Defines the upload button. |
+| `.pf-v6-c-multiple-file-upload__info` | `<div>` | Defines the info section. |
+| `.pf-v6-c-multiple-file-upload__status` | `<div>` | Defines the status section. |
+| `.pf-v6-c-multiple-file-upload__status-progress` | `<div>` | Defines the status toggle progress. |
+| `.pf-v6-c-multiple-file-upload__status-progress-icon` | `<div>` | Defines the status toggle progress icon. |
+| `.pf-v6-c-multiple-file-upload__status-progress-text` | `<div>` | Defines the status toggle progress text. |
+| `.pf-v6-c-multiple-file-upload__status-list` | `<div>` | Defines the status item list. |
+| `.pf-v6-c-multiple-file-upload__status-item` | `<div>` | Defines a status item. |
+| `.pf-v6-c-multiple-file-upload__status-item-icon` | `<div>` | Defines the status item icon. |
+| `.pf-v6-c-multiple-file-upload__status-item-main` | `<div>` | Defines the status item main progress section. |
+| `.pf-v6-c-multiple-file-upload__status-item-close` | `<div>` | Defines the status item close button. |
+| `.pf-v6-c-multiple-file-upload__status-item-progress` | `<div>` | Defines the status item progress description. |
+| `.pf-v6-c-multiple-file-upload__status-item-progress-text` | `<div>` | Defines the status item progress description text. |
+| `.pf-v6-c-multiple-file-upload__status-item-progress-size` | `<div>` | Defines the status item progress description size. |

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

@@ -1,5 +1,5 @@
-#ws-core-c-navigation-horizontal-in-masthead .pf-v5-c-page__header-nav,
-#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v5-c-page__header-nav {
+#ws-core-c-navigation-horizontal-in-masthead .pf-v6-c-page__header-nav,
+#ws-core-c-navigation-horizontal-in-masthead-overflow .pf-v6-c-page__header-nav {
   grid-row: 1;
 }
 
@@ -12,8 +12,25 @@
   position: relative;
 }
 
-#ws-core-c-navigation-nav-with-flyout .pf-v5-c-menu.pf-m-flyout.pf-m-nav {
+#ws-core-c-navigation-nav-with-flyout .pf-v6-c-menu.pf-m-flyout.pf-m-nav {
   position: absolute;
   inset-block-start: 168px;
   inset-inline-start: 256px;
 }
+
+#ws-core-c-navigation-horizontal .ws-preview-html,
+#ws-core-c-navigation-horizontal-overflow .ws-preview-html {
+  padding: var(--pf-t--global--spacer--md);
+}
+
+.ws-core-c-navigation .ws-preview-html {
+  background: var(--pf-v6-c-page__sidebar--BackgroundColor); /* use sidebar background for vertical nav examples */
+}
+
+[id^="ws-core-c-navigation-horizontal"] .ws-preview-html {
+  background: var(--pf-v6-c-masthead--BackgroundColor); /* use masthead background for horizontal nav examples */
+}
+
+[id^="ws-core-c-navigation-horizontal-subnav"] .ws-preview-html {
+  background: transparent; /* reset background for horizontal subnav examples */
+}

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

@@ -1,7 +1,7 @@
 ---
 id: Navigation
 section: components
-cssPrefix: pf-v5-c-nav
+cssPrefix: pf-v6-c-nav
 ---import './Navigation.css'
 
 ## Examples
@@ -489,13 +489,12 @@ cssPrefix: pf-v5-c-nav
 <nav class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal" aria-label="Global">
   <div class="pf-v6-c-nav__scroll-button">
     <button
-      class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
+      class="pf-v6-c-button pf-m-plain"
       type="button"
       aria-label="Scroll start"
+      disabled
     >
-      <span class="pf-v6-c-button__icon">
-        <i class="fas fa-angle-left" aria-hidden="true"></i>
-      </span>
+      <i class="fas fa-angle-left" aria-hidden="true"></i>
     </button>
   </div>
   <ul class="pf-v6-c-nav__list" role="list">
@@ -521,13 +520,11 @@ cssPrefix: pf-v5-c-nav
   </ul>
   <div class="pf-v6-c-nav__scroll-button">
     <button
-      class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
+      class="pf-v6-c-button pf-m-plain"
       type="button"
       aria-label="Scroll end"
     >
-      <span class="pf-v6-c-button__icon">
-        <i class="fas fa-angle-right" aria-hidden="true"></i>
-      </span>
+      <i class="fas fa-angle-right" aria-hidden="true"></i>
     </button>
   </div>
 </nav>
@@ -566,13 +563,12 @@ cssPrefix: pf-v5-c-nav
 >
   <div class="pf-v6-c-nav__scroll-button">
     <button
-      class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
+      class="pf-v6-c-button pf-m-plain"
       type="button"
       aria-label="Scroll start"
+      disabled
     >
-      <span class="pf-v6-c-button__icon">
-        <i class="fas fa-angle-left" aria-hidden="true"></i>
-      </span>
+      <i class="fas fa-angle-left" aria-hidden="true"></i>
     </button>
   </div>
   <ul class="pf-v6-c-nav__list" role="list">
@@ -598,13 +594,11 @@ cssPrefix: pf-v5-c-nav
   </ul>
   <div class="pf-v6-c-nav__scroll-button">
     <button
-      class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
+      class="pf-v6-c-button pf-m-plain"
       type="button"
       aria-label="Scroll end"
     >
-      <span class="pf-v6-c-button__icon">
-        <i class="fas fa-angle-right" aria-hidden="true"></i>
-      </span>
+      <i class="fas fa-angle-right" aria-hidden="true"></i>
     </button>
   </div>
 </nav>
@@ -1251,7 +1245,7 @@ cssPrefix: pf-v5-c-nav
   <div class="pf-v6-c-menu pf-m-drilldown pf-m-drilled-in">
     <div
       class="pf-v6-c-menu__content"
-      style="--pf-v5-c-menu__content--Height: 228px;"
+      style="--pf-v6-c-menu__content--Height: 228px;"
     >
       <ul class="pf-v6-c-menu__list" role="menu">
         <li class="pf-v6-c-menu__list-item" role="none">
@@ -1783,7 +1777,7 @@ cssPrefix: pf-v5-c-nav
   <div class="pf-v6-c-menu pf-m-drilldown pf-m-drilled-in">
     <div
       class="pf-v6-c-menu__content"
-      style="--pf-v5-c-menu__content--Height: 284px;"
+      style="--pf-v6-c-menu__content--Height: 284px;"
     >
       <ul class="pf-v6-c-menu__list" role="menu">
         <li class="pf-v6-c-menu__list-item" role="none">
@@ -2313,7 +2307,7 @@ cssPrefix: pf-v5-c-nav
 
 ### Nav link text
 
-When using anything other than a text node for the link text, wrap the link text in an element with `.pf-v5-c-nav__link-text`.
+When using anything other than a text node for the link text, wrap the link text in an element with `.pf-v6-c-nav__link-text`.
 
 ```html isBeta
 <nav class="pf-v6-c-nav" aria-label="Global">
@@ -2415,43 +2409,43 @@ When using anything other than a text node for the link text, wrap the link text
 
 The navigation system relies on several different sub-components:
 
-* `.pf-v5-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
+* `.pf-v6-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
 
 ### Accessibility
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-label="[landmark description]"` | `.pf-v5-c-nav` |  Describes `<nav>` landmark. |
-| `aria-label="[section title]"` | `.pf-v5-c-nav__section` |  Describes a nav `<section>`, where a `.pf-v5-c-nav__section-title` is not present. |
-| `aria-labelledby="[id value of link describing subnav]"` | `.pf-v5-c-nav__subnav` |  Gives the subnav `<section>` landmark an accessible name by referring to the element that provides the subnav `<section>` landmark title. |
-| `aria-expanded="false"` | `.pf-v5-c-nav__link` |  Indicates that subnav section is hidden. |
-| `aria-expanded="true"` | `.pf-v5-c-nav__link` |  Indicates that subnav section is visible. |
-| `hidden` | `.pf-v5-c-nav__subnav` |  Indicates that the subnav section is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
-| `disabled` | `.pf-v5-c-nav__scroll-button` | Indicates that a scroll button is disabled, when at the first or last item of a list. **Required when disabled** |
-| `aria-current="page"` | `.pf-v5-c-nav__link` |  Indicates the current page link. Can only occur once on page. |
-| `aria-haspopup="true"` | `.pf-v5-c-nav__link` | Declares that a nav item has a submenu. |
+| `aria-label="[landmark description]"` | `.pf-v6-c-nav` |  Describes `<nav>` landmark. |
+| `aria-label="[section title]"` | `.pf-v6-c-nav__section` |  Describes a nav `<section>`, where a `.pf-v6-c-nav__section-title` is not present. |
+| `aria-labelledby="[id value of link describing subnav]"` | `.pf-v6-c-nav__subnav` |  Gives the subnav `<section>` landmark an accessible name by referring to the element that provides the subnav `<section>` landmark title. |
+| `aria-expanded="false"` | `.pf-v6-c-nav__link` |  Indicates that subnav section is hidden. |
+| `aria-expanded="true"` | `.pf-v6-c-nav__link` |  Indicates that subnav section is visible. |
+| `hidden` | `.pf-v6-c-nav__subnav` |  Indicates that the subnav section is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
+| `disabled` | `.pf-v6-c-nav__scroll-button` | Indicates that a scroll button is disabled, when at the first or last item of a list. **Required when disabled** |
+| `aria-current="page"` | `.pf-v6-c-nav__link` |  Indicates the current page link. Can only occur once on page. |
+| `aria-haspopup="true"` | `.pf-v6-c-nav__link` | Declares that a nav item has a submenu. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-nav` | `<nav>` | Initiates a primary nav element. |
-| `.pf-v5-c-nav__subnav` | `<section>` | Initiates a subnav section. |
-| `.pf-v5-c-nav__list` | `<ul>` | Initiates nav list. |
-| `.pf-v5-c-nav__item` | `<li>` | Initiates nav list item. |
-| `.pf-v5-c-nav__link` | `<a>` | Initiates nav list link. |
-| `.pf-v5-c-nav__link-text` | `<span>` | Initiates nav list link text. |
-| `.pf-v5-c-nav__section` | `<section>` | Initiates a nav section element. |
-| `.pf-v5-c-nav__section-title` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Initiates a nav section title. |
-| `.pf-v5-c-nav__toggle` | `<span>` | Initiates the nav toggle wrapper. |
-| `.pf-v5-c-nav__toggle-icon` | `<span>` | Initiates a nav toggle icon wrapper. |
-| `.pf-v5-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
-| `.pf-m-horizontal` | `.pf-v5-c-nav` | Modifies nav for the horizontal variation. |
-| `.pf-m-horizontal-subnav` | `.pf-v5-c-nav` | Modifies nav for the horizontal subnav variation. |
-| `.pf-m-full-width` | `.pf-v5-c-nav` | Modifies nav for to full width of parent. |
-| `.pf-m-flyout` | `.pf-v5-c-nav__item` | Modifies nav item for the flyout variation. |
-| `.pf-m-scrollable` | `.pf-v5-c-nav` | Modifies nav for the scrollable state. |
-| `.pf-m-expandable` | `.pf-v5-c-nav__item` | Modifies for the expandable state. |
-| `.pf-m-expanded` | `.pf-v5-c-nav__item` | Modifies for the expanded state. |
-| `.pf-m-current` | `.pf-v5-c-nav__link` | Modifies for the current state. |
-| `.pf-m-hover` | `.pf-v5-c-nav__link` | Modifies for the hover state. |
+| `.pf-v6-c-nav` | `<nav>` | Initiates a primary nav element. |
+| `.pf-v6-c-nav__subnav` | `<section>` | Initiates a subnav section. |
+| `.pf-v6-c-nav__list` | `<ul>` | Initiates nav list. |
+| `.pf-v6-c-nav__item` | `<li>` | Initiates nav list item. |
+| `.pf-v6-c-nav__link` | `<a>` | Initiates nav list link. |
+| `.pf-v6-c-nav__link-text` | `<span>` | Initiates nav list link text. |
+| `.pf-v6-c-nav__section` | `<section>` | Initiates a nav section element. |
+| `.pf-v6-c-nav__section-title` | `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` | Initiates a nav section title. |
+| `.pf-v6-c-nav__toggle` | `<span>` | Initiates the nav toggle wrapper. |
+| `.pf-v6-c-nav__toggle-icon` | `<span>` | Initiates a nav toggle icon wrapper. |
+| `.pf-v6-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
+| `.pf-m-horizontal` | `.pf-v6-c-nav` | Modifies nav for the horizontal variation. |
+| `.pf-m-horizontal-subnav` | `.pf-v6-c-nav` | Modifies nav for the horizontal subnav variation. |
+| `.pf-m-full-width` | `.pf-v6-c-nav` | Modifies nav for to full width of parent. |
+| `.pf-m-flyout` | `.pf-v6-c-nav__item` | Modifies nav item for the flyout variation. |
+| `.pf-m-scrollable` | `.pf-v6-c-nav` | Modifies nav for the scrollable state. |
+| `.pf-m-expandable` | `.pf-v6-c-nav__item` | Modifies for the expandable state. |
+| `.pf-m-expanded` | `.pf-v6-c-nav__item` | Modifies for the expanded state. |
+| `.pf-m-current` | `.pf-v6-c-nav__link` | Modifies for the current state. |
+| `.pf-m-hover` | `.pf-v6-c-nav__link` | Modifies for the hover state. |

package/docs/components/NotificationBadge/examples/NotificationBadge.md

@@ -1,7 +1,7 @@
 ---
 id: Notification badge
 section: components
-cssPrefix: pf-v5-c-notification-badge
+cssPrefix: pf-v6-c-notification-badge
 ---## Examples
 
 ### Basic
@@ -204,7 +204,7 @@ cssPrefix: pf-v5-c-notification-badge
 
 ### Overview
 
-Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-v5-c-notification-badge` on its own.
+Always add a modifier class to indicate read, unread, or attention state. Never use the class `.pf-v6-c-notification-badge` on its own.
 
 ### Accessibility
 
@@ -214,9 +214,9 @@ Be sure that the component associated with this indicator handles screen reader
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-notification-badge` | `<div>` |  Initiates a notification badge. **Always use it with a modifier class.** |
-| `.pf-v5-c-notification-badge__count` | `<span>` |  Initiates a notification badge count. |
-| `.pf-m-read` | `.pf-v5-c-notification-badge` |  Applies read notification badge styling. |
-| `.pf-m-unread` | `.pf-v5-c-notification-badge` |  Applies unread notification badge styling. |
-| `.pf-m-attention` | `.pf-v5-c-notification-badge` |  Applies attention notification badge styling. |
-| `.pf-m-expanded` | `.pf-v5-c-notification-badge` |  Applies expanded notification badge styling. |
+| `.pf-v6-c-notification-badge` | `<div>` |  Initiates a notification badge. **Always use it with a modifier class.** |
+| `.pf-v6-c-notification-badge__count` | `<span>` |  Initiates a notification badge count. |
+| `.pf-m-read` | `.pf-v6-c-notification-badge` |  Applies read notification badge styling. |
+| `.pf-m-unread` | `.pf-v6-c-notification-badge` |  Applies unread notification badge styling. |
+| `.pf-m-attention` | `.pf-v6-c-notification-badge` |  Applies attention notification badge styling. |
+| `.pf-m-expanded` | `.pf-v6-c-notification-badge` |  Applies expanded notification badge styling. |

package/docs/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -1,7 +1,7 @@
 ---
 id: Notification drawer
 section: components
-cssPrefix: pf-v5-c-notification-drawer
+cssPrefix: pf-v6-c-notification-drawer
 ---## Examples
 
 ### Basic
@@ -3043,43 +3043,43 @@ cssPrefix: pf-v5-c-notification-drawer
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-expanded="false"` | `.pf-v5-c-notification-drawer__group-toggle` | Indicates that the group notification list is hidden. |
-| `aria-expanded="true"` | `.pf-v5-c-notification-drawer__group-toggle` | Indicates that the group notification list is visible. |
-| `hidden` | `.pf-v5-c-notification-drawer__list` | Indicates that the group notification list is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
-| `tabindex="0"` | `.pf-v5-c-notification-drawer__list-item.pf-m-hoverable` | Inserts the hoverable list item into the tab order of the page so that it is focusable. |
-| `aria-hidden="true"` | `.pf-v5-c-notification-drawer__group-toggle-icon > *`, `.pf-v5-c-notification-drawer__list-item-header-icon > *` | Hides icon for assistive technologies. |
+| `aria-expanded="false"` | `.pf-v6-c-notification-drawer__group-toggle` | Indicates that the group notification list is hidden. |
+| `aria-expanded="true"` | `.pf-v6-c-notification-drawer__group-toggle` | Indicates that the group notification list is visible. |
+| `hidden` | `.pf-v6-c-notification-drawer__list` | Indicates that the group notification list is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies. |
+| `tabindex="0"` | `.pf-v6-c-notification-drawer__list-item.pf-m-hoverable` | Inserts the hoverable list item into the tab order of the page so that it is focusable. |
+| `aria-hidden="true"` | `.pf-v6-c-notification-drawer__group-toggle-icon > *`, `.pf-v6-c-notification-drawer__list-item-header-icon > *` | Hides icon for assistive technologies. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-notification-drawer` | `<div>` | Initiates the notification drawer. **Required** |
-| `.pf-v5-c-notification-drawer__header` | `<div>` | Initiates the notification drawer header. **Required** |
-| `.pf-v5-c-notification-drawer__header-title` | `<h1>` | Initiates the notification drawer header title. **Required** |
-| `.pf-v5-c-notification-drawer__header-status` | `<span>` | Initiates the notification drawer header status. |
-| `.pf-v5-c-notification-drawer__header-action` | `<div>` | Initiates the notification drawer header action. |
-| `.pf-v5-c-notification-drawer__header-action-close` | `<div>` | Initiates the notification drawer header action button. |
-| `.pf-v5-c-notification-drawer__body` | `<div>` | Initiates the notification drawer body. **Required** |
-| `.pf-v5-c-notification-drawer__list` | `<ul>` | Initiates a notification list. **Required** |
-| `.pf-v5-c-notification-drawer__list-item` | `<li>` | Initiates a notification list item. Always use with a state modifier class. **Required** |
-| `.pf-v5-c-notification-drawer__list-item-header` | `<div>` | Initiates a notification list item header. **Required** |
-| `.pf-v5-c-notification-drawer__list-item-header-icon` | `<span>` | Initiates a notification list item header icon. **Required** |
-| `.pf-v5-c-notification-drawer__list-item-header-title` | `<h2>` | Initiates a notification list item header title. **Required** |
-| `.pf-v5-c-notification-drawer__list-item-action` | `<div>` | Initiates a notification list item action. |
-| `.pf-v5-c-notification-drawer__list-item-description` | `<div>` | Initiates a notification list item description. **Required** |
-| `.pf-v5-c-notification-drawer__list-item-timestamp` | `<div>` | Initiates a notification list item timestamp. **Required** |
-| `.pf-v5-c-notification-drawer__group-list` | `<div>` | Initiates a notification group list. **Required when notifications are grouped** |
-| `.pf-v5-c-notification-drawer__group` | `<section>` | Initiates a notification group. **Required** |
-| `.pf-v5-c-notification-drawer__group-toggle` | `<button>` | Initiates a notification group toggle. **Required** |
-| `.pf-v5-c-notification-drawer__group-title` | `<div>` | Initiates a notification group toggle title. **Required** |
-| `.pf-v5-c-notification-drawer__group-count` | `<div>` | Initiates a notification group toggle count. |
-| `.pf-v5-c-notification-drawer__group-icon` | `<span>` | Initiates a notification group toggle icon. **Required** |
-| `.pf-m-custom` | `.pf-v5-c-notification-drawer__list-item` | Modifies a notification list item for the custom state. |
-| `.pf-m-info` | `.pf-v5-c-notification-drawer__list-item` | Modifies a notification list item for the info state. |
-| `.pf-m-warning` | `.pf-v5-c-notification-drawer__list-item` | Modifies a notification list item for the warning state. |
-| `.pf-m-danger` | `.pf-v5-c-notification-drawer__list-item` | Modifies a notification list item for the danger state. |
-| `.pf-m-success` | `.pf-v5-c-notification-drawer__list-item` | Modifies a notification list item for the success state. |
-| `.pf-m-read` | `.pf-v5-c-notification-drawer__list-item` | Modifies a notification list item for the read state. |
-| `.pf-m-hoverable` | `.pf-v5-c-notification-drawer__list-item` | Modifies a notification list item hover states to inidicate it is clickable. |
-| `.pf-m-expanded` | `.pf-v5-c-notification-drawer__group` | Modifies a notification group for the expanded state. |
-| `.pf-m-truncate` | `.pf-v5-c-notification-drawer__list-item-header-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-notification-drawer__list-item-header-title--max-lines` (the default value is `1`). |
+| `.pf-v6-c-notification-drawer` | `<div>` | Initiates the notification drawer. **Required** |
+| `.pf-v6-c-notification-drawer__header` | `<div>` | Initiates the notification drawer header. **Required** |
+| `.pf-v6-c-notification-drawer__header-title` | `<h1>` | Initiates the notification drawer header title. **Required** |
+| `.pf-v6-c-notification-drawer__header-status` | `<span>` | Initiates the notification drawer header status. |
+| `.pf-v6-c-notification-drawer__header-action` | `<div>` | Initiates the notification drawer header action. |
+| `.pf-v6-c-notification-drawer__header-action-close` | `<div>` | Initiates the notification drawer header action button. |
+| `.pf-v6-c-notification-drawer__body` | `<div>` | Initiates the notification drawer body. **Required** |
+| `.pf-v6-c-notification-drawer__list` | `<ul>` | Initiates a notification list. **Required** |
+| `.pf-v6-c-notification-drawer__list-item` | `<li>` | Initiates a notification list item. Always use with a state modifier class. **Required** |
+| `.pf-v6-c-notification-drawer__list-item-header` | `<div>` | Initiates a notification list item header. **Required** |
+| `.pf-v6-c-notification-drawer__list-item-header-icon` | `<span>` | Initiates a notification list item header icon. **Required** |
+| `.pf-v6-c-notification-drawer__list-item-header-title` | `<h2>` | Initiates a notification list item header title. **Required** |
+| `.pf-v6-c-notification-drawer__list-item-action` | `<div>` | Initiates a notification list item action. |
+| `.pf-v6-c-notification-drawer__list-item-description` | `<div>` | Initiates a notification list item description. **Required** |
+| `.pf-v6-c-notification-drawer__list-item-timestamp` | `<div>` | Initiates a notification list item timestamp. **Required** |
+| `.pf-v6-c-notification-drawer__group-list` | `<div>` | Initiates a notification group list. **Required when notifications are grouped** |
+| `.pf-v6-c-notification-drawer__group` | `<section>` | Initiates a notification group. **Required** |
+| `.pf-v6-c-notification-drawer__group-toggle` | `<button>` | Initiates a notification group toggle. **Required** |
+| `.pf-v6-c-notification-drawer__group-title` | `<div>` | Initiates a notification group toggle title. **Required** |
+| `.pf-v6-c-notification-drawer__group-count` | `<div>` | Initiates a notification group toggle count. |
+| `.pf-v6-c-notification-drawer__group-icon` | `<span>` | Initiates a notification group toggle icon. **Required** |
+| `.pf-m-custom` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item for the custom state. |
+| `.pf-m-info` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item for the info state. |
+| `.pf-m-warning` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item for the warning state. |
+| `.pf-m-danger` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item for the danger state. |
+| `.pf-m-success` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item for the success state. |
+| `.pf-m-read` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item for the read state. |
+| `.pf-m-hoverable` | `.pf-v6-c-notification-drawer__list-item` | Modifies a notification list item hover states to inidicate it is clickable. |
+| `.pf-m-expanded` | `.pf-v6-c-notification-drawer__group` | Modifies a notification group for the expanded state. |
+| `.pf-m-truncate` | `.pf-v6-c-notification-drawer__list-item-header-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-notification-drawer__list-item-header-title--max-lines` (the default value is `1`). |

package/docs/components/NumberInput/examples/NumberInput.md

@@ -1,7 +1,7 @@
 ---
 id: Number input
 section: components
-cssPrefix: pf-v5-c-number-input
+cssPrefix: pf-v6-c-number-input
 ---## Examples
 
 ### Default
@@ -355,7 +355,7 @@ cssPrefix: pf-v5-c-number-input
 ```html
 <div
   class="pf-v6-c-number-input"
-  style="--pf-v5-c-number-input--c-form-control--width-chars: 1;"
+  style="--pf-v6-c-number-input--c-form-control--width-chars: 1;"
 >
   <div class="pf-v6-c-input-group">
     <div class="pf-v6-c-input-group__item">
@@ -396,7 +396,7 @@ cssPrefix: pf-v5-c-number-input
 <br />
 <div
   class="pf-v6-c-number-input"
-  style="--pf-v5-c-number-input--c-form-control--width-chars: 10;"
+  style="--pf-v6-c-number-input--c-form-control--width-chars: 10;"
 >
   <div class="pf-v6-c-input-group">
     <div class="pf-v6-c-input-group__item">
@@ -437,7 +437,7 @@ cssPrefix: pf-v5-c-number-input
 <br />
 <div
   class="pf-v6-c-number-input"
-  style="--pf-v5-c-number-input--c-form-control--width-chars: 5;"
+  style="--pf-v6-c-number-input--c-form-control--width-chars: 5;"
 >
   <div class="pf-v6-c-input-group">
     <div class="pf-v6-c-input-group__item">
@@ -478,7 +478,7 @@ cssPrefix: pf-v5-c-number-input
 <br />
 <div
   class="pf-v6-c-number-input"
-  style="--pf-v5-c-number-input--c-form-control--width-chars: 5;"
+  style="--pf-v6-c-number-input--c-form-control--width-chars: 5;"
 >
   <div class="pf-v6-c-input-group">
     <div class="pf-v6-c-input-group__item">
@@ -524,16 +524,16 @@ cssPrefix: pf-v5-c-number-input
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-label="Plus"`, `aria-label="Minus"` | `.pf-v5-c-button.pf-m-control` | Provides an accessible name for the outer plus/minus buttons. **Required** |
-| `min` | `input[type="number"].pf-v5-c-form-control` | Provides an optional minimum value for the input. |
-| `max` | `input[type="number"].pf-v5-c-form-control` | Provides an optional maximum value for the input. |
+| `aria-label="Plus"`, `aria-label="Minus"` | `.pf-v6-c-button.pf-m-control` | Provides an accessible name for the outer plus/minus buttons. **Required** |
+| `min` | `input[type="number"].pf-v6-c-form-control` | Provides an optional minimum value for the input. |
+| `max` | `input[type="number"].pf-v6-c-form-control` | Provides an optional maximum value for the input. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-number-input` | `<div>` | Initiates the number input component. |
-| `.pf-v5-c-number-input__icon` | `<span>` | Initiates the number input icon. |
-| `.pf-v5-c-number-input__unit` | `<span>` | Initiates the number input unit. |
-| `.pf-m-status` | `.pf-v5-c-number-input` | Modifies the width to create enough space for a status icon to be included in the form control portion of the number input. **Required** if a status icon may be shown, even if the icon is not currently shown. |
-| `--pf-v5-c-number-input--c-form-control--width-chars` | `.pf-v5-c-number-input` | Specifies the number of characters to show in the input. |
+| `.pf-v6-c-number-input` | `<div>` | Initiates the number input component. |
+| `.pf-v6-c-number-input__icon` | `<span>` | Initiates the number input icon. |
+| `.pf-v6-c-number-input__unit` | `<span>` | Initiates the number input unit. |
+| `.pf-m-status` | `.pf-v6-c-number-input` | Modifies the width to create enough space for a status icon to be included in the form control portion of the number input. **Required** if a status icon may be shown, even if the icon is not currently shown. |
+| `--pf-v6-c-number-input--c-form-control--width-chars` | `.pf-v6-c-number-input` | Specifies the number of characters to show in the input. |