@patternfly/react-styles 6.5.0-prerelease.10 → 6.5.0-prerelease.12

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 (52) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/css/components/AboutModalBox/about-modal-box.css +36 -26
  3. package/css/components/Accordion/accordion.css +16 -13
  4. package/css/components/Alert/alert.css +5 -4
  5. package/css/components/Avatar/avatar.css +12 -4
  6. package/css/components/BackgroundImage/background-image.css +6 -3
  7. package/css/components/Banner/banner.css +8 -6
  8. package/css/components/Brand/brand.css +3 -1
  9. package/css/components/Breadcrumb/breadcrumb.css +4 -3
  10. package/css/components/Button/button.css +6 -6
  11. package/css/components/CalendarMonth/calendar-month.css +4 -3
  12. package/css/components/Card/card.css +7 -6
  13. package/css/components/ClipboardCopy/clipboard-copy.css +4 -3
  14. package/css/components/CodeEditor/code-editor.css +1 -1
  15. package/css/components/Compass/compass.css +8 -4
  16. package/css/components/DataList/data-list.css +28 -21
  17. package/css/components/DescriptionList/description-list.css +7 -5
  18. package/css/components/Divider/divider.css +7 -5
  19. package/css/components/Drawer/drawer.css +40 -30
  20. package/css/components/DualListSelector/dual-list-selector.css +17 -11
  21. package/css/components/ExpandableSection/expandable-section.css +16 -14
  22. package/css/components/Form/form.css +1 -1
  23. package/css/components/FormControl/form-control.css +1 -1
  24. package/css/components/Hero/hero.css +2 -2
  25. package/css/components/JumpLinks/jump-links.css +4 -3
  26. package/css/components/Label/label-group.css +2 -2
  27. package/css/components/Label/label.css +4 -3
  28. package/css/components/Login/login.css +51 -37
  29. package/css/components/Masthead/masthead.css +22 -20
  30. package/css/components/Menu/menu.css +23 -14
  31. package/css/components/ModalBox/modal-box.css +9 -7
  32. package/css/components/Nav/nav.css +13 -9
  33. package/css/components/NotificationDrawer/notification-drawer.css +8 -6
  34. package/css/components/Page/page.css +35 -29
  35. package/css/components/Sidebar/sidebar.css +1 -1
  36. package/css/components/Skeleton/skeleton.css +16 -15
  37. package/css/components/Slider/slider.css +32 -18
  38. package/css/components/Switch/switch.css +3 -1
  39. package/css/components/Table/table-grid.css +28 -36
  40. package/css/components/Table/table-tree-view.css +4 -2
  41. package/css/components/Table/table.css +31 -27
  42. package/css/components/Tabs/tabs.css +17 -15
  43. package/css/components/Toolbar/toolbar.css +14 -8
  44. package/css/components/TreeView/tree-view.css +44 -13
  45. package/css/components/TreeView/tree-view.d.ts +1 -0
  46. package/css/components/TreeView/tree-view.js +1 -0
  47. package/css/components/TreeView/tree-view.mjs +1 -0
  48. package/css/components/Wizard/wizard.css +20 -16
  49. package/css/components/_index.css +629 -464
  50. package/css/layouts/Gallery/gallery.css +6 -2
  51. package/css/layouts/_index.css +6 -2
  52. package/package.json +4 -4
@@ -87,6 +87,15 @@
87
87
  --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
88
88
  --pf-v6-c-table__expandable-row--TranslateY: 0;
89
89
  --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
90
+ }
91
+ @media screen and (prefers-reduced-motion: no-preference) {
92
+ .pf-v6-c-table {
93
+ --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
94
+ --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
95
+ --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
96
+ }
97
+ }
98
+ .pf-v6-c-table {
90
99
  --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
91
100
  --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
92
101
  --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -155,13 +164,6 @@
155
164
  --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
156
165
  --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
157
166
  }
158
- @media screen and (prefers-reduced-motion: no-preference) {
159
- .pf-v6-c-table {
160
- --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
161
- --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
162
- --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
163
- }
164
- }
165
167
 
