@patternfly/patternfly 6.0.0-alpha.230 → 6.0.0-alpha.231

package/base/patternfly-variables.css

@@ -827,9 +827,6 @@
     var(--pf-t--global--box-shadow--blur--lg)
     var(--pf-t--global--box-shadow--spread--lg)
     var(--pf-t--global--box-shadow--color--lg);
-  --pf-t--global--transition: all 250ms cubic-bezier(.42, 0, .58, 1);
-  --pf-t--global--transition--timing-function: cubic-bezier(.645, .045, .355, 1);
-  --pf-t--global--transition--duration: 250ms;
   --pf-t--global--list-style: disc outside;
   --pf-t--temp--dev--tbd: #BC11E0;
 }

package/base/tokens/tokens-local.scss

@@ -115,11 +115,6 @@
     var(--pf-t--global--box-shadow--spread--lg)
     var(--pf-t--global--box-shadow--color--lg);
 
-  // old transitions to be removed in future pr
-  --pf-t--global--transition: all 250ms cubic-bezier(.42, 0, .58, 1);
-  --pf-t--global--transition--timing-function: cubic-bezier(.645, .045, .355, 1);
-  --pf-t--global--transition--duration: 250ms;
-
   // List bullet/marker
   --pf-t--global--list-style: disc outside;
 

package/components/Alert/alert.css

@@ -19,7 +19,8 @@
   --pf-v6-c-alert__toggle--MarginBlockEnd: calc(-1 * var(--pf-t--global--spacer--control--vertical--default));
   --pf-v6-c-alert__toggle--MarginInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-alert__toggle-icon--Rotate: 0;
-  --pf-v6-c-alert__toggle-icon--Transition: var(--pf-t--global--transition);
+  --pf-v6-c-alert__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-alert__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
   --pf-v6-c-alert__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-alert__icon--MarginBlockStart: 0.25rem;
   --pf-v6-c-alert__icon--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
