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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/css/assets/images/compass--hero-bg.png +0 -0
  3. package/css/assets/images/compass--wallpaper-dark.jpg +0 -0
  4. package/css/assets/images/compass--wallpaper-light.jpg +0 -0
  5. package/css/assets/images/glass-brand-dark.jpg +0 -0
  6. package/css/assets/images/glass-brand-dark.png +0 -0
  7. package/css/assets/images/glass-brand-light.jpg +0 -0
  8. package/css/assets/images/glass-brand-light.png +0 -0
  9. package/css/components/Accordion/accordion.css +11 -1
  10. package/css/components/Accordion/accordion.d.ts +4 -1
  11. package/css/components/Accordion/accordion.js +4 -1
  12. package/css/components/Accordion/accordion.mjs +4 -1
  13. package/css/components/Alert/alert.css +2 -1
  14. package/css/components/Button/button.css +98 -19
  15. package/css/components/Button/button.d.ts +3 -0
  16. package/css/components/Button/button.js +3 -0
  17. package/css/components/Button/button.mjs +3 -0
  18. package/css/components/Card/card.css +34 -9
  19. package/css/components/Card/card.d.ts +1 -0
  20. package/css/components/Card/card.js +1 -0
  21. package/css/components/Card/card.mjs +1 -0
  22. package/css/components/ClipboardCopy/clipboard-copy.css +1 -1
  23. package/css/components/CodeEditor/code-editor.css +1 -1
  24. package/css/components/Compass/compass.css +6 -6
  25. package/css/components/DataList/data-list.css +2 -2
  26. package/css/components/DataList/data-list.d.ts +3 -1
  27. package/css/components/DataList/data-list.js +3 -1
  28. package/css/components/DataList/data-list.mjs +3 -1
  29. package/css/components/Drawer/drawer.css +117 -22
  30. package/css/components/Drawer/drawer.d.ts +5 -2
  31. package/css/components/Drawer/drawer.js +5 -2
  32. package/css/components/Drawer/drawer.mjs +5 -2
  33. package/css/components/DualListSelector/dual-list-selector.css +1 -1
  34. package/css/components/ExpandableSection/expandable-section.css +2 -2
  35. package/css/components/Form/form.css +1 -1
  36. package/css/components/JumpLinks/jump-links.css +12 -2
  37. package/css/components/Login/login.css +7 -3
  38. package/css/components/Masthead/masthead.css +49 -7
  39. package/css/components/Masthead/masthead.d.ts +4 -0
  40. package/css/components/Masthead/masthead.js +4 -0
  41. package/css/components/Masthead/masthead.mjs +4 -0
  42. package/css/components/MenuToggle/menu-toggle.css +25 -2
  43. package/css/components/MenuToggle/menu-toggle.d.ts +3 -0
  44. package/css/components/MenuToggle/menu-toggle.js +3 -0
  45. package/css/components/MenuToggle/menu-toggle.mjs +3 -0
  46. package/css/components/Nav/nav.css +19 -11
  47. package/css/components/Nav/nav.d.ts +3 -1
  48. package/css/components/Nav/nav.js +3 -1
  49. package/css/components/Nav/nav.mjs +3 -1
  50. package/css/components/NotificationDrawer/notification-drawer.css +11 -3
  51. package/css/components/Page/page.css +168 -6
  52. package/css/components/Page/page.d.ts +12 -1
  53. package/css/components/Page/page.js +12 -1
  54. package/css/components/Page/page.mjs +12 -1
  55. package/css/components/Panel/panel.css +14 -0
  56. package/css/components/Panel/panel.d.ts +2 -1
  57. package/css/components/Panel/panel.js +2 -1
  58. package/css/components/Panel/panel.mjs +2 -1
  59. package/css/components/Progress/progress.css +3 -1
  60. package/css/components/Table/table-grid.css +4 -4
  61. package/css/components/Table/table.css +14 -9
  62. package/css/components/Table/table.d.ts +4 -2
  63. package/css/components/Table/table.js +4 -2
  64. package/css/components/Table/table.mjs +4 -2
  65. package/css/components/Tabs/tabs.css +20 -19
  66. package/css/components/Tabs/tabs.d.ts +0 -1
  67. package/css/components/Tabs/tabs.js +0 -1
  68. package/css/components/Tabs/tabs.mjs +0 -1
  69. package/css/components/ToggleGroup/toggle-group.css +33 -16
  70. package/css/components/Toolbar/toolbar.css +1 -1
  71. package/css/components/TreeView/tree-view.css +1 -1
  72. package/css/components/Wizard/wizard.css +21 -3
  73. package/css/components/Wizard/wizard.d.ts +3 -0
  74. package/css/components/Wizard/wizard.js +3 -0
  75. package/css/components/Wizard/wizard.mjs +3 -0
  76. package/css/components/_index.css +678 -154
  77. package/css/components/_index.d.ts +6 -2
  78. package/css/components/_index.js +6 -2
  79. package/css/components/_index.mjs +6 -2
  80. package/css/docs/components/DragDrop/examples/DragDrop.css +1 -1
  81. package/package.json +3 -3
