@patternfly/react-styles 6.5.0-prerelease.9 → 6.5.1-prerelease.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 (150) hide show
  1. package/CHANGELOG.md +124 -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 +211 -100
  43. package/css/components/Compass/compass.d.ts +17 -10
  44. package/css/components/Compass/compass.js +17 -10
  45. package/css/components/Compass/compass.mjs +17 -10
  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 +167 -57
  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 +18 -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 +69 -26
  69. package/css/components/Masthead/masthead.d.ts +5 -0
  70. package/css/components/Masthead/masthead.js +5 -0
  71. package/css/components/Masthead/masthead.mjs +5 -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 +32 -20
  79. package/css/components/Nav/nav.d.ts +4 -1
  80. package/css/components/Nav/nav.js +4 -1
  81. package/css/components/Nav/nav.mjs +4 -1
  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 +409 -38
  88. package/css/components/Page/page.d.ts +17 -2
  89. package/css/components/Page/page.js +17 -2
  90. package/css/components/Page/page.mjs +17 -2
  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 +167 -11
  121. package/css/components/Toolbar/toolbar.d.ts +13 -0
  122. package/css/components/Toolbar/toolbar.js +13 -0
  123. package/css/components/Toolbar/toolbar.mjs +13 -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 +2191 -858
  133. package/css/components/_index.d.ts +34 -10
  134. package/css/components/_index.js +34 -10
  135. package/css/components/_index.mjs +34 -10
  136. package/css/docs/components/Compass/examples/Compass.css +4 -13
  137. package/css/docs/components/Compass/examples/Compass.d.ts +1 -1
  138. package/css/docs/components/Compass/examples/Compass.js +1 -1
  139. package/css/docs/components/Compass/examples/Compass.mjs +1 -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/layouts/Gallery/gallery.css +6 -2
  149. package/css/layouts/_index.css +6 -2
  150. package/package.json +4 -4
@@ -1,5 +1,5 @@
1
1
  .pf-v6-c-drawer {
2
- --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
2
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: 0;
3
3
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-t--global--background--color--primary--default);
4
4
  --pf-v6-c-drawer__section--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
5
5
  --pf-v6-c-drawer__content--FlexBasis: 100%;
@@ -16,8 +16,8 @@
16
16
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer__panel--after--Width);
17
17
  --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
18
18
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
19
- --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
20
- --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
19
+ --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--floating--default);
20
+ --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
21
21
  --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
22
22
  --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
23
23
  --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -35,6 +35,7 @@
35
35
  --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
36
36
  --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
37
37
  --pf-v6-c-drawer__panel--md--FlexBasis--max: 100%;
38
+ --pf-v6-c-drawer__panel--m-inline--md--BackgroundColor: var(--pf-t--global--background--color--primary--default);
38
39
  --pf-v6-c-drawer__panel--xl--MinWidth: 28.125rem;
39
40
  --pf-v6-c-drawer__panel--xl--FlexBasis: 28.125rem;
40
41
  --pf-v6-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
@@ -50,12 +51,26 @@
50
51
  --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
51
52
  --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
52
53
  --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
53
- --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
54
+ --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--subtle);
54
55
  --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
55
56
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
56
- --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--default);
57
- --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
58
- --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
57
+ --pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
58
+ --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
59
+ --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
60
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
61
+ }
62
+ @media screen and (prefers-reduced-motion: no-preference) {
63
+ .pf-v6-c-drawer {
64
+ --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
65
+ --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
66
+ --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
67
+ --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
68
+ --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
69
+ --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
70
+ --pf-v6-c-drawer__panel--Opacity: 1;
71
+ }
72
+ }
73
+ .pf-v6-c-drawer {
59
74
  --pf-v6-c-drawer__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
60
75
  --pf-v6-c-drawer__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
61
76
  --pf-v6-c-drawer__head--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -79,45 +94,96 @@
79
94
  --pf-v6-c-drawer__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
80
95
  --pf-v6-c-drawer__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
81
96
  --pf-v6-c-drawer__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
82
- --pf-v6-c-drawer__splitter--Height: 0.5625rem;
97
+ --pf-v6-c-drawer__splitter--Height: 0.75rem;
83
98
  --pf-v6-c-drawer__splitter--Width: 100%;
84
- --pf-v6-c-drawer__splitter--BackgroundColor: var(--pf-t--global--background--color--primary--default);
99
+ --pf-v6-c-drawer__splitter--BackgroundColor: transparent;
85
100
  --pf-v6-c-drawer__splitter--Cursor: row-resize;
86
101
  --pf-v6-c-drawer__splitter--m-vertical--Height: 100%;
87
- --pf-v6-c-drawer__splitter--m-vertical--Width: 0.5625rem;
102
+ --pf-v6-c-drawer__splitter--m-vertical--Width: 0.75rem;
88
103
  --pf-v6-c-drawer__splitter--m-vertical--Cursor: col-resize;
104
+ --pf-v6-c-drawer__splitter--focus--OutlineOffset: -0.0625rem;
89
105
  --pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
90
106
  --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
107
+ --pf-v6-c-drawer__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--default);
108
+ --pf-v6-c-drawer__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--default);
109
+ --pf-v6-c-drawer__splitter--active--after--BorderColor: var(--pf-t--global--border--color--default);
91
110
  --pf-v6-c-drawer__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
