@smwb/ui-solid 0.12.1 → 0.14.0

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/primitives/createDismissOnEscape.d.ts

@@ -0,0 +1,12 @@
+import { type Accessor } from "solid-js";
+/**
+ * While `active()`, Escape calls `onDismiss` wherever focus is and is marked as handled
+ * (`preventDefault()`), so a window, fullscreen panel, Modal or Sheet around stays open
+ * until the next press. For content shown on hover or focus, such as a tooltip, which
+ * Escape must hide without moving the pointer or focus (WCAG 1.4.13).
+ *
+ * The listener runs in the capture phase on `document`: those surfaces listen on
+ * `document` in the bubble phase, as do Solid's delegated `onKeyDown` handlers, and a
+ * surface opened before the content showed would otherwise see the key first.
+ */
+export declare function createDismissOnEscape(active: Accessor<boolean>, onDismiss: () => void): void;

package/dist/primitives/createDismissOnEscape.js

@@ -0,0 +1,14 @@
+import { createEffect as o, onCleanup as c } from "solid-js";
+function i(t, r) {
+  o(() => {
+    if (!t()) return;
+    const e = (n) => {
+      n.key === "Escape" && (n.preventDefault(), r());
+    };
+    document.addEventListener("keydown", e, !0), c(() => document.removeEventListener("keydown", e, !0));
+  });
+}
+export {
+  i as createDismissOnEscape
+};
+//# sourceMappingURL=createDismissOnEscape.js.map

package/dist/primitives/createDismissOnEscape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createDismissOnEscape.js","sources":["../../src/primitives/createDismissOnEscape.ts"],"sourcesContent":["import { type Accessor, createEffect, onCleanup } from \"solid-js\";\n\n/**\n * While `active()`, Escape calls `onDismiss` wherever focus is and is marked as handled\n * (`preventDefault()`), so a window, fullscreen panel, Modal or Sheet around stays open\n * until the next press. For content shown on hover or focus, such as a tooltip, which\n * Escape must hide without moving the pointer or focus (WCAG 1.4.13).\n *\n * The listener runs in the capture phase on `document`: those surfaces listen on\n * `document` in the bubble phase, as do Solid's delegated `onKeyDown` handlers, and a\n * surface opened before the content showed would otherwise see the key first.\n */\nexport function createDismissOnEscape(active: Accessor<boolean>, onDismiss: () => void): void {\n  createEffect(() => {\n    if (!active()) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key !== \"Escape\") return;\n      event.preventDefault();\n      onDismiss();\n    };\n    document.addEventListener(\"keydown\", onKeyDown, true);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown, true));\n  });\n}\n"],"names":["createDismissOnEscape","active","onDismiss","createEffect","onKeyDown","event","onCleanup"],"mappings":";AAYO,SAASA,EAAsBC,GAA2BC,GAA6B;AAC5F,EAAAC,EAAa,MAAM;AACjB,QAAI,CAACF,IAAU;AACf,UAAMG,IAAY,CAACC,MAA+B;AAChD,MAAIA,EAAM,QAAQ,aAClBA,EAAM,eAAA,GACNH,EAAA;AAAA,IACF;AACA,aAAS,iBAAiB,WAAWE,GAAW,EAAI,GACpDE,EAAU,MAAM,SAAS,oBAAoB,WAAWF,GAAW,EAAI,CAAC;AAAA,EAC1E,CAAC;AACH;"}

package/dist/primitives/createFocusTrap.d.ts

@@ -1,4 +1,6 @@
 import { type Accessor } from "solid-js";
