@revikornmann/muka-ui 0.4.1 → 0.6.0

package/dist/esm/components/ProgressAccordeon/ProgressAccordeon.css

@@ -0,0 +1,207 @@
+/* ProgressAccordeon Component Styles — Using Muka Design Tokens */
+
+/* ─── Root ──────────────────────────────────────────────── */
+.muka-progress-accordeon {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  /* Top padding provides the vertical rhythm between stacked steps */
+  padding-top: var(--spacing-8);
+}
+
+/* Per-state gap: content-bearing steps are tighter, header-only steps looser */
+.muka-progress-accordeon--current,
+.muka-progress-accordeon--past.muka-progress-accordeon--expanded {
+  gap: var(--spacing-6);
+}
+
+.muka-progress-accordeon--upcoming,
+.muka-progress-accordeon--past.muka-progress-accordeon--collapsed {
+  gap: var(--spacing-8);
+}
+
+/* Past-expanded groups header + slot with a tighter internal gap */
+.muka-progress-accordeon__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  width: 100%;
+}
+
+/* ─── Header ─────────────────────────────────────────────── */
+.muka-progress-accordeon__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  width: 100%;
+}
+
+.muka-progress-accordeon__header-row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-3);
+  width: 100%;
+  min-height: 40px;
+}
+
+.muka-progress-accordeon__heading-group {
+  display: flex;
+  flex: 1 0 0;
+  min-width: 0;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+}
+
+/* Past steps carry 40px controls; nudge the heading to vertically centre it */
+.muka-progress-accordeon--past .muka-progress-accordeon__heading-group {
+  padding-top: var(--spacing-1);
+}
+
+.muka-progress-accordeon__controls {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--spacing-3);
+}
+
+/* ─── Step indicator (circle) ───────────────────────────── */
+.muka-progress-accordeon__indicator {
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  border-radius: var(--border-radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Past: dark accent-contrast circle with inverse checkmark */
+.muka-progress-accordeon__indicator--past {
+  background-color: var(--alias-color-accent-contrast);
+  color: var(--color-text-default-inverse);
+}
+
+/* Current: accent circle with inverse bold number */
+.muka-progress-accordeon__indicator--current {
+  background-color: var(--alias-color-accent-default);
+  color: var(--color-text-default-inverse);
+}
+
+/* Upcoming: sunken/muted circle with default-color number */
+.muka-progress-accordeon__indicator--upcoming {
+  background-color: var(--color-surface-sunken);
+  color: var(--color-text-default-default);
+}
+
+.muka-progress-accordeon__check-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--color-text-default-inverse);
+}
+
+.muka-progress-accordeon__number {
+  font-family: var(--text-label-md-bold-fontFamily);
+  font-weight: var(--text-label-md-bold-fontWeight);
+  font-size: var(--text-label-md-bold-fontSize);
+  line-height: var(--text-label-md-bold-lineHeight);
+  text-align: center;
+  user-select: none;
+}
+
+/* Upcoming number is semibold (not bold) per Figma */
+.muka-progress-accordeon__indicator--upcoming .muka-progress-accordeon__number {
+  font-family: var(--text-label-md-semibold-fontFamily);
+  font-weight: var(--text-label-md-semibold-fontWeight);
+}
+
+/* ─── Heading (responsive: heading/md on wide, heading/sm on narrow) ─────── */
+.muka-progress-accordeon__heading {
+  flex: 1 0 0;
+  min-width: 0;
+  margin: 0;
+  font-family: var(--text-heading-md-fontFamily);
+  font-weight: var(--text-heading-md-fontWeight);
+  font-size: var(--text-heading-md-fontSize);
+  line-height: var(--text-heading-md-lineHeight);
+  letter-spacing: var(--text-heading-md-letterSpacing);
+  color: var(--color-text-default-default);
+}
+
+/* ─── Description ────────────────────────────────────────── */
+/* Indented 48px (32px indicator + 16px gap) to align under the heading text */
+.muka-progress-accordeon__description {
+  width: 100%;
+  padding-left: 48px;
+  font-family: var(--text-body-base-regular-fontFamily);
+  font-weight: var(--text-body-base-regular-fontWeight);
+  font-size: var(--text-body-base-regular-fontSize);
+  line-height: var(--text-body-base-regular-lineHeight);
+  color: var(--color-text-default-default);
+}
+
+/* ─── Edit button ────────────────────────────────────────── */
+.muka-progress-accordeon__edit {
+  flex-shrink: 0;
+}
+
+/* Wide container shows the labelled button; the icon-only one is hidden */
+.muka-progress-accordeon__edit--narrow {
+  display: none;
+}
+
+/* ─── Content slot ───────────────────────────────────────── */
+.muka-progress-accordeon__slot {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+}
+
+/* ─── Action buttons (current state) ─────────────────────── */
+.muka-progress-accordeon__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--spacing-4);
+  width: 100%;
+}
+
+.muka-progress-accordeon__action {
+  min-width: 160px;
+}
+
+/* ─── Divider ────────────────────────────────────────────── */
+.muka-progress-accordeon__divider {
+  width: 100%;
+}
+
+/* ─── Responsive (narrow container) ──────────────────────── */
+@container (max-width: 480px) {
+  /* Heading steps down to heading/sm. The 24px line-height is shorter than the
+     32px step indicator, so nudge the text down to keep a single line centred. */
+  .muka-progress-accordeon__heading {
+    font-size: var(--text-heading-sm-fontSize);
+    line-height: var(--text-heading-sm-lineHeight);
+    padding-top: var(--spacing-1);
+  }
+
+  /* Edit button swaps to the icon-only variant */
+  .muka-progress-accordeon__edit--wide {
+    display: none;
+  }
+
+  .muka-progress-accordeon__edit--narrow {
+    display: inline-flex;
+  }
+
+  /* Action buttons stretch to fill the row */
+  .muka-progress-accordeon__actions {
+    justify-content: stretch;
+  }
+
+  .muka-progress-accordeon__action {
+    flex: 1 0 0;
+    min-width: 0;
+  }
+}

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

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+import { Divider } from '../Divider';
+import './ProgressAccordeon.css';
+/**
+ * ProgressAccordeon Component
+ *
+ * A single step in a vertical, progress-driven accordion flow. Each step
+ * combines a numbered/checked step indicator with a heading and an optional
+ * 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
+ * - **upcoming** — muted numbered indicator, heading only
+ *
+ * Content is passed as `children` (an optional slot) and rendered as-is — supply
+ * your own `Card` when you want a card surface. 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 = '', }) => {
+    const isPast = state === 'past';
+    const isCurrent = state === 'current';
+    const isExpanded = isPast && !collapsed;
+    const showToggle = isPast && Boolean(onToggle);
+    const showEdit = isExpanded && Boolean(onEdit);
+    const showDescription = Boolean(description) && !collapsed;
+    const hasSlot = (isExpanded || isCurrent) && Boolean(children);
+    const hasActions = isCurrent && Boolean(primaryAction || secondaryAction);
+    const rootClasses = [
+        'muka-progress-accordeon',
+        `muka-progress-accordeon--${state}`,
+        isPast && `muka-progress-accordeon--${collapsed ? '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 slot = hasSlot ? (_jsx("div", { className: "muka-progress-accordeon__slot", children: children })) : null;
+    return (_jsxs("div", { className: rootClasses, role: "group", "aria-label": `Step ${stepNumber}: ${heading}`, "aria-current": isCurrent ? 'step' : undefined, children: [isExpanded ? (_jsxs("div", { className: "muka-progress-accordeon__body", children: [header, slot] })) : (_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" })] }));
+};
+export default ProgressAccordeon;
+//# sourceMappingURL=ProgressAccordeon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressAccordeon.js","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/ProgressAccordeon.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export { ProgressAccordeon, } from './ProgressAccordeon';
+export { default } from './ProgressAccordeon';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ProgressAccordeon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,GAIlB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/{styles/components/FormProgressBar.css → esm/components/ProgressTracker/ProgressTracker.css}

@@ -1,13 +1,13 @@
-/* FormProgressBar Component Styles — Using Muka Design Tokens */
+/* ProgressTracker Component Styles — Using Muka Design Tokens */
 
 /* ─── Root ──────────────────────────────────────────────── */
