@smwb/ui-solid 0.12.0 → 0.13.0

package/dist/primitives/createCssTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"createCssTransition.js","sources":["../../src/primitives/createCssTransition.ts"],"sourcesContent":["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\nexport interface CssTransitionClassNames {\n  appear?: string;\n  appearActive?: string;\n  appearDone?: string;\n  enter?: string;\n  enterActive?: string;\n  enterDone?: string;\n  exit?: string;\n  exitActive?: string;\n  exitDone?: string;\n}\n\nexport interface CreateCssTransitionOptions {\n  in: Accessor<boolean>;\n  timeout: { appear?: number; enter: number; exit: number };\n  classNames: CssTransitionClassNames;\n  /** Animate the very first mount when `in` is already true. */\n  appear?: boolean;\n}\n\nexport interface CssTransitionState {\n  /** Whether the node should be in the DOM (mountOnEnter + unmountOnExit). */\n  mounted: Accessor<boolean>;\n  /** Transition classes to apply to the node for the current phase. */\n  classes: Accessor<string>;\n}\n\nconst join = (...parts: Array<string | undefined>): string => parts.filter(Boolean).join(\" \");\n\n/**\n * Single-node CSS transition with mountOnEnter + unmountOnExit semantics — a\n * dependency-free replacement for react-transition-group's CSSTransition. Uses\n * a double rAF to flush the start class before the active class so the CSS\n * transition runs, and a timeout to advance to the done/unmounted phase.\n */\nexport function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState {\n  const [mounted, setMounted] = createSignal(options.in());\n  const [classes, setClasses] = createSignal(\"\");\n\n  let first = true;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let raf1: number | undefined;\n  let raf2: number | undefined;\n\n  const clearTimers = (): void => {\n    if (timer !== undefined) clearTimeout(timer);\n    if (raf1 !== undefined) cancelAnimationFrame(raf1);\n    if (raf2 !== undefined) cancelAnimationFrame(raf2);\n    timer = undefined;\n    raf1 = undefined;\n    raf2 = undefined;\n  };\n\n  const run = (start: string | undefined, active: string | undefined, done: string | undefined, duration: number, onEnd?: () => void): void => {\n    setClasses(start ?? \"\");\n    raf1 = requestAnimationFrame(() => {\n      raf2 = requestAnimationFrame(() => setClasses(join(start, active)));\n    });\n    timer = setTimeout(() => {\n      if (onEnd) onEnd();\n      else setClasses(done ?? \"\");\n    }, duration);\n  };\n\n  createEffect(() => {\n    const show = options.in();\n    clearTimers();\n    const cls = options.classNames;\n\n    if (show) {\n      setMounted(true);\n      if (first && !options.appear) {\n        setClasses(cls.enterDone ?? \"\");\n      } else {\n        const useAppear = first && !!options.appear;\n        run(\n          useAppear ? cls.appear : cls.enter,\n          useAppear ? cls.appearActive : cls.enterActive,\n          useAppear ? (cls.appearDone ?? cls.enterDone) : cls.enterDone,\n          useAppear ? (options.timeout.appear ?? options.timeout.enter) : options.timeout.enter\n        );\n      }\n    } else if (mounted()) {\n      run(cls.exit, cls.exitActive, cls.exitDone, options.timeout.exit, () => {\n        setMounted(false);\n        setClasses(\"\");\n      });\n    }\n    first = false;\n  });\n\n  onCleanup(clearTimers);\n\n  return { mounted, classes };\n}\n"],"names":["join","parts","createCssTransition","options","mounted","setMounted","createSignal","classes","setClasses","first","timer","raf1","raf2","clearTimers","run","start","active","done","duration","onEnd","createEffect","show","cls","useAppear","onCleanup"],"mappings":";AA6BA,MAAMA,IAAO,IAAIC,MAA6CA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AAQrF,SAASC,EAAoBC,GAAyD;AAC3F,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAaH,EAAQ,IAAI,GACjD,CAACI,GAASC,CAAU,IAAIF,EAAa,EAAE;AAE7C,MAAIG,IAAQ,IACRC,GACAC,GACAC;AAEJ,QAAMC,IAAc,MAAY;AAC9B,IAAIH,MAAU,UAAW,aAAaA,CAAK,GACvCC,MAAS,UAAW,qBAAqBA,CAAI,GAC7CC,MAAS,UAAW,qBAAqBA,CAAI,GACjDF,IAAQ,QACRC,IAAO,QACPC,IAAO;AAAA,EACT,GAEME,IAAM,CAACC,GAA2BC,GAA4BC,GAA0BC,GAAkBC,MAA6B;AAC3I,IAAAX,EAAWO,KAAS,EAAE,GACtBJ,IAAO,sBAAsB,MAAM;AACjC,MAAAC,IAAO,sBAAsB,MAAMJ,EAAWR,EAAKe,GAAOC,CAAM,CAAC,CAAC;AAAA,IACpE,CAAC,GACDN,IAAQ,WAAW,MAAM;AACvB,MAAIS,IAAOA,EAAA,IACNX,EAAWS,KAAQ,EAAE;AAAA,IAC5B,GAAGC,CAAQ;AAAA,EACb;AAEA,SAAAE,EAAa,MAAM;AACjB,UAAMC,IAAOlB,EAAQ,GAAA;AACrB,IAAAU,EAAA;AACA,UAAMS,IAAMnB,EAAQ;AAEpB,QAAIkB;AAEF,UADAhB,EAAW,EAAI,GACXI,KAAS,CAACN,EAAQ;AACpB,QAAAK,EAAWc,EAAI,aAAa,EAAE;AAAA,WACzB;AACL,cAAMC,IAAYd,KAAS,CAAC,CAACN,EAAQ;AACrC,QAAAW;AAAA,UACES,IAAYD,EAAI,SAASA,EAAI;AAAA,UAC7BC,IAAYD,EAAI,eAAeA,EAAI;AAAA,UACnCC,IAAaD,EAAI,cAAcA,EAAI,YAAaA,EAAI;AAAA,UACpDC,IAAapB,EAAQ,QAAQ,UAAUA,EAAQ,QAAQ,QAASA,EAAQ,QAAQ;AAAA,QAAA;AAAA,MAEpF;AAAA,QACF,CAAWC,OACTU,EAAIQ,EAAI,MAAMA,EAAI,YAAYA,EAAI,UAAUnB,EAAQ,QAAQ,MAAM,MAAM;AACtE,MAAAE,EAAW,EAAK,GAChBG,EAAW,EAAE;AAAA,IACf,CAAC;AAEH,IAAAC,IAAQ;AAAA,EACV,CAAC,GAEDe,EAAUX,CAAW,GAEd,EAAE,SAAAT,GAAS,SAAAG,EAAA;AACpB;"}
+{"version":3,"file":"createCssTransition.js","sources":["../../src/primitives/createCssTransition.ts"],"sourcesContent":["import { type Accessor, createEffect, createSignal, onCleanup } from \"solid-js\";\n\nexport interface CssTransitionClassNames {\n  appear?: string;\n  appearActive?: string;\n  appearDone?: string;\n  enter?: string;\n  enterActive?: string;\n  enterDone?: string;\n  exit?: string;\n  exitActive?: string;\n  exitDone?: string;\n}\n\nexport interface CreateCssTransitionOptions {\n  in: Accessor<boolean>;\n  timeout: { appear?: number; enter: number; exit: number };\n  classNames: CssTransitionClassNames;\n  /** Animate the very first mount when `in` is already true. */\n  appear?: boolean;\n}\n\nexport interface CssTransitionState {\n  /** Whether the node should be in the DOM (mountOnEnter + unmountOnExit). */\n  mounted: Accessor<boolean>;\n  /** Transition classes to apply to the node for the current phase. */\n  classes: Accessor<string>;\n}\n\nconst join = (...parts: Array<string | undefined>): string => parts.filter(Boolean).join(\" \");\n\n/**\n * Single-node CSS transition with mountOnEnter + unmountOnExit semantics — a\n * dependency-free replacement for react-transition-group's CSSTransition. Uses\n * a double rAF to flush the start class before the active class so the CSS\n * transition runs, and a timeout to advance to the done/unmounted phase.\n *\n * Each phase settles once: when the timeout fires, the pending rAFs are\n * cancelled and can no longer rewrite the classes. At a low frame rate the\n * second rAF can land after the timeout, and it used to overwrite the done\n * class with the start/active classes, parking the node in its off-screen\n * state.\n */\nexport function createCssTransition(options: CreateCssTransitionOptions): CssTransitionState {\n  const [mounted, setMounted] = createSignal(options.in());\n  const [classes, setClasses] = createSignal(\"\");\n\n  let first = true;\n  let timer: ReturnType<typeof setTimeout> | undefined;\n  let raf1: number | undefined;\n  let raf2: number | undefined;\n  // Bumped whenever a phase settles or is replaced; a frame callback from an\n  // older phase sees a different value and does nothing.\n  let generation = 0;\n\n  const clearTimers = (): void => {\n    generation++;\n    if (timer !== undefined) clearTimeout(timer);\n    if (raf1 !== undefined) cancelAnimationFrame(raf1);\n    if (raf2 !== undefined) cancelAnimationFrame(raf2);\n    timer = undefined;\n    raf1 = undefined;\n    raf2 = undefined;\n  };\n\n  const run = (start: string | undefined, active: string | undefined, done: string | undefined, duration: number, onEnd?: () => void): void => {\n    const own = generation;\n    setClasses(start ?? \"\");\n    raf1 = requestAnimationFrame(() => {\n      raf1 = undefined;\n      if (own !== generation) return;\n      raf2 = requestAnimationFrame(() => {\n        raf2 = undefined;\n        if (own === generation) setClasses(join(start, active));\n      });\n    });\n    timer = setTimeout(() => {\n      clearTimers();\n      if (onEnd) onEnd();\n      else setClasses(done ?? \"\");\n    }, duration);\n  };\n\n  createEffect(() => {\n    const show = options.in();\n    clearTimers();\n    const cls = options.classNames;\n\n    if (show) {\n      setMounted(true);\n      if (first && !options.appear) {\n        setClasses(cls.enterDone ?? \"\");\n      } else {\n        const useAppear = first && !!options.appear;\n        run(\n          useAppear ? cls.appear : cls.enter,\n          useAppear ? cls.appearActive : cls.enterActive,\n          useAppear ? (cls.appearDone ?? cls.enterDone) : cls.enterDone,\n          useAppear ? (options.timeout.appear ?? options.timeout.enter) : options.timeout.enter\n        );\n      }\n    } else if (mounted()) {\n      run(cls.exit, cls.exitActive, cls.exitDone, options.timeout.exit, () => {\n        setMounted(false);\n        setClasses(\"\");\n      });\n    }\n    first = false;\n  });\n\n  onCleanup(clearTimers);\n\n  return { mounted, classes };\n}\n"],"names":["join","parts","createCssTransition","options","mounted","setMounted","createSignal","classes","setClasses","first","timer","raf1","raf2","generation","clearTimers","run","start","active","done","duration","onEnd","own","createEffect","show","cls","useAppear","onCleanup"],"mappings":";AA6BA,MAAMA,IAAO,IAAIC,MAA6CA,EAAM,OAAO,OAAO,EAAE,KAAK,GAAG;AAcrF,SAASC,EAAoBC,GAAyD;AAC3F,QAAM,CAACC,GAASC,CAAU,IAAIC,EAAaH,EAAQ,IAAI,GACjD,CAACI,GAASC,CAAU,IAAIF,EAAa,EAAE;AAE7C,MAAIG,IAAQ,IACRC,GACAC,GACAC,GAGAC,IAAa;AAEjB,QAAMC,IAAc,MAAY;AAC9B,IAAAD,KACIH,MAAU,UAAW,aAAaA,CAAK,GACvCC,MAAS,UAAW,qBAAqBA,CAAI,GAC7CC,MAAS,UAAW,qBAAqBA,CAAI,GACjDF,IAAQ,QACRC,IAAO,QACPC,IAAO;AAAA,EACT,GAEMG,IAAM,CAACC,GAA2BC,GAA4BC,GAA0BC,GAAkBC,MAA6B;AAC3I,UAAMC,IAAMR;AACZ,IAAAL,EAAWQ,KAAS,EAAE,GACtBL,IAAO,sBAAsB,MAAM;AAEjC,MADAA,IAAO,QACHU,MAAQR,MACZD,IAAO,sBAAsB,MAAM;AACjC,QAAAA,IAAO,QACHS,MAAQR,KAAYL,EAAWR,EAAKgB,GAAOC,CAAM,CAAC;AAAA,MACxD,CAAC;AAAA,IACH,CAAC,GACDP,IAAQ,WAAW,MAAM;AACvB,MAAAI,EAAA,GACIM,IAAOA,EAAA,IACNZ,EAAWU,KAAQ,EAAE;AAAA,IAC5B,GAAGC,CAAQ;AAAA,EACb;AAEA,SAAAG,EAAa,MAAM;AACjB,UAAMC,IAAOpB,EAAQ,GAAA;AACrB,IAAAW,EAAA;AACA,UAAMU,IAAMrB,EAAQ;AAEpB,QAAIoB;AAEF,UADAlB,EAAW,EAAI,GACXI,KAAS,CAACN,EAAQ;AACpB,QAAAK,EAAWgB,EAAI,aAAa,EAAE;AAAA,WACzB;AACL,cAAMC,IAAYhB,KAAS,CAAC,CAACN,EAAQ;AACrC,QAAAY;AAAA,UACEU,IAAYD,EAAI,SAASA,EAAI;AAAA,UAC7BC,IAAYD,EAAI,eAAeA,EAAI;AAAA,UACnCC,IAAaD,EAAI,cAAcA,EAAI,YAAaA,EAAI;AAAA,UACpDC,IAAatB,EAAQ,QAAQ,UAAUA,EAAQ,QAAQ,QAASA,EAAQ,QAAQ;AAAA,QAAA;AAAA,MAEpF;AAAA,QACF,CAAWC,OACTW,EAAIS,EAAI,MAAMA,EAAI,YAAYA,EAAI,UAAUrB,EAAQ,QAAQ,MAAM,MAAM;AACtE,MAAAE,EAAW,EAAK,GAChBG,EAAW,EAAE;AAAA,IACf,CAAC;AAEH,IAAAC,IAAQ;AAAA,EACV,CAAC,GAEDiB,EAAUZ,CAAW,GAEd,EAAE,SAAAV,GAAS,SAAAG,EAAA;AACpB;"}

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>;