@@ -32,6 +32,7 @@ export default {
32
32
  "grid_2xl": "pf-m-grid-2xl",
33
33
  "compact": "pf-m-compact",
34
34
  "dragOver": "pf-m-drag-over",
35
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
35
36
  "plain": "pf-m-plain",
36
37
  "truncate": "pf-m-truncate",
37
38
  "breakWord": "pf-m-break-word",
@@ -53,5 +54,6 @@ export default {
53
54
  "hiddenOn_2xl": "pf-m-hidden-on-2xl",
54
55
  "visibleOn_2xl": "pf-m-visible-on-2xl",
55
56
  "noPadding": "pf-m-no-padding"
56
- }
57
+ },
58
+ "themeGlass": "pf-v6-theme-glass"
57
59
  };
@@ -55,7 +55,7 @@
55
55
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
56
56
  --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
57
57
  --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
58
- --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
58
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
59
59
  }
60
60
  @media screen and (prefers-reduced-motion: no-preference) {
61
61
  .pf-v6-c-drawer {
@@ -92,45 +92,85 @@
92
92
  --pf-v6-c-drawer__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
93
93
  --pf-v6-c-drawer__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
94
94
  --pf-v6-c-drawer__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);
95
- --pf-v6-c-drawer__splitter--Height: 0.5625rem;
95
+ --pf-v6-c-drawer__splitter--Height: 0.75rem;
96
96
  --pf-v6-c-drawer__splitter--Width: 100%;
97
- --pf-v6-c-drawer__splitter--BackgroundColor: var(--pf-t--global--background--color--primary--default);
97
+ --pf-v6-c-drawer__splitter--BackgroundColor: transparent;
98
98
  --pf-v6-c-drawer__splitter--Cursor: row-resize;
99
99
  --pf-v6-c-drawer__splitter--m-vertical--Height: 100%;
100
- --pf-v6-c-drawer__splitter--m-vertical--Width: 0.5625rem;
100
+ --pf-v6-c-drawer__splitter--m-vertical--Width: 0.75rem;
101
101
  --pf-v6-c-drawer__splitter--m-vertical--Cursor: col-resize;
102
+ --pf-v6-c-drawer__splitter--focus--OutlineOffset: -0.0625rem;
102
103
  --pf-v6-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
103
104
  --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-t--global--border--color--default);
105
+ --pf-v6-c-drawer__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--default);
106
+ --pf-v6-c-drawer__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--default);
107
+ --pf-v6-c-drawer__splitter--active--after--BorderColor: var(--pf-t--global--border--color--default);
104
108
  --pf-v6-c-drawer__splitter--after--border-width--base: var(--pf-t--global--border--width--divider--default);
105
109
  --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: 0;
106
110
  --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
107
111
  --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: 0;
108
112
  --pf-v6-c-drawer__splitter--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
113
+ --pf-v6-c-drawer__splitter--after--InsetBlockStart: 0;
114
+ --pf-v6-c-drawer__splitter--after--InsetBlockEnd: 0;
115
+ --pf-v6-c-drawer__splitter--after--InsetInlineStart: 0;
116
+ --pf-v6-c-drawer__splitter--after--InsetInlineEnd: 0;
117
+ --pf-v6-c-drawer__splitter--after--Width: auto;
118
+ --pf-v6-c-drawer__splitter--after--Height: auto;
109
119
  --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
110
120
  --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
