@patternfly/patternfly 6.5.0-prerelease.33 → 6.5.0-prerelease.35

package/docs/components/Compass/examples/Compass.md

@@ -8,7 +8,15 @@ cssPrefix: pf-v6-c-compass
 
 ## Examples
 
-### Default
+### Basic
+
+In a basic Compass layout, the page structure is defined by the order of elements nested within the main `.pf-v6-c-compass` container:
+
+* **Header:** Content rendered at the top of the page (`.pf-v6-c-compass__header`), typically containing a logo (`.pf-v6-c-compass__logo`), middle navigation (`.pf-v6-c-compass__nav`), and profile (`.pf-v6-c-compass__profile`).
+* **Start sidebar:** Content rendered at the horizontal start of the page (by default, the left side). In this example, a `.pf-v6-c-compass__sidebar` with the `.pf-m-start` modifier.
+* **Main:** Content rendered in the center of the page. The `.pf-v6-c-compass__main` wrapper contains a [hero component](/components/hero), the main header (`.pf-v6-c-compass__main-header`), the content area (`.pf-v6-c-compass__content`), and the main footer (`.pf-v6-c-compass__main-footer`) with the message bar.
+* **End sidebar:** Content rendered at the horizontal end of the page (by default, the right side). In this example, a `.pf-v6-c-compass__sidebar` with the `.pf-m-end` modifier.
+* **Footer:** Content rendered at the bottom of the page (`.pf-v6-c-compass__footer`).
 
 ```html isBeta
 <div class="pf-v6-c-compass pf-m-animate-smoothly">
@@ -77,36 +85,34 @@ cssPrefix: pf-v6-c-compass
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v6-c-compass` | `<div>` | Initiates the compass component. **Required** |
-| `.pf-v6-c-compass__header` | `<div>` | Initiates the compass header. **Required** |
-| `.pf-v6-c-compass__logo` | `<div>` | Initiates the compass logo header. |
-| `.pf-v6-c-compass__nav` | `<div>` | Initiates the compass nav. |
-| `.pf-v6-c-compass__dock` | `<div>` | Initiates the compass dock. |
-| `.pf-v6-c-compass__profile` | `<div>` | Initiates the compass profile. |
-| `.pf-v6-c-compass__sidebar` | `<div>` | Initiates a compass sidebar. **Required** |
-| `.pf-v6-c-compass__main` | `<div>` | Initiates the compass main wrapper. **Required** |
-| `.pf-v6-c-compass__main-header` | `<div>` | Initiates the compass main header. |
-| `.pf-v6-c-compass__main-header-content` | `<div>` | Initiates the compass main header content. This should be passed into a `.pf-v6-c-compass__panel` component. |
-| `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the compass main header content. |
-| `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the compass main header content. |
-| `.pf-v6-c-compass__content` | `<div>` | Initiates the compass content. **Required** |
-| `.pf-v6-c-compass__main-footer` | `<div>` | Initiates the compass main footer. **Required** |
-| `.pf-v6-c-compass__panel` | `<div>` | Initiates a compass panel. |
-| `.pf-v6-c-compass__nav` | `<div>` | Initiates a compass container for site navigation. |
-| `.pf-v6-c-compass__nav-content` | `<div>` | Initiates a compass container for navigation content. |
-| `.pf-v6-c-compass__nav-home` | `<div>` | Initiates a container for compass home button. |
-| `.pf-v6-c-compass__nav-main` | `<div>` | Initiates a container for compass navigation main content. |
-| `.pf-v6-c-compass__nav-search` | `<div>` | Initiates a container for compass search button. |
-| `.pf-v6-c-compass__hero` | `<div>` | Initiates a compass hero. |
-| `.pf-v6-c-compass__footer` | `<div>` | Initiates the compass footer. |
-| `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the compass message bar. |
+| `.pf-v6-c-compass` | `<div>` | Initiates the Compass component. **Required** |
+| `.pf-v6-c-compass__header` | `<div>` | Initiates the Compass header. **Required** |
+| `.pf-v6-c-compass__logo` | `<div>` | Initiates the Compass logo header. |
+| `.pf-v6-c-compass__dock` | `<div>` | Initiates the Compass dock. |
+| `.pf-v6-c-compass__profile` | `<div>` | Initiates the Compass profile. |
+| `.pf-v6-c-compass__sidebar` | `<div>` | Initiates a Compass sidebar. **Required** |
+| `.pf-v6-c-compass__main` | `<div>` | Initiates the Compass main wrapper. **Required** |
+| `.pf-v6-c-compass__main-header` | `<div>` | Initiates the Compass main header. |
+| `.pf-v6-c-compass__main-header-content` | `<div>` | Initiates the Compass main header content. This should be passed into a `.pf-v6-c-compass__panel` component. |
+| `.pf-v6-c-compass__main-header-title` | `<div>` | Initiates a title within the Compass main header content. |
+| `.pf-v6-c-compass__main-header-toolbar` | `<div>` | Initiates a toolbar of actions within the Compass main header content. |
+| `.pf-v6-c-compass__content` | `<div>` | Initiates the Compass content. **Required** |
+| `.pf-v6-c-compass__main-footer` | `<div>` | Initiates the Compass main footer. **Required** |
+| `.pf-v6-c-compass__panel` | `<div>` | Initiates a Compass panel. |
+| `.pf-v6-c-compass__nav` | `<div>` | Initiates a Compass container for site navigation. |
+| `.pf-v6-c-compass__nav-content` | `<div>` | Initiates a Compass container for navigation content. |
+| `.pf-v6-c-compass__nav-home` | `<div>` | Initiates a container for Compass home button. |
+| `.pf-v6-c-compass__nav-main` | `<div>` | Initiates a container for Compass navigation main content. |
+| `.pf-v6-c-compass__nav-search` | `<div>` | Initiates a container for Compass search button. |
+| `.pf-v6-c-compass__footer` | `<div>` | Initiates the Compass footer. |
+| `.pf-v6-c-compass__message-bar` | `<div>` | Initiates the Compass message bar. |
 | `.pf-m-dock` | `.pf-v6-c-compass` | Modifies for dock layout. |
 | `.pf-m-no-glass` | `.pf-v6-c-compass`, `.pf-v6-c-compass__panel` | Modifies all elements or individual panels to remove the glass styles. |
-| `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a compass sidebar for start styles. **Required** |
-| `.pf-m-end` | `.pf-v6-c-compass__sidebar` | Modifies a compass sidebar for end styles. **Required** |
-| `.pf-m-no-border` | `.pf-v6-c-compass__panel` | Modifies a compass panel to remove the border. |
-| `.pf-m-no-padding` | `.pf-v6-c-compass__panel` | Modifies a compass panel to remove the padding. |
-| `.pf-m-full-height` | `.pf-v6-c-compass__panel` | Modifies a compass panel to be full height. |
-| `.pf-m-pill` | `.pf-v6-c-compass__panel` | Modifies a compass panel to have a pill shaped border radius. |
-| `.pf-m-scrollable` | `.pf-v6-c-compass__panel` | Modifies a compass panel to scroll its overflow. |
-| `.pf-m-expanded` | `.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`, `.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer` | Modifies a compass section for expanded styles. |
+| `.pf-m-start` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for start styles. **Required** |
+| `.pf-m-end` | `.pf-v6-c-compass__sidebar` | Modifies a Compass sidebar for end styles. **Required** |
+| `.pf-m-no-border` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to remove the border. |
+| `.pf-m-no-padding` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to remove the padding. |
+| `.pf-m-full-height` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to be full height. |
+| `.pf-m-pill` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to have a pill-shaped border radius. |
+| `.pf-m-scrollable` | `.pf-v6-c-compass__panel` | Modifies a Compass panel to scroll its overflow. |
+| `.pf-m-expanded` | `.pf-v6-c-compass__header`, `.pf-v6-c-compass__sidebar`, `.pf-v6-c-compass__main-footer`, `.pf-v6-c-compass__footer` | Modifies a Compass section for expanded styles. |

