@patternfly/patternfly 6.5.0-prerelease.65 → 6.5.0-prerelease.67

package/components/Accordion/accordion.css

@@ -104,13 +104,12 @@
   row-gap: var(--pf-v6-c-accordion--RowGap);
   background-color: var(--pf-v6-c-accordion--BackgroundColor);
 }
-:where(.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain-on-glass), .pf-v6-c-accordion.pf-m-plain {
+:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-accordion.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-accordion:not(.pf-m-no-plain-on-glass) {
   --pf-v6-c-accordion--BackgroundColor: transparent;
   --pf-v6-c-accordion__expandable-content--BackgroundColor: transparent;
   --pf-v6-c-accordion__item--m-expanded--BackgroundColor: transparent;
   --pf-v6-c-accordion__item--m-expanded__toggle--BackgroundColor: var(--pf-v6-c-accordion--m-plain__item--m-expanded__toggle--BackgroundColor);
 }
-
 .pf-v6-c-accordion.pf-m-toggle-start {
   --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-v6-c-accordion--m-toggle-start__toggle--ColumnGap);
 }

package/components/Accordion/accordion.scss

@@ -129,8 +129,8 @@
   row-gap: var(--#{$accordion}--RowGap);
   background-color: var(--#{$accordion}--BackgroundColor);
 
-  @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
-  &.pf-m-plain {
+  :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
+  :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
     --#{$accordion}--BackgroundColor: transparent;
     --#{$accordion}__expandable-content--BackgroundColor: transparent;
     --#{$accordion}__item--m-expanded--BackgroundColor: transparent;

package/components/Breadcrumb/breadcrumb.css

@@ -1,5 +1,5 @@
 .pf-v6-c-breadcrumb {
-  --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-breadcrumb__item--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-breadcrumb__item--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-breadcrumb__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-breadcrumb__item-divider--Color: var(--pf-t--global--icon--color--regular);
@@ -10,12 +10,14 @@
   --pf-v6-c-breadcrumb__link--Color: var(--pf-t--global--text--color--link--default);
   --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
   --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
+  --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
   --pf-v6-c-breadcrumb__link--hover--Color: var(--pf-t--global--text--color--link--hover);
   --pf-v6-c-breadcrumb__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
   --pf-v6-c-breadcrumb__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --pf-v6-c-breadcrumb__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
   --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
-  --pf-v6-c-breadcrumb__heading--FontSize: var( --pf-t--global--font--size--body--sm);
+  --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
   --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -68,6 +70,7 @@
   color: var(--pf-v6-c-breadcrumb__link--Color);
   text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
   text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
+  text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);
   word-break: break-word;
   background-color: var(--pf-v6-c-breadcrumb__link--BackgroundColor);
 }
@@ -75,6 +78,7 @@
   --pf-v6-c-breadcrumb__link--Color: var(--pf-v6-c-breadcrumb__link--hover--Color);
   --pf-v6-c-breadcrumb__link--TextDecorationLine: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationLine);
   --pf-v6-c-breadcrumb__link--TextDecorationStyle: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationStyle);