111
- --pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
121
+ --pf-v6-c-drawer--m-pill__splitter--m-vertical--Width: 0.625rem;
122
+ --pf-v6-c-drawer--m-pill__splitter--m-vertical--Height: calc(100% - (2 * var(--pf-v6-c-drawer--m-pill__panel--BorderRadius)));
123
+ --pf-v6-c-drawer--m-pill__splitter--m-vertical--MarginBlockStart: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
124
+ --pf-v6-c-drawer--m-pill__splitter--after--BorderColor: transparent;
125
+ --pf-v6-c-drawer--m-pill__splitter--after--BorderInlineEndWidth: 0;
126
+ --pf-v6-c-drawer--m-pill__splitter--hover--after--BorderColor: var(--pf-t--global--border--color--hover);
127
+ --pf-v6-c-drawer--m-pill__splitter--focus--after--BorderColor: var(--pf-t--global--border--color--clicked);
128
+ --pf-v6-c-drawer--m-pill__splitter--active--after--BorderColor: var(--pf-t--global--border--color--clicked);
129
+ --pf-v6-c-drawer--m-pill__splitter--after--Width: 0.0625rem;
130
+ --pf-v6-c-drawer--m-pill__splitter--after--Height: auto;
131
+ --pf-v6-c-drawer--m-pill__splitter--after--InsetInlineStart: 50%;
132
+ --pf-v6-c-drawer--m-pill__splitter--after--InsetInlineEnd: auto;
133
+ --pf-v6-c-drawer--m-pill__splitter--after--TranslateX: -50%;
134
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Height: 0.5rem;
135
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Width: calc(100% - (2 * var(--pf-v6-c-drawer--m-pill__panel--BorderRadius)));
136
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--MarginInlineStart: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
137
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Width: auto;
138
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Height: 0.0625rem;
139
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
140
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth: 0;
141
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockStart: 50%;
142
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd: auto;
143
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineStart: 0;
144
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd: 0;
145
+ --pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--TranslateY: -50%;
146
+ --pf-v6-c-drawer--m-inline__splitter--m-vertical--Width: 0.75rem;
112
147
  --pf-v6-c-drawer--m-inline__splitter-handle--InsetInlineStart: 50%;
113
- --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
148
+ --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.75rem;
114
149
  --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
115
150
  --pf-v6-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer__splitter--after--border-width--base);
116
151
  --pf-v6-c-drawer__splitter-handle--InsetBlockStart: 50%;
117
- --pf-v6-c-drawer__splitter-handle--InsetInlineStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
152
+ --pf-v6-c-drawer__splitter-handle--InsetInlineStart: 50%;
118
153
  --pf-v6-c-drawer--m-panel-left__splitter-handle--InsetInlineStart: 50%;
119
- --pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: calc(50% - var(--pf-v6-c-drawer__splitter--after--border-width--base));
120
- --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--default);
154
+ --pf-v6-c-drawer--m-panel-bottom__splitter-handle--InsetBlockStart: 50%;
155
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-t--global--border--color--control--default);
156
+ --pf-v6-c-drawer__splitter-handle--hover--after--BackgroundColor: var(--pf-t--global--border--color--hover);
157
+ --pf-v6-c-drawer__splitter-handle--focus--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
158
+ --pf-v6-c-drawer__splitter-handle--active--after--BackgroundColor: var(--pf-t--global--border--color--clicked);
159
+ --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--high-contrast);
121
160
  --pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth: var(--pf-t--global--border--width--divider--default);
122
161
  --pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth: 0;
123
162
  --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
124
163
  --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: 0;
125
- --pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--border--color--hover);
164
+ --pf-v6-c-drawer__splitter-handle--after--BorderRadius: var(--pf-t--global--border--radius--pill);
165
+ --pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(--pf-t--global--color--brand--hover);
126
166
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockStartWidth: 0;
127
167
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineEndWidth: var(--pf-t--global--border--width--divider--default);
128
168
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth: 0;
129
169
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth: var(--pf-t--global--border--width--divider--default);
130
- --pf-v6-c-drawer__splitter-handle--after--Width: 0.75rem;
170
+ --pf-v6-c-drawer__splitter-handle--after--Width: 2.1875rem;
131
171
  --pf-v6-c-drawer__splitter-handle--after--Height: 0.25rem;
132
172
  --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
133
- --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
173
+ --pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 2.1875rem;
134
174
  }
135
175
  @media screen and (min-width: 75rem) {
136
176
  .pf-v6-c-drawer {
@@ -186,6 +226,13 @@
186
226
  .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
187
227
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
188
228
  }
229
+ .pf-v6-c-drawer.pf-m-inline.pf-m-glass, .pf-v6-c-drawer.pf-m-static.pf-m-glass {
230
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
231
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
232
+ }
233
+ .pf-v6-c-drawer.pf-m-inline.pf-m-glass > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-glass > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
234
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
235
+ }
189
236
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
190
237
  order: 0;
191
238
  margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
@@ -235,6 +282,19 @@
235
282
  --pf-v6-c-drawer__panel--BorderRadius: var(--pf-v6-c-drawer--m-pill__panel--BorderRadius);
236
283
  --pf-v6-c-drawer--m-expanded__panel--inset: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
237
284
  --pf-v6-c-drawer__panel--MarginBlock: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--inset);