166
168
  .pf-v6-c-table {
167
169
  width: 100%;
@@ -226,22 +228,6 @@
226
228
  --pf-v6-hidden-visible--hidden--Display: none;
227
229
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
228
230
  display: var(--pf-v6-hidden-visible--Display);
229
- position: relative;
230
- width: var(--pf-v6-c-table--cell--Width);
231
- min-width: var(--pf-v6-c-table--cell--MinWidth);
232
- max-width: var(--pf-v6-c-table--cell--MaxWidth);
233
- padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
234
- padding-block-end: var(--pf-v6-c-table--cell--PaddingBlockEnd);
235
- padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart);
236
- padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd);
237
- overflow: var(--pf-v6-c-table--cell--Overflow);
238
- font-size: var(--pf-v6-c-table--cell--FontSize);
239
- font-weight: var(--pf-v6-c-table--cell--FontWeight);
240
- line-height: var(--pf-v6-c-table--cell--LineHeight);
241
- color: var(--pf-v6-c-table--cell--Color);
242
- text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
243
- word-break: var(--pf-v6-c-table--cell--WordBreak);
244
- white-space: var(--pf-v6-c-table--cell--WhiteSpace);
245
231
  }
246
232
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td).pf-m-hidden {
247
233
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -286,6 +272,24 @@
286
272
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
287
273
  }
288
274
  }
275
+ .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td) {
276
+ position: relative;
277
+ width: var(--pf-v6-c-table--cell--Width);
278
+ min-width: var(--pf-v6-c-table--cell--MinWidth);
279
+ max-width: var(--pf-v6-c-table--cell--MaxWidth);
280
+ padding-block-start: var(--pf-v6-c-table--cell--PaddingBlockStart);
281
+ padding-block-end: var(--pf-v6-c-table--cell--PaddingBlockEnd);
282
+ padding-inline-start: var(--pf-v6-c-table--cell--PaddingInlineStart);
283
+ padding-inline-end: var(--pf-v6-c-table--cell--PaddingInlineEnd);
284
+ overflow: var(--pf-v6-c-table--cell--Overflow);
285
+ font-size: var(--pf-v6-c-table--cell--FontSize);
286
+ font-weight: var(--pf-v6-c-table--cell--FontWeight);
287
+ line-height: var(--pf-v6-c-table--cell--LineHeight);
288
+ color: var(--pf-v6-c-table--cell--Color);
289
+ text-overflow: var(--pf-v6-c-table--cell--TextOverflow);
290
+ word-break: var(--pf-v6-c-table--cell--WordBreak);
291
+ white-space: var(--pf-v6-c-table--cell--WhiteSpace);
292
+ }
289
293
  .pf-v6-c-table tr:where(.pf-v6-c-table__tr) > :where(th, td):first-child {
290
294
  padding-inline-start: var(--pf-v6-c-table--cell--first-last-child--PaddingInline);
291
295
  }
@@ -642,16 +646,16 @@
642
646
  .pf-v6-c-table__toggle .pf-v6-c-button.pf-m-expanded .pf-v6-c-table__toggle-icon {
643
647
  transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
644
648
  }
649
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
650
+ scale: -1 1;
651
+ }
652
+
645
653
  .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
646
654
  transition-timing-function: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
647
655
  transition-duration: var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration);
648
656
  transition-property: transform;
649
657
  transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
650
658
  }
651
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
652
- scale: -1 1;
653
- }
654
-
655
659
  .pf-v6-c-table__toggle svg {
656
660
  pointer-events: none;
657
661
  }
@@ -303,8 +303,8 @@
303
303
  }
304
304
  .pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list {
305
305
  position: relative;
306
- flex-direction: column;
307
306
  flex-grow: 1;
307
+ flex-direction: column;
308
308
  max-width: var(--pf-v6-c-tabs--m-vertical--MaxWidth);
309
309
  }
310
310
  .pf-v6-c-tabs.pf-m-vertical .pf-v6-c-tabs__list::before {
@@ -469,15 +469,19 @@
469
469
  white-space: normal;
470
470
  }
471
471
 
472
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
473
+ scale: -1 1;
474
+ }
475
+
472
476
  .pf-v6-c-tabs__toggle-icon {
473
477
  display: inline-block;
474
478
  transition: var(--pf-v6-c-tabs__toggle-icon--Transition);
475
479
  transform: rotate(var(--pf-v6-c-tabs__toggle-icon--Rotate));
476
480
  }
