@smwb/ui-solid 0.12.0 → 0.13.0

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

@@ -1,87 +1,122 @@
-import { createComponent as c, use as ce, spread as ve, mergeProps as he, insert as x, effect as R, style as K, addEventListener as Te, setAttribute as l, className as be, setStyleProperty as Me, memo as Ve, isServer as fe, template as V, delegateEvents as Ce } from "solid-js/web";
-import { Show as P, mergeProps as ge, splitProps as we, createSignal as Z, onMount as xe, onCleanup as re, For as ne } from "solid-js";
-import ie from "clsx";
-import { toPercent as M, coordY as _e, rescale as se, coordX as pe } from "./utils.js";
-import { mergeRefs as ye } from "../../../primitives/mergeRefs.js";
-import { TextFieldWrapper as ke } from "../textField/textFieldWrapper.js";
-import { TextField as Se } from "../textField/textField.js";
-var $e = /* @__PURE__ */ V("<span class=smwb-slider__marks aria-hidden=true>"), ze = /* @__PURE__ */ V("<div class=smwb-slider__container><span><span class=smwb-slider__rail></span><span class=smwb-slider__track>"), Ee = /* @__PURE__ */ V("<span class=smwb-slider__mark-label>"), Le = /* @__PURE__ */ V("<span class=smwb-slider__mark>"), De = /* @__PURE__ */ V("<span><input class=smwb-slider__input type=range>"), Pe = /* @__PURE__ */ V("<span class=smwb-slider__ticks>"), Re = /* @__PURE__ */ V("<span class=smwb-slider__thumb-tooltip>"), Fe = /* @__PURE__ */ V("<div class=smwb-slider__container><span><span class=smwb-slider__rail></span><span class=smwb-slider__track></span><span><input data-testid=slider-input class=smwb-slider__input type=range readonly>"), Be = /* @__PURE__ */ V("<span class=smwb-slider__tick>");
-function Ae(v, C, e, F) {
-  if (!v) return [];
-  if (Array.isArray(v)) return v;
-  const E = F && F > 0 ? F : (e - C) / 10, B = [];
-  for (let d = C; d <= e + 1e-9; d += E)
-    B.push({
-      value: Math.round(d * 1e6) / 1e6
+import { createComponent as m, use as Me, spread as Le, mergeProps as Ae, insert as h, effect as z, style as G, addEventListener as Ye, setAttribute as o, className as Ce, setStyleProperty as Ue, memo as Oe, isServer as Ve, template as L, delegateEvents as je } from "solid-js/web";
+import { Show as B, mergeProps as De, splitProps as Se, createSignal as q, onMount as Fe, onCleanup as ue, For as ce } from "solid-js";
+import me from "clsx";
+import { toPercent as F, decimatedClamp as Ee, coordY as ze, rescale as he, coordX as Be } from "./utils.js";
+import { createHelperText as Ie } from "../../../primitives/createHelperText.js";
+import { createId as Pe } from "../../../primitives/createId.js";
+import { mergeRefs as Re } from "../../../primitives/mergeRefs.js";
+import { callHandler as se } from "../../../primitives/callHandler.js";
+import { TextFieldWrapper as Ne } from "../textField/textFieldWrapper.js";
+import { TextField as qe } from "../textField/textField.js";
+var We = /* @__PURE__ */ L("<span class=smwb-slider__marks aria-hidden=true>"), Ge = /* @__PURE__ */ L("<div class=smwb-slider__container><span><span class=smwb-slider__rail></span><span class=smwb-slider__track>"), He = /* @__PURE__ */ L("<span class=smwb-slider__mark-label>"), Ke = /* @__PURE__ */ L("<span class=smwb-slider__mark>"), Je = /* @__PURE__ */ L("<span hidden>"), Qe = /* @__PURE__ */ L("<span><input class=smwb-slider__input type=range>"), Ze = /* @__PURE__ */ L("<span class=smwb-slider__ticks>"), et = /* @__PURE__ */ L("<span class=smwb-slider__thumb-tooltip>"), tt = /* @__PURE__ */ L("<div class=smwb-slider__container><span><span class=smwb-slider__rail></span><span class=smwb-slider__track></span><span><input data-testid=slider-input class=smwb-slider__input type=range readonly>"), rt = /* @__PURE__ */ L("<span class=smwb-slider__tick>");
+const be = ["minimum", "maximum"];
+function Xe(f, I, e, P) {
+  if (!f) return [];
+  if (Array.isArray(f)) return f;
+  const A = P && P > 0 ? P : (e - I) / 10, X = [];
+  for (let C = I; C <= e + 1e-9; C += A)
+    X.push({
+      value: Math.round(C * 1e6) / 1e6
     });
-  return B;
+  return X;
 }
-function Xe(v) {
-  const C = ge({
+function nt(f) {
+  const I = De({
     min: 0,
     max: 100,
     disabled: !1,
     size: "medium",
     color: "primary",
     orientation: "horizontal"
-  }, v), [e, F] = we(C, ["defaultValue", "value", "onChange", "min", "max", "name", "disabled", "class", "step", "label", "helperText", "error", "size", "color", "orientation", "marks", "getAriaValueText", "aria-label", "range", "variant", "valueField", "withTicks", "ref"]), E = () => e.orientation === "vertical", B = (i) => {
-    const n = Array.isArray(i) ? i : [e.min, e.max], m = Math.min(n[0] ?? e.min, n[1] ?? e.max), b = Math.max(n[0] ?? e.min, n[1] ?? e.max);
-    return [m, b];
-  }, d = e.value !== void 0, [ee, W] = Z(B(e.defaultValue)), g = () => d ? B(e.value) : ee();
-  let X, Y = 0, I = !1;
-  const S = () => Ae(e.marks, e.min, e.max, e.step), z = (i) => {
-    const n = X?.getBoundingClientRect();
+  }, f), [e, P] = Se(I, [
+    "defaultValue",
+    "value",
+    "onChange",
+    "min",
+    "max",
+    "name",
+    "disabled",
+    "class",
+    "step",
+    "label",
+    "aria-labelledby",
+    "helperText",
+    "error",
+    "size",
+    "color",
+    "orientation",
+    "marks",
+    "getAriaValueText",
+    "aria-label",
+    "range",
+    "variant",
+    "valueField",
+    "withTicks",
+    "ref",
+    // The slider sets this on its root too; its own handler calls the caller's first.
+    "onMouseDown"
+  ]), A = Ie(() => e.helperText), X = Pe(), C = `${X}-label`, J = (s) => `${X}-${be[s]}`, Q = () => e["aria-labelledby"] || (e.label && !e["aria-label"] ? C : void 0), R = () => e.orientation === "vertical", $ = (s) => {
+    const n = Array.isArray(s) ? s : [e.min, e.max], v = Math.min(n[0] ?? e.min, n[1] ?? e.max), y = Math.max(n[0] ?? e.min, n[1] ?? e.max);
+    return [v, y];
+  }, Z = () => e.value !== void 0, [Y, ve] = q($(e.defaultValue)), x = () => Z() ? $(e.value) : Y();
+  let V, U = 0, E = !1;
+  const N = () => Xe(e.marks, e.min, e.max, e.step), ee = (s) => {
+    const n = V?.getBoundingClientRect();
     if (!n) return e.min;
-    if (E()) {
-      const b = _e(i) - n.top;
-      return se(n.height - b, [0, n.height], [e.min, e.max], {
+    if (R()) {
+      const y = ze(s) - n.top;
+      return he(n.height - y, [0, n.height], [e.min, e.max], {
         step: e.step
       });
     }
-    const m = pe(i) - n.left;
-    return se(m, [0, n.width], [e.min, e.max], {
+    const v = Be(s) - n.left;
+    return he(v, [0, n.width], [e.min, e.max], {
       step: e.step
     });
-  }, ae = (i, n) => {
-    const m = Math.min(i[0], i[1]), b = Math.max(i[0], i[1]), w = [Math.max(e.min, m), Math.min(e.max, b)];
-    d || W(w), e.onChange?.(n, w, v);
-  }, N = (i, n) => {
-    const m = g(), b = [m[0], m[1]];
-    b[Y] = Math.max(e.min, Math.min(e.max, i)), ae(b, n);
-  }, _ = (i) => {
-    const n = g();
-    Y = Math.abs(i - n[0]) <= Math.abs(i - n[1]) ? 0 : 1;
-  }, L = (i) => {
-    I && (i.preventDefault(), N(z(i), i));
-  }, h = () => {
-    I = !1, !fe && (document.removeEventListener("mousemove", L), document.removeEventListener("mouseup", h), document.removeEventListener("touchmove", L), document.removeEventListener("touchend", h));
-  }, D = (i) => {
-    if (e.disabled || i.button !== 0) return;
-    const n = z(i);
-    _(n), I = !0, N(n, i), document.addEventListener("mousemove", L), document.addEventListener("mouseup", h);
-  }, U = (i) => {
+  }, le = (s, n) => {
+    const v = Math.min(s[0], s[1]), y = Math.max(s[0], s[1]), p = [Math.max(e.min, v), Math.min(e.max, y)];
+    Z() || ve(p), e.onChange?.(n, p, f);
+  }, g = (s, n) => {
+    const v = x(), y = [v[0], v[1]];
+    y[U] = Math.max(e.min, Math.min(e.max, s)), le(y, n);
+  }, W = (s) => {
+    const n = x();
+    U = Math.abs(s - n[0]) <= Math.abs(s - n[1]) ? 0 : 1;
+  }, w = (s) => {
+    E && (s.preventDefault(), g(ee(s), s));
+  }, k = () => {
+    E = !1, !Ve && (document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", k), document.removeEventListener("touchmove", w), document.removeEventListener("touchend", k));
+  }, te = (s) => {
+    if (se(e.onMouseDown, s), e.disabled || s.button !== 0) return;
+    const n = ee(s);
+    W(n), E = !0, g(n, s), document.addEventListener("mousemove", w), document.addEventListener("mouseup", k);
+  }, H = (s) => {
     if (e.disabled) return;
-    const n = z(i);
-    _(n), I = !0, N(n, i), document.addEventListener("touchmove", L), document.addEventListener("touchend", h);
+    const n = ee(s);
+    W(n), E = !0, g(n, s), document.addEventListener("touchmove", w), document.addEventListener("touchend", k);
   };
-  xe(() => {
-    X && (X.addEventListener("touchstart", U), re(() => X?.removeEventListener("touchstart", U)));
-  }), re(h);
-  const H = (i) => (n) => {
+  Fe(() => {
+    V && (V.addEventListener("touchstart", H), ue(() => V?.removeEventListener("touchstart", H)));
+  }), ue(k);
+  const oe = (s) => (n) => {
     if (e.disabled) return;
-    const m = e.step && e.step > 0 ? e.step : 1, b = g();
-    let w = null;
-    n.key === "ArrowLeft" || n.key === "ArrowDown" ? w = b[i] - m : n.key === "ArrowRight" || n.key === "ArrowUp" ? w = b[i] + m : n.key === "Home" ? w = e.min : n.key === "End" && (w = e.max), w !== null && (n.preventDefault(), Y = i, N(w, n));
-  }, te = () => ie("smwb-slider", "smwb-slider--range", e.class, {
+    const v = e.step && e.step > 0 ? e.step : 1, y = x();
+    let p = null;
+    n.key === "ArrowLeft" || n.key === "ArrowDown" ? p = y[s] - v : n.key === "ArrowRight" || n.key === "ArrowUp" ? p = y[s] + v : n.key === "Home" ? p = e.min : n.key === "End" && (p = e.max), p !== null && (n.preventDefault(), U = s, g(p, n));
+  }, O = () => me("smwb-slider", "smwb-slider--range", e.class, {
     "smwb-slider--disabled": e.disabled,
-    "smwb-slider--vertical": E()
+    "smwb-slider--vertical": R()
   }, e.size !== "medium" && `smwb-slider_size-${e.size}`, e.color !== "primary" && `smwb-slider_color-${e.color}`);
-  return c(ke, {
+  return m(Ne, {
     get label() {
       return e.label;
     },
+    labelId: C,
     get helperText() {
-      return e.helperText;
+      return A.text();
+    },
+    get helperTextId() {
+      return A.id;
     },
     get disabled() {
       return e.disabled;
@@ -92,53 +127,61 @@ function Xe(v) {
     fullWidth: !0,
     shrink: !0,
     get children() {
-      var i = ze(), n = i.firstChild, m = n.firstChild, b = m.nextSibling;
-      n.$$mousedown = D;
-      var w = ye(e.ref, (o) => X = o);
-      return typeof w == "function" && ce(w, n), ve(n, he({
+      var s = Ge(), n = s.firstChild, v = n.firstChild, y = v.nextSibling;
+      n.$$mousedown = te;
+      var p = Re(e.ref, (d) => V = d);
+      return typeof p == "function" && Me(p, n), Le(n, Ae({
         get class() {
-          return te();
+          return O();
         }
-      }, F), !1, !0), x(n, c(P, {
+      }, P), !1, !0), h(n, m(B, {
         get when() {
-          return S().length > 0;
+          return N().length > 0;
         },
         get children() {
-          var o = $e();
-          return x(o, c(ne, {
+          var d = We();
+          return h(d, m(ce, {
             get each() {
-              return S();
+              return N();
             },
-            children: (f) => (() => {
-              var s = Le();
-              return x(s, c(P, {
+            children: (b) => (() => {
+              var l = Ke();
+              return h(l, m(B, {
                 get when() {
-                  return f.label != null;
+                  return b.label != null;
                 },
                 get children() {
-                  var t = Ee();
-                  return x(t, () => f.label), t;
+                  var t = He();
+                  return h(t, () => b.label), t;
                 }
-              })), R((t) => K(s, E() ? {
-                bottom: `${M(f.value, e.min, e.max)}%`
+              })), z((t) => G(l, R() ? {
+                bottom: `${F(b.value, e.min, e.max)}%`
               } : {
-                left: `${M(f.value, e.min, e.max)}%`
-              }, t)), s;
+                left: `${F(b.value, e.min, e.max)}%`
+              }, t)), l;
             })()
-          })), o;
+          })), d;
         }
-      }), m), x(n, c(ne, {
+      }), v), h(n, m(ce, {
         each: [0, 1],
-        children: (o) => (() => {
-          var f = De(), s = f.firstChild;
-          return Te(s, "keydown", H(o), !0), s.addEventListener("change", () => {
-          }), l(s, "data-testid", `slider-input-${o}`), R((t) => {
-            var a = ie("smwb-slider__thumb", `smwb-slider__thumb--${o === 0 ? "start" : "end"}`), p = E() ? {
-              bottom: `${M(g()[o], e.min, e.max)}%`
+        children: (d) => (() => {
+          var b = Qe(), l = b.firstChild;
+          return Ye(l, "keydown", oe(d), !0), l.addEventListener("change", () => {
+          }), o(l, "data-testid", `slider-input-${d}`), h(b, m(B, {
+            get when() {
+              return Q();
+            },
+            get children() {
+              var t = Je();
+              return h(t, () => be[d]), z(() => o(t, "id", J(d))), t;
+            }
+          }), null), z((t) => {
+            var K = me("smwb-slider__thumb", `smwb-slider__thumb--${d === 0 ? "start" : "end"}`), j = R() ? {
+              bottom: `${F(x()[d], e.min, e.max)}%`
             } : {
-              left: `${M(g()[o], e.min, e.max)}%`
-            }, y = e.min, k = e.max, u = e.step, j = e.name ? `${e.name}[${o}]` : void 0, r = e.disabled, $ = e.disabled ? -1 : 0, A = e["aria-label"] ? `${e["aria-label"]} ${o === 0 ? "minimum" : "maximum"}` : void 0, T = e.orientation, q = g()[o], G = o === 0 ? e.min : g()[0], J = o === 0 ? g()[1] : e.max, O = e.getAriaValueText ? e.getAriaValueText(g()[o]) : void 0, Q = e.disabled || void 0;
-            return a !== t.e && be(f, t.e = a), t.t = K(f, p, t.t), y !== t.a && l(s, "min", t.a = y), k !== t.o && l(s, "max", t.o = k), u !== t.i && l(s, "step", t.i = u), j !== t.n && l(s, "name", t.n = j), r !== t.s && (s.disabled = t.s = r), $ !== t.h && l(s, "tabindex", t.h = $), A !== t.r && l(s, "aria-label", t.r = A), T !== t.d && l(s, "aria-orientation", t.d = T), q !== t.l && l(s, "aria-valuenow", t.l = q), G !== t.u && l(s, "aria-valuemin", t.u = G), J !== t.c && l(s, "aria-valuemax", t.c = J), O !== t.w && l(s, "aria-valuetext", t.w = O), Q !== t.m && l(s, "aria-disabled", t.m = Q), t;
+              left: `${F(x()[d], e.min, e.max)}%`
+            }, re = e.min, de = e.max, a = e.step, i = e.name ? `${e.name}[${d}]` : void 0, u = e.disabled, _ = e.disabled ? -1 : 0, T = e["aria-label"] ? `${e["aria-label"]} ${be[d]}` : void 0, c = Q() ? `${Q()} ${J(d)}` : void 0, ne = A.describedBy(), r = e.orientation, M = x()[d], D = d === 0 ? e.min : x()[0], S = d === 0 ? x()[1] : e.max, ae = e.getAriaValueText ? e.getAriaValueText(x()[d]) : void 0, ie = e.disabled || void 0;
+            return K !== t.e && Ce(b, t.e = K), t.t = G(b, j, t.t), re !== t.a && o(l, "min", t.a = re), de !== t.o && o(l, "max", t.o = de), a !== t.i && o(l, "step", t.i = a), i !== t.n && o(l, "name", t.n = i), u !== t.s && (l.disabled = t.s = u), _ !== t.h && o(l, "tabindex", t.h = _), T !== t.r && o(l, "aria-label", t.r = T), c !== t.d && o(l, "aria-labelledby", t.d = c), ne !== t.l && o(l, "aria-describedby", t.l = ne), r !== t.u && o(l, "aria-orientation", t.u = r), M !== t.c && o(l, "aria-valuenow", t.c = M), D !== t.w && o(l, "aria-valuemin", t.w = D), S !== t.m && o(l, "aria-valuemax", t.m = S), ae !== t.f && o(l, "aria-valuetext", t.f = ae), ie !== t.y && o(l, "aria-disabled", t.y = ie), t;
           }, {
             e: void 0,
             t: void 0,
@@ -154,24 +197,26 @@ function Xe(v) {
             u: void 0,
             c: void 0,
             w: void 0,
-            m: void 0
-          }), R(() => s.value = g()[o]), f;
+            m: void 0,
+            f: void 0,
+            y: void 0
+          }), z(() => l.value = x()[d]), b;
         })()
-      }), null), R((o) => K(b, (() => {
-        const f = M(g()[0], e.min, e.max), s = M(g()[1], e.min, e.max), t = `${Math.min(f, s)}%`, a = `${Math.abs(s - f)}%`;
-        return E() ? {
+      }), null), z((d) => G(y, (() => {
+        const b = F(x()[0], e.min, e.max), l = F(x()[1], e.min, e.max), t = `${Math.min(b, l)}%`, K = `${Math.abs(l - b)}%`;
+        return R() ? {
           bottom: t,
-          height: a
+          height: K
         } : {
           left: t,
-          width: a
+          width: K
         };
-      })(), o)), i;
+      })(), d)), s;
     }
   });
 }
-function Ye(v) {
-  const C = ge({
+function at(f) {
+  const I = De({
     min: 0,
     max: 100,
     disabled: !1,
@@ -179,50 +224,101 @@ function Ye(v) {
     size: "medium",
     color: "primary",
     orientation: "horizontal"
-  }, v), [e, F] = we(C, ["defaultValue", "value", "onChange", "min", "max", "name", "disabled", "class", "step", "variant", "valueField", "withTicks", "label", "helperText", "error", "size", "color", "orientation", "marks", "range", "getAriaValueText", "aria-label", "ref"]), E = typeof e.defaultValue == "number" ? e.defaultValue : void 0, B = () => typeof e.value == "number" ? e.value : void 0, d = () => e.orientation === "vertical", ee = typeof e.value == "number", W = () => e.variant === "discrete", [g, X] = Z(E ?? e.min), [Y, I] = Z(!1), [S, z] = Z(!1), [ae, N] = Z(!1);
-  let _, L = !1;
-  const h = () => ee ? B() : g(), D = (t, a) => {
-    t < e.min || t > e.max || (ee || X(t), e.onChange?.(a, t, v));
-  }, U = (t, a) => se(t, [0, a], [e.min, e.max], {
+  }, f), [e, P] = Se(I, [
+    "defaultValue",
+    "value",
+    "onChange",
+    "min",
+    "max",
+    "name",
+    "disabled",
+    "class",
+    "step",
+    "variant",
+    "valueField",
+    "withTicks",
+    "label",
+    "aria-labelledby",
+    "helperText",
+    "error",
+    "size",
+    "color",
+    "orientation",
+    "marks",
+    "range",
+    "getAriaValueText",
+    "aria-label",
+    "ref",
+    // The slider sets these on its root too; its own handlers call the caller's first.
+    "onMouseDown",
+    "onKeyDown",
+    "onFocus",
+    "onBlur"
+  ]), A = Ie(() => e.helperText), C = `${Pe()}-label`, J = () => e["aria-labelledby"] || (e.label && !e["aria-label"] ? C : void 0), Q = typeof e.defaultValue == "number" ? e.defaultValue : void 0, R = () => typeof e.value == "number" ? e.value : void 0, $ = () => e.orientation === "vertical", Z = () => typeof e.value == "number", Y = () => e.variant === "discrete", [ve, x] = q(Q ?? e.min), [V, U] = q(!1), [E, N] = q(!1), [ee, le] = q(!1);
+  let g, W = !1;
+  const w = () => Z() ? R() : ve(), k = (a, i) => {
+    a < e.min || a > e.max || (Z() || x(a), e.onChange?.(i, a, f));
+  }, te = (a, i) => he(a, [0, i], [e.min, e.max], {
     step: e.step
-  }), H = (t) => {
-    if (!L || !_) return;
-    const a = _.getBoundingClientRect(), p = pe(t), y = _e(t), k = d() ? a.height - (y - a.top) : p - a.left, u = U(k, d() ? a.height : a.width);
-    S() || z(!0), h() !== u && (Y() || I(!0), D(u, t));
-  }, te = () => {
-    fe || (document.removeEventListener("mousemove", H), document.removeEventListener("mouseup", i), document.removeEventListener("touchmove", H), document.removeEventListener("touchend", i));
-  }, i = () => {
-    L = !1, Y() && I(!1), S() && z(!1), te();
-  }, n = (t) => {
-    if (e.disabled || t.button !== 0 || !_) return;
-    L = !0;
-    const a = _.getBoundingClientRect(), p = d() ? a.height - (t.clientY - a.top) : t.clientX - a.left, y = U(p, d() ? a.height : a.width);
-    S() || z(!0), D(y, t), document.addEventListener("mousemove", H), document.addEventListener("mouseup", i);
-  }, m = (t) => {
-    if (e.disabled || !_) return;
-    L = !0;
-    const a = _.getBoundingClientRect(), p = t.changedTouches?.[0];
-    if (!p) return;
-    const y = d() ? a.height - (p.clientY - a.top) : p.clientX - a.left, k = U(y, d() ? a.height : a.width);
-    S() || z(!0), D(k, t), document.addEventListener("touchmove", H), document.addEventListener("touchend", i);
+  }), H = (a) => {
+    if (!W || !g) return;
+    const i = g.getBoundingClientRect(), u = Be(a), _ = ze(a), T = $() ? i.height - (_ - i.top) : u - i.left, c = te(T, $() ? i.height : i.width);
+    E() || N(!0), w() !== c && (V() || U(!0), k(c, a));
+  }, oe = () => {
+    Ve || (document.removeEventListener("mousemove", H), document.removeEventListener("mouseup", O), document.removeEventListener("touchmove", H), document.removeEventListener("touchend", O));
+  }, O = () => {
+    W = !1, V() && U(!1), E() && N(!1), oe();
+  }, s = (a) => {
+    if (se(e.onMouseDown, a), e.disabled || a.button !== 0 || !g) return;
+    W = !0;
+    const i = g.getBoundingClientRect(), u = $() ? i.height - (a.clientY - i.top) : a.clientX - i.left, _ = te(u, $() ? i.height : i.width);
+    E() || N(!0), k(_, a), document.addEventListener("mousemove", H), document.addEventListener("mouseup", O);
+  }, n = (a) => {
+    if (e.disabled || !g) return;
+    W = !0;
+    const i = g.getBoundingClientRect(), u = a.changedTouches?.[0];
+    if (!u) return;
+    const _ = $() ? i.height - (u.clientY - i.top) : u.clientX - i.left, T = te(_, $() ? i.height : i.width);
+    E() || N(!0), k(T, a), document.addEventListener("touchmove", H), document.addEventListener("touchend", O);
   };
-  xe(() => {
-    _ && (_.addEventListener("touchstart", m), re(() => _?.removeEventListener("touchstart", m)));
-  }), re(te);
-  const b = (t) => {
-    !ae() || e.disabled || ((t.key === "ArrowLeft" || t.key === "ArrowDown") && D(h() - (e.step || 1), t), (t.key === "ArrowRight" || t.key === "ArrowUp") && D(h() + (e.step || 1), t));
-  }, w = () => ie("smwb-slider", e.class, {
+  Fe(() => {
+    g && (g.addEventListener("touchstart", n), ue(() => g?.removeEventListener("touchstart", n)));
+  }), ue(oe);
+  const v = (a) => {
+    se(e.onKeyDown, a), !(!ee() || e.disabled) && ((a.key === "ArrowLeft" || a.key === "ArrowDown") && k(w() - (e.step || 1), a), (a.key === "ArrowRight" || a.key === "ArrowUp") && k(w() + (e.step || 1), a));
+  }, y = (a) => {
+    se(e.onFocus, a), le(!0);
+  }, p = (a) => {
+    se(e.onBlur, a), le(!1);
+  }, [d, b] = q(null), l = (a) => {
+    const i = a.currentTarget.value;
+    b(i);
+    const u = Number(i);
+    i.trim() !== "" && Ee(u, e.min, e.max, e.step) === u && k(u, a);
+  }, t = (a) => {
+    const i = d();
+    if (i === null) return;
+    b(null);
+    const u = Number(i);
+    if (i.trim() === "" || !Number.isFinite(u)) return;
+    const _ = Ee(u, e.min, e.max, e.step);
+    _ !== w() && k(_, a);
+  }, K = () => me("smwb-slider", e.class, {
     "smwb-slider--disabled": e.disabled,
-    "smwb-slider--dragging": Y(),
-    "smwb-slider--discrete": W(),
-    "smwb-slider--vertical": d()
-  }, e.size !== "medium" && `smwb-slider_size-${e.size}`, e.color !== "primary" && `smwb-slider_color-${e.color}`), o = () => `${M(h(), e.min, e.max)}%`, f = () => Ae(e.marks, e.min, e.max, e.step), s = () => Array(Math.round(e.max / (e.step || 1)) + 1).fill(1);
-  return c(ke, {
+    "smwb-slider--dragging": V(),
+    "smwb-slider--discrete": Y(),
+    "smwb-slider--vertical": $()
+  }, e.size !== "medium" && `smwb-slider_size-${e.size}`, e.color !== "primary" && `smwb-slider_color-${e.color}`), j = () => `${F(w(), e.min, e.max)}%`, re = () => Xe(e.marks, e.min, e.max, e.step), de = () => Array(Math.round(e.max / (e.step || 1)) + 1).fill(1);
+  return m(Ne, {
     get label() {
       return e.label;
     },
+    labelId: C,
     get helperText() {
-      return e.helperText;
+      return A.text();
+    },
+    get helperTextId() {
+      return A.id;
     },
     get disabled() {
       return e.disabled;
@@ -233,93 +329,116 @@ function Ye(v) {
     fullWidth: !0,
     shrink: !0,
     get children() {
-      var t = Fe(), a = t.firstChild, p = a.firstChild, y = p.nextSibling, k = y.nextSibling, u = k.firstChild;
-      a.addEventListener("blur", () => N(!1)), a.addEventListener("focus", () => N(!0)), a.$$mousedown = n;
-      var j = ye(e.ref, (r) => _ = r);
-      return typeof j == "function" && ce(j, a), a.$$keydown = b, ve(a, he({
+      var a = tt(), i = a.firstChild, u = i.firstChild, _ = u.nextSibling, T = _.nextSibling, c = T.firstChild;
+      i.addEventListener("blur", p), i.addEventListener("focus", y), i.$$mousedown = s;
+      var ne = Re(e.ref, (r) => g = r);
+      return typeof ne == "function" && Me(ne, i), i.$$keydown = v, Le(i, Ae({
         get class() {
-          return w();
+          return K();
         },
         get tabindex() {
           return e.disabled ? -1 : 0;
         }
-      }, F), !1, !0), x(a, c(P, {
+      }, P), !1, !0), h(i, m(B, {
         get when() {
           return e.withTicks;
         },
         get children() {
-          var r = Pe();
-          return x(r, c(ne, {
+          var r = Ze();
+          return h(r, m(ce, {
             get each() {
-              return s();
+              return de();
             },
-            children: () => Be()
-          })), R(($) => Me(r, "gap", `${e.step}`)), r;
+            children: () => rt()
+          })), z((M) => Ue(r, "gap", `${e.step}`)), r;
         }
-      }), p), x(a, c(P, {
+      }), u), h(i, m(B, {
         get when() {
-          return f().length > 0;
+          return re().length > 0;
         },
         get children() {
-          var r = $e();
-          return x(r, c(ne, {
+          var r = We();
+          return h(r, m(ce, {
             get each() {
-              return f();
+              return re();
             },
-            children: ($) => (() => {
-              var A = Le();
-              return x(A, c(P, {
+            children: (M) => (() => {
+              var D = Ke();
+              return h(D, m(B, {
                 get when() {
-                  return $.label != null;
+                  return M.label != null;
                 },
                 get children() {
-                  var T = Ee();
-                  return x(T, () => $.label), T;
+                  var S = He();
+                  return h(S, () => M.label), S;
                 }
-              })), R((T) => K(A, d() ? {
-                bottom: `${M($.value, e.min, e.max)}%`
+              })), z((S) => G(D, $() ? {
+                bottom: `${F(M.value, e.min, e.max)}%`
               } : {
-                left: `${M($.value, e.min, e.max)}%`
-              }, T)), A;
+                left: `${F(M.value, e.min, e.max)}%`
+              }, S)), D;
             })()
           })), r;
         }
-      }), p), x(k, c(P, {
+      }), u), h(T, m(B, {
         get when() {
-          return W();
+          return Y();
         },
         get children() {
-          var r = Re();
-          return x(r, () => Math.round(h())), r;
+          var r = et();
+          return h(r, () => Math.round(w())), r;
         }
-      }), u), x(t, c(P, {
+      }), c), h(a, m(B, {
         get when() {
-          return Ve(() => !!e.valueField)() && W();
+          return Oe(() => !!e.valueField)() && Y();
         },
         get children() {
-          return c(Se, {
+          return m(qe, {
             type: "number",
+            get min() {
+              return e.min;
+            },
+            get max() {
+              return e.max;
+            },
+            get step() {
+              return e.step;
+            },
+            get disabled() {
+              return e.disabled;
+            },
+            helperText: null,
             get value() {
-              return h();
+              return d() ?? w();
+            },
+            onChange: l,
+            onBlur: t,
+            onKeyDown: (r) => {
+              r.key === "Enter" && t(r);
             },
-            onChange: (r) => D(+r.currentTarget.value, r),
-            variant: "filled"
+            variant: "filled",
+            get "aria-label"() {
+              return e["aria-label"];
+            },
+            get "aria-labelledby"() {
+              return J();
+            }
           });
         }
-      }), null), R((r) => {
-        var $ = d() ? {
-          height: o()
+      }), null), z((r) => {
+        var M = $() ? {
+          height: j()
         } : {
-          width: o()
-        }, A = ie("smwb-slider__thumb", {
-          "smwb-slider__thumb--active": S(),
-          "smwb-slider__thumb--discrete": W()
-        }), T = d() ? {
-          bottom: o()
+          width: j()
+        }, D = me("smwb-slider__thumb", {
+          "smwb-slider__thumb--active": E(),
+          "smwb-slider__thumb--discrete": Y()
+        }), S = $() ? {
+          bottom: j()
         } : {
-          left: o()
-        }, q = e.min, G = e.max, J = e.name, O = e["aria-label"], Q = e.orientation, oe = h(), le = e.min, ue = e.max, de = e.getAriaValueText ? e.getAriaValueText(h()) : void 0, me = e.disabled || void 0;
-        return r.e = K(y, $, r.e), A !== r.t && be(k, r.t = A), r.a = K(k, T, r.a), q !== r.o && l(u, "min", r.o = q), G !== r.i && l(u, "max", r.i = G), J !== r.n && l(u, "name", r.n = J), O !== r.s && l(u, "aria-label", r.s = O), Q !== r.h && l(u, "aria-orientation", r.h = Q), oe !== r.r && l(u, "aria-valuenow", r.r = oe), le !== r.d && l(u, "aria-valuemin", r.d = le), ue !== r.l && l(u, "aria-valuemax", r.l = ue), de !== r.u && l(u, "aria-valuetext", r.u = de), me !== r.c && l(u, "aria-disabled", r.c = me), r;
+          left: j()
+        }, ae = e.min, ie = e.max, fe = e.name, ge = e["aria-label"], we = J(), ye = A.describedBy(), xe = e.orientation, pe = w(), _e = e.min, $e = e.max, ke = e.getAriaValueText ? e.getAriaValueText(w()) : void 0, Te = e.disabled || void 0;
+        return r.e = G(_, M, r.e), D !== r.t && Ce(T, r.t = D), r.a = G(T, S, r.a), ae !== r.o && o(c, "min", r.o = ae), ie !== r.i && o(c, "max", r.i = ie), fe !== r.n && o(c, "name", r.n = fe), ge !== r.s && o(c, "aria-label", r.s = ge), we !== r.h && o(c, "aria-labelledby", r.h = we), ye !== r.r && o(c, "aria-describedby", r.r = ye), xe !== r.d && o(c, "aria-orientation", r.d = xe), pe !== r.l && o(c, "aria-valuenow", r.l = pe), _e !== r.u && o(c, "aria-valuemin", r.u = _e), $e !== r.c && o(c, "aria-valuemax", r.c = $e), ke !== r.w && o(c, "aria-valuetext", r.w = ke), Te !== r.m && o(c, "aria-disabled", r.m = Te), r;
       }, {
         e: void 0,
         t: void 0,
@@ -333,25 +452,29 @@ function Ye(v) {
         d: void 0,
         l: void 0,
         u: void 0,
-        c: void 0
-      }), R(() => u.value = h()), t;
+        c: void 0,
+        w: void 0,
+        m: void 0
+      }), z(() => c.value = w()), a;
     }
   });
 }
-function qe(v) {
-  const C = v.range === !0 || Array.isArray(v.value) || Array.isArray(v.defaultValue);
-  return c(P, {
-    when: C,
+function ht(f) {
+  const I = () => f.range === !0 || Array.isArray(f.value) || Array.isArray(f.defaultValue);
+  return m(B, {
+    get when() {
+      return I();
+    },
     get fallback() {
-      return c(Ye, v);
+      return m(at, f);
     },
     get children() {
-      return c(Xe, v);
+      return m(nt, f);
     }
   });
 }
-Ce(["mousedown", "keydown"]);
+je(["mousedown", "keydown"]);
 export {
-  qe as Slider
+  ht as Slider
 };
 //# sourceMappingURL=slider.js.map