@patternfly/patternfly 6.5.0-prerelease.54 → 6.5.0-prerelease.56

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 (85) hide show
  1. package/assets/images/compass--hero-bg.png +0 -0
  2. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  3. package/assets/images/compass--wallpaper-light.jpg +0 -0
  4. package/assets/images/glass-brand-dark.jpg +0 -0
  5. package/assets/images/glass-brand-dark.png +0 -0
  6. package/assets/images/glass-brand-light.jpg +0 -0
  7. package/assets/images/glass-brand-light.png +0 -0
  8. package/base/patternfly-variables.css +772 -690
  9. package/base/patternfly-variables.scss +23 -21
  10. package/base/tokens/tokens-dark.scss +18 -18
  11. package/base/tokens/tokens-default.scss +18 -17
  12. package/base/tokens/tokens-glass-dark.scss +21 -4
  13. package/base/tokens/tokens-glass.scss +17 -4
  14. package/base/tokens/tokens-local.scss +4 -3
  15. package/base/tokens/tokens-palette.scss +1 -1
  16. package/base/tokens/tokens-redhat-dark.scss +9 -2
  17. package/base/tokens/tokens-redhat-glass-dark.scss +28 -4
  18. package/base/tokens/tokens-redhat-glass.scss +19 -4
  19. package/base/tokens/tokens-redhat-highcontrast-dark.scss +7 -4
  20. package/base/tokens/tokens-redhat-highcontrast.scss +4 -3
  21. package/base/tokens/tokens-redhat.scss +1 -1
  22. package/components/Accordion/accordion.css +10 -0
  23. package/components/Accordion/accordion.scss +11 -0
  24. package/components/Button/button.css +2 -16
  25. package/components/Button/button.scss +3 -17
  26. package/components/Card/card.css +13 -0
  27. package/components/Card/card.scss +20 -0
  28. package/components/Compass/compass.css +6 -6
  29. package/components/Compass/compass.scss +6 -6
  30. package/components/DataList/data-list.css +1 -1
  31. package/components/DataList/data-list.scss +1 -0
  32. package/components/Drawer/drawer.css +11 -6
  33. package/components/Drawer/drawer.scss +24 -11
  34. package/components/Login/login.css +7 -3
  35. package/components/Login/login.scss +7 -3
  36. package/components/Masthead/masthead.css +11 -3
  37. package/components/Masthead/masthead.scss +14 -4
  38. package/components/MenuToggle/menu-toggle.css +1 -2
  39. package/components/MenuToggle/menu-toggle.scss +2 -3
  40. package/components/Nav/nav.scss +1 -1
  41. package/components/Page/page.css +115 -8
  42. package/components/Page/page.scss +123 -11
  43. package/components/Panel/panel.css +14 -0
  44. package/components/Panel/panel.scss +18 -0
  45. package/components/Table/table-grid.css +4 -4
  46. package/components/Table/table-grid.scss +4 -4
  47. package/components/Table/table.css +12 -7
  48. package/components/Table/table.scss +13 -9
  49. package/components/_index.css +207 -56
  50. package/docs/components/Accordion/examples/Accordion.md +1 -0
  51. package/docs/components/Card/examples/Card.md +1 -0
  52. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  53. package/docs/components/Page/examples/Page.md +47 -37
  54. package/docs/components/Panel/examples/Panel.md +12 -0
  55. package/docs/demos/AboutModal/examples/AboutModal.md +40 -38
  56. package/docs/demos/Alert/examples/Alert.md +120 -114
  57. package/docs/demos/BackToTop/examples/BackToTop.md +40 -38
  58. package/docs/demos/Banner/examples/Banner.md +80 -76
  59. package/docs/demos/CardView/examples/CardView.md +297 -271
  60. package/docs/demos/Compass/examples/Compass.md +1409 -2732
  61. package/docs/demos/Dashboard/examples/Dashboard.md +40 -38
  62. package/docs/demos/DataList/examples/DataList.md +160 -152
  63. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -114
  64. package/docs/demos/Drawer/examples/Drawer.md +200 -190
  65. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -228
  66. package/docs/demos/Masthead/examples/Masthead.md +320 -304
  67. package/docs/demos/Modal/examples/Modal.md +240 -228
  68. package/docs/demos/Nav/examples/Nav.md +2302 -600
  69. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +180 -170
  70. package/docs/demos/Page/examples/Page.md +606 -568
  71. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -266
  72. package/docs/demos/Skeleton/examples/Skeleton.md +40 -38
  73. package/docs/demos/Table/examples/Table.md +640 -604
  74. package/docs/demos/Tabs/examples/Tabs.md +240 -228
  75. package/docs/demos/Toolbar/examples/Toolbar.md +80 -76
  76. package/docs/demos/Wizard/examples/Wizard.md +360 -342
  77. package/package.json +2 -2
  78. package/patternfly-base-no-globals.css +772 -690
  79. package/patternfly-base.css +772 -690
  80. package/patternfly-no-globals.css +931 -681
  81. package/patternfly.css +931 -681
  82. package/patternfly.min.css +1 -1
  83. package/patternfly.min.css.map +1 -1
  84. package/patternfly.scss +27 -0
  85. package/sass-utilities/scss-variables.scss +1 -1
