@patternfly/patternfly 5.0.0-alpha.62 → 5.0.0-alpha.64

package/docs/components/Banner/examples/Banner.md

@@ -77,7 +77,7 @@ Banners can be styled with one of 5 different colors. A basic banner should only
 
 ### Status
 
-When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-screen-reader` or an equivalent.
+When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-v5-screen-reader` or an equivalent.
 
 ```html
 <div class="pf-v5-c-banner">

package/docs/components/CalendarMonth/examples/CalendarMonth.md

@@ -1664,7 +1664,7 @@ cssPrefix: pf-v5-c-calendar-month
 | -- | -- | -- |
 | `aria-hidden="true"` | `.pf-v5-c-calendar-month__header-nav-control > button > [icon]` | Hides the nav control icon from assistive technologies. **Required** |
 | `aria-hidden="true"` | `.pf-v5-c-calendar-month__day > span` | Hides the visual day of the month label from assistive technologies. **Required** |
-| `.pf-screen-reader` | `.pf-v5-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
+| `.pf-v5-screen-reader` | `.pf-v5-c-calendar-month__day > span` | Hides the full day of the month text visually. **Required** |
 | `aria-label="[Prev/Next] month"` | `.pf-v5-c-calendar-month__header-nav-control` | Provides an accessible label for the nav controls. **Required** |
 | `disabled` | `.pf-v5-c-calendar-month__date` | Indicates that a date is selected. **Required when the parent is `.pf-v5-c-calendar-month__dates-cell.pf-m-disabled`** |
 | `aria-label="[date] [month] [year]"` | `.pf-v5-c-calendar-month__date` | Provides an accessible label for the date button. **Required** |

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

@@ -608,7 +608,7 @@ cssPrefix: pf-v5-c-card
         <div class="pf-v5-c-card__selectable-actions">
           <div class="pf-v5-c-radio pf-m-standalone">
             <input
-              class="pf-v5-c-radio__input {{pfv &#x27;unset-prefix&#x27;}}screen-reader"
+              class="pf-v5-c-radio__input pf-v5-screen-reader"
               type="radio"
               id="card-clickable-example-sr-only-radio"
               name="card-clickable-example-sr-only-radio"
@@ -643,7 +643,7 @@ cssPrefix: pf-v5-c-card
         <div class="pf-v5-c-card__selectable-actions">
           <div class="pf-v5-c-radio pf-m-standalone">
             <input
-              class="pf-v5-c-radio__input {{pfv &#x27;unset-prefix&#x27;}}screen-reader"
+              class="pf-v5-c-radio__input pf-v5-screen-reader"
               type="radio"
               id="card-clickable-example-disabled-sr-only-radio"
               name="card-clickable-example-disabled-sr-only-radio"
@@ -682,7 +682,7 @@ cssPrefix: pf-v5-c-card
         <div class="pf-v5-c-card__selectable-actions">
           <div class="pf-v5-c-radio pf-m-standalone">
             <input
-              class="pf-v5-c-radio__input {{pfv &#x27;unset-prefix&#x27;}}screen-reader"
+              class="pf-v5-c-radio__input pf-v5-screen-reader"
               type="radio"
               id="card-clickable-example-selected-disabled-sr-only-radio"
               name="card-clickable-example-selected-disabled-sr-only-radio"

package/docs/components/InputGroup/examples/InputGroup.md

@@ -282,7 +282,7 @@ Use the input group to extend form controls by adding text, buttons, selects, et
 
 ### Accessibility
 
-When using the `.pf-v5-c-input-group` always ensure labels are used outside the input group with the `.pf-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
+When using the `.pf-v5-c-input-group` always ensure labels are used outside the input group with the `.pf-v5-screen-reader` class applied. You can also make use of the `aria-describedby`, `aria-label`, or `aria-labelledby` attributes. For more information on accessibility and forms see the [form component](/components/form).
 
 | Attribute | Applied to | Outcome |
 | -- | -- | -- |

package/docs/components/Popover/examples/Popover.md

@@ -653,7 +653,7 @@ A popover is used to provide contextual information for another component on cli
 | `aria-modal="true"` | `.pf-v5-c-popover` | Tells assistive technologies that the windows underneath the current popover are not available for interaction. **Required**|
 | `aria-label="Close"` | `.pf-v5-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 the popover is open. | Hides main contents of the page from screen readers. The element with `.pf-v5-c-popover` 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** |
