@revikornmann/muka-ui 0.28.1 → 0.29.0

package/dist/styles/components/ProgressAccordeon.css

@@ -13,6 +13,7 @@
 
 /* Per-state gap: content-bearing steps are tighter, header-only steps looser */
 .muka-progress-accordeon--current,
+.muka-progress-accordeon--current.muka-progress-accordeon--expanded,
 .muka-progress-accordeon--past.muka-progress-accordeon--expanded,
 .muka-progress-accordeon--upcoming.muka-progress-accordeon--expanded {
   gap: var(--spacing-6);
@@ -20,7 +21,8 @@
 
 .muka-progress-accordeon--upcoming,
 .muka-progress-accordeon--past.muka-progress-accordeon--collapsed,
-.muka-progress-accordeon--upcoming.muka-progress-accordeon--collapsed {
+.muka-progress-accordeon--upcoming.muka-progress-accordeon--collapsed,
+.muka-progress-accordeon--current.muka-progress-accordeon--collapsed {
   gap: var(--spacing-8);
 }
 
@@ -165,32 +167,44 @@
   width: 100%;
 }
 
-/* ─── Collapse/expand animation (past & upcoming steps) ──────
-   The grid-template-rows 1fr → 0fr technique animates the content to/from its
-   intrinsic (auto) height with no magic max-height. Under prefers-reduced-motion
-   --motion-duration-view resolves to 0ms, so the toggle stays instant. */
-.muka-progress-accordeon__slot-wrapper {
+/* ─── Collapse/expand animation (any expandable step) ──────
+   Animates grid-template-rows 1fr ↔ 0fr so the panel (slot + actions) grows and
+   shrinks to its intrinsic height. Opacity fades with the same duration.
+   Under prefers-reduced-motion, --motion-duration-view is 0ms. */
+.muka-progress-accordeon__panel-wrapper {
   display: grid;
   grid-template-rows: 1fr;
-  transition: grid-template-rows var(--motion-duration-view) var(--motion-easing-enter);
+  opacity: 1;
+  transition:
+    grid-template-rows var(--motion-duration-view) var(--motion-easing-enter),
+    opacity var(--motion-duration-view) var(--motion-easing-enter);
 }
 
-.muka-progress-accordeon__slot-wrapper--collapsed {
+.muka-progress-accordeon__panel-wrapper--collapsed {
   grid-template-rows: 0fr;
+  opacity: 0;
+  transition:
+    grid-template-rows var(--motion-duration-view) var(--motion-easing-exit),
+    opacity calc(var(--motion-duration-view) * 0.6) var(--motion-easing-exit);
 }
 
 /* The direct grid child clips and must have NO padding/border of its own —
    min-height:0 lets it shrink, and with no padding the 0fr track reaches a true
    0 height (padding on the item would leave a residual gap when collapsed). */
-.muka-progress-accordeon__slot-clip {
+.muka-progress-accordeon__panel-clip {
   overflow: hidden;
   min-height: 0;
 }
 
-/* The header↔content spacing lives on the inner slot (inside the clip region)
-   so it collapses together with the content. */
-.muka-progress-accordeon__slot-wrapper .muka-progress-accordeon__slot {
+/* Header↔content spacing + slot/actions gap live inside the clip so they
+   collapse together with the panel. */
+.muka-progress-accordeon__panel {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--spacing-6);
   padding-top: var(--spacing-4);
+  width: 100%;
 }
 
 /* ─── Action buttons (current state) ─────────────────────── */