285
+ --pf-v6-c-drawer__splitter--m-vertical--Width: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--Width);
286
+ --pf-v6-c-drawer__splitter--m-vertical--Height: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--Height);
287
+ --pf-v6-c-drawer__splitter--MarginBlockStart: var(--pf-v6-c-drawer--m-pill__splitter--m-vertical--MarginBlockStart);
288
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--after--BorderColor);
289
+ --pf-v6-c-drawer__splitter--after--BorderInlineEndWidth: var(--pf-v6-c-drawer--m-pill__splitter--after--BorderInlineEndWidth);
290
+ --pf-v6-c-drawer__splitter--hover--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--hover--after--BorderColor);
291
+ --pf-v6-c-drawer__splitter--focus--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--focus--after--BorderColor);
292
+ --pf-v6-c-drawer__splitter--active--after--BorderColor: var(--pf-v6-c-drawer--m-pill__splitter--active--after--BorderColor);
293
+ --pf-v6-c-drawer__splitter--after--Width: var(--pf-v6-c-drawer--m-pill__splitter--after--Width);
294
+ --pf-v6-c-drawer__splitter--after--Height: var(--pf-v6-c-drawer--m-pill__splitter--after--Height);
295
+ --pf-v6-c-drawer__splitter--after--InsetInlineStart: var(--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineStart);
296
+ --pf-v6-c-drawer__splitter--after--InsetInlineEnd: var(--pf-v6-c-drawer--m-pill__splitter--after--InsetInlineEnd);
297
+ --pf-v6-c-drawer__splitter--after--TranslateX: var(--pf-v6-c-drawer--m-pill__splitter--after--TranslateX);
238
298
  }
239
299
  .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
240
300
  border-block-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockStartWidth);
@@ -242,10 +302,24 @@
242
302
  border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
243
303
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
244
304
  }
245
- .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
246
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
247
- --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
248
- backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
305
+ }
306
+ @media screen and (min-width: 48rem) {
307
+ .pf-v6-c-drawer.pf-m-pill.pf-m-panel-bottom {
308
+ --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Height);
309
+ --pf-v6-c-drawer__splitter--Width: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--Width);
310
+ --pf-v6-c-drawer__splitter--MarginBlockStart: 0;
311
+ --pf-v6-c-drawer__splitter--MarginInlineStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--MarginInlineStart);
312
+ --pf-v6-c-drawer__splitter--after--Width: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Width);
313
+ --pf-v6-c-drawer__splitter--after--Height: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--Height);
314
+ --pf-v6-c-drawer__splitter--after--BorderBlockStartWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockStartWidth);
315
+ --pf-v6-c-drawer--m-panel-bottom__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
316
+ --pf-v6-c-drawer__splitter--after--BorderBlockEndWidth: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--BorderBlockEndWidth);
317
+ --pf-v6-c-drawer__splitter--after--InsetBlockStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockStart);
318
+ --pf-v6-c-drawer__splitter--after--InsetBlockEnd: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetBlockEnd);
319
+ --pf-v6-c-drawer__splitter--after--TranslateX: initial;
320
+ --pf-v6-c-drawer__splitter--after--TranslateY: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--TranslateY);
321
+ --pf-v6-c-drawer__splitter--after--InsetInlineStart: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineStart);
322
+ --pf-v6-c-drawer__splitter--after--InsetInlineEnd: var(--pf-v6-c-drawer--m-pill--m-panel-bottom__splitter--after--InsetInlineEnd);
249
323
  }
250
324
  }
251
325
 
@@ -412,8 +486,11 @@
412
486
  display: none;
413
487
  width: var(--pf-v6-c-drawer__splitter--Width);
414
488
  height: var(--pf-v6-c-drawer__splitter--Height);
489
+ margin-block-start: var(--pf-v6-c-drawer__splitter--MarginBlockStart, 0);
490
+ margin-inline-start: var(--pf-v6-c-drawer__splitter--MarginInlineStart, 0);
415
491
  cursor: var(--pf-v6-c-drawer__splitter--Cursor);
416
492
  background-color: var(--pf-v6-c-drawer__splitter--BackgroundColor);
493
+ outline-offset: var(--pf-v6-c-drawer__splitter--focus--OutlineOffset);
417
494
  }
418
495
  .pf-v6-c-drawer__splitter.pf-m-vertical {
419
496
  --pf-v6-c-drawer__splitter--Height: var(--pf-v6-c-drawer__splitter--m-vertical--Height);
@@ -426,21 +503,34 @@
426
503
  --pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBlockEndWidth);
427
504
  --pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth: var(--pf-v6-c-drawer__splitter--m-vertical__splitter-handle--after--BorderInlineStartWidth);
428
505
  }
