@patternfly/react-styles 6.0.0-alpha.20 → 6.0.0-alpha.22

package/css/components/Masthead/masthead.css

@@ -1,5 +1,4 @@
-:where(:root),
-:where(.pf-v6-c-masthead) {
+:where(:root, .pf-v6-c-masthead) {
   --pf-v6-c-masthead--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-masthead--ColumnGap: var(--pf-t--global--spacer--md);
   --pf-v6-c-masthead--BorderWidth: var(--pf-t--global--border--width--divider--default);

package/css/components/Menu/menu.css

@@ -1,66 +1,4 @@
-.pf-v6-c-menu__item, .pf-v6-c-menu__list,
-.pf-v6-c-menu__group {
-  --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-m-hidden.pf-v6-c-menu__item, .pf-m-hidden.pf-v6-c-menu__list,
-.pf-m-hidden.pf-v6-c-menu__group {
-  --pf-v6-hidden-visible--Display: var(--pf-v6-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-v6-hidden-visible--Display: var(--pf-v6-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-v6-hidden-visible--Display: var(--pf-v6-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-v6-hidden-visible--Display: var(--pf-v6-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-v6-hidden-visible--Display: var(--pf-v6-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-v6-hidden-visible--Display: var(--pf-v6-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-v6-hidden-visible--Display: var(--pf-v6-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-v6-hidden-visible--Display: var(--pf-v6-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-v6-hidden-visible--Display: var(--pf-v6-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-v6-hidden-visible--Display: var(--pf-v6-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-v6-hidden-visible--Display: var(--pf-v6-hidden-visible--visible--Display);
-  }
-}
-
-:where(:root),
-:where(.pf-v6-c-menu) {
+:where(: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;
@@ -91,8 +29,8 @@
   --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);
@@ -135,16 +73,16 @@
   --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--z-index--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-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--transition--duration);
   --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--transition--duration);
   --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--InsetBlockStart: 0;
   --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transition--duration);
   --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-t--global--transition--duration);
@@ -165,6 +103,63 @@
 .pf-v6-c-menu__list,
 .pf-v6-c-menu__group {
   --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: 576px) {
+  .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: 768px) {
+  .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: 992px) {
+  .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: 1200px) {
+  .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: 1450px) {
+  .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,
@@ -203,20 +198,23 @@
 }
 .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 +222,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 +246,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,8 +359,8 @@
 }
 
 .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 {
@@ -426,6 +424,52 @@
   border: 0;
   outline-offset: var(--pf-v6-c-menu--OutlineOffset);
   --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: 576px) {
+  .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: 768px) {
+  .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: 992px) {
+  .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: 1200px) {
+  .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: 1450px) {
+  .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;

package/css/components/MenuToggle/menu-toggle.css

@@ -1,11 +1,10 @@
-:where(:root),
-:where(.pf-v6-c-menu-toggle) {
+:where(:root, .pf-v6-c-menu-toggle) {
   --pf-v6-c-menu-toggle--ColumnGap: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-menu-toggle--PaddingTop: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-menu-toggle--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-menu-toggle--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-menu-toggle--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingTop) + var(--pf-v6-c-menu-toggle--PaddingBottom));
+  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-menu-toggle--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
   --pf-v6-c-menu-toggle--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-menu-toggle--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-menu-toggle--LineHeight: var(--pf-t--global--font--line-height--body);
@@ -31,17 +30,17 @@
   --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-menu-toggle__icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
   --pf-v6-c-menu-toggle__toggle-icon--MinHeight: calc(var(--pf-v6-c-menu__item--FontSize) * var(--pf-v6-c-menu__item--LineHeight));
-  --pf-v6-c-menu-toggle--m-button--PaddingLeft: var(--pf-t--global--spacer--md);
-  --pf-v6-c-menu-toggle--m-button--PaddingRight: var(--pf-t--global--spacer--md);
+  --pf-v6-c-menu-toggle--m-button--PaddingInlineStart: var(--pf-t--global--spacer--md);
+  --pf-v6-c-menu-toggle--m-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-menu-toggle--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v6-c-menu-toggle--m-control--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-menu-toggle--m-control--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-menu-toggle--m-control--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-menu-toggle--m-control--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu-toggle--m-control--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v6-c-menu-toggle--m-action--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-menu-toggle--m-action--PaddingRight: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-menu-toggle--m-action--PaddingInlineStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-menu-toggle--m-action--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-menu-toggle--m-action--BorderRadius: var(--pf-t--global--border--radius--pill);
-  --pf-v6-c-menu-toggle--m-primary--PaddingLeft: var(--pf-v6-c-menu-toggle--m-button--PaddingLeft);
-  --pf-v6-c-menu-toggle--m-primary--PaddingRight: var(--pf-v6-c-menu-toggle--m-button--PaddingRight);
+  --pf-v6-c-menu-toggle--m-primary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
+  --pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
   --pf-v6-c-menu-toggle--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
   --pf-v6-c-menu-toggle--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-menu-toggle--m-primary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
@@ -58,8 +57,8 @@
   --pf-v6-c-menu-toggle--m-primary__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--default);
   --pf-v6-c-menu-toggle--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
   --pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
-  --pf-v6-c-menu-toggle--m-secondary--PaddingLeft: var(--pf-v6-c-menu-toggle--m-button--PaddingLeft);
-  --pf-v6-c-menu-toggle--m-secondary--PaddingRight: var(--pf-v6-c-menu-toggle--m-button--PaddingRight);
+  --pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineStart);
+  --pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-button--PaddingInlineEnd);
   --pf-v6-c-menu-toggle--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
   --pf-v6-c-menu-toggle--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
   --pf-v6-c-menu-toggle--m-secondary--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
@@ -76,25 +75,25 @@
   --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
   --pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
   --pf-v6-c-menu-toggle__controls--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
-  --pf-v6-c-menu-toggle--m-full-height--PaddingRight: var(--pf-t--global--spacer--lg);
-  --pf-v6-c-menu-toggle--m-full-height--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-menu-toggle--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
-  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth: var(--pf-t--global--border--width--button--default);
-  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--button--default);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderRadius: var(--pf-v6-c-menu-toggle--m-button--BorderRadius);
-  --pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderLeftColor: var(--pf-t--global--icon--color--on-disabled);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
   --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
   --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--active--BackgroundColor: var(--pf-t--global--color--brand--clicked);
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
-  --pf-v6-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-t--global--color--brand--default);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-menu-toggle__button--BackgroundColor: transparent;
   --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
-  --pf-v6-c-menu-toggle__button--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-menu-toggle__button--PaddingRight: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingTop) + var(--pf-v6-c-menu-toggle--PaddingBottom));
+  --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-menu-toggle__button--MinWidth: calc(var(--pf-v6-c-menu-toggle--FontSize) * var(--pf-v6-c-menu-toggle--LineHeight) + var(--pf-v6-c-menu-toggle--PaddingBlockStart) + var(--pf-v6-c-menu-toggle--PaddingBlockEnd));
   --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-menu-toggle--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
@@ -103,10 +102,10 @@
   --pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-menu-toggle--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor: transparent;
-  --pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf: stretch;
-  --pf-v6-c-menu-toggle--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-menu-toggle--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-menu-toggle--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
   --pf-v6-c-menu-toggle--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
@@ -124,10 +123,10 @@
   justify-content: center;
   min-width: var(--pf-v6-c-menu-toggle--MinWidth);
   max-width: 100%;
-  padding-block-start: var(--pf-v6-c-menu-toggle--PaddingTop);
-  padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingRight);
+  padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
   font-size: var(--pf-v6-c-menu-toggle--FontSize);
   line-height: var(--pf-v6-c-menu-toggle--LineHeight);
   color: var(--pf-v6-c-menu-toggle--Color);
@@ -150,8 +149,8 @@
   border: var(--pf-v6-c-menu-toggle--BorderWidth) solid var(--pf-v6-c-menu-toggle--BorderColor);
 }
 .pf-v6-c-menu-toggle.pf-m-primary {
-  --pf-v6-c-menu-toggle--PaddingLeft: var(--pf-v6-c-menu-toggle--m-primary--PaddingLeft);
-  --pf-v6-c-menu-toggle--PaddingRight: var(--pf-v6-c-menu-toggle--m-primary--PaddingRight);
+  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineStart);
+  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-primary--PaddingInlineEnd);
   --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-primary--Color);
   --pf-v6-c-menu-toggle--BackgroundColor: var(--pf-v6-c-menu-toggle--m-primary--BackgroundColor);
   --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-primary--BorderRadius);
