@patternfly/patternfly 6.5.0-prerelease.73 → 6.5.0-prerelease.75

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/components/ToggleGroup/examples/toggle-group.md

@@ -493,6 +493,71 @@ cssPrefix: pf-v6-c-toggle-group
 
 ```
 
+### Full width toggle
+
+To make toggle group items fill the available space, use `.pf-m-fill`. In the following example, the toggle group items fill the width of the parent as the window size changes.
+
+```html
+<div class="pf-v6-c-toggle-group pf-m-fill">
+  <div class="pf-v6-c-toggle-group__item">
+    <button class="pf-v6-c-toggle-group__button" type="button">
+      <span class="pf-v6-c-toggle-group__text">Option 1</span>
+    </button>
+  </div>
+  <div class="pf-v6-c-toggle-group__item">
+    <button class="pf-v6-c-toggle-group__button" type="button">
+      <span class="pf-v6-c-toggle-group__text">Option 2</span>
+    </button>
+  </div>
+  <div class="pf-v6-c-toggle-group__item">
+    <button class="pf-v6-c-toggle-group__button" type="button">
+      <span class="pf-v6-c-toggle-group__text">Option 3</span>
+    </button>
+  </div>
+</div>
+
+<br />
+
+<div class="pf-v6-c-toggle-group pf-m-fill">
+  <div class="pf-v6-c-toggle-group__item">
+    <button class="pf-v6-c-toggle-group__button pf-m-selected" type="button">
+      <span class="pf-v6-c-toggle-group__text">Option 1</span>
+    </button>
+  </div>
+  <div class="pf-v6-c-toggle-group__item">
+    <button class="pf-v6-c-toggle-group__button pf-m-selected" type="button">
+      <span class="pf-v6-c-toggle-group__text">Option 2</span>
+    </button>
+  </div>
+  <div class="pf-v6-c-toggle-group__item">
+    <button class="pf-v6-c-toggle-group__button" type="button">
+      <span class="pf-v6-c-toggle-group__text">Option 3</span>
+    </button>
+  </div>
+</div>
+
+<br />
+
+<div class="pf-v6-c-toggle-group pf-m-fill">
+  <div class="pf-v6-c-toggle-group__item">
+    <button class="pf-v6-c-toggle-group__button" type="button">
+      <span class="pf-v6-c-toggle-group__text">Option 1</span>
+    </button>
+  </div>
+  <div class="pf-v6-c-toggle-group__item">
+    <button class="pf-v6-c-toggle-group__button" type="button">
+      <span class="pf-v6-c-toggle-group__text">Option 2</span>
+    </button>
+  </div>
+  <div class="pf-v6-c-toggle-group__item">
+    <button class="pf-v6-c-toggle-group__button" type="button" disabled>
+      <span class="pf-v6-c-toggle-group__text">Option 3</span>
+    </button>
+  </div>
+</div>
+
+```
+
 ## Documentation
 
 ### Accessibility
@@ -512,4 +577,5 @@ cssPrefix: pf-v6-c-toggle-group
 | `.pf-v6-c-toggle-group__text` | `<span>` | Initiates the toggle button text element. |
 | `.pf-v6-c-toggle-group__icon` | `<span>` | Initiates the toggle button icon element. |
 | `.pf-m-compact` | `.pf-v6-c-toggle-group` | Modifies the toggle group for compact styles. |
+| `.pf-m-fill` | `.pf-v6-c-toggle-group` | Modifies the group items to fill the available space. |
 | `.pf-m-selected` | `.pf-v6-c-toggle-group__button` | Modifies the toggle button group button for the selected state. |

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,12 +1,12 @@
 {
   "name": "@patternfly/patternfly",
   "description": "Assets, source, tooling, and content for PatternFly 4",
-  "version": "6.5.0-prerelease.73",
+  "version": "6.5.0-prerelease.75",
   "keywords": [],
   "license": "MIT",
   "scripts": {
     "a11y": "patternfly-a11y --config patternfly-a11y.config",
-    "backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/html_report",
+    "backstop:clean": "rimraf -- backstop_data/bitmaps_test backstop_data/bitmaps_test_glass backstop_data/html_report",
     "backstop:test": "backstop test --config='backstop.js'",
     "backstop:test:dark": "backstop test --config='backstop.js' --dark",
     "backstop:test:glass": "backstop test --config='backstop.js' --glass",
@@ -72,9 +72,9 @@
     "@patternfly/documentation-framework": "6.38.3",
     "@patternfly/patternfly-a11y": "5.1.0",
     "@patternfly/react-code-editor": "6.4.1",
-    "@patternfly/react-core": "6.4.1",
+    "@patternfly/react-core": "6.4.3",
     "@patternfly/react-icons": "6.5.0-prerelease.13",
-    "@patternfly/react-table": "6.4.1",
+    "@patternfly/react-table": "6.4.3",
     "@rspack/cli": "^1.6.0",
     "@rspack/core": "^1.6.0",
     "@rspack/dev-server": "^1.1.4",

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);
@@ -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 {
@@ -31433,9 +31438,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
   --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
   --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
-  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
+  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
+  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
 }
@@ -31450,6 +31455,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
   --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
 }
+.pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__item {
+  display: flex;
+  flex-grow: 1;
+}
+.pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__button {
+  flex-basis: 100%;
+  justify-content: center;
+}
 
 .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
   margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
@@ -38342,13 +38355,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");
 }

package/patternfly.css

@@ -15512,7 +15512,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);
@@ -15545,9 +15545,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);
@@ -15794,6 +15795,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) {
@@ -20001,7 +20003,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);
@@ -22984,6 +22985,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);
@@ -23003,10 +23005,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);
@@ -23022,6 +23026,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 {
@@ -31580,9 +31585,9 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-toggle-group__button--disabled--before--BorderColor: var(--pf-t--global--border--color--control--default);
   --pf-v6-c-toggle-group__button--disabled--disabled--before--BorderInlineStartColor: var(--pf-t--global--border--color--control--default);
   --pf-v6-c-toggle-group__button--disabled--ZIndex: var(--pf-t--global--z-index--xs);
-  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: 0;
+  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-toggle-group--m-compact__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: 0;
+  --pf-v6-c-toggle-group--m-compact__button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-toggle-group--m-compact__button--FontSize: var(--pf-t--global--font--size--body--default);
 }
@@ -31597,6 +31602,14 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   --pf-v6-c-toggle-group__button--PaddingInlineStart: var(--pf-v6-c-toggle-group--m-compact__button--PaddingInlineStart);
   --pf-v6-c-toggle-group__button--FontSize: var(--pf-v6-c-toggle-group--m-compact__button--FontSize);
 }
+.pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__item {
+  display: flex;
+  flex-grow: 1;
+}
+.pf-v6-c-toggle-group.pf-m-fill .pf-v6-c-toggle-group__button {
+  flex-basis: 100%;
+  justify-content: center;
+}
 
 .pf-v6-c-toggle-group__item + .pf-v6-c-toggle-group__item {
   margin-inline-start: var(--pf-v6-c-toggle-group__item--item--MarginInlineStart);
@@ -38489,13 +38502,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");
 }