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

package/components/Compass/compass.css

@@ -19,17 +19,6 @@
   --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
-  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
-  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
-  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--glass--default, transparent);
-  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--glass--default, var(--pf-t--global--border--radius--medium));
-  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--glass--default, 0);
-  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
   --pf-v6-c-compass__message-bar--Width: 450px;
   --pf-v6-c-compass__message-bar--MinWidth: 300px;
   --pf-v6-c-compass__message-bar--MaxWidth: 600px;
@@ -92,9 +81,6 @@
 :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
   --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
 }
-.pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
-  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-}
 
 .pf-v6-c-compass__header,
 .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
@@ -148,11 +134,13 @@
   margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
 }
 
+.pf-v6-c-compass__nav .pf-v6-c-panel {
+  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
+  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
+  --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
+  --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
+}
 .pf-v6-c-compass__nav {
-  --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
-  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
-  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
-  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
   display: flex;
   flex-direction: column;
   gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -170,11 +158,13 @@
   padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
 }
 
+.pf-v6-c-compass__sidebar .pf-v6-c-panel {
+  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
+  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
+  --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
+  --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
+}
 .pf-v6-c-compass__sidebar {
-  --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
-  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
-  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
-  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
   display: flex;
   width: 0;
 }
@@ -262,59 +252,4 @@
   width: var(--pf-v6-c-compass__message-bar--Width);
   min-width: var(--pf-v6-c-compass__message-bar--MinWidth);
   max-width: var(--pf-v6-c-compass__message-bar--MaxWidth);
-}
-
-.pf-v6-c-compass__panel {
-  padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
-  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
-  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
-  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
-  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
-}
-.pf-v6-c-compass__panel.pf-m-no-border {
-  border-width: 0;
-}
-.pf-v6-c-compass__panel.pf-m-no-padding {
-  padding: 0;
-}
-.pf-v6-c-compass__panel.pf-m-full-height {
-  height: 100%;
-}
-.pf-v6-c-compass__panel.pf-m-pill {
-  border-radius: var(--pf-v6-c-compass__panel--m-pill--BorderRadius);
-}
-.pf-v6-c-compass__panel.pf-m-scrollable {
-  overflow: auto;
-}
-
-/* stylelint-disable */
-@media (max-width: 1200px) {
-  .pf-v6-c-compass:not(.pf-m-no-screen-warning) {
-    position: relative;
-    display: grid;
-    grid-template-columns: auto;
-    grid-template-rows: auto;
-    place-content: center;
-    gap: 0;
-  }
-  .pf-v6-c-compass:not(.pf-m-no-screen-warning)::after {
-    padding: 1em;
-    border-radius: var(--pf-t--global--border--radius--large);
-    background: var(--pf-t--global--background--color--primary--default);
-    content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
-    width: 80%;
-    width: 300px;
-    border: 1px solid var(--pf-t--global--border--color--default);
-    box-shadow: var(--pf-t--global--box-shadow--md);
-    white-space: pre-wrap;
-    text-align: center;
-  }
-  .pf-v6-c-compass:not(.pf-m-no-screen-warning) * {
-    display: none;
-  }
-}
-/* stylelint-enable */
+}

package/components/Compass/compass.scss

@@ -21,17 +21,6 @@
   --#{$compass}__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
   --#{$compass}__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
   --#{$compass}__main-footer--MarginBlockStart: calc(var(--#{$compass}__main--RowGap) * -1 + var(--#{$compass}--Gap)); // Creates same gap as parent compass grid, mimicking the compass footer
-  --#{$compass}__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --#{$compass}__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
-  --#{$compass}__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
-  --#{$compass}__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
-  --#{$compass}__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
-  --#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
-  --#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
-  --#{$compass}__panel--BorderColor: var(--pf-t--global--border--color--glass--default, transparent);
-  --#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--glass--default, var(--pf-t--global--border--radius--medium));
-  --#{$compass}__panel--BorderWidth: var(--pf-t--global--border--width--glass--default, 0);
-  --#{$compass}__panel--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
   --#{$compass}__message-bar--Width: 450px;
   --#{$compass}__message-bar--MinWidth: 300px;
   --#{$compass}__message-bar--MaxWidth: 600px;
@@ -101,13 +90,6 @@
   :root:where(.#{$pf-prefix}theme-dark) & {
     --#{$compass}--BackgroundImage: var(--#{$compass}--BackgroundImage--dark);
   }
