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

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 (84) 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 +4238 -784
  9. package/base/patternfly-variables.scss +23 -21
  10. package/base/tokens/tokens-dark.scss +17 -17
  11. package/base/tokens/tokens-default.scss +18 -16
  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 +432 -2
  17. package/base/tokens/tokens-redhat-glass-dark.scss +432 -4
  18. package/base/tokens/tokens-redhat-glass.scss +748 -4
  19. package/base/tokens/tokens-redhat-highcontrast-dark.scss +400 -3
  20. package/base/tokens/tokens-redhat-highcontrast.scss +635 -3
  21. package/base/tokens/tokens-redhat.scss +786 -2
  22. package/components/Accordion/accordion.css +10 -0
  23. package/components/Accordion/accordion.scss +11 -0
  24. package/components/Button/button.css +0 -14
  25. package/components/Button/button.scss +1 -16
  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.scss +1 -1
  39. package/components/Nav/nav.scss +1 -1
  40. package/components/Page/page.css +115 -8
  41. package/components/Page/page.scss +123 -11
  42. package/components/Panel/panel.css +14 -0
  43. package/components/Panel/panel.scss +18 -0
  44. package/components/Table/table-grid.css +4 -4
  45. package/components/Table/table-grid.scss +4 -4
  46. package/components/Table/table.css +12 -7
  47. package/components/Table/table.scss +13 -9
  48. package/components/_index.css +204 -52
  49. package/docs/components/Accordion/examples/Accordion.md +1 -0
  50. package/docs/components/Card/examples/Card.md +1 -0
  51. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  52. package/docs/components/Page/examples/Page.md +47 -37
  53. package/docs/components/Panel/examples/Panel.md +12 -0
  54. package/docs/demos/AboutModal/examples/AboutModal.md +40 -38
  55. package/docs/demos/Alert/examples/Alert.md +120 -114
  56. package/docs/demos/BackToTop/examples/BackToTop.md +40 -38
  57. package/docs/demos/Banner/examples/Banner.md +80 -76
  58. package/docs/demos/CardView/examples/CardView.md +297 -271
  59. package/docs/demos/Compass/examples/Compass.md +1409 -2732
  60. package/docs/demos/Dashboard/examples/Dashboard.md +40 -38
  61. package/docs/demos/DataList/examples/DataList.md +160 -152
  62. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -114
  63. package/docs/demos/Drawer/examples/Drawer.md +200 -190
  64. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -228
  65. package/docs/demos/Masthead/examples/Masthead.md +320 -304
  66. package/docs/demos/Modal/examples/Modal.md +240 -228
  67. package/docs/demos/Nav/examples/Nav.md +2302 -600
  68. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +180 -170
  69. package/docs/demos/Page/examples/Page.md +606 -568
  70. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -266
  71. package/docs/demos/Skeleton/examples/Skeleton.md +40 -38
  72. package/docs/demos/Table/examples/Table.md +640 -604
  73. package/docs/demos/Tabs/examples/Tabs.md +240 -228
  74. package/docs/demos/Toolbar/examples/Toolbar.md +80 -76
  75. package/docs/demos/Wizard/examples/Wizard.md +360 -342
  76. package/package.json +1 -1
  77. package/patternfly-base-no-globals.css +4238 -784
  78. package/patternfly-base.css +4238 -784
  79. package/patternfly-no-globals.css +4356 -733
  80. package/patternfly.css +4356 -733
  81. package/patternfly.min.css +1 -1
  82. package/patternfly.min.css.map +1 -1
  83. package/patternfly.scss +27 -0
  84. 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);
@@ -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,6 @@ 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);
2384
2380
  }
2385
2381
  .pf-v6-c-button:hover, .pf-v6-c-button:focus {
2386
2382
  --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--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);
@@ -13401,23 +13427,35 @@ ul.pf-v6-c-list {
13401
13427
  --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
13402
13428
  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13403
13429
  --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);