+  --pf-v6-c-breadcrumb__link--TextDecorationColor: var(--pf-v6-c-breadcrumb__link--hover--TextDecorationColor);
 }
 .pf-v6-c-breadcrumb__link.pf-m-current {
   cursor: default;

package/components/Breadcrumb/breadcrumb.scss

@@ -2,7 +2,7 @@
 
 @include pf-root($breadcrumb) {
   // Breadcrumb item
-  --#{$breadcrumb}__item--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$breadcrumb}__item--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$breadcrumb}__item--LineHeight: var(--pf-t--global--font--line-height--body);
   --#{$breadcrumb}__item--MarginInlineEnd: var(--pf-t--global--spacer--sm);
 
@@ -17,14 +17,16 @@
   --#{$breadcrumb}__link--Color: var(--pf-t--global--text--color--link--default);
   --#{$breadcrumb}__link--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--default);
   --#{$breadcrumb}__link--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--default);
+  --#{$breadcrumb}__link--TextDecorationColor: var(--pf-t--global--text-decoration--color--default);
   --#{$breadcrumb}__link--hover--Color: var(--pf-t--global--text--color--link--hover);
   --#{$breadcrumb}__link--hover--TextDecorationLine: var(--pf-t--global--text-decoration--link--line--hover);
   --#{$breadcrumb}__link--hover--TextDecorationStyle: var(--pf-t--global--text-decoration--link--style--hover);
+  --#{$breadcrumb}__link--hover--TextDecorationColor: var(--pf-t--global--text-decoration--color--hover);
   --#{$breadcrumb}__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --#{$breadcrumb}__link--BackgroundColor: transparent;
 
   // Heading
-  --#{$breadcrumb}__heading--FontSize: var( --pf-t--global--font--size--body--sm);
+  --#{$breadcrumb}__heading--FontSize: var(--#{$breadcrumb}__item--FontSize);
 
   // breadcrumb dropdown
   --#{$breadcrumb}__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -83,6 +85,7 @@
   color: var(--#{$breadcrumb}__link--Color);
   text-decoration-line: var(--#{$breadcrumb}__link--TextDecorationLine);
   text-decoration-style: var(--#{$breadcrumb}__link--TextDecorationStyle);
+  text-decoration-color: var(--#{$breadcrumb}__link--TextDecorationColor);
   word-break: break-word;
   background-color: var(--#{$breadcrumb}__link--BackgroundColor);
 
@@ -90,6 +93,7 @@
     --#{$breadcrumb}__link--Color: var(--#{$breadcrumb}__link--hover--Color);
     --#{$breadcrumb}__link--TextDecorationLine: var(--#{$breadcrumb}__link--hover--TextDecorationLine);
     --#{$breadcrumb}__link--TextDecorationStyle: var(--#{$breadcrumb}__link--hover--TextDecorationStyle);
+    --#{$breadcrumb}__link--TextDecorationColor: var(--#{$breadcrumb}__link--hover--TextDecorationColor);
   }
 
 

package/components/DataList/data-list.css

@@ -572,7 +572,7 @@
 .pf-v6-c-data-list.pf-m-drag-over {
   overflow-anchor: none;
 }
-:where(.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain-on-glass), .pf-v6-c-data-list.pf-m-plain {
+:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-data-list.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-data-list:not(.pf-m-no-plain-on-glass) {
   --pf-v6-c-data-list__item--BackgroundColor: var(--pf-v6-c-data-list--pf-m-plain__item--BackgroundColor);
 }
 

package/components/DataList/data-list.scss

@@ -191,8 +191,8 @@
     overflow-anchor: none;
   }
 
-  @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
-  &.pf-m-plain {
+  :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
+  :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
     --#{$data-list}__item--BackgroundColor: var(--#{$data-list}--pf-m-plain__item--BackgroundColor);
   }
 }

package/components/Drawer/drawer.css

@@ -226,11 +226,9 @@
 .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) {
   padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
 }
-.pf-v6-c-drawer.pf-m-inline.pf-m-glass, .pf-v6-c-drawer.pf-m-static.pf-m-glass {
+.pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass, .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-glass {
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-glass--BackgroundColor);
   --pf-v6-c-drawer__panel--BorderColor: var(--pf-v6-c-drawer__panel--m-glass--BorderColor);
-}
-.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 {
   backdrop-filter: var(--pf-v6-c-drawer__panel--m-glass--BackdropFilter);
 }
 .pf-v6-c-drawer.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -563,8 +561,8 @@
     --pf-v6-c-drawer--m-inline__panel--after--Width: var(--pf-v6-c-drawer--m-inline__panel--after--md--Width);
     min-width: var(--pf-v6-c-drawer__panel--MinWidth);
   }
-  :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-inline.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, :where(.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static:not(.pf-m-no-plain-on-glass) > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel, .pf-v6-c-drawer.pf-m-static.pf-m-plain > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-    background: transparent;
+  :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass), :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-plain-on-glass) {
+    --pf-v6-c-drawer__panel--BackgroundColor: transparent;
   }
   .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
     box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);

package/components/Drawer/drawer.scss

@@ -261,13 +261,11 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       padding-inline-start: var(--#{$drawer}--m-inline__panel--PaddingInlineStart);
     }
 
-    &.pf-m-glass {
+    > .#{$drawer}__main > .#{$drawer}__panel.pf-m-glass {
       --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-glass--BackgroundColor);
       --#{$drawer}__panel--BorderColor: var(--#{$drawer}__panel--m-glass--BorderColor);
-  
-      > .#{$drawer}__main > .#{$drawer}__panel {
-        backdrop-filter: var(--#{$drawer}__panel--m-glass--BackdropFilter);
-      }
+
+      backdrop-filter: var(--#{$drawer}__panel--m-glass--BackdropFilter);
     }
   }
 
