@smwb/ui-solid 0.4.0 → 0.5.0

package/dist/headless/components/dataDisplay/assetGrid/assetGrid.js

@@ -0,0 +1,143 @@
+import { addEventListener as P, use as E, insert as g, createComponent as o, effect as m, style as h, setStyleProperty as w, className as O, template as c } from "solid-js/web";
+import { mergeProps as W, splitProps as Y, createSignal as f, onMount as F, createMemo as _, Show as p, For as v, onCleanup as G } from "solid-js";
+import N from "clsx";
+import { createVirtualList as V } from "../../../primitives/createVirtualList.js";
+var j = /* @__PURE__ */ c("<div class=smwb-asset-grid__sizer style=position:relative><div class=smwb-asset-grid__band style=position:absolute;top:0;left:0;right:0>"), q = /* @__PURE__ */ c("<div>"), b = /* @__PURE__ */ c("<div class=smwb-asset-grid__plain>"), B = /* @__PURE__ */ c("<div class=smwb-asset-grid__skeleton>"), D = /* @__PURE__ */ c("<div class=smwb-asset-grid__empty>"), J = /* @__PURE__ */ c("<div class=smwb-asset-grid__row>");
+function Z(y) {
+  const x = W({
+    minColumn: 160,
+    gap: 8,
+    overscan: 2,
+    loadingCount: 12
+  }, y), [t] = Y(x, ["items", "renderItem", "minColumn", "rowHeight", "gap", "overscan", "loading", "loadingCount", "emptyLabel", "class", "style"]);
+  let l;
+  const [C, H] = f(0), [S, I] = f(0), [M, k] = f(!1);
+  F(() => {
+    if (!l || typeof ResizeObserver > "u") return;
+    const r = new ResizeObserver(() => {
+      l && (H(l.clientWidth), I(l.clientHeight), k(!0));
+    });
+    r.observe(l), G(() => r.disconnect());
+  });
+  const u = _(() => {
+    const r = C();
+    return r <= 0 ? 1 : Math.max(1, Math.floor((r + t.gap) / (t.minColumn + t.gap)));
+  }), L = _(() => Math.ceil(t.items.length / u())), d = V({
+    itemCount: L,
+    itemHeight: () => t.rowHeight + t.gap,
+    viewportHeight: () => S() || 1,
+    overscan: t.overscan
+  }), R = _(() => {
+    const r = [];
+    for (let e = d.startIndex(); e < d.endIndex(); e++) r.push(e);
+    return r;
+  }), z = () => ({
+    display: "grid",
+    "grid-template-columns": `repeat(${u()}, minmax(0, 1fr))`,
+    gap: `${t.gap}px`,
+    height: `${t.rowHeight}px`,
+    "margin-bottom": `${t.gap}px`
+  }), $ = () => ({
+    display: "grid",
+    "grid-template-columns": `repeat(auto-fill, minmax(${t.minColumn}px, 1fr))`,
+    gap: `${t.gap}px`,
+    "grid-auto-rows": `${t.rowHeight}px`
+  });
+  return (() => {
+    var r = q();
+    return P(r, "scroll", d.onScroll), E((e) => l = e, r), g(r, o(p, {
+      get when() {
+        return !t.loading;
+      },
+      get fallback() {
+        return (() => {
+          var e = b();
+          return g(e, o(v, {
+            get each() {
+              return Array.from({
+                length: t.loadingCount
+              });
+            },
+            children: () => (() => {
+              var n = B();
+              return m((s) => w(n, "height", `${t.rowHeight}px`)), n;
+            })()
+          })), m((n) => h(e, $(), n)), e;
+        })();
+      },
+      get children() {
+        return o(p, {
+          get when() {
+            return t.items.length > 0;
+          },
+          get fallback() {
+            return (() => {
+              var e = D();
+              return g(e, () => t.emptyLabel), e;
+            })();
+          },
+          get children() {
+            return o(p, {
+              get when() {
+                return M();
+              },
+              get fallback() {
+                return (() => {
+                  var e = b();
+                  return g(e, o(v, {
+                    get each() {
+                      return t.items;
+                    },
+                    children: (n, s) => t.renderItem(n, s())
+                  })), m((n) => h(e, $(), n)), e;
+                })();
+              },
+              get children() {
+                var e = j(), n = e.firstChild;
+                return g(n, o(v, {
+                  get each() {
+                    return R();
+                  },
+                  children: (s) => (() => {
+                    var a = J();
+                    return g(a, o(v, {
+                      get each() {
+                        return Array.from({
+                          length: u()
+                        }, (i, A) => s * u() + A);
+                      },
+                      children: (i) => o(p, {
+                        get when() {
+                          return i < t.items.length;
+                        },
+                        get children() {
+                          return t.renderItem(t.items[i], i);
+                        }
+                      })
+                    })), m((i) => h(a, z(), i)), a;
+                  })()
+                })), m((s) => {
+                  var a = `${d.totalHeight()}px`, i = `translateY(${d.offsetY()}px)`;
+                  return a !== s.e && w(e, "height", s.e = a), i !== s.t && w(n, "transform", s.t = i), s;
+                }, {
+                  e: void 0,
+                  t: void 0
+                }), e;
+              }
+            });
+          }
+        });
+      }
+    })), m((e) => {
+      var n = N("smwb-asset-grid", t.class), s = t.style;
+      return n !== e.e && O(r, e.e = n), e.t = h(r, s, e.t), e;
+    }, {
+      e: void 0,
+      t: void 0
+    }), r;
+  })();
+}
+export {
+  Z as AssetGrid
+};
+//# sourceMappingURL=assetGrid.js.map

