@patternfly/patternfly 6.5.0-prerelease.86 → 6.5.0-prerelease.88

package/base/normalize.scss

@@ -8,7 +8,7 @@
     box-sizing: border-box;
     scrollbar-color: var(--pf-t--global--border--color--default) transparent;
   }
-    
+
   // styling scrollbar color in Safari requires setting max-width and max-height
   *::-webkit-scrollbar-thumb {
     background-color: var(--pf-t--global--border--color--default);
@@ -24,6 +24,14 @@
     max-height: var(--pf-t--global--spacer--sm);
   }
 
+  :where(html) {
+    background-image: var(--pf-t--global--background--image--default);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+    background-position: center;
+    background-size: cover;
+  }
+
   :where(
     html,
     body

package/base/patternfly-variables.css

@@ -980,9 +980,7 @@
     var(--pf-t--global--box-shadow--color--lg--directional);
   --pf-t--global--list-style: disc outside;
   --pf-t--temp--dev--tbd: #BC11E0;
-}
-:root:where(.pf-v6-theme-glass) {
-  --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
+  --pf-t--global--background--image--default: none;
 }
 
 :root:where(.pf-v6-theme-high-contrast) {
@@ -1701,6 +1699,8 @@
   --pf-t--global--border--radius--glass--default: var(--pf-t--global--border--radius--medium);
   --pf-t--global--border--width--glass--default: var(--pf-t--global--border--width--regular);
   --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
+  --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass, url("../assets/images/PF-Bkg-Generic-Light.svg"));
+  --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
 }
 
 :root:where(.pf-v6-theme-felt) {
@@ -1863,6 +1863,7 @@
   --pf-t--global--color--brand--accent--default: var(--pf-t--global--color--brand--accent--100);
   --pf-t--global--color--brand--accent--hover: var(--pf-t--global--color--brand--accent--200);
   --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
+  --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass, url("../assets/images/Felt-Bkg-Generic-Light.svg"));
 }
 
 :root:where(.pf-v6-theme-dark) {
@@ -2719,6 +2720,7 @@
   --pf-t--global--border--color--glass--default: var(--pf-t--global--border--color--alt);
   --pf-t--global--border--color--subtle: var(--pf-t--global--dark--border--color--50);
   --pf-t--global--background--color--floating--secondary--default: var(--pf-t--global--background--color--floating--default);
+  --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass--dark, url("../assets/images/PF-Bkg-Generic-Dark.svg"));
 }
 
 :root:where(.pf-v6-theme-dark.pf-v6-theme-felt) {
@@ -2818,6 +2820,7 @@
   --pf-t--global--text--color--on-brand--accent--clicked: var(--pf-t--global--text--color--regular);
   --pf-t--global--text--color--on-brand--accent--default: var(--pf-t--global--text--color--regular);
   --pf-t--global--text--color--on-brand--accent--hover: var(--pf-t--global--text--color--regular);
+  --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass--dark, url("../assets/images/Felt-Bkg-Generic-Dark.svg"));
 }
 
 :is(.pf-v6-m-dir-rtl, [dir=rtl]) {

package/base/patternfly-variables.scss

@@ -13,6 +13,10 @@
 @use "./tokens/tokens-felt-highcontrast-dark" as felt-highcontrast-dark;
 @use "./tokens/tokens-felt-glass" as felt-glass;
 @use "./tokens/tokens-felt-glass-dark" as felt-glass-dark;
+@use "./tokens/tokens-local-felt-glass-dark" as local-felt-glass-dark;
+@use "./tokens/tokens-local-felt-glass" as local-felt-glass;
+@use "./tokens/tokens-local-glass-dark" as local-glass-dark;
+@use "./tokens/tokens-local-glass" as local-glass;
 
 :root {
   @include pf-v6-set-inverse(false);
@@ -28,6 +32,7 @@
 
 :root:where(.pf-v6-theme-glass) {
   @include glass.pf-v6-tokens;
+  @include local-glass.pf-v6-tokens;
 }
 
 :root:where(.pf-v6-theme-felt) {
@@ -40,6 +45,7 @@
 
 :root:where(.pf-v6-theme-felt.pf-v6-theme-glass) {
   @include felt-glass.pf-v6-tokens;
+  @include local-felt-glass.pf-v6-tokens;
 }
 
 // Dark
@@ -53,6 +59,7 @@
 
 :root:where(.pf-v6-theme-dark.pf-v6-theme-glass) {
   @include glass-dark.pf-v6-tokens;
+  @include local-glass-dark.pf-v6-tokens;
 }
 
 :root:where(.pf-v6-theme-dark.pf-v6-theme-felt) {
@@ -65,6 +72,7 @@
 
 :root:where(.pf-v6-theme-dark.pf-v6-theme-felt.pf-v6-theme-glass) {
   @include felt-glass-dark.pf-v6-tokens;
+  @include local-felt-glass-dark.pf-v6-tokens;
 }
 
 // RTL

package/base/tokens/tokens-local-felt-glass-dark.scss

@@ -0,0 +1,5 @@
+@use '../../sass-utilities/init' as *;
+
+@mixin pf-v6-tokens {
+  --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass--dark, url("./assets/images/Felt-Bkg-Generic-Dark.svg"));
+}

package/base/tokens/tokens-local-felt-glass.scss

@@ -0,0 +1,5 @@
+@use '../../sass-utilities/init' as *;
+
+@mixin pf-v6-tokens {
+  --pf-t--global--background--image--default: var(--pf-t--global--background--image--felt--glass, url("./assets/images/Felt-Bkg-Generic-Light.svg"));
+}

package/base/tokens/tokens-local-glass-dark.scss

@@ -0,0 +1,5 @@
+@use '../../sass-utilities/init' as *;
+
+@mixin pf-v6-tokens {
+  --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass--dark, url("./assets/images/PF-Bkg-Generic-Dark.svg"));
+}

package/base/tokens/tokens-local-glass.scss

@@ -0,0 +1,6 @@
+@use '../../sass-utilities/init' as *;
+
+@mixin pf-v6-tokens {
+  --pf-t--global--background--image--default: var(--pf-t--global--background--image--glass, url("./assets/images/PF-Bkg-Generic-Light.svg"));
+  --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
+}

package/base/tokens/tokens-local.scss

@@ -137,8 +137,6 @@
   --pf-t--temp--dev--tbd: #BC11E0;
   // stylelint-enable
 
-  // Glass theme tokens
-  &:where(.pf-v6-theme-glass) {
-    --pf-t--global--box-shadow--glass--default: var(--pf-t--global--box-shadow--md);
-  }
+  // Background images (overridden by glass / felt / dark local token mixins)
+  --pf-t--global--background--image--default: none;
 }

package/components/Compass/compass.css

@@ -1,7 +1,5 @@
 .pf-v6-c-compass {
-  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--light);
-  --pf-v6-c-compass--BackgroundImage--light: none;
-  --pf-v6-c-compass--BackgroundImage--dark: none;
+  --pf-v6-c-compass--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -59,7 +57,7 @@
     --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
     --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s;
   }
