@patternfly/react-styles 6.5.0-prerelease.13 → 6.5.0-prerelease.15

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 (81) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/css/assets/images/compass--hero-bg.png +0 -0
  3. package/css/assets/images/compass--wallpaper-dark.jpg +0 -0
  4. package/css/assets/images/compass--wallpaper-light.jpg +0 -0
  5. package/css/assets/images/glass-brand-dark.jpg +0 -0
  6. package/css/assets/images/glass-brand-dark.png +0 -0
  7. package/css/assets/images/glass-brand-light.jpg +0 -0
  8. package/css/assets/images/glass-brand-light.png +0 -0
  9. package/css/components/Accordion/accordion.css +11 -1
  10. package/css/components/Accordion/accordion.d.ts +4 -1
  11. package/css/components/Accordion/accordion.js +4 -1
  12. package/css/components/Accordion/accordion.mjs +4 -1
  13. package/css/components/Alert/alert.css +2 -1
  14. package/css/components/Button/button.css +98 -19
  15. package/css/components/Button/button.d.ts +3 -0
  16. package/css/components/Button/button.js +3 -0
  17. package/css/components/Button/button.mjs +3 -0
  18. package/css/components/Card/card.css +34 -9
  19. package/css/components/Card/card.d.ts +1 -0
  20. package/css/components/Card/card.js +1 -0
  21. package/css/components/Card/card.mjs +1 -0
  22. package/css/components/ClipboardCopy/clipboard-copy.css +1 -1
  23. package/css/components/CodeEditor/code-editor.css +1 -1
  24. package/css/components/Compass/compass.css +6 -6
  25. package/css/components/DataList/data-list.css +2 -2
  26. package/css/components/DataList/data-list.d.ts +3 -1
  27. package/css/components/DataList/data-list.js +3 -1
  28. package/css/components/DataList/data-list.mjs +3 -1
  29. package/css/components/Drawer/drawer.css +117 -22
  30. package/css/components/Drawer/drawer.d.ts +5 -2
  31. package/css/components/Drawer/drawer.js +5 -2
  32. package/css/components/Drawer/drawer.mjs +5 -2
  33. package/css/components/DualListSelector/dual-list-selector.css +1 -1
  34. package/css/components/ExpandableSection/expandable-section.css +2 -2
  35. package/css/components/Form/form.css +1 -1
  36. package/css/components/JumpLinks/jump-links.css +12 -2
  37. package/css/components/Login/login.css +7 -3
  38. package/css/components/Masthead/masthead.css +49 -7
  39. package/css/components/Masthead/masthead.d.ts +4 -0
  40. package/css/components/Masthead/masthead.js +4 -0
  41. package/css/components/Masthead/masthead.mjs +4 -0
  42. package/css/components/MenuToggle/menu-toggle.css +25 -2
  43. package/css/components/MenuToggle/menu-toggle.d.ts +3 -0
  44. package/css/components/MenuToggle/menu-toggle.js +3 -0
  45. package/css/components/MenuToggle/menu-toggle.mjs +3 -0
  46. package/css/components/Nav/nav.css +19 -11
  47. package/css/components/Nav/nav.d.ts +3 -1
  48. package/css/components/Nav/nav.js +3 -1
  49. package/css/components/Nav/nav.mjs +3 -1
  50. package/css/components/NotificationDrawer/notification-drawer.css +11 -3
  51. package/css/components/Page/page.css +168 -6
  52. package/css/components/Page/page.d.ts +12 -1
  53. package/css/components/Page/page.js +12 -1
  54. package/css/components/Page/page.mjs +12 -1
  55. package/css/components/Panel/panel.css +14 -0
  56. package/css/components/Panel/panel.d.ts +2 -1
  57. package/css/components/Panel/panel.js +2 -1
  58. package/css/components/Panel/panel.mjs +2 -1
  59. package/css/components/Progress/progress.css +3 -1
  60. package/css/components/Table/table-grid.css +4 -4
  61. package/css/components/Table/table.css +14 -9
  62. package/css/components/Table/table.d.ts +4 -2
  63. package/css/components/Table/table.js +4 -2
  64. package/css/components/Table/table.mjs +4 -2
  65. package/css/components/Tabs/tabs.css +20 -19
  66. package/css/components/Tabs/tabs.d.ts +0 -1
  67. package/css/components/Tabs/tabs.js +0 -1
  68. package/css/components/Tabs/tabs.mjs +0 -1
  69. package/css/components/ToggleGroup/toggle-group.css +33 -16
  70. package/css/components/Toolbar/toolbar.css +1 -1
  71. package/css/components/TreeView/tree-view.css +1 -1
  72. package/css/components/Wizard/wizard.css +21 -3
  73. package/css/components/Wizard/wizard.d.ts +3 -0
  74. package/css/components/Wizard/wizard.js +3 -0
  75. package/css/components/Wizard/wizard.mjs +3 -0
  76. package/css/components/_index.css +678 -154
  77. package/css/components/_index.d.ts +6 -2
  78. package/css/components/_index.js +6 -2
  79. package/css/components/_index.mjs +6 -2
  80. package/css/docs/components/DragDrop/examples/DragDrop.css +1 -1
  81. package/package.json +3 -3
