@patternfly/patternfly 6.3.0-prerelease.2 → 6.3.0-prerelease.21

package/components/ExpandableSection/expandable-section.css

@@ -9,6 +9,18 @@
   --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: 0;
   --pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate: 90deg;
   --pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
+  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-expandable-section__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide);
+  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
+  --pf-v6-c-expandable-section__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-expandable-section__content--TransitionDelay--hide: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade);
+  --pf-v6-c-expandable-section__content--Opacity: 0;
+  --pf-v6-c-expandable-section__content--TranslateY: 0;
+  --pf-v6-c-expandable-section--m-expanded__content--Opacity: 1;
+  --pf-v6-c-expandable-section--m-expanded__content--TranslateY: 0;
   --pf-v6-c-expandable-section__content--MaxWidth: auto;
   --pf-v6-c-expandable-section--m-limit-width__content--MaxWidth: 46.875rem;
   --pf-v6-c-expandable-section--m-display-lg--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -20,20 +32,39 @@
   --pf-v6-c-expandable-section--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
   --pf-v6-c-expandable-section--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
   --pf-v6-c-expandable-section--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --pf-v6-c-expandable-section--m-display-lg--TransitionDelay: var(--pf-v6-c-expandable-section__content--TransitionDuration--collapse--fade);
   --pf-v6-c-expandable-section--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--pf-v6-c-expandable-section__toggle-icon--MinWidth));
   --pf-v6-c-expandable-section--m-truncate__content--LineClamp: 3;
   --pf-v6-c-expandable-section--m-truncate--Gap: var(--pf-t--global--spacer--xs);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-expandable-section {
+    --pf-v6-c-expandable-section__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-expandable-section__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-expandable-section__content--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-expandable-section {
   display: flex;
   flex-direction: column;
-  gap: var(--pf-v6-c-expandable-section--Gap);
+  gap: 0;
+  transition-delay: var(--pf-v6-c-expandable-section__content--TransitionDelay--hide);
+  transition-duration: 0s;
+  transition-property: gap, padding-block-end;
 }
 .pf-v6-c-expandable-section.pf-m-expanded {
   --pf-v6-c-expandable-section__toggle-icon--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--Rotate);
   --pf-v6-c-expandable-section__toggle-icon--m-expand-top--Rotate: var(--pf-v6-c-expandable-section--m-expanded__toggle-icon--m-expand-top--Rotate);
   --pf-v6-c-expandable-section--m-display-lg--PaddingBlockEnd: var(--pf-v6-c-expandable-section--m-display-lg--m-expanded--PaddingBlockEnd);
+  --pf-v6-c-expandable-section__content--TransitionDuration--slide: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--slide);
+  --pf-v6-c-expandable-section__content--TransitionDuration--fade: var(--pf-v6-c-expandable-section__content--TransitionDuration--expand--fade);
+  --pf-v6-c-expandable-section__content--Opacity: var(--pf-v6-c-expandable-section--m-expanded__content--Opacity);
+  --pf-v6-c-expandable-section__content--TranslateY: var(--pf-v6-c-expandable-section--m-expanded__content--TranslateY);
+  --pf-v6-c-expandable-section__content--Visibility: auto;
+  --pf-v6-c-expandable-section__content--MaxHeight: 9999px;
+  --pf-v6-c-expandable-section__content--TransitionDelay--hide: 0s;
+  gap: var(--pf-v6-c-expandable-section--Gap);
 }
 .pf-v6-c-expandable-section.pf-m-limit-width {
   --pf-v6-c-expandable-section__content--MaxWidth: var(--pf-v6-c-expandable-section--m-limit-width__content--MaxWidth);
@@ -79,4 +110,17 @@
   max-width: var(--pf-v6-c-expandable-section__content--MaxWidth);
   padding-block-end: var(--pf-v6-c-expandable-section__content--PaddingBlockEnd, 0);
   padding-inline-start: var(--pf-v6-c-expandable-section__content--PaddingInlineStart, 0);
+}
+.pf-v6-c-expandable-section__content:where([hidden]) {
+  display: revert;
+}
+.pf-v6-c-expandable-section:where(:not(.pf-m-truncate)) .pf-v6-c-expandable-section__content {
+  max-height: var(--pf-v6-c-expandable-section__content--MaxHeight, 0);
+  visibility: var(--pf-v6-c-expandable-section__content--Visibility, hidden);
+  opacity: var(--pf-v6-c-expandable-section__content--Opacity);
+  transition-delay: 0s, 0s, var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s), var(--pf-v6-c-expandable-section__content--TransitionDelay--hide, 0s);
+  transition-timing-function: var(--pf-v6-c-expandable-section__content--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-expandable-section__content--TransitionDuration--fade), var(--pf-v6-c-expandable-section__content--TransitionDuration--slide), 0s, 0s;
+  transition-property: opacity, translate, visibility, max-height;
+  translate: 0 var(--pf-v6-c-expandable-section__content--TranslateY);
 }

