@patternfly/react-styles 6.6.0 → 6.6.1-prerelease.1

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.6.1-prerelease.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.6.1-prerelease.0...@patternfly/react-styles@6.6.1-prerelease.1) (2026-08-31)
+
+### Bug Fixes
+
+- **css:** return `undefined` if there is no className ([#11602](https://github.com/patternfly/patternfly-react/issues/11602)) ([60807bf](https://github.com/patternfly/patternfly-react/commit/60807bfe13743fa0d4e77c7f429917cbd567e6c3))
+
+### Features
+
+- **Page:** Add PageHeader component ([#12632](https://github.com/patternfly/patternfly-react/issues/12632)) ([de5b2ef](https://github.com/patternfly/patternfly-react/commit/de5b2efd359b329cad691d2a76caeffe1736ae1f))
+
+## [6.6.1-prerelease.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.6.0...@patternfly/react-styles@6.6.1-prerelease.0) (2026-08-03)
+
+### Bug Fixes
+
+- update tree pattern expand icon direction ([#12554](https://github.com/patternfly/patternfly-react/issues/12554)) ([8c89c01](https://github.com/patternfly/patternfly-react/commit/8c89c01501b2db096a23267b585cb46cf438aaea))
+
 # [6.6.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.6.0-prerelease.4...@patternfly/react-styles@6.6.0) (2026-07-01)
 
 **Note:** Version bump only for package @patternfly/react-styles

package/css/components/AboutModalBox/about-modal-box.css

@@ -164,7 +164,7 @@
   overflow-x: hidden;
   overflow-y: auto;
   overscroll-behavior: contain;
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   -webkit-overflow-scrolling: touch;
 }
 @media screen and (min-width: 36rem) {

package/css/components/Accordion/accordion.css

@@ -4,10 +4,10 @@
   --pf-v6-c-accordion__item--BorderRadius: var(--pf-t--global--border--radius--200);
   --pf-v6-c-accordion__item--m-expanded--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-accordion__toggle--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
-  --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-accordion__toggle--PaddingBlockStart: var(--pf-t--global--spacer--control--vertical--plain);
   --pf-v6-c-accordion__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--md);
-  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-accordion__toggle--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
+  --pf-v6-c-accordion__toggle--m-expanded--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--plain);
   --pf-v6-c-accordion__toggle--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion__toggle--BackgroundColor: var(--pf-t--global--background--color--action--plain--default);
   --pf-v6-c-accordion__toggle--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);

package/css/components/Alert/alert.css

@@ -14,9 +14,9 @@
   --pf-v6-c-alert--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-alert--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --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--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --pf-v6-c-alert__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --pf-v6-c-alert__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --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);
@@ -28,8 +28,8 @@
   --pf-v6-c-alert__title--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-alert__title--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-alert__title--max-lines: 1;
-  --pf-v6-c-alert__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-alert__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-alert__action--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --pf-v6-c-alert__action--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --pf-v6-c-alert__action--TranslateY: 0.125rem;
   --pf-v6-c-alert__action--MarginInlineEnd: calc(var(--pf-t--global--spacer--sm) * -1);
   --pf-v6-c-alert__description--PaddingBlockStart: var(--pf-t--global--spacer--xs);
@@ -163,7 +163,7 @@
   grid-area: title;
   font-weight: var(--pf-v6-c-alert__title--FontWeight);
   color: var(--pf-v6-c-alert__title--Color);
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
 }
 .pf-v6-c-alert__title.pf-m-truncate {
   display: -webkit-box;
@@ -175,7 +175,7 @@
 .pf-v6-c-alert__description {
   grid-area: description;
   padding-block-start: var(--pf-v6-c-alert__description--PaddingBlockStart);
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
 }
 .pf-v6-c-alert__description + .pf-v6-c-alert__action-group {
   --pf-v6-c-alert__action-group--PaddingBlockStart: var(--pf-v6-c-alert__description--action-group--PaddingBlockStart);

package/css/components/Breadcrumb/breadcrumb.css

@@ -18,9 +18,9 @@
   --pf-v6-c-breadcrumb__link--m-current--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-breadcrumb__link--BackgroundColor: transparent;
   --pf-v6-c-breadcrumb__heading--FontSize: var(--pf-v6-c-breadcrumb__item--FontSize);
-  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --pf-v6-c-breadcrumb__menu-toggle--MarginInlineEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-breadcrumb__menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --pf-v6-c-breadcrumb__menu-toggle--MarginInlineStart: var(--pf-t--global--spacer--xs);
 }
 
@@ -68,7 +68,7 @@
   font-weight: var(--pf-v6-c-breadcrumb__link--FontWeight);
   line-height: inherit;
   color: var(--pf-v6-c-breadcrumb__link--Color);
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   text-decoration-line: var(--pf-v6-c-breadcrumb__link--TextDecorationLine);
   text-decoration-style: var(--pf-v6-c-breadcrumb__link--TextDecorationStyle);
   text-decoration-color: var(--pf-v6-c-breadcrumb__link--TextDecorationColor);

package/css/components/Button/button.css

@@ -13,6 +13,7 @@
   --pf-v6-c-button--FontWeight: var(--pf-t--global--font--weight--body--default);
   --pf-v6-c-button--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-button--BackgroundColor: transparent;
+  --pf-v6-c-button--Background--click: radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
   --pf-v6-c-button--BorderColor: transparent;
   --pf-v6-c-button--BorderWidth: var(--pf-t--global--border--width--action--default);
   --pf-v6-c-button--BorderRadius: var(--pf-t--global--border--radius--pill);
@@ -251,6 +252,7 @@
   --pf-v6-c-button--m-display-lg--PaddingInlineEnd: var(--pf-t--global--spacer--action--horizontal--spacious);
   --pf-v6-c-button--m-display-lg--PaddingBlockEnd: var(--pf-t--global--spacer--control--vertical--spacious);
   --pf-v6-c-button--m-display-lg--PaddingInlineStart: var(--pf-t--global--spacer--action--horizontal--spacious);
+  --pf-v6-c-button--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-button--m-display-lg--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-button--m-link--m-display-lg--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-button--m-display-lg--hover--TextDecorationColor: var(--pf-t--global--border--color--control--default);
@@ -326,12 +328,12 @@
   --pf-v6-c-button--m-favorited__icon--favorited--Opacity: 1;
   --pf-v6-c-button__icon--favorite--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-button__progress--width: calc(var(--pf-t--global--icon--size--lg) + var(--pf-t--global--spacer--sm));
-  --pf-v6-c-button__progress--Opacity: 0;
   --pf-v6-c-button__progress--TranslateY: -50%;
   --pf-v6-c-button__progress--TranslateX: 0;
   --pf-v6-c-button__progress--InsetBlockStart: 50%;
   --pf-v6-c-button__progress--InsetInlineStart: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-button__progress--Color: var(--pf-v6-c-button__icon--Color);
+  --pf-v6-c-button__progress--Position: absolute;
   --pf-v6-c-button--m-progress--PaddingInlineEnd: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
   --pf-v6-c-button--m-progress--PaddingInlineStart: calc(var(--pf-t--global--spacer--control--horizontal--default) + var(--pf-v6-c-button__progress--width) / 2);
   --pf-v6-c-button--m-in-progress--PaddingInlineEnd: var(--pf-t--global--spacer--control--horizontal--default);
@@ -339,6 +341,8 @@
   --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-t--global--icon--color--brand--default);
   --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
   --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
+  --pf-v6-c-button--m-progress--TransitionDuration: var(--pf-v6-c-button--TransitionDuration);
+  --pf-v6-c-button--m-progress--TransitionProperty: var(--pf-v6-c-button--TransitionProperty), padding;
   --pf-v6-c-button--m-settings__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
   --pf-v6-c-button--m-settings__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
   --pf-v6-c-button--m-settings--hover__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
@@ -388,7 +392,7 @@
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
-  background: var(--pf-v6-c-button--BackgroundColor) radial-gradient(circle, transparent 1%, color-mix(in srgb, currentcolor 15%, transparent) 2%) center/15000% 15000%;
+  background: var(--pf-v6-c-button--BackgroundColor) var(--pf-v6-c-button--Background--click);
   border: 0;
   border-start-start-radius: var(--pf-v6-c-button--BorderStartStartRadius, var(--pf-v6-c-button--BorderRadius));
   border-start-end-radius: var(--pf-v6-c-button--BorderStartEndRadius, var(--pf-v6-c-button--BorderRadius));
@@ -682,7 +686,16 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 }
 .pf-v6-c-button.pf-m-block {
   --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
+  --pf-v6-c-button__progress--Position: relative;
+  --pf-v6-c-button__progress--InsetBlockStart: 0;
+  --pf-v6-c-button__progress--InsetInlineStart: 0;
+  --pf-v6-c-button__progress--TranslateY: 0;
   width: var(--pf-v6-c-button--m-block--Width);
+  transition-duration: var(--pf-v6-c-button--m-progress--TransitionDuration);
+  transition-property: var(--pf-v6-c-button--m-progress--TransitionProperty);
+}
+.pf-v6-c-button.pf-m-block .pf-v6-c-button__progress {
+  align-self: center;
 }
 .pf-v6-c-button.pf-m-small {
   --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
@@ -761,7 +774,6 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
   --pf-v6-c-button__icon--TransitionDuration: 0s;
   --pf-v6-c-button__icon--TransitionProperty: scale;
-  --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
   --pf-v6-c-button--hover__icon--TransitionDuration: 0s;
   --pf-v6-c-button--hover__icon--TransitionProperty: scale;
 }