92
111
  --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: 0;
93
112
  --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
94
113
  --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: 0;
95
114
  --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
115
+ --pf-v6-c-drawer__splitter--after--InsetBlockStart: 0;
116
+ --pf-v6-c-drawer__splitter--after--InsetBlockEnd: 0;
117
+ --pf-v6-c-drawer__splitter--after--InsetInlineStart: 0;
118
+ --pf-v6-c-drawer__splitter--after--InsetInlineEnd: 0;
119
+ --pf-v6-c-drawer__splitter--after--Width: auto;
120
+ --pf-v6-c-drawer__splitter--after--Height: auto;
96
121
  --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
97
122
  --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
98
- --pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
123
+ --pf-v6-c-drawer--m-pill__splitter--m-vertical--Width: 0.625rem;
124
+ --pf-v6-c-drawer--m-pill__splitter--m-vertical--Height: calc(100% - (2 * var(--pf-v6-c-drawer--m-pill__panel--BorderRadius)));
125
+ --pf-v6-c-drawer--m-pill__splitter--m-vertical--MarginBlockStart: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
126
+ --pf-v6-c-drawer--m-pill__splitter--after--BorderColor: transparent;
127
+ --pf-v6-c-drawer--m-pill__splitter--after--BorderInlineEndWidth: 0;
128
+ --pf-v6-c-drawer--m-pill__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
129
+ --pf-v6-c-drawer--m-pill__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
130
+ --pf-v6-c-drawer--m-pill__splitter--active--after--BorderColor: var(--pf-t--global--border--color--clicked);
131
+ --pf-v6-c-drawer--m-pill__splitter--after--Width: 0.0625rem;
132
+ --pf-v6-c-drawer--m-pill__splitter--after--Height: auto;
133
+ --pf-v6-c-drawer--m-pill__splitter--after--InsetInlineStart: 50%;
134
+ --pf-v6-c-drawer--m-pill__splitter--after--InsetInlineEnd: auto;
135
+ --pf-v6-c-drawer--m-pill__splitter--after--TranslateX: -50%;
136
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Height: 0.5rem;
137
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Width: calc(100% - (2 * var(--pf-v6-c-drawer--m-pill__panel--BorderRadius)));
138
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--MarginInlineStart: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
139
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Width: auto;
140
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Height: 0.0625rem;
141
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
142
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth: 0;
143
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockStart: 50%;
144
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd: auto;
145
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineStart: 0;
146
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd: 0;
147
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--TranslateY: -50%;
148
+ --pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.75rem;
99
149
  --pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart: 50%;
100
- --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
150
+ --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.75rem;
101
151
  --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
102
152
  --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
103
153
  --pf-v6-c-drawer__splitter-handle--InsetBlockStart: 50%;
104
- --pf-v6-c-drawer__splitter-handle--InsetInlineStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
154
+ --pf-v6-c-drawer__splitter-handle--InsetInlineStart: 50%;
105
155
  --pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart: 50%;
106
- --pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
107
- --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--default);
156
+ --pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
157
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-t--global--border--color--control--default);
158
+ --pf-v6-c-drawer__splitter-handle--hover--after--BackgroundColor: var(--pf-t--global--border--color--hover);
159
+ --pf-v6-c-drawer__splitter-handle--focus--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
160
+ --pf-v6-c-drawer__splitter-handle--active--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
161
+ --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
108
162
  --pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
109
163
  --pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: 0;