+/** Elements in the Tab order (hidden ones match too). */
+export declare const FOCUSABLE = "a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])";
 export interface CreateFocusTrapOptions {
     /** Trap is active only while this returns true. */
     active: Accessor<boolean>;
@@ -8,6 +10,11 @@ export interface CreateFocusTrapOptions {
     restoreFocus?: boolean;
     /** Focus the first focusable element on activate. */
     autoFocus?: boolean;
+    /**
+     * Checked on every Tab. While it returns false the trap leaves the key alone, so a trap stacked above
+     * this one (a dialog opened from inside the container) handles it. Defaults to always true.
+     */
+    isTopmost?: () => boolean;
 }
 /**
  * Confines Tab/Shift+Tab focus within `container` while `active`. Restores

package/dist/primitives/createFocusTrap.js

@@ -1,31 +1,32 @@
 import { createEffect as d, onCleanup as m } from "solid-js";
-const b = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
-function v(t) {
-  const i = t.restoreFocus ?? !0, l = t.autoFocus ?? !0;
+const p = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
+function b(o) {
+  const i = o.restoreFocus ?? !0, l = o.autoFocus ?? !0;
   d(() => {
-    if (!t.active()) return;
-    const n = t.container();
-    if (!n) return;
-    const u = document.activeElement, a = () => Array.from(n.querySelectorAll(b)).filter(
+    if (!o.active()) return;
+    const t = o.container();
+    if (!t) return;
+    const s = document.activeElement, a = () => Array.from(t.querySelectorAll(p)).filter(
       (e) => e.offsetParent !== null || e === document.activeElement
     );
-    l && (a()[0] ?? n).focus({ preventScroll: !0 });
+    l && !t.contains(document.activeElement) && (a()[0] ?? t).focus({ preventScroll: !0 });
     const f = (e) => {
-      if (e.key !== "Tab") return;
-      const r = a(), o = r[0], c = r[r.length - 1];
-      if (!o || !c) {
-        e.preventDefault();
+      if (e.key !== "Tab" || o.isTopmost && !o.isTopmost()) return;
+      const u = a(), n = u[0], r = u[u.length - 1];
+      if (!n || !r) {
+        e.preventDefault(), t.focus({ preventScroll: !0 });
         return;
       }
-      const s = document.activeElement;
-      e.shiftKey && s === o ? (e.preventDefault(), c.focus()) : !e.shiftKey && s === c ? (e.preventDefault(), o.focus()) : n.contains(s) || (e.preventDefault(), o.focus());
+      const c = document.activeElement;
+      c === t ? (e.preventDefault(), (e.shiftKey ? r : n).focus()) : e.shiftKey && c === n ? (e.preventDefault(), r.focus()) : !e.shiftKey && c === r ? (e.preventDefault(), n.focus()) : t.contains(c) || (e.preventDefault(), n.focus());
     };
     document.addEventListener("keydown", f, !0), m(() => {
-      document.removeEventListener("keydown", f, !0), i && u && u.focus({ preventScroll: !0 });
+      document.removeEventListener("keydown", f, !0), i && s && !t.contains(s) && s.focus({ preventScroll: !0 });
     });
   });
 }
 export {
-  v as createFocusTrap
+  p as FOCUSABLE,
+  b as createFocusTrap
 };
 //# sourceMappingURL=createFocusTrap.js.map

package/dist/primitives/createFocusTrap.js.map

@@ -1 +1 @@
-{"version":3,"file":"createFocusTrap.js","sources":["../../src/primitives/createFocusTrap.ts"],"sourcesContent":["import { type Accessor, createEffect, onCleanup } from \"solid-js\";\n\nconst FOCUSABLE =\n  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\nexport interface CreateFocusTrapOptions {\n  /** Trap is active only while this returns true. */\n  active: Accessor<boolean>;\n  /** The element whose focusable descendants are trapped. */\n  container: Accessor<HTMLElement | undefined>;\n  /** Restore focus to the previously focused element on deactivate. */\n  restoreFocus?: boolean;\n  /** Focus the first focusable element on activate. */\n  autoFocus?: boolean;\n}\n\n/**\n * Confines Tab/Shift+Tab focus within `container` while `active`. Restores\n * focus to the previously focused element on teardown. Solid port of\n * summer-ui's useFocusTrap.\n */\nexport function createFocusTrap(options: CreateFocusTrapOptions): void {\n  const restoreFocus = options.restoreFocus ?? true;\n  const autoFocus = options.autoFocus ?? true;\n\n  createEffect(() => {\n    if (!options.active()) return;\n    const container = options.container();\n    if (!container) return;\n\n    const prevFocused = document.activeElement as HTMLElement | null;\n\n    const focusables = (): HTMLElement[] =>\n      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n        (el) => el.offsetParent !== null || el === document.activeElement\n      );\n\n    if (autoFocus) {\n      (focusables()[0] ?? container).focus({ preventScroll: true });\n    }\n\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key !== \"Tab\") return;\n      const items = focusables();\n      const first = items[0];\n      const last = items[items.length - 1];\n      if (!first || !last) {\n        event.preventDefault();\n        return;\n      }\n      const activeEl = document.activeElement;\n      if (event.shiftKey && activeEl === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && activeEl === last) {\n        event.preventDefault();\n        first.focus();\n      } else if (!container.contains(activeEl)) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown, true);\n    onCleanup(() => {\n      document.removeEventListener(\"keydown\", onKeyDown, true);\n      if (restoreFocus && prevFocused) {\n        prevFocused.focus({ preventScroll: true });\n      }\n    });\n  });\n}\n"],"names":["FOCUSABLE","createFocusTrap","options","restoreFocus","autoFocus","createEffect","container","prevFocused","focusables","el","onKeyDown","event","items","first","last","activeEl","onCleanup"],"mappings":";AAEA,MAAMA,IACJ;AAkBK,SAASC,EAAgBC,GAAuC;AACrE,QAAMC,IAAeD,EAAQ,gBAAgB,IACvCE,IAAYF,EAAQ,aAAa;AAEvC,EAAAG,EAAa,MAAM;AACjB,QAAI,CAACH,EAAQ,SAAU;AACvB,UAAMI,IAAYJ,EAAQ,UAAA;AAC1B,QAAI,CAACI,EAAW;AAEhB,UAAMC,IAAc,SAAS,eAEvBC,IAAa,MACjB,MAAM,KAAKF,EAAU,iBAA8BN,CAAS,CAAC,EAAE;AAAA,MAC7D,CAACS,MAAOA,EAAG,iBAAiB,QAAQA,MAAO,SAAS;AAAA,IAAA;AAGxD,IAAIL,MACDI,EAAA,EAAa,CAAC,KAAKF,GAAW,MAAM,EAAE,eAAe,IAAM;AAG9D,UAAMI,IAAY,CAACC,MAA+B;AAChD,UAAIA,EAAM,QAAQ,MAAO;AACzB,YAAMC,IAAQJ,EAAA,GACRK,IAAQD,EAAM,CAAC,GACfE,IAAOF,EAAMA,EAAM,SAAS,CAAC;AACnC,UAAI,CAACC,KAAS,CAACC,GAAM;AACnB,QAAAH,EAAM,eAAA;AACN;AAAA,MACF;AACA,YAAMI,IAAW,SAAS;AAC1B,MAAIJ,EAAM,YAAYI,MAAaF,KACjCF,EAAM,eAAA,GACNG,EAAK,MAAA,KACI,CAACH,EAAM,YAAYI,MAAaD,KACzCH,EAAM,eAAA,GACNE,EAAM,MAAA,KACIP,EAAU,SAASS,CAAQ,MACrCJ,EAAM,eAAA,GACNE,EAAM,MAAA;AAAA,IAEV;AAEA,aAAS,iBAAiB,WAAWH,GAAW,EAAI,GACpDM,EAAU,MAAM;AACd,eAAS,oBAAoB,WAAWN,GAAW,EAAI,GACnDP,KAAgBI,KAClBA,EAAY,MAAM,EAAE,eAAe,GAAA,CAAM;AAAA,IAE7C,CAAC;AAAA,EACH,CAAC;AACH;"}
+{"version":3,"file":"createFocusTrap.js","sources":["../../src/primitives/createFocusTrap.ts"],"sourcesContent":["import { type Accessor, createEffect, onCleanup } from \"solid-js\";\n\n/** Elements in the Tab order (hidden ones match too). */\nexport const FOCUSABLE =\n  'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\nexport interface CreateFocusTrapOptions {\n  /** Trap is active only while this returns true. */\n  active: Accessor<boolean>;\n  /** The element whose focusable descendants are trapped. */\n  container: Accessor<HTMLElement | undefined>;\n  /** Restore focus to the previously focused element on deactivate. */\n  restoreFocus?: boolean;\n  /** Focus the first focusable element on activate. */\n  autoFocus?: boolean;\n  /**\n   * Checked on every Tab. While it returns false the trap leaves the key alone, so a trap stacked above\n   * this one (a dialog opened from inside the container) handles it. Defaults to always true.\n   */\n  isTopmost?: () => boolean;\n}\n\n/**\n * Confines Tab/Shift+Tab focus within `container` while `active`. Restores\n * focus to the previously focused element on teardown. Solid port of\n * summer-ui's useFocusTrap.\n */\nexport function createFocusTrap(options: CreateFocusTrapOptions): void {\n  const restoreFocus = options.restoreFocus ?? true;\n  const autoFocus = options.autoFocus ?? true;\n\n  createEffect(() => {\n    if (!options.active()) return;\n    const container = options.container();\n    if (!container) return;\n\n    const prevFocused = document.activeElement as HTMLElement | null;\n\n    const focusables = (): HTMLElement[] =>\n      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE)).filter(\n        (el) => el.offsetParent !== null || el === document.activeElement\n      );\n\n    // A child that has already taken the focus (one focusing itself on mount) keeps it; the trap\n    // only brings in a focus that is still outside.\n    if (autoFocus && !container.contains(document.activeElement)) {\n      (focusables()[0] ?? container).focus({ preventScroll: true });\n    }\n\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key !== \"Tab\") return;\n      // Read at key time, not tracked: it is a plain callback, and a new identity per render must not\n      // re-arm the trap.\n      if (options.isTopmost && !options.isTopmost()) return;\n      const items = focusables();\n      const first = items[0];\n      const last = items[items.length - 1];\n      if (!first || !last) {\n        event.preventDefault();\n        // Nothing left to tab through (e.g. every control disabled) and Chromium has dropped the\n        // focus to <body>: pull it back into the container instead of leaving it behind the dialog.\n        container.focus({ preventScroll: true });\n        return;\n      }\n      const activeEl = document.activeElement;\n      if (activeEl === container) {\n        // The container itself holds the focus (a press on its empty area, or the `autoFocus`\n        // fallback): it is not a tab stop, so the browser would step to the page behind it.\n        event.preventDefault();\n        (event.shiftKey ? last : first).focus();\n      } else if (event.shiftKey && activeEl === first) {\n        event.preventDefault();\n        last.focus();\n      } else if (!event.shiftKey && activeEl === last) {\n        event.preventDefault();\n        first.focus();\n      } else if (!container.contains(activeEl)) {\n        event.preventDefault();\n        first.focus();\n      }\n    };\n\n    document.addEventListener(\"keydown\", onKeyDown, true);\n    onCleanup(() => {\n      document.removeEventListener(\"keydown\", onKeyDown, true);\n      // Restoring a node from inside the container is meaningless: that node is being torn down\n      // with it, and focusing a detached element drops the focus to <body>, undoing whatever the\n      // opener restored first. The element to go back to is the one focused before the trap armed,\n      // which can be the container's own field when a caller focuses it before the trap gets here.\n      if (restoreFocus && prevFocused && !container.contains(prevFocused)) {\n        prevFocused.focus({ preventScroll: true });\n      }\n    });\n  });\n}\n"],"names":["FOCUSABLE","createFocusTrap","options","restoreFocus","autoFocus","createEffect","container","prevFocused","focusables","el","onKeyDown","event","items","first","last","activeEl","onCleanup"],"mappings":";AAGO,MAAMA,IACX;AAuBK,SAASC,EAAgBC,GAAuC;AACrE,QAAMC,IAAeD,EAAQ,gBAAgB,IACvCE,IAAYF,EAAQ,aAAa;AAEvC,EAAAG,EAAa,MAAM;AACjB,QAAI,CAACH,EAAQ,SAAU;AACvB,UAAMI,IAAYJ,EAAQ,UAAA;AAC1B,QAAI,CAACI,EAAW;AAEhB,UAAMC,IAAc,SAAS,eAEvBC,IAAa,MACjB,MAAM,KAAKF,EAAU,iBAA8BN,CAAS,CAAC,EAAE;AAAA,MAC7D,CAACS,MAAOA,EAAG,iBAAiB,QAAQA,MAAO,SAAS;AAAA,IAAA;AAKxD,IAAIL,KAAa,CAACE,EAAU,SAAS,SAAS,aAAa,MACxDE,EAAA,EAAa,CAAC,KAAKF,GAAW,MAAM,EAAE,eAAe,IAAM;AAG9D,UAAMI,IAAY,CAACC,MAA+B;AAIhD,UAHIA,EAAM,QAAQ,SAGdT,EAAQ,aAAa,CAACA,EAAQ,YAAa;AAC/C,YAAMU,IAAQJ,EAAA,GACRK,IAAQD,EAAM,CAAC,GACfE,IAAOF,EAAMA,EAAM,SAAS,CAAC;AACnC,UAAI,CAACC,KAAS,CAACC,GAAM;AACnB,QAAAH,EAAM,eAAA,GAGNL,EAAU,MAAM,EAAE,eAAe,GAAA,CAAM;AACvC;AAAA,MACF;AACA,YAAMS,IAAW,SAAS;AAC1B,MAAIA,MAAaT,KAGfK,EAAM,eAAA,IACLA,EAAM,WAAWG,IAAOD,GAAO,MAAA,KACvBF,EAAM,YAAYI,MAAaF,KACxCF,EAAM,eAAA,GACNG,EAAK,MAAA,KACI,CAACH,EAAM,YAAYI,MAAaD,KACzCH,EAAM,eAAA,GACNE,EAAM,MAAA,KACIP,EAAU,SAASS,CAAQ,MACrCJ,EAAM,eAAA,GACNE,EAAM,MAAA;AAAA,IAEV;AAEA,aAAS,iBAAiB,WAAWH,GAAW,EAAI,GACpDM,EAAU,MAAM;AACd,eAAS,oBAAoB,WAAWN,GAAW,EAAI,GAKnDP,KAAgBI,KAAe,CAACD,EAAU,SAASC,CAAW,KAChEA,EAAY,MAAM,EAAE,eAAe,GAAA,CAAM;AAAA,IAE7C,CAAC;AAAA,EACH,CAAC;AACH;"}

