@patternfly/react-styles 6.0.0-prerelease.4 → 6.0.0-prerelease.6

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

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-form-control {
   --pf-v6-c-form-control--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-form-control--Color: var(--pf-t--global--text--color--regular);
@@ -8,9 +7,11 @@
   --pf-v6-c-form-control--OutlineOffset: -6px;
   --pf-v6-c-form-control--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-form-control--before--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v6-c-form-control--before--BorderStyle: solid;
   --pf-v6-c-form-control--before--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-form-control--before--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
   --pf-v6-c-form-control--after--BorderWidth: var(--pf-t--global--border--width--control--default);
+  --pf-v6-c-form-control--after--BorderStyle: solid;
   --pf-v6-c-form-control--after--BorderColor: transparent;
   --pf-v6-c-form-control--after--BorderRadius: var(--pf-v6-c-form-control--BorderRadius);
   --pf-v6-c-form-control--BackgroundColor: var(--pf-t--global--background--color--control--default);
@@ -32,10 +33,11 @@
   --pf-v6-c-form-control--m-disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-form-control--m-disabled--BackgroundColor: var(--pf-t--global--background--color--disabled--default);
   --pf-v6-c-form-control--m-disabled--after--BorderColor: transparent;
-  --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-form-control--m-readonly--BorderColor: transparent;
+  --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-t--global--background--color--control--read-only);
+  --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-t--global--border--color--control--read-only);
   --pf-v6-c-form-control--m-readonly--hover--after--BorderColor: revert;
   --pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor: transparent;
+  --pf-v6-c-form-control--m-readonly--m-plain--BorderColor: transparent;
   --pf-v6-c-form-control--m-readonly--m-plain--inset--base: 0;
   --pf-v6-c-form-control--m-readonly--m-plain--OutlineOffset: 0;
   --pf-v6-c-form-control--m-success--after--BorderWidth: var(--pf-t--global--border--width--control--default);
@@ -59,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);
@@ -95,12 +101,12 @@
 }
 .pf-v6-c-form-control::before {
   border-color: var(--pf-v6-c-form-control--before--BorderColor);
-  border-style: var(--pf-v6-c-form-control--before--BorderStyle, solid);
+  border-style: var(--pf-v6-c-form-control--before--BorderStyle);
   border-width: var(--pf-v6-c-form-control--before--BorderWidth);
   border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
 }
 .pf-v6-c-form-control::after {
-  border: var(--pf-v6-c-form-control--after--BorderWidth) var(--pf-v6-c-form-control--after--BorderStyle, solid) var(--pf-v6-c-form-control--after--BorderColor);
+  border: var(--pf-v6-c-form-control--after--BorderWidth) var(--pf-v6-c-form-control--after--BorderStyle) var(--pf-v6-c-form-control--after--BorderColor);
   border-radius: var(--pf-v6-c-form-control--before--BorderRadius);
 }
 .pf-v6-c-form-control > :is(input, select, textarea) {
@@ -114,21 +120,36 @@
   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--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
+  --pf-v6-c-form-control--before--BorderColor: var(--pf-v6-c-form-control--m-readonly--BorderColor);
 }
 .pf-v6-c-form-control.pf-m-readonly:hover {
   --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-readonly--hover--after--BorderColor);
@@ -138,6 +159,7 @@
 }
 .pf-v6-c-form-control.pf-m-readonly.pf-m-plain {
   --pf-v6-c-form-control--m-readonly--BackgroundColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BackgroundColor);
