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

package/docs/demos/Wizard/examples/Wizard.md

@@ -16,6 +16,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
+
   <header class="pf-v6-c-masthead" id="wizard-basic-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
@@ -710,6 +711,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
+
   <header class="pf-v6-c-masthead" id="wizard-nav-expanded-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
@@ -1383,6 +1385,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
+
   <header
     class="pf-v6-c-masthead"
     id="wizard-with-drawer-closed-example-docked"
@@ -2155,6 +2158,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
+
   <header
     class="pf-v6-c-masthead"
     id="wizard-with-drawer-expanded-example-docked"
@@ -2926,6 +2930,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
+
   <header class="pf-v6-c-masthead" id="wizard-with-drawer-info-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
@@ -3569,6 +3574,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
+
   <header class="pf-v6-c-masthead" id="wizard-in-page-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
@@ -4195,6 +4201,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
+
   <header class="pf-v6-c-masthead" id="in-page-nav-expanded-example-docked">
     <div class="pf-v6-c-masthead__main">
       <span class="pf-v6-c-masthead__toggle">
@@ -4800,6 +4807,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
+
   <header
     class="pf-v6-c-masthead"
     id="wizard-with-drawer-in-page-example-docked"
@@ -5491,6 +5499,7 @@ wrapperTag: div
       <span class="pf-v6-c-button__text">Skip to content</span>
     </a>
   </div>
+
   <header
     class="pf-v6-c-masthead"
     id="wizard-with-drawer-in-page-expanded-example-docked"

package/package.json

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

package/patternfly-no-globals.css

@@ -10664,7 +10664,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);
@@ -11032,7 +11032,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);
@@ -11519,8 +11519,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);
@@ -11850,10 +11870,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);
@@ -11883,7 +11904,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);
@@ -11920,13 +11942,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 {
@@ -11937,6 +11960,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;
@@ -11950,6 +11974,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 {
@@ -11984,12 +12009,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);
@@ -12013,13 +12042,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));
@@ -19438,6 +19470,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);
@@ -19554,24 +19587,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;
@@ -20663,7 +20729,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);
@@ -20814,7 +20880,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);
@@ -21008,6 +21074,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>";
@@ -21155,6 +21244,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);
@@ -21761,17 +21851,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%;
 }
@@ -21921,7 +22017,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 {
@@ -22360,8 +22458,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);
@@ -22390,6 +22500,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 {
@@ -22498,9 +22610,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 {
@@ -22524,11 +22633,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);
@@ -22585,10 +22705,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 {