@revikornmann/muka-ui 0.28.0 → 0.29.0

package/dist/esm/components/ProgressAccordeon/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) ─────────────────────── */

package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js

@@ -13,83 +13,92 @@ import './ProgressAccordeon.css';
  * content slot — visualising both progress and the work for a step.
  *
  * States:
- * - **past** — dark check indicator, heading, edit + chevron controls; the
- *   content slot collapses/expands via `collapsed` + `onToggle`
- * - **current** — accent numbered indicator, heading, content slot, actions
+ * - **past** — dark check indicator, heading, optional header button + chevron;
+ *   the content slot collapses/expands via `collapsed` + `onToggle`
+ * - **current** — accent numbered indicator, heading, content slot, optional
+ *   actions; pass `onToggle` to make the active step expandable too
  * - **upcoming** — muted numbered indicator, heading; optional collapsible
- *   content slot (same `collapsed` + `onToggle` as past) for empty-state
- *   instructions or picking up a step out of order
+ *   content slot for empty-state instructions or picking up a step out of order
  *
  * Content is passed as `children` (an optional slot) and rendered as-is — supply
  * your own `Card` or `EmptyState` when you want those surfaces. Composes the
  * Button, Icon and Divider primitives and is fully themed through the Muka
  * design token system.
  *
- * Tokens used:
- * - alias.color.accent.{default|contrast} — step indicator fills
- * - color.surface.sunken — upcoming indicator fill
- * - color.text.default.{default|inverse} — indicator glyphs
- * - text.heading.{md|sm} — step heading (responsive)
- * - text.body.base.regular — supporting description
- * - text.label.md.{bold|semibold} — indicator number
- * - spacing.{1|4|6|8} — vertical rhythm and gaps
- *
  * @accessibility
  * - Renders each step as a labelled group with `aria-current="step"` on the
  *   active (current) step.
  * - The chevron toggle exposes `aria-expanded`.
  */