429
- .pf-v6-c-drawer__splitter:hover, .pf-v6-c-drawer__splitter:focus {
430
- --pf-v6-c-drawer__splitter-handle--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover__splitter-handle--after--BorderColor);
506
+ .pf-v6-c-drawer__splitter:hover {
507
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--hover--after--BackgroundColor);
508
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--hover--after--BorderColor);
509
+ }
510
+ .pf-v6-c-drawer__splitter:focus {
511
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--focus--after--BackgroundColor);
512
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--focus--after--BorderColor);
513
+ }
514
+ .pf-v6-c-drawer__splitter:active {
515
+ --pf-v6-c-drawer__splitter-handle--after--BackgroundColor: var(--pf-v6-c-drawer__splitter-handle--active--after--BackgroundColor);
516
+ --pf-v6-c-drawer__splitter--after--BorderColor: var(--pf-v6-c-drawer__splitter--active--after--BorderColor);
431
517
  }
432
518
  .pf-v6-c-drawer__splitter::after {
433
519
  position: absolute;
434
- inset-block-start: 0;
435
- inset-block-end: 0;
436
- inset-inline-start: 0;
437
- inset-inline-end: 0;
520
+ inset-block-start: var(--pf-v6-c-drawer__splitter--after--InsetBlockStart);
521
+ inset-block-end: var(--pf-v6-c-drawer__splitter--after--InsetBlockEnd);
522
+ inset-inline-start: var(--pf-v6-c-drawer__splitter--after--InsetInlineStart);
523
+ inset-inline-end: var(--pf-v6-c-drawer__splitter--after--InsetInlineEnd);
524
+ z-index: -1;
525
+ width: var(--pf-v6-c-drawer__splitter--after--Width);
526
+ height: var(--pf-v6-c-drawer__splitter--after--Height);
438
527
  content: "";
439
528
  border: solid var(--pf-v6-c-drawer__splitter--after--BorderColor);
440
529
  border-block-start-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockStartWidth);
441
530
  border-block-end-width: var(--pf-v6-c-drawer__splitter--after--BorderBlockEndWidth);
442
531
  border-inline-start-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineStartWidth);
443
532
  border-inline-end-width: var(--pf-v6-c-drawer__splitter--after--BorderInlineEndWidth);
533
+ translate: var(--pf-v6-c-drawer__splitter--after--TranslateX, 0) var(--pf-v6-c-drawer__splitter--after--TranslateY, 0);
444
534
  }
445
535
 
446
536
  .pf-v6-c-drawer__splitter-handle {
@@ -458,12 +548,14 @@
458
548
  width: var(--pf-v6-c-drawer__splitter-handle--after--Width);
459
549
  height: var(--pf-v6-c-drawer__splitter-handle--after--Height);
460
550
  content: "";
551
+ background-color: var(--pf-v6-c-drawer__splitter-handle--after--BackgroundColor);
461
552
  border-color: var(--pf-v6-c-drawer__splitter-handle--after--BorderColor);
462
553
  border-style: solid;
463
554
  border-block-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockStartWidth);
464
555
  border-block-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderBlockEndWidth);
465
556
  border-inline-start-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineStartWidth);
466
557
  border-inline-end-width: var(--pf-v6-c-drawer__splitter-handle--after--BorderInlineEndWidth);
558
+ border-radius: var(--pf-v6-c-drawer__splitter-handle--after--BorderRadius);
467
559
  }
468
560
 
469
561
  @media screen and (min-width: 48rem) {
@@ -471,6 +563,9 @@
471
563
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
472
564
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
473
565
  }
566
+ :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
567
+ background: transparent;
568
+ }
474
569
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
475
570
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
476
571
  }
