@patternfly/react-styles 5.0.0-alpha.12 → 5.0.0-alpha.14

package/css/components/Table/table.d.ts

@@ -1,6 +1,7 @@
 import './table.css';
 declare const _default: {
   "button": "pf-v5-c-button",
+  "checkInput": "pf-v5-c-check__input",
   "modifiers": {
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
@@ -59,6 +60,7 @@ declare const _default: {
   "tableAction": "pf-v5-c-table__action",
   "tableButton": "pf-v5-c-table__button",
   "tableButtonContent": "pf-v5-c-table__button-content",
+  "tableCaption": "pf-v5-c-table__caption",
   "tableCheck": "pf-v5-c-table__check",
   "tableColumnHelp": "pf-v5-c-table__column-help",
   "tableColumnHelpAction": "pf-v5-c-table__column-help-action",
@@ -74,9 +76,14 @@ declare const _default: {
   "tableSort": "pf-v5-c-table__sort",
   "tableSortIndicator": "pf-v5-c-table__sort-indicator",
   "tableSubhead": "pf-v5-c-table__subhead",
+  "tableTbody": "pf-v5-c-table__tbody",
+  "tableTd": "pf-v5-c-table__td",
   "tableText": "pf-v5-c-table__text",
+  "tableTh": "pf-v5-c-table__th",
+  "tableThead": "pf-v5-c-table__thead",
   "tableToggle": "pf-v5-c-table__toggle",
   "tableToggleIcon": "pf-v5-c-table__toggle-icon",
+  "tableTr": "pf-v5-c-table__tr",
   "themeDark": "pf-v5-theme-dark"
 };
 export default _default;

package/css/components/Table/table.js

@@ -3,6 +3,7 @@ exports.__esModule = true;
 require('./table.css');
 exports.default = {
   "button": "pf-v5-c-button",
+  "checkInput": "pf-v5-c-check__input",
   "modifiers": {
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
@@ -61,6 +62,7 @@ exports.default = {
   "tableAction": "pf-v5-c-table__action",
   "tableButton": "pf-v5-c-table__button",
   "tableButtonContent": "pf-v5-c-table__button-content",
+  "tableCaption": "pf-v5-c-table__caption",
   "tableCheck": "pf-v5-c-table__check",
   "tableColumnHelp": "pf-v5-c-table__column-help",
   "tableColumnHelpAction": "pf-v5-c-table__column-help-action",
@@ -76,8 +78,13 @@ exports.default = {
   "tableSort": "pf-v5-c-table__sort",
   "tableSortIndicator": "pf-v5-c-table__sort-indicator",
   "tableSubhead": "pf-v5-c-table__subhead",
+  "tableTbody": "pf-v5-c-table__tbody",
+  "tableTd": "pf-v5-c-table__td",
   "tableText": "pf-v5-c-table__text",
+  "tableTh": "pf-v5-c-table__th",
+  "tableThead": "pf-v5-c-table__thead",
   "tableToggle": "pf-v5-c-table__toggle",
   "tableToggleIcon": "pf-v5-c-table__toggle-icon",
+  "tableTr": "pf-v5-c-table__tr",
   "themeDark": "pf-v5-theme-dark"
 };

package/css/components/Table/table.mjs

@@ -1,6 +1,7 @@
 import './table.css';
 export default {
   "button": "pf-v5-c-button",
+  "checkInput": "pf-v5-c-check__input",
   "modifiers": {
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
@@ -59,6 +60,7 @@ export default {
   "tableAction": "pf-v5-c-table__action",
   "tableButton": "pf-v5-c-table__button",
   "tableButtonContent": "pf-v5-c-table__button-content",
+  "tableCaption": "pf-v5-c-table__caption",
   "tableCheck": "pf-v5-c-table__check",
   "tableColumnHelp": "pf-v5-c-table__column-help",
   "tableColumnHelpAction": "pf-v5-c-table__column-help-action",
@@ -74,8 +76,13 @@ export default {
   "tableSort": "pf-v5-c-table__sort",
   "tableSortIndicator": "pf-v5-c-table__sort-indicator",
   "tableSubhead": "pf-v5-c-table__subhead",
+  "tableTbody": "pf-v5-c-table__tbody",
+  "tableTd": "pf-v5-c-table__td",
   "tableText": "pf-v5-c-table__text",
+  "tableTh": "pf-v5-c-table__th",
+  "tableThead": "pf-v5-c-table__thead",
   "tableToggle": "pf-v5-c-table__toggle",
   "tableToggleIcon": "pf-v5-c-table__toggle-icon",
+  "tableTr": "pf-v5-c-table__tr",
   "themeDark": "pf-v5-theme-dark"
 };

package/css/components/Tabs/tabs.css

@@ -837,5 +837,6 @@
 :where(.pf-v5-theme-dark) .pf-v5-c-tabs {
   --pf-v5-c-tabs__scroll-button--BackgroundColor: transparent;
   --pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-global--disabled-color--300);
   --pf-v5-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
 }

package/css/components/TextInputGroup/text-input-group.css

@@ -146,4 +146,12 @@
 
 .pf-v5-c-text-input-group__group {
   display: flex;
+}
+
+:where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
+  --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
+  --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
+  --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
+  --pf-v5-c-text-input-group__text--before--BorderWidth: 0;
+  --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
 }

package/css/components/TextInputGroup/text-input-group.d.ts

@@ -14,6 +14,7 @@ declare const _default: {
   "textInputGroupMain": "pf-v5-c-text-input-group__main",
   "textInputGroupText": "pf-v5-c-text-input-group__text",
   "textInputGroupTextInput": "pf-v5-c-text-input-group__text-input",
-  "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities"
+  "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities",
+  "themeDark": "pf-v5-theme-dark"
 };
 export default _default;

package/css/components/TextInputGroup/text-input-group.js

@@ -16,5 +16,6 @@ exports.default = {
   "textInputGroupMain": "pf-v5-c-text-input-group__main",
   "textInputGroupText": "pf-v5-c-text-input-group__text",
   "textInputGroupTextInput": "pf-v5-c-text-input-group__text-input",
-  "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities"
+  "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities",
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/TextInputGroup/text-input-group.mjs

@@ -14,5 +14,6 @@ export default {
   "textInputGroupMain": "pf-v5-c-text-input-group__main",
   "textInputGroupText": "pf-v5-c-text-input-group__text",
   "textInputGroupTextInput": "pf-v5-c-text-input-group__text-input",
-  "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities"
+  "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities",
+  "themeDark": "pf-v5-theme-dark"
 };

package/css/components/Title/title.css

@@ -1,5 +1,5 @@
 .pf-v5-c-title {
-  --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-title--m-4xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
   --pf-v5-c-title--m-4xl--FontSize: var(--pf-v5-global--FontSize--4xl);
   --pf-v5-c-title--m-4xl--FontWeight: var(--pf-v5-global--FontWeight--normal);

package/css/components/ToggleGroup/toggle-group.css

@@ -25,6 +25,7 @@
   --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-v5-global--BorderRadius--sm);
   --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-50);
+  --pf-v5-c-toggle-group__button--m-selected--Color: initial;
   --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-v5-global--primary-color--100);
   --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-v5-global--ZIndex--xs);
   --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
@@ -88,6 +89,7 @@
 }
 .pf-v5-c-toggle-group__button.pf-m-selected {
   --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--m-selected--BackgroundColor);
+  --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--m-selected--Color, inherit);
   --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--m-selected--ZIndex);
   --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--m-selected--before--BorderColor);
 }