@@ -834,10 +846,10 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 .pf-v6-c-button:disabled, .pf-v6-c-button.pf-m-disabled, .pf-v6-c-button.pf-m-aria-disabled {
   color: var(--pf-v6-c-button--disabled--Color);
   text-decoration-color: var(--pf-v6-c-button--disabled--TextDecorationColor);
-  background: var(--pf-v6-c-button--disabled--BackgroundColor);
+  background: var(--pf-v6-c-button--disabled--BackgroundColor) var(--pf-v6-c-button--Background--click);
 }
 .pf-v6-c-button:disabled::after, .pf-v6-c-button.pf-m-disabled::after, .pf-v6-c-button.pf-m-aria-disabled::after {
-  border-color: transparent;
+  border-color: var(--pf-v6-c-button--disabled--BorderColor);
 }
 .pf-v6-c-button:disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-disabled .pf-v6-c-button__icon, .pf-v6-c-button.pf-m-aria-disabled .pf-v6-c-button__icon {
   color: var(--pf-v6-c-button--disabled__icon--Color);
@@ -885,11 +897,11 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
     display: none;
   }
 }
-:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked, .pf-v6-c-button.pf-m-text-expanded {
+:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-button.pf-m-docked, .pf-v6-c-button:is(.pf-m-text-expanded, .pf-m-expandable-expanded) {
   justify-content: flex-start;
   width: 100%;
 }
-:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock).pf-m-text-expanded .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button.pf-m-text-expanded .pf-v6-c-button__text {
+:is(.pf-v6-c-page__dock, .pf-v6-c-compass__dock):is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-button.pf-m-docked .pf-v6-c-button__text, .pf-v6-c-button:is(.pf-m-text-expanded, .pf-m-expandable-expanded) .pf-v6-c-button__text {
   display: revert;
 }
 
@@ -927,7 +939,7 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
 }
 
 .pf-v6-c-button__progress {
-  position: absolute;
+  position: var(--pf-v6-c-button__progress--Position);
   inset-block-start: var(--pf-v6-c-button__progress--InsetBlockStart);
   inset-inline-start: var(--pf-v6-c-button__progress--InsetInlineStart);
   line-height: 1;

package/css/components/Button/button.d.ts

@@ -48,6 +48,7 @@ declare const _default: {
     "notify": "pf-m-notify",
     "docked": "pf-m-docked",
     "textExpanded": "pf-m-text-expanded",
+    "expandableExpanded": "pf-m-expandable-expanded",
     "start": "pf-m-start",
     "end": "pf-m-end"
   },

package/css/components/Button/button.js

@@ -50,6 +50,7 @@ exports.default = {
     "notify": "pf-m-notify",
     "docked": "pf-m-docked",
     "textExpanded": "pf-m-text-expanded",
+    "expandableExpanded": "pf-m-expandable-expanded",
     "start": "pf-m-start",
     "end": "pf-m-end"
   },

package/css/components/Button/button.mjs

@@ -48,6 +48,7 @@ export default {
     "notify": "pf-m-notify",
     "docked": "pf-m-docked",
     "textExpanded": "pf-m-text-expanded",
+    "expandableExpanded": "pf-m-expandable-expanded",
     "start": "pf-m-start",
     "end": "pf-m-end"
   },

package/css/components/Card/card.css

@@ -22,13 +22,13 @@
   --pf-v6-c-card__footer--Color: var(--pf-t--global--text--color--subtle);
   --pf-v6-c-card__actions--PaddingInlineStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-card__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
-  --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-card__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --pf-v6-c-card__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --pf-v6-c-card__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-card__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
-  --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-card__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --pf-v6-c-card__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
-  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-card__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --pf-v6-c-card__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --pf-v6-c-card__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);