@@ -38,6 +38,12 @@
38
38
  --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
39
39
  --pf-v6-c-panel--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
40
40
  --pf-v6-c-panel--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
41
+ --pf-v6-c-panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
42
+ --pf-v6-c-panel--m-glass--before--BorderWidth: var(--pf-t--global--border--width--glass--default);
43
+ --pf-v6-c-panel--m-glass--before--BorderColor: var(--pf-t--global--border--color--glass--default);
44
+ --pf-v6-c-panel--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
45
+ --pf-v6-c-panel--m-glass--BorderRadius: var(--pf-t--global--border--radius--glass--default);
46
+ --pf-v6-c-panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
41
47
  }
42
48
 
43
49
  .pf-v6-c-panel {
@@ -79,6 +85,14 @@
79
85
  --pf-v6-c-panel__footer--BorderColor: var(--pf-v6-c-panel--m-scrollable__footer--BorderColor);
80
86
  --pf-v6-c-panel__footer--BorderWidth: var(--pf-v6-c-panel--m-scrollable__footer--BorderWidth);
81
87
  }
88
+ .pf-v6-c-panel.pf-m-glass {
89
+ --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-glass--BackgroundColor);
90
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-glass--before--BorderWidth);
91
+ --pf-v6-c-panel--before--BorderColor: var(--pf-v6-c-panel--m-glass--before--BorderColor);
92
+ --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-glass--BoxShadow);
93
+ --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-glass--BorderRadius);
94
+ backdrop-filter: var(--pf-v6-c-panel--m-glass--BackdropFilter);
95
+ }
82
96
 
83
97
  .pf-v6-c-panel__header {
84
98
  padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
@@ -4,7 +4,8 @@ declare const _default: {
4
4
  "bordered": "pf-m-bordered",
5
5
  "secondary": "pf-m-secondary",
6
6
  "raised": "pf-m-raised",
7
- "scrollable": "pf-m-scrollable"
7
+ "scrollable": "pf-m-scrollable",
8
+ "glass": "pf-m-glass"
8
9
  },
9
10
  "panel": "pf-v6-c-panel",
10
11
  "panelFooter": "pf-v6-c-panel__footer",
@@ -6,7 +6,8 @@ exports.default = {
6
6
  "bordered": "pf-m-bordered",
7
7
  "secondary": "pf-m-secondary",
8
8
  "raised": "pf-m-raised",
9
- "scrollable": "pf-m-scrollable"
9
+ "scrollable": "pf-m-scrollable",
10
+ "glass": "pf-m-glass"
10
11
  },
11
12
  "panel": "pf-v6-c-panel",
12
13
  "panelFooter": "pf-v6-c-panel__footer",
@@ -4,7 +4,8 @@ export default {
4
4
  "bordered": "pf-m-bordered",
5
5
  "secondary": "pf-m-secondary",
6
6
  "raised": "pf-m-raised",
7
- "scrollable": "pf-m-scrollable"
7
+ "scrollable": "pf-m-scrollable",
8
+ "glass": "pf-m-glass"
8
9
  },
9
10
  "panel": "pf-v6-c-panel",
10
11
  "panelFooter": "pf-v6-c-panel__footer",
@@ -2,7 +2,7 @@
2
2
  --pf-v6-c-progress--GridGap: var(--pf-t--global--spacer--md);
3
3
  --pf-v6-c-progress__bar--Height: var(--pf-t--global--spacer--md);
4
4
  --pf-v6-c-progress__bar--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
5
- --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--medium);
5
+ --pf-v6-c-progress__bar--BorderRadius: var(--pf-t--global--border--radius--pill);
6
6
  --pf-v6-c-progress__bar--BorderColor: var(--pf-t--global--border--color--high-contrast);
7
7
  --pf-v6-c-progress__bar--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
8
8
  --pf-v6-c-progress__measure--m-static-width--MinWidth: 4.5ch;
@@ -12,6 +12,7 @@
12
12
  --pf-v6-c-progress__indicator--BackgroundColor: var(--pf-t--global--color--brand--default);
13
13
  --pf-v6-c-progress__indicator--BorderWidth: var(--pf-t--global--border--width--high-contrast--extra-strong);
14
14
  --pf-v6-c-progress__indicator--BorderColor: transparent;
15
+ --pf-v6-c-progress__indicator--BorderRadius: var(--pf-t--global--border--radius--pill);
15
16
  --pf-v6-c-progress__helper-text--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) - var(--pf-v6-c-progress--GridGap));
16
17
  --pf-v6-c-progress--m-success__indicator--BackgroundColor: var(--pf-t--global--color--status--success--default);
17
18
  --pf-v6-c-progress--m-warning__indicator--BackgroundColor: var(--pf-t--global--color--status--warning--default);
@@ -181,6 +182,7 @@
181
182
  position: absolute;
182
183
  height: var(--pf-v6-c-progress__indicator--Height);
183
184
  background-color: var(--pf-v6-c-progress__indicator--BackgroundColor);