-  .pf-v6-c-compass.pf-m-animate-smoothly {
+  .pf-v6-c-compass.pf-m-animate-smoothly .pf-v6-c-compass__container {
     --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
     --pf-v6-c-compass--section--slide--length--header: 10rem;
     --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
@@ -70,23 +68,19 @@
     --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration);
   }
 }
+.pf-v6-c-compass {
+  --pf-v6-c-compass--BackgroundColor--glass: transparent;
+}
+:where(.pf-v6-theme-glass) .pf-v6-c-compass {
+  --pf-v6-c-compass--BackgroundColor: var(--pf-v6-c-compass--BackgroundColor--glass);
+}
 
 .pf-v6-c-compass {
   interpolate-size: allow-keywords;
-  display: grid;
-  grid-template-areas: "header header header" "sidebar-start main sidebar-end";
-  grid-template-rows: auto 1fr;
-  grid-template-columns: auto 1fr auto;
-  grid-auto-rows: auto;
-  align-items: center;
-  justify-content: center;
   height: 100dvh;
-  padding: var(--pf-v6-c-compass--Padding);
-  overflow: hidden;
-  background-image: var(--pf-v6-c-compass--BackgroundImage);
-  background-size: cover;
+  background-color: var(--pf-v6-c-compass--BackgroundColor);
 }
-.pf-v6-c-compass.pf-m-docked {
+.pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container {
   grid-template-areas: "header" "main";
   grid-template-rows: max-content 1fr;
   grid-template-columns: 1fr;
@@ -96,15 +90,12 @@
 .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
   padding: var(--pf-v6-c-compass--Padding);
 }
-.pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
+.pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
   --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
   grid-area: header;
 }