13430
+ --pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart: var(--pf-t--global--spacer--lg);
13405
13431
  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
13406
13432
  --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
13407
13433
  --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
13408
13434
  --pf-v6-c-page__dock--Width: 15.625rem;
13409
13435
  --pf-v6-c-page__dock--desktop--Width: auto;
13410
13436
  --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
13437
  --pf-v6-c-page__dock--TransitionDuration--slide: 0s;
13414
13438
  --pf-v6-c-page__dock--m-expanded--TransitionDuration--slide: 0s;
13415
13439
  --pf-v6-c-page__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
13440
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
13441
+ --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));
13442
+ --pf-v6-c-page__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
13443
+ --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
13444
+ --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
13445
+ --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
13446
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: 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-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
13449
+ --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));
13450
+ --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
13451
  --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
13417
13452
  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
13418
13453
  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
13419
13454
  --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);
13455
+ --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
13456
+ --pf-v6-c-page__sidebar--BackdropFilter: none;
13457
+ --pf-v6-c-page__sidebar--xl--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
13458
+ --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
13459
  --pf-v6-c-page__sidebar--BoxShadow: var(--pf-t--global--box-shadow--md--right);
13422
13460
  --pf-v6-c-page__sidebar--TransitionProperty: opacity;
13423
13461
  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
@@ -13467,6 +13505,8 @@ ul.pf-v6-c-list {
13467
13505
  --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
13468
13506
  --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
13469
13507
  --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
13508
+ --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-v6-c-page__sidebar--xl--BackgroundColor);
13509
+ --pf-v6-c-page__sidebar--BackdropFilter: var(--pf-v6-c-page__sidebar--xl--BackdropFilter);
13470
13510
  }
13471
13511
  }
13472
13512
  .pf-v6-c-page {
@@ -13475,7 +13515,8 @@ ul.pf-v6-c-list {
13475
13515
  --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
13476
13516
  --pf-v6-c-page__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg));
13477
13517
  --pf-v6-c-page__main-container--AlignSelf: start;
13478
- --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--primary--default);
13518
+ --pf-v6-c-page__main-container--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
13519
+ --pf-v6-c-page__main-container--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
13479
13520
  --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page--inset);
13480
13521
  --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page--inset);
13481
13522
  --pf-v6-c-page__main-container--BorderRadius: var(--pf-t--global--border--radius--medium);
@@ -13484,6 +13525,7 @@ ul.pf-v6-c-list {
13484
13525
  --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-t--global--border--width--main--default);
13485
13526
  --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-t--global--border--width--main--default);
13486
13527
  --pf-v6-c-page__main-container--BorderColor: var(--pf-t--global--border--color--main--default);
13528
+ --pf-v6-c-page__main-container--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
13487
13529
  --pf-v6-c-page__main-container--xs--AlignSelf: stretch;
13488
13530
  --pf-v6-c-page__main-container--xs--BorderRadius: 0;
13489
13531
  --pf-v6-c-page__main-container--xs--MarginInlineStart: 0;
@@ -13551,6 +13593,14 @@ ul.pf-v6-c-list {
13551
13593
  --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
13552
13594
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
13553
13595
  --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
13596
+ --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
13597
+ --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
13598
+ --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
13599
+ }
13600
+ :where(.pf-v6-theme-glass) .pf-v6-c-page {
13601
+ --pf-v6-c-page__sidebar--Width--base: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
13602
+ --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
13603
+ --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
13554
13604
  }
13555
13605
 
13556
13606
  .pf-v6-c-page {
@@ -13580,7 +13630,7 @@ ul.pf-v6-c-list {
13580
13630
  }
13581
13631
  @media (min-width: 62rem) {
13582
13632
  .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);
13633
+ --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--desktop--MarginBlockStart);
13584
13634
  --pf-v6-c-page__main-container--MarginInlineStart: 0;
13585
13635
  grid-template-areas: "dock main";