110
164
  --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
111
165
  --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: 0;
112
- --pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--hover);
166
+ --pf-v6-c-drawer__splitter-handle--after--BorderRadius: var(--pf-t--global--border--radius--pill);
167
+ --pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--color--brand--hover);
113
168
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth: 0;
114
169
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
115
170
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth: 0;
116
171
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
117
- --pf-v6-c-drawer__splitter-handle--after--Width: 0.75rem;
172
+ --pf-v6-c-drawer__splitter-handle--after--Width: 2.1875rem;
118
173
  --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
119
174
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
120
- --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
175
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 2.1875rem;
176
+ }
177
+ @media screen and (min-width: 75rem) {
178
+ .pf-v6-c-drawer {
179
+ --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
180
+ }
181
+ .pf-v6-c-drawer.pf-m-panel-bottom {
182
+ --pf-v6-c-drawer__panel--MinWidth: auto;
183
+ --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
184
+ }
185
+ }
186
+ .pf-v6-c-drawer {
121
187
  --pf-v6-c-drawer__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--compact) * -1.5);
122
188
  --pf-v6-c-drawer__actions--MarginInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--compact) * -1.5);
123
189
  --pf-v6-c-drawer__panel--BoxShadow: none;
@@ -132,43 +198,27 @@
132
198
  --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: 0;
133
199
  --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: 0;
134
200
  }
135
- @media screen and (prefers-reduced-motion: no-preference) {
136
- .pf-v6-c-drawer {
137
- --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
138
- --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
139
- --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
140
- --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
141
- --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
142
- --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
143
- --pf-v6-c-drawer__panel--Opacity: 1;
144
- }
145
- }
146
- @media screen and (min-width: 75rem) {
147
- .pf-v6-c-drawer {
148
- --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
149
- }
150
- .pf-v6-c-drawer.pf-m-panel-bottom {
151
- --pf-v6-c-drawer__panel--MinWidth: auto;
152
- --pf-v6-c-drawer__panel--MinHeight: var(--pf-v6-c-drawer--m-panel-bottom__panel--xl--MinHeight);
153
- }
154
- }
155
201
 
156
202
  .pf-v6-c-drawer {
157
203
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
158
- --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
159
- display: flex;
160
- flex-direction: column;
161
- height: 100%;
162
- overflow-x: hidden;
163
204
  }
164
205
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
165
206
  --pf-v6-c-drawer--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
166
207
  }
167
208
 
209
+ .pf-v6-c-drawer {
210
+ --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--right);
211
+ }
168
212
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer {
169
213
  --pf-v6-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(--pf-t--global--box-shadow--md--left);
170
214
  }
171
215
 
216
+ .pf-v6-c-drawer {
217
+ display: flex;
218
+ flex-direction: column;
219
+ height: 100%;
220
+ overflow-x: hidden;
221
+ }
172
222
  .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
173
223
  --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
174
224
  --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
@@ -194,17 +244,20 @@
194
244
  flex-direction: column;
195
245
  }
196
246
  .pf-v6-c-drawer.pf-m-expanded {
247
+ --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
197
248
  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
198
249
  }
199
250
  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
200
251
  transform: translateX(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)));
201
- --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
202
- visibility: visible;
203
252
  }
204
253
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
205
254
  transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
206
255
  }
207
256
 
257
+ .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
258
+ --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
259
+ visibility: visible;
260
+ }
208
261
  .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
209
262
  transform: translateX(0);
210
263
  }
@@ -225,17 +278,45 @@
225
278
  --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
226
279
  --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
227
280
  --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
281
+ --pf-v6-c-drawer__splitter--m-vertical--Width: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--Width);
282
+ --pf-v6-c-drawer__splitter--m-vertical--Height: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--Height);
283
+ --pf-v6-c-drawer__splitter--MarginBlockStart: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--MarginBlockStart);
284
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--after--BorderColor);
285
+ --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer--m-pill__splitter--after--BorderInlineEndWidth);
286
+ --pf-v6-c-drawer__splitter--hover--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--hover--after--BorderColor);
287
+ --pf-v6-c-drawer__splitter--focus--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--focus--after--BorderColor);
288
+ --pf-v6-c-drawer__splitter--active--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--active--after--BorderColor);
289
+ --pf-v6-c-drawer__splitter--after--Width: var(--pf-v6-c-drawer--m-pill__splitter--after--Width);
290
+ --pf-v6-c-drawer__splitter--after--Height: var(--pf-v6-c-drawer--m-pill__splitter--after--Height);
291
+ --pf-v6-c-drawer__splitter--after--InsetInlineStart: var(--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineStart);
292
+ --pf-v6-c-drawer__splitter--after--InsetInlineEnd: var(--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineEnd);
293
+ --pf-v6-c-drawer__splitter--after--TranslateX: var(--pf-v6-c-drawer--m-pill__splitter--after--TranslateX);
228
294
  }
