@patternfly/react-styles 6.0.0-prerelease.5 → 6.0.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 6.0.0 (2024-10-24)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [6.0.0-prerelease.6](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-prerelease.5...@patternfly/react-styles@6.0.0-prerelease.6) (2024-10-02)
+
+### Bug Fixes
+
+- **Menu toggle:** Remove pf-m-action modifier ([#11096](https://github.com/patternfly/patternfly-react/issues/11096)) ([fe6871c](https://github.com/patternfly/patternfly-react/commit/fe6871cf3063eab33dc572f30a57c52e84f34131))
+
 # [6.0.0-prerelease.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.0.0-prerelease.4...@patternfly/react-styles@6.0.0-prerelease.5) (2024-09-26)
 
 ### Bug Fixes

package/css/components/Alert/alert.css

@@ -16,6 +16,7 @@
   --pf-v6-c-alert--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-alert__toggle--MarginBlockStart: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
   --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
+  --pf-v6-c-alert__toggle--MarginInlineStart: calc(-1 * var(--pf-t--global--spacer--action--horizontal--plain--default));
   --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-alert__toggle-icon--Rotate: 0;
   --pf-v6-c-alert__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -135,6 +136,7 @@
 .pf-v6-c-alert__toggle {
   margin-block-start: var(--pf-v6-c-alert__toggle--MarginBlockStart);
   margin-block-end: var(--pf-v6-c-alert__toggle--MarginBlockEnd);
+  margin-inline-start: var(--pf-v6-c-alert__toggle--MarginInlineStart);
   margin-inline-end: var(--pf-v6-c-alert__toggle--MarginInlineEnd);
 }
 
@@ -148,9 +150,7 @@
 }
 
 .pf-v6-c-alert__icon {
-  display: flex;
   grid-area: icon;
-  margin-block-start: var(--pf-v6-c-alert__icon--MarginBlockStart);
   margin-inline-end: var(--pf-v6-c-alert__icon--MarginInlineEnd);
   font-size: var(--pf-v6-c-alert__icon--FontSize);
   color: var(--pf-v6-c-alert__icon--Color);
@@ -183,10 +183,6 @@
   margin-block-start: var(--pf-v6-c-alert__action--MarginBlockStart);
   margin-block-end: var(--pf-v6-c-alert__action--MarginBlockEnd);
   margin-inline-end: var(--pf-v6-c-alert__action--MarginInlineEnd);
-  transform: translateY(var(--pf-v6-c-alert__action--TranslateY));
-}
-.pf-v6-c-alert__action > .pf-v6-c-button {
-  --pf-v6-c-button--LineHeight: 1;
 }
 
 .pf-v6-c-alert__action-group {

package/css/components/Button/button.css

@@ -40,6 +40,7 @@
   --pf-v6-c-button--m-primary--m-clicked__icon--Color: var(--pf-t--global--icon--color--on-brand--clicked);
   --pf-v6-c-button--m-secondary--Color: var(--pf-t--global--text--color--brand--default);
   --pf-v6-c-button--m-secondary--BorderColor: var(--pf-t--global--border--color--brand--default);
+  --pf-v6-c-button--m-secondary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
   --pf-v6-c-button--m-secondary__icon--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-button--m-secondary--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --pf-v6-c-button--m-secondary--hover--BorderColor: var(--pf-t--global--border--color--brand--hover);
@@ -58,6 +59,7 @@
   --pf-v6-c-button--m-secondary--m-danger--m-clicked__icon--Color: var(--pf-t--global--icon--color--status--danger--clicked);
   --pf-v6-c-button--m-tertiary--Color: var(--pf-t--global--text--color--brand--default);
   --pf-v6-c-button--m-tertiary--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-button--m-tertiary--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
   --pf-v6-c-button--m-tertiary__icon--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-button--m-tertiary--hover--Color: var(--pf-t--global--text--color--brand--hover);
   --pf-v6-c-button--m-tertiary--hover--BorderColor: var(--pf-t--global--border--color--hover);
@@ -126,7 +128,9 @@
   --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineEnd: 0;
   --pf-v6-c-button--m-plain--m-no-padding--PaddingBlockEnd: 0;
   --pf-v6-c-button--m-plain--m-no-padding--PaddingInlineStart: 0;
+  --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-t--global--icon--color--subtle);
   --pf-v6-c-button--m-plain--m-no-padding--BackgroundColor: transparent;
+  --pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor: transparent;
   --pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor: transparent;
   --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
@@ -290,6 +294,7 @@
 .pf-v6-c-button.pf-m-secondary {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-secondary--Color);
   --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-secondary--BorderColor);
