@patternfly/patternfly 6.5.0-prerelease.66 → 6.5.0-prerelease.68

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/Card/card.css

@@ -188,6 +188,14 @@
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
   --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
 }
+.pf-v6-c-card.pf-m-plain.pf-m-selectable, .pf-v6-c-card.pf-m-plain.pf-m-clickable {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
+}
+.pf-v6-c-card.pf-m-plain.pf-m-selectable.pf-m-current, .pf-v6-c-card.pf-m-plain.pf-m-clickable.pf-m-current {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--m-clickable--m-current--BorderWidth);
+}
 .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
   transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
 }

package/components/Card/card.scss

@@ -266,6 +266,19 @@
     --#{$card}--BorderColor: var(--#{$card}--m-plain--BorderColor);
     --#{$card}--BackgroundColor: var(--#{$card}--m-plain--BackgroundColor);
     --#{$card}--BoxShadow: var(--#{$card}--m-plain--BoxShadow);
+
+    // A clickable/selectable plain card should behave like a non-plain card in every way except the background color
+    &.pf-m-selectable,
+    &.pf-m-clickable {
+      --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
+      --#{$card}--BorderWidth: var(--#{$card}--m-selectable--BorderWidth);
+      
+      &.pf-m-current {
+        --#{$card}--BorderColor: var(--#{$card}--m-selectable--m-clickable--m-current--BorderColor);
+        --#{$card}--BorderWidth: var(--#{$card}--m-selectable--m-clickable--m-current--BorderWidth);
+      }
+    }
+
   }
 
   &.pf-m-expanded {

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/OverflowMenu/overflow-menu.css

@@ -1,15 +1,26 @@
 .pf-v6-c-overflow-menu {
   --pf-v6-c-overflow-menu--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-overflow-menu--RowGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-overflow-menu__group--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-overflow-menu__group--RowGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-overflow-menu__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-overflow-menu__group--m-button-group--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap: var(--pf-t--global--spacer--xs);
 }
 
 .pf-v6-c-overflow-menu {
   display: inline-flex;
+  row-gap: var(--pf-v6-c-overflow-menu--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
 }
 
+.pf-v6-c-overflow-menu.pf-m-vertical,
+.pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__content,
+.pf-v6-c-overflow-menu.pf-m-vertical .pf-v6-c-overflow-menu__group {
+  flex-direction: column;
+}
+
 .pf-v6-c-overflow-menu__content,
 .pf-v6-c-overflow-menu__group {
   display: flex;
@@ -17,20 +28,25 @@
 }
 
 .pf-v6-c-overflow-menu__group {
+  row-gap: var(--pf-v6-c-overflow-menu__group--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu__group--ColumnGap);
 }
 .pf-v6-c-overflow-menu__group.pf-m-button-group {
+  row-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu__group--m-button-group--ColumnGap);
 }
 .pf-v6-c-overflow-menu__group.pf-m-icon-button-group {
+  row-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu__group--m-icon-button-group--ColumnGap);
 }
 
 .pf-v6-c-overflow-menu__item {
+  row-gap: var(--pf-v6-c-overflow-menu__item--RowGap, var(--pf-v6-c-overflow-menu--RowGap));
   column-gap: var(--pf-v6-c-overflow-menu__item--ColumnGap, var(--pf-v6-c-overflow-menu--ColumnGap));
 }
 
 .pf-v6-c-overflow-menu__content,
 .pf-v6-c-overflow-menu__control {
+  row-gap: var(--pf-v6-c-overflow-menu--RowGap);
   column-gap: var(--pf-v6-c-overflow-menu--ColumnGap);
 }

package/components/OverflowMenu/overflow-menu.scss

@@ -2,23 +2,37 @@
 
 @include pf-root($overflow-menu) {
   --#{$overflow-menu}--ColumnGap: var(--pf-t--global--spacer--md);
+  --#{$overflow-menu}--RowGap: var(--pf-t--global--spacer--md);
 
   // * Overflow menu group
   --#{$overflow-menu}__group--ColumnGap: var(--pf-t--global--spacer--md);
+  --#{$overflow-menu}__group--RowGap: var(--pf-t--global--spacer--md);
 
   // * Overflow menu button group
   --#{$overflow-menu}__group--m-button-group--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$overflow-menu}__group--m-button-group--RowGap: var(--pf-t--global--spacer--sm);
 
   // * Overflow menu icon button group
   --#{$overflow-menu}__group--m-icon-button-group--ColumnGap: var(--pf-t--global--spacer--xs);
+  --#{$overflow-menu}__group--m-icon-button-group--RowGap: var(--pf-t--global--spacer--xs);
 }
 
 // - Overflow menu
 .#{$overflow-menu} {
   display: inline-flex;
