@revikornmann/muka-ui 0.5.0 → 0.7.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/esm/components/SpecList/SpecList.css

@@ -3,55 +3,48 @@
 .muka-spec-list {
   margin: 0;
   padding: 0;
-  background-color: var(--color-surface-level1);
-  border-radius: var(--radius-md);
-  overflow: hidden;
 }
 
 /* ─── Row ─────────────────────────────────────────────── */
 
 .muka-spec-row {
   display: flex;
-  align-items: baseline;
+  align-items: flex-start;
   gap: var(--spacing-3);
-  padding: var(--spacing-3) var(--spacing-4);
-  border-top: var(--border-width-regular) solid var(--color-border-default);
-}
-
-.muka-spec-row:first-child {
-  border-top: none;
+  padding-bottom: var(--spacing-3);
 }
 
 /* ─── Label ───────────────────────────────────────────── */
 
 .muka-spec-row__label {
   flex: 0 0 auto;
-  min-width: 40%;
   margin: 0;
   color: var(--color-text-subtle-default);
   font-family: var(--text-body-md-regular-fontFamily);
   font-weight: var(--text-body-md-regular-fontWeight);
   font-size: var(--text-body-md-regular-fontSize);
   line-height: var(--text-body-md-regular-lineHeight);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* ─── Value ───────────────────────────────────────────── */
 
 .muka-spec-row__value {
-  flex: 1 1 auto;
+  flex: 1 1 0;
+  min-width: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
-  text-align: right;
   color: var(--color-text-default-default);
 }
 
 .muka-spec-row__value-text {
-  font-family: var(--text-body-md-medium-fontFamily);
-  font-weight: var(--text-body-md-medium-fontWeight);
-  font-size: var(--text-body-md-medium-fontSize);
-  line-height: var(--text-body-md-medium-lineHeight);
+  font-family: var(--text-body-md-regular-fontFamily);
+  font-weight: var(--text-body-md-regular-fontWeight);
+  font-size: var(--text-body-md-regular-fontSize);
+  line-height: var(--text-body-md-regular-lineHeight);
 }
 
 .muka-spec-row__hint {
@@ -62,8 +55,28 @@
   line-height: var(--text-body-sm-regular-lineHeight);
 }
 
-/* ─── Compact density ─────────────────────────────────── */
+/* ─── Label width (horizontal stacking) ───────────────── */
+
+.muka-spec-list--label-small .muka-spec-row__label {
+  width: 80px;
+}
+
+.muka-spec-list--label-medium .muka-spec-row__label {
+  width: 120px;
+}
+
+.muka-spec-list--label-large .muka-spec-row__label {
+  width: 160px;
+}
+
+/* ─── Vertical stacking ───────────────────────────────── */
+
+.muka-spec-list--vertical .muka-spec-row {
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
 
-.muka-spec-list--compact .muka-spec-row {
-  padding: var(--spacing-2) var(--spacing-4);
+.muka-spec-list--vertical .muka-spec-row__label {
+  width: 100%;
+  white-space: normal;
 }

package/dist/esm/components/SpecList/SpecList.js

@@ -14,10 +14,16 @@ export const SpecRow = ({ label, value, hint, className = '' }) => {
  *
  * Mobile-friendly alternative to `Table` when displaying flat key/value data
  * (e.g. motorcycle specs, vehicle details). Each row is a `<dt>/<dd>` pair
- * inside a `<dl>` for semantic accessibility.
+ * inside a `<dl>` for semantic accessibility. Renders flat — no background,
+ * radius, or dividers — so it sits directly on the page surface.
  */
-export const SpecList = ({ children, density = 'default', className = '', }) => {
-    const classes = ['muka-spec-list', `muka-spec-list--${density}`, className]
+export const SpecList = ({ children, stacking = 'horizontal', labelWidth = 'small', className = '', }) => {
+    const classes = [
+        'muka-spec-list',
+        `muka-spec-list--${stacking}`,
+        `muka-spec-list--label-${labelWidth}`,
+        className,
+    ]
         .filter(Boolean)
         .join(' ');
     return _jsx("dl", { className: classes, children: children });

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

@@ -1 +1 @@
-{"version":3,"file":"SpecList.js","sourceRoot":"","sources":["../../../../components/SpecList/SpecList.tsx"],"names":[],"mappings":";AACA,OAAO,gBAAgB,CAAC;AAkBxB;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IACxF,MAAM,OAAO,GAAG,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACvE,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACrB,aAAI,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAM,EACjD,cAAI,SAAS,EAAC,sBAAsB,aAClC,eAAM,SAAS,EAAC,2BAA2B,YAAE,KAAK,GAAQ,EACzD,IAAI,IAAI,eAAM,SAAS,EAAC,qBAAqB,YAAE,IAAI,GAAQ,IACzD,IACD,CACP,CAAC;AACJ,CAAC,CAAC;AAmBF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,OAAO,GAAG,SAAS,EACnB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,CAAC,gBAAgB,EAAE,mBAAmB,OAAO,EAAE,EAAE,SAAS,CAAC;SACxE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,OAAO,aAAI,SAAS,EAAE,OAAO,YAAG,QAAQ,GAAM,CAAC;AACjD,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"SpecList.js","sourceRoot":"","sources":["../../../../components/SpecList/SpecList.tsx"],"names":[],"mappings":";AACA,OAAO,gBAAgB,CAAC;AAkBxB;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IACxF,MAAM,OAAO,GAAG,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACvE,OAAO,CACL,eAAK,SAAS,EAAE,OAAO,aACrB,aAAI,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAM,EACjD,cAAI,SAAS,EAAC,sBAAsB,aAClC,eAAM,SAAS,EAAC,2BAA2B,YAAE,KAAK,GAAQ,EACzD,IAAI,IAAI,eAAM,SAAS,EAAC,qBAAqB,YAAE,IAAI,GAAQ,IACzD,IACD,CACP,CAAC;AACJ,CAAC,CAAC;AA2BF;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA4B,CAAC,EAChD,QAAQ,EACR,QAAQ,GAAG,YAAY,EACvB,UAAU,GAAG,OAAO,EACpB,SAAS,GAAG,EAAE,GACf,EAAE,EAAE;IACH,MAAM,OAAO,GAAG;QACd,gBAAgB;QAChB,mBAAmB,QAAQ,EAAE;QAC7B,yBAAyB,UAAU,EAAE;QACrC,SAAS;KACV;SACE,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;IACb,OAAO,aAAI,SAAS,EAAE,OAAO,YAAG,QAAQ,GAAM,CAAC;AACjD,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/components/index.js

@@ -19,6 +19,7 @@ export { Alert } from './Alert';
 export { Toast } from './Toast';
 export { EmptyState } from './EmptyState';
 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":"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"}

package/dist/styles/components/ListItem.css

@@ -19,7 +19,7 @@
   position: relative;
   
   /* Interaction - only apply if interactive */
-  transition: background-color 0.2s ease;
+  transition: background-color 0.2s ease, box-shadow 0.2s ease;
 }
 
 /* Interactive state */
@@ -27,13 +27,19 @@
   cursor: pointer;
 }
 
+/*
+ * surface.hover / surface.pressed are theme-adaptive translucent tints, so they
+ * are layered on top of the item's base surface via an inset box-shadow overlay
+ * rather than replacing background-color. This preserves the base level (level3,
+ * or level2 when selected) and lets the tint read correctly on any surface.
+ */
 .muka-listitem--interactive:hover:not(:disabled):not(.muka-listitem--disabled) {
-  background-color: var(--color-surface-hover);
+  box-shadow: inset 0 0 0 9999px var(--color-surface-hover);
 }
 
 .muka-listitem--interactive:active:not(:disabled):not(.muka-listitem--disabled),
 .muka-listitem--interactive.muka-listitem--pressed:not(:disabled):not(.muka-listitem--disabled) {
-  background-color: var(--color-surface-pressed);
+  box-shadow: inset 0 0 0 9999px var(--color-surface-pressed);
 }
 
 /* Focus styles for accessibility */
@@ -59,7 +65,7 @@
 }
 
 .muka-listitem--selected:hover {
-  background-color: var(--color-surface-hover);
+  box-shadow: inset 0 0 0 9999px var(--color-surface-hover);
 }
 
 /* No divider modifier */

package/dist/styles/components/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/styles/components/SpecList.css

@@ -3,55 +3,48 @@
 .muka-spec-list {
   margin: 0;
   padding: 0;
-  background-color: var(--color-surface-level1);
-  border-radius: var(--radius-md);
-  overflow: hidden;
 }
 
 /* ─── Row ─────────────────────────────────────────────── */
 
 .muka-spec-row {
   display: flex;
-  align-items: baseline;
+  align-items: flex-start;
   gap: var(--spacing-3);
-  padding: var(--spacing-3) var(--spacing-4);
-  border-top: var(--border-width-regular) solid var(--color-border-default);
-}
-
-.muka-spec-row:first-child {
-  border-top: none;
+  padding-bottom: var(--spacing-3);
 }
 
 /* ─── Label ───────────────────────────────────────────── */
 
 .muka-spec-row__label {
   flex: 0 0 auto;
-  min-width: 40%;
   margin: 0;
   color: var(--color-text-subtle-default);
   font-family: var(--text-body-md-regular-fontFamily);
   font-weight: var(--text-body-md-regular-fontWeight);
   font-size: var(--text-body-md-regular-fontSize);
   line-height: var(--text-body-md-regular-lineHeight);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 /* ─── Value ───────────────────────────────────────────── */
 
 .muka-spec-row__value {
-  flex: 1 1 auto;
+  flex: 1 1 0;
+  min-width: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
-  text-align: right;
   color: var(--color-text-default-default);
 }
 
 .muka-spec-row__value-text {
-  font-family: var(--text-body-md-medium-fontFamily);
-  font-weight: var(--text-body-md-medium-fontWeight);
-  font-size: var(--text-body-md-medium-fontSize);
-  line-height: var(--text-body-md-medium-lineHeight);
+  font-family: var(--text-body-md-regular-fontFamily);
+  font-weight: var(--text-body-md-regular-fontWeight);
+  font-size: var(--text-body-md-regular-fontSize);
+  line-height: var(--text-body-md-regular-lineHeight);
 }
 
 .muka-spec-row__hint {
@@ -62,8 +55,28 @@
   line-height: var(--text-body-sm-regular-lineHeight);
 }
 
-/* ─── Compact density ─────────────────────────────────── */
+/* ─── Label width (horizontal stacking) ───────────────── */
+
+.muka-spec-list--label-small .muka-spec-row__label {
+  width: 80px;
+}
+
+.muka-spec-list--label-medium .muka-spec-row__label {
+  width: 120px;
+}
+
+.muka-spec-list--label-large .muka-spec-row__label {
+  width: 160px;
+}
+
+/* ─── Vertical stacking ───────────────────────────────── */
+
+.muka-spec-list--vertical .muka-spec-row {
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
 
-.muka-spec-list--compact .muka-spec-row {
-  padding: var(--spacing-2) var(--spacing-4);
+.muka-spec-list--vertical .muka-spec-row__label {
+  width: 100%;
+  white-space: normal;
 }