@patternfly/patternfly 6.5.0-prerelease.72 → 6.5.0-prerelease.74

package/components/_index.css

@@ -6218,7 +6218,7 @@ ul) {
   --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
   --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -6251,9 +6251,10 @@ ul) {
   --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
-  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--subtle);
   --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
   --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
   --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
@@ -6500,6 +6501,7 @@ ul) {
     border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
     border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
     border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
+    box-shadow: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow);
   }
 }
 @media screen and (min-width: 48rem) {
@@ -10707,7 +10709,6 @@ ul.pf-v6-c-list {
   padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
-  margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
   background-color: var(--pf-t--global--background--color--glass--primary--default);
   backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
   border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
@@ -13512,13 +13513,13 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
   --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-page__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
-  --pf-v6-c-page__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
+  --pf-v6-c-page__dock-main--BoxShadow: none;
+  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
   --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
   --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
   --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
   --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
   --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
-  --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
   --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
   --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
   --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
@@ -13690,6 +13691,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page--BackgroundColor--glass: transparent;
   --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
+  --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
@@ -13709,10 +13711,12 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --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);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-page {
   --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
   --pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass);
+  --pf-v6-c-page__sidebar--MarginBlockStart: var(--pf-v6-c-page__sidebar--MarginBlockStart--glass);
   --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass);
   --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass);
   --pf-v6-c-page__sidebar-main--PaddingBlockEnd: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass);