@@ -180,16 +180,16 @@
180
180
 
181
181
  // * Table compound expansion toggle button
182
182
  --#{$table}__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
183
- --#{$table}__compound-expansion-toggle__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
183
+ --#{$table}__compound-expansion-toggle__button--BackgroundColor: transparent;
184
184
  --#{$table}__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
185
- --#{$table}__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
186
- --#{$table}__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
185
+ --#{$table}__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
186
+ --#{$table}__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
187
187
 
188
188
  // * Table compound expansion toggle button after
189
189
  --#{$table}__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
190
190
  --#{$table}__compound-expansion-toggle__button--after--BorderRadius: inherit;
191
191
  --#{$table}__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
192
- --#{$table}__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
192
+ --#{$table}__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0;
193
193
  --#{$table}__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
194
194
 
195
195
  // * Compound expandable
@@ -266,6 +266,15 @@
266
266
  width: 100%;
267
267
  background-color: var(--#{$table}--BackgroundColor);
268
268
 
269
+ @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain),
270
+ &.pf-m-plain {
271
+ --#{$table}--BackgroundColor: transparent;
272
+ --#{$table}__expandable-row-content--BackgroundColor: transparent;
273
+ --#{$table}__expandable-row-content--PaddingInlineStart: 0;
274
+ --#{$table}__expandable-row-content--PaddingInlineEnd: 0;
275
+ --#{$table}__control-row--BackgroundColor: transparent;
276
+ }
277
+
269
278
  &.pf-m-fixed {
270
279
  table-layout: fixed;
271
280
  }
@@ -324,11 +333,6 @@
324
333
  }
325
334
  }
326
335
 
327
- // - Table plain
328
- &.pf-m-plain {
329
- --#{$table}--BackgroundColor: transparent;
330
- }
331
-
332
336
  // - Table striped
333
337
  // stylelint-disable
334
338
  &.pf-m-striped:not(.pf-m-expandable) > tbody:where(.#{$table}__tbody) > tr:where(.#{$table}__tr):nth-child(odd), // regular table
@@ -213,6 +213,8 @@
213
213
  --pf-v6-c-accordion__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
214
214
  --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
215
215
  --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
216
+ --pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor: transparent;
217
+ --pf-v6-c-accordion--m-plain__item--m-expanded__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
216
218
  --pf-v6-c-accordion__toggle--BorderRadius: var(--pf-t--global--border--radius--small);
217
219
  --pf-v6-c-accordion__toggle--ZIndex: var(--pf-t--global--z-index--xs);
218
220
  --pf-v6-c-accordion__toggle--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
@@ -304,6 +306,13 @@
304
306
  row-gap: var(--pf-v6-c-accordion--RowGap);
305
307
  background-color: var(--pf-v6-c-accordion--BackgroundColor);
306
308
  }
309
+ :where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain), .pf-v6-c-accordion.pf-m-plain {
310
+ --pf-v6-c-accordion--BackgroundColor: transparent;
311
+ --pf-v6-c-accordion__expandable-content--BackgroundColor: transparent;
312
+ --pf-v6-c-accordion__item--m-expanded--BackgroundColor: transparent;
313
+ --pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor: var(--pf-v6-c-accordion--m-plain__item--m-expanded__toggle--BackgroundColor);
314
+ }
315
+
307
316
  .pf-v6-c-accordion.pf-m-toggle-start {
308
317
  --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap);
309
318
  }
@@ -355,6 +364,7 @@
355
364
  --pf-v6-c-accordion__item--before--Opacity: var(--pf-v6-c-accordion__item--m-expanded--before--Opacity);
356
365
  --pf-v6-c-accordion__item--before--TranslateY: var(--pf-v6-c-accordion__item--m-expanded--before--TranslateY);
357
366
  --pf-v6-c-accordion__item--BorderWidth: var(--pf-v6-c-accordion__item--m-expanded--BorderWidth);
367
+ --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor);
358
368
  --pf-v6-c-accordion__expandable-content--TransitionDuration--slide: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--slide);
359
369
  --pf-v6-c-accordion__expandable-content--TransitionDuration--fade: var(--pf-v6-c-accordion__expandable-content--TransitionDuration--expand--fade);
360
370
  --pf-v6-c-accordion__expandable-content--Opacity: var(--pf-v6-c-accordion__item--m-expanded__expandable-content--Opacity);
