@patternfly/react-styles 6.5.0-prerelease.1 → 6.5.0-prerelease.11

package/css/components/Label/label.css

@@ -493,6 +493,10 @@ input.pf-v6-c-label__content {
 .pf-v6-c-label__actions {
   margin-inline-end: var(--pf-v6-c-label__actions--MarginInlineEnd);
 }
+.pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
+  --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
+}
+
 .pf-v6-c-label__actions .pf-v6-c-button {
   --pf-v6-c-button--FontSize: var(--pf-v6-c-label__actions--c-button--FontSize);
   --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockStart: var(--pf-v6-c-label__actions--c-button--PaddingBlockStart);
@@ -502,7 +506,4 @@ input.pf-v6-c-label__content {
   margin-block-start: var(--pf-v6-c-label__actions--c-button--MarginBlockStart);
   margin-block-end: var(--pf-v6-c-label__actions--c-button--MarginBlockEnd);
   outline-offset: var(--pf-v6-c-label__actions--c-button--OutlineOffset);
-}
-.pf-v6-c-label.pf-m-compact .pf-v6-c-label__actions .pf-v6-c-button {
-  --pf-v6-c-button--m-plain--m-no-padding--after--Inset: 0 calc(-0.125rem);
 }

package/css/components/Login/login.css

@@ -7,18 +7,48 @@
   --pf-v6-c-login__container--PaddingInlineStart: 6.125rem;
   --pf-v6-c-login__container--PaddingInlineEnd: 6.125rem;
   --pf-v6-c-login__container--xl--GridTemplateColumns: 34rem minmax(auto, 34rem);
+}
+@media (min-width: 75rem) {
+  .pf-v6-c-login {
+    --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
+  }
+}
+.pf-v6-c-login {
   --pf-v6-c-login__header--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-login__header--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-login__header--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+}
+@media (min-width: 36rem) {
+  .pf-v6-c-login {
+    --pf-v6-c-login__header--PaddingInlineEnd: 0;
+    --pf-v6-c-login__header--PaddingInlineStart: 0;
+  }
+}
+.pf-v6-c-login {
   --pf-v6-c-login__header--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-login__header--xl--MarginBlockStart: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-login__header--c-brand--xl--MarginBlockEnd: var(--pf-t--global--spacer--2xl);
+}
+@media (min-width: 75rem) {
+  .pf-v6-c-login {
+    --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
+    --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
+  }
+}
+.pf-v6-c-login {
   --pf-v6-c-login__main--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-login__main--MarginBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-login__main--BorderRadius: var(--pf-t--global--border--radius--large);
   --pf-v6-c-login__main--BorderWidth: var(--pf-t--global--border--width--high-contrast--regular);
   --pf-v6-c-login__main--BorderColor: var(--pf-t--global--border--color--high-contrast);
+}
+@media (min-width: 75rem) {
+  .pf-v6-c-login {
+    --pf-v6-c-login__main--MarginBlockEnd: 0;
+  }
+}
+.pf-v6-c-login {
   --pf-v6-c-login__main-header--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
   --pf-v6-c-login__main-header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -30,11 +60,28 @@
   --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-login__main-header-desc--md--MarginBlockEnd: 0;
   --pf-v6-c-login__main-header-desc--FontSize: var(--pf-t--global--font--size--body--default);
+}
+@media (min-width: 48rem) {
+  .pf-v6-c-login {
+    --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
+    --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
+    --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
+  }
+}
+.pf-v6-c-login {
   --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
   --pf-v6-c-login__main-body--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
   --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-login__main-body--md--PaddingInlineEnd: var(--pf-t--global--spacer--2xl);
   --pf-v6-c-login__main-body--md--PaddingInlineStart: var(--pf-t--global--spacer--2xl);
+}
+@media (min-width: 48rem) {
+  .pf-v6-c-login {
+    --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
+    --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
+  }
+}
+.pf-v6-c-login {
   --pf-v6-c-login__main-footer--PaddingBlockEnd: var(--pf-t--global--spacer--3xl);
   --pf-v6-c-login__main-footer--c-title--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-login__main-footer-links--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -52,43 +99,6 @@
   --pf-v6-c-login__main-footer-band-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-login__footer--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-login__footer--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
-}
-@media (min-width: 75rem) {
-  .pf-v6-c-login {
-    --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
-  }
-}
-@media (min-width: 36rem) {
-  .pf-v6-c-login {
-    --pf-v6-c-login__header--PaddingInlineEnd: 0;
-    --pf-v6-c-login__header--PaddingInlineStart: 0;
-  }
-}
-@media (min-width: 75rem) {
-  .pf-v6-c-login {
-    --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
-    --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
-  }
-}
-@media (min-width: 75rem) {
-  .pf-v6-c-login {
-    --pf-v6-c-login__main--MarginBlockEnd: 0;
-  }
-}
-@media (min-width: 48rem) {
-  .pf-v6-c-login {
-    --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
-    --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
-    --pf-v6-c-login__main-header-desc--MarginBlockEnd: var(--pf-v6-c-login__main-header-desc--md--MarginBlockEnd);
-  }
-}
-@media (min-width: 48rem) {
-  .pf-v6-c-login {
-    --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
-    --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
-  }
 }
 @media (min-width: 36rem) {
   .pf-v6-c-login {
@@ -96,6 +106,10 @@
     --pf-v6-c-login__footer--PaddingInlineStart: 0;
   }
 }