13586
13636
  grid-template-rows: auto;
@@ -13656,6 +13706,8 @@ ul.pf-v6-c-list {
13656
13706
  inset-block-end: 0;
13657
13707
  inset-inline-start: 0;
13658
13708
  z-index: var(--pf-v6-c-page__dock--ZIndex);
13709
+ display: flex;
13710
+ flex-direction: column;
13659
13711
  grid-area: dock;
13660
13712
  width: var(--pf-v6-c-page__dock--Width);
13661
13713
  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
@@ -13663,12 +13715,12 @@ ul.pf-v6-c-list {
13663
13715
  }
13664
13716
  .pf-v6-c-page__dock.pf-m-expanded {
13665
13717
  --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
13718
  translate: 0;
13668
13719
  }
13669
13720
  @media (min-width: 62rem) {
13670
13721
  .pf-v6-c-page__dock {
13671
- --pf-v6-c-page__dock--BorderInlineEndWidth: 0;
13722
+ --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-v6-c-page__dock-main--desktop--BackgroundColor);
13723
+ --pf-v6-c-page__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
13672
13724
  position: revert;
13673
13725
  inset: revert;
13674
13726
  width: auto;
@@ -13682,6 +13734,22 @@ ul.pf-v6-c-list {
13682
13734
  width: var(--pf-v6-c-page__dock--Width);
13683
13735
  }
13684
13736
 
13737
+ .pf-v6-c-page__dock-main {
13738
+ flex-grow: 1;
13739
+ background-color: var(--pf-v6-c-page__dock-main--BackgroundColor);
13740
+ backdrop-filter: var(--pf-v6-c-page__dock-main--BackdropFilter);
13741
+ border-inline-end: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock-main--BorderInlineEndColor);
13742
+ box-shadow: var(--pf-v6-c-page__dock-main--BoxShadow);
13743
+ }
13744
+ .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-page__dock-main {
13745
+ 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);
13746
+ }
13747
+ @media (min-width: 62rem) {
13748
+ .pf-v6-c-page__dock-main {
13749
+ --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
13750
+ }
13751
+ }
13752
+
13685
13753
  .pf-v6-c-page__sidebar {
13686
13754
  z-index: var(--pf-v6-c-page__sidebar--ZIndex);
13687
13755
  display: flex;
@@ -13722,6 +13790,48 @@ ul.pf-v6-c-list {
13722
13790
  max-width: 0;
13723
13791
  overflow: hidden;
13724
13792
  }
13793
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar {
13794
+ min-height: 0;
13795
+ padding: 0;
13796
+ overflow: visible;
13797
+ background: transparent;
13798
+ }
13799
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar.pf-m-expanded {
13800
+ box-shadow: none;
13801
+ }
13802
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
13803
+ padding-block-end: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
13804
+ padding-inline-start: var(--pf-v6-c-page__sidebar--PaddingInlineStart);
13805
+ padding-inline-end: var(--pf-v6-c-page__sidebar--PaddingInlineEnd);
13806
+ margin-block-start: calc(var(--pf-t--global--spacer--sm) * -1);
13807
+ margin-block-end: var(--pf-t--global--spacer--md);
13808
+ margin-inline-start: var(--pf-t--global--spacer--md);
13809
+ margin-inline-end: var(--pf-t--global--spacer--md);
13810
+ overflow: auto;
13811
+ background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
13812
+ backdrop-filter: var(--pf-v6-c-page__sidebar--BackdropFilter);
13813
+ border: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
13814
+ border-radius: var(--pf-t--global--border--radius--glass--default);
13815
+ box-shadow: var(--pf-t--global--box-shadow--glass--default);
13816
+ }
13817
+ @media (min-width: 75rem) {
13818
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__sidebar .pf-v6-c-page__sidebar-main {
13819
+ margin-block-start: 0;
13820
+ margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
13821
+ margin-inline-start: var(--pf-t--global--spacer--inset--page-chrome);
13822
+ margin-inline-end: var(--pf-t--global--spacer--inset--page-chrome);
13823
+ }
13824
+ }
13825
+
13826
+ .pf-v6-c-page__sidebar:has(> .pf-v6-c-page__sidebar-main) {
13827
+ overflow: revert;
13828
+ }
13829
+
13830
+ .pf-v6-c-page__sidebar-main {
13831
+ display: flex;
13832
+ flex-grow: 1;
13833
+ flex-direction: column;
13834
+ }
13725
13835
 