package/css/components/ClipboardCopy/clipboard-copy.css

@@ -86,7 +86,7 @@
 }
 
 .pf-v6-c-clipboard-copy__text {
-  overflow-wrap: break-word;
+  overflow-wrap: anywhere;
   white-space: normal;
 }
 .pf-v6-c-clipboard-copy__text.pf-m-code {

package/css/components/Compass/compass.css

@@ -103,13 +103,18 @@
   align-items: stretch;
   padding: 0;
 }
-.pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
-  padding: var(--pf-v6-c-compass--Padding);
+.pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container .pf-v6-c-compass__header {
+  all: revert;
 }
-.pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
-  --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
+.pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container > :is(.pf-v6-c-compass__header, .pf-v6-c-masthead) {
   grid-area: header;
 }
+.pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container > .pf-v6-c-masthead {
+  --pf-v6-c-masthead--BackgroundColor: var(--pf-v6-c-compass--m-docked__masthead--BackgroundColor);
+}
+.pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__main {
+  padding: var(--pf-v6-c-compass--Padding);
+}
 @media (min-width: 62rem) {
   .pf-v6-c-compass.pf-m-docked .pf-v6-c-compass__container {
     grid-template-areas: "dock main";
@@ -119,11 +124,11 @@
     align-items: stretch;
     padding: 0;
   }
-  .pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > .pf-v6-c-masthead {
+  .pf-v6-c-compass.pf-m-docked > .pf-v6-c-compass__container > :is(.pf-v6-c-compass__header, .pf-v6-c-masthead) {
     display: none;
   }
 }
-.pf-v6-c-compass > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
+.pf-v6-c-compass__container > .pf-v6-c-masthead .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
   --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
   --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
   --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
@@ -132,16 +137,8 @@
   --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
   --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
 }
