@zag-js/slider 0.1.6 → 0.1.9

package/dist/index.mjs

@@ -23,196 +23,47 @@ var __pow = Math.pow;
 var dataAttr = (guard) => {
   return guard ? "" : void 0;
 };
-function nextTick(fn) {
-  const set = /* @__PURE__ */ new Set();
-  function raf2(fn2) {
-    const id = globalThis.requestAnimationFrame(fn2);
-    set.add(() => globalThis.cancelAnimationFrame(id));
-  }
-  raf2(() => raf2(fn));
-  return function cleanup() {
-    set.forEach(function(fn2) {
-      fn2();
-    });
-  };
-}
-function raf(fn) {
-  const id = globalThis.requestAnimationFrame(fn);
-  return function cleanup() {
-    globalThis.cancelAnimationFrame(id);
-  };
-}
-var noop = () => {
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res != null ? res : void 0;
+};
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
 };
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
-var platform = (v) => isDom() && v.test(navigator.platform);
-var isDom = () => !!(typeof window !== "undefined");
-var isMac = () => platform(/^Mac/);
-var isIPhone = () => platform(/^iPhone/);
-var isIPad = () => platform(/^iPad/) || isMac() && navigator.maxTouchPoints > 1;
-var isIos = () => isIPhone() || isIPad();
 var isArray = (v) => Array.isArray(v);
 var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