package/dist/primitives/createHelperText.d.ts

@@ -0,0 +1,26 @@
+import { type Accessor, type JSX, type ResolvedChildren } from "solid-js";
+/**
+ * Whether `helperText` is shown under its control, so that it describes the control. TextFieldWrapper shows none for
+ * an inline field, and without helper text it draws a blank line in its place, which describes nothing.
+ */
+export declare function hasHelperText(helperText: JSX.Element, inline?: boolean): boolean;
+export interface HelperTextOptions {
+    /** The field is inline: TextFieldWrapper draws no helper text for it. */
+    inline?: () => boolean | undefined;
+    /** The caller's own `aria-describedby`, kept after the helper text. */
+    describedBy?: () => string | undefined;
+}
+export interface HelperText {
+    /** The helper text, read once: draw this one (TextFieldWrapper takes it as `helperText`). */
+    text: Accessor<ResolvedChildren>;
+    /** The helper text's id (TextFieldWrapper takes it as `helperTextId`). */
+    id: string;
+    /** The control's `aria-describedby`: the helper text's id while it is shown, then the caller's own ids. */
+    describedBy: () => string | undefined;
+}
+/**
+ * Links a control to the helper text drawn under it, by TextFieldWrapper or by the component itself (Rating). The
+ * helper text is read here, once, and not for an inline field, which does not draw it: markup passed as a prop is
+ * created anew on every read, and during hydration a copy the server never rendered has no DOM node.
+ */
+export declare function createHelperText(helperText: () => JSX.Element, options?: HelperTextOptions): HelperText;

package/dist/primitives/createHelperText.js

@@ -0,0 +1,14 @@
+import { children as n } from "solid-js";
+import { createId as o } from "./createId.js";
+function d(r, e) {
+  return !e && !!r;
+}
+function a(r, e = {}) {
+  const i = o(void 0, "smwb-helper-text"), t = n(() => e.inline?.() ? void 0 : r());
+  return { text: t, id: i, describedBy: () => [d(t(), e.inline?.()) ? i : void 0, e.describedBy?.()].filter(Boolean).join(" ") || void 0 };
+}
+export {
+  a as createHelperText,
+  d as hasHelperText
+};
+//# sourceMappingURL=createHelperText.js.map

package/dist/primitives/createHelperText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createHelperText.js","sources":["../../src/primitives/createHelperText.ts"],"sourcesContent":["import { type Accessor, type JSX, type ResolvedChildren, children } from \"solid-js\";\nimport { createId } from \"./createId\";\n\n/**\n * Whether `helperText` is shown under its control, so that it describes the control. TextFieldWrapper shows none for\n * an inline field, and without helper text it draws a blank line in its place, which describes nothing.\n */\nexport function hasHelperText(helperText: JSX.Element, inline?: boolean): boolean {\n  return !inline && Boolean(helperText);\n}\n\nexport interface HelperTextOptions {\n  /** The field is inline: TextFieldWrapper draws no helper text for it. */\n  inline?: () => boolean | undefined;\n  /** The caller's own `aria-describedby`, kept after the helper text. */\n  describedBy?: () => string | undefined;\n}\n\nexport interface HelperText {\n  /** The helper text, read once: draw this one (TextFieldWrapper takes it as `helperText`). */\n  text: Accessor<ResolvedChildren>;\n  /** The helper text's id (TextFieldWrapper takes it as `helperTextId`). */\n  id: string;\n  /** The control's `aria-describedby`: the helper text's id while it is shown, then the caller's own ids. */\n  describedBy: () => string | undefined;\n}\n\n/**\n * Links a control to the helper text drawn under it, by TextFieldWrapper or by the component itself (Rating). The\n * helper text is read here, once, and not for an inline field, which does not draw it: markup passed as a prop is\n * created anew on every read, and during hydration a copy the server never rendered has no DOM node.\n */\nexport function createHelperText(helperText: () => JSX.Element, options: HelperTextOptions = {}): HelperText {\n  const id = createId(undefined, \"smwb-helper-text\");\n  const text = children(() => (options.inline?.() ? undefined : helperText()));\n  const describedBy = (): string | undefined =>\n    [hasHelperText(text(), options.inline?.()) ? id : undefined, options.describedBy?.()].filter(Boolean).join(\" \") ||\n    undefined;\n  return { text, id, describedBy };\n}\n"],"names":["hasHelperText","helperText","inline","createHelperText","options","id","createId","text","children"],"mappings":";;AAOO,SAASA,EAAcC,GAAyBC,GAA2B;AAChF,SAAO,CAACA,KAAU,EAAQD;AAC5B;AAuBO,SAASE,EAAiBF,GAA+BG,IAA6B,IAAgB;AAC3G,QAAMC,IAAKC,EAAS,QAAW,kBAAkB,GAC3CC,IAAOC,EAAS,MAAOJ,EAAQ,aAAa,SAAYH,GAAa;AAI3E,SAAO,EAAE,MAAAM,GAAM,IAAAF,GAAI,aAHC,MAClB,CAACL,EAAcO,KAAQH,EAAQ,UAAU,IAAIC,IAAK,QAAWD,EAAQ,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAC9G,OACiB;AACrB;"}

package/dist/primitives/createKeyboardShortcut.d.ts

@@ -0,0 +1,23 @@
+import { type Accessor } from "solid-js";
+export interface CreateKeyboardShortcutOptions {
+    /** The shortcut in `Kbd` key names, e.g. `["Mod", "K"]` (Command on macOS, Ctrl elsewhere). */
+    keys: string[];
+    /** Runs on a matching keydown anywhere in the document; the event's default action is prevented. */
+    onTrigger: (event: KeyboardEvent) => void;
+    /** Listen only while this returns true; listening is on by default. */
+    enabled?: Accessor<boolean> | undefined;
+}
+/**
+ * Binds a global keyboard shortcut while the calling component is alive, e.g. the Mod+K that opens a
+ * `CommandPalette`. The component that reacts to the shortcut binds it, not the one it opens, so two
+ * palettes never bind the same keys and any other opener can use them too. The same `keys` array draws
+ * the hint: `<Kbd keys={["Mod", "K"]} />`.
+ *
+ * One `keydown` listener sits on the document while `enabled` is on. A press an editor already handled
+ * (`defaultPrevented`), a key repeat and an IME composition are ignored. On a match the default action is
+ * prevented — Chrome and Firefox otherwise move the focus to their own search box on Ctrl+K — and
+ * `onTrigger` runs. `keys` and `onTrigger` are read when the key is pressed, so a getter on the options
+ * object stays live. Nothing runs on the server.
+ */
+export declare function createKeyboardShortcut(options: CreateKeyboardShortcutOptions): void;
+export default createKeyboardShortcut;

package/dist/primitives/createKeyboardShortcut.js

@@ -0,0 +1,16 @@
+import { createEffect as n, onCleanup as d } from "solid-js";
+import { matchesKeyboardShortcut as u } from "../utils/keyboardShortcut.js";
+function f(r) {
+  const o = r.enabled ?? (() => !0);
+  n(() => {
+    if (!o()) return;
+    const t = (e) => {
+      e.defaultPrevented || e.repeat || e.isComposing || e.keyCode === 229 || u(e, r.keys) && (e.preventDefault(), r.onTrigger(e));
+    };
+    document.addEventListener("keydown", t), d(() => document.removeEventListener("keydown", t));
+  });
+}
+export {
+  f as createKeyboardShortcut
+};
+//# sourceMappingURL=createKeyboardShortcut.js.map