@@ -140,7 +141,7 @@
 
 .pf-v6-c-alert__toggle-icon {
   display: inline-block;
-  transition: var(--pf-v6-c-alert__toggle-icon--Transition);
+  transition: transform var(--pf-v6-c-alert__toggle-icon--TransitionDuration) var(--pf-v6-c-alert__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-alert__toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-alert__toggle-icon {

package/components/Alert/alert.scss

@@ -25,7 +25,8 @@
 
   // Toggle icon
   --#{$alert}__toggle-icon--Rotate: 0;
-  --#{$alert}__toggle-icon--Transition: var(--pf-t--global--transition);
+  --#{$alert}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$alert}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
 
   // Icon
   --#{$alert}__icon--Color: var(--pf-t--global--icon--color--regular);
@@ -185,7 +186,7 @@
   @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
-  transition: var(--#{$alert}__toggle-icon--Transition);
+  transition: transform var(--#{$alert}__toggle-icon--TransitionDuration) var(--#{$alert}__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$alert}__toggle-icon--Rotate));
 }
 

package/components/Card/card.css

@@ -28,7 +28,8 @@
   --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--Transition: var(--pf-t--global--transition);
+  --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--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);
@@ -201,7 +202,7 @@
 
 .pf-v6-c-card__header-toggle-icon {
   display: inline-block;
-  transition: var(--pf-v6-c-card__header-toggle-icon--Transition);
+  transition: transform var(--pf-v6-c-card__header-toggle-icon--TransitionDuration) var(--pf-v6-c-card__header-toggle-icon--TransitionTimingFunction);
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-card__header-toggle-icon {
   scale: -1 1;

package/components/Card/card.scss

@@ -31,7 +31,8 @@
   --#{$card}__header-toggle--MarginInlineEnd: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$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--Transition: var(--pf-t--global--transition);
+  --#{$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}--m-expanded__header-toggle-icon--Rotate: 90deg;
 
   // Selectable/Clickable
@@ -282,7 +283,7 @@
   @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
-  transition: var(--#{$card}__header-toggle-icon--Transition);
+  transition: transform var(--#{$card}__header-toggle-icon--TransitionDuration) var(--#{$card}__header-toggle-icon--TransitionTimingFunction);
 }
 
 .#{$card}__title-text {

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

@@ -54,7 +54,8 @@
   --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--Transition: var(--pf-t--global--transition);
+  --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--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 +278,7 @@
   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: var(--pf-v6-c-dual-list-selector__item-toggle-icon--Transition);
+  transition: transform var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionDuration) var(--pf-v6-c-dual-list-selector__item-toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-dual-list-selector__item-toggle-icon--Rotate));
 }
 

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

@@ -84,7 +84,8 @@ $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--Transition: var(--pf-t--global--transition);
+  --#{$dual-list-selector}__item-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$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);
 }
@@ -338,7 +339,7 @@ $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: var(--#{$dual-list-selector}__item-toggle-icon--Transition);
+  transition: transform var(--#{$dual-list-selector}__item-toggle-icon--TransitionDuration) var(--#{$dual-list-selector}__item-toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$dual-list-selector}__item-toggle-icon--Rotate));
 }
 

package/components/Form/form.css

@@ -58,7 +58,8 @@
   --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--Transition: var(--pf-t--global--transition);
+  --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--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;
   --pf-v6-c-form__field-group--m-expanded__toggle-icon--Rotate: 90deg;
@@ -463,7 +464,7 @@
   display: inline-block;
   min-width: var(--pf-v6-c-form__field-group-toggle-icon--MinWidth);
   text-align: center;
-  transition: var(--pf-v6-c-form__field-group-toggle-icon--Transition);
+  transition: transform var(--pf-v6-c-form__field-group-toggle-icon--TransitionDuration) var(--pf-v6-c-form__field-group-toggle-icon--TransitionTimingFunction);
   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

@@ -134,7 +134,8 @@ $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--Transition: var(--pf-t--global--transition);
+  --#{$form}__field-group-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$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;
   --#{$form}__field-group--m-expanded__toggle-icon--Rotate: 90deg;
@@ -419,7 +420,7 @@ $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: var(--#{$form}__field-group-toggle-icon--Transition);
+  transition: transform var(--#{$form}__field-group-toggle-icon--TransitionDuration) var(--#{$form}__field-group-toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$form}__field-group-toggle-icon--Rotate));
 
   @include pf-v6-mirror-inline-on-rtl;

package/components/JumpLinks/jump-links.css

@@ -46,7 +46,8 @@
   --pf-v6-c-jump-links--m-expanded__toggle--MarginBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-jump-links__toggle--Display: none;
   --pf-v6-c-jump-links__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-jump-links__toggle-icon--Transition: var(--pf-t--global--transition);
+  --pf-v6-c-jump-links__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-jump-links__toggle-icon--Rotate: 0;
   --pf-v6-c-jump-links--m-expanded__toggle-icon--Rotate: 90deg;
 }
@@ -237,7 +238,7 @@
 .pf-v6-c-jump-links__toggle-icon {
   display: inline-block;
   color: var(--pf-v6-c-jump-links__toggle-icon--Color);
-  transition: var(--pf-v6-c-jump-links__toggle-icon--Transition);
+  transition: transform var(--pf-v6-c-jump-links__toggle-icon--TransitionDuration) var(--pf-v6-c-jump-links__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-jump-links__toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-jump-links__toggle-icon {

package/components/JumpLinks/jump-links.scss

@@ -62,7 +62,8 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
 
   // toggle icon
   --#{$jump-links}__toggle-icon--Color: var(--pf-t--global--icon--color--regular);
-  --#{$jump-links}__toggle-icon--Transition: var(--pf-t--global--transition);
+  --#{$jump-links}__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$jump-links}__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$jump-links}__toggle-icon--Rotate: 0;
   --#{$jump-links}--m-expanded__toggle-icon--Rotate: 90deg;
 }
@@ -217,6 +218,6 @@ $pf-v6-c-jump-links--m-expandable--breakpoint-map: build-breakpoint-map("base",
 
   display: inline-block;
   color: var(--#{$jump-links}__toggle-icon--Color);
-  transition: var(--#{$jump-links}__toggle-icon--Transition);
+  transition: transform var(--#{$jump-links}__toggle-icon--TransitionDuration) var(--#{$jump-links}__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$jump-links}__toggle-icon--Rotate));
 }

package/components/Menu/menu.css

@@ -85,13 +85,13 @@
   --pf-v6-c-menu--m-flyout__menu--InsetInlineStart: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--left-offset));
   --pf-v6-c-menu--m-flyout__menu--m-top--InsetBlockEnd: calc(var(--pf-v6-c-menu__list--PaddingBlockStart) * -1);
   --pf-v6-c-menu--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--pf-v6-c-menu--m-flyout__menu--m-left--right-offset));
-  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--transition--duration);
-  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--transition--duration);
+  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
+  --pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   --pf-v6-c-menu--m-drilldown__content--Transition: transform var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--transform), height var(--pf-v6-c-menu--m-drilldown__content--TransitionDuration--height);
   --pf-v6-c-menu--m-drilldown--c-menu--InsetBlockStart: 0;
-  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transition--duration);
+  --pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   --pf-v6-c-menu--m-drilldown--c-menu--Transition: transform var(--pf-v6-c-menu--m-drilldown--c-menu--TransitionDuration--transform);
-  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--transition--duration);
+  --pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   --pf-v6-c-menu--m-drilldown__list--Transition: transform var(--pf-v6-c-menu--m-drilldown__list--TransitionDuration--transform);
   --pf-v6-c-menu--m-drilled-in--c-menu__list-item--m-current-path--c-menu--ZIndex: var(--pf-t--global--z-index--xs);
 }