+.pf-v6-c-login {
+  --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
+}
 @media (min-width: 75rem) {
   .pf-v6-c-login {
     --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart);

package/css/components/Masthead/masthead.css

@@ -36,12 +36,26 @@
   --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%;
   --pf-v6-c-masthead--c-toolbar--PaddingBlock: 0;
 }
 
+.pf-v6-c-masthead .pf-v6-c-toolbar {
+  --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
+  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
+  --pf-v6-c-toolbar__content--MinWidth: 0;
+}
 .pf-v6-c-masthead {
   --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-stack--ColumnGap);
   --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-stack--GridTemplateColumns);
@@ -55,22 +69,6 @@
   --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-stack__main--toggle--content--GridColumn);
   --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-columns: var(--pf-v6-c-masthead--GridTemplateColumns);
-  row-gap: var(--pf-v6-c-masthead--RowGap);
-  column-gap: var(--pf-v6-c-masthead--ColumnGap);
-  align-items: start;
-  min-width: 0;
-  padding-block-start: var(--pf-v6-c-masthead--PaddingBlockStart, var(--pf-v6-c-masthead--PaddingBlock));
-  padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
-  padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
-  padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
-  background-color: var(--pf-v6-c-masthead--BackgroundColor);
-}
-.pf-v6-c-masthead .pf-v6-c-toolbar {
-  --pf-v6-c-toolbar--Width: var(--pf-v6-c-masthead--c-toolbar--Width);
-  --pf-v6-c-toolbar--PaddingBlockEnd: 0;
-  --pf-v6-c-toolbar__content--MinWidth: 0;
 }
 @media screen and (min-width: 48rem) {
   :where(:not(.pf-m-resize-observer)) .pf-v6-c-masthead {
@@ -88,6 +86,62 @@
     --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
   }
 }
