@patternfly/patternfly 6.5.0-prerelease.51 → 6.5.0-prerelease.53

package/components/Page/page.css

@@ -1,8 +1,20 @@
 .pf-v6-c-page {
   --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
+  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: 0;
+  --pf-v6-c-page--m-dock__main-container--xl--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
   --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
+  --pf-v6-c-page__dock--Width: 15.625rem;
+  --pf-v6-c-page__dock--desktop--Width: auto;
   --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
+  --pf-v6-c-page__dock--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-page__dock--BorderInlineEndColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-page__dock--TransitionDuration--slide: 0s;
+  --pf-v6-c-page__dock--m-expanded--TransitionDuration--slide: 0s;
+  --pf-v6-c-page__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
   --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-page__sidebar--Width--base: 18.125rem;
   --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -31,6 +43,8 @@
     --pf-v6-c-page__sidebar--Opacity: 1;
     --pf-v6-c-page__sidebar--TransitionProperty: transform;
     --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
+    --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-out--short);
+    --pf-v6-c-page__dock--m-expanded--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--default);
   }
 }
 .pf-v6-c-page {
@@ -139,9 +153,6 @@
   --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
   --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
-  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
 }
 
 .pf-v6-c-page {
@@ -165,11 +176,22 @@
   --pf-v6-c-page--masthead--main-container--GridArea: main;
   --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
   --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
-  --pf-v6-c-page__main-container--MarginInlineStart: 0;
-  grid-template-areas: "dock main";
-  grid-template-rows: auto;
+  grid-template-areas: "header header" "dock main";
+  grid-template-rows: max-content 1fr;
   grid-template-columns: auto 1fr;
-  column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
+}
+@media (min-width: 62rem) {
+  .pf-v6-c-page.pf-m-dock {
+    --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--xl--MarginBlockStart);
+    --pf-v6-c-page__main-container--MarginInlineStart: 0;
+    grid-template-areas: "dock main";
+    grid-template-rows: auto;
+    grid-template-columns: auto 1fr;
+    column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
+  }
+  .pf-v6-c-page.pf-m-dock > .pf-v6-c-masthead {
+    display: none;
+  }
 }
 .pf-v6-c-page > .pf-v6-c-masthead .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);
@@ -226,10 +248,40 @@
   z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
   grid-area: header;
 }
+.pf-v6-c-page.pf-m-dock > .pf-v6-c-masthead {
+  --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns);
+}
 
 .pf-v6-c-page__dock {
+  position: fixed;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   z-index: var(--pf-v6-c-page__dock--ZIndex);
   grid-area: dock;
+  width: var(--pf-v6-c-page__dock--Width);
+  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
+  translate: -100% 0;
+}
+.pf-v6-c-page__dock.pf-m-expanded {
+  --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
+  border-inline-end: var(--pf-v6-c-page__dock--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--BorderInlineEndColor);
+  translate: 0;
+}
+@media (min-width: 62rem) {
+  .pf-v6-c-page__dock {
+    --pf-v6-c-page__dock--BorderInlineEndWidth: 0;
+    position: revert;
+    inset: revert;
+    width: auto;
+    translate: 0;
+  }
+}
+.pf-v6-c-page__dock .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__content-section, .pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item) {
+  align-items: stretch;
+}
+.pf-v6-c-page__dock.pf-m-text-expanded {
+  width: var(--pf-v6-c-page__dock--Width);
 }
 
 .pf-v6-c-page__sidebar {

package/components/Page/page.scss

@@ -9,11 +9,25 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}--inset: var(--pf-t--global--spacer--inset--page-chrome);
 
+  // Docked nav
+  --#{$page}--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
+  --#{$page}--m-dock__main-container--MarginBlockStart: 0;
+  --#{$page}--m-dock__main-container--xl--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$page}--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
+  --#{$page}--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
+
   // Header
   --#{$page}--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
 
   // Dock
+  --#{$page}__dock--Width: #{pf-size-prem(250px)};
+  --#{$page}__dock--desktop--Width: auto;
   --#{$page}__dock--ZIndex: var(--pf-t--global--z-index--md);
+  --#{$page}__dock--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --#{$page}__dock--BorderInlineEndColor: var(--pf-t--global--border--color--default);
+  --#{$page}__dock--TransitionDuration--slide: 0s;
+  --#{$page}__dock--m-expanded--TransitionDuration--slide: 0s;
+  --#{$page}__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
 
   // Sidebar
   --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
