@patternfly/react-styles 5.0.0-alpha.13 → 5.0.0-alpha.15

Sign up to get free protection for your applications and to get access to all the features.
Files changed (64) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/css/assets/images/pf_logo.svg +11 -11
  3. package/css/components/Accordion/accordion.css +1 -1
  4. package/css/components/Alert/alert.css +7 -7
  5. package/css/components/AppLauncher/app-launcher.css +1 -0
  6. package/css/components/Badge/badge.css +1 -0
  7. package/css/components/Banner/banner.css +6 -8
  8. package/css/components/Banner/banner.d.ts +1 -5
  9. package/css/components/Banner/banner.js +1 -5
  10. package/css/components/Banner/banner.mjs +1 -5
  11. package/css/components/Button/button.css +4 -0
  12. package/css/components/CalendarMonth/calendar-month.css +3 -3
  13. package/css/components/Card/card.css +1 -1
  14. package/css/components/Content/content.css +1 -1
  15. package/css/components/DragDrop/drag-drop.css +23 -7
  16. package/css/components/DragDrop/drag-drop.d.ts +2 -1
  17. package/css/components/DragDrop/drag-drop.js +2 -1
  18. package/css/components/DragDrop/drag-drop.mjs +2 -1
  19. package/css/components/Dropdown/dropdown.css +2 -0
  20. package/css/components/DualListSelector/dual-list-selector.css +9 -3
  21. package/css/components/DualListSelector/dual-list-selector.d.ts +2 -1
  22. package/css/components/DualListSelector/dual-list-selector.js +2 -1
  23. package/css/components/DualListSelector/dual-list-selector.mjs +2 -1
  24. package/css/components/EmptyState/empty-state.css +1 -1
  25. package/css/components/FormControl/form-control.css +1 -1
  26. package/css/components/InputGroup/input-group.css +1 -1
  27. package/css/components/Label/label.css +6 -0
  28. package/css/components/Menu/menu.css +0 -1
  29. package/css/components/MenuToggle/menu-toggle.css +7 -5
  30. package/css/components/ModalBox/modal-box.css +1 -1
  31. package/css/components/Nav/nav.css +1 -1
  32. package/css/components/NotificationBadge/notification-badge.css +1 -0
  33. package/css/components/Panel/panel.css +6 -0
  34. package/css/components/Panel/panel.d.ts +2 -1
  35. package/css/components/Panel/panel.js +2 -1
  36. package/css/components/Panel/panel.mjs +2 -1
  37. package/css/components/Popover/popover.css +2 -2
  38. package/css/components/Popper/Popper.css +1 -1
  39. package/css/components/Popper/Popper.d.ts +1 -1
  40. package/css/components/Popper/Popper.js +1 -1
  41. package/css/components/Popper/Popper.mjs +1 -1
  42. package/css/components/ProgressStepper/progress-stepper.css +1 -0
  43. package/css/components/Tabs/tabs.css +1 -0
  44. package/css/components/TextInputGroup/text-input-group.css +8 -0
  45. package/css/components/TextInputGroup/text-input-group.d.ts +2 -1
  46. package/css/components/TextInputGroup/text-input-group.js +2 -1
  47. package/css/components/TextInputGroup/text-input-group.mjs +2 -1
  48. package/css/components/Title/title.css +1 -1
  49. package/css/components/ToggleGroup/toggle-group.css +3 -0
  50. package/css/components/Wizard/wizard.css +3 -5
  51. package/css/docs/components/TextInputGroup/examples/TextInputGroup.css +4 -0
  52. package/css/layouts/Flex/flex.css +60 -60
  53. package/css/layouts/Flex/flex.d.ts +18 -3
  54. package/css/layouts/Flex/flex.js +18 -3
  55. package/css/layouts/Flex/flex.mjs +18 -3
  56. package/css/layouts/Level/level.css +3 -3
  57. package/css/layouts/Split/split.css +3 -3
  58. package/css/layouts/Stack/stack.css +3 -3
  59. package/css/utilities/Text/text.css +10 -29
  60. package/css/utilities/Text/text.d.ts +5 -11
  61. package/css/utilities/Text/text.js +5 -11
  62. package/css/utilities/Text/text.mjs +5 -11
  63. package/package.json +3 -3
  64. package/src/css/components/Popper/Popper.css +1 -1
@@ -39,7 +39,7 @@
39
39
  --pf-v5-c-popover__close--sibling--PaddingRight: var(--pf-v5-global--spacer--2xl);
40
40
  --pf-v5-c-popover__header--MarginBottom: var(--pf-v5-global--spacer--sm);
41
41
  --pf-v5-c-popover__title-text--LineHeight: var(--pf-v5-global--LineHeight--md);
42
- --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
42
+ --pf-v5-c-popover__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
43
43
  --pf-v5-c-popover__title-text--FontSize: var(--pf-v5-global--FontSize--md);
44
44
  --pf-v5-c-popover__title-icon--MarginRight: var(--pf-v5-global--spacer--sm);
45
45
  --pf-v5-c-popover__title-icon--Color: var(--pf-v5-global--Color--100);
