@patternfly/react-styles 6.5.0-prerelease.6 → 6.5.0

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 (202) hide show
  1. package/CHANGELOG.md +126 -0
  2. package/README.md +1 -1
  3. package/css/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/css/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/css/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/css/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/css/assets/images/compass--hero-bg.png +0 -0
  8. package/css/assets/images/compass--wallpaper-dark.jpg +0 -0
  9. package/css/assets/images/compass--wallpaper-light.jpg +0 -0
  10. package/css/assets/images/glass-brand-dark.jpg +0 -0
  11. package/css/assets/images/glass-brand-dark.png +0 -0
  12. package/css/assets/images/glass-brand-light.jpg +0 -0
  13. package/css/assets/images/glass-brand-light.png +0 -0
  14. package/css/components/AboutModalBox/about-modal-box.css +36 -26
  15. package/css/components/Accordion/accordion.css +26 -14
  16. package/css/components/Accordion/accordion.d.ts +4 -1
  17. package/css/components/Accordion/accordion.js +4 -1
  18. package/css/components/Accordion/accordion.mjs +4 -1
  19. package/css/components/Alert/alert.css +7 -5
  20. package/css/components/Avatar/avatar.css +12 -4
  21. package/css/components/BackgroundImage/background-image.css +6 -3
  22. package/css/components/Banner/banner.css +12 -6
  23. package/css/components/Banner/banner.d.ts +1 -0
  24. package/css/components/Banner/banner.js +1 -0
  25. package/css/components/Banner/banner.mjs +1 -0
  26. package/css/components/Brand/brand.css +3 -1
  27. package/css/components/Breadcrumb/breadcrumb.css +10 -5
  28. package/css/components/Button/button.css +158 -68
  29. package/css/components/Button/button.d.ts +7 -2
  30. package/css/components/Button/button.js +7 -2
  31. package/css/components/Button/button.mjs +7 -2
  32. package/css/components/CalendarMonth/calendar-month.css +4 -3
  33. package/css/components/Card/card.css +45 -15
  34. package/css/components/Card/card.d.ts +3 -1
  35. package/css/components/Card/card.js +3 -1
  36. package/css/components/Card/card.mjs +3 -1
  37. package/css/components/ClipboardCopy/clipboard-copy.css +14 -7
  38. package/css/components/ClipboardCopy/clipboard-copy.d.ts +1 -0
  39. package/css/components/ClipboardCopy/clipboard-copy.js +1 -0
  40. package/css/components/ClipboardCopy/clipboard-copy.mjs +1 -0
  41. package/css/components/CodeEditor/code-editor.css +2 -2
  42. package/css/components/Compass/compass.css +264 -114
  43. package/css/components/Compass/compass.d.ts +18 -9
  44. package/css/components/Compass/compass.js +18 -9
  45. package/css/components/Compass/compass.mjs +18 -9
  46. package/css/components/DataList/data-list.css +30 -23
  47. package/css/components/DataList/data-list.d.ts +3 -1
  48. package/css/components/DataList/data-list.js +3 -1
  49. package/css/components/DataList/data-list.mjs +3 -1
  50. package/css/components/DescriptionList/description-list.css +7 -5
  51. package/css/components/Divider/divider.css +7 -5
  52. package/css/components/Drawer/drawer.css +197 -83
  53. package/css/components/Drawer/drawer.d.ts +5 -2
  54. package/css/components/Drawer/drawer.js +5 -2
  55. package/css/components/Drawer/drawer.mjs +5 -2
  56. package/css/components/DualListSelector/dual-list-selector.css +18 -12
  57. package/css/components/ExpandableSection/expandable-section.css +21 -16
  58. package/css/components/Form/form.css +2 -2
  59. package/css/components/FormControl/form-control.css +3 -3
  60. package/css/components/Hero/hero.css +19 -19
  61. package/css/components/Hero/hero.d.ts +1 -1
  62. package/css/components/Hero/hero.js +1 -1
  63. package/css/components/Hero/hero.mjs +1 -1
  64. package/css/components/JumpLinks/jump-links.css +16 -5
  65. package/css/components/Label/label-group.css +2 -2
  66. package/css/components/Label/label.css +4 -3
  67. package/css/components/Login/login.css +58 -40
  68. package/css/components/Masthead/masthead.css +111 -16
  69. package/css/components/Masthead/masthead.d.ts +6 -0
  70. package/css/components/Masthead/masthead.js +6 -0
  71. package/css/components/Masthead/masthead.mjs +6 -0
  72. package/css/components/Menu/menu.css +49 -33
  73. package/css/components/MenuToggle/menu-toggle.css +35 -8
  74. package/css/components/MenuToggle/menu-toggle.d.ts +5 -0
  75. package/css/components/MenuToggle/menu-toggle.js +5 -0
  76. package/css/components/MenuToggle/menu-toggle.mjs +5 -0
  77. package/css/components/ModalBox/modal-box.css +9 -7
  78. package/css/components/Nav/nav.css +82 -11
  79. package/css/components/Nav/nav.d.ts +7 -2
  80. package/css/components/Nav/nav.js +7 -2
  81. package/css/components/Nav/nav.mjs +7 -2
  82. package/css/components/NotificationDrawer/notification-drawer.css +19 -9
  83. package/css/components/OverflowMenu/overflow-menu.css +16 -0
  84. package/css/components/OverflowMenu/overflow-menu.d.ts +1 -0
  85. package/css/components/OverflowMenu/overflow-menu.js +1 -0
  86. package/css/components/OverflowMenu/overflow-menu.mjs +1 -0
  87. package/css/components/Page/page.css +423 -32
  88. package/css/components/Page/page.d.ts +18 -1
  89. package/css/components/Page/page.js +18 -1
  90. package/css/components/Page/page.mjs +18 -1
  91. package/css/components/Pagination/pagination.css +58 -4
  92. package/css/components/Pagination/pagination.d.ts +6 -1
  93. package/css/components/Pagination/pagination.js +6 -1
  94. package/css/components/Pagination/pagination.mjs +6 -1
  95. package/css/components/Panel/panel.css +41 -3
  96. package/css/components/Panel/panel.d.ts +8 -2
  97. package/css/components/Panel/panel.js +8 -2
  98. package/css/components/Panel/panel.mjs +8 -2
  99. package/css/components/Progress/progress.css +3 -1
  100. package/css/components/Sidebar/sidebar.css +1 -1
  101. package/css/components/Skeleton/skeleton.css +16 -15
  102. package/css/components/Slider/slider.css +32 -18
  103. package/css/components/Switch/switch.css +4 -2
  104. package/css/components/Table/table-grid.css +28 -36
  105. package/css/components/Table/table-scrollable.css +1 -1
  106. package/css/components/Table/table-tree-view.css +4 -2
  107. package/css/components/Table/table.css +104 -57
  108. package/css/components/Table/table.d.ts +6 -2
  109. package/css/components/Table/table.js +6 -2
  110. package/css/components/Table/table.mjs +6 -2
  111. package/css/components/Tabs/tabs.css +35 -32
  112. package/css/components/Tabs/tabs.d.ts +0 -1
  113. package/css/components/Tabs/tabs.js +0 -1
  114. package/css/components/Tabs/tabs.mjs +0 -1
  115. package/css/components/TextInputGroup/text-input-group.css +2 -2
  116. package/css/components/ToggleGroup/toggle-group.css +44 -19
  117. package/css/components/ToggleGroup/toggle-group.d.ts +1 -0
  118. package/css/components/ToggleGroup/toggle-group.js +1 -0
  119. package/css/components/ToggleGroup/toggle-group.mjs +1 -0
  120. package/css/components/Toolbar/toolbar.css +199 -17
  121. package/css/components/Toolbar/toolbar.d.ts +14 -0
  122. package/css/components/Toolbar/toolbar.js +14 -0
  123. package/css/components/Toolbar/toolbar.mjs +14 -0
  124. package/css/components/TreeView/tree-view.css +45 -14
  125. package/css/components/TreeView/tree-view.d.ts +1 -0
  126. package/css/components/TreeView/tree-view.js +1 -0
  127. package/css/components/TreeView/tree-view.mjs +1 -0
  128. package/css/components/Wizard/wizard.css +41 -19
  129. package/css/components/Wizard/wizard.d.ts +3 -0
  130. package/css/components/Wizard/wizard.js +3 -0
  131. package/css/components/Wizard/wizard.mjs +3 -0
  132. package/css/components/_index.css +2420 -884
  133. package/css/components/_index.d.ts +37 -8
  134. package/css/components/_index.js +37 -8
  135. package/css/components/_index.mjs +37 -8
  136. package/css/docs/components/Compass/examples/Compass.css +5 -8
  137. package/css/docs/components/Compass/examples/Compass.d.ts +4 -1
  138. package/css/docs/components/Compass/examples/Compass.js +4 -1
  139. package/css/docs/components/Compass/examples/Compass.mjs +4 -1
  140. package/css/docs/components/DragDrop/examples/DragDrop.css +1 -1
  141. package/css/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  142. package/css/docs/components/Panel/examples/Panel.css +3 -0
  143. package/css/docs/components/Panel/examples/Panel.d.ts +5 -0
  144. package/css/docs/components/Panel/examples/Panel.js +6 -0
  145. package/css/docs/components/Panel/examples/Panel.mjs +4 -0
  146. package/css/docs/components/Table/examples/Table.css +2 -1
  147. package/css/docs/components/Toolbar/examples/Toolbar.css +1 -1
  148. package/css/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  149. package/css/docs/layouts/Bullseye/examples/Bullseye.d.ts +1 -1
  150. package/css/docs/layouts/Bullseye/examples/Bullseye.js +1 -1
  151. package/css/docs/layouts/Bullseye/examples/Bullseye.mjs +1 -1
  152. package/css/docs/layouts/Flex/examples/Flex.css +3 -3
  153. package/css/docs/layouts/Flex/examples/Flex.d.ts +2 -2
  154. package/css/docs/layouts/Flex/examples/Flex.js +2 -2
  155. package/css/docs/layouts/Flex/examples/Flex.mjs +2 -2
  156. package/css/docs/layouts/Gallery/examples/Gallery.css +2 -2
  157. package/css/docs/layouts/Gallery/examples/Gallery.d.ts +1 -1
  158. package/css/docs/layouts/Gallery/examples/Gallery.js +1 -1
  159. package/css/docs/layouts/Gallery/examples/Gallery.mjs +1 -1
  160. package/css/docs/layouts/Grid/examples/Grid.css +1 -1
  161. package/css/docs/layouts/Grid/examples/Grid.d.ts +1 -1
  162. package/css/docs/layouts/Grid/examples/Grid.js +1 -1
  163. package/css/docs/layouts/Grid/examples/Grid.mjs +1 -1
  164. package/css/docs/layouts/Level/examples/Level.css +3 -3
  165. package/css/docs/layouts/Level/examples/Level.d.ts +1 -1
  166. package/css/docs/layouts/Level/examples/Level.js +1 -1
  167. package/css/docs/layouts/Level/examples/Level.mjs +1 -1
  168. package/css/docs/layouts/Split/examples/Split.css +1 -1
  169. package/css/docs/layouts/Split/examples/Split.d.ts +1 -1
  170. package/css/docs/layouts/Split/examples/Split.js +1 -1
  171. package/css/docs/layouts/Split/examples/Split.mjs +1 -1
  172. package/css/docs/layouts/Stack/examples/Stack.css +3 -3
  173. package/css/docs/layouts/Stack/examples/Stack.d.ts +1 -1
  174. package/css/docs/layouts/Stack/examples/Stack.js +1 -1
  175. package/css/docs/layouts/Stack/examples/Stack.mjs +1 -1
  176. package/css/docs/utilities/Alignment/examples/Alignment.css +4 -4
  177. package/css/docs/utilities/Alignment/examples/Alignment.d.ts +1 -1
  178. package/css/docs/utilities/Alignment/examples/Alignment.js +1 -1
  179. package/css/docs/utilities/Alignment/examples/Alignment.mjs +1 -1
  180. package/css/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  181. package/css/docs/utilities/BoxShadow/examples/box-shadow.d.ts +1 -1
  182. package/css/docs/utilities/BoxShadow/examples/box-shadow.js +1 -1
  183. package/css/docs/utilities/BoxShadow/examples/box-shadow.mjs +1 -1
  184. package/css/docs/utilities/Display/examples/Display.css +1 -1
  185. package/css/docs/utilities/Display/examples/Display.d.ts +1 -1
  186. package/css/docs/utilities/Display/examples/Display.js +1 -1
  187. package/css/docs/utilities/Display/examples/Display.mjs +1 -1
  188. package/css/docs/utilities/Flex/examples/Flex.css +7 -7
  189. package/css/docs/utilities/Flex/examples/Flex.d.ts +1 -1
  190. package/css/docs/utilities/Flex/examples/Flex.js +1 -1
  191. package/css/docs/utilities/Flex/examples/Flex.mjs +1 -1
  192. package/css/docs/utilities/Float/examples/Float.css +2 -2
  193. package/css/docs/utilities/Float/examples/Float.d.ts +1 -1
  194. package/css/docs/utilities/Float/examples/Float.js +1 -1
  195. package/css/docs/utilities/Float/examples/Float.mjs +1 -1
  196. package/css/docs/utilities/Spacing/examples/Spacing.css +2 -2
  197. package/css/docs/utilities/Spacing/examples/Spacing.d.ts +1 -1
  198. package/css/docs/utilities/Spacing/examples/Spacing.js +1 -1
  199. package/css/docs/utilities/Spacing/examples/Spacing.mjs +1 -1
  200. package/css/layouts/Gallery/gallery.css +6 -2
  201. package/css/layouts/_index.css +6 -2
  202. package/package.json +4 -4
