@patternfly/patternfly 6.0.0-alpha.33 → 6.0.0-alpha.38

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

@@ -139,6 +139,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-action-example-1-check"
           name="card-action-example-1-check"
           aria-labelledby="card-action-example-1"
@@ -221,6 +222,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-action-example-2-check"
           name="card-action-example-2-check"
           aria-labelledby="card-action-example-2"
@@ -305,6 +307,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-action-example-3-check"
           name="card-action-example-3-check"
           aria-labelledby="card-action-example-3"
@@ -508,7 +511,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -516,7 +519,6 @@ cssPrefix: pf-v5-c-card
               name="card-selectable-example-check"
               aria-labelledby="card-selectable-example"
             />
-
             <label
               class="pf-v5-c-check__label"
               for="card-selectable-example-check"
@@ -543,7 +545,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -552,7 +554,6 @@ cssPrefix: pf-v5-c-card
               name="card-selectable-example-disabled-check"
               aria-labelledby="card-selectable-example-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
               for="card-selectable-example-disabled-check"
@@ -582,7 +583,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -592,7 +593,6 @@ cssPrefix: pf-v5-c-card
               name="card-selectable-example-selected-disabled-check"
               aria-labelledby="card-selectable-example-selected-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
               for="card-selectable-example-selected-disabled-check"
@@ -626,7 +626,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-radio pf-m-standalone">
+          <div class="pf-v5-c-radio">
             <input
               class="pf-v5-c-radio__input"
               type="radio"
@@ -634,7 +634,6 @@ cssPrefix: pf-v5-c-card
               name="card-single-selectable-example-radio"
               aria-labelledby="card-single-selectable-example"
             />
-
             <label
               class="pf-v5-c-radio__label"
               for="card-single-selectable-example-radio"
@@ -664,7 +663,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-radio pf-m-standalone">
+          <div class="pf-v5-c-radio">
             <input
               class="pf-v5-c-radio__input"
               type="radio"
@@ -673,7 +672,6 @@ cssPrefix: pf-v5-c-card
               aria-labelledby="card-single-selectable-example-disabled"
               disabled
             />
-
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
               for="card-single-selectable-example-disabled-radio"
@@ -703,7 +701,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-radio pf-m-standalone">
+          <div class="pf-v5-c-radio">
             <input
               class="pf-v5-c-radio__input"
               type="radio"
@@ -713,7 +711,6 @@ cssPrefix: pf-v5-c-card
               disabled
               checked
             />
-
             <label
               class="pf-v5-c-radio__label pf-m-disabled"
               for="card-single-selectable-example-selected-disabled-radio"
@@ -867,7 +864,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -875,7 +872,6 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-example-check"
               aria-labelledby="card-clickable-selectable-example"
             />
-
             <label
               class="pf-v5-c-check__label"
               for="card-clickable-selectable-example-check"
@@ -908,7 +904,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -916,7 +912,6 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-current-example-check"
               aria-labelledby="card-clickable-selectable-current-example"
             />
-
             <label
               class="pf-v5-c-check__label"
               for="card-clickable-selectable-current-example-check"
@@ -949,7 +944,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -958,7 +953,6 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-example-disabled-check"
               aria-labelledby="card-clickable-selectable-example-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
               for="card-clickable-selectable-example-disabled-check"
@@ -992,7 +986,7 @@ cssPrefix: pf-v5-c-card
     <div class="pf-v5-c-card__header">
       <div class="pf-v5-c-card__actions pf-m-no-offset">
         <div class="pf-v5-c-card__selectable-actions">
-          <div class="pf-v5-c-check pf-m-standalone">
+          <div class="pf-v5-c-check">
             <input
               class="pf-v5-c-check__input"
               type="checkbox"
@@ -1002,7 +996,6 @@ cssPrefix: pf-v5-c-card
               name="card-clickable-selectable-example-selected-disabled-check"
               aria-labelledby="card-clickable-selectable-example-selected-disabled"
             />