@@ -45,6 +59,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     --#{$page}__sidebar--Opacity: 1;
     --#{$page}__sidebar--TransitionProperty: transform;
     --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
+    --#{$page}__dock--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-out--short);
+    --#{$page}__dock--m-expanded--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--default);
   }
 
   // Sidebar header
@@ -169,11 +185,6 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   // Drawer section
   --#{$page}__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --#{$page}__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
-
-  // Docked nav
-  --#{$page}--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
-  --#{$page}--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
-  --#{$page}--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
 }
 
 .#{$page} {
@@ -202,12 +213,26 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     --#{$page}--masthead--main-container--GridArea: main;
     --#{$page}__main-container--MaxHeight: var(--#{$page}--m-dock__main-container--MaxHeight);
     --#{$page}__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--MarginBlockStart);
-    --#{$page}__main-container--MarginInlineStart: 0;
 
-    grid-template-areas: "dock main";
-    grid-template-rows: auto;
+    grid-template-areas:
+      "header header"
+      "dock main";
+    grid-template-rows: max-content 1fr;
     grid-template-columns: auto 1fr;
-    column-gap: var(--#{$page}--m-dock--ColumnGap);
+
+    @media (min-width: $pf-v6-global--breakpoint--dock--expand) {
+      --#{$page}__main-container--MarginBlockStart: var(--#{$page}--m-dock__main-container--xl--MarginBlockStart);
+      --#{$page}__main-container--MarginInlineStart: 0;
+
+      grid-template-areas: "dock main";
+      grid-template-rows: auto;
+      grid-template-columns: auto 1fr;
+      column-gap: var(--#{$page}--m-dock--ColumnGap);
+
+      > .#{$masthead} {
+        display: none;
+      }
+    }
   }
 
   // Hamburger menu animation
@@ -241,19 +266,58 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 // Header
-.#{$page} > .#{$masthead} {
-  @media (min-width: $pf-v6-global--breakpoint--xl) {
-    --#{$masthead}--m-display-inline--GridTemplateColumns: var(--#{$masthead}--m-display-inline--breakpoint--xl--GridTemplateColumns);
-  }
+.#{$page} {
+  > .#{$masthead} {
+    @media (min-width: $pf-v6-global--breakpoint--xl) {
+      --#{$masthead}--m-display-inline--GridTemplateColumns: var(--#{$masthead}--m-display-inline--breakpoint--xl--GridTemplateColumns);
+    }
 
-  z-index: var(--#{$page}--c-masthead--ZIndex);
-  grid-area: header;
+    z-index: var(--#{$page}--c-masthead--ZIndex);
+    grid-area: header;
+  }
+  
+  &.pf-m-dock {
+    > .#{$masthead} {
+      --#{$masthead}--m-display-inline--GridTemplateColumns: var(--#{$page}--m-dock--c-masthead--m-display-inline--GridTemplateColumns);
+    }
+  }
 }
 
 // Dock
 .#{$page}__dock {
