@patternfly/patternfly 6.2.0-prerelease.9 → 6.2.1

package/docs/components/TextInputGroup/examples/TextInputGroup.md

@@ -1461,8 +1461,18 @@ For the purposes of this example, the `TextInputGroup` is contained in a wrapper
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
+| `.pf-v6-c-text-input-group` | `<div>` | Creates a text input group. *Required* |
+| `.pf-v6-c-text-input-group__main` | `<div>` | Creates a wrapper for the main content. *Required* |
+| `.pf-v6-c-text-input-group__text` | `<span>` | Creates the text container. *Required*|
+| `.pf-v6-c-text-input-group__icon` | `<span>` | Creates a container for an icon. |
+| `.pf-v6-c-text-input-group__text-input` | `<input>` | Creates a text input. *Required* |
+| `.pf-v6-c-text-input-group__utilities` | `<div>` | Creates text input utilities container. |
+| `.pf-v6-c-text-input-group__group` | `<div>` | Creates text input prev/next nav group. |
+| `.pf-m-plain` | `.pf-v6-c-text-input-group` | Applies plain styling. Only use this variant when the text input group is contained in an ancestor with its own border or background styling. |
+| `.pf-m-disabled` | `.pf-v6-c-text-input-group` | Applies disabled styling. The `<input>` should also be `disabled`. |
 | `.pf-m-success` | `.pf-v6-c-text-input-group` | Applies success validation styling. |
 | `.pf-m-warning` | `.pf-v6-c-text-input-group` | Applies warning validation styling. |
 | `.pf-m-error` | `.pf-v6-c-text-input-group` | Applies error validation styling. |
 | `.pf-m-icon` | `.pf-v6-c-text-input-group__main` | Applies styling when icons are included in the container. |
 | `.pf-m-status` | `.pf-v6-c-text-input-group__icon` | Applies status styling to the icon, matching the status modifier applied to `.pf-v6-c-text-input-group`. |
+| `.pf-m-hint` | `.pf-v6-c-text-input-group__text-input` | Applies styling when hints are included in the container. |

package/docs/components/Toolbar/examples/Toolbar.css

@@ -28,6 +28,7 @@
 #ws-core-c-toolbar-adjusted-group-column-gap .pf-v6-c-toolbar__group,
 #ws-core-e-toolbar-simple .pf-v6-c-toolbar,
 #ws-core-e-toolbar-simple .pf-v6-c-toolbar__group,
+#ws-core-c-toolbar-no-padding .pf-v6-c-toolbar,
 #ws-core-e-toolbar-adjusted-spacers .pf-v6-c-toolbar,
 #ws-core-e-toolbar-adjusted-group-spacers .pf-v6-c-toolbar,
 #ws-core-c-toolbar-simple .pf-v6-c-toolbar,
@@ -50,6 +51,7 @@
 #ws-core-e-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
 #ws-core-e-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-simple .pf-v6-c-toolbar__item,
+#ws-core-c-toolbar-no-padding .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-insets .pf-v6-c-toolbar__item,
@@ -64,6 +66,7 @@
 #ws-core-e-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
 #ws-core-e-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-simple .pf-v6-c-toolbar__item,
+#ws-core-c-toolbar-no-padding .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-adjusted-group-spacers .pf-v6-c-toolbar__item,
 #ws-core-c-toolbar-insets .pf-v6-c-toolbar__item,

package/docs/components/Toolbar/examples/Toolbar.md

@@ -75,6 +75,33 @@ Several components in the following examples do not include functional and/or ac
 | `.pf-v6-c-toolbar__item` | `<div>` | Initiates the toolbar component item. **Required** |
 | `.pf-v6-c-toolbar__group` | `<div>` | Initiates the toolbar component group. |
 