@@ -20,17 +20,19 @@ declare const _default: {
20
20
  "static": "pf-m-static",
21
21
  "noBorder": "pf-m-no-border",
22
22
  "resizable": "pf-m-resizable",
23
+ "glass": "pf-m-glass",
23
24
  "panelLeft": "pf-m-panel-left",
24
25
  "expanded": "pf-m-expanded",
25
26
  "resizing": "pf-m-resizing",
26
27
  "pill": "pf-m-pill",
27
- "noGlass": "pf-m-no-glass",
28
28
  "secondary": "pf-m-secondary",
29
29
  "noBackground": "pf-m-no-background",
30
30
  "primary": "pf-m-primary",
31
31
  "noPadding": "pf-m-no-padding",
32
32
  "padding": "pf-m-padding",
33
33
  "vertical": "pf-m-vertical",
34
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
35
+ "plain": "pf-m-plain",
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;
@@ -22,17 +22,19 @@ exports.default = {
22
22
  "static": "pf-m-static",
23
23
  "noBorder": "pf-m-no-border",
24
24
  "resizable": "pf-m-resizable",
25
+ "glass": "pf-m-glass",
25
26
  "panelLeft": "pf-m-panel-left",
26
27
  "expanded": "pf-m-expanded",
27
28
  "resizing": "pf-m-resizing",
28
29
  "pill": "pf-m-pill",
29
- "noGlass": "pf-m-no-glass",
30
30
  "secondary": "pf-m-secondary",
31
31
  "noBackground": "pf-m-no-background",
32
32
  "primary": "pf-m-primary",
33
33
  "noPadding": "pf-m-no-padding",
34
34
  "padding": "pf-m-padding",
35
35
  "vertical": "pf-m-vertical",
36
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
37
+ "plain": "pf-m-plain",
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
  };
@@ -20,17 +20,19 @@ export default {
20
20
  "static": "pf-m-static",
21
21
  "noBorder": "pf-m-no-border",
22
22
  "resizable": "pf-m-resizable",
23
+ "glass": "pf-m-glass",
23
24
  "panelLeft": "pf-m-panel-left",
24
25
  "expanded": "pf-m-expanded",
25
26
  "resizing": "pf-m-resizing",
26
27
  "pill": "pf-m-pill",
27
- "noGlass": "pf-m-no-glass",
28
28
  "secondary": "pf-m-secondary",
29
29
  "noBackground": "pf-m-no-background",
30
30
  "primary": "pf-m-primary",
31
31
  "noPadding": "pf-m-no-padding",
32
32
  "padding": "pf-m-padding",
33
33
  "vertical": "pf-m-vertical",
34
+ "noPlainOnGlass": "pf-m-no-plain-on-glass",
35
+ "plain": "pf-m-plain",
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
  };
@@ -76,7 +76,7 @@
76
76
  --pf-v6-c-dual-list-selector__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
77
77
  --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
78
78
  --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
79
- --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;
80
80
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
81
81
  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
82
82
  --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);
@@ -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;
@@ -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;
@@ -26,14 +26,19 @@
26
26
  --pf-v6-c-jump-links__list__list__link--PaddingInlineStart: var(--pf-t--global--spacer--lg);
27
27
  --pf-v6-c-jump-links__list__list__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
28
28
  --pf-v6-c-jump-links__link--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--sm));
29
+ --pf-v6-c-jump-links__link--before--Height: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth);
30
+ --pf-v6-c-jump-links__link--before--Width: auto;
29
31
  --pf-v6-c-jump-links__link--before--BorderBlockStartWidth: 0;
30
32
  --pf-v6-c-jump-links__link--before--BorderInlineEndWidth: 0;
31
33
  --pf-v6-c-jump-links__link--before--BorderBlockEndWidth: 0;
32
34
  --pf-v6-c-jump-links__link--before--BorderInlineStartWidth: 0;
33
35
  --pf-v6-c-jump-links__link--before--BorderColor: transparent;
36
+ --pf-v6-c-jump-links__link--before--BorderRadius: var(--pf-t--global--border--radius--pill);
34
37
  --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-t--global--border--width--extra-strong);
35
38
  --pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth: 0;
36
- --pf-v6-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--border--color--clicked);
39
+ --pf-v6-c-jump-links__item--m-current__link--before--BorderColor: var(--pf-t--global--color--brand--accent--default);
40
+ --pf-v6-c-jump-links--m-vertical__link--before--Height: auto;
41
+ --pf-v6-c-jump-links--m-vertical__link--before--Width: var(--pf-v6-c-jump-links__item--m-current__link--before--BorderInlineStartWidth);
37
42
  --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth: 0;
38
43
  --pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderInlineStartWidth: var(--pf-t--global--border--width--extra-strong);
39
44
  --pf-v6-c-jump-links__link-text--Color: var(--pf-t--global--text--color--subtle);
@@ -48,7 +53,7 @@
48
53
  --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
49
54
  --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
50
55
  --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
51
- --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
56
+ --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: -180deg;
52
57
  }
53
58
 
54
59
  .pf-v6-c-jump-links {
@@ -65,6 +70,8 @@
65
70
  --pf-v6-c-jump-links__list--PaddingInlineEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineEnd);
66
71
  --pf-v6-c-jump-links__list--PaddingBlockEnd: var(--pf-v6-c-jump-links--m-vertical__list--PaddingBlockEnd);
67
72
  --pf-v6-c-jump-links__list--PaddingInlineStart: var(--pf-v6-c-jump-links--m-vertical__list--PaddingInlineStart);
73
+ --pf-v6-c-jump-links__link--before--Width: var(--pf-v6-c-jump-links--m-vertical__link--before--Width);
74
+ --pf-v6-c-jump-links__link--before--Height: var(--pf-v6-c-jump-links--m-vertical__link--before--Height);
68
75
  --pf-v6-c-jump-links__list--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderBlockStartWidth);