@@ -1605,7 +1615,7 @@ button.pf-v6-c-breadcrumb__link {
1605
1615
  --pf-v6-c-button--AlignItems: baseline;
1606
1616
  --pf-v6-c-button--JustifyContent: center;
1607
1617
  --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
1608
- --pf-v6-c-button--MinWidth: initial;
1618
+ --pf-v6-c-button--MinWidth: calc(1lh + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
1609
1619
  --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
1610
1620
  --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
1611
1621
  --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
@@ -1957,14 +1967,7 @@ button.pf-v6-c-breadcrumb__link {
1957
1967
  --pf-v6-c-button--hamburger-icon--arrow--collapse--path: path("M3,7 L1,5 L3,3");
1958
1968
  --pf-v6-c-button--hamburger-icon--bottom--collapse--path: path("M9,9 L5,9");
1959
1969
  --pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX: -1;
1960
- --pf-v6-c-button--m-circle--ScaleX: 1.29;
1961
- --pf-v6-c-button--m-circle--ScaleY: 1.29;
1962
1970
  --pf-v6-c-button--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
1963
- --pf-v6-c-button--m-circle--Padding--base: var(--pf-t--global--spacer--control--vertical--default);
1964
- --pf-v6-c-button--m-circle--PaddingBlockStart: var(--pf-v6-c-button--m-circle--Padding--base);
1965
- --pf-v6-c-button--m-circle--PaddingInlineEnd: 0;
1966
- --pf-v6-c-button--m-circle--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--Padding--base);
1967
- --pf-v6-c-button--m-circle--PaddingInlineStart: 0;
1968
1971
  }
1969
1972
 
1970
1973
  .pf-v6-c-button {
@@ -2374,13 +2377,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2374
2377
  }
2375
2378
  .pf-v6-c-button.pf-m-circle {
2376
2379
  --pf-v6-c-button--BorderRadius: var(--pf-v6-c-button--m-circle--BorderRadius);
2377
- --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-circle--PaddingBlockStart);
2378
- --pf-v6-c-button--PaddingInlineEnd: var(--pf-v6-c-button--m-circle--PaddingInlineEnd);
2379
- --pf-v6-c-button--PaddingBlockEnd: var(--pf-v6-c-button--m-circle--PaddingBlockEnd);
2380
- --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-circle--PaddingInlineStart);
2381
- }
2382
- .pf-v6-c-button.pf-m-circle .pf-v6-c-button__icon {
2383
- scale: var(--pf-v6-c-button--m-circle--ScaleX) var(--pf-v6-c-button--m-circle--ScaleY);
2380
+ padding-inline: 0;
2384
2381
  }
2385
2382
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
2386
2383
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
@@ -2481,7 +2478,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2481
2478
  }
2482
2479
 
2483
2480
  .pf-v6-c-button__icon {
2484
- min-width: 1lh;
2485
2481
  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
2486
2482
  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
2487
2483
  color: var(--pf-v6-c-button__icon--Color);
@@ -2891,6 +2887,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
2891
2887
  --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
2892
2888
  --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
2893
2889
  --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
2890
+ --pf-v6-c-card--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
2891
+ --pf-v6-c-card--m-glass--BorderWidth: var(--pf-t--global--border--width--glass--default);
2892
+ --pf-v6-c-card--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
2893
+ --pf-v6-c-card--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
2894
+ --pf-v6-c-card--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
2894
2895
  }
2895
2896
 
2896
2897
  .pf-v6-c-card {
@@ -3003,6 +3004,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
3003
3004
  .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__header, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__title, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__body, .pf-v6-c-card > .pf-v6-c-divider + .pf-v6-c-card__footer {
3004
3005
  padding-block-start: var(--pf-v6-c-card--c-divider--child--PaddingBlockStart);
3005
3006
  }
3007
+ .pf-v6-c-card.pf-m-glass {
3008
+ --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-glass--BackgroundColor);
3009
+ --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-glass--BorderColor);
3010
+ --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-glass--BorderWidth);
3011
+ --pf-v6-c-card--BorderStyle: solid;
3012
+ --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-glass--BoxShadow);
3013
+ backdrop-filter: var(--pf-v6-c-card--m-glass--BackdropFilter);
3014
+ }
3006
3015
 
3007
3016
  .pf-v6-c-card__header {
3008
3017
  display: flex;
@@ -3671,12 +3680,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
3671
3680
  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
3672
3681
  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
3673
3682
  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
3674
- --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
3675
- --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
3676
- --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
3677
- --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
3678
- --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
3679
- --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
3683
+ --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
3684
+ --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
3685
+ --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--glass--default, transparent);
3686
+ --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--glass--default, var(--pf-t--global--border--radius--medium));
3687
+ --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--glass--default, 0);
3688
+ --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
3680
3689
  --pf-v6-c-compass__message-bar--Width: 450px;
3681
3690
  --pf-v6-c-compass__message-bar--MinWidth: 300px;
3682
3691
  --pf-v6-c-compass__message-bar--MaxWidth: 600px;
