@patternfly/react-styles 6.2.0-prerelease.9 → 6.2.1-prerelease.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.2.1-prerelease.0](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.2.0...@patternfly/react-styles@6.2.1-prerelease.0) (2025-04-14)
+
+### Features
+
+- **Page:** Added support for sidebar-less layout ([#11760](https://github.com/patternfly/patternfly-react/issues/11760)) ([217aad3](https://github.com/patternfly/patternfly-react/commit/217aad3241e79b02ab8f1f74fd1d8022860a138b))
+
+# 6.2.0 (2025-04-07)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [6.2.0-prerelease.12](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.2.0-prerelease.11...@patternfly/react-styles@6.2.0-prerelease.12) (2025-04-01)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+# [6.2.0-prerelease.11](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.2.0-prerelease.10...@patternfly/react-styles@6.2.0-prerelease.11) (2025-03-20)
+
+### Bug Fixes
+
+- **deps:** update dependency @patternfly/patternfly to v6.2.0-prerelease.20 ([#11653](https://github.com/patternfly/patternfly-react/issues/11653)) ([f4df244](https://github.com/patternfly/patternfly-react/commit/f4df244b1fe68c1ac34bff7379f2bb6558676fb2))
+- **deps:** update dependency @patternfly/patternfly to v6.2.0-prerelease.23 ([#11660](https://github.com/patternfly/patternfly-react/issues/11660)) ([01006e6](https://github.com/patternfly/patternfly-react/commit/01006e6ec3085a3e25fb47904206e5476013e0eb))
+
+### Features
+
+- **Alert:** added animations ([#11495](https://github.com/patternfly/patternfly-react/issues/11495)) ([74dd258](https://github.com/patternfly/patternfly-react/commit/74dd258abb9f329dc2fc3fcaaa6fc4de460fc088))
+- **ClipboardCopy:** added truncation for inlinecompact variant ([#11610](https://github.com/patternfly/patternfly-react/issues/11610)) ([48b5749](https://github.com/patternfly/patternfly-react/commit/48b5749dfda3841aaaeea995659f2094272dc999))
+
+# [6.2.0-prerelease.10](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.2.0-prerelease.9...@patternfly/react-styles@6.2.0-prerelease.10) (2025-03-11)
+
+### Bug Fixes
+
+- **deps:** update dependency @patternfly/patternfly to v6.2.0-prerelease.19 ([#11642](https://github.com/patternfly/patternfly-react/issues/11642)) ([420232c](https://github.com/patternfly/patternfly-react/commit/420232c5172a26c7921ac43469c8910d31c932b2))
+
 # [6.2.0-prerelease.9](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-styles@6.2.0-prerelease.8...@patternfly/react-styles@6.2.0-prerelease.9) (2025-03-10)
 
 ### Bug Fixes

package/css/components/Accordion/accordion.css

@@ -17,7 +17,9 @@
   --pf-v6-c-accordion__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--default);
   --pf-v6-c-accordion__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-accordion--m-display-lg__toggle--m-expanded__toggle-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
-  --pf-v6-c-accordion__toggle-icon--Transition: .2s ease-in 0s;
+  --pf-v6-c-accordion__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-accordion__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --pf-v6-c-accordion__toggle-icon--Transition: transform var(--pf-v6-c-accordion__toggle-icon--TransitionDuration) var(--pf-v6-c-accordion__toggle-icon--TransitionTimingFunction);
   --pf-v6-c-accordion__toggle--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v6-c-accordion__expandable-content--MarginInlineEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-accordion__expandable-content--MarginBlockEnd: var(--pf-t--global--spacer--md);

package/css/components/Alert/alert-group.css

@@ -105,14 +105,14 @@
     transition: var(--pf-v6-c-alert-group--m-toast__item--c-alert--Transition);
   }
 }
-.pf-v6-c-alert-group__item.pf-m-offstage-top {
+.pf-v6-c-alert-group__item.pf-m-offstage-top:first-child {
   grid-template-rows: 0fr;
   margin-block: 0;
   overflow: hidden;
   opacity: 0;
   transform: translateY(-100%);
 }
-.pf-v6-c-alert-group__item.pf-m-offstage-top .pf-v6-c-alert {
+.pf-v6-c-alert-group__item.pf-m-offstage-top:first-child .pf-v6-c-alert {
   min-height: 0;
   padding-block-start: 0;
   padding-block-end: 0;

package/css/components/Banner/banner.css

@@ -129,8 +129,8 @@
   cursor: not-allowed;
 }
 .pf-v6-c-banner .pf-v6-c-button.pf-m-inline {
-  --pf-v6-c-button--m-link--Color: var(--pf-v6-c-banner--link--Color);
-  --pf-v6-c-button--m-link--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
+  --pf-v6-c-button--m-link--m-inline--Color: var(--pf-v6-c-banner--link--Color);
+  --pf-v6-c-button--m-link--m-inline--hover--Color: var(--pf-v6-c-banner--link--hover--Color);
   --pf-v6-c-button--disabled--Color: var(--pf-v6-c-banner--link--disabled--Color);
   text-decoration-line: var(--pf-v6-c-banner--link--TextDecoration);
 }

package/css/components/Button/button.css

@@ -237,6 +237,12 @@
   --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
   --pf-v6-c-button--m-notify__icon--AnimationDuration--notify: var(--pf-t--global--motion--duration--3xl);
   --pf-v6-c-button--m-notify__icon--AnimationTimingFunction--notify: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-button--m-favorite__icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --pf-v6-c-button--m-favorite__icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-button--m-favorited__icon--Color: var(--pf-t--global--color--favorite--default);
+  --pf-v6-c-button--m-favorited--hover__icon--Color: var(--pf-t--global--color--favorite--hover);
+  --pf-v6-c-button--m-favorited__icon--AnimationDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-button--m-favorited__icon--AnimationTimingFunction: var(--pf-t--global--motion--timing-function--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%;
@@ -546,6 +552,20 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   --pf-v6-c-button--PaddingInlineStart: var(--pf-v6-c-button--m-display-lg--PaddingInlineStart);
   --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-display-lg--FontSize);
 }
+.pf-v6-c-button.pf-m-favorite .pf-v6-c-button__icon {
+  transition-timing-function: var(--pf-v6-c-button--m-favorite__icon--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-button--m-favorite__icon--TransitionDuration);
+  transition-property: color;
+}
+.pf-v6-c-button.pf-m-favorited {
+  --pf-v6-c-button__icon--Color: var(--pf-v6-c-button--m-favorited__icon--Color);
+  --pf-v6-c-button--hover__icon--Color: var(--pf-v6-c-button--m-favorited--hover__icon--Color);
+}
+.pf-v6-c-button.pf-m-favorited .pf-v6-c-button__icon {
+  animation-name: pf-v6-c-button-icon-favorited;
+  animation-duration: var(--pf-v6-c-button--m-favorited__icon--AnimationDuration);
+  animation-timing-function: var(--pf-v6-c-button--m-favorited__icon--AnimationTimingFunction);
+}
 .pf-v6-c-button:hover, .pf-v6-c-button:focus {
   --pf-v6-c-button--Color: var(--pf-v6-c-button--hover--Color);
   --pf-v6-c-button--BackgroundColor: var(--pf-v6-c-button--hover--BackgroundColor);
@@ -643,4 +663,9 @@ span.pf-v6-c-button.pf-m-link.pf-m-inline {
   66% {
     transform: rotate(-60deg);
   }
+}
+@keyframes pf-v6-c-button-icon-favorited {
+  50% {
+    transform: scale(1.5);
+  }
 }

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

@@ -23,6 +23,8 @@ declare const _default: {
     "noPadding": "pf-m-no-padding",
     "block": "pf-m-block",
     "small": "pf-m-small",
+    "favorite": "pf-m-favorite",
+    "favorited": "pf-m-favorited",
     "clicked": "pf-m-clicked",
     "disabled": "pf-m-disabled",
     "ariaDisabled": "pf-m-aria-disabled",

package/css/components/Button/button.js

@@ -25,6 +25,8 @@ exports.default = {
     "noPadding": "pf-m-no-padding",
     "block": "pf-m-block",
     "small": "pf-m-small",
+    "favorite": "pf-m-favorite",
+    "favorited": "pf-m-favorited",
     "clicked": "pf-m-clicked",
     "disabled": "pf-m-disabled",
     "ariaDisabled": "pf-m-aria-disabled",

package/css/components/Button/button.mjs

@@ -23,6 +23,8 @@ export default {
     "noPadding": "pf-m-no-padding",
     "block": "pf-m-block",
     "small": "pf-m-small",
+    "favorite": "pf-m-favorite",
+    "favorited": "pf-m-favorited",
     "clicked": "pf-m-clicked",
     "disabled": "pf-m-disabled",
     "ariaDisabled": "pf-m-aria-disabled",

package/css/components/Card/card.css

@@ -15,6 +15,7 @@
   --pf-v6-c-card__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
   --pf-v6-c-card__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --pf-v6-c-card__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --pf-v6-c-card__title-text--OverflowWrap: break-word;
   --pf-v6-c-card--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --pf-v6-c-card__body--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-card__footer--FontSize: var(--pf-t--global--font--size--body--default);
@@ -23,12 +24,14 @@
   --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__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--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--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--long);
+  --pf-v6-c-card__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-card--m-expanded__header-toggle-icon--Rotate: 90deg;
   --pf-v6-c-card--m-selectable--BorderWidth: var(--pf-v6-c-card--BorderWidth);
   --pf-v6-c-card--m-clickable--m-current--BorderColor: var(--pf-t--global--border--color--clicked);
@@ -186,6 +189,21 @@
 .pf-v6-c-card__header.pf-m-toggle-right .pf-v6-c-card__header-toggle {
   order: 2;
 }
+.pf-v6-c-card__header.pf-m-wrap {
+  --pf-v6-c-card__actions--PaddingInlineStart: 0;
+  gap: var(--pf-v6-c-card__header--m-wrap--RowGap) var(--pf-v6-c-card__header--m-wrap--ColumnGap);
+}
+.pf-v6-c-card__header.pf-m-wrap,
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  flex-wrap: wrap;
+  row-gap: var(--pf-v6-c-card__header--m-wrap--RowGap);
+}
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions {
+  margin-inline-start: 0;
+}
+.pf-v6-c-card__header.pf-m-wrap .pf-v6-c-card__actions + * {
+  margin-inline-end: auto;
+}
 
 .pf-v6-c-card__header-main {
   flex-grow: 1;
@@ -201,18 +219,22 @@
 
 .pf-v6-c-card__header-toggle-icon {
   display: inline-block;
-  transition: transform var(--pf-v6-c-card__header-toggle-icon--TransitionDuration) var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
+  transition-timing-function: var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-card__header-toggle-icon--TransitionDuration);
+  transition-property: transform;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
   scale: -1 1;
 }
 
 .pf-v6-c-card__title-text {
+  overflow: auto;
   font-family: var(--pf-v6-c-card__title-text--FontFamily);
   font-size: var(--pf-v6-c-card__title-text--FontSize);
   font-weight: var(--pf-v6-c-card__title-text--FontWeight);
   line-height: var(--pf-v6-c-card__title-text--LineHeight);
   color: var(--pf-v6-c-card__title-text--Color);
+  overflow-wrap: var(--pf-v6-c-card__title-text--OverflowWrap);
 }
 
 .pf-v6-c-card__actions {

package/css/components/Card/card.d.ts

@@ -32,6 +32,7 @@ declare const _default: {
     "expanded": "pf-m-expanded",
     "fullHeight": "pf-m-full-height",
     "toggleRight": "pf-m-toggle-right",
+    "wrap": "pf-m-wrap",
     "noOffset": "pf-m-no-offset",
     "inline": "pf-m-inline",
     "noFill": "pf-m-no-fill"

package/css/components/Card/card.js

@@ -34,6 +34,7 @@ exports.default = {
     "expanded": "pf-m-expanded",
     "fullHeight": "pf-m-full-height",
     "toggleRight": "pf-m-toggle-right",
+    "wrap": "pf-m-wrap",
     "noOffset": "pf-m-no-offset",
     "inline": "pf-m-inline",
     "noFill": "pf-m-no-fill"

package/css/components/Card/card.mjs

@@ -32,6 +32,7 @@ export default {
     "expanded": "pf-m-expanded",
     "fullHeight": "pf-m-full-height",
     "toggleRight": "pf-m-toggle-right",
+    "wrap": "pf-m-wrap",
     "noOffset": "pf-m-no-offset",
     "inline": "pf-m-inline",
     "noFill": "pf-m-no-fill"

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

@@ -1,5 +1,7 @@
 .pf-v6-c-clipboard-copy {
-  --pf-v6-c-clipboard-copy__toggle-icon--Transition: .2s ease-in 0s;
+  --pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-clipboard-copy__toggle-icon--Transition: transform var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionDuration) var(--pf-v6-c-clipboard-copy__toggle-icon--TransitionTimingFunction);
   --pf-v6-c-clipboard-copy--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v6-c-clipboard-copy__expandable-content--MarginBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-clipboard-copy__expandable-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
@@ -39,6 +41,9 @@
 .pf-v6-c-clipboard-copy.pf-m-inline.pf-m-block {
   display: block;
 }
+.pf-v6-c-clipboard-copy.pf-m-inline.pf-m-truncate {
+  display: inline-flex;
+}
 
 .pf-v6-c-clipboard-copy__group {
   display: flex;

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

@@ -13,6 +13,7 @@ declare const _default: {
     "expanded": "pf-m-expanded",
     "inline": "pf-m-inline",
     "block": "pf-m-block",
+    "truncate": "pf-m-truncate",
     "code": "pf-m-code",
     "plain": "pf-m-plain"
   }

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

@@ -15,6 +15,7 @@ exports.default = {
     "expanded": "pf-m-expanded",
     "inline": "pf-m-inline",
     "block": "pf-m-block",
+    "truncate": "pf-m-truncate",
     "code": "pf-m-code",
     "plain": "pf-m-plain"
   }

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

@@ -13,6 +13,7 @@ export default {
     "expanded": "pf-m-expanded",
     "inline": "pf-m-inline",
     "block": "pf-m-block",
+    "truncate": "pf-m-truncate",
     "code": "pf-m-code",
     "plain": "pf-m-plain"
   }

package/css/components/CodeEditor/code-editor.css

@@ -148,6 +148,9 @@
 .pf-v6-c-code-editor__main .monaco-editor {
   background-color: var(--pf-v6-c-code-editor__main--BackgroundColor);
 }
+.pf-v6-c-code-editor__main a.label-name {
+  text-decoration-line: none;
+}
 
 .pf-v6-c-code-editor__header + .pf-v6-c-code-editor__main {
   border-block-start-width: 0;

package/css/components/CodeEditor/code-editor.d.ts

@@ -13,6 +13,7 @@ declare const _default: {
   "codeEditorTabIcon": "pf-v6-c-code-editor__tab-icon",
   "codeEditorTabText": "pf-v6-c-code-editor__tab-text",
   "codeEditorUpload": "pf-v6-c-code-editor__upload",
+  "labelName": "label-name",
   "modifiers": {
     "readOnly": "pf-m-read-only",
     "fullHeight": "pf-m-full-height",

package/css/components/CodeEditor/code-editor.js

@@ -15,6 +15,7 @@ exports.default = {
   "codeEditorTabIcon": "pf-v6-c-code-editor__tab-icon",
   "codeEditorTabText": "pf-v6-c-code-editor__tab-text",
   "codeEditorUpload": "pf-v6-c-code-editor__upload",
+  "labelName": "label-name",
   "modifiers": {
     "readOnly": "pf-m-read-only",
     "fullHeight": "pf-m-full-height",

package/css/components/CodeEditor/code-editor.mjs

@@ -13,6 +13,7 @@ export default {
   "codeEditorTabIcon": "pf-v6-c-code-editor__tab-icon",
   "codeEditorTabText": "pf-v6-c-code-editor__tab-text",
   "codeEditorUpload": "pf-v6-c-code-editor__upload",
+  "labelName": "label-name",
   "modifiers": {
     "readOnly": "pf-m-read-only",
     "fullHeight": "pf-m-full-height",

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

@@ -443,7 +443,9 @@
   --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-icon--Height: calc(var(--pf-v6-c-data-list--FontSize) * var(--pf-v6-c-data-list--LineHeight));
-  --pf-v6-c-data-list__toggle-icon--Transition: .2s ease-in 0s;
+  --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);
+  --pf-v6-c-data-list__toggle-icon--Transition: transform var(--pf-v6-c-data-list__toggle-icon--TransitionDuration) var(--pf-v6-c-data-list__toggle-icon--TransitionTimingFunction);
   --pf-v6-c-data-list__toggle-icon--Rotate: 0;
   --pf-v6-c-data-list__item--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v6-c-data-list__item-draggable-button--BackgroundColor: transparent;

package/css/components/Drawer/drawer.css

@@ -15,9 +15,15 @@
   --pf-v6-c-drawer__panel--RowGap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-drawer__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --pf-v6-c-drawer__panel--TransitionDelay: 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus), var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
+  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--fade);
+  --pf-v6-c-drawer__panel--TransitionDelay--expand--focus: 0s;
   --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
-  --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
-  --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
+  --pf-v6-c-drawer__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-drawer__panel--TransitionDuration: var(--pf-v6-c-drawer__panel--TransitionDuration--fade), 0s, 0s;
+  --pf-v6-c-drawer__panel--TransitionProperty: opacity, visibility, transform;
+  --pf-v6-c-drawer__panel--Opacity: 0;
+  --pf-v6-c-drawer--m-expanded__panel--Opacity: 1;
   --pf-v6-c-drawer__panel--FlexBasis: 100%;
   --pf-v6-c-drawer__panel--md--FlexBasis--min: 1.5rem;
   --pf-v6-c-drawer__panel--md--FlexBasis: 50%;
@@ -107,6 +113,17 @@
   --pf-v6-c-drawer--m-panel-left--m-inline__panel--PaddingInlineEnd: var(--pf-v6-c-drawer__panel--after--Width);
   --pf-v6-c-drawer--m-panel-bottom--m-inline__panel--PaddingBlockStart: var(--pf-v6-c-drawer__panel--after--Width);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-drawer {
+    --pf-v6-c-drawer__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
+    --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDuration--slide);
+    --pf-v6-c-drawer__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--pf-v6-c-drawer__panel--TransitionDelay--focus);
+    --pf-v6-c-drawer__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+    --pf-v6-c-drawer__panel--TransitionDuration: 0s, var(--pf-v6-c-drawer__panel--TransitionDuration--slide), 0s, 0s, 0s;
+    --pf-v6-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility;
+    --pf-v6-c-drawer__panel--Opacity: 1;
+  }
+}
 @media screen and (min-width: 75rem) {
   .pf-v6-c-drawer {
     --pf-v6-c-drawer__panel--MinWidth: var(--pf-v6-c-drawer__panel--xl--MinWidth);
@@ -154,8 +171,13 @@
 .pf-v6-c-drawer.pf-m-panel-bottom > .pf-v6-c-drawer__main {
   flex-direction: column;
 }
+.pf-v6-c-drawer.pf-m-expanded {
+  --pf-v6-c-drawer__panel--TransitionDelay--focus: var(--pf-v6-c-drawer__panel--TransitionDelay--expand--focus);
+}
 .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
   transform: translateX(-100%);
+  --pf-v6-c-drawer__panel--Opacity: var(--pf-v6-c-drawer--m-expanded__panel--Opacity);
+  visibility: visible;
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
   transform: translateX(calc(-100% * var(--pf-v6-global--inverse--multiplier)));
@@ -228,8 +250,11 @@
   order: 1;
   max-height: var(--pf-v6-c-drawer__panel--MaxHeight);
   overflow: auto;
+  visibility: hidden;
   background-color: var(--pf-v6-c-drawer__panel--BackgroundColor);
   box-shadow: var(--pf-v6-c-drawer__panel--BoxShadow);
+  opacity: var(--pf-v6-c-drawer__panel--Opacity);
+  transition-delay: var(--pf-v6-c-drawer__panel--TransitionDelay);
   transition-timing-function: var(--pf-v6-c-drawer__panel--TransitionTimingFunction);
   transition-duration: var(--pf-v6-c-drawer__panel--TransitionDuration);
   transition-property: var(--pf-v6-c-drawer__panel--TransitionProperty);
@@ -286,17 +311,6 @@
   padding-block-end: var(--pf-v6-c-drawer__panel--PaddingBlockEnd);
 }
 
-@keyframes pf-remove-tab-focus {
-  to {
-    visibility: hidden;
-  }
-}
-.pf-v6-c-drawer__panel[hidden] {
-  animation-name: pf-remove-tab-focus;
-  animation-delay: var(--pf-v6-c-drawer__panel--TransitionDuration);
-  animation-fill-mode: forwards;
-}
-
 .pf-v6-c-drawer__head {
   display: grid;
   grid-template-columns: auto;
@@ -404,7 +418,7 @@
   .pf-v6-c-drawer {
     min-width: var(--pf-v6-c-drawer__panel--MinWidth);
   }
-  .pf-v6-c-drawer.pf-m-expanded > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
+  .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel {
     box-shadow: var(--pf-v6-c-drawer--m-expanded__panel--BoxShadow);
   }
   .pf-v6-c-drawer > .pf-v6-c-drawer__main > .pf-v6-c-drawer__panel.pf-m-resizable {

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

@@ -53,7 +53,7 @@
   --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: 90deg;
-  --pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --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);
   --pf-v6-c-dual-list-selector__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
@@ -277,7 +277,9 @@
   min-width: var(--pf-v6-c-dual-list-selector__item-toggle-icon--MinWidth);
   color: var(--pf-v6-c-dual-list-selector__item-toggle-icon--Color, inherit);
   text-align: center;
-  transition: transform var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration) var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
+  transition-timing-function: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration);
+  transition-property: transform;
   transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
 }
 

package/css/components/ExpandableSection/expandable-section.css

@@ -2,7 +2,9 @@
   --pf-v6-c-expandable-section--Gap: var(--pf-t--global--spacer--sm);
   --pf-v6-c-expandable-section__toggle-icon--MinWidth: 1em;
   --pf-v6-c-expandable-section__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-expandable-section__toggle-icon--Transition: .2s ease-in 0s;
+  --pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-expandable-section__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --pf-v6-c-expandable-section__toggle-icon--Transition: transform var(--pf-v6-c-expandable-section__toggle-icon--TransitionDuration) var(--pf-v6-c-expandable-section__toggle-icon--TransitionTimingFunction);
   --pf-v6-c-expandable-section__toggle-icon--Rotate: 0;
   --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
   --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;

package/css/components/Form/form.css

@@ -56,7 +56,7 @@
   --pf-v6-c-form__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--pf-v6-c-form__field-group-header-toggle--BorderWidth--base);
   --pf-v6-c-form__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --pf-v6-c-form__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
-  --pf-v6-c-form__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-form__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-form__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form__field-group-toggle-icon--Rotate: 0;
@@ -454,7 +454,9 @@
   display: inline-block;
   min-width: var(--pf-v6-c-form__field-group-toggle-icon--MinWidth);
   text-align: center;
-  transition: transform var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration) var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
+  transition-timing-function: var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration);
+  transition-property: transform;
   transform: rotate(var(--pf-v6-c-form__field-group-toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-form__field-group-toggle-icon {