185
+ border-radius: var(--pf-v6-c-progress__indicator--BorderRadius);
184
186
  }
185
187
  .pf-v6-c-progress__indicator::before {
186
188
  position: absolute;
@@ -367,7 +367,7 @@
367
367
  --pf-v6-c-table--cell--Width: auto;
368
368
  }
369
369
 
370
- @container pf-v6-contain-table (max-width: 48rem) {
370
+ @container pf-v6-contain-table (max-width: calc(48rem - 1px)) {
371
371
  .pf-m-grid-md.pf-v6-c-table {
372
372
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
373
373
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -677,7 +677,7 @@
677
677
  }
678
678
  }
679
679
 
680
- @container pf-v6-contain-table (max-width: 62rem) {
680
+ @container pf-v6-contain-table (max-width: calc(62rem - 1px)) {
681
681
  .pf-m-grid-lg.pf-v6-c-table {
682
682
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
683
683
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -987,7 +987,7 @@
987
987
  }
988
988
  }
989
989
 
990
- @container pf-v6-contain-table (max-width: 75rem) {
990
+ @container pf-v6-contain-table (max-width: calc(75rem - 1px)) {
991
991
  .pf-m-grid-xl.pf-v6-c-table {
992
992
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
993
993
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -1297,7 +1297,7 @@
1297
1297
  }
1298
1298
  }
1299
1299
 
1300
- @container pf-v6-contain-table (max-width: 90.625rem) {
1300
+ @container pf-v6-contain-table (max-width: calc(90.625rem - 1px)) {
1301
1301
  .pf-m-grid-2xl.pf-v6-c-table {
1302
1302
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
1303
1303
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -50,10 +50,10 @@
50
50
  --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
51
51
  --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
52
52
  --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
53
- --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
53
+ --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 0;
54
54
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
55
55
  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
56
- --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
56
+ --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: -180deg;
57
57
  --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
58
58
  --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
59
59
  --pf-v6-c-table__button--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -120,14 +120,14 @@
120
120
  --pf-v6-c-table__th--m-help--MinWidth: 11ch;
121
121
  --pf-v6-c-table__column-help--MarginInlineStart: var(--pf-t--global--spacer--sm);
122
122
  --pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
123
- --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
123
+ --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: transparent;
124
124
  --pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
125
- --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
126
- --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
125
+ --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
126
+ --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
127
127
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
128
128
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius: inherit;
129
129
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
130
- --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
130
+ --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0;
131
131
  --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
132
132
  --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
133
133
  --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
@@ -169,6 +169,14 @@
169
169
  width: 100%;
170
170
  background-color: var(--pf-v6-c-table--BackgroundColor);
171
171
  }
172
+ :where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass), .pf-v6-c-table.pf-m-plain {
173
+ --pf-v6-c-table--BackgroundColor: transparent;
174
+ --pf-v6-c-table__expandable-row-content--BackgroundColor: transparent;
175
+ --pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0;
176
+ --pf-v6-c-table__expandable-row-content--PaddingInlineEnd: 0;
177
+ --pf-v6-c-table__control-row--BackgroundColor: transparent;
178
+ }
179
+
172
180
  .pf-v6-c-table.pf-m-fixed {
173
181
  table-layout: fixed;
174
182
  }
@@ -209,9 +217,6 @@
209
217
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
210
218
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
211
219
  }
212
- .pf-v6-c-table.pf-m-plain {
213
- --pf-v6-c-table--BackgroundColor: transparent;
214
- }
215
220
  .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
216
221
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
217
222
  .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -4,10 +4,11 @@ declare const _default: {
4
4
  "check": "pf-v6-c-check",
5
5
  "dirRtl": "pf-v6-m-dir-rtl",
6
6
  "modifiers": {
7
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
8
+ "plain": "pf-m-plain",
7
9
  "fixed": "pf-m-fixed",
8
10
  "stickyHeader": "pf-m-sticky-header",
9
11
  "nestedColumnHeader": "pf-m-nested-column-header",
10
- "plain": "pf-m-plain",
11
12
  "striped": "pf-m-striped",
12
13
  "expandable": "pf-m-expandable",
13
14
  "stripedEven": "pf-m-striped-even",
@@ -92,6 +93,7 @@ declare const _default: {
92
93
  "tableThead": "pf-v6-c-table__thead",
93
94
  "tableToggle": "pf-v6-c-table__toggle",
94
95
  "tableToggleIcon": "pf-v6-c-table__toggle-icon",
95
- "tableTr": "pf-v6-c-table__tr"
96
+ "tableTr": "pf-v6-c-table__tr",
97
+ "themeGlass": "pf-v6-theme-glass"
96
98
  };
97
99
  export default _default;
@@ -6,10 +6,11 @@ exports.default = {
6
6
  "check": "pf-v6-c-check",
7
7
  "dirRtl": "pf-v6-m-dir-rtl",
8
8
  "modifiers": {
9
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
10
+ "plain": "pf-m-plain",
9
11
  "fixed": "pf-m-fixed",
10
12
  "stickyHeader": "pf-m-sticky-header",
11
13
  "nestedColumnHeader": "pf-m-nested-column-header",
12
- "plain": "pf-m-plain",
13
14
  "striped": "pf-m-striped",
14
15
  "expandable": "pf-m-expandable",
15
16
  "stripedEven": "pf-m-striped-even",
@@ -94,5 +95,6 @@ exports.default = {
94
95
  "tableThead": "pf-v6-c-table__thead",
95
96
  "tableToggle": "pf-v6-c-table__toggle",
96
97
  "tableToggleIcon": "pf-v6-c-table__toggle-icon",
97
- "tableTr": "pf-v6-c-table__tr"
98
+ "tableTr": "pf-v6-c-table__tr",
99
+ "themeGlass": "pf-v6-theme-glass"
98
100
  };
@@ -4,10 +4,11 @@ export default {
4
4
  "check": "pf-v6-c-check",
5
5
  "dirRtl": "pf-v6-m-dir-rtl",
6
6
  "modifiers": {
7
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
8
+ "plain": "pf-m-plain",
7
9
  "fixed": "pf-m-fixed",
8
10
  "stickyHeader": "pf-m-sticky-header",
9
11
  "nestedColumnHeader": "pf-m-nested-column-header",
10
- "plain": "pf-m-plain",
11
12
  "striped": "pf-m-striped",
12
13
  "expandable": "pf-m-expandable",
13
14
  "stripedEven": "pf-m-striped-even",
@@ -92,5 +93,6 @@ export default {
92
93
  "tableThead": "pf-v6-c-table__thead",
93
94
  "tableToggle": "pf-v6-c-table__toggle",
94
95
  "tableToggleIcon": "pf-v6-c-table__toggle-icon",
95
- "tableTr": "pf-v6-c-table__tr"
96
+ "tableTr": "pf-v6-c-table__tr",
97
+ "themeGlass": "pf-v6-theme-glass"
96
98
  };
@@ -38,14 +38,14 @@
38
38
  --pf-v6-c-tabs--m-vertical__item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
39
39
  --pf-v6-c-tabs__item--m-current--BackgroundColor: transparent;
40
40
  --pf-v6-c-tabs--m-box__item--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
41
- --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--default);
42
- --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
41
+ --pf-v6-c-tabs--m-box__item--m-current--BackgroundColor: transparent;
42
+ --pf-v6-c-tabs--m-box--m-secondary__item--BackgroundColor: transparent;
43
43
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
44
44
  --pf-v6-c-tabs__item--m-action--before--ZIndex: var(--pf-t--global--z-index--sm);
45
45
  --pf-v6-c-tabs__link--Color: var(--pf-t--global--text--color--subtle);
46
46
  --pf-v6-c-tabs__link--FontSize: var(--pf-t--global--font--size--sm);
47
47
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
48
- --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--small);
48
+ --pf-v6-c-tabs__link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
49
49
  --pf-v6-c-tabs__link--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
50
50
  --pf-v6-c-tabs__link--BorderColor: transparent;
51
51
  --pf-v6-c-tabs__link--hover--BorderColor: var(--pf-t--global--border--color--high-contrast);
@@ -55,21 +55,21 @@
55
55
  --pf-v6-c-tabs__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
56
56
  --pf-v6-c-tabs__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
57
57
  --pf-v6-c-tabs__link--ColumnGap: var(--pf-t--global--spacer--sm);
58
- --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
59
- --pf-v6-c-tabs__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
58
+ --pf-v6-c-tabs__link--disabled--Color: var(--pf-t--global--text--color--disabled);
59
+ --pf-v6-c-tabs__link--disabled--BackgroundColor: transparent;
60
60
  --pf-v6-c-tabs__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
61
61
  --pf-v6-c-tabs__item--m-current__link--Color: var(--pf-t--global--text--color--regular);
62
62
  --pf-v6-c-tabs__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
63
63
  --pf-v6-c-tabs--m-vertical__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
64
64
  --pf-v6-c-tabs--m-vertical__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
65
65
  --pf-v6-c-tabs--m-box__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
66
- --pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
67
- --pf-v6-c-tabs--m-box__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
66
+ --pf-v6-c-tabs--m-box__link--disabled--Color: var(--pf-t--global--text--color--disabled);
67
+ --pf-v6-c-tabs--m-box__link--disabled--BackgroundColor: transparent;
68
68
  --pf-v6-c-tabs--m-box__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
69
69
  --pf-v6-c-tabs--m-box__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
70
70
  --pf-v6-c-tabs--m-box--m-secondary__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
71
- --pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--on-disabled);
72
- --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
71
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--Color: var(--pf-t--global--text--color--disabled);
72
+ --pf-v6-c-tabs--m-box--m-secondary__link--disabled--BackgroundColor: transparent;
73
73
  --pf-v6-c-tabs--m-box--m-secondary__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
74
74
  --pf-v6-c-tabs--m-box--m-secondary__item--m-current__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
75
75
  --pf-v6-c-tabs--m-subtab__link--FontSize: var(--pf-t--global--font--size--xs);
@@ -89,6 +89,7 @@
89
89
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
90
90
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
91
91
  --pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
92
+ --pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor: var(--pf-t--global--border--color--alt);
92
93
  --pf-v6-c-tabs__link--disabled--before--BorderInlineEndWidth: 0;
93
94
  --pf-v6-c-tabs__link--disabled--before--BorderBlockEndWidth: var(--pf-v6-c-tabs--before--border-width--base);
94
95
  --pf-v6-c-tabs__link--disabled--before--BorderInlineStartWidth: 0;
@@ -101,7 +102,9 @@
101
102
  --pf-v6-c-tabs__link--after--BorderBlockStartWidth: 0;
102
103
  --pf-v6-c-tabs__link--after--BorderInlineEndWidth: 0;
103
104
  --pf-v6-c-tabs__link--after--BorderInlineStartWidth: 0;
104
- --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--border--color--clicked);
105
+ --pf-v6-c-tabs__link--after--BorderRadius: var(--pf-t--global--border--radius--pill);
106
+ --pf-v6-c-tabs--m-box__link--after--BorderRadius: var(--pf-t--global--border--radius--sharp);
107
+ --pf-v6-c-tabs__item--m-current__link--after--BorderColor: var(--pf-t--global--color--brand--accent--default);
105
108
  --pf-v6-c-tabs__item--m-current__link--after--BorderWidth: var(--pf-t--global--border--width--extra-strong);
106
109
  --pf-v6-c-tabs--link-accent--start: 0;
107
110
  --pf-v6-c-tabs--link-accent--length: 0;
@@ -149,7 +152,7 @@
149
152
  --pf-v6-c-tabs__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
150
153
  --pf-v6-c-tabs__toggle-icon--Transition: transform var(--pf-v6-c-tabs__toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__toggle-icon--TransitionTimingFunction);
151
154
  --pf-v6-c-tabs__toggle-icon--Rotate: 0;
152
- --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: 90deg;
155
+ --pf-v6-c-tabs--m-expanded__toggle-icon--Rotate: -180deg;
153
156
  --pf-v6-c-tabs--m-expandable--RowGap: var(--pf-t--global--spacer--sm);
154
157
  --pf-v6-c-tabs--m-expandable--PaddingBlockStart: var(--pf-t--global--spacer--sm);
155
158
  --pf-v6-c-tabs--m-expandable--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -175,7 +178,7 @@
175
178
  --pf-v6-c-tabs__link-toggle-icon--Transition: transform var(--pf-v6-c-tabs__link-toggle-icon--TransitionDuration) var(--pf-v6-c-tabs__link-toggle-icon--TransitionTimingFunction);
176
179
  --pf-v6-c-tabs__link-toggle-icon--Rotate: 0;
177
180
  --pf-v6-c-tabs__link-toggle-icon--FontSize: var(--pf-t--global--font--size--sm);
178
- --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: 90deg;
181
+ --pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate: -180deg;
179
182
  }
180
183
 
181
184
  .pf-v6-c-tabs {
@@ -242,6 +245,7 @@
242
245
  --pf-v6-c-tabs__link--before--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
243
246
  --pf-v6-c-tabs__link--after--InsetBlockStart: 0;
244
247
  --pf-v6-c-tabs__link--after--InsetBlockEnd: auto;
248
+ --pf-v6-c-tabs__link--after--BorderRadius: var(--pf-v6-c-tabs--m-box__link--after--BorderRadius);
245
249
  }
246
250
  .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__link {
247
251
  --pf-v6-c-tabs__link--after--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
@@ -251,7 +255,7 @@
251
255
  }
252
256
  .pf-v6-c-tabs.pf-m-box .pf-v6-c-tabs__item.pf-m-current {
253
257
  --pf-v6-c-tabs__link--BackgroundColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
254
- --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--BackgroundColor);
258
+ --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor);
255
259
  --pf-v6-c-tabs__link--before--BorderInlineStartColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartColor);
256
260
  --pf-v6-c-tabs__link--before--BorderInlineStartWidth: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineStartWidth);
257
261
  --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderInlineEndColor);