-
-  @at-root .#{$compass}__panel,
-  & {
-    &.pf-m-no-glass {
-      --#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-    }
-  }
 }
 
 .#{$compass}__header,
@@ -164,10 +146,12 @@
 }
 
 .#{$compass}__nav {
-  --#{$compass}__panel--PaddingBlockStart: var(--#{$compass}__nav--PaddingBlockStart);
-  --#{$compass}__panel--PaddingBlockEnd: var(--#{$compass}__nav--PaddingBlockEnd);
-  --#{$compass}__panel--PaddingInlineStart: var(--#{$compass}__nav--PaddingInlineStart);
-  --#{$compass}__panel--PaddingInlineEnd: var(--#{$compass}__nav--PaddingInlineEnd);
+  .#{$panel} {
+    --#{$panel}__main-body--PaddingBlockStart: var(--#{$compass}__nav--PaddingBlockStart);
+    --#{$panel}__main-body--PaddingBlockEnd: var(--#{$compass}__nav--PaddingBlockEnd);
+    --#{$panel}__main-body--PaddingInlineStart: var(--#{$compass}__nav--PaddingInlineStart);
+    --#{$panel}__main-body--PaddingInlineEnd: var(--#{$compass}__nav--PaddingInlineEnd);
+  }
 
   display: flex;
   flex-direction: column;
@@ -187,10 +171,12 @@
 }
 
 .#{$compass}__sidebar {
-  --#{$compass}__panel--PaddingBlockStart: var(--#{$compass}__sidebar--PaddingBlockStart);
-  --#{$compass}__panel--PaddingBlockEnd: var(--#{$compass}__sidebar--PaddingBlockEnd);
-  --#{$compass}__panel--PaddingInlineStart: var(--#{$compass}__sidebar--PaddingInlineStart);
-  --#{$compass}__panel--PaddingInlineEnd: var(--#{$compass}__sidebar--PaddingInlineEnd);
+  .#{$panel} {
+    --#{$panel}__main-body--PaddingBlockStart: var(--#{$compass}__sidebar--PaddingBlockStart);
+    --#{$panel}__main-body--PaddingBlockEnd: var(--#{$compass}__sidebar--PaddingBlockEnd);
+    --#{$panel}__main-body--PaddingInlineStart: var(--#{$compass}__sidebar--PaddingInlineStart);
+    --#{$panel}__main-body--PaddingInlineEnd: var(--#{$compass}__sidebar--PaddingInlineEnd);
+  }
 
   display: flex;
   width: 0;
