@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

package/components/MenuToggle/menu-toggle.css

@@ -4,13 +4,13 @@
   --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: calc(1lh + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
   --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);
   --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--small);
-  --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-menu-toggle--BorderRadius: var(--pf-t--global--border--radius--control--default);
+  --pf-v6-c-menu-toggle--BorderColor: var(--pf-t--global--border--color--control--default);
   --pf-v6-c-menu-toggle--BorderWidth: var(--pf-t--global--border--width--control--default);
   --pf-v6-c-menu-toggle--border--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-menu-toggle--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -47,7 +47,7 @@
   --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
   --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
   --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
-  --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-t--global--border--radius--action--default);
   --pf-v6-c-menu-toggle--m-primary--BorderColor: transparent;
   --pf-v6-c-menu-toggle--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
   --pf-v6-c-menu-toggle--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -65,7 +65,7 @@
   --pf-v6-c-menu-toggle--m-secondary--BackgroundColor: transparent;
   --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
   --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
-  --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-t--global--border--radius--action--default);
   --pf-v6-c-menu-toggle--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --pf-v6-c-menu-toggle--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
   --pf-v6-c-menu-toggle--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
@@ -80,11 +80,12 @@
   --pf-v6-c-menu-toggle--m-secondary--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--compact);
   --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
   --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
+  --pf-v6-c-menu-toggle--m-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
   --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
   --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default);
   --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
   --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
@@ -114,7 +115,7 @@
   --pf-v6-c-menu-toggle--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
   --pf-v6-c-menu-toggle--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
   --pf-v6-c-menu-toggle--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
-  --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-menu-toggle--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -155,7 +156,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);
@@ -234,6 +235,9 @@
 .pf-v6-c-menu-toggle.pf-m-full-width {
   width: 100%;
 }
+.pf-v6-c-menu-toggle.pf-m-form {
+  --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-form--BorderRadius);
+}
 .pf-v6-c-menu-toggle.pf-m-plain {
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineStart);
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd);
@@ -349,6 +353,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-docked {
+  justify-content: flex-start;
+  width: 100%;
+}
+@media (min-width: 62rem) {
+  .pf-v6-c-menu-toggle.pf-m-docked {
+    justify-content: center;
+    width: auto;
+  }
+  .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
+  .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__controls {
+    display: none;
+  }
+}
+:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked, .pf-v6-c-menu-toggle.pf-m-text-expanded {
+  justify-content: flex-start;
+  width: 100%;
+}
+:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .pf-v6-c-menu-toggle__text,
+:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-menu-toggle.pf-m-docked .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>";

package/components/MenuToggle/menu-toggle.scss

@@ -6,13 +6,13 @@
   --#{$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: calc(1lh + var(--#{$menu-toggle}--PaddingBlockStart) + var(--#{$menu-toggle}--PaddingBlockEnd));
   --#{$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);
   --#{$menu-toggle}--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --#{$menu-toggle}--BorderRadius: var(--pf-t--global--border--radius--small);
-  --#{$menu-toggle}--BorderColor: var(--pf-t--global--border--color--default);
+  --#{$menu-toggle}--BorderRadius: var(--pf-t--global--border--radius--control--default);
+  --#{$menu-toggle}--BorderColor: var(--pf-t--global--border--color--control--default);
   --#{$menu-toggle}--BorderWidth: var(--pf-t--global--border--width--control--default);
   --#{$menu-toggle}--border--ZIndex: var(--pf-t--global--z-index--xs); // add z-index for toggle border to render above other borders
   --#{$menu-toggle}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -61,7 +61,7 @@
   --#{$menu-toggle}--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
   --#{$menu-toggle}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
   --#{$menu-toggle}--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
-  --#{$menu-toggle}--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --#{$menu-toggle}--m-primary--BorderRadius: var(--pf-t--global--border--radius--action--default);
   --#{$menu-toggle}--m-primary--BorderColor: transparent;
   --#{$menu-toggle}--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
   --#{$menu-toggle}--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
@@ -81,7 +81,7 @@
   --#{$menu-toggle}--m-secondary--BackgroundColor: transparent;
   --#{$menu-toggle}--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
   --#{$menu-toggle}--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
-  --#{$menu-toggle}--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --#{$menu-toggle}--m-secondary--BorderRadius: var(--pf-t--global--border--radius--action--default);
   --#{$menu-toggle}--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --#{$menu-toggle}--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
   --#{$menu-toggle}--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
