@patternfly/patternfly 6.0.0-alpha.214 → 6.0.0-alpha.216

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 (19) hide show
  1. package/base/patternfly-variables.css +13 -13
  2. package/base/tokens/tokens-charts-dark.scss +1 -1
  3. package/base/tokens/tokens-charts.scss +1 -1
  4. package/base/tokens/tokens-dark.scss +14 -14
  5. package/base/tokens/tokens-default.scss +1 -1
  6. package/base/tokens/tokens-palette.scss +1 -1
  7. package/components/Nav/nav.css +13 -0
  8. package/components/Nav/nav.scss +17 -0
  9. package/components/Slider/slider.css +5 -5
  10. package/components/Slider/slider.scss +5 -5
  11. package/components/_index.css +18 -5
  12. package/docs/components/Slider/examples/Slider.md +2 -2
  13. package/package.json +1 -1
  14. package/patternfly-base-no-globals.css +13 -13
  15. package/patternfly-base.css +13 -13
  16. package/patternfly-no-globals.css +31 -18
  17. package/patternfly.css +31 -18
  18. package/patternfly.min.css +1 -1
  19. package/patternfly.min.css.map +1 -1
package/base/patternfly-variables.css CHANGED
@@ -863,9 +863,9 @@
863
863
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
864
864
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
865
865
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
866
- --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
867
- --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
868
- --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
866
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
867
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
868
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
869
869
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
870
870
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
871
871
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -908,7 +908,7 @@
908
908
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
909
909
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
910
910
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
911
- --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
911
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
912
912
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
913
913
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
914
914
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -938,9 +938,9 @@
938
938
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
939
939
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
940
940
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
941
- --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
942
- --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
943
- --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
941
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
942
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
943
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
944
944
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
945
945
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
946
946
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -1074,9 +1074,9 @@
1074
1074
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
1075
1075
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
1076
1076
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
1077
- --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
1078
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
1079
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
1077
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
1078
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
1079
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
1080
1080
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
1081
1081
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
1082
1082
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -1140,9 +1140,9 @@
1140
1140
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
1141
1141
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
1142
1142
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
1143
- --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
1144
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
1145
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
1143
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
1144
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
1145
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
1146
1146
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
1147
1147
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
1148
1148
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
package/base/tokens/tokens-charts-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Thu, 15 Aug 2024 00:08:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-charts.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Thu, 15 Aug 2024 00:08:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--chart--global--BorderWidth--lg: 8;
package/base/tokens/tokens-dark.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Thu, 15 Aug 2024 00:08:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--action--plain--default: rgba(0, 0, 0, 0.0000);
@@ -32,9 +32,9 @@
32
32
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
33
33
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
34
34
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
35
- --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
36
- --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
37
- --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
35
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
36
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
37
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
38
38
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
39
39
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
40
40
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -77,7 +77,7 @@
77
77
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
78
78
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
79
79
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
80
- --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
80
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
81
81
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
82
82
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
83
83
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -107,9 +107,9 @@
107
107
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
108
108
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
109
109
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
110
- --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
111
- --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
112
- --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
110
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
111
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
112
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
113
113
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
114
114
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
115
115
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -243,9 +243,9 @@
243
243
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
244
244
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
245
245
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
246
- --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
247
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
248
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
246
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
247
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
248
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
249
249
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
250
250
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
251
251
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -309,9 +309,9 @@
309
309
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
310
310
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
311
311
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
312
- --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
313
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
314
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
312
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
313
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
314
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
315
315
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
316
316
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
317
317
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
package/base/tokens/tokens-default.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Thu, 15 Aug 2024 00:08:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--global--background--color--500: rgba(21, 21, 21, 0.2000);
package/base/tokens/tokens-palette.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 18 Jul 2024 22:27:54 GMT
3
+ // Generated on Thu, 15 Aug 2024 00:08:40 GMT
4
4
 