package/dist/headless/components/dataDisplay/assetGrid/assetGrid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"assetGrid.js","sources":["../../../../../src/components/dataDisplay/assetGrid/assetGrid.tsx"],"sourcesContent":["import { type JSX, For, Show, createMemo, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { createVirtualList } from \"../../../primitives/createVirtualList\";\n\nexport interface AssetGridProps<T> {\n  items: T[];\n  /** Render one cell. `index` is the absolute index into `items`. */\n  renderItem: (item: T, index: number) => JSX.Element;\n  /** Minimum column width (px); drives the column count from the measured width. Default 160. */\n  minColumn?: number;\n  /** Fixed cell height (px). */\n  rowHeight: number;\n  /** Gap (px) between cells on both axes. Default 8. */\n  gap?: number;\n  /** Extra rows rendered above/below the viewport. Default 2. */\n  overscan?: number;\n  loading?: boolean;\n  /** Skeleton tile count while loading. Default 12. */\n  loadingCount?: number;\n  emptyLabel?: JSX.Element;\n  class?: string;\n  style?: JSX.CSSProperties | string;\n}\n\n/**\n * A virtualized, data-shape-agnostic asset grid: measures its own width to pick a\n * column count, windows rows via `createVirtualList`, and renders only the visible\n * cells through a `renderItem` slot — with loading skeletons + an empty state. The\n * windowing math every catalog app reimplements, upstreamed. SSR-safe: before it\n * can measure (server + first paint) it renders a plain auto-fill grid of all\n * items, then virtualizes after mount.\n */\nexport function AssetGrid<T>(props: AssetGridProps<T>): JSX.Element {\n  const merged = mergeProps({ minColumn: 160, gap: 8, overscan: 2, loadingCount: 12 }, props);\n  const [local] = splitProps(merged, [\n    \"items\",\n    \"renderItem\",\n    \"minColumn\",\n    \"rowHeight\",\n    \"gap\",\n    \"overscan\",\n    \"loading\",\n    \"loadingCount\",\n    \"emptyLabel\",\n    \"class\",\n    \"style\",\n  ]);\n\n  let viewportEl: HTMLDivElement | undefined;\n  const [width, setWidth] = createSignal(0);\n  const [height, setHeight] = createSignal(0);\n  const [ready, setReady] = createSignal(false);\n\n  onMount(() => {\n    if (!viewportEl || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => {\n      if (!viewportEl) return;\n      setWidth(viewportEl.clientWidth);\n      setHeight(viewportEl.clientHeight);\n      setReady(true);\n    });\n    ro.observe(viewportEl);\n    onCleanup(() => ro.disconnect());\n  });\n\n  const cols = createMemo(() => {\n    const w = width();\n    if (w <= 0) return 1;\n    return Math.max(1, Math.floor((w + local.gap) / (local.minColumn + local.gap)));\n  });\n  const rowCount = createMemo(() => Math.ceil(local.items.length / cols()));\n  const rowStride = (): number => local.rowHeight + local.gap;\n\n  const vl = createVirtualList({\n    itemCount: rowCount,\n    itemHeight: rowStride,\n    viewportHeight: () => height() || 1,\n    overscan: local.overscan,\n  });\n\n  const visibleRows = createMemo(() => {\n    const out: number[] = [];\n    for (let row = vl.startIndex(); row < vl.endIndex(); row++) out.push(row);\n    return out;\n  });\n\n  const rowStyle = (): JSX.CSSProperties => ({\n    display: \"grid\",\n    \"grid-template-columns\": `repeat(${cols()}, minmax(0, 1fr))`,\n    gap: `${local.gap}px`,\n    height: `${local.rowHeight}px`,\n    \"margin-bottom\": `${local.gap}px`,\n  });\n\n  const plainStyle = (): JSX.CSSProperties => ({\n    display: \"grid\",\n    \"grid-template-columns\": `repeat(auto-fill, minmax(${local.minColumn}px, 1fr))`,\n    gap: `${local.gap}px`,\n    \"grid-auto-rows\": `${local.rowHeight}px`,\n  });\n\n  return (\n    <div\n      ref={(el) => (viewportEl = el)}\n      class={cn(\"smwb-asset-grid\", local.class)}\n      style={local.style}\n      onScroll={vl.onScroll}\n    >\n      <Show\n        when={!local.loading}\n        fallback={\n          <div class=\"smwb-asset-grid__plain\" style={plainStyle()}>\n            <For each={Array.from({ length: local.loadingCount })}>\n              {() => <div class=\"smwb-asset-grid__skeleton\" style={{ height: `${local.rowHeight}px` }} />}\n            </For>\n          </div>\n        }\n      >\n        <Show\n          when={local.items.length > 0}\n          fallback={<div class=\"smwb-asset-grid__empty\">{local.emptyLabel}</div>}\n        >\n          <Show\n            when={ready()}\n            fallback={\n              <div class=\"smwb-asset-grid__plain\" style={plainStyle()}>\n                <For each={local.items}>{(item, index) => local.renderItem(item, index())}</For>\n              </div>\n            }\n          >\n            <div class=\"smwb-asset-grid__sizer\" style={{ height: `${vl.totalHeight()}px`, position: \"relative\" }}>\n              <div\n                class=\"smwb-asset-grid__band\"\n                style={{ position: \"absolute\", top: \"0\", left: \"0\", right: \"0\", transform: `translateY(${vl.offsetY()}px)` }}\n              >\n                <For each={visibleRows()}>\n                  {(row) => (\n                    <div class=\"smwb-asset-grid__row\" style={rowStyle()}>\n                      <For each={Array.from({ length: cols() }, (_, c) => row * cols() + c)}>\n                        {(index) => (\n                          <Show when={index < local.items.length}>\n                            {local.renderItem(local.items[index] as T, index)}\n                          </Show>\n                        )}\n                      </For>\n                    </div>\n                  )}\n                </For>\n              </div>\n            </div>\n          </Show>\n        </Show>\n      </Show>\n    </div>\n  );\n}\n\nexport default AssetGrid;\n"],"names":["AssetGrid","props","merged","mergeProps","minColumn","gap","overscan","loadingCount","local","splitProps","viewportEl","width","setWidth","createSignal","height","setHeight","ready","setReady","onMount","ResizeObserver","ro","clientWidth","clientHeight","observe","onCleanup","disconnect","cols","createMemo","w","Math","max","floor","rowCount","ceil","items","length","vl","createVirtualList","itemCount","itemHeight","rowStride","rowHeight","viewportHeight","visibleRows","out","row","startIndex","endIndex","push","rowStyle","display","plainStyle","_el$","_tmpl$2","_$addEventListener","onScroll","_$use","el","_$insert","_$createComponent","Show","when","loading","fallback","_el$4","_tmpl$3","For","each","Array","from","children","_el$5","_tmpl$4","_$effect","_$p","_$setStyleProperty","_$style","_el$6","_tmpl$5","emptyLabel","_el$7","item","index","renderItem","_el$2","_tmpl$","_el$3","firstChild","_el$8","_tmpl$6","_","c","_p$","_v$","totalHeight","_v$2","offsetY","e","t","undefined","_v$3","cn","class","_v$4","style","_$className"],"mappings":"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"}