-:root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
-  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
-}
 @media (min-width: 62rem) {
-  .pf-v6-c-compass.pf-m-docked {
+  .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container {
     grid-template-areas: "dock main";
     grid-template-rows: auto;
     grid-template-columns: auto 1fr;
@@ -112,7 +103,7 @@
     align-items: stretch;
     padding: 0;
   }
-  .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
+  .pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
     display: none;
   }
 }
@@ -172,6 +163,19 @@
   }
 }
 
+.pf-v6-c-compass__container {
+  display: grid;
+  grid-template-areas: "header header header" "sidebar-start main sidebar-end";
+  grid-template-rows: auto 1fr;
+  grid-template-columns: auto 1fr auto;
+  grid-auto-rows: auto;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--pf-v6-c-compass--Padding);
+  overflow: hidden;
+}
+
 .pf-v6-c-compass__header,
 .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
 .pf-v6-c-compass__main-footer,

package/components/Compass/compass.scss

@@ -1,9 +1,7 @@
 @use '../../sass-utilities' as *;
 
 @include pf-root($compass) {
-  --#{$compass}--BackgroundImage: var(--#{$compass}--BackgroundImage--light);
-  --#{$compass}--BackgroundImage--light: none;
-  --#{$compass}--BackgroundImage--dark: none;
+  --#{$compass}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$compass}--Padding: var(--pf-t--global--spacer--inset--page-chrome);
   --#{$compass}--Gap: var(--pf-t--global--spacer--inset--page-chrome);
   --#{$compass}__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -68,7 +66,7 @@
     --#{$compass}--section--TransitionDelay: 0s, var(--#{$compass}--section--duration), 0s, var(--#{$compass}--section--duration), var(--#{$compass}--section--duration), var(--#{$compass}--section--duration);
     --#{$compass}--section--m-expanded--TransitionDuration: var(--#{$compass}--section--m-expanded--duration), 0s, var(--#{$compass}--section--m-expanded--duration), 0s, 0s, 0s;
 
-    &.pf-m-animate-smoothly {
+    &.pf-m-animate-smoothly .#{$compass}__container {
       --#{$compass}--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
       --#{$compass}--section--slide--length--header: 10rem;
       --#{$compass}--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
@@ -79,62 +77,55 @@
       --#{$compass}--section--m-expanded--TransitionDuration: var(--#{$compass}--section--m-expanded--duration), 0s, var(--#{$compass}--section--m-expanded--duration), var(--#{$compass}--section--m-expanded--duration), var(--#{$compass}--section--m-expanded--duration);
     }
   }
+
+  // Glass theme
+  --#{$compass}--BackgroundColor--glass: transparent;
+
+  :where(.pf-v6-theme-glass) & {
+    --#{$compass}--BackgroundColor: var(--#{$compass}--BackgroundColor--glass);
+  }
 }
 
 .#{$compass} {
   // stylelint-disable-next-line
   interpolate-size: allow-keywords;
-  display: grid;
-  grid-template-areas:
-    "header header header"
-    "sidebar-start main sidebar-end";
-  grid-template-rows: auto 1fr;
-  grid-template-columns: auto 1fr auto;
-  grid-auto-rows: auto;
-  align-items: center;
-  justify-content: center;
   height: 100dvh;
-  padding: var(--#{$compass}--Padding);
-  overflow: hidden;
-  background-image: var(--#{$compass}--BackgroundImage);
-  background-size: cover;
+  background-color: var(--#{$compass}--BackgroundColor);
 
   &.pf-m-docked {
-    grid-template-areas:
-      "header"
-      "main";
-    grid-template-rows: max-content 1fr;
-    grid-template-columns: 1fr;
-    align-items: stretch;
-    padding: 0;
+    .#{$compass}__container {
+      grid-template-areas:
+        "header"
+        "main";
+      grid-template-rows: max-content 1fr;
+      grid-template-columns: 1fr;
+      align-items: stretch;
+      padding: 0;
+    }
 
     .#{$compass}__main {
       padding: var(--#{$compass}--Padding);
     }
 
-    > .#{$masthead} {
+    > .#{$compass}__container > .#{$masthead} {
       --#{$masthead}--BackgroundColor: var(--#{$compass}--m-docked__masthead--BackgroundColor);
   
       grid-area: header;
     }
   }
 
-  :root:where(.#{$pf-prefix}theme-dark) & {
-    --#{$compass}--BackgroundImage: var(--#{$compass}--BackgroundImage--dark);
-  }
-
   @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
-    &.pf-m-docked {
+    &.pf-m-docked .#{$compass}__container {
       grid-template-areas: "dock main";
       grid-template-rows: auto;
       grid-template-columns: auto 1fr;
       row-gap: var(--#{$compass}__main--RowGap);
       align-items: stretch;
       padding: 0;
-
-      > .#{$masthead} {
-        display: none;
-      }
+    }
+    
+    &.pf-m-docked > .#{$compass}__container > .#{$masthead} {
+      display: none;
     }
   }
 