5
5
  @mixin pf-v6-tokens {
6
6
  --pf-t--color--black: #000000;
package/components/Nav/nav.css CHANGED
@@ -108,6 +108,19 @@
108
108
  .pf-v6-c-nav .pf-v6-c-menu {
109
109
  --pf-v6-c-menu--MinWidth: 100%;
110
110
  }
111
+ .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu {
112
+ --pf-v6-c-menu--PaddingBlockStart: 0;
113
+ --pf-v6-c-menu--PaddingBlockEnd: 0;
114
+ --pf-v6-c-menu--BackgroundColor: var(--pf-v6-c-nav--BackgroundColor);
115
+ --pf-v6-c-menu--BoxShadow: none;
116
+ --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-v6-c-nav__link--hover--BackgroundColor);
117
+ }
118
+ .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu .pf-v6-c-menu__list {
119
+ row-gap: var(--pf-v6-c-nav__subnav--RowGap);
120
+ }
121
+ .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item::before, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu .pf-v6-c-menu__list-item::before {
122
+ border-radius: var(--pf-v6-c-nav__link--BorderRadius);
123
+ }
111
124
 
112
125
  [class^=pf-v6-c-nav][hidden] {
113
126
  display: none;
package/components/Nav/nav.scss CHANGED
@@ -137,6 +137,23 @@
137
137
 
138
138
  .#{$menu} {
139
139
  --#{$menu}--MinWidth: 100%;
140
+
141
+ &.pf-m-drilldown,
142
+ &.pf-m-drilldown .#{$menu} {
143
+ --#{$menu}--PaddingBlockStart: 0;
144
+ --#{$menu}--PaddingBlockEnd: 0;
145
+ --#{$menu}--BackgroundColor: var(--#{$nav}--BackgroundColor);
146
+ --#{$menu}--BoxShadow: none;
147
+ --#{$menu}__list-item--hover--BackgroundColor: var(--pf-v6-c-nav__link--hover--BackgroundColor);
148
+
149
+ .#{$menu}__list {
150
+ row-gap: var(--#{$nav}__subnav--RowGap);
151
+ }
152
+
153
+ .#{$menu}__list-item::before {
154
+ border-radius: var(--#{$nav}__link--BorderRadius);
155
+ }
156
+ }
140
157
  }
141
158
  }
142
159
 
package/components/Slider/slider.css CHANGED
@@ -4,19 +4,19 @@
4
4
  --pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
5
5
  --pf-v6-c-slider__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
6
6
  --pf-v6-c-slider__rail-track--Height: 0.25rem;
7
- --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
7
+ --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
8
8
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
9
9
  --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
10
10
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
11
11
  --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
12
12
  --pf-v6-c-slider__steps--Height: var(--pf-v6-c-slider__steps--FontSize);
13
13
  --pf-v6-c-slider__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
14
- --pf-v6-c-slider__step-tick--Width: 0.25rem;
14
+ --pf-v6-c-slider__step-tick--Width: 0.15rem;
15
15
  --pf-v6-c-slider__step-tick--Height: 0.25rem;
16
- --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
16
+ --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
17
17
  --pf-v6-c-slider__step-tick--TranslateX: -50%;
18
- --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
19
- --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
18
+ --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
19
+ --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
20
20
  --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
21
21
  --pf-v6-c-slider__step--last-child__step-tick--TranslateX: -100%;
22
22
  --pf-v6-c-slider__step-label--TranslateX: -50%;
package/components/Slider/slider.scss CHANGED
@@ -8,7 +8,7 @@
8
8
  --#{$slider}__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
9
9
  --#{$slider}__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
10
10
  --#{$slider}__rail-track--Height: #{pf-size-prem(4px)};
11
- --#{$slider}__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
11
+ --#{$slider}__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
12
12
  --#{$slider}__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
13
13
  --#{$slider}__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
14
14
  --#{$slider}__rail-track--before--fill--BackgroundColor--gradient-stop: var(--#{$slider}--value);
@@ -19,12 +19,12 @@
19
19
 
20
20
  // step tick
21
21
  --#{$slider}__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
22
- --#{$slider}__step-tick--Width: #{pf-size-prem(4px)};
22
+ --#{$slider}__step-tick--Width: 0.15rem;
23
23
  --#{$slider}__step-tick--Height: #{pf-size-prem(4px)};
