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

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/Page/page.css

@@ -15,13 +15,13 @@
   --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);
@@ -324,6 +324,43 @@
     --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 {
@@ -381,10 +418,14 @@
 }
 .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/components/Page/page.scss

@@ -30,13 +30,13 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   // Dock main
   --#{$page}__dock-main--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --#{$page}__dock-main--desktop--BackgroundColor: var(--pf-t--global--background--color--glass--primary--default, var(--pf-t--global--background--color--primary--default));
-  --#{$page}__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
+  --#{$page}__dock-main--BoxShadow: none;
+  --#{$page}__dock--m-expanded__dock-main--BoxShadow: var(--pf-t--global--box-shadow--sm--right);
   --#{$page}__dock-main--desktop--BoxShadow: var(--pf-t--global--box-shadow--glass--default, none);
   --#{$page}__dock-main--BackdropFilter: var(--pf-t--global--background--filter--glass--blur--primary, revert);
   --#{$page}__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, 0);
   --#{$page}__dock-main--BorderInlineEndColor: transparent;
   --#{$page}__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
-  --#{$page}__dock-main--desktop--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, transparent);
   --#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-t--global--border--width--glass--default, var(--pf-t--global--border--width--regular));
   --#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: var(--pf-t--global--border--color--glass--default, var(--pf-t--global--border--color--subtle));
 
@@ -358,6 +358,30 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
       @include pf-v6-hamburger;
     }
   }
+
+  // Dock hamburger menu animation
+  // mobile - show collapse arrow on dock internal toggle when expanded
+  .#{$page}__dock.pf-m-expanded .#{$masthead}__toggle .#{$button}.pf-m-hamburger {
+    @include pf-v6-hamburger($collapse: true);
+  }
+
+  @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
+    // desktop - reset dock internal toggle to bars
+    .#{$page}__dock .#{$masthead}__toggle .#{$button}.pf-m-hamburger,
+    .#{$page}__dock.pf-m-expanded .#{$masthead}__toggle .#{$button}.pf-m-hamburger {
+      @include pf-v6-hamburger($reset: true);
+    }
+
+    // desktop - show expand arrow on hover
+    .#{$page}__dock .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
+      @include pf-v6-hamburger;
+    }
+
+    // desktop - show collapse arrow on hover when text expanded
+    .#{$page}__dock.pf-m-text-expanded .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
+      @include pf-v6-hamburger($collapse: true);
+    }
+  }
 }
 
 // Header
@@ -426,10 +450,14 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   .#{$page}__dock.pf-m-expanded & {
     border-inline-end: var(--#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor);
+    box-shadow: var(--#{$page}__dock--m-expanded__dock-main--BoxShadow);
   }
 
   @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
     --#{$page}__dock-main--BoxShadow: var(--#{$page}__dock-main--desktop--BoxShadow);
+    --#{$page}__dock--m-expanded__dock-main--BoxShadow: var(--#{$page}__dock-main--desktop--BoxShadow);
+    --#{$page}__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--#{$page}__dock-main--BorderInlineEndWidth);
+    --#{$page}__dock--m-expanded__dock-main--BorderInlineEndColor: var(--#{$page}__dock-main--desktop--BorderInlineEndColor);
   }
 }
 

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);
 }