@zag-js/slider 1.41.1 → 2.0.0-next.0

package/dist/slider.connect.js

@@ -98,7 +98,7 @@ function connect(service, normalize) {
     },
     getLabelProps() {
       return normalize.label({
-        ...import_slider.parts.label.attrs,
+        ...import_slider.parts.label.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": (0, import_dom_query.dataAttr)(disabled),
         "data-orientation": prop("orientation"),
@@ -120,33 +120,30 @@ function connect(service, normalize) {
     },
     getRootProps() {
       return normalize.element({
-        ...import_slider.parts.root.attrs,
+        ...import_slider.parts.root.attrs(scope.id),
         "data-disabled": (0, import_dom_query.dataAttr)(disabled),
         "data-orientation": prop("orientation"),
         "data-dragging": (0, import_dom_query.dataAttr)(dragging),
         "data-invalid": (0, import_dom_query.dataAttr)(invalid),
         "data-focus": (0, import_dom_query.dataAttr)(focused),
-        id: dom.getRootId(scope),
         dir: prop("dir"),
         style: (0, import_slider2.getRootStyle)(service)
       });
     },
     getValueTextProps() {
       return normalize.element({
-        ...import_slider.parts.valueText.attrs,
+        ...import_slider.parts.valueText.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": (0, import_dom_query.dataAttr)(disabled),
         "data-orientation": prop("orientation"),
         "data-invalid": (0, import_dom_query.dataAttr)(invalid),
-        "data-focus": (0, import_dom_query.dataAttr)(focused),
-        id: dom.getValueTextId(scope)
+        "data-focus": (0, import_dom_query.dataAttr)(focused)
       });
     },
     getTrackProps() {
       return normalize.element({
-        ...import_slider.parts.track.attrs,
+        ...import_slider.parts.track.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getTrackId(scope),
         "data-disabled": (0, import_dom_query.dataAttr)(disabled),
         "data-invalid": (0, import_dom_query.dataAttr)(invalid),
         "data-dragging": (0, import_dom_query.dataAttr)(dragging),
@@ -163,11 +160,10 @@ function connect(service, normalize) {
       const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
       const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy;
       return normalize.element({
-        ...import_slider.parts.thumb.attrs,
+        ...import_slider.parts.thumb.attrs(scope.id),
         dir: prop("dir"),
         "data-index": index,
         "data-name": name,
-        id: dom.getThumbId(scope, index),
         "data-disabled": (0, import_dom_query.dataAttr)(disabled),
         "data-orientation": prop("orientation"),
         "data-focus": (0, import_dom_query.dataAttr)(focused && focusedIndex === index),
@@ -268,8 +264,7 @@ function connect(service, normalize) {
     },
     getRangeProps() {
       return normalize.element({
-        id: dom.getRangeId(scope),
-        ...import_slider.parts.range.attrs,
+        ...import_slider.parts.range.attrs(scope.id),
         dir: prop("dir"),
         "data-dragging": (0, import_dom_query.dataAttr)(dragging),
         "data-focus": (0, import_dom_query.dataAttr)(focused),
@@ -281,9 +276,8 @@ function connect(service, normalize) {
     },
     getControlProps() {
       return normalize.element({
-        ...import_slider.parts.control.attrs,
+        ...import_slider.parts.control.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getControlId(scope),
         "data-dragging": (0, import_dom_query.dataAttr)(dragging),
         "data-disabled": (0, import_dom_query.dataAttr)(disabled),
         "data-orientation": prop("orientation"),
@@ -303,7 +297,7 @@ function connect(service, normalize) {
     },
     getMarkerGroupProps() {
       return normalize.element({
-        ...import_slider.parts.markerGroup.attrs,
+        ...import_slider.parts.markerGroup.attrs(scope.id),
         role: "presentation",
         dir: prop("dir"),
         "aria-hidden": true,
@@ -322,8 +316,7 @@ function connect(service, normalize) {
         markerState = "at-value";
       }
       return normalize.element({
-        ...import_slider.parts.marker.attrs,
-        id: dom.getMarkerId(scope, props.value),
+        ...import_slider.parts.marker.attrs(scope.id),
         role: "presentation",
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
@@ -337,7 +330,7 @@ function connect(service, normalize) {
       const { index = 0 } = props;
       const isDragging = index === focusedIndex && dragging;
       return normalize.element({
-        ...import_slider.parts.draggingIndicator.attrs,
+        ...import_slider.parts.draggingIndicator.attrs(scope.id),
         role: "presentation",
         dir: prop("dir"),
         hidden: !isDragging,

package/dist/slider.connect.mjs

@@ -79,7 +79,7 @@ function connect(service, normalize) {
     },
     getLabelProps() {
       return normalize.label({
-        ...parts.label.attrs,
+        ...parts.label.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
         "data-orientation": prop("orientation"),
@@ -101,33 +101,30 @@ function connect(service, normalize) {
     },
     getRootProps() {
       return normalize.element({
-        ...parts.root.attrs,
+        ...parts.root.attrs(scope.id),
         "data-disabled": dataAttr(disabled),
         "data-orientation": prop("orientation"),
         "data-dragging": dataAttr(dragging),
         "data-invalid": dataAttr(invalid),
         "data-focus": dataAttr(focused),
-        id: dom.getRootId(scope),
         dir: prop("dir"),
         style: getRootStyle(service)
       });
     },
     getValueTextProps() {
       return normalize.element({
-        ...parts.valueText.attrs,
+        ...parts.valueText.attrs(scope.id),
         dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
         "data-orientation": prop("orientation"),
         "data-invalid": dataAttr(invalid),
-        "data-focus": dataAttr(focused),
-        id: dom.getValueTextId(scope)
+        "data-focus": dataAttr(focused)
       });
     },
     getTrackProps() {
       return normalize.element({
-        ...parts.track.attrs,
+        ...parts.track.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getTrackId(scope),
         "data-disabled": dataAttr(disabled),
         "data-invalid": dataAttr(invalid),
         "data-dragging": dataAttr(dragging),
@@ -144,11 +141,10 @@ function connect(service, normalize) {
       const _ariaLabel = Array.isArray(ariaLabel) ? ariaLabel[index] : ariaLabel;
       const _ariaLabelledBy = Array.isArray(ariaLabelledBy) ? ariaLabelledBy[index] : ariaLabelledBy;
       return normalize.element({
-        ...parts.thumb.attrs,
+        ...parts.thumb.attrs(scope.id),
         dir: prop("dir"),
         "data-index": index,
         "data-name": name,
-        id: dom.getThumbId(scope, index),
         "data-disabled": dataAttr(disabled),
         "data-orientation": prop("orientation"),
         "data-focus": dataAttr(focused && focusedIndex === index),
@@ -249,8 +245,7 @@ function connect(service, normalize) {
     },
     getRangeProps() {
       return normalize.element({
-        id: dom.getRangeId(scope),
-        ...parts.range.attrs,
+        ...parts.range.attrs(scope.id),
         dir: prop("dir"),
         "data-dragging": dataAttr(dragging),
         "data-focus": dataAttr(focused),
@@ -262,9 +257,8 @@ function connect(service, normalize) {
     },
     getControlProps() {
       return normalize.element({
-        ...parts.control.attrs,
+        ...parts.control.attrs(scope.id),
         dir: prop("dir"),
-        id: dom.getControlId(scope),
         "data-dragging": dataAttr(dragging),
         "data-disabled": dataAttr(disabled),
         "data-orientation": prop("orientation"),
@@ -284,7 +278,7 @@ function connect(service, normalize) {
     },
     getMarkerGroupProps() {
       return normalize.element({
-        ...parts.markerGroup.attrs,
+        ...parts.markerGroup.attrs(scope.id),
         role: "presentation",
         dir: prop("dir"),
         "aria-hidden": true,
@@ -303,8 +297,7 @@ function connect(service, normalize) {
         markerState = "at-value";
       }
       return normalize.element({
-        ...parts.marker.attrs,
-        id: dom.getMarkerId(scope, props.value),
+        ...parts.marker.attrs(scope.id),
         role: "presentation",
         dir: prop("dir"),
         "data-orientation": prop("orientation"),
@@ -318,7 +311,7 @@ function connect(service, normalize) {
       const { index = 0 } = props;
       const isDragging = index === focusedIndex && dragging;
       return normalize.element({
-        ...parts.draggingIndicator.attrs,
+        ...parts.draggingIndicator.attrs(scope.id),
         role: "presentation",
         dir: prop("dir"),
         hidden: !isDragging,

package/dist/slider.dom.js

@@ -43,22 +43,23 @@ __export(slider_dom_exports, {
 module.exports = __toCommonJS(slider_dom_exports);
 var import_dom_query = require("@zag-js/dom-query");
 var import_utils = require("@zag-js/utils");
-var getRootId = (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`;
-var getThumbId = (ctx, index) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`;
-var getHiddenInputId = (ctx, index) => ctx.ids?.hiddenInput?.(index) ?? `slider:${ctx.id}:input:${index}`;
-var getControlId = (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`;
-var getTrackId = (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`;
-var getRangeId = (ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`;
-var getLabelId = (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`;
-var getValueTextId = (ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:value-text`;
-var getMarkerId = (ctx, value) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`;
-var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
-var getThumbEl = (ctx, index) => ctx.getById(getThumbId(ctx, index));
-var getThumbEls = (ctx) => (0, import_dom_query.queryAll)(getControlEl(ctx), "[role=slider]");
+var import_slider = require("./slider.anatomy.js");
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getThumbId = (ctx, index) => ctx.ids?.thumb?.(index) ?? `${ctx.id}:thumb:${index}`;
+var getHiddenInputId = (ctx, index) => ctx.ids?.hiddenInput?.(index) ?? `${ctx.id}:input:${index}`;
+var getControlId = (ctx) => ctx.ids?.control ?? `${ctx.id}:control`;
+var getTrackId = (ctx) => ctx.ids?.track ?? `${ctx.id}:track`;
+var getRangeId = (ctx) => ctx.ids?.range ?? `${ctx.id}:range`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getValueTextId = (ctx) => ctx.ids?.valueText ?? `${ctx.id}:value-text`;
+var getMarkerId = (ctx, value) => ctx.ids?.marker?.(value) ?? `${ctx.id}:marker:${value}`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(import_slider.parts.root));
+var getThumbEl = (ctx, index) => ctx.query(`${ctx.selector(import_slider.parts.thumb)}[data-index="${index}"]`);
+var getThumbEls = (ctx) => ctx.queryAll(ctx.selector(import_slider.parts.thumb));
 var getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
 var getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
-var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
-var getRangeEl = (ctx) => ctx.getById(getRangeId(ctx));
+var getControlEl = (ctx) => ctx.query(ctx.selector(import_slider.parts.control));
+var getRangeEl = (ctx) => ctx.query(ctx.selector(import_slider.parts.range));
 var getThumbInset = (thumbSize, thumbAlignment, orientation) => {
   const isContain = thumbAlignment === "contain";
   const isVertical = orientation === "vertical";

package/dist/slider.dom.mjs

@@ -1,22 +1,23 @@
 // src/slider.dom.ts
-import { dispatchInputValueEvent, queryAll } from "@zag-js/dom-query";
+import { dispatchInputValueEvent } from "@zag-js/dom-query";
 import { clampPercent, getPercentValue } from "@zag-js/utils";
-var getRootId = (ctx) => ctx.ids?.root ?? `slider:${ctx.id}`;
-var getThumbId = (ctx, index) => ctx.ids?.thumb?.(index) ?? `slider:${ctx.id}:thumb:${index}`;
-var getHiddenInputId = (ctx, index) => ctx.ids?.hiddenInput?.(index) ?? `slider:${ctx.id}:input:${index}`;
-var getControlId = (ctx) => ctx.ids?.control ?? `slider:${ctx.id}:control`;
-var getTrackId = (ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`;
-var getRangeId = (ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`;
-var getLabelId = (ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`;
-var getValueTextId = (ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:value-text`;
-var getMarkerId = (ctx, value) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`;
-var getRootEl = (ctx) => ctx.getById(getRootId(ctx));
-var getThumbEl = (ctx, index) => ctx.getById(getThumbId(ctx, index));
-var getThumbEls = (ctx) => queryAll(getControlEl(ctx), "[role=slider]");
+import { parts } from "./slider.anatomy.mjs";
+var getRootId = (ctx) => ctx.ids?.root ?? `${ctx.id}`;
+var getThumbId = (ctx, index) => ctx.ids?.thumb?.(index) ?? `${ctx.id}:thumb:${index}`;
+var getHiddenInputId = (ctx, index) => ctx.ids?.hiddenInput?.(index) ?? `${ctx.id}:input:${index}`;
+var getControlId = (ctx) => ctx.ids?.control ?? `${ctx.id}:control`;
+var getTrackId = (ctx) => ctx.ids?.track ?? `${ctx.id}:track`;
+var getRangeId = (ctx) => ctx.ids?.range ?? `${ctx.id}:range`;
+var getLabelId = (ctx) => ctx.ids?.label ?? `${ctx.id}:label`;
+var getValueTextId = (ctx) => ctx.ids?.valueText ?? `${ctx.id}:value-text`;
+var getMarkerId = (ctx, value) => ctx.ids?.marker?.(value) ?? `${ctx.id}:marker:${value}`;
+var getRootEl = (ctx) => ctx.query(ctx.selector(parts.root));
+var getThumbEl = (ctx, index) => ctx.query(`${ctx.selector(parts.thumb)}[data-index="${index}"]`);
+var getThumbEls = (ctx) => ctx.queryAll(ctx.selector(parts.thumb));
 var getFirstThumbEl = (ctx) => getThumbEls(ctx)[0];
 var getHiddenInputEl = (ctx, index) => ctx.getById(getHiddenInputId(ctx, index));
-var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
-var getRangeEl = (ctx) => ctx.getById(getRangeId(ctx));
+var getControlEl = (ctx) => ctx.query(ctx.selector(parts.control));
+var getRangeEl = (ctx) => ctx.query(ctx.selector(parts.range));
 var getThumbInset = (thumbSize, thumbAlignment, orientation) => {
   const isContain = thumbAlignment === "contain";
   const isVertical = orientation === "vertical";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "1.41.1",
+  "version": "2.0.0-next.0",
   "description": "Core logic for the slider widget implemented as a state machine",
   "keywords": [
     "js",
@@ -27,11 +27,11 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.41.1",
-    "@zag-js/core": "1.41.1",
-    "@zag-js/dom-query": "1.41.1",
-    "@zag-js/utils": "1.41.1",
-    "@zag-js/types": "1.41.1"
+    "@zag-js/anatomy": "2.0.0-next.0",
+    "@zag-js/core": "2.0.0-next.0",
+    "@zag-js/dom-query": "2.0.0-next.0",
+    "@zag-js/utils": "2.0.0-next.0",
+    "@zag-js/types": "2.0.0-next.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"