@@ -172,6 +163,21 @@
   }
 }
 
+.#{$compass}__container {
+  display: grid;
+  grid-template-areas:
+    "header header header"
+    "sidebar-start main sidebar-end";
+  grid-template-rows: auto 1fr;
+  grid-template-columns: auto 1fr auto;
+  grid-auto-rows: auto;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--#{$compass}--Padding);
+  overflow: hidden;
+}
+
 .#{$compass}__header,
 .#{$compass}__sidebar:is(.pf-m-start, .pf-m-end),
 .#{$compass}__main-footer,

package/components/Page/page.css

@@ -220,6 +220,7 @@
   --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-page {
   --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -241,6 +242,7 @@
   --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
   --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
   --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
+  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
 }
 @media (min-width: 75rem) {
   .pf-v6-c-page {

package/components/Page/page.scss

@@ -264,6 +264,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --#{$page}__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --#{$page}__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
+  --#{$page}__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
 
   :where(.pf-v6-theme-glass) & {
     --#{$page}--BackgroundColor: var(--#{$page}--BackgroundColor--glass);
@@ -285,6 +286,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     --#{$page}__sidebar-main--BorderRadius: var(--#{$page}__sidebar-main--BorderRadius--glass);
     --#{$page}__sidebar-main--BoxShadow: var(--#{$page}__sidebar-main--BoxShadow--glass);
     --#{$page}__main-container--MarginBlockStart: var(--#{$page}__main-container--MarginBlockStart--glass);
+    --#{$page}__main-container--MaxHeight: var(--#{$page}__main-container--MaxHeight--glass);
   }
 
   @media (min-width: $pf-v6-global--breakpoint--xl) {

package/components/_index.css

@@ -3683,9 +3683,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 }
 
 .pf-v6-c-compass {
-  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--light);
-  --pf-v6-c-compass--BackgroundImage--light: none;
-  --pf-v6-c-compass--BackgroundImage--dark: none;
+  --pf-v6-c-compass--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-compass--Padding: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-compass--Gap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-compass__nav--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -3743,7 +3741,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
     --pf-v6-c-compass--section--TransitionDelay: 0s, var(--pf-v6-c-compass--section--duration), 0s, var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration), var(--pf-v6-c-compass--section--duration);
     --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), 0s, 0s, 0s;
   }
-  .pf-v6-c-compass.pf-m-animate-smoothly {
+  .pf-v6-c-compass.pf-m-animate-smoothly .pf-v6-c-compass__container {
     --pf-v6-c-compass--section--TransitionProperty: opacity, visibility, translate, height, width, margin;
     --pf-v6-c-compass--section--slide--length--header: 10rem;
     --pf-v6-c-compass--section--slide--length--sidebar: var(--pf-t--global--spacer--4xl);
@@ -3754,23 +3752,19 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
     --pf-v6-c-compass--section--m-expanded--TransitionDuration: var(--pf-v6-c-compass--section--m-expanded--duration), 0s, var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration), var(--pf-v6-c-compass--section--m-expanded--duration);
   }
 }
+.pf-v6-c-compass {
+  --pf-v6-c-compass--BackgroundColor--glass: transparent;
+}
+:where(.pf-v6-theme-glass) .pf-v6-c-compass {
+  --pf-v6-c-compass--BackgroundColor: var(--pf-v6-c-compass--BackgroundColor--glass);
+}
 
 .pf-v6-c-compass {
   interpolate-size: allow-keywords;
-  display: grid;
-  grid-template-areas: "header header header" "sidebar-start main sidebar-end";
-  grid-template-rows: auto 1fr;
-  grid-template-columns: auto 1fr auto;
-  grid-auto-rows: auto;
-  align-items: center;
-  justify-content: center;
   height: 100dvh;
-  padding: var(--pf-v6-c-compass--Padding);
-  overflow: hidden;
-  background-image: var(--pf-v6-c-compass--BackgroundImage);
-  background-size: cover;
+  background-color: var(--pf-v6-c-compass--BackgroundColor);
 }