package/dist/headless/components/dataDisplay/chipGroup/chipGroup.js

@@ -0,0 +1,57 @@
+import { spread as g, mergeProps as n, insert as p, createComponent as o, template as f } from "solid-js/web";
+import { mergeProps as v, splitProps as h, For as b } from "solid-js";
+import C from "clsx";
+import { Chip as z } from "../chip/chip.js";
+var P = /* @__PURE__ */ f("<div>");
+function _(i) {
+  const a = v({
+    size: "medium",
+    color: "primary"
+  }, i), [e, c] = h(a, ["options", "value", "multiple", "onChange", "size", "color", "disabled", "class"]), l = () => e.value == null ? [] : Array.isArray(e.value) ? e.value : [e.value], s = (t) => l().includes(t), u = (t) => {
+    if (e.multiple) {
+      const r = l(), m = r.includes(t) ? r.filter((d) => d !== t) : [...r, t];
+      e.onChange?.(m);
+    } else
+      e.onChange?.(t);
+  };
+  return (() => {
+    var t = P();
+    return g(t, n(c, {
+      role: "group",
+      get class() {
+        return C("smwb-chip-group", e.class);
+      }
+    }), !1, !0), p(t, o(b, {
+      get each() {
+        return e.options;
+      },
+      children: (r) => o(z, n({
+        get label() {
+          return r.label;
+        },
+        get size() {
+          return e.size;
+        },
+        get color() {
+          return e.color;
+        },
+        get selected() {
+          return s(r.value);
+        },
+        get variant() {
+          return s(r.value) ? "filled" : "outlined";
+        },
+        get disabled() {
+          return !!(e.disabled || r.disabled);
+        },
+        onClick: () => u(r.value)
+      }, () => r.icon ? {
+        icon: r.icon
+      } : {}))
+    })), t;
+  })();
+}
+export {
+  _ as ChipGroup
+};
+//# sourceMappingURL=chipGroup.js.map

package/dist/headless/components/dataDisplay/chipGroup/chipGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chipGroup.js","sources":["../../../../../src/components/dataDisplay/chipGroup/chipGroup.tsx"],"sourcesContent":["import { type JSX, For, mergeProps, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Chip, type ChipColor } from \"../chip\";\n\nexport interface ChipGroupOption {\n  value: string;\n  label: string;\n  icon?: JSX.Element;\n  disabled?: boolean;\n}\n\nexport interface ChipGroupProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  options: ChipGroupOption[];\n  /** Selected value (single) or values (when `multiple`). */\n  value?: string | string[];\n  /** Allow more than one selected chip (value becomes a string[]). */\n  multiple?: boolean;\n  onChange?: (value: string | string[]) => void;\n  size?: \"small\" | \"medium\";\n  color?: ChipColor;\n  disabled?: boolean;\n}\n\n/**\n * A multi/single-select toggle group built on `Chip` — the \"chip as a toggle\"\n * loop (selected → filled, else outlined; `role=group`) that apps re-hand-roll\n * for filters / segmented controls. Pass an `options` array and a controlled\n * `value`; `onChange` returns the next value (string, or string[] when multiple).\n */\nexport function ChipGroup(props: ChipGroupProps): JSX.Element {\n  const merged = mergeProps({ size: \"medium\" as const, color: \"primary\" as ChipColor }, props);\n  const [local, rest] = splitProps(merged, [\n    \"options\",\n    \"value\",\n    \"multiple\",\n    \"onChange\",\n    \"size\",\n    \"color\",\n    \"disabled\",\n    \"class\",\n  ]);\n\n  const selectedValues = (): string[] => {\n    if (local.value == null) return [];\n    return Array.isArray(local.value) ? local.value : [local.value];\n  };\n  const isSelected = (value: string): boolean => selectedValues().includes(value);\n\n  const toggle = (value: string): void => {\n    if (local.multiple) {\n      const current = selectedValues();\n      const next = current.includes(value) ? current.filter((v) => v !== value) : [...current, value];\n      local.onChange?.(next);\n    } else {\n      local.onChange?.(value);\n    }\n  };\n\n  return (\n    <div {...rest} role=\"group\" class={cn(\"smwb-chip-group\", local.class)}>\n      <For each={local.options}>\n        {(option) => (\n          <Chip\n            label={option.label}\n            size={local.size}\n            color={local.color}\n            selected={isSelected(option.value)}\n            variant={isSelected(option.value) ? \"filled\" : \"outlined\"}\n            disabled={!!(local.disabled || option.disabled)}\n            onClick={() => toggle(option.value)}\n            {...(option.icon ? { icon: option.icon } : {})}\n          />\n        )}\n      </For>\n    </div>\n  );\n}\n\nexport default ChipGroup;\n"],"names":["ChipGroup","props","merged","mergeProps","size","color","local","rest","splitProps","selectedValues","value","Array","isArray","isSelected","includes","toggle","multiple","current","next","filter","v","onChange","_el$","_tmpl$","_$spread","_$mergeProps","cn","class","_$insert","_$createComponent","For","each","options","children","option","Chip","label","selected","variant","disabled","onClick","icon"],"mappings":";;;;;AA6BO,SAASA,EAAUC,GAAoC;AAC5D,QAAMC,IAASC,EAAW;AAAA,IAAEC,MAAM;AAAA,IAAmBC,OAAO;AAAA,EAAA,GAA0BJ,CAAK,GACrF,CAACK,GAAOC,CAAI,IAAIC,EAAWN,GAAQ,CACvC,WACA,SACA,YACA,YACA,QACA,SACA,YACA,OAAO,CACR,GAEKO,IAAiBA,MACjBH,EAAMI,SAAS,OAAa,CAAA,IACzBC,MAAMC,QAAQN,EAAMI,KAAK,IAAIJ,EAAMI,QAAQ,CAACJ,EAAMI,KAAK,GAE1DG,IAAaA,CAACH,MAA2BD,EAAAA,EAAiBK,SAASJ,CAAK,GAExEK,IAASA,CAACL,MAAwB;AACtC,QAAIJ,EAAMU,UAAU;AAClB,YAAMC,IAAUR,EAAAA,GACVS,IAAOD,EAAQH,SAASJ,CAAK,IAAIO,EAAQE,OAAQC,CAAAA,MAAMA,MAAMV,CAAK,IAAI,CAAC,GAAGO,GAASP,CAAK;AAC9FJ,MAAAA,EAAMe,WAAWH,CAAI;AAAA,IACvB;AACEZ,MAAAA,EAAMe,WAAWX,CAAK;AAAA,EAE1B;AAEA,UAAA,MAAA;AAAA,QAAAY,IAAAC,EAAAA;AAAAC,WAAAA,EAAAF,GAAAG,EACWlB,GAAI;AAAA,MAAA,MAAO;AAAA,MAAO,IAAA,QAAA;AAAA,eAAQmB,EAAG,mBAAmBpB,EAAMqB,KAAK;AAAA,MAAC;AAAA,IAAA,CAAA,GAAA,IAAA,EAAA,GAAAC,EAAAN,GAAAO,EAClEC,GAAG;AAAA,MAAA,IAACC,OAAI;AAAA,eAAEzB,EAAM0B;AAAAA,MAAO;AAAA,MAAAC,UACpBC,CAAAA,MAAML,EACLM,GAAIV,EAAA;AAAA,QAAA,IACHW,QAAK;AAAA,iBAAEF,EAAOE;AAAAA,QAAK;AAAA,QAAA,IACnBhC,OAAI;AAAA,iBAAEE,EAAMF;AAAAA,QAAI;AAAA,QAAA,IAChBC,QAAK;AAAA,iBAAEC,EAAMD;AAAAA,QAAK;AAAA,QAAA,IAClBgC,WAAQ;AAAA,iBAAExB,EAAWqB,EAAOxB,KAAK;AAAA,QAAC;AAAA,QAAA,IAClC4B,UAAO;AAAA,iBAAEzB,EAAWqB,EAAOxB,KAAK,IAAI,WAAW;AAAA,QAAU;AAAA,QAAA,IACzD6B,WAAQ;AAAA,iBAAE,CAAC,EAAEjC,EAAMiC,YAAYL,EAAOK;AAAAA,QAAS;AAAA,QAC/CC,SAASA,MAAMzB,EAAOmB,EAAOxB,KAAK;AAAA,MAAA,GAAC,MAC9BwB,EAAOO,OAAO;AAAA,QAAEA,MAAMP,EAAOO;AAAAA,MAAAA,IAAS,EAAE,CAAA;AAAA,IAAA,CAEhD,CAAA,GAAAnB;AAAAA,EAAA,GAAA;AAIT;"}

