@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

package/components/Nav/nav.scss

@@ -40,16 +40,27 @@
   // * 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--color--brand--accent--default);
+  --#{$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;
+  --#{$nav}__item--m-expanded__toggle-icon--Rotate: -180deg;
   --#{$nav}__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
   --#{$nav}__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default);
 
   // * Nav link
   --#{$nav}__link--ColumnGap: var(--pf-t--global--spacer--sm);
   --#{$nav}__link--AlignItems: baseline;
-  --#{$nav}__link--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$nav}__link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --#{$nav}__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$nav}__link--WhiteSpace: normal;
   --#{$nav}__link--Color: var(--pf-t--global--text--color--subtle);
@@ -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,29 @@
     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;
+      text-align: center;
+    }
+
+    .#{$nav}__link-text {
+      display: none;
+    }
+  }
+
   .#{$menu} {
     --#{$menu}--MinWidth: 100%;
 
@@ -244,8 +288,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 +316,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 +371,6 @@
     border-radius: inherit;
   }
 
-
   // explicitly set background-color prop to avoid affecting child elements settings
   &:hover,
   &.pf-m-hover,
@@ -326,11 +391,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 +411,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 +474,8 @@
 
 // - Nav horizontal
 .#{$nav}:where(.pf-m-horizontal) {
+  --#{$nav}__item--accent--content: none;
+
   padding: 0;
   overflow: hidden;
 

package/components/NotificationDrawer/notification-drawer.css

@@ -14,6 +14,7 @@
   --pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v6-c-notification-drawer__header-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
   --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-notification-drawer__body--PaddingBlockStart: 0;
   --pf-v6-c-notification-drawer__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -27,6 +28,7 @@
   --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --pf-v6-c-notification-drawer__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-notification-drawer__list-item--OutlineOffset: -0.25rem;
   --pf-v6-c-notification-drawer__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
   --pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor: var(--pf-t--global--border--color--status--info--default);
   --pf-v6-c-notification-drawer__list-item--m-warning__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
@@ -69,7 +71,7 @@
   --pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-notification-drawer__group-toggle-icon--Transition: transform var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionDuration) var(--pf-v6-c-notification-drawer__group-toggle-icon--TransitionTimingFunction);
-  --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
+  --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: -180deg;
 }
 
 .pf-v6-c-notification-drawer {
@@ -108,6 +110,7 @@
 
 .pf-v6-c-notification-drawer__header-action {
   display: flex;
+  gap: var(--pf-v6-c-notification-drawer__header-action--Gap);
   align-items: center;
   margin-inline-start: auto;
 }
@@ -136,8 +139,16 @@
   padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
   padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
   background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
-  border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
   border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
+  outline-offset: var(--pf-v6-c-notification-drawer__list-item--OutlineOffset);
+}
+.pf-v6-c-notification-drawer__list-item::before {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  content: "";
+  border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
+  border-radius: inherit;
 }
 .pf-v6-c-notification-drawer__list-item.pf-m-info {
   --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-info__list-item--BorderColor);
@@ -163,7 +174,6 @@
   --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderWidth);
   --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BackgroundColor);
   --pf-v6-c-notification-drawer__list-item--BorderColor: var(--pf-v6-c-notification-drawer__list-item--m-read--BorderColor);
-  position: relative;
 }
 .pf-v6-c-notification-drawer__list-item.pf-m-hoverable {
   cursor: pointer;
@@ -191,9 +201,9 @@
 }
 .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-notification-drawer__list-item-header-title--max-lines);
-  overflow: hidden;
 }
 
 .pf-v6-c-notification-drawer__list-item-action {
@@ -247,9 +257,9 @@
 
 .pf-v6-c-notification-drawer__group-toggle-title {
   display: -webkit-box;
+  overflow: hidden;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
-  overflow: hidden;
   flex: 1;
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
   font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
@@ -262,15 +272,15 @@
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
 }
 
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
+  scale: -1 1;
+}
+
 .pf-v6-c-notification-drawer__group-toggle-icon {
   margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
   color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
   transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
 }
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-notification-drawer__group-toggle-icon {
-  scale: -1 1;
-}
-
 .pf-v6-c-notification-drawer__group.pf-m-expanded .pf-v6-c-notification-drawer__group-toggle-icon {
   transform: rotate(var(--pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate));
 }

package/components/NotificationDrawer/notification-drawer.scss

@@ -18,6 +18,7 @@
   --#{$notification-drawer}__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --#{$notification-drawer}__header-status--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$notification-drawer}__header-status--Color: var(--pf-t--global--text--color--subtle);
+  --#{$notification-drawer}__header-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
 
   // Body
   --#{$notification-drawer}__body--ZIndex: var(--pf-t--global--z-index--xs);