229
295
  .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
230
296
  border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
231
297
  border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
232
298
  border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
233
299
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
300
+ box-shadow: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow);
234
301
  }
235
- .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
236
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
237
- --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
238
- backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
302
+ }
303
+ @media screen and (min-width: 48rem) {
304
+ .pf-v6-c-drawer.pf-m-pill.pf-m-panel-bottom {
305
+ --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Height);
306
+ --pf-v6-c-drawer__splitter--Width: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Width);
307
+ --pf-v6-c-drawer__splitter--MarginBlockStart: 0;
308
+ --pf-v6-c-drawer__splitter--MarginInlineStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--MarginInlineStart);
309
+ --pf-v6-c-drawer__splitter--after--Width: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Width);
310
+ --pf-v6-c-drawer__splitter--after--Height: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Height);
311
+ --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth);
312
+ --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
313
+ --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
314
+ --pf-v6-c-drawer__splitter--after--InsetBlockStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockStart);
315
+ --pf-v6-c-drawer__splitter--after--InsetBlockEnd: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd);
316
+ --pf-v6-c-drawer__splitter--after--TranslateX: initial;
317
+ --pf-v6-c-drawer__splitter--after--TranslateY: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--TranslateY);
318
+ --pf-v6-c-drawer__splitter--after--InsetInlineStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineStart);
319
+ --pf-v6-c-drawer__splitter--after--InsetInlineEnd: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd);
239
320
  }
240
321
  }
241
322
 
@@ -246,7 +327,7 @@
246
327
  .pf-v6-c-drawer__section.pf-m-secondary {
247
328
  --pf-v6-c-drawer__section--BackgroundColor: var(--pf-v6-c-drawer__section--m-secondary--BackgroundColor);
248
329
  }
249
- .pf-v6-c-drawer__section.pf-m-no-background {
330
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer__section.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer__section:not(.pf-m-no-plain-on-glass), .pf-v6-c-drawer__section.pf-m-no-background {
250
331
  --pf-v6-c-drawer__section--BackgroundColor: transparent;
251
332
  }
252
333
 
@@ -261,8 +342,8 @@
261
342
  .pf-v6-c-drawer__panel,
262
343
  .pf-v6-c-drawer__panel-main {
263
344
  display: flex;
264
- flex-direction: column;
265
345
  flex-shrink: 0;
346
+ flex-direction: column;
266
347
  overflow: auto;
267
348
  }
268
349
 
@@ -402,8 +483,11 @@
402
483
  display: none;
403
484
  width: var(--pf-v6-c-drawer__splitter--Width);
404
485
  height: var(--pf-v6-c-drawer__splitter--Height);
486
+ margin-block-start: var(--pf-v6-c-drawer__splitter--MarginBlockStart, 0);
487
+ margin-inline-start: var(--pf-v6-c-drawer__splitter--MarginInlineStart, 0);
405
488
  cursor: var(--pf-v6-c-drawer__splitter--Cursor);
406
489
  background-color: var(--pf-v6-c-drawer__splitter--BackgroundColor);
490
+ outline-offset: var(--pf-v6-c-drawer__splitter--focus--OutlineOffset);
407
491
  }
408
492
  .pf-v6-c-drawer__splitter.pf-m-vertical {
409
493
  --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer__splitter--m-vertical--Height);
@@ -416,21 +500,34 @@
416
500
  --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth);
417
501
  --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth);
418
502
  }
419
- .pf-v6-c-drawer__splitter:hover, .pf-v6-c-drawer__splitter:focus {
420
- --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
503
+ .pf-v6-c-drawer__splitter:hover {
504
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--hover--after--BackgroundColor);
505
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover--after--BorderColor);
506
+ }
507
+ .pf-v6-c-drawer__splitter:focus {
508
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--focus--after--BackgroundColor);
509
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--focus--after--BorderColor);
510
+ }
511
+ .pf-v6-c-drawer__splitter:active {
512
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--active--after--BackgroundColor);
513
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--active--after--BorderColor);
421
514
  }