@@ -286,65 +272,3 @@
   min-width: var(--#{$compass}__message-bar--MinWidth);
   max-width: var(--#{$compass}__message-bar--MaxWidth);
 }
-
-.#{$compass}__panel {
-  padding-block-start: var(--#{$compass}__panel--PaddingBlockStart);
-  padding-block-end: var(--#{$compass}__panel--PaddingBlockEnd);
-  padding-inline-start: var(--#{$compass}__panel--PaddingInlineStart);
-  padding-inline-end: var(--#{$compass}__panel--PaddingInlineEnd);
-  background-color: var(--#{$compass}__panel--BackgroundColor);
-  backdrop-filter: var(--#{$compass}__panel--BackdropFilter);
-  border: var(--#{$compass}__panel--BorderWidth) solid var(--#{$compass}__panel--BorderColor);
-  border-radius: var(--#{$compass}__panel--BorderRadius);
-  box-shadow: var(--#{$compass}__panel--BoxShadow);
-
-  &.pf-m-no-border {
-    border-width: 0;
-  }
-
-  &.pf-m-no-padding {
-    padding: 0;
-  }
-
-  &.pf-m-full-height {
-    height: 100%;
-  }
-
-  &.pf-m-pill {
-    border-radius: var(--#{$compass}__panel--m-pill--BorderRadius);
-  }
-
-  &.pf-m-scrollable {
-    overflow: auto;
-  }
-}
-
-/* stylelint-disable */
-@media (max-width: 1200px) {
-  .#{$compass}:not(.pf-m-no-screen-warning) {
-    position: relative;
-    display: grid;
-    grid-template-columns: auto;
-    grid-template-rows: auto;
-    place-content: center;
-    gap: 0;
-
-    &::after {
-      padding: 1em;
-      border-radius: var(--pf-t--global--border--radius--large);
-      background: var(--pf-t--global--background--color--primary--default);
-      content: "This page is optimized for wide screens.\a\a Please view on a larger display and/or make your browser window wider.";
-      width: 80%;
-      width: 300px;
-      border: 1px solid var(--pf-t--global--border--color--default);
-      box-shadow: var(--pf-t--global--box-shadow--md);
-      white-space: pre-wrap;
-      text-align: center;
-    }
-
-    * {
-      display: none;
-    }
-  }
-}
-/* stylelint-enable */

package/components/Panel/panel.css

@@ -4,25 +4,27 @@
   --pf-v6-c-panel--MaxWidth: none;
   --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-panel--BoxShadow: none;
-  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-panel--before--BorderWidth: 0;
   --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-panel--m-no-border--before--BorderWidth: 0;
   --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-panel--m-raised--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__main--MaxHeight: none;
   --pf-v6-c-panel__main--Overflow: visible;
-  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -31,6 +33,7 @@
   --pf-v6-c-panel__footer--BoxShadow: none;
   --pf-v6-c-panel__footer--BorderColor: transparent;
   --pf-v6-c-panel__footer--BorderWidth: 0;
+  --pf-v6-c-panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
   --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
   --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -75,6 +78,7 @@
   --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
   --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
   --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-raised--before--BorderWidth);
+  --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-raised--BorderRadius);
 }
 .pf-v6-c-panel.pf-m-scrollable {
   --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
@@ -85,7 +89,11 @@
   --pf-v6-c-panel__footer--BorderColor: var(--pf-v6-c-panel--m-scrollable__footer--BorderColor);
   --pf-v6-c-panel__footer--BorderWidth: var(--pf-v6-c-panel--m-scrollable__footer--BorderWidth);
 }
-.pf-v6-c-panel.pf-m-glass {
+.pf-v6-c-panel.pf-m-scrollable-auto-height {
+  --pf-v6-c-panel__main--MaxHeight: 100%;
+  max-height: 100%;
+}
+:where(.pf-v6-theme-glass) .pf-v6-c-panel.pf-m-glass {
   --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-glass--BackgroundColor);
   --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-glass--before--BorderWidth);
   --pf-v6-c-panel--before--BorderColor: var(--pf-v6-c-panel--m-glass--before--BorderColor);
@@ -93,6 +101,21 @@
   --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-glass--BorderRadius);
   backdrop-filter: var(--pf-v6-c-panel--m-glass--BackdropFilter);
 }
+.pf-v6-c-panel.pf-m-no-border {
+  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-no-border--before--BorderWidth);
+}
+.pf-v6-c-panel.pf-m-pill {
+  --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-pill--BorderRadius);
+}
+.pf-v6-c-panel.pf-m-full-height {
+  height: 100%;
+}
+
+.pf-v6-c-panel,
+.pf-v6-c-panel__main {
+  display: flex;
+  flex-direction: column;
+}
 
 .pf-v6-c-panel__header {
   padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
@@ -102,6 +125,7 @@
 }
 
 .pf-v6-c-panel__main {
+  min-height: 0;
   max-height: var(--pf-v6-c-panel__main--MaxHeight);
   overflow: var(--pf-v6-c-panel__main--Overflow);
 }

package/components/Panel/panel.scss

@@ -6,7 +6,7 @@
   --#{$panel}--MaxWidth: none;
   --#{$panel}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$panel}--BoxShadow: none;
-  --#{$panel}--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$panel}--BorderRadius: var(--pf-t--global--border--radius--medium);
 
   // border
   --#{$panel}--before--BorderWidth: 0;
@@ -20,10 +20,14 @@
   --#{$panel}--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
   --#{$panel}--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
 
+  // no border
+  --#{$panel}--m-no-border--before--BorderWidth: 0;
+
   // raised
   --#{$panel}--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
   --#{$panel}--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$panel}--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --#{$panel}--m-raised--BorderRadius: var(--pf-t--global--border--radius--small);
 
   // header
   --#{$panel}__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -36,9 +40,9 @@
   --#{$panel}__main--Overflow: visible;
 
   // body
-  --#{$panel}__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$panel}__main-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --#{$panel}__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  --#{$panel}__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --#{$panel}__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --#{$panel}__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
 
   // footer
@@ -50,6 +54,9 @@
   --#{$panel}__footer--BorderColor: transparent;
   --#{$panel}__footer--BorderWidth: 0;
 
+  // pill
+  --#{$panel}--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
+
   // scrollable
   --#{$panel}--m-scrollable__main--MaxHeight: #{pf-size-prem(300px)};
   --#{$panel}--m-scrollable__main--Overflow: auto;
@@ -100,6 +107,7 @@
     --#{$panel}--BackgroundColor: var(--#{$panel}--m-raised--BackgroundColor);
     --#{$panel}--BoxShadow: var(--#{$panel}--m-raised--BoxShadow);
     --#{$panel}--before--BorderWidth: var(--#{$panel}--m-raised--before--BorderWidth);
+    --#{$panel}--BorderRadius: var(--#{$panel}--m-raised--BorderRadius);
   }
 
   &.pf-m-scrollable {
@@ -112,17 +120,43 @@
     --#{$panel}__footer--BorderWidth: var(--#{$panel}--m-scrollable__footer--BorderWidth);
   }
 
-  &.pf-m-glass {
-    --#{$panel}--BackgroundColor: var(--#{$panel}--m-glass--BackgroundColor);
-    --#{$panel}--before--BorderWidth: var(--#{$panel}--m-glass--before--BorderWidth);
-    --#{$panel}--before--BorderColor: var(--#{$panel}--m-glass--before--BorderColor);
-    --#{$panel}--BoxShadow: var(--#{$panel}--m-glass--BoxShadow);
-    --#{$panel}--BorderRadius: var(--#{$panel}--m-glass--BorderRadius);
+  &.pf-m-scrollable-auto-height {
+    --#{$panel}__main--MaxHeight: 100%;
+
+    max-height: 100%;
+  }
+
+  :where(.pf-v6-theme-glass) & {
+    &.pf-m-glass {
+      --#{$panel}--BackgroundColor: var(--#{$panel}--m-glass--BackgroundColor);
+      --#{$panel}--before--BorderWidth: var(--#{$panel}--m-glass--before--BorderWidth);
+      --#{$panel}--before--BorderColor: var(--#{$panel}--m-glass--before--BorderColor);
+      --#{$panel}--BoxShadow: var(--#{$panel}--m-glass--BoxShadow);
+      --#{$panel}--BorderRadius: var(--#{$panel}--m-glass--BorderRadius);
+
+      backdrop-filter: var(--#{$panel}--m-glass--BackdropFilter);
+    }
+  }
+
+  &.pf-m-no-border {
+    --#{$panel}--before--BorderWidth: var(--#{$panel}--m-no-border--before--BorderWidth);
+  }
+
+  &.pf-m-pill {
+    --#{$panel}--BorderRadius: var(--#{$panel}--m-pill--BorderRadius);
+  }
 
-    backdrop-filter: var(--#{$panel}--m-glass--BackdropFilter);
+  &.pf-m-full-height {
+    height: 100%;
   }
 }
 
+.#{$panel},
+.#{$panel}__main {
+  display: flex;
+  flex-direction: column;
+}
+
 .#{$panel}__header {
   padding-block-start: var(--#{$panel}__header--PaddingBlockStart);
   padding-block-end: var(--#{$panel}__header--PaddingBlockEnd);
@@ -131,6 +165,7 @@
 }
 
 .#{$panel}__main {
+  min-height: 0;
   max-height: var(--#{$panel}__main--MaxHeight);
   overflow: var(--#{$panel}__main--Overflow);
 }

package/components/_index.css

@@ -3688,17 +3688,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   --pf-v6-c-compass__main-header-content--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-compass__main-header-content--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-compass__main-footer--MarginBlockStart: calc(var(--pf-v6-c-compass__main--RowGap) * -1 + var(--pf-v6-c-compass--Gap));
-  --pf-v6-c-compass__panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
-  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
-  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
-  --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--glass--default, transparent);
-  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--glass--default, var(--pf-t--global--border--radius--medium));
-  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--glass--default, 0);
-  --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
   --pf-v6-c-compass__message-bar--Width: 450px;
   --pf-v6-c-compass__message-bar--MinWidth: 300px;
   --pf-v6-c-compass__message-bar--MaxWidth: 600px;
@@ -3761,9 +3750,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
 :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
   --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
 }
