@patternfly/react-styles 6.0.0-alpha.8 → 6.0.0-prerelease.1

package/css/components/Nav/nav.css

@@ -1,330 +1,307 @@
-:root,
-:where(.pf-v5-c-nav) {
-  --pf-v5-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-nav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v5-c-nav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v5-c-nav__list--RowGap: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-nav__list--ColumnGap: var(--pf-t--global--spacer--xs);
-  --pf-v5-c-nav--PaddingBlockStart: var(--pf-t--global--spacer--md);
-  --pf-v5-c-nav--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v5-c-nav--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v5-c-nav--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v5-c-nav--RowGap: var(--pf-t--global--spacer--lg);
-  --pf-v5-c-nav--ColumnGap: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-nav--AlignItems: baseline;
-  --pf-v5-c-nav--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v5-c-nav--FontWeight: var(--pf-t--global--font--weight--body);
-  --pf-v5-c-nav--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v5-c-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v5-c-nav--OutlineOffset: calc(var(--pf-v5-global--spacer--xs) * -1);
-  --pf-v5-c-nav__list--ScrollSnapTypeAxis: x;
-  --pf-v5-c-nav__list--ScrollSnapTypeStrictness: proximity;
-  --pf-v5-c-nav__list--ScrollSnapType: var(--pf-v5-c-nav__list--ScrollSnapTypeAxis) var(--pf-v5-c-nav__list--ScrollSnapTypeStrictness);
-  --pf-v5-c-nav__item--ScrollSnapAlign: end;
-  --pf-v5-c-nav__section-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v5-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
-  --pf-v5-c-nav__item--RowGap: var(--pf-v5-c-nav__list--RowGap);
-  --pf-v5-c-nav__item__toggle-icon--Rotate: 0;
-  --pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
-  --pf-v5-c-nav__link--BorderRadius: var(--pf-t--global--border--radius--small);
-  --pf-v5-c-nav__link--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
-  --pf-v5-c-nav__link--WhiteSpace: normal;
-  --pf-v5-c-nav__link--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v5-c-nav__link--hover--Color: var(--pf-t--global--text--color--regular);
-  --pf-v5-c-nav__link--focus--Color: var(--pf-t--global--text--color--regular);
-  --pf-v5-c-nav__link--active--Color: var(--pf-t--global--text--color--regular);
-  --pf-v5-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
-  --pf-v5-c-nav__link--focus--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
-  --pf-v5-c-nav__link--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
-  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
-  --pf-v5-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
-  --pf-v5-c-nav__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
-  --pf-v5-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v5-c-nav__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
-  --pf-v5-c-nav__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
-  --pf-v5-c-nav__scroll-button--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v5-c-nav__scroll-button--button--InlinePadding: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-nav__scroll-button--button--icon--InlinePadding: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-nav__scroll-button--button--icon--IconSize: var(--pf-t--global--icon--size--md);
-  --pf-v5-c-nav__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-nav__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-nav__toggle--TranslateY: calc((var(--pf-v5-c-nav--LineHeight) * var(--pf-v5-c-nav--FontSize) / 2) - 50%);
-  --pf-v5-c-nav__link--clickable-inset--InlineStart: 0;
-  --pf-v5-c-nav__link--clickable-inset--InlineEnd: 0;
-  --pf-v5-c-nav__link--clickable-inset--Inline: var(--pf-v5-c-nav__link--clickable-inset--InlineStart) var(--pf-v5-c-nav__link--clickable-inset--InlineEnd);
-  --pf-v5-c-nav--m-horizontal--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v5-c-nav--m-horizontal__list--ColumnGap: var(--pf-t--global--spacer--xs);
-  --pf-v5-c-nav--m-horizontal__list--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-nav--m-horizontal__list--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v5-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v5-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v5-c-nav--m-horizontal__list--PaddingBlock: var(--pf-v5-c-nav--m-horizontal__list--PaddingBlockStart) var(--pf-v5-c-nav--m-horizontal__list--PaddingBlockEnd);
-  --pf-v5-c-nav--m-horizontal__list--PaddingInline: var(--pf-v5-c-nav--m-horizontal__list--PaddingInlineStart) var(--pf-v5-c-nav--m-horizontal__list--PaddingInlineEnd);
-  --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
-  --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
-  --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlock: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
-  --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingInline: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd);
-  --pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlock: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
-  --pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart: var(--pf-t--global--border--width--extra-strong);
+:where(:root, .pf-v6-c-nav) {
+  --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-nav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-nav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-nav__list--RowGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-nav__list--ColumnGap: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-nav--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-nav--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-nav--PaddingInlineStart: 0;
+  --pf-v6-c-nav--PaddingInlineEnd: 0;
+  --pf-v6-c-nav--RowGap: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-nav--ColumnGap: 0;
+  --pf-v6-c-nav--AlignItems: baseline;
+  --pf-v6-c-nav--FontSize: var(--pf-t--global--font--size--body--default);
+  --pf-v6-c-nav--FontWeight: var(--pf-t--global--font--weight--body--default);
+  --pf-v6-c-nav--LineHeight: var(--pf-t--global--font--line-height--body);
+  --pf-v6-c-nav--OutlineOffset: calc(var(--pf-t--global--spacer--xs) * -1);
+  --pf-v6-c-nav--BackgroundColor: transparent;
+  --pf-v6-c-nav__list--ScrollSnapTypeAxis: x;
+  --pf-v6-c-nav__list--ScrollSnapTypeStrictness: proximity;
+  --pf-v6-c-nav__list--ScrollSnapType: var(--pf-v6-c-nav__list--ScrollSnapTypeAxis) var(--pf-v6-c-nav__list--ScrollSnapTypeStrictness);
+  --pf-v6-c-nav__item--ScrollSnapAlign: end;
+  --pf-v6-c-nav__section-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
+  --pf-v6-c-nav__section-title--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-nav__section-title--PaddingBlockStart: var(--pf-v6-c-nav__link--PaddingBlockStart);
+  --pf-v6-c-nav__section-title--PaddingBlockEnd: var(--pf-v6-c-nav__link--PaddingBlockEnd);
+  --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__toggle-icon--Rotate: 0;
+  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 90deg;
+  --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--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);
+  --pf-v6-c-nav__link--hover--Color: var(--pf-t--global--text--color--regular);
+  --pf-v6-c-nav__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
+  --pf-v6-c-nav__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
+  --pf-v6-c-nav__link--m-current--Color: var(--pf-t--global--text--color--regular);
+  --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__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
+  --pf-v6-c-nav__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --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);
+  --pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderEndStartRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderStartEndRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderEndEndRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v6-c-nav__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-nav__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-nav__toggle--TranslateY: calc((var(--pf-v6-c-nav--LineHeight) * var(--pf-v6-c-nav--FontSize) / 2) - 50%);
+  --pf-v6-c-nav--m-horizontal__list--PaddingBlockStart: 0;
+  --pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd: 0;
+  --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: 0;
+  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: 0;
+  --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart: var(--pf-v6-c-nav__list--ColumnGap);
+  --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav__list--ColumnGap);
+  --pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart: var(--pf-v6-c-nav__list--ColumnGap);
+  --pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav__list--ColumnGap);
+  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInlineEnd: var(--pf-t--global--spacer--md);
 }
 