package/components/ExpandableSection/expandable-section.scss

@@ -13,6 +13,24 @@
   --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: 0;
   --#{$expandable-section}--m-expanded__toggle-icon--Rotate: 90deg;
   --#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate: -90deg;
+  --#{$expandable-section}__content--TransitionDuration--collapse--slide: 0s;
+  --#{$expandable-section}__content--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --#{$expandable-section}__content--TransitionDuration--expand--slide: 0s;
+  --#{$expandable-section}__content--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --#{$expandable-section}__content--TransitionDuration--slide: var(--#{$expandable-section}__content--TransitionDuration--collapse--slide);
+  --#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--collapse--fade);
+  --#{$expandable-section}__content--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$expandable-section}__content--TransitionDelay--hide: var(--#{$expandable-section}__content--TransitionDuration--fade);
+  --#{$expandable-section}__content--Opacity: 0;
+  --#{$expandable-section}__content--TranslateY: 0;
+  --#{$expandable-section}--m-expanded__content--Opacity: 1;
+  --#{$expandable-section}--m-expanded__content--TranslateY: 0;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$expandable-section}__content--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --#{$expandable-section}__content--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --#{$expandable-section}__content--TranslateY: -.5rem;
+  }
 
   // Content
   --#{$expandable-section}__content--MaxWidth: auto;
@@ -30,6 +48,7 @@
   --#{$expandable-section}--m-display-lg--BorderWidth: var(--pf-t--global--border--width--box--default);
   --#{$expandable-section}--m-display-lg--BorderColor: var(--pf-t--global--border--color--default);
   --#{$expandable-section}--m-display-lg--BorderRadius: var(--pf-t--global--border--radius--medium);
+  --#{$expandable-section}--m-display-lg--TransitionDelay: var(--#{$expandable-section}__content--TransitionDuration--collapse--fade);
 
   // Indented
   --#{$expandable-section}--m-indented__content--PaddingInlineStart: calc(var(--pf-t--global--spacer--action--horizontal--plain--default) + var(--pf-t--global--spacer--gap--text-to-element--default) + var(--#{$expandable-section}__toggle-icon--MinWidth));
@@ -42,12 +61,24 @@
 .#{$expandable-section} {
   display: flex;
   flex-direction: column;