-var isMouseEvent = (v) => isObject(v) && "button" in v;
-var isLeftClick = (v) => v.button === 0;
-function getListenerElements() {
-  ;
-  globalThis.__listenerElements__ = globalThis.__listenerElements__ || /* @__PURE__ */ new Map();
-  return globalThis.__listenerElements__;
-}
-function getListenerCache() {
-  ;
-  globalThis.__listenerCache__ = globalThis.__listenerCache__ || /* @__PURE__ */ new Map();
-  return globalThis.__listenerCache__;
-}
-function globalEventBus(node, type, handler, options) {
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var isDom = () => typeof window !== "undefined";
+function getPlatform() {
   var _a;
-  if (!node)
-    return noop;
-  const hash = JSON.stringify({ type, options });
-  const listenerElements = getListenerElements();
-  const listenerCache = getListenerCache();
-  const group = listenerElements.get(node);
-  if (!listenerElements.has(node)) {
-    const group2 = /* @__PURE__ */ new Map([[hash, /* @__PURE__ */ new Set([handler])]]);
-    listenerElements.set(node, group2);
-  } else if (group == null ? void 0 : group.has(hash)) {
-    (_a = group == null ? void 0 : group.get(hash)) == null ? void 0 : _a.add(handler);
-  } else {
-    group == null ? void 0 : group.set(hash, /* @__PURE__ */ new Set([handler]));
-  }
-  function attach(node2) {
-    var _a2, _b;
-    function listener(event) {
-      var _a3;
-      const group2 = listenerElements.get(node2);
-      (_a3 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a3.forEach((fn) => fn(event));
-    }
-    if (!(listenerCache == null ? void 0 : listenerCache.has(node2))) {
-      listenerCache.set(node2, /* @__PURE__ */ new Map([[hash, listener]]));
-      node2.addEventListener(type, listener, options);
-      return;
-    }
-    if (!((_a2 = listenerCache == null ? void 0 : listenerCache.get(node2)) == null ? void 0 : _a2.has(hash))) {
-      (_b = listenerCache.get(node2)) == null ? void 0 : _b.set(hash, listener);
-      node2.addEventListener(type, listener, options);
-    }
-  }
-  attach(node);
-  return function remove() {
-    var _a2, _b, _c, _d;
-    if (!listenerElements.has(node))
-      return;
-    const group2 = listenerElements.get(node);
-    (_a2 = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _a2.delete(handler);
-    if (((_b = group2 == null ? void 0 : group2.get(hash)) == null ? void 0 : _b.size) === 0) {
-      const listener = (_c = listenerCache.get(node)) == null ? void 0 : _c.get(hash);
-      node.removeEventListener(type, listener, options);
-      group2 == null ? void 0 : group2.delete(hash);
-      (_d = listenerCache.get(node)) == null ? void 0 : _d.delete(hash);
-      if ((group2 == null ? void 0 : group2.size) === 0) {
-        listenerElements.delete(node);
-        listenerCache.delete(node);
-      }
-    }
-  };
+  const agent = navigator.userAgentData;
+  return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
 }
-var t = (v) => Object.prototype.toString.call(v).slice(8, -1);
-var isRef = (v) => t(v) === "Object" && "current" in v;
-var runIfFn = (fn) => t(fn) === "Function" ? fn() : fn;
-var isTouchEvent = (v) => t(v) === "Object" && !!v.touches;
-var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
-function extractInfo(event, type = "page") {
-  const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
-  return {
-    point: {
-      x: point[`${type}X`],
-      y: point[`${type}Y`]
-    }
-  };
-}
-function addDomEvent(target, event, listener, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  return globalEventBus(node, event, listener, options);
-}
-function addPointerEvent(target, event, listener, options) {
-  var _a;
-  const type = (_a = getEventName(event)) != null ? _a : event;
-  return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
-}
-function wrapHandler(fn, filter = false) {
-  const listener = (event) => {
-    fn(event, extractInfo(event));
-  };
-  return filter ? filterPrimaryPointer(listener) : listener;
-}
-function filterPrimaryPointer(fn) {
-  return (event) => {
-    var _a;
-    const win = (_a = event.view) != null ? _a : window;
-    const isMouseEvent2 = event instanceof win.MouseEvent;
-    const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
-    if (isPrimary)
-      fn(event);
-  };
-}
-var supportsPointerEvent = () => typeof window !== "undefined" && window.onpointerdown === null;
-var supportsTouchEvent = () => typeof window !== "undefined" && window.ontouchstart === null;
-var supportsMouseEvent = () => typeof window !== "undefined" && window.onmousedown === null;
-var mouseEventNames = {
-  pointerdown: "mousedown",
-  pointermove: "mousemove",
-  pointerup: "mouseup",
-  pointercancel: "mousecancel",
-  pointerover: "mouseover",
-  pointerout: "mouseout",
-  pointerenter: "mouseenter",
-  pointerleave: "mouseleave"
-};
-var touchEventNames = {
-  pointerdown: "touchstart",
-  pointermove: "touchmove",
-  pointerup: "touchend",
-  pointercancel: "touchcancel"
-};
-function getEventName(evt) {
-  if (supportsPointerEvent())
-    return evt;
-  if (supportsTouchEvent())
-    return touchEventNames[evt];
-  if (supportsMouseEvent())
-    return mouseEventNames[evt];
-  return evt;
-}
-function getOwnerWindow(el) {
+var pt = (v) => isDom() && v.test(getPlatform());
+var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
+var isMac = () => pt(/^Mac/) && !isTouchDevice;
+var isApple = () => pt(/mac|iphone|ipad|ipod/i);
+var isIos = () => isApple() && !isMac();
+function getWindow(el) {
   var _a;
   return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
 }
-function getDescriptor(el, options) {
-  var _a;
-  const { type, property } = options;
-  const win = getOwnerWindow(el);
-  const _type = type === "input" ? "HTMLInputElement" : "HTMLTextAreaElement";
-  const proto = win[_type].prototype;
-  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
-}
-function dispatchInputValueEvent(el, value) {
-  var _a;
-  const win = getOwnerWindow(el);
-  if (!(el instanceof win.HTMLInputElement))
-    return;
-  const desc = getDescriptor(el, { type: "input", property: "value" });
-  (_a = desc.set) == null ? void 0 : _a.call(el, value);
-  const event = new win.Event("input", { bubbles: true });
-  el.dispatchEvent(event);
-}
-function getNativeEvent(event) {
+function getNativeEvent(e) {
   var _a;
-  return (_a = event.nativeEvent) != null ? _a : event;
+  return (_a = e.nativeEvent) != null ? _a : e;
 }
+var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
+var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
+var supportsMouseEvent = () => isDom() && window.onmousedown === null;
+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 noop;
+    return;
   const attrs = Array.isArray(attributes) ? attributes : [attributes];
   const win = node.ownerDocument.defaultView || window;
   const obs = new win.MutationObserver((changes) => {
@@ -250,6 +101,61 @@ function trackFieldsetDisabled(el, callback) {
   callback(fieldset.disabled);
   return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
 }
+function getElementOffset(element) {
+  let left = 0;
+  let top = 0;
+  let el = element;
+  if (el.parentNode) {
+    do {
+      left += el.offsetLeft;
+      top += el.offsetTop;
+    } while ((el = el.offsetParent) && el.nodeType < 9);
+    el = element;
+    do {
+      left -= el.scrollLeft;
+      top -= el.scrollTop;
+    } while ((el = el.parentNode) && !/body/i.test(el.nodeName));
+  }
+  return {
+    top,
+    right: innerWidth - left - element.offsetWidth,
+    bottom: innerHeight - top - element.offsetHeight,
+    left
+  };
+}
+var fallback = {
+  pageX: 0,
+  pageY: 0,
+  clientX: 0,
+  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;
+  return { x: point[`${type}X`], y: point[`${type}Y`] };
+}
+function getPointRelativeToNode(point, element) {
+  const offset = getElementOffset(element);
+  const x = point.x - offset.left;
+  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;
+  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",
@@ -287,29 +193,88 @@ function getEventStep(event) {
     return isSkipKey ? 10 : 1;
   }
 }
-function itemById(v, id) {
-  return v.find((node) => node.id === id);
+var isRef = (v) => hasProp(v, "current");
+var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
+function extractInfo(event, type = "page") {
+  const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback2 : event;
+  return {
+    point: {
+      x: point[`${type}X`],
+      y: point[`${type}Y`]
+    }
+  };
 }
-function indexOfId(v, id) {
-  const item = itemById(v, id);
-  return item ? v.indexOf(item) : -1;
+function addDomEvent(target, eventName, handler, options) {
+  const node = isRef(target) ? target.current : runIfFn(target);
+  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  return () => {
+    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+  };
 }
-var getValueText = (item) => {
-  var _a, _b;
-  return (_b = (_a = item.dataset.valuetext) != null ? _a : item.textContent) != null ? _b : "";
+function addPointerEvent(target, event, listener, options) {
+  var _a;
+  const type = (_a = getEventName(event)) != null ? _a : event;
+  return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
+}
+function wrapHandler(fn, filter = false) {
+  const listener = (event) => {
+    fn(event, extractInfo(event));
+  };
+  return filter ? filterPrimaryPointer(listener) : listener;
+}
+function filterPrimaryPointer(fn) {
+  return (event) => {
+    var _a;
+    const win = (_a = event.view) != null ? _a : window;
+    const isMouseEvent2 = event instanceof win.MouseEvent;
+    const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
+    if (isPrimary)
+      fn(event);
+  };
+}
+var mouseEventNames = {
+  pointerdown: "mousedown",
+  pointermove: "mousemove",
+  pointerup: "mouseup",
+  pointercancel: "mousecancel",
+  pointerover: "mouseover",
+  pointerout: "mouseout",
+  pointerenter: "mouseenter",
+  pointerleave: "mouseleave"
 };
-var match = (valueText, query2) => valueText.toLowerCase().startsWith(query2.toLowerCase());
-var wrap = (v, idx) => {
-  return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
+var touchEventNames = {
+  pointerdown: "touchstart",
+  pointermove: "touchmove",
+  pointerup: "touchend",
+  pointercancel: "touchcancel"
 };
-function findByText(v, text, currentId) {
-  const index = currentId ? indexOfId(v, currentId) : -1;
-  let items = currentId ? wrap(v, index) : v;
-  const isSingleKey = text.length === 1;
-  if (isSingleKey) {
-    items = items.filter((item) => item.id !== currentId);
+function getEventName(evt) {
+  if (supportsPointerEvent())
+    return evt;
+  if (supportsTouchEvent())
+    return touchEventNames[evt];
+  if (supportsMouseEvent())
+    return mouseEventNames[evt];
+  return evt;
+}
+function nextTick(fn) {
+  const set = /* @__PURE__ */ new Set();
+  function raf2(fn2) {
+    const id = globalThis.requestAnimationFrame(fn2);
+    set.add(() => globalThis.cancelAnimationFrame(id));
   }
-  return items.find((item) => match(getValueText(item), text));
+  raf2(() => raf2(fn));
+  return function cleanup() {
+    set.forEach(function(fn2) {
+      fn2();
+    });
+  };
+}
+function raf(fn) {
+  const id = globalThis.requestAnimationFrame(fn);
+  return function cleanup() {
+    globalThis.cancelAnimationFrame(id);
+  };
 }
 var state = "default";
 var savedUserSelect = "";
@@ -372,44 +337,16 @@ function trackPointerMove(opts) {
     }
     onPointerMove(info, event);
   };
-  return pipe(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
-}
-function findByTypeahead(_items, options) {
-  const { state: state2, activeId, key, timeout = 350 } = options;
-  const search = state2.keysSoFar + key;
-  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
-  const query2 = isRepeated ? search[0] : search;
-  let items = _items.slice();
-  const next = findByText(items, query2, activeId);
-  function cleanup() {
-    clearTimeout(state2.timer);
-    state2.timer = -1;
-  }
-  function update(value) {
-    state2.keysSoFar = value;
-    cleanup();
-    if (value !== "") {
-      state2.timer = +setTimeout(() => {
-        update("");
-        cleanup();
-      }, timeout);
-    }
-  }
-  update(search);
-  return next;
+  return callAll(addPointerEvent(doc, "pointermove", handlePointerMove, false), addPointerEvent(doc, "pointerup", onPointerUp, false), addPointerEvent(doc, "pointercancel", onPointerUp, false), addPointerEvent(doc, "contextmenu", onPointerUp, false), disableTextSelection({ doc }));
 }
-findByTypeahead.defaultOptions = {
-  keysSoFar: "",
-  timer: -1
-};
 
 // ../../utilities/number/dist/index.mjs
 var __pow2 = Math.pow;
-function round(v, t2) {
+function round(v, t) {
   let num = valueOf(v);
-  const p = __pow2(10, t2 != null ? t2 : 10);
+  const p = __pow2(10, t != null ? t : 10);
   num = Math.round(num * p) / p;
-  return t2 ? num.toFixed(t2) : v.toString();
+  return t ? num.toFixed(t) : v.toString();
 }
 var valueToPercent = (v, r) => (valueOf(v) - r.min) * 100 / (r.max - r.min);
 var percentToValue = (v, r) => r.min + (r.max - r.min) * valueOf(v);
@@ -463,47 +400,7 @@ var transform = (a, b) => {
   };
 };
 
-// ../../utilities/rect/dist/index.mjs
-var isArray2 = (v) => Array.isArray(v);
-var isObject2 = (v) => !(v == null || typeof v !== "object" || isArray2(v));
-var isTouchEvent2 = (v) => isObject2(v) && "touches" in v;
-var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
-function getEventPoint(e, t2 = "page") {
-  const p = isTouchEvent2(e) ? e.touches[0] || e.changedTouches[0] || fallback2 : e;
-  return { x: p[`${t2}X`], y: p[`${t2}Y`] };
-}
-function relativeToNode(p, el) {
-  const dx = p.x - el.offsetLeft - el.clientLeft + el.scrollLeft;
-  const dy = p.y - el.offsetTop - el.clientTop + el.scrollTop;
-  return {
-    point: { x: dx, y: dy },
-    progress: { x: dx / el.offsetWidth, y: dy / el.offsetHeight }
-  };
-}
-
-// src/slider.utils.ts
-var utils = {
-  fromPercent(ctx, percent) {
-    percent = clamp(percent, { min: 0, max: 1 });
-    return parseFloat(snapToStep(percentToValue(percent, ctx), ctx.step));
-  },
-  clamp(ctx, value) {
-    return clamp(value, ctx);
-  },
-  convert(ctx, value) {
-    return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
-  },
-  decrement(ctx, step) {
-    let value = decrement(ctx.value, step != null ? step : ctx.step);
-    return utils.convert(ctx, value);
-  },
-  increment(ctx, step) {
-    let value = increment(ctx.value, step != null ? step : ctx.step);
-    return utils.convert(ctx, value);
-  }
-};
-
-// src/slider.dom.ts
+// src/slider.style.ts
 function getVerticalThumbOffset(ctx) {
   var _a;
   const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
@@ -520,54 +417,119 @@ function getHorizontalThumbOffset(ctx) {
   const getValue = transform([ctx.min, ctx.max], [-width / 2, width / 2]);
   return parseFloat(getValue(ctx.value).toFixed(2));
 }
-function getThumbStyle(ctx) {
+function getThumbOffset(ctx) {
   const percent = valueToPercent(ctx.value, ctx);
+  if (ctx.thumbAlignment === "center")
+    return `${percent}%`;
   const offset = ctx.isVertical ? getVerticalThumbOffset(ctx) : getHorizontalThumbOffset(ctx);
-  const style = {
+  return `calc(${percent}% - ${offset}px)`;
+}
+function getThumbStyle(ctx) {
+  const placementProp = ctx.isVertical ? "bottom" : ctx.isRtl ? "right" : "left";
+  return {
     visibility: ctx.hasMeasuredThumbSize ? "visible" : "hidden",
     position: "absolute",
     transform: "var(--slider-thumb-transform)",
-    "--slider-thumb-placement": `calc(${percent}% - ${offset}px)`
+    [placementProp]: "var(--slider-thumb-offset)"
   };
-  if (ctx.isVertical) {
-    style.bottom = "var(--slider-thumb-placement)";
-  } else {
-    style[ctx.isRtl ? "right" : "left"] = "var(--slider-thumb-placement)";
-  }
-  return style;
 }
-function getRangeStyle(ctx) {
+function getRangeOffsets(ctx) {
   const percent = valueToPercent(ctx.value, ctx);
-  const style = {
-    position: "absolute"
-  };
-  let startValue = "0%";
-  let endValue = `${100 - percent}%`;
+  let start = "0%";
+  let end = `${100 - percent}%`;
   if (ctx.origin === "center") {
     const isNegative = percent < 50;
-    startValue = isNegative ? `${percent}%` : "50%";
-    endValue = isNegative ? "50%" : endValue;
+    start = isNegative ? `${percent}%` : "50%";
+    end = isNegative ? "50%" : end;
   }
+  return { start, end };
+}
+function getRangeStyle(ctx) {
   if (ctx.isVertical) {
-    return __spreadProps(__spreadValues({}, style), {
-      bottom: startValue,
-      top: endValue
-    });
+    return {
+      position: "absolute",
+      bottom: "var(--slider-range-start)",
+      top: "var(--slider-range-end)"
+    };
   }
-  return __spreadProps(__spreadValues({}, style), {
-    [ctx.isRtl ? "right" : "left"]: startValue,
-    [ctx.isRtl ? "left" : "right"]: endValue
-  });
+  return {
+    position: "absolute",
+    [ctx.isRtl ? "right" : "left"]: "var(--slider-range-start)",
+    [ctx.isRtl ? "left" : "right"]: "var(--slider-range-end)"
+  };
 }
-function getControlStyle(ctx) {
+function getControlStyle() {
   return {
     touchAction: "none",
     userSelect: "none",
+    position: "relative"
+  };
+}
+function getRootStyle(ctx) {
+  const range = getRangeOffsets(ctx);
+  return {
     "--slider-thumb-transform": ctx.isVertical ? "translateY(50%)" : "translateX(-50%)",
+    "--slider-thumb-offset": getThumbOffset(ctx),
+    "--slider-range-start": range.start,
+    "--slider-range-end": range.end
+  };
+}
+function getMarkerStyle(ctx, percent) {
+  return {
+    position: "absolute",
+    pointerEvents: "none",
+    [ctx.isHorizontal ? "left" : "bottom"]: `${ctx.isRtl ? 100 - percent : percent}%`
+  };
+}
+function getLabelStyle() {
+  return { userSelect: "none" };
+}
+function getTrackStyle() {
+  return { position: "relative" };
+}
+function getMarkerGroupStyle() {
+  return {
+    userSelect: "none",
+    pointerEvents: "none",
     position: "relative"
   };
 }
-var dom = {
+var styles = {
+  getThumbOffset,
+  getControlStyle,
+  getThumbStyle,
+  getRangeStyle,
+  getRootStyle,
+  getMarkerStyle,
+  getLabelStyle,
+  getTrackStyle,
+  getMarkerGroupStyle
+};
+
+// src/slider.utils.ts
+var utils = {
+  fromPercent(ctx, percent) {
+    percent = clamp(percent, { min: 0, max: 1 });
+    return parseFloat(snapToStep(percentToValue(percent, ctx), ctx.step));
+  },
+  clamp(ctx, value) {
+    return clamp(value, ctx);
+  },
+  convert(ctx, value) {
+    return clamp(parseFloat(snapToStep(value, ctx.step)), ctx);
+  },
+  decrement(ctx, step) {
+    let value = decrement(ctx.value, step != null ? step : ctx.step);
+    return utils.convert(ctx, value);
+  },
+  increment(ctx, step) {
+    let value = increment(ctx.value, step != null ? step : ctx.step);
+    return utils.convert(ctx, value);
+  }
+};
+
+// src/slider.dom.ts
+var dom = __spreadProps(__spreadValues({}, styles), {
   getDoc: (ctx) => {
     var _a;
     return (_a = ctx.doc) != null ? _a : document;
@@ -595,7 +557,7 @@ var dom = {
   },
   getTrackId: (ctx) => {
     var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:-${ctx.uid}track`;
+    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `slider:${ctx.uid}track`;
   },
   getRangeId: (ctx) => {
     var _a, _b;
@@ -610,19 +572,18 @@ var dom = {
   getThumbEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getThumbId(ctx)),
   getControlEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getControlId(ctx)),
   getInputEl: (ctx) => dom.getRootNode(ctx).getElementById(dom.getInputId(ctx)),
-  getControlStyle,
-  getThumbStyle,
-  getRangeStyle,
   getValueFromPoint(ctx, point) {
-    const control = dom.getControlEl(ctx);
-    if (!control)
+    const el = dom.getControlEl(ctx);
+    if (!el)
       return;
-    const { progress } = relativeToNode(point, control);
+    const relativePoint = getPointRelativeToNode(point, el);
+    const percentX = relativePoint.x / el.offsetWidth;
+    const percentY = relativePoint.y / el.offsetHeight;
     let percent;
     if (ctx.isHorizontal) {
-      percent = ctx.isRtl ? 1 - progress.x : progress.x;
+      percent = ctx.isRtl ? 1 - percentX : percentX;
     } else {
-      percent = 1 - progress.y;
+      percent = 1 - percentY;
     }
     return utils.fromPercent(ctx, percent);
   },
@@ -631,38 +592,11 @@ var dom = {
     if (!input)
       return;
     dispatchInputValueEvent(input, ctx.value);
-  },
-  getMarkerStyle(ctx, percent) {
-    const style = {
-      position: "absolute",
-      pointerEvents: "none"
-    };
-    if (ctx.isHorizontal) {
-      percent = ctx.isRtl ? 100 - percent : percent;
-      style.left = `${percent}%`;
-    } else {
-      style.bottom = `${percent}%`;
-    }
-    return style;
   }
-};
-
-// ../../types/dist/index.mjs
-function createNormalizer(fn) {
-  return new Proxy({}, {
-    get() {
-      return fn;
-    }
-  });
-}
-var normalizeProp = createNormalizer((v) => v);
-
-// ../../utilities/core/dist/index.mjs
-var isLeftClick2 = (v) => v.button === 0;
-var isModifiedEvent = (v) => v.ctrlKey || v.altKey || v.metaKey;
+});
 
 // src/slider.connect.ts
-function connect(state2, send, normalize = normalizeProp) {
+function connect(state2, send, normalize) {
   var _a, _b;
   const ariaLabel = state2.context["aria-label"];
   const ariaLabelledBy = state2.context["aria-labelledby"];
@@ -696,14 +630,18 @@ function connect(state2, send, normalize = normalizeProp) {
     rootProps: normalize.element({
       "data-part": "root",
       "data-disabled": dataAttr(isDisabled),
+      "data-focus": dataAttr(isFocused),
       "data-orientation": state2.context.orientation,
+      "data-invalid": dataAttr(isInvalid),
       id: dom.getRootId(state2.context),
-      dir: state2.context.dir
+      dir: state2.context.dir,
+      style: dom.getRootStyle(state2.context)
     }),
     labelProps: normalize.label({
       "data-part": "label",
       "data-disabled": dataAttr(isDisabled),
       "data-invalid": dataAttr(isInvalid),
+      "data-focus": dataAttr(isFocused),
       id: dom.getLabelId(state2.context),
       htmlFor: dom.getInputId(state2.context),
       onClick(event) {
@@ -713,9 +651,7 @@ function connect(state2, send, normalize = normalizeProp) {
         event.preventDefault();
         (_a2 = dom.getThumbEl(state2.context)) == null ? void 0 : _a2.focus();
       },
-      style: {
-        userSelect: "none"
-      }
+      style: dom.getLabelStyle()
     }),
     thumbProps: normalize.element({
       "data-part": "thumb",
@@ -812,14 +748,15 @@ function connect(state2, send, normalize = normalizeProp) {
       "data-part": "track",
       id: dom.getTrackId(state2.context),
       "data-disabled": dataAttr(isDisabled),
+      "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
       "data-orientation": state2.context.orientation,
-      "data-focus": dataAttr(isFocused),
-      style: { position: "relative" }
+      style: dom.getTrackStyle()
     }),
     rangeProps: normalize.element({
       "data-part": "range",
       id: dom.getRangeId(state2.context),
+      "data-focus": dataAttr(isFocused),
       "data-invalid": dataAttr(isInvalid),
       "data-disabled": dataAttr(isDisabled),
       "data-orientation": state2.context.orientation,
@@ -836,25 +773,21 @@ function connect(state2, send, normalize = normalizeProp) {
         if (!isInteractive)
           return;
         const evt = getNativeEvent(event);
-        if (!isLeftClick2(evt) || isModifiedEvent(evt))
+        if (!isLeftClick(evt) || isModifiedEvent(evt))
           return;
         const point = getEventPoint(evt);
         send({ type: "POINTER_DOWN", point });
         event.preventDefault();
         event.stopPropagation();
       },
-      style: dom.getControlStyle(state2.context)
+      style: dom.getControlStyle()
     }),
     markerGroupProps: normalize.element({
       "data-part": "marker-group",
       role: "presentation",
       "aria-hidden": true,
       "data-orientation": state2.context.orientation,
-      style: {
-        userSelect: "none",
-        pointerEvents: "none",
-        position: "relative"
-      }
+      style: dom.getMarkerGroupStyle()
     }),
     getMarkerProps({ value }) {
       const percent = valueToPercent(value, state2.context);
@@ -862,6 +795,7 @@ function connect(state2, send, normalize = normalizeProp) {
       const markerState = value > state2.context.value ? "over-value" : value < state2.context.value ? "under-value" : "at-value";
       return normalize.element({
         "data-part": "marker",
+        role: "presentation",
         "data-orientation": state2.context.orientation,
         id: dom.getMarkerId(state2.context, value),
         "data-value": value,
@@ -881,6 +815,7 @@ function machine(ctx = {}) {
     initial: "unknown",
     context: __spreadValues({
       thumbSize: null,
+      thumbAlignment: "contain",
       uid: "",
       disabled: false,
       threshold: 5,
@@ -995,7 +930,7 @@ function machine(ctx = {}) {
         let cleanup;
         nextTick(() => {
           cleanup = trackFieldsetDisabled(dom.getRootEl(ctx2), (disabled) => {
-            if (disabled != ctx2.disabled) {
+            if (disabled) {
               ctx2.disabled = disabled;
             }
           });
@@ -1053,6 +988,8 @@ function machine(ctx = {}) {
         dom.dispatchChangeEvent(ctx2);
       },
       setThumbSize(ctx2) {
+        if (ctx2.thumbAlignment !== "contain")
+          return;
         raf(() => {
           const el = dom.getThumbEl(ctx2);
           if (!el)
@@ -1095,4 +1032,3 @@ export {
   machine,
   dom as unstable__dom
 };
-//# sourceMappingURL=index.mjs.map