@@ -173,7 +173,7 @@
173
173
  :where(.pf-v5-theme-dark) .pf-v5-c-popover {
174
174
  --pf-v5-c-popover__content--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
175
175
  --pf-v5-c-popover__arrow--BackgroundColor: var(--pf-v5-global--BackgroundColor--300);
176
- --pf-v5-c-popover--m-default__title-text--Color: var(--pf-v5-global--custom-color--200);
176
+ --pf-v5-c-popover--m-custom__title-text--Color: var(--pf-v5-global--custom-color--200);
177
177
  --pf-v5-c-popover--m-info__title-text--Color: var(--pf-v5-global--info-color--100);
178
178
  --pf-v5-c-popover--m-success__title-text--Color: var(--pf-v5-global--success-color--100);
179
179
  }
@@ -1,4 +1,4 @@
1
- .pf-c-popover[data-popper-reference-hidden="true"] {
1
+ .pf-v5-c-popover[data-popper-reference-hidden="true"] {
2
2
  visibility: hidden;
3
3
  pointer-events: none;
4
4
  }
@@ -1,5 +1,5 @@
1
1
  import './Popper.css';
2
2
  declare const _default: {
3
- "popover": "pf-c-popover"
3
+ "popover": "pf-v5-c-popover"
4
4
  };
5
5
  export default _default;
@@ -2,5 +2,5 @@
2
2
  exports.__esModule = true;
3
3
  require('./Popper.css');
4
4
  exports.default = {
5
- "popover": "pf-c-popover"
5
+ "popover": "pf-v5-c-popover"
6
6
  };
@@ -1,4 +1,4 @@
1
1
  import './Popper.css';
2
2
  export default {
3
- "popover": "pf-c-popover"
3
+ "popover": "pf-v5-c-popover"
4
4
  };
@@ -298,6 +298,7 @@
298
298
  font-weight: var(--pf-v5-c-progress-stepper__step-title--FontWeight);
299
299
  color: var(--pf-v5-c-progress-stepper__step-title--Color);
300
300
  text-align: var(--pf-v5-c-progress-stepper__step-title--TextAlign);
301
+ background: none;
301
302
  border: 0;
302
303
  }
303
304
  .pf-v5-c-progress-stepper__step-title.pf-m-help-text {
@@ -837,5 +837,6 @@
837
837
  :where(.pf-v5-theme-dark) .pf-v5-c-tabs {
838
838
  --pf-v5-c-tabs__scroll-button--BackgroundColor: transparent;
839
839
  --pf-v5-c-tabs__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
840
+ --pf-v5-c-tabs__link--disabled--Color: var(--pf-v5-global--disabled-color--300);
840
841
  --pf-v5-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
841
842
  }
@@ -146,4 +146,12 @@
146
146
 
147
147
  .pf-v5-c-text-input-group__group {
148
148
  display: flex;
149
+ }
150
+
151
+ :where(.pf-v5-theme-dark) .pf-v5-c-text-input-group {
152
+ --pf-v5-c-text-input-group--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
153
+ --pf-v5-c-text-input-group--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
154
+ --pf-v5-c-text-input-group--m-disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
155
+ --pf-v5-c-text-input-group__text--before--BorderWidth: 0;
156
+ --pf-v5-c-text-input-group__text--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
149
157
  }
@@ -14,6 +14,7 @@ declare const _default: {
14
14
  "textInputGroupMain": "pf-v5-c-text-input-group__main",
15
15
  "textInputGroupText": "pf-v5-c-text-input-group__text",
16
16
  "textInputGroupTextInput": "pf-v5-c-text-input-group__text-input",
17
- "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities"
17
+ "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities",
18
+ "themeDark": "pf-v5-theme-dark"
18
19
  };
19
20
  export default _default;
@@ -16,5 +16,6 @@ exports.default = {
16
16
  "textInputGroupMain": "pf-v5-c-text-input-group__main",
17
17
  "textInputGroupText": "pf-v5-c-text-input-group__text",
18
18
  "textInputGroupTextInput": "pf-v5-c-text-input-group__text-input",
19
- "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities"
19
+ "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities",
20
+ "themeDark": "pf-v5-theme-dark"
20
21
  };
@@ -14,5 +14,6 @@ export default {
14
14
  "textInputGroupMain": "pf-v5-c-text-input-group__main",
15
15
  "textInputGroupText": "pf-v5-c-text-input-group__text",
16
16
  "textInputGroupTextInput": "pf-v5-c-text-input-group__text-input",
17
- "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities"
17
+ "textInputGroupUtilities": "pf-v5-c-text-input-group__utilities",
18
+ "themeDark": "pf-v5-theme-dark"
18
19
  };
@@ -1,5 +1,5 @@
1
1
  .pf-v5-c-title {
2
- --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
2
+ --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading);
3
3
  --pf-v5-c-title--m-4xl--LineHeight: var(--pf-v5-global--LineHeight--sm);
4
4
  --pf-v5-c-title--m-4xl--FontSize: var(--pf-v5-global--FontSize--4xl);
5
5
  --pf-v5-c-title--m-4xl--FontWeight: var(--pf-v5-global--FontWeight--normal);
@@ -25,6 +25,7 @@
25
25
  --pf-v5-c-toggle-group__item--last-child__button--BorderBottomRightRadius: var(--pf-v5-global--BorderRadius--sm);
26
26
  --pf-v5-c-toggle-group__icon--text--MarginLeft: var(--pf-v5-global--spacer--sm);
27
27
  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--palette--blue-50);