+  --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-secondary--TransitionDuration);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-secondary__icon--Color);
   --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-secondary--hover--Color);
   --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-secondary--hover--BorderColor);
@@ -315,6 +320,7 @@
 .pf-v6-c-button.pf-m-tertiary {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--m-tertiary--Color);
   --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--m-tertiary--BorderColor);
+  --pf-v6-c-button--TransitionDuration: var(--pf-v6-c-button--m-tertiary--TransitionDuration);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-tertiary__icon--Color);
   --pf-v6-c-button--hover--Color: var(--pf-v6-c-button--m-tertiary--hover--Color);
   --pf-v6-c-button--hover--BorderColor: var(--pf-v6-c-button--m-tertiary--hover--BorderColor);
@@ -478,6 +484,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--m-small--PaddingInlineStart: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineStart);
 }
 .pf-v6-c-button.pf-m-plain.pf-m-no-padding {
+  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding__icon--Color);
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--BackgroundColor);
   --pf-v6-c-button--hover--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--hover--BackgroundColor);
   --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-no-padding--m-clicked--BackgroundColor);
@@ -509,6 +516,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
   --pf-v6-c-button--BorderColor: var(--pf-v6-c-button--hover--BorderColor);
   --pf-v6-c-button--BorderWidth: var(--pf-v6-c-button--hover--BorderWidth);
+  --pf-v6-c-button--m-plain--m-no-padding__icon--Color: var(--pf-v6-c-button--m-plain--m-no-padding--hover__icon--Color);
   --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--hover__icon--Color);
   text-decoration: var(--pf-v6-c-button--hover--TextDecorationLine) var(--pf-v6-c-button--hover--TextDecorationStyle);
 }

package/css/components/DataList/data-list.css

@@ -470,11 +470,11 @@
   --pf-v6-c-data-list__item-action--Display: flex;
   --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-data-list__item-action--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--default);
+  --pf-v6-c-data-list__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--default);
   --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-data-list__item-action--md--MarginInlineStart: var(--pf-t--global--spacer--xl);
   --pf-v6-c-data-list__item-action--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
-  --pf-v6-c-data-list__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
-  --pf-v6-c-data-list__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --pf-v6-c-data-list__expandable-content--BackgroundColor: var( --pf-t--global--background--color--primary--default);
   --pf-v6-c-data-list__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-data-list__expandable-content--MarginInlineStart: var(--pf-t--global--spacer--md);
@@ -504,8 +504,6 @@
   --pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-data-list--m-compact__item-action--MarginInlineStart: var(--pf-t--global--spacer--md);
-  --pf-v6-c-data-list--m-compact__action--MarginBlockStart: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart) * -1);
-  --pf-v6-c-data-list--m-compact__action--MarginBlockEnd: calc(var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd) * -1);
   --pf-v6-c-data-list--m-compact__item-content--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--sm) * -1);
   --pf-v6-c-data-list--m-compact__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--sm) * -1);
@@ -538,8 +536,6 @@
   --pf-v6-c-data-list__item-action--MarginInlineStart: var(--pf-v6-c-data-list--m-compact__item-action--MarginInlineStart);
   --pf-v6-c-data-list__item-action--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockStart);
   --pf-v6-c-data-list__item-action--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-action--PaddingBlockEnd);
