@patternfly/patternfly 6.0.0-alpha.122 → 6.0.0-alpha.124

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/base/patternfly-variables.css +39 -26
  2. package/base/patternfly-variables.scss +11 -5
  3. package/base/tokens/_index.scss +1 -0
  4. package/base/tokens/tokens-charts-dark.scss +169 -0
  5. package/base/tokens/tokens-charts.scss +75 -65
  6. package/base/tokens/tokens-dark.scss +19 -7
  7. package/base/tokens/tokens-default.scss +25 -13
  8. package/base/tokens/tokens-font.scss +1 -1
  9. package/base/tokens/tokens-palette.scss +4 -5
  10. package/components/DataList/data-list.css +2 -2
  11. package/components/DataList/data-list.scss +2 -2
  12. package/components/Page/page.css +2 -230
  13. package/components/Page/page.scss +3 -158
  14. package/components/Wizard/wizard.css +80 -41
  15. package/components/Wizard/wizard.scss +98 -48
  16. package/components/_index.css +84 -273
  17. package/docs/components/Nav/examples/Navigation.css +0 -5
  18. package/docs/components/Wizard/examples/Wizard.md +827 -91
  19. package/docs/demos/Wizard/examples/Wizard.md +356 -198
  20. package/docs/utilities/Alignment/examples/Alignment.css +2 -2
  21. package/docs/utilities/Display/examples/Display.css +2 -2
  22. package/docs/utilities/Flex/examples/Flex.css +2 -2
  23. package/docs/utilities/Float/examples/Float.css +3 -3
  24. package/docs/utilities/Sizing/examples/Sizing.css +2 -2
  25. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  26. package/package.json +1 -1
  27. package/patternfly-base-no-globals.css +39 -26
  28. package/patternfly-base.css +39 -26
  29. package/patternfly-no-globals.css +123 -299
  30. package/patternfly.css +123 -299
  31. package/patternfly.min.css +1 -1
  32. package/patternfly.min.css.map +1 -1
  33. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  34. package/docs/components/Page/deprecated/PageHeader.md +0 -275
@@ -4815,11 +4815,8 @@
4815
4815
  vertical-align: -0.125em;
4816
4816
  }
4817
4817
 
4818
- html .ws-preview {
4819
- background-color: var(--pf-t--global--background--color--primary--default);
4820
- }
4821
-
4822
- :root {
4818
+ :where(:root) {
4819
+ --pf-v6-global--inverse--multiplier: 1;
4823
4820
  --pf-t--global--font--family--100: redhattextvf, redhattext, helvetica, arial, sans-serif;
4824
4821
  --pf-t--global--font--family--200: redhatdisplayvf, redhatdisplay, helvetica, arial, sans-serif;
4825
4822
  --pf-t--global--font--family--300: redhatmonovf, redhatmono, liberationmono, consolas, sfmono-regular, menlo, monaco, courier new, monospace;
@@ -4949,9 +4946,6 @@ html .ws-preview {
4949
4946
  --pf-t--global--transition--timing-function: cubic-bezier(.645, .045, .355, 1);
4950
4947
  --pf-t--global--transition--duration: 250ms;
4951
4948
  --pf-t--global--list-style: disc outside;
4952
- }
4953
-
4954
- :root {
4955
4949
  --pf-t--color--red--70: #5f0000;
4956
4950
  --pf-t--color--red--60: #a60000;
4957
4951
  --pf-t--color--red--50: #e00;
@@ -5020,9 +5014,6 @@ html .ws-preview {
5020
5014
  --pf-t--color--gray--20: #e0e0e0;
5021
5015
  --pf-t--color--gray--10: #f2f2f2;
5022
5016
  --pf-t--color--white: #fff;
5023
- }
5024
-
5025
- :root {
5026
5017
  --pf-t--global--background--color--action--plain--default: rgba(255, 255, 255, 0.0000);
5027
5018
  --pf-t--global--background--color--600: rgba(199, 199, 199, 0.2500);
5028
5019
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
@@ -5117,6 +5108,12 @@ html .ws-preview {
5117
5108
  --pf-t--global--color--nonstatus--red--300: var(--pf-t--color--red--40);
5118
5109
  --pf-t--global--color--nonstatus--red--200: var(--pf-t--color--red--30);
5119
5110
  --pf-t--global--color--nonstatus--red--100: var(--pf-t--color--red--20);
5111
+ --pf-t--global--color--severity--critical--100: var(--pf-t--color--red-orange--60);
5112
+ --pf-t--global--color--severity--important--100: var(--pf-t--color--orange--50);
5113
+ --pf-t--global--color--severity--moderate--100: var(--pf-t--color--yellow--40);
5114
+ --pf-t--global--color--severity--minor--100: var(--pf-t--color--gray--50);
5115
+ --pf-t--global--color--severity--none--100: var(--pf-t--color--blue--40);
5116
+ --pf-t--global--color--severity--undefined--100: var(--pf-t--color--gray--30);
5120
5117
  --pf-t--global--color--status--custom--200: var(--pf-t--color--teal--70);
5121
5118
  --pf-t--global--color--status--custom--100: var(--pf-t--color--teal--60);
5122
5119
  --pf-t--global--color--status--info--200: var(--pf-t--color--purple--60);
@@ -5185,12 +5182,12 @@ html .ws-preview {
5185
5182
  --pf-t--global--box-shadow--X--sm--bottom: var(--pf-t--global--box-shadow--X--400);
5186
5183
  --pf-t--global--box-shadow--X--sm--top: var(--pf-t--global--box-shadow--X--400);
5187
5184
  --pf-t--global--box-shadow--X--sm--default: var(--pf-t--global--box-shadow--X--400);
5188
- --pf-t--global--z-index--2xl: 600;
5189
- --pf-t--global--z-index--xl: 500;
5190
- --pf-t--global--z-index--lg: 400;
5191
- --pf-t--global--z-index--md: 300;
5192
- --pf-t--global--z-index--sm: 200;
5193
- --pf-t--global--z-index--xs: 100;
5185
+ --pf-t--global--z-index--2xl: var(--pf-t--global--z-index--600);
5186
+ --pf-t--global--z-index--xl: var(--pf-t--global--z-index--500);
5187
+ --pf-t--global--z-index--lg: var(--pf-t--global--z-index--400);
5188
+ --pf-t--global--z-index--md: var(--pf-t--global--z-index--300);
5189
+ --pf-t--global--z-index--sm: var(--pf-t--global--z-index--200);
5190
+ --pf-t--global--z-index--xs: var(--pf-t--global--z-index--100);
5194
5191
  --pf-t--global--font--size--4xl: var(--pf-t--global--font--size--800);
5195
5192
  --pf-t--global--font--size--3xl: var(--pf-t--global--font--size--700);
5196
5193
  --pf-t--global--font--size--2xl: var(--pf-t--global--font--size--600);
@@ -5257,6 +5254,7 @@ html .ws-preview {
5257
5254
  --pf-t--global--text--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
5258
5255
  --pf-t--global--text--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
5259
5256
  --pf-t--global--text--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
5257
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--text--color--100);
5260
5258
  --pf-t--global--text--color--required: var(--pf-t--global--text--color--400);
5261
5259
  --pf-t--global--text--color--on-disabled: var(--pf-t--global--color--disabled--300);
5262
5260
  --pf-t--global--text--color--disabled: var(--pf-t--global--color--disabled--200);
@@ -5366,12 +5364,19 @@ html .ws-preview {
5366
5364
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--color--nonstatus--red--300);
5367
5365
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--color--nonstatus--red--200);
5368
5366
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--border--color--300);
5367
+ --pf-t--global--border--color--disabled: var(--pf-t--global--color--disabled--200);
5369
5368
  --pf-t--global--border--color--clicked: var(--pf-t--global--color--brand--200);
5370
5369
  --pf-t--global--border--color--hover: var(--pf-t--global--color--brand--100);
5371
5370
  --pf-t--global--border--color--default: var(--pf-t--global--border--color--100);
5372
5371
  --pf-t--global--border--color--status--warning--clicked: var(--pf-t--global--color--status--warning--300);
5373
5372
  --pf-t--global--border--color--status--warning--hover: var(--pf-t--global--color--status--warning--300);
5374
5373
  --pf-t--global--border--color--status--warning--default: var(--pf-t--global--color--status--warning--200);
5374
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--color--severity--critical--100);
5375
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--color--severity--important--100);
5376
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--color--severity--moderate--100);
5377
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--color--severity--minor--100);
5378
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--color--severity--none--100);
5379
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--color--severity--undefined--100);
5375
5380
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--color--disabled--300);
5376
5381
  --pf-t--global--icon--color--disabled: var(--pf-t--global--color--disabled--200);