package/dist/primitives/createKeyboardShortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"createKeyboardShortcut.js","sources":["../../src/primitives/createKeyboardShortcut.ts"],"sourcesContent":["import { type Accessor, createEffect, onCleanup } from \"solid-js\";\nimport { matchesKeyboardShortcut } from \"../utils/keyboardShortcut\";\n\nexport interface CreateKeyboardShortcutOptions {\n  /** The shortcut in `Kbd` key names, e.g. `[\"Mod\", \"K\"]` (Command on macOS, Ctrl elsewhere). */\n  keys: string[];\n  /** Runs on a matching keydown anywhere in the document; the event's default action is prevented. */\n  onTrigger: (event: KeyboardEvent) => void;\n  /** Listen only while this returns true; listening is on by default. */\n  enabled?: Accessor<boolean> | undefined;\n}\n\n/**\n * Binds a global keyboard shortcut while the calling component is alive, e.g. the Mod+K that opens a\n * `CommandPalette`. The component that reacts to the shortcut binds it, not the one it opens, so two\n * palettes never bind the same keys and any other opener can use them too. The same `keys` array draws\n * the hint: `<Kbd keys={[\"Mod\", \"K\"]} />`.\n *\n * One `keydown` listener sits on the document while `enabled` is on. A press an editor already handled\n * (`defaultPrevented`), a key repeat and an IME composition are ignored. On a match the default action is\n * prevented — Chrome and Firefox otherwise move the focus to their own search box on Ctrl+K — and\n * `onTrigger` runs. `keys` and `onTrigger` are read when the key is pressed, so a getter on the options\n * object stays live. Nothing runs on the server.\n */\nexport function createKeyboardShortcut(options: CreateKeyboardShortcutOptions): void {\n  const enabled = options.enabled ?? ((): boolean => true);\n\n  createEffect(() => {\n    if (!enabled()) return;\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.defaultPrevented || event.repeat) return;\n      if (event.isComposing || event.keyCode === 229) return;\n      if (!matchesKeyboardShortcut(event, options.keys)) return;\n      event.preventDefault();\n      options.onTrigger(event);\n    };\n    document.addEventListener(\"keydown\", onKeyDown);\n    onCleanup(() => document.removeEventListener(\"keydown\", onKeyDown));\n  });\n}\n\nexport default createKeyboardShortcut;\n"],"names":["createKeyboardShortcut","options","enabled","createEffect","onKeyDown","event","matchesKeyboardShortcut","onCleanup"],"mappings":";;AAwBO,SAASA,EAAuBC,GAA8C;AACnF,QAAMC,IAAUD,EAAQ,YAAY,MAAe;AAEnD,EAAAE,EAAa,MAAM;AACjB,QAAI,CAACD,IAAW;AAChB,UAAME,IAAY,CAACC,MAA+B;AAChD,MAAIA,EAAM,oBAAoBA,EAAM,UAChCA,EAAM,eAAeA,EAAM,YAAY,OACtCC,EAAwBD,GAAOJ,EAAQ,IAAI,MAChDI,EAAM,eAAA,GACNJ,EAAQ,UAAUI,CAAK;AAAA,IACzB;AACA,aAAS,iBAAiB,WAAWD,CAAS,GAC9CG,EAAU,MAAM,SAAS,oBAAoB,WAAWH,CAAS,CAAC;AAAA,EACpE,CAAC;AACH;"}

package/dist/primitives/mergeStyle.d.ts

@@ -0,0 +1,19 @@
+import type { JSX } from "solid-js";
+type Style = JSX.CSSProperties | string | undefined;
+/**
+ * Inline styles merged in order, each winning over the ones before it: a
+ * caller's `style` prop — an object or a CSS string — and the component's own
+ * properties. Properties set to `undefined` are left out, so an unset prop does
+ * not clobber a value the caller set. If one of the styles is a string, so is
+ * the result, with the objects written out as declarations in their place (a
+ * string style must stay a string: spreading it as an object drops it). A
+ * style that is the only one with anything set comes back as it is.
+ *
+ * The component's properties over the caller's:
+ * `<div style={mergeStyle(local.style, { "--smwb-x": local.x })} />`
+ *
+ * The caller's style over the component's defaults:
+ * `<div style={mergeStyle({ display: "flex", gap: gap() }, local.style)} />`
+ */
+export declare function mergeStyle(...styles: Style[]): Style;
+export {};

package/dist/primitives/mergeStyle.js

@@ -0,0 +1,9 @@
+const r = (t) => Object.entries(t).filter((n) => n[1] != null), i = (t) => r(t).map(([n, e]) => `${n}:${e}`).join(";"), o = (t) => typeof t == "string" ? t !== "" : t != null && r(t).length > 0;
+function f(...t) {
+  const n = t.filter(o);
+  return n.length < 2 ? n[0] : n.some((e) => typeof e == "string") ? n.map((e) => typeof e == "string" ? e : i(e)).join(";") : Object.fromEntries(n.flatMap((e) => r(e)));
+}
+export {
+  f as mergeStyle
+};
+//# sourceMappingURL=mergeStyle.js.map

package/dist/primitives/mergeStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeStyle.js","sources":["../../src/primitives/mergeStyle.ts"],"sourcesContent":["import type { JSX } from \"solid-js\";\n\ntype Style = JSX.CSSProperties | string | undefined;\n\n// The properties of an object style that have a value.\nconst declared = (style: JSX.CSSProperties): Array<[string, string | number]> =>\n  Object.entries(style).filter((entry): entry is [string, string | number] => entry[1] != null);\n\n// An object style written out as CSS declarations.\nconst cssText = (style: JSX.CSSProperties): string =>\n  declared(style)\n    .map(([name, value]) => `${name}:${value}`)\n    .join(\";\");\n\nconst isSet = (style: Style): style is JSX.CSSProperties | string =>\n  typeof style === \"string\" ? style !== \"\" : style != null && declared(style).length > 0;\n\n/**\n * Inline styles merged in order, each winning over the ones before it: a\n * caller's `style` prop — an object or a CSS string — and the component's own\n * properties. Properties set to `undefined` are left out, so an unset prop does\n * not clobber a value the caller set. If one of the styles is a string, so is\n * the result, with the objects written out as declarations in their place (a\n * string style must stay a string: spreading it as an object drops it). A\n * style that is the only one with anything set comes back as it is.\n *\n * The component's properties over the caller's:\n * `<div style={mergeStyle(local.style, { \"--smwb-x\": local.x })} />`\n *\n * The caller's style over the component's defaults:\n * `<div style={mergeStyle({ display: \"flex\", gap: gap() }, local.style)} />`\n */\nexport function mergeStyle(...styles: Style[]): Style {\n  const given = styles.filter(isSet);\n  if (given.length < 2) return given[0];\n  if (given.some((style) => typeof style === \"string\")) {\n    return given.map((style) => (typeof style === \"string\" ? style : cssText(style))).join(\";\");\n  }\n  return Object.fromEntries(given.flatMap((style) => declared(style as JSX.CSSProperties))) as JSX.CSSProperties;\n}\n"],"names":["declared","style","entry","cssText","name","value","isSet","mergeStyle","styles","given"],"mappings":"AAKA,MAAMA,IAAW,CAACC,MAChB,OAAO,QAAQA,CAAK,EAAE,OAAO,CAACC,MAA8CA,EAAM,CAAC,KAAK,IAAI,GAGxFC,IAAU,CAACF,MACfD,EAASC,CAAK,EACX,IAAI,CAAC,CAACG,GAAMC,CAAK,MAAM,GAAGD,CAAI,IAAIC,CAAK,EAAE,EACzC,KAAK,GAAG,GAEPC,IAAQ,CAACL,MACb,OAAOA,KAAU,WAAWA,MAAU,KAAKA,KAAS,QAAQD,EAASC,CAAK,EAAE,SAAS;AAiBhF,SAASM,KAAcC,GAAwB;AACpD,QAAMC,IAAQD,EAAO,OAAOF,CAAK;AACjC,SAAIG,EAAM,SAAS,IAAUA,EAAM,CAAC,IAChCA,EAAM,KAAK,CAACR,MAAU,OAAOA,KAAU,QAAQ,IAC1CQ,EAAM,IAAI,CAACR,MAAW,OAAOA,KAAU,WAAWA,IAAQE,EAAQF,CAAK,CAAE,EAAE,KAAK,GAAG,IAErF,OAAO,YAAYQ,EAAM,QAAQ,CAACR,MAAUD,EAASC,CAA0B,CAAC,CAAC;AAC1F;"}

package/dist/primitives/overlayLayer.d.ts

@@ -1,13 +1,25 @@
 /** Attribute marking the root of a portaled overlay layer (modal, sheet wrapper, dropdown, …). */
 export declare const OVERLAY_LAYER_ATTR = "data-smwb-overlay-layer";
 /**
- * True when `event` happened inside an overlay layer that does NOT contain
- * `node` — i.e. `node` sits underneath that layer, so the interaction is not
- * a "click away" from `node`.
+ * True when `event` happened inside an overlay layer above `node`, so the
+ * interaction is not a "click away" from `node`. A layer is above `node` when it
+ * comes later in document order (portaled after it, as everything opened from
+ * inside `node` is) or sits inside it. A layer that holds `node` or comes before
+ * it is below: a click in the Modal a select menu was opened from is a click away
+ * from the menu.
  */
 export declare const isEventInForeignOverlay: (event: Event, node: Element) => boolean;
 /**
  * True when `el` belongs to the topmost open overlay layer (or no layers are
  * open). Used to make Escape close only the top layer instead of every layer.
+ * A layer inside `el`, such as a select menu rendered into a Modal through
+ * `menuContainer`, is above `el` rather than part of it.
  */
 export declare const isTopOverlayLayer: (el: Element | undefined) => boolean;