@@ -36,14 +36,33 @@
36
36
  --pf-v6-c-toolbar--m-sticky--ZIndex: var(--pf-t--global--z-index--xs);
37
37
  --pf-v6-c-toolbar--m-sticky--PaddingBlockStart: var(--pf-t--global--spacer--md);
38
38
  --pf-v6-c-toolbar--m-sticky--PaddingBlockEnd: var(--pf-t--global--spacer--md);
39
- --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
40
- --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
39
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: 0;
40
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: 0;
41
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--sm--bottom);
42
+ --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
41
43
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
42
44
  --pf-v6-c-toolbar--m-sticky--BorderBlockEndColor: var(--pf-t--global--border--color--high-contrast);
45
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: 0;
46
+ --pf-v6-c-toolbar--m-sticky--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
47
+ --pf-v6-c-toolbar--m-sticky--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
48
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass: var(--pf-t--global--spacer--sm);
49
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass: var(--pf-t--global--spacer--sm);
50
+ --pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
51
+ --pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
52
+ }
53
+ :where(.pf-v6-theme-glass) .pf-v6-c-toolbar {
54
+ --pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth: 0;
55
+ --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow--glass);
56
+ --pf-v6-c-toolbar--m-sticky--BorderRadius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius--glass);
57
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineStart: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart--glass);
58
+ --pf-v6-c-toolbar--m-sticky--PaddingInlineEnd: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd--glass);
59
+ }
60
+ .pf-v6-c-toolbar {
61
+ --pf-v6-c-toolbar--m-vertical--Width: fit-content;
43
62
  --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
44
63
  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
45
64
  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
46
- --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
65
+ --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: -180deg;
47
66
  --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
48
67
  --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
49
68
  --pf-v6-c-toolbar__group--m-label-group--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
@@ -65,6 +84,66 @@
65
84
  .pf-v6-c-toolbar__item.pf-m-hidden {
66
85
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
67
86
  }
87
+ @media screen and (min-height: 0) {
88
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm-height,
89
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-sm-height,
90
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-sm-height {
91
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
92
+ }
93
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-sm-height,
94
+ .pf-v6-c-toolbar__group.pf-m-visible-on-sm-height,
95
+ .pf-v6-c-toolbar__item.pf-m-visible-on-sm-height {
96
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
97
+ }
98
+ }
99
+ @media screen and (min-height: 40rem) {
100
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-md-height,
101
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-md-height,
102
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-md-height {
103
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
104
+ }
105
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-md-height,
106
+ .pf-v6-c-toolbar__group.pf-m-visible-on-md-height,
107
+ .pf-v6-c-toolbar__item.pf-m-visible-on-md-height {
108
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
109
+ }
110
+ }
111
+ @media screen and (min-height: 48rem) {
112
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-lg-height,
113
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-lg-height,
114
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-lg-height {
115
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
116
+ }
117
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-lg-height,
118
+ .pf-v6-c-toolbar__group.pf-m-visible-on-lg-height,
119
+ .pf-v6-c-toolbar__item.pf-m-visible-on-lg-height {
120
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
121
+ }
122
+ }
123
+ @media screen and (min-height: 60rem) {
124
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-xl-height,
125
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-xl-height,
126
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-xl-height {
127
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
128
+ }
129
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-xl-height,
130
+ .pf-v6-c-toolbar__group.pf-m-visible-on-xl-height,
131
+ .pf-v6-c-toolbar__item.pf-m-visible-on-xl-height {
132
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
133
+ }
134
+ }
135
+ @media screen and (min-height: 80rem) {
136
+ .pf-v6-c-toolbar__content-section.pf-m-hidden-on-2xl-height,
137
+ .pf-v6-c-toolbar__group.pf-m-hidden-on-2xl-height,
138
+ .pf-v6-c-toolbar__item.pf-m-hidden-on-2xl-height {
139
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
140
+ }
141
+ .pf-v6-c-toolbar__content-section.pf-m-visible-on-2xl-height,
142
+ .pf-v6-c-toolbar__group.pf-m-visible-on-2xl-height,
143
+ .pf-v6-c-toolbar__item.pf-m-visible-on-2xl-height {
144
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
145
+ }
146
+ }
68
147
  @media screen and (min-width: 36rem) {
69
148
  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm,
70
149
  .pf-v6-c-toolbar__group.pf-m-hidden-on-sm,
@@ -136,13 +215,50 @@
136
215
  --pf-v6-hidden-visible--hidden--Display: none;
137
216
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
138
217
  display: var(--pf-v6-hidden-visible--Display);
139
- row-gap: var(--pf-v6-c-toolbar__content--RowGap);
140
- padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
141
- padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
142
218
  }
143
219
  .pf-v6-c-toolbar__content.pf-m-hidden {
144
220
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
145
221
  }
222
+ @media screen and (min-height: 0) {
223
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-sm-height {
224
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
225
+ }
226
+ .pf-v6-c-toolbar__content.pf-m-visible-on-sm-height {
227
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
228
+ }
229
+ }
230
+ @media screen and (min-height: 40rem) {
231
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-md-height {
232
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
233
+ }
234
+ .pf-v6-c-toolbar__content.pf-m-visible-on-md-height {
235
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
236
+ }
237
+ }
238
+ @media screen and (min-height: 48rem) {
239
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-lg-height {
240
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
241
+ }
242
+ .pf-v6-c-toolbar__content.pf-m-visible-on-lg-height {
243
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
244
+ }
245
+ }
246
+ @media screen and (min-height: 60rem) {
247
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-xl-height {
248
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
249
+ }
250
+ .pf-v6-c-toolbar__content.pf-m-visible-on-xl-height {
251
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
252
+ }
253
+ }
254
+ @media screen and (min-height: 80rem) {
255
+ .pf-v6-c-toolbar__content.pf-m-hidden-on-2xl-height {
256
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
257
+ }
258
+ .pf-v6-c-toolbar__content.pf-m-visible-on-2xl-height {
259
+ --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
260
+ }
261
+ }
146
262
  @media screen and (min-width: 36rem) {
147
263
  .pf-v6-c-toolbar__content.pf-m-hidden-on-sm {
148
264
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
@@ -183,6 +299,11 @@
183
299
  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
184
300
  }
185
301
  }
302
+ .pf-v6-c-toolbar__content {
303
+ row-gap: var(--pf-v6-c-toolbar__content--RowGap);
304
+ padding-inline-start: var(--pf-v6-c-toolbar__content--PaddingInlineStart);
305
+ padding-inline-end: var(--pf-v6-c-toolbar__content--PaddingInlineEnd);
306
+ }
186
307
 
187
308
  .pf-v6-c-toolbar__content-section {
188
309
  flex-wrap: wrap;
@@ -210,9 +331,41 @@
210
331
  z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
211
332
  padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
212
333
  padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
334
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
335
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
213
336
  border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
337
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
214
338
  box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
215
339
  }
340
+ .pf-v6-c-toolbar.pf-m-sticky-base {
341
+ --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-sticky--BackgroundColor);
342
+ position: sticky;
343
+ inset-block-start: 0;
344
+ z-index: var(--pf-v6-c-toolbar--m-sticky--ZIndex);
345
+ padding-block-start: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockStart);
346
+ padding-block-end: var(--pf-v6-c-toolbar--m-sticky--PaddingBlockEnd);
347
+ padding-inline-start: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineStart);
348
+ padding-inline-end: var(--pf-v6-c-toolbar--m-sticky--PaddingInlineEnd);
349
+ background: transparent;
350
+ border-radius: inherit;
351
+ }
352
+ .pf-v6-c-toolbar.pf-m-sticky-base::before {
353
+ position: absolute;
354
+ inset: 0;
355
+ z-index: -1;
356
+ content: "";
357
+ background: var(--pf-v6-c-toolbar--BackgroundColor);
358
+ border-block-end: var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndWidth) solid var(--pf-v6-c-toolbar--m-sticky--BorderBlockEndColor);
359
+ border-radius: var(--pf-v6-c-toolbar--m-sticky--BorderRadius);
360
+ box-shadow: var(--pf-v6-c-toolbar--m-sticky--BoxShadow);
361
+ opacity: 0;
362
+ transition-timing-function: var(--pf-v6-c-toolbar--m-sticky--TransitionTimingFunction--BackgroundColor);
363
+ transition-duration: var(--pf-v6-c-toolbar--m-sticky--TransitionDuration--BackgroundColor);
364
+ transition-property: opacity;
365
+ }
366
+ .pf-v6-c-toolbar.pf-m-sticky-stuck::before {
367
+ opacity: 1;
368
+ }
216
369
  .pf-v6-c-toolbar.pf-m-static,