@@ -108,4 +110,5 @@
   --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);
   --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--palette--black-100);
   --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--primary-color--300);
+  --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-v5-global--primary-color--400);
 }

package/css/components/Wizard/wizard.css

@@ -27,7 +27,7 @@
   --pf-v5-c-wizard__close--FontSize: var(--pf-v5-global--FontSize--xl);
   --pf-v5-c-wizard__title--PaddingRight: var(--pf-v5-global--spacer--2xl);
   --pf-v5-c-wizard__title-text--FontSize: var(--pf-v5-global--FontSize--3xl);
-  --pf-v5-c-wizard__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
+  --pf-v5-c-wizard__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
   --pf-v5-c-wizard__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-wizard__title-text--LineHeight: var(--pf-v5-global--LineHeight--sm);
   --pf-v5-c-wizard__description--PaddingTop: var(--pf-v5-global--spacer--sm);
@@ -39,7 +39,7 @@
   --pf-v5-c-wizard__nav-link--focus--Color: var(--pf-v5-global--link--Color);
   --pf-v5-c-wizard__nav-link--m-current--Color: var(--pf-v5-global--link--Color);
   --pf-v5-c-wizard__nav-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
-  --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--Color--dark-200);
+  --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
   --pf-v5-c-wizard__nav-link-toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
   --pf-v5-c-wizard__nav-link-toggle--PaddingLeft: var(--pf-v5-global--spacer--sm);