-  --pf-v6-c-data-list__action--MarginBlockStart: var(--pf-v6-c-data-list--m-compact__action--MarginBlockStart);
-  --pf-v6-c-data-list__action--MarginBlockEnd: var(--pf-v6-c-data-list--m-compact__action--MarginBlockEnd);
   --pf-v6-c-data-list__item-control--MarginInlineEnd: var(--pf-v6-c-data-list--m-compact__item-control--MarginInlineEnd);
   --pf-v6-c-data-list__item-control--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__item-control--PaddingBlockStart);
   --pf-v6-c-data-list__item-control--PaddingBlockEnd: var(--pf-v6-c-data-list--m-compact__item-control--PaddingBlockEnd);
@@ -685,8 +681,8 @@
   gap: var(--pf-v6-c-data-list__item-action--Gap);
   align-content: flex-start;
   align-items: flex-start;
-  padding-block-start: var(--pf-v6-c-data-list__item-action--PaddingBlockStart);
-  padding-block-end: var(--pf-v6-c-data-list__item-action--PaddingBlockEnd);
+  padding-block-start: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockStart) - var(--pf-v6-c-data-list__item-action--PaddingBlockStart--offset));
+  padding-block-end: calc(var(--pf-v6-c-data-list__item-action--PaddingBlockEnd) - var(--pf-v6-c-data-list__item-action--PaddingBlockEnd--offset));
   margin-inline-start: var(--pf-v6-c-data-list__item-action--MarginInlineStart);
 }
 .pf-v6-c-data-list__item-action.pf-m-hidden {
@@ -733,11 +729,6 @@
   }
 }
 
-.pf-v6-c-data-list__action {
-  margin-block-start: var(--pf-v6-c-data-list__action--MarginBlockStart);
-  margin-block-end: var(--pf-v6-c-data-list__action--MarginBlockEnd);
-}
-
 .pf-v6-c-data-list__toggle {
   margin-block-start: var(--pf-v6-c-data-list__toggle--MarginBlockStart);
   margin-block-end: var(--pf-v6-c-data-list__toggle--MarginBlockEnd);

package/css/components/DataList/data-list.d.ts

@@ -1,7 +1,6 @@
 import './data-list.css';
 declare const _default: {
   "dataList": "pf-v6-c-data-list",
-  "dataListAction": "pf-v6-c-data-list__action",
   "dataListCell": "pf-v6-c-data-list__cell",
   "dataListCheck": "pf-v6-c-data-list__check",
   "dataListExpandableContent": "pf-v6-c-data-list__expandable-content",

package/css/components/DataList/data-list.js

@@ -3,7 +3,6 @@ exports.__esModule = true;
 require('./data-list.css');
 exports.default = {
   "dataList": "pf-v6-c-data-list",
-  "dataListAction": "pf-v6-c-data-list__action",
   "dataListCell": "pf-v6-c-data-list__cell",
   "dataListCheck": "pf-v6-c-data-list__check",
   "dataListExpandableContent": "pf-v6-c-data-list__expandable-content",

package/css/components/DataList/data-list.mjs

@@ -1,7 +1,6 @@
 import './data-list.css';
 export default {
   "dataList": "pf-v6-c-data-list",
-  "dataListAction": "pf-v6-c-data-list__action",
   "dataListCell": "pf-v6-c-data-list__cell",
   "dataListCheck": "pf-v6-c-data-list__check",
   "dataListExpandableContent": "pf-v6-c-data-list__expandable-content",

package/css/components/Drawer/drawer.css

@@ -339,10 +339,6 @@
   flex: 1 1;
 }
 
-.pf-v6-c-drawer__body > .pf-v6-c-page__main {
-  height: 100%;
-}
-
 .pf-v6-c-drawer__splitter {
   position: relative;
   display: none;

package/css/components/Drawer/drawer.d.ts

@@ -59,7 +59,6 @@ declare const _default: {
     "staticOnXl": "pf-m-static-on-xl",
     "inlineOn_2xl": "pf-m-inline-on-2xl",
     "staticOn_2xl": "pf-m-static-on-2xl"
-  },
-  "pageMain": "pf-v6-c-page__main"
+  }
 };
 export default _default;

package/css/components/Drawer/drawer.js

@@ -61,6 +61,5 @@ exports.default = {
     "staticOnXl": "pf-m-static-on-xl",
     "inlineOn_2xl": "pf-m-inline-on-2xl",
     "staticOn_2xl": "pf-m-static-on-2xl"
-  },
-  "pageMain": "pf-v6-c-page__main"
+  }
 };