69
76
  --pf-v6-c-jump-links__list--before--BorderInlineStartWidth: var(--pf-v6-c-jump-links--m-vertical__list--before--BorderInlineStartWidth);
70
77
  --pf-v6-c-jump-links__item--m-current__link--before--BorderBlockStartWidth: var(--pf-v6-c-jump-links--m-vertical__item--m-current__link--before--BorderBlockStartWidth);
@@ -195,6 +202,8 @@
195
202
  .pf-v6-c-jump-links__link::before {
196
203
  position: absolute;
197
204
  inset: 0;
205
+ width: var(--pf-v6-c-jump-links__link--before--Width);
206
+ height: var(--pf-v6-c-jump-links__link--before--Height);
198
207
  pointer-events: none;
199
208
  content: "";
200
209
  border-color: var(--pf-v6-c-jump-links__link--before--BorderColor);
@@ -203,6 +212,7 @@
203
212
  border-block-end-width: var(--pf-v6-c-jump-links__link--before--BorderBlockEndWidth);
204
213
  border-inline-start-width: var(--pf-v6-c-jump-links__link--before--BorderInlineStartWidth);
205
214
  border-inline-end-width: var(--pf-v6-c-jump-links__link--before--BorderInlineEndWidth);
215
+ border-radius: var(--pf-v6-c-jump-links__link--before--BorderRadius);
206
216
  }
207
217
 
208
218
  .pf-v6-c-jump-links__item {
@@ -37,11 +37,13 @@
37
37
  }
38
38
  }
39
39
  .pf-v6-c-login {
40
- --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
40
+ --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
41
+ --pf-v6-c-login__main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
41
42
  --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
42
43
  --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
43
- --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
44
- --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
44
+ --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
45
+ --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--high-contrast));
46
+ --pf-v6-c-login__main--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
45
47
  }
46
48
  @media (min-width: 75rem) {
47
49
  .pf-v6-c-login {
@@ -164,8 +166,10 @@
164
166
  align-self: start;
165
167
  margin-block-end: var(--pf-v6-c-login__main--MarginBlockEnd);
166
168
  background-color: var(--pf-v6-c-login__main--BackgroundColor);
169
+ backdrop-filter: var(--pf-v6-c-login__main--BackdropFilter);
167
170
  border: var(--pf-v6-c-login__main--BorderWidth) solid var(--pf-v6-c-login__main--BorderColor);
168
171
  border-radius: var(--pf-v6-c-login__main--BorderRadius);
172
+ box-shadow: var(--pf-v6-c-login__main--BoxShadow);
169
173
  }
170
174
  .pf-v6-c-login__main > :first-child:not(.pf-v6-c-login__main-header) {
171
175
  padding-block-start: var(--pf-v6-c-login__main-header--PaddingBlockStart);
@@ -8,6 +8,7 @@
8
8
  --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
9
9
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
10
10
  --pf-v6-c-masthead__main--MarginInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
11
+ --pf-v6-c-masthead--m-docked__main--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
11
12
  --pf-v6-c-masthead__logo--MaxHeight: 2.375rem;
12
13
  --pf-v6-c-masthead__logo--Width: 11.8125rem;
13
14
  --pf-v6-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl);
@@ -42,7 +43,7 @@
42
43
  --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
43
44
  --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
44
45
  --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
45
- --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
46
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
46
47
  --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
47
48
  --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
48
49
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
@@ -113,7 +114,7 @@
113
114
  --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
114
115
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
115
116
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
116
- --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
117
+ --pf-v6-c-masthead--BackgroundColor: transparent;
117
118
  --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
118
119
  --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
119
120
  --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
@@ -124,24 +125,58 @@
124
125
  --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
125
126
  --pf-v6-c-masthead__main--GridColumn: auto;
126
127
  --pf-v6-c-masthead__content--GridColumn: auto;
127
- --pf-v6-c-masthead__logo--Width: auto;
128
128
  --pf-v6-c-masthead__main--MarginInlineEnd: 0;
129
129
  display: flex;
130
130
  flex-direction: column;
131
- align-items: center;
132
- width: fit-content;
131
+ align-items: stretch;
133
132
  height: 100%;
134
- backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
133
+ border: 0;
134
+ box-shadow: none;
135
+ }
136
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
137
+ width: revert;
138
+ }
139
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
140
+ display: none;
141
+ max-width: 2.3125rem;
142
+ max-height: revert;
143
+ }
144
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
145
+ flex-direction: column;
146
+ row-gap: var(--pf-v6-c-masthead--m-docked__main--RowGap);
147
+ align-items: flex-start;
135
148
  }
