@patternfly/patternfly 6.5.0-prerelease.30 → 6.5.0-prerelease.32

package/components/Compass/compass.css

@@ -19,16 +19,16 @@
   --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--BackgroundColor: var(--pf-t--global--background--color--glass--default);
-  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
-  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
   --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--BorderWidth: var(--pf-t--global--border--width--regular);
+  --pf-v6-c-compass__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
+  --pf-v6-c-compass__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
   --pf-v6-c-compass__panel--BorderColor: var(--pf-t--global--border--color--alt);
+  --pf-v6-c-compass__panel--BorderRadius: var(--pf-t--global--border--radius--large);
+  --pf-v6-c-compass__panel--BorderWidth: var(--pf-t--global--border--width--regular);
   --pf-v6-c-compass__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
   --pf-v6-c-compass__message-bar--Width: 450px;
   --pf-v6-c-compass__message-bar--MinWidth: 300px;
@@ -79,6 +79,16 @@
   background-image: var(--pf-v6-c-compass--BackgroundImage);
   background-size: cover;
 }
+.pf-v6-c-compass.pf-m-dock {
+  grid-template-areas: "dock main";
+  grid-template-rows: auto;
+  grid-template-columns: auto 1fr;
+  align-items: stretch;
+  padding: 0;
+}
+.pf-v6-c-compass.pf-m-dock .pf-v6-c-compass__main {
+  padding: var(--pf-v6-c-compass--Padding);
+}
 :root:where(.pf-v6-theme-dark) .pf-v6-c-compass {
   --pf-v6-c-compass--BackgroundImage: var(--pf-v6-c-compass--BackgroundImage--dark);
 }

package/components/Compass/compass.scss

@@ -21,16 +21,16 @@
   --#{$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--BackgroundColor: var(--pf-t--global--background--color--glass--default);
-  --#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
-  --#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--large);
   --#{$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--BorderWidth: var(--pf-t--global--border--width--regular);
+  --#{$compass}__panel--BackgroundColor: var(--pf-t--global--background--color--glass--default);
+  --#{$compass}__panel--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
   --#{$compass}__panel--BorderColor: var(--pf-t--global--border--color--alt);
+  --#{$compass}__panel--BorderRadius: var(--pf-t--global--border--radius--large);
+  --#{$compass}__panel--BorderWidth: var(--pf-t--global--border--width--regular);
   --#{$compass}__panel--BoxShadow: var(--pf-t--global--box-shadow--md);
   --#{$compass}__message-bar--Width: 450px;
   --#{$compass}__message-bar--MinWidth: 300px;
@@ -86,6 +86,18 @@
   background-image: var(--#{$compass}--BackgroundImage);
   background-size: cover;
 
+  &.pf-m-dock {
+    grid-template-areas: "dock main";
+    grid-template-rows: auto;
+    grid-template-columns: auto 1fr;
+    align-items: stretch;
+    padding: 0;
+
+    .#{$compass}__main {
+      padding: var(--#{$compass}--Padding);
+    }
+  }
+
   :root:where(.#{$pf-prefix}theme-dark) & {
     --#{$compass}--BackgroundImage: var(--#{$compass}--BackgroundImage--dark);
   }

package/components/Drawer/drawer.css

@@ -173,7 +173,7 @@
   --pf-v6-c-drawer__panel--BackgroundColor: var(--pf-v6-c-drawer__panel--m-inline--BackgroundColor);
   --pf-v6-c-drawer__panel--BorderInlineStartWidth: var(--pf-v6-c-drawer--m-inline__panel--after--Width);
   --pf-v6-c-drawer--m-pill__main--Gap: var(--pf-v6-c-drawer--m-pill--m-inline__main--Gap);
-  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0;
+  --pf-v6-c-drawer--m-pill--m-expanded__panel--inset: 0px;
 }
 .pf-v6-c-drawer.pf-m-inline > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable), .pf-v6-c-drawer.pf-m-static > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
   padding-inline-start: var(--pf-v6-c-drawer--m-inline__panel--PaddingInlineStart);
