@smwb/ui-solid 0.12.0 → 0.13.0

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

@@ -1,44 +1,56 @@
-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 { 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 A(u) {
-  const v = X({
+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 { 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 G(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 u = P++;
+    p((n) => [...n, {
+      key: u,
       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(), m = N(i.ref);
+    return typeof m == "function" && z(m, 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`, h = `${t.size}px`, p = 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), h !== e.i && c(r, "height", e.i = h), p !== e.n && c(r, "background-color", e.n = p), e;
+        var o = v();
+        return k((e) => {
+          var s = g("smwb-ripple__child", i.classes?.child), a = `${t.x}px`, u = `${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), u !== e.a && l(o, "top", e.a = u), 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,
@@ -46,12 +58,12 @@ function A(u) {
           o: void 0,
           i: void 0,
           n: void 0
-        }), r;
+        }), o;
       })()
-    })), i;
+    })), r;
   })();
 }
 export {
-  A as Ripple
+  G as Ripple
 };
 //# sourceMappingURL=ripple.js.map

package/dist/headless/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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"}

package/dist/headless/components/dataDisplay/avatar/avatar.js

@@ -1,18 +1,18 @@
-import { use as y, spread as f, mergeProps as v, insert as a, createComponent as u, effect as A, setAttribute as S, template as m } from "solid-js/web";
-import { mergeProps as z, splitProps as x, createSignal as C, Show as h, children as L } from "solid-js";
+import { use as z, spread as f, mergeProps as v, insert as s, createComponent as u, effect as k, setAttribute as A, template as m } from "solid-js/web";
+import { mergeProps as y, splitProps as x, createSignal as C, Show as h, children as L } from "solid-js";
 import _ from "clsx";
 import { mergeRefs as P } from "../../../primitives/mergeRefs.js";
 import { callHandler as E } from "../../../primitives/callHandler.js";
-var F = /* @__PURE__ */ m("<img>"), k = /* @__PURE__ */ m("<div>"), I = /* @__PURE__ */ m("<span class=smwb-avatar__fallback role=img>"), M = /* @__PURE__ */ m("<span class=smwb-avatar-group__hidden hidden>");
+import { mergeStyle as F } from "../../../primitives/mergeStyle.js";
+var I = /* @__PURE__ */ m("<img>"), S = /* @__PURE__ */ m("<div>"), M = /* @__PURE__ */ m("<span class=smwb-avatar__fallback role=img>"), B = /* @__PURE__ */ m("<span class=smwb-avatar-group__hidden hidden>");
 const w = (l) => typeof l == "string";