+.pf-v6-c-masthead {
+  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);
+  align-items: start;
+  min-width: 0;
+  padding-block-start: var(--pf-v6-c-masthead--PaddingBlockStart, var(--pf-v6-c-masthead--PaddingBlock));
+  padding-block-end: var(--pf-v6-c-masthead--PaddingBlockEnd, var(--pf-v6-c-masthead--PaddingBlock));
+  padding-inline-start: var(--pf-v6-c-masthead--PaddingInlineStart, var(--pf-v6-c-masthead--PaddingInline));
+  padding-inline-end: var(--pf-v6-c-masthead--PaddingInlineEnd, var(--pf-v6-c-masthead--PaddingInline));
+  background-color: var(--pf-v6-c-masthead--BackgroundColor);
+}
+.pf-v6-c-masthead.pf-m-docked {
+  --pf-v6-c-masthead--ColumnGap: var(--pf-v6-c-masthead--m-display-inline--ColumnGap);
+  --pf-v6-c-masthead--GridTemplateColumns: var(--pf-v6-c-masthead--m-display-inline--GridTemplateColumns);
+  --pf-v6-c-masthead__brand--GridColumn: var(--pf-v6-c-masthead--m-display-inline__brand--GridColumn);
+  --pf-v6-c-masthead__brand--Order: var(--pf-v6-c-masthead--m-display-inline__brand--Order);
+  --pf-v6-c-masthead__brand--PaddingBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--PaddingBlockEnd);
+  --pf-v6-c-masthead__brand--BorderBlockEnd: var(--pf-v6-c-masthead--m-display-inline__brand--BorderBlockEnd);
+  --pf-v6-c-masthead__main--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--GridColumn);
+  --pf-v6-c-masthead__content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__content--GridColumn);
+  --pf-v6-c-masthead__content--Order: var(--pf-v6-c-masthead--m-display-inline__content--Order);
+  --pf-v6-c-masthead__main--toggle--content--GridColumn: var(--pf-v6-c-masthead--m-display-inline__main--toggle--content--GridColumn);
+  --pf-v6-c-masthead__main--Display: var(--pf-v6-c-masthead--m-display-inline__main--Display);
+  --pf-v6-c-masthead__main--ColumnGap: var(--pf-v6-c-masthead--m-display-inline__main--ColumnGap);
+  --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-grow: 1;
+  flex-direction: column;
+  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/css/components/Masthead/masthead.d.ts