477
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__toggle-icon {
478
- scale: -1 1;
479
- }
480
481
 
482
+ .pf-v6-c-tabs__list::-webkit-scrollbar {
483
+ display: none;
484
+ }
481
485
  .pf-v6-c-tabs__list {
482
486
  scrollbar-width: none;
483
487
  -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -489,20 +493,17 @@
489
493
  scroll-snap-type: var(--pf-v6-c-tabs__list--ScrollSnapType);
490
494
  -webkit-overflow-scrolling: touch;
491
495
  }
492
- .pf-v6-c-tabs__list::-webkit-scrollbar {
493
- display: none;
494
- }
495
496
 
496
497
  .pf-v6-c-tabs__item {
497
498
  position: relative;
498
499
  display: flex;
499
500
  flex: none;
500
501
  column-gap: var(--pf-v6-c-tabs__item--ColumnGap);
501
- scroll-snap-align: var(--pf-v6-c-tabs__item--ScrollSnapAlign);
502
502
  padding-block-start: var(--pf-v6-c-tabs__item--PaddingBlockStart);
503
503
  padding-block-end: var(--pf-v6-c-tabs__item--PaddingBlockEnd);
504
504
  padding-inline-start: var(--pf-v6-c-tabs__item--PaddingInlineStart);
505
505
  padding-inline-end: var(--pf-v6-c-tabs__item--PaddingInlineEnd);
506
+ scroll-snap-align: var(--pf-v6-c-tabs__item--ScrollSnapAlign);
506
507
  background-color: var(--pf-v6-c-tabs__item--BackgroundColor);
507
508
  }
508
509
  .pf-v6-c-tabs__item.pf-m-current {
@@ -555,6 +556,10 @@
555
556
  border: 0;
556
557
  }
557
558
 
559
+ .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
560
+ --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
561
+ }
562
+
558
563
  .pf-v6-c-tabs__link {
559
564
  display: flex;
560
565
  flex: 1;
@@ -572,10 +577,6 @@
572
577
  border-radius: var(--pf-v6-c-tabs__link--BorderRadius);
573
578
  transition: background-color var(--pf-v6-c-tabs__link--TransitionDuration--background-color) var(--pf-v6-c-tabs__link--TransitionTimingFunction--background-color);
574
579
  }
575
- .pf-v6-c-tabs__item.pf-m-action, .pf-v6-c-tabs__link {
576
- --pf-v6-c-tabs__link--after--BorderBlockEndWidth: var(--pf-v6-c-tabs__link--after--BorderWidth);
577
- }
578
-
579
580
  .pf-v6-c-tabs__item.pf-m-action::before, .pf-v6-c-tabs__link::before {
580
581
  pointer-events: none;
581
582
  border-block-start-color: var(--pf-v6-c-tabs__link--before--BorderBlockStartColor);
@@ -630,6 +631,10 @@
630
631
  --pf-v6-c-tabs__link-toggle-icon--Rotate: var(--pf-v6-c-tabs__link--m-expanded__toggle-icon--Rotate);
631
632
  }
632
633
 
634
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
635
+ scale: -1 1;
636
+ }
637
+
633
638
  .pf-v6-c-tabs__link-toggle-icon {
634
639
  align-self: end;
635
640
  font-size: var(--pf-v6-c-tabs__link-toggle-icon--FontSize);
@@ -637,9 +642,6 @@
637
642
  transition: var(--pf-v6-c-tabs__link-toggle-icon--Transition);
638
643
  transform: rotate(var(--pf-v6-c-tabs__link-toggle-icon--Rotate));
639
644
  }
640
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tabs__link-toggle-icon {
641
- scale: -1 1;
642
- }
643
645
 
644
646
  .pf-v6-c-tabs__item-action {
645
647
  display: flex;
@@ -137,9 +137,6 @@
137
137
  --pf-v6-hidden-visible--hidden--Display: none;
138
138
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
139
139
  display: var(--pf-v6-hidden-visible--Display);
140
- row-gap: var(--pf-v6-c-toolbar__content--RowGap);
141
- padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
142
- padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
143
140
  }