package/docs/components/ModalBox/examples/ModalBox.md

@@ -597,7 +597,7 @@ A modal box is a generic rectangular container that can be used to build modals.
 | `aria-describedby="[id value of applicable content]"` | `.pf-v6-c-modal-box` | Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal. |
 | `aria-modal="true"` | `.pf-v6-c-modal-box` | Tells assistive technologies that the windows underneath the current modal are not available for interaction. **Required**|
 | `aria-label="Close"` | `.pf-v6-c-modal-box__close .pf-v6-c-button` | Provides an accessible name for the close button as it uses an icon instead of text. **Required**|
-| `aria-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-v6-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/product-development-guide#trapping-focus). **Required** |
+| `aria-hidden="true"` | Parent element containing the page contents when modal is open | Hides main contents of the page from screen readers. The element with `.pf-v6-c-modal-box` must not be a descendent of the element with `aria-hidden="true"`. For more info see [trapping focus](/accessibility/develop#trapping-focus). **Required** |
 | `form="[id of form in modal body]"` | `.pf-v6-c-modal-box__footer .pf-v6-c-button` | Associates a submit button in the modal footer with a form in the modal body. For use when the submit button is outside of the `<form>` that the button submits. |
 | `tabindex="0"` | `.pf-v6-c-modal-box__body` | If a modal box body has overflow content that triggers a scrollbar, to ensure that the content is keyboard accessible, the body must include either a focusable element within the scrollable region or the body itself must be focusable by adding `tabindex="0"`. |
 

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/demos/Compass/examples/Compass.md

@@ -7,6 +7,11 @@ wrapperTag: div
 
 ### Card view
 
+This demo populates the main Compass section with a card view, which is one of the more common page types used within a Compass layout. In this demo, the page includes:
+
+* A `.pf-v6-c-compass__main-header` that contains the page title and toolbar with action items.
+* A `.pf-v6-c-compass__content`, which contains a `.pf-v6-c-compass__panel` to create a rounded-rectangle container that serves as the main content background.
+
 ```html isFullscreen isBeta
 <div
   class="pf-v6-c-compass pf-m-animate-smoothly"