28
+ --pf-v5-c-toggle-group__button--m-selected--Color: initial;
28
29
  --pf-v5-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-v5-global--primary-color--100);
29
30
  --pf-v5-c-toggle-group__button--m-selected--ZIndex: var(--pf-v5-global--ZIndex--xs);
30
31
  --pf-v5-c-toggle-group--m-compact__button--PaddingTop: 0;
@@ -88,6 +89,7 @@
88
89
  }
89
90
  .pf-v5-c-toggle-group__button.pf-m-selected {
90
91
  --pf-v5-c-toggle-group__button--BackgroundColor: var(--pf-v5-c-toggle-group__button--m-selected--BackgroundColor);
92
+ --pf-v5-c-toggle-group__button--Color: var(--pf-v5-c-toggle-group__button--m-selected--Color, inherit);
91
93
  --pf-v5-c-toggle-group__button--ZIndex: var(--pf-v5-c-toggle-group__button--m-selected--ZIndex);
92
94
  --pf-v5-c-toggle-group__button--before--BorderColor: var(--pf-v5-c-toggle-group__button--m-selected--before--BorderColor);
93
95
  }
@@ -108,4 +110,5 @@
108
110
  --pf-v5-c-toggle-group__button--disabled--BackgroundColor: var(--pf-v5-global--palette--black-600);
109
111
  --pf-v5-c-toggle-group__button--disabled--Color: var(--pf-v5-global--palette--black-100);
110
112
  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-v5-global--primary-color--300);
113
+ --pf-v5-c-toggle-group__button--m-selected--Color: var(--pf-v5-global--primary-color--400);
111
114
  }
@@ -27,7 +27,7 @@
27
27
  --pf-v5-c-wizard__close--FontSize: var(--pf-v5-global--FontSize--xl);
28
28
  --pf-v5-c-wizard__title--PaddingRight: var(--pf-v5-global--spacer--2xl);
29
29
  --pf-v5-c-wizard__title-text--FontSize: var(--pf-v5-global--FontSize--3xl);
30
- --pf-v5-c-wizard__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading--sans-serif);
30
+ --pf-v5-c-wizard__title-text--FontFamily: var(--pf-v5-global--FontFamily--heading);
31
31
  --pf-v5-c-wizard__title-text--FontWeight: var(--pf-v5-global--FontWeight--normal);
32
32
  --pf-v5-c-wizard__title-text--LineHeight: var(--pf-v5-global--LineHeight--sm);
33
33
  --pf-v5-c-wizard__description--PaddingTop: var(--pf-v5-global--spacer--sm);
@@ -39,7 +39,7 @@
39
39
  --pf-v5-c-wizard__nav-link--focus--Color: var(--pf-v5-global--link--Color);
40
40
  --pf-v5-c-wizard__nav-link--m-current--Color: var(--pf-v5-global--link--Color);
41
41
  --pf-v5-c-wizard__nav-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
42
- --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--Color--dark-200);
42
+ --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--disabled-color--100);
43
43
  --pf-v5-c-wizard__nav-list__nav-list__nav-link--m-current--FontWeight: var(--pf-v5-global--FontWeight--normal);
44
44
  --pf-v5-c-wizard__nav-link-toggle--PaddingRight: var(--pf-v5-global--spacer--sm);
45
45
  --pf-v5-c-wizard__nav-link-toggle--PaddingLeft: var(--pf-v5-global--spacer--sm);
@@ -60,7 +60,7 @@
60
60
  --pf-v5-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-v5-global--active-color--100);
61
61
  --pf-v5-c-wizard__nav-link--m-current--before--Color: var(--pf-v5-global--Color--light-100);
62
62
  --pf-v5-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
63
- --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--Color--dark-200);
63
+ --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--disabled-color--100);
64
64
  --pf-v5-c-wizard__toggle--BackgroundColor: var(--pf-v5-global--BackgroundColor--100);
65
65
  --pf-v5-c-wizard__toggle--ZIndex: var(--pf-v5-global--ZIndex--xs);
66
66
  --pf-v5-c-wizard__toggle--BoxShadow: var(--pf-v5-global--BoxShadow--md-bottom);
@@ -510,8 +510,6 @@
510
510
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard {
511
511
  --pf-v5-c-wizard__header--BackgroundColor: var(--pf-v5-global--palette--black-1000);
512
512
  --pf-v5-c-wizard__nav-link--before--BackgroundColor: var(--pf-v5-global--palette--black-500);
513
- --pf-v5-c-wizard__nav-link--m-disabled--Color: var(--pf-v5-global--disabled-color--300);
514
- --pf-v5-c-wizard__nav-link--m-disabled--before--Color: var(--pf-v5-global--disabled-color--300);
515
513
  }
516
514
  :where(.pf-v5-theme-dark) .pf-v5-c-wizard__header {
517
515
  color: var(--pf-v5-global--Color--100);
@@ -8,3 +8,7 @@
8
8
  top: 40px;
9
9
  width: 100%;
10
10
  }
11
+
12
+ #ws-core-c-text-input-group-search-input-group-advanced-search-expanded-with-autocomplete {
13
+ height: 540px;
14
+ }
@@ -1612,9 +1612,9 @@
1612
1612
  --pf-v5-l-flex--spacer: var(--pf-v5-l-flex--spacer--4xl);
1613
1613
  }
1614
1614
  }
