@patternfly/patternfly 6.2.0-prerelease.9 → 6.2.1

package/components/Card/card.scss

@@ -17,6 +17,7 @@
   --#{$card}__title-text--FontSize: var(--pf-t--global--font--size--heading--xs);
   --#{$card}__title-text--FontWeight: var(--pf-t--global--font--weight--heading--default);
   --#{$card}__title-text--LineHeight: var(--pf-t--global--font--line-height--heading);
+  --#{$card}__title-text--OverflowWrap: break-word;
   --#{$card}--c-button--disabled--Color: var(--pf-t--global--text--color--on-disabled);
   --#{$card}__body--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$card}__footer--FontSize: var(--pf-t--global--font--size--body--default);
@@ -25,6 +26,8 @@
   --#{$card}__actions--Gap: var(--pf-t--global--spacer--gap--action-to-action--default);
   --#{$card}__actions--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --#{$card}__actions--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
+  --#{$card}__header--m-wrap--RowGap: var(--pf-t--global--spacer--sm);
+  --#{$card}__header--m-wrap--ColumnGap: var(--pf-t--global--spacer--md);
 
   // Expandable
   --#{$card}__header-toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
@@ -32,7 +35,7 @@
   --#{$card}__header-toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --#{$card}__header-toggle--MarginInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) * -1);
   --#{$card}__header-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
-  --#{$card}__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$card}__header-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --#{$card}--m-expanded__header-toggle-icon--Rotate: 90deg;
 
   // Selectable/Clickable
@@ -265,6 +268,26 @@
       order: 2;
     }
   }
+
+  &.pf-m-wrap {
+    --pf-v6-c-card__actions--PaddingInlineStart: 0;
+
+    gap: var(--#{$card}__header--m-wrap--RowGap) var(--#{$card}__header--m-wrap--ColumnGap);
+
+    &,
+    .#{$card}__actions {
+      flex-wrap: wrap;
+      row-gap: var(--#{$card}__header--m-wrap--RowGap);
+    }
+
+    .#{$card}__actions {
+      + * {
+        margin-inline-end: auto;
+      }
+
+      margin-inline-start: 0
+    }
+  }
 }
 
 .#{$card}__header-main {
@@ -283,15 +306,19 @@
   @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