@@ -4819,7 +4828,7 @@ ul) {
4819
4828
  .pf-v6-c-data-list.pf-m-drag-over {
4820
4829
  overflow-anchor: none;
4821
4830
  }
4822
- .pf-v6-c-data-list.pf-m-plain {
4831
+ :where(.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain), .pf-v6-c-data-list.pf-m-plain {
4823
4832
  --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
4824
4833
  }
4825
4834
 
@@ -6298,7 +6307,7 @@ ul) {
6298
6307
  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
6299
6308
  --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
6300
6309
  --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
6301
- --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--alt);
6310
+ --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
6302
6311
  }
6303
6312
  @media screen and (prefers-reduced-motion: no-preference) {
6304
6313
  .pf-v6-c-drawer {
@@ -6429,6 +6438,13 @@ ul) {
6429
6438
  .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) {
6430
6439
  padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
6431
6440
  }
6441
+ .pf-v6-c-drawer.pf-m-inline.pf-m-glass, .pf-v6-c-drawer.pf-m-static.pf-m-glass {
6442
+ --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6443
+ --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6444
+ }
6445
+ .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 {
6446
+ backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6447
+ }
6432
6448
  .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6433
6449
  order: 0;
6434
6450
  margin-inline-end: calc(var(--pf-v6-c-drawer__panel--FlexBasis) * -1);
@@ -6485,11 +6501,6 @@ ul) {
6485
6501
  border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
6486
6502
  border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
6487
6503
  }
6488
- .pf-v6-c-drawer.pf-m-pill > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-glass) {
6489
- --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
6490
- --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
6491
- backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
6492
- }
6493
6504
  }
6494
6505
 
6495
6506
  .pf-v6-c-drawer__section {
@@ -6714,6 +6725,9 @@ ul) {
6714
6725
  --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
6715
6726
  min-width: var(--pf-v6-c-drawer__panel--MinWidth);
6716
6727
  }
6728
+ :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain) > .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) > .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 {
6729
+ background: transparent;
6730
+ }
6717
6731
  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
6718
6732
  box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
6719
6733
  }
@@ -10171,11 +10185,13 @@ ul.pf-v6-c-list {
10171
10185
  }
10172
10186
  }
10173
10187
  .pf-v6-c-login {
10174
- --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
10188
+ --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
10189
+ --pf-v6-c-login__main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
10175
10190
  --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
10176
10191
  --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
10177
- --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
10178
- --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
10192
+ --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular));
10193
+ --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--high-contrast));
10194
+ --pf-v6-c-login__main--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
10179
10195
  }
