@zag-js/slider 0.2.9 → 0.2.11

package/dist/index.js

@@ -51,11 +51,11 @@ var dataAttr = (guard) => {
 // ../../utilities/core/src/functions.ts
 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) {
-    fn == null ? void 0 : fn(...a);
+    fn?.(...a);
   });
 };
 
@@ -76,9 +76,8 @@ function compact(obj) {
 // ../../utilities/dom/src/platform.ts
 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?.platform ?? navigator.platform;
 }
 var pt = (v) => isDom() && v.test(getPlatform());
 var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
@@ -91,31 +90,23 @@ function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
+  return 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;
+  return el?.ownerDocument ?? document;
 }
 function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+  return el?.ownerDocument.defaultView ?? window;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
-    getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
+    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
-    },
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
@@ -127,8 +118,7 @@ function defineDomHelpers(helpers) {
 
 // ../../utilities/dom/src/event.ts
 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;
@@ -170,8 +160,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`] };
 }
 
@@ -198,10 +187,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];
@@ -234,14 +222,13 @@ function extractInfo(event, type = "page") {
 }
 function addDomEvent(target, eventName, handler, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
-  node == null ? void 0 : node.addEventListener(eventName, handler, options);
+  node?.addEventListener(eventName, handler, options);
   return () => {
-    node == null ? void 0 : node.removeEventListener(eventName, handler, options);
+    node?.removeEventListener(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) {
@@ -252,8 +239,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)
@@ -329,7 +315,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;
@@ -343,7 +329,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;
@@ -363,7 +349,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");
@@ -402,20 +388,18 @@ var import_numeric_range3 = require("@zag-js/numeric-range");
 
 // ../../utilities/form-utils/src/input-event.ts
 function getDescriptor(el, options) {
-  var _a;
   const { type, property = "value" } = options;
   const proto = getWindow(el)[type].prototype;
-  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+  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);
+  desc.set?.call(el, value);
   const event = new win.Event("input", { bubbles: true });
   el.dispatchEvent(event);
 }
@@ -434,13 +418,13 @@ function trackFormReset(el, callback) {
   if (!el)
     return;
   const form = getClosestForm(el);
-  form == null ? void 0 : form.addEventListener("reset", callback, { passive: true });
+  form?.addEventListener("reset", callback, { passive: true });
   return () => {
-    form == null ? void 0 : form.removeEventListener("reset", callback);
+    form?.removeEventListener("reset", callback);
   };
 }
 function trackFieldsetDisabled(el, callback) {
-  const fieldset = el == null ? void 0 : el.closest("fieldset");
+  const fieldset = el?.closest("fieldset");
   if (!fieldset)
     return;
   callback(fieldset.disabled);
@@ -458,7 +442,7 @@ function trackFormControl(el, options) {
     })
   ];
   return () => {
-    cleanups.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
+    cleanups.forEach((cleanup) => cleanup?.());
   };
 }
 
@@ -468,14 +452,12 @@ var import_numeric_range2 = require("@zag-js/numeric-range");
 // src/slider.style.ts
 var import_numeric_range = require("@zag-js/numeric-range");
 function getVerticalThumbOffset(ctx) {
-  var _a;
-  const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
+  const { height = 0 } = ctx.thumbSize ?? {};
   const getValue = (0, import_numeric_range.getValueTransformer)([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 = (0, import_numeric_range.getValueTransformer)([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
     return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
@@ -582,35 +564,14 @@ var styles = {
 // src/slider.dom.ts
 var dom = defineDomHelpers({
   ...styles,
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `slider:${ctx.id}`;
-  },
-  getThumbId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.thumb) != null ? _b : `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`;
-  },
+  getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
+  getThumbId: (ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
+  getControlId: (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
   getHiddenInputId: (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`;
-  },
-  getTrackId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `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`;
-  },
-  getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.id}:label`;
-  },
+  getOutputId: (ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
+  getTrackId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}track`,
+  getRangeId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:range`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
   getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
@@ -641,16 +602,21 @@ var dom = defineDomHelpers({
 
 // src/slider.connect.ts
 function connect(state2, send, normalize) {
-  var _a, _b;
   const ariaLabel = state2.context["aria-label"];
   const ariaLabelledBy = state2.context["aria-labelledby"];
-  const ariaValueText = (_b = (_a = state2.context).getAriaValueText) == null ? void 0 : _b.call(_a, state2.context.value);
+  const ariaValueText = state2.context.getAriaValueText?.(state2.context.value);
   const isFocused = state2.matches("focus");
   const isDragging = state2.matches("dragging");
   const isDisabled = state2.context.disabled;
   const isInteractive = state2.context.isInteractive;
   const isInvalid = state2.context.invalid;
-  const api = {
+  function getPercentValueFn(percent) {
+    return (0, import_numeric_range3.getPercentValue)(percent, state2.context.min, state2.context.max, state2.context.step);
+  }
+  function getValuePercentFn(value) {
+    return (0, import_numeric_range3.getValuePercent)(value, state2.context.min, state2.context.max);
+  }
+  return {
     isFocused,
     isDragging,
     value: state2.context.value,
@@ -658,15 +624,10 @@ function connect(state2, send, normalize) {
     setValue(value) {
       send({ type: "SET_VALUE", value });
     },
-    getPercentValue(percent) {
-      return (0, import_numeric_range3.getPercentValue)(percent, state2.context.min, state2.context.max, state2.context.step);
-    },
-    getValuePercent(value) {
-      return (0, import_numeric_range3.getValuePercent)(value, state2.context.min, state2.context.max);
-    },
+    getPercentValue: getPercentValueFn,
+    getValuePercent: getValuePercentFn,
     focus() {
-      var _a2;
-      (_a2 = dom.getThumbEl(state2.context)) == null ? void 0 : _a2.focus();
+      dom.getThumbEl(state2.context)?.focus();
     },
     increment() {
       send("INCREMENT");
@@ -692,11 +653,10 @@ function connect(state2, send, normalize) {
       id: dom.getLabelId(state2.context),
       htmlFor: dom.getHiddenInputId(state2.context),
       onClick(event) {
-        var _a2;
         if (!isInteractive)
           return;
         event.preventDefault();
-        (_a2 = dom.getThumbEl(state2.context)) == null ? void 0 : _a2.focus();
+        dom.getThumbEl(state2.context)?.focus();
       },
       style: dom.getLabelStyle()
     }),
@@ -711,7 +671,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,
@@ -838,7 +798,7 @@ function connect(state2, send, normalize) {
       style: dom.getMarkerGroupStyle()
     }),
     getMarkerProps({ value }) {
-      const percent = api.getValuePercent(value);
+      const percent = getValuePercentFn(value);
       const style = dom.getMarkerStyle(state2.context, percent);
       const markerState = value > state2.context.value ? "over-value" : value < state2.context.value ? "under-value" : "at-value";
       return normalize.element({
@@ -853,7 +813,6 @@ function connect(state2, send, normalize) {
       });
     }
   };
-  return api;
 }
 
 // src/slider.machine.ts
@@ -871,7 +830,7 @@ function decrement(ctx, step) {
   const index = 0;
   const values = (0, import_numeric_range4.getPreviousStepValue)(index, {
     ...ctx,
-    step: step != null ? step : ctx.step,
+    step: step ?? ctx.step,
     values: [ctx.value]
   });
   return values[index];
@@ -880,7 +839,7 @@ function increment(ctx, step) {
   const index = 0;
   const values = (0, import_numeric_range4.getNextStepValue)(index, {
     ...ctx,
-    step: step != null ? step : ctx.step,
+    step: step ?? ctx.step,
     values: [ctx.value]
   });
   return values[index];
@@ -892,7 +851,7 @@ function machine(userContext) {
   return (0, import_core.createMachine)(
     {
       id: "slider",
-      initial: "unknown",
+      initial: "idle",
       context: {
         thumbSize: null,
         thumbAlignment: "contain",
@@ -931,15 +890,8 @@ function machine(userContext) {
           actions: "decrement"
         }
       },
+      entry: ["checkValue"],
       states: {
-        unknown: {
-          on: {
-            SETUP: {
-              target: "idle",
-              actions: ["checkValue"]
-            }
-          }
-        },
         idle: {
           on: {
             POINTER_DOWN: {
@@ -1046,16 +998,13 @@ function machine(userContext) {
           ctx2.initialValue = value;
         },
         invokeOnChangeStart(ctx2) {
-          var _a;
-          (_a = ctx2.onChangeStart) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+          ctx2.onChangeStart?.({ value: ctx2.value });
         },
         invokeOnChangeEnd(ctx2) {
-          var _a;
-          (_a = ctx2.onChangeEnd) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+          ctx2.onChangeEnd?.({ value: ctx2.value });
         },
         invokeOnChange(ctx2) {
-          var _a;
-          (_a = ctx2.onChange) == null ? void 0 : _a.call(ctx2, { value: ctx2.value });
+          ctx2.onChange?.({ value: ctx2.value });
         },
         dispatchChangeEvent(ctx2) {
           dom.dispatchChangeEvent(ctx2);
@@ -1067,10 +1016,7 @@ function machine(userContext) {
           ctx2.value = (0, import_numeric_range5.clampValue)(value, ctx2.min, ctx2.max);
         },
         focusThumb(ctx2) {
-          raf(() => {
-            var _a;
-            return (_a = dom.getThumbEl(ctx2)) == null ? void 0 : _a.focus();
-          });
+          raf(() => dom.getThumbEl(ctx2)?.focus());
         },
         decrement(ctx2, evt) {
           ctx2.value = decrement(ctx2, evt.step);

package/dist/index.mjs

@@ -1,18 +1,18 @@
 import {
   connect
-} from "./chunk-WMQQQRK5.mjs";
+} from "./chunk-X363CZYV.mjs";
 import {
   anatomy
 } from "./chunk-3Y7IIPR5.mjs";
 import {
   machine
-} from "./chunk-A2ZK6G4F.mjs";
-import "./chunk-SGCWELVB.mjs";
+} from "./chunk-5XVLG734.mjs";
+import "./chunk-3UP6QL6A.mjs";
 import {
   dom
-} from "./chunk-J5IGGBVE.mjs";
-import "./chunk-YREEXXZP.mjs";
-import "./chunk-DRAPR6JV.mjs";
+} from "./chunk-55KEN77D.mjs";
+import "./chunk-IJAAAKZQ.mjs";
+import "./chunk-YGFSMEUO.mjs";
 export {
   anatomy,
   connect,

package/dist/slider.connect.d.ts

@@ -8,8 +8,8 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
     value: number;
     percent: number;
     setValue(value: number): void;
-    getPercentValue(percent: number): number;
-    getValuePercent(value: number): number;
+    getPercentValue: (percent: number) => number;
+    getValuePercent: (value: number) => number;
     focus(): void;
     increment(): void;
     decrement(): void;

package/dist/slider.connect.js

@@ -39,31 +39,23 @@ function isDocument(el) {
   return el.nodeType === Node.DOCUMENT_NODE;
 }
 function isWindow(value) {
-  return (value == null ? void 0 : value.toString()) === "[object Window]";
+  return 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;
+  return el?.ownerDocument ?? document;
 }
 function getWindow(el) {
-  var _a;
-  return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
+  return el?.ownerDocument.defaultView ?? window;
 }
 function defineDomHelpers(helpers) {
   const dom2 = {
-    getRootNode: (ctx) => {
-      var _a, _b;
-      return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
-    },
+    getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
     getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
-    getWin: (ctx) => {
-      var _a;
-      return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
-    },
+    getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
     getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
     getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
   };
@@ -75,8 +67,7 @@ function defineDomHelpers(helpers) {
 
 // ../../utilities/dom/src/event.ts
 function getNativeEvent(e) {
-  var _a;
-  return (_a = e.nativeEvent) != null ? _a : e;
+  return e.nativeEvent ?? e;
 }
 var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
 var isLeftClick = (v) => v.button === 0;
@@ -114,8 +105,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`] };
 }
 