package/dist/headless/components/dataDisplay/lazyImage/lazyImage.js

@@ -0,0 +1,72 @@
+import { insert as o, createComponent as u, memo as $, use as h, spread as k, mergeProps as E, effect as I, className as P, style as R, template as i } from "solid-js/web";
+import { mergeProps as S, splitProps as C, createSignal as g, onMount as F, Show as p, onCleanup as O } from "solid-js";
+import x from "clsx";
+import { mergeRefs as L } from "../../../primitives/mergeRefs.js";
+var M = /* @__PURE__ */ i("<span class=smwb-lazy-image__fallback>"), N = /* @__PURE__ */ i("<img>", !0, !1, !1), V = /* @__PURE__ */ i("<span>");
+function D(d) {
+  const c = S({
+    lazy: !0
+  }, d), [r, v] = C(c, ["src", "alt", "fallback", "lazy", "aspectRatio", "class", "onError", "ref"]), [y, b] = g(!1), [m, f] = g(!c.lazy);
+  let s;
+  F(() => {
+    if (!r.lazy || m() || !s) return;
+    if (typeof IntersectionObserver > "u") {
+      f(!0);
+      return;
+    }
+    const t = new IntersectionObserver((e) => {
+      e.some((a) => a.isIntersecting) && (f(!0), t.disconnect());
+    });
+    t.observe(s), O(() => t.disconnect());
+  });
+  const z = (t) => {
+    b(!0), r.onError?.(t);
+  }, n = () => y() || !r.src, w = () => m() ? r.src : void 0, _ = () => r.aspectRatio != null ? {
+    "aspect-ratio": String(r.aspectRatio)
+  } : void 0;
+  return (() => {
+    var t = V();
+    return o(t, u(p, {
+      get when() {
+        return $(() => !!n())() && r.fallback;
+      },
+      get children() {
+        var e = M();
+        return o(e, () => r.fallback), e;
+      }
+    }), null), o(t, u(p, {
+      get when() {
+        return !n();
+      },
+      get children() {
+        var e = N(), a = L(r.ref, (l) => s = l);
+        return typeof a == "function" && h(a, e), k(e, E(v, {
+          class: "smwb-lazy-image__img",
+          get src() {
+            return w();
+          },
+          get alt() {
+            return r.alt ?? "";
+          },
+          get loading() {
+            return r.lazy ? "lazy" : void 0;
+          },
+          decoding: "async",
+          onError: z
+        }), !1, !1), e;
+      }
+    }), null), I((e) => {
+      var a = x("smwb-lazy-image", r.class, {
+        "smwb-lazy-image--empty": n()
+      }), l = _();
+      return a !== e.e && P(t, e.e = a), e.t = R(t, l, e.t), e;
+    }, {
+      e: void 0,
+      t: void 0
+    }), t;
+  })();
+}
+export {
+  D as LazyImage
+};
+//# sourceMappingURL=lazyImage.js.map