-.pf-v6-c-compass.pf-m-docked {
+.pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container {
   grid-template-areas: "header" "main";
   grid-template-rows: max-content 1fr;
   grid-template-columns: 1fr;
@@ -3780,15 +3774,12 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
   padding: var(--pf-v6-c-compass--Padding);
 }
-.pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
+.pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
   --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
   grid-area: header;
 }
-:root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
-  --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
-}
 @media (min-width: 62rem) {
-  .pf-v6-c-compass.pf-m-docked {
+  .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container {
     grid-template-areas: "dock main";
     grid-template-rows: auto;
     grid-template-columns: auto 1fr;
@@ -3796,7 +3787,7 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
     align-items: stretch;
     padding: 0;
   }
-  .pf-v6-c-compass.pf-m-docked > .pf-v6-c-masthead {
+  .pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
     display: none;
   }
 }
@@ -3856,6 +3847,19 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   }
 }
 
+.pf-v6-c-compass__container {
+  display: grid;
+  grid-template-areas: "header header header" "sidebar-start main sidebar-end";
+  grid-template-rows: auto 1fr;
+  grid-template-columns: auto 1fr auto;
+  grid-auto-rows: auto;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--pf-v6-c-compass--Padding);
+  overflow: hidden;
+}
+
 .pf-v6-c-compass__header,
 .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
 .pf-v6-c-compass__main-footer,
@@ -13877,6 +13881,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__sidebar-main--xl--MarginInlineStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__sidebar-main--xl--MarginInlineEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__main-container--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page__main-container--MaxHeight--glass: calc(100% - var(--pf-t--global--spacer--inset--page-chrome) * 2);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-page {
   --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
@@ -13898,6 +13903,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__sidebar-main--BorderRadius: var(--pf-v6-c-page__sidebar-main--BorderRadius--glass);
   --pf-v6-c-page__sidebar-main--BoxShadow: var(--pf-v6-c-page__sidebar-main--BoxShadow--glass);
   --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page__main-container--MarginBlockStart--glass);