package/css/components/Drawer/drawer.mjs

@@ -59,6 +59,5 @@ export default {
     "staticOnXl": "pf-m-static-on-xl",
     "inlineOn_2xl": "pf-m-inline-on-2xl",
     "staticOn_2xl": "pf-m-static-on-2xl"
-  },
-  "pageMain": "pf-v6-c-page__main"
+  }
 };

package/css/components/FormControl/form-control.css

@@ -61,6 +61,10 @@
   --pf-v6-c-form-control__select--m-error--m-status--PaddingInlineEnd: calc((var(--pf-v6-c-form-control__icon--FontSize) * 2) + var(--pf-v6-c-form-control__utilities--Gap) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineEnd) + var(--pf-v6-c-form-control__toggle-icon--PaddingInlineStart));
   --pf-v6-c-form-control--textarea--Width: var(--pf-v6-c-form-control--Width);
   --pf-v6-c-form-control--textarea--Height: auto;
+  --pf-v6-c-form-control--textarea--PaddingBlockStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
+  --pf-v6-c-form-control--textarea--PaddingBlockEnd--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
+  --pf-v6-c-form-control--textarea--PaddingInlineEnd--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
+  --pf-v6-c-form-control--textarea--PaddingInlineStart--offset: calc(-1 * var(--pf-v6-c-form-control--OutlineOffset));
   --pf-v6-c-form-control__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-form-control__icon--FontSize: var(--pf-t--global--icon--size--font--body--default);
   --pf-v6-c-form-control__icon--m-status--Color: var(--pf-t--global--icon--color--regular);
@@ -116,18 +120,33 @@
   background-color: transparent;
   border: none;
   border-radius: var(--pf-v6-c-form-control--BorderRadius);
+  outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
   -moz-appearance: none;
   -webkit-appearance: none;
 }
-.pf-v6-c-form-control > :is(input, select, textarea):focus {
-  outline-offset: var(--pf-v6-c-form-control--OutlineOffset);
-}
 .pf-v6-c-form-control > ::placeholder {
   color: var(--pf-v6-c-form-control--m-placeholder--Color);
 }
 .pf-v6-c-form-control > :is(input, select) {
   text-overflow: ellipsis;
 }
+.pf-v6-c-form-control.pf-m-textarea {
+  padding-block-start: var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset);
+  padding-block-end: var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset);
+  padding-inline-start: var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset);
+  padding-inline-end: var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset);
+}
+.pf-v6-c-form-control.pf-m-textarea.pf-m-success, .pf-v6-c-form-control.pf-m-textarea.pf-m-warning, .pf-v6-c-form-control.pf-m-textarea.pf-m-error {
+  --pf-v6-c-form-control--m-status--PaddingInlineEnd--offset: calc(var(--pf-v6-c-form-control__icon--FontSize) + var(--pf-v6-c-form-control--ColumnGap));
+}
+.pf-v6-c-form-control.pf-m-textarea > textarea {
+  padding-block-start: calc(var(--pf-v6-c-form-control--PaddingBlockStart) - var(--pf-v6-c-form-control--textarea--PaddingBlockStart--offset));
+  padding-block-end: calc(var(--pf-v6-c-form-control--PaddingBlockEnd) - var(--pf-v6-c-form-control--textarea--PaddingBlockEnd--offset));
+  padding-inline-start: calc(var(--pf-v6-c-form-control--PaddingInlineStart) - var(--pf-v6-c-form-control--textarea--PaddingInlineStart--offset));
+  padding-inline-end: calc(var(--pf-v6-c-form-control--PaddingInlineEnd) - var(--pf-v6-c-form-control--textarea--PaddingInlineEnd--offset) + var(--pf-v6-c-form-control--m-status--PaddingInlineEnd--offset, 0));
+  outline-offset: 0;
+  scrollbar-gutter: stable;
+}
 .pf-v6-c-form-control.pf-m-readonly {
   --pf-v6-c-form-control--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--BackgroundColor);
   --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);

