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

package/docs/components/InlineEdit/examples/InlineEdit.md

@@ -1,22 +1,22 @@
 ---
 id: Inline edit
 section: components
-cssPrefix: pf-v5-c-inline-edit
+cssPrefix: pf-v6-c-inline-edit
 ---## Introduction
 
-**Inline edit** is a utilitarian component that has two core elements, `.pf-v5-c-inline-edit__value` and `.pf-v5-c-inline-edit__input` and is based on a simple concept. When **value** is visible, **input** is hidden, and vice versa.
+**Inline edit** is a utilitarian component that has two core elements, `.pf-v6-c-inline-edit__value` and `.pf-v6-c-inline-edit__input` and is based on a simple concept. When **value** is visible, **input** is hidden, and vice versa.
 
 ### Generic groups
 
-`.pf-v5-c-inline-edit__group`s provide basic layout support and have several available modifiers (`.pf-m-action-group`, `.pf-m-icon-group`).
+`.pf-v6-c-inline-edit__group`s provide basic layout support and have several available modifiers (`.pf-m-action-group`, `.pf-m-icon-group`).
 
 ### Actions
 
-**Actions** (`.pf-v5-c-inline-edit__action`) are hidden by default and exposed when a region of `.pf-v5-c-inline-edit` becomes active. The default visibility of an **action** or **action group** can be inversed by adding `.pf-m-enable-editable`. `.pf-m-enable-editable` flags an element or group of elements as the controlling agents for enabling editable content and therefore is visible by default and hidden when inline editing is enabled.
+**Actions** (`.pf-v6-c-inline-edit__action`) are hidden by default and exposed when a region of `.pf-v6-c-inline-edit` becomes active. The default visibility of an **action** or **action group** can be inversed by adding `.pf-m-enable-editable`. `.pf-m-enable-editable` flags an element or group of elements as the controlling agents for enabling editable content and therefore is visible by default and hidden when inline editing is enabled.
 
 ## Examples
 
-Inline edit **toggle** can be placed anywhere within `.pf-v5-c-inline-edit`. It initiates the editability of elements. When an element becomes editable, **toggle** is hidden.
+Inline edit **toggle** can be placed anywhere within `.pf-v6-c-inline-edit`. It initiates the editability of elements. When an element becomes editable, **toggle** is hidden.
 
 ### Inline edit toggle
 