422
515
  .pf-v6-c-drawer__splitter::after {
423
516
  position: absolute;
424
- inset-block-start: 0;
425
- inset-block-end: 0;
426
- inset-inline-start: 0;
427
- inset-inline-end: 0;
517
+ inset-block-start: var(--pf-v6-c-drawer__splitter--after--InsetBlockStart);
518
+ inset-block-end: var(--pf-v6-c-drawer__splitter--after--InsetBlockEnd);
519
+ inset-inline-start: var(--pf-v6-c-drawer__splitter--after--InsetInlineStart);
520
+ inset-inline-end: var(--pf-v6-c-drawer__splitter--after--InsetInlineEnd);
521
+ z-index: -1;
522
+ width: var(--pf-v6-c-drawer__splitter--after--Width);
523
+ height: var(--pf-v6-c-drawer__splitter--after--Height);
428
524
  content: "";
429
525
  border: solid var(--pf-v6-c-drawer__splitter--after--BorderColor);
430
526
  border-block-start-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth);
431
527
  border-block-end-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth);
432
528
  border-inline-start-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineStartWidth);
433
529
  border-inline-end-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth);
530
+ translate: var(--pf-v6-c-drawer__splitter--after--TranslateX, 0) var(--pf-v6-c-drawer__splitter--after--TranslateY, 0);
434
531
  }
435
532
 
436
533
  .pf-v6-c-drawer__splitter-handle {
@@ -448,12 +545,14 @@
448
545
  width: var(--pf-v6-c-drawer__splitter-handle--after--Width);
449
546
  height: var(--pf-v6-c-drawer__splitter-handle--after--Height);
450
547
  content: "";
548
+ background-color: var(--pf-v6-c-drawer__splitter-handle--after--BackgroundColor);
451
549
  border-color: var(--pf-v6-c-drawer__splitter-handle--after--BorderColor);
452
550
  border-style: solid;
453
551
  border-block-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth);
454
552
  border-block-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth);
455
553
  border-inline-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth);
456
554
  border-inline-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth);
555
+ border-radius: var(--pf-v6-c-drawer__splitter-handle--after--BorderRadius);
457
556
  }
458
557
 
459
558
  @media screen and (min-width: 48rem) {
@@ -461,6 +560,17 @@
461
560
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
462
561
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
463
562
  }
563
+ .pf-v6-c-drawer.pf-m-inline, .pf-v6-c-drawer.pf-m-static {
564
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--md--BackgroundColor);
565
+ }
566
+ :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass) {
567
+ --pf-v6-c-drawer__panel--BackgroundColor: transparent;
568
+ }
569
+ :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
570
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
571
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
572
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
573
+ }
464
574
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
465
575
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
466
576
  }
@@ -24,13 +24,15 @@ declare const _default: {
24
24
  "expanded": "pf-m-expanded",
25
25
  "resizing": "pf-m-resizing",
26
26
  "pill": "pf-m-pill",
27
- "noGlass": "pf-m-no-glass",
28
27
  "secondary": "pf-m-secondary",
28
+ "plain": "pf-m-plain",
29
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
29
30
  "noBackground": "pf-m-no-background",
30
31
  "primary": "pf-m-primary",
31
32
  "noPadding": "pf-m-no-padding",
32
33
  "padding": "pf-m-padding",
33
34
  "vertical": "pf-m-vertical",
35
+ "glass": "pf-m-glass",
34
36
  "width_25": "pf-m-width-25",
35
37
  "width_33": "pf-m-width-33",
36
38
  "width_50": "pf-m-width-50",
@@ -61,6 +63,7 @@ declare const _default: {
61
63
  "staticOnXl": "pf-m-static-on-xl",
62
64
  "inlineOn_2xl": "pf-m-inline-on-2xl",
63
65
  "staticOn_2xl": "pf-m-static-on-2xl"
64
- }
66
+ },
67
+ "themeGlass": "pf-v6-theme-glass"
65
68
  };
66
69
  export default _default;
