@patternfly/react-styles 6.0.0-alpha.23 → 6.0.0-alpha.24

Sign up to get free protection for your applications and to get access to all the features.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,12 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [6.0.0-alpha.24](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.23...@patternfly/react-styles@6.0.0-alpha.24) (2024-06-05)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **charts:** renamed cyan to teal, gold to yellow ([#10518](https://github.com/patternfly/patternfly-react/issues/10518)) ([d407554](https://github.com/patternfly/patternfly-react/commit/d4075543aa02e6987abacde96011df2d0347e54a))
11
+
6
12
  # [6.0.0-alpha.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-alpha.22...@patternfly/react-styles@6.0.0-alpha.23) (2024-05-31)
7
13
 
8
14
  **Note:** Version bump only for package @patternfly/react-styles
@@ -1,4 +1,6 @@
1
1
  :where(:root, .pf-v6-c-badge) {
2
+ --pf-v6-c-badge--BorderColor: transparent;
3
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
2
4
  --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
3
5
  --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
4
6
  --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -14,9 +16,13 @@
14
16
  --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
15
17
  --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
16
18
  --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
19
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
20
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
21
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
17
22
  }
18
23
 
19
24
  .pf-v6-c-badge {
25
+ position: relative;
20
26
  display: inline-block;
21
27
  min-width: var(--pf-v6-c-badge--MinWidth);
22
28
  padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
@@ -29,6 +35,14 @@
29
35
  background-color: var(--pf-v6-c-badge--BackgroundColor);
30
36
  border-radius: var(--pf-v6-c-badge--BorderRadius);
31
37
  }
38
+ .pf-v6-c-badge::after {
39
+ position: absolute;
40
+ inset: 0;
41
+ pointer-events: none;
42
+ content: "";
43
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
44
+ border-radius: inherit;
45
+ }
32
46
  .pf-v6-c-badge.pf-m-read {
33
47
  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
34
48
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
@@ -39,6 +53,13 @@
39
53
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
40
54
  --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
41
55
  }
56
+ .pf-v6-c-badge.pf-m-disabled {
57
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
58
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
59
+ }
60
+ .pf-v6-c-badge.pf-m-disabled::after {
61
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
62
+ }
42
63
 
43
64
  .pf-v6-c-badge__toggle-icon {
44
65
  margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
@@ -4,7 +4,8 @@ declare const _default: {
4
4
  "badgeToggleIcon": "pf-v6-c-badge__toggle-icon",
5
5
  "modifiers": {
6
6
  "read": "pf-m-read",
7
- "unread": "pf-m-unread"
7
+ "unread": "pf-m-unread",
8
+ "disabled": "pf-m-disabled"
8
9
  }
9
10
  };
10
11
  export default _default;
@@ -6,6 +6,7 @@ exports.default = {
6
6
  "badgeToggleIcon": "pf-v6-c-badge__toggle-icon",
7
7
  "modifiers": {
8
8
  "read": "pf-m-read",
9
- "unread": "pf-m-unread"
9
+ "unread": "pf-m-unread",
10
+ "disabled": "pf-m-disabled"
10
11
  }
11
12
  };
@@ -4,6 +4,7 @@ export default {
4
4
  "badgeToggleIcon": "pf-v6-c-badge__toggle-icon",
5
5
  "modifiers": {
6
6
  "read": "pf-m-read",
7
- "unread": "pf-m-unread"
7
+ "unread": "pf-m-unread",
8
+ "disabled": "pf-m-disabled"
8
9
  }
9
10
  };
@@ -15,10 +15,9 @@
15
15
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
16
16
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
17
17
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
18
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
18
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
19
19
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
20
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
21
- --pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
20
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
22
21
  }
23
22
 
24
23
  .pf-v6-c-breadcrumb {
@@ -89,9 +88,6 @@ button.pf-v6-c-breadcrumb__link {
89
88
  margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
90
89
  margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
91
90
  }
92
- .pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu-toggle {
93
- line-height: var(--pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight);
94
- }
95
91
 
96
92
  .pf-v6-c-breadcrumb__heading {
97
93
  display: inline;
@@ -8,7 +8,6 @@ declare const _default: {
8
8
  "breadcrumbLink": "pf-v6-c-breadcrumb__link",
9
9
  "breadcrumbList": "pf-v6-c-breadcrumb__list",
10
10
  "dirRtl": "pf-v6-m-dir-rtl",
11
- "menuToggle": "pf-v6-c-menu-toggle",
12
11
  "modifiers": {
13
12
  "current": "pf-m-current"
14
13
  }
@@ -10,7 +10,6 @@ exports.default = {
10
10
  "breadcrumbLink": "pf-v6-c-breadcrumb__link",
11
11
  "breadcrumbList": "pf-v6-c-breadcrumb__list",
12
12
  "dirRtl": "pf-v6-m-dir-rtl",
13
- "menuToggle": "pf-v6-c-menu-toggle",
14
13
  "modifiers": {
15
14
  "current": "pf-m-current"
16
15
  }
@@ -8,7 +8,6 @@ export default {
8
8
  "breadcrumbLink": "pf-v6-c-breadcrumb__link",
9
9
  "breadcrumbList": "pf-v6-c-breadcrumb__list",
10
10
  "dirRtl": "pf-v6-m-dir-rtl",
11
- "menuToggle": "pf-v6-c-menu-toggle",
12
11
  "modifiers": {
13
12
  "current": "pf-m-current"
14
13
  }
@@ -13,6 +13,9 @@
13
13
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
14
14
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
15
15
  --pf-v6-c-button--TextDecoration: none;
16
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
17
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
18
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
16
19
  --pf-v6-c-button--hover--BackgroundColor: transparent;
17
20
  --pf-v6-c-button--hover--BorderColor: transparent;
18
21
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -205,8 +208,6 @@
205
208
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
206
209
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
207
210
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
208
- --pf-v6-c-button--m-progress--TransitionProperty: padding;
209
- --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
210
211
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
211
212
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
212
213
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -215,10 +216,7 @@
215
216
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
216
217
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
217
218
  --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
218
- --pf-v6-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
219
- --pf-v6-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
220
219
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
221
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
222
220
  }
223
221
 
224
222
  .pf-v6-c-button {
@@ -246,6 +244,9 @@
246
244
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
247
245
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
248
246
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
247
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
248
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
249
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
249
250
  }
250
251
  .pf-v6-c-button::after {
251
252
  position: absolute;
@@ -255,6 +256,7 @@
255
256
  border: var(--pf-v6-c-button--BorderWidth) solid;
256
257
  border-color: var(--pf-v6-c-button--BorderColor);
257
258
  border-radius: inherit;
259
+ transition: inherit;
258
260
  }
259
261
  .pf-v6-c-button.pf-m-primary {
260
262
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -268,7 +270,7 @@
268
270
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
269
271
  }
270
272
  .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
271
- border: var(--pf-v6-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
273
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
272
274
  }
273
275
  .pf-v6-c-button.pf-m-secondary {
274
276
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
@@ -499,9 +501,6 @@
499
501
  pointer-events: none;
500
502
  }
501
503
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
502
- --pf-v6-c-badge--m-unread--Color: var(--pf-v6-c-button--disabled__c-badge--Color);
503
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-c-button--disabled__c-badge--BackgroundColor);
504
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: 0;
505
504
  color: var(--pf-v6-c-button--disabled--Color);
506
505
  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
507
506
  }
@@ -518,7 +517,6 @@
518
517
  .pf-v6-c-button.pf-m-progress {
519
518
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
520
519
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
521
- transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
522
520
  }
523
521
  .pf-v6-c-button.pf-m-in-progress {
524
522
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
@@ -174,7 +174,7 @@
174
174
  }
175
175
 
176
176
  .pf-v6-c-card__header-main {
177
- flex: 1;
177
+ flex-grow: 1;
178
178
  }
179
179
 
180
180
  .pf-v6-c-card__header-toggle {
@@ -18,6 +18,7 @@
18
18
  --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
19
19
  --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
20
20
  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
21
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
21
22
  }
22
23
 
23
24
  .pf-v6-c-hint {
@@ -44,11 +45,14 @@
44
45
  grid-column: 2;
45
46
  grid-auto-flow: column;
46
47
  align-self: start;
48
+ margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
49
+ margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
47
50
  margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
48
51
  text-align: end;
49
52
  }
50
- .pf-v6-c-hint__actions .pf-v6-c-menu-toggle.pf-m-plain {
51
- margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
53
+ .pf-v6-c-hint__actions.pf-m-no-offset {
54
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
55
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
52
56
  }
53
57
  .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
54
58
  grid-column: 1;
@@ -6,11 +6,10 @@ declare const _default: {
6
6
  "hintBody": "pf-v6-c-hint__body",
7
7
  "hintFooter": "pf-v6-c-hint__footer",
8
8
  "hintTitle": "pf-v6-c-hint__title",
9
- "menuToggle": "pf-v6-c-menu-toggle",
10
9
  "modifiers": {
11
10
  "link": "pf-m-link",
12
11
  "inline": "pf-m-inline",
13
- "plain": "pf-m-plain"
12
+ "noOffset": "pf-m-no-offset"
14
13
  }
15
14
  };
16
15
  export default _default;
@@ -8,10 +8,9 @@ exports.default = {
8
8
  "hintBody": "pf-v6-c-hint__body",
9
9
  "hintFooter": "pf-v6-c-hint__footer",
10
10
  "hintTitle": "pf-v6-c-hint__title",
11
- "menuToggle": "pf-v6-c-menu-toggle",
12
11
  "modifiers": {
13
12
  "link": "pf-m-link",
14
13
  "inline": "pf-m-inline",
15
- "plain": "pf-m-plain"
14
+ "noOffset": "pf-m-no-offset"
16
15
  }
17
16
  };
@@ -6,10 +6,9 @@ export default {
6
6
  "hintBody": "pf-v6-c-hint__body",
7
7
  "hintFooter": "pf-v6-c-hint__footer",
8
8
  "hintTitle": "pf-v6-c-hint__title",
9
- "menuToggle": "pf-v6-c-menu-toggle",
10
9
  "modifiers": {
11
10
  "link": "pf-m-link",
12
11
  "inline": "pf-m-inline",
13
- "plain": "pf-m-plain"
12
+ "noOffset": "pf-m-no-offset"
14
13
  }
15
14
  };
@@ -35,11 +35,11 @@
35
35
  --pf-v6-c-icon--m-inline--Height: 1em;
36
36
  --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
37
37
  --pf-v6-c-icon__content--Color: initial;
38
- --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--color--status--danger--default);
39
- --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--color--status--warning--default);
40
- --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--color--status--success--default);
41
- --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--color--status--info--default);
42
- --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--color--status--custom--default);
38
+ --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
39
+ --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
40
+ --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
41
+ --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
42
+ --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
43
43
  --pf-v6-c-icon--m-inline__content--Color: initial;