1615
- .pf-v5-l-flex.pf-m-gap-invalid spacer base {
1616
- --pf-v5-l-flex--RowGap: ;
1617
- --pf-v5-l-flex--ColumnGap: ;
1615
+ .pf-v5-l-flex.pf-m-gap {
1616
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1617
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1618
1618
  }
1619
1619
  .pf-v5-l-flex.pf-m-gap-none {
1620
1620
  --pf-v5-l-flex--RowGap: 0;
@@ -1648,14 +1648,14 @@
1648
1648
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1649
1649
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1650
1650
  }
1651
- .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) > * {
1651
+ .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) > * {
1652
1652
  --pf-v5-l-flex--spacer--row: 0;
1653
1653
  --pf-v5-l-flex--spacer--column: 0;
1654
1654
  }
1655
1655
  @media (min-width: 576px) {
1656
- .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-sm {
1657
- --pf-v5-l-flex--RowGap: ;
1658
- --pf-v5-l-flex--ColumnGap: ;
1656
+ .pf-v5-l-flex.pf-m-gap-on-sm {
1657
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1658
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1659
1659
  }
1660
1660
  .pf-v5-l-flex.pf-m-gap-none-on-sm {
1661
1661
  --pf-v5-l-flex--RowGap: 0;
@@ -1689,15 +1689,15 @@
1689
1689
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1690
1690
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1691
1691
  }
1692
- .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) > * {
1692
+ .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) > * {
1693
1693
  --pf-v5-l-flex--spacer--row: 0;
1694
1694
  --pf-v5-l-flex--spacer--column: 0;
1695
1695
  }
1696
1696
  }
1697
1697
  @media (min-width: 768px) {
1698
- .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-md {
1699
- --pf-v5-l-flex--RowGap: ;
1700
- --pf-v5-l-flex--ColumnGap: ;
1698
+ .pf-v5-l-flex.pf-m-gap-on-md {
1699
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1700
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1701
1701
  }
1702
1702
  .pf-v5-l-flex.pf-m-gap-none-on-md {
1703
1703
  --pf-v5-l-flex--RowGap: 0;
@@ -1731,15 +1731,15 @@
1731
1731
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1732
1732
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1733
1733
  }
1734
- .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) > * {
1734
+ .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) > * {
1735
1735
  --pf-v5-l-flex--spacer--row: 0;
1736
1736
  --pf-v5-l-flex--spacer--column: 0;
1737
1737
  }
1738
1738
  }
1739
1739
  @media (min-width: 992px) {
1740
- .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-lg {
1741
- --pf-v5-l-flex--RowGap: ;
1742
- --pf-v5-l-flex--ColumnGap: ;
1740
+ .pf-v5-l-flex.pf-m-gap-on-lg {
1741
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1742
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1743
1743
  }
1744
1744
  .pf-v5-l-flex.pf-m-gap-none-on-lg {
1745
1745
  --pf-v5-l-flex--RowGap: 0;
@@ -1773,15 +1773,15 @@
1773
1773
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1774
1774
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1775
1775
  }
1776
- .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) > * {
1776
+ .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) > * {
1777
1777
  --pf-v5-l-flex--spacer--row: 0;
1778
1778
  --pf-v5-l-flex--spacer--column: 0;
1779
1779
  }
1780
1780
  }
1781
1781
  @media (min-width: 1200px) {
1782
- .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-xl {
1783
- --pf-v5-l-flex--RowGap: ;
1784
- --pf-v5-l-flex--ColumnGap: ;
1782
+ .pf-v5-l-flex.pf-m-gap-on-xl {
1783
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1784
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1785
1785
  }
1786
1786
  .pf-v5-l-flex.pf-m-gap-none-on-xl {
1787
1787
  --pf-v5-l-flex--RowGap: 0;
@@ -1815,15 +1815,15 @@
1815
1815
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1816
1816
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1817
1817
  }
1818
- .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) > * {
1818
+ .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) > * {
1819
1819
  --pf-v5-l-flex--spacer--row: 0;
1820
1820
  --pf-v5-l-flex--spacer--column: 0;
1821
1821
  }
1822
1822
  }
1823
1823
  @media (min-width: 1450px) {
1824
- .pf-v5-l-flex.pf-m-gap-invalid spacer base-on-2xl {
1825
- --pf-v5-l-flex--RowGap: ;
1826
- --pf-v5-l-flex--ColumnGap: ;
1824
+ .pf-v5-l-flex.pf-m-gap-on-2xl {
1825
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-gap--RowGap);
1826
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-gap--ColumnGap);
1827
1827
  }
1828
1828
  .pf-v5-l-flex.pf-m-gap-none-on-2xl {
1829
1829
  --pf-v5-l-flex--RowGap: 0;
@@ -1857,13 +1857,13 @@
1857
1857
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1858
1858
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
1859
1859
  }
1860
- .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) > * {
1860
+ .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) > * {
1861
1861
  --pf-v5-l-flex--spacer--row: 0;
1862
1862
  --pf-v5-l-flex--spacer--column: 0;
1863
1863
  }
1864
1864
  }
