@patternfly/react-styles 6.0.0-alpha.15 → 6.0.0-alpha.17

package/css/components/Nav/nav.css

@@ -1,4 +1,4 @@
-:root,
+:where(:root),
 :where(.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);
@@ -11,64 +11,65 @@
   --pf-v6-c-nav--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-nav--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-nav--RowGap: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-nav--ColumnGap: var(--pf-t--global--spacer--sm);
+  --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);
   --pf-v6-c-nav--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v6-c-nav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-nav--OutlineOffset: calc(var(--pf-v6-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--focus--Color: var(--pf-t--global--text--color--regular);
-  --pf-v6-c-nav__link--active--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--focus--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
-  --pf-v6-c-nav__link--active--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__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--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v6-c-nav__scroll-button--button--InlinePadding: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-nav__scroll-button--button--icon--InlinePadding: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-nav__scroll-button--button--icon--IconSize: var(--pf-t--global--icon--size--md);
+  --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__link--clickable-inset--InlineStart: 0;
-  --pf-v6-c-nav__link--clickable-inset--InlineEnd: 0;
-  --pf-v6-c-nav__link--clickable-inset--Inline: var(--pf-v6-c-nav__link--clickable-inset--InlineStart) var(--pf-v6-c-nav__link--clickable-inset--InlineEnd);
-  --pf-v6-c-nav--m-horizontal--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v6-c-nav--m-horizontal__list--ColumnGap: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-nav--m-horizontal__list--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-nav--m-horizontal__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-nav--m-horizontal__list--PaddingBlock: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart) var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd);
-  --pf-v6-c-nav--m-horizontal__list--PaddingInline: var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineStart) var(--pf-v6-c-nav--m-horizontal__list--PaddingInlineEnd);
+  --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-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlock: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
-  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingInline: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart) var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineEnd);
-  --pf-v6-c-nav--m-horizontal--m-subnav__link--PaddingBlock: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
-  --pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart: var(--pf-t--global--border--width--extra-strong);
 }
 
 .pf-v6-c-nav,
@@ -83,6 +84,7 @@
   --pf-v6-c-menu--MinWidth: 100%;
   position: relative;
   row-gap: var(--pf-v6-c-nav--RowGap);
+  column-gap: var(--pf-v6-c-nav--ColumnGap);
   max-width: 100%;
   padding-block-start: var(--pf-v6-c-nav--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-nav--PaddingBlockEnd);
@@ -93,9 +95,6 @@
   line-height: var(--pf-v6-c-nav--LineHeight);
   background-color: var(--pf-v6-c-nav--BackgroundColor);
 }
-.pf-v6-c-nav:where(.pf-m-scrollable) {
-  padding-inline: var(--pf-v6-c-nav--m-scrollable__list--PaddingInline);
-}
 .pf-v6-c-nav.pf-m-overflow-hidden {
   overflow: hidden;
 }
@@ -147,10 +146,10 @@
 }
 
 .pf-v6-c-nav__section-title {
-  padding-block-start: var(--pf-v6-c-nav__section-title--PaddingBlock, var(--pf-v6-c-nav__link--PaddingBlockStart));
-  padding-block-end: var(--pf-v6-c-nav__section-title--PaddingBlock, var(--pf-v6-c-nav__link--PaddingBlockEnd));
-  padding-inline-start: var(--pf-v6-c-nav__section-title--PaddingInline, var(--pf-v6-c-nav__link--PaddingInlineStart));
-  padding-inline-end: var(--pf-v6-c-nav__section-title--PaddingInline, var(--pf-v6-c-nav__link--PaddingInlineEnd));
+  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);
@@ -159,8 +158,8 @@
 .pf-v6-c-nav__link {
   position: relative;
   display: flex;
-  column-gap: var(--pf-v6-c-nav__link--ColumnGap, var(--pf-v6-c-nav--ColumnGap));
-  align-items: var(--pf-v6-c-nav__link--AlignItems, var(--pf-v6-c-nav--AlignItems));
+  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);
@@ -174,27 +173,13 @@
   border: none;
   border-radius: var(--pf-v6-c-nav__link--BorderRadius);
 }