@@ -1321,6 +1326,11 @@ wrapperTag: div
 
 ### Dashboard
 
+This demo populates the main Compass section with a dashboard, which is often used as the landing page within a Compass layout. This demo page includes:
+
+* A `.pf-v6-c-hero` component positioned between the top navigation and the main page content, containing promotional or introductory content with important CTAs.
+* A `.pf-v6-c-compass__content` without a `.pf-v6-c-compass__panel` wrapping all of the contents. This removes the rounded-rectangle container that typically serves as the main content background. Instead, the content area is a dashboard (a grid of cards), and each card is individually wrapped in`.pf-v6-c-compass__panel` to provide the rounded-rectangle styling.
+
 ```html isFullscreen isBeta
 <div
   class="pf-v6-c-compass pf-m-animate-smoothly"
@@ -2857,6 +2867,10 @@ wrapperTag: div
 
 ### Multiple sections
 
+This demo places multiple sections within the main Compass section, with each section containing a card view.
+
+Without a `.pf-v6-c-compass__panel` wrapping all of the content, there is no rounded-rectangle container as the main content background. Instead, the `.pf-v6-c-compass__content` is a grid with 2 independently scrollable `.pf-v6-c-compass__panel` elements.
+
 ```html isFullscreen isBeta
 <div
   class="pf-v6-c-compass pf-m-animate-smoothly"
@@ -4844,6 +4858,8 @@ wrapperTag: div
 
 ### With drawer
 