-| `.pf-screen-reader` | `.pf-v5-c-popover__title-text <span>` | Adds text to be read saying the alert status before the title. If `.pf-v5-c-popover__title-text` is not used to create a title, this must be added within the title. **Required for popovers that are alerts** |
+| `.pf-v5-screen-reader` | `.pf-v5-c-popover__title-text <span>` | Adds text to be read saying the alert status before the title. If `.pf-v5-c-popover__title-text` is not used to create a title, this must be added within the title. **Required for popovers that are alerts** |
 
 ### Usage
 

package/docs/utilities/Accessibility/examples/Accessibility.md

@@ -18,7 +18,7 @@ Content available only to screen reader, open inspector to investigate
 ```html
 <span
   class="pf-v5-u-visible"
->This unsets .pf-v5-u-screen-reader and .pf-screen-reader. It will be visible.</span>
+>This unsets .pf-v5-u-screen-reader and .pf-v5-screen-reader. It will be visible.</span>
 
 ```
 
@@ -41,4 +41,4 @@ The text underneath is hidden.
 | Class | Applied to | Outcome |
 | -- | -- | -- |
 | `.pf-v5-u-screen-reader{-on-[breakpoint]}` | `*` |  Visually hides element, but leaves accessible to assistive technologies |
-| `.pf-v5-u-visible{-on-[breakpoint]}` | `*` |  Unsets `.pf-v5-u-screen-reader` and `.pf-screen-reader` |
+| `.pf-v5-u-visible{-on-[breakpoint]}` | `*` |  Unsets `.pf-v5-u-screen-reader` and `.pf-v5-screen-reader` |

package/layouts/Flex/flex.css

@@ -1620,6 +1620,10 @@
   --pf-v5-l-flex--RowGap: 0;
   --pf-v5-l-flex--ColumnGap: 0;
 }
+.pf-v5-l-flex.pf-m-gap-xs {
+  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
+  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
+}
 .pf-v5-l-flex.pf-m-gap-sm {
   --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
   --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1648,7 +1652,7 @@
   --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
   --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
 }
-.pf-v5-l-flex:is(.pf-m-gap, .pf-m-gap-none, .pf-m-gap-sm, .pf-m-gap-md, .pf-m-gap-lg, .pf-m-gap-xl, .pf-m-gap-2xl, .pf-m-gap-3xl, .pf-m-gap-4xl) > * {
+.pf-v5-l-flex:is(.pf-m-gap, .pf-m-gap-none, .pf-m-gap-xs, .pf-m-gap-sm, .pf-m-gap-md, .pf-m-gap-lg, .pf-m-gap-xl, .pf-m-gap-2xl, .pf-m-gap-3xl, .pf-m-gap-4xl) > * {
   --pf-v5-l-flex--spacer--row: 0;
   --pf-v5-l-flex--spacer--column: 0;
 }
@@ -1661,6 +1665,10 @@
     --pf-v5-l-flex--RowGap: 0;
     --pf-v5-l-flex--ColumnGap: 0;
   }
