@zag-js/slider 0.2.2 → 0.2.3

package/dist/index.d.ts

@@ -25,6 +25,10 @@ declare type PublicContext = DirectionProperty & CommonProperties & {
      * The name associated with the slider (when used in a form)
      */
     name?: string;
+    /**
+     * The associate form of the underlying input element.
+     */
+    form?: string;
     /**
      * Whether the slider is disabled
      */
@@ -32,7 +36,7 @@ declare type PublicContext = DirectionProperty & CommonProperties & {
     /**
      * Whether the slider is read-only
      */
-    readonly?: boolean;
+    readOnly?: boolean;
     /**
      * Whether the slider value is invalid
      */

package/dist/index.js

@@ -405,6 +405,21 @@ function trackFieldsetDisabled(el, callback) {
   callback(fieldset.disabled);
   return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
 }
+function trackFormControl(el, options) {
+  if (!el)
+    return;
+  const { onFieldsetDisabled, onFormReset } = options;
+  const cleanups = [
+    trackFormReset(el, onFormReset),
+    trackFieldsetDisabled(el, (disabled) => {
+      if (disabled)
+        onFieldsetDisabled();
+    })
+  ];
+  return () => {
+    cleanups.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
+  };
+}
 
 // ../../utilities/number/dist/index.mjs
 function round(v, t) {
@@ -791,6 +806,7 @@ function connect(state2, send, normalize) {
       type: "text",
       defaultValue: state2.context.value,
       name: state2.context.name,
+      form: state2.context.form,
       id: dom.getInputId(state2.context),
       hidden: true
     }),
@@ -906,13 +922,13 @@ function machine(userContext) {
         isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
         isVertical: (ctx2) => ctx2.orientation === "vertical",
         isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
-        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readonly),
+        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
         hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null
       },
       watch: {
         value: ["invokeOnChange", "dispatchChangeEvent"]
       },
-      activities: ["trackFormReset", "trackFieldsetDisabled", "trackThumbSize"],
+      activities: ["trackFormControlState", "trackThumbSize"],
       on: {
         SET_VALUE: {
           actions: "setValue"
@@ -1001,17 +1017,15 @@ function machine(userContext) {
         isVertical: (ctx2) => ctx2.isVertical
       },
       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;
+        trackFormControlState(ctx2) {
+          return trackFormControl(dom.getInputEl(ctx2), {
+            onFieldsetDisabled() {
+              ctx2.disabled = true;
+            },
+            onFormReset() {
+              if (ctx2.initialValue != null) {
+                ctx2.value = ctx2.initialValue;
+              }
             }
           });
         },

package/dist/index.mjs

@@ -377,6 +377,21 @@ function trackFieldsetDisabled(el, callback) {
   callback(fieldset.disabled);
   return observeAttributes(fieldset, ["disabled"], () => callback(fieldset.disabled));
 }
+function trackFormControl(el, options) {
+  if (!el)
+    return;
+  const { onFieldsetDisabled, onFormReset } = options;
+  const cleanups = [
+    trackFormReset(el, onFormReset),
+    trackFieldsetDisabled(el, (disabled) => {
+      if (disabled)
+        onFieldsetDisabled();
+    })
+  ];
+  return () => {
+    cleanups.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
+  };
+}
 
 // ../../utilities/number/dist/index.mjs
 function round(v, t) {
@@ -763,6 +778,7 @@ function connect(state2, send, normalize) {
       type: "text",
       defaultValue: state2.context.value,
       name: state2.context.name,
+      form: state2.context.form,
       id: dom.getInputId(state2.context),
       hidden: true
     }),
@@ -878,13 +894,13 @@ function machine(userContext) {
         isHorizontal: (ctx2) => ctx2.orientation === "horizontal",
         isVertical: (ctx2) => ctx2.orientation === "vertical",
         isRtl: (ctx2) => ctx2.orientation === "horizontal" && ctx2.dir === "rtl",
-        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readonly),
+        isInteractive: (ctx2) => !(ctx2.disabled || ctx2.readOnly),
         hasMeasuredThumbSize: (ctx2) => ctx2.thumbSize !== null
       },
       watch: {
         value: ["invokeOnChange", "dispatchChangeEvent"]
       },
-      activities: ["trackFormReset", "trackFieldsetDisabled", "trackThumbSize"],
+      activities: ["trackFormControlState", "trackThumbSize"],
       on: {
         SET_VALUE: {
           actions: "setValue"
@@ -973,17 +989,15 @@ function machine(userContext) {
         isVertical: (ctx2) => ctx2.isVertical
       },
       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;
+        trackFormControlState(ctx2) {
+          return trackFormControl(dom.getInputEl(ctx2), {
+            onFieldsetDisabled() {
+              ctx2.disabled = true;
+            },
+            onFormReset() {
+              if (ctx2.initialValue != null) {
+                ctx2.value = ctx2.initialValue;
+              }
             }
           });
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/slider",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "Core logic for the slider widget implemented as a state machine",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@zag-js/dom-utils": "0.2.1",
-    "@zag-js/form-utils": "0.2.1",
+    "@zag-js/form-utils": "0.2.2",
     "@zag-js/utils": "0.3.1",
     "@zag-js/number-utils": "0.2.0"
   },