+  --pf-v6-c-form-control--m-readonly--BorderColor: var(--pf-v6-c-form-control--m-readonly--m-plain--BorderColor);
   --pf-v6-c-form-control--inset--base: var(--pf-v6-c-form-control--m-readonly--m-plain--inset--base);
   --pf-v6-c-form-control--before--BorderStyle: none;
   --pf-v6-c-form-control--after--BorderStyle: none;

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/HelperText/helper-text.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-helper-text {
   --pf-v6-c-helper-text--Gap: var(--pf-t--global--spacer--xs);
   --pf-v6-c-helper-text--FontSize: var(--pf-t--global--font--size--body--sm);

package/css/components/Hint/hint.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-hint {
   --pf-v6-c-hint--GridRowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-hint--PaddingBlockStart: var(--pf-t--global--spacer--lg);

package/css/components/Icon/icon.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-icon {
   --pf-v6-c-icon--Width: var(--pf-t--global--icon--size--font--body--default);
   --pf-v6-c-icon--Height: var(--pf-t--global--icon--size--font--body--default);

package/css/components/InlineEdit/inline-edit.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-inline-edit {
   --pf-v6-c-inline-edit__group--item--MarginInlineEnd: var(--pf-t--global--spacer--gap--action-to-action--default);
   --pf-v6-c-inline-edit__action--c-button--m-valid--m-plain--Color: var(--pf-t--global--icon--color--brand--default);

package/css/components/InputGroup/input-group.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-input-group {
   --pf-v6-c-input-group--Gap: var(--pf-t--global--spacer--gap--control-to-control--default);
   --pf-v6-c-input-group__item--offset: var(--pf-t--global--border--width--control--default);

package/css/components/JumpLinks/jump-links.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-jump-links {
   --pf-v6-c-jump-links__list--Display: flex;
   --pf-v6-c-jump-links__list--PaddingBlockStart: 0;

package/css/components/Label/label-group.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-label-group {
   --pf-v6-c-label-group--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-label-group--ColumnGap: var(--pf-t--global--spacer--xs);

package/css/components/Label/label.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-label {
   --pf-v6-c-label--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-label--PaddingInlineEnd: var(--pf-t--global--spacer--sm);

package/css/components/List/list.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-list {
   --pf-v6-c-list--PaddingInlineStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-list--ul--ListStyle: var(--pf-t--global--list-style);

package/css/components/Login/login.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-login {
   --pf-v6-c-login--PaddingBlockStart: var(--pf-t--global--spacer--lg);
   --pf-v6-c-login--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
@@ -55,33 +54,28 @@
   --pf-v6-c-login__footer--c-list--xl--PaddingBlockStart: var(--pf-t--global--spacer--2xl);
 }
 @media (min-width: 75rem) {
-  :root,
   .pf-v6-c-login {
     --pf-v6-c-login__container--MaxWidth: var(--pf-v6-c-login__container--xl--MaxWidth);
   }
 }
 @media (min-width: 36rem) {
-  :root,
   .pf-v6-c-login {
     --pf-v6-c-login__header--PaddingInlineEnd: 0;
     --pf-v6-c-login__header--PaddingInlineStart: 0;
   }
 }
 @media (min-width: 75rem) {
-  :root,
   .pf-v6-c-login {
     --pf-v6-c-login__header--MarginBlockEnd: var(--pf-v6-c-login__header--xl--MarginBlockEnd);
     --pf-v6-c-login__header--c-brand--MarginBlockEnd: var(--pf-v6-c-login__header--c-brand--xl--MarginBlockEnd);
   }
 }
 @media (min-width: 75rem) {
-  :root,
   .pf-v6-c-login {
     --pf-v6-c-login__main--MarginBlockEnd: 0;
   }
 }
 @media (min-width: 48rem) {
-  :root,
   .pf-v6-c-login {
     --pf-v6-c-login__main-header--PaddingInlineEnd: var(--pf-v6-c-login__main-header--md--PaddingInlineEnd);
     --pf-v6-c-login__main-header--PaddingInlineStart: var(--pf-v6-c-login__main-header--md--PaddingInlineStart);
@@ -89,21 +83,18 @@
   }
 }
 @media (min-width: 48rem) {
-  :root,
   .pf-v6-c-login {
     --pf-v6-c-login__main-body--PaddingInlineEnd: var(--pf-v6-c-login__main-body--md--PaddingInlineEnd);
     --pf-v6-c-login__main-body--PaddingInlineStart: var(--pf-v6-c-login__main-body--md--PaddingInlineStart);
   }
 }
 @media (min-width: 36rem) {
-  :root,
   .pf-v6-c-login {
     --pf-v6-c-login__footer--PaddingInlineEnd: 0;
     --pf-v6-c-login__footer--PaddingInlineStart: 0;
   }
 }
 @media (min-width: 75rem) {
-  :root,
   .pf-v6-c-login {
     --pf-v6-c-login__footer--c-list--PaddingBlockStart: var(--pf-v6-c-login__footer--c-list--xl--PaddingBlockStart);
   }

package/css/components/Masthead/masthead.css

@@ -1,4 +1,3 @@
-: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--gutter--default);

package/css/components/Menu/menu.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-menu {
   --pf-v6-c-menu--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-menu--Width: auto;

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

@@ -1,6 +1,5 @@
-:root,
 .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);
@@ -65,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);
@@ -92,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);
@@ -108,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);
@@ -199,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 {
@@ -227,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);
@@ -258,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 > * {
@@ -277,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;
@@ -287,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;
 }
@@ -347,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);
@@ -355,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 {
@@ -376,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;
@@ -386,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;
 }
 
@@ -400,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"
 };

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

@@ -1,5 +1,6 @@
 import './menu-toggle.css';
 export 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 @@ export 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/ModalBox/modal-box.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-modal-box {
   --pf-v6-c-modal-box--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-modal-box--BorderRadius: var(--pf-t--global--border--radius--large);
@@ -52,7 +51,6 @@
   --pf-v6-c-modal-box__footer--c-button--sm--MarginInlineEnd: calc(var(--pf-v6-c-modal-box__footer--c-button--MarginInlineEnd) / 2);
 }
 @media (min-width: 75rem) {
-  :root,
   .pf-v6-c-modal-box {
     --pf-v6-c-modal-box--m-align-top--spacer: var(--pf-v6-c-modal-box--m-align-top--xl--spacer);
   }

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

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-multiple-file-upload {
   --pf-v6-c-multiple-file-upload--GridTemplateColumns: 1fr;
   --pf-v6-c-multiple-file-upload--Gap: var(--pf-t--global--spacer--md);

package/css/components/Nav/nav.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-nav {
   --pf-v6-c-nav__link--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-nav__link--PaddingBlockEnd: var(--pf-t--global--spacer--sm);

package/css/components/NotificationDrawer/notification-drawer.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-notification-drawer {
   --pf-v6-c-notification-drawer--BackgroundColor: var(--pf-t--global--background--color--floating--default);
   --pf-v6-c-notification-drawer__header--PaddingBlockStart: var(--pf-t--global--spacer--md);

package/css/components/NumberInput/number-input.css

@@ -1,4 +1,3 @@
-:root,
 .pf-v6-c-number-input {
   --pf-v6-c-number-input__unit--c-input-group--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-number-input__icon--FontSize: var(--pf-t--global--font--size--xs);