217
370
  .pf-v6-c-toolbar.pf-m-static .pf-v6-c-toolbar__content {
218
371
  position: static;
@@ -243,14 +396,19 @@
243
396
  .pf-v6-c-toolbar.pf-m-no-background {
244
397
  --pf-v6-c-toolbar--BackgroundColor: var(--pf-v6-c-toolbar--m-no-background--BackgroundColor);
245
398
  }
399
+ .pf-v6-c-toolbar.pf-m-vertical {
400
+ --pf-v6-c-toolbar--child--m-align-end--MarginBlockStart: auto;
401
+ --pf-v6-c-toolbar--child--m-align-end--MarginInlineStart: 0;
402
+ --pf-v6-c-toolbar--PaddingBlockEnd: 0;
403
+ --pf-v6-c-toolbar--Width: var(--pf-v6-c-toolbar--m-vertical--Width);
404
+ }
405
+ .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item, .pf-v6-c-toolbar__content-section) {
406
+ flex-direction: column;
407
+ align-items: center;
408
+ }
246
409
 
247
410
  .pf-v6-c-toolbar__item {
248
411
  --pf-v6-c-toolbar__item--Width--base: var(--pf-v6-c-toolbar__item--Width);
249
- --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
250
- row-gap: var(--pf-v6-c-toolbar__item--RowGap);
251
- column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
252
- width: var(--pf-v6-c-toolbar__item--Width--base);
253
- min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
254
412
  }