136
149
  .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
137
150
  flex-grow: 1;
138
151
  flex-direction: column;
152
+ align-items: stretch;
139
153
  align-self: revert;
140
154
  }
141
155
  .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
142
- --pf-v6-c-masthead--c-toolbar--Width: fit-content;
156
+ --pf-v6-c-toolbar--m-vertical--Width: auto;
143
157
  height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
144
158
  }
159
+ @media (min-width: 62rem) {
160
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
161
+ align-items: center;
162
+ }
163
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
164
+ display: none;
165
+ }
166
+ .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
167
+ display: revert;
168
+ }
169
+ }
170
+ .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
171
+ display: revert;
172
+ }
173
+ .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
174
+ display: none;
175
+ }
176
+ .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
177
+ align-items: flex-start;
178
+ }
179
+
145
180
  .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
146
181
  flex-wrap: nowrap;
147
182
  min-width: 0;
@@ -203,6 +238,13 @@
203
238
  padding-inline-start: var(--pf-t--global--spacer--2xl);
204
239
  padding-inline-end: var(--pf-t--global--spacer--2xl);
205
240
  }
241
+ :where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
242
+ margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
243
+ background-color: var(--pf-t--global--background--color--glass--primary--default);
244
+ backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
245
+ border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
246
+ box-shadow: var(--pf-t--global--box-shadow--glass--default);
247
+ }
206
248
 
207
249
  .pf-v6-c-masthead__main {
208
250
  display: var(--pf-v6-c-masthead__main--Display);
@@ -10,6 +10,8 @@ declare const _default: {
10
10
  "modifiers": {
11
11
  "resizeObserver": "pf-m-resize-observer",
12
12
  "docked": "pf-m-docked",
13
+ "compact": "pf-m-compact",
14
+ "textExpanded": "pf-m-text-expanded",
13
15
  "displayStack": "pf-m-display-stack",
14
16
  "displayInline": "pf-m-display-inline",
15
17
  "insetNone": "pf-m-inset-none",
@@ -29,6 +31,8 @@ declare const _default: {
29
31
  "displayStackOn_2xl": "pf-m-display-stack-on-2xl",
30
32
  "displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
31
33
  },
34
+ "pageDock": "pf-v6-c-page__dock",
35
+ "themeGlass": "pf-v6-theme-glass",
32
36
  "toolbar": "pf-v6-c-toolbar",
33
37
  "toolbarContentSection": "pf-v6-c-toolbar__content-section",
34
38
  "toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"
@@ -12,6 +12,8 @@ exports.default = {
12
12
  "modifiers": {
13
13
  "resizeObserver": "pf-m-resize-observer",
14
14
  "docked": "pf-m-docked",
15
+ "compact": "pf-m-compact",
16
+ "textExpanded": "pf-m-text-expanded",
15
17
  "displayStack": "pf-m-display-stack",
16
18
  "displayInline": "pf-m-display-inline",
17
19
  "insetNone": "pf-m-inset-none",
@@ -31,6 +33,8 @@ exports.default = {
31
33
  "displayStackOn_2xl": "pf-m-display-stack-on-2xl",
32
34
  "displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
33
35
  },
36
+ "pageDock": "pf-v6-c-page__dock",
37
+ "themeGlass": "pf-v6-theme-glass",
34
38
  "toolbar": "pf-v6-c-toolbar",
35
39
  "toolbarContentSection": "pf-v6-c-toolbar__content-section",
36
40
  "toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"
@@ -10,6 +10,8 @@ export default {
10
10
  "modifiers": {
11
11
  "resizeObserver": "pf-m-resize-observer",
12
12
  "docked": "pf-m-docked",
13
+ "compact": "pf-m-compact",
14
+ "textExpanded": "pf-m-text-expanded",
13
15
  "displayStack": "pf-m-display-stack",
14
16
  "displayInline": "pf-m-display-inline",
15
17
  "insetNone": "pf-m-inset-none",
@@ -29,6 +31,8 @@ export default {
29
31
  "displayStackOn_2xl": "pf-m-display-stack-on-2xl",
30
32
  "displayInlineOn_2xl": "pf-m-display-inline-on-2xl"
31
33
  },
34
+ "pageDock": "pf-v6-c-page__dock",
35
+ "themeGlass": "pf-v6-theme-glass",
32
36
  "toolbar": "pf-v6-c-toolbar",
33
37
  "toolbarContentSection": "pf-v6-c-toolbar__content-section",
34
38
  "toolbarExpandableContent": "pf-v6-c-toolbar__expandable-content"