+/**
+ * True when an open overlay layer other than `el` sits above it: inside it, or
+ * later in document order (portaled after it). FloatingWindow and the fullscreen
+ * ExpansionPanel leave Escape to such a layer, e.g. a select menu opened from
+ * inside them. Layers earlier in document order are below `el`.
+ */
+export declare const hasOverlayLayerAbove: (el: Element | undefined) => boolean;

package/dist/primitives/overlayLayer.js

@@ -1,11 +1,18 @@
-const e = "data-smwb-overlay-layer", r = () => typeof document > "u" ? [] : Array.from(document.querySelectorAll(`[${e}]`)), a = (n, o) => typeof n.composedPath != "function" ? !1 : n.composedPath().some((t) => t instanceof Element && t.hasAttribute(e) && !t.contains(o)), s = (n) => {
-  if (!n) return !0;
-  const o = r(), t = o[o.length - 1];
-  return !t || t === n || t.contains(n) || n.contains(t);
-};
+const r = "data-smwb-overlay-layer", s = () => typeof document > "u" ? [] : Array.from(document.querySelectorAll(`[${r}]`)), a = (o, e) => {
+  if (typeof o.composedPath != "function") return !1;
+  const t = Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_DISCONNECTED;
+  return o.composedPath().some(
+    (n) => n instanceof Element && n.hasAttribute(r) && (e.compareDocumentPosition(n) & t) !== 0
+  );
+}, c = (o) => {
+  if (!o) return !0;
+  const e = s(), t = e[e.length - 1];
+  return !t || t === o || t.contains(o);
+}, O = (o) => !o || !o.isConnected ? !1 : s().some((e) => (o.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0);
 export {
-  e as OVERLAY_LAYER_ATTR,
+  r as OVERLAY_LAYER_ATTR,
+  O as hasOverlayLayerAbove,
   a as isEventInForeignOverlay,
-  s as isTopOverlayLayer
+  c as isTopOverlayLayer
 };
 //# sourceMappingURL=overlayLayer.js.map

package/dist/primitives/overlayLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlayLayer.js","sources":["../../src/primitives/overlayLayer.ts"],"sourcesContent":["/** Attribute marking the root of a portaled overlay layer (modal, sheet wrapper, dropdown, …). */\nexport const OVERLAY_LAYER_ATTR = \"data-smwb-overlay-layer\";\n\n/** All open overlay layers in document order (last = topmost). */\nconst overlayLayers = (): Element[] =>\n  typeof document === \"undefined\" ? [] : Array.from(document.querySelectorAll(`[${OVERLAY_LAYER_ATTR}]`));\n\n/**\n * True when `event` happened inside an overlay layer that does NOT contain\n * `node` — i.e. `node` sits underneath that layer, so the interaction is not\n * a \"click away\" from `node`.\n */\nexport const isEventInForeignOverlay = (event: Event, node: Element): boolean => {\n  if (typeof event.composedPath !== \"function\") return false;\n  return event\n    .composedPath()\n    .some((el) => el instanceof Element && el.hasAttribute(OVERLAY_LAYER_ATTR) && !el.contains(node));\n};\n\n/**\n * True when `el` belongs to the topmost open overlay layer (or no layers are\n * open). Used to make Escape close only the top layer instead of every layer.\n */\nexport const isTopOverlayLayer = (el: Element | undefined): boolean => {\n  if (!el) return true;\n  const all = overlayLayers();\n  const top = all[all.length - 1];\n  return !top || top === el || top.contains(el) || el.contains(top);\n};\n"],"names":["OVERLAY_LAYER_ATTR","overlayLayers","isEventInForeignOverlay","event","node","el","isTopOverlayLayer","all","top"],"mappings":"AACO,MAAMA,IAAqB,2BAG5BC,IAAgB,MACpB,OAAO,WAAa,MAAc,CAAA,IAAK,MAAM,KAAK,SAAS,iBAAiB,IAAID,CAAkB,GAAG,CAAC,GAO3FE,IAA0B,CAACC,GAAcC,MAChD,OAAOD,EAAM,gBAAiB,aAAmB,KAC9CA,EACJ,aAAA,EACA,KAAK,CAACE,MAAOA,aAAc,WAAWA,EAAG,aAAaL,CAAkB,KAAK,CAACK,EAAG,SAASD,CAAI,CAAC,GAOvFE,IAAoB,CAACD,MAAqC;AACrE,MAAI,CAACA,EAAI,QAAO;AAChB,QAAME,IAAMN,EAAA,GACNO,IAAMD,EAAIA,EAAI,SAAS,CAAC;AAC9B,SAAO,CAACC,KAAOA,MAAQH,KAAMG,EAAI,SAASH,CAAE,KAAKA,EAAG,SAASG,CAAG;AAClE;"}
+{"version":3,"file":"overlayLayer.js","sources":["../../src/primitives/overlayLayer.ts"],"sourcesContent":["/** Attribute marking the root of a portaled overlay layer (modal, sheet wrapper, dropdown, …). */\nexport const OVERLAY_LAYER_ATTR = \"data-smwb-overlay-layer\";\n\n/** All open overlay layers in document order (last = topmost). */\nconst overlayLayers = (): Element[] =>\n  typeof document === \"undefined\" ? [] : Array.from(document.querySelectorAll(`[${OVERLAY_LAYER_ATTR}]`));\n\n/**\n * True when `event` happened inside an overlay layer above `node`, so the\n * interaction is not a \"click away\" from `node`. A layer is above `node` when it\n * comes later in document order (portaled after it, as everything opened from\n * inside `node` is) or sits inside it. A layer that holds `node` or comes before\n * it is below: a click in the Modal a select menu was opened from is a click away\n * from the menu.\n */\nexport const isEventInForeignOverlay = (event: Event, node: Element): boolean => {\n  if (typeof event.composedPath !== \"function\") return false;\n  // A layer detached during the dispatch can't be ranked; it counts as above.\n  const above = Node.DOCUMENT_POSITION_FOLLOWING | Node.DOCUMENT_POSITION_DISCONNECTED;\n  return event\n    .composedPath()\n    .some(\n      (el) =>\n        el instanceof Element && el.hasAttribute(OVERLAY_LAYER_ATTR) && (node.compareDocumentPosition(el) & above) !== 0\n    );\n};\n\n/**\n * True when `el` belongs to the topmost open overlay layer (or no layers are\n * open). Used to make Escape close only the top layer instead of every layer.\n * A layer inside `el`, such as a select menu rendered into a Modal through\n * `menuContainer`, is above `el` rather than part of it.\n */\nexport const isTopOverlayLayer = (el: Element | undefined): boolean => {\n  if (!el) return true;\n  const all = overlayLayers();\n  const top = all[all.length - 1];\n  return !top || top === el || top.contains(el);\n};\n\n/**\n * True when an open overlay layer other than `el` sits above it: inside it, or\n * later in document order (portaled after it). FloatingWindow and the fullscreen\n * ExpansionPanel leave Escape to such a layer, e.g. a select menu opened from\n * inside them. Layers earlier in document order are below `el`.\n */\nexport const hasOverlayLayerAbove = (el: Element | undefined): boolean => {\n  if (!el || !el.isConnected) return false;\n  return overlayLayers().some((layer) => (el.compareDocumentPosition(layer) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0);\n};\n"],"names":["OVERLAY_LAYER_ATTR","overlayLayers","isEventInForeignOverlay","event","node","above","el","isTopOverlayLayer","all","top","hasOverlayLayerAbove","layer"],"mappings":"AACO,MAAMA,IAAqB,2BAG5BC,IAAgB,MACpB,OAAO,WAAa,MAAc,CAAA,IAAK,MAAM,KAAK,SAAS,iBAAiB,IAAID,CAAkB,GAAG,CAAC,GAU3FE,IAA0B,CAACC,GAAcC,MAA2B;AAC/E,MAAI,OAAOD,EAAM,gBAAiB,WAAY,QAAO;AAErD,QAAME,IAAQ,KAAK,8BAA8B,KAAK;AACtD,SAAOF,EACJ,eACA;AAAA,IACC,CAACG,MACCA,aAAc,WAAWA,EAAG,aAAaN,CAAkB,MAAMI,EAAK,wBAAwBE,CAAE,IAAID,OAAW;AAAA,EAAA;AAEvH,GAQaE,IAAoB,CAACD,MAAqC;AACrE,MAAI,CAACA,EAAI,QAAO;AAChB,QAAME,IAAMP,EAAA,GACNQ,IAAMD,EAAIA,EAAI,SAAS,CAAC;AAC9B,SAAO,CAACC,KAAOA,MAAQH,KAAMG,EAAI,SAASH,CAAE;AAC9C,GAQaI,IAAuB,CAACJ,MAC/B,CAACA,KAAM,CAACA,EAAG,cAAoB,KAC5BL,EAAA,EAAgB,KAAK,CAACU,OAAWL,EAAG,wBAAwBK,CAAK,IAAI,KAAK,iCAAiC,CAAC;"}