13726
13836
  .pf-v6-c-page__sidebar-header {
13727
13837
  padding-block-start: var(--pf-v6-c-page__sidebar-header--PaddingBlockStart);
@@ -13989,12 +14099,14 @@ ul.pf-v6-c-list {
13989
14099
  margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
13990
14100
  margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
13991
14101
  background: var(--pf-v6-c-page__main-container--BackgroundColor);
14102
+ backdrop-filter: var(--pf-v6-c-page__main-container--BackdropFilter);
13992
14103
  border: solid var(--pf-v6-c-page__main-container--BorderColor);
13993
14104
  border-block-start-width: var(--pf-v6-c-page__main-container--BorderBlockStartWidth);
13994
14105
  border-block-end-width: var(--pf-v6-c-page__main-container--BorderBlockEndWidth);
13995
14106
  border-inline-start-width: var(--pf-v6-c-page__main-container--BorderInlineStartWidth);
13996
14107
  border-inline-end-width: var(--pf-v6-c-page__main-container--BorderInlineEndWidth);
13997
14108
  border-radius: var(--pf-v6-c-page__main-container--BorderRadius);
14109
+ box-shadow: var(--pf-v6-c-page__main-container--BoxShadow);
13998
14110
  }
13999
14111
  @media screen and (max-width: calc(48rem - 1px)) {
14000
14112
  .pf-v6-c-page__main-container {
@@ -14033,6 +14145,25 @@ ul.pf-v6-c-list {
14033
14145
  outline: 0;
14034
14146
  }
14035
14147
 
14148
+ :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,
14149
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain),
14150
+ .pf-v6-c-page__main-breadcrumb.pf-m-plain,
14151
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain),
14152
+ .pf-v6-c-page__main-tabs.pf-m-plain,
14153
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain),
14154
+ .pf-v6-c-page__main-section.pf-m-plain,
14155
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain),
14156
+ .pf-v6-c-page__main-wizard.pf-m-plain,
14157
+ :where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain),
14158
+ .pf-v6-c-page__main-group.pf-m-plain {
14159
+ --pf-v6-c-page__main-section--BackgroundColor: transparent;
14160
+ --pf-v6-c-page__main-subnav--BackgroundColor: transparent;
14161
+ --pf-v6-c-page__main-breadcrumb--BackgroundColor: transparent;
14162
+ --pf-v6-c-page__main-tabs--BackgroundColor: transparent;
14163
+ --pf-v6-c-page__main-wizard--BackgroundColor: transparent;
14164
+ --pf-v6-c-page__main-group--BackgroundColor: transparent;
14165
+ }
14166
+
14036
14167
  .pf-v6-c-page__main,
14037
14168
  .pf-v6-c-page__main-drawer,
14038
14169
  .pf-v6-c-page__main-group {
@@ -14127,6 +14258,8 @@ ul.pf-v6-c-list {
14127
14258
  }
14128
14259
  .pf-v6-c-page__main-section.pf-m-secondary {
14129
14260
  --pf-v6-c-page__main-section--BackgroundColor: var(--pf-v6-c-page__main-section--m-secondary--BackgroundColor);
14261
+ 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));
14262
+ 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
14263
  }