package/css/components/FormControl/form-control.d.ts

@@ -5,10 +5,11 @@ declare const _default: {
   "formControlToggleIcon": "pf-v6-c-form-control__toggle-icon",
   "formControlUtilities": "pf-v6-c-form-control__utilities",
   "modifiers": {
-    "readonly": "pf-m-readonly",
+    "textarea": "pf-m-textarea",
     "success": "pf-m-success",
     "warning": "pf-m-warning",
     "error": "pf-m-error",
+    "readonly": "pf-m-readonly",
     "plain": "pf-m-plain",
     "expanded": "pf-m-expanded",
     "disabled": "pf-m-disabled",

package/css/components/FormControl/form-control.js

@@ -7,10 +7,11 @@ exports.default = {
   "formControlToggleIcon": "pf-v6-c-form-control__toggle-icon",
   "formControlUtilities": "pf-v6-c-form-control__utilities",
   "modifiers": {
-    "readonly": "pf-m-readonly",
+    "textarea": "pf-m-textarea",
     "success": "pf-m-success",
     "warning": "pf-m-warning",
     "error": "pf-m-error",
+    "readonly": "pf-m-readonly",
     "plain": "pf-m-plain",
     "expanded": "pf-m-expanded",
     "disabled": "pf-m-disabled",

package/css/components/FormControl/form-control.mjs

@@ -5,10 +5,11 @@ export default {
   "formControlToggleIcon": "pf-v6-c-form-control__toggle-icon",
   "formControlUtilities": "pf-v6-c-form-control__utilities",
   "modifiers": {
-    "readonly": "pf-m-readonly",
+    "textarea": "pf-m-textarea",
     "success": "pf-m-success",
     "warning": "pf-m-warning",
     "error": "pf-m-error",
+    "readonly": "pf-m-readonly",
     "plain": "pf-m-plain",
     "expanded": "pf-m-expanded",
     "disabled": "pf-m-disabled",

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

@@ -1,5 +1,5 @@
 .pf-v6-c-menu-toggle {
-  --pf-v6-c-menu-toggle--ColumnGap: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-menu-toggle--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-menu-toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--default);
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-menu-toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--default);
@@ -64,26 +64,30 @@
   --pf-v6-c-menu-toggle--m-secondary__toggle-icon--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-menu-toggle--m-secondary--hover__toggle-icon--Color: var(--pf-t--global--icon--color--brand--hover);
   --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--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--spacious);
   --pf-v6-c-menu-toggle--m-full-height--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--spacious);
   --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--BorderInlineStartWidth: var(--pf-t--global--border--width--action--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-t--global--border--radius--pill);
-  --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--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--BorderInlineStartColor: var(--pf-t--global--color--brand--default);
+  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth: var(--pf-t--global--border--width--action--default);
+  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-menu-toggle--m-split-button--child--BorderRadius: var(--pf-t--global--border--radius--pill);
+  --pf-v6-c-menu-toggle--m-split-button--child--disabled--BorderInlineStartColor: var(--pf-t--global--icon--color--on-disabled);
+  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset: var(--pf-t--global--spacer--control--horizontal--default);
+  --pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset: var(--pf-t--global--spacer--control--horizontal--default);
+  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-t--global--color--brand--default);
+  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor: var(--pf-t--global--color--brand--hover);
+  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BorderInlineStartColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor: var(--pf-t--global--color--brand--clicked);
+  --pf-v6-c-menu-toggle--m-split-button--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--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-menu-toggle__button--AlignSelf: baseline;
   --pf-v6-c-menu-toggle__button--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--plain);
   --pf-v6-c-menu-toggle__button--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--plain);
   --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__button--m-text--PaddingInlineStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