@@ -169,8 +168,8 @@
   --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-primary--expanded__toggle-icon--Color);
 }
 .pf-v6-c-menu-toggle.pf-m-secondary {
-  --pf-v6-c-menu-toggle--PaddingLeft: var(--pf-v6-c-menu-toggle--m-secondary--PaddingLeft);
-  --pf-v6-c-menu-toggle--PaddingRight: var(--pf-v6-c-menu-toggle--m-secondary--PaddingRight);
+  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineStart);
+  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-secondary--PaddingInlineEnd);
   --pf-v6-c-menu-toggle--Color: var(--pf-v6-c-menu-toggle--m-secondary--Color);
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-secondary--BorderColor);
   --pf-v6-c-menu-toggle--BorderRadius: var(--pf-v6-c-menu-toggle--m-secondary--BorderRadius);
@@ -186,9 +185,9 @@
   --pf-v6-c-menu-toggle--expanded__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-secondary--expanded__toggle-icon--Color);
 }
 .pf-v6-c-menu-toggle.pf-m-full-height {
-  --pf-v6-c-menu-toggle--PaddingRight: var(--pf-v6-c-menu-toggle--m-full-height--PaddingRight);
-  --pf-v6-c-menu-toggle--PaddingLeft: var(--pf-v6-c-menu-toggle--m-full-height--PaddingLeft);
-  --pf-v6-c-menu-toggle--BorderTopWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderTopWidth);
+  --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineEnd);
+  --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart);
+  --pf-v6-c-menu-toggle--BorderBlockStartWidth: var(--pf-v6-c-menu-toggle--m-full-height__toggle--BorderBlockStartWidth);
   align-items: center;
   height: 100%;
 }