10180
10196
  @media (min-width: 75rem) {
10181
10197
  .pf-v6-c-login {
@@ -10298,8 +10314,10 @@ ul.pf-v6-c-list {
10298
10314
  align-self: start;
10299
10315
  margin-block-end: var(--pf-v6-c-login__main--MarginBlockEnd);
10300
10316
  background-color: var(--pf-v6-c-login__main--BackgroundColor);
10317
+ backdrop-filter: var(--pf-v6-c-login__main--BackdropFilter);
10301
10318
  border: var(--pf-v6-c-login__main--BorderWidth) solid var(--pf-v6-c-login__main--BorderColor);
10302
10319
  border-radius: var(--pf-v6-c-login__main--BorderRadius);
10320
+ box-shadow: var(--pf-v6-c-login__main--BoxShadow);
10303
10321
  }
10304
10322
  .pf-v6-c-login__main > :first-child:not(.pf-v6-c-login__main-header) {
10305
10323
  padding-block-start: var(--pf-v6-c-login__main-header--PaddingBlockStart);
@@ -10446,7 +10464,7 @@ ul.pf-v6-c-list {
10446
10464
  --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
10447
10465
  --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
10448
10466
  --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
10449
- --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
10467
+ --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
10450
10468
  --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
10451
10469
  --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
10452
10470
  --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
@@ -10517,7 +10535,7 @@ ul.pf-v6-c-list {
10517
10535
  --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
10518
10536
  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
10519
10537
  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
10520
- --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
10538
+ --pf-v6-c-masthead--BackgroundColor: transparent;
10521
10539
  --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
10522
10540
  --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
10523
10541
  --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
@@ -10533,7 +10551,8 @@ ul.pf-v6-c-list {
10533
10551
  flex-direction: column;
10534
10552
  align-items: stretch;
10535
10553
  height: 100%;
10536
- backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
10554
+ border: 0;
10555
+ box-shadow: none;
10537
10556
  }
10538
10557
  .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
10539
10558
  width: revert;
@@ -10640,6 +10659,13 @@ ul.pf-v6-c-list {
10640
10659
  padding-inline-start: var(--pf-t--global--spacer--2xl);
10641
10660
  padding-inline-end: var(--pf-t--global--spacer--2xl);
10642
10661
  }
10662
+ :where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
10663
+ margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
10664
+ background-color: var(--pf-t--global--background--color--glass--primary--default);
10665
+ backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
10666
+ border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
10667
+ box-shadow: var(--pf-t--global--box-shadow--glass--default);
10668
+ }
10643
10669
 
10644
10670
  .pf-v6-c-masthead__main {
10645
10671
  display: var(--pf-v6-c-masthead__main--Display);
@@ -11670,7 +11696,7 @@ ul.pf-v6-c-list {
11670
11696
  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
11671
11697
  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
11672
11698
  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
11673
- --pf-v6-c-menu-toggle--MinWidth: initial;
11699
+ --pf-v6-c-menu-toggle--MinWidth: calc(1lh + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
11674
11700
  --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
11675
11701
  --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
11676
11702
  --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -12185,7 +12211,6 @@ ul.pf-v6-c-list {
12185
12211
 
12186
12212
  .pf-v6-c-menu-toggle__icon {
12187
12213
  flex-shrink: 0;
12188
- min-width: 1lh;
12189
12214
  transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
12190
12215
  transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
12191
12216
  transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
@@ -13401,23 +13426,35 @@ ul.pf-v6-c-list {
13401
13426
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
13402
13427
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13403
13428
  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: 0;
13404
- --pf-v6-c-page--m-dock__main-container--xl--MarginBlockStart: var(--pf-t--global--spacer--lg);
13429
+ --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
13405
13430
  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
13406
13431
  --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
13407
13432
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
13408
13433
  --pf-v6-c-page__dock--Width: 15.625rem;
13409
13434
  --pf-v6-c-page__dock--desktop--Width: auto;
13410
13435
  --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
13411
- --pf-v6-c-page__dock--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
13412
- --pf-v6-c-page__dock--BorderInlineEndColor: var(--pf-t--global--border--color--default);
13413
13436
  --pf-v6-c-page__dock--TransitionDuration--slide: 0s;
13414
13437
  --pf-v6-c-page__dock--m-expanded--TransitionDuration--slide: 0s;
13415
13438
  --pf-v6-c-page__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
13439
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
13440
+ --pf-v6-c-page__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
13441
+ --pf-v6-c-page__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
13442
+ --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
13443
+ --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
13444
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
13445
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
13446
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
13447
+ --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
13448
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
13449
+ --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
13416
13450
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
13417
13451
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
13418
13452
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
13419
13453
  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
13420
- --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
13454
+ --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
13455
+ --pf-v6-c-page__sidebar--BackdropFilter: none;
13456
+ --pf-v6-c-page__sidebar--xl--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
13457
+ --pf-v6-c-page__sidebar--xl--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--secondary--default));
13421
13458
  --pf-v6-c-page__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right);
13422
13459
  --pf-v6-c-page__sidebar--TransitionProperty: opacity;
13423
13460
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
@@ -13467,6 +13504,8 @@ ul.pf-v6-c-list {
13467
13504
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
13468
13505
  --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
13469
13506
  --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
13507
+ --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-v6-c-page__sidebar--xl--BackgroundColor);
13508
+ --pf-v6-c-page__sidebar--BackdropFilter: var(--pf-v6-c-page__sidebar--xl--BackdropFilter);
13470
13509
  }
13471
13510
  }
13472
13511
  .pf-v6-c-page {
@@ -13475,7 +13514,8 @@ ul.pf-v6-c-list {
13475
13514
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
13476
13515
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
13477
13516
  --pf-v6-c-page__main-container--AlignSelf: start;
13478
- --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13517
+ --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
13518
+ --pf-v6-c-page__main-container--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
13479
13519
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
13480
13520
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
13481
13521
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
@@ -13484,6 +13524,7 @@ ul.pf-v6-c-list {
13484
13524
  --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default);
13485
13525
  --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default);
13486
13526
  --pf-v6-c-page__main-container--BorderColor: var(--pf-t--global--border--color--main--default);
13527
+ --pf-v6-c-page__main-container--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
13487
13528
  --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
13488
13529
  --pf-v6-c-page__main-container--xs--BorderRadius: 0;
13489
13530
  --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
@@ -13551,6 +13592,14 @@ ul.pf-v6-c-list {
13551
13592
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
13552
13593
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
13553
13594
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
13595
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13596
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
13597
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
13598
+ }
13599
+ :where(.pf-v6-theme-glass) .pf-v6-c-page {
13600
+ --pf-v6-c-page__sidebar--Width--base: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
13601
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
13602
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13554
13603
  }
13555
13604
 
13556
13605
  .pf-v6-c-page {
@@ -13580,7 +13629,7 @@ ul.pf-v6-c-list {
13580
13629
  }
13581
13630
  @media (min-width: 62rem) {
13582
13631
  .pf-v6-c-page.pf-m-dock {
13583
- --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--xl--MarginBlockStart);
13632
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart);
13584
13633
  --pf-v6-c-page__main-container--MarginInlineStart: 0;
13585
13634
  grid-template-areas: "dock main";
13586
13635
  grid-template-rows: auto;
@@ -13656,6 +13705,8 @@ ul.pf-v6-c-list {
13656
13705
  inset-block-end: 0;
13657
13706
  inset-inline-start: 0;
13658
13707
  z-index: var(--pf-v6-c-page__dock--ZIndex);
13708
+ display: flex;
13709
+ flex-direction: column;
13659
13710
  grid-area: dock;
13660
13711
  width: var(--pf-v6-c-page__dock--Width);
13661
13712
  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
@@ -13663,12 +13714,12 @@ ul.pf-v6-c-list {
13663
13714
  }
13664
13715
  .pf-v6-c-page__dock.pf-m-expanded {
13665
13716
  --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
13666
- border-inline-end: var(--pf-v6-c-page__dock--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--BorderInlineEndColor);
13667
13717
  translate: 0;
13668
13718
  }
13669
13719
  @media (min-width: 62rem) {
13670
13720
  .pf-v6-c-page__dock {
13671
- --pf-v6-c-page__dock--BorderInlineEndWidth: 0;
13721
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
13722
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
13672
13723
  position: revert;
13673
13724
  inset: revert;
13674
13725
  width: auto;
@@ -13682,6 +13733,22 @@ ul.pf-v6-c-list {
13682
13733
  width: var(--pf-v6-c-page__dock--Width);
13683
13734
  }
13684
13735
 
13736
+ .pf-v6-c-page__dock-main {
13737
+ flex-grow: 1;
13738
+ background-color: var(--pf-v6-c-page__dock-main--BackgroundColor);
13739
+ backdrop-filter: var(--pf-v6-c-page__dock-main--BackdropFilter);
13740
+ border-inline-end: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock-main--BorderInlineEndColor);
13741
+ box-shadow: var(--pf-v6-c-page__dock-main--BoxShadow);
13742
+ }
13743
+ .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-page__dock-main {
13744
+ border-inline-end: var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor);
13745
+ }
13746
+ @media (min-width: 62rem) {
13747
+ .pf-v6-c-page__dock-main {
13748
+ --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
13749
+ }
13750
+ }
13751
+
13685
13752
  .pf-v6-c-page__sidebar {
13686
13753
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
13687
13754
  display: flex;
@@ -13722,6 +13789,48 @@ ul.pf-v6-c-list {
13722
13789
  max-width: 0;
13723
13790
  overflow: hidden;
13724
13791
  }
13792
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar {
13793
+ min-height: 0;
13794
+ padding: 0;
13795
+ overflow: visible;
13796
+ background: transparent;
13797
+ }
13798
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar.pf-m-expanded {
13799
+ box-shadow: none;
13800
+ }
13801
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
13802
+ padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
13803
+ padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
13804
+ padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
13805
+ margin-block-start: calc(var(--pf-t--global--spacer--sm) * -1);
13806
+ margin-block-end: var(--pf-t--global--spacer--md);
13807
+ margin-inline-start: var(--pf-t--global--spacer--md);
13808
+ margin-inline-end: var(--pf-t--global--spacer--md);
13809
+ overflow: auto;
13810
+ background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
13811
+ backdrop-filter: var(--pf-v6-c-page__sidebar--BackdropFilter);
13812
+ border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
13813
+ border-radius: var(--pf-t--global--border--radius--glass--default);
13814
+ box-shadow: var(--pf-t--global--box-shadow--glass--default);
13815
+ }
13816
+ @media (min-width: 75rem) {
13817
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
13818
+ margin-block-start: 0;
13819
+ margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
13820
+ margin-inline-start: var(--pf-t--global--spacer--inset--page-chrome);
13821
+ margin-inline-end: var(--pf-t--global--spacer--inset--page-chrome);
13822
+ }
13823
+ }
13824
+
13825
+ .pf-v6-c-page__sidebar:has(> .pf-v6-c-page__sidebar-main) {
13826
+ overflow: revert;
13827
+ }
13828
+
13829
+ .pf-v6-c-page__sidebar-main {
13830
+ display: flex;
13831
+ flex-grow: 1;
13832
+ flex-direction: column;
13833
+ }
13725
13834
 
13726
13835
  .pf-v6-c-page__sidebar-header {
13727
13836
  padding-block-start: var(--pf-v6-c-page__sidebar-header--PaddingBlockStart);
@@ -13989,12 +14098,14 @@ ul.pf-v6-c-list {
13989
14098
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
13990
14099
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
13991
14100
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
14101
+ backdrop-filter: var(--pf-v6-c-page__main-container--BackdropFilter);
13992
14102
  border: solid var(--pf-v6-c-page__main-container--BorderColor);
13993
14103
  border-block-start-width: var(--pf-v6-c-page__main-container--BorderBlockStartWidth);
13994
14104
  border-block-end-width: var(--pf-v6-c-page__main-container--BorderBlockEndWidth);
13995
14105
  border-inline-start-width: var(--pf-v6-c-page__main-container--BorderInlineStartWidth);
13996
14106
  border-inline-end-width: var(--pf-v6-c-page__main-container--BorderInlineEndWidth);
13997
14107
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
14108
+ box-shadow: var(--pf-v6-c-page__main-container--BoxShadow);
13998
14109
  }
13999
14110
  @media screen and (max-width: calc(48rem - 1px)) {
14000
14111
  .pf-v6-c-page__main-container {
@@ -14033,6 +14144,25 @@ ul.pf-v6-c-list {
14033
14144
  outline: 0;
14034
14145
  }
14035
14146
 
14147
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain), .pf-v6-c-page__main-subnav.pf-m-plain,
14148
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain),
14149
+ .pf-v6-c-page__main-breadcrumb.pf-m-plain,
14150
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain),
14151
+ .pf-v6-c-page__main-tabs.pf-m-plain,
14152
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain),
14153
+ .pf-v6-c-page__main-section.pf-m-plain,
14154
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain),
14155
+ .pf-v6-c-page__main-wizard.pf-m-plain,
14156
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain),
14157
+ .pf-v6-c-page__main-group.pf-m-plain {
14158
+ --pf-v6-c-page__main-section--BackgroundColor: transparent;
14159
+ --pf-v6-c-page__main-subnav--BackgroundColor: transparent;
14160
+ --pf-v6-c-page__main-breadcrumb--BackgroundColor: transparent;
14161
+ --pf-v6-c-page__main-tabs--BackgroundColor: transparent;
14162
+ --pf-v6-c-page__main-wizard--BackgroundColor: transparent;
14163
+ --pf-v6-c-page__main-group--BackgroundColor: transparent;
14164
+ }
14165
+
14036
14166
  .pf-v6-c-page__main,
14037
14167
  .pf-v6-c-page__main-drawer,
14038
14168
  .pf-v6-c-page__main-group {
@@ -14127,6 +14257,8 @@ ul.pf-v6-c-list {
14127
14257
  }
14128
14258
  .pf-v6-c-page__main-section.pf-m-secondary {
14129
14259
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-v6-c-page__main-section--m-secondary--BackgroundColor);
14260
+ border-block-start: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
14261
+ border-block-end: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--high-contrast--regular)) solid var(--pf-t--global--border--color--subtle, var(--pf-t--global--border--color--high-contrast));
14130
14262
  }
14131
14263
  .pf-v6-c-page__main-section.pf-m-padding {
14132
14264
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
@@ -14635,6 +14767,12 @@ ul.pf-v6-c-list {
14635
14767
  --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
14636
14768
  --pf-v6-c-panel--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
14637
14769
  --pf-v6-c-panel--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
14770
+ --pf-v6-c-panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
14771
+ --pf-v6-c-panel--m-glass--before--BorderWidth: var(--pf-t--global--border--width--glass--default);
14772
+ --pf-v6-c-panel--m-glass--before--BorderColor: var(--pf-t--global--border--color--glass--default);
14773
+ --pf-v6-c-panel--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
14774
+ --pf-v6-c-panel--m-glass--BorderRadius: var(--pf-t--global--border--radius--glass--default);
14775
+ --pf-v6-c-panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
14638
14776
  }
14639
14777
 
14640
14778
  .pf-v6-c-panel {
@@ -14676,6 +14814,14 @@ ul.pf-v6-c-list {
14676
14814
  --pf-v6-c-panel__footer--BorderColor: var(--pf-v6-c-panel--m-scrollable__footer--BorderColor);
14677
14815
  --pf-v6-c-panel__footer--BorderWidth: var(--pf-v6-c-panel--m-scrollable__footer--BorderWidth);
14678
14816
  }
14817
+ .pf-v6-c-panel.pf-m-glass {
14818
+ --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-glass--BackgroundColor);
14819
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-glass--before--BorderWidth);
14820
+ --pf-v6-c-panel--before--BorderColor: var(--pf-v6-c-panel--m-glass--before--BorderColor);
14821
+ --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-glass--BoxShadow);
14822
+ --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-glass--BorderRadius);
14823
+ backdrop-filter: var(--pf-v6-c-panel--m-glass--BackdropFilter);
14824
+ }
14679
14825
 