+  .pf-v5-l-flex.pf-m-gap-xs-on-sm {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-gap-sm-on-sm {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1689,7 +1697,7 @@
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-gap-on-sm, .pf-m-gap-none-on-sm, .pf-m-gap-sm-on-sm, .pf-m-gap-md-on-sm, .pf-m-gap-lg-on-sm, .pf-m-gap-xl-on-sm, .pf-m-gap-2xl-on-sm, .pf-m-gap-3xl-on-sm, .pf-m-gap-4xl-on-sm) > * {
+  .pf-v5-l-flex:is(.pf-m-gap-on-sm, .pf-m-gap-none-on-sm, .pf-m-gap-xs-on-sm, .pf-m-gap-sm-on-sm, .pf-m-gap-md-on-sm, .pf-m-gap-lg-on-sm, .pf-m-gap-xl-on-sm, .pf-m-gap-2xl-on-sm, .pf-m-gap-3xl-on-sm, .pf-m-gap-4xl-on-sm) > * {
     --pf-v5-l-flex--spacer--row: 0;
     --pf-v5-l-flex--spacer--column: 0;
   }
@@ -1703,6 +1711,10 @@
     --pf-v5-l-flex--RowGap: 0;
     --pf-v5-l-flex--ColumnGap: 0;
   }
+  .pf-v5-l-flex.pf-m-gap-xs-on-md {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-gap-sm-on-md {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1731,7 +1743,7 @@
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-gap-on-md, .pf-m-gap-none-on-md, .pf-m-gap-sm-on-md, .pf-m-gap-md-on-md, .pf-m-gap-lg-on-md, .pf-m-gap-xl-on-md, .pf-m-gap-2xl-on-md, .pf-m-gap-3xl-on-md, .pf-m-gap-4xl-on-md) > * {
+  .pf-v5-l-flex:is(.pf-m-gap-on-md, .pf-m-gap-none-on-md, .pf-m-gap-xs-on-md, .pf-m-gap-sm-on-md, .pf-m-gap-md-on-md, .pf-m-gap-lg-on-md, .pf-m-gap-xl-on-md, .pf-m-gap-2xl-on-md, .pf-m-gap-3xl-on-md, .pf-m-gap-4xl-on-md) > * {
     --pf-v5-l-flex--spacer--row: 0;
     --pf-v5-l-flex--spacer--column: 0;
   }
@@ -1745,6 +1757,10 @@
     --pf-v5-l-flex--RowGap: 0;
     --pf-v5-l-flex--ColumnGap: 0;
   }
+  .pf-v5-l-flex.pf-m-gap-xs-on-lg {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-gap-sm-on-lg {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1773,7 +1789,7 @@
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-gap-on-lg, .pf-m-gap-none-on-lg, .pf-m-gap-sm-on-lg, .pf-m-gap-md-on-lg, .pf-m-gap-lg-on-lg, .pf-m-gap-xl-on-lg, .pf-m-gap-2xl-on-lg, .pf-m-gap-3xl-on-lg, .pf-m-gap-4xl-on-lg) > * {
+  .pf-v5-l-flex:is(.pf-m-gap-on-lg, .pf-m-gap-none-on-lg, .pf-m-gap-xs-on-lg, .pf-m-gap-sm-on-lg, .pf-m-gap-md-on-lg, .pf-m-gap-lg-on-lg, .pf-m-gap-xl-on-lg, .pf-m-gap-2xl-on-lg, .pf-m-gap-3xl-on-lg, .pf-m-gap-4xl-on-lg) > * {
     --pf-v5-l-flex--spacer--row: 0;
     --pf-v5-l-flex--spacer--column: 0;
   }
@@ -1787,6 +1803,10 @@
     --pf-v5-l-flex--RowGap: 0;
     --pf-v5-l-flex--ColumnGap: 0;
   }
+  .pf-v5-l-flex.pf-m-gap-xs-on-xl {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-gap-sm-on-xl {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1815,7 +1835,7 @@
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-gap-on-xl, .pf-m-gap-none-on-xl, .pf-m-gap-sm-on-xl, .pf-m-gap-md-on-xl, .pf-m-gap-lg-on-xl, .pf-m-gap-xl-on-xl, .pf-m-gap-2xl-on-xl, .pf-m-gap-3xl-on-xl, .pf-m-gap-4xl-on-xl) > * {
+  .pf-v5-l-flex:is(.pf-m-gap-on-xl, .pf-m-gap-none-on-xl, .pf-m-gap-xs-on-xl, .pf-m-gap-sm-on-xl, .pf-m-gap-md-on-xl, .pf-m-gap-lg-on-xl, .pf-m-gap-xl-on-xl, .pf-m-gap-2xl-on-xl, .pf-m-gap-3xl-on-xl, .pf-m-gap-4xl-on-xl) > * {
     --pf-v5-l-flex--spacer--row: 0;
     --pf-v5-l-flex--spacer--column: 0;
   }
@@ -1829,6 +1849,10 @@
     --pf-v5-l-flex--RowGap: 0;
     --pf-v5-l-flex--ColumnGap: 0;
   }
+  .pf-v5-l-flex.pf-m-gap-xs-on-2xl {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-gap-sm-on-2xl {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
@@ -1857,7 +1881,7 @@
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-gap-on-2xl, .pf-m-gap-none-on-2xl, .pf-m-gap-sm-on-2xl, .pf-m-gap-md-on-2xl, .pf-m-gap-lg-on-2xl, .pf-m-gap-xl-on-2xl, .pf-m-gap-2xl-on-2xl, .pf-m-gap-3xl-on-2xl, .pf-m-gap-4xl-on-2xl) > * {
+  .pf-v5-l-flex:is(.pf-m-gap-on-2xl, .pf-m-gap-none-on-2xl, .pf-m-gap-xs-on-2xl, .pf-m-gap-sm-on-2xl, .pf-m-gap-md-on-2xl, .pf-m-gap-lg-on-2xl, .pf-m-gap-xl-on-2xl, .pf-m-gap-2xl-on-2xl, .pf-m-gap-3xl-on-2xl, .pf-m-gap-4xl-on-2xl) > * {
     --pf-v5-l-flex--spacer--row: 0;
     --pf-v5-l-flex--spacer--column: 0;
   }
@@ -1868,6 +1892,9 @@
 .pf-v5-l-flex.pf-m-row-gap-none {
   --pf-v5-l-flex--RowGap: 0;
 }
+.pf-v5-l-flex.pf-m-row-gap-xs {
+  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
+}
 .pf-v5-l-flex.pf-m-row-gap-sm {
   --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
 }
@@ -1889,7 +1916,7 @@
 .pf-v5-l-flex.pf-m-row-gap-4xl {
   --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
 }
-.pf-v5-l-flex:is(.pf-m-row-gap, .pf-m-row-gap-none, .pf-m-row-gap-sm, .pf-m-row-gap-md, .pf-m-row-gap-lg, .pf-m-row-gap-xl, .pf-m-row-gap-2xl, .pf-m-row-gap-3xl, .pf-m-row-gap-4xl) > * {
+.pf-v5-l-flex:is(.pf-m-row-gap, .pf-m-row-gap-none, .pf-m-row-gap-xs, .pf-m-row-gap-sm, .pf-m-row-gap-md, .pf-m-row-gap-lg, .pf-m-row-gap-xl, .pf-m-row-gap-2xl, .pf-m-row-gap-3xl, .pf-m-row-gap-4xl) > * {
   --pf-v5-l-flex--spacer--row: 0;
 }
 @media (min-width: 576px) {
@@ -1899,6 +1926,9 @@
   .pf-v5-l-flex.pf-m-row-gap-none-on-sm {
     --pf-v5-l-flex--RowGap: 0;
   }
+  .pf-v5-l-flex.pf-m-row-gap-xs-on-sm {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-row-gap-sm-on-sm {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
   }
@@ -1920,7 +1950,7 @@
   .pf-v5-l-flex.pf-m-row-gap-4xl-on-sm {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-row-gap-on-sm, .pf-m-row-gap-none-on-sm, .pf-m-row-gap-sm-on-sm, .pf-m-row-gap-md-on-sm, .pf-m-row-gap-lg-on-sm, .pf-m-row-gap-xl-on-sm, .pf-m-row-gap-2xl-on-sm, .pf-m-row-gap-3xl-on-sm, .pf-m-row-gap-4xl-on-sm) > * {
+  .pf-v5-l-flex:is(.pf-m-row-gap-on-sm, .pf-m-row-gap-none-on-sm, .pf-m-row-gap-xs-on-sm, .pf-m-row-gap-sm-on-sm, .pf-m-row-gap-md-on-sm, .pf-m-row-gap-lg-on-sm, .pf-m-row-gap-xl-on-sm, .pf-m-row-gap-2xl-on-sm, .pf-m-row-gap-3xl-on-sm, .pf-m-row-gap-4xl-on-sm) > * {
     --pf-v5-l-flex--spacer--row: 0;
   }
 }
@@ -1931,6 +1961,9 @@
   .pf-v5-l-flex.pf-m-row-gap-none-on-md {
     --pf-v5-l-flex--RowGap: 0;
   }
+  .pf-v5-l-flex.pf-m-row-gap-xs-on-md {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-row-gap-sm-on-md {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
   }
@@ -1952,7 +1985,7 @@
   .pf-v5-l-flex.pf-m-row-gap-4xl-on-md {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-row-gap-on-md, .pf-m-row-gap-none-on-md, .pf-m-row-gap-sm-on-md, .pf-m-row-gap-md-on-md, .pf-m-row-gap-lg-on-md, .pf-m-row-gap-xl-on-md, .pf-m-row-gap-2xl-on-md, .pf-m-row-gap-3xl-on-md, .pf-m-row-gap-4xl-on-md) > * {
+  .pf-v5-l-flex:is(.pf-m-row-gap-on-md, .pf-m-row-gap-none-on-md, .pf-m-row-gap-xs-on-md, .pf-m-row-gap-sm-on-md, .pf-m-row-gap-md-on-md, .pf-m-row-gap-lg-on-md, .pf-m-row-gap-xl-on-md, .pf-m-row-gap-2xl-on-md, .pf-m-row-gap-3xl-on-md, .pf-m-row-gap-4xl-on-md) > * {
     --pf-v5-l-flex--spacer--row: 0;
   }
 }
@@ -1963,6 +1996,9 @@
   .pf-v5-l-flex.pf-m-row-gap-none-on-lg {
     --pf-v5-l-flex--RowGap: 0;
   }
+  .pf-v5-l-flex.pf-m-row-gap-xs-on-lg {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-row-gap-sm-on-lg {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
   }
@@ -1984,7 +2020,7 @@
   .pf-v5-l-flex.pf-m-row-gap-4xl-on-lg {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-row-gap-on-lg, .pf-m-row-gap-none-on-lg, .pf-m-row-gap-sm-on-lg, .pf-m-row-gap-md-on-lg, .pf-m-row-gap-lg-on-lg, .pf-m-row-gap-xl-on-lg, .pf-m-row-gap-2xl-on-lg, .pf-m-row-gap-3xl-on-lg, .pf-m-row-gap-4xl-on-lg) > * {
+  .pf-v5-l-flex:is(.pf-m-row-gap-on-lg, .pf-m-row-gap-none-on-lg, .pf-m-row-gap-xs-on-lg, .pf-m-row-gap-sm-on-lg, .pf-m-row-gap-md-on-lg, .pf-m-row-gap-lg-on-lg, .pf-m-row-gap-xl-on-lg, .pf-m-row-gap-2xl-on-lg, .pf-m-row-gap-3xl-on-lg, .pf-m-row-gap-4xl-on-lg) > * {
     --pf-v5-l-flex--spacer--row: 0;
   }
 }
@@ -1995,6 +2031,9 @@
   .pf-v5-l-flex.pf-m-row-gap-none-on-xl {
     --pf-v5-l-flex--RowGap: 0;
   }
+  .pf-v5-l-flex.pf-m-row-gap-xs-on-xl {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-row-gap-sm-on-xl {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
   }
@@ -2016,7 +2055,7 @@
   .pf-v5-l-flex.pf-m-row-gap-4xl-on-xl {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-row-gap-on-xl, .pf-m-row-gap-none-on-xl, .pf-m-row-gap-sm-on-xl, .pf-m-row-gap-md-on-xl, .pf-m-row-gap-lg-on-xl, .pf-m-row-gap-xl-on-xl, .pf-m-row-gap-2xl-on-xl, .pf-m-row-gap-3xl-on-xl, .pf-m-row-gap-4xl-on-xl) > * {
+  .pf-v5-l-flex:is(.pf-m-row-gap-on-xl, .pf-m-row-gap-none-on-xl, .pf-m-row-gap-xs-on-xl, .pf-m-row-gap-sm-on-xl, .pf-m-row-gap-md-on-xl, .pf-m-row-gap-lg-on-xl, .pf-m-row-gap-xl-on-xl, .pf-m-row-gap-2xl-on-xl, .pf-m-row-gap-3xl-on-xl, .pf-m-row-gap-4xl-on-xl) > * {
     --pf-v5-l-flex--spacer--row: 0;
   }
 }
@@ -2027,6 +2066,9 @@
   .pf-v5-l-flex.pf-m-row-gap-none-on-2xl {
     --pf-v5-l-flex--RowGap: 0;
   }
+  .pf-v5-l-flex.pf-m-row-gap-xs-on-2xl {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-row-gap-sm-on-2xl {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--sm);
   }
@@ -2048,7 +2090,7 @@
   .pf-v5-l-flex.pf-m-row-gap-4xl-on-2xl {
     --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-row-gap-on-2xl, .pf-m-row-gap-none-on-2xl, .pf-m-row-gap-sm-on-2xl, .pf-m-row-gap-md-on-2xl, .pf-m-row-gap-lg-on-2xl, .pf-m-row-gap-xl-on-2xl, .pf-m-row-gap-2xl-on-2xl, .pf-m-row-gap-3xl-on-2xl, .pf-m-row-gap-4xl-on-2xl) > * {
+  .pf-v5-l-flex:is(.pf-m-row-gap-on-2xl, .pf-m-row-gap-none-on-2xl, .pf-m-row-gap-xs-on-2xl, .pf-m-row-gap-sm-on-2xl, .pf-m-row-gap-md-on-2xl, .pf-m-row-gap-lg-on-2xl, .pf-m-row-gap-xl-on-2xl, .pf-m-row-gap-2xl-on-2xl, .pf-m-row-gap-3xl-on-2xl, .pf-m-row-gap-4xl-on-2xl) > * {
     --pf-v5-l-flex--spacer--row: 0;
   }
 }
@@ -2058,6 +2100,9 @@
 .pf-v5-l-flex.pf-m-column-gap-none {
   --pf-v5-l-flex--ColumnGap: 0;
 }
+.pf-v5-l-flex.pf-m-column-gap-xs {
+  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
+}
 .pf-v5-l-flex.pf-m-column-gap-sm {
   --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
 }
@@ -2079,7 +2124,7 @@
 .pf-v5-l-flex.pf-m-column-gap-4xl {
   --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
 }
-.pf-v5-l-flex:is(.pf-m-column-gap, .pf-m-column-gap-none, .pf-m-column-gap-sm, .pf-m-column-gap-md, .pf-m-column-gap-lg, .pf-m-column-gap-xl, .pf-m-column-gap-2xl, .pf-m-column-gap-3xl, .pf-m-column-gap-4xl) > * {
+.pf-v5-l-flex:is(.pf-m-column-gap, .pf-m-column-gap-none, .pf-m-column-gap-xs, .pf-m-column-gap-sm, .pf-m-column-gap-md, .pf-m-column-gap-lg, .pf-m-column-gap-xl, .pf-m-column-gap-2xl, .pf-m-column-gap-3xl, .pf-m-column-gap-4xl) > * {
   --pf-v5-l-flex--spacer--column: 0;
 }
 @media (min-width: 576px) {
@@ -2089,6 +2134,9 @@
   .pf-v5-l-flex.pf-m-column-gap-none-on-sm {
     --pf-v5-l-flex--ColumnGap: 0;
   }
+  .pf-v5-l-flex.pf-m-column-gap-xs-on-sm {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-column-gap-sm-on-sm {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
   }
@@ -2110,7 +2158,7 @@
   .pf-v5-l-flex.pf-m-column-gap-4xl-on-sm {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-column-gap-on-sm, .pf-m-column-gap-none-on-sm, .pf-m-column-gap-sm-on-sm, .pf-m-column-gap-md-on-sm, .pf-m-column-gap-lg-on-sm, .pf-m-column-gap-xl-on-sm, .pf-m-column-gap-2xl-on-sm, .pf-m-column-gap-3xl-on-sm, .pf-m-column-gap-4xl-on-sm) > * {
+  .pf-v5-l-flex:is(.pf-m-column-gap-on-sm, .pf-m-column-gap-none-on-sm, .pf-m-column-gap-xs-on-sm, .pf-m-column-gap-sm-on-sm, .pf-m-column-gap-md-on-sm, .pf-m-column-gap-lg-on-sm, .pf-m-column-gap-xl-on-sm, .pf-m-column-gap-2xl-on-sm, .pf-m-column-gap-3xl-on-sm, .pf-m-column-gap-4xl-on-sm) > * {
     --pf-v5-l-flex--spacer--column: 0;
   }
 }
@@ -2121,6 +2169,9 @@
   .pf-v5-l-flex.pf-m-column-gap-none-on-md {
     --pf-v5-l-flex--ColumnGap: 0;
   }
+  .pf-v5-l-flex.pf-m-column-gap-xs-on-md {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-column-gap-sm-on-md {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
   }
@@ -2142,7 +2193,7 @@
   .pf-v5-l-flex.pf-m-column-gap-4xl-on-md {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-column-gap-on-md, .pf-m-column-gap-none-on-md, .pf-m-column-gap-sm-on-md, .pf-m-column-gap-md-on-md, .pf-m-column-gap-lg-on-md, .pf-m-column-gap-xl-on-md, .pf-m-column-gap-2xl-on-md, .pf-m-column-gap-3xl-on-md, .pf-m-column-gap-4xl-on-md) > * {
+  .pf-v5-l-flex:is(.pf-m-column-gap-on-md, .pf-m-column-gap-none-on-md, .pf-m-column-gap-xs-on-md, .pf-m-column-gap-sm-on-md, .pf-m-column-gap-md-on-md, .pf-m-column-gap-lg-on-md, .pf-m-column-gap-xl-on-md, .pf-m-column-gap-2xl-on-md, .pf-m-column-gap-3xl-on-md, .pf-m-column-gap-4xl-on-md) > * {
     --pf-v5-l-flex--spacer--column: 0;
   }
 }
@@ -2153,6 +2204,9 @@
   .pf-v5-l-flex.pf-m-column-gap-none-on-lg {
     --pf-v5-l-flex--ColumnGap: 0;
   }
+  .pf-v5-l-flex.pf-m-column-gap-xs-on-lg {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-column-gap-sm-on-lg {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
   }
@@ -2174,7 +2228,7 @@
   .pf-v5-l-flex.pf-m-column-gap-4xl-on-lg {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-column-gap-on-lg, .pf-m-column-gap-none-on-lg, .pf-m-column-gap-sm-on-lg, .pf-m-column-gap-md-on-lg, .pf-m-column-gap-lg-on-lg, .pf-m-column-gap-xl-on-lg, .pf-m-column-gap-2xl-on-lg, .pf-m-column-gap-3xl-on-lg, .pf-m-column-gap-4xl-on-lg) > * {
+  .pf-v5-l-flex:is(.pf-m-column-gap-on-lg, .pf-m-column-gap-none-on-lg, .pf-m-column-gap-xs-on-lg, .pf-m-column-gap-sm-on-lg, .pf-m-column-gap-md-on-lg, .pf-m-column-gap-lg-on-lg, .pf-m-column-gap-xl-on-lg, .pf-m-column-gap-2xl-on-lg, .pf-m-column-gap-3xl-on-lg, .pf-m-column-gap-4xl-on-lg) > * {
     --pf-v5-l-flex--spacer--column: 0;
   }
 }
@@ -2185,6 +2239,9 @@
   .pf-v5-l-flex.pf-m-column-gap-none-on-xl {
     --pf-v5-l-flex--ColumnGap: 0;
   }
+  .pf-v5-l-flex.pf-m-column-gap-xs-on-xl {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-column-gap-sm-on-xl {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
   }
@@ -2206,7 +2263,7 @@
   .pf-v5-l-flex.pf-m-column-gap-4xl-on-xl {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-column-gap-on-xl, .pf-m-column-gap-none-on-xl, .pf-m-column-gap-sm-on-xl, .pf-m-column-gap-md-on-xl, .pf-m-column-gap-lg-on-xl, .pf-m-column-gap-xl-on-xl, .pf-m-column-gap-2xl-on-xl, .pf-m-column-gap-3xl-on-xl, .pf-m-column-gap-4xl-on-xl) > * {
+  .pf-v5-l-flex:is(.pf-m-column-gap-on-xl, .pf-m-column-gap-none-on-xl, .pf-m-column-gap-xs-on-xl, .pf-m-column-gap-sm-on-xl, .pf-m-column-gap-md-on-xl, .pf-m-column-gap-lg-on-xl, .pf-m-column-gap-xl-on-xl, .pf-m-column-gap-2xl-on-xl, .pf-m-column-gap-3xl-on-xl, .pf-m-column-gap-4xl-on-xl) > * {
     --pf-v5-l-flex--spacer--column: 0;
   }
 }
@@ -2217,6 +2274,9 @@
   .pf-v5-l-flex.pf-m-column-gap-none-on-2xl {
     --pf-v5-l-flex--ColumnGap: 0;
   }
+  .pf-v5-l-flex.pf-m-column-gap-xs-on-2xl {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--xs);
+  }
   .pf-v5-l-flex.pf-m-column-gap-sm-on-2xl {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--sm);
   }
@@ -2238,7 +2298,7 @@
   .pf-v5-l-flex.pf-m-column-gap-4xl-on-2xl {
     --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
   }
-  .pf-v5-l-flex:is(.pf-m-column-gap-on-2xl, .pf-m-column-gap-none-on-2xl, .pf-m-column-gap-sm-on-2xl, .pf-m-column-gap-md-on-2xl, .pf-m-column-gap-lg-on-2xl, .pf-m-column-gap-xl-on-2xl, .pf-m-column-gap-2xl-on-2xl, .pf-m-column-gap-3xl-on-2xl, .pf-m-column-gap-4xl-on-2xl) > * {
+  .pf-v5-l-flex:is(.pf-m-column-gap-on-2xl, .pf-m-column-gap-none-on-2xl, .pf-m-column-gap-xs-on-2xl, .pf-m-column-gap-sm-on-2xl, .pf-m-column-gap-md-on-2xl, .pf-m-column-gap-lg-on-2xl, .pf-m-column-gap-xl-on-2xl, .pf-m-column-gap-2xl-on-2xl, .pf-m-column-gap-3xl-on-2xl, .pf-m-column-gap-4xl-on-2xl) > * {
     --pf-v5-l-flex--spacer--column: 0;
   }
 }

package/layouts/Flex/flex.scss

@@ -1,7 +1,7 @@
 // Always keep list of spacers and breakpoints up-to-date
 $pf-v5-l-flex--breakpoint-map: build-breakpoint-map();
 $pf-v5-l-flex--spacer-map: build-spacer-map();
-$pf-v5-l-flex--gap-map: build-spacer-map("base", "none", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl");
+$pf-v5-l-flex--gap-map: build-spacer-map("base", "none", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl");
 $pf-v5-l-flex--variable-map: build-variable-map("#{$pf-prefix}l-flex--spacer", $pf-v5-l-flex--spacer-map);
 
 .#{$flex} {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "5.0.0-alpha.62",
+  "version": "5.0.0-alpha.64",
   "keywords": [],
   "license": "MIT",
   "scripts": {