bits-ui 1.0.0-next.21 → 1.0.0-next.22

package/dist/bits/checkbox/checkbox.svelte.d.ts

@@ -26,8 +26,7 @@ declare class CheckboxRootState {
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "checked" | "indeterminate" | "unchecked";
         readonly "data-checkbox-root": "";
-        readonly onpointerdown: (e: PointerEvent) => void;
-        readonly onpointerup: (e: PointerEvent) => void;
+        readonly onclick: () => void;
         readonly onkeydown: (e: KeyboardEvent) => void;
     };
 }

package/dist/bits/checkbox/checkbox.svelte.js

@@ -42,21 +42,11 @@ class CheckboxRootState {
             this.checked.current = !this.checked.current;
         }
     };
-    #onpointerdown = (e) => {
+    #onclick = () => {
         if (this.disabled.current)
             return;
-        if (e.pointerType === "touch" || e.button !== 0)
-            return e.preventDefault();
         this.#toggle();
     };
-    #onpointerup = (e) => {
-        if (this.disabled.current)
-            return;
-        if (e.pointerType === "touch") {
-            e.preventDefault();
-            this.#toggle();
-        }
-    };
     props = $derived.by(() => ({
         id: this.#id.current,
         role: "checkbox",
@@ -68,8 +58,7 @@ class CheckboxRootState {
         "data-state": getCheckboxDataState(this.checked.current),
         [CHECKBOX_ROOT_ATTR]: "",
         //
-        onpointerdown: this.#onpointerdown,
-        onpointerup: this.#onpointerup,
+        onclick: this.#onclick,
         onkeydown: this.#onkeydown,
     }));
 }

package/dist/bits/dialog/dialog.svelte.js

@@ -69,6 +69,8 @@ class DialogTriggerState {
             return;
         if (e.pointerType === "touch")
             return e.preventDefault();
+        if (e.button > 0)
+            return;
         // by default, it will attempt to focus this trigger on pointerdown
         // since this also opens the dialog we want to prevent that behavior
         e.preventDefault();
@@ -126,6 +128,8 @@ class DialogCloseState {
             return;
         if (e.pointerType === "touch")
             return e.preventDefault();
+        if (e.button > 0)
+            return;
         this.#root.handleClose();
     };
     #onpointerup = (e) => {
@@ -298,6 +302,8 @@ class AlertDialogCancelState {
             return;
         if (e.pointerType === "touch")
             return e.preventDefault();
+        if (e.button > 0)
+            return;
         this.#root.handleClose();
     };
     #onkeydown = (e) => {

package/dist/bits/switch/switch.svelte.d.ts

@@ -28,8 +28,7 @@ declare class SwitchRootState {
         readonly "aria-checked": "true" | "false" | "mixed";
         readonly "aria-required": "true" | "false";
         readonly "data-switch-root": "";
-        readonly onpointerdown: (e: PointerEvent) => void;
-        readonly onpointerup: (e: PointerEvent) => void;
+        readonly onclick: (e: PointerEvent) => void;
         readonly onkeydown: (e: KeyboardEvent) => void;
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "checked" | "unchecked";

package/dist/bits/switch/switch.svelte.js

@@ -34,19 +34,9 @@ class SwitchRootState {
         e.preventDefault();
         this.#toggle();
     };
-    #onpointerup = (e) => {
+    #onclick = (e) => {
         if (this.disabled.current)
             return;
-        if (e.pointerType === "touch") {
-            e.preventDefault();
-            this.#toggle();
-        }
-    };
-    #onpointerdown = (e) => {
-        if (this.disabled.current)
-            return;
-        if (e.pointerType === "touch")
-            return e.preventDefault();
         this.#toggle();
     };
     sharedProps = $derived.by(() => ({
@@ -63,8 +53,7 @@ class SwitchRootState {
         "aria-required": getAriaRequired(this.required.current),
         [ROOT_ATTR]: "",
         //
-        onpointerdown: this.#onpointerdown,
-        onpointerup: this.#onpointerup,
+        onclick: this.#onclick,
         onkeydown: this.#onkeydown,
     }));
 }