-.pf-v6-c-compass:where(:has(> .pf-v6-c-compass__dock.pf-m-expanded)) > .pf-v6-c-masthead .pf-v6-c-masthead__toggle :is(.pf-v6-c-button.pf-m-hamburger, .pf-v6-c-button.pf-m-hamburger:hover, .pf-v6-c-button.pf-m-hamburger:focus-visible) {
-  --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
-  --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
-  --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
-  --pf-v6-c-button__icon--TransitionDelay: 0s;
-  --pf-v6-c-button__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
-  --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
-  --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
-}
-.pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
+
+.pf-v6-c-compass .pf-v6-c-compass__dock:is(.pf-m-expanded, .pf-m-expandable-expanded) .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
   --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
   --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
   --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
@@ -151,15 +148,15 @@
   --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-collapse--ScaleX);
 }
 @media (min-width: 62rem) {
-  .pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
-  .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
+  .pf-v6-c-compass .pf-v6-c-compass__dock:not(.pf-m-expandable-expanded) .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger,
+  .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-expanded:not(.pf-m-expandable-expanded) .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger {
     --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--path--base);
     --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--path--base);
     --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--path--base);
     --pf-v6-c-button__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
     --pf-v6-c-button--hover__icon--TransitionDelay: var(--pf-v6-c-button--hamburger-icon--TransitionDuration);
   }
-  .pf-v6-c-compass .pf-v6-c-compass__dock .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
+  .pf-v6-c-compass .pf-v6-c-compass__dock:not(.pf-m-expandable-expanded) .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
     --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
     --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
     --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
@@ -168,7 +165,7 @@
     --pf-v6-c-button--hover__icon--TransitionDelay: 0s;
     --pf-v6-c-button--hover__icon--ScaleX: var(--pf-v6-c-button--m-hamburger__icon--m-expand--ScaleX);
   }