package/dist/headless/components/dataDisplay/lazyImage/lazyImage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazyImage.js","sources":["../../../../../src/components/dataDisplay/lazyImage/lazyImage.tsx"],"sourcesContent":["import { type JSX, Show, createSignal, mergeProps, onCleanup, onMount, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface LazyImageProps extends Omit<JSX.ImgHTMLAttributes<HTMLImageElement>, \"onError\"> {\n  /** Image URL. When absent (or after a load error) the `fallback` is shown. */\n  src?: string | undefined;\n  alt?: string | undefined;\n  /** Rendered in place of the image when it is missing or fails to load. */\n  fallback?: JSX.Element | undefined;\n  /** Defer loading until the image scrolls into view (IntersectionObserver). Default true. */\n  lazy?: boolean;\n  /** CSS `aspect-ratio` for the wrapper (e.g. `1`, `\"4 / 3\"`) to reserve space before load. */\n  aspectRatio?: string | number;\n  /** Fires on a load error (after the fallback is swapped in). */\n  onError?: (event: Event) => void;\n  ref?: Ref<HTMLImageElement>;\n}\n\n/**\n * An `<img>` with a built-in `onError` fallback and optional in-viewport lazy\n * loading — the `<img decoding=async onError=…>` + `<Show>` dance hand-rolled in\n * every gallery, in one primitive. SSR-safe: renders the image markup on the\n * server; the IntersectionObserver only runs after mount on the client.\n */\nexport function LazyImage(props: LazyImageProps): JSX.Element {\n  const merged = mergeProps({ lazy: true }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"alt\",\n    \"fallback\",\n    \"lazy\",\n    \"aspectRatio\",\n    \"class\",\n    \"onError\",\n    \"ref\",\n  ]);\n\n  const [failed, setFailed] = createSignal(false);\n  // When lazy, hold the real src back until the element scrolls into view.\n  const [visible, setVisible] = createSignal(!merged.lazy);\n  let imgEl: HTMLImageElement | undefined;\n\n  onMount(() => {\n    if (!local.lazy || visible() || !imgEl) return;\n    if (typeof IntersectionObserver === \"undefined\") {\n      setVisible(true);\n      return;\n    }\n    const io = new IntersectionObserver((entries) => {\n      if (entries.some((entry) => entry.isIntersecting)) {\n        setVisible(true);\n        io.disconnect();\n      }\n    });\n    io.observe(imgEl);\n    onCleanup(() => io.disconnect());\n  });\n\n  const onError = (event: Event): void => {\n    setFailed(true);\n    local.onError?.(event);\n  };\n\n  const showFallback = (): boolean => failed() || !local.src;\n  const resolvedSrc = (): string | undefined => (visible() ? local.src : undefined);\n  const style = (): JSX.CSSProperties | undefined =>\n    local.aspectRatio != null ? { \"aspect-ratio\": String(local.aspectRatio) } : undefined;\n\n  return (\n    <span class={cn(\"smwb-lazy-image\", local.class, { \"smwb-lazy-image--empty\": showFallback() })} style={style()}>\n      <Show when={showFallback() && local.fallback}>\n        <span class=\"smwb-lazy-image__fallback\">{local.fallback}</span>\n      </Show>\n      <Show when={!showFallback()}>\n        <img\n          {...rest}\n          ref={mergeRefs(local.ref, (el) => (imgEl = el as HTMLImageElement))}\n          class=\"smwb-lazy-image__img\"\n          src={resolvedSrc()}\n          alt={local.alt ?? \"\"}\n          loading={local.lazy ? \"lazy\" : undefined}\n          decoding=\"async\"\n          onError={onError}\n        />\n      </Show>\n    </span>\n  );\n}\n\nexport default LazyImage;\n"],"names":["LazyImage","props","merged","mergeProps","lazy","local","rest","splitProps","failed","setFailed","createSignal","visible","setVisible","imgEl","onMount","IntersectionObserver","io","entries","some","entry","isIntersecting","disconnect","observe","onCleanup","onError","event","showFallback","src","resolvedSrc","undefined","style","aspectRatio","String","_el$","_tmpl$3","_$insert","_$createComponent","Show","when","_$memo","fallback","children","_el$2","_tmpl$","_el$3","_tmpl$2","_ref$","mergeRefs","ref","el","_$use","_$spread","_$mergeProps","alt","loading","_$effect","_p$","_v$","cn","class","_v$2","e","_$className","t","_$style"],"mappings":"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"}

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