@@ -37,7 +37,7 @@ Inline edit **toggle** can be placed anywhere within `.pf-v5-c-inline-edit`. It
 
 ```
 
-Inline edit **value** can be placed anywhere within `.pf-v5-c-inline-edit`. It is visible by default and hidden when inline edit becomes **editable**.
+Inline edit **value** can be placed anywhere within `.pf-v6-c-inline-edit`. It is visible by default and hidden when inline edit becomes **editable**.
 
 ### Inline edit value
 
@@ -428,13 +428,19 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
     id="inline-edit-table-row-example"
   >
     <caption class="pf-v6-c-table__caption">This is the table caption</caption>
+
     <thead class="pf-v6-c-table__thead">
       <tr class="pf-v6-c-table__tr" role="row">
         <th class="pf-v6-c-table__th" role="columnheader">Text input</th>
+
         <th class="pf-v6-c-table__th" role="columnheader">Disabled text input</th>
+
         <th class="pf-v6-c-table__th" role="columnheader">Checkboxes</th>
+
         <th class="pf-v6-c-table__th" role="columnheader">Radios</th>
+
         <th class="pf-v6-c-table__th" role="columnheader">Number</th>
+
         <td class="pf-v6-c-table__td"></td>
 
         <td class="pf-v6-c-table__td"></td>
@@ -460,6 +466,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             </span>
           </div>
         </th>
+
         <td
           class="pf-v6-c-table__td"
           role="cell"
@@ -568,7 +575,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           </div>
         </td>
         <td
-          class="pf-v6-c-table__td pf-v5-c-table__inline-edit-action"
+          class="pf-v6-c-table__td pf-v6-c-table__inline-edit-action"
           role="cell"
         >
           <div
@@ -605,64 +612,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             </button>
           </div>
         </td>
+
         <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
-          <div class="pf-v6-c-dropdown">
-            <button
-              class="pf-v6-c-dropdown__toggle pf-m-plain"
-              id="inline-edit-table-row-example-row-1--dropdown-kebab-button"
-              aria-expanded="false"
-              type="button"
-              aria-label="Actions"
-            >
+          <button
+            class="pf-v6-c-menu-toggle pf-m-plain"
+            type="button"
+            aria-expanded="false"
+            aria-label="Table actions"
+          >
+            <span class="pf-v6-c-menu-toggle__icon">
               <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-            </button>
-            <ul
-              class="pf-v6-c-dropdown__menu pf-m-align-right"
-              aria-labelledby="inline-edit-table-row-example-row-1--dropdown-kebab-button"
-              hidden
-              role="menu"
-            >
-              <li role="none">
-                <a
-                  class="pf-v6-c-dropdown__menu-item"
-                  role="menuitem"
-                  href="#"
-                >Link</a>
-              </li>
-              <li role="none">
-                <button
-                  class="pf-v6-c-dropdown__menu-item"
-                  role="menuitem"
-                  type="button"
-                >Action</button>
-              </li>
-              <li role="none">
-                <a
-                  class="pf-v6-c-dropdown__menu-item pf-m-disabled"
-                  role="menuitem"
-                  href="#"
-                  aria-disabled="true"
-                  tabindex="-1"
-                >Disabled link</a>
-              </li>
-              <li role="none">
-                <button
-                  class="pf-v6-c-dropdown__menu-item"
-                  role="menuitem"
-                  type="button"
-                  disabled
-                >Disabled action</button>
-              </li>
-              <li class="pf-v6-c-divider" role="separator"></li>
-              <li role="none">
-                <a
-                  class="pf-v6-c-dropdown__menu-item"
-                  role="menuitem"
-                  href="#"
-                >Separated link</a>
-              </li>
-            </ul>
-          </div>
+            </span>
+          </button>
         </td>
       </tr>
 
@@ -684,6 +645,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             </span>
           </div>
         </th>
+
         <td
           class="pf-v6-c-table__td"
           role="cell"
@@ -792,7 +754,7 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
           </div>
         </td>
         <td
-          class="pf-v6-c-table__td pf-v5-c-table__inline-edit-action"
+          class="pf-v6-c-table__td pf-v6-c-table__inline-edit-action"
           role="cell"
         >
           <div
@@ -829,64 +791,18 @@ Inline edit **action-group** contains save and cancel actions and is only visibl
             </button>
           </div>
         </td>
+
         <td class="pf-v6-c-table__td pf-v6-c-table__action" role="cell">
-          <div class="pf-v6-c-dropdown">
-            <button
-              class="pf-v6-c-dropdown__toggle pf-m-plain"
-              id="inline-edit-table-row-example-row-2--dropdown-kebab-button"
-              aria-expanded="false"
-              type="button"
-              aria-label="Actions"
-            >
+          <button
+            class="pf-v6-c-menu-toggle pf-m-plain"
+            type="button"
+            aria-expanded="false"
+            aria-label="Table actions"
+          >
+            <span class="pf-v6-c-menu-toggle__icon">
               <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-            </button>
-            <ul
-              class="pf-v6-c-dropdown__menu pf-m-align-right"
-              aria-labelledby="inline-edit-table-row-example-row-2--dropdown-kebab-button"
-              hidden
-              role="menu"
-            >
-              <li role="none">
-                <a
-                  class="pf-v6-c-dropdown__menu-item"
-                  role="menuitem"
-                  href="#"
-                >Link</a>
-              </li>
-              <li role="none">
-                <button
-                  class="pf-v6-c-dropdown__menu-item"
-                  role="menuitem"
-                  type="button"
-                >Action</button>
-              </li>
-              <li role="none">
-                <a
-                  class="pf-v6-c-dropdown__menu-item pf-m-disabled"
-                  role="menuitem"
-                  href="#"
-                  aria-disabled="true"
-                  tabindex="-1"
-                >Disabled link</a>
-              </li>
-              <li role="none">
-                <button
-                  class="pf-v6-c-dropdown__menu-item"
-                  role="menuitem"
-                  type="button"
-                  disabled
-                >Disabled action</button>
-              </li>
-              <li class="pf-v6-c-divider" role="separator"></li>
-              <li role="none">
-                <a
-                  class="pf-v6-c-dropdown__menu-item"
-                  role="menuitem"
-                  href="#"
-                >Separated link</a>
-              </li>
-            </ul>
-          </div>
+            </span>
+          </button>
         </td>
       </tr>
     </tbody>
@@ -904,31 +820,31 @@ All accessibility requirements for inputs apply to elements within inline edit.
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
 | `id` | `[labelling element]` | Provides a reference for toggle button and/or editable content. |
-| `aria-label="descriptive text"` | `.pf-v5-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
-| `aria-labelledby="[labelling element] [toggle button id]"` | `.pf-v5-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
+| `aria-label="descriptive text"` | `.pf-v6-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
+| `aria-labelledby="[labelling element] [toggle button id]"` | `.pf-v6-c-inline-edit__toggle > button` | Provides an accessible description for toggle button. **Required** |
 | `aria-label="descriptive text"` | `[radio button group]` | Provides an accessible description for radio groups. **Required** |
