@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/components/base/animateHeight/animateHeight.js

@@ -1,16 +1,17 @@
-import { use as $, spread as z, mergeProps as F, insert as M, effect as j, className as L, style as R, template as k } from "solid-js/web";
-import { mergeProps as q, splitProps as B, createSignal as d, onMount as G, createEffect as J, onCleanup as K } from "solid-js";
+import { use as $, spread as z, mergeProps as F, insert as M, effect as L, className as R, style as j, template as k } from "solid-js/web";
+import { mergeProps as q, splitProps as B, createSignal as p, onMount as G, createEffect as J, onCleanup as K } from "solid-js";
 import w from "clsx";
 import { mergeRefs as Q } from "../../../primitives/mergeRefs.js";
-var V = /* @__PURE__ */ k("<div><div>");
-const W = (e) => {
+import { mergeStyle as V } from "../../../primitives/mergeStyle.js";
+var W = /* @__PURE__ */ k("<div><div>");
+const X = (e) => {
   const o = parseFloat(e);
   return !isNaN(o) && isFinite(o);
-}, E = (e) => typeof e == "string" && e[e.length - 1] === "%" && W(e.substring(0, e.length - 1)), A = (e, o) => {
+}, E = (e) => typeof e == "string" && e[e.length - 1] === "%" && X(e.substring(0, e.length - 1)), b = (e, o) => {
   o === 0 && e?.style && (e.style.display = "none");
-}, X = (e, o) => {
+}, Y = (e, o) => {
   o === 0 && e?.style && (e.style.display = "");
-}, Y = {
+}, tt = {
   animating: "rah-animating",
   animatingUp: "rah-animating--up",
   animatingDown: "rah-animating--down",
@@ -26,8 +27,8 @@ const W = (e) => {
   [e.staticHeightZero]: o === 0,
   [e.staticHeightSpecific]: typeof o == "number" && o > 0,
   [e.staticHeightAuto]: o === "auto"
-}), tt = (e) => typeof e == "number" ? `${e}px` : e;
-function ot(e) {
+}), et = (e) => typeof e == "number" ? `${e}px` : e;
+function rt(e) {
   const o = q({
     animateOpacity: !1,
     applyInlineTransitions: !0,
@@ -35,58 +36,56 @@ function ot(e) {
     duration: 300,
     easing: "ease"
   }, e), [t, y] = B(o, ["animateOpacity", "animationStateClasses", "applyInlineTransitions", "children", "class", "contentClassName", "delay", "duration", "easing", "height", "onHeightAnimationEnd", "onHeightAnimationStart", "style", "ref"]), c = {
-    ...Y,
+    ...tt,
     ...t.animationStateClasses
   };
   let s, r = t.height, f, H, l = t.height, v = "visible";
   typeof l == "number" ? (l = l < 0 ? 0 : l, v = "hidden") : E(l) && (l = l === "0%" ? 0 : l, v = "hidden");
-  const [T, S] = d(l), [O, C] = d(v), [P, p] = d(!1), [_, b] = d(I(c, t.height));
-  G(() => A(s, T())), J(() => {
-    const i = t.height;
-    if (i !== r && s) {
-      X(s, r), s.style.overflow = "hidden";
+  const [T, S] = p(l), [O, C] = p(v), [P, d] = p(!1), [_, A] = p(I(c, t.height));
+  G(() => b(s, T())), J(() => {
+    const n = t.height;
+    if (n !== r && s) {
+      Y(s, r), s.style.overflow = "hidden";
       const m = s.offsetHeight;
       s.style.overflow = "";
       const u = t.duration + t.delay;
-      let a, n, g = "hidden";
+      let a, i, g = "hidden";
       const h = r === "auto";
-      typeof i == "number" ? (a = i < 0 ? 0 : i, n = a) : E(i) ? (a = i === "0%" ? 0 : i, n = a) : (a = m, n = "auto", g = void 0), h && (n = a, a = m);
+      typeof n == "number" ? (a = n < 0 ? 0 : n, i = a) : E(n) ? (a = n === "0%" ? 0 : n, i = a) : (a = m, i = "auto", g = void 0), h && (i = a, a = m);
       const x = w({
         [c.animating]: !0,
-        [c.animatingUp]: r === "auto" || typeof r == "number" && typeof i == "number" && i < r,
-        [c.animatingDown]: i === "auto" || typeof r == "number" && typeof i == "number" && i > r,
-        [c.animatingToHeightZero]: n === 0,
-        [c.animatingToHeightAuto]: n === "auto",
-        [c.animatingToHeightSpecific]: typeof n == "number" && n > 0
-      }), N = I(c, n);
-      S(a), C("hidden"), p(!h), b(x), clearTimeout(f), clearTimeout(H), h ? (f = setTimeout(() => {
-        S(n), C(g), p(!0), t.onHeightAnimationStart?.(n);
+        [c.animatingUp]: r === "auto" || typeof r == "number" && typeof n == "number" && n < r,
+        [c.animatingDown]: n === "auto" || typeof r == "number" && typeof n == "number" && n > r,
+        [c.animatingToHeightZero]: i === 0,
+        [c.animatingToHeightAuto]: i === "auto",
+        [c.animatingToHeightSpecific]: typeof i == "number" && i > 0
+      }), N = I(c, i);
+      S(a), C("hidden"), d(!h), A(x), clearTimeout(f), clearTimeout(H), h ? (f = setTimeout(() => {
+        S(i), C(g), d(!0), t.onHeightAnimationStart?.(i);
       }, 50), H = setTimeout(() => {
-        p(!1), b(N), A(s, n), t.onHeightAnimationEnd?.(n);
+        d(!1), A(N), b(s, i), t.onHeightAnimationEnd?.(i);
       }, u)) : (t.onHeightAnimationStart?.(a), f = setTimeout(() => {
-        S(n), C(g), p(!1), b(N), i !== "auto" && A(s, a), t.onHeightAnimationEnd?.(a);
+        S(i), C(g), d(!1), A(N), n !== "auto" && b(s, a), t.onHeightAnimationEnd?.(a);
       }, u));
     }
-    r = i;
+    r = n;
   }), K(() => {
     clearTimeout(f), clearTimeout(H);
   });
-  const Z = () => {
-    const i = {
-      ...typeof t.style == "object" && t.style ? t.style : {},
-      height: tt(T()),
-      overflow: O() ?? "visible"
-    };
-    return P() && t.applyInlineTransitions && (i.transition = `height ${t.duration}ms ${t.easing} ${t.delay}ms`), i;
-  }, D = () => t.animateOpacity ? {
+  const Z = () => V(t.style, {
+    height: et(T()),
+    overflow: O() ?? "visible",
+    // Unset while not animating, so a transition the caller set stays.
+    transition: P() && t.applyInlineTransitions ? `height ${t.duration}ms ${t.easing} ${t.delay}ms` : void 0
+  }), D = () => t.animateOpacity ? {
     transition: `opacity ${t.duration}ms ${t.easing} ${t.delay}ms`,
     ...T() === 0 ? {
       opacity: 0
     } : {}
   } : {}, U = () => y["aria-hidden"] !== void 0 ? y["aria-hidden"] : t.height === 0;
   return (() => {
-    var i = V(), m = i.firstChild, u = Q(t.ref);
-    typeof u == "function" && $(u, i), z(i, F(y, {
+    var n = W(), m = n.firstChild, u = Q(t.ref);
+    typeof u == "function" && $(u, n), z(n, F(y, {
       get "aria-hidden"() {
         return U();
       },
@@ -98,16 +97,16 @@ function ot(e) {
       }
     }), !1, !0);
     var a = s;
-    return typeof a == "function" ? $(a, m) : s = m, M(m, () => t.children), j((n) => {
+    return typeof a == "function" ? $(a, m) : s = m, M(m, () => t.children), L((i) => {
       var g = t.contentClassName, h = D();
-      return g !== n.e && L(m, n.e = g), n.t = R(m, h, n.t), n;
+      return g !== i.e && R(m, i.e = g), i.t = j(m, h, i.t), i;
     }, {
       e: void 0,
       t: void 0
-    }), i;
+    }), n;
   })();
 }
 export {
-  ot as AnimateHeight
+  rt as AnimateHeight
 };
 //# sourceMappingURL=animateHeight.js.map

package/dist/components/base/animateHeight/animateHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"animateHeight.js","sources":["../../../../src/components/base/animateHeight/animateHeight.tsx"],"sourcesContent":["// Solid port of react-animate-height (MIT, © Stanko Tadić)\n// https://github.com/Stanko/react-animate-height\nimport { type JSX, type ParentProps, createEffect, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type Height = \"auto\" | number | `${number}%`;\ntype Overflow = \"auto\" | \"visible\" | \"hidden\" | undefined;\n\ninterface AnimationStateClasses {\n  animating: string;\n  animatingUp: string;\n  animatingDown: string;\n  animatingToHeightZero: string;\n  animatingToHeightAuto: string;\n  animatingToHeightSpecific: string;\n  static: string;\n  staticHeightZero: string;\n  staticHeightAuto: string;\n  staticHeightSpecific: string;\n}\n\nconst isNumberString = (n: string): boolean => {\n  const number = parseFloat(n);\n  return !isNaN(number) && isFinite(number);\n};\n\nconst isPercentage = (height: Height): height is `${number}%` =>\n  typeof height === \"string\" && height[height.length - 1] === \"%\" && isNumberString(height.substring(0, height.length - 1));\n\nconst hideContent = (element: HTMLDivElement | undefined, height: Height): void => {\n  if (height === 0 && element?.style) element.style.display = \"none\";\n};\nconst showContent = (element: HTMLDivElement | undefined, height: Height): void => {\n  if (height === 0 && element?.style) element.style.display = \"\";\n};\n\nconst ANIMATION_STATE_CLASSES: AnimationStateClasses = {\n  animating: \"rah-animating\",\n  animatingUp: \"rah-animating--up\",\n  animatingDown: \"rah-animating--down\",\n  animatingToHeightZero: \"rah-animating--to-height-zero\",\n  animatingToHeightAuto: \"rah-animating--to-height-auto\",\n  animatingToHeightSpecific: \"rah-animating--to-height-specific\",\n  static: \"rah-static\",\n  staticHeightZero: \"rah-static--height-zero\",\n  staticHeightAuto: \"rah-static--height-auto\",\n  staticHeightSpecific: \"rah-static--height-specific\",\n};\n\nconst getStaticStateClasses = (s: AnimationStateClasses, height: Height): string =>\n  cn({\n    [s.static]: true,\n    [s.staticHeightZero]: height === 0,\n    [s.staticHeightSpecific]: typeof height === \"number\" && height > 0,\n    [s.staticHeightAuto]: height === \"auto\",\n  });\n\nconst toCssHeight = (height: Height): string => (typeof height === \"number\" ? `${height}px` : height);\n\nexport interface AnimateHeightProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  animateOpacity?: boolean;\n  animationStateClasses?: Partial<AnimationStateClasses>;\n  applyInlineTransitions?: boolean;\n  contentClassName?: string;\n  delay?: number;\n  duration?: number;\n  easing?: string;\n  height: Height;\n  onHeightAnimationEnd?: (newHeight: Height) => void;\n  onHeightAnimationStart?: (newHeight: Height) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AnimateHeight(props: ParentProps<AnimateHeightProps>): JSX.Element {\n  const merged = mergeProps(\n    { animateOpacity: false, applyInlineTransitions: true, delay: 0, duration: 300, easing: \"ease\" },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"animateOpacity\",\n    \"animationStateClasses\",\n    \"applyInlineTransitions\",\n    \"children\",\n    \"class\",\n    \"contentClassName\",\n    \"delay\",\n    \"duration\",\n    \"easing\",\n    \"height\",\n    \"onHeightAnimationEnd\",\n    \"onHeightAnimationStart\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const stateClasses: AnimationStateClasses = { ...ANIMATION_STATE_CLASSES, ...local.animationStateClasses };\n\n  let contentEl: HTMLDivElement | undefined;\n  let prevHeight: Height = local.height;\n  let timeoutId: ReturnType<typeof setTimeout> | undefined;\n  let classesTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n  let initHeight: Height = local.height;\n  let initOverflow: Overflow = \"visible\";\n  if (typeof initHeight === \"number\") {\n    initHeight = initHeight < 0 ? 0 : initHeight;\n    initOverflow = \"hidden\";\n  } else if (isPercentage(initHeight)) {\n    initHeight = initHeight === \"0%\" ? 0 : initHeight;\n    initOverflow = \"hidden\";\n  }\n\n  const [currentHeight, setCurrentHeight] = createSignal<Height>(initHeight);\n  const [overflow, setOverflow] = createSignal<Overflow>(initOverflow);\n  const [useTransitions, setUseTransitions] = createSignal(false);\n  const [stateClassNames, setStateClassNames] = createSignal(getStaticStateClasses(stateClasses, local.height));\n\n  onMount(() => hideContent(contentEl, currentHeight()));\n\n  createEffect(() => {\n    const height = local.height;\n    if (height !== prevHeight && contentEl) {\n      showContent(contentEl, prevHeight);\n      contentEl.style.overflow = \"hidden\";\n      const contentHeight = contentEl.offsetHeight;\n      contentEl.style.overflow = \"\";\n\n      const totalDuration = local.duration + local.delay;\n      let newHeight: Height;\n      let timeoutHeight: Height;\n      let timeoutOverflow: Overflow = \"hidden\";\n      const isCurrentHeightAuto = prevHeight === \"auto\";\n\n      if (typeof height === \"number\") {\n        newHeight = height < 0 ? 0 : height;\n        timeoutHeight = newHeight;\n      } else if (isPercentage(height)) {\n        newHeight = height === \"0%\" ? 0 : height;\n        timeoutHeight = newHeight;\n      } else {\n        newHeight = contentHeight;\n        timeoutHeight = \"auto\";\n        timeoutOverflow = undefined;\n      }\n\n      if (isCurrentHeightAuto) {\n        timeoutHeight = newHeight;\n        newHeight = contentHeight;\n      }\n\n      const animatingClassNames = cn({\n        [stateClasses.animating]: true,\n        [stateClasses.animatingUp]:\n          prevHeight === \"auto\" || (typeof prevHeight === \"number\" && typeof height === \"number\" && height < prevHeight),\n        [stateClasses.animatingDown]:\n          height === \"auto\" || (typeof prevHeight === \"number\" && typeof height === \"number\" && height > prevHeight),\n        [stateClasses.animatingToHeightZero]: timeoutHeight === 0,\n        [stateClasses.animatingToHeightAuto]: timeoutHeight === \"auto\",\n        [stateClasses.animatingToHeightSpecific]: typeof timeoutHeight === \"number\" && timeoutHeight > 0,\n      });\n      const finalClassNames = getStaticStateClasses(stateClasses, timeoutHeight);\n\n      setCurrentHeight(newHeight);\n      setOverflow(\"hidden\");\n      setUseTransitions(!isCurrentHeightAuto);\n      setStateClassNames(animatingClassNames);\n\n      clearTimeout(timeoutId);\n      clearTimeout(classesTimeoutId);\n\n      if (isCurrentHeightAuto) {\n        timeoutId = setTimeout(() => {\n          setCurrentHeight(timeoutHeight);\n          setOverflow(timeoutOverflow);\n          setUseTransitions(true);\n          local.onHeightAnimationStart?.(timeoutHeight);\n        }, 50);\n        classesTimeoutId = setTimeout(() => {\n          setUseTransitions(false);\n          setStateClassNames(finalClassNames);\n          hideContent(contentEl, timeoutHeight);\n          local.onHeightAnimationEnd?.(timeoutHeight);\n        }, totalDuration);\n      } else {\n        local.onHeightAnimationStart?.(newHeight);\n        timeoutId = setTimeout(() => {\n          setCurrentHeight(timeoutHeight);\n          setOverflow(timeoutOverflow);\n          setUseTransitions(false);\n          setStateClassNames(finalClassNames);\n          if (height !== \"auto\") hideContent(contentEl, newHeight);\n          local.onHeightAnimationEnd?.(newHeight);\n        }, totalDuration);\n      }\n    }\n    prevHeight = height;\n  });\n\n  onCleanup(() => {\n    clearTimeout(timeoutId);\n    clearTimeout(classesTimeoutId);\n  });\n\n  const componentStyle = (): JSX.CSSProperties => {\n    const base: JSX.CSSProperties = {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      height: toCssHeight(currentHeight()),\n      overflow: overflow() ?? \"visible\",\n    };\n    if (useTransitions() && local.applyInlineTransitions) {\n      base.transition = `height ${local.duration}ms ${local.easing} ${local.delay}ms`;\n    }\n    return base;\n  };\n\n  const contentStyle = (): JSX.CSSProperties => {\n    if (!local.animateOpacity) return {};\n    return {\n      transition: `opacity ${local.duration}ms ${local.easing} ${local.delay}ms`,\n      ...(currentHeight() === 0 ? { opacity: 0 } : {}),\n    };\n  };\n\n  const ariaHidden = (): boolean | undefined =>\n    rest[\"aria-hidden\"] !== undefined ? (rest[\"aria-hidden\"] as boolean) : local.height === 0;\n\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} aria-hidden={ariaHidden()} class={cn(stateClassNames(), local.class)} style={componentStyle()}>\n      <div class={local.contentClassName} style={contentStyle()} ref={contentEl}>\n        {local.children}\n      </div>\n    </div>\n  );\n}\n\nexport default AnimateHeight;\n"],"names":["isNumberString","n","number","parseFloat","isNaN","isFinite","isPercentage","height","length","substring","hideContent","element","style","display","showContent","ANIMATION_STATE_CLASSES","animating","animatingUp","animatingDown","animatingToHeightZero","animatingToHeightAuto","animatingToHeightSpecific","static","staticHeightZero","staticHeightAuto","staticHeightSpecific","getStaticStateClasses","s","cn","toCssHeight","AnimateHeight","props","merged","mergeProps","animateOpacity","applyInlineTransitions","delay","duration","easing","local","rest","splitProps","stateClasses","animationStateClasses","contentEl","prevHeight","timeoutId","classesTimeoutId","initHeight","initOverflow","currentHeight","setCurrentHeight","createSignal","overflow","setOverflow","useTransitions","setUseTransitions","stateClassNames","setStateClassNames","onMount","createEffect","contentHeight","offsetHeight","totalDuration","newHeight","timeoutHeight","timeoutOverflow","isCurrentHeightAuto","undefined","animatingClassNames","finalClassNames","clearTimeout","setTimeout","onHeightAnimationStart","onHeightAnimationEnd","onCleanup","componentStyle","base","transition","contentStyle","opacity","ariaHidden","_el$","_tmpl$","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","class","_ref$2","_$insert","children","_$effect","_p$","_v$","contentClassName","_v$2","e","_$className","t","_$style"],"mappings":"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"}
+{"version":3,"file":"animateHeight.js","sources":["../../../../src/components/base/animateHeight/animateHeight.tsx"],"sourcesContent":["// Solid port of react-animate-height (MIT, © Stanko Tadić)\n// https://github.com/Stanko/react-animate-height\nimport { type JSX, type ParentProps, createEffect, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport type Height = \"auto\" | number | `${number}%`;\ntype Overflow = \"auto\" | \"visible\" | \"hidden\" | undefined;\n\ninterface AnimationStateClasses {\n  animating: string;\n  animatingUp: string;\n  animatingDown: string;\n  animatingToHeightZero: string;\n  animatingToHeightAuto: string;\n  animatingToHeightSpecific: string;\n  static: string;\n  staticHeightZero: string;\n  staticHeightAuto: string;\n  staticHeightSpecific: string;\n}\n\nconst isNumberString = (n: string): boolean => {\n  const number = parseFloat(n);\n  return !isNaN(number) && isFinite(number);\n};\n\nconst isPercentage = (height: Height): height is `${number}%` =>\n  typeof height === \"string\" && height[height.length - 1] === \"%\" && isNumberString(height.substring(0, height.length - 1));\n\nconst hideContent = (element: HTMLDivElement | undefined, height: Height): void => {\n  if (height === 0 && element?.style) element.style.display = \"none\";\n};\nconst showContent = (element: HTMLDivElement | undefined, height: Height): void => {\n  if (height === 0 && element?.style) element.style.display = \"\";\n};\n\nconst ANIMATION_STATE_CLASSES: AnimationStateClasses = {\n  animating: \"rah-animating\",\n  animatingUp: \"rah-animating--up\",\n  animatingDown: \"rah-animating--down\",\n  animatingToHeightZero: \"rah-animating--to-height-zero\",\n  animatingToHeightAuto: \"rah-animating--to-height-auto\",\n  animatingToHeightSpecific: \"rah-animating--to-height-specific\",\n  static: \"rah-static\",\n  staticHeightZero: \"rah-static--height-zero\",\n  staticHeightAuto: \"rah-static--height-auto\",\n  staticHeightSpecific: \"rah-static--height-specific\",\n};\n\nconst getStaticStateClasses = (s: AnimationStateClasses, height: Height): string =>\n  cn({\n    [s.static]: true,\n    [s.staticHeightZero]: height === 0,\n    [s.staticHeightSpecific]: typeof height === \"number\" && height > 0,\n    [s.staticHeightAuto]: height === \"auto\",\n  });\n\nconst toCssHeight = (height: Height): string => (typeof height === \"number\" ? `${height}px` : height);\n\nexport interface AnimateHeightProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  animateOpacity?: boolean;\n  animationStateClasses?: Partial<AnimationStateClasses>;\n  applyInlineTransitions?: boolean;\n  contentClassName?: string;\n  delay?: number;\n  duration?: number;\n  easing?: string;\n  height: Height;\n  onHeightAnimationEnd?: (newHeight: Height) => void;\n  onHeightAnimationStart?: (newHeight: Height) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AnimateHeight(props: ParentProps<AnimateHeightProps>): JSX.Element {\n  const merged = mergeProps(\n    { animateOpacity: false, applyInlineTransitions: true, delay: 0, duration: 300, easing: \"ease\" },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"animateOpacity\",\n    \"animationStateClasses\",\n    \"applyInlineTransitions\",\n    \"children\",\n    \"class\",\n    \"contentClassName\",\n    \"delay\",\n    \"duration\",\n    \"easing\",\n    \"height\",\n    \"onHeightAnimationEnd\",\n    \"onHeightAnimationStart\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const stateClasses: AnimationStateClasses = { ...ANIMATION_STATE_CLASSES, ...local.animationStateClasses };\n\n  let contentEl: HTMLDivElement | undefined;\n  let prevHeight: Height = local.height;\n  let timeoutId: ReturnType<typeof setTimeout> | undefined;\n  let classesTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n  let initHeight: Height = local.height;\n  let initOverflow: Overflow = \"visible\";\n  if (typeof initHeight === \"number\") {\n    initHeight = initHeight < 0 ? 0 : initHeight;\n    initOverflow = \"hidden\";\n  } else if (isPercentage(initHeight)) {\n    initHeight = initHeight === \"0%\" ? 0 : initHeight;\n    initOverflow = \"hidden\";\n  }\n\n  const [currentHeight, setCurrentHeight] = createSignal<Height>(initHeight);\n  const [overflow, setOverflow] = createSignal<Overflow>(initOverflow);\n  const [useTransitions, setUseTransitions] = createSignal(false);\n  const [stateClassNames, setStateClassNames] = createSignal(getStaticStateClasses(stateClasses, local.height));\n\n  onMount(() => hideContent(contentEl, currentHeight()));\n\n  createEffect(() => {\n    const height = local.height;\n    if (height !== prevHeight && contentEl) {\n      showContent(contentEl, prevHeight);\n      contentEl.style.overflow = \"hidden\";\n      const contentHeight = contentEl.offsetHeight;\n      contentEl.style.overflow = \"\";\n\n      const totalDuration = local.duration + local.delay;\n      let newHeight: Height;\n      let timeoutHeight: Height;\n      let timeoutOverflow: Overflow = \"hidden\";\n      const isCurrentHeightAuto = prevHeight === \"auto\";\n\n      if (typeof height === \"number\") {\n        newHeight = height < 0 ? 0 : height;\n        timeoutHeight = newHeight;\n      } else if (isPercentage(height)) {\n        newHeight = height === \"0%\" ? 0 : height;\n        timeoutHeight = newHeight;\n      } else {\n        newHeight = contentHeight;\n        timeoutHeight = \"auto\";\n        timeoutOverflow = undefined;\n      }\n\n      if (isCurrentHeightAuto) {\n        timeoutHeight = newHeight;\n        newHeight = contentHeight;\n      }\n\n      const animatingClassNames = cn({\n        [stateClasses.animating]: true,\n        [stateClasses.animatingUp]:\n          prevHeight === \"auto\" || (typeof prevHeight === \"number\" && typeof height === \"number\" && height < prevHeight),\n        [stateClasses.animatingDown]:\n          height === \"auto\" || (typeof prevHeight === \"number\" && typeof height === \"number\" && height > prevHeight),\n        [stateClasses.animatingToHeightZero]: timeoutHeight === 0,\n        [stateClasses.animatingToHeightAuto]: timeoutHeight === \"auto\",\n        [stateClasses.animatingToHeightSpecific]: typeof timeoutHeight === \"number\" && timeoutHeight > 0,\n      });\n      const finalClassNames = getStaticStateClasses(stateClasses, timeoutHeight);\n\n      setCurrentHeight(newHeight);\n      setOverflow(\"hidden\");\n      setUseTransitions(!isCurrentHeightAuto);\n      setStateClassNames(animatingClassNames);\n\n      clearTimeout(timeoutId);\n      clearTimeout(classesTimeoutId);\n\n      if (isCurrentHeightAuto) {\n        timeoutId = setTimeout(() => {\n          setCurrentHeight(timeoutHeight);\n          setOverflow(timeoutOverflow);\n          setUseTransitions(true);\n          local.onHeightAnimationStart?.(timeoutHeight);\n        }, 50);\n        classesTimeoutId = setTimeout(() => {\n          setUseTransitions(false);\n          setStateClassNames(finalClassNames);\n          hideContent(contentEl, timeoutHeight);\n          local.onHeightAnimationEnd?.(timeoutHeight);\n        }, totalDuration);\n      } else {\n        local.onHeightAnimationStart?.(newHeight);\n        timeoutId = setTimeout(() => {\n          setCurrentHeight(timeoutHeight);\n          setOverflow(timeoutOverflow);\n          setUseTransitions(false);\n          setStateClassNames(finalClassNames);\n          if (height !== \"auto\") hideContent(contentEl, newHeight);\n          local.onHeightAnimationEnd?.(newHeight);\n        }, totalDuration);\n      }\n    }\n    prevHeight = height;\n  });\n\n  onCleanup(() => {\n    clearTimeout(timeoutId);\n    clearTimeout(classesTimeoutId);\n  });\n\n  const componentStyle = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(local.style, {\n      height: toCssHeight(currentHeight()),\n      overflow: overflow() ?? \"visible\",\n      // Unset while not animating, so a transition the caller set stays.\n      transition:\n        useTransitions() && local.applyInlineTransitions\n          ? `height ${local.duration}ms ${local.easing} ${local.delay}ms`\n          : undefined,\n    });\n\n  const contentStyle = (): JSX.CSSProperties => {\n    if (!local.animateOpacity) return {};\n    return {\n      transition: `opacity ${local.duration}ms ${local.easing} ${local.delay}ms`,\n      ...(currentHeight() === 0 ? { opacity: 0 } : {}),\n    };\n  };\n\n  const ariaHidden = (): boolean | undefined =>\n    rest[\"aria-hidden\"] !== undefined ? (rest[\"aria-hidden\"] as boolean) : local.height === 0;\n\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} aria-hidden={ariaHidden()} class={cn(stateClassNames(), local.class)} style={componentStyle()}>\n      <div class={local.contentClassName} style={contentStyle()} ref={contentEl}>\n        {local.children}\n      </div>\n    </div>\n  );\n}\n\nexport default AnimateHeight;\n"],"names":["isNumberString","n","number","parseFloat","isNaN","isFinite","isPercentage","height","length","substring","hideContent","element","style","display","showContent","ANIMATION_STATE_CLASSES","animating","animatingUp","animatingDown","animatingToHeightZero","animatingToHeightAuto","animatingToHeightSpecific","static","staticHeightZero","staticHeightAuto","staticHeightSpecific","getStaticStateClasses","s","cn","toCssHeight","AnimateHeight","props","merged","mergeProps","animateOpacity","applyInlineTransitions","delay","duration","easing","local","rest","splitProps","stateClasses","animationStateClasses","contentEl","prevHeight","timeoutId","classesTimeoutId","initHeight","initOverflow","currentHeight","setCurrentHeight","createSignal","overflow","setOverflow","useTransitions","setUseTransitions","stateClassNames","setStateClassNames","onMount","createEffect","contentHeight","offsetHeight","totalDuration","newHeight","timeoutHeight","timeoutOverflow","isCurrentHeightAuto","undefined","animatingClassNames","finalClassNames","clearTimeout","setTimeout","onHeightAnimationStart","onHeightAnimationEnd","onCleanup","componentStyle","mergeStyle","transition","contentStyle","opacity","ariaHidden","_el$","_tmpl$","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","class","_ref$2","_$insert","children","_$effect","_p$","_v$","contentClassName","_v$2","e","_$className","t","_$style"],"mappings":";;;;;;AAuBA,MAAMA,IAAiBA,CAACC,MAAuB;AAC7C,QAAMC,IAASC,WAAWF,CAAC;AAC3B,SAAO,CAACG,MAAMF,CAAM,KAAKG,SAASH,CAAM;AAC1C,GAEMI,IAAeA,CAACC,MACpB,OAAOA,KAAW,YAAYA,EAAOA,EAAOC,SAAS,CAAC,MAAM,OAAOR,EAAeO,EAAOE,UAAU,GAAGF,EAAOC,SAAS,CAAC,CAAC,GAEpHE,IAAcA,CAACC,GAAqCJ,MAAyB;AACjF,EAAIA,MAAW,KAAKI,GAASC,UAAOD,EAAQC,MAAMC,UAAU;AAC9D,GACMC,IAAcA,CAACH,GAAqCJ,MAAyB;AACjF,EAAIA,MAAW,KAAKI,GAASC,UAAOD,EAAQC,MAAMC,UAAU;AAC9D,GAEME,KAAiD;AAAA,EACrDC,WAAW;AAAA,EACXC,aAAa;AAAA,EACbC,eAAe;AAAA,EACfC,uBAAuB;AAAA,EACvBC,uBAAuB;AAAA,EACvBC,2BAA2B;AAAA,EAC3BC,QAAQ;AAAA,EACRC,kBAAkB;AAAA,EAClBC,kBAAkB;AAAA,EAClBC,sBAAsB;AACxB,GAEMC,IAAwBA,CAACC,GAA0BpB,MACvDqB,EAAG;AAAA,EACD,CAACD,EAAEL,MAAM,GAAG;AAAA,EACZ,CAACK,EAAEJ,gBAAgB,GAAGhB,MAAW;AAAA,EACjC,CAACoB,EAAEF,oBAAoB,GAAG,OAAOlB,KAAW,YAAYA,IAAS;AAAA,EACjE,CAACoB,EAAEH,gBAAgB,GAAGjB,MAAW;AACnC,CAAC,GAEGsB,KAAcA,CAACtB,MAA4B,OAAOA,KAAW,WAAW,GAAGA,CAAM,OAAOA;AAgBvF,SAASuB,GAAcC,GAAqD;AACjF,QAAMC,IAASC,EACb;AAAA,IAAEC,gBAAgB;AAAA,IAAOC,wBAAwB;AAAA,IAAMC,OAAO;AAAA,IAAGC,UAAU;AAAA,IAAKC,QAAQ;AAAA,EAAA,GACxFP,CACF,GACM,CAACQ,GAAOC,CAAI,IAAIC,EAAWT,GAAQ,CACvC,kBACA,yBACA,0BACA,YACA,SACA,oBACA,SACA,YACA,UACA,UACA,wBACA,0BACA,SACA,KAAK,CACN,GAEKU,IAAsC;AAAA,IAAE,GAAG3B;AAAAA,IAAyB,GAAGwB,EAAMI;AAAAA,EAAAA;AAEnF,MAAIC,GACAC,IAAqBN,EAAMhC,QAC3BuC,GACAC,GAEAC,IAAqBT,EAAMhC,QAC3B0C,IAAyB;AAC7B,EAAI,OAAOD,KAAe,YACxBA,IAAaA,IAAa,IAAI,IAAIA,GAClCC,IAAe,YACN3C,EAAa0C,CAAU,MAChCA,IAAaA,MAAe,OAAO,IAAIA,GACvCC,IAAe;AAGjB,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAqBJ,CAAU,GACnE,CAACK,GAAUC,CAAW,IAAIF,EAAuBH,CAAY,GAC7D,CAACM,GAAgBC,CAAiB,IAAIJ,EAAa,EAAK,GACxD,CAACK,GAAiBC,CAAkB,IAAIN,EAAa1B,EAAsBgB,GAAcH,EAAMhC,MAAM,CAAC;AAE5GoD,EAAAA,EAAQ,MAAMjD,EAAYkC,GAAWM,EAAAA,CAAe,CAAC,GAErDU,EAAa,MAAM;AACjB,UAAMrD,IAASgC,EAAMhC;AACrB,QAAIA,MAAWsC,KAAcD,GAAW;AACtC9B,MAAAA,EAAY8B,GAAWC,CAAU,GACjCD,EAAUhC,MAAMyC,WAAW;AAC3B,YAAMQ,IAAgBjB,EAAUkB;AAChClB,MAAAA,EAAUhC,MAAMyC,WAAW;AAE3B,YAAMU,IAAgBxB,EAAMF,WAAWE,EAAMH;AAC7C,UAAI4B,GACAC,GACAC,IAA4B;AAChC,YAAMC,IAAsBtB,MAAe;AAE3C,MAAI,OAAOtC,KAAW,YACpByD,IAAYzD,IAAS,IAAI,IAAIA,GAC7B0D,IAAgBD,KACP1D,EAAaC,CAAM,KAC5ByD,IAAYzD,MAAW,OAAO,IAAIA,GAClC0D,IAAgBD,MAEhBA,IAAYH,GACZI,IAAgB,QAChBC,IAAkBE,SAGhBD,MACFF,IAAgBD,GAChBA,IAAYH;AAGd,YAAMQ,IAAsBzC,EAAG;AAAA,QAC7B,CAACc,EAAa1B,SAAS,GAAG;AAAA,QAC1B,CAAC0B,EAAazB,WAAW,GACvB4B,MAAe,UAAW,OAAOA,KAAe,YAAY,OAAOtC,KAAW,YAAYA,IAASsC;AAAAA,QACrG,CAACH,EAAaxB,aAAa,GACzBX,MAAW,UAAW,OAAOsC,KAAe,YAAY,OAAOtC,KAAW,YAAYA,IAASsC;AAAAA,QACjG,CAACH,EAAavB,qBAAqB,GAAG8C,MAAkB;AAAA,QACxD,CAACvB,EAAatB,qBAAqB,GAAG6C,MAAkB;AAAA,QACxD,CAACvB,EAAarB,yBAAyB,GAAG,OAAO4C,KAAkB,YAAYA,IAAgB;AAAA,MAAA,CAChG,GACKK,IAAkB5C,EAAsBgB,GAAcuB,CAAa;AAEzEd,MAAAA,EAAiBa,CAAS,GAC1BV,EAAY,QAAQ,GACpBE,EAAkB,CAACW,CAAmB,GACtCT,EAAmBW,CAAmB,GAEtCE,aAAazB,CAAS,GACtByB,aAAaxB,CAAgB,GAEzBoB,KACFrB,IAAY0B,WAAW,MAAM;AAC3BrB,QAAAA,EAAiBc,CAAa,GAC9BX,EAAYY,CAAe,GAC3BV,EAAkB,EAAI,GACtBjB,EAAMkC,yBAAyBR,CAAa;AAAA,MAC9C,GAAG,EAAE,GACLlB,IAAmByB,WAAW,MAAM;AAClChB,QAAAA,EAAkB,EAAK,GACvBE,EAAmBY,CAAe,GAClC5D,EAAYkC,GAAWqB,CAAa,GACpC1B,EAAMmC,uBAAuBT,CAAa;AAAA,MAC5C,GAAGF,CAAa,MAEhBxB,EAAMkC,yBAAyBT,CAAS,GACxClB,IAAY0B,WAAW,MAAM;AAC3BrB,QAAAA,EAAiBc,CAAa,GAC9BX,EAAYY,CAAe,GAC3BV,EAAkB,EAAK,GACvBE,EAAmBY,CAAe,GAC9B/D,MAAW,UAAQG,EAAYkC,GAAWoB,CAAS,GACvDzB,EAAMmC,uBAAuBV,CAAS;AAAA,MACxC,GAAGD,CAAa;AAAA,IAEpB;AACAlB,IAAAA,IAAatC;AAAAA,EACf,CAAC,GAEDoE,EAAU,MAAM;AACdJ,iBAAazB,CAAS,GACtByB,aAAaxB,CAAgB;AAAA,EAC/B,CAAC;AAED,QAAM6B,IAAiBA,MACrBC,EAAWtC,EAAM3B,OAAO;AAAA,IACtBL,QAAQsB,GAAYqB,GAAe;AAAA,IACnCG,UAAUA,OAAc;AAAA;AAAA,IAExByB,YACEvB,EAAAA,KAAoBhB,EAAMJ,yBACtB,UAAUI,EAAMF,QAAQ,MAAME,EAAMD,MAAM,IAAIC,EAAMH,KAAK,OACzDgC;AAAAA,EAAAA,CACP,GAEGW,IAAeA,MACdxC,EAAML,iBACJ;AAAA,IACL4C,YAAY,WAAWvC,EAAMF,QAAQ,MAAME,EAAMD,MAAM,IAAIC,EAAMH,KAAK;AAAA,IACtE,GAAIc,EAAAA,MAAoB,IAAI;AAAA,MAAE8B,SAAS;AAAA,IAAA,IAAM,CAAA;AAAA,EAAC,IAHd,CAAA,GAO9BC,IAAaA,MACjBzC,EAAK,aAAa,MAAM4B,SAAa5B,EAAK,aAAa,IAAgBD,EAAMhC,WAAW;AAE1F,UAAA,MAAA;AAAA,QAAA2E,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IACsBC,EAAUhD,EAAMiD,GAAG;AAAC,WAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAAS,EAA/BnD,GAAI;AAAA,MAAA,IAAA,gBAAA;AAAA,eAA0CyC,EAAAA;AAAAA,MAAY;AAAA,MAAA,IAAA,QAAA;AAAA,eAASrD,EAAG6B,KAAmBlB,EAAMqD,KAAK;AAAA,MAAC;AAAA,MAAA,IAAEhF,QAAK;AAAA,eAAEgE,EAAAA;AAAAA,MAAgB;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA;AAAA,QAAAiB,IACrEjD;AAAS,kBAAAiD,KAAA,aAAAJ,EAAAI,GAAAT,CAAA,IAATxC,IAASwC,GAAAU,EAAAV,GAAA,MACtE7C,EAAMwD,QAAQ,GAAAC,EAAAC,CAAAA,MAAA;AAAA,UAAAC,IADL3D,EAAM4D,kBAAgBC,IAASrB,EAAAA;AAAcmB,aAAAA,MAAAD,EAAAI,KAAAC,EAAAlB,GAAAa,EAAAI,IAAAH,CAAA,GAAAD,EAAAM,IAAAC,EAAApB,GAAAgB,GAAAH,EAAAM,CAAA,GAAAN;AAAAA,IAAA,GAAA;AAAA,MAAAI,GAAAjC;AAAAA,MAAAmC,GAAAnC;AAAAA,IAAAA,CAAA,GAAAc;AAAAA,EAAA,GAAA;AAK/D;"}

package/dist/components/base/icon/icon.d.ts

@@ -35,12 +35,16 @@ export interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {
      */
     color?: IconColor | (string & {});
     /**
-     * Accessible name. When provided the icon is exposed as `role="img"`;
-     * otherwise it is `aria-hidden` (decorative).
+     * Accessible name, also shown as a tooltip. A non-empty `title`,
+     * `aria-label` or `aria-labelledby` names the icon: it is exposed as
+     * `role="img"`, or with the `role` you pass. Without any of them the icon is
+     * decorative and `aria-hidden`.
      */
     title?: string;
     /** Overrides the icon source for this icon only. See {@link IconSource}. */
     source?: IconSource;
+    /** Test id of the root `<span>`; `icon` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLSpanElement>;
 }
 export declare function Icon(props: IconProps): JSX.Element;

package/dist/components/base/icon/icon.js

@@ -1,80 +1,80 @@
-import { use as j, spread as L, mergeProps as R, insert as b, memo as A, effect as h, setStyleProperty as a, setAttribute as $, template as c } from "solid-js/web";
+import { use as L, spread as O, mergeProps as R, insert as y, memo as j, effect as $, setStyleProperty as c, setAttribute as _, template as m } from "solid-js/web";
 import '../../../assets/styles/less/components/icon/icon.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                   */
-import { mergeProps as B, splitProps as T, useContext as D } from "solid-js";
-import E from "clsx";
-import { mergeRefs as F } from "../../../primitives/mergeRefs.js";
+import { mergeProps as A, splitProps as B, useContext as T } from "solid-js";
+import D from "clsx";
+import { mergeRefs as E } from "../../../primitives/mergeRefs.js";
+import { mergeStyle as F } from "../../../primitives/mergeStyle.js";
 import { getIcon as G } from "../../../icons/registry.js";
-import { getIconConfig as x } from "../../../icons/config.js";
+import { getIconConfig as z } from "../../../icons/config.js";
 import { IconContext as H, createIconVersion as K } from "./iconProvider.js";
-var N = /* @__PURE__ */ c("<span>"), V = /* @__PURE__ */ c("<span class=material-symbols-outlined>"), W = /* @__PURE__ */ c("<svg class=smwb-icon__svg fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round aria-hidden=true>");
-const q = ["primary", "secondary", "error", "success", "warning", "info", "disabled"], _ = /* @__PURE__ */ new Set();
-function J(s) {
-  !x().warnOnMissing || _.has(s) || (_.add(s), console.warn(`[smwb] Icon "${s}" is not registered. Register it (import { ${s} } from "@smwb/ui-solid/icons") or use source="auto" to fall back to Material Symbols.`));
+var N = /* @__PURE__ */ m("<span>"), V = /* @__PURE__ */ m("<span class=material-symbols-outlined>"), W = /* @__PURE__ */ m("<svg class=smwb-icon__svg fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round aria-hidden=true>");
+const q = ["primary", "secondary", "error", "success", "warning", "info", "disabled"], x = /* @__PURE__ */ new Set();
+function J(i) {
+  !z().warnOnMissing || x.has(i) || (x.add(i), console.warn(`[smwb] Icon "${i}" is not registered. Register it (import { ${i} } from "@smwb/ui-solid/icons") or use source="auto" to fall back to Material Symbols.`));
 }
-function se(s) {
-  const z = B({
+function ne(i) {
+  const I = A({
     weight: 400,
     fill: 0,
     size: 20,
     grade: 100,
     color: "inherit"
-  }, s), [e, I] = T(z, ["class", "weight", "fill", "size", "grade", "name", "color", "title", "style", "source", "ref"]), M = D(H), m = K(), k = () => (m(), e.source ?? M?.source ?? x().source), n = () => (m(), typeof e.name == "object" ? e.name : G(e.name)), u = () => typeof e.name == "string" ? e.name : e.name.name, i = () => {
-    const r = k();
-    return r === "google" ? "google" : n() ? "smwb" : r === "smwb" ? (J(u()), "missing") : "google";
-  }, g = () => e.title === void 0, C = () => typeof e.color == "string" && q.includes(e.color) ? `smwb-icon_color-${e.color}` : void 0, O = () => typeof e.style == "object" && e.style ? e.style : {}, l = () => typeof e.size == "number" ? `${e.size}px` : e.size, P = () => Math.round(Math.min(3, Math.max(1, e.weight / 200)) * 100) / 100;
+  }, i), [e, n] = B(I, ["class", "weight", "fill", "size", "grade", "name", "color", "title", "style", "source", "ref", "data-testid"]), M = T(H), g = K(), k = () => (g(), e.source ?? M?.source ?? z().source), s = () => (g(), typeof e.name == "object" ? e.name : G(e.name)), u = () => typeof e.name == "string" ? e.name : e.name.name, a = () => {
+    const o = k();
+    return o === "google" ? "google" : s() ? "smwb" : o === "smwb" ? (J(u()), "missing") : "google";
+  }, d = () => !(e.title || n["aria-label"] || n["aria-labelledby"]), C = () => typeof e.color == "string" && q.includes(e.color) ? `smwb-icon_color-${e.color}` : void 0, l = () => typeof e.size == "number" ? `${e.size}px` : e.size, S = () => Math.round(Math.min(3, Math.max(1, e.weight / 200)) * 100) / 100;
   return (() => {
-    var r = N(), d = F(e.ref);
-    return typeof d == "function" && j(d, r), L(r, R(I, {
-      "data-testid": "icon",
+    var o = N(), f = E(e.ref);
+    return typeof f == "function" && L(f, o), O(o, R(n, {
+      get "data-testid"() {
+        return e["data-testid"] ?? "icon";
+      },
       get "data-icon-source"() {
-        return i();
+        return a();
       },
       get role() {
-        return g() ? void 0 : "img";
+        return n.role ?? (d() ? void 0 : "img");
       },
       get "aria-hidden"() {
-        return g() ? !0 : void 0;
+        return d() ? !0 : void 0;
       },
       get "aria-label"() {
-        return e.title;
+        return e.title || n["aria-label"];
       },
       get title() {
         return e.title;
       },
       get style() {
-        return {
-          ...O(),
-          ...i() === "google" ? {
-            "font-variation-settings": `'FILL' ${e.fill}, 'wght' ${e.weight}, 'GRAD' ${e.grade}, 'opsz' 48`
-          } : null
-        };
+        return F(e.style, {
+          "font-variation-settings": a() === "google" ? `'FILL' ${e.fill}, 'wght' ${e.weight}, 'GRAD' ${e.grade}, 'opsz' 48` : void 0
+        });
       },
       get class() {
-        return E("smwb-icon__wrapper", C(), e.class);
+        return D("smwb-icon__wrapper", C(), e.class);
       }
-    }), !1, !0), b(r, (() => {
-      var S = A(() => i() === "google");
-      return () => S() ? (() => {
-        var o = V();
-        return b(o, u), h((t) => a(o, "font-size", l())), o;
+    }), !1, !0), y(o, (() => {
+      var P = j(() => a() === "google");
+      return () => P() ? (() => {
+        var r = V();
+        return y(r, u), $((t) => c(r, "font-size", l())), r;
       })() : (() => {
-        var o = W();
-        return h((t) => {
-          var f = n()?.viewBox ?? "0 0 24 24", v = l(), p = l(), w = P(), y = n()?.body ?? "";
-          return f !== t.e && $(o, "viewBox", t.e = f), v !== t.t && a(o, "width", t.t = v), p !== t.a && a(o, "height", t.a = p), w !== t.o && $(o, "stroke-width", t.o = w), y !== t.i && (o.innerHTML = t.i = y), t;
+        var r = W();
+        return $((t) => {
+          var v = s()?.viewBox ?? "0 0 24 24", p = l(), w = l(), b = S(), h = s()?.body ?? "";
+          return v !== t.e && _(r, "viewBox", t.e = v), p !== t.t && c(r, "width", t.t = p), w !== t.a && c(r, "height", t.a = w), b !== t.o && _(r, "stroke-width", t.o = b), h !== t.i && (r.innerHTML = t.i = h), t;
         }, {
           e: void 0,
           t: void 0,
           a: void 0,
           o: void 0,
           i: void 0
-        }), o;
+        }), r;
       })();
-    })()), r;
+    })()), o;
   })();
 }
 export {
-  se as Icon
+  ne as Icon
 };
 //# sourceMappingURL=icon.js.map

package/dist/components/base/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["/* eslint-disable solid/no-innerhtml -- icon bodies are static SVG geometry\n   generated from icons/data into src/icons/svg; nothing user-supplied reaches\n   this attribute, and an <svg> assembled from JSX children cannot be handed to\n   a consumer as plain data. */\nimport { type JSX, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { createIconVersion, IconContext } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS: ReadonlyArray<string> = [\n  \"primary\",\n  \"secondary\",\n  \"error\",\n  \"success\",\n  \"warning\",\n  \"info\",\n  \"disabled\",\n];\n\nconst warned = new Set<string>();\n\nfunction warnMissing(name: string): void {\n  if (!getIconConfig().warnOnMissing || warned.has(name)) return;\n  warned.add(name);\n  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-solid/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name — the Google Material Symbols name, e.g. `\"arrow_right_alt\"`.\n   * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as\n   * do an icon's aliases.\n   *\n   * An {@link IconDefinition} may be passed instead, which skips the registry\n   * entirely and is the most bundle-friendly form:\n   *\n   * ```tsx\n   * import { arrowRightAlt } from \"@smwb/ui-solid/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\n  /**\n   * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the\n   * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.\n   */\n  weight?: number;\n  /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  /** Material Symbols GRAD axis. Not used by the smwb SVG set. */\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color. Any string\n   * is accepted for backward compatibility, but only known {@link IconColor}\n   * tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name. When provided the icon is exposed as `role=\"img\"`;\n   * otherwise it is `aria-hidden` (decorative).\n   */\n  title?: string;\n  /** Overrides the icon source for this icon only. See {@link IconSource}. */\n  source?: IconSource;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Icon(props: IconProps): JSX.Element {\n  const merged = mergeProps(\n    { weight: 400, fill: 0 as 0 | 1, size: 20 as number | string, grade: 100, color: \"inherit\" as IconProps[\"color\"] },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"weight\",\n    \"fill\",\n    \"size\",\n    \"grade\",\n    \"name\",\n    \"color\",\n    \"title\",\n    \"style\",\n    \"source\",\n    \"ref\",\n  ]);\n\n  const context = useContext(IconContext);\n  // Re-reads the registry when icons are registered late (lazy chunks, HMR).\n  const version = createIconVersion();\n\n  const source = (): IconSource => {\n    version();\n    return local.source ?? context?.source ?? getIconConfig().source;\n  };\n  const definition = (): IconDefinition | undefined => {\n    version();\n    return typeof local.name === \"object\" ? local.name : getIcon(local.name);\n  };\n  const glyph = (): string => (typeof local.name === \"string\" ? local.name : local.name.name);\n\n  const mode = (): \"google\" | \"smwb\" | \"missing\" => {\n    const resolved = source();\n    if (resolved === \"google\") return \"google\";\n    if (definition()) return \"smwb\";\n    if (resolved === \"smwb\") {\n      warnMissing(glyph());\n      return \"missing\";\n    }\n    return \"google\";\n  };\n\n  const decorative = (): boolean => local.title === undefined;\n  const colorClass = (): string | undefined =>\n    typeof local.color === \"string\" && COLOR_TOKENS.includes(local.color) ? `smwb-icon_color-${local.color}` : undefined;\n  const styleObject = (): JSX.CSSProperties => (typeof local.style === \"object\" && local.style ? local.style : {});\n  const cssSize = (): string => (typeof local.size === \"number\" ? `${local.size}px` : local.size);\n  const strokeWidth = (): number => Math.round(Math.min(3, Math.max(1, local.weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"icon\"\n      data-icon-source={mode()}\n      role={decorative() ? undefined : \"img\"}\n      aria-hidden={decorative() ? true : undefined}\n      aria-label={local.title}\n      title={local.title}\n      style={{\n        ...styleObject(),\n        ...(mode() === \"google\"\n          ? {\n              \"font-variation-settings\": `'FILL' ${local.fill}, 'wght' ${local.weight}, 'GRAD' ${local.grade}, 'opsz' 48`,\n            }\n          : null),\n      }}\n      class={cn(\"smwb-icon__wrapper\", colorClass(), local.class)}\n    >\n      {mode() === \"google\" ? (\n        <span class=\"material-symbols-outlined\" style={{ \"font-size\": cssSize() }}>\n          {glyph()}\n        </span>\n      ) : (\n        <svg\n          class=\"smwb-icon__svg\"\n          viewBox={definition()?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize(), height: cssSize() }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width={strokeWidth()}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          innerHTML={definition()?.body ?? \"\"}\n        />\n      )}\n    </span>\n  );\n}\n\nexport default Icon;\n"],"names":["COLOR_TOKENS","warned","Set","warnMissing","name","getIconConfig","warnOnMissing","has","add","console","warn","Icon","props","merged","mergeProps","weight","fill","size","grade","color","local","rest","splitProps","context","useContext","IconContext","version","createIconVersion","source","definition","getIcon","glyph","mode","resolved","decorative","title","undefined","colorClass","includes","styleObject","style","cssSize","strokeWidth","Math","round","min","max","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","role","cn","class","_$insert","_c$","_$memo","_el$2","_tmpl$2","_$effect","_$p","_$setStyleProperty","_el$3","_tmpl$3","_p$","_v$","viewBox","_v$2","_v$3","_v$4","_v$5","body","e","_$setAttribute","t","a","o","i","innerHTML"],"mappings":"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"}
+{"version":3,"file":"icon.js","sources":["../../../../src/components/base/icon/icon.tsx"],"sourcesContent":["/* eslint-disable solid/no-innerhtml -- icon bodies are static SVG geometry\n   generated from icons/data into src/icons/svg; nothing user-supplied reaches\n   this attribute, and an <svg> assembled from JSX children cannot be handed to\n   a consumer as plain data. */\nimport { type JSX, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\nimport { getIcon } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport type { IconDefinition, IconSource } from \"../../../icons/types\";\nimport { createIconVersion, IconContext } from \"./iconProvider\";\n\nexport type IconColor = \"inherit\" | \"primary\" | \"secondary\" | \"error\" | \"success\" | \"warning\" | \"info\" | \"disabled\";\n\nconst COLOR_TOKENS: ReadonlyArray<string> = [\n  \"primary\",\n  \"secondary\",\n  \"error\",\n  \"success\",\n  \"warning\",\n  \"info\",\n  \"disabled\",\n];\n\nconst warned = new Set<string>();\n\nfunction warnMissing(name: string): void {\n  if (!getIconConfig().warnOnMissing || warned.has(name)) return;\n  warned.add(name);\n  console.warn(\n    `[smwb] Icon \"${name}\" is not registered. Register it (import { ${name} } from \"@smwb/ui-solid/icons\") ` +\n      `or use source=\"auto\" to fall back to Material Symbols.`\n  );\n}\n\nexport interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name — the Google Material Symbols name, e.g. `\"arrow_right_alt\"`.\n   * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as\n   * do an icon's aliases.\n   *\n   * An {@link IconDefinition} may be passed instead, which skips the registry\n   * entirely and is the most bundle-friendly form:\n   *\n   * ```tsx\n   * import { arrowRightAlt } from \"@smwb/ui-solid/icons\";\n   * <Icon name={arrowRightAlt} />\n   * ```\n   */\n  name: string | IconDefinition;\n  /**\n   * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the\n   * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.\n   */\n  weight?: number;\n  /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\n  /** Material Symbols GRAD axis. Not used by the smwb SVG set. */\n  grade?: number;\n  /**\n   * Semantic color token; `inherit` (default) keeps the text color. Any string\n   * is accepted for backward compatibility, but only known {@link IconColor}\n   * tokens emit a color class.\n   */\n  color?: IconColor | (string & {});\n  /**\n   * Accessible name, also shown as a tooltip. A non-empty `title`,\n   * `aria-label` or `aria-labelledby` names the icon: it is exposed as\n   * `role=\"img\"`, or with the `role` you pass. Without any of them the icon is\n   * decorative and `aria-hidden`.\n   */\n  title?: string;\n  /** Overrides the icon source for this icon only. See {@link IconSource}. */\n  source?: IconSource;\n  /** Test id of the root `<span>`; `icon` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLSpanElement>;\n}\n\nexport function Icon(props: IconProps): JSX.Element {\n  const merged = mergeProps(\n    { weight: 400, fill: 0 as 0 | 1, size: 20 as number | string, grade: 100, color: \"inherit\" as IconProps[\"color\"] },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"weight\",\n    \"fill\",\n    \"size\",\n    \"grade\",\n    \"name\",\n    \"color\",\n    \"title\",\n    \"style\",\n    \"source\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const context = useContext(IconContext);\n  // Re-reads the registry when icons are registered late (lazy chunks, HMR).\n  const version = createIconVersion();\n\n  const source = (): IconSource => {\n    version();\n    return local.source ?? context?.source ?? getIconConfig().source;\n  };\n  const definition = (): IconDefinition | undefined => {\n    version();\n    return typeof local.name === \"object\" ? local.name : getIcon(local.name);\n  };\n  const glyph = (): string => (typeof local.name === \"string\" ? local.name : local.name.name);\n\n  const mode = (): \"google\" | \"smwb\" | \"missing\" => {\n    const resolved = source();\n    if (resolved === \"google\") return \"google\";\n    if (definition()) return \"smwb\";\n    if (resolved === \"smwb\") {\n      warnMissing(glyph());\n      return \"missing\";\n    }\n    return \"google\";\n  };\n\n  const decorative = (): boolean => !(local.title || rest[\"aria-label\"] || rest[\"aria-labelledby\"]);\n  const colorClass = (): string | undefined =>\n    typeof local.color === \"string\" && COLOR_TOKENS.includes(local.color) ? `smwb-icon_color-${local.color}` : undefined;\n  const cssSize = (): string => (typeof local.size === \"number\" ? `${local.size}px` : local.size);\n  const strokeWidth = (): number => Math.round(Math.min(3, Math.max(1, local.weight / 200)) * 100) / 100;\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"icon\"}\n      data-icon-source={mode()}\n      // An unnamed icon is hidden over the caller's aria-hidden. A named one is\n      // an image unless the caller gives it a role, and a title names it over\n      // the caller's aria-label.\n      role={rest.role ?? (decorative() ? undefined : \"img\")}\n      aria-hidden={decorative() ? true : undefined}\n      aria-label={local.title || rest[\"aria-label\"]}\n      title={local.title}\n      style={mergeStyle(local.style, {\n        \"font-variation-settings\":\n          mode() === \"google\"\n            ? `'FILL' ${local.fill}, 'wght' ${local.weight}, 'GRAD' ${local.grade}, 'opsz' 48`\n            : undefined,\n      })}\n      class={cn(\"smwb-icon__wrapper\", colorClass(), local.class)}\n    >\n      {mode() === \"google\" ? (\n        <span class=\"material-symbols-outlined\" style={{ \"font-size\": cssSize() }}>\n          {glyph()}\n        </span>\n      ) : (\n        <svg\n          class=\"smwb-icon__svg\"\n          viewBox={definition()?.viewBox ?? \"0 0 24 24\"}\n          style={{ width: cssSize(), height: cssSize() }}\n          fill=\"none\"\n          stroke=\"currentColor\"\n          stroke-width={strokeWidth()}\n          stroke-linecap=\"round\"\n          stroke-linejoin=\"round\"\n          aria-hidden=\"true\"\n          innerHTML={definition()?.body ?? \"\"}\n        />\n      )}\n    </span>\n  );\n}\n\nexport default Icon;\n"],"names":["COLOR_TOKENS","warned","Set","warnMissing","name","getIconConfig","warnOnMissing","has","add","console","warn","Icon","props","merged","mergeProps","weight","fill","size","grade","color","local","rest","splitProps","context","useContext","IconContext","version","createIconVersion","source","definition","getIcon","glyph","mode","resolved","decorative","title","colorClass","includes","undefined","cssSize","strokeWidth","Math","round","min","max","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","role","style","mergeStyle","cn","class","_$insert","_c$","_$memo","_el$2","_tmpl$2","_$effect","_$p","_$setStyleProperty","_el$3","_tmpl$3","_p$","_v$","viewBox","_v$2","_v$3","_v$4","_v$5","body","e","_$setAttribute","t","a","o","i","innerHTML"],"mappings":"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"}

package/dist/components/base/ripple/ripple.d.ts

@@ -10,12 +10,15 @@ export interface RippleClasses {
 export interface RippleProps extends JSX.HTMLAttributes<HTMLSpanElement> {
     /** Receives the imperative API once on mount. */
     actionRef?: (actions: RippleActionsRef) => void;
+    /** Extra classes: `ripple` for the root, `child` for each ripple. */
     classes?: RippleClasses;
     center?: boolean | undefined;
     /** Ripple lifetime in ms. */
     duration?: number;
     /** Ripple color (any CSS color). Defaults to inherited currentColor. */
     color?: string | undefined;
+    /** Test id of the root `<span>`; `ripple` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLSpanElement>;
 }
 /**

package/dist/components/base/ripple/ripple.js

@@ -1,46 +1,58 @@
-import { use as P, spread as b, mergeProps as z, insert as $, createComponent as k, effect as C, className as S, setStyleProperty as c, template as T } from "solid-js/web";
+import { use as z, spread as C, mergeProps as S, insert as T, createComponent as $, effect as k, className as X, setStyleProperty as l, template as Y } from "solid-js/web";
 import '../../../assets/styles/less/components/ripple/ripple.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import { mergeProps as X, splitProps as Y, createSignal as B, For as F } from "solid-js";
-import f from "clsx";
-import { mergeRefs as K } from "../../../primitives/mergeRefs.js";
-var g = /* @__PURE__ */ T("<span>");
-function E(u) {
-  const v = X({
+import { mergeProps as B, splitProps as E, createSignal as F, onCleanup as K, For as M } from "solid-js";
+import g from "clsx";
+import { mergeRefs as N } from "../../../primitives/mergeRefs.js";
+var v = /* @__PURE__ */ Y("<span>");
+function I(x) {
+  const w = B({
     duration: 600
-  }, u), [o, x] = Y(v, ["actionRef", "class", "classes", "center", "duration", "color", "ref", "style"]), [y, m] = B([]);
-  let w = 0;
-  const R = (i) => {
-    const t = i.currentTarget.getBoundingClientRect(), r = Math.max(t.width, t.height), e = r / 2;
-    let s, n;
-    o.center ? (s = t.width > t.height ? 0 : t.width / 2 - e, n = t.height > t.width ? 0 : t.height / 2 - e) : (s = i.clientX - t.left - e, n = i.clientY - t.top - e);
-    const l = w++;
-    m((a) => [...a, {
-      key: l,
+  }, x), [i, y] = E(w, ["actionRef", "class", "classes", "center", "duration", "color", "ref", "data-testid"]), [R, p] = F([]);
+  let P = 0;
+  const d = /* @__PURE__ */ new Set();
+  let f = !1;
+  K(() => {
+    f = !0, d.forEach((r) => clearTimeout(r)), d.clear();
+  });
+  const b = (r) => {
+    if (f) return;
+    const t = r.currentTarget.getBoundingClientRect(), o = Math.max(t.width, t.height), e = o / 2;
+    let s, a;
+    i.center ? (s = t.width > t.height ? 0 : t.width / 2 - e, a = t.height > t.width ? 0 : t.height / 2 - e) : (s = r.clientX - t.left - e, a = r.clientY - t.top - e);
+    const m = P++;
+    p((n) => [...n, {
+      key: m,
       x: s,
-      y: n,
-      size: r
-    }]), setTimeout(() => m((a) => a.slice(1)), o.duration);
+      y: a,
+      size: o
+    }]);
+    const c = setTimeout(() => {
+      d.delete(c), p((n) => n.slice(1));
+    }, i.duration);
+    d.add(c);
   };
-  return o.actionRef?.({
-    onRipple: R
+  return i.actionRef?.({
+    onRipple: b
   }), (() => {
-    var i = g(), d = K(o.ref);
-    return typeof d == "function" && P(d, i), b(i, z(x, {
+    var r = v(), u = N(i.ref);
+    return typeof u == "function" && z(u, r), C(r, S(y, {
       get class() {
-        return f("smwb-ripple", o.class, o.classes?.ripple);
+        return g("smwb-ripple", i.class, i.classes?.ripple);
+      },
+      get "data-testid"() {
+        return i["data-testid"] ?? "ripple";
       },
-      "data-testid": "ripple",
       "aria-hidden": "true"
-    }), !1, !0), $(i, k(F, {
+    }), !1, !0), T(r, $(M, {
       get each() {
-        return y();
+        return R();
       },
       children: (t) => (() => {
-        var r = g();
-        return C((e) => {
-          var s = f("smwb-ripple__child", o.classes?.child), n = `${t.x}px`, l = `${t.y}px`, a = `${t.size}px`, p = `${t.size}px`, h = o.color;
-          return s !== e.e && S(r, e.e = s), n !== e.t && c(r, "left", e.t = n), l !== e.a && c(r, "top", e.a = l), a !== e.o && c(r, "width", e.o = a), p !== e.i && c(r, "height", e.i = p), h !== e.n && c(r, "background-color", e.n = h), e;
+        var o = v();
+        return k((e) => {
+          var s = g("smwb-ripple__child", i.classes?.child), a = `${t.x}px`, m = `${t.y}px`, c = `${t.size}px`, n = `${t.size}px`, h = i.color;
+          return s !== e.e && X(o, e.e = s), a !== e.t && l(o, "left", e.t = a), m !== e.a && l(o, "top", e.a = m), c !== e.o && l(o, "width", e.o = c), n !== e.i && l(o, "height", e.i = n), h !== e.n && l(o, "background-color", e.n = h), e;
         }, {
           e: void 0,
           t: void 0,
@@ -48,12 +60,12 @@ function E(u) {
           o: void 0,
           i: void 0,
           n: void 0
-        }), r;
+        }), o;
       })()
-    })), i;
+    })), r;
   })();
 }
 export {
-  E as Ripple
+  I as Ripple
 };
 //# sourceMappingURL=ripple.js.map

package/dist/components/base/ripple/ripple.js.map

@@ -1 +1 @@
-{"version":3,"file":"ripple.js","sources":["../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import { type JSX, For, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface RippleActionsRef {\n  onRipple: (event: MouseEvent) => void;\n}\n\nexport interface RippleClasses {\n  ripple?: string;\n  child?: string;\n}\n\nexport interface RippleProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /** Receives the imperative API once on mount. */\n  actionRef?: (actions: RippleActionsRef) => void;\n  classes?: RippleClasses;\n  center?: boolean | undefined;\n  /** Ripple lifetime in ms. */\n  duration?: number;\n  /** Ripple color (any CSS color). Defaults to inherited currentColor. */\n  color?: string | undefined;\n  ref?: Ref<HTMLSpanElement>;\n}\n\ninterface RippleEntry {\n  key: number;\n  x: number;\n  y: number;\n  size: number;\n}\n\n/**\n * ⚠️ For this effect to work, the parent element must have CSS\n * `position: relative;`.\n */\nexport function Ripple(props: RippleProps): JSX.Element {\n  const merged = mergeProps({ duration: 600 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"actionRef\",\n    \"class\",\n    \"classes\",\n    \"center\",\n    \"duration\",\n    \"color\",\n    \"ref\",\n    \"style\",\n  ]);\n\n  const [ripples, setRipples] = createSignal<RippleEntry[]>([]);\n  let nextKey = 0;\n\n  const onRipple = (event: MouseEvent): void => {\n    const target = event.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const diameter = Math.max(rect.width, rect.height);\n    const radius = diameter / 2;\n\n    let coordX: number;\n    let coordY: number;\n    if (local.center) {\n      coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;\n      coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;\n    } else {\n      coordX = event.clientX - rect.left - radius;\n      coordY = event.clientY - rect.top - radius;\n    }\n\n    const key = nextKey++;\n    setRipples((prev) => [...prev, { key, x: coordX, y: coordY, size: diameter }]);\n    setTimeout(() => setRipples((prev) => prev.slice(1)), local.duration);\n  };\n\n  local.actionRef?.({ onRipple });\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-ripple\", local.class, local.classes?.ripple)}\n      data-testid=\"ripple\"\n      aria-hidden=\"true\"\n    >\n      <For each={ripples()}>\n        {(ripple) => (\n          <span\n            class={cn(\"smwb-ripple__child\", local.classes?.child)}\n            style={{\n              left: `${ripple.x}px`,\n              top: `${ripple.y}px`,\n              width: `${ripple.size}px`,\n              height: `${ripple.size}px`,\n              \"background-color\": local.color,\n            }}\n          />\n        )}\n      </For>\n    </span>\n  );\n}\n\nexport default Ripple;\n"],"names":["Ripple","props","merged","mergeProps","duration","local","rest","splitProps","ripples","setRipples","createSignal","nextKey","onRipple","event","rect","currentTarget","getBoundingClientRect","diameter","Math","max","width","height","radius","coordX","coordY","center","clientX","left","clientY","top","key","prev","x","y","size","setTimeout","slice","actionRef","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","classes","ripple","_$insert","_$createComponent","For","each","children","_el$2","_$effect","_p$","_v$","child","_v$2","_v$3","_v$4","_v$5","_v$6","color","e","_$className","t","_$setStyleProperty","a","o","i","n","undefined"],"mappings":"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"}
+{"version":3,"file":"ripple.js","sources":["../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import { type JSX, For, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface RippleActionsRef {\n  onRipple: (event: MouseEvent) => void;\n}\n\nexport interface RippleClasses {\n  ripple?: string;\n  child?: string;\n}\n\nexport interface RippleProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /** Receives the imperative API once on mount. */\n  actionRef?: (actions: RippleActionsRef) => void;\n  /** Extra classes: `ripple` for the root, `child` for each ripple. */\n  classes?: RippleClasses;\n  center?: boolean | undefined;\n  /** Ripple lifetime in ms. */\n  duration?: number;\n  /** Ripple color (any CSS color). Defaults to inherited currentColor. */\n  color?: string | undefined;\n  /** Test id of the root `<span>`; `ripple` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLSpanElement>;\n}\n\ninterface RippleEntry {\n  key: number;\n  x: number;\n  y: number;\n  size: number;\n}\n\n/**\n * ⚠️ For this effect to work, the parent element must have CSS\n * `position: relative;`.\n */\nexport function Ripple(props: RippleProps): JSX.Element {\n  const merged = mergeProps({ duration: 600 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"actionRef\",\n    \"class\",\n    \"classes\",\n    \"center\",\n    \"duration\",\n    \"color\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [ripples, setRipples] = createSignal<RippleEntry[]>([]);\n  let nextKey = 0;\n  // Removal timers still pending. Disposal clears them, so none outlives the\n  // Ripple (in a test that ends first, it would fire after jsdom's teardown).\n  const timeouts = new Set<ReturnType<typeof setTimeout>>();\n  let disposed = false;\n  onCleanup(() => {\n    disposed = true;\n    timeouts.forEach((timeout) => clearTimeout(timeout));\n    timeouts.clear();\n  });\n\n  const onRipple = (event: MouseEvent): void => {\n    // A parent keeps these actions after a <Show> has dropped the Ripple; a late\n    // press then starts nothing, as in React, where the actionRef is cleared.\n    if (disposed) return;\n    const target = event.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const diameter = Math.max(rect.width, rect.height);\n    const radius = diameter / 2;\n\n    let coordX: number;\n    let coordY: number;\n    if (local.center) {\n      coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;\n      coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;\n    } else {\n      coordX = event.clientX - rect.left - radius;\n      coordY = event.clientY - rect.top - radius;\n    }\n\n    const key = nextKey++;\n    setRipples((prev) => [...prev, { key, x: coordX, y: coordY, size: diameter }]);\n    const timeout = setTimeout(() => {\n      timeouts.delete(timeout);\n      setRipples((prev) => prev.slice(1));\n    }, local.duration);\n    timeouts.add(timeout);\n  };\n\n  local.actionRef?.({ onRipple });\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-ripple\", local.class, local.classes?.ripple)}\n      data-testid={local[\"data-testid\"] ?? \"ripple\"}\n      aria-hidden=\"true\"\n    >\n      <For each={ripples()}>\n        {(ripple) => (\n          <span\n            class={cn(\"smwb-ripple__child\", local.classes?.child)}\n            style={{\n              left: `${ripple.x}px`,\n              top: `${ripple.y}px`,\n              width: `${ripple.size}px`,\n              height: `${ripple.size}px`,\n              \"background-color\": local.color,\n            }}\n          />\n        )}\n      </For>\n    </span>\n  );\n}\n\nexport default Ripple;\n"],"names":["Ripple","props","merged","mergeProps","duration","local","rest","splitProps","ripples","setRipples","createSignal","nextKey","timeouts","Set","disposed","onCleanup","forEach","timeout","clearTimeout","clear","onRipple","event","rect","currentTarget","getBoundingClientRect","diameter","Math","max","width","height","radius","coordX","coordY","center","clientX","left","clientY","top","key","prev","x","y","size","setTimeout","delete","slice","add","actionRef","_el$","_tmpl$","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","classes","ripple","_$insert","_$createComponent","For","each","children","_el$2","_$effect","_p$","_v$","child","_v$2","_v$3","_v$4","_v$5","_v$6","color","e","_$className","t","_$setStyleProperty","a","o","i","n","undefined"],"mappings":"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"}