@smwb/ui-solid 0.12.0 → 0.13.0

package/dist/components/dataDisplay/thumbCard/thumbCard.js

@@ -1,60 +1,88 @@
-import { use as w, spread as T, mergeProps as L, memo as y, insert as n, createComponent as l, Portal as x, effect as $, setAttribute as F, style as K, isServer as M, template as o } from "solid-js/web";
+import { use as v, spread as P, mergeProps as C, memo as k, insert as o, createComponent as l, Portal as A, effect as D, setAttribute as H, style as I, isServer as j, template as s } from "solid-js/web";
 import '../../../assets/styles/less/components/thumbCard/thumbCard.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                             */
-import { mergeProps as O, splitProps as R, children as p, createSignal as A, onCleanup as I, Show as c } from "solid-js";
-import j from "clsx";
-import { createFloating as q } from "../../../primitives/createFloating.js";
-import { mergeRefs as B } from "../../../primitives/mergeRefs.js";
-import { LazyImage as G } from "../lazyImage/lazyImage.js";
-var H = /* @__PURE__ */ o('<div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">'), J = /* @__PURE__ */ o('<div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">'), N = /* @__PURE__ */ o("<div class=smwb-thumb-card__caption>"), Q = /* @__PURE__ */ o("<div class=smwb-thumb-card__preview>"), U = /* @__PURE__ */ o("<div><div class=smwb-thumb-card__media>"), V = /* @__PURE__ */ o("<img alt>");
-function le(S) {
-  const P = O({
+import { mergeProps as q, splitProps as B, children as f, createSignal as G, onCleanup as J, Show as c } from "solid-js";
+import N from "clsx";
+import { createFloating as Q } from "../../../primitives/createFloating.js";
+import { mergeRefs as U } from "../../../primitives/mergeRefs.js";
+import { callHandler as m } from "../../../primitives/callHandler.js";
+import { isOwnClick as V } from "../../../utils/ownClick.js";
+import { splitControlProps as W } from "../../../utils/controlProps.js";
+import { LazyImage as X } from "../lazyImage/lazyImage.js";
+var Y = /* @__PURE__ */ s("<div class=smwb-thumb-card__caption>"), Z = /* @__PURE__ */ s('<div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">'), ee = /* @__PURE__ */ s('<div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">'), te = /* @__PURE__ */ s("<div class=smwb-thumb-card__preview>"), re = /* @__PURE__ */ s("<div><div><div class=smwb-thumb-card__media>"), oe = /* @__PURE__ */ s("<img alt>");
+function ve(E) {
+  const M = q({
     lazy: !0,
     hoverDelay: 350
-  }, S), [e, k] = R(P, ["src", "caption", "selected", "onSelect", "fallback", "hoverPreview", "topStart", "topEnd", "lazy", "disabled", "hoverDelay", "class", "ref"]), v = p(() => e.topStart), b = p(() => e.topEnd), h = p(() => e.caption), m = q({
+  }, E), [e, z] = B(M, [
+    "src",
+    "caption",
+    "selected",
+    "onSelect",
+    "fallback",
+    "hoverPreview",
+    "topStart",
+    "topEnd",
+    "lazy",
+    "disabled",
+    "hoverDelay",
+    "class",
+    "ref",
+    // The card sets these on its root too; its own handlers call the caller's.
+    "onClick",
+    "onKeyDown",
+    "onMouseEnter",
+    "onMouseLeave"
+  ]), [h, L] = W(z);
+  let d;
+  const g = f(() => e.topStart), _ = f(() => e.topEnd), w = f(() => e.caption), u = Q({
     placement: () => "right"
-  }), [D, g] = A(!1);
+  }), [T, y] = G(!1);
   let i;
-  const d = () => {
+  const p = () => {
     i && (clearTimeout(i), i = void 0);
-  }, E = () => {
-    e.hoverPreview == null || e.disabled || (d(), i = setTimeout(() => g(!0), e.hoverDelay));
-  }, z = () => {
-    d(), g(!1);
+  }, x = (t) => {
+    m(e.onMouseEnter, t), !(e.hoverPreview == null || e.disabled) && (p(), i = setTimeout(() => y(!0), e.hoverDelay));
+  }, K = (t) => {
+    m(e.onMouseLeave, t), p(), y(!1);
   };
-  I(d);
-  const a = () => !!e.onSelect && !e.disabled, C = (r) => {
-    a() && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), e.onSelect?.());
+  J(p);
+  const b = () => !!e.onSelect && !e.disabled, O = (t) => {
+    if (e.disabled) return;
+    const n = V(t, d ?? null);
+    m(e.onClick, t), n && e.onSelect?.();
+  }, F = (t) => {
+    m(e.onKeyDown, t), !(!b() || t.target !== d) && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), e.onSelect?.());
   };
   return (() => {
-    var r = U(), u = r.firstChild, f = B(e.ref, (t) => m.setReference(t));
-    return typeof f == "function" && w(f, r), T(r, L(k, {
+    var t = re(), n = t.firstChild, R = n.firstChild, $ = U(e.ref, (r) => u.setReference(r));
+    return typeof $ == "function" && v($, t), P(t, C(L, {
       get class() {
-        return j("smwb-thumb-card", e.class, {
+        return N("smwb-thumb-card", e.class, {
           "smwb-thumb-card--selected": e.selected,
           "smwb-thumb-card--disabled": e.disabled,
-          "smwb-thumb-card--interactive": a()
+          "smwb-thumb-card--interactive": b()
         });
       },
+      onClick: O,
+      onKeyDown: F,
+      onMouseEnter: x,
+      onMouseLeave: K
+    }), !1, !0), v((r) => d = r, n), P(n, C(h, {
+      class: "smwb-thumb-card__content",
       get role() {
-        return a() ? "button" : void 0;
+        return e.onSelect ? "button" : void 0;
       },
       get tabindex() {
-        return a() ? 0 : void 0;
+        return h.tabindex ?? (b() ? 0 : void 0);
       },
       get "aria-pressed"() {
-        return y(() => !!e.onSelect)() ? e.selected ?? !1 : void 0;
+        return k(() => !!e.onSelect)() ? e.selected ?? !1 : void 0;
       },
       get "aria-disabled"() {
         return e.disabled || void 0;
-      },
-      get onClick() {
-        return a() ? () => e.onSelect?.() : void 0;
-      },
-      onKeyDown: C,
-      onMouseEnter: E,
-      onMouseLeave: z
-    }), !1, !0), n(u, l(G, {
+      }
+    }), !1, !0), o(R, l(X, {
       get src() {
         return e.src;
       },
@@ -64,52 +92,52 @@ function le(S) {
       get fallback() {
         return e.fallback;
       }
-    }), null), n(u, l(c, {
+    })), o(n, l(c, {
       get when() {
-        return v();
+        return w();
       },
       get children() {
-        var t = H();
-        return n(t, v), t;
+        var r = Y();
+        return o(r, w), r;
       }
-    }), null), n(u, l(c, {
+    }), null), o(t, l(c, {
       get when() {
-        return b();
+        return g();
       },
       get children() {
-        var t = J();
-        return n(t, b), t;
+        var r = Z();
+        return o(r, g), r;
       }
-    }), null), n(r, l(c, {
+    }), null), o(t, l(c, {
       get when() {
-        return h();
+        return _();
       },
       get children() {
-        var t = N();
-        return n(t, h), t;
+        var r = ee();
+        return o(r, _), r;
       }
-    }), null), n(r, l(c, {
+    }), null), o(t, l(c, {
       get when() {
-        return D() && !M;
+        return T() && !j;
       },
       get children() {
-        return l(x, {
+        return l(A, {
           get children() {
-            var t = Q();
-            return w((s) => m.setFloating(s), t), n(t, (() => {
-              var s = y(() => typeof e.hoverPreview == "string");
-              return () => s() ? (() => {
-                var _ = V();
-                return $(() => F(_, "src", e.hoverPreview)), _;
+            var r = te();
+            return v((a) => u.setFloating(a), r), o(r, (() => {
+              var a = k(() => typeof e.hoverPreview == "string");
+              return () => a() ? (() => {
+                var S = oe();
+                return D(() => H(S, "src", e.hoverPreview)), S;
               })() : e.hoverPreview;
-            })()), $((s) => K(t, m.floatingStyles(), s)), t;
+            })()), D((a) => I(r, u.floatingStyles(), a)), r;
           }
         });
       }
-    }), null), r;
+    }), null), t;
   })();
 }
 export {
-  le as ThumbCard
+  ve as ThumbCard
 };
 //# sourceMappingURL=thumbCard.js.map

package/dist/components/dataDisplay/thumbCard/thumbCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"thumbCard.js","sources":["../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import { type JSX, Show, children, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { LazyImage } from \"../lazyImage\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  caption?: JSX.Element;\n  selected?: boolean;\n  /** Makes the card a selectable button (keyboard + `aria-pressed`). */\n  onSelect?: () => void;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: JSX.Element;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: JSX.Element | string;\n  /** Top-left overlay slot (e.g. a favourite star). */\n  topStart?: JSX.Element;\n  /** Top-right overlay slot (e.g. a kebab menu). */\n  topEnd?: JSX.Element;\n  lazy?: boolean;\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport function ThumbCard(props: ThumbCardProps): JSX.Element {\n  const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"caption\",\n    \"selected\",\n    \"onSelect\",\n    \"fallback\",\n    \"hoverPreview\",\n    \"topStart\",\n    \"topEnd\",\n    \"lazy\",\n    \"disabled\",\n    \"hoverDelay\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  // Read each slot 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  // (The hover preview is read on hover only, after hydration.)\n  const topStart = children(() => local.topStart);\n  const topEnd = children(() => local.topEnd);\n  const caption = children(() => local.caption);\n\n  const floating = createFloating({ placement: () => \"right\" });\n  const [previewOpen, setPreviewOpen] = createSignal(false);\n  let hoverTimer: ReturnType<typeof setTimeout> | undefined;\n\n  const clearTimer = (): void => {\n    if (hoverTimer) {\n      clearTimeout(hoverTimer);\n      hoverTimer = undefined;\n    }\n  };\n  const onEnter = (): void => {\n    if (local.hoverPreview == null || local.disabled) return;\n    clearTimer();\n    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);\n  };\n  const onLeave = (): void => {\n    clearTimer();\n    setPreviewOpen(false);\n  };\n  onCleanup(clearTimer);\n\n  const interactive = (): boolean => !!local.onSelect && !local.disabled;\n  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => floating.setReference(el))}\n      class={cn(\"smwb-thumb-card\", local.class, {\n        \"smwb-thumb-card--selected\": local.selected,\n        \"smwb-thumb-card--disabled\": local.disabled,\n        \"smwb-thumb-card--interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-pressed={local.onSelect ? (local.selected ?? false) : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? () => local.onSelect?.() : undefined}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div class=\"smwb-thumb-card__media\">\n        <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />\n        <Show when={topStart()}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{topStart()}</div>\n        </Show>\n        <Show when={topEnd()}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{topEnd()}</div>\n        </Show>\n      </div>\n      <Show when={caption()}>\n        <div class=\"smwb-thumb-card__caption\">{caption()}</div>\n      </Show>\n      <Show when={previewOpen() && !isServer}>\n        <Portal>\n          <div class=\"smwb-thumb-card__preview\" ref={(el) => floating.setFloating(el)} style={floating.floatingStyles()}>\n            {typeof local.hoverPreview === \"string\" ? (\n              <img src={local.hoverPreview} alt=\"\" />\n            ) : (\n              (local.hoverPreview as JSX.Element)\n            )}\n          </div>\n        </Portal>\n      </Show>\n    </div>\n  );\n}\n\nexport default ThumbCard;\n"],"names":["ThumbCard","props","merged","mergeProps","lazy","hoverDelay","local","rest","splitProps","topStart","children","topEnd","caption","floating","createFloating","placement","previewOpen","setPreviewOpen","createSignal","hoverTimer","clearTimer","clearTimeout","undefined","onEnter","hoverPreview","disabled","setTimeout","onLeave","onCleanup","interactive","onSelect","onKeyDown","event","key","preventDefault","_el$","_tmpl$5","_el$2","firstChild","_ref$","mergeRefs","ref","el","setReference","_$use","_$spread","_$mergeProps","cn","class","selected","role","tabindex","_$memo","onClick","_$insert","_$createComponent","LazyImage","src","fallback","Show","when","_el$3","_tmpl$","_el$4","_tmpl$2","_el$5","_tmpl$3","isServer","Portal","_el$6","_tmpl$4","setFloating","_c$","_el$7","_tmpl$6","_$effect","_$setAttribute","_$p","_$style","floatingStyles"],"mappings":";;;;;;;;;AAqCO,SAASA,GAAUC,GAAoC;AAC5D,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,IAAMC,YAAY;AAAA,EAAA,GAAOJ,CAAK,GAC1D,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,OACA,WACA,YACA,YACA,YACA,gBACA,YACA,UACA,QACA,YACA,cACA,SACA,KAAK,CACN,GAKKO,IAAWC,EAAS,MAAMJ,EAAMG,QAAQ,GACxCE,IAASD,EAAS,MAAMJ,EAAMK,MAAM,GACpCC,IAAUF,EAAS,MAAMJ,EAAMM,OAAO,GAEtCC,IAAWC,EAAe;AAAA,IAAEC,WAAWA,MAAM;AAAA,EAAA,CAAS,GACtD,CAACC,GAAaC,CAAc,IAAIC,EAAa,EAAK;AACxD,MAAIC;AAEJ,QAAMC,IAAaA,MAAY;AAC7B,IAAID,MACFE,aAAaF,CAAU,GACvBA,IAAaG;AAAAA,EAEjB,GACMC,IAAUA,MAAY;AAC1B,IAAIjB,EAAMkB,gBAAgB,QAAQlB,EAAMmB,aACxCL,EAAAA,GACAD,IAAaO,WAAW,MAAMT,EAAe,EAAI,GAAGX,EAAMD,UAAU;AAAA,EACtE,GACMsB,IAAUA,MAAY;AAC1BP,IAAAA,EAAAA,GACAH,EAAe,EAAK;AAAA,EACtB;AACAW,EAAAA,EAAUR,CAAU;AAEpB,QAAMS,IAAcA,MAAe,CAAC,CAACvB,EAAMwB,YAAY,CAACxB,EAAMmB,UACxDM,IAA8DC,CAAAA,MAAU;AAC5E,IAAIH,QAAkBG,EAAMC,QAAQ,WAAWD,EAAMC,QAAQ,SAC3DD,EAAME,eAAAA,GACN5B,EAAMwB,WAAAA;AAAAA,EAEV;AAEA,UAAA,MAAA;AAAA,QAAAK,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAGSC,EAAUlC,EAAMmC,KAAMC,OAAO7B,EAAS8B,aAAaD,CAAE,CAAC;AAAC,kBAAAH,KAAA,cAAAK,EAAAL,GAAAJ,CAAA,GAAAU,EAAAV,GAAAW,EADxDvC,GAAI;AAAA,MAAA,IAAA,QAAA;AAAA,eAEDwC,EAAG,mBAAmBzC,EAAM0C,OAAO;AAAA,UACxC,6BAA6B1C,EAAM2C;AAAAA,UACnC,6BAA6B3C,EAAMmB;AAAAA,UACnC,gCAAgCI,EAAAA;AAAAA,QAAY,CAC7C;AAAA,MAAC;AAAA,MAAA,IACFqB,OAAI;AAAA,eAAErB,EAAAA,IAAgB,WAAWP;AAAAA,MAAS;AAAA,MAAA,IAC1C6B,WAAQ;AAAA,eAAEtB,EAAAA,IAAgB,IAAIP;AAAAA,MAAS;AAAA,MAAA,IAAA,iBAAA;AAAA,eACzB8B,EAAA,MAAA,CAAA,CAAA9C,EAAMwB,QAAQ,EAAA,IAAIxB,EAAM2C,YAAY,KAAS3B;AAAAA,MAAS;AAAA,MAAA,IAAA,kBAAA;AAAA,eACrDhB,EAAMmB,YAAYH;AAAAA,MAAS;AAAA,MAAA,IAC1C+B,UAAO;AAAA,eAAExB,EAAAA,IAAgB,MAAMvB,EAAMwB,eAAeR;AAAAA,MAAS;AAAA,MAAA,WAClDS;AAAAA,MAAS,cACNR;AAAAA,MAAO,cACPI;AAAAA,IAAAA,CAAO,GAAA,IAAA,EAAA,GAAA2B,EAAAjB,GAAAkB,EAGlBC,GAAS;AAAA,MAAA,IAACC,MAAG;AAAA,eAAEnD,EAAMmD;AAAAA,MAAG;AAAA,MAAA,IAAErD,OAAI;AAAA,eAAEE,EAAMF;AAAAA,MAAI;AAAA,MAAA,IAAEsD,WAAQ;AAAA,eAAEpD,EAAMoD;AAAAA,MAAQ;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAJ,EAAAjB,GAAAkB,EACpEI,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEnD,EAAAA;AAAAA,MAAU;AAAA,MAAA,IAAAC,WAAA;AAAA,YAAAmD,IAAAC,EAAAA;AAAAR,eAAAA,EAAAO,GAC6CpD,CAAQ,GAAAoD;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAP,EAAAjB,GAAAkB,EAE1EI,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEjD,EAAAA;AAAAA,MAAQ;AAAA,MAAA,IAAAD,WAAA;AAAA,YAAAqD,IAAAC,EAAAA;AAAAV,eAAAA,EAAAS,GAC6CpD,CAAM,GAAAoD;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAT,EAAAnB,GAAAoB,EAGxEI,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEhD,EAAAA;AAAAA,MAAS;AAAA,MAAA,IAAAF,WAAA;AAAA,YAAAuD,IAAAC,EAAAA;AAAAZ,eAAAA,EAAAW,GACoBrD,CAAO,GAAAqD;AAAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAX,EAAAnB,GAAAoB,EAE/CI,GAAI;AAAA,MAAA,IAACC,OAAI;AAAA,eAAE5C,EAAAA,KAAiB,CAACmD;AAAAA,MAAQ;AAAA,MAAA,IAAAzD,WAAA;AAAA,eAAA6C,EACnCa,GAAM;AAAA,UAAA,IAAA1D,WAAA;AAAA,gBAAA2D,IAAAC,EAAAA;AAAA1B,mBAAAA,EACuCF,CAAAA,MAAO7B,EAAS0D,YAAY7B,CAAE,GAAC2B,CAAA,GAAAf,EAAAe,IAAA,MAAA;AAAA,kBAAAG,IAAApB,EAAA,MACxE,OAAO9C,EAAMkB,gBAAiB,QAAQ;AAAA,qBAAA,MAAtCgD,EAAAA,KAAA,MAAA;AAAA,oBAAAC,IAAAC,EAAAA;AAAAC,uBAAAA,QAAAC,EAAAH,GAAA,OACWnE,EAAMkB,YAAY,CAAA,GAAAiD;AAAAA,cAAA,GAAA,IAE3BnE,EAAMkB;AAAAA,YACR,IAAA,GAAAmD,EAAAE,OAAAC,EAAAT,GALiFxD,EAASkE,eAAAA,GAAgBF,CAAA,CAAA,GAAAR;AAAAA,UAAA;AAAA,QAAA,CAAA;AAAA,MAAA;AAAA,IAAA,CAAA,GAAA,IAAA,GAAAlC;AAAAA,EAAA,GAAA;AAWvH;"}
+{"version":3,"file":"thumbCard.js","sources":["../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import { type JSX, Show, children, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { LazyImage } from \"../lazyImage\";\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 ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\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, but `role`, `tabindex`, `onFocus`, `onBlur` and the other `aria-*` attributes go to\n   * the card's content, `.smwb-thumb-card__content` (the image and the caption): that is the card's button when it has\n   * `onSelect`, and the element to focus.\n   */\n  class?: string | undefined;\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  /**\n   * Text under the image. With `onSelect` it is part of the card's button and names it, so keep controls out of it:\n   * they go in `topStart` / `topEnd`.\n   */\n  caption?: JSX.Element;\n  /** Outlines the image; with `onSelect`, the card's button is also `aria-pressed=\"true\"`. */\n  selected?: boolean;\n  /**\n   * Makes the card selectable: its content (the image and the caption) becomes a toggle button with `aria-pressed`,\n   * selected by a click and by Enter / Space. The corner slots are not part of that button but its siblings, laid over\n   * the image, so their controls keep their own names, clicks and keys.\n   *\n   * A click selects the card unless it lands in a control in a slot (button, link, input, anything focusable) or in a\n   * portal opened from the card. Slot content that is not a control keeps its click from selecting the card by calling\n   * `preventDefault()` on it.\n   */\n  onSelect?: () => void;\n  /**\n   * Runs on each click on the card, before `onSelect`, but not while the card is `disabled`.\n   * A click on a control in a slot runs it too, without selecting the card.\n   * Enter / Space select the card without a click, so they call only `onSelect`.\n   */\n  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent> | undefined;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: JSX.Element;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: JSX.Element | string;\n  /**\n   * Top-left overlay slot (e.g. a favourite star). It sits over the image, outside the card's button, so controls here\n   * keep their own names, clicks and keys; see `onSelect`.\n   */\n  topStart?: JSX.Element;\n  /**\n   * Top-right overlay slot (e.g. a kebab menu). It sits over the image, outside the card's button, so controls here\n   * keep their own names, clicks and keys; see `onSelect`.\n   */\n  topEnd?: JSX.Element;\n  lazy?: boolean;\n  /**\n   * Dims the card and ignores clicks on it: neither `onClick` nor `onSelect` runs.\n   * Keys do not select it either, and there is no hover preview. With `onSelect`\n   * the card is still a button, `aria-disabled` and out of the tab order.\n   */\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n *\n * The root is a box around the card's content (the image and the caption, the\n * card's button when it is selectable) and the corner slots, which are laid\n * over the image beside that button rather than inside it.\n */\nexport function ThumbCard(props: ThumbCardProps): JSX.Element {\n  const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"caption\",\n    \"selected\",\n    \"onSelect\",\n    \"fallback\",\n    \"hoverPreview\",\n    \"topStart\",\n    \"topEnd\",\n    \"lazy\",\n    \"disabled\",\n    \"hoverDelay\",\n    \"class\",\n    \"ref\",\n    // The card sets these on its root too; its own handlers call the caller's.\n    \"onClick\",\n    \"onKeyDown\",\n    \"onMouseEnter\",\n    \"onMouseLeave\",\n  ]);\n  // What the card is to the keyboard and to assistive tech goes to its\n  // content, the element that is its button; the rest stays on the root.\n  const [control, box] = splitControlProps(rest);\n  let content: HTMLDivElement | undefined;\n\n  // Read each slot 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  // (The hover preview is read on hover only, after hydration.)\n  const topStart = children(() => local.topStart);\n  const topEnd = children(() => local.topEnd);\n  const caption = children(() => local.caption);\n\n  const floating = createFloating({ placement: () => \"right\" });\n  const [previewOpen, setPreviewOpen] = createSignal(false);\n  let hoverTimer: ReturnType<typeof setTimeout> | undefined;\n\n  const clearTimer = (): void => {\n    if (hoverTimer) {\n      clearTimeout(hoverTimer);\n      hoverTimer = undefined;\n    }\n  };\n  const onEnter: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    callHandler(local.onMouseEnter, event);\n    if (local.hoverPreview == null || local.disabled) return;\n    clearTimer();\n    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);\n  };\n  const onLeave: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    callHandler(local.onMouseLeave, event);\n    clearTimer();\n    setPreviewOpen(false);\n  };\n  onCleanup(clearTimer);\n\n  const interactive = (): boolean => !!local.onSelect && !local.disabled;\n  // A disabled card ignores clicks, the caller's onClick included: it says\n  // aria-disabled, and its styles turn pointer events off. The caller's onClick\n  // sees every other click, those in the slots too, but only clicks on the\n  // card's content and on what is not a control in a slot select it: not one\n  // on a control in a slot, nor one in a Portal opened from the card. That is\n  // settled before onClick runs, so what onClick does to the event or the DOM\n  // does not change it.\n  const onClick: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {\n    if (local.disabled) return;\n    const selects = isOwnClick(event, content ?? null);\n    callHandler(local.onClick, event);\n    if (selects) local.onSelect?.();\n  };\n  // Keys pressed on a control in a slot bubble up here too; only the keys of\n  // the card's button select it.\n  const onKeyDown: 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      local.onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...box}\n      ref={mergeRefs(local.ref, (el) => floating.setReference(el))}\n      class={cn(\"smwb-thumb-card\", local.class, {\n        \"smwb-thumb-card--selected\": local.selected,\n        \"smwb-thumb-card--disabled\": local.disabled,\n        \"smwb-thumb-card--interactive\": interactive(),\n      })}\n      onClick={onClick}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div\n        {...control}\n        ref={(el) => (content = el)}\n        class=\"smwb-thumb-card__content\"\n        // With onSelect the content is the card's button and says whether it is\n        // pressed, and a disabled card says so: these win over the caller's, and\n        // where the card sets none (undefined), the caller's stay. Its tabindex\n        // is a default: the caller's wins, e.g. for roving focus.\n        role={local.onSelect ? \"button\" : undefined}\n        tabindex={control.tabindex ?? (interactive() ? 0 : undefined)}\n        aria-pressed={local.onSelect ? (local.selected ?? false) : undefined}\n        aria-disabled={local.disabled || undefined}\n      >\n        <div class=\"smwb-thumb-card__media\">\n          <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />\n        </div>\n        <Show when={caption()}>\n          <div class=\"smwb-thumb-card__caption\">{caption()}</div>\n        </Show>\n      </div>\n      {/* Beside the button, not in it: controls here keep their names and input. */}\n      <Show when={topStart()}>\n        <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{topStart()}</div>\n      </Show>\n      <Show when={topEnd()}>\n        <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{topEnd()}</div>\n      </Show>\n      <Show when={previewOpen() && !isServer}>\n        <Portal>\n          <div class=\"smwb-thumb-card__preview\" ref={(el) => floating.setFloating(el)} style={floating.floatingStyles()}>\n            {typeof local.hoverPreview === \"string\" ? (\n              <img src={local.hoverPreview} alt=\"\" />\n            ) : (\n              (local.hoverPreview as JSX.Element)\n            )}\n          </div>\n        </Portal>\n      </Show>\n    </div>\n  );\n}\n\nexport default ThumbCard;\n"],"names":["ThumbCard","props","merged","mergeProps","lazy","hoverDelay","local","rest","splitProps","control","box","splitControlProps","content","topStart","children","topEnd","caption","floating","createFloating","placement","previewOpen","setPreviewOpen","createSignal","hoverTimer","clearTimer","clearTimeout","undefined","onEnter","event","callHandler","onMouseEnter","hoverPreview","disabled","setTimeout","onLeave","onMouseLeave","onCleanup","interactive","onSelect","onClick","selects","isOwnClick","onKeyDown","target","key","preventDefault","_el$","_tmpl$5","_el$2","firstChild","_el$3","_ref$","mergeRefs","ref","el","setReference","_$use","_$spread","_$mergeProps","cn","class","selected","role","tabindex","_$memo","_$insert","_$createComponent","LazyImage","src","fallback","Show","when","_el$4","_tmpl$","_el$5","_tmpl$2","_el$6","_tmpl$3","isServer","Portal","_el$7","_tmpl$4","setFloating","_c$","_el$8","_tmpl$6","_$effect","_$setAttribute","_$p","_$style","floatingStyles"],"mappings":"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"}

package/dist/components/dataDisplay/treeView/treeView.d.ts

@@ -29,6 +29,8 @@ export interface TreeViewProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>,
     checkboxes?: boolean;
     renderLabel?: (item: ITreeNodeItem, nodeId: string) => JSX.Element;
     loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;
+    /** Test id of the root `<div>`; `tree-view` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 export declare function TreeView(props: TreeViewProps): JSX.Element;

package/dist/components/dataDisplay/treeView/treeView.js

@@ -100,7 +100,7 @@ function oe(o) {
     defaultSelected: [],
     selectable: !1,
     checkboxes: !1
-  }, o), [e, h] = B(n, ["class", "listIcon", "nodeIcon", "data", "expanded", "defaultExpanded", "onExpandedChange", "selected", "defaultSelected", "onSelectedChange", "selectable", "checkboxes", "renderLabel", "loadChildren", "ref"]), [$, c] = P({}), [f, m] = P([]), [I, x] = O({
+  }, o), [e, h] = B(n, ["class", "listIcon", "nodeIcon", "data", "expanded", "defaultExpanded", "onExpandedChange", "selected", "defaultSelected", "onSelectedChange", "selectable", "checkboxes", "renderLabel", "loadChildren", "ref", "data-testid"]), [$, c] = P({}), [f, m] = P([]), [I, x] = O({
     value: () => e.expanded,
     defaultValue: e.defaultExpanded,
     onChange: (t) => e.onExpandedChange?.(t)
@@ -159,7 +159,9 @@ function oe(o) {
     get children() {
       var t = X(), l = J(e.ref);
       return typeof l == "function" && D(l, t), R(t, F(h, {
-        "data-testid": "tree-view",
+        get "data-testid"() {
+          return e["data-testid"] ?? "tree-view";
+        },
         role: "tree",
         get class() {
           return z("smwb-tree", e.class);

package/dist/components/dataDisplay/treeView/treeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"treeView.js","sources":["../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import { type Accessor, type JSX, For, Show, createContext, createSignal, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ITreeNodeItem {\n  /** Stable identifier. Falls back to the positional path when omitted. */\n  id?: string;\n  label: string;\n  children?: ITreeNodeItem[];\n  /** Hint that the node is expandable even before its children are loaded. */\n  hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  nodeIcon?: { opened?: string; closed?: string };\n  listIcon?: string;\n  data: ITreeNodeItem[];\n  expanded?: string[];\n  defaultExpanded?: string[];\n  onExpandedChange?: (expanded: string[]) => void;\n  selected?: string[];\n  defaultSelected?: string[];\n  /** Reports the full selection plus, for user toggles, the node that just changed. */\n  onSelectedChange?: (selected: string[], changed?: { id: string; selected: boolean }) => void;\n  selectable?: boolean;\n  checkboxes?: boolean;\n  renderLabel?: (item: ITreeNodeItem, nodeId: string) => JSX.Element;\n  loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface TreeContextValue {\n  expandedIds: Accessor<string[]>;\n  selectedIds: Accessor<string[]>;\n  loadedChildren: Accessor<Record<string, ITreeNodeItem[]>>;\n  loadingIds: Accessor<string[]>;\n  toggleExpanded: (id: string) => void;\n  setOpen: (id: string, open: boolean) => void;\n  toggleSelected: (id: string) => void;\n  ensureLoaded: (item: ITreeNodeItem, nodeId: string) => void;\n  selectable: boolean;\n  checkboxes: boolean;\n  nodeIcon: { opened?: string; closed?: string };\n  listIcon: string;\n  renderLabel: ((item: ITreeNodeItem, nodeId: string) => JSX.Element) | undefined;\n  hasLoader: boolean;\n}\n\nconst TreeContext = createContext<TreeContextValue>();\n\nfunction TreeNode(props: { item: ITreeNodeItem; path: string }): JSX.Element {\n  const ctx = useContext(TreeContext)!;\n  const nodeId = (): string => props.item.id ?? props.path;\n  const resolvedChildren = (): ITreeNodeItem[] | undefined => props.item.children ?? ctx.loadedChildren()[nodeId()];\n  const isLazy = (): boolean => ctx.hasLoader && (!!props.item.hasChildren || !!ctx.loadedChildren()[nodeId()]);\n  const hasChildNodes = (): boolean => (!!resolvedChildren() && (resolvedChildren()?.length ?? 0) > 0) || isLazy();\n  const isOpen = (): boolean => ctx.expandedIds().includes(nodeId());\n  const isSelected = (): boolean => ctx.selectedIds().includes(nodeId());\n  const isLoading = (): boolean => ctx.loadingIds().includes(nodeId());\n\n  const onLabelClick = (): void => {\n    if (hasChildNodes()) {\n      if (!isOpen()) ctx.ensureLoaded(props.item, nodeId());\n      ctx.toggleExpanded(nodeId());\n    }\n    if (ctx.selectable) ctx.toggleSelected(nodeId());\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onLabelClick();\n    } else if (event.key === \"ArrowRight\" && hasChildNodes()) {\n      ctx.ensureLoaded(props.item, nodeId());\n      ctx.setOpen(nodeId(), true);\n    } else if (event.key === \"ArrowLeft\" && hasChildNodes()) {\n      ctx.setOpen(nodeId(), false);\n    }\n  };\n\n  return (\n    <div\n      class={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected() })}\n      role=\"treeitem\"\n      aria-expanded={hasChildNodes() ? isOpen() : undefined}\n      aria-selected={ctx.selectable || ctx.checkboxes ? isSelected() : undefined}\n    >\n      <span class=\"smwb-tree__node__content\" onClick={onLabelClick} onKeyDown={onKeyDown} tabindex={0} role=\"button\">\n        <Show when={ctx.checkboxes}>\n          <input\n            type=\"checkbox\"\n            class=\"smwb-tree__node__checkbox\"\n            checked={isSelected()}\n            onClick={(e) => e.stopPropagation()}\n            onChange={() => ctx.toggleSelected(nodeId())}\n            aria-label={props.item.label}\n          />\n        </Show>\n        <span class=\"smwb-tree__node__label\">\n          <Show when={hasChildNodes()} fallback={<Icon name={ctx.listIcon} size={20} />}>\n            <Icon name={isOpen() ? ctx.nodeIcon.opened ?? \"folder_open\" : ctx.nodeIcon.closed ?? \"folder\"} fill={1} size={20} />\n          </Show>\n          {ctx.renderLabel ? ctx.renderLabel(props.item, nodeId()) : props.item.label}\n        </span>\n      </span>\n      <Show when={hasChildNodes() && isOpen()}>\n        <div role=\"group\">\n          <Show\n            when={!(isLoading() && !resolvedChildren())}\n            fallback={\n              <div class=\"smwb-tree__node__loading\" role=\"status\">\n                Загрузка…\n              </div>\n            }\n          >\n            <For each={resolvedChildren() ?? []}>\n              {(child, idx) => <TreeNode item={child} path={`${props.path}.${idx()}`} />}\n            </For>\n          </Show>\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport function TreeView(props: TreeViewProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      listIcon: \"draft\",\n      nodeIcon: { closed: \"folder\", opened: \"folder_open\" } as { opened?: string; closed?: string },\n      data: [] as ITreeNodeItem[],\n      defaultExpanded: [] as string[],\n      defaultSelected: [] as string[],\n      selectable: false,\n      checkboxes: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"listIcon\",\n    \"nodeIcon\",\n    \"data\",\n    \"expanded\",\n    \"defaultExpanded\",\n    \"onExpandedChange\",\n    \"selected\",\n    \"defaultSelected\",\n    \"onSelectedChange\",\n    \"selectable\",\n    \"checkboxes\",\n    \"renderLabel\",\n    \"loadChildren\",\n    \"ref\",\n  ]);\n\n  const [loadedChildren, setLoadedChildren] = createSignal<Record<string, ITreeNodeItem[]>>({});\n  const [loadingIds, setLoadingIds] = createSignal<string[]>([]);\n  const [expandedIds, setExpandedIds] = createControllableState<string[]>({\n    value: () => local.expanded,\n    defaultValue: local.defaultExpanded,\n    onChange: (next) => local.onExpandedChange?.(next),\n  });\n  let lastToggled: { id: string; selected: boolean } | undefined;\n  const [selectedIds, setSelectedIds] = createControllableState<string[]>({\n    value: () => local.selected,\n    defaultValue: local.defaultSelected,\n    onChange: (next) => {\n      // createControllableState calls onChange synchronously from the setter,\n      // so lastToggled still refers to the toggle that caused this change.\n      const changed = lastToggled;\n      lastToggled = undefined;\n      local.onSelectedChange?.(next, changed);\n    },\n  });\n\n  const toggleExpanded = (id: string): void =>\n    setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n\n  const setOpen = (id: string, open: boolean): void =>\n    setExpandedIds((prev) => {\n      const has = prev.includes(id);\n      if (open && !has) return [...prev, id];\n      if (!open && has) return prev.filter((x) => x !== id);\n      return prev;\n    });\n\n  const toggleSelected = (id: string): void => {\n    lastToggled = { id, selected: !selectedIds().includes(id) };\n    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n  };\n\n  const ensureLoaded = (item: ITreeNodeItem, nodeId: string): void => {\n    if (!local.loadChildren || loadedChildren()[nodeId] || (item.children && item.children.length > 0)) return;\n    setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n    void local\n      .loadChildren(item, nodeId)\n      .then((children) => setLoadedChildren((prev) => ({ ...prev, [nodeId]: children })))\n      .finally(() => setLoadingIds((prev) => prev.filter((x) => x !== nodeId)));\n  };\n\n  const contextValue: TreeContextValue = {\n    expandedIds,\n    selectedIds,\n    loadedChildren,\n    loadingIds,\n    toggleExpanded,\n    setOpen,\n    toggleSelected,\n    ensureLoaded,\n    get selectable() {\n      return local.selectable;\n    },\n    get checkboxes() {\n      return local.checkboxes;\n    },\n    get nodeIcon() {\n      return local.nodeIcon;\n    },\n    get listIcon() {\n      return local.listIcon;\n    },\n    get renderLabel() {\n      return local.renderLabel;\n    },\n    get hasLoader() {\n      return !!local.loadChildren;\n    },\n  };\n\n  return (\n    <TreeContext.Provider value={contextValue}>\n      <div {...rest} data-testid=\"tree-view\" ref={mergeRefs(local.ref)} role=\"tree\" class={cn(\"smwb-tree\", local.class)}>\n        <For each={local.data}>\n          {(node, idx) => (\n            <div class=\"smwb-tree__wrapper\" role=\"presentation\">\n              <TreeNode item={node} path={`${idx()}`} />\n            </div>\n          )}\n        </For>\n      </div>\n    </TreeContext.Provider>\n  );\n}\n\nexport default TreeView;\n"],"names":["TreeContext","createContext","TreeNode","props","ctx","useContext","nodeId","item","id","path","resolvedChildren","children","loadedChildren","isLazy","hasLoader","hasChildren","hasChildNodes","length","isOpen","expandedIds","includes","isSelected","selectedIds","isLoading","loadingIds","onLabelClick","ensureLoaded","toggleExpanded","selectable","toggleSelected","onKeyDown","event","key","preventDefault","setOpen","_el$","_tmpl$3","_el$2","firstChild","_el$4","$$keydown","$$click","_$insert","_$createComponent","Show","when","checkboxes","_el$3","_tmpl$","addEventListener","e","stopPropagation","_$effect","_$setAttribute","label","checked","fallback","Icon","name","listIcon","size","_$memo","nodeIcon","opened","closed","fill","_c$","renderLabel","_el$5","_tmpl$2","_tmpl$4","For","each","child","idx","_p$","_v$","cn","_v$2","undefined","_v$3","_$className","t","a","TreeView","merged","mergeProps","data","defaultExpanded","defaultSelected","local","rest","splitProps","setLoadedChildren","createSignal","setLoadingIds","setExpandedIds","createControllableState","value","expanded","defaultValue","onChange","next","onExpandedChange","lastToggled","setSelectedIds","selected","changed","onSelectedChange","contextValue","prev","filter","x","open","has","loadChildren","then","finally","Provider","_el$7","_tmpl$5","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","class","node","_el$8","_tmpl$6","_$delegateEvents"],"mappings":"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"}
+{"version":3,"file":"treeView.js","sources":["../../../../src/components/dataDisplay/treeView/treeView.tsx"],"sourcesContent":["import { type Accessor, type JSX, For, Show, createContext, createSignal, mergeProps, splitProps, useContext } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Icon } from \"../../base/icon\";\nimport { createControllableState } from \"../../../primitives/createControllableState\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ITreeNodeItem {\n  /** Stable identifier. Falls back to the positional path when omitted. */\n  id?: string;\n  label: string;\n  children?: ITreeNodeItem[];\n  /** Hint that the node is expandable even before its children are loaded. */\n  hasChildren?: boolean;\n}\n\nexport interface TreeViewProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  nodeIcon?: { opened?: string; closed?: string };\n  listIcon?: string;\n  data: ITreeNodeItem[];\n  expanded?: string[];\n  defaultExpanded?: string[];\n  onExpandedChange?: (expanded: string[]) => void;\n  selected?: string[];\n  defaultSelected?: string[];\n  /** Reports the full selection plus, for user toggles, the node that just changed. */\n  onSelectedChange?: (selected: string[], changed?: { id: string; selected: boolean }) => void;\n  selectable?: boolean;\n  checkboxes?: boolean;\n  renderLabel?: (item: ITreeNodeItem, nodeId: string) => JSX.Element;\n  loadChildren?: (item: ITreeNodeItem, nodeId: string) => Promise<ITreeNodeItem[]>;\n  /** Test id of the root `<div>`; `tree-view` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLDivElement>;\n}\n\ninterface TreeContextValue {\n  expandedIds: Accessor<string[]>;\n  selectedIds: Accessor<string[]>;\n  loadedChildren: Accessor<Record<string, ITreeNodeItem[]>>;\n  loadingIds: Accessor<string[]>;\n  toggleExpanded: (id: string) => void;\n  setOpen: (id: string, open: boolean) => void;\n  toggleSelected: (id: string) => void;\n  ensureLoaded: (item: ITreeNodeItem, nodeId: string) => void;\n  selectable: boolean;\n  checkboxes: boolean;\n  nodeIcon: { opened?: string; closed?: string };\n  listIcon: string;\n  renderLabel: ((item: ITreeNodeItem, nodeId: string) => JSX.Element) | undefined;\n  hasLoader: boolean;\n}\n\nconst TreeContext = createContext<TreeContextValue>();\n\nfunction TreeNode(props: { item: ITreeNodeItem; path: string }): JSX.Element {\n  const ctx = useContext(TreeContext)!;\n  const nodeId = (): string => props.item.id ?? props.path;\n  const resolvedChildren = (): ITreeNodeItem[] | undefined => props.item.children ?? ctx.loadedChildren()[nodeId()];\n  const isLazy = (): boolean => ctx.hasLoader && (!!props.item.hasChildren || !!ctx.loadedChildren()[nodeId()]);\n  const hasChildNodes = (): boolean => (!!resolvedChildren() && (resolvedChildren()?.length ?? 0) > 0) || isLazy();\n  const isOpen = (): boolean => ctx.expandedIds().includes(nodeId());\n  const isSelected = (): boolean => ctx.selectedIds().includes(nodeId());\n  const isLoading = (): boolean => ctx.loadingIds().includes(nodeId());\n\n  const onLabelClick = (): void => {\n    if (hasChildNodes()) {\n      if (!isOpen()) ctx.ensureLoaded(props.item, nodeId());\n      ctx.toggleExpanded(nodeId());\n    }\n    if (ctx.selectable) ctx.toggleSelected(nodeId());\n  };\n\n  const onKeyDown: JSX.EventHandler<HTMLSpanElement, KeyboardEvent> = (event) => {\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      onLabelClick();\n    } else if (event.key === \"ArrowRight\" && hasChildNodes()) {\n      ctx.ensureLoaded(props.item, nodeId());\n      ctx.setOpen(nodeId(), true);\n    } else if (event.key === \"ArrowLeft\" && hasChildNodes()) {\n      ctx.setOpen(nodeId(), false);\n    }\n  };\n\n  return (\n    <div\n      class={cn(\"smwb-tree__node\", { \"smwb-tree__node_selected\": isSelected() })}\n      role=\"treeitem\"\n      aria-expanded={hasChildNodes() ? isOpen() : undefined}\n      aria-selected={ctx.selectable || ctx.checkboxes ? isSelected() : undefined}\n    >\n      <span class=\"smwb-tree__node__content\" onClick={onLabelClick} onKeyDown={onKeyDown} tabindex={0} role=\"button\">\n        <Show when={ctx.checkboxes}>\n          <input\n            type=\"checkbox\"\n            class=\"smwb-tree__node__checkbox\"\n            checked={isSelected()}\n            onClick={(e) => e.stopPropagation()}\n            onChange={() => ctx.toggleSelected(nodeId())}\n            aria-label={props.item.label}\n          />\n        </Show>\n        <span class=\"smwb-tree__node__label\">\n          <Show when={hasChildNodes()} fallback={<Icon name={ctx.listIcon} size={20} />}>\n            <Icon name={isOpen() ? ctx.nodeIcon.opened ?? \"folder_open\" : ctx.nodeIcon.closed ?? \"folder\"} fill={1} size={20} />\n          </Show>\n          {ctx.renderLabel ? ctx.renderLabel(props.item, nodeId()) : props.item.label}\n        </span>\n      </span>\n      <Show when={hasChildNodes() && isOpen()}>\n        <div role=\"group\">\n          <Show\n            when={!(isLoading() && !resolvedChildren())}\n            fallback={\n              <div class=\"smwb-tree__node__loading\" role=\"status\">\n                Загрузка…\n              </div>\n            }\n          >\n            <For each={resolvedChildren() ?? []}>\n              {(child, idx) => <TreeNode item={child} path={`${props.path}.${idx()}`} />}\n            </For>\n          </Show>\n        </div>\n      </Show>\n    </div>\n  );\n}\n\nexport function TreeView(props: TreeViewProps): JSX.Element {\n  const merged = mergeProps(\n    {\n      listIcon: \"draft\",\n      nodeIcon: { closed: \"folder\", opened: \"folder_open\" } as { opened?: string; closed?: string },\n      data: [] as ITreeNodeItem[],\n      defaultExpanded: [] as string[],\n      defaultSelected: [] as string[],\n      selectable: false,\n      checkboxes: false,\n    },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"class\",\n    \"listIcon\",\n    \"nodeIcon\",\n    \"data\",\n    \"expanded\",\n    \"defaultExpanded\",\n    \"onExpandedChange\",\n    \"selected\",\n    \"defaultSelected\",\n    \"onSelectedChange\",\n    \"selectable\",\n    \"checkboxes\",\n    \"renderLabel\",\n    \"loadChildren\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [loadedChildren, setLoadedChildren] = createSignal<Record<string, ITreeNodeItem[]>>({});\n  const [loadingIds, setLoadingIds] = createSignal<string[]>([]);\n  const [expandedIds, setExpandedIds] = createControllableState<string[]>({\n    value: () => local.expanded,\n    defaultValue: local.defaultExpanded,\n    onChange: (next) => local.onExpandedChange?.(next),\n  });\n  let lastToggled: { id: string; selected: boolean } | undefined;\n  const [selectedIds, setSelectedIds] = createControllableState<string[]>({\n    value: () => local.selected,\n    defaultValue: local.defaultSelected,\n    onChange: (next) => {\n      // createControllableState calls onChange synchronously from the setter,\n      // so lastToggled still refers to the toggle that caused this change.\n      const changed = lastToggled;\n      lastToggled = undefined;\n      local.onSelectedChange?.(next, changed);\n    },\n  });\n\n  const toggleExpanded = (id: string): void =>\n    setExpandedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n\n  const setOpen = (id: string, open: boolean): void =>\n    setExpandedIds((prev) => {\n      const has = prev.includes(id);\n      if (open && !has) return [...prev, id];\n      if (!open && has) return prev.filter((x) => x !== id);\n      return prev;\n    });\n\n  const toggleSelected = (id: string): void => {\n    lastToggled = { id, selected: !selectedIds().includes(id) };\n    setSelectedIds((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));\n  };\n\n  const ensureLoaded = (item: ITreeNodeItem, nodeId: string): void => {\n    if (!local.loadChildren || loadedChildren()[nodeId] || (item.children && item.children.length > 0)) return;\n    setLoadingIds((prev) => (prev.includes(nodeId) ? prev : [...prev, nodeId]));\n    void local\n      .loadChildren(item, nodeId)\n      .then((children) => setLoadedChildren((prev) => ({ ...prev, [nodeId]: children })))\n      .finally(() => setLoadingIds((prev) => prev.filter((x) => x !== nodeId)));\n  };\n\n  const contextValue: TreeContextValue = {\n    expandedIds,\n    selectedIds,\n    loadedChildren,\n    loadingIds,\n    toggleExpanded,\n    setOpen,\n    toggleSelected,\n    ensureLoaded,\n    get selectable() {\n      return local.selectable;\n    },\n    get checkboxes() {\n      return local.checkboxes;\n    },\n    get nodeIcon() {\n      return local.nodeIcon;\n    },\n    get listIcon() {\n      return local.listIcon;\n    },\n    get renderLabel() {\n      return local.renderLabel;\n    },\n    get hasLoader() {\n      return !!local.loadChildren;\n    },\n  };\n\n  return (\n    <TreeContext.Provider value={contextValue}>\n      <div\n        {...rest}\n        data-testid={local[\"data-testid\"] ?? \"tree-view\"}\n        ref={mergeRefs(local.ref)}\n        role=\"tree\"\n        class={cn(\"smwb-tree\", local.class)}\n      >\n        <For each={local.data}>\n          {(node, idx) => (\n            <div class=\"smwb-tree__wrapper\" role=\"presentation\">\n              <TreeNode item={node} path={`${idx()}`} />\n            </div>\n          )}\n        </For>\n      </div>\n    </TreeContext.Provider>\n  );\n}\n\nexport default TreeView;\n"],"names":["TreeContext","createContext","TreeNode","props","ctx","useContext","nodeId","item","id","path","resolvedChildren","children","loadedChildren","isLazy","hasLoader","hasChildren","hasChildNodes","length","isOpen","expandedIds","includes","isSelected","selectedIds","isLoading","loadingIds","onLabelClick","ensureLoaded","toggleExpanded","selectable","toggleSelected","onKeyDown","event","key","preventDefault","setOpen","_el$","_tmpl$3","_el$2","firstChild","_el$4","$$keydown","$$click","_$insert","_$createComponent","Show","when","checkboxes","_el$3","_tmpl$","addEventListener","e","stopPropagation","_$effect","_$setAttribute","label","checked","fallback","Icon","name","listIcon","size","_$memo","nodeIcon","opened","closed","fill","_c$","renderLabel","_el$5","_tmpl$2","_tmpl$4","For","each","child","idx","_p$","_v$","cn","_v$2","undefined","_v$3","_$className","t","a","TreeView","merged","mergeProps","data","defaultExpanded","defaultSelected","local","rest","splitProps","setLoadedChildren","createSignal","setLoadingIds","setExpandedIds","createControllableState","value","expanded","defaultValue","onChange","next","onExpandedChange","lastToggled","setSelectedIds","selected","changed","onSelectedChange","contextValue","prev","filter","x","open","has","loadChildren","then","finally","Provider","_el$7","_tmpl$5","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","class","node","_el$8","_tmpl$6","_$delegateEvents"],"mappings":"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"}

package/dist/components/dataDisplay/typography/typography.js

@@ -1,10 +1,11 @@
-import { createComponent as i, Dynamic as l, mergeProps as m } from "solid-js/web";
+import { createComponent as m, Dynamic as i, mergeProps as l } from "solid-js/web";
 import '../../../assets/styles/less/components/typography/typography.entry.css';import '../../../assets/styles/less/tokens.entry.css';/* empty css                                     */
 /* empty css                                                               */
 import { mergeProps as y, splitProps as g } from "solid-js";
 import c from "clsx";
 import { mergeRefs as h } from "../../../primitives/mergeRefs.js";
-const u = {
+import { mergeStyle as u } from "../../../primitives/mergeStyle.js";
+const b = {
   h1: "h1",
   h2: "h2",
   h3: "h3",
@@ -20,44 +21,39 @@ const u = {
   overline: "span",
   button: "span"
 };
-function $(n) {
-  const p = y({
+function B(e) {
+  const n = y({
     variant: "body1",
     color: "inherit"
-  }, n), [t, s] = g(p, ["variant", "color", "align", "gutterBottom", "noWrap", "lines", "tabularNums", "component", "class", "style", "children", "ref"]), o = () => t.lines !== void 0 && t.lines > 0, a = () => {
-    if (!o()) return t.style;
-    const r = String(t.lines);
-    return typeof t.style == "string" ? `${t.style};--smwb-typography-lines:${r}` : {
-      ...t.style,
-      "--smwb-typography-lines": r
-    };
-  };
-  return i(l, m({
+  }, e), [r, p] = g(n, ["variant", "color", "align", "gutterBottom", "noWrap", "lines", "tabularNums", "component", "class", "style", "children", "ref"]), t = () => r.lines !== void 0 && r.lines > 0, a = () => u(r.style, {
+    "--smwb-typography-lines": t() ? String(r.lines) : void 0
+  });
+  return m(i, l({
     get component() {
-      return t.component ?? u[t.variant];
+      return r.component ?? b[r.variant];
     },
-    ref(r) {
-      var e = h(t.ref);
-      typeof e == "function" && e(r);
+    ref(s) {
+      var o = h(r.ref);
+      typeof o == "function" && o(s);
     },
     get class() {
-      return c("smwb-typography", `smwb-typography_${t.variant}`, t.color !== "inherit" && `smwb-typography_color-${t.color}`, t.align && `smwb-typography_align-${t.align}`, {
-        "smwb-typography_gutter": t.gutterBottom,
-        "smwb-typography_nowrap": t.noWrap,
-        "smwb-typography_clamp": o(),
-        "smwb-typography_tabular-nums": t.tabularNums
-      }, t.class);
+      return c("smwb-typography", `smwb-typography_${r.variant}`, r.color !== "inherit" && `smwb-typography_color-${r.color}`, r.align && `smwb-typography_align-${r.align}`, {
+        "smwb-typography_gutter": r.gutterBottom,
+        "smwb-typography_nowrap": r.noWrap,
+        "smwb-typography_clamp": t(),
+        "smwb-typography_tabular-nums": r.tabularNums
+      }, r.class);
     },
     get style() {
       return a();
     }
-  }, s, {
+  }, p, {
     get children() {
-      return t.children;
+      return r.children;
     }
   }));
 }
 export {
-  $ as Typography
+  B as Typography
 };
 //# sourceMappingURL=typography.js.map

package/dist/components/dataDisplay/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sources":["../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type TypographyVariant =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"subtitle1\"\n  | \"subtitle2\"\n  | \"body1\"\n  | \"body2\"\n  | \"caption\"\n  | \"overline\"\n  | \"button\";\n\nexport type TypographyColor =\n  | \"inherit\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"textPrimary\"\n  | \"textSecondary\"\n  | \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, string> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  // A subtitle is not a heading: as h6 it would break the page's outline.\n  subtitle1: \"p\",\n  subtitle2: \"p\",\n  body1: \"p\",\n  body2: \"p\",\n  caption: \"span\",\n  overline: \"span\",\n  button: \"span\",\n};\n\nexport interface TypographyProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: TypographyVariant;\n  color?: TypographyColor;\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Add a bottom margin (block rhythm). */\n  gutterBottom?: boolean;\n  /** Truncate with an ellipsis on a single line. */\n  noWrap?: boolean;\n  /** Truncate with an ellipsis after this many lines. */\n  lines?: number;\n  /** Digits of equal width (`tabular-nums`), so figures line up in KPIs and tables. */\n  tabularNums?: boolean;\n  /** Render as a different element. */\n  component?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Typography(props: ParentProps<TypographyProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"body1\" as TypographyVariant, color: \"inherit\" as TypographyColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"variant\",\n    \"color\",\n    \"align\",\n    \"gutterBottom\",\n    \"noWrap\",\n    \"lines\",\n    \"tabularNums\",\n    \"component\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const clamped = (): boolean => local.lines !== undefined && local.lines > 0;\n  // The line count travels as a custom property, merged into the caller's style.\n  const style = (): JSX.CSSProperties | string | undefined => {\n    if (!clamped()) return local.style;\n    const lines = String(local.lines);\n    if (typeof local.style === \"string\") return `${local.style};--smwb-typography-lines:${lines}`;\n    return { ...local.style, \"--smwb-typography-lines\": lines };\n  };\n\n  return (\n    <Dynamic\n      component={local.component ?? defaultTag[local.variant]}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-typography\",\n        `smwb-typography_${local.variant}`,\n        local.color !== \"inherit\" && `smwb-typography_color-${local.color}`,\n        local.align && `smwb-typography_align-${local.align}`,\n        {\n          \"smwb-typography_gutter\": local.gutterBottom,\n          \"smwb-typography_nowrap\": local.noWrap,\n          \"smwb-typography_clamp\": clamped(),\n          \"smwb-typography_tabular-nums\": local.tabularNums,\n        },\n        local.class\n      )}\n      style={style()}\n      {...rest}\n    >\n      {local.children}\n    </Dynamic>\n  );\n}\n\nexport default Typography;\n"],"names":["defaultTag","h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","caption","overline","button","Typography","props","merged","mergeProps","variant","color","local","rest","splitProps","clamped","lines","undefined","style","String","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","align","gutterBottom","noWrap","tabularNums","class","children"],"mappings":";;;;;;AAkCA,MAAMA,IAAgD;AAAA,EACpDC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA;AAAA,EAEJC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,OAAO;AAAA,EACPC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,UAAU;AAAA,EACVC,QAAQ;AACV;AAmBO,SAASC,EAAWC,GAAkD;AAC3E,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,IAA8BC,OAAO;AAAA,EAAA,GAAgCJ,CAAK,GACzG,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,WACA,SACA,SACA,gBACA,UACA,SACA,eACA,aACA,SACA,SACA,YACA,KAAK,CACN,GAEKO,IAAUA,MAAeH,EAAMI,UAAUC,UAAaL,EAAMI,QAAQ,GAEpEE,IAAQA,MAA8C;AAC1D,QAAI,CAACH,EAAAA,EAAW,QAAOH,EAAMM;AAC7B,UAAMF,IAAQG,OAAOP,EAAMI,KAAK;AAChC,WAAI,OAAOJ,EAAMM,SAAU,WAAiB,GAAGN,EAAMM,KAAK,4BAA4BF,CAAK,KACpF;AAAA,MAAE,GAAGJ,EAAMM;AAAAA,MAAO,2BAA2BF;AAAAA,IAAAA;AAAAA,EACtD;AAEA,SAAAI,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEX,EAAMW,aAAa/B,EAAWoB,EAAMF,OAAO;AAAA,IAAC;AAAA,IAAAc,IAAAC,GAAA;AAAA,UAAAC,IAClDC,EAAUf,EAAMY,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAClBG,EACL,mBACA,mBAAmBhB,EAAMF,OAAO,IAChCE,EAAMD,UAAU,aAAa,yBAAyBC,EAAMD,KAAK,IACjEC,EAAMiB,SAAS,yBAAyBjB,EAAMiB,KAAK,IACnD;AAAA,QACE,0BAA0BjB,EAAMkB;AAAAA,QAChC,0BAA0BlB,EAAMmB;AAAAA,QAChC,yBAAyBhB,EAAAA;AAAAA,QACzB,gCAAgCH,EAAMoB;AAAAA,MAAAA,GAExCpB,EAAMqB,KACR;AAAA,IAAC;AAAA,IAAA,IACDf,QAAK;AAAA,aAAEA,EAAAA;AAAAA,IAAO;AAAA,EAAA,GACVL,GAAI;AAAA,IAAA,IAAAqB,WAAA;AAAA,aAEPtB,EAAMsB;AAAAA,IAAQ;AAAA,EAAA,CAAA,CAAA;AAGrB;"}
+{"version":3,"file":"typography.js","sources":["../../../../src/components/dataDisplay/typography/typography.tsx"],"sourcesContent":["import { type JSX, type ParentProps, mergeProps, splitProps } from \"solid-js\";\nimport { Dynamic } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport type TypographyVariant =\n  | \"h1\"\n  | \"h2\"\n  | \"h3\"\n  | \"h4\"\n  | \"h5\"\n  | \"h6\"\n  | \"subtitle1\"\n  | \"subtitle2\"\n  | \"body1\"\n  | \"body2\"\n  | \"caption\"\n  | \"overline\"\n  | \"button\";\n\nexport type TypographyColor =\n  | \"inherit\"\n  | \"primary\"\n  | \"secondary\"\n  | \"error\"\n  | \"success\"\n  | \"warning\"\n  | \"info\"\n  | \"textPrimary\"\n  | \"textSecondary\"\n  | \"disabled\";\n\nconst defaultTag: Record<TypographyVariant, string> = {\n  h1: \"h1\",\n  h2: \"h2\",\n  h3: \"h3\",\n  h4: \"h4\",\n  h5: \"h5\",\n  h6: \"h6\",\n  // A subtitle is not a heading: as h6 it would break the page's outline.\n  subtitle1: \"p\",\n  subtitle2: \"p\",\n  body1: \"p\",\n  body2: \"p\",\n  caption: \"span\",\n  overline: \"span\",\n  button: \"span\",\n};\n\nexport interface TypographyProps extends JSX.HTMLAttributes<HTMLElement> {\n  variant?: TypographyVariant;\n  color?: TypographyColor;\n  align?: \"left\" | \"center\" | \"right\" | \"justify\";\n  /** Add a bottom margin (block rhythm). */\n  gutterBottom?: boolean;\n  /** Truncate with an ellipsis on a single line. */\n  noWrap?: boolean;\n  /** Truncate with an ellipsis after this many lines. */\n  lines?: number;\n  /** Digits of equal width (`tabular-nums`), so figures line up in KPIs and tables. */\n  tabularNums?: boolean;\n  /** Render as a different element. */\n  component?: string;\n  ref?: Ref<HTMLElement>;\n}\n\nexport function Typography(props: ParentProps<TypographyProps>): JSX.Element {\n  const merged = mergeProps({ variant: \"body1\" as TypographyVariant, color: \"inherit\" as TypographyColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"variant\",\n    \"color\",\n    \"align\",\n    \"gutterBottom\",\n    \"noWrap\",\n    \"lines\",\n    \"tabularNums\",\n    \"component\",\n    \"class\",\n    \"style\",\n    \"children\",\n    \"ref\",\n  ]);\n\n  const clamped = (): boolean => local.lines !== undefined && local.lines > 0;\n  // The line count travels as a custom property, merged into the caller's style.\n  const style = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(local.style, { \"--smwb-typography-lines\": clamped() ? String(local.lines) : undefined });\n\n  return (\n    <Dynamic\n      component={local.component ?? defaultTag[local.variant]}\n      ref={mergeRefs(local.ref)}\n      class={cn(\n        \"smwb-typography\",\n        `smwb-typography_${local.variant}`,\n        local.color !== \"inherit\" && `smwb-typography_color-${local.color}`,\n        local.align && `smwb-typography_align-${local.align}`,\n        {\n          \"smwb-typography_gutter\": local.gutterBottom,\n          \"smwb-typography_nowrap\": local.noWrap,\n          \"smwb-typography_clamp\": clamped(),\n          \"smwb-typography_tabular-nums\": local.tabularNums,\n        },\n        local.class\n      )}\n      style={style()}\n      {...rest}\n    >\n      {local.children}\n    </Dynamic>\n  );\n}\n\nexport default Typography;\n"],"names":["defaultTag","h1","h2","h3","h4","h5","h6","subtitle1","subtitle2","body1","body2","caption","overline","button","Typography","props","merged","mergeProps","variant","color","local","rest","splitProps","clamped","lines","undefined","style","mergeStyle","String","_$createComponent","Dynamic","_$mergeProps","component","ref","r$","_ref$","mergeRefs","cn","align","gutterBottom","noWrap","tabularNums","class","children"],"mappings":";;;;;;;AAmCA,MAAMA,IAAgD;AAAA,EACpDC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA,EACJC,IAAI;AAAA;AAAA,EAEJC,WAAW;AAAA,EACXC,WAAW;AAAA,EACXC,OAAO;AAAA,EACPC,OAAO;AAAA,EACPC,SAAS;AAAA,EACTC,UAAU;AAAA,EACVC,QAAQ;AACV;AAmBO,SAASC,EAAWC,GAAkD;AAC3E,QAAMC,IAASC,EAAW;AAAA,IAAEC,SAAS;AAAA,IAA8BC,OAAO;AAAA,EAAA,GAAgCJ,CAAK,GACzG,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,WACA,SACA,SACA,gBACA,UACA,SACA,eACA,aACA,SACA,SACA,YACA,KAAK,CACN,GAEKO,IAAUA,MAAeH,EAAMI,UAAUC,UAAaL,EAAMI,QAAQ,GAEpEE,IAAQA,MACZC,EAAWP,EAAMM,OAAO;AAAA,IAAE,2BAA2BH,EAAAA,IAAYK,OAAOR,EAAMI,KAAK,IAAIC;AAAAA,EAAAA,CAAW;AAEpG,SAAAI,EACGC,GAAOC,EAAA;AAAA,IAAA,IACNC,YAAS;AAAA,aAAEZ,EAAMY,aAAahC,EAAWoB,EAAMF,OAAO;AAAA,IAAC;AAAA,IAAAe,IAAAC,GAAA;AAAA,UAAAC,IAClDC,EAAUhB,EAAMa,GAAG;AAAC,aAAAE,KAAA,cAAAA,EAAAD,CAAA;AAAA,IAAA;AAAA,IAAA,IAAA,QAAA;AAAA,aAClBG,EACL,mBACA,mBAAmBjB,EAAMF,OAAO,IAChCE,EAAMD,UAAU,aAAa,yBAAyBC,EAAMD,KAAK,IACjEC,EAAMkB,SAAS,yBAAyBlB,EAAMkB,KAAK,IACnD;AAAA,QACE,0BAA0BlB,EAAMmB;AAAAA,QAChC,0BAA0BnB,EAAMoB;AAAAA,QAChC,yBAAyBjB,EAAAA;AAAAA,QACzB,gCAAgCH,EAAMqB;AAAAA,MAAAA,GAExCrB,EAAMsB,KACR;AAAA,IAAC;AAAA,IAAA,IACDhB,QAAK;AAAA,aAAEA,EAAAA;AAAAA,IAAO;AAAA,EAAA,GACVL,GAAI;AAAA,IAAA,IAAAsB,WAAA;AAAA,aAEPvB,EAAMuB;AAAAA,IAAQ;AAAA,EAAA,CAAA,CAAA;AAGrB;"}

package/dist/components/feedBack/emptyState/emptyState.d.ts

@@ -15,6 +15,8 @@ export interface EmptyStateProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>
     variant?: "block" | "inline";
     /** `small`: tighter, for a narrow column or a card. */
     size?: "small" | "medium";
+    /** Test id of the root `<div>`; `empty-state` unless given. */
+    "data-testid"?: string | undefined;
     ref?: Ref<HTMLDivElement>;
 }
 /**

package/dist/components/feedBack/emptyState/emptyState.js

@@ -5,7 +5,7 @@ import { mergeProps as b, splitProps as z, children as m, Show as a } from "soli
 import P from "clsx";
 import { mergeRefs as k } from "../../../primitives/mergeRefs.js";
 import { Icon as I } from "../../base/icon/icon.js";
-var S = /* @__PURE__ */ l("<span class=smwb-empty-state__icon aria-hidden=true>"), A = /* @__PURE__ */ l("<div class=smwb-empty-state__title>"), C = /* @__PURE__ */ l("<div class=smwb-empty-state__description>"), E = /* @__PURE__ */ l("<div class=smwb-empty-state__actions>"), N = /* @__PURE__ */ l("<div data-testid=empty-state>");
+var S = /* @__PURE__ */ l("<span class=smwb-empty-state__icon aria-hidden=true>"), A = /* @__PURE__ */ l("<div class=smwb-empty-state__title>"), C = /* @__PURE__ */ l("<div class=smwb-empty-state__description>"), E = /* @__PURE__ */ l("<div class=smwb-empty-state__actions>"), N = /* @__PURE__ */ l("<div>");
 const x = {
   block: {
     medium: 32,
@@ -17,26 +17,30 @@ const x = {
   }
 }, o = (n) => n != null && n !== !1 && n !== "" && !(Array.isArray(n) && n.length === 0);
 function F(n) {
-  const g = b({
+  const _ = b({
     variant: "block",
     size: "medium"
-  }, n), [e, f] = z(g, ["class", "title", "icon", "actions", "variant", "size", "children", "ref"]), c = m(() => e.icon), p = m(() => e.title), d = m(() => e.children), u = m(() => e.actions), h = () => {
+  }, n), [t, f] = z(_, ["class", "title", "icon", "actions", "variant", "size", "children", "ref", "data-testid"]), c = m(() => t.icon), p = m(() => t.title), d = m(() => t.children), u = m(() => t.actions), h = () => {
     const r = c();
     return typeof r == "string" ? r : void 0;
   };
   return (() => {
-    var r = N(), _ = k(e.ref);
-    return typeof _ == "function" && v(_, r), w(r, y(f, {
+    var r = N(), g = k(t.ref);
+    return typeof g == "function" && v(g, r), w(r, y({
+      get "data-testid"() {
+        return t["data-testid"] ?? "empty-state";
+      }
+    }, f, {
       get class() {
-        return P("smwb-empty-state", `smwb-empty-state_${e.variant}`, `smwb-empty-state_${e.size}`, e.class);
+        return P("smwb-empty-state", `smwb-empty-state_${t.variant}`, `smwb-empty-state_${t.size}`, t.class);
       }
     }), !1, !0), s(r, i(a, {
       get when() {
         return o(c());
       },
       get children() {
-        var t = S();
-        return s(t, i(a, {
+        var e = S();
+        return s(e, i(a, {
           get when() {
             return h();
           },
@@ -48,34 +52,34 @@ function F(n) {
               return $();
             },
             get size() {
-              return x[e.variant][e.size];
+              return x[t.variant][t.size];
             }
           })
-        })), t;
+        })), e;
       }
     }), null), s(r, i(a, {
       get when() {
         return o(p());
       },
       get children() {
-        var t = A();
-        return s(t, p), t;
+        var e = A();
+        return s(e, p), e;
       }
     }), null), s(r, i(a, {
       get when() {
         return o(d());
       },
       get children() {
-        var t = C();
-        return s(t, d), t;
+        var e = C();
+        return s(e, d), e;
       }
     }), null), s(r, i(a, {
       get when() {
         return o(u());
       },
       get children() {
-        var t = E();
-        return s(t, u), t;
+        var e = E();
+        return s(e, u), e;
       }
     }), null), r;
   })();