1865
- .pf-v5-l-flex.pf-m-row-gap-invalid spacer base {
1866
- --pf-v5-l-flex--RowGap: ;
1865
+ .pf-v5-l-flex.pf-m-row-gap {
1866
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1867
1867
  }
1868
1868
  .pf-v5-l-flex.pf-m-row-gap-none {
1869
1869
  --pf-v5-l-flex--RowGap: 0;
@@ -1889,12 +1889,12 @@
1889
1889
  .pf-v5-l-flex.pf-m-row-gap-4xl {
1890
1890
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1891
1891
  }
1892
- .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) > * {
1892
+ .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) > * {
1893
1893
  --pf-v5-l-flex--spacer--row: 0;
1894
1894
  }
1895
1895
  @media (min-width: 576px) {
1896
- .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-sm {
1897
- --pf-v5-l-flex--RowGap: ;
1896
+ .pf-v5-l-flex.pf-m-row-gap-on-sm {
1897
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1898
1898
  }
1899
1899
  .pf-v5-l-flex.pf-m-row-gap-none-on-sm {
1900
1900
  --pf-v5-l-flex--RowGap: 0;
@@ -1920,13 +1920,13 @@
1920
1920
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-sm {
1921
1921
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1922
1922
  }
1923
- .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) > * {
1923
+ .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) > * {
1924
1924
  --pf-v5-l-flex--spacer--row: 0;
1925
1925
  }
1926
1926
  }
1927
1927
  @media (min-width: 768px) {
1928
- .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-md {
1929
- --pf-v5-l-flex--RowGap: ;
1928
+ .pf-v5-l-flex.pf-m-row-gap-on-md {
1929
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1930
1930
  }
1931
1931
  .pf-v5-l-flex.pf-m-row-gap-none-on-md {
1932
1932
  --pf-v5-l-flex--RowGap: 0;
@@ -1952,13 +1952,13 @@
1952
1952
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-md {
1953
1953
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1954
1954
  }
1955
- .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) > * {
1955
+ .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) > * {
1956
1956
  --pf-v5-l-flex--spacer--row: 0;
1957
1957
  }
1958
1958
  }
1959
1959
  @media (min-width: 992px) {
1960
- .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-lg {
1961
- --pf-v5-l-flex--RowGap: ;
1960
+ .pf-v5-l-flex.pf-m-row-gap-on-lg {
1961
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1962
1962
  }
1963
1963
  .pf-v5-l-flex.pf-m-row-gap-none-on-lg {
1964
1964
  --pf-v5-l-flex--RowGap: 0;
@@ -1984,13 +1984,13 @@
1984
1984
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-lg {
1985
1985
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
1986
1986
  }
1987
- .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) > * {
1987
+ .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) > * {
1988
1988
  --pf-v5-l-flex--spacer--row: 0;
1989
1989
  }
1990
1990
  }
1991
1991
  @media (min-width: 1200px) {
1992
- .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-xl {
1993
- --pf-v5-l-flex--RowGap: ;
1992
+ .pf-v5-l-flex.pf-m-row-gap-on-xl {
1993
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
1994
1994
  }
1995
1995
  .pf-v5-l-flex.pf-m-row-gap-none-on-xl {
1996
1996
  --pf-v5-l-flex--RowGap: 0;
@@ -2016,13 +2016,13 @@
2016
2016
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-xl {
2017
2017
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
2018
2018
  }
2019
- .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) > * {
2019
+ .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) > * {
2020
2020
  --pf-v5-l-flex--spacer--row: 0;
2021
2021
  }
2022
2022
  }
2023
2023
  @media (min-width: 1450px) {
2024
- .pf-v5-l-flex.pf-m-row-gap-invalid spacer base-on-2xl {
2025
- --pf-v5-l-flex--RowGap: ;
2024
+ .pf-v5-l-flex.pf-m-row-gap-on-2xl {
2025
+ --pf-v5-l-flex--RowGap: var(--pf-v5-l-flex--m-row-gap--RowGap);
2026
2026
  }
2027
2027
  .pf-v5-l-flex.pf-m-row-gap-none-on-2xl {
2028
2028
  --pf-v5-l-flex--RowGap: 0;
@@ -2048,12 +2048,12 @@
2048
2048
  .pf-v5-l-flex.pf-m-row-gap-4xl-on-2xl {
2049
2049
  --pf-v5-l-flex--RowGap: var(--pf-v5-global--spacer--4xl);
2050
2050
  }
2051
- .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) > * {
2051
+ .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) > * {
2052
2052
  --pf-v5-l-flex--spacer--row: 0;
2053
2053
  }
2054
2054
  }
2055
- .pf-v5-l-flex.pf-m-column-gap-invalid spacer base {
2056
- --pf-v5-l-flex--ColumnGap: ;
2055
+ .pf-v5-l-flex.pf-m-column-gap {
2056
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2057
2057
  }
2058
2058
  .pf-v5-l-flex.pf-m-column-gap-none {
2059
2059
  --pf-v5-l-flex--ColumnGap: 0;
@@ -2079,12 +2079,12 @@
2079
2079
  .pf-v5-l-flex.pf-m-column-gap-4xl {
2080
2080
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2081
2081
  }
2082
- .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) > * {
2082
+ .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) > * {
2083
2083
  --pf-v5-l-flex--spacer--column: 0;
2084
2084
  }
2085
2085
  @media (min-width: 576px) {
2086
- .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-sm {
2087
- --pf-v5-l-flex--ColumnGap: ;
2086
+ .pf-v5-l-flex.pf-m-column-gap-on-sm {
2087
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2088
2088
  }
2089
2089
  .pf-v5-l-flex.pf-m-column-gap-none-on-sm {
2090
2090
  --pf-v5-l-flex--ColumnGap: 0;
@@ -2110,13 +2110,13 @@
2110
2110
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-sm {
2111
2111
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2112
2112
  }
2113
- .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) > * {
2113
+ .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) > * {
2114
2114
  --pf-v5-l-flex--spacer--column: 0;
2115
2115
  }
2116
2116
  }
2117
2117
  @media (min-width: 768px) {
2118
- .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-md {
2119
- --pf-v5-l-flex--ColumnGap: ;
2118
+ .pf-v5-l-flex.pf-m-column-gap-on-md {
2119
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2120
2120
  }
2121
2121
  .pf-v5-l-flex.pf-m-column-gap-none-on-md {
2122
2122
  --pf-v5-l-flex--ColumnGap: 0;
@@ -2142,13 +2142,13 @@
2142
2142
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-md {
2143
2143
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2144
2144
  }
2145
- .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) > * {
2145
+ .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) > * {
2146
2146
  --pf-v5-l-flex--spacer--column: 0;
2147
2147
  }
2148
2148
  }
2149
2149
  @media (min-width: 992px) {
2150
- .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-lg {
2151
- --pf-v5-l-flex--ColumnGap: ;
2150
+ .pf-v5-l-flex.pf-m-column-gap-on-lg {
2151
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2152
2152
  }
2153
2153
  .pf-v5-l-flex.pf-m-column-gap-none-on-lg {
2154
2154
  --pf-v5-l-flex--ColumnGap: 0;
@@ -2174,13 +2174,13 @@
2174
2174
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-lg {
2175
2175
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2176
2176
  }
2177
- .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) > * {
2177
+ .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) > * {
2178
2178
  --pf-v5-l-flex--spacer--column: 0;
2179
2179
  }
2180
2180
  }
2181
2181
  @media (min-width: 1200px) {
2182
- .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-xl {
2183
- --pf-v5-l-flex--ColumnGap: ;
2182
+ .pf-v5-l-flex.pf-m-column-gap-on-xl {
2183
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2184
2184
  }
2185
2185
  .pf-v5-l-flex.pf-m-column-gap-none-on-xl {
2186
2186
  --pf-v5-l-flex--ColumnGap: 0;
@@ -2206,13 +2206,13 @@
2206
2206
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-xl {
2207
2207
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2208
2208
  }
2209
- .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) > * {
2209
+ .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) > * {
2210
2210
  --pf-v5-l-flex--spacer--column: 0;
2211
2211
  }
2212
2212
  }
2213
2213
  @media (min-width: 1450px) {
2214
- .pf-v5-l-flex.pf-m-column-gap-invalid spacer base-on-2xl {
2215
- --pf-v5-l-flex--ColumnGap: ;
2214
+ .pf-v5-l-flex.pf-m-column-gap-on-2xl {
2215
+ --pf-v5-l-flex--ColumnGap: var(--pf-v5-l-flex--m-column-gap--ColumnGap);
2216
2216
  }
2217
2217
  .pf-v5-l-flex.pf-m-column-gap-none-on-2xl {
2218
2218
  --pf-v5-l-flex--ColumnGap: 0;
@@ -2238,7 +2238,7 @@
2238
2238
  .pf-v5-l-flex.pf-m-column-gap-4xl-on-2xl {
2239
2239
  --pf-v5-l-flex--ColumnGap: var(--pf-v5-global--spacer--4xl);
2240
2240
  }
2241
- .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) > * {
2241
+ .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) > * {
2242
2242
  --pf-v5-l-flex--spacer--column: 0;
2243
2243
  }
2244
2244
  }
@@ -362,7 +362,7 @@ declare const _default: {
362
362
  "spacer_2xlOn_2xl": "pf-m-spacer-2xl-on-2xl",
363
363
  "spacer_3xlOn_2xl": "pf-m-spacer-3xl-on-2xl",
364
364
  "spacer_4xlOn_2xl": "pf-m-spacer-4xl-on-2xl",
365
- "gapInvalid": "pf-m-gap-invalid",
365
+ "gap": "pf-m-gap",
366
366
  "gapNone": "pf-m-gap-none",
367
367
  "gapSm": "pf-m-gap-sm",
368
368
  "gapMd": "pf-m-gap-md",
@@ -371,6 +371,7 @@ declare const _default: {
371
371
  "gap_2xl": "pf-m-gap-2xl",
372
372
  "gap_3xl": "pf-m-gap-3xl",
373
373
  "gap_4xl": "pf-m-gap-4xl",
374
+ "gapOnSm": "pf-m-gap-on-sm",
374
375
  "gapNoneOnSm": "pf-m-gap-none-on-sm",
375
376
  "gapSmOnSm": "pf-m-gap-sm-on-sm",
376
377
  "gapMdOnSm": "pf-m-gap-md-on-sm",
@@ -379,6 +380,7 @@ declare const _default: {
379
380
  "gap_2xlOnSm": "pf-m-gap-2xl-on-sm",
380
381
  "gap_3xlOnSm": "pf-m-gap-3xl-on-sm",
381
382
  "gap_4xlOnSm": "pf-m-gap-4xl-on-sm",
383
+ "gapOnMd": "pf-m-gap-on-md",
382
384
  "gapNoneOnMd": "pf-m-gap-none-on-md",
383
385
  "gapSmOnMd": "pf-m-gap-sm-on-md",
384
386
  "gapMdOnMd": "pf-m-gap-md-on-md",
@@ -387,6 +389,7 @@ declare const _default: {
387
389
  "gap_2xlOnMd": "pf-m-gap-2xl-on-md",
388
390
  "gap_3xlOnMd": "pf-m-gap-3xl-on-md",
389
391
  "gap_4xlOnMd": "pf-m-gap-4xl-on-md",
392
+ "gapOnLg": "pf-m-gap-on-lg",
390
393
  "gapNoneOnLg": "pf-m-gap-none-on-lg",
391
394
  "gapSmOnLg": "pf-m-gap-sm-on-lg",
392
395
  "gapMdOnLg": "pf-m-gap-md-on-lg",
@@ -395,6 +398,7 @@ declare const _default: {
395
398
  "gap_2xlOnLg": "pf-m-gap-2xl-on-lg",
396
399
  "gap_3xlOnLg": "pf-m-gap-3xl-on-lg",
397
400
  "gap_4xlOnLg": "pf-m-gap-4xl-on-lg",
401
+ "gapOnXl": "pf-m-gap-on-xl",
398
402
  "gapNoneOnXl": "pf-m-gap-none-on-xl",
399
403
  "gapSmOnXl": "pf-m-gap-sm-on-xl",
400
404
  "gapMdOnXl": "pf-m-gap-md-on-xl",
@@ -403,6 +407,7 @@ declare const _default: {
403
407
  "gap_2xlOnXl": "pf-m-gap-2xl-on-xl",
404
408
  "gap_3xlOnXl": "pf-m-gap-3xl-on-xl",
405
409
  "gap_4xlOnXl": "pf-m-gap-4xl-on-xl",
410
+ "gapOn_2xl": "pf-m-gap-on-2xl",
406
411
  "gapNoneOn_2xl": "pf-m-gap-none-on-2xl",
407
412
  "gapSmOn_2xl": "pf-m-gap-sm-on-2xl",
408
413
  "gapMdOn_2xl": "pf-m-gap-md-on-2xl",
@@ -411,7 +416,7 @@ declare const _default: {
411
416
  "gap_2xlOn_2xl": "pf-m-gap-2xl-on-2xl",
412
417
  "gap_3xlOn_2xl": "pf-m-gap-3xl-on-2xl",
413
418
  "gap_4xlOn_2xl": "pf-m-gap-4xl-on-2xl",
414
- "rowGapInvalid": "pf-m-row-gap-invalid",
419
+ "rowGap": "pf-m-row-gap",
415
420
  "rowGapNone": "pf-m-row-gap-none",
416
421
  "rowGapSm": "pf-m-row-gap-sm",
417
422
  "rowGapMd": "pf-m-row-gap-md",
@@ -420,6 +425,7 @@ declare const _default: {
420
425
  "rowGap_2xl": "pf-m-row-gap-2xl",
421
426
  "rowGap_3xl": "pf-m-row-gap-3xl",
422
427
  "rowGap_4xl": "pf-m-row-gap-4xl",
428
+ "rowGapOnSm": "pf-m-row-gap-on-sm",
423
429
  "rowGapNoneOnSm": "pf-m-row-gap-none-on-sm",
424
430
  "rowGapSmOnSm": "pf-m-row-gap-sm-on-sm",
425
431
  "rowGapMdOnSm": "pf-m-row-gap-md-on-sm",
@@ -428,6 +434,7 @@ declare const _default: {
428
434
  "rowGap_2xlOnSm": "pf-m-row-gap-2xl-on-sm",
429
435
  "rowGap_3xlOnSm": "pf-m-row-gap-3xl-on-sm",
430
436
  "rowGap_4xlOnSm": "pf-m-row-gap-4xl-on-sm",
437
+ "rowGapOnMd": "pf-m-row-gap-on-md",
431
438
  "rowGapNoneOnMd": "pf-m-row-gap-none-on-md",
432
439
  "rowGapSmOnMd": "pf-m-row-gap-sm-on-md",
433
440
  "rowGapMdOnMd": "pf-m-row-gap-md-on-md",
@@ -436,6 +443,7 @@ declare const _default: {
436
443
  "rowGap_2xlOnMd": "pf-m-row-gap-2xl-on-md",
437
444
  "rowGap_3xlOnMd": "pf-m-row-gap-3xl-on-md",
438
445
  "rowGap_4xlOnMd": "pf-m-row-gap-4xl-on-md",
446
+ "rowGapOnLg": "pf-m-row-gap-on-lg",
439
447
  "rowGapNoneOnLg": "pf-m-row-gap-none-on-lg",
440
448
  "rowGapSmOnLg": "pf-m-row-gap-sm-on-lg",
441
449
  "rowGapMdOnLg": "pf-m-row-gap-md-on-lg",
@@ -444,6 +452,7 @@ declare const _default: {
444
452
  "rowGap_2xlOnLg": "pf-m-row-gap-2xl-on-lg",
445
453
  "rowGap_3xlOnLg": "pf-m-row-gap-3xl-on-lg",
446
454
  "rowGap_4xlOnLg": "pf-m-row-gap-4xl-on-lg",
455
+ "rowGapOnXl": "pf-m-row-gap-on-xl",
447
456
  "rowGapNoneOnXl": "pf-m-row-gap-none-on-xl",
448
457
  "rowGapSmOnXl": "pf-m-row-gap-sm-on-xl",
449
458
  "rowGapMdOnXl": "pf-m-row-gap-md-on-xl",
@@ -452,6 +461,7 @@ declare const _default: {
452
461
  "rowGap_2xlOnXl": "pf-m-row-gap-2xl-on-xl",
453
462
  "rowGap_3xlOnXl": "pf-m-row-gap-3xl-on-xl",
454
463
  "rowGap_4xlOnXl": "pf-m-row-gap-4xl-on-xl",
464
+ "rowGapOn_2xl": "pf-m-row-gap-on-2xl",
455
465
  "rowGapNoneOn_2xl": "pf-m-row-gap-none-on-2xl",
456
466
  "rowGapSmOn_2xl": "pf-m-row-gap-sm-on-2xl",
457
467
  "rowGapMdOn_2xl": "pf-m-row-gap-md-on-2xl",
@@ -460,7 +470,7 @@ declare const _default: {
460
470
  "rowGap_2xlOn_2xl": "pf-m-row-gap-2xl-on-2xl",
461
471
  "rowGap_3xlOn_2xl": "pf-m-row-gap-3xl-on-2xl",
462
472
  "rowGap_4xlOn_2xl": "pf-m-row-gap-4xl-on-2xl",
463
- "columnGapInvalid": "pf-m-column-gap-invalid",
473
+ "columnGap": "pf-m-column-gap",
464
474
  "columnGapNone": "pf-m-column-gap-none",
465
475
  "columnGapSm": "pf-m-column-gap-sm",
466
476
  "columnGapMd": "pf-m-column-gap-md",
@@ -469,6 +479,7 @@ declare const _default: {
469
479
  "columnGap_2xl": "pf-m-column-gap-2xl",
470
480
  "columnGap_3xl": "pf-m-column-gap-3xl",
471
481
  "columnGap_4xl": "pf-m-column-gap-4xl",
482
+ "columnGapOnSm": "pf-m-column-gap-on-sm",
472
483
  "columnGapNoneOnSm": "pf-m-column-gap-none-on-sm",
473
484
  "columnGapSmOnSm": "pf-m-column-gap-sm-on-sm",
474
485
  "columnGapMdOnSm": "pf-m-column-gap-md-on-sm",
@@ -477,6 +488,7 @@ declare const _default: {
477
488
  "columnGap_2xlOnSm": "pf-m-column-gap-2xl-on-sm",
478
489
  "columnGap_3xlOnSm": "pf-m-column-gap-3xl-on-sm",
479
490
  "columnGap_4xlOnSm": "pf-m-column-gap-4xl-on-sm",
491
+ "columnGapOnMd": "pf-m-column-gap-on-md",
480
492
  "columnGapNoneOnMd": "pf-m-column-gap-none-on-md",
481
493
  "columnGapSmOnMd": "pf-m-column-gap-sm-on-md",
482
494
  "columnGapMdOnMd": "pf-m-column-gap-md-on-md",
@@ -485,6 +497,7 @@ declare const _default: {
485
497
  "columnGap_2xlOnMd": "pf-m-column-gap-2xl-on-md",
486
498
  "columnGap_3xlOnMd": "pf-m-column-gap-3xl-on-md",
487
499
  "columnGap_4xlOnMd": "pf-m-column-gap-4xl-on-md",
500
+ "columnGapOnLg": "pf-m-column-gap-on-lg",
488
501
  "columnGapNoneOnLg": "pf-m-column-gap-none-on-lg",
489
502
  "columnGapSmOnLg": "pf-m-column-gap-sm-on-lg",
490
503
  "columnGapMdOnLg": "pf-m-column-gap-md-on-lg",
@@ -493,6 +506,7 @@ declare const _default: {
493
506
  "columnGap_2xlOnLg": "pf-m-column-gap-2xl-on-lg",
494
507
  "columnGap_3xlOnLg": "pf-m-column-gap-3xl-on-lg",
495
508
  "columnGap_4xlOnLg": "pf-m-column-gap-4xl-on-lg",
509
+ "columnGapOnXl": "pf-m-column-gap-on-xl",
496
510
  "columnGapNoneOnXl": "pf-m-column-gap-none-on-xl",
497
511
  "columnGapSmOnXl": "pf-m-column-gap-sm-on-xl",
498
512
  "columnGapMdOnXl": "pf-m-column-gap-md-on-xl",
@@ -501,6 +515,7 @@ declare const _default: {
501
515
  "columnGap_2xlOnXl": "pf-m-column-gap-2xl-on-xl",
502
516
  "columnGap_3xlOnXl": "pf-m-column-gap-3xl-on-xl",
503
517
  "columnGap_4xlOnXl": "pf-m-column-gap-4xl-on-xl",
518
+ "columnGapOn_2xl": "pf-m-column-gap-on-2xl",
504
519
  "columnGapNoneOn_2xl": "pf-m-column-gap-none-on-2xl",
505
520
  "columnGapSmOn_2xl": "pf-m-column-gap-sm-on-2xl",
506
521
  "columnGapMdOn_2xl": "pf-m-column-gap-md-on-2xl",