-  gap: var(--#{$expandable-section}--Gap);
+  gap: 0;
+  transition-delay: var(--#{$expandable-section}__content--TransitionDelay--hide);
+  transition-duration: 0s;
+  transition-property: gap, padding-block-end;
 
   &.pf-m-expanded {
     --#{$expandable-section}__toggle-icon--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--Rotate);
     --#{$expandable-section}__toggle-icon--m-expand-top--Rotate: var(--#{$expandable-section}--m-expanded__toggle-icon--m-expand-top--Rotate);
     --#{$expandable-section}--m-display-lg--PaddingBlockEnd: var(--#{$expandable-section}--m-display-lg--m-expanded--PaddingBlockEnd);
+    --#{$expandable-section}__content--TransitionDuration--slide: var(--#{$expandable-section}__content--TransitionDuration--expand--slide);
+    --#{$expandable-section}__content--TransitionDuration--fade: var(--#{$expandable-section}__content--TransitionDuration--expand--fade);
+    --#{$expandable-section}__content--Opacity: var(--#{$expandable-section}--m-expanded__content--Opacity);
+    --#{$expandable-section}__content--TranslateY: var(--#{$expandable-section}--m-expanded__content--TranslateY);
+    --#{$expandable-section}__content--Visibility: auto;
+    --#{$expandable-section}__content--MaxHeight: 9999px;
+    --#{$expandable-section}__content--TransitionDelay--hide: 0s;
+
+    gap: var(--pf-v6-c-expandable-section--Gap);
   }
 
   &.pf-m-limit-width {
@@ -70,6 +101,7 @@
 
   &.pf-m-truncate {
     --#{$expandable-section}--Gap: var(--#{$expandable-section}--m-truncate--Gap);
+
     &:not(.pf-m-expanded) .#{$expandable-section}__content {
       // stylelint-disable
       display: -webkit-box;
@@ -99,4 +131,19 @@
   max-width: var(--#{$expandable-section}__content--MaxWidth);
   padding-block-end: var(--#{$expandable-section}__content--PaddingBlockEnd, 0);
   padding-inline-start: var(--#{$expandable-section}__content--PaddingInlineStart, 0);
+
+  &:where([hidden]) {
+    display: revert;
+  }
+
+  .#{$expandable-section}:where(:not(.pf-m-truncate)) & {
+    max-height: var(--#{$expandable-section}__content--MaxHeight, 0);
+    visibility: var(--#{$expandable-section}__content--Visibility, hidden);
+    opacity: var(--#{$expandable-section}__content--Opacity);
+    transition-delay: 0s, 0s, var(--#{$expandable-section}__content--TransitionDelay--hide, 0s), var(--#{$expandable-section}__content--TransitionDelay--hide, 0s);
+    transition-timing-function: var(--#{$expandable-section}__content--TransitionTimingFunction);
+    transition-duration: var(--#{$expandable-section}__content--TransitionDuration--fade), var(--#{$expandable-section}__content--TransitionDuration--slide), 0s, 0s;
+    transition-property: opacity, translate, visibility, max-height;
+    translate: 0 var(--#{$expandable-section}__content--TranslateY);
+  }
 }

package/components/MenuToggle/menu-toggle.css

@@ -450,16 +450,20 @@
   flex-wrap: nowrap;
 }
 
-.pf-v6-c-menu-toggle__icon {
-  flex-shrink: 0;
-}
 .pf-v6-c-menu-toggle__icon.pf-m-avatar .pf-v6-c-avatar,
 .pf-v6-c-menu-toggle__icon.pf-m-avatar img,
-.pf-v6-c-menu-toggle__icon.pf-m-avatar svg {
+.pf-v6-c-menu-toggle__icon.pf-m-avatar svg, .pf-v6-c-menu-toggle:not(.pf-m-plain) .pf-v6-c-menu-toggle__icon {
   margin-block-start: calc(var(--pf-v6-c-menu-toggle--PaddingBlockStart) * -1);
   margin-block-end: calc(var(--pf-v6-c-menu-toggle--PaddingBlockEnd) * -1);
 }
 
+.pf-v6-c-menu-toggle__icon {
+  flex-shrink: 0;
+}
+.pf-v6-c-menu-toggle__icon :where(picture, img) {
+  vertical-align: middle;
+}
+
 .pf-v6-c-menu-toggle__controls {
   display: flex;
   gap: var(--pf-v6-c-menu-toggle__controls--Gap);

package/components/MenuToggle/menu-toggle.scss

@@ -567,17 +567,29 @@
   flex-wrap: nowrap;
 }
 
+%pf-v6-menu-toggle__icon--MarginBlock {
+  margin-block-start: calc(var(--#{$menu-toggle}--PaddingBlockStart) * -1);
+  margin-block-end: calc(var(--#{$menu-toggle}--PaddingBlockEnd) * -1);
+}
+
 .#{$menu-toggle}__icon {
   flex-shrink: 0;
-
+  
+  @at-root .#{$menu-toggle}:not(.pf-m-plain) & {
+    @extend %pf-v6-menu-toggle__icon--MarginBlock;
+  }
+  
   &.pf-m-avatar {
     .#{$avatar},
     img,
     svg {
-      margin-block-start: calc(var(--#{$menu-toggle}--PaddingBlockStart) * -1);
-      margin-block-end: calc(var(--#{$menu-toggle}--PaddingBlockEnd) * -1);
+      @extend %pf-v6-menu-toggle__icon--MarginBlock;
     }
   }
+
+  :where(picture, img) {
+    vertical-align: middle;
+  }
 }
 
 // - Menu toggle controls

package/components/Page/page.css

@@ -3,8 +3,9 @@
   --pf-v6-c-page--inset: var(--pf-t--global--spacer--inset--page-chrome);
   --pf-v6-c-page--c-masthead--ZIndex: var(--pf-t--global--z-index--md);
   --pf-v6-c-page__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
-  --pf-v6-c-page__sidebar--Width: 18.125rem;
-  --pf-v6-c-page__sidebar--xl--Width: 18.125rem;
+  --pf-v6-c-page__sidebar--Width--base: 18.125rem;
+  --pf-v6-c-page__sidebar--Width: var(--pf-v6-c-page__sidebar--Width--base);
+  --pf-v6-c-page__sidebar--xl--Width: var(--pf-v6-c-page__sidebar--Width--base);
   --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--TransitionDuration: var(--pf-t--global--motion--duration--slide-in--default);
@@ -432,7 +433,7 @@
   -webkit-overflow-scrolling: touch;
 }
 @media screen and (min-width: 75rem) {
-  .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
+  .pf-v6-c-page.pf-m-no-sidebar, .pf-v6-c-masthead + .pf-v6-c-page__main-container, .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__main-container,
   .pf-v6-c-masthead + .pf-v6-c-page__drawer,
   .pf-v6-c-page__sidebar.pf-m-collapsed + .pf-v6-c-page__drawer {
     --pf-v6-c-page__main-container--GridArea: var(--pf-v6-c-page--masthead--main-container--GridArea);

package/components/Page/page.scss

@@ -14,8 +14,9 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
 
   // Sidebar
   --#{$page}__sidebar--ZIndex: var(--pf-t--global--z-index--sm);
-  --#{$page}__sidebar--Width: #{pf-size-prem(290px)};
-  --#{$page}__sidebar--xl--Width: #{pf-size-prem(290px)}; // TODO Can remove at breaking change
+  --#{$page}__sidebar--Width--base: #{pf-size-prem(290px)};
+  --#{$page}__sidebar--Width: var(--#{$page}__sidebar--Width--base);
+  --#{$page}__sidebar--xl--Width: var(--#{$page}__sidebar--Width--base);
   --#{$page}__sidebar--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
   --#{$page}__sidebar--BoxShadow: none;
 
@@ -352,6 +353,7 @@ $pf-page-v6--height-breakpoint-map: build-breakpoint-map("base", "sm", "md", "lg
   -webkit-overflow-scrolling: touch;
 
   @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
+    @at-root .#{$page}.pf-m-no-sidebar,
     .#{$masthead} + &,
     .#{$page}__sidebar.pf-m-collapsed + & {
       --#{$page}__main-container--GridArea: var(--#{$page}--masthead--main-container--GridArea);

package/components/ProgressStepper/progress-stepper.scss

@@ -442,5 +442,6 @@ $pf-v6-c-progress-stepper--breakpoint-map: build-breakpoint-map();
       }
     }
   }
+  
 }
 // stylelint-enable

package/components/Skeleton/skeleton.css

@@ -11,8 +11,8 @@
   --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
   --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
   --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
-  --pf-v6-c-skeleton--after--TranslateX: -100%;
-  --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
+  --pf-v6-c-skeleton--after--TranslateX: 0;
+  --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading-reduced-motion;
   --pf-v6-c-skeleton--after--AnimationDuration: 3s;
   --pf-v6-c-skeleton--after--AnimationIterationCount: infinite;
   --pf-v6-c-skeleton--after--AnimationTimingFunction: linear;
@@ -44,6 +44,15 @@
   --pf-v6-c-skeleton--m-height-75--Height: 75%;
   --pf-v6-c-skeleton--m-height-100--Height: 100%;
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-skeleton {
+    --pf-v6-c-skeleton--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
+    --pf-v6-c-skeleton--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
+    --pf-v6-c-skeleton--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
+    --pf-v6-c-skeleton--after--TranslateX: -100%;
+    --pf-v6-c-skeleton--after--AnimationName: pf-v6-c-skeleton-loading;
+  }
+}
 
 .pf-v6-c-skeleton {
   position: relative;
@@ -163,4 +172,15 @@
   100% {
     transform: translateX(100%);
   }
+}
+@keyframes pf-v6-c-skeleton-loading-reduced-motion {
+  0% {
+    opacity: 0.25;
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.25;
+  }
 }

package/components/Skeleton/skeleton.scss

@@ -14,15 +14,23 @@
   // After
   --#{$skeleton}--after--LinearGradientAngle: 90deg;
   --#{$skeleton}--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
-  --#{$skeleton}--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover); // TODO: replace with new token
+  --#{$skeleton}--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover); 
   --#{$skeleton}--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
-  --#{$skeleton}--after--TranslateX: -100%;
-  --#{$skeleton}--after--AnimationName: #{$skeleton}-loading;
+  --#{$skeleton}--after--TranslateX: 0;
+  --#{$skeleton}--after--AnimationName: #{$skeleton}-loading-reduced-motion;
   --#{$skeleton}--after--AnimationDuration: 3s;
   --#{$skeleton}--after--AnimationIterationCount: infinite;
   --#{$skeleton}--after--AnimationTimingFunction: linear;
   --#{$skeleton}--after--AnimationDelay: .5s;
 
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$skeleton}--after--LinearGradientColorStop1: var(--pf-t--global--background--color--secondary--default);
+    --#{$skeleton}--after--LinearGradientColorStop2: var(--pf-t--global--background--color--secondary--hover);
+    --#{$skeleton}--after--LinearGradientColorStop3: var(--pf-t--global--background--color--secondary--default);
+    --#{$skeleton}--after--TranslateX: -100%;
+    --#{$skeleton}--after--AnimationName: #{$skeleton}-loading;
+  }
+
   // Circle
   --#{$skeleton}--m-circle--BorderRadius: var(--pf-t--global--border--radius--pill);
   --#{$skeleton}--m-circle--before--PaddingBlockEnd: 100%;
@@ -209,3 +217,17 @@
     transform: translateX(100%);
   }
 }
+
+@keyframes #{$skeleton}-loading-reduced-motion {
+  0% {
+    opacity: 0.25;
+  }
+
+  60% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0.25;
+  }
+}

package/components/Spinner/spinner.css

@@ -8,6 +8,7 @@
   --pf-v6-c-spinner--StrokeWidth: 10;
   --pf-v6-c-spinner__path--StrokeWidth: var(--pf-v6-c-spinner--StrokeWidth);
   --pf-v6-c-spinner__path--AnimationTimingFunction: ease-in-out;
+  --pf-v6-c-spinner--m-xs--diameter: var(--pf-t--global--icon--size--sm);
   --pf-v6-c-spinner--m-sm--diameter: var(--pf-t--global--icon--size--md);
   --pf-v6-c-spinner--m-md--diameter: var(--pf-t--global--icon--size--lg);
   --pf-v6-c-spinner--m-lg--diameter: var(--pf-t--global--icon--size--xl);
@@ -24,6 +25,10 @@
 .pf-v6-c-spinner.pf-m-inline {
   --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-inline--diameter);
 }
+.pf-v6-c-spinner.pf-m-xs {
+  --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-xs--diameter);
+  --pf-v6-c-spinner--StrokeWidth: 15;
+}
 .pf-v6-c-spinner.pf-m-sm {
   --pf-v6-c-spinner--diameter: var(--pf-v6-c-spinner--m-sm--diameter);
 }

package/components/Spinner/spinner.scss

@@ -14,6 +14,7 @@
   --#{$spinner}__path--AnimationTimingFunction: ease-in-out;
 
   // sizes
+  --#{$spinner}--m-xs--diameter: var(--pf-t--global--icon--size--sm);
   --#{$spinner}--m-sm--diameter: var(--pf-t--global--icon--size--md);
   --#{$spinner}--m-md--diameter: var(--pf-t--global--icon--size--lg);
   --#{$spinner}--m-lg--diameter: var(--pf-t--global--icon--size--xl);
@@ -34,6 +35,11 @@
     --#{$spinner}--diameter: var(--#{$spinner}--m-inline--diameter);
   }
 
+  &.pf-m-xs {
+    --#{$spinner}--diameter: var(--#{$spinner}--m-xs--diameter);
+    --#{$spinner}--StrokeWidth: 15;
+  }
+
   &.pf-m-sm {
     --#{$spinner}--diameter: var(--#{$spinner}--m-sm--diameter);
   }

package/components/Table/table-grid.css

@@ -34,6 +34,7 @@
   --pf-v6-c-table--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--cell--responsive--PaddingInlineEnd: 0;
   --pf-v6-c-table--cell--responsive--PaddingInlineStart: 0;
+  --pf-v6-c-table--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold);
   --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--m-compact__tr--responsive--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
   --pf-v6-c-table--m-compact__tr__td--responsive--PaddingBlockStart: var(--pf-t--global--spacer--xs);
@@ -158,7 +159,7 @@
 }
 .pf-m-grid.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
   position: revert;
-  font-weight: bold;
+  font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
   text-align: start;
   content: attr(data-label);
 }
@@ -458,7 +459,7 @@
   }
   .pf-m-grid-md.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
     position: revert;
-    font-weight: bold;
+    font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
     text-align: start;
     content: attr(data-label);
   }
@@ -761,7 +762,7 @@
   }
   .pf-m-grid-lg.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
     position: revert;
