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

package/components/MenuToggle/menu-toggle.scss

@@ -1,4 +1,4 @@
-// @debug $menu-toggle; // check your variable names located in src/patternfly/sass-utilities/component-namespaces.scss
+@use '../../sass-utilities' as *;
 
 // TODO: standardize this layout
 // TODO: add .#{$menu-toggle}__main to house extra elements, like .#{$menu-toggle}__icon, .#{$menu-toggle}__text, .#{$menu-toggle}__count, .#{$menu-toggle}__controls
@@ -8,83 +8,64 @@
 // TODO: update text-input-button to use gap
 // TODO: label all variables group - // * Menu toggle (vars) // - Menu toggle (selectors)
 
-:where(:root),
-:where(.#{$menu-toggle}) {
+@include pf-root($menu-toggle) {
   --#{$menu-toggle}--ColumnGap: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--PaddingTop: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--PaddingBottom: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingTop) + var(--#{$menu-toggle}--PaddingBottom));
+  --#{$menu-toggle}--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
+  --#{$menu-toggle}--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
+  --#{$menu-toggle}--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
+  --#{$menu-toggle}--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
+  --#{$menu-toggle}--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingBlockStart) + var(--#{$menu-toggle}--PaddingBlockEnd));
   --#{$menu-toggle}--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$menu-toggle}--Color: var(--pf-t--global--text--color--regular);
   --#{$menu-toggle}--LineHeight: var(--pf-t--global--font--line-height--body);
   --#{$menu-toggle}--BackgroundColor: var(--pf-t--global--background--color--control--default);
   --#{$menu-toggle}--BorderRadius: var(--pf-t--global--border--radius--small);
   --#{$menu-toggle}--BorderColor: var(--pf-t--global--border--color--default);
-  --#{$menu-toggle}--BorderWidth: var(--pf-t--global--border--width--button--default);
-  --#{$menu-toggle}--border--ZIndex: var(--pf-t--global--Zindex--xs); // add z-index for toggle border to render above other borders
+  --#{$menu-toggle}--BorderWidth: var(--pf-t--global--border--width--action--default);
+  --#{$menu-toggle}--border--ZIndex: var(--pf-t--global--z-index--xs); // add z-index for toggle border to render above other borders
+  --#{$menu-toggle}--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$menu-toggle}--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+  --#{$menu-toggle}--TransitionProperty: color, background-color, border-width, border-color;
 
   // * Menu toggle hover
   --#{$menu-toggle}--hover--Color: var(--pf-t--global--text--color--regular);
   --#{$menu-toggle}--hover--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --#{$menu-toggle}--hover--BorderWidth: var(--pf-t--global--border--width--button--default);
+  --#{$menu-toggle}--hover--BorderWidth: var(--pf-t--global--border--width--action--default);
   --#{$menu-toggle}--hover--BorderColor: var(--pf-t--global--border--color--hover);
   --#{$menu-toggle}--hover__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
 
-  // * Menu toggle active
-  --#{$menu-toggle}--active--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --#{$menu-toggle}--active--BorderWidth: var(--pf-t--global--border--width--button--clicked);
-  --#{$menu-toggle}--active--BorderColor: var(--pf-t--global--border--color--clicked);
-
   // * Menu toggle expanded
   --#{$menu-toggle}--expanded--Color: var(--pf-t--global--text--color--regular);
   --#{$menu-toggle}--expanded--BackgroundColor: var(--pf-t--global--background--color--control--default);
-  --#{$menu-toggle}--expanded--BorderWidth: var(--pf-t--global--border--width--button--clicked);
+  --#{$menu-toggle}--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
   --#{$menu-toggle}--expanded--BorderColor: var(--pf-t--global--border--color--clicked);
   --#{$menu-toggle}--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
 
   // * Menu toggle disabled
   --#{$menu-toggle}--disabled--Color: var(--pf-t--global--text--color--on-disabled);
+  --#{$menu-toggle}--disabled__icon--Color: var(--pf-t--global--icon--color--on-disabled);
+  --#{$menu-toggle}--disabled__toggle-icon--Color: var(--pf-t--global--icon--color--on-disabled);
+  --#{$menu-toggle}--disabled__status-icon--Color: var(--pf-t--global--icon--color--on-disabled);
   --#{$menu-toggle}--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
 
   // * Menu toggle icon
   --#{$menu-toggle}__icon--MinHeight: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
+  --#{$menu-toggle}__icon--Color: var(--pf-t--global--icon--color--regular);
 
   // * Menu toggle toggle icon
   --#{$menu-toggle}__toggle-icon--MinHeight: calc(var(--#{$menu}__item--FontSize) * var(--#{$menu}__item--LineHeight));
-
-  // TODO: add pf-m-button modifier here
-  // * Menu toggle button
-  --#{$menu-toggle}--m-button--PaddingLeft: var(--pf-t--global--spacer--md);
-  --#{$menu-toggle}--m-button--PaddingRight: var(--pf-t--global--spacer--md);
-  --#{$menu-toggle}--m-button--BorderRadius: var(--pf-t--global--border--radius--pill);
-
-  // TODO: add pf-m-button modifier here
-  // * Menu toggle control
-  --#{$menu-toggle}--m-control--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--m-control--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}--m-control--BorderRadius: var(--pf-t--global--border--radius--pill);
-
-  // TODO: add pf-m-button modifier here
-  // * Menu toggle action
-  --#{$menu-toggle}--m-action--PaddingLeft: var(--pf-t--global--spacer--lg);
-  --#{$menu-toggle}--m-action--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$menu-toggle}--m-action--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --#{$menu-toggle}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
 
   // * Menu toggle primary
-  --#{$menu-toggle}--m-primary--PaddingLeft: var(--#{$menu-toggle}--m-button--PaddingLeft);
-  --#{$menu-toggle}--m-primary--PaddingRight: var(--#{$menu-toggle}--m-button--PaddingRight);
+  --#{$menu-toggle}--m-primary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
+  --#{$menu-toggle}--m-primary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
   --#{$menu-toggle}--m-primary--Color: var(--pf-t--global--text--color--on-brand--default);
   --#{$menu-toggle}--m-primary--BackgroundColor: var(--pf-t--global--color--brand--default);
-  --#{$menu-toggle}--m-primary--BorderRadius: var(--#{$menu-toggle}--m-button--BorderRadius);
+  --#{$menu-toggle}--m-primary--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$menu-toggle}--m-primary--BorderColor: transparent;
   --#{$menu-toggle}--m-primary--hover--Color: var(--pf-t--global--text--color--on-brand--hover);
   --#{$menu-toggle}--m-primary--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
   --#{$menu-toggle}--m-primary--hover--BorderColor: transparent;
-  --#{$menu-toggle}--m-primary--active--Color: var(--pf-t--global--text--color--on-brand--clicked);
-  --#{$menu-toggle}--m-primary--active--BackgroundColor: var(--pf-t--global--color--brand--clicked);
-  --#{$menu-toggle}--m-primary--active--BorderColor: transparent;
   --#{$menu-toggle}--m-primary--expanded--Color: var(--pf-t--global--text--color--on-brand--clicked);
   --#{$menu-toggle}--m-primary--expanded--BackgroundColor: var(--pf-t--global--color--brand--clicked);
   --#{$menu-toggle}--m-primary--expanded--BorderColor: transparent;
@@ -92,77 +73,94 @@
   --#{$menu-toggle}--m-primary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--hover);
   --#{$menu-toggle}--m-primary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
 
-
   // * Menu toggle secondary
-  --#{$menu-toggle}--m-secondary--PaddingLeft: var(--#{$menu-toggle}--m-button--PaddingLeft);
-  --#{$menu-toggle}--m-secondary--PaddingRight: var(--#{$menu-toggle}--m-button--PaddingRight);
+  --#{$menu-toggle}--m-secondary--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--default);
+  --#{$menu-toggle}--m-secondary--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--default);
   --#{$menu-toggle}--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
   --#{$menu-toggle}--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
-  --#{$menu-toggle}--m-secondary--BorderRadius: var(--#{$menu-toggle}--m-button--BorderRadius);
+  --#{$menu-toggle}--m-secondary--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$menu-toggle}--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
-  --#{$menu-toggle}--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--button--hover);
+  --#{$menu-toggle}--m-secondary--hover--BorderWidth: var(--pf-t--global--border--width--action--hover);
   --#{$menu-toggle}--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
-  --#{$menu-toggle}--m-secondary--active--Color: var(--pf-t--global--text--color--brand--clicked);
-  --#{$menu-toggle}--m-secondary--active--BorderWidth: var(--pf-t--global--border--width--button--clicked);
-  --#{$menu-toggle}--m-secondary--active--BorderColor: var(--pf-t--global--border--color--brand--clicked);
   --#{$menu-toggle}--m-secondary--expanded--Color: var(--pf-t--global--text--color--brand--clicked);
-  --#{$menu-toggle}--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--button--clicked);
+  --#{$menu-toggle}--m-secondary--expanded--BorderWidth: var(--pf-t--global--border--width--action--clicked);
   --#{$menu-toggle}--m-secondary--expanded--BorderColor: var(--pf-t--global--border--color--brand--clicked);
   --#{$menu-toggle}--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
-  --#{$menu-toggle}--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
+  --#{$menu-toggle}--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
   --#{$menu-toggle}--m-secondary--expanded__toggle-icon--Color: var(--pf-t--global--icon--color--brand--clicked);
 
   // Controls
   --#{$menu-toggle}__controls--MinWidth: calc(var(--#{$menu-toggle}--FontSize) + var(--pf-t--global--spacer--sm) + var(--pf-t--global--spacer--sm));
 
   // Full height
-  --#{$menu-toggle}--m-full-height--PaddingRight: var(--pf-t--global--spacer--lg);
-  --#{$menu-toggle}--m-full-height--PaddingLeft: var(--pf-t--global--spacer--lg);
+  --#{$menu-toggle}--m-full-height--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
+  --#{$menu-toggle}--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
 
   // Split button, child
   --#{$menu-toggle}--m-split-button--child--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
 
   // Split button, action
-  --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftWidth: var(--pf-t--global--border--width--button--default);
-  --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--pf-t--global--border--color--default);
-  --#{$menu-toggle}--m-split-button--m-action--child--BorderRadius: var(--#{$menu-toggle}--m-button--BorderRadius);
-  --#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderLeftColor: var(--pf-t--global--icon--color--on-disabled);
+  --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
+  --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --#{$menu-toggle}--m-split-button--m-action--child--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
 
   // Split button action, primary
   --#{$menu-toggle}--m-split-button--m-action--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
   --#{$menu-toggle}--m-split-button--m-action--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
-  --#{$menu-toggle}--m-split-button--m-action--m-primary--child--active--BackgroundColor: var(--pf-t--global--color--brand--clicked);
-  --#{$menu-toggle}--m-split-button--m-action--m-primary--child--BorderLeftColor: var(--pf-t--global--border--color--default);
+  --#{$menu-toggle}--m-split-button--m-action--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
   --#{$menu-toggle}--m-split-button--m-action--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
 
   // Split button action, secondary
-  --#{$menu-toggle}--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-t--global--color--brand--default);
+  --#{$menu-toggle}--m-split-button--m-action--m-secondary--child--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
 
   // Split button, controls, check
   --#{$menu-toggle}__button--BackgroundColor: transparent;
   --#{$menu-toggle}__button--AlignSelf: baseline;
-  --#{$menu-toggle}__button--PaddingLeft: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}__button--PaddingRight: var(--pf-t--global--spacer--sm);
-  --#{$menu-toggle}__button--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingTop) + var(--#{$menu-toggle}--PaddingBottom));
+  --#{$menu-toggle}__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
+  --#{$menu-toggle}__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
+  --#{$menu-toggle}__button--MinWidth: calc(var(--#{$menu-toggle}--FontSize) * var(--#{$menu-toggle}--LineHeight) + var(--#{$menu-toggle}--PaddingBlockStart) + var(--#{$menu-toggle}--PaddingBlockEnd));
+  --#{$menu-toggle}__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
 
   // Menu toggle plain
+  --#{$menu-toggle}--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
+  --#{$menu-toggle}--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --#{$menu-toggle}--m-plain--Color: var(--pf-t--global--icon--color--regular);
   --#{$menu-toggle}--m-plain--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --#{$menu-toggle}--m-plain--BorderColor: transparent;
   --#{$menu-toggle}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
-  --#{$menu-toggle}--m-plain--active--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --#{$menu-toggle}--m-plain--expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --#{$menu-toggle}--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled); // picking icon color rather than text...?
   --#{$menu-toggle}--m-plain--disabled--BackgroundColor: transparent; // picking icon color rather than text...?
 
   // Typeahead
-  --#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-t--global--spacer--sm);
   --#{$menu-toggle}--m-typeahead__button--AlignSelf: stretch;
 
   // * Menu toggle small
-  --#{$menu-toggle}--m-small--PaddingTop: var(--pf-t--global--spacer--xs);
-  --#{$menu-toggle}--m-small--PaddingBottom: var(--pf-t--global--spacer--xs);
+  --#{$menu-toggle}--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
+  --#{$menu-toggle}--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
+  --#{$menu-toggle}--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
+  --#{$menu-toggle}--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
+
+  // Status icon
+  --#{$menu-toggle}__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
+  --#{$menu-toggle}__status-icon--Color: var(--pf-t--global--icon--color--regular);
+
+  // Success
+  --#{$menu-toggle}--m-success--BorderColor: var(--pf-t--global--border--color--status--success--default);
+  --#{$menu-toggle}--m-success__status-icon--Color: var(--pf-t--global--icon--color--status--success--default);
+
+  // Warning
+  --#{$menu-toggle}--m-warning--BorderColor: var(--pf-t--global--border--color--status--warning--default);
+  --#{$menu-toggle}--m-warning__status-icon--Color: var(--pf-t--global--icon--color--status--warning--default);
+
+  // Danger
+  --#{$menu-toggle}--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
+  --#{$menu-toggle}--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
+
+  // Placeholder
+  --#{$menu-toggle}--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
 }
 
 .#{$menu-toggle} {