+  --pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-menu-toggle--m-plain--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --pf-v6-c-menu-toggle--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--plain--default);
   --pf-v6-c-menu-toggle--m-plain--Color: var(--pf-t--global--icon--color--regular);
@@ -91,14 +95,15 @@
   --pf-v6-c-menu-toggle--m-plain--BorderColor: transparent;
   --pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --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--Color: var(--pf-t--global--text--color--disabled);
+  --pf-v6-c-menu-toggle--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
+  --pf-v6-c-menu-toggle--m-plain--disabled__toggle-icon--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__button--AlignSelf: stretch;
   --pf-v6-c-menu-toggle--m-small--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--compact);
   --pf-v6-c-menu-toggle--m-small--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--compact);
   --pf-v6-c-menu-toggle--m-small--PaddingInlineStart: var(--pf-t--global--spacer--control--horizontal--compact);
   --pf-v6-c-menu-toggle--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--compact);
-  --pf-v6-c-menu-toggle__status-icon--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-t--global--icon--color--regular);
   --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);
@@ -107,12 +112,13 @@
   --pf-v6-c-menu-toggle--m-danger--BorderColor: var(--pf-t--global--border--color--status--danger--default);
   --pf-v6-c-menu-toggle--m-danger__status-icon--Color: var(--pf-t--global--icon--color--status--danger--default);
   --pf-v6-c-menu-toggle--m-placeholder--Color: var(--pf-t--global--text--color--placeholder);
+  --pf-v6-c-menu-toggle__controls--Gap: var(--pf-t--global--spacer--sm);
 }
 
 .pf-v6-c-menu-toggle {
   position: relative;
   display: inline-flex;
-  column-gap: var(--pf-v6-c-menu-toggle--ColumnGap);
+  gap: var(--pf-v6-c-menu-toggle--Gap);
   align-items: center;
   justify-content: center;
   min-width: var(--pf-v6-c-menu-toggle--MinWidth);
@@ -198,6 +204,8 @@
   --pf-v6-c-menu-toggle--hover--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--hover--BackgroundColor);
   --pf-v6-c-menu-toggle--expanded--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--expanded--BackgroundColor);
   --pf-v6-c-menu-toggle--disabled--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled--Color);
+  --pf-v6-c-menu-toggle--disabled__icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
+  --pf-v6-c-menu-toggle--disabled__toggle-icon--Color: var(--pf-v6-c-menu-toggle--m-plain--disabled__icon--Color);
   --pf-v6-c-menu-toggle--disabled--BackgroundColor: var(--pf-v6-c-menu-toggle--m-plain--disabled--BackgroundColor);
 }
 .pf-v6-c-menu-toggle.pf-m-plain::before {
@@ -226,9 +234,6 @@
   --pf-v6-c-menu-toggle--PaddingInlineStart: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineStart);
   --pf-v6-c-menu-toggle--PaddingInlineEnd: var(--pf-v6-c-menu-toggle--m-small--PaddingInlineEnd);
 }