44
44
  --pf-v6-c-icon__content--FontSize: 1em;
45
45
  --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
@@ -106,6 +106,9 @@
106
106
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
107
107
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
108
108
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
109
+ --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
110
+ --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
111
+ --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
109
112
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
110
113
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
111
114
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -243,6 +246,9 @@
243
246
  .pf-v6-c-menu-toggle.pf-m-small {
244
247
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
245
248
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
249
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
250
+ --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
251
+ --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
246
252
  }
247
253
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
248
254
  background-color: transparent;
@@ -20,6 +20,7 @@
20
20
  --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
21
21
  --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
22
22
  --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
23
+ --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
23
24
  --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
24
25
  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
25
26
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
@@ -36,7 +37,7 @@
36
37
  --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
37
38
  --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
38
39
  --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
39
- --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
40
+ --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
40
41
  --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
41
42
  --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
42
43
  --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
@@ -116,6 +117,7 @@
116
117
  flex-shrink: 0;
117
118
  gap: var(--pf-v6-c-modal-box__header--Gap);
118
119
  padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
120
+ padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
119
121
  padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
120
122
  padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
121
123
  }
@@ -61,7 +61,7 @@
61
61
  --pf-v6-c-multiple-file-upload__status--PaddingInlineEnd: var(--pf-t--global--spacer--md);
