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

package/components/Masthead/masthead.scss

@@ -1,41 +1,59 @@
-$pf-v5-c-masthead--breakpoint-map: build-breakpoint-map();
-$pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
+@use '../../sass-utilities' as *;
 
-:where(:root),
-:where(.#{$masthead}) {
+$pf-v6-c-masthead--breakpoint-map: build-breakpoint-map();
+$pf-v6-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "2xl");
+
+@include pf-root($masthead) {
   // * Masthead
   --#{$masthead}--RowGap: var(--pf-t--global--spacer--sm);
-  --#{$masthead}--ColumnGap: var(--pf-t--global--spacer--md);
+  --#{$masthead}--ColumnGap: var(--pf-t--global--spacer--gutter--default);
   --#{$masthead}--BorderWidth: var(--pf-t--global--border--width--divider--default);
   --#{$masthead}--PaddingBlock: var(--pf-t--global--spacer--md);
   --#{$masthead}--PaddingInline: var(--pf-t--global--spacer--lg);
   --#{$masthead}--BorderColor: var(--pf-t--global--border--color--default);
   --#{$masthead}--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
 
+  // * Masthead main container holds the toggle and brand
+  --#{$masthead}__main--ColumnGap: var(--pf-t--global--spacer--md);
+  --#{$masthead}__main--MarginInlineEnd: var(--pf-t--global--spacer--inset--page-chrome);
+
   // * Masthead brand
-  --#{$masthead}__brand--MarginInlineEnd: var(--pf-t--global--spacer--md);
-  --#{$masthead}__brand--MaxHeight: #{pf-size-prem(38px)};
+  --#{$masthead}__logo--MaxHeight: #{pf-size-prem(38px)};
+  --#{$masthead}__logo--Width: #{pf-size-prem(189px)}; // width of sidebar - toggle - inline padding - gutter = 189
 
   // * Masthead toggle
   --#{$masthead}__toggle--Size: var(--pf-t--global--icon--size--xl);
 
+  // * Masthead content
+  --#{$masthead}__content--ColumnGap: var(--pf-t--global--spacer--md);
+
   // * Masthead stack
+  --#{$masthead}--m-display-stack--ColumnGap: var(--pf-t--global--spacer--gutter--default);
   --#{$masthead}--m-display-stack--GridTemplateColumns: max-content 1fr;
-  --#{$masthead}--m-display-stack__main--GridColumn: -1 / 1;
-  --#{$masthead}--m-display-stack__main--Order: -1;
-  --#{$masthead}--m-display-stack__main--PaddingBlockEnd: var(--#{$masthead}--RowGap);
-  --#{$masthead}--m-display-stack__main--BorderBlockEnd: var(--#{$masthead}--BorderWidth) solid var(--#{$masthead}--BorderColor);
-  --#{$masthead}--m-display-stack__content--GridColumn: 2;
+  --#{$masthead}--m-display-stack__brand--GridColumn: -1 / 1;
+  --#{$masthead}--m-display-stack__brand--Order: -1;
+  --#{$masthead}--m-display-stack__brand--PaddingBlockEnd: var(--#{$masthead}--RowGap);
+  --#{$masthead}--m-display-stack__brand--BorderBlockEnd: var(--#{$masthead}--BorderWidth) solid var(--#{$masthead}--BorderColor);
+  --#{$masthead}--m-display-stack__content--GridColumn: 1;
   --#{$masthead}--m-display-stack__content--Order: 1;
+  --#{$masthead}--m-display-stack__main--toggle--content--GridColumn: 2;
+  --#{$masthead}--m-display-stack__main--Display: contents;
+  --#{$masthead}--m-display-stack__main--ColumnGap: unset; // no column gap needed until it's flex display
 
   // * Masthead inline
-  --#{$masthead}--m-display-inline--GridTemplateColumns: max-content max-content 1fr;
-  --#{$masthead}--m-display-inline__main--GridColumn: 2;
-  --#{$masthead}--m-display-inline__main--Order: 0;
-  --#{$masthead}--m-display-inline__main--PaddingBlockEnd: 0;
-  --#{$masthead}--m-display-inline__main--BorderBlockEnd: 0;
-  --#{$masthead}--m-display-inline__content--GridColumn: 3;
+  --#{$masthead}--m-display-inline--ColumnGap: 0;
+  --#{$masthead}--m-display-inline--GridTemplateColumns: min-content 1fr;
+  --#{$masthead}--m-display-inline--breakpoint--xl--GridTemplateColumns: subgrid;
+  --#{$masthead}--m-display-inline__brand--GridColumn: initial; 
+  --#{$masthead}--m-display-inline__brand--Order: initial;
+  --#{$masthead}--m-display-inline__brand--PaddingBlockEnd: 0;
+  --#{$masthead}--m-display-inline__brand--BorderBlockEnd: 0;
+  --#{$masthead}--m-display-inline__main--GridColumn: 1; 
+  --#{$masthead}--m-display-inline__content--GridColumn: 2;
   --#{$masthead}--m-display-inline__content--Order: 0;
+  --#{$masthead}--m-display-inline__main--toggle--content--GridColumn: 2;
+  --#{$masthead}--m-display-inline__main--Display: flex;
+  --#{$masthead}--m-display-inline__main--ColumnGap: var(--pf-t--global--spacer--md);
 
   // * Masthead toolbar
   --#{$masthead}__expandable-content--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
@@ -44,47 +62,55 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   // * Masthead toolbar
   --#{$masthead}--c-toolbar--Width: 100%;
   --#{$masthead}--c-toolbar--PaddingBlock: 0;
-  --#{$masthead}--c-toolbar--PaddingInline: 0;
 }
 
 // * Masthead display stack