+This demo showcases how you can position a side-panel drawer on top of the other Compass elements.
+
 ```html isFullscreen isBeta
 <div class="pf-v6-c-drawer pf-m-expanded pf-m-pill">
   <div class="pf-v6-c-drawer__main">

package/layouts/Flex/flex.scss

@@ -1,4 +1,6 @@
 @use '../../sass-utilities' as *;
+@use 'sass:list';
+@use 'sass:map';
 
 // Always keep list of spacers and breakpoints up-to-date
 $pf-v6-l-flex--breakpoint-map: build-breakpoint-map();
@@ -74,7 +76,11 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
 .#{$flex} {
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       // display
@@ -301,13 +307,17 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
   // .pf-m-space-items-{size}{-on-[breakpoint]}
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       @each $spacer, $spacer-value in $pf-v6-l-flex--spacer-map {
         &.pf-m-space-items-#{$spacer}#{$breakpoint-name} {
           > * {
-            --#{$flex}--spacer: var(#{map-get($pf-v6-l-flex--variable-map, $spacer-value)});
+            --#{$flex}--spacer: var(#{map.get($pf-v6-l-flex--variable-map, $spacer-value)});
           }
 
           > :last-child {
@@ -320,15 +330,19 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
   // .pf-m-spacer-{size}{-on-[breakpoint]}
   @each $breakpoint, $breakpoint-value in $pf-v6-l-flex--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       @each $spacer, $spacer-value in $pf-v6-l-flex--spacer-map {
         .pf-m-spacer-#{$spacer}#{$breakpoint-name} {
-          --#{$flex}--spacer: var(#{map-get($pf-v6-l-flex--variable-map, $spacer-value)});
+          --#{$flex}--spacer: var(#{map.get($pf-v6-l-flex--variable-map, $spacer-value)});
 
           &:last-child {
-            --#{$flex}--spacer: var(#{map-get($pf-v6-l-flex--variable-map, $spacer-value)});
+            --#{$flex}--spacer: var(#{map.get($pf-v6-l-flex--variable-map, $spacer-value)});
           }
         }
       }
@@ -341,12 +355,32 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
       @include pf-v6-apply-breakpoint($breakpoint) {
         @each $spacer, $value in $pf-v6-l-flex--gap-map {
-          $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
-          $spacer-name: if($spacer == "base", "", -#{$spacer});
-          $spacer-row: if($spacer == "base", var(--#{$flex}--m-gap--RowGap), $value);
-          $spacer-column: if($spacer == "base", var(--#{$flex}--m-gap--ColumnGap), $value);
+          $breakpoint-name: -on-#{$breakpoint};
+
+          @if $breakpoint == "base" {
+            $breakpoint-name: "";
+          }
+
+          $spacer-name: -#{$spacer};
+
+          @if $spacer == "base" {
+            $spacer-name: "";
+          }
+
+          $spacer-row: $value;
+
+          @if $spacer == "base" {
+            $spacer-row: var(--#{$flex}--m-gap--RowGap);
+          }
+
+          $spacer-column: $value;
+
+          @if $spacer == "base" {
+            $spacer-column: var(--#{$flex}--m-gap--ColumnGap);
+          }
+
           $selector: ".pf-m-gap#{$spacer-name}#{$breakpoint-name}";
-          $pf-v6-l-flex--gap--selectors: append($pf-v6-l-flex--gap--selectors, $selector, $separator: comma);
+          $pf-v6-l-flex--gap--selectors: list.append($pf-v6-l-flex--gap--selectors, $selector, $separator: comma);
 
           &#{$selector} {
             --#{$flex}--RowGap: #{$spacer-row};
@@ -369,11 +403,26 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
       $pf-v6-l-flex--row-gap--selectors: ();
 
       @each $spacer, $value in $pf-v6-l-flex--gap-map {
-        $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
-        $spacer-name: if($spacer == "base", "", -#{$spacer});
-        $spacer-value: if($spacer == "base", var(--#{$flex}--m-row-gap--RowGap), $value);
+        $breakpoint-name: -on-#{$breakpoint};
+
+        @if $breakpoint == "base" {
+          $breakpoint-name: "";
+        }
+
+        $spacer-name: -#{$spacer};
+
+        @if $spacer == "base" {
+          $spacer-name: "";
+        }
+
+        $spacer-value: $value;
+
+        @if $spacer == "base" {
+          $spacer-value: var(--#{$flex}--m-row-gap--RowGap);
+        }
+
         $selector: ".pf-m-row-gap#{$spacer-name}#{$breakpoint-name}";
-        $pf-v6-l-flex--row-gap--selectors: append($pf-v6-l-flex--row-gap--selectors, $selector, $separator: comma);
+        $pf-v6-l-flex--row-gap--selectors: list.append($pf-v6-l-flex--row-gap--selectors, $selector, $separator: comma);
 
        &#{$selector} {
           --#{$flex}--RowGap: #{$spacer-value};
@@ -394,11 +443,26 @@ $pf-v6-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       @each $spacer, $value in $pf-v6-l-flex--gap-map {
-        $breakpoint-name: if($breakpoint == "base", "", -on-#{$breakpoint});
-        $spacer-name: if($spacer == "base", "", -#{$spacer});
-        $spacer-value: if($spacer == "base", var(--#{$flex}--m-column-gap--ColumnGap), $value);
+        $breakpoint-name: -on-#{$breakpoint};
+
+        @if $breakpoint == "base" {
+          $breakpoint-name: "";
+        }
+
+        $spacer-name: -#{$spacer};
+
+        @if $spacer == "base" {
+          $spacer-name: "";
+        }
+
+        $spacer-value: $value;
+
+        @if $spacer == "base" {
+          $spacer-value: var(--#{$flex}--m-column-gap--ColumnGap);
+        }
+
         $selector: ".pf-m-column-gap#{$spacer-name}#{$breakpoint-name}";
-        $pf-v6-l-flex--column-gap--selectors: append($pf-v6-l-flex--column-gap--selectors, $selector, $separator: comma);
+        $pf-v6-l-flex--column-gap--selectors: list.append($pf-v6-l-flex--column-gap--selectors, $selector, $separator: comma);
 
         &#{$selector} {
           --#{$flex}--ColumnGap: #{$spacer-value};

package/layouts/Gallery/gallery.css

@@ -12,12 +12,13 @@
   display: grid;
   grid-template-rows: var(--pf-v6-l-gallery--GridTemplateRows);
   grid-template-columns: var(--pf-v6-l-gallery--GridTemplateColumns);
-  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
-  --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
 }
 .pf-v6-l-gallery.pf-m-gutter {
   grid-gap: var(--pf-v6-l-gallery--m-gutter--GridGap);
 }
+.pf-v6-l-gallery {
+  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
+}
 @media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min));
@@ -43,6 +44,9 @@
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))))));
   }
 }
+.pf-v6-l-gallery {
+  --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
+}
 @media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max));

package/layouts/_index.css

@@ -2406,12 +2406,13 @@
   display: grid;
   grid-template-rows: var(--pf-v6-l-gallery--GridTemplateRows);
   grid-template-columns: var(--pf-v6-l-gallery--GridTemplateColumns);
-  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
-  --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
 }
 .pf-v6-l-gallery.pf-m-gutter {
   grid-gap: var(--pf-v6-l-gallery--m-gutter--GridGap);
 }
+.pf-v6-l-gallery {
+  --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min);
+}
 @media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min));
@@ -2437,6 +2438,9 @@
     --pf-v6-l-gallery--GridTemplateColumns--minmax--min: var(--pf-v6-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-md, var(--pf-v6-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--min))))));
   }
 }
+.pf-v6-l-gallery {
+  --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max);
+}
 @media (min-width: 36rem) {
   .pf-v6-l-gallery {
     --pf-v6-l-gallery--GridTemplateColumns--minmax--max: var(--pf-v6-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-v6-l-gallery--GridTemplateColumns--max));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.5.0-prerelease.33",
+  "version": "6.5.0-prerelease.35",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -12,6 +12,7 @@
     "backstop:approve": "backstop approve --config='backstop.js'",
     "backstop:approve:dark": "backstop approve --config='backstop.js' --dark",
     "backstop:chrome": "node backstop_data/engine_scripts/puppet/chrome.js",
+    "playwright": "node ./node_modules/playwright/cli.js",
     "build-patternfly": "gulp buildPatternfly",
     "build": "gulp build",
     "build:docs": "gulp buildWebpack",
@@ -48,7 +49,7 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.1.0",
-    "@patternfly/documentation-framework": "6.31.15",
+    "@patternfly/documentation-framework": "6.33.5",
     "@patternfly/patternfly-a11y": "5.1.0",
     "@patternfly/react-code-editor": "6.4.0",
     "@patternfly/react-core": "6.4.0",
@@ -90,6 +91,7 @@
     "react-dom": "^18.2.0",
     "remark-parse": "^11.0.0",
     "remark-stringify": "^11.0.0",
+    "resemblejs": "^5.0.0",
     "rimraf": "^6.0.1",
     "sass": "^1.74.1",
     "stylelint": "^16.3.1",