+### No padding
+
+```html
+<div class="pf-v6-c-toolbar pf-m-no-padding" id="toolbar-simple-example">
+  <div class="pf-v6-c-toolbar__content">
+    <div class="pf-v6-c-toolbar__content-section">
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <hr class="pf-v6-c-divider pf-m-vertical" />
+
+      <div class="pf-v6-c-toolbar__group">
+        <div class="pf-v6-c-toolbar__item">Item</div>
+        <div class="pf-v6-c-toolbar__item">Item</div>
+        <div class="pf-v6-c-toolbar__item">Item</div>
+      </div>
+
+      <hr class="pf-v6-c-divider pf-m-vertical" />
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+      <div class="pf-v6-c-toolbar__item">Item</div>
+    </div>
+  </div>
+</div>
+
+```
+
 ### Adjusted group column gap
 
 ```html
@@ -2607,6 +2634,7 @@ As the toolbar component is a hybrid layout and component, some of its elements
 | `.pf-m-static` | `.pf-v6-c-toolbar` | Modifies expandable content section to position itself to the nearest absolutely positioned parent outside of the toolbar component. This is used primarily for masthead toolbar. |
 | `.pf-m-primary` | `.pf-v6-c-toolbar` | Modifies toolbar to have primary background color. |
 | `.pf-m-secondary` | `.pf-v6-c-toolbar` | Modifies toolbar to have secondary background color. |
+| `.pf-m-no-padding` | `.pf-v6-c-toolbar` | Modifies toolbar to have no padding. |
 | `.pf-m-no-background` | `.pf-v6-c-toolbar` | Modifies toolbar to have no background color. |
 | `.pf-m-expanded` | `.pf-v6-c-toolbar__expandable-content` | Modifies expandable content section for the expanded state. |
 | `.pf-m-expanded` | `.pf-v6-c-toolbar__item.pf-m-expand-all` | Modifies an expand all button for the expanded state. |

package/docs/components/Truncate/examples/Truncate.md

@@ -6,18 +6,18 @@ cssPrefix: pf-v6-c-truncate
 
 ## Examples
 
-### Notes
-
-The truncate component contains two child elements, `.pf-v6-c-truncate__start` and `.pf-v6-c-truncate__end`. If both `start` and `end` are present within `.pf-v6-c-truncate`, trucation will occur in the middle of the string. If only `.pf-v6-c-truncate__start` is present, truncation will occur at the end of the string. If only `.pf-v6-c-truncate__end` is present, truncation will occur at the beginning of the string. A `.pf-v6-c-popover` will be automatically applied to the PatternFly React implementation. `‎` must be included at the end of string to denote the ending punctuation mark. Otherwise it will occur and the beggining of truncation for a `pf-v6-c-truncate__end` element.
+The default behavior of the truncate component is to truncate based on whether the content can fit within the width of its parent container, and to prevent text from wrapping. The following examples that use this default behavior render the truncate component inside a resizable container, allowing you to see how the parent container width affects the truncation.
 
 ### Default
 
+When only the `.pf-v6-c-truncate__start` element is used, truncation will occur at the end of the string.
+
 ```html
 <div class="pf-v6-c-truncate--example">
   <span class="pf-v6-c-truncate">
     <span
       class="pf-v6-c-truncate__start"
-    >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.</span>
+    >redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip</span>
   </span>
 </div>
 
@@ -25,13 +25,15 @@ The truncate component contains two child elements, `.pf-v6-c-truncate__start` a
 
 ### Middle
 
+When both `.pf-v6-c-truncate__start` and `.pf-v6-c-truncate__end` elements are used, truncation will occur between the strings that are in each respective element. As the parent container width changes, the point at which content within the `.pf-v6-c-truncate__start` element is truncated will also change.
+
 ```html
 <div class="pf-v6-c-truncate--example">
   <span class="pf-v6-c-truncate">
     <span
       class="pf-v6-c-truncate__start"
-    >Vestibulum interdum risus et enim faucibus,&nbsp;</span>
-    <span class="pf-v6-c-truncate__end">sit amet molestie est accumsan.</span>
+    >redhat_logo_black_and_white_reversed_simple_</span>
+    <span class="pf-v6-c-truncate__end">with_fedora_container.zip</span>
   </span>
 </div>
 
@@ -39,23 +41,64 @@ The truncate component contains two child elements, `.pf-v6-c-truncate__start` a
 
 ### Start
 
+When only the `.pf-v6-c-truncate__end` element is used, truncation will occur at the start of the string. `&lrm;` **must** be included at the end of a string to denote the ending punctuation mark, otherwise it will render at the start of the truncated content.
+
 ```html
 <div class="pf-v6-c-truncate--example">
   <span class="pf-v6-c-truncate">
     <span
       class="pf-v6-c-truncate__end"