@@ -421,7 +425,8 @@
421
425
  --pf-v6-c-tabs__link--before--BorderBlockStartWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
422
426
  }
423
427
  .pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item.pf-m-current {
424
- --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs__item--m-current__link--BackgroundColor);
428
+ --pf-v6-c-tabs__link--before--BorderInlineEndColor: var(--pf-v6-c-tabs--m-box__link--m-current--before--BorderBlockEndColor);
429
+ --pf-v6-c-tabs__link--before--BorderInlineEndWidth: var(--pf-v6-c-tabs__link--before--border-width--base);
425
430
  --pf-v6-c-tabs__link--before--BorderBlockEndColor: var(--pf-v6-c-tabs__link--before--border-color--base);
426
431
  }
427
432
  .pf-v6-c-tabs.pf-m-box.pf-m-vertical .pf-v6-c-tabs__item:first-child.pf-m-current {
@@ -464,11 +469,6 @@
464
469
  align-items: center;
465
470
  }
466
471
 
467
- .pf-v6-c-tabs__toggle-button .pf-v6-c-button {
468
- justify-content: start;
469
- white-space: normal;
470
- }
471
-
472
472
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
473
473
  scale: -1 1;
474
474
  }
@@ -599,6 +599,7 @@
599
599
  border-block-end-width: var(--pf-v6-c-tabs__link--after--BorderBlockEndWidth);