@@ -173,17 +171,20 @@
   justify-content: center;
   min-width: var(--#{$menu-toggle}--MinWidth);
   max-width: 100%;
-  padding-block-start: var(--#{$menu-toggle}--PaddingTop);
-  padding-block-end: var(--#{$menu-toggle}--PaddingBottom);
-  padding-inline-start: var(--#{$menu-toggle}--PaddingLeft);
-  padding-inline-end: var(--#{$menu-toggle}--PaddingRight);
+  padding-block-start: var(--#{$menu-toggle}--PaddingBlockStart);
+  padding-block-end: var(--#{$menu-toggle}--PaddingBlockEnd);
+  padding-inline-start: var(--#{$menu-toggle}--PaddingInlineStart);
+  padding-inline-end: var(--#{$menu-toggle}--PaddingInlineEnd);
   font-size: var(--#{$menu-toggle}--FontSize);
   line-height: var(--#{$menu-toggle}--LineHeight);
   color: var(--#{$menu-toggle}--Color);
   cursor: pointer;
   background-color: var(--#{$menu-toggle}--BackgroundColor);
   border: 0;
-
+  transition-timing-function: var(--#{$menu-toggle}--TransitionTimingFunction);
+  transition-duration: var(--#{$menu-toggle}--TransitionDuration);
+  transition-property: var(--#{$menu-toggle}--TransitionProperty);
+  
   &,
   &::before {
     border-radius: var(--#{$menu-toggle}--BorderRadius);
@@ -199,12 +200,13 @@
     pointer-events: none;
     content: "";
     border: var(--#{$menu-toggle}--BorderWidth) solid var(--#{$menu-toggle}--BorderColor);
+    transition: inherit;
   }
 
   &.pf-m-primary {
     // TODO: abstract padding updates to control/button variant
-    --#{$menu-toggle}--PaddingLeft: var(--#{$menu-toggle}--m-primary--PaddingLeft);
-    --#{$menu-toggle}--PaddingRight: var(--#{$menu-toggle}--m-primary--PaddingRight);
+    --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-primary--PaddingInlineStart);
+    --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-primary--PaddingInlineEnd);
     --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-primary--Color);
     --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--m-primary--BackgroundColor);
     --#{$menu-toggle}--BorderRadius: var(--#{$menu-toggle}--m-primary--BorderRadius);
@@ -212,39 +214,35 @@
     --#{$menu-toggle}--hover--Color: var(--#{$menu-toggle}--m-primary--hover--Color);
     --#{$menu-toggle}--hover--BackgroundColor: var(--#{$menu-toggle}--m-primary--hover--BackgroundColor);
     --#{$menu-toggle}--hover--BorderColor: var(--#{$menu-toggle}--m-primary--hover--BorderColor);
-    --#{$menu-toggle}--active--Color: var(--#{$menu-toggle}--m-primary--active--Color);
-    --#{$menu-toggle}--active--BackgroundColor: var(--#{$menu-toggle}--m-primary--active--BackgroundColor);
-    --#{$menu-toggle}--active--BorderColor: var(--#{$menu-toggle}--m-primary--active--BorderColor);
     --#{$menu-toggle}--expanded--Color: var(--#{$menu-toggle}--m-primary--expanded--Color);
     --#{$menu-toggle}--expanded--BackgroundColor: var(--#{$menu-toggle}--m-primary--expanded--BackgroundColor);
     --#{$menu-toggle}--expanded--BorderColor: var(--#{$menu-toggle}--m-primary--expanded--BorderColor);
     --#{$menu-toggle}--hover__toggle-icon--Color: var(--#{$menu-toggle}--m-primary--hover__toggle-icon--Color);
     --#{$menu-toggle}--expanded__toggle-icon--Color: var(--#{$menu-toggle}--m-primary--expanded__toggle-icon--Color);
+    --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--m-primary__toggle-icon--Color);
   }
 
   &.pf-m-secondary {
     // TODO: abstract padding updates to control/button variant
-    --#{$menu-toggle}--PaddingLeft: var(--#{$menu-toggle}--m-secondary--PaddingLeft);
-    --#{$menu-toggle}--PaddingRight: var(--#{$menu-toggle}--m-secondary--PaddingRight);
+    --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-secondary--PaddingInlineStart);
+    --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-secondary--PaddingInlineEnd);
     --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-secondary--Color);
     --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-secondary--BorderColor);
     --#{$menu-toggle}--BorderRadius: var(--#{$menu-toggle}--m-secondary--BorderRadius);
     --#{$menu-toggle}--hover--Color: var(--#{$menu-toggle}--m-secondary--hover--Color);
     --#{$menu-toggle}--hover--BorderWidth: var(--#{$menu-toggle}--m-secondary--hover--BorderWidth);
     --#{$menu-toggle}--hover--BorderColor: var(--#{$menu-toggle}--m-secondary--hover--BorderColor);
-    --#{$menu-toggle}--active--Color: var(--#{$menu-toggle}--m-secondary--active--Color);
-    --#{$menu-toggle}--active--BorderWidth: var(--#{$menu-toggle}--m-secondary--active--BorderWidth);
-    --#{$menu-toggle}--active--BorderColor: var(--#{$menu-toggle}--m-secondary--active--BorderColor);
     --#{$menu-toggle}--expanded--Color: var(--#{$menu-toggle}--m-secondary--expanded--Color);
     --#{$menu-toggle}--expanded--BorderWidth: var(--#{$menu-toggle}--m-secondary--expanded--BorderWidth);
     --#{$menu-toggle}--hover__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary--hover__toggle-icon--Color);
     --#{$menu-toggle}--expanded__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary--expanded__toggle-icon--Color);
+    --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--m-secondary__toggle-icon--Color);
   }
 
   &.pf-m-full-height {
-    --#{$menu-toggle}--PaddingRight: var(--#{$menu-toggle}--m-full-height--PaddingRight);
-    --#{$menu-toggle}--PaddingLeft: var(--#{$menu-toggle}--m-full-height--PaddingLeft);
-    --#{$menu-toggle}--BorderTopWidth: var(--#{$menu-toggle}--m-full-height__toggle--BorderTopWidth);
+    --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-full-height--PaddingInlineEnd);
+    --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-full-height--PaddingInlineStart);
+    --#{$menu-toggle}--BorderBlockStartWidth: var(--#{$menu-toggle}--m-full-height__toggle--BorderBlockStartWidth);
 
     align-items: center;
     height: 100%;
@@ -255,12 +253,13 @@
   }
 
   &.pf-m-plain {
+    --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-plain--PaddingInlineStart);
+    --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-plain--PaddingInlineEnd);
     --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-plain--Color);
     --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--m-plain--BackgroundColor);
     --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-plain--BorderColor);
     --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--m-plain--BackgroundColor);
     --#{$menu-toggle}--hover--BackgroundColor: var(--#{$menu-toggle}--m-plain--hover--BackgroundColor);
-    --#{$menu-toggle}--active--BackgroundColor: var(--#{$menu-toggle}--m-plain--active--BackgroundColor);
     --#{$menu-toggle}--expanded--BackgroundColor: var(--#{$menu-toggle}--m-plain--expanded--BackgroundColor);
     --#{$menu-toggle}--disabled--Color: var(--#{$menu-toggle}--m-plain--disabled--Color);
     --#{$menu-toggle}--disabled--BackgroundColor: var(--#{$menu-toggle}--m-plain--disabled--BackgroundColor);
@@ -286,24 +285,6 @@
     --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--expanded__toggle-icon--Color);
   }
 