255
413
  @media (min-width: 36rem) {
256
414
  .pf-v6-c-toolbar__item {
@@ -277,6 +435,9 @@
277
435
  --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))))));
278
436
  }
279
437
  }
438
+ .pf-v6-c-toolbar__item {
439
+ --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth);
440
+ }
280
441
  @media (min-width: 36rem) {
281
442
  .pf-v6-c-toolbar__item {
282
443
  --pf-v6-c-toolbar__item--MinWidth--base: var(--pf-v6-c-toolbar__item--MinWidth-on-sm, var(--pf-v6-c-toolbar__item--MinWidth));
@@ -302,6 +463,12 @@
302
463
  --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))))));
303
464
  }
304
465
  }
466
+ .pf-v6-c-toolbar__item {
467
+ row-gap: var(--pf-v6-c-toolbar__item--RowGap);
468
+ column-gap: var(--pf-v6-c-toolbar__item--ColumnGap);
469
+ width: var(--pf-v6-c-toolbar__item--Width--base);
470
+ min-width: var(--pf-v6-c-toolbar__item--MinWidth--base);
471
+ }
305
472
  .pf-v6-c-toolbar__item.pf-m-expand-all.pf-m-expanded {
306
473
  --pf-v6-c-toolbar__expand-all-icon--Rotate: var(--pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate);
307
474
  }