144
141
  .pf-v6-c-toolbar__content.pf-m-hidden {
145
142
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -184,6 +181,11 @@
184
181
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
185
182
  }
186
183
  }
184
+ .pf-v6-c-toolbar__content {
185
+ row-gap: var(--pf-v6-c-toolbar__content--RowGap);
186
+ padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
187
+ padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
188
+ }
187
189
 
188
190
  .pf-v6-c-toolbar__content-section {
189
191
  flex-wrap: wrap;
@@ -257,11 +259,6 @@
257
259
 
258
260
  .pf-v6-c-toolbar__item {
259
261
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
260
- --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
261
- row-gap: var(--pf-v6-c-toolbar__item--RowGap);
262
- column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
263
- width: var(--pf-v6-c-toolbar__item--Width--base);
264
- min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
265
262
  }
266
263
  @media (min-width: 36rem) {
267
264
  .pf-v6-c-toolbar__item {
@@ -288,6 +285,9 @@
288
285
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width-on-2xl, var(--pf-v6-c-toolbar__item--Width-on-xl, var(--pf-v6-c-toolbar__item--Width-on-lg, var(--pf-v6-c-toolbar__item--Width-on-md, var(--pf-v6-c-toolbar__item--Width-on-sm, var(--pf-v6-c-toolbar__item--Width))))));
289
286
  }
290
287
  }
288
+ .pf-v6-c-toolbar__item {
289
+ --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
290
+ }
291
291
  @media (min-width: 36rem) {
292
292
  .pf-v6-c-toolbar__item {
293
293
  --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth));
@@ -313,6 +313,12 @@
313
313
  --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-2xl, var(--pf-v6-c-toolbar__item--MinWidth-on-xl, var(--pf-v6-c-toolbar__item--MinWidth-on-lg, var(--pf-v6-c-toolbar__item--MinWidth-on-md, var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth))))));
314
314
  }
315
315
  }
316
+ .pf-v6-c-toolbar__item {
317
+ row-gap: var(--pf-v6-c-toolbar__item--RowGap);
318
+ column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
319
+ width: var(--pf-v6-c-toolbar__item--Width--base);
320
+ min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
321
+ }
316
322
  .pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded {
317
323
  --pf-v6-c-toolbar__expand-all-icon--Rotate: var(--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate);
318
324
  }
@@ -30,6 +30,15 @@
30
30
  --pf-v6-c-tree-view--m-expanded__list--Opacity: 1;
31
31
  --pf-v6-c-tree-view__list--TranslateY: 0;
32
32
  --pf-v6-c-tree-view--m-expanded__list--TranslateY: 0;