62
62
  --pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
63
63
  --pf-v6-c-multiple-file-upload__status-progress--Gap: var(--pf-t--global--spacer--sm);
64
- --pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--regular);
64
+ --pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--brand--default);
65
65
  --pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
66
66
  --pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
67
67
  --pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
@@ -40,6 +40,8 @@
40
40
  --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
41
41
  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
42
42
  --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
43
+ --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
44
+ --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
43
45
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
44
46
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
45
47
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
@@ -182,10 +184,15 @@
182
184
  background-color: var(--pf-v6-c-nav__link--hover--BackgroundColor);
183
185
  }
184
186
  .pf-v6-c-nav__link.pf-m-current, .pf-v6-c-nav__link.pf-m-current:hover {
187
+ --pf-v6-c-nav__link-icon--Color: var(--pf-v6-c-nav__link--m-current__link-icon--Color);
185
188
  color: var(--pf-v6-c-nav__link--m-current--Color);
186
189
  background-color: var(--pf-v6-c-nav__link--m-current--BackgroundColor);
187
190
  }
188
191
 
192
+ .pf-v6-c-nav__link-icon {
193
+ color: var(--pf-v6-c-nav__link-icon--Color);
194
+ }
195
+
189
196
  .pf-v6-c-nav__toggle {
190
197
  flex: none;
191
198
  align-self: start;
@@ -18,6 +18,7 @@ declare const _default: {
18
18
  "nav": "pf-v6-c-nav",
19
19
  "navItem": "pf-v6-c-nav__item",
20
20
  "navLink": "pf-v6-c-nav__link",
21
+ "navLinkIcon": "pf-v6-c-nav__link-icon",
21
22
  "navList": "pf-v6-c-nav__list",
22
23
  "navNav": "pf-v6-c-nav__nav",
23
24
  "navScrollButton": "pf-v6-c-nav__scroll-button",
@@ -20,6 +20,7 @@ exports.default = {
20
20
  "nav": "pf-v6-c-nav",
21
21
  "navItem": "pf-v6-c-nav__item",
22
22
  "navLink": "pf-v6-c-nav__link",
23
+ "navLinkIcon": "pf-v6-c-nav__link-icon",
23
24
  "navList": "pf-v6-c-nav__list",
24
25
  "navNav": "pf-v6-c-nav__nav",
25
26
  "navScrollButton": "pf-v6-c-nav__scroll-button",
@@ -18,6 +18,7 @@ export default {
18
18
  "nav": "pf-v6-c-nav",
19
19
  "navItem": "pf-v6-c-nav__item",
20
20
  "navLink": "pf-v6-c-nav__link",
21
+ "navLinkIcon": "pf-v6-c-nav__link-icon",
21
22
  "navList": "pf-v6-c-nav__list",
22
23
  "navNav": "pf-v6-c-nav__nav",
23
24
  "navScrollButton": "pf-v6-c-nav__scroll-button",
@@ -17,8 +17,6 @@
17
17
  --pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth: 0;
18
18
  --pf-v6-c-tabs--m-vertical__list--before--BorderBlockEndWidth: 0;
19
19
  --pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--before--border-width--base);
20
- --pf-v6-c-tabs--m-box__item--m-current--first-child__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
21
- --pf-v6-c-tabs--m-box__item--m-current--last-child__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
22
20
  --pf-v6-c-tabs__list--Display: flex;
23
21
  --pf-v6-c-tabs__item--BackgroundColor: transparent;
24
22
  --pf-v6-c-tabs__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -210,12 +208,6 @@
210
208
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
211
209
  --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--BackgroundColor);
212
210
  }
213
- .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current:first-child .pf-v6-c-tabs__link::before {
214
- border-inline-start-width: var(--pf-v6-c-tabs--m-box__item--m-current--first-child__link--before--BorderInlineStartWidth);
215
- }
216
- .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current:last-child .pf-v6-c-tabs__link::before {
217
- border-inline-end-width: var(--pf-v6-c-tabs--m-box__item--m-current--last-child__link--before--BorderInlineEndWidth);
218
- }
219
211
  .pf-v6-c-tabs.pf-m-box.pf-m-scrollable .pf-v6-c-tabs__item.pf-m-current:first-child .pf-v6-c-tabs__link::before {
220
212
  inset-inline-start: calc(var(--pf-v6-c-tabs__link--before--border-width--base) * -1);
221
213
  }
@@ -971,6 +971,8 @@
971
971
  }