@@ -0,0 +1,113 @@
+import { use as h, spread as D, mergeProps as E, memo as g, insert as l, createComponent as n, Portal as z, effect as f, setAttribute as C, style as T, isServer as L, template as a } from "solid-js/web";
+import { mergeProps as x, splitProps as F, createSignal as K, onCleanup as M, Show as c } from "solid-js";
+import O from "clsx";
+import { createFloating as R } from "../../../primitives/createFloating.js";
+import { mergeRefs as A } from "../../../primitives/mergeRefs.js";
+import { LazyImage as I } from "../lazyImage/lazyImage.js";
+var j = /* @__PURE__ */ a('<div class="smwb-thumb-card__slot smwb-thumb-card__slot--start">'), q = /* @__PURE__ */ a('<div class="smwb-thumb-card__slot smwb-thumb-card__slot--end">'), B = /* @__PURE__ */ a("<div class=smwb-thumb-card__caption>"), G = /* @__PURE__ */ a("<div class=smwb-thumb-card__preview>"), H = /* @__PURE__ */ a("<div><div class=smwb-thumb-card__media>"), J = /* @__PURE__ */ a("<img alt>");
+function Y(_) {
+  const w = x({
+    lazy: !0,
+    hoverDelay: 350
+  }, _), [e, y] = F(w, ["src", "caption", "selected", "onSelect", "fallback", "hoverPreview", "topStart", "topEnd", "lazy", "disabled", "hoverDelay", "class", "ref"]), m = R({
+    placement: () => "right"
+  }), [$, v] = K(!1);
+  let i;
+  const d = () => {
+    i && (clearTimeout(i), i = void 0);
+  }, S = () => {
+    e.hoverPreview == null || e.disabled || (d(), i = setTimeout(() => v(!0), e.hoverDelay));
+  }, P = () => {
+    d(), v(!1);
+  };
+  M(d);
+  const o = () => !!e.onSelect && !e.disabled, k = (r) => {
+    o() && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), e.onSelect?.());
+  };
+  return (() => {
+    var r = H(), u = r.firstChild, p = A(e.ref, (t) => m.setReference(t));
+    return typeof p == "function" && h(p, r), D(r, E(y, {
+      get class() {
+        return O("smwb-thumb-card", e.class, {
+          "smwb-thumb-card--selected": e.selected,
+          "smwb-thumb-card--disabled": e.disabled,
+          "smwb-thumb-card--interactive": o()
+        });
+      },
+      get role() {
+        return o() ? "button" : void 0;
+      },
+      get tabindex() {
+        return o() ? 0 : void 0;
+      },
+      get "aria-pressed"() {
+        return g(() => !!e.onSelect)() ? e.selected ?? !1 : void 0;
+      },
+      get "aria-disabled"() {
+        return e.disabled || void 0;
+      },
+      get onClick() {
+        return o() ? () => e.onSelect?.() : void 0;
+      },
+      onKeyDown: k,
+      onMouseEnter: S,
+      onMouseLeave: P
+    }), !1, !0), l(u, n(I, {
+      get src() {
+        return e.src;
+      },
+      get lazy() {
+        return e.lazy;
+      },
+      get fallback() {
+        return e.fallback;
+      }
+    }), null), l(u, n(c, {
+      get when() {
+        return e.topStart;
+      },
+      get children() {
+        var t = j();
+        return l(t, () => e.topStart), t;
+      }
+    }), null), l(u, n(c, {
+      get when() {
+        return e.topEnd;
+      },
+      get children() {
+        var t = q();
+        return l(t, () => e.topEnd), t;
+      }
+    }), null), l(r, n(c, {
+      get when() {
+        return e.caption;
+      },
+      get children() {
+        var t = B();
+        return l(t, () => e.caption), t;
+      }
+    }), null), l(r, n(c, {
+      get when() {
+        return $() && !L;
+      },
+      get children() {
+        return n(z, {
+          get children() {
+            var t = G();
+            return h((s) => m.setFloating(s), t), l(t, (() => {
+              var s = g(() => typeof e.hoverPreview == "string");
+              return () => s() ? (() => {
+                var b = J();
+                return f(() => C(b, "src", e.hoverPreview)), b;
+              })() : e.hoverPreview;
+            })()), f((s) => T(t, m.floatingStyles(), s)), t;
+          }
+        });
+      }
+    }), null), r;
+  })();
+}
+export {
+  Y as ThumbCard
+};
+//# sourceMappingURL=thumbCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"thumbCard.js","sources":["../../../../../src/components/dataDisplay/thumbCard/thumbCard.tsx"],"sourcesContent":["import { type JSX, Show, createSignal, mergeProps, onCleanup, splitProps } from \"solid-js\";\nimport { Portal, isServer } from \"solid-js/web\";\nimport cn from \"clsx\";\nimport { createFloating } from \"../../../primitives/createFloating\";\nimport { LazyImage } from \"../lazyImage\";\nimport { mergeRefs, type Ref } from \"../../../primitives/mergeRefs\";\n\nexport interface ThumbCardProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, \"onSelect\"> {\n  /** Thumbnail URL; falls back to `fallback` when missing / failed. */\n  src?: string;\n  caption?: JSX.Element;\n  selected?: boolean;\n  /** Makes the card a selectable button (keyboard + `aria-pressed`). */\n  onSelect?: () => void;\n  /** Shown in place of the image when `src` is missing / fails. */\n  fallback?: JSX.Element;\n  /** A larger preview shown in a floating popup after a hover delay. */\n  hoverPreview?: JSX.Element | string;\n  /** Top-left overlay slot (e.g. a favourite star). */\n  topStart?: JSX.Element;\n  /** Top-right overlay slot (e.g. a kebab menu). */\n  topEnd?: JSX.Element;\n  lazy?: boolean;\n  disabled?: boolean;\n  /** Delay (ms) before the hover preview appears. Default 350. */\n  hoverDelay?: number;\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * A selectable gallery card: image with an `onError` fallback + optional lazy\n * load, keyboard/`aria-pressed` selection, corner action slots, and a delayed\n * floating hover-preview. The generic gallery-card behaviour every app rebuilds\n * on top of the primitives. SSR-safe — the hover preview is client-only.\n */\nexport function ThumbCard(props: ThumbCardProps): JSX.Element {\n  const merged = mergeProps({ lazy: true, hoverDelay: 350 }, props);\n  const [local, rest] = splitProps(merged, [\n    \"src\",\n    \"caption\",\n    \"selected\",\n    \"onSelect\",\n    \"fallback\",\n    \"hoverPreview\",\n    \"topStart\",\n    \"topEnd\",\n    \"lazy\",\n    \"disabled\",\n    \"hoverDelay\",\n    \"class\",\n    \"ref\",\n  ]);\n\n  const floating = createFloating({ placement: () => \"right\" });\n  const [previewOpen, setPreviewOpen] = createSignal(false);\n  let hoverTimer: ReturnType<typeof setTimeout> | undefined;\n\n  const clearTimer = (): void => {\n    if (hoverTimer) {\n      clearTimeout(hoverTimer);\n      hoverTimer = undefined;\n    }\n  };\n  const onEnter = (): void => {\n    if (local.hoverPreview == null || local.disabled) return;\n    clearTimer();\n    hoverTimer = setTimeout(() => setPreviewOpen(true), local.hoverDelay);\n  };\n  const onLeave = (): void => {\n    clearTimer();\n    setPreviewOpen(false);\n  };\n  onCleanup(clearTimer);\n\n  const interactive = (): boolean => !!local.onSelect && !local.disabled;\n  const onKeyDown: JSX.EventHandler<HTMLDivElement, KeyboardEvent> = (event) => {\n    if (interactive() && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault();\n      local.onSelect?.();\n    }\n  };\n\n  return (\n    <div\n      {...rest}\n      ref={mergeRefs(local.ref, (el) => floating.setReference(el))}\n      class={cn(\"smwb-thumb-card\", local.class, {\n        \"smwb-thumb-card--selected\": local.selected,\n        \"smwb-thumb-card--disabled\": local.disabled,\n        \"smwb-thumb-card--interactive\": interactive(),\n      })}\n      role={interactive() ? \"button\" : undefined}\n      tabindex={interactive() ? 0 : undefined}\n      aria-pressed={local.onSelect ? (local.selected ?? false) : undefined}\n      aria-disabled={local.disabled || undefined}\n      onClick={interactive() ? () => local.onSelect?.() : undefined}\n      onKeyDown={onKeyDown}\n      onMouseEnter={onEnter}\n      onMouseLeave={onLeave}\n    >\n      <div class=\"smwb-thumb-card__media\">\n        <LazyImage src={local.src} lazy={local.lazy} fallback={local.fallback} />\n        <Show when={local.topStart}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--start\">{local.topStart}</div>\n        </Show>\n        <Show when={local.topEnd}>\n          <div class=\"smwb-thumb-card__slot smwb-thumb-card__slot--end\">{local.topEnd}</div>\n        </Show>\n      </div>\n      <Show when={local.caption}>\n        <div class=\"smwb-thumb-card__caption\">{local.caption}</div>\n      </Show>\n      <Show when={previewOpen() && !isServer}>\n        <Portal>\n          <div class=\"smwb-thumb-card__preview\" ref={(el) => floating.setFloating(el)} style={floating.floatingStyles()}>\n            {typeof local.hoverPreview === \"string\" ? (\n              <img src={local.hoverPreview} alt=\"\" />\n            ) : (\n              (local.hoverPreview as JSX.Element)\n            )}\n          </div>\n        </Portal>\n      </Show>\n    </div>\n  );\n}\n\nexport default ThumbCard;\n"],"names":["ThumbCard","props","merged","mergeProps","lazy","hoverDelay","local","rest","splitProps","floating","createFloating","placement","previewOpen","setPreviewOpen","createSignal","hoverTimer","clearTimer","clearTimeout","undefined","onEnter","hoverPreview","disabled","setTimeout","onLeave","onCleanup","interactive","onSelect","onKeyDown","event","key","preventDefault","_el$","_tmpl$5","_el$2","firstChild","_ref$","mergeRefs","ref","el","setReference","_$use","_$spread","_$mergeProps","cn","class","selected","role","tabindex","_$memo","onClick","_$insert","_$createComponent","LazyImage","src","fallback","Show","when","topStart","children","_el$3","_tmpl$","topEnd","_el$4","_tmpl$2","caption","_el$5","_tmpl$3","isServer","Portal","_el$6","_tmpl$4","setFloating","_c$","_el$7","_tmpl$6","_$effect","_$setAttribute","_$p","_$style","floatingStyles"],"mappings":"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"}