-.pf-v6-c-menu-toggle:has(.pf-v6-c-button) {
-  background-color: transparent;
-}
 .pf-v6-c-menu-toggle.pf-m-success {
   --pf-v6-c-menu-toggle--BorderColor: var(--pf-v6-c-menu-toggle--m-success--BorderColor);
   --pf-v6-c-menu-toggle__status-icon--Color: var(--pf-v6-c-menu-toggle--m-success__status-icon--Color);
@@ -257,7 +262,8 @@
 }
 
 .pf-v6-c-menu-toggle.pf-m-split-button {
-  --pf-v6-c-menu-toggle--ColumnGap: 0;
+  --pf-v6-c-menu-toggle--Gap: 0;
+  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--BorderColor);
   padding: 0;
 }
 .pf-v6-c-menu-toggle.pf-m-split-button > * {
@@ -276,7 +282,6 @@
   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--PaddingInlineEnd: 0;
   --pf-v6-c-check__label--Color: currentcolor;
   --pf-v6-c-check__label--disabled--Color: currentcolor;
   align-items: center;
@@ -286,49 +291,51 @@
   --pf-v6-c-check__input--TranslateY: 0;
   align-self: center;
 }
-.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-plain {
-  --pf-v6-c-menu-toggle--BorderColor: transparent;
-}
-
-.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action {
-  --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 > :not(:first-child) {
+  border-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartWidth) solid var(--pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor);
 }
-.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--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-primary {
+  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--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-primary > .pf-v6-c-menu-toggle__button,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check {
+  background-color: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor);
 }
-.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--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-primary > .pf-v6-c-menu-toggle__button:is(:hover, :focus),
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary > .pf-v6-c-check:is(:hover, :focus) {
+  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--child--hover--BackgroundColor);
 }
-.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);
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary.pf-m-expanded {
+  --pf-v6-c-menu-toggle--m-split-button--m-primary--child--BackgroundColor: var(--pf-v6-c-menu-toggle--m-split-button--m-primary--expanded--child--BackgroundColor);
 }
-.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary > :where(:not(.pf-m-disabled):not([disabled])):is(:hover, :focus) {
-  --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--child--hover--BackgroundColor);
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary {
+  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-secondary--child--BorderInlineStartColor);
 }
-.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-action.pf-m-primary.pf-m-expanded {
-  --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-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):first-child,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):first-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):first-child,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):first-child {
+  padding-inline-end: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineEnd--offset);
 }
-.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--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-primary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):last-child,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-primary .pf-v6-c-check:not(.pf-m-standalone):last-child, .pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-menu-toggle__button:not(:has(.pf-v6-c-menu-toggle__toggle-icon:only-child)):last-child,
+.pf-v6-c-menu-toggle.pf-m-split-button.pf-m-secondary .pf-v6-c-check:not(.pf-m-standalone):last-child {
+  padding-inline-start: var(--pf-v6-c-menu-toggle--m-split-button--pill--child--PaddingInlineStart--offset);
 }
-.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--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:is(.pf-m-disabled, :disabled) {
+  --pf-v6-c-menu-toggle--m-split-button--child--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--child--disabled--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--BorderInlineStartColor: var(--pf-v6-c-menu-toggle--m-split-button--m-action--child--disabled--BorderInlineStartColor);
+.pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-menu-toggle__button,
+.pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled) > .pf-v6-c-check {
   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);
 }
+.pf-v6-c-menu-toggle.pf-m-split-button:is(.pf-m-disabled, :disabled)::before {
+  content: none;
+}
 
 .pf-v6-c-menu-toggle.pf-m-typeahead {
   --pf-v6-c-menu-toggle__button--AlignSelf: var(--pf-v6-c-menu-toggle--m-typeahead__button--AlignSelf);
-  --pf-v6-c-menu-toggle--ColumnGap: 0;
+  --pf-v6-c-menu-toggle--Gap: 0;
   align-items: stretch;
   padding: 0;
 }
@@ -346,6 +353,7 @@
 }
 
 .pf-v6-c-menu-toggle__button {
+  gap: var(--pf-v6-c-menu-toggle__button--Gap);
   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--PaddingInlineStart);
