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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.5.0-prerelease.86",
+  "version": "6.5.0-prerelease.88",
   "keywords": [],
   "license": "MIT",
   "scripts": {
@@ -71,7 +71,7 @@
     "@commitlint/config-conventional": "^19.1.0",
     "@fortawesome/fontawesome": "^1.1.8",
     "@octokit/rest": "^20.1.0",
-    "@patternfly/documentation-framework": "6.39.0",
+    "@patternfly/documentation-framework": "6.39.1",
     "@patternfly/patternfly-a11y": "5.1.0",
     "@patternfly/react-code-editor": "6.4.3",
     "@patternfly/react-core": "6.4.3",

package/patternfly-base-no-globals.css

@@ -7302,9 +7302,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) {
@@ -8023,6 +8021,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) {
@@ -8185,6 +8185,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) {
@@ -9041,6 +9042,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) {
@@ -9140,6 +9142,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/patternfly-base.css

@@ -46,6 +46,14 @@ h6) {
   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) {
   height: 100%;
@@ -7449,9 +7457,7 @@ button) {
     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) {
@@ -8170,6 +8176,8 @@ button) {
   --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) {
@@ -8332,6 +8340,7 @@ button) {
   --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) {
@@ -9188,6 +9197,7 @@ button) {
   --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) {
@@ -9287,6 +9297,7 @@ button) {
   --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/patternfly-no-globals.css

@@ -7302,9 +7302,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) {
@@ -8023,6 +8021,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) {
@@ -8185,6 +8185,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) {
@@ -9041,6 +9042,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) {
@@ -9140,6 +9142,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]) {
@@ -12831,9 +12834,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);
@@ -12891,7 +12892,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);
@@ -12902,23 +12903,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;
@@ -12928,15 +12925,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;
@@ -12944,7 +12938,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;
   }
 }
@@ -13004,6 +12998,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,
@@ -23025,6 +23032,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);
@@ -23046,6 +23054,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 {
@@ -38724,38 +38733,4 @@ label.pf-v6-c-tree-view__node-text {
 
 .pf-v6-l-stack.pf-m-gutter {
   gap: var(--pf-v6-l-stack--m-gutter--Gap);
-}
-
-:root:where(.pf-v6-theme-glass) body {
-  background-image: url("./assets/images/PF-Bkg-Generic-Light.svg");
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-position: center;
-  background-size: cover;
-}
-:root:where(.pf-v6-theme-glass):where(.pf-v6-theme-dark) body {
-  background-image: url("./assets/images/PF-Bkg-Generic-Dark.svg");
-}
-:root:where(.pf-v6-theme-glass):where(.pf-v6-theme-felt) body {
-  background-image: url("./assets/images/Felt-Bkg-Generic-Light.svg");
-}
-:root:where(.pf-v6-theme-glass):where(.pf-v6-theme-felt.pf-v6-theme-dark) body {
-  background-image: url("./assets/images/Felt-Bkg-Generic-Dark.svg");
-}
-
-.pf-v6-c-compass {
-  background-image: url("./assets/images/PF-Bkg-Generic-Light.svg");
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-position: center;
-  background-size: cover;
-}
-:root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
-  background-image: url("./assets/images/PF-Bkg-Generic-Dark.svg");
-}
-:root:where(.pf-v6-theme-felt) .pf-v6-c-compass {
-  background-image: url("./assets/images/Felt-Bkg-Generic-Light.svg");
-}
-:root:where(.pf-v6-theme-felt.pf-v6-theme-dark) .pf-v6-c-compass {
-  background-image: url("./assets/images/Felt-Bkg-Generic-Dark.svg");
 }

package/patternfly.css

@@ -46,6 +46,14 @@ h6) {
   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) {
   height: 100%;
@@ -7449,9 +7457,7 @@ button) {
     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) {
@@ -8170,6 +8176,8 @@ button) {
   --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) {
@@ -8332,6 +8340,7 @@ button) {
   --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) {
@@ -9188,6 +9197,7 @@ button) {
   --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) {
@@ -9287,6 +9297,7 @@ button) {
   --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]) {
@@ -12978,9 +12989,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);
@@ -13038,7 +13047,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);
@@ -13049,23 +13058,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;
@@ -13075,15 +13080,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;
@@ -13091,7 +13093,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;
   }
 }
@@ -13151,6 +13153,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,
@@ -23172,6 +23187,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);
@@ -23193,6 +23209,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 {
@@ -38871,38 +38888,4 @@ label.pf-v6-c-tree-view__node-text {
 
 .pf-v6-l-stack.pf-m-gutter {
   gap: var(--pf-v6-l-stack--m-gutter--Gap);
-}
-
-:root:where(.pf-v6-theme-glass) body {
-  background-image: url("./assets/images/PF-Bkg-Generic-Light.svg");
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-position: center;
-  background-size: cover;
-}
-:root:where(.pf-v6-theme-glass):where(.pf-v6-theme-dark) body {
-  background-image: url("./assets/images/PF-Bkg-Generic-Dark.svg");
-}
-:root:where(.pf-v6-theme-glass):where(.pf-v6-theme-felt) body {
-  background-image: url("./assets/images/Felt-Bkg-Generic-Light.svg");
-}
-:root:where(.pf-v6-theme-glass):where(.pf-v6-theme-felt.pf-v6-theme-dark) body {
-  background-image: url("./assets/images/Felt-Bkg-Generic-Dark.svg");
-}
-
-.pf-v6-c-compass {
-  background-image: url("./assets/images/PF-Bkg-Generic-Light.svg");
-  background-repeat: no-repeat;
-  background-attachment: fixed;
-  background-position: center;
-  background-size: cover;
-}
-:root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
-  background-image: url("./assets/images/PF-Bkg-Generic-Dark.svg");
-}
-:root:where(.pf-v6-theme-felt) .pf-v6-c-compass {
-  background-image: url("./assets/images/Felt-Bkg-Generic-Light.svg");
-}
-:root:where(.pf-v6-theme-felt.pf-v6-theme-dark) .pf-v6-c-compass {
-  background-image: url("./assets/images/Felt-Bkg-Generic-Dark.svg");
 }