@@ -322,6 +489,9 @@
322
489
  row-gap: var(--pf-v6-c-toolbar__group--RowGap);
323
490
  column-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
324
491
  }
492
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group {
493
+ row-gap: var(--pf-v6-c-toolbar__group--ColumnGap);
494
+ }
325
495
  .pf-v6-c-toolbar__group.pf-m-filter-group {
326
496
  column-gap: var(--pf-v6-c-toolbar__group--m-filter-group--ColumnGap);
327
497
  }
@@ -333,9 +503,15 @@
333
503
  .pf-v6-c-toolbar__group.pf-m-action-group {
334
504
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
335
505
  }
506
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group {
507
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group--ColumnGap);
508
+ }
336
509
  .pf-v6-c-toolbar__group.pf-m-action-group-plain {
337
510
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
338
511
  }
512
+ .pf-v6-c-toolbar.pf-m-vertical .pf-v6-c-toolbar__group.pf-m-action-group-plain {
513
+ row-gap: var(--pf-v6-c-toolbar__group--m-action-group-plain--ColumnGap);
514
+ }
339
515
  .pf-v6-c-toolbar__group.pf-m-action-group-inline {
340
516
  flex-wrap: wrap;
341
517
  column-gap: var(--pf-v6-c-toolbar__group--m-action-group-inline--ColumnGap);
@@ -412,7 +588,8 @@
412
588
  }