-
             <label
               class="pf-v5-c-check__label pf-m-disabled"
               for="card-clickable-selectable-example-selected-disabled-check"
@@ -1233,6 +1226,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-expandable-example-check"
           name="card-expandable-example-check"
           aria-labelledby="card-expandable-example"
@@ -1335,6 +1329,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-expandable-image-example-check"
           name="card-expandable-image-example-check"
           aria-labelledby="card-expandable-image-example"
@@ -1422,6 +1417,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-expanded-example-check"
           name="card-expanded-example-check"
           aria-labelledby="card-expanded-example"
@@ -1506,6 +1502,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-full-height-example-check"
           name="card-full-height-example-check"
           aria-labelledby="card-full-height-example"
@@ -1590,6 +1587,7 @@ cssPrefix: pf-v5-c-card
         <input
           class="pf-v5-c-check__input"
           type="checkbox"
+          aria-label="Standalone check"
           id="card-toggle-on-right-example-check"
           name="card-toggle-on-right-example-check"
           aria-labelledby="card-toggle-on-right-example"

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

@@ -47,6 +47,7 @@ cssPrefix: pf-v5-c-check
     type="checkbox"
     id="check-checked-example-input"
     name="check-checked-example-input"
+    checked
   />
   <label
     class="pf-v5-c-check__label"

package/docs/components/CodeBlock/examples/CodeBlock.md

@@ -75,7 +75,7 @@ url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs</co
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo<div
-  class="pf-v5-c-expandable-section pf-m-detached"
+  class="pf-v5-c-expandable-section"
 ><div
   class="pf-v5-c-expandable-section__content"
   hidden
@@ -87,7 +87,7 @@ name: azure-sample-repo<div
 </div>
 </code>
 </pre>
-    <div class="pf-v5-c-expandable-section pf-m-detached">
+    <div class="pf-v5-c-expandable-section">
       <button
         type="button"
         class="pf-v5-c-expandable-section__toggle"
@@ -136,7 +136,7 @@ name: azure-sample-repo<div
 kind: HelmChartRepository
 metadata:
 name: azure-sample-repo<div
-  class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached"
+  class="pf-v5-c-expandable-section pf-m-expanded"
 ><div
   class="pf-v5-c-expandable-section__content"
   id="code-block-expandable-expanded-content"
@@ -147,7 +147,7 @@ name: azure-sample-repo<div
 </div>
 </code>
 </pre>
-    <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached">
+    <div class="pf-v5-c-expandable-section pf-m-expanded">
       <button
         type="button"
         class="pf-v5-c-expandable-section__toggle"

package/docs/components/Content/examples/Content.md

@@ -163,11 +163,11 @@ cssPrefix: pf-v5-c-content
 
 When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use `pf-v5-c-content` as container. It can handle almost any HTML tag:
 
-*   `<p>` paragraphs
-*   `<ul>` `<ol>` `<dl>` lists
-*   `<h1>` to `<h6>` headings
-*   `<blockquote>` quotes
-*   `<em>` and `<strong>`
+* `<p>` paragraphs
+* `<ul>` `<ol>` `<dl>` lists
+* `<h1>` to `<h6>` headings
+* `<blockquote>` quotes
+* `<em>` and `<strong>`
 
 This `pf-v5-c-content` class can be used in any context where you just want to (or can only) write some text.
 

package/docs/components/EmptyState/examples/EmptyState.md

@@ -46,6 +46,9 @@ cssPrefix: pf-v5-c-empty-state
 <div class="pf-v5-c-empty-state pf-m-xs">
   <div class="pf-v5-c-empty-state__content">
     <div class="pf-v5-c-empty-state__header">
+      <div class="pf-v5-c-empty-state__icon">
+        <i class="fas fa-cubes" aria-hidden="true"></i>
+      </div>
       <div class="pf-v5-c-empty-state__title">
         <h1 class="pf-v5-c-empty-state__title-text">Empty state</h1>
       </div>