-  .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-text-expanded .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
+  .pf-v6-c-compass .pf-v6-c-compass__dock.pf-m-text-expanded:not(.pf-m-expandable-expanded) .pf-v6-c-masthead__toggle .pf-v6-c-button.pf-m-hamburger:is(:hover, :focus-visible) {
     --pf-v6-c-button--hamburger-icon--top--path: var(--pf-v6-c-button--hamburger-icon--top--collapse--path);
     --pf-v6-c-button--hamburger-icon--arrow--path: var(--pf-v6-c-button--hamburger-icon--arrow--collapse--path);
     --pf-v6-c-button--hamburger-icon--bottom--path: var(--pf-v6-c-button--hamburger-icon--bottom--collapse--path);
@@ -322,14 +319,14 @@
   translate: -100% 0;
   transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide), visibility 0s var(--pf-v6-c-compass__dock--TransitionDuration--slide);
 }
-.pf-v6-c-compass__dock.pf-m-expanded {
+.pf-v6-c-compass__dock.pf-m-expanded, .pf-v6-c-compass__dock.pf-m-expandable-expanded {
   --pf-v6-c-compass__dock--TransitionDuration--slide: var(--pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide);
   visibility: visible;
   translate: 0;
   transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide), visibility 0s 0s;
 }
 @media (min-width: 62rem) {
-  .pf-v6-c-compass__dock {
+  .pf-v6-c-compass__dock:not(.pf-m-expandable-expanded) {
     --pf-v6-c-compass__dock-main--BackgroundColor: var(--pf-v6-c-compass__dock-main--desktop--BackgroundColor);
     --pf-v6-c-compass__dock-main--BorderInlineEndColor: var(--pf-v6-c-compass__dock-main--desktop--BorderInlineEndColor);
     position: revert;
@@ -353,12 +350,12 @@
   box-shadow: var(--pf-v6-c-compass__dock-main--BoxShadow);
   backdrop-filter: var(--pf-v6-c-compass__dock-main--BackdropFilter);
 }
-.pf-v6-c-compass__dock.pf-m-expanded .pf-v6-c-compass__dock-main {
+.pf-v6-c-compass__dock:is(.pf-m-expanded, .pf-m-expandable-expanded) .pf-v6-c-compass__dock-main {
   border-inline-end: var(--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth) solid var(--pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndColor);
   box-shadow: var(--pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow);
 }
 @media (min-width: 62rem) {
-  .pf-v6-c-compass__dock-main {
+  .pf-v6-c-compass__dock:not(.pf-m-expandable-expanded) .pf-v6-c-compass__dock-main {
     --pf-v6-c-compass__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
     --pf-v6-c-compass__dock--m-expanded__dock-main--BoxShadow: var(--pf-v6-c-compass__dock-main--desktop--BoxShadow);
     --pf-v6-c-compass__dock--m-expanded__dock-main--BorderInlineEndWidth: var(--pf-v6-c-compass__dock-main--BorderInlineEndWidth);

package/css/components/Compass/compass.d.ts

@@ -27,6 +27,7 @@ declare const _default: {
     "docked": "pf-m-docked",
     "hamburger": "pf-m-hamburger",
     "expanded": "pf-m-expanded",
+    "expandableExpanded": "pf-m-expandable-expanded",
     "textExpanded": "pf-m-text-expanded",
     "start": "pf-m-start",
     "end": "pf-m-end",

package/css/components/Compass/compass.js

@@ -29,6 +29,7 @@ exports.default = {
     "docked": "pf-m-docked",
     "hamburger": "pf-m-hamburger",
     "expanded": "pf-m-expanded",
+    "expandableExpanded": "pf-m-expandable-expanded",
     "textExpanded": "pf-m-text-expanded",
     "start": "pf-m-start",
     "end": "pf-m-end",

package/css/components/Compass/compass.mjs

@@ -27,6 +27,7 @@ export default {
     "docked": "pf-m-docked",
     "hamburger": "pf-m-hamburger",
     "expanded": "pf-m-expanded",
+    "expandableExpanded": "pf-m-expandable-expanded",
     "textExpanded": "pf-m-text-expanded",
     "start": "pf-m-start",
     "end": "pf-m-end",

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

@@ -424,7 +424,7 @@
   --pf-v6-c-data-list--pf-m-plain__item--BackgroundColor: transparent;
   --pf-v6-c-data-list__item--hover--BackgroundColor: var(--pf-t--global--background--color--primary--hover);
   --pf-v6-c-data-list__item--m-selected--BackgroundColor: var(--pf-t--global--background--color--primary--clicked);
-  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(-1 * var(--pf-t--global--spacer--xs));
+  --pf-v6-c-data-list__item--m-clickable--OutlineOffset: calc(var(--pf-t--global--spacer--xs) * -1);
   --pf-v6-c-data-list__item--BorderBlockEndColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-data-list__item--BorderBlockEndWidth: var(--pf-t--global--border--width--strong);
   --pf-v6-c-data-list__item--sm--BorderBlockEndWidth: var(--pf-t--global--border--width--divider--default);
@@ -457,8 +457,8 @@
   --pf-v6-c-data-list--cell--WordBreak: normal;
   --pf-v6-c-data-list--cell--m-truncate--MinWidth: 5ch;
   --pf-v6-c-data-list__toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
-  --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-data-list__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --pf-v6-c-data-list__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --pf-v6-c-data-list__toggle-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
   --pf-v6-c-data-list__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-data-list__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
@@ -470,7 +470,7 @@
   --pf-v6-c-data-list__item-draggable-button--PaddingInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-data-list__item-draggable-button--MarginBlockStart: calc(var(--pf-t--global--spacer--lg) * -1);
   --pf-v6-c-data-list__item-draggable-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--lg) * -1);
-  --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--lg);
+  --pf-v6-c-data-list__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list__cell--PaddingBlockStart);
   --pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-data-list__item-draggable-button--MarginInlineStart: calc(var(--pf-t--global--spacer--md) * -1);
   --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-t--global--icon--color--subtle);
@@ -485,12 +485,12 @@
   --pf-v6-c-data-list__item-control--md--MarginInlineEnd: var(--pf-t--global--spacer--xl);
   --pf-v6-c-data-list__item-control--not-last-child--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-data-list__check--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
-  --pf-v6-c-data-list__check--MarginBlockStart: -0.0625rem;
+  --pf-v6-c-data-list__check--MarginBlockStart: 0;
   --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--PaddingBlockStart--offset: var(--pf-t--global--spacer--control--vertical--plain);
+  --pf-v6-c-data-list__item-action--PaddingBlockEnd--offset: var(--pf-t--global--spacer--control--vertical--plain);
   --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);
@@ -528,7 +528,7 @@
   --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);
-  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockStart: var(--pf-v6-c-data-list--m-compact__cell--PaddingBlockStart);
   --pf-v6-c-data-list--m-compact__item-draggable-button--PaddingBlockEnd: var(--pf-t--global--spacer--xs);
   --pf-v6-c-data-list--m-compact__cell--m-icon--cell--PaddingBlockStart: var(--pf-t--global--spacer--sm);
 }
@@ -658,9 +658,10 @@
   cursor: pointer;
 }
 