@@ -60,7 +60,7 @@
   --pf-v5-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-v5-global--active-color--100);
   --pf-v5-c-wizard__nav-link--m-current--before--Color: var(--pf-v5-global--Color--light-100);
   --pf-v5-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
-  --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--Color--dark-200);
+  --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--disabled-color--100);
   --pf-v5-c-wizard__toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
   --pf-v5-c-wizard__toggle--ZIndex: var(--pf-v5-global--ZIndex--xs);
   --pf-v5-c-wizard__toggle--BoxShadow: var(--pf-v5-global--BoxShadow--md-bottom);
@@ -510,8 +510,6 @@
 :where(.pf-v5-theme-dark) .pf-v5-c-wizard {
   --pf-v5-c-wizard__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
   --pf-v5-c-wizard__nav-link--before--BackgroundColor: var(--pf-v5-global--palette--black-500);
-  --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
-  --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--disabled-color--300);
 }
 :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
   color: var(--pf-v5-global--Color--100);

package/css/docs/components/TextInputGroup/examples/TextInputGroup.css

@@ -8,3 +8,7 @@
   top: 40px;
   width: 100%;
 }
+
+#ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete {
+  height: 540px;
+}

package/css/layouts/Flex/flex.css

@@ -1612,9 +1612,9 @@
     --pf-v5-l-flex--spacer: var(--pf-v5-l-flex--spacer--4xl);
   }
 }