package/dist/primitives/restoreFocus.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Hands focus back to `opener`, the element that had it when an overlay opened, once the
+ * overlay `root` closes. Focus the app moved elsewhere on purpose stays where it is: it
+ * is restored only while it is still inside `root` or has been dropped on the body (the
+ * root is gone, or the element that had it was removed). An opener that left the document
+ * is skipped, and one that cannot take focus (disabled, hidden) simply ignores the call.
+ */
+export declare function restoreFocus(opener: Element | null, root: Element | null | undefined): void;

package/dist/primitives/restoreFocus.js

@@ -0,0 +1,10 @@
+function c(t, n) {
+  if (!(t instanceof HTMLElement) || t === document.body || !t.isConnected)
+    return;
+  const e = document.activeElement;
+  e && e !== document.body && !n?.contains(e) || t.focus({ preventScroll: !0 });
+}
+export {
+  c as restoreFocus
+};
+//# sourceMappingURL=restoreFocus.js.map

package/dist/primitives/restoreFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"restoreFocus.js","sources":["../../src/primitives/restoreFocus.ts"],"sourcesContent":["/**\n * Hands focus back to `opener`, the element that had it when an overlay opened, once the\n * overlay `root` closes. Focus the app moved elsewhere on purpose stays where it is: it\n * is restored only while it is still inside `root` or has been dropped on the body (the\n * root is gone, or the element that had it was removed). An opener that left the document\n * is skipped, and one that cannot take focus (disabled, hidden) simply ignores the call.\n */\nexport function restoreFocus(opener: Element | null, root: Element | null | undefined): void {\n  if (!(opener instanceof HTMLElement) || opener === document.body || !opener.isConnected) {\n    return;\n  }\n  const active = document.activeElement;\n  if (active && active !== document.body && !root?.contains(active)) {\n    return;\n  }\n  opener.focus({ preventScroll: true });\n}\n"],"names":["restoreFocus","opener","root","active"],"mappings":"AAOO,SAASA,EAAaC,GAAwBC,GAAwC;AAC3F,MAAI,EAAED,aAAkB,gBAAgBA,MAAW,SAAS,QAAQ,CAACA,EAAO;AAC1E;AAEF,QAAME,IAAS,SAAS;AACxB,EAAIA,KAAUA,MAAW,SAAS,QAAQ,CAACD,GAAM,SAASC,CAAM,KAGhEF,EAAO,MAAM,EAAE,eAAe,GAAA,CAAM;AACtC;"}

package/dist/source/components/base/animateHeight/animateHeight.jsx