-  &:is(:active, .pf-m-active) {
-    --#{$menu-toggle}--Color: var(--#{$menu-toggle}--active--Color);
-    --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--active--BackgroundColor);
-    --#{$menu-toggle}--BorderWidth: var(--#{$menu-toggle}--active--BorderWidth);
-    --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--active--BorderColor);
-    --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--active__toggle-icon--Color);
-  }
-
-  &:is(:disabled, .pf-m-disabled) {
-    --#{$menu-toggle}--Color: var(--#{$menu-toggle}--disabled--Color);
-    --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--disabled--BackgroundColor);
-
-    &,
-    .#{$button} {
-      pointer-events: none;
-    }
-  }
-
   &.pf-m-primary,
   &:is(:disabled, .pf-m-disabled) {
     &::before {
@@ -313,13 +294,47 @@
 
   // - Menu item small
   &.pf-m-small {
-    --#{$menu-toggle}--PaddingTop: var(--#{$menu-toggle}--m-small--PaddingTop);
-    --#{$menu-toggle}--PaddingBottom: var(--#{$menu-toggle}--m-small--PaddingBottom);
+    --#{$menu-toggle}--PaddingBlockStart: var(--#{$menu-toggle}--m-small--PaddingBlockStart);
+    --#{$menu-toggle}--PaddingBlockEnd: var(--#{$menu-toggle}--m-small--PaddingBlockEnd);
+    --#{$menu-toggle}--PaddingInlineStart: var(--#{$menu-toggle}--m-small--PaddingInlineStart);
+    --#{$menu-toggle}--PaddingInlineEnd: var(--#{$menu-toggle}--m-small--PaddingInlineEnd);
   }
 
   &:has(.#{$button}) {
     background-color: transparent;
   }
+
+  &.pf-m-success {
+    --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-success--BorderColor);
+    --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-success__status-icon--Color);
+  }
+
+  &.pf-m-warning {
+    --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-warning--BorderColor);
+    --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-warning__status-icon--Color);
+  }
+
+  &.pf-m-danger {
+    --#{$menu-toggle}--BorderColor: var(--#{$menu-toggle}--m-danger--BorderColor);
+    --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--m-danger__status-icon--Color);
+  }
+
+  &.pf-m-placeholder {
+    --#{$menu-toggle}--Color: var(--#{$menu-toggle}--m-placeholder--Color);
+  }
+
+  &:is(:disabled, .pf-m-disabled) {
+    --#{$menu-toggle}--Color: var(--#{$menu-toggle}--disabled--Color);
+    --#{$menu-toggle}__icon--Color: var(--#{$menu-toggle}--disabled__icon--Color);
+    --#{$menu-toggle}__toggle-icon--Color: var(--#{$menu-toggle}--disabled__toggle-icon--Color);
+    --#{$menu-toggle}__status-icon--Color: var(--#{$menu-toggle}--disabled__status-icon--Color);
+    --#{$menu-toggle}--BackgroundColor: var(--#{$menu-toggle}--disabled--BackgroundColor);
+
+    &,
+    .#{$button} {
+      pointer-events: none;
+    }
+  }
 }
 
 // - Menu toggle split button