-.pf-v6-c-compass__panel.pf-m-no-glass, .pf-v6-c-compass.pf-m-no-glass {
-  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-}
 
 .pf-v6-c-compass__header,
 .pf-v6-c-compass__sidebar:is(.pf-m-start, .pf-m-end),
@@ -3817,11 +3803,13 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
 }
 
+.pf-v6-c-compass__nav .pf-v6-c-panel {
+  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
+  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
+  --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
+  --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
+}
 .pf-v6-c-compass__nav {
-  --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__nav--PaddingBlockStart);
-  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__nav--PaddingBlockEnd);
-  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__nav--PaddingInlineStart);
-  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__nav--PaddingInlineEnd);
   display: flex;
   flex-direction: column;
   gap: var(--pf-v6-c-compass__nav--RowGap);
@@ -3839,11 +3827,13 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   padding-inline-end: var(--pf-v6-c-compass__nav-main--PaddingInlineEnd);
 }
 
+.pf-v6-c-compass__sidebar .pf-v6-c-panel {
+  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
+  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
+  --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
+  --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
+}
 .pf-v6-c-compass__sidebar {
-  --pf-v6-c-compass__panel--PaddingBlockStart: var(--pf-v6-c-compass__sidebar--PaddingBlockStart);
-  --pf-v6-c-compass__panel--PaddingBlockEnd: var(--pf-v6-c-compass__sidebar--PaddingBlockEnd);
-  --pf-v6-c-compass__panel--PaddingInlineStart: var(--pf-v6-c-compass__sidebar--PaddingInlineStart);
-  --pf-v6-c-compass__panel--PaddingInlineEnd: var(--pf-v6-c-compass__sidebar--PaddingInlineEnd);
   display: flex;
   width: 0;
 }