@@ -1,6 +1,7 @@
 import { createEffect, createSignal, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 const isNumberString = (n) => {
   const number = parseFloat(n);
   return !isNaN(number) && isFinite(number);
@@ -144,17 +145,12 @@ function AnimateHeight(props) {
     clearTimeout(timeoutId);
     clearTimeout(classesTimeoutId);
   });
-  const componentStyle = () => {
-    const base = {
-      ...typeof local.style === "object" && local.style ? local.style : {},
-      height: toCssHeight(currentHeight()),
-      overflow: overflow() ?? "visible"
-    };
-    if (useTransitions() && local.applyInlineTransitions) {
-      base.transition = `height ${local.duration}ms ${local.easing} ${local.delay}ms`;
-    }
-    return base;
-  };
+  const componentStyle = () => mergeStyle(local.style, {
+    height: toCssHeight(currentHeight()),
+    overflow: overflow() ?? "visible",
+    // Unset while not animating, so a transition the caller set stays.
+    transition: useTransitions() && local.applyInlineTransitions ? `height ${local.duration}ms ${local.easing} ${local.delay}ms` : void 0
+  });
   const contentStyle = () => {
     if (!local.animateOpacity) return {};
     return {

package/dist/source/components/base/animateHeight/animateHeight.jsx.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/base/animateHeight/animateHeight.tsx"],"sourcesContent":["// Solid port of react-animate-height (MIT, © Stanko Tadić)\n// https://github.com/Stanko/react-animate-height\nimport { type JSX, type ParentProps, createEffect, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport type Height = \"auto\" | number | `${number}%`;\ntype Overflow = \"auto\" | \"visible\" | \"hidden\" | undefined;\n\ninterface AnimationStateClasses {\n  animating: string;\n  animatingUp: string;\n  animatingDown: string;\n  animatingToHeightZero: string;\n  animatingToHeightAuto: string;\n  animatingToHeightSpecific: string;\n  static: string;\n  staticHeightZero: string;\n  staticHeightAuto: string;\n  staticHeightSpecific: string;\n}\n\nconst isNumberString = (n: string): boolean => {\n  const number = parseFloat(n);\n  return !isNaN(number) && isFinite(number);\n};\n\nconst isPercentage = (height: Height): height is `${number}%` =>\n  typeof height === \"string\" && height[height.length - 1] === \"%\" && isNumberString(height.substring(0, height.length - 1));\n\nconst hideContent = (element: HTMLDivElement | undefined, height: Height): void => {\n  if (height === 0 && element?.style) element.style.display = \"none\";\n};\nconst showContent = (element: HTMLDivElement | undefined, height: Height): void => {\n  if (height === 0 && element?.style) element.style.display = \"\";\n};\n\nconst ANIMATION_STATE_CLASSES: AnimationStateClasses = {\n  animating: \"rah-animating\",\n  animatingUp: \"rah-animating--up\",\n  animatingDown: \"rah-animating--down\",\n  animatingToHeightZero: \"rah-animating--to-height-zero\",\n  animatingToHeightAuto: \"rah-animating--to-height-auto\",\n  animatingToHeightSpecific: \"rah-animating--to-height-specific\",\n  static: \"rah-static\",\n  staticHeightZero: \"rah-static--height-zero\",\n  staticHeightAuto: \"rah-static--height-auto\",\n  staticHeightSpecific: \"rah-static--height-specific\",\n};\n\nconst getStaticStateClasses = (s: AnimationStateClasses, height: Height): string =>\n  cn({\n    [s.static]: true,\n    [s.staticHeightZero]: height === 0,\n    [s.staticHeightSpecific]: typeof height === \"number\" && height > 0,\n    [s.staticHeightAuto]: height === \"auto\",\n  });\n\nconst toCssHeight = (height: Height): string => (typeof height === \"number\" ? `${height}px` : height);\n\nexport interface AnimateHeightProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  animateOpacity?: boolean;\n  animationStateClasses?: Partial<AnimationStateClasses>;\n  applyInlineTransitions?: boolean;\n  contentClassName?: string;\n  delay?: number;\n  duration?: number;\n  easing?: string;\n  height: Height;\n  onHeightAnimationEnd?: (newHeight: Height) => void;\n  onHeightAnimationStart?: (newHeight: Height) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AnimateHeight(props: ParentProps<AnimateHeightProps>): JSX.Element {\n  const merged = mergeProps(\n    { animateOpacity: false, applyInlineTransitions: true, delay: 0, duration: 300, easing: \"ease\" },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"animateOpacity\",\n    \"animationStateClasses\",\n    \"applyInlineTransitions\",\n    \"children\",\n    \"class\",\n    \"contentClassName\",\n    \"delay\",\n    \"duration\",\n    \"easing\",\n    \"height\",\n    \"onHeightAnimationEnd\",\n    \"onHeightAnimationStart\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const stateClasses: AnimationStateClasses = { ...ANIMATION_STATE_CLASSES, ...local.animationStateClasses };\n\n  let contentEl: HTMLDivElement | undefined;\n  let prevHeight: Height = local.height;\n  let timeoutId: ReturnType<typeof setTimeout> | undefined;\n  let classesTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n  let initHeight: Height = local.height;\n  let initOverflow: Overflow = \"visible\";\n  if (typeof initHeight === \"number\") {\n    initHeight = initHeight < 0 ? 0 : initHeight;\n    initOverflow = \"hidden\";\n  } else if (isPercentage(initHeight)) {\n    initHeight = initHeight === \"0%\" ? 0 : initHeight;\n    initOverflow = \"hidden\";\n  }\n\n  const [currentHeight, setCurrentHeight] = createSignal<Height>(initHeight);\n  const [overflow, setOverflow] = createSignal<Overflow>(initOverflow);\n  const [useTransitions, setUseTransitions] = createSignal(false);\n  const [stateClassNames, setStateClassNames] = createSignal(getStaticStateClasses(stateClasses, local.height));\n\n  onMount(() => hideContent(contentEl, currentHeight()));\n\n  createEffect(() => {\n    const height = local.height;\n    if (height !== prevHeight && contentEl) {\n      showContent(contentEl, prevHeight);\n      contentEl.style.overflow = \"hidden\";\n      const contentHeight = contentEl.offsetHeight;\n      contentEl.style.overflow = \"\";\n\n      const totalDuration = local.duration + local.delay;\n      let newHeight: Height;\n      let timeoutHeight: Height;\n      let timeoutOverflow: Overflow = \"hidden\";\n      const isCurrentHeightAuto = prevHeight === \"auto\";\n\n      if (typeof height === \"number\") {\n        newHeight = height < 0 ? 0 : height;\n        timeoutHeight = newHeight;\n      } else if (isPercentage(height)) {\n        newHeight = height === \"0%\" ? 0 : height;\n        timeoutHeight = newHeight;\n      } else {\n        newHeight = contentHeight;\n        timeoutHeight = \"auto\";\n        timeoutOverflow = undefined;\n      }\n\n      if (isCurrentHeightAuto) {\n        timeoutHeight = newHeight;\n        newHeight = contentHeight;\n      }\n\n      const animatingClassNames = cn({\n        [stateClasses.animating]: true,\n        [stateClasses.animatingUp]:\n          prevHeight === \"auto\" || (typeof prevHeight === \"number\" && typeof height === \"number\" && height < prevHeight),\n        [stateClasses.animatingDown]:\n          height === \"auto\" || (typeof prevHeight === \"number\" && typeof height === \"number\" && height > prevHeight),\n        [stateClasses.animatingToHeightZero]: timeoutHeight === 0,\n        [stateClasses.animatingToHeightAuto]: timeoutHeight === \"auto\",\n        [stateClasses.animatingToHeightSpecific]: typeof timeoutHeight === \"number\" && timeoutHeight > 0,\n      });\n      const finalClassNames = getStaticStateClasses(stateClasses, timeoutHeight);\n\n      setCurrentHeight(newHeight);\n      setOverflow(\"hidden\");\n      setUseTransitions(!isCurrentHeightAuto);\n      setStateClassNames(animatingClassNames);\n\n      clearTimeout(timeoutId);\n      clearTimeout(classesTimeoutId);\n\n      if (isCurrentHeightAuto) {\n        timeoutId = setTimeout(() => {\n          setCurrentHeight(timeoutHeight);\n          setOverflow(timeoutOverflow);\n          setUseTransitions(true);\n          local.onHeightAnimationStart?.(timeoutHeight);\n        }, 50);\n        classesTimeoutId = setTimeout(() => {\n          setUseTransitions(false);\n          setStateClassNames(finalClassNames);\n          hideContent(contentEl, timeoutHeight);\n          local.onHeightAnimationEnd?.(timeoutHeight);\n        }, totalDuration);\n      } else {\n        local.onHeightAnimationStart?.(newHeight);\n        timeoutId = setTimeout(() => {\n          setCurrentHeight(timeoutHeight);\n          setOverflow(timeoutOverflow);\n          setUseTransitions(false);\n          setStateClassNames(finalClassNames);\n          if (height !== \"auto\") hideContent(contentEl, newHeight);\n          local.onHeightAnimationEnd?.(newHeight);\n        }, totalDuration);\n      }\n    }\n    prevHeight = height;\n  });\n\n  onCleanup(() => {\n    clearTimeout(timeoutId);\n    clearTimeout(classesTimeoutId);\n  });\n\n  const componentStyle = (): JSX.CSSProperties => {\n    const base: JSX.CSSProperties = {\n      ...(typeof local.style === \"object\" && local.style ? local.style : {}),\n      height: toCssHeight(currentHeight()),\n      overflow: overflow() ?? \"visible\",\n    };\n    if (useTransitions() && local.applyInlineTransitions) {\n      base.transition = `height ${local.duration}ms ${local.easing} ${local.delay}ms`;\n    }\n    return base;\n  };\n\n  const contentStyle = (): JSX.CSSProperties => {\n    if (!local.animateOpacity) return {};\n    return {\n      transition: `opacity ${local.duration}ms ${local.easing} ${local.delay}ms`,\n      ...(currentHeight() === 0 ? { opacity: 0 } : {}),\n    };\n  };\n\n  const ariaHidden = (): boolean | undefined =>\n    rest[\"aria-hidden\"] !== undefined ? (rest[\"aria-hidden\"] as boolean) : local.height === 0;\n\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} aria-hidden={ariaHidden()} class={cn(stateClassNames(), local.class)} style={componentStyle()}>\n      <div class={local.contentClassName} style={contentStyle()} ref={contentEl}>\n        {local.children}\n      </div>\n    </div>\n  );\n}\n\nexport default AnimateHeight;\n"],"mappings":"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","names":[],"file":"animateHeight.jsx"}
+{"version":3,"sources":["../../../../../src/components/base/animateHeight/animateHeight.tsx"],"sourcesContent":["// Solid port of react-animate-height (MIT, © Stanko Tadić)\n// https://github.com/Stanko/react-animate-height\nimport { type JSX, type ParentProps, createEffect, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\nimport { mergeStyle } from \"../../../primitives/mergeStyle\";\n\nexport type Height = \"auto\" | number | `${number}%`;\ntype Overflow = \"auto\" | \"visible\" | \"hidden\" | undefined;\n\ninterface AnimationStateClasses {\n  animating: string;\n  animatingUp: string;\n  animatingDown: string;\n  animatingToHeightZero: string;\n  animatingToHeightAuto: string;\n  animatingToHeightSpecific: string;\n  static: string;\n  staticHeightZero: string;\n  staticHeightAuto: string;\n  staticHeightSpecific: string;\n}\n\nconst isNumberString = (n: string): boolean => {\n  const number = parseFloat(n);\n  return !isNaN(number) && isFinite(number);\n};\n\nconst isPercentage = (height: Height): height is `${number}%` =>\n  typeof height === \"string\" && height[height.length - 1] === \"%\" && isNumberString(height.substring(0, height.length - 1));\n\nconst hideContent = (element: HTMLDivElement | undefined, height: Height): void => {\n  if (height === 0 && element?.style) element.style.display = \"none\";\n};\nconst showContent = (element: HTMLDivElement | undefined, height: Height): void => {\n  if (height === 0 && element?.style) element.style.display = \"\";\n};\n\nconst ANIMATION_STATE_CLASSES: AnimationStateClasses = {\n  animating: \"rah-animating\",\n  animatingUp: \"rah-animating--up\",\n  animatingDown: \"rah-animating--down\",\n  animatingToHeightZero: \"rah-animating--to-height-zero\",\n  animatingToHeightAuto: \"rah-animating--to-height-auto\",\n  animatingToHeightSpecific: \"rah-animating--to-height-specific\",\n  static: \"rah-static\",\n  staticHeightZero: \"rah-static--height-zero\",\n  staticHeightAuto: \"rah-static--height-auto\",\n  staticHeightSpecific: \"rah-static--height-specific\",\n};\n\nconst getStaticStateClasses = (s: AnimationStateClasses, height: Height): string =>\n  cn({\n    [s.static]: true,\n    [s.staticHeightZero]: height === 0,\n    [s.staticHeightSpecific]: typeof height === \"number\" && height > 0,\n    [s.staticHeightAuto]: height === \"auto\",\n  });\n\nconst toCssHeight = (height: Height): string => (typeof height === \"number\" ? `${height}px` : height);\n\nexport interface AnimateHeightProps extends JSX.HTMLAttributes<HTMLDivElement> {\n  animateOpacity?: boolean;\n  animationStateClasses?: Partial<AnimationStateClasses>;\n  applyInlineTransitions?: boolean;\n  contentClassName?: string;\n  delay?: number;\n  duration?: number;\n  easing?: string;\n  height: Height;\n  onHeightAnimationEnd?: (newHeight: Height) => void;\n  onHeightAnimationStart?: (newHeight: Height) => void;\n  ref?: Ref<HTMLDivElement>;\n}\n\nexport function AnimateHeight(props: ParentProps<AnimateHeightProps>): JSX.Element {\n  const merged = mergeProps(\n    { animateOpacity: false, applyInlineTransitions: true, delay: 0, duration: 300, easing: \"ease\" },\n    props\n  );\n  const [local, rest] = splitProps(merged, [\n    \"animateOpacity\",\n    \"animationStateClasses\",\n    \"applyInlineTransitions\",\n    \"children\",\n    \"class\",\n    \"contentClassName\",\n    \"delay\",\n    \"duration\",\n    \"easing\",\n    \"height\",\n    \"onHeightAnimationEnd\",\n    \"onHeightAnimationStart\",\n    \"style\",\n    \"ref\",\n  ]);\n\n  const stateClasses: AnimationStateClasses = { ...ANIMATION_STATE_CLASSES, ...local.animationStateClasses };\n\n  let contentEl: HTMLDivElement | undefined;\n  let prevHeight: Height = local.height;\n  let timeoutId: ReturnType<typeof setTimeout> | undefined;\n  let classesTimeoutId: ReturnType<typeof setTimeout> | undefined;\n\n  let initHeight: Height = local.height;\n  let initOverflow: Overflow = \"visible\";\n  if (typeof initHeight === \"number\") {\n    initHeight = initHeight < 0 ? 0 : initHeight;\n    initOverflow = \"hidden\";\n  } else if (isPercentage(initHeight)) {\n    initHeight = initHeight === \"0%\" ? 0 : initHeight;\n    initOverflow = \"hidden\";\n  }\n\n  const [currentHeight, setCurrentHeight] = createSignal<Height>(initHeight);\n  const [overflow, setOverflow] = createSignal<Overflow>(initOverflow);\n  const [useTransitions, setUseTransitions] = createSignal(false);\n  const [stateClassNames, setStateClassNames] = createSignal(getStaticStateClasses(stateClasses, local.height));\n\n  onMount(() => hideContent(contentEl, currentHeight()));\n\n  createEffect(() => {\n    const height = local.height;\n    if (height !== prevHeight && contentEl) {\n      showContent(contentEl, prevHeight);\n      contentEl.style.overflow = \"hidden\";\n      const contentHeight = contentEl.offsetHeight;\n      contentEl.style.overflow = \"\";\n\n      const totalDuration = local.duration + local.delay;\n      let newHeight: Height;\n      let timeoutHeight: Height;\n      let timeoutOverflow: Overflow = \"hidden\";\n      const isCurrentHeightAuto = prevHeight === \"auto\";\n\n      if (typeof height === \"number\") {\n        newHeight = height < 0 ? 0 : height;\n        timeoutHeight = newHeight;\n      } else if (isPercentage(height)) {\n        newHeight = height === \"0%\" ? 0 : height;\n        timeoutHeight = newHeight;\n      } else {\n        newHeight = contentHeight;\n        timeoutHeight = \"auto\";\n        timeoutOverflow = undefined;\n      }\n\n      if (isCurrentHeightAuto) {\n        timeoutHeight = newHeight;\n        newHeight = contentHeight;\n      }\n\n      const animatingClassNames = cn({\n        [stateClasses.animating]: true,\n        [stateClasses.animatingUp]:\n          prevHeight === \"auto\" || (typeof prevHeight === \"number\" && typeof height === \"number\" && height < prevHeight),\n        [stateClasses.animatingDown]:\n          height === \"auto\" || (typeof prevHeight === \"number\" && typeof height === \"number\" && height > prevHeight),\n        [stateClasses.animatingToHeightZero]: timeoutHeight === 0,\n        [stateClasses.animatingToHeightAuto]: timeoutHeight === \"auto\",\n        [stateClasses.animatingToHeightSpecific]: typeof timeoutHeight === \"number\" && timeoutHeight > 0,\n      });\n      const finalClassNames = getStaticStateClasses(stateClasses, timeoutHeight);\n\n      setCurrentHeight(newHeight);\n      setOverflow(\"hidden\");\n      setUseTransitions(!isCurrentHeightAuto);\n      setStateClassNames(animatingClassNames);\n\n      clearTimeout(timeoutId);\n      clearTimeout(classesTimeoutId);\n\n      if (isCurrentHeightAuto) {\n        timeoutId = setTimeout(() => {\n          setCurrentHeight(timeoutHeight);\n          setOverflow(timeoutOverflow);\n          setUseTransitions(true);\n          local.onHeightAnimationStart?.(timeoutHeight);\n        }, 50);\n        classesTimeoutId = setTimeout(() => {\n          setUseTransitions(false);\n          setStateClassNames(finalClassNames);\n          hideContent(contentEl, timeoutHeight);\n          local.onHeightAnimationEnd?.(timeoutHeight);\n        }, totalDuration);\n      } else {\n        local.onHeightAnimationStart?.(newHeight);\n        timeoutId = setTimeout(() => {\n          setCurrentHeight(timeoutHeight);\n          setOverflow(timeoutOverflow);\n          setUseTransitions(false);\n          setStateClassNames(finalClassNames);\n          if (height !== \"auto\") hideContent(contentEl, newHeight);\n          local.onHeightAnimationEnd?.(newHeight);\n        }, totalDuration);\n      }\n    }\n    prevHeight = height;\n  });\n\n  onCleanup(() => {\n    clearTimeout(timeoutId);\n    clearTimeout(classesTimeoutId);\n  });\n\n  const componentStyle = (): JSX.CSSProperties | string | undefined =>\n    mergeStyle(local.style, {\n      height: toCssHeight(currentHeight()),\n      overflow: overflow() ?? \"visible\",\n      // Unset while not animating, so a transition the caller set stays.\n      transition:\n        useTransitions() && local.applyInlineTransitions\n          ? `height ${local.duration}ms ${local.easing} ${local.delay}ms`\n          : undefined,\n    });\n\n  const contentStyle = (): JSX.CSSProperties => {\n    if (!local.animateOpacity) return {};\n    return {\n      transition: `opacity ${local.duration}ms ${local.easing} ${local.delay}ms`,\n      ...(currentHeight() === 0 ? { opacity: 0 } : {}),\n    };\n  };\n\n  const ariaHidden = (): boolean | undefined =>\n    rest[\"aria-hidden\"] !== undefined ? (rest[\"aria-hidden\"] as boolean) : local.height === 0;\n\n  return (\n    <div {...rest} ref={mergeRefs(local.ref)} aria-hidden={ariaHidden()} class={cn(stateClassNames(), local.class)} style={componentStyle()}>\n      <div class={local.contentClassName} style={contentStyle()} ref={contentEl}>\n        {local.children}\n      </div>\n    </div>\n  );\n}\n\nexport default AnimateHeight;\n"],"mappings":"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","names":[],"file":"animateHeight.jsx"}

package/dist/source/components/base/icon/icon.jsx

@@ -3,6 +3,7 @@ import "@smwb/ui-styles/less/components/icon/icon.entry.less";
 import { mergeProps, splitProps, useContext } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
+import { mergeStyle } from "../../../primitives/mergeStyle";
 import { getIcon } from "../../../icons/registry";
 import { getIconConfig } from "../../../icons/config";
 import { createIconVersion, IconContext } from "./iconProvider";
@@ -39,7 +40,8 @@ function Icon(props) {
     "title",
     "style",
     "source",
-    "ref"
+    "ref",
+    "data-testid"
   ]);
   const context = useContext(IconContext);
   const version = createIconVersion();
@@ -62,26 +64,22 @@ function Icon(props) {
     }
     return "google";
   };
-  const decorative = () => local.title === void 0;
+  const decorative = () => !(local.title || rest["aria-label"] || rest["aria-labelledby"]);
   const colorClass = () => typeof local.color === "string" && COLOR_TOKENS.includes(local.color) ? `smwb-icon_color-${local.color}` : void 0;
-  const styleObject = () => typeof local.style === "object" && local.style ? local.style : {};
   const cssSize = () => typeof local.size === "number" ? `${local.size}px` : local.size;
   const strokeWidth = () => Math.round(Math.min(3, Math.max(1, local.weight / 200)) * 100) / 100;
   return <span
     {...rest}
     ref={mergeRefs(local.ref)}
-    data-testid="icon"
+    data-testid={local["data-testid"] ?? "icon"}
     data-icon-source={mode()}
-    role={decorative() ? void 0 : "img"}
+    role={rest.role ?? (decorative() ? void 0 : "img")}
     aria-hidden={decorative() ? true : void 0}
-    aria-label={local.title}
+    aria-label={local.title || rest["aria-label"]}
     title={local.title}
-    style={{
-      ...styleObject(),
-      ...mode() === "google" ? {
-        "font-variation-settings": `'FILL' ${local.fill}, 'wght' ${local.weight}, 'GRAD' ${local.grade}, 'opsz' 48`
-      } : null
-    }}
+    style={mergeStyle(local.style, {
+      "font-variation-settings": mode() === "google" ? `'FILL' ${local.fill}, 'wght' ${local.weight}, 'GRAD' ${local.grade}, 'opsz' 48` : void 0
+    })}
     class={cn("smwb-icon__wrapper", colorClass(), local.class)}
   >
       {mode() === "google" ? <span class="material-symbols-outlined" style={{ "font-size": cssSize() }}>

package/dist/source/components/base/icon/icon.jsx.map

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