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

package/docs/components/MenuToggle/examples/MenuToggle.md

@@ -2,7 +2,7 @@
 id: 'Menu toggle'
 section: components
 subsection: menus
-cssPrefix: pf-v5-c-menu-toggle
+cssPrefix: pf-v6-c-menu-toggle
 ---import './MenuToggle.css'
 
 ## Examples
@@ -212,20 +212,8 @@ cssPrefix: pf-v5-c-menu-toggle
   aria-expanded="false"
   aria-label="Actions"
 >
-  <span class="pf-v6-c-menu-toggle__toggle-icon">
-    <svg
-      class="pf-v5-svg"
-      viewBox="0 0 192 512"
-      fill="currentColor"
-      aria-hidden="true"
-      role="img"
-      width="1em"
-      height="1em"
-    >
-      <path
-        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-      />
-    </svg>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
   </span>
 </button>
 &nbsp;
@@ -235,20 +223,8 @@ cssPrefix: pf-v5-c-menu-toggle
   aria-expanded="true"
   aria-label="Actions"
 >
-  <span class="pf-v6-c-menu-toggle__toggle-icon">
-    <svg
-      class="pf-v5-svg"
-      viewBox="0 0 192 512"
-      fill="currentColor"
-      aria-hidden="true"
-      role="img"
-      width="1em"
-      height="1em"
-    >
-      <path
-        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-      />
-    </svg>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
   </span>
 </button>
 &nbsp;
@@ -259,20 +235,8 @@ cssPrefix: pf-v5-c-menu-toggle
   disabled
   aria-label="Actions"
 >
-  <span class="pf-v6-c-menu-toggle__toggle-icon">
-    <svg
-      class="pf-v5-svg"
-      viewBox="0 0 192 512"
-      fill="currentColor"
-      aria-hidden="true"
-      role="img"
-      width="1em"
-      height="1em"
-    >
-      <path
-        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-      />
-    </svg>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
   </span>
 </button>
 
@@ -512,20 +476,8 @@ cssPrefix: pf-v5-c-menu-toggle
   aria-expanded="false"
   aria-label="Actions"
 >
-  <span class="pf-v6-c-menu-toggle__toggle-icon">
-    <svg
-      class="pf-v5-svg"
-      viewBox="0 0 192 512"
-      fill="currentColor"
-      aria-hidden="true"
-      role="img"
-      width="1em"
-      height="1em"
-    >
-      <path
-        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-      />
-    </svg>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
   </span>
 </button>
 &nbsp;
@@ -535,20 +487,8 @@ cssPrefix: pf-v5-c-menu-toggle
   aria-expanded="true"
   aria-label="Actions"
 >
-  <span class="pf-v6-c-menu-toggle__toggle-icon">
-    <svg
-      class="pf-v5-svg"
-      viewBox="0 0 192 512"
-      fill="currentColor"
-      aria-hidden="true"
-      role="img"
-      width="1em"
-      height="1em"
-    >
-      <path
-        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-      />
-    </svg>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
   </span>
 </button>
 &nbsp;
@@ -559,20 +499,8 @@ cssPrefix: pf-v5-c-menu-toggle
   disabled
   aria-label="Actions"
 >
-  <span class="pf-v6-c-menu-toggle__toggle-icon">
-    <svg
-      class="pf-v5-svg"
-      viewBox="0 0 192 512"
-      fill="currentColor"
-      aria-hidden="true"
-      role="img"
-      width="1em"
-      height="1em"
-    >
-      <path
-        d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z"
-      />
-    </svg>
+  <span class="pf-v6-c-menu-toggle__icon">
+    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
   </span>
 </button>
 
@@ -1177,29 +1105,29 @@ cssPrefix: pf-v5-c-menu-toggle
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-expanded="true"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
-| `aria-expanded="false"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
-| `aria-label="Descriptive text"` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle.pf-m-plain` | Gives the menu toggle component an accessible label. Used whenever there is no text visible in the menu toggle. Often, plain modifiers are used when the menu toggle only contains an icon. |
-| `disabled` | `.pf-v5-c-menu-toggle`, `.pf-v5-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |
+| `aria-expanded="true"` | `.pf-v6-c-menu-toggle`, `.pf-v6-c-menu-toggle__button` | Indicates that the menu toggle component is in the expanded state. |
+| `aria-expanded="false"` | `.pf-v6-c-menu-toggle`, `.pf-v6-c-menu-toggle__button` | Indicates that the menu toggle component is in the collapsed state. |
+| `aria-label="Descriptive text"` | `.pf-v6-c-menu-toggle`, `.pf-v6-c-menu-toggle.pf-m-plain` | Gives the menu toggle component an accessible label. Used whenever there is no text visible in the menu toggle. Often, plain modifiers are used when the menu toggle only contains an icon. |
+| `disabled` | `.pf-v6-c-menu-toggle`, `.pf-v6-c-menu-toggle__button` | Indicates that the menu toggle component is disabled. |
 
 ### Usage
 
 | Class | Applied | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
-| `.pf-v5-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon/image. |
-| `.pf-v5-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
-| `.pf-v5-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
-| `.pf-v5-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
-| `.pf-v5-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
-| `.pf-v5-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
-| `.pf-m-split-button` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
-| `.pf-m-action` | `.pf-v5-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
-| `.pf-m-disabled` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
-| `.pf-m-primary` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
-| `.pf-m-secondary` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
-| `.pf-m-text` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
-| `.pf-m-plain` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
-| `.pf-m-expanded` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
-| `.pf-m-full-height` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
-| `.pf-m-full-width` | `.pf-v5-c-menu-toggle` | Modifies the menu toggle component to full width of parent. |
+| `.pf-v6-c-menu-toggle` | `<button>` | Initiates the menu toggle component. |
+| `.pf-v6-c-menu-toggle__icon` | `<span>` | Defines the menu toggle component icon/image. |
+| `.pf-v6-c-menu-toggle__text` | `<span>` | Defines the menu toggle component text. |
+| `.pf-v6-c-menu-toggle__count` | `<span>` | Defines the menu toggle component count. |
+| `.pf-v6-c-menu-toggle__controls` | `<span>` | Defines the menu toggle component controls. |
+| `.pf-v6-c-menu-toggle__toggle-icon` | `<span>` | Defines the menu toggle component toggle/arrow icon. |
+| `.pf-v6-c-menu-toggle__button` | `<button>` | Initiates the menu toggle button. |
+| `.pf-m-split-button` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the split button variation. |
+| `.pf-m-action` | `.pf-v6-c-menu-toggle.pf-m-split-button` | Modifies the menu toggle component for the action, split button variation. |
+| `.pf-m-disabled` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the disabled variation. |
+| `.pf-m-primary` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the primary variation. |
+| `.pf-m-secondary` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the secondary variation. |
+| `.pf-m-text` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the text variation. |
+| `.pf-m-plain` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the plain variation. |
+| `.pf-m-expanded` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component for the expanded state. |
+| `.pf-m-full-height` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full height of parent. |
+| `.pf-m-full-width` | `.pf-v6-c-menu-toggle` | Modifies the menu toggle component to full width of parent. |

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. |