@zag-js/slider 0.1.11 → 0.1.14

package/dist/index.js

@@ -65,9 +65,6 @@ function getDocument(el) {
     return el;
   return (el == null ? void 0 : el.ownerDocument) ?? document;
 }
-function getWindow(el) {
-  return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
-}
 function defineDomHelpers(helpers) {
   const dom2 = {
     getRootNode: (ctx) => {
@@ -94,46 +91,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;
@@ -172,28 +129,9 @@ function getPointRelativeToNode(point, element) {
   const y = point.y - offset.top;
   return { x, y };
 }
-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);
-}
 var rtlKeyMap = {
   ArrowLeft: "ArrowRight",
-  ArrowRight: "ArrowLeft",
-  Home: "End",
-  End: "Home"
+  ArrowRight: "ArrowLeft"
 };
 var sameKeyMap = {
   Up: "ArrowUp",
@@ -367,7 +305,75 @@ function trackPointerMove(doc, 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
@@ -829,207 +835,210 @@ function connect(state2, send, normalize) {
 
 // src/slider.machine.ts
 var import_core = require("@zag-js/core");
+var import_element_size = require("@zag-js/element-size");
 function machine(ctx) {
-  return (0, import_core.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
-    },
-    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"
+  return (0, import_core.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
       },
-      INCREMENT: {
-        actions: "increment"
+      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
       },
-      DECREMENT: {
-        actions: "decrement"
-      }
-    },
-    states: {
-      unknown: {
-        on: {
-          SETUP: {
-            target: "idle",
-            actions: ["setThumbSize", "checkValue"]
-          }
-        }
+      watch: {
+        value: ["invokeOnChange", "dispatchChangeEvent"]
       },
-      idle: {
-        on: {
-          POINTER_DOWN: {
-            target: "dragging",
-            actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
-          },
-          FOCUS: "focus"
+      activities: ["trackFormReset", "trackFieldsetDisabled", "trackThumbSize"],
+      on: {
+        SET_VALUE: {
+          actions: "setValue"
+        },
+        INCREMENT: {
+          actions: "increment"
+        },
+        DECREMENT: {
+          actions: "decrement"
         }
       },
-      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"
-        }
-      },
-      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(dom.getDoc(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 });
-      },
-      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 });
+    {
+      guards: {
+        isHorizontal: (ctx2) => ctx2.isHorizontal,
+        isVertical: (ctx2) => ctx2.isVertical
       },
-      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 (0, import_element_size.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);
+        }
       }
     }
-  });
+  );
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -37,9 +37,6 @@ function getDocument(el) {
     return el;
   return (el == null ? void 0 : el.ownerDocument) ?? document;
 }
-function getWindow(el) {
-  return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
-}
 function defineDomHelpers(helpers) {
   const dom2 = {
     getRootNode: (ctx) => {
@@ -66,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;
@@ -144,28 +101,9 @@ function getPointRelativeToNode(point, element) {
   const y = point.y - offset.top;
   return { x, y };
 }
-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);
-}
 var rtlKeyMap = {
   ArrowLeft: "ArrowRight",
-  ArrowRight: "ArrowLeft",
-  Home: "End",
-  End: "Home"
+  ArrowRight: "ArrowLeft"
 };
 var sameKeyMap = {
   Up: "ArrowUp",
@@ -339,7 +277,75 @@ function trackPointerMove(doc, 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
@@ -801,207 +807,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: {
-      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"
+  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
       },
-      INCREMENT: {
-        actions: "increment"
+      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
       },
-      DECREMENT: {
-        actions: "decrement"
-      }
-    },
-    states: {
-      unknown: {
-        on: {
-          SETUP: {
-            target: "idle",
-            actions: ["setThumbSize", "checkValue"]
-          }
-        }
+      watch: {
+        value: ["invokeOnChange", "dispatchChangeEvent"]
       },
-      idle: {
-        on: {
-          POINTER_DOWN: {
-            target: "dragging",
-            actions: ["setPointerValue", "invokeOnChangeStart", "focusThumb"]
-          },
-          FOCUS: "focus"
+      activities: ["trackFormReset", "trackFieldsetDisabled", "trackThumbSize"],
+      on: {
+        SET_VALUE: {
+          actions: "setValue"
+        },
+        INCREMENT: {
+          actions: "increment"
+        },
+        DECREMENT: {
+          actions: "decrement"
         }
       },
-      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"
-        }
-      },
-      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(dom.getDoc(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 });
-      },
-      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 });
+    {
+      guards: {
+        isHorizontal: (ctx2) => ctx2.isHorizontal,
+        isVertical: (ctx2) => ctx2.isVertical
       },
-      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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.1.11",
+  "version": "0.1.14",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,13 +29,14 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/core": "0.1.9",
-    "@zag-js/types": "0.2.3"
+    "@zag-js/core": "0.1.10",
+    "@zag-js/element-size": "0.2.1",
+    "@zag-js/types": "0.2.5"
   },
   "devDependencies": {
-    "@zag-js/dom-utils": "0.1.8",
-    "@zag-js/number-utils": "0.1.3",
-    "@zag-js/utils": "0.1.3"
+    "@zag-js/dom-utils": "0.1.11",
+    "@zag-js/form-utils": "0.1.1",
+    "@zag-js/number-utils": "0.1.4"
   },
   "scripts": {
     "build-fast": "tsup src/index.ts --format=esm,cjs",