24
- --#{$slider}__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
24
+ --#{$slider}__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
25
25
  --#{$slider}__step-tick--TranslateX: -50%;
26
- --#{$slider}__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
27
- --#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
26
+ --#{$slider}__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
27
+ --#{$slider}__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
28
28
  --#{$slider}__step--first-child__step-tick--TranslateX: 0;
29
29
  --#{$slider}__step--last-child__step-tick--TranslateX: -100%;
30
30
 
package/components/_index.css CHANGED
@@ -10881,6 +10881,19 @@ ul.pf-v6-c-list {
10881
10881
  .pf-v6-c-nav .pf-v6-c-menu {
10882
10882
  --pf-v6-c-menu--MinWidth: 100%;
10883
10883
  }
10884
+ .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu {
10885
+ --pf-v6-c-menu--PaddingBlockStart: 0;
10886
+ --pf-v6-c-menu--PaddingBlockEnd: 0;
10887
+ --pf-v6-c-menu--BackgroundColor: var(--pf-v6-c-nav--BackgroundColor);
10888
+ --pf-v6-c-menu--BoxShadow: none;
10889
+ --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-v6-c-nav__link--hover--BackgroundColor);
10890
+ }
10891
+ .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu .pf-v6-c-menu__list {
10892
+ row-gap: var(--pf-v6-c-nav__subnav--RowGap);
10893
+ }
10894
+ .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item::before, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu .pf-v6-c-menu__list-item::before {
10895
+ border-radius: var(--pf-v6-c-nav__link--BorderRadius);
10896
+ }
10884
10897
 