-@mixin pf-v5-c-masthead--m-display-stack {
+@mixin pf-v6-c-masthead--m-display-stack {
+  --#{$masthead}--ColumnGap: var(--#{$masthead}--m-display-stack--ColumnGap);
   --#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-stack--GridTemplateColumns);
-  --#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-stack__main--GridColumn);
-  --#{$masthead}__main--Order: var(--#{$masthead}--m-display-stack__main--Order);
-  --#{$masthead}__main--PaddingBlockEnd: var(--#{$masthead}--m-display-stack__main--PaddingBlockEnd);
-  --#{$masthead}__main--BorderBlockEnd: var(--#{$masthead}--m-display-stack__main--BorderBlockEnd);
+  --#{$masthead}__brand--GridColumn: var(--#{$masthead}--m-display-stack__brand--GridColumn);
+  --#{$masthead}__brand--Order: var(--#{$masthead}--m-display-stack__brand--Order);
+  --#{$masthead}__brand--PaddingBlockEnd: var(--#{$masthead}--m-display-stack__brand--PaddingBlockEnd);
+  --#{$masthead}__brand--BorderBlockEnd: var(--#{$masthead}--m-display-stack__brand--BorderBlockEnd);
+  --#{$masthead}__main--GridColumn: unset;
   --#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-stack__content--GridColumn);
   --#{$masthead}__content--Order: var(--#{$masthead}--m-display-stack__content--Order);
+  --#{$masthead}__main--toggle--content--GridColumn: var(--#{$masthead}--m-display-stack__main--toggle--content--GridColumn);
+  --#{$masthead}__main--Display: var(--#{$masthead}--m-display-stack__main--Display);
+  --#{$masthead}__main--ColumnGap: var(--#{$masthead}--m-display-stack__main--ColumnGap);
 }
 
 // * Masthead display inline
-@mixin pf-v5-c-masthead--m-display-inline {
+@mixin pf-v6-c-masthead--m-display-inline {
+  --#{$masthead}--ColumnGap: var(--#{$masthead}--m-display-inline--ColumnGap);
   --#{$masthead}--GridTemplateColumns: var(--#{$masthead}--m-display-inline--GridTemplateColumns);
+  --#{$masthead}__brand--GridColumn: var(--#{$masthead}--m-display-inline__brand--GridColumn);
+  --#{$masthead}__brand--Order: var(--#{$masthead}--m-display-inline__brand--Order);
+  --#{$masthead}__brand--PaddingBlockEnd: var(--#{$masthead}--m-display-inline__brand--PaddingBlockEnd);
+  --#{$masthead}__brand--BorderBlockEnd: var(--#{$masthead}--m-display-inline__brand--BorderBlockEnd);
   --#{$masthead}__main--GridColumn: var(--#{$masthead}--m-display-inline__main--GridColumn);
-  --#{$masthead}__main--Order: var(--#{$masthead}--m-display-inline__main--Order);
-  --#{$masthead}__main--PaddingBlockEnd: var(--#{$masthead}--m-display-inline__main--PaddingBlockEnd);
-  --#{$masthead}__main--BorderBlockEnd: var(--#{$masthead}--m-display-inline__main--BorderBlockEnd);
   --#{$masthead}__content--GridColumn: var(--#{$masthead}--m-display-inline__content--GridColumn);
   --#{$masthead}__content--Order: var(--#{$masthead}--m-display-inline__content--Order);
+  --#{$masthead}__main--toggle--content--GridColumn: var(--#{$masthead}--m-display-inline__main--toggle--content--GridColumn);
+  --#{$masthead}__main--Display: var(--#{$masthead}--m-display-inline__main--Display); 
+  --#{$masthead}__main--ColumnGap: var(--#{$masthead}--m-display-inline__main--ColumnGap);
 }
 
 // - Masthead
 .#{$masthead} {
   .#{$toolbar} {
     --#{$toolbar}--Width: var(--#{$masthead}--c-toolbar--Width);
-    --#{$toolbar}__content--PaddingBlock: var(--#{$masthead}--c-toolbar--PaddingBlock);
-    --#{$toolbar}__content--PaddingInline: var(--#{$masthead}--c-toolbar--PaddingInline);
+    --#{$toolbar}--PaddingBlockEnd: 0;
     --#{$toolbar}__content--MinWidth: 0;
   }
 
   // Set layout to stack by default
-  @include pf-v5-c-masthead--m-display-stack;
+  @include pf-v6-c-masthead--m-display-stack;
 
   // Set layout to inline at medium breakpoint
   :where(:not(.pf-m-resize-observer)) & {
-    @media screen and (min-width: $pf-v5-global--breakpoint--md) {
-      @include pf-v5-c-masthead--m-display-inline;
+    @media screen and (min-width: $pf-v6-global--breakpoint--md) {
+      @include pf-v6-c-masthead--m-display-inline;
     }
   }
 
@@ -117,16 +143,16 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
 
   // - Masthead display stack
   &.pf-m-display-stack {
-    @include pf-v5-c-masthead--m-display-stack;
+    @include pf-v6-c-masthead--m-display-stack;
   }
 
   // - Masthead display inline
   &.pf-m-display-inline {
-    @include pf-v5-c-masthead--m-display-inline;
+    @include pf-v6-c-masthead--m-display-inline;
   }
 
   // - Masthead insets
-  @each $inset, $inset-value in $pf-v5-c-masthead--inset-map {
+  @each $inset, $inset-value in $pf-v6-c-masthead--inset-map {
     &.pf-m-inset-#{$inset} {
       padding-inline-start: #{$inset-value};
       padding-inline-end: #{$inset-value};
@@ -134,53 +160,61 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
   }
 }
 
+.#{$masthead}__main {
+  display: var(--#{$masthead}__main--Display);
+  grid-column: var(--#{$masthead}__main--GridColumn);
+  column-gap: var(--#{$masthead}__main--ColumnGap);
+  align-items: center;
+  margin-inline-end: var(--#{$masthead}__main--MarginInlineEnd);
+
+  &:has(.#{$masthead}__toggle) ~ .#{$masthead}__content {
+    --#{$masthead}__content--GridColumn: var(--#{$masthead}__main--toggle--content--GridColumn);
+  }
+}
+
 // - Masthead main masthead content masthead logo
 .#{$masthead},
-.#{$masthead}__main {
+.#{$masthead}__brand {
   position: relative;
 }
 
-.#{$masthead}__main,
-.#{$masthead}__content,
-.#{$masthead}__logo,
+// - Masthead brand
 .#{$masthead}__brand {
   display: flex;
+  flex-shrink: 0;
+  grid-column: var(--#{$masthead}__brand--GridColumn, revert);
+  row-gap: var(--#{$masthead}__brand--RowGap, var(--#{$masthead}--RowGap));
   align-self: stretch;
-}
-
-// - Masthead main masthead brand masthead content
-.#{$masthead}__main,
-.#{$masthead}__brand,
-.#{$masthead}__content {
+  order: var(--#{$masthead}__brand--Order, revert);
   min-width: #{pf-size-prem(4ch)}; // allow flex containers to shrink to fit possible overflow
-}
-
-// - Masthead Main
-.#{$masthead}__main {
-  grid-column: var(--#{$masthead}__main--GridColumn);
-  row-gap: var(--#{$masthead}__main--RowGap, var(--#{$masthead}--RowGap));
-  align-items: var(--#{$masthead}__main--AlignItems, var(--#{$masthead}--AlignItems));
-  order: var(--#{$masthead}__main--Order);
-  padding-block-end: var(--#{$masthead}__main--PaddingBlockEnd);
-  border-block-end: var(--#{$masthead}__main--BorderBlockEnd);
+  padding-block-end: var(--#{$masthead}__brand--PaddingBlockEnd);
+  border-block-end: var(--#{$masthead}__brand--BorderBlockEnd);
 }
 
 // - Masthead content
 .#{$masthead}__content {
+  display: flex;
   flex-wrap: wrap;
   grid-column: var(--#{$masthead}__content--GridColumn);
   grid-column-end: -1; // force content to right edge or full available width
   row-gap: var(--#{$masthead}__content-RowGap, var(--#{$masthead}--RowGap));
-  column-gap: var(--#{$masthead}__content-ColumnGap, var(--#{$masthead}--ColumnGap));
-  align-items: var(--#{$masthead}__content--AlignItems, var(--#{$masthead}--AlignItems));
+  column-gap: var(--#{$masthead}__content--ColumnGap, var(--#{$masthead}--ColumnGap));
+  align-self: stretch;
   order: var(--#{$masthead}__content--Order);
+  min-width: #{pf-size-prem(4ch)}; // allow flex containers to shrink to fit possible overflow
 }
 
-// - Masthead brand
-.#{$masthead}__brand {
-  align-items: var(--#{$masthead}__brand--AlignItems, var(--#{$masthead}--AlignItems));
-  max-height: var(--#{$masthead}__brand--MaxHeight);
-  margin-inline-end: var(--#{$masthead}__brand--MarginInlineEnd);
+// - Masthead logo
+.#{$masthead}__logo {
+  position: relative;
+  width: var(--#{$masthead}__logo--Width);
+  max-height: var(--#{$masthead}__logo--MaxHeight);
+
+  > * {
+    max-width: 100%;
+    max-height: 100%;
+    vertical-align: middle;
+ }
 }
 
 // - Masthead toggle
@@ -198,20 +232,20 @@ $pf-v5-c-masthead--inset-map: build-spacer-map("none", "sm", "md", "lg", "xl", "
 // TODO: make this an opt in/out
 // stylelint-disable no-duplicate-selectors
 .#{$masthead} {
-  @each $breakpoint, $breakpoint-value in $pf-v5-c-masthead--breakpoint-map {
+  @each $breakpoint, $breakpoint-value in $pf-v6-c-masthead--breakpoint-map {
     $breakpoint-name: if($breakpoint != "base", -on-#{$breakpoint}, "");
 
-    @include pf-v5-apply-breakpoint($breakpoint) {
+    @include pf-v6-apply-breakpoint($breakpoint) {
       &.pf-m-display-stack#{$breakpoint-name} {
-        @include pf-v5-c-masthead--m-display-stack;
+        @include pf-v6-c-masthead--m-display-stack;
       }
 
       &.pf-m-display-inline#{$breakpoint-name} {
-        @include pf-v5-c-masthead--m-display-inline;
+        @include pf-v6-c-masthead--m-display-inline;
       }
     }
 
-    @each $inset, $inset-value in $pf-v5-c-masthead--inset-map {
+    @each $inset, $inset-value in $pf-v6-c-masthead--inset-map {
       &.pf-m-inset-#{$inset} {
         padding-inline-start: #{$inset-value};
         padding-inline-end: #{$inset-value};

package/components/Menu/menu.css

@@ -1,66 +1,5 @@
-.pf-v6-c-menu__item, .pf-v6-c-menu__list,
-.pf-v6-c-menu__group {
-  --pf-v5-hidden-visible--hidden--Display: none;
-  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
-  display: var(--pf-v5-hidden-visible--Display);
-}
-.pf-m-hidden.pf-v6-c-menu__item, .pf-m-hidden.pf-v6-c-menu__list,
-.pf-m-hidden.pf-v6-c-menu__group {
-  --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
-}
-@media screen and (min-width: 576px) {
-  .pf-m-hidden-on-sm.pf-v6-c-menu__item, .pf-m-hidden-on-sm.pf-v6-c-menu__list,
-  .pf-m-hidden-on-sm.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
-  }
-  .pf-m-visible-on-sm.pf-v6-c-menu__item, .pf-m-visible-on-sm.pf-v6-c-menu__list,
-  .pf-m-visible-on-sm.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
-  }
-}
-@media screen and (min-width: 768px) {
-  .pf-m-hidden-on-md.pf-v6-c-menu__item, .pf-m-hidden-on-md.pf-v6-c-menu__list,
-  .pf-m-hidden-on-md.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
-  }
-  .pf-m-visible-on-md.pf-v6-c-menu__item, .pf-m-visible-on-md.pf-v6-c-menu__list,
-  .pf-m-visible-on-md.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
-  }
-}
-@media screen and (min-width: 992px) {
-  .pf-m-hidden-on-lg.pf-v6-c-menu__item, .pf-m-hidden-on-lg.pf-v6-c-menu__list,
-  .pf-m-hidden-on-lg.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
-  }
-  .pf-m-visible-on-lg.pf-v6-c-menu__item, .pf-m-visible-on-lg.pf-v6-c-menu__list,
-  .pf-m-visible-on-lg.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
-  }
-}
-@media screen and (min-width: 1200px) {
-  .pf-m-hidden-on-xl.pf-v6-c-menu__item, .pf-m-hidden-on-xl.pf-v6-c-menu__list,
-  .pf-m-hidden-on-xl.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
-  }
-  .pf-m-visible-on-xl.pf-v6-c-menu__item, .pf-m-visible-on-xl.pf-v6-c-menu__list,
-  .pf-m-visible-on-xl.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
-  }
-}
-@media screen and (min-width: 1450px) {
-  .pf-m-hidden-on-2xl.pf-v6-c-menu__item, .pf-m-hidden-on-2xl.pf-v6-c-menu__list,
-  .pf-m-hidden-on-2xl.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--hidden--Display);
-  }
-  .pf-m-visible-on-2xl.pf-v6-c-menu__item, .pf-m-visible-on-2xl.pf-v6-c-menu__list,
-  .pf-m-visible-on-2xl.pf-v6-c-menu__group {
-    --pf-v5-hidden-visible--Display: var(--pf-v5-hidden-visible--visible--Display);
-  }
-}
-
-:where(:root),
-:where(.pf-v6-c-menu) {
+:root,
+.pf-v6-c-menu {
   --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu--Width: auto;
   --pf-v6-c-menu--MinWidth: auto;
@@ -71,9 +10,11 @@
   --pf-v6-c-menu--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-menu--OutlineOffset: calc(var(--pf-t--global--border--width--control--default) * -3);
-  --pf-v6-c-menu--ZIndex: var(--pf-t--global--Zindex--sm);
+  --pf-v6-c-menu--ZIndex: var(--pf-t--global--z-index--sm);
   --pf-v6-c-menu--button--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-menu--icon--disabled--Color: var(--pf-t--global--icon--color--disabled);
+  --pf-v6-c-menu--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-menu--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-menu--m-plain--BoxShadow: none;
   --pf-v6-c-menu__content--RowGap: var(--pf-v6-c-menu--RowGap);
   --pf-v6-c-menu__content--Height: auto;
@@ -87,19 +28,22 @@
   --pf-v6-c-menu--m-scrollable__footer--BoxShadow: var(--pf-t--global--box-shadow--md--top);
   --pf-v6-c-menu__list-item--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu__list-item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
+  --pf-v6-c-menu__list-item--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-menu__list-item--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-menu__list-item--TransitionProperty: background-color;
   --pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-menu__list-item--m-danger--Color: var(--pf-t--global--text--color--status--danger--default);
   --pf-v6-c-menu__list-item--m-load__item--Color: var(--pf-t--global--text--color--link--default);
   --pf-v6-c-menu__list-item--has--menu-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-menu__list--divider--MarginTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-menu__list--divider--MarginBottom: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-menu__list--divider--MarginBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-menu__list--divider--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu__item--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu__item--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu__item--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-menu__item--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-menu__item--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-menu__item--LineHeight: var(--pf-t--global--font--line-height--body);
-  --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body);
+  --pf-v6-c-menu__item--FontWeight: var(--pf-t--global--font--weight--body--default);
   --pf-v6-c-menu__item--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu__item--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-menu__item--m-disabled--Color: var(--pf-t--global--text--color--disabled);
@@ -134,22 +78,22 @@
   --pf-v6-c-menu--m-flyout__menu--top-offset: 0px;
   --pf-v6-c-menu--m-flyout__menu--left-offset: 0px;
   --pf-v6-c-menu--m-flyout__menu--m-left--right-offset: 0px;
-  --pf-v6-c-menu--m-flyout__Zindex: var(--pf-t--global--Zindex--sm);
-  --pf-v6-c-menu--m-flyout__menu--Top: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1 + var(--pf-v6-c-menu--m-flyout__menu--top-offset));
-  --pf-v6-c-menu--m-flyout__menu--Right: auto;
-  --pf-v6-c-menu--m-flyout__menu--Bottom: auto;
-  --pf-v6-c-menu--m-flyout__menu--Left: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--left-offset));
-  --pf-v6-c-menu--m-flyout__menu--m-top--Bottom: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1);
-  --pf-v6-c-menu--m-flyout__menu--m-left--Right: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
-  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-v6-global--TransitionDuration);
-  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-v6-global--TransitionDuration);
+  --pf-v6-c-menu--m-flyout__Zindex: var(--pf-t--global--z-index--sm);
+  --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1 + var(--pf-v6-c-menu--m-flyout__menu--top-offset));
+  --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: auto;
+  --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: auto;
+  --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--left-offset));
+  --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1);
+  --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
+  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
+  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
-  --pf-v6-c-menu--m-drilldown--c-menu--Top: 0;
-  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-v6-global--TransitionDuration);
+  --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
+  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
-  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-v6-global--TransitionDuration);
+  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
-  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--Zindex--xs);
+  --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
 }
 
 .pf-v6-c-menu__content,
@@ -164,7 +108,64 @@
 
 .pf-v6-c-menu__list,
 .pf-v6-c-menu__group {
-  --pf-v5-hidden-visible--visible--Display: grid;
+  --pf-v6-hidden-visible--visible--Display: grid;
+  --pf-v6-hidden-visible--hidden--Display: none;
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  display: var(--pf-v6-hidden-visible--Display);
+}
+.pf-v6-c-menu__list.pf-m-hidden,
+.pf-v6-c-menu__group.pf-m-hidden {
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+}
+@media screen and (min-width: 36rem) {
+  .pf-v6-c-menu__list.pf-m-hidden-on-sm,
+  .pf-v6-c-menu__group.pf-m-hidden-on-sm {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-menu__list.pf-m-visible-on-sm,
+  .pf-v6-c-menu__group.pf-m-visible-on-sm {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pf-v6-c-menu__list.pf-m-hidden-on-md,
+  .pf-v6-c-menu__group.pf-m-hidden-on-md {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-menu__list.pf-m-visible-on-md,
+  .pf-v6-c-menu__group.pf-m-visible-on-md {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-width: 62rem) {
+  .pf-v6-c-menu__list.pf-m-hidden-on-lg,
+  .pf-v6-c-menu__group.pf-m-hidden-on-lg {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-menu__list.pf-m-visible-on-lg,
+  .pf-v6-c-menu__group.pf-m-visible-on-lg {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-width: 75rem) {
+  .pf-v6-c-menu__list.pf-m-hidden-on-xl,
+  .pf-v6-c-menu__group.pf-m-hidden-on-xl {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-menu__list.pf-m-visible-on-xl,
+  .pf-v6-c-menu__group.pf-m-visible-on-xl {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-width: 90.625rem) {
+  .pf-v6-c-menu__list.pf-m-hidden-on-2xl,
+  .pf-v6-c-menu__group.pf-m-hidden-on-2xl {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-menu__list.pf-m-visible-on-2xl,
+  .pf-v6-c-menu__group.pf-m-visible-on-2xl {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
 }
 
 .pf-v6-c-menu__list,
@@ -200,23 +201,28 @@
   background-color: var(--pf-v6-c-menu--BackgroundColor);
   border-radius: var(--pf-v6-c-menu--BorderRadius);
   box-shadow: var(--pf-v6-c-menu--BoxShadow);
+  transition-timing-function: var(--pf-v6-c-menu--TransitionTimingFunction) !important;
+  transition-duration: var(--pf-v6-c-menu--TransitionDuration) !important;
 }
 .pf-v6-c-menu .pf-v6-c-menu {
   min-width: 100%;
-  border-radius: 0;
 }
 .pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu .pf-v6-c-menu__content {
   overflow: visible;
 }
+.pf-v6-c-menu .pf-v6-c-menu__content .pf-v6-c-menu {
+  min-width: 100%;
+  border-radius: 0;
+}
 .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu, .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu__content {
   overflow: visible;
 }
 .pf-v6-c-menu .pf-v6-c-menu.pf-m-flyout, .pf-v6-c-menu.pf-m-flyout .pf-v6-c-menu {
   position: absolute;
-  inset-block-start: var(--pf-v6-c-menu--m-flyout__menu--Top);
-  inset-block-end: var(--pf-v6-c-menu--m-flyout__menu--Bottom);
-  inset-inline-start: var(--pf-v6-c-menu--m-flyout__menu--Left);
-  inset-inline-end: var(--pf-v6-c-menu--m-flyout__menu--Right);
+  inset-block-start: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockStart);
+  inset-block-end: var(--pf-v6-c-menu--m-flyout__menu--InsetBlockEnd);
+  inset-inline-start: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineStart);
+  inset-inline-end: var(--pf-v6-c-menu--m-flyout__menu--InsetInlineEnd);
   z-index: var(--pf-v6-c-menu--m-flyout__Zindex);
   border-radius: var(--pf-v6-c-menu--BorderRadius);
 }
@@ -224,12 +230,12 @@
   overflow-y: visible;
 }
 .pf-v6-c-menu.pf-m-top {
-  --pf-v6-c-menu--m-flyout__menu--Top: auto;
-  --pf-v6-c-menu--m-flyout__menu--Bottom: var(--pf-v6-c-menu--m-flyout__menu--m-top--Bottom);
+  --pf-v6-c-menu--m-flyout__menu--InsetBlockStart: auto;
+  --pf-v6-c-menu--m-flyout__menu--InsetBlockEnd: var(--pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd);
 }
 .pf-v6-c-menu.pf-m-left {
-  --pf-v6-c-menu--m-flyout__menu--Right: var(--pf-v6-c-menu--m-flyout__menu--m-left--Right);
-  --pf-v6-c-menu--m-flyout__menu--Left: auto;
+  --pf-v6-c-menu--m-flyout__menu--InsetInlineEnd: var(--pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd);
+  --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: auto;
 }
 .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content {
   overflow: hidden;
@@ -248,7 +254,7 @@
 
 .pf-v6-c-menu.pf-m-drilldown > .pf-v6-c-menu__content .pf-v6-c-menu {
   position: absolute;
-  inset-block-start: var(--pf-v6-c-menu--m-drilldown--c-menu--Top);
+  inset-block-start: var(--pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart);
   inset-inline-start: 100%;
   width: 100%;
   box-shadow: none;
@@ -361,13 +367,16 @@
 }
 
 .pf-v6-c-menu__list :where(.pf-v6-c-divider:is(li)) {
-  margin-block-start: var(--pf-v6-c-menu__list--divider--MarginTop);
-  margin-block-end: var(--pf-v6-c-menu__list--divider--MarginBottom);
+  margin-block-start: var(--pf-v6-c-menu__list--divider--MarginBlockStart);
+  margin-block-end: var(--pf-v6-c-menu__list--divider--MarginBlockEnd);
 }
 
 .pf-v6-c-menu__list-item {
   align-items: baseline;
   min-width: 0;
+  transition-timing-function: var(--pf-v6-c-menu__list-item--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-menu__list-item--TransitionDuration);
+  transition-property: var(--pf-v6-c-menu__list-item--TransitionProperty);
 }
 .pf-v6-c-menu__list-item > * {
   position: relative;
@@ -377,6 +386,7 @@
   inset: 0;
   content: "";
   background-color: var(--pf-v6-c-menu__list-item--BackgroundColor);
+  transition: inherit;
 }
 .pf-v6-c-menu__list-item.pf-m-load {
   --pf-v6-c-menu__item--Color: var(--pf-v6-c-menu__list-item--m-load__item--Color);
@@ -425,7 +435,53 @@
   background-color: var(--pf-v6-c-menu__item--BackgroundColor);
   border: 0;
   outline-offset: var(--pf-v6-c-menu--OutlineOffset);
-  --pf-v5-hidden-visible--visible--Display: flex;
+  --pf-v6-hidden-visible--visible--Display: flex;
+  --pf-v6-hidden-visible--hidden--Display: none;
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  display: var(--pf-v6-hidden-visible--Display);
+}
+.pf-v6-c-menu__item.pf-m-hidden {
+  --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+}
+@media screen and (min-width: 36rem) {
+  .pf-v6-c-menu__item.pf-m-hidden-on-sm {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-menu__item.pf-m-visible-on-sm {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-width: 48rem) {
+  .pf-v6-c-menu__item.pf-m-hidden-on-md {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-menu__item.pf-m-visible-on-md {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-width: 62rem) {
+  .pf-v6-c-menu__item.pf-m-hidden-on-lg {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-menu__item.pf-m-visible-on-lg {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-width: 75rem) {
+  .pf-v6-c-menu__item.pf-m-hidden-on-xl {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-menu__item.pf-m-visible-on-xl {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
+}
+@media screen and (min-width: 90.625rem) {
+  .pf-v6-c-menu__item.pf-m-hidden-on-2xl {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--hidden--Display);
+  }
+  .pf-v6-c-menu__item.pf-m-visible-on-2xl {
+    --pf-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
+  }
 }
 :where(label).pf-v6-c-menu__item {
   cursor: pointer;
@@ -476,7 +532,7 @@
 }
 
 .pf-v6-c-menu__item-check .pf-v6-c-check {
-  --pf-v5-c-check__input--TranslateY: none;
+  --pf-v6-c-check__input--TranslateY: none;
 }
 
 .pf-v6-c-menu__item-toggle-icon {