-export const ProgressAccordeon = ({ state, stepNumber, heading, description, children, divider = true, collapsed = false, onToggle, editLabel = 'Edit', onEdit, primaryAction, secondaryAction, className = '', }) => {
+export const ProgressAccordeon = ({ state, stepNumber, heading, description, showDescription = false, children, divider = true, collapsed = false, onToggle, showHeaderButton, editLabel = 'Edit', onEdit, showActions = true, primaryAction, secondaryAction, className = '', }) => {
     const isPast = state === 'past';
     const isCurrent = state === 'current';
     const isUpcoming = state === 'upcoming';
-    // Past and upcoming share the collapsible slot pattern so consumers can show
-    // empty-state instructions on future steps and pick steps up independently.
-    const isCollapsible = isPast || isUpcoming;
-    const showToggle = isCollapsible && Boolean(onToggle);
-    const showEdit = isPast && !collapsed && Boolean(onEdit);
-    const showDescription = Boolean(description) && !(isCollapsible && collapsed);
-    // Collapsible steps keep their content mounted regardless of `collapsed` so
-    // the collapse/expand can be CSS-animated (you can't animate an unmounted node).
-    const hasSlot = (isCollapsible || isCurrent) && Boolean(children);
-    const hasActions = isCurrent && Boolean(primaryAction || secondaryAction);
-    // Collapse modifiers only when the step can actually collapse — keeps
-    // header-only upcoming spacing on the base `--upcoming` gap rule.
-    const showCollapseModifiers = isPast || (isUpcoming && (Boolean(children) || Boolean(onToggle)));
+    // Arrow button is opt-in for every state via `onToggle`.
+    const showToggle = Boolean(onToggle);
+    // Past/upcoming can honour `collapsed` without a toggle. Current also honours
+    // it so demos can animate open/close without showing a chevron.
+    const canCollapse = showToggle || isPast || isUpcoming || isCurrent;
+    const isEffectivelyCollapsed = canCollapse && collapsed;
+    // Header button (Edit) — Figma “Button header”: opt-in via `onEdit`, overridable
+    // with `showHeaderButton`, and only visible while expanded on past steps.
+    const headerButtonEnabled = showHeaderButton ?? Boolean(onEdit);
+    const showEdit = headerButtonEnabled &&
+        isPast &&
+        !isEffectivelyCollapsed &&
+        Boolean(onEdit);
+    const descriptionVisible = showDescription && Boolean(description);
+    // Keep slot/actions mounted regardless of `collapsed` so height can animate
+    // (you can't animate an unmounted node).
+    const hasSlot = Boolean(children);
+    // Keep action buttons mounted while collapsing so they animate with the panel
+    // (they're aria-hidden/inert via the wrapper when collapsed).
+    const hasActionButtons = isCurrent && showActions && Boolean(primaryAction || secondaryAction);
+    // Collapse modifiers when the step can actually collapse — keeps header-only
+    // upcoming spacing on the base `--upcoming` gap rule.
+    const showCollapseModifiers = isPast ||
+        (isUpcoming && (Boolean(children) || showToggle)) ||
+        (isCurrent && (showToggle || Boolean(children) || hasActionButtons));
     const rootClasses = [
         'muka-progress-accordeon',
         `muka-progress-accordeon--${state}`,
         showCollapseModifiers &&
-            `muka-progress-accordeon--${collapsed ? 'collapsed' : 'expanded'}`,
+            `muka-progress-accordeon--${isEffectivelyCollapsed ? 'collapsed' : 'expanded'}`,
         className,
     ].filter(Boolean).join(' ');
     const indicatorClasses = [
         'muka-progress-accordeon__indicator',
         `muka-progress-accordeon__indicator--${state}`,
     ].join(' ');
-    const header = (_jsxs("div", { className: "muka-progress-accordeon__header", children: [_jsxs("div", { className: "muka-progress-accordeon__header-row", children: [_jsxs("div", { className: "muka-progress-accordeon__heading-group", children: [_jsx("div", { className: indicatorClasses, "aria-hidden": "true", children: isPast ? (_jsx(Icon, { name: "check", variant: "fill", size: "sm", className: "muka-progress-accordeon__check-icon" })) : (_jsx("span", { className: "muka-progress-accordeon__number", children: stepNumber })) }), _jsx("h3", { className: "muka-progress-accordeon__heading", children: heading })] }), (showEdit || showToggle) && (_jsxs("div", { className: "muka-progress-accordeon__controls", children: [showEdit && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "tertiary", size: "md", onClick: onEdit, iconLeft: _jsx(Icon, { name: "pencil", variant: "line", size: "md" }), className: "muka-progress-accordeon__edit muka-progress-accordeon__edit--wide", children: editLabel }), _jsx(Button, { variant: "tertiary", size: "md", iconOnly: true, onClick: onEdit, className: "muka-progress-accordeon__edit muka-progress-accordeon__edit--narrow", "aria-label": editLabel, children: _jsx(Icon, { name: "pencil", variant: "line", size: "md" }) })] })), showToggle && (_jsx(Button, { variant: "tertiary", size: "md", iconOnly: true, onClick: onToggle, className: "muka-progress-accordeon__toggle", "aria-label": collapsed ? 'Expand' : 'Collapse', "aria-expanded": !collapsed, children: _jsx(Icon, { name: collapsed ? 'arrow-down-s' : 'arrow-up-s', variant: "line", size: "md" }) }))] }))] }), showDescription && (_jsx("div", { className: "muka-progress-accordeon__description", children: description }))] }));
+    const header = (_jsxs("div", { className: "muka-progress-accordeon__header", children: [_jsxs("div", { className: "muka-progress-accordeon__header-row", children: [_jsxs("div", { className: "muka-progress-accordeon__heading-group", children: [_jsx("div", { className: indicatorClasses, "aria-hidden": "true", children: isPast ? (_jsx(Icon, { name: "check", variant: "fill", size: "sm", className: "muka-progress-accordeon__check-icon" })) : (_jsx("span", { className: "muka-progress-accordeon__number", children: stepNumber })) }), _jsx("h3", { className: "muka-progress-accordeon__heading", children: heading })] }), (showEdit || showToggle) && (_jsxs("div", { className: "muka-progress-accordeon__controls", children: [showEdit && (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "secondary", size: "md", onClick: onEdit, iconLeft: _jsx(Icon, { name: "pencil", variant: "line", size: "md" }), className: "muka-progress-accordeon__edit muka-progress-accordeon__edit--wide", children: editLabel }), _jsx(Button, { variant: "secondary", size: "md", iconOnly: true, onClick: onEdit, className: "muka-progress-accordeon__edit muka-progress-accordeon__edit--narrow", "aria-label": editLabel, children: _jsx(Icon, { name: "pencil", variant: "line", size: "md" }) })] })), showToggle && (_jsx(Button, { variant: "secondary", size: "md", iconOnly: true, onClick: onToggle, className: "muka-progress-accordeon__toggle", "aria-label": isEffectivelyCollapsed ? 'Expand' : 'Collapse', "aria-expanded": !isEffectivelyCollapsed, children: _jsx(Icon, { name: isEffectivelyCollapsed ? 'arrow-down-s' : 'arrow-up-s', variant: "line", size: "md" }) }))] }))] }), descriptionVisible && (_jsx("div", { className: "muka-progress-accordeon__description", children: description }))] }));
     const slot = hasSlot ? (_jsx("div", { className: "muka-progress-accordeon__slot", children: children })) : null;
