@patternfly/patternfly 6.5.0-prerelease.30 → 6.5.0-prerelease.32

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

@@ -2474,6 +2474,49 @@ cssPrefix: pf-v6-c-nav
 
 ```
 
+### Docked nav
+
+```html isBeta
+<nav class="pf-v6-c-nav pf-m-docked" aria-label="Global">
+  <ul class="pf-v6-c-nav__list" role="list">
+    <li class="pf-v6-c-nav__item">
+      <a href="#" class="pf-v6-c-nav__link" aria-label="Cube">
+        <span class="pf-v6-c-nav__link-icon">
+          <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
+        </span>
+      </a>
+    </li>
+    <li class="pf-v6-c-nav__item">
+      <a
+        href="#"
+        class="pf-v6-c-nav__link pf-m-current"
+        aria-current="page"
+        aria-label="Folder"
+      >
+        <span class="pf-v6-c-nav__link-icon">
+          <i class="fas fa-fw fa-folder" aria-hidden="true"></i>
+        </span>
+      </a>
+    </li>
+    <li class="pf-v6-c-nav__item">
+      <a href="#" class="pf-v6-c-nav__link" aria-label="Cloud">
+        <span class="pf-v6-c-nav__link-icon">
+          <i class="fas fa-fw fa-cloud" aria-hidden="true"></i>
+        </span>
+      </a>
+    </li>
+    <li class="pf-v6-c-nav__item">
+      <a href="#" class="pf-v6-c-nav__link" aria-label="Code">
+        <span class="pf-v6-c-nav__link-icon">
+          <i class="fas fa-fw fa-code" aria-hidden="true"></i>
+        </span>
+      </a>
+    </li>
+  </ul>
+</nav>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -2514,6 +2557,7 @@ The navigation system relies on several different sub-components:
 | `.pf-v6-c-nav__scroll-button` | `<button>` | Initiates a nav scroll button. **Required for horizontal navs** |
 | `.pf-m-horizontal` | `.pf-v6-c-nav` | Modifies nav for the horizontal variation. |
 | `.pf-m-horizontal-subnav` | `.pf-v6-c-nav` | Modifies nav for the horizontal subnav variation. |
+| `.pf-m-docked` | `.pf-v6-c-nav` | Modifies nav for the docked variation. |
 | `.pf-m-flyout` | `.pf-v6-c-nav__item` | Modifies nav item for the flyout variation. |
 | `.pf-m-scrollable` | `.pf-v6-c-nav` | Modifies nav for the scrollable state. |
 | `.pf-m-expanded` | `.pf-v6-c-nav__item` | Modifies for the expanded state. |

package/docs/components/Page/examples/Page.md

@@ -514,6 +514,42 @@ wrapperTag: div
 
 ```
 
+### With dock
+
+```html isBeta
+<div class="pf-v6-c-page pf-m-dock">
+  <div class="pf-v6-c-page__dock">
+    <header class="pf-v6-c-masthead pf-m-docked">
+      <div class="pf-v6-c-masthead__main">
+        <div class="pf-v6-c-masthead__brand">logo</div>
+      </div>
+      <div class="pf-v6-c-masthead__content">
+        <button
+          class="pf-v6-c-button pf-m-plain"
+          type="button"
+          aria-label="Chat"
+        >
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-comment-alt" aria-hidden="true"></i>
+          </span>
+        </button>
+      </div>
+    </header>
+  </div>
+  <div class="pf-v6-c-page__main-container" tabindex="-1">
+    <main class="pf-v6-c-page__main" tabindex="-1">
+      <section class="pf-v6-c-page__main-section">
+        <div class="pf-v6-c-page__main-body">
+          This is a default
+          <code>.pf-v6-c-page__main-section</code>.
+        </div>
+      </section>
+    </main>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Overview
@@ -545,6 +581,7 @@ This component provides the basic chrome for a page, including sidebar and main
 | `.pf-v6-c-page__main-body` | `<div>` | Creates the body section for a page section. **Required** |
 | `.pf-v6-c-page__main-group` | `<div>` | Creates the group of `.pf-v6-c-page__main-*` sections. Can be used in combination with `.pf-m-sticky-[top/bottom]` to make multiple sections sticky. |
 | `.pf-v6-c-page__drawer` | `<div>` | Creates a container for the drawer component when placing the main page element in the drawer body. |
+| `.pf-m-dock` | `.pf-v6-c-page` | Modifies the page grid to have a dock. |
 | `.pf-m-no-sidebar` | `.pf-v6-c-page` | Modifies the page grid for layouts without a sidebar. |
 | `.pf-m-expanded` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the expanded state. |
 | `.pf-m-collapsed` | `.pf-v6-c-page__sidebar` | Modifies the sidebar for the collapsed state. |

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

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

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

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

@@ -15,7 +15,7 @@ section: patterns
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
-  <header class="pf-v6-c-masthead" id="card-view-basic-example-masthead">
+  <header class="pf-v6-c-masthead" id="card-view-basic-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
         <button
@@ -57,7 +57,7 @@ section: patterns
                 y1="2.25860997e-13%"
                 x2="32%"
                 y2="100%"
-                id="linearGradient-card-view-basic-example-masthead"
+                id="linearGradient-card-view-basic-example-docked"
               >
                 <stop stop-color="#2B9AF3" offset="0%" />
                 <stop
@@ -111,11 +111,11 @@ section: patterns
                 />
                 <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-card-view-basic-example-masthead)"
+                  fill="url(#linearGradient-card-view-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-card-view-basic-example-masthead)"
+                  fill="url(#linearGradient-card-view-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: patterns
     <div class="pf-v6-c-masthead__content">
       <div
         class="pf-v6-c-toolbar pf-m-static"
-        id="card-view-basic-example-masthead-toolbar"
+        id="card-view-basic-example-docked-toolbar"
       >
         <div class="pf-v6-c-toolbar__content">
           <div class="pf-v6-c-toolbar__content-section">