@@ -13728,6 +13732,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass);
   --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);
 }
 @media (min-width: 75rem) {
   .pf-v6-c-page {
@@ -13821,6 +13826,43 @@ ul.pf-v6-c-list {
     --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
   }
 }
+.pf-v6-c-page .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
+  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+  --pf-v6-c-button__icon--TransitionDelay: 0s;
+  --pf-v6-c-button__icon--ScaleX: 1;
+  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+  --pf-v6-c-button--hover__icon--ScaleX: 1;
+}
+@media (min-width: 62rem) {
+  .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
+  .pf-v6-c-page .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
+    --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
+    --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
+    --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
+    --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
+    --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
+  }
+  .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
+    --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+    --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+    --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+    --pf-v6-c-button__icon--TransitionDelay: 0s;
+    --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+    --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+    --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+  }
+  .pf-v6-c-page .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
+    --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+    --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+    --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+    --pf-v6-c-button__icon--TransitionDelay: 0s;
+    --pf-v6-c-button__icon--ScaleX: 1;
+    --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+    --pf-v6-c-button--hover__icon--ScaleX: 1;
+  }
+}
 
 @media (min-width: 75rem) {
   .pf-v6-c-page > .pf-v6-c-masthead {
@@ -13878,10 +13920,14 @@ ul.pf-v6-c-list {
 }
 .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-page__dock-main {
   border-inline-end: var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor);
+  box-shadow: var(--pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow);
 }
 @media (min-width: 62rem) {
   .pf-v6-c-page__dock-main {
     --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
+    --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
+    --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
+    --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
   }
 }
 

package/docs/components/Drawer/examples/Drawer.md

@@ -1044,6 +1044,66 @@ cssPrefix: pf-v6-c-drawer
 
 ```
 
+### Resizable Pill
+
+```html isBeta
+<div class="pf-v6-c-drawer pf-m-expanded pf-m-pill">
+  <div class="pf-v6-c-drawer__main">
+    <div class="pf-v6-c-drawer__content">
+      <div
+        class="pf-v6-c-drawer__body"
+      >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat, nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.</div>
+    </div>
+    <div class="pf-v6-c-drawer__panel pf-m-resizable">
+      <div
+        class="pf-v6-c-drawer__splitter pf-m-vertical"
+        role="separator"
+        tabindex="0"
+        aria-valuenow="50"
+        aria-orientation="vertical"
+      >
+        <div class="pf-v6-c-drawer__splitter-handle"></div>
+      </div>
+      <div class="pf-v6-c-drawer__panel-main">
+        <div class="pf-v6-c-drawer__head">
+          <span>Drawer panel header content</span>
+          <div class="pf-v6-c-drawer__actions">
+            <div class="pf-v6-c-drawer__close">
+              <button
+                class="pf-v6-c-button pf-m-plain"
+                type="button"
+                aria-label="Close drawer panel"
+              >
+                <span class="pf-v6-c-button__icon">
+                  <svg
+                    class="pf-v6-svg"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                    aria-hidden="true"
+                    role="img"
+                    width="1em"
+                    height="1em"
+                  >
+                    <path
+                      d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div
+          class="pf-v6-c-drawer__description"
+        >This is a helpful description of the drawer panel.</div>
+        <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
 ### Pill inline
 
 ```html isBeta

package/docs/demos/Compass/examples/Compass.md

@@ -13,13 +13,7 @@ This demo populates the main Compass section with a card view, which is one of t
 * A `.pf-v6-c-compass__content`, which contains a glass panel component to create a rounded-rectangle container that serves as the main content background.
 
 ```html isFullscreen isBeta
-<div
-  class="pf-v6-c-compass pf-m-animate-smoothly"
-  style="
-        --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
-        --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
-      "
->
+<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">
       <svg
@@ -1657,13 +1651,7 @@ This demo populates the main Compass section with a dashboard, which is often us
 * A `.pf-v6-c-compass__content` without a glass panel component wrapping all of the contents. This removes the rounded-rectangle container that typically serves as the main content background. Instead, the content area is a dashboard (a grid of cards), and each card has a glass modifier.
 
 ```html isFullscreen isBeta
-<div
-  class="pf-v6-c-compass pf-m-animate-smoothly"
-  style="
-        --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
-        --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
-      "
->
+<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">
       <svg
@@ -3582,13 +3570,7 @@ This demo places multiple sections within the main Compass section, with each se
 Without a glass panel component wrapping all of the content, there is no rounded-rectangle container as the main content background. Instead, the `.pf-v6-c-compass__content` is a grid with 2 independently scrollable glass panel components.
 
 ```html isFullscreen isBeta
-<div
-  class="pf-v6-c-compass pf-m-animate-smoothly"
-  style="
-        --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
-        --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
-      "
->
+<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">
       <svg
@@ -6123,13 +6105,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
   <div class="pf-v6-c-drawer__main">
     <div class="pf-v6-c-drawer__content">
       <div class="pf-v6-c-drawer__body">
-        <div
-          class="pf-v6-c-compass pf-m-animate-smoothly"
-          style="
-                          --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
-                          --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
-                        "
-        >
+        <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">
               <svg
@@ -7839,13 +7815,7 @@ This demo showcases how you can position a side-panel drawer on top of the other
 ### Docked
 
 ```html isFullscreen isBeta
-<div
-  class="pf-v6-c-compass pf-m-animate-smoothly pf-m-docked"
-  style="
-        --pf-v6-c-compass--BackgroundImage--light: url(/assets/images/compass--wallpaper-light.jpg);
-        --pf-v6-c-compass--BackgroundImage--dark: url(/assets/images/compass--wallpaper-dark.jpg);
-      "
->
+<div class="pf-v6-c-compass pf-m-animate-smoothly pf-m-docked">
   <div class="pf-v6-c-compass__dock">
     <div class="pf-v6-c-skip-to-content">
       <a class="pf-v6-c-button pf-m-primary" href="#main-content-">

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.5.0-prerelease.72",
+  "version": "6.5.0-prerelease.74",
   "keywords": [],
   "license": "MIT",
   "scripts": {

package/patternfly-no-globals.css

@@ -15365,7 +15365,7 @@ ul) {
   --pf-v6-c-drawer__panel--BorderInlineEndWidth: 0;
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-drawer__panel--m-inline--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-drawer__panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
   --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -15398,9 +15398,10 @@ ul) {
   --pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
-  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-drawer--m-pill__panel--BorderColor: var(--pf-t--global--border--color--subtle);
   --pf-v6-c-drawer--m-pill__panel--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-drawer__panel--m-glass--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default);
   --pf-v6-c-drawer__panel--m-glass--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary);
   --pf-v6-c-drawer__panel--m-glass--BorderColor: var(--pf-t--global--border--color--glass--default);
@@ -15647,6 +15648,7 @@ ul) {
     border-block-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderBlockEndWidth);
     border-inline-start-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineStartWidth);
     border-inline-end-width: var(--pf-v6-c-drawer--m-pill__panel--BorderInlineEndWidth);
+    box-shadow: var(--pf-v6-c-drawer--m-pill--m-expanded__panel--BoxShadow);
   }
 }
 @media screen and (min-width: 48rem) {
@@ -19854,7 +19856,6 @@ ul.pf-v6-c-list {
   padding-inline-end: var(--pf-t--global--spacer--2xl);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-masthead:not(.pf-m-docked) {
-  margin-block-end: var(--pf-t--global--spacer--inset--page-chrome);
   background-color: var(--pf-t--global--background--color--glass--primary--default);
   backdrop-filter: var(--pf-t--global--background--filter--glass--blur--primary);
   border-block-end: var(--pf-t--global--border--width--glass--default) solid var(--pf-t--global--border--color--glass--default);
@@ -22659,13 +22660,13 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
   --pf-v6-c-page__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-page__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
-  --pf-v6-c-page__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
+  --pf-v6-c-page__dock-main--BoxShadow: none;
+  --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
   --pf-v6-c-page__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
   --pf-v6-c-page__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
   --pf-v6-c-page__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
   --pf-v6-c-page__dock-main--BorderInlineEndColor: transparent;
   --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
-  --pf-v6-c-page__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
   --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
   --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
   --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
@@ -22837,6 +22838,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page--BackgroundColor--glass: transparent;
   --pf-v6-c-page__sidebar--Width--base--glass: calc(18.125rem + var(--pf-t--global--spacer--inset--page-chrome) * 2);
+  --pf-v6-c-page__sidebar--MarginBlockStart--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page__sidebar-body--PaddingInlineStart--glass: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass: var(--pf-v6-c-page__sidebar--PaddingBlockEnd);
@@ -22856,10 +22858,12 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__sidebar-main--xl--MarginBlockEnd--glass: var(--pf-t--global--spacer--inset--page-chrome);
   --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);
 }
 :where(.pf-v6-theme-glass) .pf-v6-c-page {
   --pf-v6-c-page--BackgroundColor: var(--pf-v6-c-page--BackgroundColor--glass);
   --pf-v6-c-page__sidebar--Width--base: var(--pf-v6-c-page__sidebar--Width--base--glass);
+  --pf-v6-c-page__sidebar--MarginBlockStart: var(--pf-v6-c-page__sidebar--MarginBlockStart--glass);
   --pf-v6-c-page__sidebar-body--PaddingInlineStart: var(--pf-v6-c-page__sidebar-body--PaddingInlineStart--glass);
   --pf-v6-c-page__sidebar-body--PaddingInlineEnd: var(--pf-v6-c-page__sidebar-body--PaddingInlineEnd--glass);
   --pf-v6-c-page__sidebar-main--PaddingBlockEnd: var(--pf-v6-c-page__sidebar-main--PaddingBlockEnd--glass);
@@ -22875,6 +22879,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__sidebar-main--BorderColor: var(--pf-v6-c-page__sidebar-main--BorderColor--glass);
   --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);
 }
 @media (min-width: 75rem) {
   .pf-v6-c-page {
@@ -22968,6 +22973,43 @@ ul.pf-v6-c-list {
     --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
   }
 }
+.pf-v6-c-page .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
+  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+  --pf-v6-c-button__icon--TransitionDelay: 0s;
+  --pf-v6-c-button__icon--ScaleX: 1;
+  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+  --pf-v6-c-button--hover__icon--ScaleX: 1;
+}
+@media (min-width: 62rem) {
+  .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
+  .pf-v6-c-page .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
+    --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
+    --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
+    --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
+    --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
+    --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
+  }
+  .pf-v6-c-page .pf-v6-c-page__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
+    --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+    --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+    --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+    --pf-v6-c-button__icon--TransitionDelay: 0s;
+    --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+    --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+    --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
+  }
+  .pf-v6-c-page .pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
+    --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
+    --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
+    --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
+    --pf-v6-c-button__icon--TransitionDelay: 0s;
+    --pf-v6-c-button__icon--ScaleX: 1;
+    --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
+    --pf-v6-c-button--hover__icon--ScaleX: 1;
+  }
+}
 
 @media (min-width: 75rem) {
   .pf-v6-c-page > .pf-v6-c-masthead {
@@ -23025,10 +23067,14 @@ ul.pf-v6-c-list {
 }
 .pf-v6-c-page__dock.pf-m-expanded .pf-v6-c-page__dock-main {
   border-inline-end: var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor);
+  box-shadow: var(--pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow);
 }
 @media (min-width: 62rem) {
   .pf-v6-c-page__dock-main {
     --pf-v6-c-page__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
+    --pf-v6-c-page__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-page__dock-main--desktop--BoxShadow);
+    --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-page__dock-main--BorderInlineEndWidth);
+    --pf-v6-c-page__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-v6-c-page__dock-main--desktop--BorderInlineEndColor);
   }
 }
 
@@ -38301,13 +38347,36 @@ label.pf-v6-c-tree-view__node-text {
   gap: var(--pf-v6-l-stack--m-gutter--Gap);
 }
 
-:where(.pf-v6-theme-glass) .pf-v6-c-login, :where(.pf-v6-theme-glass) body {
-  background-image: url("./assets/images/glass-brand-light.jpg");
+: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;
 }
-:where(.pf-v6-theme-glass):where(.pf-v6-theme-dark) .pf-v6-c-login, :where(.pf-v6-theme-glass):where(.pf-v6-theme-dark) body {
-  background-image: url("./assets/images/glass-brand-dark.jpg");
+: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-redhat) body {
+  background-image: url("./assets/images/Felt-Bkg-Generic-Light.svg");
+}
+:root:where(.pf-v6-theme-glass):where(.pf-v6-theme-redhat.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-redhat) .pf-v6-c-compass {
+  background-image: url("./assets/images/Felt-Bkg-Generic-Light.svg");
+}
+:root:where(.pf-v6-theme-redhat.pf-v6-theme-dark) .pf-v6-c-compass {
+  background-image: url("./assets/images/Felt-Bkg-Generic-Dark.svg");
 }