@@ -53,7 +56,7 @@ cssPrefix: pf-v5-c-empty-state
 
     <div
       class="pf-v5-c-empty-state__body"
-    >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
+    >This represents an the empty state pattern in PatternFly. The icon is optional.</div>
 
     <div class="pf-v5-c-empty-state__footer">
       <div class="pf-v5-c-empty-state__actions">
@@ -190,6 +193,42 @@ cssPrefix: pf-v5-c-empty-state
 
 ```
 
+### With status
+
+```html
+<div class="pf-v5-c-empty-state pf-m-success">
+  <div class="pf-v5-c-empty-state__content">
+    <div class="pf-v5-c-empty-state__header">
+      <div class="pf-v5-c-empty-state__icon">
+        <i class="fas fa- fa-check-circle" aria-hidden="true"></i>
+      </div>
+      <div class="pf-v5-c-empty-state__title">
+        <h1 class="pf-v5-c-empty-state__title-text">You're all set</h1>
+      </div>
+    </div>
+
+    <div
+      class="pf-v5-c-empty-state__body"
+    >This represents an the empty state pattern in PatternFly. Hopefully it's simple enough to use but flexible enough to meet a variety of needs.</div>
+
+    <div class="pf-v5-c-empty-state__footer">
+      <div class="pf-v5-c-empty-state__actions">
+        <button class="pf-v5-c-button pf-m-primary" type="button">Primary action</button>
+      </div>
+      <div class="pf-v5-c-empty-state__actions">
+        <button class="pf-v5-c-button pf-m-link" type="button">Multiple</button>
+        <button class="pf-v5-c-button pf-m-link" type="button">Action buttons</button>
+        <button class="pf-v5-c-button pf-m-link" type="button">Can</button>
+        <button class="pf-v5-c-button pf-m-link" type="button">Go here</button>
+        <button class="pf-v5-c-button pf-m-link" type="button">In the second</button>
+        <button class="pf-v5-c-button pf-m-link" type="button">Action area</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Accessibility
@@ -216,3 +255,8 @@ cssPrefix: pf-v5-c-empty-state
 | `.pf-m-lg` | `.pf-v5-c-empty-state` | Modifies the empty state for a large max-width. |
 | `.pf-m-xl` | `.pf-v5-c-empty-state` | Modifies the empty state for an extra large variation and max-width. |
 | `.pf-m-full-height` | `.pf-v5-c-empty-state` | Modifies the empty state to be `height: 100%`. If you need the empty state content to be centered vertically, you can use this modifier to make the empty state fill the height of its container, and center `.pf-v5-c-empty-state__content`. **Note:** this modifier requires the parent of `.pf-v5-c-empty-state` have an implicit or explicit `height` defined.  |
+| `.pf-m-danger` | `.pf-v5-c-empty-state` | Modifies the empty state for danger status. |
+| `.pf-m-warning` | `.pf-v5-c-empty-state` | Modifies the empty state for warning status. |
+| `.pf-m-success` | `.pf-v5-c-empty-state` | Modifies the empty state for success status. |
+| `.pf-m-info` | `.pf-v5-c-empty-state` | Modifies the empty state for info status. |
+| `.pf-m-custom` | `.pf-v5-c-empty-state` | Modifies the empty state for custom status. |

package/docs/components/ExpandableSection/examples/ExpandableSection.md