package/dist/bits/toggle/toggle.svelte.d.ts

@@ -15,9 +15,7 @@ declare class ToggleRootState {
         readonly "aria-pressed": "true" | "false";
         readonly "data-state": "off" | "on";
         readonly disabled: true | undefined;
-        readonly onpointerdown: (e: PointerEvent) => void;
-        readonly onpointerup: (e: PointerEvent) => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly onclick: () => void;
     };
 }
 export declare function useToggleRoot(props: ToggleRootStateProps): ToggleRootState;

package/dist/bits/toggle/toggle.svelte.js

@@ -22,27 +22,9 @@ class ToggleRootState {
             this.pressed.current = !this.pressed.current;
         }
     };
-    #onpointerdown = (e) => {
+    #onclick = () => {
         if (this.#disabled.current)
             return;
-        if (e.pointerType === "touch" || e.button !== 0)
-            return e.preventDefault();
-        this.#togglePressed();
-    };
-    #onpointerup = (e) => {
-        if (this.#disabled.current)
-            return;
-        if (e.pointerType === "touch") {
-            e.preventDefault();
-            this.#togglePressed();
-        }
-    };
-    #onkeydown = (e) => {
-        if (this.#disabled.current)
-            return;
-        if (![kbd.ENTER, kbd.SPACE].includes(e.key))
-            return;
-        e.preventDefault();
         this.#togglePressed();
     };
     props = $derived.by(() => ({
@@ -51,9 +33,7 @@ class ToggleRootState {
         "aria-pressed": getAriaPressed(this.pressed.current),
         "data-state": getToggleDataState(this.pressed.current),
         disabled: getDisabled(this.#disabled.current),
-        onpointerdown: this.#onpointerdown,
-        onpointerup: this.#onpointerup,
-        onkeydown: this.#onkeydown,
+        onclick: this.#onclick,
     }));
 }
 //

package/dist/bits/toggle-group/toggle-group.svelte.d.ts

@@ -72,8 +72,7 @@ declare class ToggleGroupItemState {
         readonly "aria-checked": "true" | "false" | "mixed" | undefined;
         readonly disabled: true | undefined;
         readonly "data-toggle-group-item": "";
-        readonly onpointerdown: (e: PointerEvent) => void;
-        readonly onpointerup: (e: PointerEvent) => void;
+        readonly onclick: () => void;
         readonly onkeydown: (e: KeyboardEvent) => void;
     };
 }

package/dist/bits/toggle-group/toggle-group.svelte.js

@@ -104,20 +104,10 @@ class ToggleGroupItemState {
             return;
         this.#root.toggleItem(this.#value.current, this.#id.current);
     };
-    #onpointerdown = (e) => {
+    #onclick = () => {
         if (this.#isDisabled)
             return;
-        if (e.pointerType === "touch" || e.button !== 0)
-            return e.preventDefault();
-        this.toggleItem();
-    };
-    #onpointerup = (e) => {
-        if (this.#isDisabled)
-            return;
-        if (e.pointerType === "touch") {
-            e.preventDefault();
-            this.toggleItem();
-        }
+        this.#root.toggleItem(this.#value.current, this.#id.current);
     };
     #onkeydown = (e) => {
         if (this.#isDisabled)
@@ -154,8 +144,7 @@ class ToggleGroupItemState {
         disabled: getDisabled(this.#isDisabled),
         [ITEM_ATTR]: "",
         //
-        onpointerdown: this.#onpointerdown,
-        onpointerup: this.#onpointerup,
+        onclick: this.#onclick,
         onkeydown: this.#onkeydown,
     }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "1.0.0-next.21",
+  "version": "1.0.0-next.22",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",