-  transition: transform var(--#{$card}__header-toggle-icon--TransitionDuration) var(--#{$card}__header-toggle-icon--TransitionTimingFunction);
+  transition-timing-function: var(--#{$card}__header-toggle-icon--TransitionTimingFunction);
+  transition-duration: var(--#{$card}__header-toggle-icon--TransitionDuration);
+  transition-property: transform;
 }
 
 .#{$card}__title-text {
+  overflow: auto;
   font-family: var(--#{$card}__title-text--FontFamily);
   font-size: var(--#{$card}__title-text--FontSize);
   font-weight: var(--#{$card}__title-text--FontWeight);
   line-height: var(--#{$card}__title-text--LineHeight);
   color: var(--#{$card}__title-text--Color);
+  overflow-wrap: var(--#{$card}__title-text--OverflowWrap);
 }
 
 .#{$card}__actions {

package/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/components/ClipboardCopy/clipboard-copy.scss

@@ -2,7 +2,9 @@
 
 @include pf-root($clipboard-copy) {
   // Toggle icon
-  --#{$clipboard-copy}__toggle-icon--Transition: .2s ease-in 0s;
+  --#{$clipboard-copy}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --#{$clipboard-copy}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$clipboard-copy}__toggle-icon--Transition: transform var(--#{$clipboard-copy}__toggle-icon--TransitionDuration) var(--#{$clipboard-copy}__toggle-icon--TransitionTimingFunction); // TODO Remove in breaking change along with shorthand property
   --#{$clipboard-copy}--m-expanded__toggle-icon--Rotate: 90deg;
 
   // Clipboard copy expanded content
@@ -55,6 +57,10 @@
     &.pf-m-block {
       display: block;
     }
+
+    &.pf-m-truncate {
+      display: inline-flex;
+    }
   }
 }
 
@@ -67,7 +73,7 @@
 .#{$clipboard-copy}__toggle-icon {
   @include pf-v6-mirror-inline-on-rtl;
 
-  transition: var(--#{$clipboard-copy}__toggle-icon--Transition);
+  transition: var(--#{$clipboard-copy}__toggle-icon--Transition); // TODO remove shorthand in breaking change
 }
 
 .#{$clipboard-copy}__expandable-content {

package/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/components/CodeEditor/code-editor.scss

@@ -157,7 +157,7 @@
 }
 
 .#{$code-editor}__main {
-  position: relative; 
+  position: relative;
   flex-grow: 1;
   color: var(--#{$code-editor}__main--Color, inherit);
   background-color: var(--#{$code-editor}__main--BackgroundColor);
@@ -175,6 +175,8 @@
   .monaco-editor {
     background-color: var(--#{$code-editor}__main--BackgroundColor);
   }
+
+  a.label-name { text-decoration-line: none; } // revert normalize.scss
   // stylelint-enable selector-class-pattern
 }
 

package/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/components/DataList/data-list.scss

@@ -60,7 +60,9 @@
   --#{$data-list}__toggle--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --#{$data-list}__toggle--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--default) * -1);
   --#{$data-list}__toggle-icon--Height: calc(var(--#{$data-list}--FontSize) * var(--#{$data-list}--LineHeight));
-  --#{$data-list}__toggle-icon--Transition: .2s ease-in 0s;
+  --#{$data-list}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --#{$data-list}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$data-list}__toggle-icon--Transition: transform var(--#{$data-list}__toggle-icon--TransitionDuration) var(--#{$data-list}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
   --#{$data-list}__toggle-icon--Rotate: 0;
   --#{$data-list}__item--m-expanded__toggle-icon--Rotate: 90deg;
 
@@ -342,7 +344,7 @@
 
   height: var(--#{$data-list}__toggle-icon--Height);
   pointer-events: none;
-  transition: var(--#{$data-list}__toggle-icon--Transition);
+  transition: var(--#{$data-list}__toggle-icon--Transition); // TODO remove shorthand in breaking change
   transform: rotate(var(--#{$data-list}__toggle-icon--Rotate));
 }
 

package/components/DescriptionList/description-list.css

@@ -14,7 +14,7 @@
   --pf-v6-c-description-list__term--Display: inline;
   --pf-v6-c-description-list__term--sm--Display: flex;
   --pf-v6-c-description-list__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-description-list__term--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-description-list__term--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-description-list__term-icon--MinWidth: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-description-list__term-icon--MarginInlineEnd: var(--pf-t--global--spacer--sm);

package/components/DescriptionList/description-list.scss

@@ -24,7 +24,7 @@ $pf-v6-c-description-list--breakpoint-map: build-breakpoint-map("base", "sm", "m
   --#{$description-list}__term--Display: inline;
   --#{$description-list}__term--sm--Display: flex;
   --#{$description-list}__term--FontWeight: var(--pf-t--global--font--weight--body--bold);
-  --#{$description-list}__term--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$description-list}__term--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$description-list}__term--LineHeight: var(--pf-t--global--font--line-height--body);
 
   @media screen and (min-width: $pf-v6-global--breakpoint--sm) {

package/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/components/Drawer/drawer.scss

@@ -27,9 +27,15 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   --#{$drawer}__panel--RowGap: var(--pf-t--global--spacer--sm);
   --#{$drawer}__panel--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$drawer}__panel--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
+  --#{$drawer}__panel--TransitionDelay: 0s, var(--#{$drawer}__panel--TransitionDelay--focus), var(--#{$drawer}__panel--TransitionDelay--focus);
+  --#{$drawer}__panel--TransitionDelay--focus: var(--#{$drawer}__panel--TransitionDuration--fade);
+  --#{$drawer}__panel--TransitionDelay--expand--focus: 0s; // on expand, transition visible immediately
   --#{$drawer}__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
-  --#{$drawer}__panel--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--short);
-  --#{$drawer}__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
+  --#{$drawer}__panel--TransitionDuration--fade: var(--pf-t--global--motion--duration--fade--default);
+  --#{$drawer}__panel--TransitionDuration: var(--#{$drawer}__panel--TransitionDuration--fade), 0s, 0s;
+  --#{$drawer}__panel--TransitionProperty: opacity, visibility, transform; // by default, fade the drawer
+  --#{$drawer}__panel--Opacity: 0;
+  --#{$drawer}--m-expanded__panel--Opacity: 1;
   --#{$drawer}__panel--FlexBasis: 100%;
   --#{$drawer}__panel--md--FlexBasis--min: #{pf-size-prem(24px)};
   --#{$drawer}__panel--md--FlexBasis: 50%;
@@ -46,6 +52,16 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   --#{$drawer}--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: #{pf-size-prem(24px)};
   --#{$drawer}--m-panel-bottom__panel--m-resizable--MinHeight: #{pf-size-prem(24px)};
 
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$drawer}__panel--TransitionDuration--slide: var(--pf-t--global--motion--duration--slide-in--short);
+    --#{$drawer}__panel--TransitionDelay--focus: var(--#{$drawer}__panel--TransitionDuration--slide);
+    --#{$drawer}__panel--TransitionDelay: 0s, 0s, 0s, 0s, var(--#{$drawer}__panel--TransitionDelay--focus);
+    --#{$drawer}__panel--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--decelerate);
+    --#{$drawer}__panel--TransitionDuration: 0s, var(--#{$drawer}__panel--TransitionDuration--slide), 0s, 0s, 0s;
+    --#{$drawer}__panel--TransitionProperty: margin, transform, box-shadow, flex-basis, visibility; // with no preference, slide the panel
+    --#{$drawer}__panel--Opacity: 1;
+  }
+
   // Drawer panel head
   --#{$drawer}__head--ColumnGap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$drawer}__head--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -205,12 +221,18 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   // Expanded
   // stylelint-disable selector-max-class
   &.pf-m-expanded {
+    --#{$drawer}__panel--TransitionDelay--focus: var(--#{$drawer}__panel--TransitionDelay--expand--focus);
+
     > .#{$drawer}__main > .#{$drawer}__panel {
       @include pf-v6-bidirectional-style(
         $prop: transform,
         $ltr-val: translateX(-100%),
         $rtl-val: translateX(#{pf-v6-calc-inverse(-100%)}),
       );
+
+      --#{$drawer}__panel--Opacity: var(--#{$drawer}--m-expanded__panel--Opacity);
+
+      visibility: visible;
     }
 
     &.pf-m-panel-left > .#{$drawer}__main > .#{$drawer}__panel {
@@ -297,8 +319,11 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   order: 1;
   max-height: var(--#{$drawer}__panel--MaxHeight);
   overflow: auto;
+  visibility: hidden; // hidden by default
   background-color: var(--#{$drawer}__panel--BackgroundColor);
   box-shadow: var(--#{$drawer}__panel--BoxShadow);
+  opacity: var(--#{$drawer}__panel--Opacity);
+  transition-delay: var(--#{$drawer}__panel--TransitionDelay);
   transition-timing-function: var(--#{$drawer}__panel--TransitionTimingFunction);
   transition-duration: var(--#{$drawer}__panel--TransitionDuration);
   transition-property: var(--#{$drawer}__panel--TransitionProperty);
@@ -360,9 +385,6 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   padding-block-end: var(--#{$drawer}__panel--PaddingBlockEnd);
 }
 
-// Remove tab focus
-@include pf-v6-animate-remove-tab-focus(".#{$drawer}__panel", var(--#{$drawer}__panel--TransitionDuration));
-
 // Panel head
 .#{$drawer}__head {
   display: grid;
@@ -491,9 +513,7 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   .#{$drawer} {
     min-width: var(--#{$drawer}__panel--MinWidth);
 
-    // stylelint-disable selector-max-class
-    // Expanded
-    &.pf-m-expanded > .#{$drawer}__main {
+    > .#{$drawer}__main {
       > .#{$drawer}__panel {
         box-shadow: var(--#{$drawer}--m-expanded__panel--BoxShadow);
       }
@@ -618,7 +638,6 @@ $pf-v6-c-drawer__panel--list--width: (25, 33, 50, 66, 75, 100);
   .#{$drawer}.pf-m-panel-left > .#{$drawer}__main > .#{$drawer}__panel.pf-m-no-border {
     --#{$drawer}--m-expanded__panel--BoxShadow: none;
   }
-  // stylelint-enable
 
   .#{$drawer}__splitter {
     display: block;

package/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/components/DualListSelector/dual-list-selector.scss

@@ -84,7 +84,7 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
   // Icon
   --#{$dual-list-selector}__item-toggle-icon--Rotate: 0;
   --#{$dual-list-selector}__list-item--m-expanded__item-toggle-icon--Rotate: 90deg;
-  --#{$dual-list-selector}__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$dual-list-selector}__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --#{$dual-list-selector}__item-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$dual-list-selector}__item-toggle-icon--MinWidth: var(--#{$dual-list-selector}__list-item-row--FontSize);
   --#{$dual-list-selector}__list-item--m-disabled__item-toggle-icon--Color: var(--pf-t--global--icon--color--disabled);
@@ -339,7 +339,9 @@ $pf-v6-c-dual-list-selector__item--MaxNesting: 10;
   min-width: var(--#{$dual-list-selector}__item-toggle-icon--MinWidth);
   color: var(--#{$dual-list-selector}__item-toggle-icon--Color, inherit);
   text-align: center;
-  transition: transform var(--#{$dual-list-selector}__item-toggle-icon--TransitionDuration) var(--#{$dual-list-selector}__item-toggle-icon--TransitionTimingFunction);
+  transition-timing-function: var(--#{$dual-list-selector}__item-toggle-icon--TransitionTimingFunction);
+  transition-duration: var(--#{$dual-list-selector}__item-toggle-icon--TransitionDuration);
+  transition-property: transform;
   transform: rotate(var(--#{$dual-list-selector}__item-toggle-icon--Rotate));
 }
 

package/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/components/ExpandableSection/expandable-section.scss

@@ -6,7 +6,9 @@
   // Toggle icon
   --#{$expandable-section}__toggle-icon--MinWidth: 1em;
   --#{$expandable-section}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
-  --#{$expandable-section}__toggle-icon--Transition: .2s ease-in 0s;
+  --#{$expandable-section}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$expandable-section}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
+  --#{$expandable-section}__toggle-icon--Transition: transform var(--#{$expandable-section}__toggle-icon--TransitionDuration) var(--#{$expandable-section}__toggle-icon--TransitionTimingFunction); // TODO remove in breaking change along with shorthand property
   --#{$expandable-section}__toggle-icon--Rotate: 0;
   --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
   --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
@@ -85,7 +87,7 @@
   display: inline-block;
   min-width: var(--#{$expandable-section}__toggle-icon--MinWidth);
   color: var(--#{$expandable-section}__toggle-icon--Color);
-  transition: var(--#{$expandable-section}__toggle-icon--Transition);
+  transition: var(--#{$expandable-section}__toggle-icon--Transition); // TODO remove shorthand in breaking change
   transform: rotate(var(--#{$expandable-section}__toggle-icon--Rotate));
 
   &.pf-m-expand-top {

package/components/Form/form.css

@@ -10,16 +10,16 @@
   --pf-v6-c-form__group-label--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--PaddingBlockStart: 0;
   --pf-v6-c-form--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
-  --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-form__label--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form__label--LineHeight: var(--pf-t--global--font--line-height--body);
   --pf-v6-c-form__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-form__label--hover--Cursor: pointer;
   --pf-v6-c-form__label--m-disabled--hover--Cursor: not-allowed;
   --pf-v6-c-form__label-text--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-form__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-form__label-required--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form__label-required--Color: var(--pf-t--global--color--status--danger--default);
-  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
+  --pf-v6-c-form__group-label-help--FontSize: var(--pf-t--global--font--size--body--default);
   --pf-v6-c-form__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
   --pf-v6-c-form__group-label-info--FontSize: var(--pf-t--global--font--size--body--sm);
   --pf-v6-c-form--m-horizontal__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--group--vertical);
@@ -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 {

package/components/Form/form.scss

@@ -67,7 +67,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   --#{$form}--m-horizontal__group-label--m-no-padding--md--TranslateY: calc(((((var(--pf-t--global--font--size--body--sm) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--sm)) / 2) + var(--pf-t--global--font--size--body--sm)) - ((((var(--pf-t--global--font--size--body--default) * var(--pf-t--global--font--line-height--body)) - var(--pf-t--global--font--size--body--default)) / 2) + var(--pf-t--global--font--size--body--default)));
 
   // Label
-  --#{$form}__label--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$form}__label--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$form}__label--LineHeight: var(--pf-t--global--font--line-height--body);
   --#{$form}__label--m-disabled--Color: var(--pf-t--global--text--color--disabled);
   --#{$form}__label--hover--Cursor: pointer;
@@ -78,11 +78,11 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
 
   // Required labels
   --#{$form}__label-required--MarginInlineStart: var(--pf-t--global--spacer--xs);
-  --#{$form}__label-required--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$form}__label-required--FontSize: var(--pf-t--global--font--size--body--default);
   --#{$form}__label-required--Color: var(--pf-t--global--color--status--danger--default);
 
   // Field level help
-  --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--sm);
+  --#{$form}__group-label-help--FontSize: var(--pf-t--global--font--size--body--default);
 
   // Form group label info
   --#{$form}__group-label--m-info--Gap: var(--pf-t--global--spacer--gap--horizontal);
@@ -133,7 +133,7 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   --#{$form}__field-group__field-group--field-group__field-group-toggle--after--BorderBlockStartWidth: var(--#{$form}__field-group-header-toggle--BorderWidth--base);
   --#{$form}__field-group-toggle-button--MarginBlockStart: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
   --#{$form}__field-group-toggle-button--MarginBlockEnd: calc(var(--pf-t--global--spacer--control--vertical--plain) * -1);
-  --#{$form}__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$form}__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--default);
   --#{$form}__field-group-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$form}__field-group-toggle-icon--MinWidth: var(--pf-t--global--font--size--body--default);
   --#{$form}__field-group-toggle-icon--Rotate: 0;
@@ -408,7 +408,9 @@ $pf-v6-c-form--m-horizontal--breakpoint-map: build-breakpoint-map("sm", "md", "l
   display: inline-block;
   min-width: var(--#{$form}__field-group-toggle-icon--MinWidth);
   text-align: center;
-  transition: transform var(--#{$form}__field-group-toggle-icon--TransitionDuration) var(--#{$form}__field-group-toggle-icon--TransitionTimingFunction);
+  transition-timing-function: var(--#{$form}__field-group-toggle-icon--TransitionTimingFunction);
+  transition-duration: var(--#{$form}__field-group-toggle-icon--TransitionDuration);
+  transition-property: transform;
   transform: rotate(var(--#{$form}__field-group-toggle-icon--Rotate));
 
   @include pf-v6-mirror-inline-on-rtl;