-| `contenteditable="true"` | `.pf-v5-c-inline-edit__editable-text` | Ensures the text node is editable. |
-| `role="textbox"` | `.pf-v5-c-inline-edit__editable-text` | Identifies an element that allows the input of free-form text. |
+| `contenteditable="true"` | `.pf-v6-c-inline-edit__editable-text` | Ensures the text node is editable. |
+| `role="textbox"` | `.pf-v6-c-inline-edit__editable-text` | Identifies an element that allows the input of free-form text. |
 | `role="radiogroup"` | `[radio button group]` | Provides an accessible role for radio buttons groups. **Required** |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-inline-edit` | `<form>`, `<div>` | Initiates the inline edit component. **Required** |
-| `.pf-v5-c-inline-edit__value` | `*` | Initiates an inline edit value. **Required** |
-| `.pf-v5-c-inline-edit__input` | `*` | Initiates an inline edit input. **Required** |
-| `.pf-v5-c-inline-edit__editable-text` | `*` | Initiates an inline editable text element. |
-| `.pf-v5-c-inline-edit__label` | `*` | Initiates an inline edit label. |
-| `.pf-v5-c-inline-edit__action` | `*` | Initiates an inline edit action (visible when inline edit region is active). **Required** |
-| `.pf-m-inline-editable` | `.pf-v5-c-inline-edit`, `.pf-v5-c-inline-edit [block level element]` | Modifies an inline edit region for editable state. |
-| `.pf-m-action-group` | `.pf-v5-c-inline-edit__group` | Modifies group for action group. |
-| `.pf-m-icon-group` | `.pf-v5-c-inline-edit__group` | Modifies an action group item spacing. |
-| `.pf-m-column` | `.pf-v5-c-inline-edit__group` | Modifies an action group flex direction. |
-| `.pf-m-footer` | `.pf-v5-c-inline-edit__group` | Modifies an inline edit group margin-top. |
-| `.pf-m-bold` | `.pf-v5-c-inline-edit__label` | Modifies an inline edit label's `font-weight`. |
-| `.pf-m-valid` | `.pf-v5-c-inline-edit__action` | Modifies the action button state. |
-| `.pf-m-enable-editable` | `.pf-v5-c-inline-edit__action` | Exposes an inline edit action by default. |
+| `.pf-v6-c-inline-edit` | `<form>`, `<div>` | Initiates the inline edit component. **Required** |
+| `.pf-v6-c-inline-edit__value` | `*` | Initiates an inline edit value. **Required** |
+| `.pf-v6-c-inline-edit__input` | `*` | Initiates an inline edit input. **Required** |
+| `.pf-v6-c-inline-edit__editable-text` | `*` | Initiates an inline editable text element. |
+| `.pf-v6-c-inline-edit__label` | `*` | Initiates an inline edit label. |
+| `.pf-v6-c-inline-edit__action` | `*` | Initiates an inline edit action (visible when inline edit region is active). **Required** |
+| `.pf-m-inline-editable` | `.pf-v6-c-inline-edit`, `.pf-v6-c-inline-edit [block level element]` | Modifies an inline edit region for editable state. |
+| `.pf-m-action-group` | `.pf-v6-c-inline-edit__group` | Modifies group for action group. |
+| `.pf-m-icon-group` | `.pf-v6-c-inline-edit__group` | Modifies an action group item spacing. |
+| `.pf-m-column` | `.pf-v6-c-inline-edit__group` | Modifies an action group flex direction. |
+| `.pf-m-footer` | `.pf-v6-c-inline-edit__group` | Modifies an inline edit group margin-top. |
+| `.pf-m-bold` | `.pf-v6-c-inline-edit__label` | Modifies an inline edit label's `font-weight`. |
+| `.pf-m-valid` | `.pf-v6-c-inline-edit__action` | Modifies the action button state. |
+| `.pf-m-enable-editable` | `.pf-v6-c-inline-edit__action` | Exposes an inline edit action by default. |
 
 ```
 -->