@@ -99,12 +99,15 @@
   --#{$menu-toggle}--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
   --#{$menu-toggle}--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
 
+  // Form (for use in forms)
+  --#{$menu-toggle}--m-form--BorderRadius: var(--pf-t--global--border--radius--control--form-element);
+
   // Split button, child
   --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --#{$menu-toggle}--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
   --#{$menu-toggle}--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
-  --#{$menu-toggle}--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --#{$menu-toggle}--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--action--default);
   --#{$menu-toggle}--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
   --#{$menu-toggle}--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
   --#{$menu-toggle}--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
@@ -142,7 +145,7 @@
   --#{$menu-toggle}--m-plain--BorderWidth: var(--pf-t--global--border--width--action--plain--default);
   --#{$menu-toggle}--m-plain--hover--BorderWidth: var(--pf-t--global--border--width--action--plain--hover);
   --#{$menu-toggle}--m-plain--expanded--BorderWidth: var(--pf-t--global--border--width--action--plain--clicked);
-  --#{$menu-toggle}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
+  --#{$menu-toggle}--m-plain--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --#{$menu-toggle}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --#{$menu-toggle}--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --#{$menu-toggle}--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -201,7 +204,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);
@@ -290,6 +293,10 @@
     width: 100%;
   }
 
+  &.pf-m-form {
+    --#{$menu-toggle}--BorderRadius: var(--#{$menu-toggle}--m-form--BorderRadius);
+  }
+
   &.pf-m-plain {
     --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-plain--PaddingInlineStart);
     --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-plain--PaddingInlineEnd);
@@ -426,6 +433,33 @@
       pointer-events: none;
     }
   }
+  
+  &.pf-m-docked {
+    justify-content: flex-start;
+    width: 100%;
+
+    @media (min-width: $pf-v6-global--breakpoint--dock--desktop) {
+      justify-content: center;
+      width: auto;
+
+      .#{$menu-toggle}__text,
+      .#{$menu-toggle}__controls {
+        display: none;
+      }
+    }
+  }
+
+  @at-root :is(.#{$page}__dock, .#{$compass}__dock).pf-m-text-expanded &.pf-m-docked,
+  &.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

package/components/ModalBox/modal-box.css

@@ -21,6 +21,13 @@
   --pf-v6-c-modal-box--m-success__title-icon--Color: var(--pf-t--global--icon--color--status--success--default);
   --pf-v6-c-modal-box--m-info__title-icon--Color: var(--pf-t--global--icon--color--status--info--default);
   --pf-v6-c-modal-box--m-custom__title-icon--Color: var(--pf-t--global--icon--color--status--custom--default);
+}
+@media (min-width: 75rem) {
+  .pf-v6-c-modal-box {
+    --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
+  }
+}
+.pf-v6-c-modal-box {
   --pf-v6-c-modal-box__header--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-modal-box__header--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-modal-box__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
@@ -52,11 +59,6 @@
   --pf-v6-c-modal-box__footer--c-button--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
 }