-    // Collapsible steps wrap the (always-mounted) slot in a grid animation
-    // container that collapses its height to zero. Marked inert + aria-hidden while
-    // collapsed so the still-mounted content is skipped by keyboard focus and
-    // assistive tech.
+    const actions = hasActionButtons ? (_jsxs("div", { className: "muka-progress-accordeon__actions", children: [secondaryAction && (_jsx(Button, { variant: "secondary", size: "md", onClick: secondaryAction.onClick, disabled: secondaryAction.disabled, className: "muka-progress-accordeon__action", children: secondaryAction.label })), primaryAction && (_jsx(Button, { variant: "primary", size: "md", onClick: primaryAction.onClick, disabled: primaryAction.disabled, className: "muka-progress-accordeon__action", children: primaryAction.label }))] })) : null;
+    // Collapsible steps wrap slot + actions in a grid animation container that
+    // collapses its height to zero. Marked inert + aria-hidden while collapsed so
+    // the still-mounted content is skipped by keyboard focus and assistive tech.
     // `inert` is set imperatively on the DOM node rather than via a React prop:
     // React 18 drops a boolean `inert` prop, while React 19 warns on the string
     // form — toggling the attribute directly works correctly under both.
-    const slotWrapperRef = React.useRef(null);
+    const panelWrapperRef = React.useRef(null);
     React.useEffect(() => {
-        const node = slotWrapperRef.current;
+        const node = panelWrapperRef.current;
         if (!node)
             return;
-        if (collapsed) {
+        if (isEffectivelyCollapsed) {
             node.setAttribute('inert', '');
         }
         else {
             node.removeAttribute('inert');
         }
-    }, [collapsed]);
-    const collapsibleSlot = hasSlot ? (_jsx("div", { ref: slotWrapperRef, className: `muka-progress-accordeon__slot-wrapper${collapsed ? ' muka-progress-accordeon__slot-wrapper--collapsed' : ''}`, "aria-hidden": collapsed || undefined, children: _jsx("div", { className: "muka-progress-accordeon__slot-clip", children: slot }) })) : null;
-    return (_jsxs("div", { className: rootClasses, role: "group", "aria-label": `Step ${stepNumber}: ${heading}`, "aria-current": isCurrent ? 'step' : undefined, children: [isCollapsible ? (_jsxs("div", { className: "muka-progress-accordeon__body", children: [header, collapsibleSlot] })) : (_jsxs(_Fragment, { children: [header, slot] })), hasActions && (_jsxs("div", { className: "muka-progress-accordeon__actions", children: [secondaryAction && (_jsx(Button, { variant: "secondary", size: "md", onClick: secondaryAction.onClick, disabled: secondaryAction.disabled, className: "muka-progress-accordeon__action", children: secondaryAction.label })), primaryAction && (_jsx(Button, { variant: "primary", size: "md", onClick: primaryAction.onClick, disabled: primaryAction.disabled, className: "muka-progress-accordeon__action", children: primaryAction.label }))] })), divider && _jsx(Divider, { className: "muka-progress-accordeon__divider" })] }));
+    }, [isEffectivelyCollapsed]);
+    // Always wrap content in the animated panel when present, including on the
+    // active step (no chevron), so Flow can animate collapse on “Next step”.
+    const hasCollapsiblePanel = hasSlot || hasActionButtons;
+    const collapsiblePanel = hasCollapsiblePanel ? (_jsx("div", { ref: panelWrapperRef, className: `muka-progress-accordeon__panel-wrapper${isEffectivelyCollapsed
+            ? ' muka-progress-accordeon__panel-wrapper--collapsed'
+            : ''}`, "aria-hidden": isEffectivelyCollapsed || undefined, children: _jsx("div", { className: "muka-progress-accordeon__panel-clip", children: _jsxs("div", { className: "muka-progress-accordeon__panel", children: [slot, actions] }) }) })) : null;
+    const useCollapsibleBody = hasCollapsiblePanel || showToggle || isPast || isUpcoming;
+    return (_jsxs("div", { className: rootClasses, role: "group", "aria-label": `Step ${stepNumber}: ${heading}`, "aria-current": isCurrent ? 'step' : undefined, children: [useCollapsibleBody ? (_jsxs("div", { className: "muka-progress-accordeon__body", children: [header, collapsiblePanel] })) : (_jsxs(_Fragment, { children: [header, slot, actions] })), divider && _jsx(Divider, { className: "muka-progress-accordeon__divider" })] }));
 };
 export default ProgressAccordeon;
 //# sourceMappingURL=ProgressAccordeon.js.map