600
600
  border-inline-start-width: var(--pf-v6-c-tabs__link--after--BorderInlineStartWidth);
601
601
  border-inline-end-width: var(--pf-v6-c-tabs__link--after--BorderInlineEndWidth);
602
+ border-radius: var(--pf-v6-c-tabs__link--after--BorderRadius);
602
603
  }
603
604
 
604
605
  .pf-v6-c-tabs__link:where(:hover, :focus) {
@@ -80,7 +80,6 @@ declare const _default: {
80
80
  "tabsList": "pf-v6-c-tabs__list",
81
81
  "tabsScrollButton": "pf-v6-c-tabs__scroll-button",
82
82
  "tabsToggle": "pf-v6-c-tabs__toggle",
83
- "tabsToggleButton": "pf-v6-c-tabs__toggle-button",
84
83
  "tabsToggleIcon": "pf-v6-c-tabs__toggle-icon"
85
84
  };
86
85
  export default _default;
@@ -82,6 +82,5 @@ exports.default = {
82
82
  "tabsList": "pf-v6-c-tabs__list",
83
83
  "tabsScrollButton": "pf-v6-c-tabs__scroll-button",
84
84
  "tabsToggle": "pf-v6-c-tabs__toggle",
85
- "tabsToggleButton": "pf-v6-c-tabs__toggle-button",
86
85
  "tabsToggleIcon": "pf-v6-c-tabs__toggle-icon"
87
86
  };
@@ -80,6 +80,5 @@ export default {
80
80
  "tabsList": "pf-v6-c-tabs__list",
81
81
  "tabsScrollButton": "pf-v6-c-tabs__scroll-button",
82
82
  "tabsToggle": "pf-v6-c-tabs__toggle",
83
- "tabsToggleButton": "pf-v6-c-tabs__toggle-button",
84
83
  "tabsToggleIcon": "pf-v6-c-tabs__toggle-icon"
85
84
  };
@@ -6,30 +6,37 @@
6
6
  --pf-v6-c-toggle-group__button--FontSize: var(--pf-t--global--font--size--body--default);
7
7
  --pf-v6-c-toggle-group__button--LineHeight: var(--pf-t--global--font--line-height--body);
8
8
  --pf-v6-c-toggle-group__button--Color: var(--pf-t--global--text--color--regular);
9
- --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
9
+ --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-t--global--background--color--control--default);
10
10
  --pf-v6-c-toggle-group__button--ZIndex: auto;