972
972
 
973
973
  :where(:root, .pf-v6-c-badge) {
974
+ --pf-v6-c-badge--BorderColor: transparent;
975
+ --pf-v6-c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
974
976
  --pf-v6-c-badge--BorderRadius: var(--pf-t--global--border--radius--pill);
975
977
  --pf-v6-c-badge--FontSize: var(--pf-t--global--font--size--body--sm);
976
978
  --pf-v6-c-badge--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -986,9 +988,13 @@
986
988
  --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-t--global--color--brand--default);
987
989
  --pf-v6-c-badge--m-unread--Color: var(--pf-t--global--text--color--on-brand--default);
988
990
  --pf-v6-c-badge--m-unread__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
991
+ --pf-v6-c-badge--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
992
+ --pf-v6-c-badge--m-disabled--BorderColor: var(--pf-t--global--border--color--disabled);
993
+ --pf-v6-c-badge--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
989
994
  }
990
995
 
991
996
  .pf-v6-c-badge {
997
+ position: relative;
992
998
  display: inline-block;
993
999
  min-width: var(--pf-v6-c-badge--MinWidth);
994
1000
  padding-inline-start: var(--pf-v6-c-badge--PaddingInlineStart);
@@ -1001,6 +1007,14 @@
1001
1007
  background-color: var(--pf-v6-c-badge--BackgroundColor);
1002
1008
  border-radius: var(--pf-v6-c-badge--BorderRadius);
1003
1009
  }
1010
+ .pf-v6-c-badge::after {
1011
+ position: absolute;
1012
+ inset: 0;
1013
+ pointer-events: none;
1014
+ content: "";
1015
+ border: var(--pf-v6-c-badge--BorderWidth) solid var(--pf-v6-c-badge--BorderColor);
1016
+ border-radius: inherit;
1017
+ }
1004
1018
  .pf-v6-c-badge.pf-m-read {
1005
1019
  --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-read--Color);
1006
1020
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-read--BackgroundColor);
@@ -1011,6 +1025,13 @@
1011
1025
  --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-unread--BackgroundColor);
1012
1026
  --pf-v6-c-badge__toggle-icon--Color: var(--pf-v6-c-badge--m-unread__toggle-icon--Color);
1013
1027
  }
1028
+ .pf-v6-c-badge.pf-m-disabled {
1029
+ --pf-v6-c-badge--Color: var(--pf-v6-c-badge--m-disabled--Color);
1030
+ --pf-v6-c-badge--BackgroundColor: var(--pf-v6-c-badge--m-disabled--BackgroundColor);
1031
+ }
1032
+ .pf-v6-c-badge.pf-m-disabled::after {
1033
+ border-color: var(--pf-v6-c-badge--m-disabled--BorderColor);
1034
+ }
1014
1035
 
1015
1036
  .pf-v6-c-badge__toggle-icon {
1016
1037
  margin-inline-start: var(--pf-v6-c-badge__toggle-icon--MarginInlineStart);
@@ -1246,10 +1267,9 @@
1246
1267
  --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
1247
1268
  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
1248
1269
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
1249
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: calc(var(--pf-v6-c-breadcrumb__item--MarginInlineEnd) * -1);
1270
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
1250
1271
  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
1251
- --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: calc(var(--pf-v6-c-breadcrumb__item-divider--MarginInlineEnd) * -1);
1252
- --pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
1272
+ --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
1253
1273
  }
1254
1274
 