package/docs/components/InputGroup/examples/InputGroup.md

@@ -1,7 +1,7 @@
 ---
 id: Input group
 section: components
-cssPrefix: pf-v5-c-input-group
+cssPrefix: pf-v6-c-input-group
 ---### Overview
 
 Use the input group to extend form controls by adding text, buttons, selects, etc. The input group handles border overlap.
@@ -287,20 +287,20 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 
 ### Accessibility
 
-When using the `.pf-v5-c-input-group` always ensure labels are used outside the input group with the `.pf-v5-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
+When using the `.pf-v6-c-input-group` always ensure labels are used outside the input group with the `.pf-v6-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-describedby` | `.pf-v5-c-form-control` |  When using `.pf-v5-c-input-group__text` or `.pf-v5-c-input-group__action` make use of this on the input field. |
+| `aria-describedby` | `.pf-v6-c-form-control` |  When using `.pf-v6-c-input-group__text` or `.pf-v6-c-input-group__action` make use of this on the input field. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-input-group` | `<div>` |  Initiates the input group. **Required** |
-| `.pf-v5-c-input-group__item` | `<div>` |  Initiates the input group item. |
-| `.pf-v5-c-input-group__text` | `<span>` |  Initiates input group text. This should be used within `.pf-v5-c-input-group__item` to contain text. |
-| `.pf-m-plain` | `.pf-v5-c-input-group__item` | Removes the border from the input group element. |
-| `.pf-m-box` | `.pf-v5-c-input-group__item` | Adds appropriate styling for items that are not form controls. |
-| `.pf-m-fill` | `.pf-v5-c-input-group__item` | Allows the input group element to stretch to fill available space. |
-| `.pf-m-disabled` | `.pf-v5-c-input-group__item` | Adds disabled styling to match a disabled input within the input group. |
+| `.pf-v6-c-input-group` | `<div>` |  Initiates the input group. **Required** |
+| `.pf-v6-c-input-group__item` | `<div>` |  Initiates the input group item. |
+| `.pf-v6-c-input-group__text` | `<span>` |  Initiates input group text. This should be used within `.pf-v6-c-input-group__item` to contain text. |
+| `.pf-m-plain` | `.pf-v6-c-input-group__item` | Removes the border from the input group element. |
+| `.pf-m-box` | `.pf-v6-c-input-group__item` | Adds appropriate styling for items that are not form controls. |
+| `.pf-m-fill` | `.pf-v6-c-input-group__item` | Allows the input group element to stretch to fill available space. |
+| `.pf-m-disabled` | `.pf-v6-c-input-group__item` | Adds disabled styling to match a disabled input within the input group. |

package/docs/components/JumpLinks/examples/JumpLinks.md

@@ -1,7 +1,7 @@
 ---
 id: Jump links
 section: components
-cssPrefix: pf-v5-c-jump-links
+cssPrefix: pf-v6-c-jump-links
 ---## Examples
 
 ### Horizontal default
@@ -616,26 +616,26 @@ cssPrefix: pf-v5-c-jump-links
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `aria-label` | `.pf-v5-c-jump-links` | Provides an accessible name for the jump links. |
+| `aria-label` | `.pf-v6-c-jump-links` | Provides an accessible name for the jump links. |
 
 ### Usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-jump-links` | `<div>` | Initiates the jump links container. |