33
+ }
34
+ @media screen and (prefers-reduced-motion: no-preference) {
35
+ .pf-v6-c-tree-view {
36
+ --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
37
+ --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
38
+ --pf-v6-c-tree-view__list--TranslateY: -.5rem;
39
+ }
40
+ }
41
+ .pf-v6-c-tree-view {
33
42
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetBlockStart: var(--pf-v6-c-tree-view__node--PaddingBlockStart);
34
43
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--InsetInlineStart: var(--pf-v6-c-tree-view__node--PaddingInlineStart);
35
44
  --pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX: -100%;
@@ -58,6 +67,9 @@
58
67
  --pf-v6-c-tree-view__node-toggle-icon--base--Rotate: 0;
59
68
  --pf-v6-c-tree-view__node-toggle-icon--Rotate: var(--pf-v6-c-tree-view__node-toggle-icon--base--Rotate);
60
69
  --pf-v6-c-tree-view__list-item--m-expanded__node-toggle-icon--Rotate: 90deg;
70
+ --pf-v6-c-tree-view__node--m-disabled--Color: var(--pf-t--global--text--color--disabled);
71
+ --pf-v6-c-tree-view__node-icon--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
72
+ --pf-v6-c-tree-view__node-toggle--m-disabled--Color: var(--pf-t--global--icon--color--disabled);
61
73
  --pf-v6-c-tree-view__node-text--max-lines: 1;
62
74
  --pf-v6-c-tree-view__node-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
63
75
  --pf-v6-c-tree-view__action--MarginInlineEnd: var(--pf-t--global--spacer--md);
@@ -113,6 +125,12 @@
113
125
  --pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineStart: var(--pf-t--global--spacer--lg);
114
126
  --pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
115
127
  --pf-v6-c-tree-view--m-compact__list-item--m-expanded__node-container--PaddingBlockEnd: 0;
128
+ --pf-v6-c-tree-view--m-compact__node-container--nested--Color: initial;
129
+ --pf-v6-c-tree-view--m-compact__node-container--m-disabled--nested--Color: var(--pf-t--global--text--color--on-disabled);
130
+ --pf-v6-c-tree-view--m-compact__node-icon--nested--Color: initial;
131
+ --pf-v6-c-tree-view--m-compact__node-icon--m-disabled--nested--Color: var(--pf-t--global--icon--color--on-disabled);
132
+ --pf-v6-c-tree-view--m-compact__node-toggle--nested--Color: initial;
133
+ --pf-v6-c-tree-view--m-compact__node-toggle--m-disabled--nested--Color: var(--pf-t--global--icon--color--on-disabled);
116
134
  --pf-v6-c-tree-view--m-no-background__node-container--BackgroundColor: transparent;
117
135
  --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset: var(--pf-t--global--spacer--sm);
118
136
  --pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart: calc(var(--pf-v6-c-tree-view__node--PaddingInlineStart) - var(--pf-v6-c-tree-view--m-compact--m-no-background--base-border--InsetInlineStart--offset));
@@ -122,13 +140,6 @@
122
140
  --pf-v6-c-tree-view--m-compact--m-no-background__node--nested--PaddingBlockEnd: 0;
123
141
  --pf-v6-c-tree-view--m-compact--m-no-background__node--before--InsetBlockStart: calc(var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockStart) + var(--pf-v6-c-tree-view--m-compact__node--nested--PaddingBlockStart) + 0.25rem);
124
142
  }
125
- @media screen and (prefers-reduced-motion: no-preference) {
126
- .pf-v6-c-tree-view {
127
- --pf-v6-c-tree-view__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
128
- --pf-v6-c-tree-view__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
129
- --pf-v6-c-tree-view__list--TranslateY: -.5rem;
130
- }
131
- }
132
143
 
133
144
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item, .pf-v6-c-tree-view.pf-m-guides .pf-v6-c-tree-view__list-item {
134
145
  position: relative;
@@ -209,11 +220,16 @@
209
220
  padding-block-end: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingBlockEnd);
210
221
  padding-inline-start: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineStart);
211
222
  padding-inline-end: var(--pf-v6-c-tree-view--m-compact__node-container--nested--PaddingInlineEnd);
223
+ color: var(--pf-v6-c-tree-view--m-compact__node-container--nested--Color, inherit);
212
224
  background-color: var(--pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor);
213
225
  }
214
226
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node-toggle {
215
227
  margin-inline-start: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineStart);
216
228
  margin-inline-end: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--MarginInlineEnd);
229
+ color: var(--pf-v6-c-tree-view--m-compact__node-toggle--nested--Color, inherit);
230
+ }
231
+ .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__node-icon {
232
+ color: var(--pf-v6-c-tree-view--m-compact__node-icon--nested--Color, inherit);
217
233
  }
218
234
  .pf-v6-c-tree-view.pf-m-compact .pf-v6-c-tree-view__node-container {
219
235
  padding-block-start: var(--pf-v6-c-tree-view--m-compact__node-container--PaddingBlockStart);
@@ -238,6 +254,13 @@
238
254
  }
239
255
  .pf-v6-c-tree-view.pf-m-no-background {
240
256
  --pf-v6-c-tree-view--m-compact__node-container--nested--BackgroundColor: var(--pf-v6-c-tree-view--m-no-background__node-container--BackgroundColor);
257
+ --pf-v6-c-tree-view--m-compact__node-container--m-disabled--nested--Color: initial;
258
+ --pf-v6-c-tree-view--m-compact__node-icon--m-disabled--nested--Color: initial;
259
+ --pf-v6-c-tree-view--m-compact__node-toggle--m-disabled--nested--Color: initial;
260
+ }
261
+
262
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
263
+ scale: -1 1;
241
264
  }
242
265
 