@@ -141,7 +141,7 @@ cssPrefix: pf-v5-c-expandable-section
 ```html
 <div class="pf-v5-l-stack pf-m-gutter">
   <div class="pf-v5-l-stack__item">
-    <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached">
+    <div class="pf-v5-c-expandable-section pf-m-expanded">
       <div
         class="pf-v5-c-expandable-section__content"
         id="detached-toggle-content"
@@ -150,7 +150,7 @@ cssPrefix: pf-v5-c-expandable-section
   </div>
 
   <div class="pf-v5-l-stack__item">
-    <div class="pf-v5-c-expandable-section pf-m-expanded pf-m-detached">
+    <div class="pf-v5-c-expandable-section pf-m-expanded">
       <button
         type="button"
         class="pf-v5-c-expandable-section__toggle"
@@ -228,9 +228,7 @@ cssPrefix: pf-v5-c-expandable-section
 | `.pf-v5-c-expandable-section__content` | `<div>` | Initiates the expandable section content. **Required** |
 | `.pf-m-expanded` | `.pf-v5-c-expandable-section` | Modifies the component for the expanded state. |
 | `.pf-m-display-lg` | `.pf-v5-c-expandable-section` | Modifies the styling of the component to have large display styling. |
-| `.pf-m-detached` | `.pf-v5-c-expandable-section` | Indicates that the expandable section toggle and content are detached from one another, so you can move them around independently in the markup. |
 | `.pf-m-indented` | `.pf-v5-c-expandable-section` | Indicates that the expandable section content is indented and is aligned with the start of the title text to provide visual hierarchy. |
 | `.pf-m-truncate` | `.pf-v5-c-expandable-section` | Indicates that the expandable section content is truncated by default, and not truncated when expanded. |
-| `.pf-m-active` | `.pf-v5-c-expandable-section__toggle` | Forces display of the active state of the toggle. |
 | `.pf-m-expand-top` | `.pf-v5-c-expandable-section__toggle-icon` | Modifies the toggle icon to point up when expanded. |
 | `--pf-v5-c-expandable-section--m-truncate__content--LineClamp` | `.pf-v5-c-expandable-section.pf-m-truncate` | Modifies the number of lines to show before truncating. |

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

@@ -930,4 +930,6 @@ All accessibility requirements for inputs apply to elements within inline edit.
 | `.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. |
 
-    -->
+```
+-->
+```

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

@@ -1949,16 +1949,16 @@ This style of label is used to indicate overflow within a label group.
 
 **Note: Editable label behavior must be handled with JavaScript.**
 
-*   `.pf-v5-c-label__editable-text` onClick event should:
-    *   Set `.pf-m-editable-active` on `.pf-v5-c-label`
-    *   Change `.pf-v5-c-label__editable-text`from a button to an input
-*   Return keypress, when content is editable, should:
-    *   Be captured to prevent line wrapping and save updates to label text
-    *   Remove `.pf-m-editable-active` from `.pf-v5-c-label`
-*   Esc keypress, when content is editable, should:
-    *   Undo any update to label text
-    *   Remove `.pf-m-editable-active` from `.pf-v5-c-label`
-    *   Change `.pf-v5-c-label__editable-text` back to a button
+* `.pf-v5-c-label__editable-text` onClick event should:
+  * Set `.pf-m-editable-active` on `.pf-v5-c-label`
+  * Change `.pf-v5-c-label__editable-text`from a button to an input
+* Return keypress, when content is editable, should:
+  * Be captured to prevent line wrapping and save updates to label text
+  * Remove `.pf-m-editable-active` from `.pf-v5-c-label`
+* Esc keypress, when content is editable, should:
+  * Undo any update to label text
+  * Remove `.pf-m-editable-active` from `.pf-v5-c-label`
+  * Change `.pf-v5-c-label__editable-text` back to a button
 
 ```html isBeta
 <span class="pf-v5-c-label pf-m-editable pf-m-blue">
@@ -2692,7 +2692,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-v5-c-label-group.pf-m-editable` onClick event should (excluding labels within) set focus on `.pf-v5-c-label-group__textarea`
 
 ### Editable labels, dynamic label group
 

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