1255
1275
  .pf-v6-c-breadcrumb {
@@ -1320,9 +1340,6 @@ button.pf-v6-c-breadcrumb__link {
1320
1340
  margin-inline-start: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart);
1321
1341
  margin-inline-end: var(--pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd);
1322
1342
  }
1323
- .pf-v6-c-breadcrumb__dropdown .pf-v6-c-menu-toggle {
1324
- line-height: var(--pf-v6-c-breadcrumb__menu-toggle--c-menu-toggle--LineHeight);
1325
- }
1326
1343
 
1327
1344
  .pf-v6-c-breadcrumb__heading {
1328
1345
  display: inline;
@@ -1353,6 +1370,9 @@ button.pf-v6-c-breadcrumb__link {
1353
1370
  --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--button--default);
1354
1371
  --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
1355
1372
  --pf-v6-c-button--TextDecoration: none;
1373
+ --pf-v6-c-button--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
1374
+ --pf-v6-c-button--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
1375
+ --pf-v6-c-button--TransitionProperty: color, background-color, border-width, border-color, padding;
1356
1376
  --pf-v6-c-button--hover--BackgroundColor: transparent;
1357
1377
  --pf-v6-c-button--hover--BorderColor: transparent;
1358
1378
  --pf-v6-c-button--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
@@ -1545,8 +1565,6 @@ button.pf-v6-c-breadcrumb__link {
1545
1565
  --pf-v6-c-button__progress--InsetBlockStart: 50%;
1546
1566
  --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--md);
1547
1567
  --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
1548
- --pf-v6-c-button--m-progress--TransitionProperty: padding;
1549
- --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-t--global--transition--duration);
1550
1568
  --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
1551
1569
  --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--md) + var(--pf-v6-c-button__progress--width) / 2);
1552
1570
  --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -1555,10 +1573,7 @@ button.pf-v6-c-breadcrumb__link {
1555
1573
  --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
1556
1574
  --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
1557
1575
  --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
1558
- --pf-v6-c-button--disabled__c-badge--Color: var(--pf-t--global--text--color--disabled);
1559
- --pf-v6-c-button--disabled__c-badge--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
1560
1576
  --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
1561
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: var(--pf-t--global--border--width--regular);
1562
1577
  }
1563
1578
 
1564
1579
  .pf-v6-c-button {
@@ -1586,6 +1601,9 @@ button.pf-v6-c-breadcrumb__link {
1586
1601
  border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
1587
1602
  border-end-start-radius: var(--pf-v6-c-button--BorderEndStartRadius, var(--pf-v6-c-button--BorderRadius));
1588
1603
  border-end-end-radius: var(--pf-v6-c-button--BorderEndEndRadius, var(--pf-v6-c-button--BorderRadius));
1604
+ transition-timing-function: var(--pf-v6-c-button--TransitionTimingFunction);
1605
+ transition-duration: var(--pf-v6-c-button--TransitionDuration);
1606
+ transition-property: var(--pf-v6-c-button--TransitionProperty);
1589
1607
  }
1590
1608
  .pf-v6-c-button::after {
1591
1609
  position: absolute;
@@ -1595,6 +1613,7 @@ button.pf-v6-c-breadcrumb__link {
1595
1613
  border: var(--pf-v6-c-button--BorderWidth) solid;
1596
1614
  border-color: var(--pf-v6-c-button--BorderColor);
1597
1615
  border-radius: inherit;
1616
+ transition: inherit;
1598
1617
  }
1599
1618
  .pf-v6-c-button.pf-m-primary {
1600
1619
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-primary--Color);
@@ -1608,7 +1627,7 @@ button.pf-v6-c-breadcrumb__link {
1608
1627
  --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-primary--m-clicked__icon--Color);
1609
1628
  }
1610
1629
  .pf-v6-c-button.pf-m-primary .pf-v6-c-badge.pf-m-unread {
1611
- border: var(--pf-v6-c-button--m-primary__c-badge--BorderWidth) solid var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
1630
+ --pf-v6-c-badge--BorderColor: var(--pf-v6-c-button--m-primary__c-badge--BorderColor);
1612
1631
  }
1613
1632
  .pf-v6-c-button.pf-m-secondary {
1614
1633
  --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
@@ -1839,9 +1858,6 @@ button.pf-v6-c-breadcrumb__link {
1839
1858
  pointer-events: none;
1840
1859
  }
1841
1860
  .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
1842
- --pf-v6-c-badge--m-unread--Color: var(--pf-v6-c-button--disabled__c-badge--Color);
1843
- --pf-v6-c-badge--m-unread--BackgroundColor: var(--pf-v6-c-button--disabled__c-badge--BackgroundColor);
1844
- --pf-v6-c-button--m-primary__c-badge--BorderWidth: 0;
1845
1861
  color: var(--pf-v6-c-button--disabled--Color);
1846
1862
  background-color: var(--pf-v6-c-button--disabled--BackgroundColor);
1847
1863
  }
@@ -1858,7 +1874,6 @@ button.pf-v6-c-breadcrumb__link {
1858
1874
  .pf-v6-c-button.pf-m-progress {
1859
1875
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-progress--PaddingInlineEnd);
1860
1876
  --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-progress--PaddingInlineStart);
1861
- transition: var(--pf-v6-c-button--m-progress--TransitionProperty) var(--pf-v6-c-button--m-progress--TransitionDuration);
1862
1877
  }
