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

package/components/Button/button.css

@@ -3,7 +3,7 @@
   --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);
@@ -371,7 +371,7 @@
   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);
@@ -858,8 +858,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);

package/components/Button/button.scss

@@ -5,7 +5,7 @@
   --#{$button}--AlignItems: baseline;
   --#{$button}--JustifyContent: center;
   --#{$button}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
-  --#{$button}--MinWidth: calc(1em * var(--#{$button}--LineHeight) + var(--#{$button}--PaddingBlockStart) + var(--#{$button}--PaddingBlockEnd));
+  --#{$button}--MinWidth: initial;
   --#{$button}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
   --#{$button}--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
   --#{$button}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
@@ -435,7 +435,7 @@
   gap: var(--#{$button}--Gap);
   align-items: var(--#{$button}--AlignItems);
   justify-content: var(--#{$button}--JustifyContent);
-  min-width: var(--#{$button}--MinWidth);
+  min-width: var(--#{$button}--MinWidth, revert);
   padding-block-start: var(--#{$button}--PaddingBlockStart);
   padding-block-end: var(--#{$button}--PaddingBlockEnd);
   padding-inline-start: var(--#{$button}--PaddingInlineStart);
@@ -986,9 +986,33 @@
     animation-duration: var(--#{$button}--m-notify__icon--AnimationDuration--notify);
     animation-timing-function: var(--#{$button}--m-notify__icon--AnimationTimingFunction--notify);
   }
+
+  &.pf-m-dock {
+    justify-content: flex-start;
+    width: 100%;
+
+    @media (min-width: $pf-v6-global--breakpoint--dock--expand) {
+      justify-content: center;
+
+      .#{$button}__text {
+        display: none;
+      }
+    }
+  }
+
+  @at-root .#{$page}__dock.pf-m-text-expanded &,
+  &.pf-m-text-expanded {
+    justify-content: flex-start;
+    width: 100%;
+
+    .#{$button}__text {
+      display: revert;
+    }
+  }
 }
 
 .#{$button}__icon {
+  min-width: 1lh;
   margin-inline-start: var(--#{$button}__icon--MarginInlineStart);
   margin-inline-end: var(--#{$button}__icon--MarginInlineEnd);
   color: var(--#{$button}__icon--Color);

package/components/Card/card.css

@@ -1,9 +1,10 @@
 .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);
@@ -33,7 +34,8 @@
   --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);
@@ -70,13 +72,14 @@
   --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 {
@@ -87,6 +90,7 @@
   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;
@@ -100,6 +104,7 @@
   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 {
@@ -134,12 +139,16 @@
 .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);
@@ -163,13 +172,16 @@
   --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));

package/components/Card/card.scss

@@ -2,10 +2,11 @@
 
 @include pf-root($card) {
   --#{$card}--BackgroundColor: var(--pf-t--global--background--color--primary--default);
-  --#{$card}--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$card}--BorderColor: var(--pf-t--global--border--color--subtle);
   --#{$card}--BorderStyle: solid;
   --#{$card}--BorderWidth: var(--pf-t--global--border--width--box--default);
   --#{$card}--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$card}--BoxShadow: var(--pf-t--global--box-shadow--sm);
   --#{$card}--first-child--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --#{$card}--child--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --#{$card}--child--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -39,7 +40,8 @@
   --#{$card}--m-expanded__header-toggle-icon--Rotate: -180deg;
 
   // Selectable/Clickable
-  --#{$card}--m-selectable--BorderWidth: var(--#{$card}--BorderWidth);
+  --#{$card}--m-selectable--BorderWidth: var(--pf-t--global--border--width--box--default);
+  --#{$card}--m-selectable--BorderColor: var(--pf-t--global--border--color--control--default);
 
   // Clickable clicked
   --#{$card}--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -97,8 +99,6 @@
 
   // Secondary
   --#{$card}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$card}--m-secondary--BorderColor: var(--pf-t--global--border--color--high-contrast);
-  --#{$card}--m-secondary--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
 
   // Full height
   --#{$card}--m-full-height--Height: 100%;
@@ -106,10 +106,15 @@
   // Plain - no border or background color
   --#{$card}--m-plain--BorderColor: transparent;
   --#{$card}--m-plain--BackgroundColor: transparent;
+  --#{$card}--m-plain--BoxShadow: none;
 
   // Toggle right
   --#{$card}__header--m-toggle-right--toggle--MarginInlineEnd: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --#{$card}__header--m-toggle-right--toggle--MarginInlineStart: var(--pf-t--global--spacer--gap--text-to-element--default);
+
+  // As tile
+  --#{$card}--m-as-tile--BackgroundColor: var(--pf-t--global--background--color--control--default);
+  --#{$card}--m-as-tile--BorderColor: var(--pf-t--global--border--color--control--default);
 }
 
 .#{$card} {
@@ -120,6 +125,7 @@
   background-color: var(--#{$card}--BackgroundColor);
   border: 0;
   border-radius: var(--#{$card}--BorderRadius);
+  box-shadow: var(--#{$card}--BoxShadow);
 
   &::before {
     position: absolute;
@@ -141,6 +147,8 @@
   // SELECTABLE or CLICKABLE CARDS
   &.pf-m-selectable,
   &.pf-m-clickable {
+    --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
+
     isolation: isolate;
 
     &::before {
@@ -196,8 +204,14 @@
   }
   // stylelint-enable selector-max-class
 
-  // when the whole card is clickable and the card actions are invisible, remove the padding/margin so it doesn't take up space
+  
   @at-root .#{$card}__actions:has(> .#{$card}__selectable-actions input.#{$pf-prefix}screen-reader), // targets "card as tile", which are selectable cards with inputs
+  &:has(.#{$card}__selectable-actions input.#{$pf-prefix}screen-reader) {
+    --#{$card}--BackgroundColor: var(--#{$card}--m-as-tile--BackgroundColor);
+    --#{$card}--BorderColor: var(--#{$card}--m-as-tile--BorderColor);
+  }
+  
+  // when the whole card is clickable and the card actions are invisible, remove the padding/margin so it doesn't take up space
   &.pf-m-clickable:not(.pf-m-selectable) {
     --#{$card}__actions--PaddingInlineStart: 0;
     --#{$card}__actions--MarginBlockStart: 0;
@@ -229,14 +243,19 @@
   }
 
   &.pf-m-secondary {
-    --#{$card}--BorderColor: var(--#{$card}--m-secondary--BorderColor);
-    --#{$card}--BorderWidth: var(--#{$card}--m-secondary--BorderWidth);
     --#{$card}--BackgroundColor: var(--#{$card}--m-secondary--BackgroundColor);
+
+    &.pf-m-selectable:not(.pf-m-current, .pf-m-selected),
+    &.pf-m-clickable:not(.pf-m-current, .pf-m-selected) {
+      --#{$card}--BorderColor: var(--#{$card}--m-selectable--BorderColor);
+      --#{$card}--BorderWidth: var(--#{$card}--m-selectable--BorderWidth);
+    }
   }
 
   &.pf-m-plain {
     --#{$card}--BorderColor: var(--#{$card}--m-plain--BorderColor);
     --#{$card}--BackgroundColor: var(--#{$card}--m-plain--BackgroundColor);
+    --#{$card}--BoxShadow: var(--#{$card}--m-plain--BoxShadow);
   }
 
   &.pf-m-expanded {

package/components/Masthead/masthead.css

@@ -8,6 +8,7 @@
   --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);
@@ -124,24 +125,57 @@
   --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;

package/components/Masthead/masthead.scss

@@ -16,6 +16,7 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   // * Masthead main container holds the toggle and brand
   --#{$masthead}__main--ColumnGap: var(--pf-t--global--spacer--md);
   --#{$masthead}__main--MarginInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
+  --#{$masthead}--m-docked__main--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
 
   // * Masthead brand
   --#{$masthead}__logo--MaxHeight: #{pf-size-prem(38px)};
@@ -155,27 +156,74 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
     --#{$masthead}--m-display-inline--breakpoint--xl--GridTemplateColumns: auto;
     --#{$masthead}__main--GridColumn: auto;
     --#{$masthead}__content--GridColumn: auto;
-    --#{$masthead}__logo--Width: auto;
     --#{$masthead}__main--MarginInlineEnd: 0;
 
     display: flex;
     flex-direction: column;
-    align-items: center;
-    width: fit-content;
+    align-items: stretch;
     height: 100%;
     backdrop-filter: var(--#{$masthead}--m-docked--BackdropFilter);
 
+    .#{$masthead}__logo {
+      width: revert;
+
+      &.pf-m-compact {
+        display: none;
+        max-width: #{pf-size-prem(37px)};
+        max-height: revert;
+      }
+    }
+
+    .#{$masthead}__main {
+      flex-direction: column;
+      row-gap: var(--#{$masthead}--m-docked__main--RowGap);
+      align-items: flex-start;
+    }
+
     .#{$masthead}__content {
       flex-grow: 1;
       flex-direction: column;
+      align-items: stretch;
       align-self: revert;
     }
 
     .#{$toolbar} {
-      --#{$masthead}--c-toolbar--Width: fit-content;
+      --pf-v6-c-toolbar--m-vertical--Width: auto;
 
       height: var(--#{$masthead}--m-docked--c-toolbar--Height);
     }
+
+    @media (min-width: $pf-v6-global--breakpoint--dock--expand) {
+      .#{$masthead}__main {
+        align-items: center;
+      }
+
+      .#{$masthead}__logo {
+        display: none;
+
+        // stylelint-disable max-nesting-depth
+        &.pf-m-compact {
+          display: revert;
+        }
+        // stylelint-enable
+      }
+    }
+
+    @at-root .#{$page}__dock.pf-m-text-expanded & {
+      .#{$masthead}__logo {
+        display: revert;
+
+        // stylelint-disable max-nesting-depth
+        &.pf-m-compact {
+          display: none;
+        }
+        // stylelint-enable
+      }
+
+      .#{$masthead}__main {
+        align-items: flex-start;
+      }
+    }
   }
 
   .#{$toolbar}__content-section {

package/components/MenuToggle/menu-toggle.css

@@ -4,7 +4,7 @@
   --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);
@@ -155,7 +155,7 @@
   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);
@@ -349,6 +349,29 @@
 .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>";
@@ -496,6 +519,7 @@
 
 .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);

package/components/MenuToggle/menu-toggle.scss

@@ -6,7 +6,7 @@
   --#{$menu-toggle}--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
   --#{$menu-toggle}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
   --#{$menu-toggle}--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
-  --#{$menu-toggle}--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingBlockStart) + var(--#{$menu-toggle}--PaddingBlockEnd));
+  --#{$menu-toggle}--MinWidth: initial;
   --#{$menu-toggle}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$menu-toggle}--Color: var(--pf-t--global--text--color--regular);
   --#{$menu-toggle}--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -201,7 +201,7 @@
   gap: var(--#{$menu-toggle}--Gap);
   align-items: center;
   justify-content: center;
-  min-width: var(--#{$menu-toggle}--MinWidth);
+  min-width: var(--#{$menu-toggle}--MinWidth, revert);
   max-width: 100%;
   padding-block-start: var(--#{$menu-toggle}--PaddingBlockStart);
   padding-block-end: var(--#{$menu-toggle}--PaddingBlockEnd);
@@ -426,6 +426,33 @@
       pointer-events: none;
     }
   }
+  
+  &.pf-m-dock {
+    justify-content: flex-start;
+    width: 100%;
+
+    @media (min-width: $pf-v6-global--breakpoint--dock--expand) {
+      justify-content: center;
+      width: auto;
+
+      .#{$menu-toggle}__text,
+      .#{$menu-toggle}__controls {
+        display: none;
+      }
+    }
+  }
+
+  @at-root .#{$page}__dock.pf-m-text-expanded &,
+  &.pf-m-text-expanded {
+    justify-content: flex-start;
+    width: 100%;
+
+    .#{$menu-toggle}__text,
+    .#{$menu-toggle}__controls {
+      display: revert;
+    }
+  }
+
 }
 
 // Register the property type for the custom property to be animatable
@@ -615,6 +642,7 @@
 
 .#{$menu-toggle}__icon {
   flex-shrink: 0;
+  min-width: 1lh;
   transition-delay: var(--#{$menu-toggle}__icon--TransitionDelay);
   transition-duration: var(--#{$menu-toggle}__icon--TransitionDuration);
   transition-property: var(--#{$menu-toggle}__icon--TransitionProperty);

package/components/Nav/nav.css

@@ -158,17 +158,23 @@
   --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%;
 }
@@ -318,7 +324,9 @@
 }
 
 .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 {

package/components/Nav/nav.scss

@@ -198,17 +198,23 @@
     --#{$nav}__link--hover--BackgroundColor: var(--#{$nav}--m-docked__link--hover--BackgroundColor);
     --#{$nav}__link--m-current--BackgroundColor: var(--#{$nav}--m-docked__link--m-current--BackgroundColor);
 
-    width: fit-content;
+    width: 100%;
+  
+    @media (min-width: #{$pf-v6-global--breakpoint--dock--expand}) {
+      width: fit-content;
 
-    .#{$nav}__link-icon {
-      position: relative;
-      align-self: center;
-      min-width: 1lh;
-      text-align: center;
+      .#{$nav}__link-text {
+        display: none;
+      }
     }
 
-    .#{$nav}__link-text {
-      display: none;
+    @at-root .#{$page}__dock.pf-m-text-expanded &,
+    &.pf-m-text-expanded {
+      width: 100%;
+
+      .#{$nav}__link-text {
+        display: revert;
+      }
     }
   }
 
@@ -393,7 +399,9 @@
 
 // - Nav link icon
 .#{$nav}__link-icon {
+  min-width: 1lh;
   color: var(--#{$nav}__link-icon--Color);
+  text-align: center;
 }
 
 // - Nav link text