-.pf-v6-c-nav__link::before {
-  position: absolute;
-  inset-block: var(--pf-v6-c-nav__link--clickable-inset--Block);
-  inset-inline: var(--pf-v6-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-v6-c-nav__link:hover, .pf-v6-c-nav__link.pf-m-hover {
+.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-v6-c-nav__link:focus {
-  color: var(--pf-v6-c-nav__link--focus--Color);
-  background-color: var(--pf-v6-c-nav__link--focus--BackgroundColor);
-}
-.pf-v6-c-nav__link:active {
-  color: var(--pf-v6-c-nav__link--active--Color);
-  background-color: var(--pf-v6-c-nav__link--active--BackgroundColor);
-}
 .pf-v6-c-nav__link.pf-m-current, .pf-v6-c-nav__link.pf-m-current:hover {
   color: var(--pf-v6-c-nav__link--m-current--Color);
   background-color: var(--pf-v6-c-nav__link--m-current--BackgroundColor);
@@ -224,68 +209,36 @@
 
 .pf-v6-c-nav__scroll-button {
   position: relative;
-  display: flex;
-  flex: none;
-  align-items: stretch;
-  justify-items: stretch;
-  min-width: var(--pf-v6-c-nav__scroll-button--MinWidth);
-}
-.pf-v6-c-nav__scroll-button :is(button) {
-  --pf-v6-c-button--Display: flex;
-  --pf-v6-c-button--Flex: 1;
-  --pf-v6-c-button--AlignItems: center;
-  --pf-v6-c-button--JustifyContent: center;
-  padding-inline: var(--pf-v6-c-nav__scroll-button--button--InlinePadding);
-}
-:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__scroll-button :is(button) .pf-v6-c-button__icon {
-  scale: -1 1;
-}
-
-.pf-v6-c-nav__scroll-button :is(button) > * {
-  display: inline-block;
-  padding-inline: var(--pf-v6-c-nav__scroll-button--button--icon--InlinePadding);
-}
-.pf-v6-c-nav__scroll-button :is(button) > * > * {
-  min-width: var(--pf-v6-c-nav__scroll-button--button--icon--IconSize);
 }
 .pf-v6-c-nav__scroll-button::before {
   position: absolute;
-  inset-block: 0;
-  inset-inline: 0;
+  inset: 0;
   content: "";
-  outline-offset: var(--pf-v6-c-nav--OutlineOffset);
 }
-.pf-v6-c-nav__scroll-button:first-of-type {
-  border-start-start-radius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
-  border-end-start-radius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
-}
-.pf-v6-c-nav__scroll-button:first-of-type button {
-  --pf-v6-c-button--BorderStartStartRadius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
-  --pf-v6-c-button--BorderStartEndRadius: 0;
-  --pf-v6-c-button--BorderEndStartRadius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
-  --pf-v6-c-button--BorderEndEndRadius: 0;
+.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-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-v6-c-nav__scroll-button:last-of-type {
-  border-start-end-radius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
-  border-end-end-radius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
-}
-.pf-v6-c-nav__scroll-button:last-of-type button {
-  --pf-v6-c-button--BorderStartStartRadius: 0;
-  --pf-v6-c-button--BorderStartEndRadius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
-  --pf-v6-c-button--BorderEndStartRadius: 0;
-  --pf-v6-c-button--BorderEndEndRadius: var(--pf-v6-c-nav__scroll-button--BorderRadius);
+.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-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-v6-c-nav__scroll-button .pf-v6-c-button {
+  outline-offset: var(--pf-v6-c-nav--OutlineOffset);
+}
+:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-nav__scroll-button .pf-v6-c-button > * {
+  scale: -1 1;
+}
 
 .pf-v6-c-nav:where(.pf-m-horizontal) {
   padding: 0;
   overflow: hidden;
-  border-radius: var(--pf-v6-c-nav--m-horizontal--BorderRadius);
 }
 .pf-v6-c-nav:where(.pf-m-horizontal),
 .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__section,
@@ -295,11 +248,14 @@
   display: flex;
 }
 .pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__list {
-  padding-block: var(--pf-v6-c-nav--m-horizontal__list--PaddingBlock);
-  padding-inline: var(--pf-v6-c-nav--m-horizontal__list--PaddingInline);
+  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-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;
@@ -310,21 +266,19 @@
 .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-v6-c-nav__link::before {
-  inset-block-start: calc(var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockStart) * -1);
-  inset-block-end: calc(var(--pf-v6-c-nav--m-horizontal__list--PaddingBlockEnd) * -1);
-  inset-inline-start: calc(var(--pf-v6-c-nav--m-horizontal__list--ColumnGap) / 2 * -1);
-  inset-inline-end: calc(var(--pf-v6-c-nav--m-horizontal__list--ColumnGap) / 2 * -1);
-}
 .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);
-  --pf-v6-c-nav__list--PaddingBlock: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockStart) var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingBlockEnd);
-  --pf-v6-c-nav__list--PaddingInline: var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart) var(--pf-v6-c-nav--m-horizontal--m-subnav__list--PaddingInlineStart);
-}
-.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__scroll-button + .pf-v6-c-nav__list {
-  padding-inline-start: var(--pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart);
+  border-radius: var(--pf-v6-c-nav--m-horizontal--m-subnav--BorderRadius);
 }