10885
10898
  [class^=pf-v6-c-nav][hidden] {
10886
10899
  display: none;
@@ -14085,19 +14098,19 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
14085
14098
  --pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
14086
14099
  --pf-v6-c-slider__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
14087
14100
  --pf-v6-c-slider__rail-track--Height: 0.25rem;
14088
- --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
14101
+ --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
14089
14102
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
14090
14103
  --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
14091
14104
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
14092
14105
  --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
14093
14106
  --pf-v6-c-slider__steps--Height: var(--pf-v6-c-slider__steps--FontSize);
14094
14107
  --pf-v6-c-slider__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
14095
- --pf-v6-c-slider__step-tick--Width: 0.25rem;
14108
+ --pf-v6-c-slider__step-tick--Width: 0.15rem;
14096
14109
  --pf-v6-c-slider__step-tick--Height: 0.25rem;
14097
- --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
14110
+ --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
14098
14111
  --pf-v6-c-slider__step-tick--TranslateX: -50%;
14099
- --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
14100
- --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
14112
+ --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
14113
+ --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
14101
14114
  --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
14102
14115
  --pf-v6-c-slider__step--last-child__step-tick--TranslateX: -100%;
14103
14116
  --pf-v6-c-slider__step-label--TranslateX: -50%;
package/docs/components/Slider/examples/Slider.md CHANGED
@@ -401,7 +401,7 @@ cssPrefix: pf-v6-c-slider
401
401
  <br />
402
402
  <br />
403
403
 
404
- <div class="pf-v6-c-slider" style="--pf-v6-c-slider--value: 50%;">
404
+ <div class="pf-v6-c-slider pf-m-disabled" style="--pf-v6-c-slider--value: 50%;">
405
405
  <div class="pf-v6-c-slider__main">
406
406
  <div class="pf-v6-c-slider__rail">
407
407
  <div class="pf-v6-c-slider__rail-track"></div>
@@ -413,7 +413,7 @@ cssPrefix: pf-v6-c-slider
413
413
  aria-valuemax="100"
414
414
  aria-valuenow="50"
415
415
  aria-label="Value"
416
- tabindex="0"
416
+ aria-disabled="true"
417
417
  ></div>
418
418
  <div class="pf-v6-c-slider__value pf-m-floating">
419
419
  <div class="pf-v6-c-input-group">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@patternfly/patternfly",
3
3
  "description": "Assets, source, tooling, and content for PatternFly 4",
4
- "version": "6.0.0-alpha.214",
4
+ "version": "6.0.0-alpha.216",
5
5
  "keywords": [],
6
6
  "license": "MIT",
7
7
  "scripts": {
package/patternfly-base-no-globals.css CHANGED
@@ -5717,9 +5717,9 @@
5717
5717
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
5718
5718
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
5719
5719
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
5720
- --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
5721
- --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
5722
- --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
5720
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
5721
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
5722
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
5723
5723
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
5724
5724
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
5725
5725
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -5762,7 +5762,7 @@
5762
5762
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
5763
5763
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
5764
5764
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
5765
- --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
5765
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
5766
5766
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
5767
5767
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
5768
5768
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -5792,9 +5792,9 @@
5792
5792
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
5793
5793
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
5794
5794
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
5795
- --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
5796
- --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
5797
- --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
5795
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
5796
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
5797
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
5798
5798
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
5799
5799
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
5800
5800
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -5928,9 +5928,9 @@
5928
5928
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
5929
5929
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
5930
5930
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
5931
- --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
5932
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
5933
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
5931
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
5932
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
5933
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
5934
5934
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
5935
5935
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
5936
5936
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -5994,9 +5994,9 @@
5994
5994
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
5995
5995
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
5996
5996
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
5997
- --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
5998
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
5999
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
5997
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
5998
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
5999
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
6000
6000
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
6001
6001
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
6002
6002
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
package/patternfly-base.css CHANGED
@@ -5838,9 +5838,9 @@ button) {
5838
5838
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
5839
5839
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
5840
5840
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
5841
- --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
5842
- --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
5843
- --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
5841
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
5842
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
5843
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
5844
5844
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
5845
5845
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
5846
5846
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -5883,7 +5883,7 @@ button) {
5883
5883
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
5884
5884
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
5885
5885
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
5886
- --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
5886
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
5887
5887
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
5888
5888
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
5889
5889
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -5913,9 +5913,9 @@ button) {
5913
5913
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
5914
5914
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
5915
5915
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
5916
- --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
5917
- --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
5918
- --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
5916
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
5917
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
5918
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
5919
5919
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
5920
5920
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
5921
5921
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -6049,9 +6049,9 @@ button) {
6049
6049
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
6050
6050
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
6051
6051
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
6052
- --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
6053
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
6054
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
6052
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
6053
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
6054
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
6055
6055
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
6056
6056
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
6057
6057
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -6115,9 +6115,9 @@ button) {
6115
6115
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
6116
6116
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
6117
6117
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
6118
- --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
6119
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
6120
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
6118
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
6119
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
6120
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
6121
6121
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
6122
6122
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
6123
6123
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
package/patternfly-no-globals.css CHANGED
@@ -5718,9 +5718,9 @@
5718
5718
  --pf-t--global--dark--color--nonstatus--blue--100: var(--pf-t--color--blue--30);
5719
5719
  --pf-t--global--dark--color--nonstatus--blue--200: var(--pf-t--color--blue--20);
5720
5720
  --pf-t--global--dark--color--nonstatus--blue--300: var(--pf-t--color--blue--10);
5721
- --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--30);
5722
- --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--20);
5723
- --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--10);
5721
+ --pf-t--global--dark--color--nonstatus--gray--100: var(--pf-t--color--gray--60);
5722
+ --pf-t--global--dark--color--nonstatus--gray--200: var(--pf-t--color--gray--50);
5723
+ --pf-t--global--dark--color--nonstatus--gray--300: var(--pf-t--color--gray--40);
5724
5724
  --pf-t--global--dark--color--nonstatus--green--100: var(--pf-t--color--green--30);
5725
5725
  --pf-t--global--dark--color--nonstatus--green--200: var(--pf-t--color--green--20);
5726
5726
  --pf-t--global--dark--color--nonstatus--green--300: var(--pf-t--color--green--10);
@@ -5763,7 +5763,7 @@
5763
5763
  --pf-t--global--dark--icon--color--100: var(--pf-t--color--gray--10);