243
266
  .pf-v6-c-tree-view__node-toggle-icon {
@@ -247,9 +270,6 @@
247
270
  transition: transform var(--pf-v6-c-tree-view__node-toggle-icon--TransitionDuration) var(--pf-v6-c-tree-view__node-toggle-icon--TransitionTimingFunction);
248
271
  transform: rotate(var(--pf-v6-c-tree-view__node-toggle-icon--Rotate));
249
272
  }
250
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-tree-view__node-toggle-icon {
251
- scale: -1 1;
252
- }
253
273
 
254
274
  .pf-v6-c-tree-view__list-item .pf-v6-c-tree-view__list {
255
275
  max-height: 0;
@@ -313,6 +333,12 @@
313
333
  .pf-v6-c-tree-view__node .pf-v6-c-tree-view__node-count {
314
334
  margin-inline-start: var(--pf-v6-c-tree-view__node-count--MarginInlineStart);
315
335
  }
336
+ .pf-v6-c-tree-view__node.pf-m-disabled {
337
+ --pf-v6-c-tree-view__node--Color: var(--pf-v6-c-tree-view__node--m-disabled--Color);
338
+ --pf-v6-c-tree-view__node-icon--Color: var(--pf-v6-c-tree-view__node-icon--m-disabled--Color);
339
+ --pf-v6-c-tree-view--m-compact__node-container--nested--Color: var(--pf-v6-c-tree-view--m-compact__node-container--m-disabled--nested--Color);
340
+ --pf-v6-c-tree-view--m-compact__node-icon--nested--Color: var(--pf-v6-c-tree-view--m-compact__node-icon--m-disabled--nested--Color);
341
+ }
316
342
 
317
343
  .pf-v6-c-tree-view__node-container {
318
344
  display: var(--pf-v6-c-tree-view__node-container--Display);
@@ -355,6 +381,10 @@
355
381
  transform: translateX(calc(var(--pf-v6-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
356
382
  }
357
383
 
384
+ .pf-v6-c-tree-view__node-toggle.pf-m-disabled {
385
+ --pf-v6-c-tree-view__node-toggle--Color: var(--pf-v6-c-tree-view__node-toggle--m-disabled--Color);
386
+ }
387
+
358
388
  .pf-v6-c-tree-view__node-title.pf-m-truncate,
359
389
  .pf-v6-c-tree-view__node-text.pf-m-truncate {
360
390
  --pf-v6-c-tree-view__node-content--Overflow: hidden;
@@ -370,6 +400,10 @@
370
400
  white-space: nowrap;
371
401
  }
372
402
 
403
+ label.pf-v6-c-tree-view__node-text {
404
+ cursor: pointer;
405
+ }
406
+
373
407
  .pf-v6-c-tree-view__node-text {
374
408
  font-weight: inherit;
375
409
  color: inherit;
@@ -377,9 +411,6 @@
377
411
  background-color: transparent;
378
412
  border: 0;
379
413
  }
380
- label.pf-v6-c-tree-view__node-text {
381
- cursor: pointer;
382
- }
383
414
 
384
415
  .pf-v6-c-tree-view__node-title {
385
416
  font-weight: var(--pf-v6-c-tree-view__node-title--FontWeight);
@@ -7,6 +7,7 @@ declare const _default: {
7
7
  "expanded": "pf-m-expanded",
8
8
  "noBackground": "pf-m-no-background",
9
9
  "current": "pf-m-current",
10
+ "disabled": "pf-m-disabled",
10
11
  "truncate": "pf-m-truncate"
11
12
  },
12
13
  "treeView": "pf-v6-c-tree-view",
@@ -9,6 +9,7 @@ exports.default = {
9
9
  "expanded": "pf-m-expanded",
10
10
  "noBackground": "pf-m-no-background",
11
11
  "current": "pf-m-current",
12
+ "disabled": "pf-m-disabled",
12
13
  "truncate": "pf-m-truncate"
13
14
  },
14
15
  "treeView": "pf-v6-c-tree-view",
@@ -7,6 +7,7 @@ export default {
7
7
  "expanded": "pf-m-expanded",
8
8
  "noBackground": "pf-m-no-background",
9
9
  "current": "pf-m-current",
10
+ "disabled": "pf-m-disabled",
10
11
  "truncate": "pf-m-truncate"
11
12
  },
12
13
  "treeView": "pf-v6-c-tree-view",
@@ -101,6 +101,15 @@
101
101
  --pf-v6-c-wizard__nav--lg--Width: 15.625rem;
102
102
  --pf-v6-c-wizard__nav--lg--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
103
103
  --pf-v6-c-wizard__nav--lg--BorderInlineEndColor: var(--pf-t--global--border--color--default);
104
+ }
105
+ @media screen and (min-width: 62rem) {
106
+ .pf-v6-c-wizard {
107
+ --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
108
+ --pf-v6-c-wizard__nav--BoxShadow: none;
109
+ --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
110
+ }
111
+ }
112
+ .pf-v6-c-wizard {
104
113
  --pf-v6-c-wizard__nav-list--PaddingBlockStart: var(--pf-t--global--spacer--lg);
105
114
  --pf-v6-c-wizard__nav-list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
106
115
  --pf-v6-c-wizard__nav-list--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -125,13 +134,6 @@
125
134
  --pf-v6-c-wizard__footer--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
126
135
  --pf-v6-c-wizard__footer--BorderBlockStartColor: var(--pf-t--global--border--color--default);
127
136
  }
128
- @media screen and (min-width: 62rem) {
129
- .pf-v6-c-wizard {
130
- --pf-v6-c-wizard__nav--Width: var(--pf-v6-c-wizard__nav--lg--Width);
131
- --pf-v6-c-wizard__nav--BoxShadow: none;
132
- --pf-v6-c-wizard__nav--BorderBlockEndWidth: 0;
133
- }
134
- }
135
137
 
136
138
  .pf-v6-c-wizard {
137
139
  position: relative;
@@ -267,13 +269,14 @@
267
269
  color: var(--pf-v6-c-wizard__toggle-status-icon--Color);
268
270
  }
269
271
 
270
- .pf-v6-c-wizard__toggle-separator {
271
- color: var(--pf-v6-c-wizard__toggle-separator--Color);
272
- }
273
272
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__toggle-separator {
274
273
  scale: -1 1;
275
274
  }
276
275
 
276
+ .pf-v6-c-wizard__toggle-separator {
277
+ color: var(--pf-v6-c-wizard__toggle-separator--Color);
278
+ }
279
+
277
280
  .pf-v6-c-wizard__toggle-icon {
278
281
  line-height: var(--pf-v6-c-wizard__toggle-icon--LineHeight);
279
282
  }
@@ -281,8 +284,8 @@
281
284
  .pf-v6-c-wizard__outer-wrap {
282
285
  position: relative;
283
286
  display: flex;
284
- flex-direction: column;
285
287
  flex-grow: 1;
288
+ flex-direction: column;
286
289
  min-height: var(--pf-v6-c-wizard__outer-wrap--MinHeight);
287
290
  background-color: var(--pf-v6-c-wizard__outer-wrap--BackgroundColor);
288
291
  }
@@ -295,8 +298,8 @@
295
298
  .pf-v6-c-wizard__inner-wrap {
296
299
  position: relative;
297
300
  display: flex;
298
- flex-direction: column;
299
301
  flex-grow: 1;
302
+ flex-direction: column;
300
303
  min-height: 0;
301
304
  }
302
305
  @media screen and (min-width: 62rem) {
@@ -474,6 +477,10 @@
474
477
  color: var(--pf-v6-c-wizard__nav-link-toggle--Color);
475
478
  }
476
479
 
480
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {
481
+ scale: -1 1;
482
+ }
483
+
477
484
  .pf-v6-c-wizard__nav-link-toggle-icon {
478
485
  display: inline-block;
479
486
  transition-timing-function: var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
@@ -481,15 +488,12 @@
481
488
  transition-property: transform;
482
489
  transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
483
490
  }
484
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {
485
- scale: -1 1;
486
- }
487
491
 
488
492
  .pf-v6-c-wizard__main {
489
493
  z-index: var(--pf-v6-c-wizard__main--ZIndex);
490
494
  display: flex;
491
- flex-direction: column;
492
495
  flex-grow: 1;
496
+ flex-direction: column;
493
497
  overflow-x: hidden;
494
498
  overflow-y: auto;
495
499
  word-break: break-word;