-@media (min-width: 75rem) {
-  .pf-v6-c-modal-box {
-    --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
-  }
-}
 
 .pf-v6-c-modal-box {
   position: relative;
@@ -118,8 +120,8 @@
 
 .pf-v6-c-modal-box__header {
   display: flex;
-  flex-direction: column;
   flex-shrink: 0;
+  flex-direction: column;
   gap: var(--pf-v6-c-modal-box__header--Gap);
   padding-block-start: var(--pf-v6-c-modal-box__header--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-modal-box__header--PaddingBlockEnd);
@@ -136,8 +138,8 @@
 
 .pf-v6-c-modal-box__header-main {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   gap: var(--pf-v6-c-modal-box__header-main--Gap);
   min-width: 0;
   padding-block-start: var(--pf-v6-c-modal-box__header-main--PaddingBlockStart);

package/components/ModalBox/modal-box.scss

@@ -161,8 +161,8 @@
 
 .#{$modal-box}__header {
   display: flex;
-  flex-direction: column;
   flex-shrink: 0;
+  flex-direction: column;
   gap: var(--#{$modal-box}__header--Gap);
   padding-block-start: var(--#{$modal-box}__header--PaddingBlockStart);
   padding-block-end: var(--#{$modal-box}__header--PaddingBlockEnd);
@@ -181,8 +181,8 @@
 
 .#{$modal-box}__header-main {
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
+  flex-direction: column;
   gap: var(--#{$modal-box}__header-main--Gap);
   min-width: 0;
   padding-block-start: var(--#{$modal-box}__header-main--PaddingBlockStart);

package/components/Nav/nav.css

@@ -28,13 +28,22 @@
   --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--color--brand--accent--default);
+  --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--m-expanded__toggle-icon--Rotate: -180deg;
   --pf-v6-c-nav__item__toggle-icon--TransitionDuration--transform: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-nav__item__toggle-icon--TransitionTimingFunction--transform: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-nav__link--ColumnGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-nav__link--AlignItems: baseline;
-  --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
+  --pf-v6-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--action--plain--default);
   --pf-v6-c-nav__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-nav__link--WhiteSpace: normal;
   --pf-v6-c-nav__link--Color: var(--pf-t--global--text--color--subtle);
@@ -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);
@@ -63,6 +73,15 @@
   --pf-v6-c-nav__subnav--TransitionTimingFunction--expand: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-nav__subnav--TranslateY: 0;
   --pf-v6-c-nav__subnav--hidden--TranslateY: 0;
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-nav {
+    --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
+  }
+}
+.pf-v6-c-nav {
   --pf-v6-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
   --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
@@ -92,13 +111,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);
-}
-@media screen and (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-nav {
-    --pf-v6-c-nav__subnav--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
-    --pf-v6-c-nav__subnav--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
-    --pf-v6-c-nav__subnav--hidden--TranslateY: -.5rem;
-  }
+  --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);
 }
 
 .pf-v6-c-nav,
@@ -133,6 +150,31 @@
 .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: 100%;
+}
+@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;
+  }
+}
+:is(.pf-v6-c-page__dock, .pf-v6-c-compass__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%;
+}
+:is(.pf-v6-c-page__dock, .pf-v6-c-compass__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%;
 }
@@ -196,14 +238,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));
@@ -262,7 +324,13 @@
 }
 
 .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 {
+  font-size: var(--pf-v6-c-nav__link-text--FontSize, inherit);
 }
 
 .pf-v6-c-nav__toggle {
@@ -320,6 +388,7 @@
 }
 
 .pf-v6-c-nav:where(.pf-m-horizontal) {
+  --pf-v6-c-nav__item--accent--content: none;
   padding: 0;
   overflow: hidden;
 }
@@ -340,12 +409,14 @@
   scroll-snap-type: var(--pf-v6-c-nav__list--ScrollSnapType);
   scroll-padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
   -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  -ms-overflow-style: -ms-autohiding-scrollbar;
 }
 .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list::-webkit-scrollbar {
   display: none;
 }
+.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list {
+  scrollbar-width: none;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}
 .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link {
   outline-offset: var(--pf-v6-c-nav--OutlineOffset);
 }

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,35 @@
     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: 100%;
+  
+    @media (min-width: #{$pf-v6-global--breakpoint--dock--desktop}) {
+      width: fit-content;
+
+      .#{$nav}__link-text {
+        display: none;
+      }
+    }
+
+    @at-root :is(.#{$page}__dock, .#{$compass}__dock).pf-m-text-expanded &,
+    &.pf-m-text-expanded {
+      width: 100%;
+
+      .#{$nav}__link-text {
+        display: revert;
+      }
+    }
+  }
+
   .#{$menu} {
     --#{$menu}--MinWidth: 100%;
 
@@ -244,8 +294,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 +322,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 +377,6 @@
     border-radius: inherit;
   }
 
-
   // explicitly set background-color prop to avoid affecting child elements settings
   &:hover,
   &.pf-m-hover,
@@ -326,9 +397,16 @@
   }
 }
 
-// - Nav toggle caret
+// - Nav link icon
 .#{$nav}__link-icon {
+  min-width: 1lh;
   color: var(--#{$nav}__link-icon--Color);
+  text-align: center;
+}
+
+// - Nav link text
+.#{$nav}__link-text {
+  font-size: var(--#{$nav}__link-text--FontSize, inherit);
 }
 
 // - Nav toggle caret
@@ -341,7 +419,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 +482,8 @@
 
 // - Nav horizontal
 .#{$nav}:where(.pf-m-horizontal) {
+  --#{$nav}__item--accent--content: none;
+
   padding: 0;
   overflow: hidden;