@patternfly/patternfly 6.5.0-prerelease.32 → 6.5.0-prerelease.34

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 (77) hide show
  1. package/assets/fontawesome/_variables.scss +2 -1
  2. package/base/tokens/tokens-local.scss +1 -1
  3. package/components/AboutModalBox/about-modal-box.css +36 -26
  4. package/components/Accordion/accordion.css +16 -13
  5. package/components/Alert/alert.css +5 -4
  6. package/components/Avatar/avatar.css +12 -4
  7. package/components/BackgroundImage/background-image.css +6 -3
  8. package/components/Banner/banner.css +8 -6
  9. package/components/Brand/brand.css +3 -1
  10. package/components/Breadcrumb/breadcrumb.css +4 -3
  11. package/components/Button/button.css +6 -6
  12. package/components/CalendarMonth/calendar-month.css +4 -3
  13. package/components/Card/card.css +7 -6
  14. package/components/ClipboardCopy/clipboard-copy.css +4 -3
  15. package/components/CodeEditor/code-editor.css +1 -1
  16. package/components/CodeEditor/code-editor.scss +1 -1
  17. package/components/Compass/compass.css +6 -2
  18. package/components/DataList/data-list.css +28 -21
  19. package/components/DescriptionList/description-list-order.scss +5 -1
  20. package/components/DescriptionList/description-list.css +7 -5
  21. package/components/DescriptionList/description-list.scss +5 -1
  22. package/components/Divider/divider.css +7 -5
  23. package/components/Drawer/drawer.css +38 -28
  24. package/components/Drawer/drawer.scss +12 -4
  25. package/components/DualListSelector/dual-list-selector.css +17 -11
  26. package/components/ExpandableSection/expandable-section.css +16 -14
  27. package/components/ExpandableSection/expandable-section.scss +1 -1
  28. package/components/Form/form.css +1 -1
  29. package/components/Form/form.scss +1 -1
  30. package/components/FormControl/form-control.css +1 -1
  31. package/components/FormControl/form-control.scss +1 -1
  32. package/components/JumpLinks/jump-links.css +4 -3
  33. package/components/JumpLinks/jump-links.scss +5 -1
  34. package/components/Label/label-group.css +2 -2
  35. package/components/Label/label-group.scss +2 -2
  36. package/components/Label/label.css +4 -3
  37. package/components/Login/login.css +51 -37
  38. package/components/Masthead/masthead.css +32 -18
  39. package/components/Masthead/masthead.scss +8 -2
  40. package/components/Menu/menu.css +23 -14
  41. package/components/ModalBox/modal-box.css +9 -7
  42. package/components/ModalBox/modal-box.scss +2 -2
  43. package/components/Nav/nav.css +17 -9
  44. package/components/Nav/nav.scss +5 -0
  45. package/components/NotificationDrawer/notification-drawer.css +6 -6
  46. package/components/Page/page.css +35 -29
  47. package/components/Page/page.scss +17 -5
  48. package/components/Pagination/pagination.scss +5 -1
  49. package/components/ProgressStepper/progress-stepper.scss +5 -1
  50. package/components/Sidebar/sidebar.css +1 -1
  51. package/components/Sidebar/sidebar.scss +7 -3
  52. package/components/Skeleton/skeleton.css +16 -15
  53. package/components/Slider/slider.css +32 -18
  54. package/components/Switch/switch.css +3 -1
  55. package/components/Table/table-tree-view.css +4 -2
  56. package/components/Table/table.css +31 -27
  57. package/components/Tabs/tabs.css +17 -15
  58. package/components/Tabs/tabs.scss +12 -4
  59. package/components/Toolbar/toolbar.css +14 -8
  60. package/components/Toolbar/toolbar.scss +5 -1
  61. package/components/TreeView/tree-view.css +44 -13
  62. package/components/TreeView/tree-view.scss +31 -0
  63. package/components/Wizard/wizard.css +20 -16
  64. package/components/Wizard/wizard.scss +3 -3
  65. package/components/_index.css +613 -426
  66. package/docs/components/TreeView/examples/TreeView.md +38 -26
  67. package/layouts/Flex/flex.scss +83 -19
  68. package/layouts/Gallery/gallery.css +6 -2
  69. package/layouts/_index.css +6 -2
  70. package/package.json +4 -2
  71. package/patternfly-charts.css +3 -3
  72. package/patternfly-no-globals.css +604 -413
  73. package/patternfly.css +604 -413
  74. package/patternfly.min.css +1 -1
  75. package/patternfly.min.css.map +1 -1
  76. package/sass-utilities/functions.scss +32 -25
  77. package/sass-utilities/mixins.scss +36 -20
