@smwb/ui-solid 0.8.0 → 0.9.0

package/README.md

@@ -44,6 +44,92 @@ function App() {
 In ESM builds each imported component **pulls in its own CSS automatically** (tree-shakeable) —
 nothing else to import for the default theme.
 
+## Icons
+
+`<Icon>` renders one of two icon sets under the **same name**, so switching sets never touches
+component code:
+
+- **smwb SVG set** — ~250 contour icons shipped inside the package, one ES module each.
+- **Google Material Symbols** — the webfont this library has always used (`<link>` it yourself).
+
+```tsx
+import { Icon } from "@smwb/ui-solid";
+
+<Icon name="arrow_right_alt" size={24} color="primary" />;
+```
+
+Names are the canonical Material Symbols names, and lookup is forgiving: `arrow_right_alt`,
+`arrowRightAlt` and `arrow-right-alt` all resolve, as do per-icon aliases (`trash` → `delete`,
+`cog` → `settings`, `magnifier` → `search`).
+
+### Bundling only the icons you use
+
+Icons are **not** registered by default. Register the handful you render — every other icon is
+dropped by your bundler:
+
+```ts
+import { registerIcons } from "@smwb/ui-solid";
+import { add, close, search } from "@smwb/ui-solid/icons";
+
+registerIcons([add, close, search]);
+```
+
+Three icons in, three icons bundled (~0.4 kB). Or skip the registry entirely and pass the
+definition straight to the prop:
+
+```tsx
+import { arrowRightAlt } from "@smwb/ui-solid/icons";
+
+<Icon name={arrowRightAlt} />;
+```
+
+Deep imports work too (`@smwb/ui-solid/icons/arrowRightAlt`), and `@smwb/ui-solid/icons/all` exports
+`registerAllIcons()` for docs sites and icon pickers — that one pulls in the whole set on purpose.
+
+### Choosing the source
+
+| `source` | Behaviour |
+| --- | --- |
+| `auto` (default) | smwb SVG when the name is registered, Material Symbols otherwise. |
+| `smwb` | Always the SVG set; an unregistered name renders an empty box and warns. |
+| `google` | Always the Material Symbols font. |
+
+Set it per icon (`<Icon source="google" …>`), per subtree, or app-wide:
+
+```tsx
+import { configureIcons, IconProvider } from "@smwb/ui-solid";
+import { add, close } from "@smwb/ui-solid/icons";
+
+configureIcons({ source: "smwb" });          // app-wide default
+
+<IconProvider source="smwb" icons={[add, close]}>
+  <App />
+</IconProvider>;
+```
+
+Because `auto` falls back to the font, upgrading changes nothing until you register icons.
+
+### Appearance
+
+`size` takes a pixel number or any CSS length (`size="1.5rem"`). `color` takes a semantic token
+(`primary`, `error`, …) and otherwise inherits `currentColor`. For the SVG set `weight` maps to
+the stroke width (400 → 2px, 700 → 3px); `fill` and `grade` are Material Symbols axes and are
+ignored by the contour set.
+
+### Custom and overridden icons
+
+An icon is plain data, so your own artwork registers the same way — and re-registering a shipped
+name replaces it everywhere:
+
+```ts
+registerIcons({ name: "logo", body: '<circle cx="12" cy="12" r="9"/>' });
+registerIcons({ name: "delete", body: "<path d='…'/>" }); // overrides the shipped one
+```
+
+Browse the whole set in [Storybook](https://summerweb.ru/ui-solid/) under **UI/Base/Icon → All Icons** — click any
+icon to copy its name. The set is generated from `icons/data/*.json` in the repo
+(`npm run icons:generate`).
+
 ## Styles
 
 Three ways to get the CSS, pick one:

package/dist/assets/styles/less/components/icon/icon.entry.css

@@ -1 +1 @@
-.smwb-icon__wrapper{display:inline-flex;align-items:center;justify-content:center}.smwb-icon__wrapper.smwb-icon_color-primary{color:var(--smui-primaryColor)}.smwb-icon__wrapper.smwb-icon_color-secondary{color:var(--smui-secondaryColor)}.smwb-icon__wrapper.smwb-icon_color-error{color:var(--smui-errorColor)}.smwb-icon__wrapper.smwb-icon_color-success{color:var(--smui-successColor)}.smwb-icon__wrapper.smwb-icon_color-warning{color:var(--smui-warningColor)}.smwb-icon__wrapper.smwb-icon_color-info{color:var(--smui-infoColor)}.smwb-icon__wrapper.smwb-icon_color-disabled{color:var(--smui-disabledTextColor)}
+.smwb-icon__wrapper{display:inline-flex;align-items:center;justify-content:center}.smwb-icon__wrapper .smwb-icon__svg{display:block;flex-shrink:0}.smwb-icon__wrapper.smwb-icon_color-primary{color:var(--smui-primaryColor)}.smwb-icon__wrapper.smwb-icon_color-secondary{color:var(--smui-secondaryColor)}.smwb-icon__wrapper.smwb-icon_color-error{color:var(--smui-errorColor)}.smwb-icon__wrapper.smwb-icon_color-success{color:var(--smui-successColor)}.smwb-icon__wrapper.smwb-icon_color-warning{color:var(--smui-warningColor)}.smwb-icon__wrapper.smwb-icon_color-info{color:var(--smui-infoColor)}.smwb-icon__wrapper.smwb-icon_color-disabled{color:var(--smui-disabledTextColor)}

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

@@ -1,16 +1,32 @@
 import { type JSX } from "solid-js";
 import { type Ref } from "../../../primitives/mergeRefs";
+import type { IconDefinition, IconSource } from "../../../icons/types";
 export type IconColor = "inherit" | "primary" | "secondary" | "error" | "success" | "warning" | "info" | "disabled";
 export interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {
     /**
-     * Icon name from https://fonts.google.com/icons
-     * Example: name={"arrow_right_alt"}
+     * Icon name — the Google Material Symbols name, e.g. `"arrow_right_alt"`.
+     * Lookup is forgiving: `arrowRightAlt` and `arrow-right-alt` resolve too, as
+     * do an icon's aliases.
+     *
+     * An {@link IconDefinition} may be passed instead, which skips the registry
+     * entirely and is the most bundle-friendly form:
+     *
+     * ```tsx
+     * import { arrowRightAlt } from "@smwb/ui-solid/icons";
+     * <Icon name={arrowRightAlt} />
+     * ```
+     */
+    name: string | IconDefinition;
+    /**
+     * Material Symbols weight axis (100-700). For the smwb SVG set it maps to the
+     * stroke width: 400 → 2px, 700 → 3px, 100 → 1px.
      */
-    name: string;
     weight?: number;
+    /** Material Symbols FILL axis. Not used by the smwb SVG set (it is a contour set). */
     fill?: 0 | 1;
     /** Pixel number or any CSS length (e.g. "1.5rem"). */
     size?: number | string;
+    /** Material Symbols GRAD axis. Not used by the smwb SVG set. */
     grade?: number;
     /**
      * Semantic color token; `inherit` (default) keeps the text color. Any string
@@ -23,6 +39,8 @@ export interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {
      * otherwise it is `aria-hidden` (decorative).
      */
     title?: string;
+    /** Overrides the icon source for this icon only. See {@link IconSource}. */
+    source?: IconSource;
     ref?: Ref<HTMLSpanElement>;
 }
 export declare function Icon(props: IconProps): JSX.Element;

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

@@ -1,27 +1,39 @@
-import { use as p, spread as m, mergeProps as f, insert as g, effect as d, setStyleProperty as u, template as y } from "solid-js/web";
+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 '../../../assets/styles/less/components/icon/icon.entry.css';/* empty css                                                   */
-import { mergeProps as $, splitProps as v } from "solid-js";
-import _ from "clsx";
-import { mergeRefs as b } from "../../../primitives/mergeRefs.js";
-var w = /* @__PURE__ */ y("<span><span class=material-symbols-outlined>");
-const h = ["primary", "secondary", "error", "success", "warning", "info", "disabled"];
-function j(i) {
-  const l = $({
+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 { getIcon as G } from "../../../icons/registry.js";
+import { getIconConfig as x } 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.`));
+}
+function re(s) {
+  const z = B({
     weight: 400,
     fill: 0,
     size: 20,
     grade: 100,
     color: "inherit"
-  }, i), [e, n] = v(l, ["class", "weight", "fill", "size", "grade", "name", "color", "title", "style", "ref"]), r = () => e.title === void 0, a = () => typeof e.color == "string" && h.includes(e.color) ? `smwb-icon_color-${e.color}` : void 0, c = () => typeof e.style == "object" && e.style ? e.style : {};
+  }, 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;
   return (() => {
-    var t = w(), o = t.firstChild, s = b(e.ref);
-    return typeof s == "function" && p(s, t), m(t, f(n, {
+    var r = N(), d = F(e.ref);
+    return typeof d == "function" && j(d, r), L(r, R(I, {
       "data-testid": "icon",
+      get "data-icon-source"() {
+        return i();
+      },
       get role() {
-        return r() ? void 0 : "img";
+        return g() ? void 0 : "img";
       },
       get "aria-hidden"() {
-        return r() ? !0 : void 0;
+        return g() ? !0 : void 0;
       },
       get "aria-label"() {
         return e.title;
@@ -31,17 +43,37 @@ function j(i) {
       },
       get style() {
         return {
-          ...c(),
-          "font-variation-settings": `'FILL' ${e.fill}, 'wght' ${e.weight}, 'GRAD' ${e.grade}, 'opsz' 48`
+          ...O(),
+          ...i() === "google" ? {
+            "font-variation-settings": `'FILL' ${e.fill}, 'wght' ${e.weight}, 'GRAD' ${e.grade}, 'opsz' 48`
+          } : null
         };
       },
       get class() {
-        return _("smwb-icon__wrapper", a(), e.class);
+        return E("smwb-icon__wrapper", C(), e.class);
       }
-    }), !1, !0), g(o, () => e.name), d((z) => u(o, "font-size", typeof e.size == "number" ? `${e.size}px` : e.size)), t;
+    }), !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;
+      })() : (() => {
+        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;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0
+        }), o;
+      })();
+    })()), r;
   })();
 }
 export {
-  j as Icon
+  re 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":["import { type JSX, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\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\nexport interface IconProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Icon name from https://fonts.google.com/icons\n   * Example: name={\"arrow_right_alt\"}\n   */\n  name: string;\n  weight?: number;\n  fill?: 0 | 1;\n  /** Pixel number or any CSS length (e.g. \"1.5rem\"). */\n  size?: number | string;\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  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    \"ref\",\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\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      data-testid=\"icon\"\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        \"font-variation-settings\": `'FILL' ${local.fill}, 'wght' ${local.weight}, 'GRAD' ${local.grade}, 'opsz' 48`,\n      }}\n      class={cn(\"smwb-icon__wrapper\", colorClass(), local.class)}\n    >\n      <span\n        class=\"material-symbols-outlined\"\n        style={{ \"font-size\": typeof local.size === \"number\" ? `${local.size}px` : local.size }}\n      >\n        {local.name}\n      </span>\n    </span>\n  );\n}\n\nexport default Icon;\n"],"names":["COLOR_TOKENS","Icon","props","merged","mergeProps","weight","fill","size","grade","color","local","rest","splitProps","decorative","title","undefined","colorClass","includes","styleObject","style","_el$","_tmpl$","_el$2","firstChild","_ref$","mergeRefs","ref","_$use","_$spread","_$mergeProps","role","cn","class","_$insert","name","_$effect","_$p","_$setStyleProperty"],"mappings":";;;;;;AAOA,MAAMA,IAAsC,CAC1C,WACA,aACA,SACA,WACA,WACA,QACA,UAAU;AA4BL,SAASC,EAAKC,GAA+B;AAClD,QAAMC,IAASC,EACb;AAAA,IAAEC,QAAQ;AAAA,IAAKC,MAAM;AAAA,IAAYC,MAAM;AAAA,IAAuBC,OAAO;AAAA,IAAKC,OAAO;AAAA,EAAA,GACjFP,CACF,GACM,CAACQ,GAAOC,CAAI,IAAIC,EAAWT,GAAQ,CACvC,SACA,UACA,QACA,QACA,SACA,QACA,SACA,SACA,SACA,KAAK,CACN,GAEKU,IAAaA,MAAeH,EAAMI,UAAUC,QAC5CC,IAAaA,MACjB,OAAON,EAAMD,SAAU,YAAYT,EAAaiB,SAASP,EAAMD,KAAK,IAAI,mBAAmBC,EAAMD,KAAK,KAAKM,QACvGG,IAAcA,MAA0B,OAAOR,EAAMS,SAAU,YAAYT,EAAMS,QAAQT,EAAMS,QAAQ,CAAA;AAE7G,UAAA,MAAA;AAAA,QAAAC,IAAAC,EAAAA,GAAAC,IAAAF,EAAAG,YAAAC,IAGSC,EAAUf,EAAMgB,GAAG;AAAC,kBAAAF,KAAA,cAAAG,EAAAH,GAAAJ,CAAA,GAAAQ,EAAAR,GAAAS,EADrBlB,GAAI;AAAA,MAAA,eAEI;AAAA,MAAM,IAClBmB,OAAI;AAAA,eAAEjB,EAAAA,IAAeE,SAAY;AAAA,MAAK;AAAA,MAAA,IAAA,gBAAA;AAAA,eACzBF,EAAAA,IAAe,KAAOE;AAAAA,MAAS;AAAA,MAAA,IAAA,eAAA;AAAA,eAChCL,EAAMI;AAAAA,MAAK;AAAA,MAAA,IACvBA,QAAK;AAAA,eAAEJ,EAAMI;AAAAA,MAAK;AAAA,MAAA,IAClBK,QAAK;AAAA,eAAE;AAAA,UACL,GAAGD,EAAAA;AAAAA,UACH,2BAA2B,UAAUR,EAAMJ,IAAI,YAAYI,EAAML,MAAM,YAAYK,EAAMF,KAAK;AAAA,QAAA;AAAA,MAC/F;AAAA,MAAA,IAAA,QAAA;AAAA,eACMuB,EAAG,sBAAsBf,EAAAA,GAAcN,EAAMsB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAX,GAAA,MAMvDZ,EAAMwB,IAAI,GAAAC,EAAAC,CAAAA,MAAAC,EAAAf,GAAA,aAFW,OAAOZ,EAAMH,QAAS,WAAW,GAAGG,EAAMH,IAAI,OAAOG,EAAMH,IAAI,CAAA,GAAAa;AAAAA,EAAA,GAAA;AAM7F;"}
+{"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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"}

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

@@ -0,0 +1,45 @@
+import { type JSX } from "solid-js";
+import { type IconInput } from "../../../icons/registry";
+import type { IconSource } from "../../../icons/types";
+export interface IconContextValue {
+    /** Icon artwork for this subtree. Falls back to {@link configureIcons}. */
+    source?: IconSource | undefined;
+}
+export declare const IconContext: import("solid-js").Context<IconContextValue | undefined>;
+export interface IconProviderProps extends IconContextValue {
+    /**
+     * Icons to make available to `<Icon name="...">` inside this subtree.
+     *
+     * ```tsx
+     * import { add, close, search } from "@smwb/ui-solid/icons";
+     *
+     * <IconProvider source="smwb" icons={[add, close, search]}>
+     *   <App />
+     * </IconProvider>
+     * ```
+     *
+     * Registration is process-wide (the registry is a module singleton), so the
+     * prop is a convenience for apps that would otherwise call `registerIcons`
+     * at startup — not a scoping mechanism. It is read once, on creation.
+     */
+    icons?: IconInput;
+    children?: JSX.Element;
+}
+/**
+ * Sets the icon source — and optionally registers icons — for a subtree.
+ * `<Icon source>` still wins over the provider, and the provider wins over the
+ * app-wide {@link configureIcons} default.
+ */
+export declare function IconProvider(props: IconProviderProps): JSX.Element;
+/**
+ * Tracks registry/config changes. Subscribing in `onMount` keeps the server
+ * render side-effect free — nothing registers between `renderToString` and
+ * hydration that the mount-time re-read below would miss.
+ */
+export declare function createIconVersion(): () => number;
+/**
+ * Resolves the icon source the way `<Icon>` does: explicit override, then the
+ * nearest {@link IconProvider}, then the app-wide config (`"auto"` by default).
+ */
+export declare function useIconSource(override?: () => IconSource | undefined): () => IconSource;
+export default IconProvider;

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

@@ -0,0 +1,39 @@
+import { createComponent as c } from "solid-js/web";
+import { createContext as i, createSignal as s, onMount as u, onCleanup as m, useContext as f } from "solid-js";
+import { registerIcons as I } from "../../../icons/registry.js";
+import { getIconConfig as a } from "../../../icons/config.js";
+import { getIconVersion as r, subscribeIcons as g } from "../../../icons/store.js";
+const t = i();
+function V(o) {
+  o.icons && I(o.icons);
+  const n = {
+    get source() {
+      return o.source;
+    }
+  };
+  return c(t.Provider, {
+    value: n,
+    get children() {
+      return o.children;
+    }
+  });
+}
+function C() {
+  const [o, n] = s(r());
+  return u(() => {
+    n(r());
+    const e = g(() => n(r()));
+    m(e);
+  }), o;
+}
+function h(o) {
+  const n = f(t), e = C();
+  return () => (e(), o?.() ?? n?.source ?? a().source);
+}
+export {
+  t as IconContext,
+  V as IconProvider,
+  C as createIconVersion,
+  h as useIconSource
+};
+//# sourceMappingURL=iconProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"iconProvider.js","sources":["../../../../src/components/base/icon/iconProvider.tsx"],"sourcesContent":["import { createContext, createSignal, onCleanup, onMount, useContext, type JSX } from \"solid-js\";\nimport { registerIcons, type IconInput } from \"../../../icons/registry\";\nimport { getIconConfig } from \"../../../icons/config\";\nimport { getIconVersion, subscribeIcons } from \"../../../icons/store\";\nimport type { IconSource } from \"../../../icons/types\";\n\nexport interface IconContextValue {\n  /** Icon artwork for this subtree. Falls back to {@link configureIcons}. */\n  source?: IconSource | undefined;\n}\n\nexport const IconContext = createContext<IconContextValue>();\n\nexport interface IconProviderProps extends IconContextValue {\n  /**\n   * Icons to make available to `<Icon name=\"...\">` inside this subtree.\n   *\n   * ```tsx\n   * import { add, close, search } from \"@smwb/ui-solid/icons\";\n   *\n   * <IconProvider source=\"smwb\" icons={[add, close, search]}>\n   *   <App />\n   * </IconProvider>\n   * ```\n   *\n   * Registration is process-wide (the registry is a module singleton), so the\n   * prop is a convenience for apps that would otherwise call `registerIcons`\n   * at startup — not a scoping mechanism. It is read once, on creation.\n   */\n  icons?: IconInput;\n  children?: JSX.Element;\n}\n\n/**\n * Sets the icon source — and optionally registers icons — for a subtree.\n * `<Icon source>` still wins over the provider, and the provider wins over the\n * app-wide {@link configureIcons} default.\n */\nexport function IconProvider(props: IconProviderProps): JSX.Element {\n  // Registered in the component body, not an effect: icons must be in the\n  // registry before children render, on the server as well as the client.\n  if (props.icons) registerIcons(props.icons);\n\n  const value: IconContextValue = {\n    get source() {\n      return props.source;\n    },\n  };\n  return <IconContext.Provider value={value}>{props.children}</IconContext.Provider>;\n}\n\n/**\n * Tracks registry/config changes. Subscribing in `onMount` keeps the server\n * render side-effect free — nothing registers between `renderToString` and\n * hydration that the mount-time re-read below would miss.\n */\nexport function createIconVersion(): () => number {\n  const [version, setVersion] = createSignal(getIconVersion());\n  onMount(() => {\n    setVersion(getIconVersion());\n    const unsubscribe = subscribeIcons(() => setVersion(getIconVersion()));\n    onCleanup(unsubscribe);\n  });\n  return version;\n}\n\n/**\n * Resolves the icon source the way `<Icon>` does: explicit override, then the\n * nearest {@link IconProvider}, then the app-wide config (`\"auto\"` by default).\n */\nexport function useIconSource(override?: () => IconSource | undefined): () => IconSource {\n  const context = useContext(IconContext);\n  const version = createIconVersion();\n  return () => {\n    version();\n    return override?.() ?? context?.source ?? getIconConfig().source;\n  };\n}\n\nexport default IconProvider;\n"],"names":["IconContext","createContext","IconProvider","props","icons","registerIcons","value","source","_$createComponent","Provider","children","createIconVersion","version","setVersion","createSignal","getIconVersion","onMount","unsubscribe","subscribeIcons","onCleanup","useIconSource","override","context","useContext","getIconConfig"],"mappings":";;;;;AAWO,MAAMA,IAAcC,EAAAA;AA2BpB,SAASC,EAAaC,GAAuC;AAGlE,EAAIA,EAAMC,SAAOC,EAAcF,EAAMC,KAAK;AAE1C,QAAME,IAA0B;AAAA,IAC9B,IAAIC,SAAS;AACX,aAAOJ,EAAMI;AAAAA,IACf;AAAA,EAAA;AAEF,SAAAC,EAAQR,EAAYS,UAAQ;AAAA,IAACH,OAAAA;AAAAA,IAAY,IAAAI,WAAA;AAAA,aAAGP,EAAMO;AAAAA,IAAQ;AAAA,EAAA,CAAA;AAC5D;AAOO,SAASC,IAAkC;AAChD,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAaC,GAAgB;AAC3DC,SAAAA,EAAQ,MAAM;AACZH,IAAAA,EAAWE,GAAgB;AAC3B,UAAME,IAAcC,EAAe,MAAML,EAAWE,EAAAA,CAAgB,CAAC;AACrEI,IAAAA,EAAUF,CAAW;AAAA,EACvB,CAAC,GACML;AACT;AAMO,SAASQ,EAAcC,GAA2D;AACvF,QAAMC,IAAUC,EAAWvB,CAAW,GAChCY,IAAUD,EAAAA;AAChB,SAAO,OACLC,EAAAA,GACOS,IAAAA,KAAgBC,GAASf,UAAUiB,IAAgBjB;AAE9D;"}

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

@@ -1,2 +1,4 @@
 export { Icon, default } from "./icon";
 export type { IconProps, IconColor } from "./icon";
+export { IconProvider, IconContext, useIconSource, createIconVersion } from "./iconProvider";
+export type { IconProviderProps, IconContextValue } from "./iconProvider";

package/dist/components/clickAwayListener/clickAwayListener.js

@@ -1,12 +1,13 @@
 import { memo as f } from "solid-js/web";
 import { mergeProps as E, children as v, onMount as h, onCleanup as s, createEffect as p } from "solid-js";
+import { isEventInForeignOverlay as g } from "../../primitives/overlayLayer.js";
 function a(o) {
   return o.substring(2).toLowerCase();
 }
 function L(o, n) {
   return n.documentElement.clientWidth < o.clientX || n.documentElement.clientHeight < o.clientY;
 }
-function A(o) {
+function T(o) {
   const n = E({
     mouseEvent: "onMouseUp",
     touchEvent: "onTouchEnd",
@@ -15,16 +16,16 @@ function A(o) {
     const e = m(), t = Array.isArray(e) ? e.find((c) => c instanceof Element) : e;
     return t instanceof Element ? t : void 0;
   };
-  let d = !1, i = !1;
+  let u = !1, i = !1;
   h(() => {
     const e = setTimeout(() => {
-      d = !0;
+      u = !0;
     }, 0);
     s(() => clearTimeout(e));
   });
   const r = (e) => {
     const t = l();
-    if (!n.enabled || !d || !t || "clientX" in e && L(e, document))
+    if (!n.enabled || !u || !t || "clientX" in e && L(e, document))
       return;
     if (i) {
       i = !1;
@@ -34,10 +35,13 @@ function A(o) {
     if (e.composedPath)
       c = e.composedPath().indexOf(t) > -1;
     else {
-      const u = e.target;
-      c = !document.documentElement.contains(u) || t.contains(u);
+      const d = e.target;
+      c = !document.documentElement.contains(d) || t.contains(d);
+    }
+    if (!c) {
+      if (g(e, t)) return;
+      n.onClickAway(e);
     }
-    c || n.onClickAway(e);
   };
   return p(() => {
     const e = () => {
@@ -56,6 +60,6 @@ function A(o) {
   }), f(m);
 }
 export {
-  A as ClickAwayListener
+  T as ClickAwayListener
 };
 //# sourceMappingURL=clickAwayListener.js.map

package/dist/components/clickAwayListener/clickAwayListener.js.map

@@ -1 +1 @@
-{"version":3,"file":"clickAwayListener.js","sources":["../../../src/components/clickAwayListener/clickAwayListener.tsx"],"sourcesContent":["import { type JSX, children as resolveChildren, createEffect, mergeProps, onCleanup, onMount } from \"solid-js\";\n\ntype ClickAwayMouseEventHandler = \"onClick\" | \"onMouseDown\" | \"onMouseUp\" | \"onPointerDown\" | \"onPointerUp\";\ntype ClickAwayTouchEventHandler = \"onTouchStart\" | \"onTouchEnd\";\n\ntype MappedEvent = \"click\" | \"mousedown\" | \"mouseup\" | \"touchstart\" | \"touchend\" | \"pointerdown\" | \"pointerup\";\n\nfunction mapEventPropToEvent(eventProp: ClickAwayMouseEventHandler | ClickAwayTouchEventHandler): MappedEvent {\n  return eventProp.substring(2).toLowerCase() as MappedEvent;\n}\n\nfunction clickedRootScrollbar(event: MouseEvent, doc: Document): boolean {\n  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;\n}\n\nexport interface ClickAwayListenerProps {\n  children: JSX.Element;\n  mouseEvent?: ClickAwayMouseEventHandler | false;\n  onClickAway: (event: MouseEvent | TouchEvent) => void;\n  touchEvent?: ClickAwayTouchEventHandler | false;\n  /** When false, the listener is inert without unmounting the child. */\n  enabled?: boolean;\n}\n\n/**\n * Solid redesign of MUI's ClickAwayListener. React's version cloned the child\n * to inject a ref + synthetic handlers; Solid resolves the child to its DOM\n * node and uses `composedPath`/`contains` containment checks against document\n * listeners — no element cloning.\n */\nexport function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {\n  const merged = mergeProps(\n    { mouseEvent: \"onMouseUp\" as ClickAwayMouseEventHandler, touchEvent: \"onTouchEnd\" as ClickAwayTouchEventHandler, enabled: true },\n    props\n  );\n  const resolved = resolveChildren(() => merged.children);\n\n  const getNode = (): Element | undefined => {\n    const c = resolved();\n    const el = Array.isArray(c) ? c.find((x) => x instanceof Element) : c;\n    return el instanceof Element ? el : undefined;\n  };\n\n  let activated = false;\n  let moved = false;\n\n  onMount(() => {\n    // Defer activation a tick so the opening interaction doesn't immediately\n    // trigger a click-away (see facebook/react#20074).\n    const timer = setTimeout(() => {\n      activated = true;\n    }, 0);\n    onCleanup(() => clearTimeout(timer));\n  });\n\n  const handleClickAway = (event: MouseEvent | TouchEvent): void => {\n    const node = getNode();\n    if (!merged.enabled || !activated || !node || (\"clientX\" in event && clickedRootScrollbar(event, document))) {\n      return;\n    }\n    if (moved) {\n      moved = false;\n      return;\n    }\n    let insideDOM: boolean;\n    if (event.composedPath) {\n      insideDOM = event.composedPath().indexOf(node) > -1;\n    } else {\n      const target = event.target as HTMLElement;\n      insideDOM = !document.documentElement.contains(target) || node.contains(target);\n    }\n    if (!insideDOM) {\n      merged.onClickAway(event);\n    }\n  };\n\n  createEffect(() => {\n    const handleTouchMove = (): void => {\n      moved = true;\n    };\n    if (merged.touchEvent !== false) {\n      const mapped = mapEventPropToEvent(merged.touchEvent);\n      document.addEventListener(mapped, handleClickAway as EventListener);\n      document.addEventListener(\"touchmove\", handleTouchMove);\n      onCleanup(() => {\n        document.removeEventListener(mapped, handleClickAway as EventListener);\n        document.removeEventListener(\"touchmove\", handleTouchMove);\n      });\n    }\n    if (merged.mouseEvent !== false) {\n      const mapped = mapEventPropToEvent(merged.mouseEvent);\n      document.addEventListener(mapped, handleClickAway as EventListener);\n      onCleanup(() => document.removeEventListener(mapped, handleClickAway as EventListener));\n    }\n  });\n\n  return <>{resolved()}</>;\n}\n\nexport default ClickAwayListener;\n"],"names":["mapEventPropToEvent","eventProp","substring","toLowerCase","clickedRootScrollbar","event","doc","documentElement","clientWidth","clientX","clientHeight","clientY","ClickAwayListener","props","merged","mergeProps","mouseEvent","touchEvent","enabled","resolved","resolveChildren","children","getNode","c","el","Array","isArray","find","x","Element","undefined","activated","moved","onMount","timer","setTimeout","onCleanup","clearTimeout","handleClickAway","node","document","insideDOM","composedPath","indexOf","target","contains","onClickAway","createEffect","handleTouchMove","mapped","addEventListener","removeEventListener","_$memo"],"mappings":";;AAOA,SAASA,EAAoBC,GAAiF;AAC5G,SAAOA,EAAUC,UAAU,CAAC,EAAEC,YAAAA;AAChC;AAEA,SAASC,EAAqBC,GAAmBC,GAAwB;AACvE,SAAOA,EAAIC,gBAAgBC,cAAcH,EAAMI,WAAWH,EAAIC,gBAAgBG,eAAeL,EAAMM;AACrG;AAiBO,SAASC,EAAkBC,GAA4C;AAC5E,QAAMC,IAASC,EACb;AAAA,IAAEC,YAAY;AAAA,IAA2CC,YAAY;AAAA,IAA4CC,SAAS;AAAA,EAAA,GAC1HL,CACF,GACMM,IAAWC,EAAgB,MAAMN,EAAOO,QAAQ,GAEhDC,IAAUA,MAA2B;AACzC,UAAMC,IAAIJ,EAAAA,GACJK,IAAKC,MAAMC,QAAQH,CAAC,IAAIA,EAAEI,KAAMC,CAAAA,MAAMA,aAAaC,OAAO,IAAIN;AACpE,WAAOC,aAAcK,UAAUL,IAAKM;AAAAA,EACtC;AAEA,MAAIC,IAAY,IACZC,IAAQ;AAEZC,EAAAA,EAAQ,MAAM;AAGZ,UAAMC,IAAQC,WAAW,MAAM;AAC7BJ,MAAAA,IAAY;AAAA,IACd,GAAG,CAAC;AACJK,IAAAA,EAAU,MAAMC,aAAaH,CAAK,CAAC;AAAA,EACrC,CAAC;AAED,QAAMI,IAAkBA,CAACjC,MAAyC;AAChE,UAAMkC,IAAOjB,EAAAA;AACb,QAAI,CAACR,EAAOI,WAAW,CAACa,KAAa,CAACQ,KAAS,aAAalC,KAASD,EAAqBC,GAAOmC,QAAQ;AACvG;AAEF,QAAIR,GAAO;AACTA,MAAAA,IAAQ;AACR;AAAA,IACF;AACA,QAAIS;AACJ,QAAIpC,EAAMqC;AACRD,MAAAA,IAAYpC,EAAMqC,aAAAA,EAAeC,QAAQJ,CAAI,IAAI;AAAA,SAC5C;AACL,YAAMK,IAASvC,EAAMuC;AACrBH,MAAAA,IAAY,CAACD,SAASjC,gBAAgBsC,SAASD,CAAM,KAAKL,EAAKM,SAASD,CAAM;AAAA,IAChF;AACA,IAAKH,KACH3B,EAAOgC,YAAYzC,CAAK;AAAA,EAE5B;AAEA0C,SAAAA,EAAa,MAAM;AACjB,UAAMC,IAAkBA,MAAY;AAClChB,MAAAA,IAAQ;AAAA,IACV;AACA,QAAIlB,EAAOG,eAAe,IAAO;AAC/B,YAAMgC,IAASjD,EAAoBc,EAAOG,UAAU;AACpDuB,eAASU,iBAAiBD,GAAQX,CAAgC,GAClEE,SAASU,iBAAiB,aAAaF,CAAe,GACtDZ,EAAU,MAAM;AACdI,iBAASW,oBAAoBF,GAAQX,CAAgC,GACrEE,SAASW,oBAAoB,aAAaH,CAAe;AAAA,MAC3D,CAAC;AAAA,IACH;AACA,QAAIlC,EAAOE,eAAe,IAAO;AAC/B,YAAMiC,IAASjD,EAAoBc,EAAOE,UAAU;AACpDwB,eAASU,iBAAiBD,GAAQX,CAAgC,GAClEF,EAAU,MAAMI,SAASW,oBAAoBF,GAAQX,CAAgC,CAAC;AAAA,IACxF;AAAA,EACF,CAAC,GAEDc,EAAUjC,CAAQ;AACpB;"}
+{"version":3,"file":"clickAwayListener.js","sources":["../../../src/components/clickAwayListener/clickAwayListener.tsx"],"sourcesContent":["import { type JSX, children as resolveChildren, createEffect, mergeProps, onCleanup, onMount } from \"solid-js\";\nimport { isEventInForeignOverlay } from \"../../primitives/overlayLayer\";\n\ntype ClickAwayMouseEventHandler = \"onClick\" | \"onMouseDown\" | \"onMouseUp\" | \"onPointerDown\" | \"onPointerUp\";\ntype ClickAwayTouchEventHandler = \"onTouchStart\" | \"onTouchEnd\";\n\ntype MappedEvent = \"click\" | \"mousedown\" | \"mouseup\" | \"touchstart\" | \"touchend\" | \"pointerdown\" | \"pointerup\";\n\nfunction mapEventPropToEvent(eventProp: ClickAwayMouseEventHandler | ClickAwayTouchEventHandler): MappedEvent {\n  return eventProp.substring(2).toLowerCase() as MappedEvent;\n}\n\nfunction clickedRootScrollbar(event: MouseEvent, doc: Document): boolean {\n  return doc.documentElement.clientWidth < event.clientX || doc.documentElement.clientHeight < event.clientY;\n}\n\nexport interface ClickAwayListenerProps {\n  children: JSX.Element;\n  mouseEvent?: ClickAwayMouseEventHandler | false;\n  onClickAway: (event: MouseEvent | TouchEvent) => void;\n  touchEvent?: ClickAwayTouchEventHandler | false;\n  /** When false, the listener is inert without unmounting the child. */\n  enabled?: boolean;\n}\n\n/**\n * Solid redesign of MUI's ClickAwayListener. React's version cloned the child\n * to inject a ref + synthetic handlers; Solid resolves the child to its DOM\n * node and uses `composedPath`/`contains` containment checks against document\n * listeners — no element cloning.\n */\nexport function ClickAwayListener(props: ClickAwayListenerProps): JSX.Element {\n  const merged = mergeProps(\n    { mouseEvent: \"onMouseUp\" as ClickAwayMouseEventHandler, touchEvent: \"onTouchEnd\" as ClickAwayTouchEventHandler, enabled: true },\n    props\n  );\n  const resolved = resolveChildren(() => merged.children);\n\n  const getNode = (): Element | undefined => {\n    const c = resolved();\n    const el = Array.isArray(c) ? c.find((x) => x instanceof Element) : c;\n    return el instanceof Element ? el : undefined;\n  };\n\n  let activated = false;\n  let moved = false;\n\n  onMount(() => {\n    // Defer activation a tick so the opening interaction doesn't immediately\n    // trigger a click-away (see facebook/react#20074).\n    const timer = setTimeout(() => {\n      activated = true;\n    }, 0);\n    onCleanup(() => clearTimeout(timer));\n  });\n\n  const handleClickAway = (event: MouseEvent | TouchEvent): void => {\n    const node = getNode();\n    if (!merged.enabled || !activated || !node || (\"clientX\" in event && clickedRootScrollbar(event, document))) {\n      return;\n    }\n    if (moved) {\n      moved = false;\n      return;\n    }\n    let insideDOM: boolean;\n    if (event.composedPath) {\n      insideDOM = event.composedPath().indexOf(node) > -1;\n    } else {\n      const target = event.target as HTMLElement;\n      insideDOM = !document.documentElement.contains(target) || node.contains(target);\n    }\n    if (!insideDOM) {\n      // Interactions inside a portaled overlay layer above the child (modal,\n      // dropdown, picker…) are not \"away\" from the child.\n      if (isEventInForeignOverlay(event, node)) return;\n      merged.onClickAway(event);\n    }\n  };\n\n  createEffect(() => {\n    const handleTouchMove = (): void => {\n      moved = true;\n    };\n    if (merged.touchEvent !== false) {\n      const mapped = mapEventPropToEvent(merged.touchEvent);\n      document.addEventListener(mapped, handleClickAway as EventListener);\n      document.addEventListener(\"touchmove\", handleTouchMove);\n      onCleanup(() => {\n        document.removeEventListener(mapped, handleClickAway as EventListener);\n        document.removeEventListener(\"touchmove\", handleTouchMove);\n      });\n    }\n    if (merged.mouseEvent !== false) {\n      const mapped = mapEventPropToEvent(merged.mouseEvent);\n      document.addEventListener(mapped, handleClickAway as EventListener);\n      onCleanup(() => document.removeEventListener(mapped, handleClickAway as EventListener));\n    }\n  });\n\n  return <>{resolved()}</>;\n}\n\nexport default ClickAwayListener;\n"],"names":["mapEventPropToEvent","eventProp","substring","toLowerCase","clickedRootScrollbar","event","doc","documentElement","clientWidth","clientX","clientHeight","clientY","ClickAwayListener","props","merged","mergeProps","mouseEvent","touchEvent","enabled","resolved","resolveChildren","children","getNode","c","el","Array","isArray","find","x","Element","undefined","activated","moved","onMount","timer","setTimeout","onCleanup","clearTimeout","handleClickAway","node","document","insideDOM","composedPath","indexOf","target","contains","isEventInForeignOverlay","onClickAway","createEffect","handleTouchMove","mapped","addEventListener","removeEventListener","_$memo"],"mappings":";;;AAQA,SAASA,EAAoBC,GAAiF;AAC5G,SAAOA,EAAUC,UAAU,CAAC,EAAEC,YAAAA;AAChC;AAEA,SAASC,EAAqBC,GAAmBC,GAAwB;AACvE,SAAOA,EAAIC,gBAAgBC,cAAcH,EAAMI,WAAWH,EAAIC,gBAAgBG,eAAeL,EAAMM;AACrG;AAiBO,SAASC,EAAkBC,GAA4C;AAC5E,QAAMC,IAASC,EACb;AAAA,IAAEC,YAAY;AAAA,IAA2CC,YAAY;AAAA,IAA4CC,SAAS;AAAA,EAAA,GAC1HL,CACF,GACMM,IAAWC,EAAgB,MAAMN,EAAOO,QAAQ,GAEhDC,IAAUA,MAA2B;AACzC,UAAMC,IAAIJ,EAAAA,GACJK,IAAKC,MAAMC,QAAQH,CAAC,IAAIA,EAAEI,KAAMC,CAAAA,MAAMA,aAAaC,OAAO,IAAIN;AACpE,WAAOC,aAAcK,UAAUL,IAAKM;AAAAA,EACtC;AAEA,MAAIC,IAAY,IACZC,IAAQ;AAEZC,EAAAA,EAAQ,MAAM;AAGZ,UAAMC,IAAQC,WAAW,MAAM;AAC7BJ,MAAAA,IAAY;AAAA,IACd,GAAG,CAAC;AACJK,IAAAA,EAAU,MAAMC,aAAaH,CAAK,CAAC;AAAA,EACrC,CAAC;AAED,QAAMI,IAAkBA,CAACjC,MAAyC;AAChE,UAAMkC,IAAOjB,EAAAA;AACb,QAAI,CAACR,EAAOI,WAAW,CAACa,KAAa,CAACQ,KAAS,aAAalC,KAASD,EAAqBC,GAAOmC,QAAQ;AACvG;AAEF,QAAIR,GAAO;AACTA,MAAAA,IAAQ;AACR;AAAA,IACF;AACA,QAAIS;AACJ,QAAIpC,EAAMqC;AACRD,MAAAA,IAAYpC,EAAMqC,aAAAA,EAAeC,QAAQJ,CAAI,IAAI;AAAA,SAC5C;AACL,YAAMK,IAASvC,EAAMuC;AACrBH,MAAAA,IAAY,CAACD,SAASjC,gBAAgBsC,SAASD,CAAM,KAAKL,EAAKM,SAASD,CAAM;AAAA,IAChF;AACA,QAAI,CAACH,GAAW;AAGd,UAAIK,EAAwBzC,GAAOkC,CAAI,EAAG;AAC1CzB,MAAAA,EAAOiC,YAAY1C,CAAK;AAAA,IAC1B;AAAA,EACF;AAEA2C,SAAAA,EAAa,MAAM;AACjB,UAAMC,IAAkBA,MAAY;AAClCjB,MAAAA,IAAQ;AAAA,IACV;AACA,QAAIlB,EAAOG,eAAe,IAAO;AAC/B,YAAMiC,IAASlD,EAAoBc,EAAOG,UAAU;AACpDuB,eAASW,iBAAiBD,GAAQZ,CAAgC,GAClEE,SAASW,iBAAiB,aAAaF,CAAe,GACtDb,EAAU,MAAM;AACdI,iBAASY,oBAAoBF,GAAQZ,CAAgC,GACrEE,SAASY,oBAAoB,aAAaH,CAAe;AAAA,MAC3D,CAAC;AAAA,IACH;AACA,QAAInC,EAAOE,eAAe,IAAO;AAC/B,YAAMkC,IAASlD,EAAoBc,EAAOE,UAAU;AACpDwB,eAASW,iBAAiBD,GAAQZ,CAAgC,GAClEF,EAAU,MAAMI,SAASY,oBAAoBF,GAAQZ,CAAgC,CAAC;AAAA,IACxF;AAAA,EACF,CAAC,GAEDe,EAAUlC,CAAQ;AACpB;"}

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

@@ -20,7 +20,11 @@ export interface TreeViewProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>,
     onExpandedChange?: (expanded: string[]) => void;
     selected?: string[];
     defaultSelected?: string[];
-    onSelectedChange?: (selected: string[]) => void;
+    /** Reports the full selection plus, for user toggles, the node that just changed. */
+    onSelectedChange?: (selected: string[], changed?: {
+        id: string;
+        selected: boolean;
+    }) => void;
     selectable?: boolean;
     checkboxes?: boolean;
     renderLabel?: (item: ITreeNodeItem, nodeId: string) => JSX.Element;