@@ -659,10 +657,10 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
 
     &.pf-m-inline,
     &.pf-m-static {
-      @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
-      &.pf-m-plain {
-        > .#{$drawer}__main > .#{$drawer}__panel {
-          background: transparent;
+      > .#{$drawer}__main > .#{$drawer}__panel {
+        @at-root :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
+        :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
+          --#{$drawer}__panel--BackgroundColor: transparent;
         }
       }
     }

package/components/MenuToggle/menu-toggle.css

@@ -115,7 +115,7 @@
   --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
   --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
   --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
-  --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--control--default);
+  --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);

package/components/MenuToggle/menu-toggle.scss

@@ -145,7 +145,7 @@
   --#{$menu-toggle}--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
   --#{$menu-toggle}--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
   --#{$menu-toggle}--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
-  --#{$menu-toggle}--m-plain--BorderRadius: var(--pf-t--global--border--radius--control--default);
+  --#{$menu-toggle}--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --#{$menu-toggle}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --#{$menu-toggle}--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --#{$menu-toggle}--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);

package/components/Page/page.css

@@ -773,17 +773,17 @@
   outline: 0;
 }
 
-:where(.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain-on-glass), .pf-v6-c-page__main-subnav.pf-m-plain,
-:where(.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain-on-glass),
-.pf-v6-c-page__main-breadcrumb.pf-m-plain,
-:where(.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain-on-glass),
-.pf-v6-c-page__main-tabs.pf-m-plain,
-:where(.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain-on-glass),
-.pf-v6-c-page__main-section.pf-m-plain,
-:where(.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain-on-glass),
-.pf-v6-c-page__main-wizard.pf-m-plain,
-:where(.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain-on-glass),
-.pf-v6-c-page__main-group.pf-m-plain {
+:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-subnav.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-subnav:not(.pf-m-no-plain-on-glass),
+:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-breadcrumb.pf-m-plain,
+:where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-breadcrumb:not(.pf-m-no-plain-on-glass),
+:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-tabs.pf-m-plain,
+:where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-tabs:not(.pf-m-no-plain-on-glass),
+:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-section.pf-m-plain,
+:where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-section:not(.pf-m-no-plain-on-glass),
+:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-wizard.pf-m-plain,
+:where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-wizard:not(.pf-m-no-plain-on-glass),
+:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-page__main-group.pf-m-plain,
+:where(:root.pf-v6-theme-glass) .pf-v6-c-page__main-group:not(.pf-m-no-plain-on-glass) {
   --pf-v6-c-page__main-section--BackgroundColor: transparent;
   --pf-v6-c-page__main-subnav--BackgroundColor: transparent;
   --pf-v6-c-page__main-breadcrumb--BackgroundColor: transparent;

package/components/Page/page.scss

@@ -704,8 +704,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 .#{$page}__main-section,
 .#{$page}__main-wizard,
 .#{$page}__main-group {
-  @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
-  &.pf-m-plain {
+  :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
+  :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
     --#{$page}__main-section--BackgroundColor: transparent;
     --#{$page}__main-subnav--BackgroundColor: transparent;
     --#{$page}__main-breadcrumb--BackgroundColor: transparent;

package/components/Table/table.css

@@ -153,6 +153,9 @@
   --pf-v6-c-table__tbody--m-clickable--m-expanded--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --pf-v6-c-table__tbody--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
   --pf-v6-c-table__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
+  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
+  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
+  --pf-v6-c-table__thead--m-nested-column-header--after--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
   --pf-v6-c-table__thead--m-nested-column-header--button--OutlineOffset: -0.1875rem;
   --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-table__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -160,55 +163,79 @@
   --pf-v6-c-table__nested-column-header__button--PaddingInlineStart: calc(var(--pf-v6-c-table__button--PaddingInlineStart) - var(--pf-t--global--spacer--control--horizontal--plain));
   --pf-v6-c-table__nested-column-header__button--PaddingInlineEnd: calc(var(--pf-v6-c-table__button--PaddingInlineEnd) - (var(--pf-t--global--spacer--control--horizontal--plain) / 2));
   --pf-v6-c-table--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
+  --pf-v6-c-table--m-sticky-header--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
   --pf-v6-c-table--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
   --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
+  --pf-v6-c-table--m-sticky-header--BorderRadius: 0;
+  --pf-v6-c-table--m-sticky-header--BoxShadow: 0;
+  --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: var(--pf-v6-c-table--border-width--base);
+  --pf-v6-c-table--m-sticky-header--BorderBlockEndColor: var(--pf-v6-c-table--BorderColor);
+  --pf-v6-c-table--m-sticky-header--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-table--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
+  --pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
+}
+:where(.pf-v6-theme-glass) .pf-v6-c-table {
+  --pf-v6-c-table--m-sticky-header--BorderBlockEndWidth: 0;
+  --pf-v6-c-table--m-sticky-header--BoxShadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow--glass);
+  --pf-v6-c-table--m-sticky-header--BorderRadius: var(--pf-v6-c-table--m-sticky-header--BorderRadius--glass);
 }
 
 .pf-v6-c-table {
   width: 100%;
   background-color: var(--pf-v6-c-table--BackgroundColor);
 }
-:where(.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass), .pf-v6-c-table.pf-m-plain {
+:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-table.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-table:not(.pf-m-no-plain-on-glass) {
   --pf-v6-c-table--BackgroundColor: transparent;
   --pf-v6-c-table__expandable-row-content--BackgroundColor: transparent;
   --pf-v6-c-table__expandable-row-content--PaddingInlineStart: 0;
   --pf-v6-c-table__expandable-row-content--PaddingInlineEnd: 0;
   --pf-v6-c-table__control-row--BackgroundColor: transparent;
 }
-
 .pf-v6-c-table.pf-m-fixed {
   table-layout: fixed;
 }
-.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead,
-.pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header {
+.pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
+  opacity: 0;
+  transition-timing-function: var(--pf-v6-c-table--m-sticky-header--TransitionTimingFunction--BackgroundColor);
+  transition-duration: var(--pf-v6-c-table--m-sticky-header--TransitionDuration--BackgroundColor);
+  transition-property: opacity;
+}
+.pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-stuck {
+  --pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth: 0;
+}
+.pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-stuck > .pf-v6-c-table__thead::after {
+  opacity: 1;
+}
+.pf-v6-c-table.pf-m-sticky-header, .pf-v6-c-table.pf-m-sticky-header-base {
+  position: relative;
+}
+.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead {
   position: sticky;
   inset-block-start: 0;
   z-index: var(--pf-v6-c-table--m-sticky-header--ZIndex);
-  background: var(--pf-v6-c-table--BackgroundColor);
 }
-.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before,
-.pf-v6-c-table .pf-v6-c-table__thead.pf-m-nested-column-header::before {
+.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::before, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::before {
   position: absolute;
-  inset-block-start: 0;
-  inset-block-end: 0;
-  inset-inline-start: 0;
-  inset-inline-end: 0;
-  z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
+  inset: 0;
+  z-index: -1;
   pointer-events: none;
   content: "";
-  border-block-end: var(--pf-v6-c-table--border-width--base) solid var(--pf-v6-c-table--BorderColor);
+  background-color: var(--pf-v6-c-table--m-sticky-header--BackgroundColor);
+  border-radius: var(--pf-v6-c-table--m-sticky-header--BorderRadius);
+  box-shadow: var(--pf-v6-c-table--m-sticky-header--BoxShadow);
 }
-.pf-v6-c-table.pf-m-sticky-header {
-  position: relative;
-}
-.pf-v6-c-table.pf-m-sticky-header thead:where(.pf-v6-c-table__thead) tr:where(.pf-v6-c-table__tr) > :where(th, td) {
+.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead > :where(th, td), .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead > :where(th, td) {
   z-index: var(--pf-v6-c-table--m-sticky-header--cell--ZIndex);
 }
-.pf-v6-c-table.pf-m-sticky-header > .pf-m-nested-column-header {
-  position: sticky;
-  inset-block-start: 0;
-  background: var(--pf-v6-c-table--BackgroundColor);
+.pf-v6-c-table.pf-m-sticky-header > .pf-v6-c-table__thead::after, .pf-v6-c-table.pf-m-sticky-header-base > .pf-v6-c-table__thead::after {
+  position: absolute;
+  inset: 0;
+  z-index: var(--pf-v6-c-table--m-sticky-header--border--ZIndex);
+  pointer-events: none;
+  content: "";
+  border-block-end: var(--pf-v6-c-table--m-sticky-header--BorderBlockEndWidth) solid var(--pf-v6-c-table--m-sticky-header--BorderBlockEndColor);
 }
 .pf-v6-c-table:not(.pf-m-sticky-header) > .pf-m-nested-column-header tr:where(.pf-v6-c-table__tr):not(:last-child) {
   border-block-end: 0;
@@ -899,6 +926,17 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-table__toggle--PaddingBlockEnd: var(--pf-v6-c-table__thead__toggle--PaddingBlockEnd);
   vertical-align: bottom;
 }
+.pf-v6-c-table__thead.pf-m-nested-column-header {
+  position: relative;
+}
+.pf-v6-c-table__thead.pf-m-nested-column-header::after {
+  position: absolute;
+  inset: 0;
+  z-index: var(--pf-v6-c-table__thead--m-nested-column-header--after--ZIndex);
+  pointer-events: none;
+  content: "";
+  border-block-end: var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--pf-v6-c-table__thead--m-nested-column-header--BorderBlockEndColor);
+}
 .pf-v6-c-table__thead.pf-m-nested-column-header .pf-v6-c-table__button {
   --pf-v6-c-table__button--PaddingInlineStart: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineStart);
   --pf-v6-c-table__button--PaddingInlineEnd: var(--pf-v6-c-table__nested-column-header__button--PaddingInlineEnd);

package/components/Table/table.scss

@@ -239,6 +239,9 @@
   --#{$table}__tbody--m-selected--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
 
   // * Table nested column header
+  --#{$table}__thead--m-nested-column-header--BorderBlockEndWidth: var(--#{$table}--border-width--base);
+  --#{$table}__thead--m-nested-column-header--BorderBlockEndColor: var(--#{$table}--BorderColor);
+  --#{$table}__thead--m-nested-column-header--after--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
   --#{$table}__thead--m-nested-column-header--button--OutlineOffset: #{pf-size-prem(-3px)};
   --#{$table}__thead--m-nested-column-header__tr--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --#{$table}__thead--m-nested-column-header__tr--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -254,9 +257,24 @@
   --#{$table}--m-striped__tr--BackgroundColor: var(--pf-t--global--background--color--striped--row--default);
 
   // * Table sticky header
+  --#{$table}--m-sticky-header--BackgroundColor: var(--pf-t--global--background--color--sticky--default);
   --#{$table}--m-sticky-header--cell--ZIndex: var(--pf-t--global--z-index--xs);
   --#{$table}--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
   --#{$table}--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
+  --#{$table}--m-sticky-header--BorderRadius: 0;
+  --#{$table}--m-sticky-header--BoxShadow: 0;
+  --#{$table}--m-sticky-header--BorderBlockEndWidth: var(--#{$table}--border-width--base);
+  --#{$table}--m-sticky-header--BorderBlockEndColor: var(--#{$table}--BorderColor);
+  --#{$table}--m-sticky-header--BorderRadius--glass: var(--pf-t--global--border--radius--medium);
+  --#{$table}--m-sticky-header--BoxShadow--glass: var(--pf-t--global--box-shadow--sm);
+  --#{$table}--m-sticky-header--TransitionTimingFunction--BackgroundColor: var(--pf-t--global--motion--timing-function--default);
+  --#{$table}--m-sticky-header--TransitionDuration--BackgroundColor: var(--pf-t--global--motion--duration--fade--default);
+
+  :where(.pf-v6-theme-glass) & {
+    --#{$table}--m-sticky-header--BorderBlockEndWidth: 0;
+    --#{$table}--m-sticky-header--BoxShadow: var(--#{$table}--m-sticky-header--BoxShadow--glass);
+    --#{$table}--m-sticky-header--BorderRadius: var(--#{$table}--m-sticky-header--BorderRadius--glass);
+  }
 }
 
 // TODO: update grouping comments to // Table {element}
@@ -266,8 +284,8 @@
   width: 100%;
   background-color: var(--#{$table}--BackgroundColor);
 
-  @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
-  &.pf-m-plain {
+  :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
+  :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
     --#{$table}--BackgroundColor: transparent;
     --#{$table}__expandable-row-content--BackgroundColor: transparent;
     --#{$table}__expandable-row-content--PaddingInlineStart: 0;
@@ -279,41 +297,63 @@
     table-layout: fixed;
   }
 
-  // - Table sticky header
-  &.pf-m-sticky-header > .#{$table}__thead,
-  .#{$table}__thead.pf-m-nested-column-header {
-    position: sticky;
-    inset-block-start: 0;
-    z-index: var(--#{$table}--m-sticky-header--ZIndex);
-    background: var(--#{$table}--BackgroundColor);
+  &.pf-m-sticky-header-base > .#{$table}__thead {
+    &::before,
+    &::after {
+      opacity: 0;
+      transition-timing-function: var(--#{$table}--m-sticky-header--TransitionTimingFunction--BackgroundColor);
+      transition-duration: var(--#{$table}--m-sticky-header--TransitionDuration--BackgroundColor);
+      transition-property: opacity;
+    }
+  }
 
-    &::before {
-      position: absolute;
-      inset-block-start: 0;
-      inset-block-end: 0;
-      inset-inline-start: 0;
-      inset-inline-end: 0;
-      z-index: var(--#{$table}--m-sticky-header--border--ZIndex);
-      pointer-events: none;
-      content: '';
-      border-block-end: var(--#{$table}--border-width--base) solid var(--#{$table}--BorderColor);
+  &.pf-m-sticky-header,
+  &.pf-m-sticky-header-stuck {
+    --#{$table}__thead--m-nested-column-header--BorderBlockEndWidth: 0;
+  }
+
+  &.pf-m-sticky-header-stuck > .#{$table}__thead {
+    &::before,
+    &::after {
+      opacity: 1;
     }
   }
 
-  &.pf-m-sticky-header {
+  &.pf-m-sticky-header,
+  &.pf-m-sticky-header-base {
     position: relative;
 
-    thead:where(.#{$table}__thead) tr:where(.#{$table}__tr) {
+    > .#{$table}__thead {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: var(--#{$table}--m-sticky-header--ZIndex);
+
+      &::before {
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        pointer-events: none;
+        content: '';
+        background-color: var(--#{$table}--m-sticky-header--BackgroundColor);
+        border-radius: var(--#{$table}--m-sticky-header--BorderRadius);
+        box-shadow: var(--#{$table}--m-sticky-header--BoxShadow);
+      }
+
       > :where(th, td) {
         z-index: var(--#{$table}--m-sticky-header--cell--ZIndex); // set z-index here to allow sticky column to override
       }
     }
+  }
 
-    // - Table nested column header
-    > .pf-m-nested-column-header {
-      position: sticky;
-      inset-block-start: 0;
-      background: var(--#{$table}--BackgroundColor);
+  &.pf-m-sticky-header,
+  &.pf-m-sticky-header-base {
+    > .#{$table}__thead::after {
+      position: absolute;
+      inset: 0;
+      z-index: var(--#{$table}--m-sticky-header--border--ZIndex);
+      pointer-events: none;
+      content: '';
+      border-block-end: var(--#{$table}--m-sticky-header--BorderBlockEndWidth) solid var(--#{$table}--m-sticky-header--BorderBlockEndColor);
     }
   }
 
@@ -1216,6 +1256,17 @@
 
   // - Table nested column header button
   &.pf-m-nested-column-header {
+    position: relative;
+
+    &::after {
+      position: absolute;
+      inset: 0;
+      z-index: var(--#{$table}__thead--m-nested-column-header--after--ZIndex);
+      pointer-events: none;
+      content: '';
+      border-block-end: var(--#{$table}__thead--m-nested-column-header--BorderBlockEndWidth) solid var(--#{$table}__thead--m-nested-column-header--BorderBlockEndColor);
+    }
+
     .#{$table}__button {
       --#{$table}__button--PaddingInlineStart: var(--#{$table}__nested-column-header__button--PaddingInlineStart);
       --#{$table}__button--PaddingInlineEnd: var(--#{$table}__nested-column-header__button--PaddingInlineEnd);

package/components/Wizard/wizard.css

@@ -163,14 +163,14 @@
 .pf-v6-c-wizard.pf-m-finished .pf-v6-c-wizard__toggle {
   display: none;
 }
-:where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
+:where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-wizard.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass) {
   --pf-v6-c-wizard__header--BackgroundColor: var(--pf-v6-c-wizard--m-plain__header--BackgroundColor);
   --pf-v6-c-wizard__toggle--BackgroundColor: var(--pf-v6-c-wizard--m-plain__toggle--BackgroundColor);
   --pf-v6-c-wizard__outer-wrap--BackgroundColor: var(--pf-v6-c-wizard--m-plain__outer-wrap--BackgroundColor);
   --pf-v6-c-wizard__footer--BackgroundColor: var(--pf-v6-c-wizard--m-plain__footer--BackgroundColor);
 }
 @media screen and (min-width: 62rem) {
-  :where(.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass), .pf-v6-c-wizard.pf-m-plain {
+  :where(:root:not(.pf-v6-theme-glass)) .pf-v6-c-wizard.pf-m-plain, :where(:root.pf-v6-theme-glass) .pf-v6-c-wizard:not(.pf-m-no-plain-on-glass) {
     --pf-v6-c-wizard__nav--BackgroundColor: var(--pf-v6-c-wizard--m-plain__nav--BackgroundColor);
   }
 }

package/components/Wizard/wizard.scss

@@ -224,15 +224,15 @@
     }
   }
 
-  @at-root :where(.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass),
-  &.pf-m-plain {
+  :where(:root:not(.pf-v6-theme-glass)) &.pf-m-plain,
+  :where(:root.pf-v6-theme-glass) &:not(.pf-m-no-plain-on-glass) {
     --#{$wizard}__header--BackgroundColor: var(--#{$wizard}--m-plain__header--BackgroundColor);
     --#{$wizard}__toggle--BackgroundColor: var(--#{$wizard}--m-plain__toggle--BackgroundColor);
     --#{$wizard}__outer-wrap--BackgroundColor: var(--#{$wizard}--m-plain__outer-wrap--BackgroundColor);
     --#{$wizard}__footer--BackgroundColor: var(--#{$wizard}--m-plain__footer--BackgroundColor);
-    
+
     @media screen and (min-width: $pf-v6-global--breakpoint--lg) {
-      --#{$wizard}__nav--BackgroundColor: var(--#{$wizard}--m-plain__nav--BackgroundColor);   
+      --#{$wizard}__nav--BackgroundColor: var(--#{$wizard}--m-plain__nav--BackgroundColor);
     }
   }
 }