@@ -202,7 +202,7 @@
   visibility: visible;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
-  transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
+  transform: translateX(calc(calc(-100% - var(--pf-v6-c-drawer--m-expanded__panel--inset)) * var(--pf-v6-global--inverse--multiplier)));
 }
 
 .pf-v6-c-drawer.pf-m-expanded.pf-m-panel-left > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
@@ -551,82 +551,86 @@
 }
 @media (min-width: 48rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25 {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-33 {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-50 {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-66 {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-75 {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-100 {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
+    --pf-v6-c-drawer__main--Gap: 0;
   }
 }
 @media (min-width: 62rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25-on-lg {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-33-on-lg {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-50-on-lg {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-66-on-lg {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-75-on-lg {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-100-on-lg {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
+    --pf-v6-c-drawer__main--Gap: 0;
   }
 }
 @media (min-width: 75rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25-on-xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-33-on-xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-50-on-xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-66-on-xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-75-on-xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-100-on-xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
+    --pf-v6-c-drawer__main--Gap: 0;
   }
 }
 @media (min-width: 90.625rem) {
   .pf-v6-c-drawer__panel.pf-m-width-25-on-2xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 25%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(25% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-33-on-2xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 33%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(33% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-50-on-2xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(50% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-66-on-2xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 66%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(66% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-75-on-2xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 75%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(75% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
   }
   .pf-v6-c-drawer__panel.pf-m-width-100-on-2xl {
-    --pf-v6-c-drawer__panel--md--FlexBasis: 100%;
+    --pf-v6-c-drawer__panel--md--FlexBasis: calc(100% - (2 * var(--pf-v6-c-drawer--m-expanded__panel--inset)));
+    --pf-v6-c-drawer__main--Gap: 0;
   }
 }
 @media (min-width: 48rem) {

package/components/Drawer/drawer.scss

@@ -215,7 +215,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
     --#{$drawer}__panel--BackgroundColor: var(--#{$drawer}__panel--m-inline--BackgroundColor);
     --#{$drawer}__panel--BorderInlineStartWidth: var(--#{$drawer}--m-inline__panel--after--Width);
     --#{$drawer}--m-pill__main--Gap: var(--#{$drawer}--m-pill--m-inline__main--Gap);
-    --#{$drawer}--m-pill--m-expanded__panel--inset: 0;
+    --#{$drawer}--m-pill--m-expanded__panel--inset: 0px;
 
     > .#{$drawer}__main > .#{$drawer}__panel:not(.pf-m-no-border, .pf-m-resizable) {
       padding-inline-start: var(--#{$drawer}--m-inline__panel--PaddingInlineStart);
@@ -252,7 +252,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
       @include pf-v6-bidirectional-style(
         $prop: transform,
         $ltr-val: translateX(calc(-100% - var(--#{$drawer}--m-expanded__panel--inset))),
-        $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)}),
+        $rtl-val: translateX(#{pf-v6-calc-inverse(calc(-100% - var(--#{$drawer}--m-expanded__panel--inset)))}),
       );
 
       --#{$drawer}__panel--Opacity: var(--#{$drawer}--m-expanded__panel--Opacity);
@@ -712,7 +712,11 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   @include pf-v6-apply-breakpoint($breakpoint) {
     @each $width-value in $pf-v6-c-drawer__panel--list--width {
       .#{$drawer}__panel.pf-m-width-#{$width-value}#{$breakpoint-name} {
-        --#{$drawer}__panel--md--FlexBasis: #{percentage(math.div($width-value, 100))};
+        --#{$drawer}__panel--md--FlexBasis: calc(#{percentage(math.div($width-value, 100))} - (2 * var(--#{$drawer}--m-expanded__panel--inset)));
+        
+        @if $width-value == 100 {
+          --#{$drawer}__main--Gap: 0; // Reset gap for width-100 inline pill drawers to prevent misalignment
+        }
       }
     }
   }

package/components/Masthead/masthead.css

@@ -36,6 +36,15 @@
   --pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn: 2;
   --pf-v6-c-masthead--m-display-inline__main--Display: flex;
   --pf-v6-c-masthead--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
+  --pf-v6-c-masthead--m-docked--GridTemplateRows: min-content 1fr;
+  --pf-v6-c-masthead--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default);
+  --pf-v6-c-masthead--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-masthead--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-masthead--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-masthead--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-masthead--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
+  --pf-v6-c-masthead--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
+  --pf-v6-c-masthead--m-docked--c-toolbar--Height: 100%;
   --pf-v6-c-masthead__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-masthead__expandable-content--BorderBlockStart: var(--pf-v6-c-masthead--BorderWidth) solid var(--pf-v6-c-masthead--BorderColor);
   --pf-v6-c-masthead--c-toolbar--Width: 100%;
@@ -56,6 +65,7 @@
   --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-stack__main--Display);
   --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-stack__main--ColumnGap);
   display: grid;
+  grid-template-rows: var(--pf-v6-c-masthead--GridTemplateRows);
   grid-template-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
   row-gap: var(--pf-v6-c-masthead--RowGap);
   column-gap: var(--pf-v6-c-masthead--ColumnGap);
@@ -88,6 +98,36 @@
     --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
   }
 }
+.pf-v6-c-masthead.pf-m-docked {
+  --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-masthead--m-docked--BackgroundColor);
+  --pf-v6-c-masthead--GridTemplateRows: var(--pf-v6-c-masthead--m-docked--GridTemplateRows);
+  --pf-v6-c-masthead--PaddingBlockStart: var(--pf-v6-c-masthead--m-docked--PaddingBlockStart);
+  --pf-v6-c-masthead--PaddingBlockEnd: var(--pf-v6-c-masthead--m-docked--PaddingBlockEnd);
+  --pf-v6-c-masthead--PaddingInlineStart: var(--pf-v6-c-masthead--m-docked--PaddingInlineStart);
+  --pf-v6-c-masthead--PaddingInlineEnd: var(--pf-v6-c-masthead--m-docked--PaddingInlineEnd);
+  --pf-v6-c-masthead--GridTemplateColumns: auto;
+  --pf-v6-c-masthead--RowGap: var(--pf-v6-c-masthead--m-docked--RowGap);
+  --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;
+  height: 100%;
+  backdrop-filter: var(--pf-v6-c-masthead--m-docked--BackdropFilter);
+}
+.pf-v6-c-masthead.pf-m-docked .pf-v6-c-masthead__content {
+  flex-direction: column;
+  flex-grow: 1;
+  align-self: revert;
+}
+.pf-v6-c-masthead.pf-m-docked .pf-v6-c-toolbar {
+  --pf-v6-c-masthead--c-toolbar--Width: fit-content;
+  height: var(--pf-v6-c-masthead--m-docked--c-toolbar--Height);
+}
 .pf-v6-c-masthead .pf-v6-c-toolbar__content-section {
   flex-wrap: nowrap;
   min-width: 0;

package/components/Masthead/masthead.scss

@@ -55,6 +55,17 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   --#{$masthead}--m-display-inline__main--Display: flex;
   --#{$masthead}--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
 
+  // Masthead docked
+  --#{$masthead}--m-docked--GridTemplateRows: min-content 1fr;
+  --#{$masthead}--m-docked--RowGap: var(--pf-t--global--spacer--gutter--default);
+  --#{$masthead}--m-docked--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --#{$masthead}--m-docked--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --#{$masthead}--m-docked--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$masthead}--m-docked--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$masthead}--m-docked--BackgroundColor: var(--pf-t--global--background--color--glass--default);
+  --#{$masthead}--m-docked--BackdropFilter: var(--pf-t--global--background--color--glass--filter);
+  --#{$masthead}--m-docked--c-toolbar--Height: 100%;
+
   // * Masthead toolbar
   --#{$masthead}__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --#{$masthead}__expandable-content--BorderBlockStart: var(--#{$masthead}--BorderWidth) solid var(--#{$masthead}--BorderColor);
@@ -116,6 +127,7 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
 
   // - Masthead
   display: grid;
+  grid-template-rows: var(--#{$masthead}--GridTemplateRows);
   grid-template-columns: var(--#{$masthead}--GridTemplateColumns);
   row-gap: var(--#{$masthead}--RowGap);
   column-gap: var(--#{$masthead}--ColumnGap);
@@ -129,6 +141,41 @@ $pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   padding-inline-end: var(--#{$masthead}--PaddingInlineEnd, var(--#{$masthead}--PaddingInline));
   background-color: var(--#{$masthead}--BackgroundColor);
 
+  &.pf-m-docked {
+    --#{$masthead}--BackgroundColor: var(--#{$masthead}--m-docked--BackgroundColor);
+    --#{$masthead}--GridTemplateRows: var(--#{$masthead}--m-docked--GridTemplateRows);
+    --#{$masthead}--PaddingBlockStart: var(--#{$masthead}--m-docked--PaddingBlockStart);
+    --#{$masthead}--PaddingBlockEnd: var(--#{$masthead}--m-docked--PaddingBlockEnd);
+    --#{$masthead}--PaddingInlineStart: var(--#{$masthead}--m-docked--PaddingInlineStart);
+    --#{$masthead}--PaddingInlineEnd: var(--#{$masthead}--m-docked--PaddingInlineEnd);
+    --#{$masthead}--GridTemplateColumns: auto;
+    --#{$masthead}--RowGap: var(--#{$masthead}--m-docked--RowGap);
+    --#{$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;
+    height: 100%;
+    backdrop-filter: var(--#{$masthead}--m-docked--BackdropFilter);
+
+    .#{$masthead}__content {
+      flex-direction: column;
+      flex-grow: 1;
+      align-self: revert;
+    }
+
+    .#{$toolbar} {
+      --#{$masthead}--c-toolbar--Width: fit-content;
+
+      height: var(--#{$masthead}--m-docked--c-toolbar--Height);
+    }
+  }
+
   .#{$toolbar}__content-section {
     flex-wrap: nowrap;
     min-width: 0;

package/components/Nav/nav.css

@@ -28,6 +28,15 @@
   --pf-v6-c-nav__section-title--PaddingInlineStart: var(--pf-v6-c-nav__link--PaddingInlineStart);
   --pf-v6-c-nav__section-title--PaddingInlineEnd: var(--pf-v6-c-nav__link--PaddingInlineEnd);
   --pf-v6-c-nav__item--RowGap: var(--pf-v6-c-nav__list--RowGap);
+  --pf-v6-c-nav__item--accent--size: var(--pf-t--global--border--width--extra-strong);
+  --pf-v6-c-nav__item--accent--color: var(--pf-t--global--border--color--clicked);
+  --pf-v6-c-nav__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
+  --pf-v6-c-nav__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-nav__item--accent--ScaleY: 0;
+  --pf-v6-c-nav__item--current--accent--ScaleY: 1;
+  --pf-v6-c-nav__item--accent--TransitionDuration: 0;
+  --pf-v6-c-nav__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-nav__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
   --pf-v6-c-nav__item__toggle-icon--Rotate: 0;
   --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
@@ -52,6 +61,7 @@
   --pf-v6-c-nav__link--m-current--TransitionTimingFunction--color: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-nav__link-icon--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v6-c-nav__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
+  --pf-v6-c-nav__link-text--FontSize: initial;
   --pf-v6-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
   --pf-v6-c-nav__subnav--PaddingBlockStart: var(--pf-v6-c-nav__item--RowGap);
   --pf-v6-c-nav__subnav--PaddingBlockEnd: var(--pf-v6-c-nav__item--RowGap);
@@ -92,6 +102,11 @@
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-nav--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+  --pf-v6-c-nav--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-nav--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-nav--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --pf-v6-c-nav--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
 }
 @media screen and (prefers-reduced-motion: no-preference) {
   .pf-v6-c-nav {
@@ -133,6 +148,21 @@
 .pf-v6-c-nav.pf-m-fill {
   flex-grow: 1;
 }
+.pf-v6-c-nav.pf-m-docked {
+  --pf-v6-c-nav--PaddingBlockStart: 0;
+  --pf-v6-c-nav--PaddingBlockEnd: 0;
+  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav--m-docked__list--RowGap);
+  --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-v6-c-nav--m-docked__link--PaddingInlineStart);
+  --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;
+}
+.pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-icon {
+  position: relative;
+  align-self: center;
+  min-width: 1lh;
+}
 .pf-v6-c-nav .pf-v6-c-menu {
   --pf-v6-c-menu--MinWidth: 100%;
 }
@@ -196,14 +226,34 @@
 }
 
 .pf-v6-c-nav__item {
+  position: relative;
   scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
 }
+.pf-v6-c-nav__item::before {
+  position: absolute;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inset-inline-start: var(--pf-v6-c-nav__item--accent--offset);
+  width: var(--pf-v6-c-nav__item--accent--size);
+  pointer-events: none;
+  content: var(--pf-v6-c-nav__item--accent--content, "");
+  background-color: var(--pf-v6-c-nav__item--accent--color);
+  border-radius: var(--pf-v6-c-nav__item--accent--BorderRadius);
+  transition-timing-function: var(--pf-v6-c-nav__item--accent--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-nav__item--accent--TransitionDuration);
+  transition-property: scale;
+  scale: 1 var(--pf-v6-c-nav__item--accent--ScaleY);
+}
 .pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
   margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
 }
 .pf-v6-c-nav__item.pf-m-expanded:last-child > .pf-v6-c-nav__subnav {
   margin-block-end: calc(var(--pf-v6-c-nav__subnav--PaddingBlockEnd) * -1);
 }
+.pf-v6-c-nav__item:has(> .pf-v6-c-nav__link.pf-m-current) {
+  --pf-v6-c-nav__item--accent--ScaleY: var(--pf-v6-c-nav__item--current--accent--ScaleY);
+  --pf-v6-c-nav__item--accent--TransitionDuration: var(--pf-v6-c-nav__item--current--accent--TransitionDuration);
+}
 
 .pf-v6-c-nav__section {
   row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
@@ -265,6 +315,10 @@
   color: var(--pf-v6-c-nav__link-icon--Color);
 }
 
+.pf-v6-c-nav__link-text {
+  font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
+}
+
 .pf-v6-c-nav__toggle {
   flex: none;
   align-self: start;
@@ -320,6 +374,7 @@
 }
 
 .pf-v6-c-nav:where(.pf-m-horizontal) {
+  --pf-v6-c-nav__item--accent--content: none;
   padding: 0;
   overflow: hidden;
 }

package/components/Nav/nav.scss

@@ -40,6 +40,17 @@
   // * Nav item
   --#{$nav}__item--RowGap: var(--#{$nav}__list--RowGap);
 
+  // Nav item accent
+  --#{$nav}__item--accent--size: var(--pf-t--global--border--width--extra-strong);
+  --#{$nav}__item--accent--color: var(--pf-t--global--border--color--clicked);
+  --#{$nav}__item--accent--offset: calc(var(--pf-t--global--spacer--sm) * -1);
+  --#{$nav}__item--accent--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$nav}__item--accent--ScaleY: 0;
+  --#{$nav}__item--current--accent--ScaleY: 1;
+  --#{$nav}__item--accent--TransitionDuration: 0;
+  --#{$nav}__item--current--accent--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --#{$nav}__item--accent--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+
   // * Nav item toggle icon
   --#{$nav}__item__toggle-icon--Rotate: 0;
   --#{$nav}__item--m-expanded__toggle-icon--Rotate: 90deg;
@@ -74,6 +85,9 @@
   --#{$nav}__link-icon--Color: var(--pf-t--global--icon--color--subtle);
   --#{$nav}__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
 
+  // Nav link text
+  --#{$nav}__link-text--FontSize: initial;
+
   // * Nav subnav
   --#{$nav}__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
   --#{$nav}__subnav--PaddingBlockStart: var(--#{$nav}__item--RowGap); // needed to keep focus outline on first item from being cut off
@@ -129,6 +143,13 @@
   --#{$nav}--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --#{$nav}--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$nav}--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+
+  // Docked
+  --#{$nav}--m-docked__list--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
+  --#{$nav}--m-docked__link--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --#{$nav}--m-docked__link--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --#{$nav}--m-docked__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
+  --#{$nav}--m-docked__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
 }
 
 // - Nav display - default to grid
@@ -168,6 +189,24 @@
     flex-grow: 1;
   }
 
+  &.pf-m-docked {
+    --#{$nav}--PaddingBlockStart: 0;
+    --#{$nav}--PaddingBlockEnd: 0;
+    --#{$nav}__list--RowGap: var(--#{$nav}--m-docked__list--RowGap);
+    --#{$nav}__link--PaddingInlineStart: var(--#{$nav}--m-docked__link--PaddingInlineStart);
+    --#{$nav}__link--PaddingInlineEnd: var(--#{$nav}--m-docked__link--PaddingInlineEnd);
+    --#{$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;
+
+    .#{$nav}__link-icon {
+      position: relative;
+      align-self: center;
+      min-width: 1lh;
+    }
+  }
+
   .#{$menu} {
     --#{$menu}--MinWidth: 100%;
 
@@ -244,8 +283,25 @@
 
 // - Nav item
 .#{$nav}__item {
+  position: relative;
   scroll-snap-align: var(--#{$nav}__item--ScrollSnapAlign);
 
+  &::before {
+    position: absolute;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inset-inline-start: var(--#{$nav}__item--accent--offset);
+    width: var(--#{$nav}__item--accent--size);
+    pointer-events: none;
+    content: var(--#{$nav}__item--accent--content, "");
+    background-color: var(--#{$nav}__item--accent--color);
+    border-radius: var(--#{$nav}__item--accent--BorderRadius);
+    transition-timing-function: var(--#{$nav}__item--accent--TransitionTimingFunction);
+    transition-duration: var(--#{$nav}__item--accent--TransitionDuration);
+    transition-property: scale;
+    scale: 1 var(--#{$nav}__item--accent--ScaleY);
+  }
+
   > .#{$nav}__link[button] {
     margin-block-end: var(--#{$nav}__button--RowGap--row-offset);
   }
@@ -255,6 +311,11 @@
       margin-block-end: calc(var(--#{$nav}__subnav--PaddingBlockEnd) * -1); // offset bottom padding
     }
   }
+
+  &:has(> .#{$nav}__link.pf-m-current) {
+    --#{$nav}__item--accent--ScaleY: var(--#{$nav}__item--current--accent--ScaleY);
+    --#{$nav}__item--accent--TransitionDuration: var(--#{$nav}__item--current--accent--TransitionDuration);
+  }
 }
 
 // - Nav section
@@ -305,7 +366,6 @@
     border-radius: inherit;
   }
 
-
   // explicitly set background-color prop to avoid affecting child elements settings
   &:hover,
   &.pf-m-hover,
@@ -326,11 +386,16 @@
   }
 }
 
-// - Nav toggle caret
+// - Nav link icon
 .#{$nav}__link-icon {
   color: var(--#{$nav}__link-icon--Color);
 }
 
+// - Nav link text
+.#{$nav}__link-text {
+  font-size: var(--#{$nav}__link-text--FontSize, inherit);
+}
+
 // - Nav toggle caret
 .#{$nav}__toggle {
   flex: none;
@@ -341,7 +406,7 @@
   transform: translateY(var(--#{$nav}__toggle--TranslateY));
 }
 
-// - Nav toggle icon
+// - Nav toggle caret icon
 .#{$nav}__toggle-icon {
   display: inline-block;
   transition-timing-function: var(--#{$nav}__item__toggle-icon--TransitionTimingFunction--transform);
@@ -404,6 +469,8 @@
 
 // - Nav horizontal
 .#{$nav}:where(.pf-m-horizontal) {
+  --#{$nav}__item--accent--content: none;
+
   padding: 0;
   overflow: hidden;