@revikornmann/muka-ui 0.6.0 → 0.7.0

package/dist/cjs/components/NavigationTransition/NavigationTransition.js

@@ -5,12 +5,26 @@ exports.NavigationTransition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 require("./NavigationTransition.css");
-const TRANSITION_DURATION = 300;
-const NavigationTransition = ({ activeView, activeKey, direction, duration = TRANSITION_DURATION, className = '', }) => {
+const DURATION_FALLBACK = 300;
+const EASING_FALLBACK = 'cubic-bezier(0.16, 1, 0.3, 1)';
+function getResolvedDuration(durationProp, el) {
+    if (durationProp !== undefined)
+        return durationProp;
+    if (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+        return 0;
+    if (el) {
+        const raw = getComputedStyle(el).getPropertyValue('--motion-duration-view').trim();
+        if (raw)
+            return parseInt(raw, 10);
+    }
+    return DURATION_FALLBACK;
+}
+const NavigationTransition = ({ activeView, activeKey, direction, duration, easing, className = '', }) => {
     const [transition, setTransition] = (0, react_1.useState)(null);
     const prevViewRef = (0, react_1.useRef)(activeView);
     const prevKeyRef = (0, react_1.useRef)(activeKey);
     const timerRef = (0, react_1.useRef)();
+    const containerRef = (0, react_1.useRef)(null);
     const topRef = (0, react_1.useRef)(null);
     const bottomRef = (0, react_1.useRef)(null);
     // Detect key change synchronously during render (React's "store previous value" pattern)
@@ -25,9 +39,11 @@ const NavigationTransition = ({ activeView, activeKey, direction, duration = TRA
     (0, react_1.useLayoutEffect)(() => {
         if (!transition || !topRef.current || !bottomRef.current)
             return;
+        const resolvedDuration = getResolvedDuration(duration, containerRef.current);
+        const resolvedEasing = easing ?? EASING_FALLBACK;
         const options = {
-            duration,
-            easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+            duration: resolvedDuration,
+            easing: resolvedEasing,
             fill: 'forwards',
         };
         if (transition.direction === 'forward') {
@@ -38,7 +54,7 @@ const NavigationTransition = ({ activeView, activeKey, direction, duration = TRA
             topRef.current.animate([{ transform: 'translateX(0)' }, { transform: 'translateX(100%)' }], options);
             bottomRef.current.animate([{ transform: 'translateX(-30%)' }, { transform: 'translateX(0)' }], options);
         }
-    }, [transition, duration]);
+    }, [transition, duration, easing]);
     // Keep the previous view ref up-to-date when not transitioning
     (0, react_1.useEffect)(() => {
         if (!transition) {
@@ -49,9 +65,10 @@ const NavigationTransition = ({ activeView, activeKey, direction, duration = TRA
     // End the transition after the animation duration
     (0, react_1.useEffect)(() => {
         if (transition) {
+            const resolvedDuration = getResolvedDuration(duration, containerRef.current);
             timerRef.current = window.setTimeout(() => {
                 setTransition(null);
-            }, duration);
+            }, resolvedDuration);
             return () => clearTimeout(timerRef.current);
         }
     }, [transition, duration]);
@@ -60,7 +77,7 @@ const NavigationTransition = ({ activeView, activeKey, direction, duration = TRA
         return () => clearTimeout(timerRef.current);
     }, []);
     if (!transition) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: `muka-nav-transition ${className}`.trim(), children: activeView }));
+        return ((0, jsx_runtime_1.jsx)("div", { ref: containerRef, className: `muka-nav-transition ${className}`.trim(), children: activeView }));
     }
     const isForward = transition.direction === 'forward';
     const enteringView = activeView;
@@ -69,7 +86,7 @@ const NavigationTransition = ({ activeView, activeKey, direction, duration = TRA
     // Back: exiting view on top (slides away), entering below
     const topView = isForward ? enteringView : exitingView;
     const bottomView = isForward ? exitingView : enteringView;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: `muka-nav-transition muka-nav-transition--active ${className}`.trim(), children: [(0, jsx_runtime_1.jsx)("div", { ref: bottomRef, className: "muka-nav-transition__view muka-nav-transition__view--bottom", children: bottomView }), (0, jsx_runtime_1.jsx)("div", { ref: topRef, className: "muka-nav-transition__view muka-nav-transition__view--top", children: topView })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, className: `muka-nav-transition muka-nav-transition--active ${className}`.trim(), children: [(0, jsx_runtime_1.jsx)("div", { ref: bottomRef, className: "muka-nav-transition__view muka-nav-transition__view--bottom", children: bottomView }), (0, jsx_runtime_1.jsx)("div", { ref: topRef, className: "muka-nav-transition__view muka-nav-transition__view--top", children: topView })] }));
 };
 exports.NavigationTransition = NavigationTransition;
 exports.default = exports.NavigationTransition;

package/dist/cjs/components/NavigationTransition/NavigationTransition.js.map

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

package/dist/cjs/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/cjs/components/SpecList/SpecList.js

@@ -18,10 +18,16 @@ exports.SpecRow = SpecRow;
  *
  * 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.
  */
-const SpecList = ({ children, density = 'default', className = '', }) => {
-    const classes = ['muka-spec-list', `muka-spec-list--${density}`, className]
+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 (0, jsx_runtime_1.jsx)("dl", { className: classes, children: children });

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

@@ -1 +1 @@
-{"version":3,"file":"SpecList.js","sourceRoot":"","sources":["../../../../components/SpecList/SpecList.tsx"],"names":[],"mappings":";;;;AACA,0BAAwB;AAkBxB;;;;GAIG;AACI,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,iCAAK,SAAS,EAAE,OAAO,aACrB,+BAAI,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAM,EACjD,gCAAI,SAAS,EAAC,sBAAsB,aAClC,iCAAM,SAAS,EAAC,2BAA2B,YAAE,KAAK,GAAQ,EACzD,IAAI,IAAI,iCAAM,SAAS,EAAC,qBAAqB,YAAE,IAAI,GAAQ,IACzD,IACD,CACP,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,OAAO,WAWlB;AAmBF;;;;;;GAMG;AACI,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,+BAAI,SAAS,EAAE,OAAO,YAAG,QAAQ,GAAM,CAAC;AACjD,CAAC,CAAC;AATW,QAAA,QAAQ,YASnB;AAEF,kBAAe,gBAAQ,CAAC"}
+{"version":3,"file":"SpecList.js","sourceRoot":"","sources":["../../../../components/SpecList/SpecList.tsx"],"names":[],"mappings":";;;;AACA,0BAAwB;AAkBxB;;;;GAIG;AACI,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,iCAAK,SAAS,EAAE,OAAO,aACrB,+BAAI,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAM,EACjD,gCAAI,SAAS,EAAC,sBAAsB,aAClC,iCAAM,SAAS,EAAC,2BAA2B,YAAE,KAAK,GAAQ,EACzD,IAAI,IAAI,iCAAM,SAAS,EAAC,qBAAqB,YAAE,IAAI,GAAQ,IACzD,IACD,CACP,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,OAAO,WAWlB;AA2BF;;;;;;;GAOG;AACI,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,+BAAI,SAAS,EAAE,OAAO,YAAG,QAAQ,GAAM,CAAC;AACjD,CAAC,CAAC;AAfW,QAAA,QAAQ,YAenB;AAEF,kBAAe,gBAAQ,CAAC"}

package/dist/esm/components/NavigationTransition/NavigationTransition.js

@@ -2,12 +2,26 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect, useLayoutEffect, useRef } from 'react';
 import './NavigationTransition.css';
-const TRANSITION_DURATION = 300;
-export const NavigationTransition = ({ activeView, activeKey, direction, duration = TRANSITION_DURATION, className = '', }) => {
+const DURATION_FALLBACK = 300;
+const EASING_FALLBACK = 'cubic-bezier(0.16, 1, 0.3, 1)';
+function getResolvedDuration(durationProp, el) {
+    if (durationProp !== undefined)
+        return durationProp;
+    if (typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+        return 0;
+    if (el) {
+        const raw = getComputedStyle(el).getPropertyValue('--motion-duration-view').trim();
+        if (raw)
+            return parseInt(raw, 10);
+    }
+    return DURATION_FALLBACK;
+}
+export const NavigationTransition = ({ activeView, activeKey, direction, duration, easing, className = '', }) => {
     const [transition, setTransition] = useState(null);
     const prevViewRef = useRef(activeView);
     const prevKeyRef = useRef(activeKey);
     const timerRef = useRef();
+    const containerRef = useRef(null);
     const topRef = useRef(null);
     const bottomRef = useRef(null);
     // Detect key change synchronously during render (React's "store previous value" pattern)
@@ -22,9 +36,11 @@ export const NavigationTransition = ({ activeView, activeKey, direction, duratio
     useLayoutEffect(() => {
         if (!transition || !topRef.current || !bottomRef.current)
             return;
+        const resolvedDuration = getResolvedDuration(duration, containerRef.current);
+        const resolvedEasing = easing ?? EASING_FALLBACK;
         const options = {
-            duration,
-            easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+            duration: resolvedDuration,
+            easing: resolvedEasing,
             fill: 'forwards',
         };
         if (transition.direction === 'forward') {
@@ -35,7 +51,7 @@ export const NavigationTransition = ({ activeView, activeKey, direction, duratio
             topRef.current.animate([{ transform: 'translateX(0)' }, { transform: 'translateX(100%)' }], options);
             bottomRef.current.animate([{ transform: 'translateX(-30%)' }, { transform: 'translateX(0)' }], options);
         }
-    }, [transition, duration]);
+    }, [transition, duration, easing]);
     // Keep the previous view ref up-to-date when not transitioning
     useEffect(() => {
         if (!transition) {
@@ -46,9 +62,10 @@ export const NavigationTransition = ({ activeView, activeKey, direction, duratio
     // End the transition after the animation duration
     useEffect(() => {
         if (transition) {
+            const resolvedDuration = getResolvedDuration(duration, containerRef.current);
             timerRef.current = window.setTimeout(() => {
                 setTransition(null);
-            }, duration);
+            }, resolvedDuration);
             return () => clearTimeout(timerRef.current);
         }
     }, [transition, duration]);
@@ -57,7 +74,7 @@ export const NavigationTransition = ({ activeView, activeKey, direction, duratio
         return () => clearTimeout(timerRef.current);
     }, []);
     if (!transition) {
-        return (_jsx("div", { className: `muka-nav-transition ${className}`.trim(), children: activeView }));
+        return (_jsx("div", { ref: containerRef, className: `muka-nav-transition ${className}`.trim(), children: activeView }));
     }
     const isForward = transition.direction === 'forward';
     const enteringView = activeView;
@@ -66,7 +83,7 @@ export const NavigationTransition = ({ activeView, activeKey, direction, duratio
     // Back: exiting view on top (slides away), entering below
     const topView = isForward ? enteringView : exitingView;
     const bottomView = isForward ? exitingView : enteringView;
-    return (_jsxs("div", { className: `muka-nav-transition muka-nav-transition--active ${className}`.trim(), children: [_jsx("div", { ref: bottomRef, className: "muka-nav-transition__view muka-nav-transition__view--bottom", children: bottomView }), _jsx("div", { ref: topRef, className: "muka-nav-transition__view muka-nav-transition__view--top", children: topView })] }));
+    return (_jsxs("div", { ref: containerRef, className: `muka-nav-transition muka-nav-transition--active ${className}`.trim(), children: [_jsx("div", { ref: bottomRef, className: "muka-nav-transition__view muka-nav-transition__view--bottom", children: bottomView }), _jsx("div", { ref: topRef, className: "muka-nav-transition__view muka-nav-transition__view--top", children: topView })] }));
 };
 export default NavigationTransition;
 //# sourceMappingURL=NavigationTransition.js.map

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

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

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/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;
 }