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

package/CHANGELOG.md

@@ -3,10 +3,54 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [6.6.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.6.0...@patternfly/react-styles@6.6.1) (2026-08-03)
+# [6.7.0-prerelease.1](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.7.0-prerelease.0...@patternfly/react-styles@6.7.0-prerelease.1) (2026-09-30)
+
+### Features
+
+- **Page,Compass,Nav,MenuToggle,Button:** simplify docked nav expand props ([#12661](https://github.com/patternfly/patternfly-react/issues/12661)) ([dab7e8a](https://github.com/patternfly/patternfly-react/commit/dab7e8a28ef70eee1764d682d19fa40c622fb4dd))
+
+### Reverts
+
+- Revert "chore(release): releasing packages [ci skip]" (#12663) ([de8fb05](https://github.com/patternfly/patternfly-react/commit/de8fb05e58ffdf9adf30f8225a03783c70978df6)), closes [#12663](https://github.com/patternfly/patternfly-react/issues/12663)
+
+# [6.7.0-prerelease.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.6.1-prerelease.4...@patternfly/react-styles@6.7.0-prerelease.0) (2026-09-28)
 
 **Note:** Version bump only for package @patternfly/react-styles
 
+## [6.6.1-prerelease.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.6.1-prerelease.3...@patternfly/react-styles@6.6.1-prerelease.4) (2026-09-24)
+
+### Bug Fixes
+
+- **deps:** prerelease bump ([#12659](https://github.com/patternfly/patternfly-react/issues/12659)) ([eb08cef](https://github.com/patternfly/patternfly-react/commit/eb08cef1479219a9a11ae441fafc3f73a938ed30))
+
+## [6.6.1-prerelease.3](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.6.1-prerelease.2...@patternfly/react-styles@6.6.1-prerelease.3) (2026-09-15)
+
+### Features
+
+- **Drawer:** Add full-size drawer ([#12641](https://github.com/patternfly/patternfly-react/issues/12641)) ([9930770](https://github.com/patternfly/patternfly-react/commit/9930770624d75e6d0b7b0e8480cc198b71906f7e))
+
+## [6.6.1-prerelease.2](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.6.1-prerelease.1...@patternfly/react-styles@6.6.1-prerelease.2) (2026-09-11)
+
+### Features
+
+- **Page:** add PageFooter and isPlain ([#12642](https://github.com/patternfly/patternfly-react/issues/12642)) ([6e3dd0e](https://github.com/patternfly/patternfly-react/commit/6e3dd0e11b69671d46742346c818d4463e9b964b))
+
+## [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/Backdrop/backdrop.css

@@ -2,6 +2,13 @@
   --pf-v6-c-backdrop--Position: fixed;
   --pf-v6-c-backdrop--ZIndex: var(--pf-t--global--z-index--lg);
   --pf-v6-c-backdrop--BackgroundColor: var(--pf-t--global--background--color--backdrop--default);
+  --pf-v6-c-backdrop--m-animate--Opacity: 0;
+  --pf-v6-c-backdrop--m-animate--TransitionProperty: opacity, visibility;
+  --pf-v6-c-backdrop--m-animate--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--accelerate);
+  --pf-v6-c-backdrop--m-animate--TransitionDuration: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-backdrop--m-animate--m-show--TransitionDuration: var(--pf-t--global--motion--duration--fade--default), 0s;
+  --pf-v6-c-backdrop--m-animate--m-show--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+  --pf-v6-c-backdrop--m-animate--m-show--Opacity: 1;
 }
 
 .pf-v6-c-backdrop {
@@ -13,6 +20,33 @@
   height: 100%;
   background-color: var(--pf-v6-c-backdrop--BackgroundColor);
 }
+.pf-v6-c-backdrop.pf-m-animate {
+  visibility: hidden;
+  background-color: transparent;
+}
+.pf-v6-c-backdrop.pf-m-animate::before {
+  position: absolute;
+  inset: 0;
+  content: "";
+  background-color: var(--pf-v6-c-backdrop--BackgroundColor);
+  opacity: var(--pf-v6-c-backdrop--m-animate--Opacity);
+  transition-timing-function: var(--pf-v6-c-backdrop--m-animate--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-backdrop--m-animate--TransitionDuration);
+  transition-property: var(--pf-v6-c-backdrop--m-animate--TransitionProperty, none);
+}
+.pf-v6-c-backdrop.pf-m-show {
+  --pf-v6-c-backdrop--m-animate--TransitionDuration: var(--pf-v6-c-backdrop--m-animate--m-show--TransitionDuration);
+  --pf-v6-c-backdrop--m-animate--TransitionTimingFunction: var(--pf-v6-c-backdrop--m-animate--m-show--TransitionTimingFunction);
+  visibility: visible;
+}
+.pf-v6-c-backdrop.pf-m-show::before {
+  opacity: var(--pf-v6-c-backdrop--m-animate--m-show--Opacity);
+}
+@starting-style {
+  .pf-v6-c-backdrop.pf-m-show::before {
+    opacity: 0;
+  }
+}
 
 .pf-v6-c-backdrop__open {
   overflow: hidden;

package/css/components/Backdrop/backdrop.d.ts

@@ -1,6 +1,10 @@
 import './backdrop.css';
 declare const _default: {
   "backdrop": "pf-v6-c-backdrop",
-  "backdropOpen": "pf-v6-c-backdrop__open"
+  "backdropOpen": "pf-v6-c-backdrop__open",
+  "modifiers": {
+    "animate": "pf-m-animate",
+    "show": "pf-m-show"
+  }
 };
 export default _default;

package/css/components/Backdrop/backdrop.js

@@ -3,5 +3,9 @@ exports.__esModule = true;
 require('./backdrop.css');
 exports.default = {
   "backdrop": "pf-v6-c-backdrop",
-  "backdropOpen": "pf-v6-c-backdrop__open"
+  "backdropOpen": "pf-v6-c-backdrop__open",
+  "modifiers": {
+    "animate": "pf-m-animate",
+    "show": "pf-m-show"
+  }
 };

package/css/components/Backdrop/backdrop.mjs

@@ -1,5 +1,9 @@
 import './backdrop.css';
 export default {
   "backdrop": "pf-v6-c-backdrop",
-  "backdropOpen": "pf-v6-c-backdrop__open"
+  "backdropOpen": "pf-v6-c-backdrop__open",
+  "modifiers": {
+    "animate": "pf-m-animate",
+    "show": "pf-m-show"
+  }
 };

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).pf-m-expanded .pf-v6-c-button.pf-m-docked {
   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).pf-m-expanded .pf-v6-c-button.pf-m-docked .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

@@ -47,7 +47,7 @@ declare const _default: {
     "inProgress": "pf-m-in-progress",
     "notify": "pf-m-notify",
     "docked": "pf-m-docked",
-    "textExpanded": "pf-m-text-expanded",
+    "expanded": "pf-m-expanded",
     "start": "pf-m-start",
     "end": "pf-m-end"
   },

package/css/components/Button/button.js

@@ -49,7 +49,7 @@ exports.default = {
     "inProgress": "pf-m-in-progress",
     "notify": "pf-m-notify",
     "docked": "pf-m-docked",
-    "textExpanded": "pf-m-text-expanded",
+    "expanded": "pf-m-expanded",
     "start": "pf-m-start",
     "end": "pf-m-end"
   },

package/css/components/Button/button.mjs

@@ -47,7 +47,7 @@ export default {
     "inProgress": "pf-m-in-progress",
     "notify": "pf-m-notify",
     "docked": "pf-m-docked",
-    "textExpanded": "pf-m-text-expanded",
+    "expanded": "pf-m-expanded",
     "start": "pf-m-start",
     "end": "pf-m-end"
   },

package/css/components/Check/check.css

@@ -2,6 +2,7 @@
   --pf-v6-c-check--GridGap: var(--pf-t--global--spacer--gap--group--vertical) var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-check--AccentColor: var(--pf-t--global--color--brand--default);
   --pf-v6-c-check--m-standalone--MinHeight: calc(var(--pf-v6-c-check__label--FontSize) * var(--pf-v6-c-check__label--LineHeight));
+  --pf-v6-c-check--m-standalone--before--Inset: calc(var(--pf-t--global--spacer--sm) * -1);
   --pf-v6-c-check__label--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-check__label--Color: var(--pf-t--global--text--color--regular);
   --pf-v6-c-check__label--FontWeight: var(--pf-t--global--font--weight--body--default);
@@ -26,6 +27,19 @@
   grid-template-columns: auto;
   min-height: var(--pf-v6-c-check--m-standalone--MinHeight);
 }
+label.pf-v6-c-check.pf-m-standalone {
+  position: relative;
+  isolation: isolate;
+}
+label.pf-v6-c-check.pf-m-standalone::before {
+  position: absolute;
+  inset: var(--pf-v6-c-check--m-standalone--before--Inset);
+  z-index: -1;
+  pointer-events: auto;
+  cursor: inherit;
+  content: "";
+}
+
 .pf-v6-c-check.pf-m-standalone .pf-v6-c-check__input {
   align-self: center;
   transform: none;

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,15 +137,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: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-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);
@@ -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-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,8 @@
   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--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-overlay) {
     --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;
@@ -342,8 +333,12 @@
 .pf-v6-c-compass__dock .pf-v6-c-toolbar.pf-m-vertical :is(.pf-v6-c-toolbar__content-section, .pf-v6-c-toolbar__group, .pf-v6-c-toolbar__item) {
   align-items: stretch;
 }
-.pf-v6-c-compass__dock.pf-m-text-expanded {
+.pf-v6-c-compass__dock.pf-m-expanded {
+  --pf-v6-c-compass__dock--TransitionDuration--slide: var(--pf-v6-c-compass__dock--m-expanded--TransitionDuration--slide);
+  visibility: visible;
   width: var(--pf-v6-c-compass__dock--Width);
+  translate: 0;
+  transition: translate var(--pf-v6-c-compass__dock--TransitionDuration--slide) var(--pf-v6-c-compass__dock--TransitionTimingFunction--slide), visibility 0s 0s;
 }
 
 .pf-v6-c-compass__dock-main {
@@ -358,7 +353,7 @@
   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-overlay) .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,10 +27,10 @@ declare const _default: {
     "docked": "pf-m-docked",
     "hamburger": "pf-m-hamburger",
     "expanded": "pf-m-expanded",
-    "textExpanded": "pf-m-text-expanded",
     "start": "pf-m-start",
     "end": "pf-m-end",
     "plain": "pf-m-plain",
+    "overlay": "pf-m-overlay",
     "vertical": "pf-m-vertical"
   },
   "panel": "pf-v6-c-panel",

package/css/components/Compass/compass.js

@@ -29,10 +29,10 @@ exports.default = {
     "docked": "pf-m-docked",
     "hamburger": "pf-m-hamburger",
     "expanded": "pf-m-expanded",
-    "textExpanded": "pf-m-text-expanded",
     "start": "pf-m-start",
     "end": "pf-m-end",
     "plain": "pf-m-plain",
+    "overlay": "pf-m-overlay",
     "vertical": "pf-m-vertical"
   },
   "panel": "pf-v6-c-panel",

package/css/components/Compass/compass.mjs

@@ -27,10 +27,10 @@ export default {
     "docked": "pf-m-docked",
     "hamburger": "pf-m-hamburger",
     "expanded": "pf-m-expanded",
-    "textExpanded": "pf-m-text-expanded",
     "start": "pf-m-start",
     "end": "pf-m-end",
     "plain": "pf-m-plain",
+    "overlay": "pf-m-overlay",
     "vertical": "pf-m-vertical"
   },
   "panel": "pf-v6-c-panel",

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

@@ -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,7 +485,7 @@
   --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);
@@ -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/Drawer/drawer.css

@@ -243,6 +243,16 @@
 .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
   flex-direction: column;
 }
+.pf-v6-c-drawer.pf-m-viewport {
+  position: fixed;
+  inset: 0;
+  z-index: var(--pf-t--global--z-index--lg);
+  pointer-events: none;
+}
+.pf-v6-c-drawer.pf-m-viewport > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+  overscroll-behavior: none;
+  pointer-events: auto;
+}
 .pf-v6-c-drawer.pf-m-expanded {
   --pf-v6-c-drawer--m-pill--m-inline__main--Gap: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);

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

@@ -21,6 +21,7 @@ declare const _default: {
     "noBorder": "pf-m-no-border",
     "resizable": "pf-m-resizable",
     "panelLeft": "pf-m-panel-left",
+    "viewport": "pf-m-viewport",
     "expanded": "pf-m-expanded",
     "resizing": "pf-m-resizing",
     "pill": "pf-m-pill",

package/css/components/Drawer/drawer.js

@@ -23,6 +23,7 @@ exports.default = {
     "noBorder": "pf-m-no-border",
     "resizable": "pf-m-resizable",
     "panelLeft": "pf-m-panel-left",
+    "viewport": "pf-m-viewport",
     "expanded": "pf-m-expanded",
     "resizing": "pf-m-resizing",
     "pill": "pf-m-pill",

package/css/components/Drawer/drawer.mjs

@@ -21,6 +21,7 @@ export default {
     "noBorder": "pf-m-no-border",
     "resizable": "pf-m-resizable",
     "panelLeft": "pf-m-panel-left",
+    "viewport": "pf-m-viewport",
     "expanded": "pf-m-expanded",
     "resizing": "pf-m-resizing",
     "pill": "pf-m-pill",

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);