@@ -9,6 +9,7 @@ declare const _default: {
   "mastheadToggle": "pf-v6-c-masthead__toggle",
   "modifiers": {
     "resizeObserver": "pf-m-resize-observer",
+    "docked": "pf-m-docked",
     "displayStack": "pf-m-display-stack",
     "displayInline": "pf-m-display-inline",
     "insetNone": "pf-m-inset-none",

package/css/components/Masthead/masthead.js

@@ -11,6 +11,7 @@ exports.default = {
   "mastheadToggle": "pf-v6-c-masthead__toggle",
   "modifiers": {
     "resizeObserver": "pf-m-resize-observer",
+    "docked": "pf-m-docked",
     "displayStack": "pf-m-display-stack",
     "displayInline": "pf-m-display-inline",
     "insetNone": "pf-m-inset-none",

package/css/components/Masthead/masthead.mjs

@@ -9,6 +9,7 @@ export default {
   "mastheadToggle": "pf-v6-c-masthead__toggle",
   "modifiers": {
     "resizeObserver": "pf-m-resize-observer",
+    "docked": "pf-m-docked",
     "displayStack": "pf-m-display-stack",
     "displayInline": "pf-m-display-inline",
     "insetNone": "pf-m-inset-none",

package/css/components/Menu/menu.css

@@ -16,6 +16,13 @@
   --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-menu--TransitionDuration: 0s;
   --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-menu {
+    --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  }
+}
+.pf-v6-c-menu {
   --pf-v6-c-menu--m-plain--BoxShadow: none;
   --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
   --pf-v6-c-menu__content--Height: auto;
@@ -95,33 +102,34 @@
   --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
   --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   --pf-v6-c-menu--m-drilldown__content--Transition: height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
-  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
-  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
-  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
-  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
-  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
-  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
-}
-@media (prefers-reduced-motion: no-preference) {
-  .pf-v6-c-menu {
-    --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
-  }
 }
 @media (prefers-reduced-motion: no-preference) {
   .pf-v6-c-menu {
     --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
   }
 }
+.pf-v6-c-menu {
+  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
+  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: 0s;
+  --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
+}
 @media (prefers-reduced-motion: no-preference) {
   .pf-v6-c-menu {
     --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   }
 }
+.pf-v6-c-menu {
+  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: 0s;
+  --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
+}
 @media (prefers-reduced-motion: no-preference) {
   .pf-v6-c-menu {
     --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   }
 }
+.pf-v6-c-menu {
+  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
+}
 
 .pf-v6-c-menu__content,
 .pf-v6-c-menu__list-item,
@@ -579,13 +587,14 @@
   --pf-v6-c-check__input--TranslateY: none;
 }
 
-.pf-v6-c-menu__item-toggle-icon {
-  color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
-}
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-menu__item-toggle-icon {
   scale: -1 1;
 }
 
+.pf-v6-c-menu__item-toggle-icon {
+  color: var(--pf-v6-c-menu__item-toggle-icon--Color, inherit);
+}
+
 .pf-v6-c-menu__item-icon {
   color: var(--pf-v6-c-menu__item--icon--Color, inherit);
 }

package/css/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/css/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);
@@ -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,25 @@
 .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;
+  text-align: center;
+}
+.pf-v6-c-nav.pf-m-docked .pf-v6-c-nav__link-text {
+  display: none;
+}
 .pf-v6-c-nav .pf-v6-c-menu {
   --pf-v6-c-menu--MinWidth: 100%;
 }
@@ -196,14 +232,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 +321,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 +380,7 @@
 }
 
 .pf-v6-c-nav:where(.pf-m-horizontal) {
+  --pf-v6-c-nav__item--accent--content: none;
   padding: 0;
   overflow: hidden;
 }
@@ -340,12 +401,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/css/components/Nav/nav.d.ts

@@ -9,10 +9,11 @@ declare const _default: {
     "overflowHidden": "pf-m-overflow-hidden",
     "inset": "pf-m-inset",
     "fill": "pf-m-fill",
+    "docked": "pf-m-docked",
     "drilldown": "pf-m-drilldown",
     "expanded": "pf-m-expanded",
-    "hover": "pf-m-hover",
     "current": "pf-m-current",
+    "hover": "pf-m-hover",
     "flyout": "pf-m-flyout",
     "horizontal": "pf-m-horizontal",
     "subnav": "pf-m-subnav",
@@ -22,6 +23,7 @@ declare const _default: {
   "navItem": "pf-v6-c-nav__item",
   "navLink": "pf-v6-c-nav__link",
   "navLinkIcon": "pf-v6-c-nav__link-icon",
+  "navLinkText": "pf-v6-c-nav__link-text",
   "navList": "pf-v6-c-nav__list",
   "navNav": "pf-v6-c-nav__nav",
   "navScrollButton": "pf-v6-c-nav__scroll-button",

package/css/components/Nav/nav.js

@@ -11,10 +11,11 @@ exports.default = {
     "overflowHidden": "pf-m-overflow-hidden",
     "inset": "pf-m-inset",
     "fill": "pf-m-fill",
+    "docked": "pf-m-docked",
     "drilldown": "pf-m-drilldown",
     "expanded": "pf-m-expanded",
-    "hover": "pf-m-hover",
     "current": "pf-m-current",
+    "hover": "pf-m-hover",
     "flyout": "pf-m-flyout",
     "horizontal": "pf-m-horizontal",
     "subnav": "pf-m-subnav",
@@ -24,6 +25,7 @@ exports.default = {
   "navItem": "pf-v6-c-nav__item",
   "navLink": "pf-v6-c-nav__link",
   "navLinkIcon": "pf-v6-c-nav__link-icon",
+  "navLinkText": "pf-v6-c-nav__link-text",
   "navList": "pf-v6-c-nav__list",
   "navNav": "pf-v6-c-nav__nav",
   "navScrollButton": "pf-v6-c-nav__scroll-button",

package/css/components/Nav/nav.mjs

@@ -9,10 +9,11 @@ export default {
     "overflowHidden": "pf-m-overflow-hidden",
     "inset": "pf-m-inset",
     "fill": "pf-m-fill",
+    "docked": "pf-m-docked",
     "drilldown": "pf-m-drilldown",
     "expanded": "pf-m-expanded",
-    "hover": "pf-m-hover",
     "current": "pf-m-current",
+    "hover": "pf-m-hover",
     "flyout": "pf-m-flyout",
     "horizontal": "pf-m-horizontal",
     "subnav": "pf-m-subnav",
@@ -22,6 +23,7 @@ export default {
   "navItem": "pf-v6-c-nav__item",
   "navLink": "pf-v6-c-nav__link",
   "navLinkIcon": "pf-v6-c-nav__link-icon",
+  "navLinkText": "pf-v6-c-nav__link-text",
   "navList": "pf-v6-c-nav__list",
   "navNav": "pf-v6-c-nav__nav",
   "navScrollButton": "pf-v6-c-nav__scroll-button",