package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressAccordeon.js","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/ProgressAccordeon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,yBAAyB,CAAC;AA0EjC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAqC,CAAC,EAClE,KAAK,EACL,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,OAAO,GAAG,IAAI,EACd,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,GAAG,MAAM,EAClB,MAAM,EACN,aAAa,EACb,eAAe,EACf,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,KAAK,KAAK,MAAM,CAAC;IAChC,MAAM,SAAS,GAAG,KAAK,KAAK,SAAS,CAAC;IACtC,MAAM,UAAU,GAAG,KAAK,KAAK,UAAU,CAAC;IACxC,6EAA6E;IAC7E,4EAA4E;IAC5E,MAAM,aAAa,GAAG,MAAM,IAAI,UAAU,CAAC;IAE3C,MAAM,UAAU,GAAG,aAAa,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC;IACtD,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,SAAS,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IACzD,MAAM,eAAe,GAAG,OAAO,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,aAAa,IAAI,SAAS,CAAC,CAAC;IAC9E,4EAA4E;IAC5E,iFAAiF;IACjF,MAAM,OAAO,GAAG,CAAC,aAAa,IAAI,SAAS,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC;IAClE,MAAM,UAAU,GAAG,SAAS,IAAI,OAAO,CAAC,aAAa,IAAI,eAAe,CAAC,CAAC;IAC1E,sEAAsE;IACtE,kEAAkE;IAClE,MAAM,qBAAqB,GACzB,MAAM,IAAI,CAAC,UAAU,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAErE,MAAM,WAAW,GAAG;QAClB,yBAAyB;QACzB,4BAA4B,KAAK,EAAE;QACnC,qBAAqB;YACnB,4BAA4B,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,EAAE;QACpE,SAAS;KACV,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAE5B,MAAM,gBAAgB,GAAG;QACvB,oCAAoC;QACpC,uCAAuC,KAAK,EAAE;KAC/C,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,MAAM,MAAM,GAAG,CACb,eAAK,SAAS,EAAC,iCAAiC,aAC9C,eAAK,SAAS,EAAC,qCAAqC,aAClD,eAAK,SAAS,EAAC,wCAAwC,aACrD,cAAK,SAAS,EAAE,gBAAgB,iBAAc,MAAM,YACjD,MAAM,CAAC,CAAC,CAAC,CACR,KAAC,IAAI,IACH,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAC,qCAAqC,GAC/C,CACH,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,iCAAiC,YAAE,UAAU,GAAQ,CACtE,GACG,EACN,aAAI,SAAS,EAAC,kCAAkC,YAAE,OAAO,GAAM,IAC3D,EAEL,CAAC,QAAQ,IAAI,UAAU,CAAC,IAAI,CAC3B,eAAK,SAAS,EAAC,mCAAmC,aAC/C,QAAQ,IAAI,CACX,8BAEE,KAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,MAAM,EACf,QAAQ,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,EACzD,SAAS,EAAC,mEAAmE,YAE5E,SAAS,GACH,EAET,KAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,IAAI,EACT,QAAQ,QACR,OAAO,EAAE,MAAM,EACf,SAAS,EAAC,qEAAqE,gBACnE,SAAS,YAErB,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,GACxC,IACR,CACJ,EACA,UAAU,IAAI,CACb,KAAC,MAAM,IACL,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,IAAI,EACT,QAAQ,QACR,OAAO,EAAE,QAAQ,EACjB,SAAS,EAAC,iCAAiC,gBAC/B,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,mBAC9B,CAAC,SAAS,YAEzB,KAAC,IAAI,IACH,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,EAC/C,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,GACT,GACK,CACV,IACG,CACP,IACG,EAEL,eAAe,IAAI,CAClB,cAAK,SAAS,EAAC,sCAAsC,YAAE,WAAW,GAAO,CAC1E,IACG,CACP,CAAC;IAEF,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,CACrB,cAAK,SAAS,EAAC,+BAA+B,YAAE,QAAQ,GAAO,CAChE,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,uEAAuE;IACvE,gFAAgF;IAChF,0EAA0E;IAC1E,kBAAkB;IAClB,4EAA4E;IAC5E,4EAA4E;IAC5E,qEAAqE;IACrE,MAAM,cAAc,GAAG,KAAK,CAAC,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,IAAI,GAAG,cAAc,CAAC,OAAO,CAAC;QACpC,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,IAAI,SAAS,EAAE,CAAC;YACd,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QACjC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;IACH,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAChB,MAAM,eAAe,GAAG,OAAO,CAAC,CAAC,CAAC,CAChC,cACE,GAAG,EAAE,cAAc,EACnB,SAAS,EAAE,wCACT,SAAS,CAAC,CAAC,CAAC,mDAAmD,CAAC,CAAC,CAAC,EACpE,EAAE,iBACW,SAAS,IAAI,SAAS,YAKnC,cAAK,SAAS,EAAC,oCAAoC,YAAE,IAAI,GAAO,GAC5D,CACP,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,CACL,eACE,SAAS,EAAE,WAAW,EACtB,IAAI,EAAC,OAAO,gBACA,QAAQ,UAAU,KAAK,OAAO,EAAE,kBAC9B,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,aAI3C,aAAa,CAAC,CAAC,CAAC,CACf,eAAK,SAAS,EAAC,+BAA+B,aAC3C,MAAM,EACN,eAAe,IACZ,CACP,CAAC,CAAC,CAAC,CACF,8BACG,MAAM,EACN,IAAI,IACJ,CACJ,EAGA,UAAU,IAAI,CACb,eAAK,SAAS,EAAC,kCAAkC,aAC9C,eAAe,IAAI,CAClB,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,eAAe,CAAC,OAAO,EAChC,QAAQ,EAAE,eAAe,CAAC,QAAQ,EAClC,SAAS,EAAC,iCAAiC,YAE1C,eAAe,CAAC,KAAK,GACf,CACV,EACA,aAAa,IAAI,CAChB,KAAC,MAAM,IACL,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,aAAa,CAAC,OAAO,EAC9B,QAAQ,EAAE,aAAa,CAAC,QAAQ,EAChC,SAAS,EAAC,iCAAiC,YAE1C,aAAa,CAAC,KAAK,GACb,CACV,IACG,CACP,EAGA,OAAO,IAAI,KAAC,OAAO,IAAC,SAAS,EAAC,kCAAkC,GAAG,IAChE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"ProgressAccordeon.js","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/ProgressAccordeon.tsx"],"names":[],"mappings":"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"}