11
- --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
11
+ --pf-v6-c-toggle-group__button--hover--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
12
+ --pf-v6-c-toggle-group__button--hover--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
12
13
  --pf-v6-c-toggle-group__button--hover--ZIndex: var(--pf-t--global--z-index--xs);
13
- --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--default);
14
+ --pf-v6-c-toggle-group__button--hover--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--hover);
14
15
  --pf-v6-c-toggle-group__button--hover--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
15
16
  --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-t--global--border--width--control--default);
16
17
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-t--global--border--color--control--default);
17
18
  --pf-v6-c-toggle-group__item--item--MarginInlineStart: calc(-1 * var(--pf-t--global--border--width--control--default));
18
- --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--tiny);
19
- --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--tiny);
20
- --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--tiny);
21
- --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--tiny);
19
+ --pf-v6-c-toggle-group__item--first-child__button--BorderStartStartRadius: var(--pf-t--global--border--radius--control--default);
20
+ --pf-v6-c-toggle-group__item--first-child__button--BorderEndStartRadius: var(--pf-t--global--border--radius--control--default);
21
+ --pf-v6-c-toggle-group__item--last-child__button--BorderStartEndRadius: var(--pf-t--global--border--radius--control--default);
22
+ --pf-v6-c-toggle-group__item--last-child__button--BorderEndEndRadius: var(--pf-t--global--border--radius--control--default);
22
23
  --pf-v6-c-toggle-group__icon--text--MarginInlineStart: var(--pf-t--global--spacer--sm);
23
- --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--default);
24
- --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--default);
25
- --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--clicked);
26
- --pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--alt);
24
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-t--global--icon--color--regular);
25
+ --pf-v6-c-toggle-group__icon--hover--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
26
+ --pf-v6-c-toggle-group__icon--m-selected--Color: var(--pf-t--global--icon--color--on-brand--subtle--default);
27
+ --pf-v6-c-toggle-group__icon--disabled--Color: var(--pf-t--global--icon--color--on-disabled);
28
+ --pf-v6-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-t--global--color--brand--subtle--default);
29
+ --pf-v6-c-toggle-group__button--m-selected--Color: var(--pf-t--global--text--color--on-brand--subtle--default);
30
+ --pf-v6-c-toggle-group__button--m-selected--before--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
31
+ --pf-v6-c-toggle-group__button--m-selected--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
32
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderColor: var(--pf-t--global--border--color--brand--subtle--clicked);
33
+ --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--control--clicked);
34
+ --pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor: var(--pf-t--global--border--color--brand--subtle--clicked);
27
35
  --pf-v6-c-toggle-group__button--m-selected--ZIndex: var(--pf-t--global--z-index--xs);