5764
5764
  --pf-t--global--dark--icon--color--200: var(--pf-t--color--gray--40);
5765
5765
  --pf-t--global--dark--icon--color--300: var(--pf-t--color--gray--90);
5766
- --pf-t--global--dark--text--color--100: var(--pf-t--color--gray--10);
5766
+ --pf-t--global--dark--text--color--100: var(--pf-t--color--white);
5767
5767
  --pf-t--global--dark--text--color--200: var(--pf-t--color--gray--30);
5768
5768
  --pf-t--global--dark--text--color--300: var(--pf-t--color--gray--90);
5769
5769
  --pf-t--global--dark--text--color--400: var(--pf-t--color--red-orange--30);
@@ -5793,9 +5793,9 @@
5793
5793
  --pf-t--global--border--color--nonstatus--blue--clicked: var(--pf-t--global--dark--color--nonstatus--blue--200);
5794
5794
  --pf-t--global--border--color--nonstatus--blue--default: var(--pf-t--global--dark--color--nonstatus--blue--100);
5795
5795
  --pf-t--global--border--color--nonstatus--blue--hover: var(--pf-t--global--dark--color--nonstatus--blue--200);
5796
- --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--200);
5797
- --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--100);
5798
- --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--200);
5796
+ --pf-t--global--border--color--nonstatus--gray--clicked: var(--pf-t--global--dark--color--nonstatus--gray--300);
5797
+ --pf-t--global--border--color--nonstatus--gray--default: var(--pf-t--global--dark--color--nonstatus--gray--200);
5798
+ --pf-t--global--border--color--nonstatus--gray--hover: var(--pf-t--global--dark--color--nonstatus--gray--300);
5799
5799
  --pf-t--global--border--color--nonstatus--green--clicked: var(--pf-t--global--dark--color--nonstatus--green--200);
5800
5800
  --pf-t--global--border--color--nonstatus--green--default: var(--pf-t--global--dark--color--nonstatus--green--100);
5801
5801
  --pf-t--global--border--color--nonstatus--green--hover: var(--pf-t--global--dark--color--nonstatus--green--200);
@@ -5929,9 +5929,9 @@
5929
5929
  --pf-t--global--icon--color--nonstatus--on-blue--clicked: var(--pf-t--global--icon--color--inverse);
5930
5930
  --pf-t--global--icon--color--nonstatus--on-blue--default: var(--pf-t--global--icon--color--inverse);
5931
5931
  --pf-t--global--icon--color--nonstatus--on-blue--hover: var(--pf-t--global--icon--color--inverse);
5932
- --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--inverse);
5933
- --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--inverse);
5934
- --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--inverse);
5932
+ --pf-t--global--icon--color--nonstatus--on-gray--clicked: var(--pf-t--global--icon--color--regular);
5933
+ --pf-t--global--icon--color--nonstatus--on-gray--default: var(--pf-t--global--icon--color--regular);
5934
+ --pf-t--global--icon--color--nonstatus--on-gray--hover: var(--pf-t--global--icon--color--regular);
5935
5935
  --pf-t--global--icon--color--nonstatus--on-green--clicked: var(--pf-t--global--icon--color--inverse);
5936
5936
  --pf-t--global--icon--color--nonstatus--on-green--default: var(--pf-t--global--icon--color--inverse);
5937
5937
  --pf-t--global--icon--color--nonstatus--on-green--hover: var(--pf-t--global--icon--color--inverse);
@@ -5995,9 +5995,9 @@
5995
5995
  --pf-t--global--text--color--nonstatus--on-blue--clicked: var(--pf-t--global--text--color--inverse);
5996
5996
  --pf-t--global--text--color--nonstatus--on-blue--default: var(--pf-t--global--text--color--inverse);
5997
5997
  --pf-t--global--text--color--nonstatus--on-blue--hover: var(--pf-t--global--text--color--inverse);