413
589
  .pf-v6-c-toolbar__group.pf-m-align-end,
414
590
  .pf-v6-c-toolbar__item.pf-m-align-end {
415
- margin-inline-start: auto;
591
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
592
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
416
593
  }
417
594
  .pf-v6-c-toolbar__group.pf-m-flex-grow,
418
595
  .pf-v6-c-toolbar__item.pf-m-flex-grow {
@@ -667,7 +844,8 @@
667
844
  }
668
845
  .pf-v6-c-toolbar__group.pf-m-align-end-on-sm,
669
846
  .pf-v6-c-toolbar__item.pf-m-align-end-on-sm {
670
- margin-inline-start: auto;
847
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
848
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
671
849
  }
672
850
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-sm,
673
851
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-sm {
@@ -919,7 +1097,8 @@
919
1097
  }
920
1098
  .pf-v6-c-toolbar__group.pf-m-align-end-on-md,
921
1099
  .pf-v6-c-toolbar__item.pf-m-align-end-on-md {
922
- margin-inline-start: auto;
1100
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
1101
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
923
1102
  }
924
1103
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-md,
925
1104
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-md {
@@ -1171,7 +1350,8 @@
1171
1350
  }
1172
1351
  .pf-v6-c-toolbar__group.pf-m-align-end-on-lg,
1173
1352
  .pf-v6-c-toolbar__item.pf-m-align-end-on-lg {
1174
- margin-inline-start: auto;
1353
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
1354
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
1175
1355
  }