14680
14826
  .pf-v6-c-panel__header {
14681
14827
  padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
@@ -17346,7 +17492,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17346
17492
  --pf-v6-c-table--cell--Width: auto;
17347
17493
  }
17348
17494
 
17349
- @container pf-v6-contain-table (max-width: 48rem) {
17495
+ @container pf-v6-contain-table (max-width: calc(48rem - 1px)) {
17350
17496
  .pf-m-grid-md.pf-v6-c-table {
17351
17497
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
17352
17498
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -17656,7 +17802,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17656
17802
  }
17657
17803
  }
17658
17804
 
17659
- @container pf-v6-contain-table (max-width: 62rem) {
17805
+ @container pf-v6-contain-table (max-width: calc(62rem - 1px)) {
17660
17806
  .pf-m-grid-lg.pf-v6-c-table {
17661
17807
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
17662
17808
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -17966,7 +18112,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17966
18112
  }
17967
18113
  }
17968
18114
 
17969
- @container pf-v6-contain-table (max-width: 75rem) {
18115
+ @container pf-v6-contain-table (max-width: calc(75rem - 1px)) {
17970
18116
  .pf-m-grid-xl.pf-v6-c-table {
17971
18117
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
17972
18118
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -18276,7 +18422,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18276
18422
  }
18277
18423
  }
18278
18424
 
18279
- @container pf-v6-contain-table (max-width: 90.625rem) {
18425
+ @container pf-v6-contain-table (max-width: calc(90.625rem - 1px)) {
18280
18426
  .pf-m-grid-2xl.pf-v6-c-table {
18281
18427
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
18282
18428
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -18708,14 +18854,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18708
18854
  --pf-v6-c-table__th--m-help--MinWidth: 11ch;
18709
18855
  --pf-v6-c-table__column-help--MarginInlineStart: var(--pf-t--global--spacer--sm);
18710
18856
  --pf-v6-c-table__compound-expansion-toggle__button--Color: var(--pf-t--global--icon--color--brand--default);
18711
- --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
18857
+ --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: transparent;
18712
18858
  --pf-v6-c-table__compound-expansion-toggle__button--hover--Color: var(--pf-t--global--icon--color--brand--hover);
18713
- --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
18714
- --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
18859
+ --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
18860
+ --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
18715
18861
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
18716
18862
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius: inherit;
18717
18863
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderBlockStartWidth: 0;
18718
- --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
18864
+ --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0;
18719
18865
  --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
18720
18866
  --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
18721
18867
  --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
@@ -18757,6 +18903,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18757
18903
  width: 100%;
18758
18904
  background-color: var(--pf-v6-c-table--BackgroundColor);
18759
18905
  }
18906
+ :where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain), .pf-v6-c-table.pf-m-plain {
18907
+ --pf-v6-c-table--BackgroundColor: transparent;
18908
+ --pf-v6-c-table__expandable-row-content--BackgroundColor: transparent;
18909
+ --pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0;
18910
+ --pf-v6-c-table__expandable-row-content--PaddingInlineEnd: 0;
18911
+ --pf-v6-c-table__control-row--BackgroundColor: transparent;
18912
+ }
18913
+
18760
18914
  .pf-v6-c-table.pf-m-fixed {
18761
18915
  table-layout: fixed;
18762
18916
  }
@@ -18797,9 +18951,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18797
18951
  .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) td:where(.pf-v6-c-table__td):not([rowspan]) {
18798
18952
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
18799
18953
  }
18800
- .pf-v6-c-table.pf-m-plain {
18801
- --pf-v6-c-table--BackgroundColor: transparent;
18802
- }
18803
18954
  .pf-v6-c-table.pf-m-striped:not(.pf-m-expandable) > tbody:where(.pf-v6-c-table__tbody) > tr:where(.pf-v6-c-table__tr):nth-child(odd), .pf-v6-c-table.pf-m-striped.pf-m-expandable > tbody:where(.pf-v6-c-table__tbody):nth-of-type(odd) > tr:where(.pf-v6-c-table__tr),
18804
18955
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
18805
18956
  .pf-v6-c-table > .pf-m-striped-even > tr:nth-child(even),
@@ -1077,6 +1077,7 @@ Another variation is using the definition list:
1077
1077
  | `.pf-v6-c-accordion__toggle-icon` | `<span>` | Initiates the toggle icon wrapper. **Required** |
1078
1078
  | `.pf-v6-c-accordion__expandable-content` | `<div>`, `<dd>` | Initiates expandable content. **Must be paired with a button** |
1079
1079
  | `.pf-v6-c-accordion__expandable-content-body` | `<div>` | Initiates expandable content body. **Required** |
1080
+ | `.pf-m-plain` | `.pf-v6-c-accordion` | Modifies the accordion have plain styles. |
1080
1081
  | `.pf-m-bordered` | `.pf-v6-c-accordion` | Modifies the accordion to add borders between items. |
1081
1082
  | `.pf-m-display-lg` | `.pf-v6-c-accordion` | Modifies the accordion for large display styling. This variation is for marketing/web use cases. |
1082
1083
  | `.pf-m-toggle-start` | `.pf-v6-c-accordion` | Modifies accordion styling when accordion toggle icons are rendered at the start of the toggle, before the toggle text. |