@@ -142,10 +132,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];
@@ -185,20 +174,18 @@ var parts = anatomy.build();
 
 // ../../utilities/form-utils/src/input-event.ts
 function getDescriptor(el, options) {
-  var _a;
   const { type, property = "value" } = options;
   const proto = getWindow(el)[type].prototype;
-  return (_a = Object.getOwnPropertyDescriptor(proto, property)) != null ? _a : {};
+  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);
+  desc.set?.call(el, value);
   const event = new win.Event("input", { bubbles: true });
   el.dispatchEvent(event);
 }
@@ -209,14 +196,12 @@ var import_numeric_range2 = require("@zag-js/numeric-range");
 // src/slider.style.ts
 var import_numeric_range = require("@zag-js/numeric-range");
 function getVerticalThumbOffset(ctx) {
-  var _a;
-  const { height = 0 } = (_a = ctx.thumbSize) != null ? _a : {};
+  const { height = 0 } = ctx.thumbSize ?? {};
   const getValue = (0, import_numeric_range.getValueTransformer)([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 = (0, import_numeric_range.getValueTransformer)([ctx.max, ctx.min], [-width * 1.5, -width / 2]);
     return -1 * parseFloat(getValue2(ctx.value).toFixed(2));
@@ -323,35 +308,14 @@ var styles = {
 // src/slider.dom.ts
 var dom = defineDomHelpers({
   ...styles,
-  getRootId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.root) != null ? _b : `slider:${ctx.id}`;
-  },
-  getThumbId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.thumb) != null ? _b : `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`;
-  },
+  getRootId: (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`,
+  getThumbId: (ctx) => ctx.ids?.thumb ?? `slider:${ctx.id}:thumb`,
+  getControlId: (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`,
   getHiddenInputId: (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`;
-  },
-  getTrackId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.track) != null ? _b : `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`;
-  },
-  getLabelId: (ctx) => {
-    var _a, _b;
-    return (_b = (_a = ctx.ids) == null ? void 0 : _a.label) != null ? _b : `slider:${ctx.id}:label`;
-  },
+  getOutputId: (ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`,
+  getTrackId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}track`,
+  getRangeId: (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:range`,
+  getLabelId: (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`,
   getMarkerId: (ctx, value) => `slider:${ctx.id}:marker:${value}`,
   getRootEl: (ctx) => dom.getById(ctx, dom.getRootId(ctx)),
   getThumbEl: (ctx) => dom.getById(ctx, dom.getThumbId(ctx)),
@@ -382,16 +346,21 @@ var dom = defineDomHelpers({
 
 // src/slider.connect.ts
 function connect(state, send, normalize) {
-  var _a, _b;
   const ariaLabel = state.context["aria-label"];
   const ariaLabelledBy = state.context["aria-labelledby"];
-  const ariaValueText = (_b = (_a = state.context).getAriaValueText) == null ? void 0 : _b.call(_a, state.context.value);
+  const ariaValueText = state.context.getAriaValueText?.(state.context.value);
   const isFocused = state.matches("focus");
   const isDragging = state.matches("dragging");
   const isDisabled = state.context.disabled;
   const isInteractive = state.context.isInteractive;
   const isInvalid = state.context.invalid;
-  const api = {
+  function getPercentValueFn(percent) {
+    return (0, import_numeric_range3.getPercentValue)(percent, state.context.min, state.context.max, state.context.step);
+  }
+  function getValuePercentFn(value) {
+    return (0, import_numeric_range3.getValuePercent)(value, state.context.min, state.context.max);
+  }
+  return {
     isFocused,
     isDragging,
     value: state.context.value,
@@ -399,15 +368,10 @@ function connect(state, send, normalize) {
     setValue(value) {
       send({ type: "SET_VALUE", value });
     },
-    getPercentValue(percent) {
-      return (0, import_numeric_range3.getPercentValue)(percent, state.context.min, state.context.max, state.context.step);
-    },
-    getValuePercent(value) {
-      return (0, import_numeric_range3.getValuePercent)(value, state.context.min, state.context.max);
-    },
+    getPercentValue: getPercentValueFn,
+    getValuePercent: getValuePercentFn,
     focus() {
-      var _a2;
-      (_a2 = dom.getThumbEl(state.context)) == null ? void 0 : _a2.focus();
+      dom.getThumbEl(state.context)?.focus();
     },
     increment() {
       send("INCREMENT");
@@ -433,11 +397,10 @@ function connect(state, send, normalize) {
       id: dom.getLabelId(state.context),
       htmlFor: dom.getHiddenInputId(state.context),
       onClick(event) {
-        var _a2;
         if (!isInteractive)
           return;
         event.preventDefault();
-        (_a2 = dom.getThumbEl(state.context)) == null ? void 0 : _a2.focus();
+        dom.getThumbEl(state.context)?.focus();
       },
       style: dom.getLabelStyle()
     }),
@@ -452,7 +415,7 @@ function connect(state, send, normalize) {
       "data-invalid": dataAttr(isInvalid),
       "aria-disabled": isDisabled || void 0,
       "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy != null ? ariaLabelledBy : dom.getLabelId(state.context),
+      "aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? dom.getLabelId(state.context),
       "aria-orientation": state.context.orientation,
       "aria-valuemax": state.context.max,
       "aria-valuemin": state.context.min,
@@ -579,7 +542,7 @@ function connect(state, send, normalize) {
       style: dom.getMarkerGroupStyle()
     }),
     getMarkerProps({ value }) {
-      const percent = api.getValuePercent(value);
+      const percent = getValuePercentFn(value);
       const style = dom.getMarkerStyle(state.context, percent);
       const markerState = value > state.context.value ? "over-value" : value < state.context.value ? "under-value" : "at-value";
       return normalize.element({
@@ -594,7 +557,6 @@ function connect(state, send, normalize) {
       });
     }
   };
-  return api;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {