@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/components/MultipleFileUpload/multiple-file-upload.scss

@@ -1,7 +1,6 @@
-// @debug $multiple-file-upload; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
-:root,
-:where(.#{$multiple-file-upload}) {
+@include pf-root($multiple-file-upload) {
   --#{$multiple-file-upload}--GridTemplateColumns: 1fr;
   --#{$multiple-file-upload}--Gap: var(--pf-t--global--spacer--md);
 
@@ -13,10 +12,10 @@
     "title"
     "upload"
     "info";
-  --#{$multiple-file-upload}__main--PaddingTop: var(--pf-t--global--spacer--xl);
-  --#{$multiple-file-upload}__main--PaddingRight: var(--pf-t--global--spacer--xl);
-  --#{$multiple-file-upload}__main--PaddingBottom: var(--pf-t--global--spacer--xl);
-  --#{$multiple-file-upload}__main--PaddingLeft: var(--pf-t--global--spacer--xl);
+  --#{$multiple-file-upload}__main--PaddingBlockStart: var(--pf-t--global--spacer--xl);
+  --#{$multiple-file-upload}__main--PaddingInlineEnd: var(--pf-t--global--spacer--xl);
+  --#{$multiple-file-upload}__main--PaddingBlockEnd: var(--pf-t--global--spacer--xl);
+  --#{$multiple-file-upload}__main--PaddingInlineStart: var(--pf-t--global--spacer--xl);
   --#{$multiple-file-upload}__main--BorderWidth: var(--pf-t--global--border--width--regular);
   --#{$multiple-file-upload}__main--BorderStyle: dashed;
   --#{$multiple-file-upload}__main--BorderColor: var(--pf-t--global--border--color--default);
@@ -31,7 +30,7 @@
   --#{$multiple-file-upload}__title-text--Color: var(--pf-t--global--text--color--regular);
   --#{$multiple-file-upload}__title-text--FontFamily: var(--pf-t--global--font--family--heading);
   --#{$multiple-file-upload}__title-text--FontSize: var(--pf-t--global--font--size--heading--sm);
-  --#{$multiple-file-upload}__title-text--FontWeight: var(--pf-t--global--font--weight--heading);
+  --#{$multiple-file-upload}__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
 
   // title icon
   --#{$multiple-file-upload}__title-icon--Color: var(--pf-t--global--icon--color--regular);
@@ -39,17 +38,17 @@
 
   // title text separator
   --#{$multiple-file-upload}__title-text-separator--Display: block;
-  --#{$multiple-file-upload}__title-text-separator--MarginTop: var(--pf-t--global--spacer--sm);
-  --#{$multiple-file-upload}__title-text-separator--MarginBottom: var(--pf-t--global--spacer--sm);
+  --#{$multiple-file-upload}__title-text-separator--MarginBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$multiple-file-upload}__title-text-separator--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --#{$multiple-file-upload}__title-text-separator--Color: var(--pf-t--global--text--color--regular);
   --#{$multiple-file-upload}__title-text-separator--FontFamily: var(--pf-t--global--font--family--body);
   --#{$multiple-file-upload}__title-text-separator--FontSize: var(--pf-t--global--font--size--body--lg);
-  --#{$multiple-file-upload}__title-text-separator--FontWeight: var(--pf-t--global--font--weight--body);
+  --#{$multiple-file-upload}__title-text-separator--FontWeight: var(--pf-t--global--font--weight--body--default);
 
   // info
   --#{$multiple-file-upload}__info--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$multiple-file-upload}__info--Color: var(--pf-t--global--text--color--subtle);
-  --#{$multiple-file-upload}__info--MarginTop: var(--pf-t--global--spacer--lg);
+  --#{$multiple-file-upload}__info--MarginBlockStart: var(--pf-t--global--spacer--lg);
 
   // drag-over
   --#{$multiple-file-upload}--m-drag-over__main--BorderStyle: dashed;
@@ -63,7 +62,7 @@
     "title upload"
     "info upload";
   --#{$multiple-file-upload}--m-horizontal__main--Gap: var(--pf-t--global--spacer--sm) var(--pf-t--global--spacer--lg);
-  --#{$multiple-file-upload}--m-horizontal__main--PaddingBottom: var(--pf-t--global--spacer--lg);
+  --#{$multiple-file-upload}--m-horizontal__main--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --#{$multiple-file-upload}--m-horizontal__title--GridTemplateColumns: auto 1fr;
   --#{$multiple-file-upload}--m-horizontal__title--Gap: var(--pf-t--global--spacer--sm);
 
@@ -71,28 +70,28 @@
   --#{$multiple-file-upload}--m-horizontal__title-icon--FontSize: var(--pf-t--global--font--size--heading--xs);
   --#{$multiple-file-upload}--m-horizontal__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
   --#{$multiple-file-upload}--m-horizontal__title-text-separator--Display: inline;
-  --#{$multiple-file-upload}--m-horizontal__title-text-separator--MarginTop: 0;
+  --#{$multiple-file-upload}--m-horizontal__title-text-separator--MarginBlockStart: 0;
   --#{$multiple-file-upload}--m-horizontal__title-text-separator--FontFamily: var(--pf-t--global--font--family--heading);
   --#{$multiple-file-upload}--m-horizontal__title-text-separator--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --#{$multiple-file-upload}--m-horizontal__title-text-separator--FontWeight: var(--pf-t--global--font--weight--heading);
-  --#{$multiple-file-upload}--m-horizontal__info--MarginTop: 0;
+  --#{$multiple-file-upload}--m-horizontal__title-text-separator--FontWeight: var(--pf-t--global--font--weight--heading--default);
+  --#{$multiple-file-upload}--m-horizontal__info--MarginBlockStart: 0;
 
   // status container
-  --#{$multiple-file-upload}__status--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$multiple-file-upload}__status--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$multiple-file-upload}__status--PaddingLeft: var(--pf-t--global--spacer--md);
-  --#{$multiple-file-upload}__status--PaddingRight: var(--pf-t--global--spacer--md);
+  --#{$multiple-file-upload}__status--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --#{$multiple-file-upload}__status--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$multiple-file-upload}__status--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --#{$multiple-file-upload}__status--PaddingInlineEnd: var(--pf-t--global--spacer--md);
 
   // status progress
   --#{$multiple-file-upload}__status-progress--GridTemplateColumns: auto 1fr;
   --#{$multiple-file-upload}__status-progress--Gap: var(--pf-t--global--spacer--sm);
 
   // status progress icon
-  --#{$multiple-file-upload}__status-progress-icon--Color: var(--pf-t--global--icon--color--regular);
+  --#{$multiple-file-upload}__status-progress-icon--Color: var(--pf-t--global--icon--color--brand--default);
 
   // status item
-  --#{$multiple-file-upload}__status-item--PaddingTop: var(--pf-t--global--spacer--md);
-  --#{$multiple-file-upload}__status-item--PaddingBottom: var(--pf-t--global--spacer--md);
+  --#{$multiple-file-upload}__status-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --#{$multiple-file-upload}__status-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --#{$multiple-file-upload}__status-item--GridTemplateColumns: auto 1fr auto;
   --#{$multiple-file-upload}__status-item--Gap: var(--pf-t--global--spacer--sm);
   --#{$multiple-file-upload}__status-item--BorderWidth: var(--pf-t--global--border--width--regular);
@@ -123,17 +122,17 @@
     --#{$multiple-file-upload}__main--GridTemplateColumns: var(--#{$multiple-file-upload}--m-horizontal__main--GridTemplateColumns);
     --#{$multiple-file-upload}__main--GridTemplateAreas: var(--#{$multiple-file-upload}--m-horizontal__main--GridTemplateAreas);
     --#{$multiple-file-upload}__main--Gap: var(--#{$multiple-file-upload}--m-horizontal__main--Gap);
-    --#{$multiple-file-upload}__main--PaddingBottom: var(--#{$multiple-file-upload}--m-horizontal__main--PaddingBottom);
+    --#{$multiple-file-upload}__main--PaddingBlockEnd: var(--#{$multiple-file-upload}--m-horizontal__main--PaddingBlockEnd);
     --#{$multiple-file-upload}__title--GridTemplateColumns: var(--#{$multiple-file-upload}--m-horizontal__title--GridTemplateColumns);
     --#{$multiple-file-upload}__title--Gap: var(--#{$multiple-file-upload}--m-horizontal__title--Gap);
     --#{$multiple-file-upload}__title-icon--FontSize: var(--#{$multiple-file-upload}--m-horizontal__title-icon--FontSize);
     --#{$multiple-file-upload}__title-text--FontSize: var(--#{$multiple-file-upload}--m-horizontal__title-text--FontSize);
     --#{$multiple-file-upload}__title-text-separator--FontFamily: var(--#{$multiple-file-upload}--m-horizontal__title-text-separator--FontFamily);
     --#{$multiple-file-upload}__title-text-separator--Display: var(--#{$multiple-file-upload}--m-horizontal__title-text-separator--Display);
-    --#{$multiple-file-upload}__title-text-separator--MarginTop: var(--#{$multiple-file-upload}--m-horizontal__title-text-separator--MarginTop);
+    --#{$multiple-file-upload}__title-text-separator--MarginBlockStart: var(--#{$multiple-file-upload}--m-horizontal__title-text-separator--MarginBlockStart);
     --#{$multiple-file-upload}__title-text-separator--FontSize: var(--#{$multiple-file-upload}--m-horizontal__title-text-separator--FontSize);
     --#{$multiple-file-upload}__title-text-separator--FontWeight: var(--#{$multiple-file-upload}--m-horizontal__title-text-separator--FontWeight);
-    --#{$multiple-file-upload}__info--MarginTop: var(--#{$multiple-file-upload}--m-horizontal__info--MarginTop);
+    --#{$multiple-file-upload}__info--MarginBlockStart: var(--#{$multiple-file-upload}--m-horizontal__info--MarginBlockStart);
   }
 
   &.pf-m-drag-over {
@@ -149,10 +148,10 @@
   grid-template-columns: var(--#{$multiple-file-upload}__main--GridTemplateColumns);
   gap: var(--#{$multiple-file-upload}__main--Gap);
   align-items: center;
-  padding-block-start: var(--#{$multiple-file-upload}__main--PaddingTop);
-  padding-block-end: var(--#{$multiple-file-upload}__main--PaddingBottom);
-  padding-inline-start: var(--#{$multiple-file-upload}__main--PaddingLeft);
-  padding-inline-end: var(--#{$multiple-file-upload}__main--PaddingRight);
+  padding-block-start: var(--#{$multiple-file-upload}__main--PaddingBlockStart);
+  padding-block-end: var(--#{$multiple-file-upload}__main--PaddingBlockEnd);
+  padding-inline-start: var(--#{$multiple-file-upload}__main--PaddingInlineStart);
+  padding-inline-end: var(--#{$multiple-file-upload}__main--PaddingInlineEnd);
   text-align: var(--#{$multiple-file-upload}__main--TextAlign);
   border: var(--#{$multiple-file-upload}__main--BorderWidth) var(--#{$multiple-file-upload}__main--BorderStyle) var(--#{$multiple-file-upload}__main--BorderColor);
   border-radius: var(--#{$multiple-file-upload}__main--BorderRadius);
@@ -179,8 +178,8 @@
 
 .#{$multiple-file-upload}__title-text-separator {
   display: var(--#{$multiple-file-upload}__title-text-separator--Display);
-  margin-block-start: var(--#{$multiple-file-upload}__title-text-separator--MarginTop);
-  margin-block-end: var(--#{$multiple-file-upload}__title-text-separator--MarginBottom);
+  margin-block-start: var(--#{$multiple-file-upload}__title-text-separator--MarginBlockStart);
+  margin-block-end: var(--#{$multiple-file-upload}__title-text-separator--MarginBlockEnd);
   font-family: var(--#{$multiple-file-upload}__title-text-separator--FontFamily);
   font-size: var(--#{$multiple-file-upload}__title-text-separator--FontSize);
   font-weight: var(--#{$multiple-file-upload}__title-text-separator--FontWeight);
@@ -193,16 +192,16 @@
 
 .#{$multiple-file-upload}__info {
   grid-area: info;
-  margin-block-start: var(--#{$multiple-file-upload}__info--MarginTop);
+  margin-block-start: var(--#{$multiple-file-upload}__info--MarginBlockStart);
   font-size: var(--#{$multiple-file-upload}__info--FontSize);
   color: var(--#{$multiple-file-upload}__info--Color);
 }
 
 .#{$multiple-file-upload}__status {
-  padding-block-start: var(--#{$multiple-file-upload}__status--PaddingTop);
-  padding-block-end: var(--#{$multiple-file-upload}__status--PaddingBottom);
-  padding-inline-start: var(--#{$multiple-file-upload}__status--PaddingLeft);
-  padding-inline-end: var(--#{$multiple-file-upload}__status--PaddingRight);
+  padding-block-start: var(--#{$multiple-file-upload}__status--PaddingBlockStart);
+  padding-block-end: var(--#{$multiple-file-upload}__status--PaddingBlockEnd);
+  padding-inline-start: var(--#{$multiple-file-upload}__status--PaddingInlineStart);
+  padding-inline-end: var(--#{$multiple-file-upload}__status--PaddingInlineEnd);
 }
 
 .#{$multiple-file-upload}__status,
@@ -224,8 +223,8 @@
   display: grid;
   grid-template-columns: var(--#{$multiple-file-upload}__status-item--GridTemplateColumns);
   gap: var(--#{$multiple-file-upload}__status-item--Gap);
-  padding-block-start: var(--#{$multiple-file-upload}__status-item--PaddingTop);
-  padding-block-end: var(--#{$multiple-file-upload}__status-item--PaddingBottom);
+  padding-block-start: var(--#{$multiple-file-upload}__status-item--PaddingBlockStart);
+  padding-block-end: var(--#{$multiple-file-upload}__status-item--PaddingBlockEnd);
   border-block-end: var(--#{$multiple-file-upload}__status-item--BorderWidth) solid var(--#{$multiple-file-upload}__status-item--BorderColor);
 }
 

package/components/Nav/nav.css

@@ -1,5 +1,5 @@
-:where(:root),
-:where(.pf-v6-c-nav) {
+: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);
@@ -8,15 +8,15 @@
   --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: var(--pf-t--global--spacer--md);
-  --pf-v6-c-nav--PaddingInlineEnd: 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);
+  --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-v6-global--spacer--xs) * -1);
+  --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;
@@ -41,6 +41,8 @@
   --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);
@@ -81,7 +83,6 @@
 }
 
 .pf-v6-c-nav {
-  --pf-v6-c-menu--MinWidth: 100%;
   position: relative;
   row-gap: var(--pf-v6-c-nav--RowGap);
   column-gap: var(--pf-v6-c-nav--ColumnGap);
@@ -98,12 +99,29 @@
 .pf-v6-c-nav.pf-m-overflow-hidden {
   overflow: hidden;
 }
-.pf-v6-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-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-v6-c-nav][hidden] {
   display: none;
@@ -169,6 +187,7 @@
   line-height: var(--pf-v6-c-nav__link--LineHeight, inherit);
   color: var(--pf-v6-c-nav__link--Color);
   text-align: start;
+  text-decoration: none;
   background-color: var(--pf-v6-c-nav__link--BackgroundColor);
   border: none;
   border-radius: var(--pf-v6-c-nav__link--BorderRadius);
@@ -181,10 +200,15 @@
   background-color: var(--pf-v6-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-v6-c-nav__link-icon {
+  color: var(--pf-v6-c-nav__link-icon--Color);
+}
+
 .pf-v6-c-nav__toggle {
   flex: none;
   align-self: start;

package/components/Nav/nav.scss

@@ -1,5 +1,6 @@
-:where(:root),
-:where(.#{$nav}) {
+@use '../../sass-utilities' as *;
+
+@include pf-root($nav) {
   // * Nav shared values
   --#{$nav}__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$nav}__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -11,15 +12,15 @@
   // * Nav // default to row gap if no custom value is set
   --#{$nav}--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$nav}--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --#{$nav}--PaddingInlineStart: var(--pf-t--global--spacer--md);
-  --#{$nav}--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$nav}--PaddingInlineStart: 0;
+  --#{$nav}--PaddingInlineEnd: 0;
   --#{$nav}--RowGap: var(--pf-t--global--spacer--lg);
   --#{$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}--FontWeight: var(--pf-t--global--font--weight--body--default);
   --#{$nav}--LineHeight: var(--pf-t--global--font--line-height--body);
-  --#{$nav}--OutlineOffset: calc(var(--#{$pf-global}--spacer--xs) * -1);
+  --#{$nav}--OutlineOffset: calc(var(--pf-t--global--spacer--xs) * -1);
   --#{$nav}--BackgroundColor: transparent;
 
   // * Nav list
@@ -53,6 +54,10 @@
   --#{$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);
 
+  // * Nav link icon
+  --#{$nav}__link-icon--Color: var(--pf-t--global--icon--color--subtle);
+  --#{$nav}__link--m-current__link-icon--Color: var(--pf-t--global--icon--color--regular);
+
   // * Nav subnav
   --#{$nav}__subnav--RowGap: var(--pf-t--global--border--width--extra-strong);
   --#{$nav}__subnav--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -104,8 +109,6 @@
 
 // - Nav root
 .#{$nav} {
-  --#{$menu}--MinWidth: 100%;
-
   position: relative;
   row-gap: var(--#{$nav}--RowGap);
   column-gap: var(--#{$nav}--ColumnGap);
@@ -123,13 +126,35 @@
     overflow: hidden;
   }
 
-  &.pf-m-full-width {
-    width: 100%;
+  &.pf-m-inset {
+    --#{$nav}--PaddingInlineStart: var(--pf-t--global--spacer--md);
+    --#{$nav}--PaddingInlineEnd: var(--pf-t--global--spacer--md);  
   }
 
   &.pf-m-fill {
     flex-grow: 1;
   }
+
+  .#{$menu} {
+    --#{$menu}--MinWidth: 100%;
+
+    &.pf-m-drilldown,
+    &.pf-m-drilldown .#{$menu} {
+      --#{$menu}--PaddingBlockStart: 0;
+      --#{$menu}--PaddingBlockEnd: 0;
+      --#{$menu}--BackgroundColor: var(--#{$nav}--BackgroundColor);
+      --#{$menu}--BoxShadow: none;
+      --#{$menu}__list-item--hover--BackgroundColor: var(--#{$nav}__link--hover--BackgroundColor);
+
+      .#{$menu}__list {
+        row-gap: var(--#{$nav}__subnav--RowGap);
+      }
+    
+      .#{$menu}__list-item::before {
+        border-radius: var(--#{$nav}__link--BorderRadius);
+      }
+    }
+  }
 }
 
 [class^="#{$nav}"][hidden] {
@@ -208,6 +233,7 @@
   line-height: var(--#{$nav}__link--LineHeight, inherit); // default to nav line height if no custom value is set
   color: var(--#{$nav}__link--Color);
   text-align: start;
+  text-decoration: none;
   background-color: var(--#{$nav}__link--BackgroundColor);
   border: none;
   border-radius: var(--#{$nav}__link--BorderRadius);
@@ -227,11 +253,18 @@
 
   &.pf-m-current,
   &.pf-m-current:hover {
+    --#{$nav}__link-icon--Color: var(--#{$nav}__link--m-current__link-icon--Color);
+
     color: var(--#{$nav}__link--m-current--Color);
     background-color: var(--#{$nav}__link--m-current--BackgroundColor);
   }
 }
 
+// - Nav toggle caret
+.#{$nav}__link-icon {
+  color: var(--#{$nav}__link-icon--Color);
+}
+
 // - Nav toggle caret
 .#{$nav}__toggle {
   flex: none;
@@ -247,7 +280,7 @@
   display: inline-block;
   transform: rotate(var(--#{$nav}__item__toggle-icon--Rotate));
 
-  @include pf-v5-mirror-inline-on-rtl;
+  @include pf-v6-mirror-inline-on-rtl;
 
   .#{$nav}__item:where(.pf-m-flyout) & {
     --#{$nav}__item--m-expanded__toggle-icon--Rotate: 0;
@@ -295,7 +328,7 @@
     outline-offset: var(--#{$nav}--OutlineOffset);
 
     > * {
-      @include pf-v5-mirror-inline-on-rtl;
+      @include pf-v6-mirror-inline-on-rtl;
     }
   }
 }
@@ -326,7 +359,7 @@
     scroll-padding-inline-end: var(--#{$nav}--m-horizontal__list--PaddingInlineEnd);
     -webkit-overflow-scrolling: touch;
 
-    @include pf-v5-overflow-hide-scroll;
+    @include pf-v6-overflow-hide-scroll;
   }
 
   .#{$nav}__link {

package/components/NotificationDrawer/notification-drawer.css

@@ -1,30 +1,30 @@
 :root,
 .pf-v6-c-notification-drawer {
   --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --pf-v6-c-notification-drawer__header--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-notification-drawer__header--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-notification-drawer__header--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-notification-drawer__header--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-notification-drawer__header--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-notification-drawer__header--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-notification-drawer__header--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-notification-drawer__header--BackgroundColor: var(--pf-t--global--background--color--floating--default);
-  --pf-v6-c-notification-drawer__header--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-notification-drawer__header--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-notification-drawer__header-title--FontSize: var(--pf-t--global--font--size--heading--md);
-  --pf-v6-c-notification-drawer__header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
+  --pf-v6-c-notification-drawer__header-title--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-notification-drawer__header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
   --pf-v6-c-notification-drawer__header-title--FontFamily: var(--pf-t--global--font--family--heading);
-  --pf-v6-c-notification-drawer__header-status--MarginLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-notification-drawer__header-status--MarginInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-notification-drawer__header-status--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-notification-drawer__header-status--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-notification-drawer__header-status--Color: var(--pf-t--global--text--color--subtle);
-  --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-notification-drawer__body--ZIndex: var(--pf-t--global--z-index--xs);
   --pf-v6-c-notification-drawer__body--PaddingBlockStart: 0;
   --pf-v6-c-notification-drawer__body--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-notification-drawer__list--Gap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-notification-drawer__list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-notification-drawer__list--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-notification-drawer__list-item--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-notification-drawer__list-item--PaddingRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-notification-drawer__list-item--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-notification-drawer__list-item--PaddingLeft: var(--pf-t--global--spacer--md);
+  --pf-v6-c-notification-drawer__list-item--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-notification-drawer__list-item--PaddingInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-notification-drawer__list-item--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-notification-drawer__list-item--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-notification-drawer__list-item--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-notification-drawer__list-item--BorderWidth: var(--pf-t--global--border--width--box--status--default);
   --pf-v6-c-notification-drawer__list-item--BorderRadius: var(--pf-t--global--border--radius--medium);
@@ -42,32 +42,30 @@
   --pf-v6-c-notification-drawer__list-item--m-read--BorderWidth: var(--pf-t--global--border--width--box--status--read);
   --pf-v6-c-notification-drawer__list-item--m-read--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-notification-drawer__list-item--m-hoverable--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
-  --pf-v6-c-notification-drawer__list-item-header--MarginBottom: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-notification-drawer__list-item-header-icon--Color: inherit;
-  --pf-v6-c-notification-drawer__list-item-header-icon--MarginRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-notification-drawer__list-item-header-title--FontFamily: var(--pf-t--global--font--family--heading);
-  --pf-v6-c-notification-drawer__list-item-header-title--FontSize: var(--pf-t--global--font--size--heading--xs);
-  --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--heading--bold);
-  --pf-v6-c-notification-drawer__list-item-header-title--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-notification-drawer__list-item-header-title--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-notification-drawer__list-item-header-title--max-lines: 1;
-  --pf-v6-c-notification-drawer__list-item-description--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-notification-drawer__list-item-timestamp--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-notification-drawer__list-item-timestamp--FontSize: var(--pf-t--global--font--size--body--default);
-  --pf-v6-c-notification-drawer__group--BorderBottomWidth: var(--pf-t--global--border--width--divider--default);
-  --pf-v6-c-notification-drawer__group--m-expanded--group--BorderBottomColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-notification-drawer__group--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
+  --pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-notification-drawer__group--m-expanded--MinHeight: 0;
   --pf-v6-c-notification-drawer__group--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-notification-drawer__group-toggle--PaddingTop: var(--pf-t--global--spacer--md);
-  --pf-v6-c-notification-drawer__group-toggle--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-notification-drawer__group-toggle--PaddingBottom: var(--pf-t--global--spacer--md);
-  --pf-v6-c-notification-drawer__group-toggle--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-notification-drawer__group-toggle--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-notification-drawer__group-toggle--OutlineOffset: -0.25rem;
-  --pf-v6-c-notification-drawer__group-toggle-title--MarginRight: var(--pf-t--global--spacer--md);
+  --pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-notification-drawer__group-toggle-title--FontSize: var(--pf-t--global--font--size--body--lg);
   --pf-v6-c-notification-drawer__group-toggle-title--max-lines: 1;
-  --pf-v6-c-notification-drawer__group-toggle-count--MarginRight: var(--pf-t--global--spacer--md);
-  --pf-v6-c-notification-drawer__group-toggle-icon--MarginRight: var(--pf-t--global--spacer--md);
+  --pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd: var(--pf-t--global--spacer--md);
+  --pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-notification-drawer__group-toggle-icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-notification-drawer__group-toggle-icon--Transition: .2s ease-in 0s;
   --pf-v6-c-notification-drawer__group--m-expanded__group-toggle-icon--Rotate: 90deg;
@@ -86,10 +84,10 @@
   display: flex;
   flex-shrink: 0;
   align-items: baseline;
-  padding-block-start: var(--pf-v6-c-notification-drawer__header--PaddingTop);
-  padding-block-end: var(--pf-v6-c-notification-drawer__header--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-notification-drawer__header--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-notification-drawer__header--PaddingRight);
+  padding-block-start: var(--pf-v6-c-notification-drawer__header--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-notification-drawer__header--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-notification-drawer__header--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-notification-drawer__header--PaddingInlineEnd);
   background-color: var(--pf-v6-c-notification-drawer__header--BackgroundColor);
 }
 
@@ -101,7 +99,7 @@
 }
 
 .pf-v6-c-notification-drawer__header-status {
-  margin-inline-start: var(--pf-v6-c-notification-drawer__header-status--MarginLeft);
+  margin-inline-start: var(--pf-v6-c-notification-drawer__header-status--MarginInlineStart);
   font-size: var(--pf-v6-c-notification-drawer__header-status--FontSize);
   font-weight: var(--pf-v6-c-notification-drawer__header-status--FontWeight);
   color: var(--pf-v6-c-notification-drawer__header-status--Color);
@@ -132,10 +130,10 @@
   position: relative;
   display: grid;
   grid-template-columns: 1fr auto;
-  padding-block-start: var(--pf-v6-c-notification-drawer__list-item--PaddingTop);
-  padding-block-end: var(--pf-v6-c-notification-drawer__list-item--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingRight);
+  padding-block-start: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-notification-drawer__list-item--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-notification-drawer__list-item--PaddingInlineEnd);
   background-color: var(--pf-v6-c-notification-drawer__list-item--BackgroundColor);
   border: var(--pf-v6-c-notification-drawer__list-item--BorderWidth) solid var(--pf-v6-c-notification-drawer__list-item--BorderColor);
   border-radius: var(--pf-v6-c-notification-drawer__list-item--BorderRadius);
@@ -178,19 +176,16 @@
   grid-row: 1/2;
   grid-column: 1/2;
   align-items: baseline;
-  margin-block-end: var(--pf-v6-c-notification-drawer__list-item-header--MarginBottom);
+  margin-block-end: var(--pf-v6-c-notification-drawer__list-item-header--MarginBlockEnd);
 }
 
 .pf-v6-c-notification-drawer__list-item-header-icon {
-  margin-inline-end: var(--pf-v6-c-notification-drawer__list-item-header-icon--MarginRight);
+  margin-inline-end: var(--pf-v6-c-notification-drawer__list-item-header-icon--MarginInlineEnd);
   color: var(--pf-v6-c-notification-drawer__list-item-header-icon--Color);
 }
 
 .pf-v6-c-notification-drawer__list-item-header-title {
-  font-family: var(--pf-v6-c-notification-drawer__list-item-header-title--FontFamily);
-  font-size: var(--pf-v6-c-notification-drawer__list-item-header-title--FontSize);
   font-weight: var(--pf-v6-c-notification-drawer__list-item-header-title--FontWeight);
-  line-height: var(--pf-v6-c-notification-drawer__list-item-header-title--LineHeight);
   word-break: break-word;
 }
 .pf-v6-c-notification-drawer__list-item-header-title.pf-m-truncate {
@@ -203,12 +198,16 @@
 .pf-v6-c-notification-drawer__list-item-action {
   grid-row: 1/3;
   grid-column: 2/3;
+  margin-block-start: var(--pf-v6-c-notification-drawer__list-item-action--MarginBlockStart);
+}
+.pf-v6-c-notification-drawer__list-item-action.pf-m-no-offset {
+  --pf-v6-c-notification-drawer__list-item-action--MarginBlockStart: 0;
 }
 
 .pf-v6-c-notification-drawer__list-item-description {
   grid-row: 2/3;
   grid-column: 1/2;
-  margin-block-end: var(--pf-v6-c-notification-drawer__list-item-description--MarginBottom);
+  margin-block-end: var(--pf-v6-c-notification-drawer__list-item-description--MarginBlockEnd);
   word-break: break-word;
 }
 
@@ -225,7 +224,7 @@
 }
 
 .pf-v6-c-notification-drawer__group {
-  border-block-end: var(--pf-v6-c-notification-drawer__group--BorderBottomWidth) solid var(--pf-v6-c-notification-drawer__group--m-expanded--group--BorderBottomColor);
+  border-block-end: var(--pf-v6-c-notification-drawer__group--BorderBlockEndWidth) solid var(--pf-v6-c-notification-drawer__group--m-expanded--group--BorderBlockEndColor);
 }
 .pf-v6-c-notification-drawer__group.pf-m-expanded {
   min-height: var(--pf-v6-c-notification-drawer__group--m-expanded--MinHeight);
@@ -236,10 +235,10 @@
   display: flex;
   align-items: baseline;
   width: 100%;
-  padding-block-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingTop);
-  padding-block-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingRight);
+  padding-block-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-notification-drawer__group-toggle--PaddingInlineEnd);
   background-color: var(--pf-v6-c-notification-drawer__group-toggle--BackgroundColor);
   border: none;
   outline-offset: var(--pf-v6-c-notification-drawer__group-toggle--OutlineOffset);
@@ -251,7 +250,7 @@
   -webkit-line-clamp: var(--pf-v6-c-notification-drawer__group-toggle-title--max-lines);
   overflow: hidden;
   flex: 1;
-  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginRight);
+  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-title--MarginInlineEnd);
   font-size: var(--pf-v6-c-notification-drawer__group-toggle-title--FontSize);
   text-align: start;
   word-break: break-word;
@@ -259,11 +258,11 @@
 
 .pf-v6-c-notification-drawer__group-toggle-count {
   margin-inline-start: auto;
-  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginRight);
+  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-count--MarginInlineEnd);
 }
 
 .pf-v6-c-notification-drawer__group-toggle-icon {
-  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginRight);
+  margin-inline-end: var(--pf-v6-c-notification-drawer__group-toggle-icon--MarginInlineEnd);
   color: var(--pf-v6-c-notification-drawer__group-toggle-icon--Color);
   transition: var(--pf-v6-c-notification-drawer__group-toggle-icon--Transition);
 }