5377
5382
  --pf-t--global--icon--color--inverse: var(--pf-t--global--icon--color--300);
@@ -5456,15 +5461,14 @@ html .ws-preview {
5456
5461
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
5457
5462
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
5458
5463
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
5459
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5460
5464
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
5465
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5461
5466
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
5462
5467
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
5463
5468
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
5464
5469
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
5465
5470
  --pf-t--global--background--color--control--default: var(--pf-t--global--background--color--primary--default);
5466
5471
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
5467
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
5468
5472
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
5469
5473
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
5470
5474
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -5561,7 +5565,7 @@ html .ws-preview {
5561
5565
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
5562
5566
  }
5563
5567
 
5564
- :root:where(.pf-v6-theme-dark) {
5568
+ :where(.pf-v6-theme-dark) {
5565
5569
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
5566
5570
  --pf-t--global--dark--box-shadow--color--100: rgba(0, 0, 0, 0.5000);
5567
5571
  --pf-t--global--dark--background--color--600: rgba(199, 199, 199, 0.1500);
@@ -5623,6 +5627,12 @@ html .ws-preview {
5623
5627
  --pf-t--global--dark--color--status--warning--100: var(--pf-t--color--yellow--30);
5624
5628
  --pf-t--global--dark--color--status--success--200: var(--pf-t--color--green--30);
5625
5629
  --pf-t--global--dark--color--status--success--100: var(--pf-t--color--green--40);
5630
+ --pf-t--global--dark--color--severity--critical--100: var(--pf-t--color--red-orange--50);
5631
+ --pf-t--global--dark--color--severity--important--100: var(--pf-t--color--orange--40);
5632
+ --pf-t--global--dark--color--severity--moderate--100: var(--pf-t--color--yellow--30);
5633
+ --pf-t--global--dark--color--severity--minor--100: var(--pf-t--color--gray--30);
5634
+ --pf-t--global--dark--color--severity--none--100: var(--pf-t--color--blue--30);
5635
+ --pf-t--global--dark--color--severity--undefined--100: var(--pf-t--color--gray--40);
5626
5636
  --pf-t--global--dark--color--favorite--200: var(--pf-t--color--yellow--20);
5627
5637
  --pf-t--global--dark--color--favorite--100: var(--pf-t--color--yellow--30);
5628
5638
  --pf-t--global--dark--color--disabled--300: var(--pf-t--color--gray--70);
@@ -5640,6 +5650,7 @@ html .ws-preview {
5640
5650
  --pf-t--global--text--color--status--danger--clicked: var(--pf-t--global--dark--color--status--danger--300);
5641
5651
  --pf-t--global--text--color--status--danger--hover: var(--pf-t--global--dark--color--status--danger--300);
5642
5652
  --pf-t--global--text--color--status--danger--default: var(--pf-t--global--dark--color--status--danger--250);
5653
+ --pf-t--global--text--color--on-highlight: var(--pf-t--global--dark--text--color--300);
5643
5654
  --pf-t--global--text--color--required: var(--pf-t--global--dark--text--color--400);
5644
5655
  --pf-t--global--text--color--brand--clicked: var(--pf-t--global--dark--color--brand--300);
5645
5656
  --pf-t--global--text--color--brand--hover: var(--pf-t--global--dark--color--brand--300);
@@ -5680,9 +5691,16 @@ html .ws-preview {
5680
5691
  --pf-t--global--border--color--nonstatus--red--hover: var(--pf-t--global--dark--color--nonstatus--red--200);
5681
5692
  --pf-t--global--border--color--nonstatus--red--default: var(--pf-t--global--dark--color--nonstatus--red--100);
5682
5693
  --pf-t--global--border--color--on-secondary: var(--pf-t--global--dark--border--color--200);
5694
+ --pf-t--global--border--color--disabled: var(--pf-t--global--dark--color--disabled--200);
5683
5695
  --pf-t--global--border--color--clicked: var(--pf-t--global--dark--color--brand--200);
5684
5696
  --pf-t--global--border--color--hover: var(--pf-t--global--dark--color--brand--100);
5685
5697
  --pf-t--global--border--color--default: var(--pf-t--global--dark--border--color--200);
5698
+ --pf-t--global--icon--color--severity--critical--default: var(--pf-t--global--dark--color--severity--critical--100);
5699
+ --pf-t--global--icon--color--severity--important--default: var(--pf-t--global--dark--color--severity--important--100);
5700
+ --pf-t--global--icon--color--severity--moderate--default: var(--pf-t--global--dark--color--severity--moderate--100);
5701
+ --pf-t--global--icon--color--severity--minor--default: var(--pf-t--global--dark--color--severity--minor--100);
5702
+ --pf-t--global--icon--color--severity--none--default: var(--pf-t--global--dark--color--severity--none--100);
5703
+ --pf-t--global--icon--color--severity--undefined--default: var(--pf-t--global--dark--color--severity--undefined--100);
5686
5704
  --pf-t--global--icon--color--on-disabled: var(--pf-t--global--dark--color--disabled--300);
5687
5705
  --pf-t--global--icon--color--disabled: var(--pf-t--global--dark--color--disabled--200);
5688
5706
  --pf-t--global--icon--color--inverse: var(--pf-t--global--dark--icon--color--300);
@@ -5820,7 +5838,6 @@ html .ws-preview {
5820
5838
  --pf-t--global--text--color--on-brand--hover: var(--pf-t--global--text--color--inverse);
5821
5839
  --pf-t--global--text--color--on-brand--default: var(--pf-t--global--text--color--inverse);
5822
5840
  --pf-t--global--border--color--alt: var(--pf-t--global--background--color--primary--default);
5823
- --pf-t--global--border--color--disabled: var(--pf-t--global--background--color--disabled--default);
5824
5841
  --pf-t--global--border--color--status--custom--clicked: var(--pf-t--global--color--status--custom--clicked);
5825
5842
  --pf-t--global--border--color--status--custom--hover: var(--pf-t--global--color--status--custom--hover);
5826
5843
  --pf-t--global--border--color--status--custom--default: var(--pf-t--global--color--status--custom--default);
@@ -5910,18 +5927,14 @@ html .ws-preview {
5910
5927
  --pf-t--global--icon--color--on-brand--default: var(--pf-t--global--icon--color--inverse);
5911
5928
  --pf-t--global--color--status--read--on-primary: var(--pf-t--global--background--color--secondary--default);
5912
5929
  --pf-t--global--color--status--read--on-secondary: var(--pf-t--global--background--color--control--default);
5913
- --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5914
5930
  --pf-t--global--color--status--unread--attention--hover: var(--pf-t--global--color--status--danger--hover);
5931
+ --pf-t--global--color--status--unread--attention--clicked: var(--pf-t--global--color--status--danger--clicked);
5915
5932
  --pf-t--global--color--status--unread--attention--default: var(--pf-t--global--color--status--danger--default);
5916
5933
  --pf-t--global--color--status--unread--default--clicked: var(--pf-t--global--color--brand--clicked);
5917
5934
  --pf-t--global--color--status--unread--default--hover: var(--pf-t--global--color--brand--hover);
5918
5935
  --pf-t--global--color--status--unread--default--default: var(--pf-t--global--color--brand--default);
5919
5936
  }
5920
5937
 
5921
- :where(:root) {
5922
- --pf-v6-global--inverse--multiplier: 1;
5923
- }
5924
-
5925
5938
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) {
5926
5939
  --pf-v6-global--inverse--multiplier: -1;
5927
5940
  }
@@ -10187,7 +10200,7 @@ ol) {
10187
10200
  --pf-v6-c-data-list--FontSize: var( --pf-t--global--font--size--body);
10188
10201
  --pf-v6-c-data-list--LineHeight: var(--pf-t--global--font--line-height--body);
10189
10202
  --pf-v6-c-data-list--BorderBlockStartColor: var(--pf-t--global--border--color--default);
10190
- --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-t--global--spacer--sm);
10203
+ --pf-v6-c-data-list--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
10191
10204
  --pf-v6-c-data-list--sm--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
10192
10205
  --pf-v6-c-data-list--sm--BorderBlockStartColor: var(--pf-t--global--border--color--default);
10193
10206
  --pf-v6-c-data-list--MarginInlineStart: var(--pf-t--global--spacer--md);
@@ -10196,7 +10209,7 @@ ol) {
10196
10209
  --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
10197
10210
  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
10198
10211
  --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-t--global--border--color--default);
10199
- --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--spacer--sm);
10212
+ --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
10200
10213
  --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
10201
10214
  --pf-v6-c-data-list__item--sm--BorderBlockEndColor: var(--pf-t--global--border--color--default);
10202
10215
  --pf-v6-c-data-list__item-row--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -21822,32 +21835,7 @@ ul.pf-v6-c-list {
21822
21835
  --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21823
21836
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--md);
21824
21837
  --pf-v6-c-page--xl--inset: var(--pf-t--global--spacer--xl);
21825
- --pf-v6-c-page__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21826
- --pf-v6-c-page__header--ZIndex: var(--pf-t--global--z-index--md);
21827
- --pf-v6-c-page__header--MinHeight: 4.75rem;
21828
- --pf-v6-c-page__header-brand--PaddingInlineStart: var(--pf-t--global--spacer--md);
21829
- --pf-v6-c-page__header-brand--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
21830
- --pf-v6-c-page__header-brand--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
21831
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
21832
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
21833
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
21834
- --pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
21835
- --pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
21836
- --pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineStart: calc(var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart) * -1);
21837
- --pf-v6-c-page__header-sidebar-toggle__c-button--FontSize: var(--pf-t--global--icon--size--lg);
21838
- --pf-v6-c-page__header-brand-link--c-brand--MaxHeight: 3.75rem;
21839
- --pf-v6-c-page__header-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
21840
- --pf-v6-c-page__header-nav--xl--BackgroundColor: transparent;
21841
- --pf-v6-c-page__header-nav--xl--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
21842
- --pf-v6-c-page__header-nav--xl--PaddingInlineStart: var(--pf-t--global--spacer--xl);
21843
- --pf-v6-c-page__header-tools--MarginInlineEnd: var(--pf-t--global--spacer--md);
21844
- --pf-v6-c-page__header-tools--xl--MarginInlineEnd: var(--pf-t--global--spacer--lg);
21845
- --pf-v6-c-page__header-tools--c-avatar--MarginInlineStart: var(--pf-t--global--spacer--md);
21846
- --pf-v6-c-page__header-tools-group--MarginInlineStart: var(--pf-t--global--spacer--xl);
21847
- --pf-v6-c-page__header-tools-group--Display: flex;
21848
- --pf-v6-c-page__header-tools-item--Display: block;
21849
- --pf-v6-c-page__header-tools--c-button--m-selected--before--Width: auto;
21850
- --pf-v6-c-page__header-tools--c-button--m-selected--before--Height: auto;
21838
+ --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
21851
21839
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
21852
21840
  --pf-v6-c-page__sidebar--Width: 18.125rem;
21853
21841
  --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
@@ -21931,22 +21919,9 @@ ul.pf-v6-c-list {
21931
21919
  }
21932
21920
  @media (min-width: 1200px) {
21933
21921
  :where(:root, .pf-v6-c-page) {
21934
- --pf-v6-c-page__header-brand--PaddingInlineStart: var(--pf-v6-c-page__header-brand--xl--PaddingInlineStart);
21935
21922
  --pf-v6-c-page--inset: var(--pf-v6-c-page--xl--inset);
21936
21923
  }
21937
21924
  }
21938
- @media screen and (min-width: 1200px) {
21939
- :where(:root, .pf-v6-c-page) {
21940
- --pf-v6-c-page__header-nav--BackgroundColor: var(--pf-v6-c-page__header-nav--xl--BackgroundColor);
21941
- --pf-v6-c-page__header-nav--PaddingInlineEnd: var(--pf-v6-c-page__header-nav--xl--PaddingInlineEnd);
21942
- --pf-v6-c-page__header-nav--PaddingInlineStart: var(--pf-v6-c-page__header-nav--xl--PaddingInlineStart);
21943
- }
21944
- }
21945
- @media screen and (min-width: 1200px) {
21946
- :where(:root, .pf-v6-c-page) {
21947
- --pf-v6-c-page__header-tools--MarginInlineEnd: var(--pf-v6-c-page__header-tools--xl--MarginInlineEnd);
21948
- }
21949
- }
21950
21925
  @media screen and (min-width: 1200px) {
21951
21926
  :where(:root, .pf-v6-c-page) {
21952
21927
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
@@ -21970,201 +21945,11 @@ ul.pf-v6-c-list {
21970
21945
  }
21971
21946
  }
21972
21947
 
21973
- .pf-v6-c-page__header,
21974
21948
  .pf-v6-c-page > .pf-v6-c-masthead {
21975
- z-index: var(--pf-v6-c-page__header--ZIndex);
21949
+ z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
21976
21950
  grid-area: header;
21977
21951
  }
21978
21952
 
21979
- .pf-v6-c-page__header {
21980
- display: grid;
21981
- grid-template-columns: auto auto;
21982
- align-items: center;
21983
- min-width: 0;
21984
- min-height: var(--pf-v6-c-page__header--MinHeight);
21985
- background-color: var(--pf-v6-c-page__header--BackgroundColor);
21986
- }
21987
- .pf-v6-c-page__header > * {
21988
- display: flex;
21989
- align-items: center;
21990
- }
21991
- @media screen and (min-width: 992px) {
21992
- .pf-v6-c-page__header {
21993
- grid-template-columns: auto 1fr auto;
21994
- }
21995
- }
21996
- .pf-v6-c-page__header .pf-v6-c-masthead {
21997
- grid-column: span 2;
21998
- align-self: stretch;
21999
- }
22000
-
22001
- .pf-v6-c-page__header-brand {
22002
- grid-column: 1/2;
22003
- padding-inline-start: var(--pf-v6-c-page__header-brand--PaddingInlineStart);
22004
- }
22005
- @media (min-width: 1200px) {
22006
- .pf-v6-c-page__header-brand {
22007
- padding-inline-end: var(--pf-v6-c-page__header-brand--xl--PaddingInlineEnd);
22008
- }
22009
- }
22010
-
22011
- .pf-v6-c-page__header-brand-link {
22012
- display: flex;
22013
- flex: 1;
22014
- align-items: center;
22015
- }
22016
- .pf-v6-c-page__header-brand-link .pf-v6-c-brand {
22017
- max-height: var(--pf-v6-c-page__header-brand-link--c-brand--MaxHeight);
22018
- }
22019
-
22020
- .pf-v6-c-page__header-brand-toggle .pf-v6-c-button {
22021
- padding-block-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockStart);
22022
- padding-block-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingBlockEnd);
22023
- padding-inline-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineStart);
22024
- padding-inline-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--PaddingInlineEnd);
22025
- margin-inline-start: var(--pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineStart);
22026
- margin-inline-end: var(--pf-v6-c-page__header-sidebar-toggle__c-button--MarginInlineEnd);
22027
- font-size: var(--pf-v6-c-page__header-sidebar-toggle__c-button--FontSize);
22028
- line-height: 1;
22029
- }
22030
-
22031
- .pf-v6-c-page__header-nav {
22032
- grid-row: 2/3;
22033
- grid-column: 1/-1;
22034
- align-self: stretch;
22035
- min-width: 0;
22036
- padding-inline-start: var(--pf-v6-c-page__header-nav--PaddingInlineStart);
22037
- padding-inline-end: var(--pf-v6-c-page__header-nav--PaddingInlineEnd);
22038
- background-color: var(--pf-v6-c-page__header-nav--BackgroundColor);
22039
- }
22040
- @media screen and (min-width: 1200px) {
22041
- .pf-v6-c-page__header-nav {
22042
- grid-row: 1/2;
22043
- grid-column: 2/3;
22044
- }
22045
- }
22046
- .pf-v6-c-page__header-nav .pf-v6-c-nav {
22047
- align-self: stretch;
22048
- }
22049
-
22050
- .pf-v6-c-page__header-tools {
22051
- grid-column: 2/3;
22052
- margin-inline-start: auto;
22053
- margin-inline-end: var(--pf-v6-c-page__header-tools--MarginInlineEnd);
22054
- }
22055
- .pf-v6-c-page__header-tools .pf-v6-c-avatar {
22056
- margin-inline-start: var(--pf-v6-c-page__header-tools--c-avatar--MarginInlineStart);
22057
- }
22058
- @media screen and (min-width: 992px) {
22059
- .pf-v6-c-page__header-tools {
22060
- grid-column: 3/4;
22061
- }
22062
- }
22063
-
22064
- .pf-v6-c-page__header-tools-group {
22065
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-group--Display);
22066
- --pf-v6-hidden-visible--hidden--Display: none;
22067
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22068
- display: var(--pf-v6-hidden-visible--Display);
22069
- align-items: center;
22070
- }
22071
- .pf-v6-c-page__header-tools-group.pf-m-hidden {
22072
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22073
- }
22074
- @media screen and (min-width: 576px) {
22075
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-sm {
22076
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22077
- }
22078
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-sm {
22079
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22080
- }
22081
- }
22082
- @media screen and (min-width: 768px) {
22083
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-md {
22084
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22085
- }
22086
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-md {
22087
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22088
- }
22089
- }
22090
- @media screen and (min-width: 992px) {
22091
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-lg {
22092
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22093
- }
22094
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-lg {
22095
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22096
- }
22097
- }
22098
- @media screen and (min-width: 1200px) {
22099
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-xl {
22100
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22101
- }
22102
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-xl {
22103
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22104
- }
22105
- }
22106
- @media screen and (min-width: 1450px) {
22107
- .pf-v6-c-page__header-tools-group.pf-m-hidden-on-2xl {
22108
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22109
- }
22110
- .pf-v6-c-page__header-tools-group.pf-m-visible-on-2xl {
22111
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22112
- }
22113
- }
22114
- .pf-v6-c-page__header-tools-group + .pf-v6-c-page__header-tools-group {
22115
- margin-inline-start: var(--pf-v6-c-page__header-tools-group--MarginInlineStart);
22116
- }
22117
-
22118
- .pf-v6-c-page__header-tools-item {
22119
- --pf-v6-hidden-visible--visible--Display: var(--pf-v6-c-page__header-tools-item--Display);
22120
- --pf-v6-hidden-visible--hidden--Display: none;
22121
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22122
- display: var(--pf-v6-hidden-visible--Display);
22123
- }
22124
- .pf-v6-c-page__header-tools-item.pf-m-hidden {
22125
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22126
- }
22127
- @media screen and (min-width: 576px) {
22128
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-sm {
22129
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22130
- }
22131
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-sm {
22132
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22133
- }
22134
- }
22135
- @media screen and (min-width: 768px) {
22136
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-md {
22137
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22138
- }
22139
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-md {
22140
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22141
- }
22142
- }
22143
- @media screen and (min-width: 992px) {
22144
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-lg {
22145
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22146
- }
22147
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-lg {
22148
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22149
- }
22150
- }
22151
- @media screen and (min-width: 1200px) {
22152
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-xl {
22153
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22154
- }
22155
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-xl {
22156
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22157
- }
22158
- }
22159
- @media screen and (min-width: 1450px) {
22160
- .pf-v6-c-page__header-tools-item.pf-m-hidden-on-2xl {
22161
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
22162
- }
22163
- .pf-v6-c-page__header-tools-item.pf-m-visible-on-2xl {
22164
- --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
22165
- }
22166
- }
22167
-
22168
21953
  .pf-v6-c-page__sidebar {
22169
21954
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
22170
21955
  display: flex;
@@ -31345,54 +31130,61 @@ label.pf-v6-c-tree-view__node-text {
31345
31130
  --pf-v6-c-wizard__title-text--Color: var(--pf-t--global--text--color--regular);
31346
31131
  --pf-v6-c-wizard__description--PaddingBlockStart: var(--pf-t--global--spacer--sm);
31347
31132
  --pf-v6-c-wizard__description--Color: var(--pf-t--global--text--color--subtle);
31348
- --pf-v6-c-wizard__nav-link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
31349
- --pf-v6-c-wizard__nav-link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
31350
- --pf-v6-c-wizard__nav-link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
31351
- --pf-v6-c-wizard__nav-link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
31133
+ --pf-v6-c-wizard__nav-link--Gap: var(--pf-t--global--spacer--xs);
31352
31134
  --pf-v6-c-wizard__nav-link--Color: var(--pf-t--global--text--color--subtle);
31353
31135
  --pf-v6-c-wizard__nav-link--TextDecoration: none;
31354
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
31355
- --pf-v6-c-wizard__nav-link--BorderRadius: var(--pf-t--global--border--radius--small);
31356
31136
  --pf-v6-c-wizard__nav-link--hover--Color: var(--pf-t--global--text--color--subtle);
31357
31137
  --pf-v6-c-wizard__nav-link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
31358
31138
  --pf-v6-c-wizard__nav-link--m-current--Color: var(--pf-t--global--text--color--regular);
31359
31139
  --pf-v6-c-wizard__nav-link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
31360
31140
  --pf-v6-c-wizard__nav-link--m-disabled--Color: var(--pf-t--global--text--color--disabled);
31361
31141
  --pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor: transparent;
31142
+ --pf-v6-c-wizard__nav-link-main--PaddingBlockStart: var(--pf-t--global--spacer--sm);
31143
+ --pf-v6-c-wizard__nav-link-main--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
31144
+ --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
31145
+ --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
31146
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
31147
+ --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
31362
31148
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
31363
31149
  --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
31364
31150
  --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
31365
31151
  --pf-v6-c-wizard__nav-link-toggle-icon--Transition: var(--pf-t--global--transition);
31366
31152
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
31367
31153
  --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
31368
- --pf-v6-c-wizard__nav-link--before--Width: 1.5rem;
31369
- --pf-v6-c-wizard__nav-link--before--Height: 1.5rem;
31370
- --pf-v6-c-wizard__nav-link--before--InsetBlockStart: calc(calc(var(--pf-v6-c-wizard__nav-link--PaddingBlockStart) + var(--pf-v6-c-wizard__nav-link--PaddingBlockEnd) + 1em * var(--pf-t--global--font--line-height--body)) / 2);
31154
+ --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
31155
+ --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
31156
+ --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
31371
31157
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
31372
31158
  --pf-v6-c-wizard__nav-link--before--BorderRadius: var(--pf-t--global--border--radius--large);
31373
31159
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-t--global--text--color--regular);
31374
31160
  --pf-v6-c-wizard__nav-link--before--FontSize: var(--pf-t--global--font--size--body--default);
31375
- --pf-v6-c-wizard__nav-link--before--TranslateX: calc(-100% - var(--pf-t--global--spacer--xs));
31376
- --pf-v6-c-wizard__nav-link--before--TranslateY: -50%;
31377
31161
  --pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor: var(--pf-t--global--color--brand--default);
31378
31162
  --pf-v6-c-wizard__nav-link--m-current--before--Color: var(--pf-t--global--text--color--on-brand--default);
31379
31163
  --pf-v6-c-wizard__nav-link--m-disabled--before--BackgroundColor: transparent;
31380
31164
  --pf-v6-c-wizard__nav-link--m-disabled--before--Color: var(--pf-t--global--text--color--disabled);
31165
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-t--global--icon--color--regular);
31166
+ --pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
31167
+ --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
31168
+ --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
31381
31169
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
31382
31170
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
31383
31171
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
31384
31172
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
31385
31173
  --pf-v6-c-wizard__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