-.pf-v5-l-flex.pf-m-gap-invalid spacer base {
-  --pf-v5-l-flex--RowGap: ;
-  --pf-v5-l-flex--ColumnGap: ;
+.pf-v5-l-flex.pf-m-gap {
+  --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
+  --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
 }
 .pf-v5-l-flex.pf-m-gap-none {
   --pf-v5-l-flex--RowGap: 0;
@@ -1648,14 +1648,14 @@
   --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-invalid spacer base, .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-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;
 }
 @media (min-width: 576px) {
-  .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-sm {
-    --pf-v5-l-flex--RowGap: ;
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-gap-on-sm {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-gap-none-on-sm {
     --pf-v5-l-flex--RowGap: 0;
@@ -1689,15 +1689,15 @@
     --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-invalid spacer base-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-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;
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-md {
-    --pf-v5-l-flex--RowGap: ;
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-gap-on-md {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-gap-none-on-md {
     --pf-v5-l-flex--RowGap: 0;
@@ -1731,15 +1731,15 @@
     --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-invalid spacer base-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-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;
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-lg {
-    --pf-v5-l-flex--RowGap: ;
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-gap-on-lg {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-gap-none-on-lg {
     --pf-v5-l-flex--RowGap: 0;
@@ -1773,15 +1773,15 @@
     --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-invalid spacer base-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-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;
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-xl {
-    --pf-v5-l-flex--RowGap: ;
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-gap-on-xl {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-gap-none-on-xl {
     --pf-v5-l-flex--RowGap: 0;
@@ -1815,15 +1815,15 @@
     --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-invalid spacer base-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-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;
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-2xl {
-    --pf-v5-l-flex--RowGap: ;
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-gap-on-2xl {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-gap-none-on-2xl {
     --pf-v5-l-flex--RowGap: 0;
@@ -1857,13 +1857,13 @@
     --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-invalid spacer base-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-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;
   }
 }
-.pf-v5-l-flex.pf-m-row-gap-invalid spacer base {
-  --pf-v5-l-flex--RowGap: ;
+.pf-v5-l-flex.pf-m-row-gap {
+  --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
 }
 .pf-v5-l-flex.pf-m-row-gap-none {
   --pf-v5-l-flex--RowGap: 0;
@@ -1889,12 +1889,12 @@
 .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-invalid spacer base, .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-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) {
-  .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-sm {
-    --pf-v5-l-flex--RowGap: ;
+  .pf-v5-l-flex.pf-m-row-gap-on-sm {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
   }
   .pf-v5-l-flex.pf-m-row-gap-none-on-sm {
     --pf-v5-l-flex--RowGap: 0;
@@ -1920,13 +1920,13 @@
   .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-invalid spacer base-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-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;
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-md {
-    --pf-v5-l-flex--RowGap: ;
+  .pf-v5-l-flex.pf-m-row-gap-on-md {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
   }
   .pf-v5-l-flex.pf-m-row-gap-none-on-md {
     --pf-v5-l-flex--RowGap: 0;
@@ -1952,13 +1952,13 @@
   .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-invalid spacer base-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-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;
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-lg {
-    --pf-v5-l-flex--RowGap: ;
+  .pf-v5-l-flex.pf-m-row-gap-on-lg {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
   }
   .pf-v5-l-flex.pf-m-row-gap-none-on-lg {
     --pf-v5-l-flex--RowGap: 0;
@@ -1984,13 +1984,13 @@
   .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-invalid spacer base-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-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;
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-xl {
-    --pf-v5-l-flex--RowGap: ;
+  .pf-v5-l-flex.pf-m-row-gap-on-xl {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
   }
   .pf-v5-l-flex.pf-m-row-gap-none-on-xl {
     --pf-v5-l-flex--RowGap: 0;
@@ -2016,13 +2016,13 @@
   .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-invalid spacer base-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-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;
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-2xl {
-    --pf-v5-l-flex--RowGap: ;
+  .pf-v5-l-flex.pf-m-row-gap-on-2xl {
+    --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
   }
   .pf-v5-l-flex.pf-m-row-gap-none-on-2xl {
     --pf-v5-l-flex--RowGap: 0;
@@ -2048,12 +2048,12 @@
   .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-invalid spacer base-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-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;
   }
 }
-.pf-v5-l-flex.pf-m-column-gap-invalid spacer base {
-  --pf-v5-l-flex--ColumnGap: ;
+.pf-v5-l-flex.pf-m-column-gap {
+  --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
 }
 .pf-v5-l-flex.pf-m-column-gap-none {
   --pf-v5-l-flex--ColumnGap: 0;
@@ -2079,12 +2079,12 @@
 .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-invalid spacer base, .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-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) {
-  .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-sm {
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-column-gap-on-sm {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-column-gap-none-on-sm {
     --pf-v5-l-flex--ColumnGap: 0;
@@ -2110,13 +2110,13 @@
   .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-invalid spacer base-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-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;
   }
 }
 @media (min-width: 768px) {
-  .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-md {
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-column-gap-on-md {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-column-gap-none-on-md {
     --pf-v5-l-flex--ColumnGap: 0;
@@ -2142,13 +2142,13 @@
   .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-invalid spacer base-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-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;
   }
 }
 @media (min-width: 992px) {
-  .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-lg {
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-column-gap-on-lg {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-column-gap-none-on-lg {
     --pf-v5-l-flex--ColumnGap: 0;
@@ -2174,13 +2174,13 @@
   .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-invalid spacer base-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-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;
   }
 }
 @media (min-width: 1200px) {
-  .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-xl {
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-column-gap-on-xl {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-column-gap-none-on-xl {
     --pf-v5-l-flex--ColumnGap: 0;
@@ -2206,13 +2206,13 @@
   .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-invalid spacer base-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-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;
   }
 }
 @media (min-width: 1450px) {
-  .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-2xl {
-    --pf-v5-l-flex--ColumnGap: ;
+  .pf-v5-l-flex.pf-m-column-gap-on-2xl {
+    --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
   }
   .pf-v5-l-flex.pf-m-column-gap-none-on-2xl {
     --pf-v5-l-flex--ColumnGap: 0;
@@ -2238,7 +2238,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-invalid spacer base-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-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;
   }
 }