+  --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page__main-container--MaxHeight--glass);
 }
 @media (min-width: 75rem) {
   .pf-v6-c-page {

package/docs/components/Compass/examples/Compass.md

@@ -9,7 +9,7 @@ cssPrefix: pf-v6-c-compass
 
 ### Basic
 
-In a basic Compass layout, the page structure is defined by the order of elements nested within the main `.pf-v6-c-compass` container:
+In a basic Compass layout, the page structure is defined by the order of elements nested within `.pf-v6-c-compass__container` (inside `.pf-v6-c-compass`):
 
 * **Header:** Content rendered at the top of the page (`.pf-v6-c-compass__header`), typically containing a logo (`.pf-v6-c-compass__logo`), middle navigation (`.pf-v6-c-compass__nav`), and profile (`.pf-v6-c-compass__profile`).
 * **Start sidebar:** Content rendered at the horizontal start of the page (by default, the left side). In this example, a `.pf-v6-c-compass__sidebar` with the `.pf-m-start` modifier.
@@ -19,36 +19,40 @@ In a basic Compass layout, the page structure is defined by the order of element
 
 ```html isBeta
 <div class="pf-v6-c-compass pf-m-animate-smoothly">
-  <div class="pf-v6-c-compass__header pf-m-expanded">
-    <div class="pf-v6-c-compass__logo">logo</div>
+  <div class="pf-v6-c-compass__container">
+    <div class="pf-v6-c-compass__header pf-m-expanded">
+      <div class="pf-v6-c-compass__logo">logo</div>
 
-    <div class="pf-v6-c-compass__nav">
-      <div class="pf-v6-c-compass__nav-content">
-        <div class="pf-v6-c-compass__nav-home">home</div>
+      <div class="pf-v6-c-compass__nav">
+        <div class="pf-v6-c-compass__nav-content">
+          <div class="pf-v6-c-compass__nav-home">home</div>
 
-        <div class="pf-v6-c-compass__nav-main">main</div>
+          <div class="pf-v6-c-compass__nav-main">main</div>
 
-        <div class="pf-v6-c-compass__nav-search">search</div>
+          <div class="pf-v6-c-compass__nav-search">search</div>
+        </div>
       </div>
+      <div class="pf-v6-c-compass__profile">profile</div>
     </div>
-    <div class="pf-v6-c-compass__profile">profile</div>
-  </div>
-  <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-start">sidebar (start)</div>
+    <div
+      class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-start"
+    >sidebar (start)</div>
+
+    <div class="pf-v6-c-compass__main">
+      <div class="pf-v6-c-compass__hero">hero</div>
+      <div class="pf-v6-c-compass__main-header">
+        <div class="pf-v6-c-compass__main-header-content">main header</div>
+      </div>
+      <div class="pf-v6-c-compass__content">content</div>
 
-  <div class="pf-v6-c-compass__main">
-    <div class="pf-v6-c-compass__hero">hero</div>
-    <div class="pf-v6-c-compass__main-header">
-      <div class="pf-v6-c-compass__main-header-content">main header</div>
+      <div class="pf-v6-c-compass__main-footer pf-m-expanded">
+        <div class="pf-v6-c-compass__message-bar">message bar</div>
+      </div>
     </div>
-    <div class="pf-v6-c-compass__content">content</div>
+    <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">sidebar (end)</div>
 
-    <div class="pf-v6-c-compass__main-footer pf-m-expanded">
-      <div class="pf-v6-c-compass__message-bar">message bar</div>
-    </div>
+    <div class="pf-v6-c-compass__footer pf-m-expanded">footer</div>
   </div>
-  <div class="pf-v6-c-compass__sidebar pf-m-expanded pf-m-end">sidebar (end)</div>
-
-  <div class="pf-v6-c-compass__footer pf-m-expanded">footer</div>
 </div>
 
 ```
@@ -57,18 +61,20 @@ In a basic Compass layout, the page structure is defined by the order of element
 
 ```html isBeta
 <div class="pf-v6-c-compass pf-m-animate-smoothly pf-m-docked">
-  <header class="pf-v6-c-masthead pf-m-display-inline">
-    <div class="pf-v6-c-masthead__main">masthead main</div>
-    <div class="pf-v6-c-masthead__content">masthead content</div>
-  </header>
-  <div class="pf-v6-c-compass__dock">
-    <div class="pf-v6-c-compass__dock-main">dock</div>
-  </div>
-  <div class="pf-v6-c-compass__main">
-    <div class="pf-v6-c-compass__main-header">
-      <div class="pf-v6-c-compass__main-header-content">main header</div>
+  <div class="pf-v6-c-compass__container">
+    <header class="pf-v6-c-masthead pf-m-display-inline">
+      <div class="pf-v6-c-masthead__main">masthead main</div>
+      <div class="pf-v6-c-masthead__content">masthead content</div>
+    </header>
+    <div class="pf-v6-c-compass__dock">
+      <div class="pf-v6-c-compass__dock-main">dock</div>
+    </div>
+    <div class="pf-v6-c-compass__main">
+      <div class="pf-v6-c-compass__main-header">
+        <div class="pf-v6-c-compass__main-header-content">main header</div>
+      </div>
+      <div class="pf-v6-c-compass__content">content</div>
     </div>
-    <div class="pf-v6-c-compass__content">content</div>
   </div>
 </div>
 
@@ -80,12 +86,13 @@ In a basic Compass layout, the page structure is defined by the order of element
 
 | Class | Applied to | Outcome |
 | -- | -- | -- |
-| `.pf-v6-c-compass` | `<div>` | Initiates the Compass component. **Required** |
+| `.pf-v6-c-compass` | `<div>` | Outermost wrapper for the Compass component. Handles background. **Required** |
+| `.pf-v6-c-compass__container` | `<div>` | Grid wrapper for Compass regions. **Required** |
 | `.pf-v6-c-compass__header` | `<div>` | Initiates the Compass header. **Required** |
 | `.pf-v6-c-compass__logo` | `<div>` | Initiates the Compass logo header. |
 | `.pf-v6-c-compass__dock` | `<div>` | Initiates the Compass dock. |
-| `.pf-v6-c-compass__dock-main` | `<div>` | Initiates the Compass dock main wrapper. |
 | `.pf-v6-c-compass__profile` | `<div>` | Initiates the Compass profile. |
+| `.pf-v6-c-compass__dock-main` | `<div>` | Initiates the Compass dock main wrapper. |
 | `.pf-v6-c-compass__sidebar` | `<div>` | Initiates a Compass sidebar. **Required** |
 | `.pf-v6-c-compass__main` | `<div>` | Initiates the Compass main wrapper. **Required** |
 | `.pf-v6-c-compass__main-header` | `<div>` | Initiates the Compass main header. |