package/dist/styles/components/Alert.css

@@ -158,11 +158,12 @@
   line-height: var(--text-body-base-regular-lineHeight);
 }
 
-/* Action slot */
+/* Action slot — TextLink (or similar) below the message, matching Figma */
 .muka-alert__action {
   display: flex;
-  align-items: center;
-  flex-shrink: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  padding-top: var(--spacing-1);
 }
 
 /* Dismiss button - uses accent color per variant, aligned with icon row */

package/dist/styles/components/Badge.css

@@ -60,6 +60,33 @@
   padding-left: var(--badge-padding-leading-lg);
 }
 
+/* Icon-only — square, sized to the badge height (Figma: 24 / 32 / 40).
+ * Padding resets at size+icon-only specificity so `--has-icon` leading padding
+ * cannot win and shift the icon off-center. */
+.muka-badge--icon-only {
+  justify-content: center;
+  align-items: center;
+  gap: 0;
+}
+
+.muka-badge--sm.muka-badge--icon-only,
+.muka-badge--md.muka-badge--icon-only,
+.muka-badge--lg.muka-badge--icon-only {
+  padding: 0;
+}
+
+.muka-badge--sm.muka-badge--icon-only {
+  width: var(--badge-size-height-sm);
+}
+
+.muka-badge--md.muka-badge--icon-only {
+  width: var(--badge-size-height-md);
+}
+
+.muka-badge--lg.muka-badge--icon-only {
+  width: var(--badge-size-height-lg);
+}
+
 /* Leading icon slot — Figma icon sizes: sm 16, md 20, lg 24 (matches Chip) */
 .muka-badge__icon {
   display: inline-flex;

package/dist/styles/components/MediaViewer.css

@@ -88,7 +88,10 @@
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
-  pointer-events: none;
+  /* The image takes touches, so a long press opens the OS menu (save, share,
+     copy). The swipe still works: pointer events bubble to the stage, and a
+     long press doesn't move far enough to start a drag. */
+  -webkit-touch-callout: default;
 }
 
 /* ─── Previous / next: devices that can hover ─────────── */

