@patternfly/patternfly 6.5.0-prerelease.4 → 6.5.0-prerelease.41

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

@@ -14,8 +14,8 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
 | -- | -- | -- |
 | `.pf-v6-c-toolbar__group` | `--pf-v6-c-toolbar__group--ColumnGap` | `16px` |
 | `.pf-v6-c-toolbar__item` | `--pf-v6-c-toolbar__item--ColumnGap` | `16px` |
-| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-gap-[none/sm/md/lg/xl/2xl]{-on-[breakpoint]}` |  `.pf-v6-c-toolbar__content-section`, `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column gap and row gap for toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 
 ### Toolbar item types
 
@@ -37,7 +37,7 @@ Toolbar relies on groups (`.pf-v6-c-toolbar__group`) and items (`.pf-v6-c-toolba
 
 Several components in the following examples do not include functional and/or accessibility specifications (for example `.pf-v6-c-select`, `.pf-v6-c-options-menu`). Rather, `.pf-v6-c-toolbar` focuses on functionality and accessibility specifications that apply to it only.
 
-**Available [breakpoints](/tokens/all-patternfly-tokens) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
+**Available [breakpoints](/foundations-and-styles/design-tokens/all-design-tokens) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
 
 ## Examples
 
@@ -181,8 +181,8 @@ Several components in the following examples do not include functional and/or ac
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the width value of a toolbar item at optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the min width value of a toolbar item at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `--pf-v6-c-toolbar__item--Width: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the width value of a toolbar item at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `--pf-v6-c-toolbar__item--MinWidth: {width}` | `.pf-v6-c-toolbar__item` |  Modifies the min width value of a toolbar item at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
 
 ## Group types
 
@@ -2612,6 +2612,33 @@ Etiam nulla lacus, porttitor vel volutpat et, malesuada id nunc. Suspendisse por
 
 ```
 
+### Vertical
+
+```html isBeta
+<div class="pf-v6-c-toolbar pf-m-vertical" id="toolbar-vertical-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" />
+
+      <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" />
+      <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>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -2636,6 +2663,7 @@ As the toolbar component is a hybrid layout and component, some of its elements
 | `.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-vertical` | `.pf-v6-c-toolbar` | Modifies toolbar for a vertical layout. |
 | `.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. |
 | `.pf-m-action-group` | `.pf-v6-c-toolbar__group` | Initiates action group spacing. |
@@ -2674,5 +2702,5 @@ As the toolbar component is a hybrid layout and component, some of its elements
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
-| `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/tokens/all-patternfly-tokens). |
+| `.pf-m-[column/row]-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |
+| `.pf-m-gap-[none/sm/md/lg/xl/2xl]` | `.pf-v6-c-toolbar__group`, `.pf-v6-c-toolbar__item` | Modifies both column and row gap for toolbar group or item spacing at optional [breakpoint](/foundations-and-styles/design-tokens/all-design-tokens). |

package/docs/components/TreeView/examples/TreeView.md

@@ -111,16 +111,18 @@ cssPrefix: pf-v6-c-tree-view
           tabindex="0"
         >
           <div class="pf-v6-c-tree-view__content">
-            <button class="pf-v6-c-tree-view__node">
+            <div class="pf-v6-c-tree-view__node pf-m-disabled" tabindex="0">
               <span class="pf-v6-c-tree-view__node-container">
-                <span class="pf-v6-c-tree-view__node-toggle">
+                <span class="pf-v6-c-tree-view__node-toggle pf-m-disabled">
                   <span class="pf-v6-c-tree-view__node-toggle-icon">
                     <i class="fas fa-angle-right" aria-hidden="true"></i>
                   </span>
                 </span>
-                <span class="pf-v6-c-tree-view__node-text">Application 2</span>
+                <span
+                  class="pf-v6-c-tree-view__node-text"
+                >Application 2 (disabled item and toggle)</span>
               </span>
-            </button>
+            </div>
           </div>
           <ul class="pf-v6-c-tree-view__list" role="group">
             <li
@@ -130,11 +132,11 @@ cssPrefix: pf-v6-c-tree-view
               tabindex="-1"
             >
               <div class="pf-v6-c-tree-view__content">
-                <button class="pf-v6-c-tree-view__node">
+                <div class="pf-v6-c-tree-view__node" tabindex="0">
                   <span class="pf-v6-c-tree-view__node-container">
                     <span class="pf-v6-c-tree-view__node-text">Settings</span>
                   </span>
-                </button>
+                </div>
               </div>
             </li>
             <li
@@ -1594,9 +1596,9 @@ A search input can be used to filter tree view items. It is recommended that a t
           tabindex="0"
         >
           <div class="pf-v6-c-tree-view__content">
-            <button class="pf-v6-c-tree-view__node">
+            <button class="pf-v6-c-tree-view__node pf-m-disabled">
               <span class="pf-v6-c-tree-view__node-container">
-                <span class="pf-v6-c-tree-view__node-toggle">
+                <span class="pf-v6-c-tree-view__node-toggle pf-m-disabled">
                   <span class="pf-v6-c-tree-view__node-toggle-icon">
                     <i class="fas fa-angle-right" aria-hidden="true"></i>
                   </span>
@@ -1604,7 +1606,9 @@ A search input can be used to filter tree view items. It is recommended that a t
                 <span class="pf-v6-c-tree-view__node-icon">
                   <i class="fas fa-folder-open" aria-hidden="true"></i>
                 </span>
-                <span class="pf-v6-c-tree-view__node-text">Application 2</span>
+                <span
+                  class="pf-v6-c-tree-view__node-text"
+                >Application 2 (disabled item and toggle)</span>
               </span>
             </button>
           </div>
@@ -2797,10 +2801,11 @@ A search input can be used to filter tree view items. It is recommended that a t
                 >
                   <span class="pf-v6-c-tree-view__node-container">
                     <button
-                      class="pf-v6-c-tree-view__node-toggle"
+                      class="pf-v6-c-tree-view__node-toggle pf-m-disabled"
                       id="toggle-tree-view-selectable-expandable-3"
                       aria-label="Toggle"
                       aria-labelledby="toggle-tree-view-selectable-expandable-3 text-tree-view-selectable-expandable-3"
+                      disabled
                     >
                       <span class="pf-v6-c-tree-view__node-toggle-icon">
                         <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2809,7 +2814,7 @@ A search input can be used to filter tree view items. It is recommended that a t
                     <button
                       class="pf-v6-c-tree-view__node-text"
                       id="text-tree-view-selectable-expandable-3"
-                    >Loader</button>
+                    >Loader (toggle disabled)</button>
                   </span>
                 </div>
               </div>
@@ -2907,7 +2912,7 @@ A search input can be used to filter tree view items. It is recommended that a t
             >
               <div class="pf-v6-c-tree-view__content">
                 <div
-                  class="pf-v6-c-tree-view__node pf-m-selectable"
+                  class="pf-v6-c-tree-view__node pf-m-selectable pf-m-disabled"
                   tabindex="0"
                   id="node-tree-view-selectable-expandable-6"
                   aria-label="Select"
@@ -2927,7 +2932,7 @@ A search input can be used to filter tree view items. It is recommended that a t
                     <button
                       class="pf-v6-c-tree-view__node-text"
                       id="text-tree-view-selectable-expandable-6"
-                    >Loader</button>
+                    >Loader (disabled item but toggle is enabled)</button>
                   </span>
                 </div>
               </div>
@@ -2941,7 +2946,7 @@ A search input can be used to filter tree view items. It is recommended that a t
                 >
                   <div class="pf-v6-c-tree-view__content">
                     <div
-                      class="pf-v6-c-tree-view__node pf-m-selectable pf-m-current"
+                      class="pf-v6-c-tree-view__node pf-m-selectable pf-m-current pf-m-disabled"
                       tabindex="0"
                       id="node-tree-view-selectable-expandable-7"
                       aria-label="Select"
@@ -2949,10 +2954,11 @@ A search input can be used to filter tree view items. It is recommended that a t
                     >
                       <span class="pf-v6-c-tree-view__node-container">
                         <button
-                          class="pf-v6-c-tree-view__node-toggle"
+                          class="pf-v6-c-tree-view__node-toggle pf-m-disabled"
                           id="toggle-tree-view-selectable-expandable-7"
                           aria-label="Toggle"
                           aria-labelledby="toggle-tree-view-selectable-expandable-7 text-tree-view-selectable-expandable-7"
+                          disabled
                         >
                           <span class="pf-v6-c-tree-view__node-toggle-icon">
                             <i class="fas fa-angle-right" aria-hidden="true"></i>
@@ -2961,7 +2967,7 @@ A search input can be used to filter tree view items. It is recommended that a t
                         <button
                           class="pf-v6-c-tree-view__node-text"
                           id="text-tree-view-selectable-expandable-7"
-                        >Loader app 1</button>
+                        >Loader app 1 (disabled item and toggle)</button>
                       </span>
                     </div>
                   </div>
@@ -3455,10 +3461,12 @@ A search input can be used to filter tree view items. It is recommended that a t
       tabindex="-1"
     >
       <div class="pf-v6-c-tree-view__content">
-        <button class="pf-v6-c-tree-view__node">
+        <button class="pf-v6-c-tree-view__node pf-m-disabled">
           <span class="pf-v6-c-tree-view__node-container">
             <span class="pf-v6-c-tree-view__node-content">
-              <span class="pf-v6-c-tree-view__node-title">metadata</span>
+              <span
+                class="pf-v6-c-tree-view__node-title"
+              >metadata (disabled item)</span>
               <span
                 class="pf-v6-c-tree-view__node-text"
               >Standard object metadata</span>
@@ -3624,9 +3632,9 @@ A search input can be used to filter tree view items. It is recommended that a t
               tabindex="0"
             >
               <div class="pf-v6-c-tree-view__content">
-                <button class="pf-v6-c-tree-view__node">
+                <button class="pf-v6-c-tree-view__node pf-m-disabled">
                   <span class="pf-v6-c-tree-view__node-container">
-                    <span class="pf-v6-c-tree-view__node-toggle">
+                    <span class="pf-v6-c-tree-view__node-toggle pf-m-disabled">
                       <span class="pf-v6-c-tree-view__node-toggle-icon">
                         <i class="fas fa-angle-right" aria-hidden="true"></i>
                       </span>
@@ -3634,7 +3642,7 @@ A search input can be used to filter tree view items. It is recommended that a t
                     <span class="pf-v6-c-tree-view__node-content">
                       <span
                         class="pf-v6-c-tree-view__node-title"
-                      >matchExpressions</span>
+                      >matchExpressions (disabled item and toggle)</span>
                       <span
                         class="pf-v6-c-tree-view__node-text"
                       >matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
@@ -3767,10 +3775,12 @@ A search input can be used to filter tree view items. It is recommended that a t
       tabindex="-1"
     >
       <div class="pf-v6-c-tree-view__content">
-        <button class="pf-v6-c-tree-view__node">
+        <button class="pf-v6-c-tree-view__node pf-m-disabled">
           <span class="pf-v6-c-tree-view__node-container">
             <span class="pf-v6-c-tree-view__node-content">
-              <span class="pf-v6-c-tree-view__node-title">metadata</span>
+              <span
+                class="pf-v6-c-tree-view__node-title"
+              >metadata (disabled item)</span>
               <span
                 class="pf-v6-c-tree-view__node-text"
               >Standard object metadata</span>
@@ -3936,9 +3946,9 @@ A search input can be used to filter tree view items. It is recommended that a t
               tabindex="0"
             >
               <div class="pf-v6-c-tree-view__content">
-                <button class="pf-v6-c-tree-view__node">
+                <button class="pf-v6-c-tree-view__node pf-m-disabled">
                   <span class="pf-v6-c-tree-view__node-container">
-                    <span class="pf-v6-c-tree-view__node-toggle">
+                    <span class="pf-v6-c-tree-view__node-toggle pf-m-disabled">
                       <span class="pf-v6-c-tree-view__node-toggle-icon">
                         <i class="fas fa-angle-right" aria-hidden="true"></i>
                       </span>
@@ -3946,7 +3956,7 @@ A search input can be used to filter tree view items. It is recommended that a t
                     <span class="pf-v6-c-tree-view__node-content">
                       <span
                         class="pf-v6-c-tree-view__node-title"
-                      >matchExpressions</span>
+                      >matchExpressions (disabled item and toggle)</span>
                       <span
                         class="pf-v6-c-tree-view__node-text"
                       >matchExpressions is a list of the label selector requirements. The requirements and ANDed.</span>
@@ -4052,4 +4062,6 @@ A search input can be used to filter tree view items. It is recommended that a t
 | `.pf-m-no-background` | `.pf-v6-c-tree-view.pf-m-compact` | Modifies the tree view compact variant node containers to have a transparent background. |
 | `.pf-m-current` | `.pf-v6-c-tree-view__node` | Modifies the tree view node to be current. |
 | `.pf-m-selectable` | `.pf-v6-c-tree-view__node` | For use on nodes that are expandable and selectable, when the default click action on the node selects it instead of expanding it. |
+| `.pf-m-disabled` | `.pf-v6-c-tree-view__node` | Modifies the tree view node to display as disabled. |
+| `.pf-m-disabled` | `.pf-v6-c-tree-view__node-toggle` | Modifies the tree view node toggle to display as disabled. |
 | `.pf-m-truncate` | `.pf-v6-c-tree-view`, `.pf-v6-c-tree-view__node-title`, `.pf-v6-c-tree-view__node-text` | Modifies the tree view title or text to truncate. |

package/docs/components/Wizard/examples/Wizard.md

@@ -846,23 +846,23 @@ wrapperTag: div
               </div>
             </div>
             <div class="pf-v6-c-drawer__panel pf-m-width-33">
-              <div class="pf-v6-c-drawer__body">
-                <div class="pf-v6-c-drawer__head">
-                  <div class="pf-v6-c-drawer__actions">
-                    <div class="pf-v6-c-drawer__close">
-                      <button
-                        class="pf-v6-c-button pf-m-plain"
-                        type="button"
-                        aria-label="Close drawer panel"
-                      >
-                        <span class="pf-v6-c-button__icon">
-                          <i class="fas fa-times" aria-hidden="true"></i>
-                        </span>
-                      </button>
-                    </div>
-                  </div>drawer-panel
+              <div class="pf-v6-c-drawer__head">
+                drawer-panel
+                <div class="pf-v6-c-drawer__actions">
+                  <div class="pf-v6-c-drawer__close">
+                    <button
+                      class="pf-v6-c-button pf-m-plain"
+                      type="button"
+                      aria-label="Close drawer panel"
+                    >
+                      <span class="pf-v6-c-button__icon">
+                        <i class="fas fa-times" aria-hidden="true"></i>
+                      </span>
+                    </button>
+                  </div>
                 </div>
               </div>
+              <div class="pf-v6-c-drawer__body">drawer-body</div>
             </div>
           </div>
           <footer class="pf-v6-c-wizard__footer">

package/docs/demos/AboutModal/examples/AboutModal.md

@@ -17,7 +17,7 @@ This demo implements the about modal, including the backdrop.
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="modal-basic-example-masthead">
+  <header class="pf-v6-c-masthead" id="modal-basic-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -59,7 +59,7 @@ This demo implements the about modal, including the backdrop.
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-modal-basic-example-masthead"
+                id="linearGradient-modal-basic-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -113,11 +113,11 @@ This demo implements the about modal, including the backdrop.
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-modal-basic-example-masthead)"
+                  fill="url(#linearGradient-modal-basic-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-modal-basic-example-masthead)"
+                  fill="url(#linearGradient-modal-basic-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -129,7 +129,7 @@ This demo implements the about modal, including the backdrop.
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="modal-basic-example-masthead-toolbar"
+        id="modal-basic-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">

package/docs/demos/Alert/examples/Alert.md

@@ -15,7 +15,7 @@ section: components
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="alert-basic-example-masthead">
+  <header class="pf-v6-c-masthead" id="alert-basic-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -57,7 +57,7 @@ section: components
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-alert-basic-example-masthead"
+                id="linearGradient-alert-basic-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -111,11 +111,11 @@ section: components
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-alert-basic-example-masthead)"
+                  fill="url(#linearGradient-alert-basic-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-alert-basic-example-masthead)"
+                  fill="url(#linearGradient-alert-basic-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -127,7 +127,7 @@ section: components
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="alert-basic-example-masthead-toolbar"
+        id="alert-basic-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -413,7 +413,7 @@ section: components
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="alert-horizontal-example-masthead">
+  <header class="pf-v6-c-masthead" id="alert-horizontal-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -455,7 +455,7 @@ section: components
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-alert-horizontal-example-masthead"
+                id="linearGradient-alert-horizontal-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -509,11 +509,11 @@ section: components
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-alert-horizontal-example-masthead)"
+                  fill="url(#linearGradient-alert-horizontal-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-alert-horizontal-example-masthead)"
+                  fill="url(#linearGradient-alert-horizontal-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -525,7 +525,7 @@ section: components
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="alert-horizontal-example-masthead-toolbar"
+        id="alert-horizontal-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -914,7 +914,7 @@ section: components
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="alert-stacked-example-masthead">
+  <header class="pf-v6-c-masthead" id="alert-stacked-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -956,7 +956,7 @@ section: components
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-alert-stacked-example-masthead"
+                id="linearGradient-alert-stacked-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -1010,11 +1010,11 @@ section: components
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-alert-stacked-example-masthead)"
+                  fill="url(#linearGradient-alert-stacked-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-alert-stacked-example-masthead)"
+                  fill="url(#linearGradient-alert-stacked-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -1026,7 +1026,7 @@ section: components
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="alert-stacked-example-masthead-toolbar"
+        id="alert-stacked-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">

package/docs/demos/BackToTop/examples/BackToTop.md

@@ -16,7 +16,7 @@ cssPrefix: pf-d-back-to-top
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="back-to-top-basic-example-masthead">
+  <header class="pf-v6-c-masthead" id="back-to-top-basic-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -58,7 +58,7 @@ cssPrefix: pf-d-back-to-top
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-back-to-top-basic-example-masthead"
+                id="linearGradient-back-to-top-basic-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -112,11 +112,11 @@ cssPrefix: pf-d-back-to-top
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-back-to-top-basic-example-masthead)"
+                  fill="url(#linearGradient-back-to-top-basic-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-back-to-top-basic-example-masthead)"
+                  fill="url(#linearGradient-back-to-top-basic-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -128,7 +128,7 @@ cssPrefix: pf-d-back-to-top
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="back-to-top-basic-example-masthead-toolbar"
+        id="back-to-top-basic-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">

package/docs/demos/Banner/examples/Banner.md

@@ -17,7 +17,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="banner-basic-example-masthead">
+  <header class="pf-v6-c-masthead" id="banner-basic-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -59,7 +59,7 @@ wrapperTag: div
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-banner-basic-example-masthead"
+                id="linearGradient-banner-basic-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -113,11 +113,11 @@ wrapperTag: div
                 />
                 <path
                   d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                  fill="url(#linearGradient-banner-basic-example-masthead)"
+                  fill="url(#linearGradient-banner-basic-example-docked)"
                 />
                 <path
                   d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                  fill="url(#linearGradient-banner-basic-example-masthead)"
+                  fill="url(#linearGradient-banner-basic-example-docked)"
                   transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                 />
               </g>
@@ -129,7 +129,7 @@ wrapperTag: div
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="banner-basic-example-masthead-toolbar"
+        id="banner-basic-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">
@@ -496,7 +496,7 @@ wrapperTag: div
           <span class="pf-v6-c-button__text">Skip to content</span>
         </a>
       </div>
-      <header class="pf-v6-c-masthead" id="banner-top-bottom-example-masthead">
+      <header class="pf-v6-c-masthead" id="banner-top-bottom-example-docked">
         <div class="pf-v6-c-masthead__main">
           <span class="pf-v6-c-masthead__toggle">
             <button
@@ -541,7 +541,7 @@ wrapperTag: div
                     y1="2.25860997e-13%"
                     x2="32%"
                     y2="100%"
-                    id="linearGradient-banner-top-bottom-example-masthead"
+                    id="linearGradient-banner-top-bottom-example-docked"
                   >
                     <stop stop-color="#2B9AF3" offset="0%" />
                     <stop
@@ -600,11 +600,11 @@ wrapperTag: div
                     />
                     <path
                       d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
-                      fill="url(#linearGradient-banner-top-bottom-example-masthead)"
+                      fill="url(#linearGradient-banner-top-bottom-example-docked)"
                     />
                     <path
                       d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
-                      fill="url(#linearGradient-banner-top-bottom-example-masthead)"
+                      fill="url(#linearGradient-banner-top-bottom-example-docked)"
                       transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
                     />
                   </g>
@@ -616,7 +616,7 @@ wrapperTag: div
         <div class="pf-v6-c-masthead__content">
           <div
             class="pf-v6-c-toolbar pf-m-static"
-            id="banner-top-bottom-example-masthead-toolbar"
+            id="banner-top-bottom-example-docked-toolbar"
           >
             <div class="pf-v6-c-toolbar__content">
               <div class="pf-v6-c-toolbar__content-section">