@@ -37,6 +38,7 @@
   --#{$notification-drawer}__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --#{$notification-drawer}__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --#{$notification-drawer}__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$notification-drawer}__list-item--OutlineOffset: #{pf-size-prem(-4px)};
 
   // List item modifiers
   --#{$notification-drawer}__list-item--m-info__list-item-header-icon--Color: var(--pf-t--global--icon--color--status--info--default);
@@ -104,7 +106,7 @@
   --#{$notification-drawer}__group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$notification-drawer}__group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --#{$notification-drawer}__group-toggle-icon--Transition: transform var(--#{$notification-drawer}__group-toggle-icon--TransitionDuration) var(--#{$notification-drawer}__group-toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
-  --#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate: 90deg;
+  --#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate: -180deg;
 }
 
 .#{$notification-drawer} {
@@ -143,6 +145,7 @@
 
 .#{$notification-drawer}__header-action {
   display: flex;
+  gap: var(--#{$notification-drawer}__header-action--Gap);
   align-items: center;
   margin-inline-start: auto;
 }
@@ -171,8 +174,17 @@
   padding-inline-start: var(--#{$notification-drawer}__list-item--PaddingInlineStart);
   padding-inline-end: var(--#{$notification-drawer}__list-item--PaddingInlineEnd);
   background-color: var(--#{$notification-drawer}__list-item--BackgroundColor);
-  border: var(--#{$notification-drawer}__list-item--BorderWidth) solid var(--#{$notification-drawer}__list-item--BorderColor);
   border-radius: var(--#{$notification-drawer}__list-item--BorderRadius);
+  outline-offset: var(--#{$notification-drawer}__list-item--OutlineOffset);
+
+  &::before {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    content: '';
+    border: var(--#{$notification-drawer}__list-item--BorderWidth) solid var(--#{$notification-drawer}__list-item--BorderColor);
+    border-radius: inherit;
+  }
 
   &.pf-m-info {
     --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-info__list-item--BorderColor);
@@ -203,8 +215,6 @@
     --#{$notification-drawer}__list-item--BorderWidth: var(--#{$notification-drawer}__list-item--m-read--BorderWidth);
     --#{$notification-drawer}__list-item--BackgroundColor: var(--#{$notification-drawer}__list-item--m-read--BackgroundColor);
     --#{$notification-drawer}__list-item--BorderColor: var(--#{$notification-drawer}__list-item--m-read--BorderColor);
-
-    position: relative;
   }
 
   &.pf-m-hoverable {
@@ -316,4 +326,3 @@
     transform: rotate(var(--#{$notification-drawer}__group--m-expanded__group-toggle-icon--Rotate));
   }
 }
-

package/components/Page/page.css

@@ -2,6 +2,7 @@
   --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--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
+  --pf-v6-c-page__dock--ZIndex: var(--pf-t--global--z-index--md);
   --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);
@@ -24,6 +25,15 @@
   --pf-v6-c-page__sidebar--PaddingInlineEnd: 0;
   --pf-v6-c-page__sidebar--BorderInlineEndWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-page__sidebar--BorderInlineEndColor: var(--pf-t--global--border--color--high-contrast);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-page {
+    --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 {
   --pf-v6-c-page__sidebar-header--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-page__sidebar-header--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-page__sidebar-header--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -39,6 +49,15 @@
   --pf-v6-c-page__sidebar-body--m-page-insets--PaddingInlineStart: var(--pf-v6-c-page--inset);
   --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__sidebar-body--m-context-selector--PaddingInlineStart: var(--pf-t--global--spacer--md);
+}
+@media screen and (min-width: 75rem) {
+  .pf-v6-c-page {
+    --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
+    --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
+    --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
+  }
+}
+.pf-v6-c-page {
   --pf-v6-c-page__main-container--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-page__main-container--GridArea: main;
   --pf-v6-c-page--masthead--main-container--GridArea: sidebar / sidebar / main / main;
@@ -61,6 +80,17 @@
   --pf-v6-c-page__main-container--xs--BorderBlockEndWidth: 0;
   --pf-v6-c-page__main-container--xs--BorderInlineStartWidth: 0px;
   --pf-v6-c-page__main-container--xs--BorderInlineEndWidth: 0px;
+}
+@media screen and (max-width: calc(48rem - 1px)) {
+  .pf-v6-c-page {
+    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
+    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
+    --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
+    --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
+    --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
+  }
+}
+.pf-v6-c-page {
   --pf-v6-c-page__main-section--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-section--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-page__main-section--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -109,29 +139,9 @@
   --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);
-}
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-page {
-    --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);
-  }
-}
-@media screen and (min-width: 75rem) {
-  .pf-v6-c-page {
-    --pf-v6-c-page__sidebar--TranslateX: var(--pf-v6-c-page__sidebar--xl--TranslateX);
-    --pf-v6-c-page__sidebar--Opacity: var(--pf-v6-c-page__sidebar--xl--Opacity);
-    --pf-v6-c-page__sidebar--BorderInlineEndWidth: 0;
-  }
-}
-@media screen and (max-width: calc(48rem - 1px)) {
-  .pf-v6-c-page {
-    --pf-v6-c-page__main-container--MarginInlineStart: var(--pf-v6-c-page__main-container--xs--MarginInlineStart);
-    --pf-v6-c-page__main-container--MarginInlineEnd: var(--pf-v6-c-page__main-container--xs--MarginInlineEnd);
-    --pf-v6-c-page__main-container--BorderBlockEndWidth: var(--pf-v6-c-page__main-container--xs--BorderBlockEndWidth);
-    --pf-v6-c-page__main-container--BorderInlineStartWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineStartWidth);
-    --pf-v6-c-page__main-container--BorderInlineEndWidth: var(--pf-v6-c-page__main-container--xs--BorderInlineEndWidth);
-  }
+  --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 {
@@ -151,6 +161,16 @@
     grid-template-columns: var(--pf-v6-c-page__sidebar--Width) 1fr;
   }
 }
+.pf-v6-c-page.pf-m-dock {
+  --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-columns: auto 1fr;
+  column-gap: var(--pf-v6-c-page--m-dock--ColumnGap);
+}
 .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);
   --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
@@ -197,15 +217,20 @@
   }
 }
 