@@ -1,6 +1,22 @@
-.ws-core-c-navigation:not([id*="tertiary"]):not([id*="light-mode"]) .pf-v5-c-nav {
+#ws-core-c-navigation-default,
+#ws-core-c-navigation-basic,
+#ws-core-c-navigation-grouped,
+#ws-core-c-navigation-grouped-nav,
+#ws-core-c-navigation-grouped-nav-no-titles,
+#ws-core-c-navigation-expanded,
+#ws-core-c-navigation-expanded-with-subnav-titles,
+#ws-core-c-navigation-mixed,
+#ws-core-c-navigation-horizontal,
+#ws-core-c-navigation-horizontal-overflow,
+#ws-core-c-navigation-horizontal-subnav,
+#ws-core-c-navigation-horizontal-subnav-overflow,
+#ws-core-c-navigation-drilldown,
+#ws-core-c-navigation-nav-with-drilldown-menu .pf-v5-c-nav,
+#ws-core-c-navigation-level-2-drilldown,
+#ws-core-c-navigation-level-3-drilldown,
+#ws-core-c-navigation-nav-with-flyout .pf-v5-c-nav,
+#ws-core-c-navigation-grouped-nav-no-titles-no-margin-top {
   padding: 0;
-  background-color: var(--pf-v5-global--BackgroundColor--dark-300);
 }
 
 #ws-core-c-navigation-horizontal-in-masthead,

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

@@ -2614,7 +2614,7 @@ 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-v5-c-nav__list` - default navigation list. It is the basis for both default and expandable, vertical navigation.
 
 ### Accessibility
 

package/docs/components/Radio/examples/Radio.md

@@ -107,7 +107,7 @@ cssPrefix: pf-v5-c-radio
   <label
     class="pf-v5-c-radio__label pf-m-disabled"
     for="radio-disabled-checked-example-input"
-  >Radio disabled</label>
+  >Radio disabled checked</label>
 </div>
 
 ```

package/docs/components/SimpleList/examples/SimpleList.md

@@ -33,21 +33,21 @@ cssPrefix: pf-v5-c-simple-list
   <ul class="pf-v5-c-simple-list__list" role="list">
     <li class="pf-v5-c-simple-list__item">
       <a
-        class="pf-v5-c-simple-list__item-link pf-m-current"
+        class="pf-v5-c-simple-list__item-link pf-m-link pf-m-current"
         href="#"
         tabindex="0"
       >List item 1</a>
     </li>
     <li class="pf-v5-c-simple-list__item">
       <a
-        class="pf-v5-c-simple-list__item-link"
+        class="pf-v5-c-simple-list__item-link pf-m-link"
         href="#"
         tabindex="0"
       >List item 2</a>
     </li>
     <li class="pf-v5-c-simple-list__item">
       <a
-        class="pf-v5-c-simple-list__item-link"
+        class="pf-v5-c-simple-list__item-link pf-m-link"
         href="#"
         tabindex="0"
       >List item 3</a>

package/docs/components/Table/examples/Table.md