28
- --pf-v6-c-toggle-group__button--m-selected--after--BorderWidth: var(--pf-t--global--border--width--high-contrast--strong);
29
36
  --pf-v6-c-toggle-group__button--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
30
37
  --pf-v6-c-toggle-group__button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
31
- --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--disabled);
32
- --pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--disabled);
38
+ --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
39
+ --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
33
40
  --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
34
41
  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
35
42
  --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -97,9 +104,11 @@
97
104
  }
98
105
  .pf-v6-c-toggle-group__button:is(:hover, :focus) {
99
106
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--hover--BackgroundColor);
107
+ --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--hover--Color);
100
108
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--hover--ZIndex);
101
109
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--hover--before--BorderColor);
102
110
  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--hover--after--BorderWidth);
111
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--hover--Color);
103
112
  text-decoration-line: none;
104
113
  }
105
114
  .pf-v6-c-toggle-group__button.pf-m-selected {
@@ -107,22 +116,30 @@
107
116
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--m-selected--Color, inherit);
108
117
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--m-selected--ZIndex);
109
118
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderColor);
119
+ --pf-v6-c-toggle-group__button--before--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--before--BorderWidth);
120
+ --pf-v6-c-toggle-group__button--after--BorderColor: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderColor);
110
121
  --pf-v6-c-toggle-group__button--after--BorderWidth: var(--pf-v6-c-toggle-group__button--m-selected--after--BorderWidth);
122
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--m-selected--Color);
111
123
  }
112
124
  .pf-v6-c-toggle-group__button:is(:disabled, .pf-m-disabled) {
113
125
  --pf-v6-c-toggle-group__button--BackgroundColor: var(--pf-v6-c-toggle-group__button--disabled--BackgroundColor);
114
126
  --pf-v6-c-toggle-group__button--Color: var(--pf-v6-c-toggle-group__button--disabled--Color);
115
127
  --pf-v6-c-toggle-group__button--ZIndex: var(--pf-v6-c-toggle-group__button--disabled--ZIndex);
116
128
  --pf-v6-c-toggle-group__button--before--BorderColor: var(--pf-v6-c-toggle-group__button--disabled--before--BorderColor);
129
+ --pf-v6-c-toggle-group__icon--Color: var(--pf-v6-c-toggle-group__icon--disabled--Color);
117
130
  pointer-events: none;
118
131
  }
119
132
 
120
133
  .pf-v6-c-toggle-group__item:has(.pf-m-selected) + .pf-v6-c-toggle-group__item:has(.pf-m-selected) {
121
- --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected-selected--before--BorderInlineStartColor);
134
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--m-selected--selected--before--BorderInlineStartColor);
122
135
  }
123
136
 
124
137
  .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) + .pf-v6-c-toggle-group__item:has(:disabled, .pf-m-disabled) {
125
- --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled-disabled--before--BorderInlineStartColor);
138
+ --pf-v6-c-toggle-group__button--before--BorderInlineStartColor: var(--pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor);
139
+ }
140
+
141
+ .pf-v6-c-toggle-group__icon {
142
+ color: var(--pf-v6-c-toggle-group__icon--Color);
126
143
  }
127
144
 
128
145
  .pf-v6-c-toggle-group__icon + .pf-v6-c-toggle-group__text,
@@ -44,7 +44,7 @@
44
44
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
45
45
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
46
46
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
47
- --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
47
+ --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: -180deg;
48
48
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
49
49
  --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
50
50
  --pf-v6-c-toolbar__group--m-label-group--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
@@ -66,7 +66,7 @@
66
66
  --pf-v6-c-tree-view__node-icon--Color: var(--pf-t--global--icon--color--subtle);
67
67
  --pf-v6-c-tree-view__node-toggle-icon--base--Rotate: 0;
68
68
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
69
- --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
69
+ --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: -180deg;
70
70
  --pf-v6-c-tree-view__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
71
71
  --pf-v6-c-tree-view__node-icon--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
72
72
  --pf-v6-c-tree-view__node-toggle--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
@@ -3,6 +3,7 @@
3
3
  --pf-v6-c-wizard--Height--base: 100%;
4
4
  --pf-v6-c-modal-box--c-wizard--Height--base: 47.625rem;
5
5
  --pf-v6-c-wizard__header--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
6
+ --pf-v6-c-wizard--m-plain__header--BackgroundColor: transparent;
6
7
  --pf-v6-c-wizard__header--ZIndex: auto;
7
8
  --pf-v6-c-wizard__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
8
9
  --pf-v6-c-wizard__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -35,7 +36,7 @@
35
36
  --pf-v6-c-wizard__nav-link-main--PaddingInlineStart: var(--pf-t--global--spacer--sm);
36
37
  --pf-v6-c-wizard__nav-link-main--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
37
38
  --pf-v6-c-wizard__nav-link-main--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
38
- --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--small);
39
+ --pf-v6-c-wizard__nav-link-main--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
39
40
  --pf-v6-c-wizard__nav-link-main--BorderColor: var(--pf-t--global--border--color--high-contrast);