-    font-weight: bold;
+    font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
     text-align: start;
     content: attr(data-label);
   }
@@ -1064,7 +1065,7 @@
   }
   .pf-m-grid-xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
     position: revert;
-    font-weight: bold;
+    font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
     text-align: start;
     content: attr(data-label);
   }
@@ -1367,7 +1368,7 @@
   }
   .pf-m-grid-2xl.pf-v6-c-table :where(.pf-v6-c-table__th, .pf-v6-c-table__td)[data-label]::before {
     position: revert;
-    font-weight: bold;
+    font-weight: var(--pf-v6-c-table--cell--responsive--th--FontWeight);
     text-align: start;
     content: attr(data-label);
   }

package/components/Table/table-grid.scss

@@ -94,6 +94,7 @@
   --#{$table}--cell--first-child--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$table}--cell--responsive--PaddingInlineEnd: 0;
   --#{$table}--cell--responsive--PaddingInlineStart: 0;
+  --#{$table}--cell--responsive--th--FontWeight: var(--pf-t--global--font--weight--body--bold);
 
   // * Table grid compact table
   --#{$table}--m-compact__tr--responsive--PaddingBlockStart: var(--pf-t--global--spacer--sm);
@@ -272,7 +273,7 @@
 
     &::before {
       position: revert;
-      font-weight: bold;
+      font-weight: var(--#{$table}--cell--responsive--th--FontWeight);
       text-align: start;
       content: attr(data-label);
     }

package/components/Table/table.css

@@ -74,6 +74,17 @@
   --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--TransitionDuration--expand--slide: 0s;
+  --pf-v6-c-table__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: 0s;
+  --pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --pf-v6-c-table__expandable-row--TransitionDuration--slide: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide);
+  --pf-v6-c-table__expandable-row--TransitionDuration--fade: var(--pf-v6-c-table__expandable-row--TransitionDuration--collapse--fade);
+  --pf-v6-c-table__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --pf-v6-c-table__expandable-row--Opacity: 0;
+  --pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity: 1;
+  --pf-v6-c-table__expandable-row--TranslateY: 0;
+  --pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY: 0;
   --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);