-.pf-v6-c-page > .pf-v6-c-masthead {
-  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
-  grid-area: header;
-}
 @media (min-width: 75rem) {
   .pf-v6-c-page > .pf-v6-c-masthead {
     --pf-v6-c-masthead--m-display-inline--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--breakpoint--xl--GridTemplateColumns);
   }
 }
+.pf-v6-c-page > .pf-v6-c-masthead {
+  z-index: var(--pf-v6-c-page--c-masthead--ZIndex);
+  grid-area: header;
+}
+
+.pf-v6-c-page__dock {
+  z-index: var(--pf-v6-c-page__dock--ZIndex);
+  grid-area: dock;
+}
 
 .pf-v6-c-page__sidebar {
   z-index: var(--pf-v6-c-page__sidebar--ZIndex);
@@ -317,8 +342,8 @@
 .pf-v6-c-page__main-group,
 .pf-v6-c-page__main-subnav {
   display: flex;
-  flex-direction: column;
   flex-shrink: 0;
+  flex-direction: column;
 }
 .pf-v6-c-page__main-breadcrumb.pf-m-overflow-scroll,
 .pf-v6-c-page__main-tabs.pf-m-overflow-scroll,
@@ -510,6 +535,7 @@
   flex-direction: column;
   align-self: var(--pf-v6-c-page__main-container--AlignSelf);
   max-height: var(--pf-v6-c-page__main-container--MaxHeight);
+  margin-block-start: var(--pf-v6-c-page__main-container--MarginBlockStart, 0);
   margin-inline-start: var(--pf-v6-c-page__main-container--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-page__main-container--MarginInlineEnd);
   background: var(--pf-v6-c-page__main-container--BackgroundColor);
@@ -561,8 +587,8 @@
 .pf-v6-c-page__main-drawer,
 .pf-v6-c-page__main-group {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .pf-v6-c-page__main {

package/components/Page/page.scss

@@ -12,6 +12,9 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   // Header
   --#{$page}--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
 
+  // Dock
+  --#{$page}__dock--ZIndex: var(--pf-t--global--z-index--md);
+
   // Sidebar
   --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
   --#{$page}__sidebar--Width--base: #{pf-size-prem(290px)};
@@ -166,6 +169,11 @@ $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} {
@@ -190,6 +198,18 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
     grid-template-columns: var(--#{$page}__sidebar--Width) 1fr;
   }
 
+  &.pf-m-dock {
+    --#{$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-columns: auto 1fr;
+    column-gap: var(--#{$page}--m-dock--ColumnGap);
+  }
+
   // Hamburger menu animation
   // mobile - show expand on hover
   > .#{$masthead} .#{$masthead}__toggle .#{$button}.pf-m-hamburger:is(:hover, :focus-visible) {
@@ -230,6 +250,12 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   grid-area: header;
 }
 
+// Dock
+.#{$page}__dock {
+  z-index: var(--#{$page}__dock--ZIndex);
+  grid-area: dock;
+}
+
 // Sidebar
 .#{$page}__sidebar {
   z-index: var(--#{$page}__sidebar--ZIndex);
@@ -352,8 +378,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 .#{$page}__main-group,
 .#{$page}__main-subnav {
   display: flex;
-  flex-direction: column;
   flex-shrink: 0;
+  flex-direction: column;
 
   &.pf-m-overflow-scroll {
     position: relative;
@@ -375,7 +401,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   // Responsive height modifiers for sticky top/bottom
   @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint}-height;
+    }
 
     @include pf-v6-apply-height-breakpoint($breakpoint) {
 
@@ -404,6 +434,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   flex-direction: column;
   align-self: var(--#{$page}__main-container--AlignSelf);
   max-height: var(--#{$page}__main-container--MaxHeight);
+  margin-block-start: var(--#{$page}__main-container--MarginBlockStart, 0);
   margin-inline-start: var(--#{$page}__main-container--MarginInlineStart);
   margin-inline-end: var(--#{$page}__main-container--MarginInlineEnd);
   background: var(--#{$page}__main-container--BackgroundColor);
@@ -456,8 +487,8 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 .#{$page}__main-drawer,
 .#{$page}__main-group {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
 }
 
 .#{$page}__main {
@@ -489,7 +520,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   // Responsive height modifiers for sticky top/bottom
   @each $breakpoint, $breakpoint-value in $pf-page-v6--height-breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}-height, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint}-height;
+    }
 
     @include pf-v6-apply-height-breakpoint($breakpoint) {
       &.pf-m-sticky-top#{$breakpoint-name},
@@ -537,7 +572,11 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   }
 
   @each $breakpoint, $breakpoint-value in $pf-page-v6--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       // stylelint-disable max-nesting-depth

package/components/Pagination/pagination.scss

@@ -230,7 +230,11 @@ $pf-v6-c-pagination--variable-map: build-spacer-map("none", "sm", "md", "lg", "x
 // stylelint-disable no-duplicate-selectors
 .#{$pagination} {
   @each $breakpoint, $breakpoint-value in $pf-v6-c-pagination--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-display-summary#{$breakpoint-name} {

package/components/ProgressStepper/progress-stepper.scss

@@ -430,7 +430,11 @@ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
 // stylelint-disable no-duplicate-selectors
 .#{$progress-stepper} {
   @each $breakpoint, $breakpoint-value in $pf-v6-c-progress-stepper--breakpoint-map {
-    $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+    $breakpoint-name: "";
+
+    @if $breakpoint != "base" {
+      $breakpoint-name: -on-#{$breakpoint};
+    }
 
     @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-horizontal#{$breakpoint-name} {

package/components/Sidebar/sidebar.css

@@ -143,8 +143,8 @@
   position: var(--pf-v6-c-sidebar__panel--Position);
   inset-block-start: var(--pf-v6-c-sidebar__panel--InsetBlockStart);
   z-index: var(--pf-v6-c-sidebar__panel--ZIndex);
-  flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
   flex-shrink: 0;
+  flex-basis: var(--pf-v6-c-sidebar__panel--FlexBasis);
   order: var(--pf-v6-c-sidebar__panel--Order);
   padding-block-start: var(--pf-v6-c-sidebar__panel--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-sidebar__panel--PaddingBlockEnd);

package/components/Sidebar/sidebar.scss

@@ -177,8 +177,8 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
   position: var(--#{$sidebar}__panel--Position);
   inset-block-start: var(--#{$sidebar}__panel--InsetBlockStart);
   z-index: var(--#{$sidebar}__panel--ZIndex);
-  flex-basis: var(--#{$sidebar}__panel--FlexBasis);
   flex-shrink: 0;
+  flex-basis: var(--#{$sidebar}__panel--FlexBasis);
   order: var(--#{$sidebar}__panel--Order);
   padding-block-start: var(--#{$sidebar}__panel--PaddingBlockStart);
   padding-block-end: var(--#{$sidebar}__panel--PaddingBlockEnd);
@@ -253,7 +253,11 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
 
 // Responsive width modifiers
 @each $breakpoint, $breakpoint-value in $pf-v6-c-sidebar--breakpoint-map--width {
-  $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
+  $breakpoint-name: "";
+
+  @if $breakpoint != "base" {
+    $breakpoint-name: -on-#{$breakpoint};
+  }
 
   @include pf-v6-apply-breakpoint($breakpoint) {
     @each $width-value in $pf-v6-c-sidebar__panel--list--width {
@@ -261,7 +265,7 @@ $pf-v6-c-sidebar__panel--list--width: ("default", 25, 33, 50, 66, 75, 100);
         @if $width-value == "default" {
           --#{$sidebar}__panel--FlexBasis: var(--#{$sidebar}__panel--FlexBasis--base);
         } @else {
-          --#{$sidebar}__panel--FlexBasis: #{percentage(math.div($width-value, 100))};
+          --#{$sidebar}__panel--FlexBasis: #{math.percentage(math.div($width-value, 100))};
         }
       }
     }