@smwb/ui-solid 0.12.1 → 0.13.0

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":";;;;;;;AAsCO,SAASA,EAAOC,GAAiC;AACtD,QAAMC,IAASC,EAAW;AAAA,IAAEC,UAAU;AAAA,EAAA,GAAOH,CAAK,GAC5C,CAACI,GAAOC,CAAI,IAAIC,EAAWL,GAAQ,CACvC,aACA,SACA,WACA,UACA,YACA,SACA,OACA,OAAO,CACR,GAEK,CAACM,GAASC,CAAU,IAAIC,EAA4B,CAAA,CAAE;AAC5D,MAAIC,IAAU;AAEd,QAAMC,IAAWA,CAACC,MAA4B;AAE5C,UAAMC,IADSD,EAAME,cACDC,sBAAAA,GACdC,IAAWC,KAAKC,IAAIL,EAAKM,OAAON,EAAKO,MAAM,GAC3CC,IAASL,IAAW;AAE1B,QAAIM,GACAC;AACJ,IAAInB,EAAMoB,UACRF,IAAST,EAAKM,QAAQN,EAAKO,SAAS,IAAIP,EAAKM,QAAQ,IAAIE,GACzDE,IAASV,EAAKO,SAASP,EAAKM,QAAQ,IAAIN,EAAKO,SAAS,IAAIC,MAE1DC,IAASV,EAAMa,UAAUZ,EAAKa,OAAOL,GACrCE,IAASX,EAAMe,UAAUd,EAAKe,MAAMP;AAGtC,UAAMQ,IAAMnB;AACZF,IAAAA,EAAYsB,CAAAA,MAAS,CAAC,GAAGA,GAAM;AAAA,MAAED,KAAAA;AAAAA,MAAKE,GAAGT;AAAAA,MAAQU,GAAGT;AAAAA,MAAQU,MAAMjB;AAAAA,IAAAA,CAAU,CAAC,GAC7EkB,WAAW,MAAM1B,EAAYsB,CAAAA,MAASA,EAAKK,MAAM,CAAC,CAAC,GAAG/B,EAAMD,QAAQ;AAAA,EACtE;AAEAC,SAAAA,EAAMgC,YAAY;AAAA,IAAEzB,UAAAA;AAAAA,EAAAA,CAAU,IAE9B,MAAA;AAAA,QAAA0B,IAAAC,EAAAA,GAAAC,IAGSC,EAAUpC,EAAMqC,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAF,CAAA,GAAAM,EAAAN,GAAAO,EADrBvC,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDwC,EAAG,eAAezC,EAAM0C,OAAO1C,EAAM2C,SAASC,MAAM;AAAA,MAAC;AAAA,MAAA,eAChD;AAAA,MAAQ,eACR;AAAA,IAAA,CAAM,GAAA,IAAA,EAAA,GAAAC,EAAAZ,GAAAa,EAEjBC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE7C,EAAAA;AAAAA,MAAS;AAAA,MAAA8C,UAChBL,QAAM,MAAA;AAAA,YAAAM,IAAAhB,EAAAA;AAAAiB,eAAAA,EAAAC,CAAAA,MAAA;AAAA,cAAAC,IAEGZ,EAAG,sBAAsBzC,EAAM2C,SAASW,KAAK,GAACC,IAE7C,GAAGX,EAAOjB,CAAC,MAAI6B,IAChB,GAAGZ,EAAOhB,CAAC,MAAI6B,IACb,GAAGb,EAAOf,IAAI,MAAI6B,IACjB,GAAGd,EAAOf,IAAI,MAAI8B,IACN3D,EAAM4D;AAAKP,iBAAAA,MAAAD,EAAAS,KAAAC,EAAAZ,GAAAE,EAAAS,IAAAR,CAAA,GAAAE,MAAAH,EAAAW,KAAAC,EAAAd,GAAA,QAAAE,EAAAW,IAAAR,CAAA,GAAAC,MAAAJ,EAAAa,KAAAD,EAAAd,GAAA,OAAAE,EAAAa,IAAAT,CAAA,GAAAC,MAAAL,EAAAc,KAAAF,EAAAd,GAAA,SAAAE,EAAAc,IAAAT,CAAA,GAAAC,MAAAN,EAAAe,KAAAH,EAAAd,GAAA,UAAAE,EAAAe,IAAAT,CAAA,GAAAC,MAAAP,EAAAgB,KAAAJ,EAAAd,GAAA,oBAAAE,EAAAgB,IAAAT,CAAA,GAAAP;AAAAA,QAAA,GAAA;AAAA,UAAAS,GAAAQ;AAAAA,UAAAN,GAAAM;AAAAA,UAAAJ,GAAAI;AAAAA,UAAAH,GAAAG;AAAAA,UAAAF,GAAAE;AAAAA,UAAAD,GAAAC;AAAAA,QAAAA,CAAA,GAAAnB;AAAAA,MAAA,GAAA;AAAA,IAAA,CAGpC,CAAA,GAAAjB;AAAAA,EAAA,GAAA;AAIT;"}
+{"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/components/dataDisplay/avatar/avatar.d.ts

@@ -12,6 +12,8 @@ export interface AvatarProps extends JSX.HTMLAttributes<HTMLDivElement> {
     color?: string;
     /** Extra attributes forwarded to the underlying <img> (srcSet, loading…). */
     imgProps?: JSX.ImgHTMLAttributes<HTMLImageElement>;
+    /** Test id of the root `<div>`; `avatar` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export declare function Avatar(props: ParentProps<AvatarProps>): JSX.Element;
@@ -26,6 +28,8 @@ export interface AvatarGroupProps extends JSX.HTMLAttributes<HTMLDivElement> {
     surplusAriaLabel?: (count: number) => string;
     /** Size of the "+N" surplus chip: match the avatars in the group. */
     size?: AvatarSize | number;
+    /** Test id of the root `<div>`; `avatar-group` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export declare function AvatarGroup(props: ParentProps<AvatarGroupProps>): JSX.Element;

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

@@ -1,20 +1,20 @@
-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 { 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 '../../../assets/styles/less/components/avatar/avatar.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                       */
-import { mergeProps as z, splitProps as x, createSignal as C, Show as h, children as L } from "solid-js";
+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`,
@@ -23,30 +23,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);
@@ -57,32 +59,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 K(l) {
-  const p = z({
+function O(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";
@@ -103,19 +107,19 @@ function K(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,
-  K as AvatarGroup
+  G as Avatar,
+  O as AvatarGroup
 };
 //# sourceMappingURL=avatar.js.map

package/dist/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/components/dataDisplay/card/card.d.ts

@@ -1,11 +1,42 @@
 import { type JSX, type ParentProps } from "solid-js";
 import { type Ref } from "../../../primitives/mergeRefs";
 export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Class name(s) for the root `<div>`, the card's box. `style`, `id`, `data-*`, `aria-hidden`, `ref` and event
+     * handlers go to the root too. With `onClick`, `role`, `tabindex`, `onFocus`, `onBlur` and the other `aria-*`
+     * attributes go to the card's button, `.smwb-card__content` (the title and the children), which is also the element
+     * to focus. Without `onClick` the card is not a control, and they stay on the root, which holds the footer too.
+     */
+    class?: string | undefined;
     variant?: "filled" | "elevated" | "outlined";
+    /**
+     * Disables the card: it says `aria-disabled`, and neither clicks nor keys run `onClick`. With `onClick` the card is
+     * still a button, out of the tab order.
+     */
     disabled?: boolean;
+    /**
+     * A heading drawn at the top of the card, not the `title` attribute. With `onClick` it is part of the card's button,
+     * and the button's name starts with it.
+     */
     title?: string;
-    /** Footer slot rendered after the content. */
+    /**
+     * Makes the card interactive: its content (the title and the children) becomes a button, named by that content, with
+     * a focus ring around the whole card. The footer is not part of that button but its sibling, so the card's controls
+     * go there: a control in the children would sit inside the button, and its name would join the card's.
+     *
+     * Runs when the card is activated: a click on it, or Enter / Space while its button has focus. A click on a control
+     * (button, link, input, anything focusable), in the footer or the children, or in a portal opened from the card does
+     * not run it, and neither do Enter / Space pressed on such a control. Content that is not a control keeps its click
+     * from activating the card by calling `preventDefault()` on it.
+     */
+    onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent> | undefined;
+    /**
+     * Footer slot rendered after the content. With `onClick` it sits beside the card's button, not inside it, so
+     * controls here keep their own names, clicks and keys; see `onClick`.
+     */
     footer?: JSX.Element;
+    /** Test id of the root `<div>`; `card` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export declare function Card(props: ParentProps<CardProps>): JSX.Element;