@@ -1,4 +1,3 @@
1
- @charset "UTF-8";
2
1
  .pf-v6-c-skeleton {
3
2
  --pf-v6-c-skeleton--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
4
3
  --pf-v6-c-skeleton--Width: auto;
@@ -6,7 +5,7 @@
6
5
  --pf-v6-c-skeleton--BorderRadius: var(--pf-t--global--spacer--sm);
7
6
  --pf-v6-c-skeleton--before--PaddingBlockEnd: 0;
8
7
  --pf-v6-c-skeleton--before--Height: auto;
9
- --pf-v6-c-skeleton--before--Content: " ";
8
+ --pf-v6-c-skeleton--before--Content: "\00a0";
10
9
  --pf-v6-c-skeleton--after--LinearGradientAngle: 90deg;
11
10
  --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
12
11
  --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
@@ -17,6 +16,17 @@
17
16
  --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
18
17
  --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
19
18
  --pf-v6-c-skeleton--after--AnimationDelay: .5s;
19
+ }
20
+ @media screen and (prefers-reduced-motion: no-preference) {
21
+ .pf-v6-c-skeleton {
22
+ --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
23
+ --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
24
+ --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
25
+ --pf-v6-c-skeleton--after--TranslateX: -100%;
26
+ --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
27
+ }
28
+ }
29
+ .pf-v6-c-skeleton {
20
30
  --pf-v6-c-skeleton--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
21
31
  --pf-v6-c-skeleton--m-circle--before--PaddingBlockEnd: 100%;
22
32
  --pf-v6-c-skeleton--m-text-4xl--Height: calc(var(--pf-t--global--font--size--4xl) * var(--pf-t--global--font--line-height--heading));
@@ -44,15 +54,6 @@
44
54
  --pf-v6-c-skeleton--m-height-75--Height: 75%;
45
55
  --pf-v6-c-skeleton--m-height-100--Height: 100%;
46
56
  }
47
- @media screen and (prefers-reduced-motion: no-preference) {
48
- .pf-v6-c-skeleton {
49
- --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
50
- --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
51
- --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
52
- --pf-v6-c-skeleton--after--TranslateX: -100%;
53
- --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
54
- }
55
- }
56
57
 
57
58
  .pf-v6-c-skeleton {
58
59
  position: relative;
@@ -69,6 +70,10 @@
69
70
  padding-block-end: var(--pf-v6-c-skeleton--before--PaddingBlockEnd);
70
71
  content: var(--pf-v6-c-skeleton--before--Content);
71
72
  }
73
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-skeleton::after {
74
+ scale: -1 1;
75
+ }
76
+
72
77
  .pf-v6-c-skeleton::after {
73
78
  position: absolute;
74
79
  inset: 0;
@@ -78,10 +83,6 @@
78
83
  transform: translate3d(var(--pf-v6-c-skeleton--after--TranslateX), 0, 0);
79
84
  animation: var(--pf-v6-c-skeleton--after--AnimationName) var(--pf-v6-c-skeleton--after--AnimationDuration) var(--pf-v6-c-skeleton--after--AnimationTimingFunction) var(--pf-v6-c-skeleton--after--AnimationDelay) var(--pf-v6-c-skeleton--after--AnimationIterationCount);
80
85
  }
81
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-skeleton::after {
82
- scale: -1 1;
83
- }
84
-
85
86
  .pf-v6-c-skeleton.pf-m-circle {
86
87
  --pf-v6-c-skeleton--BorderRadius: var(--pf-v6-c-skeleton--m-circle--BorderRadius);
87
88
  }
@@ -67,12 +67,14 @@
67
67
 
68
68
  .pf-v6-c-slider {
69
69
  --pf-v6-c-slider__rail-track--before--fill--direction: right;
70
- display: flex;
71
70
  }
72
71
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider {
73
72
  --pf-v6-c-slider__rail-track--before--fill--direction: left;
74
73
  }
75
74
 
75
+ .pf-v6-c-slider {
76
+ display: flex;
77
+ }
76
78
  .pf-v6-c-slider.pf-m-disabled {
77
79
  --pf-v6-c-slider__rail-track--before--fill--BackgroundColor: var(--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor);
78
80
  --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor: var(--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor);
@@ -135,6 +137,12 @@
135
137
 
136
138
  .pf-v6-c-slider__step-tick {
137
139
  transform: translateX(var(--pf-v6-c-slider__step-tick--TranslateX));
140
+ }
141
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
142
+ transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
143
+ }
144
+
145
+ .pf-v6-c-slider__step-tick {
138
146
  position: absolute;
139
147
  inset-block-start: var(--pf-v6-c-slider__step-tick--InsetBlockStart);
140
148
  inset-inline-start: 0;
@@ -144,22 +152,28 @@
144
152
  border: var(--pf-v6-c-slider__step-tick--BorderWidth) solid var(--pf-v6-c-slider__step-tick--BorderColor);
145
153
  border-radius: var(--pf-v6-c-slider__step-tick--BorderRadius);
146
154
  }