5998
- --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--inverse);
5999
- --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--inverse);
6000
- --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--inverse);
5998
+ --pf-t--global--text--color--nonstatus--on-gray--clicked: var(--pf-t--global--text--color--regular);
5999
+ --pf-t--global--text--color--nonstatus--on-gray--default: var(--pf-t--global--text--color--regular);
6000
+ --pf-t--global--text--color--nonstatus--on-gray--hover: var(--pf-t--global--text--color--regular);
6001
6001
  --pf-t--global--text--color--nonstatus--on-green--clicked: var(--pf-t--global--text--color--inverse);
6002
6002
  --pf-t--global--text--color--nonstatus--on-green--default: var(--pf-t--global--text--color--inverse);
6003
6003
  --pf-t--global--text--color--nonstatus--on-green--hover: var(--pf-t--global--text--color--inverse);
@@ -16944,6 +16944,19 @@ ul.pf-v6-c-list {
16944
16944
  .pf-v6-c-nav .pf-v6-c-menu {
16945
16945
  --pf-v6-c-menu--MinWidth: 100%;
16946
16946
  }
16947
+ .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu {
16948
+ --pf-v6-c-menu--PaddingBlockStart: 0;
16949
+ --pf-v6-c-menu--PaddingBlockEnd: 0;
16950
+ --pf-v6-c-menu--BackgroundColor: var(--pf-v6-c-nav--BackgroundColor);
16951
+ --pf-v6-c-menu--BoxShadow: none;
16952
+ --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-v6-c-nav__link--hover--BackgroundColor);
16953
+ }
16954
+ .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu .pf-v6-c-menu__list {
16955
+ row-gap: var(--pf-v6-c-nav__subnav--RowGap);
16956
+ }
16957
+ .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item::before, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu .pf-v6-c-menu__list-item::before {
16958
+ border-radius: var(--pf-v6-c-nav__link--BorderRadius);
16959
+ }
16947
16960
 
16948
16961
  [class^=pf-v6-c-nav][hidden] {
16949
16962
  display: none;
@@ -20148,19 +20161,19 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
20148
20161
  --pf-v6-c-slider__rail--PaddingBlockStart: var(--pf-t--global--spacer--md);
20149
20162
  --pf-v6-c-slider__rail--PaddingBlockEnd: var(--pf-t--global--spacer--md);
20150
20163
  --pf-v6-c-slider__rail-track--Height: 0.25rem;
20151
- --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--border--color--default);
20164
+ --pf-v6-c-slider__rail-track--before--base--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
20152
20165
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-t--global--border--color--hover);
20153
20166
  --pf-v6-c-slider__rail-track--before--BorderRadius: var(--pf-t--global--border--radius--tiny);
20154
20167
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop: var(--pf-v6-c-slider--value);
20155
20168
  --pf-v6-c-slider__steps--FontSize: var(--pf-t--global--font--size--sm);
20156
20169
  --pf-v6-c-slider__steps--Height: var(--pf-v6-c-slider__steps--FontSize);
20157
20170
  --pf-v6-c-slider__step-tick--InsetBlockStart: var(--pf-t--global--spacer--md);
20158
- --pf-v6-c-slider__step-tick--Width: 0.25rem;
20171
+ --pf-v6-c-slider__step-tick--Width: 0.15rem;
20159
20172
  --pf-v6-c-slider__step-tick--Height: 0.25rem;
20160
- --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--subtle);
20173
+ --pf-v6-c-slider__step-tick--BackgroundColor: var(--pf-t--global--icon--color--nonstatus--on-gray--default);
20161
20174
  --pf-v6-c-slider__step-tick--TranslateX: -50%;
20162
- --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--large);
20163
- --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--brand--clicked);
20175
+ --pf-v6-c-slider__step-tick--BorderRadius: var(--pf-t--global--border--radius--sharp);
20176
+ --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-t--global--icon--color--on-brand--default);
20164
20177
  --pf-v6-c-slider__step--first-child__step-tick--TranslateX: 0;
20165
20178
  --pf-v6-c-slider__step--last-child__step-tick--TranslateX: -100%;
20166
20179
  --pf-v6-c-slider__step-label--TranslateX: -50%;