+  position: fixed;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   z-index: var(--#{$page}__dock--ZIndex);
   grid-area: dock;
+  width: var(--#{$page}__dock--Width);
+  transition: translate var(--#{$page}__dock--TransitionDuration--slide) var(--#{$page}__dock--TransitionTimingFunction--slide);
+  translate: -100% 0;
+
+  &.pf-m-expanded {
+    --#{$page}__dock--TransitionDuration--slide: var(--#{$page}__dock--m-expanded--TransitionDuration--slide);
+
+    border-inline-end: var(--#{$page}__dock--BorderInlineEndWidth) solid var(--#{$page}__dock--BorderInlineEndColor);
+    translate: 0;
+  }
+
+  @media (min-width: $pf-v6-global--breakpoint--dock--expand) {
+    --#{$page}__dock--BorderInlineEndWidth: 0;
+
+    position: revert;
+    inset: revert;
+    width: auto;
+    translate: 0;
+  }
+
+  .#{$toolbar}.pf-m-vertical :is(.#{$toolbar}__content-section, .#{$toolbar}__group, .#{$toolbar}__item) {
+    align-items: stretch;
+  }
+
+  &.pf-m-text-expanded {
+    width: var(--#{$page}__dock--Width);
+  }
 }
 
 // Sidebar

package/components/_index.css

@@ -1605,7 +1605,7 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--AlignItems: baseline;
   --pf-v6-c-button--JustifyContent: center;
   --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
-  --pf-v6-c-button--MinWidth: calc(1em * var(--pf-v6-c-button--LineHeight) + var(--pf-v6-c-button--PaddingBlockStart) + var(--pf-v6-c-button--PaddingBlockEnd));
+  --pf-v6-c-button--MinWidth: initial;
   --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
   --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
   --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
@@ -1973,7 +1973,7 @@ button.pf-v6-c-breadcrumb__link {
   gap: var(--pf-v6-c-button--Gap);
   align-items: var(--pf-v6-c-button--AlignItems);
   justify-content: var(--pf-v6-c-button--JustifyContent);
-  min-width: var(--pf-v6-c-button--MinWidth);
+  min-width: var(--pf-v6-c-button--MinWidth, revert);
   padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
@@ -2460,8 +2460,28 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   animation-duration: var(--pf-v6-c-button--m-notify__icon--AnimationDuration--notify);
   animation-timing-function: var(--pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify);
 }
+.pf-v6-c-button.pf-m-dock {
+  justify-content: flex-start;
+  width: 100%;
+}
+@media (min-width: 62rem) {
+  .pf-v6-c-button.pf-m-dock {
+    justify-content: center;
+  }
+  .pf-v6-c-button.pf-m-dock .pf-v6-c-button__text {
+    display: none;
+  }
+}
+.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button, .pf-v6-c-button.pf-m-text-expanded {
+  justify-content: flex-start;
+  width: 100%;
+}
+.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-button .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
+  display: revert;
+}
 
 .pf-v6-c-button__icon {
+  min-width: 1lh;
   margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
   color: var(--pf-v6-c-button__icon--Color);
@@ -2791,10 +2811,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 
 .pf-v6-c-card {
   --pf-v6-c-card--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-card--BorderColor: var(--pf-t--global--border--color--subtle);
   --pf-v6-c-card--BorderStyle: solid;
   --pf-v6-c-card--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-card--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-card--BoxShadow: var(--pf-t--global--box-shadow--sm);
   --pf-v6-c-card--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-card--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-card--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -2824,7 +2845,8 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: -180deg;
-  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
+  --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --pf-v6-c-card--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
   --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
   --pf-v6-c-card--m-clickable--m-current--BorderWidth: var(--pf-t--global--border--width--box--clicked);
   --pf-v6-c-card--m-selectable--m-selected--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -2861,13 +2883,14 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-card--m-display-lg--c-divider--child--PaddingBlockStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-card--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-card--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-card--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-card--m-full-height--Height: 100%;
   --pf-v6-c-card--m-plain--BorderColor: transparent;
   --pf-v6-c-card--m-plain--BackgroundColor: transparent;
+  --pf-v6-c-card--m-plain--BoxShadow: none;
   --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --pf-v6-c-card__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
+  --pf-v6-c-card--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --pf-v6-c-card--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
 }
 
 .pf-v6-c-card {
@@ -2878,6 +2901,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   background-color: var(--pf-v6-c-card--BackgroundColor);
   border: 0;
   border-radius: var(--pf-v6-c-card--BorderRadius);
+  box-shadow: var(--pf-v6-c-card--BoxShadow);
 }
 .pf-v6-c-card::before {
   position: absolute;
@@ -2891,6 +2915,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   gap: 0;
 }
 .pf-v6-c-card.pf-m-selectable, .pf-v6-c-card.pf-m-clickable {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
   isolation: isolate;
 }
 .pf-v6-c-card.pf-m-selectable::before, .pf-v6-c-card.pf-m-clickable::before {
@@ -2925,12 +2950,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-card.pf-m-selectable.pf-m-clickable .pf-v6-c-card__selectable-actions :is(.pf-v6-c-check__input, .pf-v6-c-radio__input):where(:disabled) ~ :is(.pf-v6-c-check__label, .pf-v6-c-radio__label), .pf-v6-c-card.pf-m-selectable.pf-m-clickable.pf-m-disabled {
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-selectable--m-disabled--BackgroundColor);
 }
-.pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
+.pf-v6-c-card__actions:has(> .pf-v6-c-card__selectable-actions input.pf-v6-screen-reader), .pf-v6-c-card:has(.pf-v6-c-card__selectable-actions input.pf-v6-screen-reader) {
+  --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-as-tile--BackgroundColor);
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-as-tile--BorderColor);
+}
+
+.pf-v6-c-card.pf-m-clickable:not(.pf-m-selectable) {
   --pf-v6-c-card__actions--PaddingInlineStart: 0;
   --pf-v6-c-card__actions--MarginBlockStart: 0;
   --pf-v6-c-card__actions--MarginBlockEnd: 0;
 }
-
 .pf-v6-c-card.pf-m-compact {
   --pf-v6-c-card__title-text--FontSize: var(--pf-v6-c-card--m-compact__title-text--FontSize);
   --pf-v6-c-card__body--FontSize: var(--pf-v6-c-card--m-compact__body--FontSize);
@@ -2954,13 +2983,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-card__title--not--last-child--PaddingBlockEnd: var(--pf-v6-c-card--m-display-lg__title--not--last-child--PaddingBlockEnd);
 }
 .pf-v6-c-card.pf-m-secondary {
-  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-secondary--BorderColor);
-  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-secondary--BorderWidth);
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-secondary--BackgroundColor);
 }