-    >Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan.&lrm;</span>
+    >redhat_logo_black_and_white_reversed_simple_with_fedora_container.zip</span>
   </span>
 </div>
 
 ```
 
+### Based on max characters
+
+Apply the `.pf-m-fixed` class to the `.pf-v6-c-truncate` element to implement truncation based on a fixed amount of characters rather than a parent container width.
+
+```html
+<div>Truncated at end position:</div>
+<span class="pf-v6-c-truncate pf-m-fixed">
+  <span
+    class="pf-v6-c-truncate__text"
+  >redhat_logo_black_and_white_reversed_simple_with_</span>
+  <span class="pf-v6-c-truncate__omission" aria-hidden="true">&hellip;</span>
+  <span class="pf-v6-screen-reader">fedora_container.zip</span>
+</span>
+<br />
+<br />
+<div>Truncated at middle position:</div>
+<span class="pf-v6-c-truncate pf-m-fixed">
+  <span class="pf-v6-c-truncate__text">redhat_logo_black_and_</span>
+  <span class="pf-v6-screen-reader">white_reversed_simple_with_</span>
+
+  <span class="pf-v6-c-truncate__omission" aria-hidden="true">&hellip;</span>
+  <span class="pf-v6-c-truncate__text">fedora_container.zip</span>
+</span>
+<br />
+<br />
+<div>Truncated at start position:</div>
+<span class="pf-v6-c-truncate pf-m-fixed">
+  <span class="pf-v6-screen-reader">redhat_logo_black_</span>
+
+  <span class="pf-v6-c-truncate__omission" aria-hidden="true">&hellip;</span>
+  <span
+    class="pf-v6-c-truncate__text"
+  >and_white_reversed_simple_with_fedora_container.zip</span>
+</span>
+
+```
+
 ## Documentation
 
 ### Usage
 
 | Class | Applied | Outcome |
 | -- | -- | -- |
-| `.pf-v6-c-truncate` | `<span>` | Initiates the truncate component. |
-| `.pf-v6-c-truncate__start` | `<span>` | Defines the truncate component starting text. |
-| `.pf-v6-c-truncate__end` | `<span>` | Defines the truncate component ending text. |
+| `.pf-v6-c-truncate` | `<span>` | Initiates the truncate component. **Required** |
+| `.pf-v6-c-truncate__start` | `<span>` | Defines the truncate component starting text. **Required** when using default/end or middle truncation, **except** for when the `.pf-m-fixed` class is applied to the `.pf-v6-c-truncate` element. |
+| `.pf-v6-c-truncate__end` | `<span>` | Defines the truncate component ending text. **Required** when using start or middle truncation, **except** for when the `.pf-m-fixed` class is applied to the `.pf-v6-c-truncate` element.  |
+| `.pf-v6-c-truncate__text` | `<span>` | Defines the visible truncate component text. **Required** and should only be used when the `.pf-m-fixed` class is applied to the `.pf-v6-c-truncate` element. |
+| `.pf-m-fixed` | `.pf-v6-c-truncate` | Modifies the truncate component to base truncation on a fixed amount of characters rather than container width. |

package/docs/demos/Card/examples/Card.md

@@ -444,7 +444,7 @@ wrapperTag: div
           <h2 class="pf-v6-c-card__title-text">5 Clusters</h2>
         </div>
         <div class="pf-v6-c-card__body">
-          <span class="pf-v6-c-icon">
+          <span class="pf-v6-c-icon pf-m-inline">
             <span class="pf-v6-c-icon__content pf-m-success">
               <i class="fas fa-check-circle" aria-hidden="true"></i>
             </span>
@@ -456,7 +456,7 @@ wrapperTag: div
           <h2 class="pf-v6-c-card__title-text">15 Clusters</h2>
         </div>
         <div class="pf-v6-c-card__body">
-          <span class="pf-v6-c-icon">
+          <span class="pf-v6-c-icon pf-m-inline">
             <span class="pf-v6-c-icon__content pf-m-warning">
               <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
             </span>
@@ -468,7 +468,7 @@ wrapperTag: div
           <h2 class="pf-v6-c-card__title-text">3 Clusters</h2>
         </div>
         <div class="pf-v6-c-card__body">
-          <span class="pf-v6-c-icon">
+          <span class="pf-v6-c-icon pf-m-inline">
             <span class="pf-v6-c-icon__content pf-m-danger">
               <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
             </span>
@@ -487,7 +487,7 @@ wrapperTag: div
           <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-success">
                     <i class="fas fa-check-circle" aria-hidden="true"></i>
                   </span>
@@ -500,7 +500,7 @@ wrapperTag: div
             <hr class="pf-v6-c-divider pf-m-vertical" />
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-warning">
                     <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                   </span>
@@ -521,7 +521,7 @@ wrapperTag: div
           <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-success">
                     <i class="fas fa-check-circle" aria-hidden="true"></i>
                   </span>
@@ -534,7 +534,7 @@ wrapperTag: div
             <hr class="pf-v6-c-divider pf-m-vertical" />
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-danger">
                     <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                   </span>
@@ -555,7 +555,7 @@ wrapperTag: div
           <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md">
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-warning">
                     <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                   </span>
@@ -568,7 +568,7 @@ wrapperTag: div
             <hr class="pf-v6-c-divider pf-m-vertical" />
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-danger">
                     <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                   </span>
@@ -600,7 +600,7 @@ wrapperTag: div
           >
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-danger">
                     <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                   </span>
@@ -613,7 +613,7 @@ wrapperTag: div
             </div>
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-warning">
                     <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                   </span>
@@ -637,7 +637,7 @@ wrapperTag: div
           >
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-success">
                     <i class="fas fa-check-circle" aria-hidden="true"></i>
                   </span>
@@ -650,7 +650,7 @@ wrapperTag: div
             </div>
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-warning">
                     <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                   </span>
@@ -674,7 +674,7 @@ wrapperTag: div
           >
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-warning">
                     <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                   </span>
@@ -687,7 +687,7 @@ wrapperTag: div
             </div>
             <div class="pf-v6-l-flex pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-danger">
                     <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                   </span>
@@ -723,6 +723,25 @@ wrapperTag: div
           <button
             type="button"
             class="pf-v6-c-tabs__link"
+            onclick="
+                      event.preventDefault();
+                      ((e) => {
+                        const el = this,
+                              li = this.closest('li'),
+                              ul = this.closest('ul'),
+                              tabs = this.closest('.pf-v6-c-tabs'),
+                              left = Math.round(li.offsetLeft),
+                              top = Math.round(li.offsetTop),
+                              width = Math.round(li.offsetWidth),
+                              height = Math.round(li.offsetHeight);
+                  
+                        ul.querySelectorAll('li').forEach(function(el) {
+                          el.classList.remove('pf-m-current')});
+                          li.classList.add('pf-m-current');
+                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                        }
+                      )()"
             role="tab"
             id="status-tabs-object-1-link"
           >
@@ -733,6 +752,25 @@ wrapperTag: div
           <button
             type="button"
             class="pf-v6-c-tabs__link"
+            onclick="
+                      event.preventDefault();
+                      ((e) => {
+                        const el = this,
+                              li = this.closest('li'),
+                              ul = this.closest('ul'),
+                              tabs = this.closest('.pf-v6-c-tabs'),
+                              left = Math.round(li.offsetLeft),
+                              top = Math.round(li.offsetTop),
+                              width = Math.round(li.offsetWidth),
+                              height = Math.round(li.offsetHeight);
+                  
+                        ul.querySelectorAll('li').forEach(function(el) {
+                          el.classList.remove('pf-m-current')});
+                          li.classList.add('pf-m-current');
+                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                        }
+                      )()"
             role="tab"
             id="status-tabs-object-2-link"
           >
@@ -743,6 +781,25 @@ wrapperTag: div
           <button
             type="button"
             class="pf-v6-c-tabs__link"
+            onclick="
+                      event.preventDefault();
+                      ((e) => {
+                        const el = this,
+                              li = this.closest('li'),
+                              ul = this.closest('ul'),
+                              tabs = this.closest('.pf-v6-c-tabs'),
+                              left = Math.round(li.offsetLeft),
+                              top = Math.round(li.offsetTop),
+                              width = Math.round(li.offsetWidth),
+                              height = Math.round(li.offsetHeight);
+                  
+                        ul.querySelectorAll('li').forEach(function(el) {
+                          el.classList.remove('pf-m-current')});
+                          li.classList.add('pf-m-current');
+                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                            tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                        }
+                      )()"
             role="tab"
             id="status-tabs-object-3-link"
           >
@@ -767,7 +824,7 @@ wrapperTag: div
                 <div class="pf-v6-l-grid">
                   <div class="pf-v6-l-grid__item pf-m-3-col">
                     <svg
-                      class="pf-v6-c-spinner pf-m-md"
+                      class="pf-v6-c-spinner pf-m-inline"
                       role="progressbar"
                       viewBox="0 0 100 100"
                       aria-label="Loading"
@@ -801,7 +858,11 @@ wrapperTag: div
               <span class="pf-v6-c-description-list__text">
                 <div class="pf-v6-l-flex">
                   <div class="pf-v6-l-flex__item">
-                    <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+                    <span class="pf-v6-c-icon pf-m-inline">
+                      <span class="pf-v6-c-icon__content pf-m-success">
+                        <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+                      </span>
+                    </span>
                   </div>
                   <div class="pf-v6-l-flex__item">
                     <h3 class="pf-v6-c-title pf-m-md">Ready</h3>
@@ -824,7 +885,7 @@ wrapperTag: div
                 <div class="pf-v6-l-grid">
                   <div class="pf-v6-l-grid__item pf-m-3-col">
                     <svg
-                      class="pf-v6-c-spinner pf-m-md"
+                      class="pf-v6-c-spinner pf-m-inline"
                       role="progressbar"
                       viewBox="0 0 100 100"
                       aria-label="Loading"
@@ -858,7 +919,11 @@ wrapperTag: div
               <span class="pf-v6-c-description-list__text">
                 <div class="pf-v6-l-flex">
                   <div class="pf-v6-l-flex__item">
-                    <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+                    <span class="pf-v6-c-icon pf-m-inline">
+                      <span class="pf-v6-c-icon__content pf-m-success">
+                        <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
+                      </span>
+                    </span>
                   </div>
                   <div class="pf-v6-l-flex__item">
                     <h3 class="pf-v6-c-title pf-m-md">Ready</h3>
@@ -1935,7 +2000,7 @@ wrapperTag: div
       <div class="pf-v6-l-flex pf-m-column">
         <span>System</span>
         <div class="pf-v6-l-flex pf-m-space-items-sm">
-          <span class="pf-v6-c-icon">
+          <span class="pf-v6-c-icon pf-m-inline">
             <span class="pf-v6-c-icon__content pf-m-danger">
               <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
             </span>
@@ -2907,7 +2972,7 @@ wrapperTag: div
           <dt class="pf-v6-c-description-list__term">
             <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-danger">
                     <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                   </span>
@@ -2936,7 +3001,7 @@ wrapperTag: div
           <dt class="pf-v6-c-description-list__term">
             <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-success">
                     <i class="fas fa-check-circle" aria-hidden="true"></i>
                   </span>
@@ -2966,7 +3031,7 @@ wrapperTag: div
             <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
                 <svg
-                  class="pf-v6-c-spinner pf-m-md"
+                  class="pf-v6-c-spinner pf-m-inline"
                   role="progressbar"
                   viewBox="0 0 100 100"
                   aria-label="Loading"
@@ -3003,7 +3068,7 @@ wrapperTag: div
           <dt class="pf-v6-c-description-list__term">
             <div class="pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm">
               <div class="pf-v6-l-flex__item">
-                <span class="pf-v6-c-icon">
+                <span class="pf-v6-c-icon pf-m-inline">
                   <span class="pf-v6-c-icon__content pf-m-success">
                     <i class="fas fa-check-circle" aria-hidden="true"></i>
                   </span>

package/docs/demos/CardView/examples/CardView.md

@@ -254,6 +254,7 @@ section: patterns
               class="pf-v6-c-nav__subnav"
               aria-labelledby="card-view-basic-example-expandable-nav-link2"
               hidden
+              inert
             >
               <ul class="pf-v6-c-nav__list" role="list">
                 <li class="pf-v6-c-nav__item">
@@ -286,6 +287,7 @@ section: patterns
               class="pf-v6-c-nav__subnav"
               aria-labelledby="card-view-basic-example-expandable-nav-link3"
               hidden
+              inert
             >
               <ul class="pf-v6-c-nav__list" role="list">
                 <li class="pf-v6-c-nav__item">

package/docs/demos/DescriptionList/examples/DescriptionList.md

@@ -736,6 +736,25 @@ cssPrefix: pf-d-description-list
                   <button
                     type="button"
                     class="pf-v6-c-tabs__link"
+                    onclick="
+                                  event.preventDefault();
+                                  ((e) => {
+                                    const el = this,
+                                          li = this.closest('li'),
+                                          ul = this.closest('ul'),
+                                          tabs = this.closest('.pf-v6-c-tabs'),
+                                          left = Math.round(li.offsetLeft),
+                                          top = Math.round(li.offsetTop),
+                                          width = Math.round(li.offsetWidth),
+                                          height = Math.round(li.offsetHeight);
+                              
+                                    ul.querySelectorAll('li').forEach(function(el) {
+                                      el.classList.remove('pf-m-current')});
+                                      li.classList.add('pf-m-current');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                                    }
+                                  )()"
                     role="tab"
                     id="description-list-in-drawer-example-panel-tabs-tab1-link"
                   >
@@ -746,6 +765,25 @@ cssPrefix: pf-d-description-list
                   <button
                     type="button"
                     class="pf-v6-c-tabs__link"
+                    onclick="
+                                  event.preventDefault();
+                                  ((e) => {
+                                    const el = this,
+                                          li = this.closest('li'),
+                                          ul = this.closest('ul'),
+                                          tabs = this.closest('.pf-v6-c-tabs'),
+                                          left = Math.round(li.offsetLeft),
+                                          top = Math.round(li.offsetTop),
+                                          width = Math.round(li.offsetWidth),
+                                          height = Math.round(li.offsetHeight);
+                              
+                                    ul.querySelectorAll('li').forEach(function(el) {
+                                      el.classList.remove('pf-m-current')});
+                                      li.classList.add('pf-m-current');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                                    }
+                                  )()"
                     role="tab"
                     id="description-list-in-drawer-example-panel-tabs-tab2-link"
                   >

package/docs/demos/Drawer/examples/Drawer.md

@@ -369,6 +369,25 @@ wrapperTag: div
                   <button
                     type="button"
                     class="pf-v6-c-tabs__link"
+                    onclick="
+                                  event.preventDefault();
+                                  ((e) => {
+                                    const el = this,
+                                          li = this.closest('li'),
+                                          ul = this.closest('ul'),
+                                          tabs = this.closest('.pf-v6-c-tabs'),
+                                          left = Math.round(li.offsetLeft),
+                                          top = Math.round(li.offsetTop),
+                                          width = Math.round(li.offsetWidth),
+                                          height = Math.round(li.offsetHeight);
+                              
+                                    ul.querySelectorAll('li').forEach(function(el) {
+                                      el.classList.remove('pf-m-current')});
+                                      li.classList.add('pf-m-current');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                                    }
+                                  )()"
                     role="tab"
                     id="drawer-collapsed-example-panel-tabs-tab1-link"
                   >
@@ -379,6 +398,25 @@ wrapperTag: div
                   <button
                     type="button"
                     class="pf-v6-c-tabs__link"
+                    onclick="
+                                  event.preventDefault();
+                                  ((e) => {
+                                    const el = this,
+                                          li = this.closest('li'),
+                                          ul = this.closest('ul'),
+                                          tabs = this.closest('.pf-v6-c-tabs'),
+                                          left = Math.round(li.offsetLeft),
+                                          top = Math.round(li.offsetTop),
+                                          width = Math.round(li.offsetWidth),
+                                          height = Math.round(li.offsetHeight);
+                              
+                                    ul.querySelectorAll('li').forEach(function(el) {
+                                      el.classList.remove('pf-m-current')});
+                                      li.classList.add('pf-m-current');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--start', left + 'px');
+                                        tabs.style.setProperty('--pf-v6-c-tabs--link-accent--length', width + 'px');
+                                    }
+                                  )()"
                     role="tab"
                     id="drawer-collapsed-example-panel-tabs-tab2-link"
                   >

package/docs/demos/Masthead/examples/Masthead.md

@@ -2066,7 +2066,7 @@ wrapperTag: div
 ### Horizontal nav
 
 ```html isFullscreen
-<div class="pf-v6-c-page" id="masthead-horizontal-nav">
+<div class="pf-v6-c-page pf-m-no-sidebar" id="masthead-horizontal-nav">
   <div class="pf-v6-c-skip-to-content">
     <a
       class="pf-v6-c-button pf-m-primary"