package/components/Menu/menu.scss

@@ -127,17 +127,18 @@
   --#{$menu}--m-flyout__menu--m-left--InsetInlineEnd: calc(100% + var(--#{$menu}--m-flyout__menu--m-left--right-offset));
 
   // * Menu drilldown content
-  --#{$menu}--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--transition--duration);
-  --#{$menu}--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--transition--duration);
+  // TODO Reduced motion default needed for drilldown
+  --#{$menu}--m-drilldown__content--TransitionDuration--height: var(--pf-t--global--motion--duration--slide-in--default);
+  --#{$menu}--m-drilldown__content--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   --#{$menu}--m-drilldown__content--Transition: transform var(--#{$menu}--m-drilldown__content--TransitionDuration--transform), height var(--#{$menu}--m-drilldown__content--TransitionDuration--height);
 
   // * Menu drilldown menu
   --#{$menu}--m-drilldown--c-menu--InsetBlockStart: 0;
-  --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--transition--duration);
+  --#{$menu}--m-drilldown--c-menu--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   --#{$menu}--m-drilldown--c-menu--Transition: transform var(--#{$menu}--m-drilldown--c-menu--TransitionDuration--transform);
 
   // * Menu drilldown list
-  --#{$menu}--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--transition--duration);
+  --#{$menu}--m-drilldown__list--TransitionDuration--transform: var(--pf-t--global--motion--duration--slide-in--default);
   --#{$menu}--m-drilldown__list--Transition: transform var(--#{$menu}--m-drilldown__list--TransitionDuration--transform);
 
   // * Menu drilled in

package/components/Page/page.css

@@ -7,7 +7,8 @@
   --pf-v6-c-page__sidebar--Width: 18.125rem;
   --pf-v6-c-page__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-page__sidebar--BoxShadow: none;
-  --pf-v6-c-page__sidebar--Transition: var(--pf-t--global--transition);
+  --pf-v6-c-page__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
+  --pf-v6-c-page__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-page__sidebar--TranslateX: -100%;
   --pf-v6-c-page__sidebar--TranslateZ: 0;
   --pf-v6-c-page__sidebar--m-expanded--TranslateX: 0;
@@ -129,7 +130,7 @@
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   background-color: var(--pf-v6-c-page__sidebar--BackgroundColor);
-  transition: var(--pf-v6-c-page__sidebar--Transition);
+  transition: transform var(--pf-v6-c-page__sidebar--TransitionDuration) var(--pf-v6-c-page__sidebar--TransitionTimingFunction);
   transform: translateX(var(--pf-v6-c-page__sidebar--TranslateX)) translateZ(var(--pf-v6-c-page__sidebar--TranslateZ));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-page__sidebar {

package/components/Page/page.scss

@@ -17,7 +17,10 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
   --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}__sidebar--BoxShadow: none;
-  --#{$page}__sidebar--Transition: var(--pf-t--global--transition);
+
+  // TODO Reduced Motion default needed
+  --#{$page}__sidebar--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
+  --#{$page}__sidebar--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$page}__sidebar--TranslateX: -100%;
   --#{$page}__sidebar--TranslateZ: 0;
   --#{$page}__sidebar--m-expanded--TranslateX: 0;