1176
1356
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-lg,
1177
1357
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-lg {
@@ -1423,7 +1603,8 @@
1423
1603
  }
1424
1604
  .pf-v6-c-toolbar__group.pf-m-align-end-on-xl,
1425
1605
  .pf-v6-c-toolbar__item.pf-m-align-end-on-xl {
1426
- margin-inline-start: auto;
1606
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
1607
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
1427
1608
  }
1428
1609
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-xl,
1429
1610
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-xl {
@@ -1675,7 +1856,8 @@
1675
1856
  }
1676
1857
  .pf-v6-c-toolbar__group.pf-m-align-end-on-2xl,
1677
1858
  .pf-v6-c-toolbar__item.pf-m-align-end-on-2xl {
1678
- margin-inline-start: auto;
1859
+ margin-block-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginBlockStart, 0);
1860
+ margin-inline-start: var(--pf-v6-c-toolbar--child--m-align-end--MarginInlineStart, auto);
1679
1861
  }
1680
1862
  .pf-v6-c-toolbar__group.pf-m-flex-grow-on-2xl,
1681
1863
  .pf-v6-c-toolbar__item.pf-m-flex-grow-on-2xl {
@@ -3,6 +3,16 @@ declare const _default: {
3
3
  "dirRtl": "pf-v6-m-dir-rtl",
4
4
  "modifiers": {
5
5
  "hidden": "pf-m-hidden",
6
+ "hiddenOnSmHeight": "pf-m-hidden-on-sm-height",
7
+ "visibleOnSmHeight": "pf-m-visible-on-sm-height",
8
+ "hiddenOnMdHeight": "pf-m-hidden-on-md-height",
9
+ "visibleOnMdHeight": "pf-m-visible-on-md-height",
10
+ "hiddenOnLgHeight": "pf-m-hidden-on-lg-height",
11
+ "visibleOnLgHeight": "pf-m-visible-on-lg-height",
12
+ "hiddenOnXlHeight": "pf-m-hidden-on-xl-height",
13
+ "visibleOnXlHeight": "pf-m-visible-on-xl-height",
14
+ "hiddenOn_2xlHeight": "pf-m-hidden-on-2xl-height",
15
+ "visibleOn_2xlHeight": "pf-m-visible-on-2xl-height",
6
16
  "hiddenOnSm": "pf-m-hidden-on-sm",
7
17
  "visibleOnSm": "pf-m-visible-on-sm",
8
18
  "hiddenOnMd": "pf-m-hidden-on-md",
@@ -14,12 +24,15 @@ declare const _default: {
14
24
  "hiddenOn_2xl": "pf-m-hidden-on-2xl",
15
25
  "visibleOn_2xl": "pf-m-visible-on-2xl",
16
26
  "sticky": "pf-m-sticky",
27
+ "stickyBase": "pf-m-sticky-base",
28
+ "stickyStuck": "pf-m-sticky-stuck",
17
29
  "static": "pf-m-static",
18
30
  "fullHeight": "pf-m-full-height",
19
31
  "noPadding": "pf-m-no-padding",
20
32
  "primary": "pf-m-primary",
21
33
  "secondary": "pf-m-secondary",
22
34
  "noBackground": "pf-m-no-background",
35
+ "vertical": "pf-m-vertical",
23
36
  "expandAll": "pf-m-expand-all",
24
37
  "expanded": "pf-m-expanded",
25
38
  "label": "pf-m-label",
@@ -357,6 +370,7 @@ declare const _default: {
357
370
  "hideOn_2xl": "pf-m-hide-on-2xl"
358
371
  },
359
372
  "pagination": "pf-v6-c-pagination",
373
+ "themeGlass": "pf-v6-theme-glass",
360
374
  "toolbar": "pf-v6-c-toolbar",
361
375
  "toolbarContent": "pf-v6-c-toolbar__content",
362
376
  "toolbarContentSection": "pf-v6-c-toolbar__content-section",
@@ -5,6 +5,16 @@ exports.default = {
5
5
  "dirRtl": "pf-v6-m-dir-rtl",
6
6
  "modifiers": {
7
7
  "hidden": "pf-m-hidden",
8
+ "hiddenOnSmHeight": "pf-m-hidden-on-sm-height",
9
+ "visibleOnSmHeight": "pf-m-visible-on-sm-height",
10
+ "hiddenOnMdHeight": "pf-m-hidden-on-md-height",
11
+ "visibleOnMdHeight": "pf-m-visible-on-md-height",
12
+ "hiddenOnLgHeight": "pf-m-hidden-on-lg-height",
13
+ "visibleOnLgHeight": "pf-m-visible-on-lg-height",
14
+ "hiddenOnXlHeight": "pf-m-hidden-on-xl-height",
15
+ "visibleOnXlHeight": "pf-m-visible-on-xl-height",
16
+ "hiddenOn_2xlHeight": "pf-m-hidden-on-2xl-height",
17
+ "visibleOn_2xlHeight": "pf-m-visible-on-2xl-height",
8
18
  "hiddenOnSm": "pf-m-hidden-on-sm",
9
19
  "visibleOnSm": "pf-m-visible-on-sm",
10
20
  "hiddenOnMd": "pf-m-hidden-on-md",
@@ -16,12 +26,15 @@ exports.default = {
16
26
  "hiddenOn_2xl": "pf-m-hidden-on-2xl",
17
27
  "visibleOn_2xl": "pf-m-visible-on-2xl",
18
28
  "sticky": "pf-m-sticky",
29
+ "stickyBase": "pf-m-sticky-base",
30
+ "stickyStuck": "pf-m-sticky-stuck",
19
31
  "static": "pf-m-static",
20
32
  "fullHeight": "pf-m-full-height",
21
33
  "noPadding": "pf-m-no-padding",
22
34
  "primary": "pf-m-primary",
23
35
  "secondary": "pf-m-secondary",
24
36
  "noBackground": "pf-m-no-background",
37
+ "vertical": "pf-m-vertical",
25
38
  "expandAll": "pf-m-expand-all",
26
39
  "expanded": "pf-m-expanded",
27
40
  "label": "pf-m-label",
@@ -359,6 +372,7 @@ exports.default = {
359
372
  "hideOn_2xl": "pf-m-hide-on-2xl"
360
373
  },
361
374
  "pagination": "pf-v6-c-pagination",
375
+ "themeGlass": "pf-v6-theme-glass",
362
376
  "toolbar": "pf-v6-c-toolbar",
363
377
  "toolbarContent": "pf-v6-c-toolbar__content",
364
378
  "toolbarContentSection": "pf-v6-c-toolbar__content-section",
@@ -3,6 +3,16 @@ export default {
3
3
  "dirRtl": "pf-v6-m-dir-rtl",
4
4
  "modifiers": {
5
5
  "hidden": "pf-m-hidden",
6
+ "hiddenOnSmHeight": "pf-m-hidden-on-sm-height",
7
+ "visibleOnSmHeight": "pf-m-visible-on-sm-height",
8
+ "hiddenOnMdHeight": "pf-m-hidden-on-md-height",
9
+ "visibleOnMdHeight": "pf-m-visible-on-md-height",
10
+ "hiddenOnLgHeight": "pf-m-hidden-on-lg-height",
11
+ "visibleOnLgHeight": "pf-m-visible-on-lg-height",
12
+ "hiddenOnXlHeight": "pf-m-hidden-on-xl-height",
13
+ "visibleOnXlHeight": "pf-m-visible-on-xl-height",
14
+ "hiddenOn_2xlHeight": "pf-m-hidden-on-2xl-height",
15
+ "visibleOn_2xlHeight": "pf-m-visible-on-2xl-height",
6
16
  "hiddenOnSm": "pf-m-hidden-on-sm",
7
17
  "visibleOnSm": "pf-m-visible-on-sm",
8
18
  "hiddenOnMd": "pf-m-hidden-on-md",
@@ -14,12 +24,15 @@ export default {
14
24
  "hiddenOn_2xl": "pf-m-hidden-on-2xl",
15
25
  "visibleOn_2xl": "pf-m-visible-on-2xl",
16
26
  "sticky": "pf-m-sticky",
27
+ "stickyBase": "pf-m-sticky-base",
28
+ "stickyStuck": "pf-m-sticky-stuck",
17
29
  "static": "pf-m-static",
18
30
  "fullHeight": "pf-m-full-height",
19
31
  "noPadding": "pf-m-no-padding",
20
32
  "primary": "pf-m-primary",
21
33
  "secondary": "pf-m-secondary",
22
34
  "noBackground": "pf-m-no-background",
35
+ "vertical": "pf-m-vertical",
23
36
  "expandAll": "pf-m-expand-all",
24
37
  "expanded": "pf-m-expanded",
25
38
  "label": "pf-m-label",
@@ -357,6 +370,7 @@ export default {
357
370
  "hideOn_2xl": "pf-m-hide-on-2xl"
358
371
  },
359
372
  "pagination": "pf-v6-c-pagination",
373
+ "themeGlass": "pf-v6-theme-glass",
360
374
  "toolbar": "pf-v6-c-toolbar",
361
375
  "toolbarContent": "pf-v6-c-toolbar__content",
362
376
  "toolbarContentSection": "pf-v6-c-toolbar__content-section",
@@ -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%;
@@ -57,7 +66,10 @@
57
66
  --pf-v6-c-tree-view__node-icon--Color: var(--pf-t--global--icon--color--subtle);
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
- --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
+ --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",