+.pf-v6-c-card.pf-m-secondary.pf-m-selectable:not(.pf-m-current, .pf-m-selected), .pf-v6-c-card.pf-m-secondary.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
+  --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-selectable--BorderColor);
+  --pf-v6-c-card--BorderWidth: var(--pf-v6-c-card--m-selectable--BorderWidth);
+}
 .pf-v6-c-card.pf-m-plain {
   --pf-v6-c-card--BorderColor: var(--pf-v6-c-card--m-plain--BorderColor);
   --pf-v6-c-card--BackgroundColor: var(--pf-v6-c-card--m-plain--BackgroundColor);
+  --pf-v6-c-card--BoxShadow: var(--pf-v6-c-card--m-plain--BoxShadow);
 }
 .pf-v6-c-card.pf-m-expanded .pf-v6-c-card__header-toggle-icon {
   transform: rotate(var(--pf-v6-c-card--m-expanded__header-toggle-icon--Rotate));
@@ -10379,6 +10411,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-masthead--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-masthead__main--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-masthead__main--MarginInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-masthead--m-docked__main--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
   --pf-v6-c-masthead__logo--MaxHeight: 2.375rem;
   --pf-v6-c-masthead__logo--Width: 11.8125rem;
   --pf-v6-c-masthead__toggle--Size: var(--pf-t--global--icon--size--xl);
@@ -10495,24 +10528,57 @@ ul.pf-v6-c-list {
   --pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
   --pf-v6-c-masthead__main--GridColumn: auto;
   --pf-v6-c-masthead__content--GridColumn: auto;
-  --pf-v6-c-masthead__logo--Width: auto;
   --pf-v6-c-masthead__main--MarginInlineEnd: 0;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  width: fit-content;
+  align-items: stretch;
   height: 100%;
   backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
 }
+.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
+  width: revert;
+}
+.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
+  display: none;
+  max-width: 2.3125rem;
+  max-height: revert;
+}
+.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
+  flex-direction: column;
+  row-gap: var(--pf-v6-c-masthead--m-docked__main--RowGap);
+  align-items: flex-start;
+}
 .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
   flex-grow: 1;
   flex-direction: column;
+  align-items: stretch;
   align-self: revert;
 }
 .pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
-  --pf-v6-c-masthead--c-toolbar--Width: fit-content;
+  --pf-v6-c-toolbar--m-vertical--Width: auto;
   height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
 }
+@media (min-width: 62rem) {
+  .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
+    align-items: center;
+  }
+  .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
+    display: none;
+  }
+  .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
+    display: revert;
+  }
+}
+.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo {
+  display: revert;
+}
+.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__logo.pf-m-compact {
+  display: none;
+}
+.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__main {
+  align-items: flex-start;
+}
+
 .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
   flex-wrap: nowrap;
   min-width: 0;
