@zag-js/slider 0.1.10 → 0.1.13

package/dist/index.mjs

@@ -1,47 +1,10 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-
 // ../../utilities/dom/dist/index.mjs
-var __defProp2 = Object.defineProperty;
-var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
-var __hasOwnProp2 = Object.prototype.hasOwnProperty;
-var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
-var __pow = Math.pow;
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp2.call(b, prop))
-      __defNormalProp2(a, prop, b[prop]);
-  if (__getOwnPropSymbols2)
-    for (var prop of __getOwnPropSymbols2(b)) {
-      if (__propIsEnum2.call(b, prop))
-        __defNormalProp2(a, prop, b[prop]);
-    }
-  return a;
-};
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
-  return res != null ? res : void 0;
+  return res ?? void 0;
 };
 var callAll = (...fns) => (...a) => {
   fns.forEach(function(fn) {
@@ -53,9 +16,8 @@ var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
 var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 var isDom = () => typeof window !== "undefined";
 function getPlatform() {
-  var _a;
   const agent = navigator.userAgentData;
-  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
+  return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
@@ -69,36 +31,30 @@ function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === "[object Window]";
 }
 function getDocument(el) {
-  var _a;
   if (isWindow(el))
     return el.document;
   if (isDocument(el))
     return el;
-  return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
-}
-function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+  return (el == null ? void 0 : el.ownerDocument) ?? document;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
     getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
-    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
       var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
+      return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
     },
+    getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
-  return __spreadValues2(__spreadValues2({}, dom2), helpers);
+  return {
+    ...dom2,
+    ...helpers
+  };
 }
 function getNativeEvent(e) {
-  var _a;
-  return (_a = e.nativeEvent) != null ? _a : e;
+  return e.nativeEvent ?? e;
 }
 var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
 var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
@@ -107,46 +63,6 @@ var isMouseEvent = (v) => isObject(v) && hasProp(v, "button");
 var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
 var isLeftClick = (v) => v.button === 0;
 var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
-function observeAttributes(node, attributes, fn) {
-  if (!node)
-    return;
-  const attrs = Array.isArray(attributes) ? attributes : [attributes];
-  const win = node.ownerDocument.defaultView || window;
-  const obs = new win.MutationObserver((changes) => {
-    for (const change of changes) {
-      if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
-        fn(change);
-      }
-    }
-  });
-  obs.observe(node, { attributes: true, attributeFilter: attrs });
-  return () => obs.disconnect();
-}
-function getClosestForm(el) {
-  if (isFormElement(el))
-    return el.form;
-  else
-    return el.closest("form");
-}
-function isFormElement(el) {
-  return el.matches("textarea, input, select, button");
-}
-function trackFormReset(el, callback) {
-  if (!el)
-    return;
-  const form = getClosestForm(el);
-  form == null ? void 0 : form.addEventListener("reset", callback, { passive: true });
-  return () => {
-    form == null ? void 0 : form.removeEventListener("reset", callback);
-  };
-}
-function trackFieldsetDisabled(el, callback) {
-  const fieldset = el == null ? void 0 : el.closest("fieldset");
-  if (!fieldset)
-    return;
-  callback(fieldset.disabled);
-  return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
-}
 function getElementOffset(element) {
   let left = 0;
   let top = 0;
@@ -176,8 +92,7 @@ var fallback = {
   clientY: 0
 };
 function getEventPoint(event, type = "page") {
-  var _a, _b;
-  const point = isTouchEvent(event) ? (_b = (_a = event.touches[0]) != null ? _a : event.changedTouches[0]) != null ? _b : fallback : event;
+  const point = isTouchEvent(event) ? event.touches[0] ?? event.changedTouches[0] ?? fallback : event;
   return { x: point[`${type}X`], y: point[`${type}Y`] };
 }
 function getPointRelativeToNode(point, element) {
@@ -186,24 +101,6 @@ function getPointRelativeToNode(point, element) {
   const y = point.y - offset.top;
   return { x, y };
 }
-function getDescriptor(el, options) {
-  var _a;
-  const { type, property } = options;
-  const proto = getWindow(el)[type].prototype;
-  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
-}
-function dispatchInputValueEvent(el, value) {
-  var _a;
-  if (!el)
-    return;
-  const win = getWindow(el);
-  if (!(el instanceof win.HTMLInputElement))
-    return;
-  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
-  (_a = desc.set) == null ? void 0 : _a.call(el, value);
-  const event = new win.Event("input", { bubbles: true });
-  el.dispatchEvent(event);
-}
 var rtlKeyMap = {
   ArrowLeft: "ArrowRight",
   ArrowRight: "ArrowLeft",
@@ -220,10 +117,9 @@ var sameKeyMap = {
   Right: "ArrowRight"
 };
 function getEventKey(event, options = {}) {
-  var _a;
   const { dir = "ltr", orientation = "horizontal" } = options;
   let { key } = event;
-  key = (_a = sameKeyMap[key]) != null ? _a : key;
+  key = sameKeyMap[key] ?? key;
   const isRtl = dir === "rtl" && orientation === "horizontal";
   if (isRtl && key in rtlKeyMap) {
     key = rtlKeyMap[key];
@@ -260,8 +156,7 @@ function addDomEvent(target, eventName, handler, options) {
   };
 }
 function addPointerEvent(target, event, listener, options) {
-  var _a;
-  const type = (_a = getEventName(event)) != null ? _a : event;
+  const type = getEventName(event) ?? event;
   return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
 }
 function wrapHandler(fn, filter = false) {
@@ -272,8 +167,7 @@ function wrapHandler(fn, filter = false) {
 }
 function filterPrimaryPointer(fn) {
   return (event) => {
-    var _a;
-    const win = (_a = event.view) != null ? _a : window;
+    const win = event.view ?? window;
     const isMouseEvent2 = event instanceof win.MouseEvent;
     const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
     if (isPrimary)
@@ -328,7 +222,7 @@ var state = "default";
 var savedUserSelect = "";
 var modifiedElementMap = /* @__PURE__ */ new WeakMap();
 function disableTextSelection({ target, doc } = {}) {
-  const _document = doc != null ? doc : document;
+  const _document = doc ?? document;
   if (isIos()) {
     if (state === "default") {
       savedUserSelect = _document.documentElement.style.webkitUserSelect;
@@ -342,7 +236,7 @@ function disableTextSelection({ target, doc } = {}) {
   return () => restoreTextSelection({ target, doc: _document });
 }
 function restoreTextSelection({ target, doc } = {}) {
-  const _document = doc != null ? doc : document;
+  const _document = doc ?? document;
   if (isIos()) {
     if (state !== "disabled")
       return;
@@ -362,7 +256,7 @@ function restoreTextSelection({ target, doc } = {}) {
     if (target && modifiedElementMap.has(target)) {
       let targetOldUserSelect = modifiedElementMap.get(target);
       if (target.style.userSelect === "none") {
-        target.style.userSelect = targetOldUserSelect != null ? targetOldUserSelect : "";
+        target.style.userSelect = targetOldUserSelect ?? "";
       }
       if (target.getAttribute("style") === "") {
         target.removeAttribute("style");
@@ -371,13 +265,13 @@ function restoreTextSelection({ target, doc } = {}) {
     }
   }
 }
-function trackPointerMove(opts) {
-  const { onPointerMove, onPointerUp, ctx } = opts;
-  const { doc = document, threshold = 5 } = ctx;
+var THRESHOLD = 5;
+function trackPointerMove(doc, opts) {
+  const { onPointerMove, onPointerUp } = opts;
   const handlePointerMove = (event, info) => {
     const { point: p } = info;
-    const distance = Math.sqrt(__pow(p.x, 2) + __pow(p.y, 2));
-    if (distance < threshold)
+    const distance = Math.sqrt(p.x ** 2 + p.y ** 2);
+    if (distance < THRESHOLD)
       return;
     if (isMouseEvent(event) && isLeftClick(event)) {
       onPointerUp();
@@ -385,14 +279,81 @@ function trackPointerMove(opts) {
     }
     onPointerMove(info, event);
   };
-  return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
+  return callAll(
+    addPointerEvent(doc, "pointermove", handlePointerMove, false),
+    addPointerEvent(doc, "pointerup", onPointerUp, false),
+    addPointerEvent(doc, "pointercancel", onPointerUp, false),
+    addPointerEvent(doc, "contextmenu", onPointerUp, false),
+    disableTextSelection({ doc })
+  );
+}
+
+// ../../utilities/form-utils/dist/index.mjs
+function getWindow(el) {
+  return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
+}
+function observeAttributes(node, attributes, fn) {
+  if (!node)
+    return;
+  const attrs = Array.isArray(attributes) ? attributes : [attributes];
+  const win = node.ownerDocument.defaultView || window;
+  const obs = new win.MutationObserver((changes) => {
+    for (const change of changes) {
+      if (change.type === "attributes" && change.attributeName && attrs.includes(change.attributeName)) {
+        fn(change);
+      }
+    }
+  });
+  obs.observe(node, { attributes: true, attributeFilter: attrs });
+  return () => obs.disconnect();
+}
+function getDescriptor(el, options) {
+  const { type, property } = options;
+  const proto = getWindow(el)[type].prototype;
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
+}
+function dispatchInputValueEvent(el, value) {
+  var _a;
+  if (!el)
+    return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement))
+    return;
+  const desc = getDescriptor(el, { type: "HTMLInputElement", property: "value" });
+  (_a = desc.set) == null ? void 0 : _a.call(el, value);
+  const event = new win.Event("input", { bubbles: true });
+  el.dispatchEvent(event);
+}
+function getClosestForm(el) {
+  if (isFormElement(el))
+    return el.form;
+  else
+    return el.closest("form");
+}
+function isFormElement(el) {
+  return el.matches("textarea, input, select, button");
+}
+function trackFormReset(el, callback) {
+  if (!el)
+    return;
+  const form = getClosestForm(el);
+  form == null ? void 0 : form.addEventListener("reset", callback, { passive: true });
+  return () => {
+    form == null ? void 0 : form.removeEventListener("reset", callback);
+  };
+}
+function trackFieldsetDisabled(el, callback) {
+  const fieldset = el == null ? void 0 : el.closest("fieldset");
+  if (!fieldset)
+    return;
+  callback(fieldset.disabled);
+  return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
 }
 
 // ../../utilities/number/dist/index.mjs
-var __pow2 = Math.pow;
 function round(v, t) {
   let num = valueOf(v);
-  const p = __pow2(10, t != null ? t : 10);
+  const p = 10 ** (t ?? 10);
   num = Math.round(num * p) / p;
   return t ? num.toFixed(t) : v.toString();
 }
@@ -428,7 +389,7 @@ function valueOf(v) {
 function decimalOperation(a, op, b) {
   let result = op === "+" ? a + b : a - b;
   if (a % 1 !== 0 || b % 1 !== 0) {
-    const multiplier = __pow2(10, Math.max(countDecimals(a), countDecimals(b)));
+    const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
     a = Math.round(a * multiplier);
     b = Math.round(b * multiplier);
     result = op === "+" ? a + b : a - b;
@@ -450,14 +411,12 @@ var transform = (a, b) => {
 
 // src/slider.style.ts
 function getVerticalThumbOffset(ctx) {
-  var _a;
-  const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
+  const { height = 0 } = ctx.thumbSize ?? {};
   const getValue = transform([ctx.min, ctx.max], [-height / 2, height / 2]);
   return parseFloat(getValue(ctx.value).toFixed(2));
 }
 function getHorizontalThumbOffset(ctx) {
-  var _a;
-  const { width = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
+  const { width = 0 } = ctx.thumbSize ?? {};
   if (ctx.isRtl) {
     const getValue2 = transform([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
     return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
@@ -567,45 +526,46 @@ var utils = {
     return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
   },
   decrement(ctx, step) {
-    let value = decrement(ctx.value, step != null ? step : ctx.step);
+    let value = decrement(ctx.value, step ?? ctx.step);
     return utils.convert(ctx, value);
   },
   increment(ctx, step) {
-    let value = increment(ctx.value, step != null ? step : ctx.step);
+    let value = increment(ctx.value, step ?? ctx.step);
     return utils.convert(ctx, value);
   }
 };
 
 // src/slider.dom.ts
-var dom = defineDomHelpers(__spreadProps(__spreadValues({}, styles), {
+var dom = defineDomHelpers({
+  ...styles,
   getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `slider:${ctx.id}`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.root) ?? `slider:${ctx.id}`;
   },
   getThumbId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.thumb) != null ? _b : `slider:${ctx.id}:thumb`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.thumb) ?? `slider:${ctx.id}:thumb`;
   },
   getControlId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.control) != null ? _b : `slider:${ctx.id}:control`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.control) ?? `slider:${ctx.id}:control`;
   },
   getInputId: (ctx) => `slider:${ctx.id}:input`,
   getOutputId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.output) != null ? _b : `slider:${ctx.id}:output`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.output) ?? `slider:${ctx.id}:output`;
   },
   getTrackId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}track`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.track) ?? `slider:${ctx.id}track`;
   },
   getRangeId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.id}:range`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.track) ?? `slider:${ctx.id}:range`;
   },
   getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.id}:label`;
+    var _a;
+    return ((_a = ctx.ids) == null ? void 0 : _a.label) ?? `slider:${ctx.id}:label`;
   },
   getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
@@ -633,7 +593,7 @@ var dom = defineDomHelpers(__spreadProps(__spreadValues({}, styles), {
       return;
     dispatchInputValueEvent(input, ctx.value);
   }
-}));
+});
 
 // src/slider.connect.ts
 function connect(state2, send, normalize) {
@@ -704,7 +664,7 @@ function connect(state2, send, normalize) {
       "data-invalid": dataAttr(isInvalid),
       "aria-disabled": isDisabled || void 0,
       "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy != null ? ariaLabelledBy : dom.getLabelId(state2.context),
+      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state2.context),
       "aria-orientation": state2.context.orientation,
       "aria-valuemax": state2.context.max,
       "aria-valuemin": state2.context.min,
@@ -849,207 +809,210 @@ function connect(state2, send, normalize) {
 
 // src/slider.machine.ts
 import { createMachine } from "@zag-js/core";
+import { trackElementSize } from "@zag-js/element-size";
 function machine(ctx) {
-  return createMachine({
-    id: "slider",
-    initial: "unknown",
-    context: __spreadValues({
-      thumbSize: null,
-      thumbAlignment: "contain",
-      disabled: false,
-      threshold: 5,
-      dir: "ltr",
-      origin: "start",
-      orientation: "horizontal",
-      initialValue: null,
-      value: 0,
-      step: 1,
-      min: 0,
-      max: 100
-    }, ctx),
-    computed: {
-      isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
-      isVertical: (ctx2) => ctx2.orientation === "vertical",
-      isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
-      isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readonly),
-      hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null
-    },
-    watch: {
-      value: ["invokeOnChange", "dispatchChangeEvent"]
-    },
-    activities: ["trackFormReset", "trackFieldsetDisabled"],
-    on: {
-      SET_VALUE: {
-        actions: "setValue"
-      },
-      INCREMENT: {
-        actions: "increment"
+  return createMachine(
+    {
+      id: "slider",
+      initial: "unknown",
+      context: {
+        thumbSize: null,
+        thumbAlignment: "contain",
+        disabled: false,
+        threshold: 5,
+        dir: "ltr",
+        origin: "start",
+        orientation: "horizontal",
+        initialValue: null,
+        value: 0,
+        step: 1,
+        min: 0,
+        max: 100,
+        ...ctx
       },
-      DECREMENT: {
-        actions: "decrement"
-      }
-    },
-    states: {
-      unknown: {
-        on: {
-          SETUP: {
-            target: "idle",
-            actions: ["setThumbSize", "checkValue"]
-          }
-        }
+      computed: {
+        isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
+        isVertical: (ctx2) => ctx2.orientation === "vertical",
+        isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
+        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readonly),
+        hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null
       },
-      idle: {
-        on: {
-          POINTER_DOWN: {
-            target: "dragging",
-            actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
-          },
-          FOCUS: "focus"
-        }
+      watch: {
+        value: ["invokeOnChange", "dispatchChangeEvent"]
       },
-      focus: {
-        entry: "focusThumb",
-        on: {
-          POINTER_DOWN: {
-            target: "dragging",
-            actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
-          },
-          ARROW_LEFT: {
-            guard: "isHorizontal",
-            actions: "decrement"
-          },
-          ARROW_RIGHT: {
-            guard: "isHorizontal",
-            actions: "increment"
-          },
-          ARROW_UP: {
-            guard: "isVertical",
-            actions: "increment"
-          },
-          ARROW_DOWN: {
-            guard: "isVertical",
-            actions: "decrement"
-          },
-          PAGE_UP: {
-            actions: "increment"
-          },
-          PAGE_DOWN: {
-            actions: "decrement"
-          },
-          HOME: {
-            actions: "setToMin"
-          },
-          END: {
-            actions: "setToMax"
-          },
-          BLUR: "idle"
+      activities: ["trackFormReset", "trackFieldsetDisabled", "trackThumbSize"],
+      on: {
+        SET_VALUE: {
+          actions: "setValue"
+        },
+        INCREMENT: {
+          actions: "increment"
+        },
+        DECREMENT: {
+          actions: "decrement"
         }
       },
-      dragging: {
-        entry: "focusThumb",
-        activities: "trackPointerMove",
-        on: {
-          POINTER_UP: {
-            target: "focus",
-            actions: "invokeOnChangeEnd"
-          },
-          POINTER_MOVE: {
-            actions: "setPointerValue"
+      states: {
+        unknown: {
+          on: {
+            SETUP: {
+              target: "idle",
+              actions: ["checkValue"]
+            }
           }
-        }
-      }
-    }
-  }, {
-    guards: {
-      isHorizontal: (ctx2) => ctx2.isHorizontal,
-      isVertical: (ctx2) => ctx2.isVertical
-    },
-    activities: {
-      trackFieldsetDisabled(ctx2) {
-        return trackFieldsetDisabled(dom.getRootEl(ctx2), (disabled) => {
-          if (disabled) {
-            ctx2.disabled = disabled;
+        },
+        idle: {
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+            },
+            FOCUS: "focus"
           }
-        });
-      },
-      trackFormReset(ctx2) {
-        return trackFormReset(dom.getInputEl(ctx2), () => {
-          if (ctx2.initialValue != null) {
-            ctx2.value = ctx2.initialValue;
+        },
+        focus: {
+          entry: "focusThumb",
+          on: {
+            POINTER_DOWN: {
+              target: "dragging",
+              actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
+            },
+            ARROW_LEFT: {
+              guard: "isHorizontal",
+              actions: "decrement"
+            },
+            ARROW_RIGHT: {
+              guard: "isHorizontal",
+              actions: "increment"
+            },
+            ARROW_UP: {
+              guard: "isVertical",
+              actions: "increment"
+            },
+            ARROW_DOWN: {
+              guard: "isVertical",
+              actions: "decrement"
+            },
+            PAGE_UP: {
+              actions: "increment"
+            },
+            PAGE_DOWN: {
+              actions: "decrement"
+            },
+            HOME: {
+              actions: "setToMin"
+            },
+            END: {
+              actions: "setToMax"
+            },
+            BLUR: "idle"
           }
-        });
-      },
-      trackPointerMove(ctx2, _evt, { send }) {
-        return trackPointerMove({
-          ctx: ctx2,
-          onPointerMove(info) {
-            send({ type: "POINTER_MOVE", point: info.point });
-          },
-          onPointerUp() {
-            send("POINTER_UP");
+        },
+        dragging: {
+          entry: "focusThumb",
+          activities: "trackPointerMove",
+          on: {
+            POINTER_UP: {
+              target: "focus",
+              actions: "invokeOnChangeEnd"
+            },
+            POINTER_MOVE: {
+              actions: "setPointerValue"
+            }
           }
-        });
+        }
       }
     },
-    actions: {
-      checkValue(ctx2) {
-        const value = utils.convert(ctx2, ctx2.value);
-        Object.assign(ctx2, { value, initialValue: value });
-      },
-      invokeOnChangeStart(ctx2) {
-        var _a;
-        (_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+    {
+      guards: {
+        isHorizontal: (ctx2) => ctx2.isHorizontal,
+        isVertical: (ctx2) => ctx2.isVertical
       },
-      invokeOnChangeEnd(ctx2) {
-        var _a;
-        (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
-      },
-      invokeOnChange(ctx2) {
-        var _a;
-        (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
-      },
-      dispatchChangeEvent(ctx2) {
-        dom.dispatchChangeEvent(ctx2);
-      },
-      setThumbSize(ctx2) {
-        if (ctx2.thumbAlignment !== "contain")
-          return;
-        raf(() => {
-          const el = dom.getThumbEl(ctx2);
-          if (!el)
+      activities: {
+        trackFieldsetDisabled(ctx2) {
+          return trackFieldsetDisabled(dom.getRootEl(ctx2), (disabled) => {
+            if (disabled) {
+              ctx2.disabled = disabled;
+            }
+          });
+        },
+        trackFormReset(ctx2) {
+          return trackFormReset(dom.getInputEl(ctx2), () => {
+            if (ctx2.initialValue != null) {
+              ctx2.value = ctx2.initialValue;
+            }
+          });
+        },
+        trackPointerMove(ctx2, _evt, { send }) {
+          return trackPointerMove(dom.getDoc(ctx2), {
+            onPointerMove(info) {
+              send({ type: "POINTER_MOVE", point: info.point });
+            },
+            onPointerUp() {
+              send("POINTER_UP");
+            }
+          });
+        },
+        trackThumbSize(ctx2, _evt) {
+          if (ctx2.thumbAlignment !== "contain")
             return;
-          ctx2.thumbSize = { width: el.offsetWidth, height: el.offsetHeight };
-        });
-      },
-      setPointerValue(ctx2, evt) {
-        const value = dom.getValueFromPoint(ctx2, evt.point);
-        if (value == null)
-          return;
-        ctx2.value = utils.clamp(ctx2, value);
+          return trackElementSize(dom.getThumbEl(ctx2), (size) => {
+            if (size)
+              ctx2.thumbSize = size;
+          });
+        }
       },
-      focusThumb(ctx2) {
-        raf(() => {
+      actions: {
+        checkValue(ctx2) {
+          const value = utils.convert(ctx2, ctx2.value);
+          ctx2.value = value;
+          ctx2.initialValue = value;
+        },
+        invokeOnChangeStart(ctx2) {
           var _a;
-          return (_a = dom.getThumbEl(ctx2)) == null ? void 0 : _a.focus();
-        });
-      },
-      decrement(ctx2, evt) {
-        ctx2.value = utils.decrement(ctx2, evt.step);
-      },
-      increment(ctx2, evt) {
-        ctx2.value = utils.increment(ctx2, evt.step);
-      },
-      setToMin(ctx2) {
-        ctx2.value = ctx2.min;
-      },
-      setToMax(ctx2) {
-        ctx2.value = ctx2.max;
-      },
-      setValue(ctx2, evt) {
-        ctx2.value = utils.convert(ctx2, evt.value);
+          (_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+        },
+        invokeOnChangeEnd(ctx2) {
+          var _a;
+          (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+        },
+        invokeOnChange(ctx2) {
+          var _a;
+          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+        },
+        dispatchChangeEvent(ctx2) {
+          dom.dispatchChangeEvent(ctx2);
+        },
+        setPointerValue(ctx2, evt) {
+          const value = dom.getValueFromPoint(ctx2, evt.point);
+          if (value == null)
+            return;
+          ctx2.value = utils.clamp(ctx2, value);
+        },
+        focusThumb(ctx2) {
+          raf(() => {
+            var _a;
+            return (_a = dom.getThumbEl(ctx2)) == null ? void 0 : _a.focus();
+          });
+        },
+        decrement(ctx2, evt) {
+          ctx2.value = utils.decrement(ctx2, evt.step);
+        },
+        increment(ctx2, evt) {
+          ctx2.value = utils.increment(ctx2, evt.step);
+        },
+        setToMin(ctx2) {
+          ctx2.value = ctx2.min;
+        },
+        setToMax(ctx2) {
+          ctx2.value = ctx2.max;
+        },
+        setValue(ctx2, evt) {
+          ctx2.value = utils.convert(ctx2, evt.value);
+        }
       }
     }
-  });
+  );
 }
 export {
   connect,