14131
14264
  .pf-v6-c-page__main-section.pf-m-padding {
14132
14265
  padding-block-start: var(--pf-v6-c-page__main-section--PaddingBlockStart);
@@ -14635,6 +14768,12 @@ ul.pf-v6-c-list {
14635
14768
  --pf-v6-c-panel--m-scrollable__footer--PaddingBlockEnd: var(--pf-t--global--spacer--md);
14636
14769
  --pf-v6-c-panel--m-scrollable__footer--BorderColor: var(--pf-t--global--border--color--high-contrast);
14637
14770
  --pf-v6-c-panel--m-scrollable__footer--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
14771
+ --pf-v6-c-panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
14772
+ --pf-v6-c-panel--m-glass--before--BorderWidth: var(--pf-t--global--border--width--glass--default);
14773
+ --pf-v6-c-panel--m-glass--before--BorderColor: var(--pf-t--global--border--color--glass--default);
14774
+ --pf-v6-c-panel--m-glass--BoxShadow: var(--pf-t--global--box-shadow--glass--default);
14775
+ --pf-v6-c-panel--m-glass--BorderRadius: var(--pf-t--global--border--radius--glass--default);
14776
+ --pf-v6-c-panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
14638
14777
  }
14639
14778
 
14640
14779
  .pf-v6-c-panel {
@@ -14676,6 +14815,14 @@ ul.pf-v6-c-list {
14676
14815
  --pf-v6-c-panel__footer--BorderColor: var(--pf-v6-c-panel--m-scrollable__footer--BorderColor);
14677
14816
  --pf-v6-c-panel__footer--BorderWidth: var(--pf-v6-c-panel--m-scrollable__footer--BorderWidth);
14678
14817
  }
14818
+ .pf-v6-c-panel.pf-m-glass {
14819
+ --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-glass--BackgroundColor);
14820
+ --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-glass--before--BorderWidth);
14821
+ --pf-v6-c-panel--before--BorderColor: var(--pf-v6-c-panel--m-glass--before--BorderColor);
14822
+ --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-glass--BoxShadow);
14823
+ --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-glass--BorderRadius);
14824
+ backdrop-filter: var(--pf-v6-c-panel--m-glass--BackdropFilter);
14825
+ }
14679
14826
 
14680
14827
  .pf-v6-c-panel__header {
14681
14828
  padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
@@ -17346,7 +17493,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17346
17493
  --pf-v6-c-table--cell--Width: auto;
17347
17494
  }
17348
17495
 