-.muka-progress-bar {
+.muka-progress-tracker {
   width: 100%;
   padding-bottom: var(--spacing-7);
 }
 
 /* ─── Track (layered container) ─────────────────────────── */
-.muka-progress-bar__track {
+.muka-progress-tracker__track {
   position: relative;
   /* Vertical padding = (indicator size - connector height) / 2 = (32 - 4) / 2 = 14px */
   padding-top: 14px;
@@ -15,7 +15,7 @@
 }
 
 /* ─── Steps layer (on top) ──────────────────────────────── */
-.muka-progress-bar__steps {
+.muka-progress-tracker__steps {
   position: absolute;
   inset: 0;
   display: flex;
@@ -25,7 +25,7 @@
 }
 
 /* ─── Individual step ───────────────────────────────────── */
-.muka-progress-bar__step {
+.muka-progress-tracker__step {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -34,7 +34,7 @@
 }
 
 /* ─── Step indicator (circle) ───────────────────────────── */
-.muka-progress-bar__indicator {
+.muka-progress-tracker__indicator {
   width: 32px;
   height: 32px;
   border-radius: var(--border-radius-full);
@@ -46,35 +46,35 @@
 }
 
 /* Past: dark accent contrast circle with white checkmark */
-.muka-progress-bar__indicator--past {
+.muka-progress-tracker__indicator--past {
   background-color: var(--alias-color-accent-contrast);
   color: var(--color-text-default-inverse);
   cursor: pointer;
 }
 
-.muka-progress-bar__indicator--past:hover {
-  opacity: 0.85;
+.muka-progress-tracker__indicator--past:hover {
+  background-color: var(--alias-color-accent-pressed);
 }
 
-.muka-progress-bar__indicator--past:focus-visible {
+.muka-progress-tracker__indicator--past:focus-visible {
   outline: 2px solid var(--color-border-focus);
   outline-offset: 2px;
 }
 
 /* Current: accent default circle with white number */
-.muka-progress-bar__indicator--current {
+.muka-progress-tracker__indicator--current {
   background-color: var(--alias-color-accent-default);
   color: var(--color-text-default-inverse);
 }
 
 /* Upcoming: sunken/gray circle with dark number */
-.muka-progress-bar__indicator--upcoming {
+.muka-progress-tracker__indicator--upcoming {
   background-color: var(--color-surface-sunken);
   color: var(--color-text-default-default);
 }
 
 /* ─── Step number text ──────────────────────────────────── */
-.muka-progress-bar__number {
+.muka-progress-tracker__number {
   font-family: var(--text-label-md-bold-fontFamily);
   font-weight: var(--text-label-md-bold-fontWeight);
   font-size: var(--text-label-md-bold-fontSize);
@@ -84,13 +84,19 @@
 }
 
 /* ─── Checkmark icon ────────────────────────────────────── */
-.muka-progress-bar__check-icon {
+.muka-progress-tracker__check-icon {
   width: 20px;
   height: 20px;
 }
 
+/* Past checkmark uses inverse foreground, matching the active step number.
+   Scoped under the indicator to override the Icon component's default color. */
+.muka-progress-tracker__indicator--past .muka-progress-tracker__check-icon {
+  color: var(--color-text-default-inverse);
+}
+
 /* ─── Step label ────────────────────────────────────────── */
-.muka-progress-bar__label {
+.muka-progress-tracker__label {
   font-family: var(--text-label-sm-regular-fontFamily);
   font-weight: var(--text-label-sm-regular-fontWeight);
   font-size: var(--text-label-sm-regular-fontSize);
@@ -104,13 +110,13 @@
 }
 
 /* Current step label is bold */
-.muka-progress-bar__label--current {
+.muka-progress-tracker__label--current {
   font-family: var(--text-label-sm-bold-fontFamily);
   font-weight: var(--text-label-sm-bold-fontWeight);
 }
 
 /* ─── Connectors layer (behind indicators) ──────────────── */
-.muka-progress-bar__connectors {
+.muka-progress-tracker__connectors {
   display: flex;
   align-items: center;
   /* Horizontal padding = indicator radius (32/2 = 16px) so lines meet circle centers */
@@ -121,19 +127,19 @@
 }
 
 /* ─── Individual connector line ─────────────────────────── */
-.muka-progress-bar__connector {
+.muka-progress-tracker__connector {
   flex: 1 0 0;
   height: 4px;
   min-width: 1px;
 }
 
 /* Past: solid dark line */
-.muka-progress-bar__connector--past {
+.muka-progress-tracker__connector--past {
   background-color: var(--alias-color-accent-contrast);
 }
 
 /* Current: gradient from past (dark) toward current step */
-.muka-progress-bar__connector--current {
+.muka-progress-tracker__connector--current {
   background: linear-gradient(
     to right,
     var(--alias-color-accent-contrast) 0%,
@@ -142,7 +148,7 @@
 }
 
 /* Current-right: gradient fading from current step into upcoming */
-.muka-progress-bar__connector--current-right {
+.muka-progress-tracker__connector--current-right {
   background: linear-gradient(
     to right,
     var(--alias-color-accent-default) 0%,
@@ -152,6 +158,6 @@
 }
 
 /* Upcoming: solid gray line */
-.muka-progress-bar__connector--upcoming {
+.muka-progress-tracker__connector--upcoming {
   background-color: var(--color-surface-sunken);
 }

package/dist/esm/components/{FormProgressBar/FormProgressBar.js → ProgressTracker/ProgressTracker.js}

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import './FormProgressBar.css';
+import './ProgressTracker.css';
 import { Icon } from '../Icon';
 function getStepStatus(stepIndex, currentStep, totalSteps) {
     if (currentStep <= 0)
@@ -29,7 +29,7 @@ function getConnectorStatus(connectorIndex, currentStep, totalSteps) {
     return 'upcoming';
 }
 /**
- * FormProgressBar Component
+ * ProgressTracker Component
  *
  * A horizontal stepper/progress indicator for multi-step forms.
  * Shows numbered step indicators connected by progress lines.
@@ -42,32 +42,32 @@ function getConnectorStatus(connectorIndex, currentStep, totalSteps) {
  * - Multi-brand theming through design tokens
  *
  * Tokens used:
- * - alias.color.accent.{default|contrast} — step indicator backgrounds
+ * - alias.color.accent.{default|contrast|pressed} — step indicator backgrounds
  * - color.surface.sunken — upcoming indicator/connector background
  * - color.text.default.{default|inverse} — indicator/label text
  * - text.label.{sm|md}.{regular|bold} — typography
  * - spacing.4, spacing.7 — layout spacing
  * - border.radius.full — circular indicators
  */
-export const FormProgressBar = ({ steps, currentStep, onStepClick, className = '', }) => {
+export const ProgressTracker = ({ steps, currentStep, onStepClick, className = '', }) => {
     const totalSteps = steps.length;
-    const rootClasses = ['muka-progress-bar', className].filter(Boolean).join(' ');
-    return (_jsx("div", { className: rootClasses, role: "group", "aria-label": "Form progress", children: _jsxs("div", { className: "muka-progress-bar__track", children: [_jsx("div", { className: "muka-progress-bar__steps", children: steps.map((step, index) => {
+    const rootClasses = ['muka-progress-tracker', className].filter(Boolean).join(' ');
+    return (_jsx("div", { className: rootClasses, role: "group", "aria-label": "Form progress", children: _jsxs("div", { className: "muka-progress-tracker__track", children: [_jsx("div", { className: "muka-progress-tracker__steps", children: steps.map((step, index) => {
                         const status = getStepStatus(index, currentStep, totalSteps);
                         const stepNumber = index + 1;
                         const isPast = status === 'past';
                         const isCurrent = status === 'current';
                         const stepClasses = [
-                            'muka-progress-bar__step',
-                            `muka-progress-bar__step--${status}`,
+                            'muka-progress-tracker__step',
+                            `muka-progress-tracker__step--${status}`,
                         ].join(' ');
                         const indicatorClasses = [
-                            'muka-progress-bar__indicator',
-                            `muka-progress-bar__indicator--${status}`,
+                            'muka-progress-tracker__indicator',
+                            `muka-progress-tracker__indicator--${status}`,
                         ].join(' ');
                         const labelClasses = [
-                            'muka-progress-bar__label',
-                            isCurrent && 'muka-progress-bar__label--current',
+                            'muka-progress-tracker__label',
+                            isCurrent && 'muka-progress-tracker__label--current',
                         ].filter(Boolean).join(' ');
                         const handleClick = isPast && onStepClick
                             ? () => onStepClick(index)
@@ -83,15 +83,15 @@ export const FormProgressBar = ({ steps, currentStep, onStepClick, className = '
                                         ? `Step ${stepNumber}: ${step.label} (completed)`
                                         : isCurrent
                                             ? `Step ${stepNumber}: ${step.label} (current)`
-                                            : `Step ${stepNumber}: ${step.label}`, children: isPast ? (_jsx(Icon, { name: "check", variant: "fill", size: "sm", className: "muka-progress-bar__check-icon" })) : (_jsx("span", { className: "muka-progress-bar__number", children: stepNumber })) }), _jsx("span", { className: labelClasses, children: step.label })] }, index));
-                    }) }), _jsx("div", { className: "muka-progress-bar__connectors", children: Array.from({ length: totalSteps - 1 }, (_, index) => {
+                                            : `Step ${stepNumber}: ${step.label}`, children: isPast ? (_jsx(Icon, { name: "check", variant: "fill", size: "sm", className: "muka-progress-tracker__check-icon" })) : (_jsx("span", { className: "muka-progress-tracker__number", children: stepNumber })) }), _jsx("span", { className: labelClasses, children: step.label })] }, index));
+                    }) }), _jsx("div", { className: "muka-progress-tracker__connectors", children: Array.from({ length: totalSteps - 1 }, (_, index) => {
                         const status = getConnectorStatus(index, currentStep, totalSteps);
                         const connectorClasses = [
-                            'muka-progress-bar__connector',
-                            `muka-progress-bar__connector--${status}`,
+                            'muka-progress-tracker__connector',
+                            `muka-progress-tracker__connector--${status}`,
                         ].join(' ');
                         return _jsx("div", { className: connectorClasses, "aria-hidden": "true" }, index);
                     }) })] }) }));
 };
-export default FormProgressBar;
-//# sourceMappingURL=FormProgressBar.js.map
+export default ProgressTracker;
+//# sourceMappingURL=ProgressTracker.js.map

package/dist/esm/components/{FormProgressBar/FormProgressBar.js.map → ProgressTracker/ProgressTracker.js.map}

@@ -1 +1 @@
-{"version":3,"file":"FormProgressBar.js","sourceRoot":"","sources":["../../../../components/FormProgressBar/FormProgressBar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProgressTracker.js","sourceRoot":"","sources":["../../../../components/ProgressTracker/ProgressTracker.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/ProgressTracker/index.js

@@ -0,0 +1,3 @@
+export { ProgressTracker } from './ProgressTracker';
+export { ProgressTracker as default } from './ProgressTracker';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/{FormProgressBar → ProgressTracker}/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/FormProgressBar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAuD,MAAM,mBAAmB,CAAC;AACzG,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../components/ProgressTracker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAuD,MAAM,mBAAmB,CAAC;AACzG,OAAO,EAAE,eAAe,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/esm/components/index.js

@@ -18,7 +18,8 @@ export { RadioTile } from './RadioTile';
 export { Alert } from './Alert';
 export { Toast } from './Toast';
 export { EmptyState } from './EmptyState';
-export { FormProgressBar } from './FormProgressBar';
+export { ProgressTracker } from './ProgressTracker';
+export { ProgressAccordeon, } from './ProgressAccordeon';
 export { TopBar, ControlBar } from './TopBar';
 export { BottomBar, BottomBarTab } from './BottomBar';
 export { Dialog } from './Dialog';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/index.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,IAAI,EAAiC,MAAM,QAAQ,CAAC;AAC7D,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,MAAM,EAAuC,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEtD,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,eAAe,EAAuD,MAAM,mBAAmB,CAAC;AACzG,OAAO,EACL,iBAAiB,GAIlB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,MAAM,EAAoB,UAAU,EAAwB,MAAM,UAAU,CAAC;AACtF,OAAO,EAAE,SAAS,EAAE,YAAY,EAA+C,MAAM,aAAa,CAAC;AACnG,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAkC,MAAM,wBAAwB,CAAC;AAC9F,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,SAAS,EAAuB,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,WAAW,EAA2C,MAAM,UAAU,CAAC;AACxF,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAA4C,MAAM,YAAY,CAAC;AAChF,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,KAAK,EACL,SAAS,EACT,SAAS,EACT,QAAQ,EACR,SAAS,EACT,eAAe,EACf,eAAe,EACf,iBAAiB,GAWlB,MAAM,SAAS,CAAC;AACjB,OAAO,EACL,SAAS,GAKV,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,YAAY,EAA8C,MAAM,gBAAgB,CAAC;AAC1F,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAmD,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,UAAU,EACV,cAAc,GAMf,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,IAAI,EACJ,WAAW,EACX,WAAW,EACX,QAAQ,EACR,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,aAAa,EACb,OAAO,EACP,cAAc,EACd,cAAc,GACf,MAAM,QAAQ,CAAC;AAehB,OAAO,EACL,WAAW,EACX,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,oBAAoB,EACpB,gBAAgB,EAChB,uBAAuB,EACvB,qBAAqB,EACrB,oBAAoB,EACpB,cAAc,EACd,qBAAqB,EACrB,qBAAqB,GACtB,MAAM,eAAe,CAAC;AAgBvB,8EAA8E;AAC9E,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,UAAU,EAA6C,MAAM,cAAc,CAAC;AACrF,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,MAAM,EAAoB,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AACvD,OAAO,EACL,OAAO,EACP,cAAc,EACd,WAAW,EACX,cAAc,EACd,YAAY,GAGb,MAAM,WAAW,CAAC;AACnB,OAAO,EACL,SAAS,EACT,aAAa,EACb,gBAAgB,EAChB,gBAAgB,GACjB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,EAAqB,MAAM,WAAW,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAyC,MAAM,YAAY,CAAC;AACtF,OAAO,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAC;AAC3C,OAAO,EACL,WAAW,GAGZ,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAC;AAChE,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EAAE,YAAY,EAA0B,MAAM,gBAAgB,CAAC;AACtE,OAAO,EACL,aAAa,GAGd,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,eAAe,EAA6B,MAAM,mBAAmB,CAAC;AAC/E,OAAO,EACL,kBAAkB,GAEnB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,QAAQ,GAGT,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,YAAY,GAGb,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,aAAa,EAA2B,MAAM,iBAAiB,CAAC;AACzE,OAAO,EACL,iBAAiB,GAElB,MAAM,qBAAqB,CAAC"}

package/dist/styles/components/DataTable.css

@@ -341,6 +341,10 @@
      min-content, collapsing the flexible (1fr) stack track to 0. */
   .muka-data-table--responsive {
     display: block;
+    /* Collapsed cards always use md cell padding regardless of the table's `size`
+       — sm is too tight and lg wastes horizontal room, forcing the name to wrap. */
+    --dt-pad-x: var(--datatable-cell-padding-x-md);
+    --dt-pad-y: var(--datatable-cell-padding-y-md);
   }
 
   .muka-data-table--responsive .muka-data-table__body {
@@ -384,6 +388,11 @@
   .muka-data-table--responsive .muka-data-table__td--m-secondary {
     display: block;
     grid-column: 2;
+    /* Hug the widest secondary content (e.g. a status badge). The desktop column's
+       min/max-width are inline styles, so `!important` is required to drop them and
+       let the `auto` grid track shrink to the badge — freeing space for the name. */
+    min-width: 0 !important;
+    max-width: none !important;
   }
 
   .muka-data-table--responsive .muka-data-table__td--action {
@@ -401,6 +410,14 @@
     justify-content: flex-end;
   }
 
+  /* Utility for cell content: hide a sub-element in the collapsed card. Use it to
+     drop a redundant text label next to a compact visual (e.g. the "75%" beside a
+     donut) so only the visual shows and the secondary column hugs to its width.
+     `display: none` also collapses any surrounding flex `gap`, leaving no gutter. */
+  .muka-data-table--responsive .muka-data-table__mobile-hidden {
+    display: none;
+  }
+
   /* Stacked primary column: first field is the title, the rest are subtitle lines. */
   .muka-data-table__stack {
     display: flex;