@@ -26,13 +26,15 @@ exports.default = {
26
26
  "expanded": "pf-m-expanded",
27
27
  "resizing": "pf-m-resizing",
28
28
  "pill": "pf-m-pill",
29
- "noGlass": "pf-m-no-glass",
30
29
  "secondary": "pf-m-secondary",
30
+ "plain": "pf-m-plain",
31
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
31
32
  "noBackground": "pf-m-no-background",
32
33
  "primary": "pf-m-primary",
33
34
  "noPadding": "pf-m-no-padding",
34
35
  "padding": "pf-m-padding",
35
36
  "vertical": "pf-m-vertical",
37
+ "glass": "pf-m-glass",
36
38
  "width_25": "pf-m-width-25",
37
39
  "width_33": "pf-m-width-33",
38
40
  "width_50": "pf-m-width-50",
@@ -63,5 +65,6 @@ exports.default = {
63
65
  "staticOnXl": "pf-m-static-on-xl",
64
66
  "inlineOn_2xl": "pf-m-inline-on-2xl",
65
67
  "staticOn_2xl": "pf-m-static-on-2xl"
66
- }
68
+ },
69
+ "themeGlass": "pf-v6-theme-glass"
67
70
  };
@@ -24,13 +24,15 @@ export default {
24
24
  "expanded": "pf-m-expanded",
25
25
  "resizing": "pf-m-resizing",
26
26
  "pill": "pf-m-pill",
27
- "noGlass": "pf-m-no-glass",
28
27
  "secondary": "pf-m-secondary",
28
+ "plain": "pf-m-plain",
29
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
29
30
  "noBackground": "pf-m-no-background",
30
31
  "primary": "pf-m-primary",
31
32
  "noPadding": "pf-m-no-padding",
32
33
  "padding": "pf-m-padding",
33
34
  "vertical": "pf-m-vertical",
35
+ "glass": "pf-m-glass",
34
36
  "width_25": "pf-m-width-25",
35
37
  "width_33": "pf-m-width-33",
36
38
  "width_50": "pf-m-width-50",
@@ -61,5 +63,6 @@ export default {
61
63
  "staticOnXl": "pf-m-static-on-xl",
62
64
  "inlineOn_2xl": "pf-m-inline-on-2xl",
63
65
  "staticOn_2xl": "pf-m-static-on-2xl"
64
- }
66
+ },
67
+ "themeGlass": "pf-v6-theme-glass"
65
68
  };
@@ -32,6 +32,15 @@
32
32
  --pf-v6-c-dual-list-selector--m-expanded__list--Opacity: 1;
33
33
  --pf-v6-c-dual-list-selector__list--TranslateY: 0;
34
34
  --pf-v6-c-dual-list-selector--m-expanded__list--TranslateY: 0;
35
+ }
36
+ @media screen and (prefers-reduced-motion: no-preference) {
37
+ .pf-v6-c-dual-list-selector {
38
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
39
+ --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
40
+ --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
41
+ }
42
+ }
43
+ .pf-v6-c-dual-list-selector {
35
44
  --pf-v6-c-dual-list-selector__list-item-row--FontSize: var(--pf-t--global--font--size--sm);
36
45
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
37
46
  --pf-v6-c-dual-list-selector__list-item-row--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
@@ -67,19 +76,12 @@
67
76
  --pf-v6-c-dual-list-selector__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
68
77
  --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
69
78
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
70
- --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
79
+ --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
71
80
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
72
81
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
73
82
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
74
83
  --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
75
84
  }
76
- @media screen and (prefers-reduced-motion: no-preference) {
77
- .pf-v6-c-dual-list-selector {
78
- --pf-v6-c-dual-list-selector__list--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
79
- --pf-v6-c-dual-list-selector__list--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
80
- --pf-v6-c-dual-list-selector__list--TranslateY: -.5rem;
81
- }
82
- }
83
85
 
84
86
  .pf-v6-c-dual-list-selector {
85
87
  display: grid;
@@ -150,8 +152,6 @@
150
152
 
151
153
  .pf-v6-c-dual-list-selector__list {
152
154
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
153
- display: flex;
154
- flex-direction: column;
155
155
  }
156
156
  .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list {
157
157
  --pf-v6-c-dual-list-selector__item-toggle--MarginBlockStart: 0;
@@ -159,16 +159,22 @@
159
159
  }
160
160
  .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
161
161
  transform: translateX(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX));
162
- position: absolute;
163
- inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
164
162
  }
165
163
  :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
166
164
  transform: translateX(calc(var(--pf-v6-c-dual-list-selector__list__list__item-toggle--TranslateX) * var(--pf-v6-global--inverse--multiplier)));