@@ -134,6 +145,13 @@
   --pf-v6-c-table--m-sticky-header--ZIndex: calc(var(--pf-t--global--z-index--xs) + 1);
   --pf-v6-c-table--m-sticky-header--border--ZIndex: calc(var(--pf-t--global--z-index--xs) + 2);
 }
+@media screen and (prefers-reduced-motion: no-preference) {
+  .pf-v6-c-table {
+    --pf-v6-c-table__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --pf-v6-c-table__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --pf-v6-c-table__expandable-row--TranslateY: -.5rem;
+  }
+}
 
 .pf-v6-c-table {
   width: 100%;
@@ -702,6 +720,12 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 .pf-v6-c-table__expandable-row {
   position: relative;
   border-block-end: 0 solid transparent;
+  opacity: var(--pf-v6-c-table__expandable-row--Opacity);
+  transition-timing-function: var(--pf-v6-c-table__expandable-row--TransitionTimingFunction);
+  transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--fade);
+  transition-property: opacity, translate, display;
+  transition-behavior: allow-discrete;
+  translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
 }
 :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 {
@@ -730,6 +754,15 @@ thead .pf-v6-c-table__check .pf-v6-c-radio.pf-m-standalone {
 .pf-v6-c-table__expandable-row.pf-m-expanded {
   border-block-end-color: var(--pf-v6-c-table__expandable-row--m-expanded--BorderBlockEndColor);
   border-block-end-width: var(--pf-v6-c-table--border-width--base);
+  opacity: var(--pf-v6-c-table__tbody--m-expanded__expandable-row--Opacity);
+  transition-duration: var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--slide), var(--pf-v6-c-table__expandable-row--TransitionDuration--expand--fade);
+  translate: 0 var(--pf-v6-c-table__tbody--m-expanded__expandable-row--TranslateY);
+}
+@starting-style {
+  .pf-v6-c-table__expandable-row.pf-m-expanded {
+    opacity: var(--pf-v6-c-table__expandable-row--Opacity);
+    translate: 0 var(--pf-v6-c-table__expandable-row--TranslateY);
+  }
 }
 .pf-v6-c-table__expandable-row:not(.pf-m-expanded) {
   display: none;

package/components/Table/table.scss

@@ -118,6 +118,25 @@
   --#{$table}__action--PaddingInlineStart: var(--pf-t--global--spacer--sm);
   --#{$table}__action--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
 
+  // * Table expandable row
+  --#{$table}__expandable-row--TransitionDuration--expand--slide: 0s;
+  --#{$table}__expandable-row--TransitionDuration--expand--fade: var(--pf-t--global--motion--duration--fade--default);
+  --#{$table}__expandable-row--TransitionDuration--collapse--slide: 0s;
+  --#{$table}__expandable-row--TransitionDuration--collapse--fade: var(--pf-t--global--motion--duration--fade--short);
+  --#{$table}__expandable-row--TransitionDuration--slide: var(--#{$table}__expandable-row--TransitionDuration--collapse--slide);
+  --#{$table}__expandable-row--TransitionDuration--fade: var(--#{$table}__expandable-row--TransitionDuration--collapse--fade);
+  --#{$table}__expandable-row--TransitionTimingFunction: var(--pf-t--global--motion--timing-function--default);
+  --#{$table}__expandable-row--Opacity: 0;
+  --#{$table}__tbody--m-expanded__expandable-row--Opacity: 1;
+  --#{$table}__expandable-row--TranslateY: 0;
+  --#{$table}__tbody--m-expanded__expandable-row--TranslateY: 0;
+
+  @media screen and (prefers-reduced-motion: no-preference) {
+    --#{$table}__expandable-row--TransitionDuration--expand--slide: var(--pf-t--global--motion--duration--fade--default);
+    --#{$table}__expandable-row--TransitionDuration--collapse--slide: var(--pf-t--global--motion--duration--fade--short);
+    --#{$table}__expandable-row--TranslateY: -.5rem;
+  }
+
   // * 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);
@@ -953,6 +972,12 @@
 .#{$table}__expandable-row {
   position: relative;
   border-block-end: 0 solid transparent;
+  opacity: var(--#{$table}__expandable-row--Opacity);
+  transition-timing-function: var(--#{$table}__expandable-row--TransitionTimingFunction);
+  transition-duration: var(--#{$table}__expandable-row--TransitionDuration--fade), var(--#{$table}__expandable-row--TransitionDuration--slide), var(--#{$table}__expandable-row--TransitionDuration--fade);
+  transition-property: opacity, translate, display;
+  transition-behavior: allow-discrete;
+  translate: 0 var(--#{$table}__expandable-row--TranslateY);
 
   @at-root :not(.#{$table}__control-row) ~ .#{$table}__expandable-row {
     > .#{$table}__th,
@@ -989,6 +1014,14 @@
   &.pf-m-expanded {
     border-block-end-color: var(--#{$table}__expandable-row--m-expanded--BorderBlockEndColor);
     border-block-end-width: var(--#{$table}--border-width--base);
+    opacity: var(--#{$table}__tbody--m-expanded__expandable-row--Opacity);
+    transition-duration: var(--#{$table}__expandable-row--TransitionDuration--expand--fade), var(--#{$table}__expandable-row--TransitionDuration--expand--slide), var(--#{$table}__expandable-row--TransitionDuration--expand--fade);
+    translate: 0 var(--#{$table}__tbody--m-expanded__expandable-row--TranslateY);
+
+    @starting-style {
+      opacity: var(--#{$table}__expandable-row--Opacity);
+      translate: 0 var(--#{$table}__expandable-row--TranslateY);
+    }
   }
 
   &:not(.pf-m-expanded) {