+  row-gap: var(--#{$overflow-menu}--RowGap);
   column-gap: var(--#{$overflow-menu}--ColumnGap);
 }
 
+// - Overflow menu - vertical
+.#{$overflow-menu}.pf-m-vertical {
+  &,
+  .#{$overflow-menu}__content,
+  .#{$overflow-menu}__group {
+    flex-direction: column;
+  }
+}
+
 // - Overflow menu content - Overflow menu group
 .#{$overflow-menu}__content,
 .#{$overflow-menu}__group {
@@ -28,26 +42,31 @@
 
 // - Overflow menu group
 .#{$overflow-menu}__group {
+  row-gap: var(--#{$overflow-menu}__group--RowGap);
   column-gap: var(--#{$overflow-menu}__group--ColumnGap);
-
+  
   // - Overflow menu button group
   &.pf-m-button-group {
+    row-gap: var(--#{$overflow-menu}__group--m-button-group--RowGap);
     column-gap: var(--#{$overflow-menu}__group--m-button-group--ColumnGap);
   }
 
   // - Overflow menu icon button group
   &.pf-m-icon-button-group {
+    row-gap: var(--#{$overflow-menu}__group--m-icon-button-group--RowGap);
     column-gap: var(--#{$overflow-menu}__group--m-icon-button-group--ColumnGap);
   }
 }
 
 // - Oveflow menu item
 .#{$overflow-menu}__item {
+  row-gap: var(--#{$overflow-menu}__item--RowGap, var(--#{$overflow-menu}--RowGap));
   column-gap: var(--#{$overflow-menu}__item--ColumnGap, var(--#{$overflow-menu}--ColumnGap));
 }
 
 // - Overflow menu content - Overflow menu control
 .#{$overflow-menu}__content,
 .#{$overflow-menu}__control  {
+  row-gap: var(--#{$overflow-menu}--RowGap);
   column-gap: var(--#{$overflow-menu}--ColumnGap);
 }

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

@@ -186,14 +186,13 @@
   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;
 }

package/components/Table/table.scss

@@ -284,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;

package/components/Toolbar/toolbar.css

@@ -66,6 +66,66 @@
 .pf-v6-c-toolbar__item.pf-m-hidden {
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
 }
+@media screen and (min-height: 0) {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm-height,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-sm-height,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-sm-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-sm-height,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-sm-height,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-sm-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 40rem) {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-md-height,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-md-height,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-md-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-md-height,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-md-height,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-md-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 48rem) {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-lg-height,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-lg-height,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-lg-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-lg-height,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-lg-height,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-lg-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 60rem) {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-xl-height,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-xl-height,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-xl-height,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-xl-height,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 80rem) {
+  .pf-v6-c-toolbar__content-section.pf-m-hidden-on-2xl-height,
+  .pf-v6-c-toolbar__group.pf-m-hidden-on-2xl-height,
+  .pf-v6-c-toolbar__item.pf-m-hidden-on-2xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content-section.pf-m-visible-on-2xl-height,
+  .pf-v6-c-toolbar__group.pf-m-visible-on-2xl-height,
+  .pf-v6-c-toolbar__item.pf-m-visible-on-2xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
 @media screen and (min-width: 36rem) {
   .pf-v6-c-toolbar__content-section.pf-m-hidden-on-sm,
   .pf-v6-c-toolbar__group.pf-m-hidden-on-sm,
@@ -141,6 +201,46 @@
 .pf-v6-c-toolbar__content.pf-m-hidden {
   --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
 }
+@media screen and (min-height: 0) {
+  .pf-v6-c-toolbar__content.pf-m-hidden-on-sm-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content.pf-m-visible-on-sm-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 40rem) {
+  .pf-v6-c-toolbar__content.pf-m-hidden-on-md-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content.pf-m-visible-on-md-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 48rem) {
+  .pf-v6-c-toolbar__content.pf-m-hidden-on-lg-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content.pf-m-visible-on-lg-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 60rem) {
+  .pf-v6-c-toolbar__content.pf-m-hidden-on-xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content.pf-m-visible-on-xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-height: 80rem) {
+  .pf-v6-c-toolbar__content.pf-m-hidden-on-2xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-toolbar__content.pf-m-visible-on-2xl-height {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
 @media screen and (min-width: 36rem) {
   .pf-v6-c-toolbar__content.pf-m-hidden-on-sm {
     --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);

package/components/Toolbar/toolbar.scss

@@ -101,7 +101,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
 .#{$toolbar}__content-section,
 .#{$toolbar}__group,
 .#{$toolbar}__item {
-  @include pf-v6-hidden-visible(flex);
+  @include pf-v6-hidden-visible(flex, $ifIncludeHeight: true);
 }
 
 // - Toolbar - Toolbar content
@@ -112,7 +112,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
 
 // - Toolbar content - Toolbar content section - Toolbar expandable content
 .#{$toolbar}__content {
-  @include pf-v6-hidden-visible(grid);
+  @include pf-v6-hidden-visible(grid, $ifIncludeHeight: true);
 
   row-gap: var(--#{$toolbar}__content--RowGap);
   padding-inline-start: var(--#{$toolbar}__content--PaddingInlineStart);

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);
     }
   }
 }