package/dist/headless/components/feedBack/saveAssetDialog/saveAssetDialog.js

@@ -0,0 +1,100 @@
+import { createComponent as r, insert as l, effect as s, setAttribute as g, className as p, template as u } from "solid-js/web";
+import { splitProps as b, Show as o } from "solid-js";
+import v from "clsx";
+import { Modal as a } from "../modal/modal.js";
+import { TextField as C } from "../../inputs/textField/textField.js";
+import { Button as i } from "../../inputs/button/button.js";
+var h = /* @__PURE__ */ u("<div class=smwb-save-asset-dialog__preview><img alt>"), f = /* @__PURE__ */ u("<div>");
+function $(c) {
+  const [e] = b(c, ["open", "title", "nameLabel", "name", "onNameChange", "previewSrc", "onCapture", "captureLabel", "busy", "confirmLabel", "cancelLabel", "onConfirm", "onClose", "children", "class"]), m = () => e.onNameChange !== void 0 || e.name !== void 0;
+  return r(a, {
+    get open() {
+      return e.open;
+    },
+    get onClose() {
+      return e.onClose;
+    },
+    size: "small",
+    get children() {
+      return [r(a.Header, {
+        get children() {
+          return e.title ?? "Save";
+        }
+      }), r(a.Content, {
+        get children() {
+          var t = f();
+          return l(t, r(o, {
+            get when() {
+              return m();
+            },
+            get children() {
+              return r(C, {
+                get label() {
+                  return e.nameLabel ?? "Name";
+                },
+                get value() {
+                  return e.name ?? "";
+                },
+                get disabled() {
+                  return !!e.busy;
+                },
+                onChange: (n) => e.onNameChange?.(n.currentTarget.value)
+              });
+            }
+          }), null), l(t, r(o, {
+            get when() {
+              return e.previewSrc;
+            },
+            get children() {
+              var n = h(), d = n.firstChild;
+              return s(() => g(d, "src", e.previewSrc)), n;
+            }
+          }), null), l(t, r(o, {
+            get when() {
+              return e.onCapture;
+            },
+            get children() {
+              return r(i, {
+                variant: "outlined",
+                size: "small",
+                get disabled() {
+                  return !!e.busy;
+                },
+                onClick: () => e.onCapture?.(),
+                get label() {
+                  return e.captureLabel ?? "Capture preview";
+                }
+              });
+            }
+          }), null), l(t, () => e.children, null), s(() => p(t, v("smwb-save-asset-dialog__body", e.class))), t;
+        }
+      }), r(a.Footer, {
+        get children() {
+          return [r(i, {
+            variant: "text",
+            get disabled() {
+              return !!e.busy;
+            },
+            onClick: () => e.onClose(),
+            get label() {
+              return e.cancelLabel ?? "Cancel";
+            }
+          }), r(i, {
+            variant: "contained",
+            get disabled() {
+              return !!e.busy;
+            },
+            onClick: () => e.onConfirm(),
+            get label() {
+              return e.confirmLabel ?? "Save";
+            }
+          })];
+        }
+      })];
+    }
+  });
+}
+export {
+  $ as SaveAssetDialog
+};
+//# sourceMappingURL=saveAssetDialog.js.map