package/dist/primitives/createFocusTrap.js

@@ -26,6 +26,7 @@ function v(t) {
   });
 }
 export {
+  b as FOCUSABLE,
   v 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\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":";AAGO,MAAMA,IACX;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;"}

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/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/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":"AAEA,SAAqC,cAAc,cAAc,YAAY,WAAW,SAAS,kBAAkB;AACnH,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,kBAAkB;AAkB3B,MAAM,iBAAiB,CAAC,MAAuB;AAC7C,QAAM,SAAS,WAAW,CAAC;AAC3B,SAAO,CAAC,MAAM,MAAM,KAAK,SAAS,MAAM;AAC1C;AAEA,MAAM,eAAe,CAAC,WACpB,OAAO,WAAW,YAAY,OAAO,OAAO,SAAS,CAAC,MAAM,OAAO,eAAe,OAAO,UAAU,GAAG,OAAO,SAAS,CAAC,CAAC;AAE1H,MAAM,cAAc,CAAC,SAAqC,WAAyB;AACjF,MAAI,WAAW,KAAK,SAAS,MAAO,SAAQ,MAAM,UAAU;AAC9D;AACA,MAAM,cAAc,CAAC,SAAqC,WAAyB;AACjF,MAAI,WAAW,KAAK,SAAS,MAAO,SAAQ,MAAM,UAAU;AAC9D;AAEA,MAAM,0BAAiD;AAAA,EACrD,WAAW;AAAA,EACX,aAAa;AAAA,EACb,eAAe;AAAA,EACf,uBAAuB;AAAA,EACvB,uBAAuB;AAAA,EACvB,2BAA2B;AAAA,EAC3B,QAAQ;AAAA,EACR,kBAAkB;AAAA,EAClB,kBAAkB;AAAA,EAClB,sBAAsB;AACxB;AAEA,MAAM,wBAAwB,CAAC,GAA0B,WACvD,GAAG;AAAA,EACD,CAAC,EAAE,MAAM,GAAG;AAAA,EACZ,CAAC,EAAE,gBAAgB,GAAG,WAAW;AAAA,EACjC,CAAC,EAAE,oBAAoB,GAAG,OAAO,WAAW,YAAY,SAAS;AAAA,EACjE,CAAC,EAAE,gBAAgB,GAAG,WAAW;AACnC,CAAC;AAEH,MAAM,cAAc,CAAC,WAA4B,OAAO,WAAW,WAAW,GAAG,MAAM,OAAO;AAgBvF,SAAS,cAAc,OAAqD;AACjF,QAAM,SAAS;AAAA,IACb,EAAE,gBAAgB,OAAO,wBAAwB,MAAM,OAAO,GAAG,UAAU,KAAK,QAAQ,OAAO;AAAA,IAC/F;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,eAAsC,EAAE,GAAG,yBAAyB,GAAG,MAAM,sBAAsB;AAEzG,MAAI;AACJ,MAAI,aAAqB,MAAM;AAC/B,MAAI;AACJ,MAAI;AAEJ,MAAI,aAAqB,MAAM;AAC/B,MAAI,eAAyB;AAC7B,MAAI,OAAO,eAAe,UAAU;AAClC,iBAAa,aAAa,IAAI,IAAI;AAClC,mBAAe;AAAA,EACjB,WAAW,aAAa,UAAU,GAAG;AACnC,iBAAa,eAAe,OAAO,IAAI;AACvC,mBAAe;AAAA,EACjB;AAEA,QAAM,CAAC,eAAe,gBAAgB,IAAI,aAAqB,UAAU;AACzE,QAAM,CAAC,UAAU,WAAW,IAAI,aAAuB,YAAY;AACnE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,aAAa,KAAK;AAC9D,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,aAAa,sBAAsB,cAAc,MAAM,MAAM,CAAC;AAE5G,UAAQ,MAAM,YAAY,WAAW,cAAc,CAAC,CAAC;AAErD,eAAa,MAAM;AACjB,UAAM,SAAS,MAAM;AACrB,QAAI,WAAW,cAAc,WAAW;AACtC,kBAAY,WAAW,UAAU;AACjC,gBAAU,MAAM,WAAW;AAC3B,YAAM,gBAAgB,UAAU;AAChC,gBAAU,MAAM,WAAW;AAE3B,YAAM,gBAAgB,MAAM,WAAW,MAAM;AAC7C,UAAI;AACJ,UAAI;AACJ,UAAI,kBAA4B;AAChC,YAAM,sBAAsB,eAAe;AAE3C,UAAI,OAAO,WAAW,UAAU;AAC9B,oBAAY,SAAS,IAAI,IAAI;AAC7B,wBAAgB;AAAA,MAClB,WAAW,aAAa,MAAM,GAAG;AAC/B,oBAAY,WAAW,OAAO,IAAI;AAClC,wBAAgB;AAAA,MAClB,OAAO;AACL,oBAAY;AACZ,wBAAgB;AAChB,0BAAkB;AAAA,MACpB;AAEA,UAAI,qBAAqB;AACvB,wBAAgB;AAChB,oBAAY;AAAA,MACd;AAEA,YAAM,sBAAsB,GAAG;AAAA,QAC7B,CAAC,aAAa,SAAS,GAAG;AAAA,QAC1B,CAAC,aAAa,WAAW,GACvB,eAAe,UAAW,OAAO,eAAe,YAAY,OAAO,WAAW,YAAY,SAAS;AAAA,QACrG,CAAC,aAAa,aAAa,GACzB,WAAW,UAAW,OAAO,eAAe,YAAY,OAAO,WAAW,YAAY,SAAS;AAAA,QACjG,CAAC,aAAa,qBAAqB,GAAG,kBAAkB;AAAA,QACxD,CAAC,aAAa,qBAAqB,GAAG,kBAAkB;AAAA,QACxD,CAAC,aAAa,yBAAyB,GAAG,OAAO,kBAAkB,YAAY,gBAAgB;AAAA,MACjG,CAAC;AACD,YAAM,kBAAkB,sBAAsB,cAAc,aAAa;AAEzE,uBAAiB,SAAS;AAC1B,kBAAY,QAAQ;AACpB,wBAAkB,CAAC,mBAAmB;AACtC,yBAAmB,mBAAmB;AAEtC,mBAAa,SAAS;AACtB,mBAAa,gBAAgB;AAE7B,UAAI,qBAAqB;AACvB,oBAAY,WAAW,MAAM;AAC3B,2BAAiB,aAAa;AAC9B,sBAAY,eAAe;AAC3B,4BAAkB,IAAI;AACtB,gBAAM,yBAAyB,aAAa;AAAA,QAC9C,GAAG,EAAE;AACL,2BAAmB,WAAW,MAAM;AAClC,4BAAkB,KAAK;AACvB,6BAAmB,eAAe;AAClC,sBAAY,WAAW,aAAa;AACpC,gBAAM,uBAAuB,aAAa;AAAA,QAC5C,GAAG,aAAa;AAAA,MAClB,OAAO;AACL,cAAM,yBAAyB,SAAS;AACxC,oBAAY,WAAW,MAAM;AAC3B,2BAAiB,aAAa;AAC9B,sBAAY,eAAe;AAC3B,4BAAkB,KAAK;AACvB,6BAAmB,eAAe;AAClC,cAAI,WAAW,OAAQ,aAAY,WAAW,SAAS;AACvD,gBAAM,uBAAuB,SAAS;AAAA,QACxC,GAAG,aAAa;AAAA,MAClB;AAAA,IACF;AACA,iBAAa;AAAA,EACf,CAAC;AAED,YAAU,MAAM;AACd,iBAAa,SAAS;AACtB,iBAAa,gBAAgB;AAAA,EAC/B,CAAC;AAED,QAAM,iBAAiB,MACrB,WAAW,MAAM,OAAO;AAAA,IACtB,QAAQ,YAAY,cAAc,CAAC;AAAA,IACnC,UAAU,SAAS,KAAK;AAAA;AAAA,IAExB,YACE,eAAe,KAAK,MAAM,yBACtB,UAAU,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI,MAAM,KAAK,OACzD;AAAA,EACR,CAAC;AAEH,QAAM,eAAe,MAAyB;AAC5C,QAAI,CAAC,MAAM,eAAgB,QAAO,CAAC;AACnC,WAAO;AAAA,MACL,YAAY,WAAW,MAAM,QAAQ,MAAM,MAAM,MAAM,IAAI,MAAM,KAAK;AAAA,MACtE,GAAI,cAAc,MAAM,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC;AAAA,IAChD;AAAA,EACF;AAEA,QAAM,aAAa,MACjB,KAAK,aAAa,MAAM,SAAa,KAAK,aAAa,IAAgB,MAAM,WAAW;AAE1F,SACE,CAAC,QAAQ,MAAM,KAAK,UAAU,MAAM,GAAG,GAAG,aAAa,WAAW,GAAG,OAAO,GAAG,gBAAgB,GAAG,MAAM,KAAK,GAAG,OAAO,eAAe,GAAG;AAAA,MACvI,CAAC,IAAI,OAAO,MAAM,kBAAkB,OAAO,aAAa,GAAG,KAAK,WAAW;AAAA,SACxE,MAAM,SAAS;AAAA,MAClB,EAFC,IAEK;AAAA,IACR,EAJC;AAML;AAEA,IAAO,wBAAQ;","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":"AAAA,OAAO;AACP,OAAO;AAKP,SAAmB,YAAY,YAAY,kBAAkB;AAC7D,OAAO,QAAQ;AACf,SAAS,iBAA2B;AACpC,SAAS,eAAe;AACxB,SAAS,qBAAqB;AAE9B,SAAS,mBAAmB,mBAAmB;AAI/C,MAAM,eAAsC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;AAEA,MAAM,SAAS,oBAAI,IAAY;AAE/B,SAAS,YAAY,MAAoB;AACvC,MAAI,CAAC,cAAc,EAAE,iBAAiB,OAAO,IAAI,IAAI,EAAG;AACxD,SAAO,IAAI,IAAI;AACf,UAAQ;AAAA,IACN,gBAAgB,IAAI,8CAA8C,IAAI;AAAA,EAExE;AACF;AA4CO,SAAS,KAAK,OAA+B;AAClD,QAAM,SAAS;AAAA,IACb,EAAE,QAAQ,KAAK,MAAM,GAAY,MAAM,IAAuB,OAAO,KAAK,OAAO,UAAgC;AAAA,IACjH;AAAA,EACF;AACA,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,UAAU,WAAW,WAAW;AAEtC,QAAM,UAAU,kBAAkB;AAElC,QAAM,SAAS,MAAkB;AAC/B,YAAQ;AACR,WAAO,MAAM,UAAU,SAAS,UAAU,cAAc,EAAE;AAAA,EAC5D;AACA,QAAM,aAAa,MAAkC;AACnD,YAAQ;AACR,WAAO,OAAO,MAAM,SAAS,WAAW,MAAM,OAAO,QAAQ,MAAM,IAAI;AAAA,EACzE;AACA,QAAM,QAAQ,MAAe,OAAO,MAAM,SAAS,WAAW,MAAM,OAAO,MAAM,KAAK;AAEtF,QAAM,OAAO,MAAqC;AAChD,UAAM,WAAW,OAAO;AACxB,QAAI,aAAa,SAAU,QAAO;AAClC,QAAI,WAAW,EAAG,QAAO;AACzB,QAAI,aAAa,QAAQ;AACvB,kBAAY,MAAM,CAAC;AACnB,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,MAAe,MAAM,UAAU;AAClD,QAAM,aAAa,MACjB,OAAO,MAAM,UAAU,YAAY,aAAa,SAAS,MAAM,KAAK,IAAI,mBAAmB,MAAM,KAAK,KAAK;AAC7G,QAAM,cAAc,MAA0B,OAAO,MAAM,UAAU,YAAY,MAAM,QAAQ,MAAM,QAAQ,CAAC;AAC9G,QAAM,UAAU,MAAe,OAAO,MAAM,SAAS,WAAW,GAAG,MAAM,IAAI,OAAO,MAAM;AAC1F,QAAM,cAAc,MAAc,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,MAAM,SAAS,GAAG,CAAC,IAAI,GAAG,IAAI;AAEnG,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,YAAY;AAAA,IACZ,kBAAkB,KAAK;AAAA,IACvB,MAAM,WAAW,IAAI,SAAY;AAAA,IACjC,aAAa,WAAW,IAAI,OAAO;AAAA,IACnC,YAAY,MAAM;AAAA,IAClB,OAAO,MAAM;AAAA,IACb,OAAO;AAAA,MACL,GAAG,YAAY;AAAA,MACf,GAAI,KAAK,MAAM,WACX;AAAA,QACE,2BAA2B,UAAU,MAAM,IAAI,YAAY,MAAM,MAAM,YAAY,MAAM,KAAK;AAAA,MAChG,IACA;AAAA,IACN;AAAA,IACA,OAAO,GAAG,sBAAsB,WAAW,GAAG,MAAM,KAAK;AAAA,GAC1D;AAAA,OACE,KAAK,MAAM,WACV,CAAC,KAAK,MAAM,4BAA4B,OAAO,EAAE,aAAa,QAAQ,EAAE,GAAG;AAAA,WACxE,MAAM,EAAE;AAAA,QACX,EAFC,QAID,CAAC;AAAA,IACC,MAAM;AAAA,IACN,SAAS,WAAW,GAAG,WAAW;AAAA,IAClC,OAAO,EAAE,OAAO,QAAQ,GAAG,QAAQ,QAAQ,EAAE;AAAA,IAC7C,KAAK;AAAA,IACL,OAAO;AAAA,IACP,cAAc,YAAY;AAAA,IAC1B,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,WAAW,WAAW,GAAG,QAAQ;AAAA,EACnC,GACA;AAAA,IACJ,EArCC;AAuCL;AAEA,IAAO,eAAQ;","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"}

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

@@ -1,6 +1,6 @@
 import "@smwb/ui-styles/less/tokens.entry.less";
 import "@smwb/ui-styles/less/components/ripple/ripple.entry.less";
-import { For, createSignal, mergeProps, splitProps } from "solid-js";
+import { For, createSignal, mergeProps, onCleanup, splitProps } from "solid-js";
 import cn from "clsx";
 import { mergeRefs } from "../../../primitives/mergeRefs";
 function Ripple(props) {
@@ -13,11 +13,19 @@ function Ripple(props) {
     "duration",
     "color",
     "ref",
-    "style"
+    "data-testid"
   ]);
   const [ripples, setRipples] = createSignal([]);
   let nextKey = 0;
+  const timeouts = /* @__PURE__ */ new Set();
+  let disposed = false;
+  onCleanup(() => {
+    disposed = true;
+    timeouts.forEach((timeout) => clearTimeout(timeout));
+    timeouts.clear();
+  });
   const onRipple = (event) => {
+    if (disposed) return;
     const target = event.currentTarget;
     const rect = target.getBoundingClientRect();
     const diameter = Math.max(rect.width, rect.height);
@@ -33,14 +41,18 @@ function Ripple(props) {
     }
     const key = nextKey++;
     setRipples((prev) => [...prev, { key, x: coordX, y: coordY, size: diameter }]);
-    setTimeout(() => setRipples((prev) => prev.slice(1)), local.duration);
+    const timeout = setTimeout(() => {
+      timeouts.delete(timeout);
+      setRipples((prev) => prev.slice(1));
+    }, local.duration);
+    timeouts.add(timeout);
   };
   local.actionRef?.({ onRipple });
   return <span
     {...rest}
     ref={mergeRefs(local.ref)}
     class={cn("smwb-ripple", local.class, local.classes?.ripple)}
-    data-testid="ripple"
+    data-testid={local["data-testid"] ?? "ripple"}
     aria-hidden="true"
   >
       <For each={ripples()}>

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\nimport { type JSX, For, createSignal, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface RippleActionsRef {\n  onRipple: (event: MouseEvent) => void;\n}\n\nexport interface RippleClasses {\n  ripple?: string;\n  child?: string;\n}\n\nexport interface RippleProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /** Receives the imperative API once on mount. */\n  actionRef?: (actions: RippleActionsRef) => void;\n  classes?: RippleClasses;\n  center?: boolean | undefined;\n  /** Ripple lifetime in ms. */\n  duration?: number;\n  /** Ripple color (any CSS color). Defaults to inherited currentColor. */\n  color?: string | undefined;\n  ref?: Ref<HTMLSpanElement>;\n}\n\ninterface RippleEntry {\n  key: number;\n  x: number;\n  y: number;\n  size: number;\n}\n\n/**\n * ⚠️ For this effect to work, the parent element must have CSS\n * `position: relative;`.\n */\nexport function Ripple(props: RippleProps): JSX.Element {\n  const merged = mergeProps({ duration: 600 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"actionRef\",\n    \"class\",\n    \"classes\",\n    \"center\",\n    \"duration\",\n    \"color\",\n    \"ref\",\n    \"style\",\n  ]);\n\n  const [ripples, setRipples] = createSignal<RippleEntry[]>([]);\n  let nextKey = 0;\n\n  const onRipple = (event: MouseEvent): void => {\n    const target = event.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const diameter = Math.max(rect.width, rect.height);\n    const radius = diameter / 2;\n\n    let coordX: number;\n    let coordY: number;\n    if (local.center) {\n      coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;\n      coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;\n    } else {\n      coordX = event.clientX - rect.left - radius;\n      coordY = event.clientY - rect.top - radius;\n    }\n\n    const key = nextKey++;\n    setRipples((prev) => [...prev, { key, x: coordX, y: coordY, size: diameter }]);\n    setTimeout(() => setRipples((prev) => prev.slice(1)), local.duration);\n  };\n\n  local.actionRef?.({ onRipple });\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-ripple\", local.class, local.classes?.ripple)}\n      data-testid=\"ripple\"\n      aria-hidden=\"true\"\n    >\n      <For each={ripples()}>\n        {(ripple) => (\n          <span\n            class={cn(\"smwb-ripple__child\", local.classes?.child)}\n            style={{\n              left: `${ripple.x}px`,\n              top: `${ripple.y}px`,\n              width: `${ripple.size}px`,\n              height: `${ripple.size}px`,\n              \"background-color\": local.color,\n            }}\n          />\n        )}\n      </For>\n    </span>\n  );\n}\n\nexport default Ripple;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,KAAK,cAAc,YAAY,kBAAkB;AACpE,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAkC7B,SAAS,OAAO,OAAiC;AACtD,QAAM,SAAS,WAAW,EAAE,UAAU,IAAI,GAAG,KAAK;AAClD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,SAAS,UAAU,IAAI,aAA4B,CAAC,CAAC;AAC5D,MAAI,UAAU;AAEd,QAAM,WAAW,CAAC,UAA4B;AAC5C,UAAM,SAAS,MAAM;AACrB,UAAM,OAAO,OAAO,sBAAsB;AAC1C,UAAM,WAAW,KAAK,IAAI,KAAK,OAAO,KAAK,MAAM;AACjD,UAAM,SAAS,WAAW;AAE1B,QAAI;AACJ,QAAI;AACJ,QAAI,MAAM,QAAQ;AAChB,eAAS,KAAK,QAAQ,KAAK,SAAS,IAAI,KAAK,QAAQ,IAAI;AACzD,eAAS,KAAK,SAAS,KAAK,QAAQ,IAAI,KAAK,SAAS,IAAI;AAAA,IAC5D,OAAO;AACL,eAAS,MAAM,UAAU,KAAK,OAAO;AACrC,eAAS,MAAM,UAAU,KAAK,MAAM;AAAA,IACtC;AAEA,UAAM,MAAM;AACZ,eAAW,CAAC,SAAS,CAAC,GAAG,MAAM,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,MAAM,SAAS,CAAC,CAAC;AAC7E,eAAW,MAAM,WAAW,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC,GAAG,MAAM,QAAQ;AAAA,EACtE;AAEA,QAAM,YAAY,EAAE,SAAS,CAAC;AAE9B,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,eAAe,MAAM,OAAO,MAAM,SAAS,MAAM;AAAA,IAC3D,YAAY;AAAA,IACZ,YAAY;AAAA,GACb;AAAA,MACC,CAAC,IAAI,MAAM,QAAQ,GAAG;AAAA,SACnB,CAAC,WACA,CAAC;AAAA,IACC,OAAO,GAAG,sBAAsB,MAAM,SAAS,KAAK;AAAA,IACpD,OAAO;AAAA,MACL,MAAM,GAAG,OAAO,CAAC;AAAA,MACjB,KAAK,GAAG,OAAO,CAAC;AAAA,MAChB,OAAO,GAAG,OAAO,IAAI;AAAA,MACrB,QAAQ,GAAG,OAAO,IAAI;AAAA,MACtB,oBAAoB,MAAM;AAAA,IAC5B;AAAA,EACF,GACA;AAAA,MACJ,EAbC,IAaK;AAAA,IACR,EArBC;AAuBL;AAEA,IAAO,iBAAQ;","names":[],"file":"ripple.jsx"}
+{"version":3,"sources":["../../../../../src/components/base/ripple/ripple.tsx"],"sourcesContent":["import \"@smwb/ui-styles/less/tokens.entry.less\";\nimport \"@smwb/ui-styles/less/components/ripple/ripple.entry.less\";\nimport { type JSX, For, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface RippleActionsRef {\n  onRipple: (event: MouseEvent) => void;\n}\n\nexport interface RippleClasses {\n  ripple?: string;\n  child?: string;\n}\n\nexport interface RippleProps extends JSX.HTMLAttributes<HTMLSpanElement> {\n  /** Receives the imperative API once on mount. */\n  actionRef?: (actions: RippleActionsRef) => void;\n  /** Extra classes: `ripple` for the root, `child` for each ripple. */\n  classes?: RippleClasses;\n  center?: boolean | undefined;\n  /** Ripple lifetime in ms. */\n  duration?: number;\n  /** Ripple color (any CSS color). Defaults to inherited currentColor. */\n  color?: string | undefined;\n  /** Test id of the root `<span>`; `ripple` unless given. */\n  \"data-testid\"?: string | undefined;\n  ref?: Ref<HTMLSpanElement>;\n}\n\ninterface RippleEntry {\n  key: number;\n  x: number;\n  y: number;\n  size: number;\n}\n\n/**\n * ⚠️ For this effect to work, the parent element must have CSS\n * `position: relative;`.\n */\nexport function Ripple(props: RippleProps): JSX.Element {\n  const merged = mergeProps({ duration: 600 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"actionRef\",\n    \"class\",\n    \"classes\",\n    \"center\",\n    \"duration\",\n    \"color\",\n    \"ref\",\n    \"data-testid\",\n  ]);\n\n  const [ripples, setRipples] = createSignal<RippleEntry[]>([]);\n  let nextKey = 0;\n  // Removal timers still pending. Disposal clears them, so none outlives the\n  // Ripple (in a test that ends first, it would fire after jsdom's teardown).\n  const timeouts = new Set<ReturnType<typeof setTimeout>>();\n  let disposed = false;\n  onCleanup(() => {\n    disposed = true;\n    timeouts.forEach((timeout) => clearTimeout(timeout));\n    timeouts.clear();\n  });\n\n  const onRipple = (event: MouseEvent): void => {\n    // A parent keeps these actions after a <Show> has dropped the Ripple; a late\n    // press then starts nothing, as in React, where the actionRef is cleared.\n    if (disposed) return;\n    const target = event.currentTarget as HTMLElement;\n    const rect = target.getBoundingClientRect();\n    const diameter = Math.max(rect.width, rect.height);\n    const radius = diameter / 2;\n\n    let coordX: number;\n    let coordY: number;\n    if (local.center) {\n      coordX = rect.width > rect.height ? 0 : rect.width / 2 - radius;\n      coordY = rect.height > rect.width ? 0 : rect.height / 2 - radius;\n    } else {\n      coordX = event.clientX - rect.left - radius;\n      coordY = event.clientY - rect.top - radius;\n    }\n\n    const key = nextKey++;\n    setRipples((prev) => [...prev, { key, x: coordX, y: coordY, size: diameter }]);\n    const timeout = setTimeout(() => {\n      timeouts.delete(timeout);\n      setRipples((prev) => prev.slice(1));\n    }, local.duration);\n    timeouts.add(timeout);\n  };\n\n  local.actionRef?.({ onRipple });\n\n  return (\n    <span\n      {...rest}\n      ref={mergeRefs(local.ref)}\n      class={cn(\"smwb-ripple\", local.class, local.classes?.ripple)}\n      data-testid={local[\"data-testid\"] ?? \"ripple\"}\n      aria-hidden=\"true\"\n    >\n      <For each={ripples()}>\n        {(ripple) => (\n          <span\n            class={cn(\"smwb-ripple__child\", local.classes?.child)}\n            style={{\n              left: `${ripple.x}px`,\n              top: `${ripple.y}px`,\n              width: `${ripple.size}px`,\n              height: `${ripple.size}px`,\n              \"background-color\": local.color,\n            }}\n          />\n        )}\n      </For>\n    </span>\n  );\n}\n\nexport default Ripple;\n"],"mappings":"AAAA,OAAO;AACP,OAAO;AACP,SAAmB,KAAK,cAAc,YAAY,WAAW,kBAAkB;AAC/E,OAAO,QAAQ;AACf,SAAS,iBAA2B;AAqC7B,SAAS,OAAO,OAAiC;AACtD,QAAM,SAAS,WAAW,EAAE,UAAU,IAAI,GAAG,KAAK;AAClD,QAAM,CAAC,OAAO,IAAI,IAAI,WAAW,QAAQ;AAAA,IACvC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,CAAC,SAAS,UAAU,IAAI,aAA4B,CAAC,CAAC;AAC5D,MAAI,UAAU;AAGd,QAAM,WAAW,oBAAI,IAAmC;AACxD,MAAI,WAAW;AACf,YAAU,MAAM;AACd,eAAW;AACX,aAAS,QAAQ,CAAC,YAAY,aAAa,OAAO,CAAC;AACnD,aAAS,MAAM;AAAA,EACjB,CAAC;AAED,QAAM,WAAW,CAAC,UAA4B;AAG5C,QAAI,SAAU;AACd,UAAM,SAAS,MAAM;AACrB,UAAM,OAAO,OAAO,sBAAsB;AAC1C,UAAM,WAAW,KAAK,IAAI,KAAK,OAAO,KAAK,MAAM;AACjD,UAAM,SAAS,WAAW;AAE1B,QAAI;AACJ,QAAI;AACJ,QAAI,MAAM,QAAQ;AAChB,eAAS,KAAK,QAAQ,KAAK,SAAS,IAAI,KAAK,QAAQ,IAAI;AACzD,eAAS,KAAK,SAAS,KAAK,QAAQ,IAAI,KAAK,SAAS,IAAI;AAAA,IAC5D,OAAO;AACL,eAAS,MAAM,UAAU,KAAK,OAAO;AACrC,eAAS,MAAM,UAAU,KAAK,MAAM;AAAA,IACtC;AAEA,UAAM,MAAM;AACZ,eAAW,CAAC,SAAS,CAAC,GAAG,MAAM,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,MAAM,SAAS,CAAC,CAAC;AAC7E,UAAM,UAAU,WAAW,MAAM;AAC/B,eAAS,OAAO,OAAO;AACvB,iBAAW,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC;AAAA,IACpC,GAAG,MAAM,QAAQ;AACjB,aAAS,IAAI,OAAO;AAAA,EACtB;AAEA,QAAM,YAAY,EAAE,SAAS,CAAC;AAE9B,SACE,CAAC;AAAA,QACK;AAAA,IACJ,KAAK,UAAU,MAAM,GAAG;AAAA,IACxB,OAAO,GAAG,eAAe,MAAM,OAAO,MAAM,SAAS,MAAM;AAAA,IAC3D,aAAa,MAAM,aAAa,KAAK;AAAA,IACrC,YAAY;AAAA,GACb;AAAA,MACC,CAAC,IAAI,MAAM,QAAQ,GAAG;AAAA,SACnB,CAAC,WACA,CAAC;AAAA,IACC,OAAO,GAAG,sBAAsB,MAAM,SAAS,KAAK;AAAA,IACpD,OAAO;AAAA,MACL,MAAM,GAAG,OAAO,CAAC;AAAA,MACjB,KAAK,GAAG,OAAO,CAAC;AAAA,MAChB,OAAO,GAAG,OAAO,IAAI;AAAA,MACrB,QAAQ,GAAG,OAAO,IAAI;AAAA,MACtB,oBAAoB,MAAM;AAAA,IAC5B;AAAA,EACF,GACA;AAAA,MACJ,EAbC,IAaK;AAAA,IACR,EArBC;AAuBL;AAEA,IAAO,iBAAQ;","names":[],"file":"ripple.jsx"}