-.pf-v6-c-data-list__item-draggable-button {
+.pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain {
   display: flex;
   flex-direction: column;
+  justify-content: start;
   padding-block-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-data-list__item-draggable-button--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-data-list__item-draggable-button--PaddingInlineStart);
@@ -668,24 +669,25 @@
   margin-block-start: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockStart);
   margin-block-end: var(--pf-v6-c-data-list__item-draggable-button--MarginBlockEnd);
   margin-inline-start: var(--pf-v6-c-data-list__item-draggable-button--MarginInlineStart);
+  line-height: 1lh;
   background-color: var(--pf-v6-c-data-list__item-draggable-button--BackgroundColor);
   border: 0;
 }
-.pf-v6-c-data-list__item-draggable-button:hover {
+.pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:hover {
   --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--hover__draggable-icon--Color);
   cursor: grab;
 }
-.pf-v6-c-data-list__item-draggable-button:focus {
+.pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:focus {
   --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--focus__draggable-icon--Color);
 }
-.pf-v6-c-data-list__item-draggable-button:active {
+.pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:active {
   cursor: grabbing;
 }
-.pf-v6-c-data-list__item-draggable-button.pf-m-disabled {
+.pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain:is(:disabled, .pf-m-disabled) {
   --pf-v6-c-data-list__item-draggable-button-icon--Color: var(--pf-v6-c-data-list__item-draggable-button--m-disabled__draggable-icon--Color);
   pointer-events: none;
 }
-.pf-v6-c-data-list__item-draggable-button .pf-v6-c-data-list__item-draggable-icon {
+.pf-v6-c-data-list__item-draggable-button.pf-v6-c-button.pf-m-plain .pf-v6-c-data-list__item-draggable-icon {
   color: var(--pf-v6-c-data-list__item-draggable-button-icon--Color);
 }
 

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

@@ -1,5 +1,6 @@
 import './data-list.css';
 declare const _default: {
+  "button": "pf-v6-c-button",
   "dataList": "pf-v6-c-data-list",
   "dataListCell": "pf-v6-c-data-list__cell",
   "dataListCheck": "pf-v6-c-data-list__check",

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

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

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

@@ -1,5 +1,6 @@
 import './data-list.css';
 export default {
+  "button": "pf-v6-c-button",
   "dataList": "pf-v6-c-data-list",
   "dataListCell": "pf-v6-c-data-list__cell",
   "dataListCheck": "pf-v6-c-data-list__check",

package/css/components/DualListSelector/dual-list-selector.css

@@ -76,7 +76,7 @@
   --pf-v6-c-dual-list-selector__item-count--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-dual-list-selector__item--c-badge--m-read--BackgroundColor: var(--pf-t--global--color--nonstatus--gray--default);
   --pf-v6-c-dual-list-selector__item-toggle-icon--Rotate: 0;
-  --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: -180deg;
+  --pf-v6-c-dual-list-selector__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
   --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth: var(--pf-v6-c-dual-list-selector__list-item-row--FontSize);

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

@@ -16,6 +16,10 @@
   --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);
   --pf-v6-c-form-control--Width: 100%;
+  --pf-v6-c-form-control--TransitionDelay: 0s;
+  --pf-v6-c-form-control--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-form-control--TransitionDuration: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-form-control--TransitionProperty: color, background-color, border-color;
   --pf-v6-c-form-control--inset--base: var(--pf-t--global--spacer--control--horizontal--default);
   --pf-v6-c-form-control--PaddingBlockStart--base: var(--pf-t--global--spacer--control--vertical--default);
   --pf-v6-c-form-control--PaddingBlockEnd--base: var(--pf-t--global--spacer--control--vertical--default);
@@ -121,12 +125,17 @@
   resize: var(--pf-v6-c-form-control--Resize);
   background-color: var(--pf-v6-c-form-control--BackgroundColor);
   border-radius: var(--pf-v6-c-form-control--BorderRadius);
+  transition-delay: var(--pf-v6-c-form-control--TransitionDelay);
+  transition-timing-function: var(--pf-v6-c-form-control--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-form-control--TransitionDuration);
+  transition-property: var(--pf-v6-c-form-control--TransitionProperty);
 }
 .pf-v6-c-form-control::before, .pf-v6-c-form-control::after {
   position: absolute;
   inset: 0;
   pointer-events: none;
   content: "";
+  transition: inherit;
 }
 .pf-v6-c-form-control::before {
   border-color: var(--pf-v6-c-form-control--before--BorderColor);
@@ -222,10 +231,11 @@
   --pf-v6-c-form-control--Color: var(--pf-v6-c-form-control--m-disabled--Color);
   --pf-v6-c-form-control--m-placeholder--Color: var(--pf-v6-c-form-control--m-disabled--Color);
   --pf-v6-c-form-control__toggle-icon--Color: var(--pf-v6-c-form-control--m-disabled__toggle-icon--Color);
-  --pf-v6-c-form-control--before--BorderStyle: none;
-  --pf-v6-c-form-control--after--BorderStyle: none;
   cursor: not-allowed;
 }
+.pf-v6-c-form-control.pf-m-disabled::before, .pf-v6-c-form-control.pf-m-disabled::after {
+  border-color: transparent;
+}
 .pf-v6-c-form-control.pf-m-error {
   --pf-v6-c-form-control--after--BorderColor: var(--pf-v6-c-form-control--m-error--after--BorderColor);
   --pf-v6-c-form-control--hover--after--BorderColor: var(--pf-v6-c-form-control--m-error--hover--after--BorderColor);

package/css/components/Hint/hint.css

@@ -14,8 +14,8 @@
   --pf-v6-c-hint__footer--MarginBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-hint__footer--child--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-hint__actions--MarginInlineStart: var(--pf-t--global--spacer--2xl);
-  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
-  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
+  --pf-v6-c-hint__actions--c-menu-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
 }
 
 .pf-v6-c-hint {