@@ -330,10 +345,10 @@
 
   > * {
     position: relative;
-    padding-block-start: var(--#{$menu-toggle}--PaddingTop);
-    padding-block-end: var(--#{$menu-toggle}--PaddingBottom);
-    padding-inline-start: var(--#{$menu-toggle}--PaddingLeft);
-    padding-inline-end: var(--#{$menu-toggle}--PaddingRight);
+    padding-block-start: var(--#{$menu-toggle}--PaddingBlockStart);
+    padding-block-end: var(--#{$menu-toggle}--PaddingBlockEnd);
+    padding-inline-start: var(--#{$menu-toggle}--PaddingInlineStart);
+    padding-inline-end: var(--#{$menu-toggle}--PaddingInlineEnd);
   }
 
   > :first-child {
@@ -347,7 +362,7 @@
   }
 
   > .#{$check} {
-    --#{$menu-toggle}--PaddingRight: 0;
+    --#{$menu-toggle}--PaddingInlineEnd: 0;
     --#{$check}__label--Color: currentcolor;
     --#{$check}__label--disabled--Color: currentcolor;
 
@@ -368,11 +383,11 @@
 
 // - Menu toggle split button action
 .#{$menu-toggle}.pf-m-split-button.pf-m-action {
-  --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--#{$menu-toggle}--BorderColor);
+  --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--#{$menu-toggle}--BorderColor);
 
   // all subsequent buttons
   > :not(:first-child) {
-    border-inline-start: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderLeftWidth) solid var(--#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor);
+    border-inline-start: var(--#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartWidth) solid var(--#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor);
   }
 
   > :has(.#{$menu-toggle}__controls) {
@@ -381,7 +396,7 @@
 
   // Split button, primary
   &.pf-m-primary {
-    --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--#{$menu-toggle}--m-split-button--m-action--m-primary--child--BorderLeftColor);
+    --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--#{$menu-toggle}--m-split-button--m-action--m-primary--child--BorderInlineStartColor);
 
     // stylelint-disable max-nesting-depth, selector-max-class, selector-not-notation
     // update to single :not() in breaking change
@@ -391,10 +406,6 @@
       &:is(:hover, :focus) {
         --#{$menu-toggle}--m-split-button--m-action--m-primary--child--BackgroundColor: var(--#{$menu-toggle}--m-split-button--m-action--m-primary--child--hover--BackgroundColor);
       }
-
-      &:is(:active, .pf-m-active) {
-        --#{$menu-toggle}--m-split-button--m-action--m-primary--child--BackgroundColor: var(--#{$menu-toggle}--m-split-button--m-action--m-primary--child--active--BackgroundColor);
-      }
     }
 
     &.pf-m-expanded {
@@ -405,12 +416,12 @@
 
   // Split button, secondary
   &.pf-m-secondary {
-    --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--#{$menu-toggle}--m-split-button--m-action--m-secondary--child--BorderLeftColor);
+    --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--#{$menu-toggle}--m-split-button--m-action--m-secondary--child--BorderInlineStartColor);
   }
 
   // disable accent border
   &:is(.pf-m-disabled, :disabled) {
-    --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderLeftColor);
+    --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderInlineStartColor);
 
     &::before {
       content: none;
@@ -419,7 +430,7 @@
 
   // disabled styles for children
   > :is(.pf-m-disabled, :disabled) {
-    --#{$menu-toggle}--m-split-button--m-action--child--BorderLeftColor: var(--#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderLeftColor);
+    --#{$menu-toggle}--m-split-button--m-action--child--BorderInlineStartColor: var(--#{$menu-toggle}--m-split-button--m-action--child--disabled--BorderInlineStartColor);
 
     color: var(--#{$menu-toggle}--m-split-button--child--disabled--Color);
     background-color: var(--#{$menu-toggle}--m-split-button--child--disabled--BackgroundColor);
@@ -435,19 +446,18 @@
   padding: 0;
 
   .#{$menu-toggle}__button {
-    --#{$menu-toggle}__button--PaddingRight: 0;
+    --#{$menu-toggle}__button--PaddingInlineEnd: 0;
   }
 
   .#{$menu-toggle}__controls {
-    --#{$menu-toggle}__button--PaddingRight: 0;
+    --#{$menu-toggle}__button--PaddingInlineEnd: 0;
 
     display: flex;
     align-items: stretch;
   }
 
   .#{$text-input-group} {
-    --#{$text-input-group}__utilities--c-button--PaddingRight: var(--#{$menu-toggle}--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
-    --#{$text-input-group}__utilities--MarginRight: 0;
+    --#{$text-input-group}__utilities--MarginInlineEnd: 0;
 
     flex: 1;
   }
@@ -457,8 +467,8 @@
 .#{$menu-toggle}__button {
   align-self: var(--#{$menu-toggle}__button--AlignSelf);
   min-width: var(--#{$menu-toggle}__button--MinWidth);
-  padding-inline-start: var(--#{$menu-toggle}__button--PaddingLeft);
-  padding-inline-end: var(--#{$menu-toggle}__button--PaddingRight);
+  padding-inline-start: var(--#{$menu-toggle}__button--PaddingInlineStart);
+  padding-inline-end: var(--#{$menu-toggle}__button--PaddingInlineEnd);
   color: inherit;
   background-color: var(--#{$menu-toggle}__button--BackgroundColor);
   border: 0;
@@ -466,10 +476,16 @@
   &:has(.#{$menu-toggle}__controls) {
     padding-inline-start: 0;
   }
+
+  &.pf-m-text {
+    display: inline-flex;
+    align-items: baseline;
+    padding-inline-start: var(--#{$menu-toggle}__button--m-text--PaddingInlineStart);
+  }
 }
 
 .#{$menu-toggle}__text {
-  @include pf-v5-text-overflow;
+  @include pf-v6-text-overflow;
 
   min-width: 0;
 }
@@ -504,3 +520,9 @@
   min-height: var(--#{$menu-toggle}__toggle-icon--MinHeight);
   color: var(--#{$menu-toggle}__toggle-icon--Color, inherit);
 }
+
+// - Menu toggle status icon
+.#{$menu-toggle}__status-icon {
+  margin-inline-end: var(--#{$menu-toggle}__status-icon--MarginInlineEnd);
+  color: var(--#{$menu-toggle}__status-icon--Color, inherit);
+}