@@ -3933,60 +3923,6 @@ label.pf-v6-c-check, .pf-v6-c-check__label,
   max-width: var(--pf-v6-c-compass__message-bar--MaxWidth);
 }
 
-.pf-v6-c-compass__panel {
-  padding-block-start: var(--pf-v6-c-compass__panel--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-compass__panel--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v6-c-compass__panel--PaddingInlineStart);
-  padding-inline-end: var(--pf-v6-c-compass__panel--PaddingInlineEnd);
-  background-color: var(--pf-v6-c-compass__panel--BackgroundColor);
-  backdrop-filter: var(--pf-v6-c-compass__panel--BackdropFilter);
-  border: var(--pf-v6-c-compass__panel--BorderWidth) solid var(--pf-v6-c-compass__panel--BorderColor);
-  border-radius: var(--pf-v6-c-compass__panel--BorderRadius);
-  box-shadow: var(--pf-v6-c-compass__panel--BoxShadow);
-}
-.pf-v6-c-compass__panel.pf-m-no-border {
-  border-width: 0;
-}
-.pf-v6-c-compass__panel.pf-m-no-padding {
-  padding: 0;
-}
-.pf-v6-c-compass__panel.pf-m-full-height {
-  height: 100%;
-}
-.pf-v6-c-compass__panel.pf-m-pill {
-  border-radius: var(--pf-v6-c-compass__panel--m-pill--BorderRadius);
-}
-.pf-v6-c-compass__panel.pf-m-scrollable {
-  overflow: auto;
-}
-
-/* stylelint-disable */
-@media (max-width: 1200px) {
-  .pf-v6-c-compass:not(.pf-m-no-screen-warning) {
-    position: relative;
-    display: grid;
-    grid-template-columns: auto;
-    grid-template-rows: auto;
-    place-content: center;
-    gap: 0;
-  }
-  .pf-v6-c-compass:not(.pf-m-no-screen-warning)::after {
-    padding: 1em;
-    border-radius: var(--pf-t--global--border--radius--large);
-    background: var(--pf-t--global--background--color--primary--default);
-    content: "This page is optimized for wide screens.\a\aPlease view on a larger display and/or make your browser window wider.";
-    width: 80%;
-    width: 300px;
-    border: 1px solid var(--pf-t--global--border--color--default);
-    box-shadow: var(--pf-t--global--box-shadow--md);
-    white-space: pre-wrap;
-    text-align: center;
-  }
-  .pf-v6-c-compass:not(.pf-m-no-screen-warning) * {
-    display: none;
-  }
-}
-/* stylelint-enable */
 :root {
   --pf-v6-c-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-content--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -14923,25 +14859,27 @@ ul.pf-v6-c-list {
   --pf-v6-c-panel--MaxWidth: none;
   --pf-v6-c-panel--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-panel--BoxShadow: none;
-  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-panel--BorderRadius: var(--pf-t--global--border--radius--medium);
   --pf-v6-c-panel--before--BorderWidth: 0;
   --pf-v6-c-panel--before--BorderColor: var(--pf-t--global--border--color--high-contrast);
   --pf-v6-c-panel--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-panel--m-secondary--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-panel--m-bordered--before--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-panel--m-bordered--before--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-panel--m-no-border--before--BorderWidth: 0;
   --pf-v6-c-panel--m-raised--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-panel--m-raised--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-panel--m-raised--before--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
+  --pf-v6-c-panel--m-raised--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-panel__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-panel__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__main--MaxHeight: none;
   --pf-v6-c-panel__main--Overflow: visible;
-  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-panel__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__main-body--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-panel__footer--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-panel__footer--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -14950,6 +14888,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-panel__footer--BoxShadow: none;
   --pf-v6-c-panel__footer--BorderColor: transparent;
   --pf-v6-c-panel__footer--BorderWidth: 0;
+  --pf-v6-c-panel--m-pill--BorderRadius: var(--pf-t--global--border--radius--pill);
   --pf-v6-c-panel--m-scrollable__main--MaxHeight: 18.75rem;
   --pf-v6-c-panel--m-scrollable__main--Overflow: auto;
   --pf-v6-c-panel--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--sm--top);
@@ -14994,6 +14933,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-raised--BackgroundColor);
   --pf-v6-c-panel--BoxShadow: var(--pf-v6-c-panel--m-raised--BoxShadow);
   --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-raised--before--BorderWidth);