@@ -165,7 +168,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
   background-color: var(--#{$page}__sidebar--BackgroundColor);
-  transition: var(--#{$page}__sidebar--Transition);
+  transition: transform var(--#{$page}__sidebar--TransitionDuration) var(--#{$page}__sidebar--TransitionTimingFunction);
 
   @include pf-v6-bidirectional-style(
     $prop: transform,

package/components/Table/table.css

@@ -49,7 +49,8 @@
   --pf-v6-c-table__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__toggle--c-button__toggle-icon--Rotate: 270deg;
-  --pf-v6-c-table__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
+  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
   --pf-v6-c-table__button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -72,7 +73,6 @@
   --pf-v6-c-table__action--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
-  --pf-v6-c-table__expandable-row--Transition: var(--pf-t--global--transition);
   --pf-v6-c-table__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
   --pf-v6-c-table__expandable-row-content--PaddingInlineStart: var(--pf-t--global--spacer--md);
@@ -543,7 +543,7 @@
   transform: rotate(var(--pf-v6-c-table__toggle--c-button--m-expanded__toggle-icon--Rotate));
 }
 .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
-  transition: var(--pf-v6-c-table__toggle--c-button__toggle-icon--Transition);
+  transition: transform var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionDuration) var(--pf-v6-c-table__toggle--c-button__toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-table__toggle--c-button__toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-table__toggle .pf-v6-c-table__toggle-icon {
@@ -695,10 +695,6 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
   position: relative;
   border-block-end: 0 solid transparent;
 }
-.pf-v6-c-table__expandable-row,
-.pf-v6-c-table__expandable-row td:where(.pf-v6-c-table__td):first-child::after {
-  transition: var(--pf-v6-c-table__expandable-row--Transition);
-}
 :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__th,
 :not(.pf-v6-c-table__control-row) ~ .pf-v6-c-table__expandable-row > .pf-v6-c-table__td {
   padding-block-start: 0;

package/components/Table/table.scss

@@ -81,7 +81,8 @@
   --#{$table}__toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$table}__toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$table}__toggle--c-button__toggle-icon--Rotate: 270deg;
-  --#{$table}__toggle--c-button__toggle-icon--Transition: .2s ease-in 0s;
+  --#{$table}__toggle--c-button__toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$table}__toggle--c-button__toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$table}__toggle--c-button--m-expanded__toggle-icon--Rotate: 360deg;
 
   // * Table button
@@ -115,9 +116,6 @@
   --#{$table}__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$table}__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
 
-  // * Table expandable row
-  --#{$table}__expandable-row--Transition: var(--pf-t--global--transition);
-
   // * Table expandable row content
   --#{$table}__expandable-row-content--PaddingBlockStart: var(--pf-t--global--spacer--md);
   --#{$table}__expandable-row-content--PaddingBlockEnd: var(--pf-t--global--spacer--md);
@@ -741,7 +739,7 @@
   .#{$table}__toggle-icon {
     @include pf-v6-mirror-inline-on-rtl;
 
-    transition: var(--#{$table}__toggle--c-button__toggle-icon--Transition);
+    transition: transform var(--#{$table}__toggle--c-button__toggle-icon--TransitionDuration) var(--#{$table}__toggle--c-button__toggle-icon--TransitionTimingFunction);
     transform: rotate(var(--#{$table}__toggle--c-button__toggle-icon--Rotate));
   }
 
@@ -944,11 +942,6 @@
   position: relative;
   border-block-end: 0 solid transparent;
 
-  &,
-  td:where(.#{$table}__td):first-child::after {
-    transition: var(--#{$table}__expandable-row--Transition);
-  }
-
   @at-root :not(.#{$table}__control-row) ~ .#{$table}__expandable-row {
     > .#{$table}__th,
     > .#{$table}__td {

package/components/Toolbar/toolbar.css

@@ -38,7 +38,8 @@
   --pf-v6-c-toolbar--m-sticky--BoxShadow: var(--pf-t--global--box-shadow--md--bottom);
   --pf-v6-c-toolbar--m-sticky--BackgroundColor: var(--pf-t--global--background--color--primary--default);
   --pf-v6-c-toolbar__expand-all-icon--Rotate: 0;
-  --pf-v6-c-toolbar__expand-all-icon--Transition: var(--pf-t--global--transition);
+  --pf-v6-c-toolbar__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-toolbar__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
   --pf-v6-c-toolbar__group--m-filter-group--ColumnGap: var(--pf-t--global--spacer--gap--control-to-control--default);
   --pf-v6-c-toolbar__item--m-label--FontWeight: var(--pf-t--global--font--weight--body--bold);
@@ -370,7 +371,7 @@
 
 .pf-v6-c-toolbar__expand-all-icon {
   display: inline-flex;
-  transition: var(--pf-v6-c-toolbar__expand-all-icon--Transition);
+  transition: transform var(--pf-v6-c-toolbar__expand-all-icon--TransitionDuration) var(--pf-v6-c-toolbar__expand-all-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-toolbar__expand-all-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-toolbar__expand-all-icon {

package/components/Toolbar/toolbar.scss

@@ -67,7 +67,8 @@ $pf-v6--include-toolbar-breakpoints: true !default;
 
   // * Toolbar expand all
   --#{$toolbar}__expand-all-icon--Rotate: 0;
-  --#{$toolbar}__expand-all-icon--Transition: var(--pf-t--global--transition);
+  --#{$toolbar}__expand-all-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$toolbar}__expand-all-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$toolbar}__item--m-expand-all--m-expanded__expand-all-icon--Rotate: 90deg;
 
   // * Toolbar filter group
@@ -299,7 +300,7 @@ $pf-v6--include-toolbar-breakpoints: true !default;
 // - Toolbar expand all
 .#{$toolbar}__expand-all-icon {
   display: inline-flex;
-  transition: var(--#{$toolbar}__expand-all-icon--Transition);
+  transition: transform var(--#{$toolbar}__expand-all-icon--TransitionDuration) var(--#{$toolbar}__expand-all-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$toolbar}__expand-all-icon--Rotate));
 
   @include pf-v6-mirror-inline-on-rtl; // - TODO: mirror this icon in breaking change

package/components/Wizard/wizard.css

@@ -40,7 +40,8 @@
   --pf-v6-c-wizard__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-wizard__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-wizard__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-wizard__nav-link-toggle-icon--Transition: var(--pf-t--global--transition);
+  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --pf-v6-c-wizard__nav-link-toggle-icon--Rotate: 0;
   --pf-v6-c-wizard__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
   --pf-v6-c-wizard__nav-link--before--Width: var(--pf-t--global--icon--size--font--xl);
@@ -446,7 +447,7 @@
 
 .pf-v6-c-wizard__nav-link-toggle-icon {
   display: inline-block;
-  transition: var(--pf-v6-c-wizard__nav-link-toggle-icon--Transition);
+  transition: transform var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionDuration) var(--pf-v6-c-wizard__nav-link-toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--pf-v6-c-wizard__nav-link-toggle-icon--Rotate));
 }
 :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-wizard__nav-link-toggle-icon {

package/components/Wizard/wizard.scss

@@ -63,7 +63,8 @@
   --#{$wizard}__nav-link-toggle--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
   --#{$wizard}__nav-link-toggle--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$wizard}__nav-link-toggle--Color: var(--pf-t--global--icon--color--regular);
-  --#{$wizard}__nav-link-toggle-icon--Transition: var(--pf-t--global--transition);
+  --#{$wizard}__nav-link-toggle-icon--TransitionDuration: var(--pf-t--global--motion--duration--icon--long);
+  --#{$wizard}__nav-link-toggle-icon--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
   --#{$wizard}__nav-link-toggle-icon--Rotate: 0;
   --#{$wizard}__nav-item--m-expanded__link-toggle-icon--Rotate: 90deg;
 
@@ -546,7 +547,7 @@
   @include pf-v6-mirror-inline-on-rtl;
 
   display: inline-block;
-  transition: var(--#{$wizard}__nav-link-toggle-icon--Transition);
+  transition: transform var(--#{$wizard}__nav-link-toggle-icon--TransitionDuration) var(--#{$wizard}__nav-link-toggle-icon--TransitionTimingFunction);
   transform: rotate(var(--#{$wizard}__nav-link-toggle-icon--Rotate));
 }