package/dist/styles/components/PhotoUploader.css

@@ -42,7 +42,7 @@
   padding: 0;
 }
 
-/* ─── Drop zone card ──────────────────────────────────── */
+/* ─── Drop zone card (button + "or drop here") ────────── */
 .muka-photo-uploader__dropzone {
   display: flex;
   flex-direction: column;
@@ -66,24 +66,12 @@
   background-color: var(--color-surface-level1);
 }
 
-.muka-photo-uploader__dropzone:focus-visible {
-  outline: 2px solid var(--color-border-focus);
-  outline-offset: 2px;
-}
-
-.muka-photo-uploader__dropzone-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-icon-subtle-default);
-}
-
 .muka-photo-uploader__dropzone-text {
-  font-family: var(--text-body-base-regular-fontFamily);
-  font-size: var(--text-body-base-regular-fontSize);
-  font-weight: var(--text-body-base-regular-fontWeight);
-  line-height: var(--text-body-base-regular-lineHeight);
-  color: var(--color-text-subtle-default);
+  font-family: var(--text-subheading-sm-fontFamily);
+  font-size: var(--text-subheading-sm-fontSize);
+  font-weight: var(--text-subheading-sm-fontWeight);
+  line-height: var(--text-subheading-sm-lineHeight);
+  color: var(--color-text-default-default);
 }
 
 /* ─── Disabled ────────────────────────────────────────── */

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) ─────────────────────── */