@@ -242,8 +241,8 @@
   border: 0;
 }
 .pf-v6-c-menu-toggle.pf-m-small {
-  --pf-v6-c-menu-toggle--PaddingTop: var(--pf-v6-c-menu-toggle--m-small--PaddingTop);
-  --pf-v6-c-menu-toggle--PaddingBottom: var(--pf-v6-c-menu-toggle--m-small--PaddingBottom);
+  --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockStart);
+  --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingBlockEnd);
 }
 .pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
   background-color: transparent;
@@ -267,10 +266,10 @@
 }
 .pf-v6-c-menu-toggle.pf-m-split-button > * {
   position: relative;
-  padding-block-start: var(--pf-v6-c-menu-toggle--PaddingTop);
-  padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBottom);
-  padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingRight);
+  padding-block-start: var(--pf-v6-c-menu-toggle--PaddingBlockStart);
+  padding-block-end: var(--pf-v6-c-menu-toggle--PaddingBlockEnd);
+  padding-inline-start: var(--pf-v6-c-menu-toggle--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-menu-toggle--PaddingInlineEnd);
 }
 .pf-v6-c-menu-toggle.pf-m-split-button > :first-child {
   border-start-start-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
@@ -281,7 +280,7 @@
   border-end-end-radius: var(--pf-v6-c-menu-toggle--BorderRadius);
 }
 .pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check {
-  --pf-v6-c-menu-toggle--PaddingRight: 0;
+  --pf-v6-c-menu-toggle--PaddingInlineEnd: 0;
   --pf-v6-c-check__label--Color: currentcolor;
   --pf-v6-c-check__label--disabled--Color: currentcolor;
   align-items: center;
@@ -296,16 +295,16 @@
 }
 
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action {
-  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-v6-c-menu-toggle--BorderColor);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
 }
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action > :not(:first-child) {
-  border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderLeftWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor);
+  border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor);
 }
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action > :has(.pf-v6-c-menu-toggle__controls) {
   padding-inline-end: 0;
 }
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary {
-  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderLeftColor);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BorderInlineStartColor);
 }
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])) {
   background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor);
@@ -320,16 +319,16 @@
   --pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-primary--expanded--child--BackgroundColor);
 }
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-secondary {
-  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderInlineStartColor);
 }
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action:is(.pf-m-disabled, :disabled) {
-  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderLeftColor);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor);
 }
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action:is(.pf-m-disabled, :disabled)::before {
   content: none;
 }
 .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action > :is(.pf-m-disabled, :disabled) {
-  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderLeftColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderLeftColor);
+  --pf-v6-c-menu-toggle--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor);
   color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--Color);
   background-color: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--BackgroundColor);
 }
@@ -341,24 +340,24 @@
   padding: 0;
 }
 .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__button {
-  --pf-v6-c-menu-toggle__button--PaddingRight: 0;
+  --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
 }
 .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-menu-toggle__controls {
-  --pf-v6-c-menu-toggle__button--PaddingRight: 0;
+  --pf-v6-c-menu-toggle__button--PaddingInlineEnd: 0;
   display: flex;
   align-items: stretch;
 }
 .pf-v6-c-menu-toggle.pf-m-typeahead .pf-v6-c-text-input-group {
-  --pf-v6-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
-  --pf-v6-c-text-input-group__utilities--MarginRight: 0;
+  --pf-v6-c-text-input-group__utilities--c-button--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingInlineEnd);
+  --pf-v6-c-text-input-group__utilities--MarginInlineEnd: 0;
   flex: 1;
 }
 
 .pf-v6-c-menu-toggle__button {
   align-self: var(--pf-v6-c-menu-toggle__button--AlignSelf);
   min-width: var(--pf-v6-c-menu-toggle__button--MinWidth);
-  padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingLeft);
-  padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingRight);
+  padding-inline-start: var(--pf-v6-c-menu-toggle__button--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-menu-toggle__button--PaddingInlineEnd);
   color: inherit;
   background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
   border: 0;