@patternfly/patternfly 6.0.0-alpha.98 → 6.0.0-alpha.99

package/components/Nav/nav.scss

@@ -1,4 +1,4 @@
-:root,
+:where(:root),
 :where(.#{$nav}) {
   // * Nav shared values
   --#{$nav}__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -14,13 +14,13 @@
   --#{$nav}--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --#{$nav}--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --#{$nav}--RowGap: var(--pf-t--global--spacer--lg);
-  --#{$nav}--ColumnGap: var(--pf-t--global--spacer--sm);
+  --#{$nav}--ColumnGap: 0;
   --#{$nav}--AlignItems: baseline;
   --#{$nav}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$nav}--FontWeight: var(--pf-t--global--font--weight--body);
   --#{$nav}--LineHeight: var(--pf-t--global--font--line-height--body);
-  --#{$nav}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$nav}--OutlineOffset: calc(var(--#{$pf-global}--spacer--xs) * -1);
+  --#{$nav}--BackgroundColor: transparent;
 
   // * Nav list
   --#{$nav}__list--ScrollSnapTypeAxis: x;
@@ -31,6 +31,10 @@
   // * Nav section title
   --#{$nav}__section-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --#{$nav}__section-title--Color: var(--pf-t--global--text--color--regular);
+  --#{$nav}__section-title--PaddingBlockStart: var(--#{$nav}__link--PaddingBlockStart);
+  --#{$nav}__section-title--PaddingBlockEnd: var(--#{$nav}__link--PaddingBlockEnd);
+  --#{$nav}__section-title--PaddingInlineStart: var(--#{$nav}__link--PaddingInlineStart);
+  --#{$nav}__section-title--PaddingInlineEnd: var(--#{$nav}__link--PaddingInlineEnd);
 
   // * Nav toggle icon
   --#{$nav}__item--RowGap: var(--#{$nav}__list--RowGap);
@@ -38,16 +42,14 @@
   --#{$nav}__item--m-expanded__toggle-icon--Rotate: 90deg;
 
   // * 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--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$nav}__link--WhiteSpace: normal;
   --#{$nav}__link--Color: var(--pf-t--global--text--color--subtle);
   --#{$nav}__link--hover--Color: var(--pf-t--global--text--color--regular);
-  --#{$nav}__link--focus--Color: var(--pf-t--global--text--color--regular);
-  --#{$nav}__link--active--Color: var(--pf-t--global--text--color--regular);
   --#{$nav}__link--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
-  --#{$nav}__link--focus--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
-  --#{$nav}__link--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--hover);
   --#{$nav}__link--m-current--BackgroundColor: var(--pf-t--global--background--color--action--plain--alt--clicked);
   --#{$nav}__link--m-current--Color: var(--pf-t--global--text--color--regular);
 
@@ -58,53 +60,37 @@
   // * Nav scroll button
   --#{$nav}__scroll-button--BorderColor: var(--pf-t--global--border--color--default);
   --#{$nav}__scroll-button--BorderWidth: var(--pf-t--global--border--width--divider--default);
-  --#{$nav}__scroll-button--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --#{$nav}__scroll-button--button--InlinePadding: var(--pf-t--global--spacer--sm); // TODO: update after button updates
-  --#{$nav}__scroll-button--button--icon--InlinePadding: var(--pf-t--global--spacer--sm);
-  --#{$nav}__scroll-button--button--icon--IconSize: var(--pf-t--global--icon--size--md);
+  --#{$nav}__scroll-button--first-of-type--c-button--BorderStartStartRadius: var(--pf-t--global--border--radius--pill);
+  --#{$nav}__scroll-button--first-of-type--c-button--BorderEndStartRadius: var(--pf-t--global--border--radius--pill);
+  --#{$nav}__scroll-button--last-of-type--c-button--BorderStartEndRadius: var(--pf-t--global--border--radius--pill);
+  --#{$nav}__scroll-button--last-of-type--c-button--BorderEndEndRadius: var(--pf-t--global--border--radius--pill);
 
   // * Nav toggle
   --#{$nav}__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$nav}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$nav}__toggle--TranslateY: calc((var(--#{$nav}--LineHeight) * var(--#{$nav}--FontSize) / 2) - 50%); // find height of single label, divide by two, offset by 50% of own height
 
-  // * Nav link clickable inset
-  --#{$nav}__link--clickable-inset--InlineStart: 0;
-  --#{$nav}__link--clickable-inset--InlineEnd: 0;
-  --#{$nav}__link--clickable-inset--Inline: var(--#{$nav}__link--clickable-inset--InlineStart) var(--#{$nav}__link--clickable-inset--InlineEnd);
-
-  // * Nav horizontal
-  --#{$nav}--m-horizontal--BorderRadius: var(--pf-t--global--border--radius--pill);
-
   // * Nav horizontal list
-  --#{$nav}--m-horizontal__list--ColumnGap: var(--pf-t--global--spacer--xs);
-
-  // * Nav horizontal list - base vars
-  --#{$nav}--m-horizontal__list--PaddingBlockStart: var(--pf-t--global--spacer--sm);
-  --#{$nav}--m-horizontal__list--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --#{$nav}--m-horizontal__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --#{$nav}--m-horizontal__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-
-  // * Nav horizontal list - mapped vars
-  --#{$nav}--m-horizontal__list--PaddingBlock: var(--#{$nav}--m-horizontal__list--PaddingBlockStart) var(--#{$nav}--m-horizontal__list--PaddingBlockEnd);
-  --#{$nav}--m-horizontal__list--PaddingInline: var(--#{$nav}--m-horizontal__list--PaddingInlineStart) var(--#{$nav}--m-horizontal__list--PaddingInlineEnd);
-
-  // * Nav horizontal link - base vars
+  --#{$nav}--m-horizontal__list--PaddingBlockStart: 0;
+  --#{$nav}--m-horizontal__list--PaddingBlockEnd: 0;
+  --#{$nav}--m-horizontal__list--PaddingInlineStart: 0;
+  --#{$nav}--m-horizontal__list--PaddingInlineEnd: 0;
+  --#{$nav}--m-horizontal--m-scrollable__list--PaddingInlineStart: var(--#{$nav}__list--ColumnGap);
+  --#{$nav}--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--#{$nav}__list--ColumnGap);
+
+  // * Nav horizontal subnav
+  --#{$nav}--m-horizontal--m-subnav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
+  --#{$nav}--m-horizontal--m-subnav--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --#{$nav}--m-horizontal--m-subnav__list--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --#{$nav}--m-horizontal--m-subnav__list--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
+  --#{$nav}--m-horizontal--m-subnav__list--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$nav}--m-horizontal--m-subnav__list--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$nav}--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart: var(--#{$nav}__list--ColumnGap);
+  --#{$nav}--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd: var(--#{$nav}__list--ColumnGap);
   --#{$nav}--m-horizontal--m-subnav__link--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --#{$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);
-
-  // * Nav horizontal link - mapped vars
-  --#{$nav}--m-horizontal--m-subnav__link--PaddingBlock: var(--#{$nav}--m-horizontal--m-subnav__list--PaddingBlockStart) var(--#{$nav}--m-horizontal--m-subnav__list--PaddingBlockEnd);
-  --#{$nav}--m-horizontal--m-subnav__link--PaddingInline: var(--#{$nav}--m-horizontal--m-subnav__list--PaddingInlineStart) var(--#{$nav}--m-horizontal--m-subnav__list--PaddingInlineEnd);
-
-
-  // * Nav horizontal subnav link
-  --#{$nav}--m-horizontal--m-subnav__link--PaddingBlock: var(--#{$nav}--m-horizontal--m-subnav__list--PaddingBlockStart) var(--#{$nav}--m-horizontal--m-subnav__list--PaddingBlockEnd);
-
-  // * Nav horizontal scrollable
-  --pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart: var(--pf-t--global--border--width--extra-strong);
 }
 
 // - Nav display - default to grid