@@ -11604,7 +11670,7 @@ ul.pf-v6-c-list {
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
-  --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
+  --pf-v6-c-menu-toggle--MinWidth: initial;
   --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -11755,7 +11821,7 @@ ul.pf-v6-c-list {
   gap: var(--pf-v6-c-menu-toggle--Gap);
   align-items: center;
   justify-content: center;
-  min-width: var(--pf-v6-c-menu-toggle--MinWidth);
+  min-width: var(--pf-v6-c-menu-toggle--MinWidth, revert);
   max-width: 100%;
   padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
@@ -11949,6 +12015,29 @@ ul.pf-v6-c-list {
 .pf-v6-c-menu-toggle:is(:disabled, .pf-m-disabled) .pf-v6-c-button {
   pointer-events: none;
 }
+.pf-v6-c-menu-toggle.pf-m-dock {
+  justify-content: flex-start;
+  width: 100%;
+}
+@media (min-width: 62rem) {
+  .pf-v6-c-menu-toggle.pf-m-dock {
+    justify-content: center;
+    width: auto;
+  }
+  .pf-v6-c-menu-toggle.pf-m-dock .pf-v6-c-menu-toggle__text,
+  .pf-v6-c-menu-toggle.pf-m-dock .pf-v6-c-menu-toggle__controls {
+    display: none;
+  }
+}
+.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle, .pf-v6-c-menu-toggle.pf-m-text-expanded {
+  justify-content: flex-start;
+  width: 100%;
+}
+.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__text,
+.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-menu-toggle .pf-v6-c-menu-toggle__controls, .pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__text,
+.pf-v6-c-menu-toggle.pf-m-text-expanded .pf-v6-c-menu-toggle__controls {
+  display: revert;
+}
 
 @property --pf-v6-c-menu-toggle--m-danger--TranslateX {
   syntax: "<length>";
@@ -12096,6 +12185,7 @@ ul.pf-v6-c-list {
 
 .pf-v6-c-menu-toggle__icon {
   flex-shrink: 0;
+  min-width: 1lh;
   transition-delay: var(--pf-v6-c-menu-toggle__icon--TransitionDelay);
   transition-duration: var(--pf-v6-c-menu-toggle__icon--TransitionDuration);
   transition-property: var(--pf-v6-c-menu-toggle__icon--TransitionProperty);
@@ -12702,17 +12792,23 @@ ul.pf-v6-c-list {
   --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-v6-c-nav--m-docked__link--PaddingInlineEnd);
   --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--hover--BackgroundColor);
   --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-v6-c-nav--m-docked__link--m-current--BackgroundColor);
-  width: fit-content;
+  width: 100%;
 }
-.pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
-  position: relative;
-  align-self: center;
-  min-width: 1lh;
-  text-align: center;
+@media (min-width: 62rem) {
+  .pf-v6-c-nav.pf-m-docked {
+    width: fit-content;
+  }
+  .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
+    display: none;
+  }
 }
-.pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
-  display: none;
+.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-nav.pf-m-docked, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded {
+  width: 100%;
+}
+.pf-v6-c-page__dock.pf-m-text-expanded .pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text, .pf-v6-c-nav.pf-m-docked.pf-m-text-expanded .pf-v6-c-nav__link-text {
+  display: revert;
 }
+
 .pf-v6-c-nav .pf-v6-c-menu {
   --pf-v6-c-menu--MinWidth: 100%;
 }
@@ -12862,7 +12958,9 @@ ul.pf-v6-c-list {
 }
 
 .pf-v6-c-nav__link-icon {
+  min-width: 1lh;
   color: var(--pf-v6-c-nav__link-icon--Color);
+  text-align: center;
 }
 
 .pf-v6-c-nav__link-text {
@@ -13301,8 +13399,20 @@ ul.pf-v6-c-list {
 .pf-v6-c-page {
   --pf-v6-c-page--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
+  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: 0;
+  --pf-v6-c-page--m-dock__main-container--xl--MarginBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
+  --pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns: min-content 1fr;
   --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
+  --pf-v6-c-page__dock--Width: 15.625rem;
+  --pf-v6-c-page__dock--desktop--Width: auto;
   --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
+  --pf-v6-c-page__dock--BorderInlineEndWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-page__dock--BorderInlineEndColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-page__dock--TransitionDuration--slide: 0s;
+  --pf-v6-c-page__dock--m-expanded--TransitionDuration--slide: 0s;
+  --pf-v6-c-page__dock--TransitionTimingFunction--slide: var(--pf-t--global--motion--timing-function--decelerate);
   --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-page__sidebar--Width--base: 18.125rem;
   --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
@@ -13331,6 +13441,8 @@ ul.pf-v6-c-list {
     --pf-v6-c-page__sidebar--Opacity: 1;
     --pf-v6-c-page__sidebar--TransitionProperty: transform;
     --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
+    --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-out--short);
+    --pf-v6-c-page__dock--m-expanded--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--default);
   }
 }
 .pf-v6-c-page {
@@ -13439,9 +13551,6 @@ ul.pf-v6-c-list {
   --pf-v6-c-page__main-wizard--BorderBlockStartWidth: var(--pf-t--global--border--width--action--default);
   --pf-v6-c-page__drawer--c-drawer--BorderBlockStartWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-page__drawer--c-drawer--BorderBlockStartColor: var(--pf-t--global--border--color--high-contrast);
-  --pf-v6-c-page--m-dock__main-container--MaxHeight: calc(100% - var(--pf-t--global--spacer--lg) * 2);
-  --pf-v6-c-page--m-dock__main-container--MarginBlockStart: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-page--m-dock--ColumnGap: var(--pf-t--global--spacer--inset--page-chrome);
 }
 
 .pf-v6-c-page {
@@ -13465,11 +13574,22 @@ ul.pf-v6-c-list {
   --pf-v6-c-page--masthead--main-container--GridArea: main;
   --pf-v6-c-page__main-container--MaxHeight: var(--pf-v6-c-page--m-dock__main-container--MaxHeight);
   --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--MarginBlockStart);
-  --pf-v6-c-page__main-container--MarginInlineStart: 0;
-  grid-template-areas: "dock main";
-  grid-template-rows: auto;
+  grid-template-areas: "header header" "dock main";
+  grid-template-rows: max-content 1fr;
   grid-template-columns: auto 1fr;
-  column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
+}
+@media (min-width: 62rem) {
+  .pf-v6-c-page.pf-m-dock {
+    --pf-v6-c-page__main-container--MarginBlockStart: var(--pf-v6-c-page--m-dock__main-container--xl--MarginBlockStart);
+    --pf-v6-c-page__main-container--MarginInlineStart: 0;
+    grid-template-areas: "dock main";
+    grid-template-rows: auto;
+    grid-template-columns: auto 1fr;
+    column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
+  }
+  .pf-v6-c-page.pf-m-dock > .pf-v6-c-masthead {
+    display: none;
+  }
 }
 .pf-v6-c-page > .pf-v6-c-masthead .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);
@@ -13526,10 +13646,40 @@ ul.pf-v6-c-list {
   z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
   grid-area: header;
 }
+.pf-v6-c-page.pf-m-dock > .pf-v6-c-masthead {
+  --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-page--m-dock--c-masthead--m-display-inline--GridTemplateColumns);
+}
 
 .pf-v6-c-page__dock {
+  position: fixed;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: 0;
   z-index: var(--pf-v6-c-page__dock--ZIndex);
   grid-area: dock;
+  width: var(--pf-v6-c-page__dock--Width);
+  transition: translate var(--pf-v6-c-page__dock--TransitionDuration--slide) var(--pf-v6-c-page__dock--TransitionTimingFunction--slide);
+  translate: -100% 0;
+}
+.pf-v6-c-page__dock.pf-m-expanded {
+  --pf-v6-c-page__dock--TransitionDuration--slide: var(--pf-v6-c-page__dock--m-expanded--TransitionDuration--slide);
+  border-inline-end: var(--pf-v6-c-page__dock--BorderInlineEndWidth) solid var(--pf-v6-c-page__dock--BorderInlineEndColor);
+  translate: 0;
+}
+@media (min-width: 62rem) {
+  .pf-v6-c-page__dock {
+    --pf-v6-c-page__dock--BorderInlineEndWidth: 0;
+    position: revert;
+    inset: revert;
+    width: auto;
+    translate: 0;
+  }
+}
+.pf-v6-c-page__dock .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__content-section, .pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item) {
+  align-items: stretch;
+}
+.pf-v6-c-page__dock.pf-m-text-expanded {
+  width: var(--pf-v6-c-page__dock--Width);
 }
 
 .pf-v6-c-page__sidebar {

package/docs/components/Breadcrumb/examples/Breadcrumb.md

@@ -380,7 +380,6 @@ cssPrefix: pf-v6-c-breadcrumb
           class="pf-v6-c-menu-toggle pf-m-text pf-m-small pf-m-plain"
           type="button"
           aria-expanded="false"
-          aria-label="Menu toggle"
         >
           <span class="pf-v6-c-menu-toggle__count">
             <span class="pf-v6-c-badge pf-m-unread">