@@ -24703,9 +24703,9 @@ Add a [width modifier](#width-modifiers) to `thead th` to limit string length or
 
 There are a few ways this can be handled:
 
-*   Manipulate the `z-index` of the menu and/or table headers/columns manually.
-*   Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
-*   In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index`  than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
+* Manipulate the `z-index` of the menu and/or table headers/columns manually.
+* Use the `menuAppendTo` prop in non-composable react components with menus to append the menu to an element outside of the table (e.g., the `<body>` element) so that the menu has a higher stacking context than - and can appear on top of - sticky headers/columns as well as appear outside of any scrollable content in the table.
+* In the case where the menu is outside of the table (e.g., above the table in a toolbar, or below the table and the menu expands up), assign the entire table a lower `z-index`  than the `z-index` of the menu. This creates a lower stacking context for the entire table compared to the menu, while preserving the stacking context of the elements inside of the table.
 
 ### Sticky header
 
@@ -30824,8 +30824,8 @@ By default, all table header cells are set to `white-space: nowrap`. If a `<th>`
 
 ### Implementation support
 
-*   One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
-*   One checkbox or radio input, positioned in the first or second cell of a non-expandable row.
-*   One action button, positioned in the last cell of a non-expandable row.
-*   Tabular data.
-*   Compact presentation modifier (not compatible with expandable table).
+* One expandable toggle button, positioned in the first cell of a non-expandable row, preceding an expandable row.
+* One checkbox or radio input, positioned in the first or second cell of a non-expandable row.
+* One action button, positioned in the last cell of a non-expandable row.
+* Tabular data.
+* Compact presentation modifier (not compatible with expandable table).

package/docs/components/Truncate/examples/Truncate.css

@@ -4,6 +4,6 @@
   overflow: auto;
   min-width: 161px;
   max-width: 100%;
-  padding: var(--pf-v5-global--spacer--md);
-  border: var(--pf-v5-global--BorderWidth--sm) solid var(--pf-v5-global--BorderColor--100);
+  padding: var(--pf-t--global--spacer--sm);
+  border: var(--pf-t--global--border--width--box--default) solid var(--pf-t--global--border--color--default);
 }

package/docs/layouts/Flex/examples/Flex.md

@@ -12,11 +12,11 @@ The flex layout is based on the CSS Flex properties where the layout determines
 
 The flex layout provides two ways of spacing its direct children.
 
-*   [Spacing system](#spacing-system)
-    *   The spacing system applies a margin between the flex layout's direct children to create space between items along the main axis only. The benefit of the spacing system is that it allows for variable spacing between direct children. Use the spacing system when individual flex items along the main axis require a different spacer than sibling items.
-*   [Gap spacing](#gap-spacing)
-    *   Gap spacing uses flex `gap` to space the flex layout's direct children, and can be applied to space rows (`row-gap`), columns (`column-gap`), or both (`gap`). The benefit of gap spacing is that item wrapping is improved and improved item spacing that works better with CSS flex's logical layout properties. E.g., spacing in RTL layouts that rely on logical properties is improved. Use the gap system when all direct children should use the same spacer for rows, columns, or both.
-    *   **Note** using `gap` along the main axis will override any other spacing applied using the spacing system.
+* [Spacing system](#spacing-system)
+  * The spacing system applies a margin between the flex layout's direct children to create space between items along the main axis only. The benefit of the spacing system is that it allows for variable spacing between direct children. Use the spacing system when individual flex items along the main axis require a different spacer than sibling items.
+* [Gap spacing](#gap-spacing)
+  * Gap spacing uses flex `gap` to space the flex layout's direct children, and can be applied to space rows (`row-gap`), columns (`column-gap`), or both (`gap`). The benefit of gap spacing is that item wrapping is improved and improved item spacing that works better with CSS flex's logical layout properties. E.g., spacing in RTL layouts that rely on logical properties is improved. Use the gap system when all direct children should use the same spacer for rows, columns, or both.
+  * **Note** using `gap` along the main axis will override any other spacing applied using the spacing system.
 
 ### Breakpoints
 
@@ -24,15 +24,15 @@ The flex layout provides two ways of spacing its direct children.
 
 ### Usefulness
 
-*   Use when content dictates layout and elements wrap when necessary.
-*   Use when a rigid grid is not necessary/wanted.
+* Use when content dictates layout and elements wrap when necessary.
+* Use when a rigid grid is not necessary/wanted.
 
 ### Differences from utility class
 
-*   It contains multiple css declarations and does not use the `!important` tag.
-*   It does not require wrapping elements in columns or rows.
-*   It breaks the dependency upon adding utility classes to each child.
-*   It can be applied to container elements or components.
+* It contains multiple css declarations and does not use the `!important` tag.
+* It does not require wrapping elements in columns or rows.
+* It breaks the dependency upon adding utility classes to each child.
+* It can be applied to container elements or components.
 
 # Examples