@@ -122,6 +108,7 @@
 
   position: relative;
   row-gap: var(--#{$nav}--RowGap);
+  column-gap: var(--#{$nav}--ColumnGap);
   max-width: 100%;
   padding-block-start: var(--#{$nav}--PaddingBlockStart);
   padding-block-end: var(--#{$nav}--PaddingBlockEnd);
@@ -132,10 +119,6 @@
   line-height: var(--#{$nav}--LineHeight);
   background-color: var(--#{$nav}--BackgroundColor);
 
-  &:where(.pf-m-scrollable) {
-    padding-inline: var(--#{$nav}--m-scrollable__list--PaddingInline);
-  }
-
   &.pf-m-overflow-hidden {
     overflow: hidden;
   }
@@ -147,7 +130,6 @@
   &.pf-m-fill {
     flex-grow: 1;
   }
-
 }
 
 [class^="#{$nav}"][hidden] {
@@ -202,10 +184,10 @@
 
 // - Nav section title
 .#{$nav}__section-title {
-  padding-block-start: var(--#{$nav}__section-title--PaddingBlock, var(--#{$nav}__link--PaddingBlockStart));
-  padding-block-end: var(--#{$nav}__section-title--PaddingBlock, var(--#{$nav}__link--PaddingBlockEnd));
-  padding-inline-start: var(--#{$nav}__section-title--PaddingInline, var(--#{$nav}__link--PaddingInlineStart));
-  padding-inline-end: var(--#{$nav}__section-title--PaddingInline, var(--#{$nav}__link--PaddingInlineEnd));
+  padding-block-start: var(--#{$nav}__section-title--PaddingBlockStart);
+  padding-block-end: var(--#{$nav}__section-title--PaddingBlockEnd);
+  padding-inline-start: var(--#{$nav}__section-title--PaddingInlineStart);
+  padding-inline-end: var(--#{$nav}__section-title--PaddingInlineEnd);
   font-size: var(--#{$nav}__section-title--FontSize, inherit); // default to inherit if no custom value is set
   font-weight: var(--#{$nav}__section-title--FontWeight);
   color: var(--#{$nav}__section-title--Color);
@@ -215,8 +197,8 @@
 .#{$nav}__link {
   position: relative;
   display: flex;
-  column-gap: var(--#{$nav}__link--ColumnGap, var(--#{$nav}--ColumnGap)); // default to nav column gap if no custom value is set
-  align-items: var(--#{$nav}__link--AlignItems, var(--#{$nav}--AlignItems)); // default to nav align items if no custom value is set
+  column-gap: var(--#{$nav}__link--ColumnGap);
+  align-items: var(--#{$nav}__link--AlignItems);
   padding-block-start: var(--#{$nav}__link--PaddingBlockStart);
   padding-block-end: var(--#{$nav}__link--PaddingBlockEnd);
   padding-inline-start: var(--#{$nav}__link--PaddingInlineStart);
@@ -230,14 +212,6 @@
   border: none;
   border-radius: var(--#{$nav}__link--BorderRadius);
 
-  // adjust clickable target area to consume space between items to prevent cursor flicker
-  &::before {
-    position: absolute;
-    inset-block: var(--#{$nav}__link--clickable-inset--Block); // do not customize this property
-    inset-inline: var(--#{$nav}__link--clickable-inset--Inline); // do not customize this property
-    content: "";
-  }
-
   // increase height clickable area of expanded nav_links to account for
   &[aria-expanded="true"]::before {
     inset-block-end: calc(var(--#{$nav}__item--RowGap) * -1);
@@ -245,21 +219,12 @@
 
   // explicitly set background-color prop to avoid affecting child elements settings
   &:hover,
-  &.pf-m-hover {
+  &.pf-m-hover,
+  &:focus {
     color: var(--#{$nav}__link--hover--Color);
     background-color: var(--#{$nav}__link--hover--BackgroundColor);
   }
 
-  &:focus {
-    color: var(--#{$nav}__link--focus--Color);
-    background-color: var(--#{$nav}__link--focus--BackgroundColor);
-  }
-
-  &:active {
-    color: var(--#{$nav}__link--active--Color);
-    background-color: var(--#{$nav}__link--active--BackgroundColor);
-  }
-
   &.pf-m-current,
   &.pf-m-current:hover {
     color: var(--#{$nav}__link--m-current--Color);
@@ -295,82 +260,50 @@
 
 // - Nav scroll button
 .#{$nav}__scroll-button {
-  :is(button) {
-    --#{$button}--Display: flex;
-    --#{$button}--Flex: 1;
-    --#{$button}--AlignItems: center;
-    --#{$button}--JustifyContent: center;
-
-    padding-inline: var(--#{$nav}__scroll-button--button--InlinePadding);
-
-    .#{$button}__icon {
-      @include pf-v5-mirror-inline-on-rtl;
-    }
-
-    > * {
-      display: inline-block;
-      padding-inline: var(--#{$nav}__scroll-button--button--icon--InlinePadding);
-
-      > * {
-        min-width: var(--#{$nav}__scroll-button--button--icon--IconSize);
-      }
-    }
-  }
-
-  // - Nav button
   position: relative;
-  display: flex;
-  flex: none;
-  align-items: stretch;
-  justify-items: stretch;
-  min-width: var(--#{$nav}__scroll-button--MinWidth);
 
   &::before {
     position: absolute;
-    inset-block: 0;
-    inset-inline: 0;
+    inset: 0;
     content: "";
-    outline-offset: var(--#{$nav}--OutlineOffset);
   }
 
   &:first-of-type {
-    button {
-      --#{$button}--BorderStartStartRadius: var(--#{$nav}__scroll-button--BorderRadius);
-      --#{$button}--BorderStartEndRadius: 0;
-      --#{$button}--BorderEndStartRadius: var(--#{$nav}__scroll-button--BorderRadius);
-      --#{$button}--BorderEndEndRadius: 0;
+    .#{$button} {
+      --#{$button}--BorderStartStartRadius: var(--#{$nav}__scroll-button--first-of-type--c-button--BorderStartStartRadius);
+      --#{$button}--BorderEndStartRadius: var(--#{$nav}__scroll-button--first-of-type--c-button--BorderEndStartRadius);
     }
 
-    border-start-start-radius: var(--#{$nav}__scroll-button--BorderRadius);
-    border-end-start-radius: var(--#{$nav}__scroll-button--BorderRadius);
-
     &::before {
       border-inline-end: var(--#{$nav}__scroll-button--BorderWidth) solid var(--#{$nav}__scroll-button--BorderColor);
     }
   }
 
   &:last-of-type {
-    button {
-      --#{$button}--BorderStartStartRadius: 0;
-      --#{$button}--BorderStartEndRadius: var(--#{$nav}__scroll-button--BorderRadius);
-      --#{$button}--BorderEndStartRadius: 0;
-      --#{$button}--BorderEndEndRadius: var(--#{$nav}__scroll-button--BorderRadius);
+    .#{$button} {
+      --#{$button}--BorderStartEndRadius: var(--#{$nav}__scroll-button--last-of-type--c-button--BorderStartEndRadius);
+      --#{$button}--BorderEndEndRadius: var(--#{$nav}__scroll-button--last-of-type--c-button--BorderEndEndRadius);
     }
 
-    border-start-end-radius: var(--#{$nav}__scroll-button--BorderRadius);
-    border-end-end-radius: var(--#{$nav}__scroll-button--BorderRadius);
-
     &::before {
       border-inline-start: var(--#{$nav}__scroll-button--BorderWidth) solid var(--#{$nav}__scroll-button--BorderColor);
     }
   }
+
+  // TODO - update this selector to the $pf-button__icon once that is introduced
+  .#{$button} {
+    outline-offset: var(--#{$nav}--OutlineOffset);
+
+    > * {
+      @include pf-v5-mirror-inline-on-rtl;
+    }
+  }
 }
 
 // - Nav horizontal
 .#{$nav}:where(.pf-m-horizontal) {
   padding: 0;
   overflow: hidden;
-  border-radius: var(--#{$nav}--m-horizontal--BorderRadius);
 
   // update to flex
   &,
@@ -383,11 +316,14 @@
 
   // - Nav horizontal list
   .#{$nav}__list {
-    padding-block: var(--#{$nav}--m-horizontal__list--PaddingBlock);
-    padding-inline: var(--#{$nav}--m-horizontal__list--PaddingInline);
+    padding-block-start: var(--#{$nav}--m-horizontal__list--PaddingBlockStart);
+    padding-block-end: var(--#{$nav}--m-horizontal__list--PaddingBlockEnd);
+    padding-inline-start: var(--#{$nav}--m-horizontal__list--PaddingInlineStart);
+    padding-inline-end: var(--#{$nav}--m-horizontal__list--PaddingInlineEnd);
     overflow-x: auto;
     white-space: nowrap;
     scroll-snap-type: var(--#{$nav}__list--ScrollSnapType);
+    scroll-padding-inline-end: var(--#{$nav}--m-horizontal__list--PaddingInlineEnd);
     -webkit-overflow-scrolling: touch;
 
     @include pf-v5-overflow-hide-scroll;
@@ -397,32 +333,23 @@
     outline-offset: var(--#{$nav}--OutlineOffset);
   }
 
-  .#{$nav}__link::before { // - Nav link before
-    // offset vertical clickable area by list padding start/end
-    inset-block-start: calc(var(--#{$nav}--m-horizontal__list--PaddingBlockStart) * -1);
-    inset-block-end: calc(var(--#{$nav}--m-horizontal__list--PaddingBlockEnd) * -1);
-    inset-inline-start: calc(var(--#{$nav}--m-horizontal__list--ColumnGap) / 2 * -1);
-    inset-inline-end: calc(var(--#{$nav}--m-horizontal__list--ColumnGap) / 2 * -1);
-  }
-
   // - Nav subnav
   &.pf-m-subnav {
-    // - Nav subnav link1
+    --#{$nav}--BackgroundColor: var(--#{$nav}--m-horizontal--m-subnav--BackgroundColor);
+    --#{$nav}--m-horizontal__list--PaddingBlockStart: var(--#{$nav}--m-horizontal--m-subnav__list--PaddingBlockStart);
+    --#{$nav}--m-horizontal__list--PaddingBlockEnd: var(--#{$nav}--m-horizontal--m-subnav__list--PaddingBlockEnd);
+    --#{$nav}--m-horizontal__list--PaddingInlineStart: var(--#{$nav}--m-horizontal--m-subnav__list--PaddingInlineStart);
+    --#{$nav}--m-horizontal__list--PaddingInlineEnd: var(--#{$nav}--m-horizontal--m-subnav__list--PaddingInlineEnd);
+    --#{$nav}--m-horizontal--m-scrollable__list--PaddingInlineStart: var(--#{$nav}--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineStart);
+    --#{$nav}--m-horizontal--m-scrollable__list--PaddingInlineEnd: var(--#{$nav}--m-horizontal--m-subnav--m-scrollable__list--PaddingInlineEnd);
     --#{$nav}__link--PaddingBlockStart: var(--#{$nav}--m-horizontal--m-subnav__link--PaddingBlockStart);
     --#{$nav}__link--PaddingBlockEnd: var(--#{$nav}--m-horizontal--m-subnav__link--PaddingBlockEnd);
 
-    // - Nav subnav list
-    --#{$nav}__list--PaddingBlock: var(--#{$nav}--m-horizontal--m-subnav__list--PaddingBlockStart) var(--#{$nav}--m-horizontal--m-subnav__list--PaddingBlockEnd);
-    --#{$nav}__list--PaddingInline: var(--#{$nav}--m-horizontal--m-subnav__list--PaddingInlineStart) var(--#{$nav}--m-horizontal--m-subnav__list--PaddingInlineStart);
+    border-radius: var(--#{$nav}--m-horizontal--m-subnav--BorderRadius);
   }
 
-  // - Nav scrollable
-  .#{$nav}__scroll-button + .#{$nav}__list {
-    padding-inline-start: var(--pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart);
-
-    // offset clickable area for first child by padding update
-    > :first-child .#{$nav}__link::before {
-      inset-inline-start: calc(var(--#{$nav}--m-horizontal__list--ColumnGap) / 2 * -1 - var(--pf-v5-c-nav--horizontal-scrollable--PaddingInlineStart));
-    }
+  &.pf-m-scrollable {
+    --#{$nav}--m-horizontal__list--PaddingInlineStart: var(--#{$nav}--m-horizontal--m-scrollable__list--PaddingInlineStart);
+    --#{$nav}--m-horizontal__list--PaddingInlineEnd: var(--#{$nav}--m-horizontal--m-scrollable__list--PaddingInlineEnd);
   }
 }

package/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/components/Page/page.scss

@@ -117,7 +117,7 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   // Main section
   --#{$page}__main-section--MarginTop: var(--pf-t--global--spacer--md);
   --#{$page}__main-section--PaddingTop: var(--pf-t--global--spacer--lg);
-  --#{$page}__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
+  --#{$page}__main-section--PaddingRight: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section - TODO, see if we can remove the need for this calc(), or possibly move it down to the property definition so a user can theme this without a calc()
   --#{$page}__main-section--PaddingBottom: 0;
   --#{$page}__main-section--PaddingLeft: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth)); // subtract the border of the main section
   --#{$page}__main-breadcrumb--main-section--PaddingTop: var(--pf-t--global--spacer--md);
@@ -151,14 +151,11 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__main-nav--xl--PaddingLeft: var(--pf-t--global--spacer--sm);
 
   // Main section horizontal subnav
-  --#{$page}__main-subnav--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --#{$page}__main-subnav--BorderTopWidth: var(--pf-t--global--border--width--divider--default);
-  --#{$page}__main-subnav--BorderTopColor: var(--pf-t--global--border--color--default);
-  --#{$page}__main-subnav--BorderLeftWidth: 0;
-  --#{$page}__main-subnav--BorderLeftColor: var(--pf-t--global--border--color--default);
-  --#{$page}__sidebar--main__main-subnav--BorderLeftWidth: var(--pf-t--global--border--width--divider--default);
-  --#{$page}__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth: 0;
-
+  --#{$page}__main-subnav--BackgroundColor: var(--pf-t--global--background--color--primary--default);
+  --#{$page}__main-subnav--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$page}__main-subnav--PaddingBlockEnd: 0;
+  --#{$page}__main-subnav--PaddingInlineStart: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth));
+  --#{$page}__main-subnav--PaddingInlineEnd: calc(var(--pf-t--global--spacer--lg) - var(--#{$page}__main--BorderWidth));
 
   // Main section breadcrumb
   --#{$page}__main-breadcrumb--PaddingTop: var(--pf-t--global--spacer--md);
@@ -547,21 +544,11 @@ $pf-page-v5--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 }
 
 .#{$page}__main-subnav {
+  padding-block-start: var(--#{$page}__main-subnav--PaddingBlockStart);
+  padding-block-end: var(--#{$page}__main-subnav--PaddingBlockEnd);
+  padding-inline-start: var(--#{$page}__main-subnav--PaddingInlineStart);
+  padding-inline-end: var(--#{$page}__main-subnav--PaddingInlineEnd);
   background-color: var(--#{$page}__main-subnav--BackgroundColor);
-  border-block-start: var(--#{$page}__main-subnav--BorderTopWidth) solid var(--#{$page}__main-subnav--BorderTopColor);
-  border-inline-start: var(--#{$page}__main-subnav--BorderLeftWidth) solid var(--#{$page}__main-subnav--BorderLeftColor);
-
-  @at-root .#{$page}__sidebar {
-    ~ .#{$page}__main {
-      @media screen and (min-width: $pf-v5-global--breakpoint--xl) {
-        --#{$page}__main-subnav--BorderLeftWidth: var(--#{$page}__sidebar--main__main-subnav--BorderLeftWidth);
-      }
-    }
-
-    &.pf-m-collapsed ~ .#{$page}__main {
-      --#{$page}__main-subnav--BorderLeftWidth: var(--#{$page}__sidebar--m-collapsed--main__main-subnav--BorderLeftWidth);
-    }
-  }
 }
 
 .#{$page}__main-breadcrumb {

package/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 {

package/components/Radio/radio.scss

@@ -4,19 +4,27 @@
 .#{$radio} {
   --#{$radio}--GridGap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--sm);
   --#{$radio}--AccentColor: var(--pf-t--global--icon--color--brand--default);
+  --#{$radio}--Height: calc(var(--#{$radio}__label--FontSize) * var(--#{$radio}__label--LineHeight));
+
+  // TODO: update to `--#{$radio}--FontSize` `--#{$radio}--LineHeight`
   --#{$radio}__label--disabled--Color: var(--pf-t--global--text--color--disabled);
   --#{$radio}__label--Color: var(--pf-t--global--text--color--regular);
   --#{$radio}__label--FontWeight: var(--pf-t--global--font--weight--body);
   --#{$radio}__label--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$radio}__label--LineHeight: var(--pf-t--global--font--line-height--body);
-  --#{$radio}__input--TranslateY: calc((var(--#{$radio}__label--LineHeight) * var(--#{$radio}__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height
-  --#{$radio}__input--first-child--MarginLeft: #{pf-size-prem(1px)};
-  --#{$radio}__input--last-child--MarginRight: #{pf-size-prem(1px)};
   --#{$radio}__description--FontSize: var(--pf-t--global--font--size--body--sm);
   --#{$radio}__description--Color: var(--pf-t--global--text--color--subtle);
+
+  // * Radio input
+  --#{$radio}__input--first-child--MarginLeft: #{pf-size-prem(1px)};
+  --#{$radio}__input--last-child--MarginRight: #{pf-size-prem(1px)};
   --#{$radio}__body--MarginTop: var(--pf-t--global--spacer--sm);
+
+  // TODO: due to subpixel rendering and this value resolving to 21px, the checkbox vertical centering is off by 1px. Mozilla rounds subpixels up while chrome rounds down. This is a temporary fix until we can find a better solution.
+  --#{$radio}__input--TranslateY: calc((var(--#{$radio}__label--LineHeight) * var(--#{$radio}__label--FontSize) / 2 ) - 50%); // find height of single label, divide by two, offset by 50% of own height
 }
 
+// - Radio
 .#{$radio} {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -25,15 +33,22 @@
   accent-color: var(--#{$radio}--AccentColor);
 
   &.pf-m-standalone {
-    --#{$radio}--GridGap: 0;
-    --#{$radio}__input--TranslateY: none;
-
     display: inline-grid;
+    grid-template-columns: auto;
+    height: var(--#{$check}--Height);
+
+    .#{$radio}__input {
+      align-self: center;
+      transform: none;
+    }
   }
 }
 
+// - Radio input
 .#{$radio}__input {
   align-self: start;
+  font-size: var(--#{$radio}__label--FontSize);
+  line-height: var(--#{$radio}__label--LineHeight);
 
   // find height of single label, divide by two, offset by 50% of own height
   transform: translateY(var(--#{$radio}__input--TranslateY));