167
165
  }
168
166
 
167
+ .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__list .pf-v6-c-dual-list-selector__item-toggle {
168
+ position: absolute;
169
+ inset-inline-start: var(--pf-v6-c-dual-list-selector__list__list__item-toggle--InsetInlineStart);
170
+ }
169
171
  .pf-v6-c-dual-list-selector__list.pf-m-drag-over {
170
172
  overflow-anchor: none;
171
173
  }
174
+ .pf-v6-c-dual-list-selector__list {
175
+ display: flex;
176
+ flex-direction: column;
177
+ }
172
178
 
173
179
  .pf-v6-c-dual-list-selector__list-item:focus-visible {
174
180
  --pf-v6-c-dual-list-selector__list-item-row--BackgroundColor: var(--pf-v6-c-dual-list-selector__list-item-row--hover--BackgroundColor);
@@ -7,8 +7,8 @@
7
7
  --pf-v6-c-expandable-section__toggle-icon--Transition: transform var(--pf-v6-c-expandable-section__toggle-icon--TransitionDuration) var(--pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction);
8
8
  --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
9
9
  --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
10
- --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
11
- --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
10
+ --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: -180deg;
11
+ --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: 180deg;
12
12
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
13
13
  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
14
14
  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
@@ -27,6 +27,17 @@
27
27
  --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: 0;
28
28
  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
29
29
  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
30
+ }
31
+ @media screen and (prefers-reduced-motion: no-preference) {
32
+ .pf-v6-c-expandable-section {
33
+ --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
34
+ --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
35
+ --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
36
+ --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
37
+ --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
38
+ }
39
+ }
40
+ .pf-v6-c-expandable-section {
30
41
  --pf-v6-c-expandable-section__content--MaxWidth: auto;
31
42
  --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
32
43
  --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -43,15 +54,6 @@
43
54
  --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
44
55
  --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
45
56
  }
46
- @media screen and (prefers-reduced-motion: no-preference) {
47
- .pf-v6-c-expandable-section {
48
- --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
49
- --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
50
- --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
51
- --pf-v6-c-expandable-section--m-expand-top__content--TranslateY: .5rem;
52
- --pf-v6-c-expandable-section--m-expand-bottom__content--TranslateY: -.5rem;
53
- }
54
- }
55
57
 
56
58
  .pf-v6-c-expandable-section {
57
59
  display: flex;
@@ -110,9 +112,13 @@
110
112
  }
111
113
  .pf-v6-c-expandable-section.pf-m-truncate:not(.pf-m-expanded) .pf-v6-c-expandable-section__content {
112
114
  display: -webkit-box;
115
+ overflow: hidden;
113
116
  -webkit-box-orient: vertical;
114
117
  -webkit-line-clamp: var(--pf-v6-c-expandable-section--m-truncate__content--LineClamp);
115
- overflow: hidden;
118
+ }
119
+
120
+ :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
121
+ scale: -1 1;
116
122
  }
117
123
 
118
124
  .pf-v6-c-expandable-section__toggle-icon {
@@ -122,10 +128,6 @@
122
128
  transition: var(--pf-v6-c-expandable-section__toggle-icon--Transition);
123
129
  transform: rotate(var(--pf-v6-c-expandable-section__toggle-icon--Rotate));
124
130
  }
125
- :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-expandable-section__toggle-icon {
126
- scale: -1 1;
127
- }
128
-
129
131
  .pf-v6-c-expandable-section__toggle-icon.pf-m-expand-top {
130
132
  --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate);
131
133
  }
@@ -60,7 +60,7 @@
60
60
  --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
61
61
  --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
62
62
  --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
63
- --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: 90deg;
63
+ --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: -180deg;
64
64
  --pf-v6-c-form__field-group-header--PaddingBlockStart: var(--pf-t--global--spacer--md);
65
65
  --pf-v6-c-form__field-group-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
66
66
  --pf-v6-c-form__field-group-header--GridColumn: 1 / 3;
@@ -499,8 +499,8 @@
499
499
 
500
500
  .pf-v6-c-form__field-group-header-main {
501
501
  display: flex;
502
- flex-direction: column;
503
502
  flex-grow: 1;
503
+ flex-direction: column;
504
504
  }
505
505
 
506
506
  .pf-v6-c-form__field-group-header-title {