-.pf-v5-c-nav,
-.pf-v5-c-nav__section,
-.pf-v5-c-nav__subnav,
-.pf-v5-c-nav__list,
-.pf-v5-c-nav__item {
+.pf-v6-c-nav,
+.pf-v6-c-nav__section,
+.pf-v6-c-nav__subnav,
+.pf-v6-c-nav__list,
+.pf-v6-c-nav__item {
   display: grid;
 }
 
-.pf-v5-c-nav {
-  --pf-v5-c-menu--MinWidth: 100%;
+.pf-v6-c-nav {
   position: relative;
-  row-gap: var(--pf-v5-c-nav--RowGap);
+  row-gap: var(--pf-v6-c-nav--RowGap);
+  column-gap: var(--pf-v6-c-nav--ColumnGap);
   max-width: 100%;
-  padding-block-start: var(--pf-v5-c-nav--PaddingBlockStart);
-  padding-block-end: var(--pf-v5-c-nav--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v5-c-nav--PaddingInlineStart);
-  padding-inline-end: var(--pf-v5-c-nav--PaddingInlineEnd);
-  font-size: var(--pf-v5-c-nav--FontSize);
-  font-weight: var(--pf-v5-c-nav--FontWeight);
-  line-height: var(--pf-v5-c-nav--LineHeight);
-  background-color: var(--pf-v5-c-nav--BackgroundColor);
-}
-.pf-v5-c-nav:where(.pf-m-scrollable) {
-  padding-inline: var(--pf-v5-c-nav--m-scrollable__list--PaddingInline);
-}
-.pf-v5-c-nav.pf-m-overflow-hidden {
+  padding-block-start: var(--pf-v6-c-nav--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-nav--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-nav--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-nav--PaddingInlineEnd);
+  font-size: var(--pf-v6-c-nav--FontSize);
+  font-weight: var(--pf-v6-c-nav--FontWeight);
+  line-height: var(--pf-v6-c-nav--LineHeight);
+  background-color: var(--pf-v6-c-nav--BackgroundColor);
+}
+.pf-v6-c-nav.pf-m-overflow-hidden {
   overflow: hidden;
 }
-.pf-v5-c-nav.pf-m-full-width {
-  width: 100%;
+.pf-v6-c-nav.pf-m-inset {
+  --pf-v6-c-nav--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-nav--PaddingInlineEnd: var(--pf-t--global--spacer--md);
 }
-.pf-v5-c-nav.pf-m-fill {
+.pf-v6-c-nav.pf-m-fill {
   flex-grow: 1;
 }
+.pf-v6-c-nav .pf-v6-c-menu {
+  --pf-v6-c-menu--MinWidth: 100%;
+}
+.pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu {
+  --pf-v6-c-menu--PaddingBlockStart: 0;
+  --pf-v6-c-menu--PaddingBlockEnd: 0;
+  --pf-v6-c-menu--BackgroundColor: var(--pf-v6-c-nav--BackgroundColor);
+  --pf-v6-c-menu--BoxShadow: none;
+  --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-v6-c-nav__link--hover--BackgroundColor);
+}
+.pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu .pf-v6-c-menu__list {
+  row-gap: var(--pf-v6-c-nav__subnav--RowGap);
+}
+.pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu__list-item::before, .pf-v6-c-nav .pf-v6-c-menu.pf-m-drilldown .pf-v6-c-menu .pf-v6-c-menu__list-item::before {
+  border-radius: var(--pf-v6-c-nav__link--BorderRadius);
+}
 
-[class^=pf-v5-c-nav][hidden] {
+[class^=pf-v6-c-nav][hidden] {
   display: none;
 }
 
-.pf-v5-c-nav__nav,
-.pf-v5-c-nav__list,
-.pf-v5-c-nav__subnav {
-  --pf-v5-c-nav__item--RowGap--row-offset: calc(var(--pf-v5-c-nav__list--RowGap) / 2 * -1);
-  --pf-v5-c-nav__link--clickable-inset--Block: var(--pf-v5-c-nav__item--RowGap--row-offset);
-  --pf-v5-c-nav__button--RowGap--row-offset: calc(var(--pf-v5-c-nav__item--RowGap) * -1);
+.pf-v6-c-nav__nav,
+.pf-v6-c-nav__list,
+.pf-v6-c-nav__subnav {
+  --pf-v6-c-nav__item--RowGap--row-offset: calc(var(--pf-v6-c-nav__list--RowGap) / 2 * -1);
+  --pf-v6-c-nav__link--clickable-inset--Block: var(--pf-v6-c-nav__item--RowGap--row-offset);
+  --pf-v6-c-nav__button--RowGap--row-offset: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
 }
 
-.pf-v5-c-nav__list {
-  row-gap: var(--pf-v5-c-nav__list--RowGap);
-  column-gap: var(--pf-v5-c-nav__list--ColumnGap);
+.pf-v6-c-nav__list {
+  row-gap: var(--pf-v6-c-nav__list--RowGap);
+  column-gap: var(--pf-v6-c-nav__list--ColumnGap);
 }
 
-.pf-v5-c-nav__subnav {
-  --pf-v5-c-nav__list--RowGap: var(--pf-v5-c-nav__subnav--RowGap);
-  padding-inline-start: var(--pf-v5-c-nav__subnav--PaddingInlineStart);
+.pf-v6-c-nav__subnav {
+  --pf-v6-c-nav__list--RowGap: var(--pf-v6-c-nav__subnav--RowGap);
+  padding-inline-start: var(--pf-v6-c-nav__subnav--PaddingInlineStart);
 }
 
-.pf-v5-c-nav__item {
-  row-gap: var(--pf-v5-c-nav__item--RowGap);
-  scroll-snap-align: var(--pf-v5-c-nav__item--ScrollSnapAlign);
+.pf-v6-c-nav__item {
+  row-gap: var(--pf-v6-c-nav__item--RowGap);
+  scroll-snap-align: var(--pf-v6-c-nav__item--ScrollSnapAlign);
 }
-.pf-v5-c-nav__item > .pf-v5-c-nav__link[button] {
-  margin-block-end: var(--pf-v5-c-nav__button--RowGap--row-offset);
+.pf-v6-c-nav__item > .pf-v6-c-nav__link[button] {
+  margin-block-end: var(--pf-v6-c-nav__button--RowGap--row-offset);
 }
-.pf-v5-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) {
-  margin-block-end: var(--pf-v5-c-nav__item--m-expanded--MarginBlockEnd, var(--pf-v5-c-nav__item--RowGap));
+.pf-v6-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) {
+  margin-block-end: var(--pf-v6-c-nav__item--m-expanded--MarginBlockEnd, var(--pf-v6-c-nav__item--RowGap));
 }
-.pf-v5-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) + .pf-v5-c-nav__item > .pf-v5-c-nav__link::before {
-  inset-block-start: calc(var(--pf-v5-c-nav__item--RowGap) * -1 - var(--pf-v5-c-nav__list--RowGap));
+.pf-v6-c-nav__item.pf-m-expanded:is(:not(:only-child, :last-child)) + .pf-v6-c-nav__item > .pf-v6-c-nav__link::before {
+  inset-block-start: calc(var(--pf-v6-c-nav__item--RowGap) * -1 - var(--pf-v6-c-nav__list--RowGap));
 }
 
-.pf-v5-c-nav__section {
-  row-gap: var(--pf-v5-c-nav__section--RowGap, var(--pf-v5-c-nav__list--RowGap));
+.pf-v6-c-nav__section {
+  row-gap: var(--pf-v6-c-nav__section--RowGap, var(--pf-v6-c-nav__list--RowGap));
 }
 
-.pf-v5-c-nav__section-title {
-  padding-block-start: var(--pf-v5-c-nav__section-title--PaddingBlock, var(--pf-v5-c-nav__link--PaddingBlockStart));
-  padding-block-end: var(--pf-v5-c-nav__section-title--PaddingBlock, var(--pf-v5-c-nav__link--PaddingBlockEnd));
-  padding-inline-start: var(--pf-v5-c-nav__section-title--PaddingInline, var(--pf-v5-c-nav__link--PaddingInlineStart));
-  padding-inline-end: var(--pf-v5-c-nav__section-title--PaddingInline, var(--pf-v5-c-nav__link--PaddingInlineEnd));
-  font-size: var(--pf-v5-c-nav__section-title--FontSize, inherit);
-  font-weight: var(--pf-v5-c-nav__section-title--FontWeight);
-  color: var(--pf-v5-c-nav__section-title--Color);
+.pf-v6-c-nav__section-title {
+  padding-block-start: var(--pf-v6-c-nav__section-title--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-nav__section-title--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-nav__section-title--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-nav__section-title--PaddingInlineEnd);
+  font-size: var(--pf-v6-c-nav__section-title--FontSize, inherit);
+  font-weight: var(--pf-v6-c-nav__section-title--FontWeight);
+  color: var(--pf-v6-c-nav__section-title--Color);
 }
 
-.pf-v5-c-nav__link {
+.pf-v6-c-nav__link {
   position: relative;
   display: flex;
-  column-gap: var(--pf-v5-c-nav__link--ColumnGap, var(--pf-v5-c-nav--ColumnGap));
-  align-items: var(--pf-v5-c-nav__link--AlignItems, var(--pf-v5-c-nav--AlignItems));
-  padding-block-start: var(--pf-v5-c-nav__link--PaddingBlockStart);
-  padding-block-end: var(--pf-v5-c-nav__link--PaddingBlockEnd);
-  padding-inline-start: var(--pf-v5-c-nav__link--PaddingInlineStart);
-  padding-inline-end: var(--pf-v5-c-nav__link--PaddingInlineEnd);
-  font-size: var(--pf-v5-c-nav__link--FontSize, inherit);
-  font-weight: var(--pf-v5-c-nav__link--FontWeight, inherit);
-  line-height: var(--pf-v5-c-nav__link--LineHeight, inherit);
-  color: var(--pf-v5-c-nav__link--Color);
+  column-gap: var(--pf-v6-c-nav__link--ColumnGap);
+  align-items: var(--pf-v6-c-nav__link--AlignItems);
+  padding-block-start: var(--pf-v6-c-nav__link--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-nav__link--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-nav__link--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-nav__link--PaddingInlineEnd);
+  font-size: var(--pf-v6-c-nav__link--FontSize, inherit);
+  font-weight: var(--pf-v6-c-nav__link--FontWeight, inherit);
+  line-height: var(--pf-v6-c-nav__link--LineHeight, inherit);
+  color: var(--pf-v6-c-nav__link--Color);
   text-align: start;
-  background-color: var(--pf-v5-c-nav__link--BackgroundColor);
+  text-decoration: none;
+  background-color: var(--pf-v6-c-nav__link--BackgroundColor);
   border: none;
-  border-radius: var(--pf-v5-c-nav__link--BorderRadius);
+  border-radius: var(--pf-v6-c-nav__link--BorderRadius);
 }
-.pf-v5-c-nav__link::before {
-  position: absolute;
-  inset-block: var(--pf-v5-c-nav__link--clickable-inset--Block);
-  inset-inline: var(--pf-v5-c-nav__link--clickable-inset--Inline);
-  content: "";
+.pf-v6-c-nav__link[aria-expanded=true]::before {
+  inset-block-end: calc(var(--pf-v6-c-nav__item--RowGap) * -1);
 }
-.pf-v5-c-nav__link[aria-expanded=true]::before {
-  inset-block-end: calc(var(--pf-v5-c-nav__item--RowGap) * -1);
+.pf-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover, .pf-v6-c-nav__link:focus {
+  color: var(--pf-v6-c-nav__link--hover--Color);
+  background-color: var(--pf-v6-c-nav__link--hover--BackgroundColor);
 }
-.pf-v5-c-nav__link:hover, .pf-v5-c-nav__link.pf-m-hover {
-  color: var(--pf-v5-c-nav__link--hover--Color);
-  background-color: var(--pf-v5-c-nav__link--hover--BackgroundColor);
+.pf-v6-c-nav__link.pf-m-current, .pf-v6-c-nav__link.pf-m-current:hover {
+  --pf-v6-c-nav__link-icon--Color: var(--pf-v6-c-nav__link--m-current__link-icon--Color);
+  color: var(--pf-v6-c-nav__link--m-current--Color);
+  background-color: var(--pf-v6-c-nav__link--m-current--BackgroundColor);
 }
-.pf-v5-c-nav__link:focus {
-  color: var(--pf-v5-c-nav__link--focus--Color);
-  background-color: var(--pf-v5-c-nav__link--focus--BackgroundColor);
-}
-.pf-v5-c-nav__link:active {
-  color: var(--pf-v5-c-nav__link--active--Color);
-  background-color: var(--pf-v5-c-nav__link--active--BackgroundColor);
-}
-.pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__link.pf-m-current:hover {
-  color: var(--pf-v5-c-nav__link--m-current--Color);
-  background-color: var(--pf-v5-c-nav__link--m-current--BackgroundColor);
+
+.pf-v6-c-nav__link-icon {
+  color: var(--pf-v6-c-nav__link-icon--Color);
 }
 
-.pf-v5-c-nav__toggle {
+.pf-v6-c-nav__toggle {
   flex: none;
   align-self: start;
   margin-inline-start: auto;
-  transform: translateY(var(--pf-v5-c-nav__toggle--TranslateY));
+  transform: translateY(var(--pf-v6-c-nav__toggle--TranslateY));
 }
 
-.pf-v5-c-nav__toggle-icon {
+.pf-v6-c-nav__toggle-icon {
   display: inline-block;
-  transform: rotate(var(--pf-v5-c-nav__item__toggle-icon--Rotate));
+  transform: rotate(var(--pf-v6-c-nav__item__toggle-icon--Rotate));
 }
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__toggle-icon {
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__toggle-icon {
   scale: -1 1;
 }
 
-.pf-v5-c-nav__item:where(.pf-m-flyout) .pf-v5-c-nav__toggle-icon {
-  --pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate: 0;
+.pf-v6-c-nav__item:where(.pf-m-flyout) .pf-v6-c-nav__toggle-icon {
+  --pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate: 0;
 }
-.pf-v5-c-nav__link:where([aria-expanded=true]) .pf-v5-c-nav__toggle-icon {
-  transform: rotate(var(--pf-v5-c-nav__item--m-expanded__toggle-icon--Rotate));
+.pf-v6-c-nav__link:where([aria-expanded=true]) .pf-v6-c-nav__toggle-icon {
+  transform: rotate(var(--pf-v6-c-nav__item--m-expanded__toggle-icon--Rotate));
 }
 
-.pf-v5-c-nav__scroll-button {
+.pf-v6-c-nav__scroll-button {
   position: relative;
-  display: flex;
-  flex: none;
-  align-items: stretch;
-  justify-items: stretch;
-  min-width: var(--pf-v5-c-nav__scroll-button--MinWidth);
-}
-.pf-v5-c-nav__scroll-button :is(button) {
-  --pf-v5-c-button--Display: flex;
-  --pf-v5-c-button--Flex: 1;
-  --pf-v5-c-button--AlignItems: center;
-  --pf-v5-c-button--JustifyContent: center;
-  padding-inline: var(--pf-v5-c-nav__scroll-button--button--InlinePadding);
-}
-:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-nav__scroll-button :is(button) .pf-v5-c-button__icon {
-  scale: -1 1;
-}
-
-.pf-v5-c-nav__scroll-button :is(button) > * {
-  display: inline-block;
-  padding-inline: var(--pf-v5-c-nav__scroll-button--button--icon--InlinePadding);
-}
-.pf-v5-c-nav__scroll-button :is(button) > * > * {
-  min-width: var(--pf-v5-c-nav__scroll-button--button--icon--IconSize);
 }
-.pf-v5-c-nav__scroll-button::before {
+.pf-v6-c-nav__scroll-button::before {
   position: absolute;
-  inset-block: 0;
-  inset-inline: 0;
+  inset: 0;
   content: "";
-  outline-offset: var(--pf-v5-c-nav--OutlineOffset);
 }
-.pf-v5-c-nav__scroll-button:first-of-type {
-  border-start-start-radius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
-  border-end-start-radius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
+.pf-v6-c-nav__scroll-button:first-of-type .pf-v6-c-button {
+  --pf-v6-c-button--BorderStartStartRadius: var(--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderStartStartRadius);
+  --pf-v6-c-button--BorderEndStartRadius: var(--pf-v6-c-nav__scroll-button--first-of-type--c-button--BorderEndStartRadius);
 }
-.pf-v5-c-nav__scroll-button:first-of-type button {
-  --pf-v5-c-button--BorderStartStartRadius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
-  --pf-v5-c-button--BorderStartEndRadius: 0;
-  --pf-v5-c-button--BorderEndStartRadius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
-  --pf-v5-c-button--BorderEndEndRadius: 0;
+.pf-v6-c-nav__scroll-button:first-of-type::before {
+  border-inline-end: var(--pf-v6-c-nav__scroll-button--BorderWidth) solid var(--pf-v6-c-nav__scroll-button--BorderColor);
 }
-.pf-v5-c-nav__scroll-button:first-of-type::before {
-  border-inline-end: var(--pf-v5-c-nav__scroll-button--BorderWidth) solid var(--pf-v5-c-nav__scroll-button--BorderColor);
+.pf-v6-c-nav__scroll-button:last-of-type .pf-v6-c-button {
+  --pf-v6-c-button--BorderStartEndRadius: var(--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderStartEndRadius);
+  --pf-v6-c-button--BorderEndEndRadius: var(--pf-v6-c-nav__scroll-button--last-of-type--c-button--BorderEndEndRadius);
 }
-.pf-v5-c-nav__scroll-button:last-of-type {
-  border-start-end-radius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
-  border-end-end-radius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
+.pf-v6-c-nav__scroll-button:last-of-type::before {
+  border-inline-start: var(--pf-v6-c-nav__scroll-button--BorderWidth) solid var(--pf-v6-c-nav__scroll-button--BorderColor);
 }
-.pf-v5-c-nav__scroll-button:last-of-type button {
-  --pf-v5-c-button--BorderStartStartRadius: 0;
-  --pf-v5-c-button--BorderStartEndRadius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
-  --pf-v5-c-button--BorderEndStartRadius: 0;
-  --pf-v5-c-button--BorderEndEndRadius: var(--pf-v5-c-nav__scroll-button--BorderRadius);
+.pf-v6-c-nav__scroll-button .pf-v6-c-button {
+  outline-offset: var(--pf-v6-c-nav--OutlineOffset);
 }
-.pf-v5-c-nav__scroll-button:last-of-type::before {
-  border-inline-start: var(--pf-v5-c-nav__scroll-button--BorderWidth) solid var(--pf-v5-c-nav__scroll-button--BorderColor);
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__scroll-button .pf-v6-c-button > * {
+  scale: -1 1;
 }
 
-.pf-v5-c-nav:where(.pf-m-horizontal) {
+.pf-v6-c-nav:where(.pf-m-horizontal) {
   padding: 0;
   overflow: hidden;
-  border-radius: var(--pf-v5-c-nav--m-horizontal--BorderRadius);
 }
-.pf-v5-c-nav:where(.pf-m-horizontal),
-.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__section,
-.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__subnav,
-.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__list,
-.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__item {
+.pf-v6-c-nav:where(.pf-m-horizontal),
+.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__section,
+.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__subnav,
+.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list,
+.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__item {
   display: flex;
 }
-.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__list {
-  padding-block: var(--pf-v5-c-nav--m-horizontal__list--PaddingBlock);
-  padding-inline: var(--pf-v5-c-nav--m-horizontal__list--PaddingInline);
+.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list {
+  padding-block-start: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
   overflow-x: auto;
   white-space: nowrap;
-  scroll-snap-type: var(--pf-v5-c-nav__list--ScrollSnapType);
+  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-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__list::-webkit-scrollbar {
+.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list::-webkit-scrollbar {
   display: none;
 }
-.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__link {
-  outline-offset: var(--pf-v5-c-nav--OutlineOffset);
-}
-.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__link::before {
-  inset-block-start: calc(var(--pf-v5-c-nav--m-horizontal__list--PaddingBlockStart) * -1);
-  inset-block-end: calc(var(--pf-v5-c-nav--m-horizontal__list--PaddingBlockEnd) * -1);
-  inset-inline-start: calc(var(--pf-v5-c-nav--m-horizontal__list--ColumnGap) / 2 * -1);
-  inset-inline-end: calc(var(--pf-v5-c-nav--m-horizontal__list--ColumnGap) / 2 * -1);
-}
-.pf-v5-c-nav:where(.pf-m-horizontal).pf-m-subnav {
-  --pf-v5-c-nav__link--PaddingBlockStart: var(--pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart);
-  --pf-v5-c-nav__link--PaddingBlockEnd: var(--pf-v5-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd);
-  --pf-v5-c-nav__list--PaddingBlock: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
-  --pf-v5-c-nav__list--PaddingInline: var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart) var(--pf-v5-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart);
-}
-.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__scroll-button + .pf-v5-c-nav__list {
-  padding-inline-start: var(--pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart);
-}
-.pf-v5-c-nav:where(.pf-m-horizontal) .pf-v5-c-nav__scroll-button + .pf-v5-c-nav__list > :first-child .pf-v5-c-nav__link::before {
-  inset-inline-start: calc(var(--pf-v5-c-nav--m-horizontal__list--ColumnGap) / 2 * -1 - var(--pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart));
+.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__link {
+  outline-offset: var(--pf-v6-c-nav--OutlineOffset);
+}
+.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-subnav {
+  --pf-v6-c-nav--BackgroundColor: var(--pf-v6-c-nav--m-horizontal--m-subnav--BackgroundColor);
+  --pf-v6-c-nav--m-horizontal__list--PaddingBlockStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart);
+  --pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
+  --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart);
+  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd);
+  --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart);
+  --pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd);
+  --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockStart);
+  --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlockEnd);
+  border-radius: var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius);
+}
+.pf-v6-c-nav:where(.pf-m-horizontal).pf-m-scrollable {
+  --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineStart);
+  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-v6-c-nav--m-horizontal--m-scrollable__list--PaddingInlineEnd);
 }

package/css/components/Nav/nav.d.ts

@@ -1,29 +1,34 @@
 import './nav.css';
 declare const _default: {
-  "buttonIcon": "pf-v5-c-button__icon",
-  "dirRtl": "pf-v5-m-dir-rtl",
+  "button": "pf-v6-c-button",
+  "dirRtl": "pf-v6-m-dir-rtl",
+  "menu": "pf-v6-c-menu",
+  "menuList": "pf-v6-c-menu__list",
+  "menuListItem": "pf-v6-c-menu__list-item",
   "modifiers": {
-    "scrollable": "pf-m-scrollable",
     "overflowHidden": "pf-m-overflow-hidden",
-    "fullWidth": "pf-m-full-width",
+    "inset": "pf-m-inset",
     "fill": "pf-m-fill",
+    "drilldown": "pf-m-drilldown",
     "expanded": "pf-m-expanded",
     "hover": "pf-m-hover",
     "current": "pf-m-current",
     "flyout": "pf-m-flyout",
     "horizontal": "pf-m-horizontal",
-    "subnav": "pf-m-subnav"
+    "subnav": "pf-m-subnav",
+    "scrollable": "pf-m-scrollable"
   },
-  "nav": "pf-v5-c-nav",
-  "navItem": "pf-v5-c-nav__item",
-  "navLink": "pf-v5-c-nav__link",
-  "navList": "pf-v5-c-nav__list",
-  "navNav": "pf-v5-c-nav__nav",
-  "navScrollButton": "pf-v5-c-nav__scroll-button",
-  "navSection": "pf-v5-c-nav__section",
-  "navSectionTitle": "pf-v5-c-nav__section-title",
-  "navSubnav": "pf-v5-c-nav__subnav",
-  "navToggle": "pf-v5-c-nav__toggle",
-  "navToggleIcon": "pf-v5-c-nav__toggle-icon"
+  "nav": "pf-v6-c-nav",
+  "navItem": "pf-v6-c-nav__item",
+  "navLink": "pf-v6-c-nav__link",
+  "navLinkIcon": "pf-v6-c-nav__link-icon",
+  "navList": "pf-v6-c-nav__list",
+  "navNav": "pf-v6-c-nav__nav",
+  "navScrollButton": "pf-v6-c-nav__scroll-button",
+  "navSection": "pf-v6-c-nav__section",
+  "navSectionTitle": "pf-v6-c-nav__section-title",
+  "navSubnav": "pf-v6-c-nav__subnav",
+  "navToggle": "pf-v6-c-nav__toggle",
+  "navToggleIcon": "pf-v6-c-nav__toggle-icon"
 };
 export default _default;