-function j(l) {
-  const p = z({
+function G(l) {
+  const g = y({
     size: "medium",
     variant: "circular"
-  }, l), [r, g] = x(p, ["class", "src", "alt", "size", "variant", "color", "style", "imgProps", "children", "ref"]), [d, n] = C(!1), i = () => !!r.src && !d(), c = () => {
+  }, l), [r, p] = x(g, ["class", "src", "alt", "size", "variant", "color", "style", "imgProps", "children", "ref", "data-testid"]), [d, n] = C(!1), i = () => !!r.src && !d(), c = () => {
     const e = r.size;
-    return {
-      ...typeof r.style == "object" && r.style ? r.style : {},
+    return F(r.style, {
       ...w(e) ? {} : {
         width: `${e}px`,
         height: `${e}px`,
@@ -21,30 +21,32 @@ function j(l) {
       ...r.color && !i() ? {
         "background-color": r.color
       } : {}
-    };
+    });
   };
   return (() => {
-    var e = k(), o = P(r.ref);
-    return typeof o == "function" && y(o, e), f(e, v(g, {
-      "data-testid": "avatar",
+    var e = S(), o = P(r.ref);
+    return typeof o == "function" && z(o, e), f(e, v(p, {
+      get "data-testid"() {
+        return r["data-testid"] ?? "avatar";
+      },
       get class() {
         return _("smwb-avatar", `smwb-avatar_${r.variant}`, w(r.size) ? `smwb-avatar_${r.size}` : void 0, r.class);
       },
       get style() {
         return c();
       }
-    }), !1, !0), a(e, u(h, {
+    }), !1, !0), s(e, u(h, {
       get when() {
         return i();
       },
       get fallback() {
         return (() => {
-          var t = I();
-          return a(t, () => r.children), A(() => S(t, "aria-label", r.alt)), t;
+          var t = M();
+          return s(t, () => r.children), k(() => A(t, "aria-label", r.alt)), t;
         })();
       },
       get children() {
-        var t = F();
+        var t = I();
         return f(t, v(() => r.imgProps ?? {}, {
           get class() {
             return _("smwb-avatar__img", r.imgProps?.class);
@@ -55,32 +57,34 @@ function j(l) {
           get alt() {
             return r.alt;
           },
-          onError: (s) => {
-            n(!0), E(r.imgProps?.onError, s);
+          onError: (a) => {
+            n(!0), E(r.imgProps?.onError, a);
           }
         }), !1, !1), t;
       }
     })), e;
   })();
 }
-function D(l) {
-  const p = z({
+function K(l) {
+  const g = y({
     max: 5,
-    surplusAriaLabel: (s) => `${s} more`
-  }, l), [r, g] = x(p, ["class", "max", "total", "onSurplusClick", "surplusAriaLabel", "size", "children", "ref"]), d = L(() => r.children), n = () => d.toArray(), i = () => r.total ?? n().length, c = () => Math.max(r.max, 1), e = () => n().slice(0, c()), o = () => n().slice(c()), t = () => i() - e().length;
+    surplusAriaLabel: (a) => `${a} more`
+  }, l), [r, p] = x(g, ["class", "max", "total", "onSurplusClick", "surplusAriaLabel", "size", "children", "ref", "data-testid"]), d = L(() => r.children), n = () => d.toArray(), i = () => r.total ?? n().length, c = () => Math.max(r.max, 1), e = () => n().slice(0, c()), o = () => n().slice(c()), t = () => i() - e().length;
   return (() => {
-    var s = k(), $ = P(r.ref);
-    return typeof $ == "function" && y($, s), f(s, v(g, {
-      "data-testid": "avatar-group",
+    var a = S(), $ = P(r.ref);
+    return typeof $ == "function" && z($, a), f(a, v(p, {
+      get "data-testid"() {
+        return r["data-testid"] ?? "avatar-group";
+      },
       get class() {
         return _("smwb-avatar-group", r.class);
       }
-    }), !1, !0), a(s, () => e(), null), a(s, u(h, {
+    }), !1, !0), s(a, () => e(), null), s(a, u(h, {
       get when() {
         return t() > 0;
       },
       get children() {
-        return u(j, {
+        return u(G, {
           class: "smwb-avatar-group__surplus",
           get size() {
             return r.size ?? "medium";
@@ -101,19 +105,19 @@ function D(l) {
           }
         });
       }
-    }), null), a(s, u(h, {
+    }), null), s(a, u(h, {
       get when() {
         return o().length > 0;
       },
       get children() {
-        var b = M();
-        return a(b, () => o()), b;
+        var b = B();
+        return s(b, () => o()), b;
       }
-    }), null), s;
+    }), null), a;
   })();
 }
 export {
-  j as Avatar,
-  D as AvatarGroup
+  G as Avatar,
+  K as AvatarGroup
 };
 //# sourceMappingURL=avatar.js.map

package/dist/headless/components/dataDisplay/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  Show,\n  children as resolveChildren,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: JSX.ImgHTMLAttributes<HTMLImageElement>;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport function Avatar(props: ParentProps<AvatarProps>): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as AvatarSize | number, variant: \"circular\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"alt\",\n    \"size\",\n    \"variant\",\n    \"color\",\n    \"style\",\n    \"imgProps\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const [imgFailed, setImgFailed] = createSignal(false);\n  const showImage = (): boolean => Boolean(local.src) && !imgFailed();\n\n  const inlineStyle = (): JSX.CSSProperties => {\n    const size = local.size;\n    return {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      ...(isPresetSize(size) ? {} : { width: `${size}px`, height: `${size}px`, \"font-size\": `${size / 2.5}px` }),\n      ...(local.color && !showImage() ? { \"background-color\": local.color } : {}),\n    };\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"avatar\"\n      class={cn(\n        \"smwb-avatar\",\n        `smwb-avatar_${local.variant}`,\n        isPresetSize(local.size) ? `smwb-avatar_${local.size}` : undefined,\n        local.class\n      )}\n      style={inlineStyle()}\n    >\n      <Show\n        when={showImage()}\n        fallback={\n          <span class=\"smwb-avatar__fallback\" role=\"img\" aria-label={local.alt}>\n            {local.children}\n          </span>\n        }\n      >\n        <img\n          {...(local.imgProps ?? {})}\n          class={cn(\"smwb-avatar__img\", local.imgProps?.class)}\n          src={local.src}\n          alt={local.alt}\n          onError={(event) => {\n            setImgFailed(true);\n            callHandler(local.imgProps?.onError, event);\n          }}\n        />\n      </Show>\n    </div>\n  );\n}\n\nexport interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n  /** Accessible name of the \"+N\" surplus chip. */\n  surplusAriaLabel?: (count: number) => string;\n  /** Size of the \"+N\" surplus chip: match the avatars in the group. */\n  size?: AvatarSize | number;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AvatarGroup(props: ParentProps<AvatarGroupProps>): JSX.Element {\n  const merged = mergeProps(\n    { max: 5, surplusAriaLabel: (count: number) => `${count} more` },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"max\",\n    \"total\",\n    \"onSurplusClick\",\n    \"surplusAriaLabel\",\n    \"size\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const resolved = resolveChildren(() => local.children);\n  const items = (): unknown[] => resolved.toArray();\n  const totalCount = (): number => local.total ?? items().length;\n  const clampedMax = (): number => Math.max(local.max, 1);\n  const visible = (): unknown[] => items().slice(0, clampedMax());\n  const hidden = (): unknown[] => items().slice(clampedMax());\n  const surplus = (): number => totalCount() - visible().length;\n\n  // In order, the first avatar first; the \"+N\" chip ends the row.\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} data-testid=\"avatar-group\" class={cn(\"smwb-avatar-group\", local.class)}>\n      {visible() as JSX.Element}\n      <Show when={surplus() > 0}>\n        <Avatar\n          class=\"smwb-avatar-group__surplus\"\n          size={local.size ?? \"medium\"}\n          alt={local.surplusAriaLabel(surplus())}\n          onClick={local.onSurplusClick}\n          style={local.onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus()}`}\n        </Avatar>\n      </Show>\n      {/* Avatars past max are created with the rest (the children resolve at\n          once), so they are rendered, hidden: a server that left them out would\n          leave the browser without nodes to hydrate them from. */}\n      <Show when={hidden().length > 0}>\n        <span class=\"smwb-avatar-group__hidden\" hidden>\n          {hidden() as JSX.Element}\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Avatar;\n"],"names":["isPresetSize","size","Avatar","props","merged","mergeProps","variant","local","rest","splitProps","imgFailed","setImgFailed","createSignal","showImage","Boolean","src","inlineStyle","style","width","height","color","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","undefined","class","_$insert","_$createComponent","Show","when","fallback","_el$3","_tmpl$3","children","_$effect","_$setAttribute","alt","_el$2","_tmpl$","imgProps","event","callHandler","onError","AvatarGroup","max","surplusAriaLabel","count","resolved","resolveChildren","items","toArray","totalCount","total","length","clampedMax","Math","visible","slice","hidden","surplus","_el$4","_ref$2","onClick","onSurplusClick","cursor","_el$5","_tmpl$4"],"mappings":"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"}
+{"version":3,"file":"avatar.js","sources":["../../../../../src/components/dataDisplay/avatar/avatar.tsx"],"sourcesContent":["import {\n  type JSX,\n  type ParentProps,\n  Show,\n  children as resolveChildren,\n  createSignal,\n  mergeProps,\n  splitProps,\n} from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport type AvatarSize = \"small\" | \"medium\" | \"large\";\n\nexport interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Image source. Falls back to children (initials / icon) on error or when absent. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Preset size or an explicit pixel value. */\n  size?: AvatarSize | number;\n  variant?: \"circular\" | \"rounded\" | \"square\";\n  /** Background color for the fallback (initials / icon). */\n  color?: string;\n  /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */\n  imgProps?: JSX.ImgHTMLAttributes<HTMLImageElement>;\n  /** Test id of the root `<div>`; `avatar` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nconst isPresetSize = (size: AvatarSize | number): size is AvatarSize => typeof size === \"string\";\n\nexport function Avatar(props: ParentProps<AvatarProps>): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as AvatarSize | number, variant: \"circular\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"src\",\n    \"alt\",\n    \"size\",\n    \"variant\",\n    \"color\",\n    \"style\",\n    \"imgProps\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [imgFailed, setImgFailed] = createSignal(false);\n  const showImage = (): boolean => Boolean(local.src) && !imgFailed();\n\n  const inlineStyle = (): JSX.CSSProperties | string | undefined => {\n    const size = local.size;\n    return mergeStyle(local.style, {\n      ...(isPresetSize(size) ? {} : { width: `${size}px`, height: `${size}px`, \"font-size\": `${size / 2.5}px` }),\n      ...(local.color && !showImage() ? { \"background-color\": local.color } : {}),\n    });\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"avatar\"}\n      class={cn(\n        \"smwb-avatar\",\n        `smwb-avatar_${local.variant}`,\n        isPresetSize(local.size) ? `smwb-avatar_${local.size}` : undefined,\n        local.class\n      )}\n      style={inlineStyle()}\n    >\n      <Show\n        when={showImage()}\n        fallback={\n          <span class=\"smwb-avatar__fallback\" role=\"img\" aria-label={local.alt}>\n            {local.children}\n          </span>\n        }\n      >\n        <img\n          {...(local.imgProps ?? {})}\n          class={cn(\"smwb-avatar__img\", local.imgProps?.class)}\n          src={local.src}\n          alt={local.alt}\n          onError={(event) => {\n            setImgFailed(true);\n            callHandler(local.imgProps?.onError, event);\n          }}\n        />\n      </Show>\n    </div>\n  );\n}\n\nexport interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /** Maximum avatars to show before collapsing the rest into a \"+N\" surplus. */\n  max?: number;\n  /** Override the total count used for the surplus label (defaults to children count). */\n  total?: number;\n  /** Click handler for the \"+N\" surplus chip. */\n  onSurplusClick?: () => void;\n  /** Accessible name of the \"+N\" surplus chip. */\n  surplusAriaLabel?: (count: number) => string;\n  /** Size of the \"+N\" surplus chip: match the avatars in the group. */\n  size?: AvatarSize | number;\n  /** Test id of the root `<div>`; `avatar-group` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AvatarGroup(props: ParentProps<AvatarGroupProps>): JSX.Element {\n  const merged = mergeProps(\n    { max: 5, surplusAriaLabel: (count: number) => `${count} more` },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"max\",\n    \"total\",\n    \"onSurplusClick\",\n    \"surplusAriaLabel\",\n    \"size\",\n    \"children\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const resolved = resolveChildren(() => local.children);\n  const items = (): unknown[] => resolved.toArray();\n  const totalCount = (): number => local.total ?? items().length;\n  const clampedMax = (): number => Math.max(local.max, 1);\n  const visible = (): unknown[] => items().slice(0, clampedMax());\n  const hidden = (): unknown[] => items().slice(clampedMax());\n  const surplus = (): number => totalCount() - visible().length;\n\n  // In order, the first avatar first; the \"+N\" chip ends the row.\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"avatar-group\"}\n      class={cn(\"smwb-avatar-group\", local.class)}\n    >\n      {visible() as JSX.Element}\n      <Show when={surplus() > 0}>\n        <Avatar\n          class=\"smwb-avatar-group__surplus\"\n          size={local.size ?? \"medium\"}\n          alt={local.surplusAriaLabel(surplus())}\n          onClick={local.onSurplusClick}\n          style={local.onSurplusClick ? { cursor: \"pointer\" } : undefined}\n        >\n          {`+${surplus()}`}\n        </Avatar>\n      </Show>\n      {/* Avatars past max are created with the rest (the children resolve at\n          once), so they are rendered, hidden: a server that left them out would\n          leave the browser without nodes to hydrate them from. */}\n      <Show when={hidden().length > 0}>\n        <span class=\"smwb-avatar-group__hidden\" hidden>\n          {hidden() as JSX.Element}\n        </span>\n      </Show>\n    </div>\n  );\n}\n\nexport default Avatar;\n"],"names":["isPresetSize","size","Avatar","props","merged","mergeProps","variant","local","rest","splitProps","imgFailed","setImgFailed","createSignal","showImage","Boolean","src","inlineStyle","mergeStyle","style","width","height","color","_el$","_tmpl$2","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","undefined","class","_$insert","_$createComponent","Show","when","fallback","_el$3","_tmpl$3","children","_$effect","_$setAttribute","alt","_el$2","_tmpl$","imgProps","event","callHandler","onError","AvatarGroup","max","surplusAriaLabel","count","resolved","resolveChildren","items","toArray","totalCount","total","length","clampedMax","Math","visible","slice","hidden","surplus","_el$4","_ref$2","onClick","onSurplusClick","cursor","_el$5","_tmpl$4"],"mappings":"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"}

package/dist/headless/components/dataDisplay/card/card.js

@@ -1,58 +1,71 @@
-import { use as v, spread as g, mergeProps as _, memo as b, insert as n, createComponent as d, template as l } from "solid-js/web";
-import { mergeProps as w, splitProps as h, children as $, Show as s } from "solid-js";
-import k from "clsx";
-import { mergeRefs as y } from "../../../primitives/mergeRefs.js";
-import { callHandler as c } from "../../../primitives/callHandler.js";
-var C = /* @__PURE__ */ l("<div class=smwb-card__title>"), D = /* @__PURE__ */ l("<div class=smwb-card__footer>"), K = /* @__PURE__ */ l("<div>");
-function S(m) {
-  const u = w({
+import { use as f, spread as u, mergeProps as p, memo as b, insert as o, createComponent as g, template as d } from "solid-js/web";
+import { mergeProps as y, splitProps as D, children as P, Show as _ } from "solid-js";
+import x from "clsx";
+import { mergeRefs as K } from "../../../primitives/mergeRefs.js";
+import { callHandler as a } from "../../../primitives/callHandler.js";
+import { isOwnClick as E } from "../../../utils/ownClick.js";
+import { splitControlProps as H } from "../../../utils/controlProps.js";
+var O = /* @__PURE__ */ d("<div class=smwb-card__title>"), R = /* @__PURE__ */ d("<div class=smwb-card__footer>"), S = /* @__PURE__ */ d("<div><div>");
+function I(v) {
+  const C = y({
     variant: "elevated"
-  }, m), [e, f] = h(u, ["class", "variant", "children", "disabled", "title", "footer", "onClick", "onKeyDown", "ref"]), a = $(() => e.footer), t = () => !!e.onClick && !e.disabled, p = (r) => {
-    c(e.onKeyDown, r), t() && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), c(e.onClick, r));
+  }, v), [e, w] = D(C, ["class", "variant", "children", "disabled", "title", "footer", "onClick", "onKeyDown", "ref", "data-testid"]), s = P(() => e.footer), n = () => !!e.onClick && !e.disabled, [c, k] = H(w, () => !!e.onClick);
+  let l;
+  const h = (r) => {
+    a(e.onKeyDown, r), !(!n() || r.target !== l) && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), a(e.onClick, r));
+  }, $ = (r) => {
+    E(r, l ?? null) && a(e.onClick, r);
   };
   return (() => {
-    var r = K(), i = y(e.ref);
-    return typeof i == "function" && v(i, r), g(r, _(f, {
-      "data-testid": "card",
+    var r = S(), i = r.firstChild, m = K(e.ref);
+    return typeof m == "function" && f(m, r), u(r, p(k, {
+      get "data-testid"() {
+        return e["data-testid"] ?? "card";
+      },
       get class() {
-        return k("smwb-card", `smwb-card_${e.variant}`, e.class, {
+        return x("smwb-card", `smwb-card_${e.variant}`, e.class, {
           card_disabled: e.disabled,
-          "smwb-card_interactive": t()
+          "smwb-card_interactive": n()
         });
       },
+      get "aria-disabled"() {
+        return b(() => !e.onClick)() && e.disabled || void 0;
+      },
+      get onClick() {
+        return n() ? $ : void 0;
+      },
+      onKeyDown: h
+    }), !1, !0), f((t) => l = t, i), u(i, p(c, {
+      class: "smwb-card__content",
       get role() {
-        return t() ? "button" : void 0;
+        return e.onClick ? "button" : void 0;
       },
       get tabindex() {
-        return t() ? 0 : void 0;
+        return c.tabindex ?? (n() ? 0 : void 0);
       },
       get "aria-disabled"() {
-        return e.disabled || void 0;
-      },
-      get onClick() {
-        return b(() => !!t())() ? e.onClick : void 0;
-      },
-      onKeyDown: p
-    }), !1, !0), n(r, d(s, {
+        return b(() => !!e.onClick)() && e.disabled || void 0;
+      }
+    }), !1, !0), o(i, g(_, {
       get when() {
         return e.title;
       },
       get children() {
-        var o = C();
-        return n(o, () => e.title), o;
+        var t = O();
+        return o(t, () => e.title), t;
       }
-    }), null), n(r, () => e.children, null), n(r, d(s, {
+    }), null), o(i, () => e.children, null), o(r, g(_, {
       get when() {
-        return a();
+        return s();
       },
       get children() {
-        var o = D();
-        return n(o, a), o;
+        var t = R();
+        return o(t, s), t;
       }
     }), null), r;
   })();
 }
 export {
-  S as Card
+  I as Card
 };
 //# sourceMappingURL=card.js.map

package/dist/headless/components/dataDisplay/card/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\n\nexport interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  disabled?: boolean;\n  title?: string;\n  /** Footer slot rendered after the content. */\n  footer?: JSX.Element;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Card(props: ParentProps<CardProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"elevated\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"children\",\n    \"disabled\",\n    \"title\",\n    \"footer\",\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n  ]);\n\n  // Read the footer once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const footer = children(() => local.footer);\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n\n  const handleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element });\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"card\"\n      class={cn(\"smwb-card\", `smwb-card_${local.variant}`, local.class, {\n        card_disabled: local.disabled,\n        \"smwb-card_interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? local.onClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <Show when={local.title}>\n        <div class=\"smwb-card__title\">{local.title}</div>\n      </Show>\n      {local.children}\n      <Show when={footer()}>\n        <div class=\"smwb-card__footer\">{footer()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Card;\n"],"names":["Card","props","merged","mergeProps","variant","local","rest","splitProps","footer","children","interactive","onClick","disabled","handleKeyDown","event","callHandler","onKeyDown","key","preventDefault","_el$","_tmpl$3","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","card_disabled","role","undefined","tabindex","_$memo","_$insert","_$createComponent","Show","when","title","_el$2","_tmpl$","_el$3","_tmpl$2"],"mappings":";;;;;;AAcO,SAASA,EAAKC,GAA4C;AAC/D,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,EAAA,GAAuBH,CAAK,GAC3D,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,SACA,WACA,YACA,YACA,SACA,UACA,WACA,aACA,KAAK,CACN,GAIKM,IAASC,EAAS,MAAMJ,EAAMG,MAAM,GACpCE,IAAcA,MAAe,CAAC,CAACL,EAAMM,WAAW,CAACN,EAAMO,UAEvDC,IAAkEC,CAAAA,MAAU;AAChFC,IAAAA,EAAYV,EAAMW,WAAWF,CAAK,GAC9BJ,QAAkBI,EAAMG,QAAQ,WAAWH,EAAMG,QAAQ,SAC3DH,EAAMI,eAAAA,GACNH,EAAYV,EAAMM,SAASG,CAAmF;AAAA,EAElH;AAEA,UAAA,MAAA;AAAA,QAAAK,IAAAC,EAAAA,GAAAC,IAGSC,EAAUjB,EAAMkB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBpB,GAAI;AAAA,MAAA,eAEI;AAAA,MAAM,IAAA,QAAA;AAAA,eACXqB,EAAG,aAAa,aAAatB,EAAMD,OAAO,IAAIC,EAAMuB,OAAO;AAAA,UAChEC,eAAexB,EAAMO;AAAAA,UACrB,yBAAyBF,EAAAA;AAAAA,QAAY,CACtC;AAAA,MAAC;AAAA,MAAA,IACFoB,OAAI;AAAA,eAAEpB,EAAAA,IAAgB,WAAWqB;AAAAA,MAAS;AAAA,MAAA,IAC1CC,WAAQ;AAAA,eAAEtB,EAAAA,IAAgB,IAAIqB;AAAAA,MAAS;AAAA,MAAA,IAAA,kBAAA;AAAA,eACxB1B,EAAMO,YAAYmB;AAAAA,MAAS;AAAA,MAAA,IAC1CpB,UAAO;AAAA,eAAEsB,EAAA,MAAA,CAAA,CAAAvB,GAAa,MAAGL,EAAMM,UAAUoB;AAAAA,MAAS;AAAA,MAAA,WACvClB;AAAAA,IAAAA,CAAa,GAAA,IAAA,EAAA,GAAAqB,EAAAf,GAAAgB,EAEvBC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEhC,EAAMiC;AAAAA,MAAK;AAAA,MAAA,IAAA7B,WAAA;AAAA,YAAA8B,IAAAC,EAAAA;AAAAN,eAAAA,EAAAK,GAAA,MACUlC,EAAMiC,KAAK,GAAAC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAL,EAAAf,GAAA,MAE3Cd,EAAMI,UAAQ,IAAA,GAAAyB,EAAAf,GAAAgB,EACdC,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE7B,EAAAA;AAAAA,MAAQ;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAgC,IAAAC,EAAAA;AAAAR,eAAAA,EAAAO,GACcjC,CAAM,GAAAiC;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAtB;AAAAA,EAAA,GAAA;AAI9C;"}
+{"version":3,"file":"card.js","sources":["../../../../../src/components/dataDisplay/card/card.tsx"],"sourcesContent":["import { type JSX, type ParentProps, Show, children, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { callHandler } from \"../../../primitives/callHandler\";\nimport { isOwnClick } from \"../../../utils/ownClick\";\nimport { splitControlProps } from \"../../../utils/controlProps\";\n\nexport interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event\n   * handlers go to the root too. With `onClick`, `role`, `tabindex`, `onFocus`, `onBlur` and the other `aria-*`\n   * attributes go to the card's button, `.smwb-card__content` (the title and the children), which is also the element\n   * to focus. Without `onClick` the card is not a control, and they stay on the root, which holds the footer too.\n   */\n  class?: string | undefined;\n  variant?: \"filled\" | \"elevated\" | \"outlined\";\n  /**\n   * Disables the card: it says `aria-disabled`, and neither clicks nor keys run `onClick`. With `onClick` the card is\n   * still a button, out of the tab order.\n   */\n  disabled?: boolean;\n  /**\n   * A heading drawn at the top of the card, not the `title` attribute. With `onClick` it is part of the card's button,\n   * and the button's name starts with it.\n   */\n  title?: string;\n  /**\n   * Makes the card interactive: its content (the title and the children) becomes a button, named by that content, with\n   * a focus ring around the whole card. The footer is not part of that button but its sibling, so the card's controls\n   * go there: a control in the children would sit inside the button, and its name would join the card's.\n   *\n   * Runs when the card is activated: a click on it, or Enter / Space while its button has focus. A click on a control\n   * (button, link, input, anything focusable), in the footer or the children, or in a portal opened from the card does\n   * not run it, and neither do Enter / Space pressed on such a control. Content that is not a control keeps its click\n   * from activating the card by calling `preventDefault()` on it.\n   */\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent> | undefined;\n  /**\n   * Footer slot rendered after the content. With `onClick` it sits beside the card's button, not inside it, so\n   * controls here keep their own names, clicks and keys; see `onClick`.\n   */\n  footer?: JSX.Element;\n  /** Test id of the root `<div>`; `card` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function Card(props: ParentProps<CardProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"elevated\" as const }, props);\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"variant\",\n    \"children\",\n    \"disabled\",\n    \"title\",\n    \"footer\",\n    \"onClick\",\n    \"onKeyDown\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  // Read the footer once: markup passed as a prop is created anew on every read,\n  // and during hydration a copy the server never rendered has no DOM node.\n  const footer = children(() => local.footer);\n  const interactive = (): boolean => !!local.onClick && !local.disabled;\n  // With onClick the card's content is its button, and what the card is to the\n  // keyboard and to assistive tech goes there. Without it the card is not a\n  // control: the caller's role and ARIA attributes stay on the root, around\n  // the footer too.\n  const [control, box] = splitControlProps(rest, () => !!local.onClick);\n  let content: HTMLDivElement | undefined;\n\n  // Keys pressed in the footer or on a control inside bubble up here too; only\n  // the keys of the card's button activate it. The caller's onKeyDown still\n  // sees them all.\n  const handleKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    callHandler(local.onKeyDown, event);\n    if (!interactive() || event.target !== content) return;\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      callHandler(local.onClick, event as unknown as MouseEvent & { currentTarget: HTMLDivElement; target: Element });\n    }\n  };\n\n  // A click on the card's button, or on what is not a control beside it (the\n  // footer's text, the padding), activates the card: not one on a control, nor\n  // one in a Portal rendered inside (Solid delivers it here, though it landed\n  // outside), nor one whose default a handler inside has prevented.\n  const handleClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (isOwnClick(event, content ?? null)) callHandler(local.onClick, event);\n  };\n\n  return (\n    <div\n      {...box}\n      ref={mergeRefs(local.ref)}\n      data-testid={local[\"data-testid\"] ?? \"card\"}\n      class={cn(\"smwb-card\", `smwb-card_${local.variant}`, local.class, {\n        card_disabled: local.disabled,\n        \"smwb-card_interactive\": interactive(),\n      })}\n      // A disabled card says so where the caller's ARIA attributes are: on its\n      // button with onClick, on the root without. Where it sets none\n      // (undefined), the caller's stay.\n      aria-disabled={(!local.onClick && local.disabled) || undefined}\n      onClick={interactive() ? handleClick : undefined}\n      onKeyDown={handleKeyDown}\n    >\n      <div\n        {...control}\n        ref={(el) => (content = el)}\n        class=\"smwb-card__content\"\n        // With onClick the content is the card's button, and a disabled card\n        // says so: these win over the caller's, and where the card sets none\n        // (undefined), the caller's stay. Its tabindex is a default: the\n        // caller's wins, e.g. for roving focus.\n        role={local.onClick ? \"button\" : undefined}\n        tabindex={control.tabindex ?? (interactive() ? 0 : undefined)}\n        aria-disabled={(!!local.onClick && local.disabled) || undefined}\n      >\n        <Show when={local.title}>\n          <div class=\"smwb-card__title\">{local.title}</div>\n        </Show>\n        {local.children}\n      </div>\n      {/* Beside the button, not in it: controls here keep their names and input. */}\n      <Show when={footer()}>\n        <div class=\"smwb-card__footer\">{footer()}</div>\n      </Show>\n    </div>\n  );\n}\n\nexport default Card;\n"],"names":["Card","props","merged","mergeProps","variant","local","rest","splitProps","footer","children","interactive","onClick","disabled","control","box","splitControlProps","content","handleKeyDown","event","callHandler","onKeyDown","target","key","preventDefault","handleClick","isOwnClick","_el$","_tmpl$3","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","cn","class","card_disabled","_$memo","undefined","el","role","tabindex","_$insert","_$createComponent","Show","when","title","_el$3","_tmpl$","_el$4","_tmpl$2"],"mappings":"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"}