17349
- @container pf-v6-contain-table (max-width: 48rem) {
17496
+ @container pf-v6-contain-table (max-width: calc(48rem - 1px)) {
17350
17497
  .pf-m-grid-md.pf-v6-c-table {
17351
17498
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
17352
17499
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -17656,7 +17803,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17656
17803
  }
17657
17804
  }
17658
17805
 
17659
- @container pf-v6-contain-table (max-width: 62rem) {
17806
+ @container pf-v6-contain-table (max-width: calc(62rem - 1px)) {
17660
17807
  .pf-m-grid-lg.pf-v6-c-table {
17661
17808
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
17662
17809
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -17966,7 +18113,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
17966
18113
  }
17967
18114
  }
17968
18115
 
17969
- @container pf-v6-contain-table (max-width: 75rem) {
18116
+ @container pf-v6-contain-table (max-width: calc(75rem - 1px)) {
17970
18117
  .pf-m-grid-xl.pf-v6-c-table {
17971
18118
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
17972
18119
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -18276,7 +18423,7 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18276
18423
  }
18277
18424
  }
18278
18425
 
18279
- @container pf-v6-contain-table (max-width: 90.625rem) {
18426
+ @container pf-v6-contain-table (max-width: calc(90.625rem - 1px)) {
18280
18427
  .pf-m-grid-2xl.pf-v6-c-table {
18281
18428
  --pf-v6-c-table--cell--PaddingBlockStart: var(--pf-v6-c-table--m-grid--cell--PaddingBlockStart);
18282
18429
  --pf-v6-c-table--cell--PaddingInlineEnd: var(--pf-v6-c-table--m-grid--cell--PaddingInlineEnd);
@@ -18708,14 +18855,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18708
18855
  --pf-v6-c-table__th--m-help--MinWidth: 11ch;
18709
18856
  --pf-v6-c-table__column-help--MarginInlineStart: var(--pf-t--global--spacer--sm);
18710
18857
  --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);
18858
+ --pf-v6-c-table__compound-expansion-toggle__button--BackgroundColor: transparent;
18712
18859
  --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);
18860
+ --pf-v6-c-table__compound-expansion-toggle__button--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
18861
+ --pf-v6-c-table__compound-expansion-toggle__button--expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
18715
18862
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderColor: var(--pf-t--global--border--color--clicked);
18716
18863
  --pf-v6-c-table__compound-expansion-toggle__button--after--BorderRadius: inherit;
18717
18864
  --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);
18865
+ --pf-v6-c-table__compound-expansion-toggle__button--hover--after--BorderBlockStartWidth: 0;
18719
18866
  --pf-v6-c-table__compound-expansion-toggle--m-expanded__button--after--BorderBlockStartWidth: var(--pf-t--global--border--width--strong);
18720
18867
  --pf-v6-c-table--compound-expansion--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
18721
18868
  --pf-v6-c-table--compound-expansion--m-expanded--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
@@ -18757,6 +18904,14 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18757
18904
  width: 100%;
18758
18905
  background-color: var(--pf-v6-c-table--BackgroundColor);
18759
18906
  }
18907
+ :where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain), .pf-v6-c-table.pf-m-plain {
18908
+ --pf-v6-c-table--BackgroundColor: transparent;
18909
+ --pf-v6-c-table__expandable-row-content--BackgroundColor: transparent;
18910
+ --pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0;
18911
+ --pf-v6-c-table__expandable-row-content--PaddingInlineEnd: 0;
18912
+ --pf-v6-c-table__control-row--BackgroundColor: transparent;
18913
+ }
18914
+
18760
18915
  .pf-v6-c-table.pf-m-fixed {
18761
18916
  table-layout: fixed;
18762
18917
  }
@@ -18797,9 +18952,6 @@ label.pf-v6-c-radio, .pf-v6-c-radio__label,
18797
18952
  .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
18953
  --pf-v6-c-table--cell--PaddingBlockEnd: var(--pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd);
18799
18954
  }
18800
- .pf-v6-c-table.pf-m-plain {
18801
- --pf-v6-c-table--BackgroundColor: transparent;
18802
- }
18803
18955
  .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
18956
  .pf-v6-c-table > .pf-m-striped > tr:nth-child(odd),
18805
18957
  .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. |
@@ -1937,4 +1937,5 @@ A card is a generic rectangular container that can be used to build other compon
1937
1937
  | `.pf-m-expanded` | `.pf-v6-c-card` | Modifies the card for the expanded state. |
1938
1938
  | `.pf-m-toggle-right` | `.pf-v6-c-card__header` | Modifies the expandable card header toggle to be positioned at flex-end. |
1939
1939
  | `.pf-m-full-height` | `.pf-v6-c-card` | Modifies the card to full height of its parent. |
1940
+ | `.pf-m-glass` | `.pf-v6-c-card` | Applies glass styles when glass theme is enabled. |
1940
1941
  | `.pf-m-no-offset` | `.pf-v6-c-card__actions` | Removes the negative vertical margins on the actions element intended to align the action content with the card title. |
@@ -3,7 +3,7 @@
3
3
  }
4
4
 
5
5
  .pf-v6-c-draggable.pf-m-dragging {
6
- --pf-v6-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--primary--default);
6
+ --pf-v6-c-draggable--m-dragging--BackgroundColor: var(--pf-t--global--background--color--floating--default);
7
7
 
8
8
  position: absolute;
9
9
  inset-block-start: 23%;