+  --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-raised--BorderRadius);
 }
 .pf-v6-c-panel.pf-m-scrollable {
   --pf-v6-c-panel__main--MaxHeight: var(--pf-v6-c-panel--m-scrollable__main--MaxHeight);
@@ -15004,7 +14944,11 @@ ul.pf-v6-c-list {
   --pf-v6-c-panel__footer--BorderColor: var(--pf-v6-c-panel--m-scrollable__footer--BorderColor);
   --pf-v6-c-panel__footer--BorderWidth: var(--pf-v6-c-panel--m-scrollable__footer--BorderWidth);
 }
-.pf-v6-c-panel.pf-m-glass {
+.pf-v6-c-panel.pf-m-scrollable-auto-height {
+  --pf-v6-c-panel__main--MaxHeight: 100%;
+  max-height: 100%;
+}
+:where(.pf-v6-theme-glass) .pf-v6-c-panel.pf-m-glass {
   --pf-v6-c-panel--BackgroundColor: var(--pf-v6-c-panel--m-glass--BackgroundColor);
   --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-glass--before--BorderWidth);
   --pf-v6-c-panel--before--BorderColor: var(--pf-v6-c-panel--m-glass--before--BorderColor);
@@ -15012,6 +14956,21 @@ ul.pf-v6-c-list {
   --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-glass--BorderRadius);
   backdrop-filter: var(--pf-v6-c-panel--m-glass--BackdropFilter);
 }
+.pf-v6-c-panel.pf-m-no-border {
+  --pf-v6-c-panel--before--BorderWidth: var(--pf-v6-c-panel--m-no-border--before--BorderWidth);
+}
+.pf-v6-c-panel.pf-m-pill {
+  --pf-v6-c-panel--BorderRadius: var(--pf-v6-c-panel--m-pill--BorderRadius);
+}
+.pf-v6-c-panel.pf-m-full-height {
+  height: 100%;
+}
+
+.pf-v6-c-panel,
+.pf-v6-c-panel__main {
+  display: flex;
+  flex-direction: column;
+}
 
 .pf-v6-c-panel__header {
   padding-block-start: var(--pf-v6-c-panel__header--PaddingBlockStart);
@@ -15021,6 +14980,7 @@ ul.pf-v6-c-list {
 }
 
 .pf-v6-c-panel__main {
+  min-height: 0;
   max-height: var(--pf-v6-c-panel__main--MaxHeight);
   overflow: var(--pf-v6-c-panel__main--Overflow);
 }