40
41
  --pf-v6-c-wizard__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
41
42
  --pf-v6-c-wizard__nav-link--hover__nav-link-main--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
@@ -46,7 +47,7 @@
46
47
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
47
48
  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
48
49
  --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
49
- --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
50
+ --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: -180deg;
50
51
  --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
51
52
  --pf-v6-c-wizard__nav-link--before--Height: var(--pf-t--global--icon--size--font--xl);
52
53
  --pf-v6-c-wizard__nav-link--before--InsetBlockStart: var(--pf-t--global--spacer--sm);
@@ -69,6 +70,7 @@
69
70
  --pf-v6-c-wizard__nav-link-status-icon--InsetBlockStart: 4px;
70
71
  --pf-v6-c-wizard__nav-link-status-icon--FontSize: var(--pf-t--global--icon--size--font--xl);
71
72
  --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-t--global--background--color--primary--default);
73
+ --pf-v6-c-wizard--m-plain__toggle--BackgroundColor: transparent;
72
74
  --pf-v6-c-wizard__toggle--ZIndex: var(--pf-t--global--z-index--xs);
73
75
  --pf-v6-c-wizard__toggle--PaddingBlockStart: var(--pf-t--global--spacer--lg);
74
76
  --pf-v6-c-wizard__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
@@ -93,17 +95,20 @@
93
95
  --pf-v6-c-wizard__toggle-icon--LineHeight: var(--pf-t--global--font--line-height--body);
94
96
  --pf-v6-c-wizard__toggle--m-expanded__toggle-icon--Rotate: 180deg;
95
97
  --pf-v6-c-wizard__nav--ZIndex: var(--pf-t--global--z-index--sm);
96
- --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
98
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-t--global--background--color--floating--default);
99
+ --pf-v6-c-wizard--m-plain__nav--BackgroundColor: transparent;
97
100
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
98
101
  --pf-v6-c-wizard__nav--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
99
102
  --pf-v6-c-wizard__nav--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
100
103
  --pf-v6-c-wizard__nav--Width: 100%;
104
+ --pf-v6-c-wizard__nav--lg--BackgroundColor: var(--pf-t--global--background--color--primary--default);
101
105
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
102
106
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
103
107
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
104
108
  }
105
109
  @media screen and (min-width: 62rem) {
106
110
  .pf-v6-c-wizard {
111
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard__nav--lg--BackgroundColor);
107
112
  --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
108
113
  --pf-v6-c-wizard__nav--BoxShadow: none;
109
114
  --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
@@ -118,6 +123,7 @@
118
123
  --pf-v6-c-wizard__nav-list--nested--MarginBlockStart: var(--pf-t--global--spacer--md);
119
124
  --pf-v6-c-wizard__nav-item--MarginBlockStart: var(--pf-t--global--spacer--md);
120
125
  --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-t--global--background--color--primary--default);
126
+ --pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor: transparent;
121
127
  --pf-v6-c-wizard__outer-wrap--lg--PaddingInlineStart: var(--pf-v6-c-wizard__nav--Width);
122
128
  --pf-v6-c-wizard__outer-wrap--MinHeight: 15.625rem;
123
129
  --pf-v6-c-wizard__main--ZIndex: auto;
@@ -126,6 +132,7 @@
126
132
  --pf-v6-c-wizard__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
127
133
  --pf-v6-c-wizard__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
128
134
  --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-t--global--background--color--primary--default);
135
+ --pf-v6-c-wizard--m-plain__footer--BackgroundColor: transparent;
129
136
  --pf-v6-c-wizard__footer--ZIndex: var(--pf-t--global--z-index--xs);
130
137
  --pf-v6-c-wizard__footer--PaddingBlockStart: var(--pf-t--global--spacer--lg);
131
138
  --pf-v6-c-wizard__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -156,6 +163,17 @@
156
163
  .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
157
164
  display: none;
158
165
  }
166
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
167
+ --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
168
+ --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
169
+ --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
170
+ --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
171
+ }
172
+ @media screen and (min-width: 62rem) {
173
+ :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
174
+ --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
175
+ }
176
+ }
159
177
 
160
178
  .pf-v6-c-wizard__header {
161
179
  position: relative;
@@ -5,6 +5,8 @@ declare const _default: {
5
5
  "modalBox": "pf-v6-c-modal-box",
6
6
  "modifiers": {
7
7
  "finished": "pf-m-finished",
8
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
9
+ "plain": "pf-m-plain",
8
10
  "expanded": "pf-m-expanded",
9
11
  "danger": "pf-m-danger",
10
12
  "warning": "pf-m-warning",
@@ -14,6 +16,7 @@ declare const _default: {
14
16
  "disabled": "pf-m-disabled",
15
17
  "noPadding": "pf-m-no-padding"
16
18
  },
19
+ "themeGlass": "pf-v6-theme-glass",
17
20
  "wizard": "pf-v6-c-wizard",
18
21
  "wizardClose": "pf-v6-c-wizard__close",
19
22
  "wizardDescription": "pf-v6-c-wizard__description",