31386
- --pf-v6-c-wizard__toggle--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) + var(--pf-v6-c-wizard__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
31174
+ --pf-v6-c-wizard__toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
31387
31175
  --pf-v6-c-wizard__toggle--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
31388
31176
  --pf-v6-c-wizard__toggle--BorderBlockEndColor: var(--pf-t--global--border--color--default);
31389
- --pf-v6-c-wizard--m-in-page__toggle--xl--PaddingInlineStart: calc(var(--pf-t--global--spacer--xl) + var(--pf-v6-c-wizard__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
31390
- --pf-v6-c-wizard__toggle-num--before--InsetBlockStart: -0.125rem;
31177
+ --pf-v6-c-wizard__toggle-num--InsetBlockStart: 0;
31391
31178
  --pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--sm);
31392
31179
  --pf-v6-c-wizard__toggle-list-item--MarginBlockEnd: var(--pf-t--global--spacer--xs);
31180
+ --pf-v6-c-wizard__toggle-list-item--Gap: var(--pf-t--global--spacer--sm);
31181
+ --pf-v6-c-wizard__nav-link-status-icon--LineHeight: 1;
31182
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-t--global--icon--color--regular);
31183
+ --pf-v6-c-wizard__toggle--m-danger__nav-link-status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
31184
+ --pf-v6-c-wizard__toggle-status-icon--InsetBlockStart: 2px;
31185
+ --pf-v6-c-wizard__toggle-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
31393
31186
  --pf-v6-c-wizard__toggle-list--MarginInlineEnd: var(--pf-t--global--spacer--sm);
31394
31187
  --pf-v6-c-wizard__toggle-list--MarginBlockEnd: calc(var(--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd) * -1);
31395
- --pf-v6-c-wizard__toggle-separator--MarginInlineStart: var(--pf-t--global--spacer--sm);
31396
31188
  --pf-v6-c-wizard__toggle-separator--Color: var(--pf-t--global--border--color--default);
31397
31189
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
31398
31190
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
@@ -31406,8 +31198,8 @@ label.pf-v6-c-tree-view__node-text {
31406
31198
  --pf-v6-c-wizard__nav-list--PaddingBlockStart: var(--pf-t--global--spacer--lg);
31407
31199
  --pf-v6-c-wizard__nav-list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
31408
31200
  --pf-v6-c-wizard__nav-list--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
31409
- --pf-v6-c-wizard__nav-list--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) + var(--pf-v6-c-wizard__nav-link--before--Width) + var(--pf-t--global--spacer--sm));
31410
- --pf-v6-c-wizard__nav-list--nested--MarginInlineStart: var(--pf-t--global--spacer--md);
31201
+ --pf-v6-c-wizard__nav-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
31202
+ --pf-v6-c-wizard__nav-list--nested--MarginInlineStart: var(--pf-t--global--spacer--lg);
31411
31203
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
31412
31204
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
31413
31205
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
@@ -31424,8 +31216,8 @@ label.pf-v6-c-tree-view__node-text {
31424
31216
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
31425
31217
  --pf-v6-c-wizard__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
31426
31218
  --pf-v6-c-wizard__footer--PaddingInlineStart: var(--pf-t--global--spacer--lg);
31427
- --pf-v6-c-wizard__footer--BorderWidth: var(--pf-t--global--border--width--divider--default);
31428
- --pf-v6-c-wizard__footer--BorderColor: var(--pf-t--global--border--color--default);
31219
+ --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
31220
+ --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
31429
31221
  --pf-v6-c-wizard__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
31430
31222
  --pf-v6-c-wizard__footer--child--MarginBlockEnd: var(--pf-t--global--spacer--sm);
31431
31223
  --pf-v6-c-wizard__footer-cancel--MarginInlineStart: calc(var(--pf-t--global--spacer--2xl) - var(--pf-v6-c-wizard__footer--child--MarginInlineEnd));
@@ -31537,6 +31329,9 @@ label.pf-v6-c-tree-view__node-text {
31537
31329
  }
31538
31330
 
31539
31331
  .pf-v6-c-wizard__toggle-list-item {
31332
+ display: flex;
31333
+ gap: var(--pf-v6-c-wizard__toggle-list-item--Gap);
31334
+ align-items: baseline;
31540
31335
  margin-block-end: var(--pf-v6-c-wizard__toggle-list-item--MarginBlockEnd);
31541
31336
  text-align: start;
31542
31337
  word-break: break-word;
@@ -31544,14 +31339,25 @@ label.pf-v6-c-tree-view__node-text {
31544
31339
  .pf-v6-c-wizard__toggle-list-item:not(:last-child) {
31545
31340
  margin-inline-end: var(--pf-v6-c-wizard__toggle-list-item--not-last-child--MarginInlineEnd);
31546
31341
  }
31342
+ .pf-v6-c-wizard__toggle-list-item.pf-m-danger {
31343
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
31344
+ --pf-v6-c-wizard__toggle-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
31345
+ }
31547
31346
 
31548
31347
  .pf-v6-c-wizard__toggle-num {
31549
- --pf-v6-c-wizard__nav-link--before--TranslateY: 0;
31550
- --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-v6-c-wizard__toggle-num--before--InsetBlockStart);
31348
+ position: relative;
31349
+ inset-block-start: var(--pf-v6-c-wizard__toggle-num--InsetBlockStart);
31350
+ }
31351
+
31352
+ .pf-v6-c-wizard__toggle-status-icon {
31353
+ position: relative;
31354
+ inset-block-start: var(--pf-v6-c-wizard__toggle-status-icon--InsetBlockStart);
31355
+ font-size: var(--pf-v6-c-wizard__toggle-status-icon--FontSize);
31356
+ line-height: var(--pf-v6-c-wizard__nav-link-status-icon--LineHeight);
31357
+ color: var(--pf-v6-c-wizard__toggle-status-icon--Color);
31551
31358
  }
31552
31359
 
31553
31360
  .pf-v6-c-wizard__toggle-separator {
31554
- margin-inline-start: var(--pf-v6-c-wizard__toggle-separator--MarginInlineStart);
31555
31361
  color: var(--pf-v6-c-wizard__toggle-separator--Color);
31556
31362
  }
31557
31363
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-separator {
@@ -31650,30 +31456,26 @@ label.pf-v6-c-tree-view__node-text {
31650
31456
  }
31651
31457
  .pf-v6-c-wizard__nav-item :where(:hover) {
31652
31458
  --pf-v6-c-wizard__nav-link--Color: var({$wizard}__nav-link--hover--Color);
31653
- --pf-v6-c-wizard__nav-link--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
31459
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var({$wizard}__nav-link--hover--BackgroundColor);
31654
31460
  }
31655
31461
 
31656
31462
  .pf-v6-c-wizard__nav-link {
31657
31463
  position: relative;
31658
- display: inline-block;
31464
+ display: flex;
31465
+ gap: var(--pf-v6-c-wizard__nav-link--Gap);
31659
31466
  width: 100%;
31660
- padding-block-start: var(--pf-v6-c-wizard__nav-link--PaddingBlockStart);
31661
- padding-block-end: var(--pf-v6-c-wizard__nav-link--PaddingBlockEnd);
31662
- padding-inline-start: var(--pf-v6-c-wizard__nav-link--PaddingInlineStart);
31663
- padding-inline-end: var(--pf-v6-c-wizard__nav-link--PaddingInlineEnd);
31467
+ padding-inline: 0;
31664
31468
  color: var(--pf-v6-c-wizard__nav-link--Color);
31665
31469
  text-align: start;
31666
31470
  text-decoration: var(--pf-v6-c-wizard__nav-link--TextDecoration);
31667
31471
  word-break: break-word;
31668
- background-color: var(--pf-v6-c-wizard__nav-link--BackgroundColor);
31472
+ counter-increment: wizard-nav-count;
31473
+ background-color: transparent;
31669
31474
  border: none;
31670
31475
  border-radius: var(--pf-v6-c-wizard__nav-link--BorderRadius);
31671
31476
  }
31672
31477
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
31673
- transform: translateX(var(--pf-v6-c-wizard__nav-link--before--TranslateX)) translateY(var(--pf-v6-c-wizard__nav-link--before--TranslateY));
31674
- position: absolute;
31675
- inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
31676
- inset-inline-start: 0;
31478
+ position: relative;
31677
31479
  display: inline-flex;
31678
31480
  align-items: center;
31679
31481
  justify-content: center;
@@ -31685,30 +31487,33 @@ label.pf-v6-c-tree-view__node-text {
31685
31487
  background-color: var(--pf-v6-c-wizard__nav-link--before--BackgroundColor);
31686
31488
  border-radius: var(--pf-v6-c-wizard__nav-link--before--BorderRadius);
31687
31489
  }
31688
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link::before {
31689
- transform: translateX(calc(var(--pf-v6-c-wizard__nav-link--before--TranslateX) * var(--pf-v6-global--inverse--multiplier))) translateY(var(--pf-v6-c-wizard__nav-link--before--TranslateY));
31690
- }
31691
31490
 
31692
31491
  .pf-v6-c-wizard__nav-link::before {
31492
+ inset-block-start: var(--pf-v6-c-wizard__nav-link--before--InsetBlockStart);
31693
31493
  content: counter(wizard-nav-count);
31694
- counter-increment: wizard-nav-count;
31695
31494
  }
31696
31495
  .pf-v6-c-wizard__nav-link.pf-m-current {
31697
31496
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-current--Color);
31698
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
31497
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--BackgroundColor);
31699
31498
  }
31700
31499
  .pf-v6-c-wizard__toggle-num, .pf-v6-c-wizard__nav-link.pf-m-current::before {
31701
31500
  --pf-v6-c-wizard__nav-link--before--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-current--before--BackgroundColor);
31702
31501
  --pf-v6-c-wizard__nav-link--before--Color: var(--pf-v6-c-wizard__nav-link--m-current--before--Color);
31703
31502
  }