1863
1878
  .pf-v6-c-button.pf-m-in-progress {
1864
1879
  --pf-v6-c-button--m-link--m-inline--PaddingInlineStart: var(--pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart);
@@ -2284,7 +2299,7 @@ button.pf-v6-c-breadcrumb__link {
2284
2299
  }
2285
2300
 
2286
2301
  .pf-v6-c-card__header-main {
2287
- flex: 1;
2302
+ flex-grow: 1;
2288
2303
  }
2289
2304
 
2290
2305
  .pf-v6-c-card__header-toggle {
@@ -6972,6 +6987,7 @@ select ~ .pf-v6-c-form-control__utilities {
6972
6987
  --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
6973
6988
  --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
6974
6989
  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
6990
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
6975
6991
  }
6976
6992
 
6977
6993
  .pf-v6-c-hint {
@@ -6998,11 +7014,14 @@ select ~ .pf-v6-c-form-control__utilities {
6998
7014
  grid-column: 2;
6999
7015
  grid-auto-flow: column;
7000
7016
  align-self: start;
7017
+ margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
7018
+ margin-block-end: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd);
7001
7019
  margin-inline-start: var(--pf-v6-c-hint__actions--MarginInlineStart);
7002
7020
  text-align: end;
7003
7021
  }
7004
- .pf-v6-c-hint__actions .pf-v6-c-menu-toggle.pf-m-plain {
7005
- margin-block-start: var(--pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart);
7022
+ .pf-v6-c-hint__actions.pf-m-no-offset {
7023
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: 0;
7024
+ --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: 0;
7006
7025
  }
7007
7026
  .pf-v6-c-hint__actions + .pf-v6-c-hint__body {
7008
7027
  grid-column: 1;
@@ -7138,11 +7157,11 @@ select ~ .pf-v6-c-form-control__utilities {
7138
7157
  --pf-v6-c-icon--m-inline--Height: 1em;
7139
7158
  --pf-v6-c-icon__content--svg--VerticalAlign: -.125em;
7140
7159
  --pf-v6-c-icon__content--Color: initial;
7141
- --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--color--status--danger--default);
7142
- --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--color--status--warning--default);
7143
- --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--color--status--success--default);
7144
- --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--color--status--info--default);
7145
- --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--color--status--custom--default);
7160
+ --pf-v6-c-icon__content--m-danger--Color: var(--pf-t--global--icon--color--status--danger--default);
7161
+ --pf-v6-c-icon__content--m-warning--Color: var(--pf-t--global--icon--color--status--warning--default);
7162
+ --pf-v6-c-icon__content--m-success--Color: var(--pf-t--global--icon--color--status--success--default);
7163
+ --pf-v6-c-icon__content--m-info--Color: var(--pf-t--global--icon--color--status--info--default);
7164
+ --pf-v6-c-icon__content--m-custom--Color: var(--pf-t--global--icon--color--status--custom--default);
7146
7165
  --pf-v6-c-icon--m-inline__content--Color: initial;
7147
7166
  --pf-v6-c-icon__content--FontSize: 1em;
7148
7167
  --pf-v6-c-icon--m-sm__content--FontSize: var(--pf-t--global--icon--size--sm);
@@ -10019,6 +10038,9 @@ ul.pf-v6-c-list {
10019
10038
  --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
10020
10039
  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
10021
10040
  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
10041
+ --pf-v6-c-menu-toggle--m-small--ColumnGap: calc(var(--pf-t--global--spacer--control--horizontal--compact) / 2);
10042
+ --pf-v6-c-menu-toggle--m-small--FontSize: var(--pf-t--global--font--size--body--sm);
10043
+ --pf-v6-c-menu-toggle--m-small__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--xs) + var(--pf-t--global--spacer--xs));
10022
10044
  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
10023
10045
  --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