-| `.pf-v5-c-jump-links__header` | `<div>` | Initiates the jump links header. |
-| `.pf-v5-c-jump-links__toggle` | `<div>` | Initiates the jump links expandable toggle. |
-| `.pf-v5-c-jump-links__toggle-text` | `<span>` | Initiates the jump links expandable toggle text. |
-| `.pf-v5-c-jump-links__toggle-icon` | `<span>` | Initiates the jump links expandable toggle icon. |
-| `.pf-v5-c-jump-links__label` | `<div>` | Initiates the jump links label. |
-| `.pf-v5-c-jump-links__main` | `<div>` | Initiates the jump links main container for when a label and list is used in the horizontal variation. |
-| `.pf-v5-c-jump-links__list` | `<ul>` | Initiates the jump links list. |
-| `.pf-v5-c-jump-links__item` | `<li>` | Initiates the jump links list item. |
-| `.pf-v5-c-jump-links__link` | `<button>` | Initiates the jump links link. |
-| `.pf-v5-c-jump-links__link-text` | `<div>` | Initiates the jump links link text. |
-| `.pf-m-vertical` | `.pf-v5-c-jump-links` | Modifies the jump links component to be vertical. |
-| `.pf-m-center` | `.pf-v5-c-jump-links` | Modifies the jump links component to center its list and label. |
-| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-v5-c-jump-links` | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical jump links only. |
-| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v5-c-jump-links` | Modifies the jump links component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
-| `.pf-m-expanded` | `.pf-v5-c-jump-links` | Modifies the expandable jump links component for the expanded state. |
-| `.pf-m-current` | `.pf-v5-c-jump-links__item`| Modifies the jump links item to be current. |
+| `.pf-v6-c-jump-links` | `<div>` | Initiates the jump links container. |
+| `.pf-v6-c-jump-links__header` | `<div>` | Initiates the jump links header. |
+| `.pf-v6-c-jump-links__toggle` | `<div>` | Initiates the jump links expandable toggle. |
+| `.pf-v6-c-jump-links__toggle-text` | `<span>` | Initiates the jump links expandable toggle text. |
+| `.pf-v6-c-jump-links__toggle-icon` | `<span>` | Initiates the jump links expandable toggle icon. |
+| `.pf-v6-c-jump-links__label` | `<div>` | Initiates the jump links label. |
+| `.pf-v6-c-jump-links__main` | `<div>` | Initiates the jump links main container for when a label and list is used in the horizontal variation. |
+| `.pf-v6-c-jump-links__list` | `<ul>` | Initiates the jump links list. |
+| `.pf-v6-c-jump-links__item` | `<li>` | Initiates the jump links list item. |
+| `.pf-v6-c-jump-links__link` | `<button>` | Initiates the jump links link. |
+| `.pf-v6-c-jump-links__link-text` | `<div>` | Initiates the jump links link text. |
+| `.pf-m-vertical` | `.pf-v6-c-jump-links` | Modifies the jump links component to be vertical. |
+| `.pf-m-center` | `.pf-v6-c-jump-links` | Modifies the jump links component to center its list and label. |
+| `.pf-m-expandable{-on-[breakpoint]}` | `.pf-v6-c-jump-links` | Modifies the jump links component to be expandable via a toggle at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). **Note:** works with vertical jump links only. |
+| `.pf-m-non-expandable{-on-[breakpoint]}` | `.pf-v6-c-jump-links` | Modifies the jump links component to be non-expandable at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
+| `.pf-m-expanded` | `.pf-v6-c-jump-links` | Modifies the expandable jump links component for the expanded state. |
+| `.pf-m-current` | `.pf-v6-c-jump-links__item`| Modifies the jump links item to be current. |

package/docs/components/Label/examples/Label.css

@@ -5,9 +5,9 @@
   margin: -4px;
 }
 
-#ws-core-c-label-filled .pf-v5-c-label,
-#ws-core-c-label-outline .pf-v5-c-label,
-#ws-core-c-label-compact .pf-v5-c-label,
-#ws-core-c-label-overflow .pf-v5-c-label {
+#ws-core-c-label-filled .pf-v6-c-label,
+#ws-core-c-label-outline .pf-v6-c-label,
+#ws-core-c-label-compact .pf-v6-c-label,
+#ws-core-c-label-overflow .pf-v6-c-label {
   margin: 4px;
 }

package/docs/components/Label/examples/Label.md

@@ -1,7 +1,7 @@
 ---
 id: Label
 section: components
-cssPrefix: ['pf-v5-c-label','pf-v5-c-label-group']
+cssPrefix: ['pf-v6-c-label','pf-v6-c-label-group']
 ---import './Label.css'
 
 ## Examples