31704
31503
 
31504
+ .pf-v6-c-wizard__nav-link.pf-m-danger {
31505
+ --pf-v6-c-wizard__nav-link-status-icon--Color: var(--pf-v6-c-wizard__nav-link--m-danger__nav-link-status-icon--Color);
31506
+ }
31507
+ .pf-v6-c-wizard__nav-link.pf-m-danger::before {
31508
+ display: none;
31509
+ }
31705
31510
  .pf-v6-c-wizard__nav-link:where(:hover, :focus) {
31706
31511
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--hover--Color);
31707
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
31512
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--hover--BackgroundColor);
31708
31513
  }
31709
31514
  .pf-v6-c-wizard__nav-link:disabled, .pf-v6-c-wizard__nav-link.pf-m-disabled {
31710
31515
  --pf-v6-c-wizard__nav-link--Color: var(--pf-v6-c-wizard__nav-link--m-disabled--Color);
31711
- --pf-v6-c-wizard__nav-link--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor);
31516
+ --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-v6-c-wizard__nav-link--m-disabled--BackgroundColor);
31712
31517
  pointer-events: none;
31713
31518
  }
31714
31519
  .pf-v6-c-wizard__nav-link:disabled::before, .pf-v6-c-wizard__nav-link.pf-m-disabled::before {
@@ -31720,6 +31525,25 @@ label.pf-v6-c-tree-view__node-text {
31720
31525
  flex-grow: 1;
31721
31526
  }
31722
31527
 
31528
+ .pf-v6-c-wizard__nav-link-main {
31529
+ display: flex;
31530
+ justify-content: space-between;
31531
+ padding-block-start: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockStart);
31532
+ padding-block-end: var(--pf-v6-c-wizard__nav-link-main--PaddingBlockEnd);
31533
+ padding-inline-start: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineStart);
31534
+ padding-inline-end: var(--pf-v6-c-wizard__nav-link-main--PaddingInlineEnd);
31535
+ background-color: var(--pf-v6-c-wizard__nav-link-main--BackgroundColor);
31536
+ border: none;
31537
+ border-radius: var(--pf-v6-c-wizard__nav-link-main--BorderRadius);
31538
+ }
31539
+
31540
+ .pf-v6-c-wizard__nav-link-status-icon {
31541
+ position: relative;
31542
+ inset-block-start: var(--pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart);
31543
+ font-size: var(--pf-v6-c-wizard__nav-link-status-icon--FontSize);
31544
+ color: var(--pf-v6-c-wizard__nav-link-status-icon--Color);
31545
+ }
31546
+
31723
31547
  .pf-v6-c-wizard__nav-link-toggle {
31724
31548
  padding-inline-start: var(--pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart);
31725
31549
  padding-inline-end: var(--pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd);
@@ -31764,7 +31588,7 @@ label.pf-v6-c-tree-view__node-text {
31764
31588
  padding-inline-start: var(--pf-v6-c-wizard__footer--PaddingInlineStart);
31765
31589
  padding-inline-end: var(--pf-v6-c-wizard__footer--PaddingInlineEnd);
31766
31590
  background-color: var(--pf-v6-c-wizard__footer--BackgroundColor);
31767
- border-block-start: var(--pf-v6-c-wizard__footer--BorderWidth) solid var(--pf-v6-c-wizard__footer--BorderColor);
31591
+ border-block-start: var(--pf-v6-c-wizard__footer--BorderBlockStartWidth) solid var(--pf-v6-c-wizard__footer--BorderBlockStartColor);
31768
31592
  }
31769
31593
  .pf-v6-c-wizard__footer > * {
31770
31594
  margin-block-end: var(--pf-v6-c-wizard__footer--child--MarginBlockEnd);