-.pf-v6-c-nav:where(.pf-m-horizontal) .pf-v6-c-nav__scroll-button + .pf-v6-c-nav__list > :first-child .pf-v6-c-nav__link::before {
-  inset-inline-start: calc(var(--pf-v6-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-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,9 +1,8 @@
 import './nav.css';
 declare const _default: {
-  "buttonIcon": "pf-v6-c-button__icon",
+  "button": "pf-v6-c-button",
   "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
-    "scrollable": "pf-m-scrollable",
     "overflowHidden": "pf-m-overflow-hidden",
     "fullWidth": "pf-m-full-width",
     "fill": "pf-m-fill",
@@ -12,7 +11,8 @@ declare const _default: {
     "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-v6-c-nav",
   "navItem": "pf-v6-c-nav__item",

package/css/components/Nav/nav.js

@@ -2,10 +2,9 @@
 exports.__esModule = true;
 require('./nav.css');
 exports.default = {
-  "buttonIcon": "pf-v6-c-button__icon",
+  "button": "pf-v6-c-button",
   "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
-    "scrollable": "pf-m-scrollable",
     "overflowHidden": "pf-m-overflow-hidden",
     "fullWidth": "pf-m-full-width",
     "fill": "pf-m-fill",
@@ -14,7 +13,8 @@ exports.default = {
     "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-v6-c-nav",
   "navItem": "pf-v6-c-nav__item",

package/css/components/Nav/nav.mjs

@@ -1,9 +1,8 @@
 import './nav.css';
 export default {
-  "buttonIcon": "pf-v6-c-button__icon",
+  "button": "pf-v6-c-button",
   "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
-    "scrollable": "pf-m-scrollable",
     "overflowHidden": "pf-m-overflow-hidden",
     "fullWidth": "pf-m-full-width",
     "fill": "pf-m-fill",
@@ -12,7 +11,8 @@ export default {
     "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-v6-c-nav",
   "navItem": "pf-v6-c-nav__item",

package/css/components/Page/page.css

@@ -155,13 +155,11 @@
   --pf-v6-c-page__main-nav--m-sticky-top--PaddingBottom: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-nav--xl--PaddingRight: var(--pf-t--global--spacer--sm);
   --pf-v6-c-page__main-nav--xl--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-page__main-subnav--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
-  --pf-v6-c-page__main-subnav--BorderTopColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-page__main-subnav--BorderLeftWidth: 0;
-  --pf-v6-c-page__main-subnav--BorderLeftColor: var(--pf-t--global--border--color--default);
-  --pf-v6-c-page__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
-  --pf-v6-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth: 0;
+  --pf-v6-c-page__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --pf-v6-c-page__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-page__main-subnav--PaddingBlockEnd: 0;
+  --pf-v6-c-page__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
+  --pf-v6-c-page__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
   --pf-v6-c-page__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
   --pf-v6-c-page__main-breadcrumb--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--pf-v6-c-page__main--BorderWidth));
   --pf-v6-c-page__main-breadcrumb--PaddingBottom: 0;
@@ -703,17 +701,11 @@
 }
 
 .pf-v6-c-page__main-subnav {
+  padding-block-start: var(--pf-v6-c-page__main-subnav--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-page__main-subnav--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-page__main-subnav--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-page__main-subnav--PaddingInlineEnd);
   background-color: var(--pf-v6-c-page__main-subnav--BackgroundColor);
-  border-block-start: var(--pf-v6-c-page__main-subnav--BorderTopWidth) solid var(--pf-v6-c-page__main-subnav--BorderTopColor);
-  border-inline-start: var(--pf-v6-c-page__main-subnav--BorderLeftWidth) solid var(--pf-v6-c-page__main-subnav--BorderLeftColor);
-}
-@media screen and (min-width: 1200px) {
-  .pf-v6-c-page__sidebar ~ .pf-v6-c-page__main {
-    --pf-v6-c-page__main-subnav--BorderLeftWidth: var(--pf-v6-c-page__sidebar--main__main-subnav--BorderLeftWidth);
-  }
-}
-.pf-v6-c-page__sidebar.pf-m-collapsed ~ .pf-v6-c-page__main {
-  --pf-v6-c-page__main-subnav--BorderLeftWidth: var(--pf-v6-c-page__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth);
 }
 
 .pf-v6-c-page__main-breadcrumb {

package/css/components/Radio/radio.css

@@ -2,17 +2,18 @@
 .pf-v6-c-radio {
   --pf-v6-c-radio--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --pf-v6-c-radio--AccentColor: var(--pf-t--global--icon--color--brand--default);
+  --pf-v6-c-radio--Height: calc(var(--pf-v6-c-radio__label--FontSize) * var(--pf-v6-c-radio__label--LineHeight));
   --pf-v6-c-radio__label--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-radio__label--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-radio__label--FontWeight: var(--pf-t--global--font--weight--body);
   --pf-v6-c-radio__label--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-radio__label--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v6-c-radio__input--TranslateY: calc((var(--pf-v6-c-radio__label--LineHeight) * var(--pf-v6-c-radio__label--FontSize) / 2 ) - 50%);
-  --pf-v6-c-radio__input--first-child--MarginLeft: 0.0625rem;
-  --pf-v6-c-radio__input--last-child--MarginRight: 0.0625rem;
   --pf-v6-c-radio__description--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-radio__description--Color: var(--pf-t--global--text--color--subtle);
+  --pf-v6-c-radio__input--first-child--MarginLeft: 0.0625rem;
+  --pf-v6-c-radio__input--last-child--MarginRight: 0.0625rem;
   --pf-v6-c-radio__body--MarginTop: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-radio__input--TranslateY: calc((var(--pf-v6-c-radio__label--LineHeight) * var(--pf-v6-c-radio__label--FontSize) / 2 ) - 50%);
 }
 
 .pf-v6-c-radio {
@@ -23,13 +24,19 @@
   accent-color: var(--pf-v6-c-radio--AccentColor);
 }
 .pf-v6-c-radio.pf-m-standalone {
-  --pf-v6-c-radio--GridGap: 0;
-  --pf-v6-c-radio__input--TranslateY: none;
   display: inline-grid;
+  grid-template-columns: auto;
+  height: var(--pf-v6-c-check--Height);
+}
+.pf-v6-c-radio.pf-m-standalone .pf-v6-c-radio__input {
+  align-self: center;
+  transform: none;
 }
 
 .pf-v6-c-radio__input {
   align-self: start;
+  font-size: var(--pf-v6-c-radio__label--FontSize);
+  line-height: var(--pf-v6-c-radio__label--LineHeight);
   transform: translateY(var(--pf-v6-c-radio__input--TranslateY));
 }
 .pf-v6-c-radio__input:first-child {