@@ -354,13 +362,13 @@
   background-color: var(--pf-v6-c-menu-toggle__button--BackgroundColor);
   border: 0;
 }
-.pf-v6-c-menu-toggle__button:has(.pf-v6-c-menu-toggle__controls) {
-  padding-inline-start: 0;
-}
 .pf-v6-c-menu-toggle__button.pf-m-text {
   display: inline-flex;
   align-items: baseline;
-  padding-inline-start: var(--pf-v6-c-menu-toggle__button--m-text--PaddingInlineStart);
+}
+.pf-v6-c-menu-toggle.pf-m-split-button > .pf-v6-c-check.pf-m-standalone, .pf-v6-c-menu-toggle__button:has(> .pf-v6-c-menu-toggle__controls:only-child) {
+  padding-inline-start: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineStart);
+  padding-inline-end: var(--pf-v6-c-menu-toggle__button--toggle-icon--PaddingInlineEnd);
 }
 
 .pf-v6-c-menu-toggle__text {
@@ -375,7 +383,6 @@
   flex-wrap: nowrap;
 }
 
-.pf-v6-c-menu-toggle__icon,
 .pf-v6-c-menu-toggle__controls,
 .pf-v6-c-menu-toggle__toggle-icon {
   display: flex;
@@ -385,11 +392,16 @@
 
 .pf-v6-c-menu-toggle__icon {
   flex-shrink: 0;
-  min-height: var(--pf-v6-c-menu-toggle__icon--MinHeight);
+}
+.pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
+.pf-v6-c-menu-toggle__icon.pf-m-avatar img,
+.pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
+  margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
+  margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
 }
 
 .pf-v6-c-menu-toggle__controls {
-  min-width: var(--pf-v6-c-menu-toggle__controls--MinWidth);
+  gap: var(--pf-v6-c-menu-toggle__controls--Gap);
   margin-inline-start: auto;
 }
 
@@ -399,6 +411,5 @@
 }
 
 .pf-v6-c-menu-toggle__status-icon {
-  margin-inline-end: var(--pf-v6-c-menu-toggle__status-icon--MarginInlineEnd);
   color: var(--pf-v6-c-menu-toggle__status-icon--Color, inherit);
 }

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

@@ -1,5 +1,6 @@
 import './menu-toggle.css';
 declare const _default: {
+  "avatar": "pf-v6-c-avatar",
   "button": "pf-v6-c-button",
   "check": "pf-v6-c-check",
   "checkInput": "pf-v6-c-check__input",
@@ -25,9 +26,10 @@ declare const _default: {
     "danger": "pf-m-danger",
     "placeholder": "pf-m-placeholder",
     "splitButton": "pf-m-split-button",
-    "action": "pf-m-action",
+    "standalone": "pf-m-standalone",
     "typeahead": "pf-m-typeahead",
-    "text": "pf-m-text"
+    "text": "pf-m-text",
+    "avatar": "pf-m-avatar"
   },
   "textInputGroup": "pf-v6-c-text-input-group"
 };

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

@@ -2,6 +2,7 @@
 exports.__esModule = true;
 require('./menu-toggle.css');
 exports.default = {
+  "avatar": "pf-v6-c-avatar",
   "button": "pf-v6-c-button",
   "check": "pf-v6-c-check",
   "checkInput": "pf-v6-c-check__input",
@@ -27,9 +28,10 @@ exports.default = {
     "danger": "pf-m-danger",
     "placeholder": "pf-m-placeholder",
     "splitButton": "pf-m-split-button",
-    "action": "pf-m-action",
+    "standalone": "pf-m-standalone",
     "typeahead": "pf-m-typeahead",
-    "text": "pf-m-text"
+    "text": "pf-m-text",
+    "avatar": "pf-m-avatar"
   },
   "textInputGroup": "pf-v6-c-text-input-group"
 };