@@ -5046,7 +5046,7 @@ The contents of a label group can be modified by removing labels or adding new o
 
 In addition to the JavaScript management of [editable labels](/components/label#editable), dynamic label groups also need:
 
-* `.pf-v5-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v5-c-label-group__textarea`
+* `.pf-v6-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v6-c-label-group__textarea`
 
 ### Editable labels, dynamic label group
 
@@ -5621,56 +5621,56 @@ In addition to the JavaScript management of [editable labels](/components/label#
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-label` | `<span>`, `<button>` | Initiates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Use a `<button>` if the label is an overflow label used in the label group. **Required. Note: always use with either `.pf-m-filled` or `.pf-m-outline`.** |
-| `.pf-v5-c-label__content` | `<span>`, `<a>`, `<button>` | Creates a content wrapper. Use as an `<a>` element if the label serves as a link. Use a `<button>` if the label serves as an action. **Required** |
-| `.pf-v5-c-label__icon` | `<span>` | Initiates a label icon. |
-| `.pf-v5-c-label__text` | `<span>` | Initiates label text. **Required** |
-| `.pf-v5-c-label__editable-text` | `<button>`, `<input>` | Initiates editable label text. See the [editable](#editable) example for details about handling behavior in Javascript.|
-| `.pf-v5-c-label__actions` | `<span>` | Creates a wrapper for label actions. **Required for removable labels** |
-| `.pf-m-filled` | `.pf-v5-c-label` | Modifies label for filled styles. |
-| `.pf-m-outline` | `.pf-v5-c-label` | Modifies label for outline styles. |
-| `.pf-m-compact` | `.pf-v5-c-label` | Modifies label for compact styles. |
-| `.pf-m-overflow` | `.pf-v5-c-label` | Modifies label for overflow styles for use in a label group. |
-| `.pf-m-add` | `.pf-v5-c-label` | Modifies label for add styles for use in a label group. |
-| `.pf-m-blue` | `.pf-v5-c-label` | Modifies the label to have blue colored styling. |
-| `.pf-m-green` | `.pf-v5-c-label` | Modifies the label to have green colored styling. |
-| `.pf-m-orange` | `.pf-v5-c-label` | Modifies the label to have orange colored styling. |
-| `.pf-m-red` | `.pf-v5-c-label` | Modifies the label to have red colored styling. |
-| `.pf-m-purple` | `.pf-v5-c-label` | Modifies the label to have purple colored styling. |
-| `.pf-m-cyan` | `.pf-v5-c-label` | Modifies the label to have cyan colored styling. |
-| `.pf-m-gold` | `.pf-v5-c-label` | Modifies the label to have gold colored styling. |
-| `.pf-m-success` | `.pf-v5-c-label` | Modifies the label to have success colored styling. |
-| `.pf-m-warning` | `.pf-v5-c-label` | Modifies the label to have warning colored styling. |
-| `.pf-m-danger` | `.pf-v5-c-label` | Modifies the label to have danger colored styling. |
-| `.pf-m-info` | `.pf-v5-c-label` | Modifies the label to have info colored styling. |
-| `.pf-m-custom` | `.pf-v5-c-label` | Modifies the label to have custom colored styling. |
-| `.pf-m-editable` | `.pf-v5-c-label` | Modifies label for editable styles. |
-| `.pf-m-editable-active` | `.pf-v5-c-label.pf-m-editable` | Modifies editable label for active styles. |
-| `--pf-v5-c-label__text--MaxWidth` | `.pf-v5-c-label` | Modifiex the max width of the text before text will truncate. |
+| `.pf-v6-c-label` | `<span>`, `<button>` | Initiates a label. Without a color modifier, the label's default style is grey. Use a color modifier to change the label color. Use a `<button>` if the label is an overflow label used in the label group. **Required. Note: always use with either `.pf-m-filled` or `.pf-m-outline`.** |
+| `.pf-v6-c-label__content` | `<span>`, `<a>`, `<button>` | Creates a content wrapper. Use as an `<a>` element if the label serves as a link. Use a `<button>` if the label serves as an action. **Required** |
+| `.pf-v6-c-label__icon` | `<span>` | Initiates a label icon. |
+| `.pf-v6-c-label__text` | `<span>` | Initiates label text. **Required** |
+| `.pf-v6-c-label__editable-text` | `<button>`, `<input>` | Initiates editable label text. See the [editable](#editable) example for details about handling behavior in Javascript.|
+| `.pf-v6-c-label__actions` | `<span>` | Creates a wrapper for label actions. **Required for removable labels** |
+| `.pf-m-filled` | `.pf-v6-c-label` | Modifies label for filled styles. |
+| `.pf-m-outline` | `.pf-v6-c-label` | Modifies label for outline styles. |
+| `.pf-m-compact` | `.pf-v6-c-label` | Modifies label for compact styles. |
+| `.pf-m-overflow` | `.pf-v6-c-label` | Modifies label for overflow styles for use in a label group. |
+| `.pf-m-add` | `.pf-v6-c-label` | Modifies label for add styles for use in a label group. |
+| `.pf-m-blue` | `.pf-v6-c-label` | Modifies the label to have blue colored styling. |
+| `.pf-m-green` | `.pf-v6-c-label` | Modifies the label to have green colored styling. |
+| `.pf-m-orange` | `.pf-v6-c-label` | Modifies the label to have orange colored styling. |
+| `.pf-m-red` | `.pf-v6-c-label` | Modifies the label to have red colored styling. |
+| `.pf-m-purple` | `.pf-v6-c-label` | Modifies the label to have purple colored styling. |
+| `.pf-m-cyan` | `.pf-v6-c-label` | Modifies the label to have cyan colored styling. |
+| `.pf-m-gold` | `.pf-v6-c-label` | Modifies the label to have gold colored styling. |
+| `.pf-m-success` | `.pf-v6-c-label` | Modifies the label to have success colored styling. |
+| `.pf-m-warning` | `.pf-v6-c-label` | Modifies the label to have warning colored styling. |
+| `.pf-m-danger` | `.pf-v6-c-label` | Modifies the label to have danger colored styling. |
+| `.pf-m-info` | `.pf-v6-c-label` | Modifies the label to have info colored styling. |
+| `.pf-m-custom` | `.pf-v6-c-label` | Modifies the label to have custom colored styling. |
+| `.pf-m-editable` | `.pf-v6-c-label` | Modifies label for editable styles. |
+| `.pf-m-editable-active` | `.pf-v6-c-label.pf-m-editable` | Modifies editable label for active styles. |
+| `--pf-v6-c-label__text--MaxWidth` | `.pf-v6-c-label` | Modifiex the max width of the text before text will truncate. |
 
 ### Label group accessibility
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |
-| `role="list"` | `.pf-v5-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v5-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
-| `aria-label="[button label text]"` | `.pf-v5-c-label-group__close > button` |  Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
-| `aria-labelledby="[id value of .pf-v5-c-label-group__close > button] [id value of .pf-v5-c-label-group__label]"` | `.pf-v5-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
-| `aria-label="[label text]"` | `.pf-v5-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |
-| `row="1"` | `.pf-v5-c-label-group__textarea` | Indicates that the label group textarea is one row. **Required** |
-| `tabindex="0"` | `.pf-v5-c-label-group__textarea` | Inserts the label group textarea into the tab order of the page so that it is focusable. **Required** |
+| `role="list"` | `.pf-v6-c-label-group__list` | Indicates that the label group list is a list element. This role is redundant since `.pf-v6-c-label-group__list` is a `<ul>` but is required for screen readers to announce the list properly. **Required** |
+| `aria-label="[button label text]"` | `.pf-v6-c-label-group__close > button` |  Provides an accessible name for a label group close button when an icon is used instead of text. Required when an icon is used with no supporting text. **Required** |
+| `aria-labelledby="[id value of .pf-v6-c-label-group__close > button] [id value of .pf-v6-c-label-group__label]"` | `.pf-v6-c-label-group__close > button` | Provides an accessible name for the button. **Required** |
+| `aria-label="[label text]"` | `.pf-v6-c-label-group__textarea` | Provides an accessible name for the textarea. **Required** |
+| `row="1"` | `.pf-v6-c-label-group__textarea` | Indicates that the label group textarea is one row. **Required** |
+| `tabindex="0"` | `.pf-v6-c-label-group__textarea` | Inserts the label group textarea into the tab order of the page so that it is focusable. **Required** |
 
 ### Label group usage
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-label-group` | `<div>` | Initiates the label group component. **Required.** |
-| `.pf-v5-c-label-group__list` | `<ul>` | Initiates the container for a list of labels. **Required.** |
-| `.pf-v5-c-label-group__list-item` | `<li>` | Initiates the list item inside of the label group. **Required.** |
-| `.pf-v5-c-label-group__main` | `<div>` | Initiates the main element in the label group. **Required when label and list are present** |
-| `.pf-v5-c-label-group__textarea` | `<textarea>` | Initiates the textarea element in the label group. **Required when label group is editable** |
-| `.pf-v5-c-label-group__label` | `<span>` | Initiates the label to be used in the label group. |
-| `.pf-v5-c-label-group__close` | `<div>` | Initiates the container used for the button to remove the label group. |
-| `.pf-v5-c-button` | `.pf-v5-c-label-group__close <button>` | Initiates the button used to remove the label group. |
-| `.pf-m-editable` | `.pf-v5-c-label-group` | Modifies the label group to support editable styling. |
-| `.pf-m-category` | `.pf-v5-c-label-group` | Modifies the label group to support category styling. |
-| `.pf-m-textarea` | `.pf-v5-c-label-group__list-item` | Modifies the label group list item to support textarea. |
+| `.pf-v6-c-label-group` | `<div>` | Initiates the label group component. **Required.** |
+| `.pf-v6-c-label-group__list` | `<ul>` | Initiates the container for a list of labels. **Required.** |
+| `.pf-v6-c-label-group__list-item` | `<li>` | Initiates the list item inside of the label group. **Required.** |
+| `.pf-v6-c-label-group__main` | `<div>` | Initiates the main element in the label group. **Required when label and list are present** |
+| `.pf-v6-c-label-group__textarea` | `<textarea>` | Initiates the textarea element in the label group. **Required when label group is editable** |
+| `.pf-v6-c-label-group__label` | `<span>` | Initiates the label to be used in the label group. |
+| `.pf-v6-c-label-group__close` | `<div>` | Initiates the container used for the button to remove the label group. |
+| `.pf-v6-c-button` | `.pf-v6-c-label-group__close <button>` | Initiates the button used to remove the label group. |
+| `.pf-m-editable` | `.pf-v6-c-label-group` | Modifies the label group to support editable styling. |
+| `.pf-m-category` | `.pf-v6-c-label-group` | Modifies the label group to support category styling. |
+| `.pf-m-textarea` | `.pf-v6-c-label-group__list-item` | Modifies the label group list item to support textarea. |

package/docs/components/List/examples/List.md

@@ -1,7 +1,7 @@
 ---
 id: List
 section: components
-cssPrefix: pf-v5-c-list
+cssPrefix: pf-v6-c-list
 ---## Examples
 
 ### Unordered
@@ -165,8 +165,8 @@ Non-inline lists can be nested up to any level.
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v5-c-list` | `<ul>, <ol>` | Initiates a list. **Required**  |
-| `.pf-m-inline` | `.pf-v5-c-list` | Displays list items inline. |
-| `.pf-m-plain` | `.pf-v5-c-list` |  Removes the list marker and base indentation. |
-| `.pf-m-bordered` | `.pf-v5-c-list` | Add horizontal divider between items in a list. |
-| `.pf-m-icon-lg` | `.pf-v5-c-list` | Show all the icons or logos in the list large. |
+| `.pf-v6-c-list` | `<ul>, <ol>` | Initiates a list. **Required**  |
+| `.pf-m-inline` | `.pf-v6-c-list` | Displays list items inline. |
+| `.pf-m-plain` | `.pf-v6-c-list` |  Removes the list marker and base indentation. |
+| `.pf-m-bordered` | `.pf-v6-c-list` | Add horizontal divider between items in a list. |
+| `.pf-m-icon-lg` | `.pf-v6-c-list` | Show all the icons or logos in the list large. |

package/docs/components/LogViewer/examples/LogViewer.css

@@ -2,7 +2,7 @@
   position: relative;
 }
 
-#ws-core-e-log-viewer-with-popover-open .pf-v5-c-popover {
+#ws-core-e-log-viewer-with-popover-open .pf-v6-c-popover {
   display: none;
   position: absolute;
   z-index: 9999;
@@ -11,7 +11,7 @@
 }
 
 @media screen and (min-width: 992px) {
-  #ws-core-e-log-viewer-with-popover-open .pf-v5-c-popover {
+  #ws-core-e-log-viewer-with-popover-open .pf-v6-c-popover {
     display: block;
   }
 }