package/dist/headless/components/feedBack/saveAssetDialog/saveAssetDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"saveAssetDialog.js","sources":["../../../../../src/components/feedBack/saveAssetDialog/saveAssetDialog.tsx"],"sourcesContent":["import { type JSX, Show, splitProps } from \"solid-js\";\nimport cn from \"clsx\";\nimport { Modal } from \"../modal\";\nimport { Button } from \"../../inputs/button\";\nimport { TextField } from \"../../inputs/textField\";\n\nexport interface SaveAssetDialogProps {\n  open: boolean;\n  title?: string;\n  /** Label for the name field. Omit `onNameChange` AND `name` to hide the field. */\n  nameLabel?: string;\n  name?: string;\n  onNameChange?: (name: string) => void;\n  /** Preview image URL (e.g. a freshly captured thumbnail). */\n  previewSrc?: string;\n  /** Shows a Capture button when provided. */\n  onCapture?: () => void;\n  captureLabel?: string;\n  /** Disables the actions + name field while a save/capture is in flight. */\n  busy?: boolean;\n  confirmLabel?: string;\n  cancelLabel?: string;\n  onConfirm: () => void;\n  onClose: () => void;\n  /** Extra content between the name field/preview and the actions. */\n  children?: JSX.Element;\n  class?: string;\n}\n\n/**\n * A \"name it / preview a thumbnail / confirm-cancel\" dialog on `Modal` — the\n * save/capture flow apps hand-build for every asset. Pairs with srv-solid's\n * asset store: `onConfirm` uploads the captured `previewSrc`.\n */\nexport function SaveAssetDialog(props: SaveAssetDialogProps): JSX.Element {\n  const [local] = splitProps(props, [\n    \"open\",\n    \"title\",\n    \"nameLabel\",\n    \"name\",\n    \"onNameChange\",\n    \"previewSrc\",\n    \"onCapture\",\n    \"captureLabel\",\n    \"busy\",\n    \"confirmLabel\",\n    \"cancelLabel\",\n    \"onConfirm\",\n    \"onClose\",\n    \"children\",\n    \"class\",\n  ]);\n\n  const showNameField = (): boolean => local.onNameChange !== undefined || local.name !== undefined;\n\n  return (\n    <Modal open={local.open} onClose={local.onClose} size=\"small\">\n      <Modal.Header>{local.title ?? \"Save\"}</Modal.Header>\n      <Modal.Content>\n        <div class={cn(\"smwb-save-asset-dialog__body\", local.class)}>\n          <Show when={showNameField()}>\n            <TextField\n              label={local.nameLabel ?? \"Name\"}\n              value={local.name ?? \"\"}\n              disabled={!!local.busy}\n              onChange={(event) => local.onNameChange?.((event.currentTarget as HTMLInputElement).value)}\n            />\n          </Show>\n          <Show when={local.previewSrc}>\n            <div class=\"smwb-save-asset-dialog__preview\">\n              <img src={local.previewSrc} alt=\"\" />\n            </div>\n          </Show>\n          <Show when={local.onCapture}>\n            <Button\n              variant=\"outlined\"\n              size=\"small\"\n              disabled={!!local.busy}\n              onClick={() => local.onCapture?.()}\n              label={local.captureLabel ?? \"Capture preview\"}\n            />\n          </Show>\n          {local.children}\n        </div>\n      </Modal.Content>\n      <Modal.Footer>\n        <Button variant=\"text\" disabled={!!local.busy} onClick={() => local.onClose()} label={local.cancelLabel ?? \"Cancel\"} />\n        <Button variant=\"contained\" disabled={!!local.busy} onClick={() => local.onConfirm()} label={local.confirmLabel ?? \"Save\"} />\n      </Modal.Footer>\n    </Modal>\n  );\n}\n\nexport default SaveAssetDialog;\n"],"names":["SaveAssetDialog","props","local","splitProps","showNameField","onNameChange","undefined","name","_$createComponent","Modal","open","onClose","size","children","Header","title","Content","_el$","_tmpl$2","_$insert","Show","when","TextField","label","nameLabel","value","disabled","busy","onChange","event","currentTarget","previewSrc","_el$2","_tmpl$","_el$3","firstChild","_$effect","_$setAttribute","onCapture","Button","variant","onClick","captureLabel","_$className","cn","class","Footer","cancelLabel","onConfirm","confirmLabel"],"mappings":"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"}

package/dist/headless/components/inputs/valueSlider/valueSlider.js

@@ -0,0 +1,56 @@
+import { insert as t, createComponent as s, effect as v, setAttribute as _, className as f, template as a, delegateEvents as w } from "solid-js/web";
+import { splitProps as $, Show as d } from "solid-js";
+import g from "clsx";
+import { Slider as R } from "../slider/slider.js";
+var k = /* @__PURE__ */ a("<span class=smwb-value-slider__label>"), A = /* @__PURE__ */ a("<span class=smwb-value-slider__readout>"), y = /* @__PURE__ */ a('<button type=button class=smwb-value-slider__reset><svg viewBox="0 0 24 24"width=16 height=16 aria-hidden=true fill=none stroke=currentColor stroke-width=2><path d="M3 12a9 9 0 1 0 3-6.7M3 4v4h4"stroke-linecap=round stroke-linejoin=round>'), S = /* @__PURE__ */ a("<div class=smwb-value-slider__header><span class=smwb-value-slider__spacer>"), C = /* @__PURE__ */ a("<div>");
+const x = (o, e) => typeof o == "function" ? o(e) : Array.isArray(e) ? `${e[0]} – ${e[1]}` : e == null ? "" : String(e);
+function B(o) {
+  const [e, u] = $(o, ["readout", "endAdornment", "onReset", "resetLabel", "label", "class"]), c = () => e.readout !== void 0 && e.readout !== !1, b = () => e.label != null || c() || e.endAdornment != null || e.onReset != null;
+  return (() => {
+    var i = C();
+    return t(i, s(d, {
+      get when() {
+        return b();
+      },
+      get children() {
+        var l = S(), p = l.firstChild;
+        return t(l, s(d, {
+          get when() {
+            return e.label != null;
+          },
+          get children() {
+            var r = k();
+            return t(r, () => e.label), r;
+          }
+        }), p), t(l, s(d, {
+          get when() {
+            return c();
+          },
+          get children() {
+            var r = A();
+            return t(r, () => x(e.readout, u.value)), r;
+          }
+        }), null), t(l, () => e.endAdornment, null), t(l, s(d, {
+          get when() {
+            return e.onReset != null;
+          },
+          get children() {
+            var r = y();
+            return r.$$click = () => e.onReset?.(), v((n) => {
+              var m = e.resetLabel ?? "Reset", h = u.disabled;
+              return m !== n.e && _(r, "aria-label", n.e = m), h !== n.t && (r.disabled = n.t = h), n;
+            }, {
+              e: void 0,
+              t: void 0
+            }), r;
+          }
+        }), null), l;
+      }
+    }), null), t(i, s(R, u), null), v(() => f(i, g("smwb-value-slider", e.class))), i;
+  })();
+}
+w(["click"]);
+export {
+  B as ValueSlider
+};
+//# sourceMappingURL=valueSlider.js.map