147
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-tick {
148
- transform: translateX(calc(var(--pf-v6-c-slider__step-tick--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
149
- }
150
155
 
151
156
  .pf-v6-c-slider__step-label {
152
157
  transform: translateX(var(--pf-v6-c-slider__step-label--TranslateX));
153
- position: absolute;
154
- inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
155
- word-break: normal;
156
158
  }
157
159
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__step-label {
158
160
  transform: translateX(calc(var(--pf-v6-c-slider__step-label--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
159
161
  }
160
162
 
163
+ .pf-v6-c-slider__step-label {
164
+ position: absolute;
165
+ inset-block-start: var(--pf-v6-c-slider__step-label--InsetBlockStart);
166
+ word-break: normal;
167
+ }
168
+
161
169
  .pf-v6-c-slider__thumb {
162
170
  transform: translate(var(--pf-v6-c-slider__thumb--TranslateX), var(--pf-v6-c-slider__thumb--TranslateY));
171
+ }
172
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb {
173
+ transform: translate(calc(var(--pf-v6-c-slider__thumb--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--TranslateY));
174
+ }
175
+
176
+ .pf-v6-c-slider__thumb {
163
177
  position: absolute;
164
178
  inset-block-start: var(--pf-v6-c-slider__thumb--InsetBlockStart);
165
179
  inset-inline-start: var(--pf-v6-c-slider__thumb--InsetInlineStart);
@@ -171,12 +185,14 @@
171
185
  border-radius: var(--pf-v6-c-slider__thumb--BorderRadius);
172
186
  box-shadow: var(--pf-v6-c-slider__thumb--BoxShadow);
173
187
  }
174
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb {
175
- transform: translate(calc(var(--pf-v6-c-slider__thumb--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--TranslateY));
188
+ .pf-v6-c-slider__thumb::before {
189
+ transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
190
+ }
191
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
192
+ transform: translate(calc(var(--pf-v6-c-slider__thumb--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--before--TranslateY));
176
193
  }
177
194
 
178
195
  .pf-v6-c-slider__thumb::before {
179
- transform: translate(var(--pf-v6-c-slider__thumb--before--TranslateX), var(--pf-v6-c-slider__thumb--before--TranslateY));
180
196
  position: absolute;
181
197
  inset-block-start: 50%;
182
198
  inset-inline-start: 50%;
@@ -185,10 +201,6 @@
185
201
  content: "";
186
202
  border-radius: var(--pf-v6-c-slider__thumb--before--BorderRadius);
187
203
  }
188
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__thumb::before {
189
- transform: translate(calc(var(--pf-v6-c-slider__thumb--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__thumb--before--TranslateY));
190
- }
191
-
192
204
  .pf-v6-c-slider__thumb:hover {
193
205
  --pf-v6-c-slider__thumb--BoxShadow: var(--pf-v6-c-slider__thumb--hover--BoxShadow);
194
206
  }
@@ -205,16 +217,18 @@
205
217
  }
206
218
  .pf-v6-c-slider__value.pf-m-floating {
207
219
  transform: translate(var(--pf-v6-c-slider__value--m-floating--TranslateX), var(--pf-v6-c-slider__value--m-floating--TranslateY));
220
+ }
221
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
222
+ transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
223
+ }
224
+
225
+ .pf-v6-c-slider__value.pf-m-floating {
208
226
  --pf-v6-c-slider__value--MarginInlineStart: 0;
209
227
  position: absolute;
210
228
  inset-block-start: 0;
211
229
  inset-inline-start: var(--pf-v6-c-slider__value--m-floating--InsetInlineStart);
212
230
  z-index: var(--pf-v6-c-slider__value--m-floating--ZIndex);
213
231
  }
214
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider__value.pf-m-floating {
215
- transform: translate(calc(var(--pf-v6-c-slider__value--m-floating--TranslateX) * var(--pf-v6-global--inverse--multiplier)), var(--pf-v6-c-slider__value--m-floating--TranslateY));
216
- }
217
-
218
232
  .pf-v6-c-slider__value .pf-v6-c-form-control {
219
233
  width: var(--pf-v6-c-slider__value--c-form-control--Width);
220
234
  }
@@ -78,12 +78,14 @@
78
78
  }
79
79
  .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
80
80
  transform: translate(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX), -50%);
81
- background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
82
81
  }
83
82
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
84
83
  transform: translate(calc(var(--pf-v6-c-switch__input--checked__toggle--before--TranslateX) * var(--pf-v6-global--inverse--multiplier)), -50%);
85
84
  }
86
85
 
86
+ .pf-v6-c-switch__input:checked ~ .pf-v6-c-switch__toggle::before {
87
+ background-color: var(--pf-v6-c-switch__input--checked__toggle--before--BackgroundColor);
88
+ }
87
89
  .pf-v6-c-switch__input:not(:checked) ~ .pf-v6-c-switch__label {
88
90
  color: var(--pf-v6-c-switch__input--not-checked__label--Color);
89
91
  }
@@ -67,13 +67,15 @@
67
67
  }
68
68
  .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
69
69
  transform: translateX(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX));
70
- position: var(--pf-v6-c-table--m-tree-view__toggle--Position);
71
- inset-inline-start: var(--pf-v6-c-table--m-tree-view__toggle--InsetInlineStart);
72
70
  }
73
71
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
74
72
  transform: translateX(calc(var(--pf-v6-c-table--m-tree-view__toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
75
73
  }
76
74
 
75
+ .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle {
76
+ position: var(--pf-v6-c-table--m-tree-view__toggle--Position);
77
+ inset-inline-start: var(--pf-v6-c-table--m-tree-view__toggle--InsetInlineStart);
78
+ }
77
79
  .pf-v6-c-table__tree-view-main > .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
78
80
  min-width: var(--pf-v6-c-table--m-tree-view__toggle__toggle-icon--MinWidth);
79
81
  }
@@ -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;
@@ -384,8 +384,8 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
384
384
 
385
385
  .#{$tabs}__list {
386
386
  position: relative;
387
- flex-direction: column;
388
387
  flex-grow: 1;
388
+ flex-direction: column;
389
389
  max-width: var(--#{$tabs}--m-vertical--MaxWidth);
390
390
 
391
391
  &::before {
@@ -422,7 +422,11 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
422
422
  }
423
423
 
424
424
  @each $breakpoint, $breakpoint-value in $pf-v6-c-tabs--breakpoint-map {
425
- $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
425
+ $breakpoint-name: "";
426
+
427
+ @if $breakpoint != "base" {
428
+ $breakpoint-name: -on-#{$breakpoint};
429
+ }
426
430
 
427
431
  @include pf-v6-apply-breakpoint($breakpoint) {
428
432
  // stylelint-disable max-nesting-depth
@@ -573,11 +577,11 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
573
577
  display: flex;
574
578
  flex: none;
575
579
  column-gap: var(--#{$tabs}__item--ColumnGap);
576
- scroll-snap-align: var(--#{$tabs}__item--ScrollSnapAlign);
577
580
  padding-block-start: var(--#{$tabs}__item--PaddingBlockStart);
578
581
  padding-block-end: var(--#{$tabs}__item--PaddingBlockEnd);
579
582
  padding-inline-start: var(--#{$tabs}__item--PaddingInlineStart);
580
583
  padding-inline-end: var(--#{$tabs}__item--PaddingInlineEnd);
584
+ scroll-snap-align: var(--#{$tabs}__item--ScrollSnapAlign);
581
585
  background-color: var(--#{$tabs}__item--BackgroundColor);
582
586
 
583
587
  // Current
@@ -803,7 +807,11 @@ $pf-v6-c-tabs--spacer-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl
803
807
  // stylelint-disable no-duplicate-selectors, max-nesting-depth
804
808
  .#{$tabs} {
805
809
  @each $breakpoint, $breakpoint-value in $pf-v6-c-tabs--breakpoint-map {
806
- $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
810
+ $breakpoint-name: "";
811
+
812
+ @if $breakpoint != "base" {
813
+ $breakpoint-name: -on-#{$breakpoint};
814
+ }
807
815
 
808
816
  @include pf-v6-apply-breakpoint($breakpoint) {
809
817
  @each $spacer, $spacer-value in $pf-v6-c-tabs--spacer-map {
@@ -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
  }
@@ -356,7 +356,11 @@ $pf-v6--include-toolbar-breakpoints: true !default;
356
356
  }
357
357
 
358
358
  @each $breakpoint, $breakpoint-value in $pf-v6-c-toolbar--breakpoint-map {
359
- $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
359
+ $breakpoint-name: "";
360
+
361
+ @if $breakpoint != "base" {
362
+ $breakpoint-name: -on-#{$breakpoint};
363
+ }
360
364
 
361
365
  @include pf-v6-apply-breakpoint($breakpoint) {
362
366
  .#{$toolbar}__group,
@@ -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);