10024
10046
  --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -10156,6 +10178,9 @@ ul.pf-v6-c-list {
10156
10178
  .pf-v6-c-menu-toggle.pf-m-small {
10157
10179
  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
10158
10180
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
10181
+ --pf-v6-c-menu-toggle--FontSize: var(--pf-v6-c-menu-toggle--m-small--FontSize);
10182
+ --pf-v6-c-menu-toggle--ColumnGap: var(--pf-v6-c-menu-toggle--m-small--ColumnGap);
10183
+ --pf-v6-c-menu-toggle__controls--MinWidth: var(--pf-v6-c-menu-toggle--m-small__controls--MinWidth);
10159
10184
  }
10160
10185
  .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
10161
10186
  background-color: transparent;
@@ -10341,6 +10366,7 @@ ul.pf-v6-c-list {
10341
10366
  --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
10342
10367
  --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
10343
10368
  --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
10369
+ --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
10344
10370
  --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10345
10371
  --pf-v6-c-modal-box__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10346
10372
  --pf-v6-c-modal-box__header--Gap: var(--pf-t--global--spacer--md);
@@ -10357,7 +10383,7 @@ ul.pf-v6-c-list {
10357
10383
  --pf-v6-c-modal-box__body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
10358
10384
  --pf-v6-c-modal-box__body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
10359
10385
  --pf-v6-c-modal-box__body--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
10360
- --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--md);
10386
+ --pf-v6-c-modal-box__header--body--PaddingBlockStart: var(--pf-t--global--spacer--sm);
10361
10387
  --pf-v6-c-modal-box__close--InsetBlockStart: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
10362
10388
  --pf-v6-c-modal-box__close--InsetInlineEnd: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
10363
10389
  --pf-v6-c-modal-box__close--sibling--MarginInlineEnd: calc(var(--pf-t--global--spacer--xl) + var(--pf-t--global--spacer--sm));
@@ -10437,6 +10463,7 @@ ul.pf-v6-c-list {
10437
10463
  flex-shrink: 0;
10438
10464
  gap: var(--pf-v6-c-modal-box__header--Gap);
10439
10465
  padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
10466
+ padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
10440
10467
  padding-inline-start: var(--pf-v6-c-modal-box__header--PaddingInlineStart);
10441
10468
  padding-inline-end: var(--pf-v6-c-modal-box__header--PaddingInlineEnd);
10442
10469
  }
@@ -10581,7 +10608,7 @@ ul.pf-v6-c-list {
10581
10608
  --pf-v6-c-multiple-file-upload__status--PaddingInlineEnd: var(--pf-t--global--spacer--md);
10582
10609
  --pf-v6-c-multiple-file-upload__status-progress--GridTemplateColumns: auto 1fr;
10583
10610
  --pf-v6-c-multiple-file-upload__status-progress--Gap: var(--pf-t--global--spacer--sm);
10584
- --pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--regular);
10611
+ --pf-v6-c-multiple-file-upload__status-progress-icon--Color: var(--pf-t--global--icon--color--brand--default);
10585
10612
  --pf-v6-c-multiple-file-upload__status-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
10586
10613
  --pf-v6-c-multiple-file-upload__status-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
10587
10614
  --pf-v6-c-multiple-file-upload__status-item--GridTemplateColumns: auto 1fr auto;
@@ -10770,6 +10797,8 @@ ul.pf-v6-c-list {
10770
10797
  --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
10771
10798
  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
10772
10799
  --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
10800
+ --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
10801
+ --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
10773
10802
  --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
10774
10803
  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
10775
10804
  --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
@@ -10912,10 +10941,15 @@ ul.pf-v6-c-list {
10912
10941
  background-color: var(--pf-v6-c-nav__link--hover--BackgroundColor);
10913
10942
  }
10914
10943
  .pf-v6-c-nav__link.pf-m-current, .pf-v6-c-nav__link.pf-m-current:hover {
10944
+ --pf-v6-c-nav__link-icon--Color: var(--pf-v6-c-nav__link--m-current__link-icon--Color);
10915
10945
  color: var(--pf-v6-c-nav__link--m-current--Color);
10916
10946
  background-color: var(--pf-v6-c-nav__link--m-current--BackgroundColor);
10917
10947
  }
10918
10948
 
10949
+ .pf-v6-c-nav__link-icon {
10950
+ color: var(--pf-v6-c-nav__link-icon--Color);
10951
+ }
10952
+
10919
10953
  .pf-v6-c-nav__toggle {
10920
10954
  flex: none;
10921
10955
  align-self: start;
@@ -18119,8 +18153,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18119
18153
  --pf-v6-c-tabs--m-vertical__list--before--BorderInlineEndWidth: 0;
18120
18154
  --pf-v6-c-tabs--m-vertical__list--before--BorderBlockEndWidth: 0;
18121
18155
  --pf-v6-c-tabs--m-vertical__list--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--before--border-width--base);
18122
- --pf-v6-c-tabs--m-box__item--m-current--first-child__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
18123
- --pf-v6-c-tabs--m-box__item--m-current--last-child__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
18124
18156
  --pf-v6-c-tabs__list--Display: flex;
18125
18157
  --pf-v6-c-tabs__item--BackgroundColor: transparent;
18126
18158
  --pf-v6-c-tabs__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -18312,12 +18344,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
18312
18344
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
18313
18345
  --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--BackgroundColor);
18314
18346
  }
18315
- .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current:first-child .pf-v6-c-tabs__link::before {
18316
- border-inline-start-width: var(--pf-v6-c-tabs--m-box__item--m-current--first-child__link--before--BorderInlineStartWidth);
18317
- }
18318
- .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current:last-child .pf-v6-c-tabs__link::before {
18319
- border-inline-end-width: var(--pf-v6-c-tabs--m-box__item--m-current--last-child__link--before--BorderInlineEndWidth);
18320
- }
18321
18347
  .pf-v6-c-tabs.pf-m-box.pf-m-scrollable .pf-v6-c-tabs__item.pf-m-current:first-child .pf-v6-c-tabs__link::before {
18322
18348
  inset-inline-start: calc(var(--pf-v6-c-tabs__link--before--border-width--base) * -1);
18323
18349
  }
@@ -374,6 +374,7 @@ declare const _default: {
374
374
  "hidden": "pf-m-hidden",
375
375
  "read": "pf-m-read",
376
376
  "unread": "pf-m-unread",
377
+ "disabled": "pf-m-disabled",
377
378
  "red": "pf-m-red",
378
379
  "orangered": "pf-m-orangered",
379
380
  "orange": "pf-m-orange",
@@ -383,7 +384,6 @@ declare const _default: {
383
384
  "blue": "pf-m-blue",
384
385
  "purple": "pf-m-purple",
385
386
  "sticky": "pf-m-sticky",
386
- "disabled": "pf-m-disabled",
387
387
  "picture": "pf-m-picture",
388
388
  "current": "pf-m-current",
389
389
  "primary": "pf-m-primary",
@@ -1239,6 +1239,7 @@ declare const _default: {
1239
1239
  "nav": "pf-v6-c-nav",
1240
1240
  "navItem": "pf-v6-c-nav__item",
1241
1241
  "navLink": "pf-v6-c-nav__link",
1242
+ "navLinkIcon": "pf-v6-c-nav__link-icon",
1242
1243
  "navList": "pf-v6-c-nav__list",
1243
1244
  "navNav": "pf-v6-c-nav__nav",
1244
1245
  "navScrollButton": "pf-v6-c-nav__scroll-button",
@@ -376,6 +376,7 @@ exports.default = {
376
376
  "hidden": "pf-m-hidden",
377
377
  "read": "pf-m-read",
378
378
  "unread": "pf-m-unread",
379
+ "disabled": "pf-m-disabled",
379
380
  "red": "pf-m-red",
380
381
  "orangered": "pf-m-orangered",
381
382
  "orange": "pf-m-orange",
@@ -385,7 +386,6 @@ exports.default = {
385
386
  "blue": "pf-m-blue",
386
387
  "purple": "pf-m-purple",
387
388
  "sticky": "pf-m-sticky",
388
- "disabled": "pf-m-disabled",
389
389
  "picture": "pf-m-picture",
390
390
  "current": "pf-m-current",
391
391
  "primary": "pf-m-primary",
@@ -1241,6 +1241,7 @@ exports.default = {
1241
1241
  "nav": "pf-v6-c-nav",
1242
1242
  "navItem": "pf-v6-c-nav__item",
1243
1243
  "navLink": "pf-v6-c-nav__link",
1244
+ "navLinkIcon": "pf-v6-c-nav__link-icon",
1244
1245
  "navList": "pf-v6-c-nav__list",
1245
1246
  "navNav": "pf-v6-c-nav__nav",
1246
1247
  "navScrollButton": "pf-v6-c-nav__scroll-button",
@@ -374,6 +374,7 @@ export default {
374
374
  "hidden": "pf-m-hidden",
375
375
  "read": "pf-m-read",
376
376
  "unread": "pf-m-unread",
377
+ "disabled": "pf-m-disabled",
377
378
  "red": "pf-m-red",
378
379
  "orangered": "pf-m-orangered",
379
380
  "orange": "pf-m-orange",
@@ -383,7 +384,6 @@ export default {
383
384
  "blue": "pf-m-blue",
384
385
  "purple": "pf-m-purple",
385
386
  "sticky": "pf-m-sticky",
386
- "disabled": "pf-m-disabled",
387
387
  "picture": "pf-m-picture",
388
388
  "current": "pf-m-current",
389
389
  "primary": "pf-m-primary",
@@ -1239,6 +1239,7 @@ export default {
1239
1239
  "nav": "pf-v6-c-nav",
1240
1240
  "navItem": "pf-v6-c-nav__item",
1241
1241
  "navLink": "pf-v6-c-nav__link",
1242
+ "navLinkIcon": "pf-v6-c-nav__link-icon",
1242
1243
  "navList": "pf-v6-c-nav__list",
1243
1244
  "navNav": "pf-v6-c-nav__nav",
1244
1245
  "navScrollButton": "pf-v6-c-nav__scroll-button",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@patternfly/react-styles",
3
- "version": "6.0.0-alpha.23",
3
+ "version": "6.0.0-alpha.24",
4
4
  "main": "dist/js/index.js",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
19
19
  "clean": "rimraf dist css"
20
20
  },
21
21
  "devDependencies": {
22
- "@patternfly/patternfly": "6.0.0-alpha.139",
22
+ "@patternfly/patternfly": "6.0.0-alpha.150",
23
23
  "camel-case": "^3.0.0",
24
24
  "css": "^2.2.3",
25
25
  "fs-extra": "^11.1.1",
@@ -27,5 +27,5 @@
27
27
  "jsdom": "^15.1.0"
28
28
  },
29
29
  "license": "MIT",
30
- "gitHead": "7b22ff230948cf8b4142e0f8d7a3d4b76835026f"
30
+ "gitHead": "e2f8bd614fe8c9c20f205f04ef3e8a26eabe1f33"
31
31
  }