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

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

@@ -79,7 +79,8 @@ declare class AccordionTriggerState {
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-accordion-trigger": "";
         readonly tabindex: 0;
-        readonly onclick: () => void;
+        readonly onpointerdown: (e: PointerEvent) => void;
+        readonly onpointerup: (e: PointerEvent) => void;
         readonly onkeydown: (e: KeyboardEvent) => void;
     };
 }

package/dist/bits/accordion/accordion.svelte.js

@@ -123,12 +123,24 @@ class AccordionTriggerState {
             ref: this.#ref,
         });
     }
-    #onclick = () => {
+    #onpointerdown = (e) => {
         if (this.#isDisabled)
             return;
+        if (e.pointerType === "touch" || e.button !== 0)
+            return e.preventDefault();
         this.#itemState.updateValue();
     };
+    #onpointerup = (e) => {
+        if (this.#isDisabled)
+            return;
+        if (e.pointerType === "touch") {
+            e.preventDefault();
+            this.#itemState.updateValue();
+        }
+    };
     #onkeydown = (e) => {
+        if (this.#isDisabled)
+            return;
         if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
             e.preventDefault();
             this.#itemState.updateValue();
@@ -147,7 +159,8 @@ class AccordionTriggerState {
         [ACCORDION_TRIGGER_ATTR]: "",
         tabindex: 0,
         //
-        onclick: this.#onclick,
+        onpointerdown: this.#onpointerdown,
+        onpointerup: this.#onpointerup,
         onkeydown: this.#onkeydown,
     }));
 }

package/dist/bits/alert-dialog/components/alert-dialog-cancel.svelte

@@ -9,6 +9,7 @@
 		ref = $bindable(null),
 		children,
 		child,
+		disabled = false,
 		...restProps
 	}: AlertDialogCancelProps = $props();
 
@@ -18,6 +19,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		disabled: box.with(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, cancelState.props));

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

@@ -25,17 +25,27 @@ class CheckboxRootState {
         });
     }
     #onkeydown = (e) => {
+        if (this.disabled.current)
+            return;
         if (e.key === kbd.ENTER)
             e.preventDefault();
+        if (e.key === kbd.SPACE) {
+            e.preventDefault();
+            this.#toggle();
+        }
     };
-    #onclick = () => {
-        if (this.disabled.current)
-            return;
+    #toggle = () => {
         if (this.checked.current === "indeterminate") {
             this.checked.current = true;
-            return;
         }
-        this.checked.current = !this.checked.current;
+        else {
+            this.checked.current = !this.checked.current;
+        }
+    };
+    #onclick = () => {
+        if (this.disabled.current)
+            return;
+        this.#toggle();
     };
     props = $derived.by(() => ({
         id: this.#id.current,

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

@@ -64,7 +64,9 @@ declare class CollapsibleTriggerState {
         readonly "data-state": "open" | "closed";
         readonly "data-disabled": "" | undefined;
         readonly "data-collapsible-trigger": "";
-        readonly onclick: () => void;
+        readonly onpointerdown: (e: PointerEvent) => void;
+        readonly onpointerup: (e: PointerEvent) => void;
+        readonly onkeydown: (e: KeyboardEvent) => void;
     };
 }
 export declare function useCollapsibleRoot(props: CollapsibleRootStateProps): CollapsibleRootState;

package/dist/bits/collapsible/collapsible.svelte.js

@@ -1,6 +1,7 @@
 import { afterTick, useRefById } from "svelte-toolbelt";
 import { getAriaExpanded, getDataDisabled, getDataOpenClosed } from "../../internal/attrs.js";
 import { createContext } from "../../internal/create-context.js";
+import { kbd } from "../../internal/kbd.js";
 const COLLAPSIBLE_ROOT_ATTR = "data-collapsible-root";
 const COLLAPSIBLE_CONTENT_ATTR = "data-collapsible-content";
 const COLLAPSIBLE_TRIGGER_ATTR = "data-collapsible-trigger";
@@ -126,9 +127,28 @@ class CollapsibleTriggerState {
             ref: this.#ref,
         });
     }
-    #onclick = () => {
+    #onpointerdown = (e) => {
+        if (this.#isDisabled)
+            return;
+        if (e.pointerType === "touch" || e.button !== 0)
+            return e.preventDefault();
         this.#root.toggleOpen();
     };
+    #onpointerup = (e) => {
+        if (this.#isDisabled)
+            return;
+        if (e.pointerType === "touch") {
+            e.preventDefault();
+            this.#root.toggleOpen();
+        }
+    };
+    #onkeydown = (e) => {
+        if (this.#isDisabled)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            this.#root.toggleOpen();
+        }
+    };
     props = $derived.by(() => ({
         id: this.#id.current,
         type: "button",
@@ -139,7 +159,9 @@ class CollapsibleTriggerState {
         "data-disabled": getDataDisabled(this.#isDisabled),
         [COLLAPSIBLE_TRIGGER_ATTR]: "",
         //
-        onclick: this.#onclick,
+        onpointerdown: this.#onpointerdown,
+        onpointerup: this.#onpointerup,
+        onkeydown: this.#onkeydown,
     }));
 }
 const [setCollapsibleRootContext, getCollapsibleRootContext] = createContext("Collapsible.Root");

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

@@ -153,8 +153,9 @@ declare class CommandItemState {
         readonly "data-selected": "" | undefined;
         readonly "data-command-item": "";
         readonly role: "option";
-        readonly onclick: () => void;
+        readonly onpointerdown: (e: PointerEvent) => void;
         readonly onpointermove: () => void;
+        readonly onpointerup: (e: PointerEvent) => void;
     };
 }
 type CommandLoadingStateProps = WithRefProps<ReadableBoxedValues<{

package/dist/bits/command/command.svelte.js

@@ -696,11 +696,21 @@ class CommandItemState {
             return;
         this.#select();
     };
-    #onclick = () => {
+    #onpointerdown = (e) => {
         if (this.#disabled.current)
             return;
+        if (e.pointerType === "touch" || e.button !== 0)
+            return e.preventDefault();
         this.#onSelect();
     };
+    #onpointerup = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch") {
+            e.preventDefault();
+            this.#onSelect();
+        }
+    };
     props = $derived.by(() => ({
         id: this.id.current,
         "aria-disabled": getAriaDisabled(this.#disabled.current),
@@ -709,8 +719,9 @@ class CommandItemState {
         "data-selected": getDataSelected(this.isSelected),
         [ITEM_ATTR]: "",
         role: "option",
-        onclick: this.#onclick,
+        onpointerdown: this.#onpointerdown,
         onpointermove: this.#onpointermove,
+        onpointerup: this.#onpointerup,
     }));
 }
 class CommandLoadingState {

package/dist/bits/context-menu/components/context-menu-content-static.svelte

@@ -5,8 +5,6 @@
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import { isElement } from "../../../internal/is.js";
-	import type { InteractOutsideEvent } from "../../utilities/dismissible-layer/types.js";
 	import Mounted from "../../utilities/mounted.svelte";
 
 	let {
@@ -36,17 +34,6 @@
 		isMounted: box.with(() => isMounted),
 	});
 
-	function handleInteractOutsideStart(e: InteractOutsideEvent) {
-		if (!isElement(e.target)) return;
-		if (e.target.id === contentState.parentMenu.triggerNode?.id) {
-			e.preventDefault();
-			return;
-		}
-		if (e.target.closest(`#${contentState.parentMenu.triggerNode?.id}`)) {
-			e.preventDefault();
-		}
-	}
-
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
@@ -54,7 +41,6 @@
 	isStatic={true}
 	{...mergedProps}
 	present={contentState.parentMenu.open.current || forceMount}
-	onInteractOutsideStart={handleInteractOutsideStart}
 	{preventScroll}
 	onInteractOutside={(e) => {
 		onInteractOutside(e);

package/dist/bits/context-menu/components/context-menu-content.svelte

@@ -5,8 +5,6 @@
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import { isElement } from "../../../internal/is.js";
-	import type { InteractOutsideEvent } from "../../utilities/dismissible-layer/types.js";
 	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 
@@ -37,17 +35,6 @@
 		isMounted: box.with(() => isMounted),
 	});
 
-	function handleInteractOutsideStart(e: InteractOutsideEvent) {
-		if (!isElement(e.target)) return;
-		if (e.target.id === contentState.parentMenu.triggerNode?.id) {
-			e.preventDefault();
-			return;
-		}
-		if (e.target.closest(`#${contentState.parentMenu.triggerNode?.id}`)) {
-			e.preventDefault();
-		}
-	}
-
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
@@ -58,7 +45,6 @@
 	align="start"
 	present={contentState.parentMenu.open.current || forceMount}
 	{preventScroll}
-	onInteractOutsideStart={handleInteractOutsideStart}
 	onInteractOutside={(e) => {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;

package/dist/bits/dialog/components/dialog-close.svelte

@@ -9,6 +9,7 @@
 		child,
 		id = useId(),
 		ref = $bindable(null),
+		disabled = false,
 		...restProps
 	}: DialogCloseProps = $props();
 
@@ -19,6 +20,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		disabled: box.with(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, closeState.props));

package/dist/bits/dialog/components/dialog-trigger.svelte

@@ -9,6 +9,7 @@
 		ref = $bindable(null),
 		children,
 		child,
+		disabled = false,
 		...restProps
 	}: DialogTriggerProps = $props();
 
@@ -18,6 +19,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		disabled: box.with(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props));

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

@@ -35,7 +35,9 @@ declare class DialogRootState {
         readonly "data-state": "open" | "closed";
     };
 }
-type DialogTriggerStateProps = WithRefProps;
+type DialogTriggerStateProps = WithRefProps & ReadableBoxedValues<{
+    disabled: boolean;
+}>;
 declare class DialogTriggerState {
     #private;
     constructor(props: DialogTriggerStateProps, root: DialogRootState);
@@ -45,11 +47,14 @@ declare class DialogTriggerState {
         readonly "aria-haspopup": "dialog";
         readonly "aria-expanded": "true" | "false";
         readonly "aria-controls": string | undefined;
-        readonly onclick: () => void;
+        readonly onpointerdown: (e: PointerEvent) => void;
+        readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly onpointerup: (e: PointerEvent) => void;
     };
 }
 type DialogCloseStateProps = WithRefProps & ReadableBoxedValues<{
     variant: "action" | "cancel" | "close";
+    disabled: boolean;
 }>;
 declare class DialogCloseState {
     #private;
@@ -57,7 +62,9 @@ declare class DialogCloseState {
     props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
-        readonly onclick: () => void;
+        readonly onpointerdown: (e: PointerEvent) => void;
+        readonly onpointerup: (e: PointerEvent) => void;
+        readonly onkeydown: (e: KeyboardEvent) => void;
     };
 }
 type DialogActionStateProps = WithRefProps;
@@ -120,14 +127,18 @@ declare class DialogOverlayState {
         readonly id: string;
     };
 }
-type AlertDialogCancelStateProps = WithRefProps;
+type AlertDialogCancelStateProps = WithRefProps & ReadableBoxedValues<{
+    disabled: boolean;
+}>;
 declare class AlertDialogCancelState {
     #private;
     constructor(props: AlertDialogCancelStateProps, root: DialogRootState);
     props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
-        readonly onclick: () => void;
+        readonly onpointerdown: (e: PointerEvent) => void;
+        readonly onpointerup: (e: PointerEvent) => void;
+        readonly onkeydown: (e: KeyboardEvent) => void;
     };
 }
 export declare function useDialogRoot(props: DialogRootStateProps): DialogRootState;

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

@@ -1,6 +1,7 @@
 import { useRefById } from "svelte-toolbelt";
 import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
 import { createContext } from "../../internal/create-context.js";
+import { kbd } from "../../internal/kbd.js";
 function createAttrs(variant) {
     return {
         content: `data-${variant}-content`,
@@ -48,10 +49,12 @@ class DialogTriggerState {
     #id;
     #ref;
     #root;
+    #disabled;
     constructor(props, root) {
         this.#id = props.id;
         this.#root = root;
         this.#ref = props.ref;
+        this.#disabled = props.disabled;
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -61,16 +64,43 @@ class DialogTriggerState {
             },
         });
     }
-    #onclick = () => {
+    #onpointerdown = (e) => {
+        if (this.#disabled.current)
+            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();
         this.#root.handleOpen();
     };
+    #onpointerup = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch") {
+            e.preventDefault();
+            this.#root.handleOpen();
+        }
+    };
+    #onkeydown = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.#root.handleOpen();
+        }
+    };
     props = $derived.by(() => ({
         id: this.#id.current,
         "aria-haspopup": "dialog",
         "aria-expanded": getAriaExpanded(this.#root.open.current),
         "aria-controls": this.#root.contentId,
         [this.#root.attrs.trigger]: "",
-        onclick: this.#onclick,
+        onpointerdown: this.#onpointerdown,
+        onkeydown: this.#onkeydown,
+        onpointerup: this.#onpointerup,
         ...this.#root.sharedProps,
     }));
 }
@@ -79,25 +109,51 @@ class DialogCloseState {
     #ref;
     #root;
     #variant;
+    #disabled;
     #attr = $derived.by(() => this.#root.attrs[this.#variant.current]);
     constructor(props, root) {
         this.#root = root;
         this.#ref = props.ref;
         this.#id = props.id;
         this.#variant = props.variant;
+        this.#disabled = props.disabled;
         useRefById({
             id: this.#id,
             ref: this.#ref,
             deps: () => this.#root.open.current,
         });
     }
-    #onclick = () => {
+    #onpointerdown = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch")
+            return e.preventDefault();
+        if (e.button > 0)
+            return;
         this.#root.handleClose();
     };
+    #onpointerup = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch") {
+            e.preventDefault();
+            this.#root.handleClose();
+        }
+    };
+    #onkeydown = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.#root.handleClose();
+        }
+    };
     props = $derived.by(() => ({
         id: this.#id.current,
         [this.#attr]: "",
-        onclick: this.#onclick,
+        onpointerdown: this.#onpointerdown,
+        onpointerup: this.#onpointerup,
+        onkeydown: this.#onkeydown,
         ...this.#root.sharedProps,
     }));
 }
@@ -226,10 +282,12 @@ class AlertDialogCancelState {
     #id;
     #ref;
     #root;
+    #disabled;
     constructor(props, root) {
         this.#id = props.id;
         this.#ref = props.ref;
         this.#root = root;
+        this.#disabled = props.disabled;
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -239,13 +297,37 @@ class AlertDialogCancelState {
             },
         });
     }
-    #onclick = () => {
+    #onpointerdown = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch")
+            return e.preventDefault();
+        if (e.button > 0)
+            return;
         this.#root.handleClose();
     };
+    #onkeydown = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
+            e.preventDefault();
+            this.#root.handleClose();
+        }
+    };
+    #onpointerup = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch") {
+            e.preventDefault();
+            this.#root.handleClose();
+        }
+    };
     props = $derived.by(() => ({
         id: this.#id.current,
         [this.#root.attrs.cancel]: "",
-        onclick: this.#onclick,
+        onpointerdown: this.#onpointerdown,
+        onpointerup: this.#onpointerup,
+        onkeydown: this.#onkeydown,
         ...this.#root.sharedProps,
     }));
 }

package/dist/bits/dropdown-menu/components/dropdown-menu-content-static.svelte

@@ -38,9 +38,6 @@
 	isStatic={true}
 	{...mergedProps}
 	present={contentState.parentMenu.open.current || forceMount}
-	onInteractOutsideStart={(e) => {
-		contentState.handleInteractOutside(e);
-	}}
 	onInteractOutside={(e) => {
 		contentState.handleInteractOutside(e);
 		if (e.defaultPrevented) return;

package/dist/bits/dropdown-menu/components/dropdown-menu-content.svelte

@@ -38,9 +38,6 @@
 <PopperLayer
 	{...mergedProps}
 	present={contentState.parentMenu.open.current || forceMount}
-	onInteractOutsideStart={(e) => {
-		contentState.handleInteractOutside(e);
-	}}
 	onInteractOutside={(e) => {
 		contentState.handleInteractOutside(e);
 		if (e.defaultPrevented) return;

package/dist/bits/menu/components/menu-content-static.svelte

@@ -5,8 +5,6 @@
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import { isElement } from "../../../internal/is.js";
-	import type { InteractOutsideEvent } from "../../utilities/dismissible-layer/types.js";
 	import Mounted from "../../utilities/mounted.svelte";
 
 	let {
@@ -33,20 +31,8 @@
 		isMounted: box.with(() => isMounted),
 	});
 
-	function handleInteractOutsideStart(e: InteractOutsideEvent) {
-		if (!isElement(e.target)) return;
-		if (e.target.id === contentState.parentMenu.triggerNode?.id) {
-			e.preventDefault();
-			return;
-		}
-		if (e.target.closest(`#${contentState.parentMenu.triggerNode?.id}`)) {
-			e.preventDefault();
-		}
-	}
-
 	const mergedProps = $derived(
 		mergeProps(restProps, contentState.props, {
-			onInteractOutsideStart: handleInteractOutsideStart,
 			style: { outline: "none" },
 		})
 	);

package/dist/bits/menu/components/menu-content.svelte

@@ -5,8 +5,6 @@
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
-	import { isElement } from "../../../internal/is.js";
-	import type { InteractOutsideEvent } from "../../utilities/dismissible-layer/types.js";
 	import Mounted from "../../utilities/mounted.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 
@@ -34,20 +32,8 @@
 		isMounted: box.with(() => isMounted),
 	});
 
-	function handleInteractOutsideStart(e: InteractOutsideEvent) {
-		if (!isElement(e.target)) return;
-		if (e.target.id === contentState.parentMenu.triggerNode?.id) {
-			e.preventDefault();
-			return;
-		}
-		if (e.target.closest(`#${contentState.parentMenu.triggerNode?.id}`)) {
-			e.preventDefault();
-		}
-	}
-
 	const mergedProps = $derived(
 		mergeProps(restProps, contentState.props, {
-			onInteractOutsideStart: handleInteractOutsideStart,
 			style: { outline: "none" },
 		})
 	);

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

@@ -1,5 +1,4 @@
 import { IsFocusWithin } from "runed";
-import type { InteractOutsideEvent } from "../utilities/dismissible-layer/types.js";
 import { type GraceIntent } from "./utils.js";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { AnyFn, WithRefProps } from "../../internal/types.js";
@@ -60,7 +59,7 @@ declare class MenuContentState {
     onItemLeave: (e: PointerEvent) => void;
     onTriggerLeave: (e: PointerEvent) => boolean;
     onOpenAutoFocus: (e: Event) => void;
-    handleInteractOutside: (e: InteractOutsideEvent) => void;
+    handleInteractOutside: (e: PointerEvent) => void;
     snippetProps: {
         open: boolean;
     };
@@ -305,6 +304,7 @@ declare class DropdownMenuTriggerState {
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "open" | "closed";
         readonly onpointerdown: (e: PointerEvent) => void;
+        readonly onpointerup: (e: PointerEvent) => void;
         readonly onkeydown: (e: KeyboardEvent) => void;
     };
 }

package/dist/bits/menu/menu.svelte.js

@@ -678,7 +678,11 @@ class DropdownMenuTriggerState {
         });
     }
     #onpointerdown = (e) => {
-        if (!this.#disabled.current && e.button === 0 && e.ctrlKey === false) {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch")
+            return e.preventDefault();
+        if (e.button === 0 && e.ctrlKey === false) {
             this.#parentMenu.toggleOpen();
             // prevent trigger focusing when opening to allow
             // the content to be given focus without competition
@@ -686,6 +690,14 @@ class DropdownMenuTriggerState {
                 e.preventDefault();
         }
     };
+    #onpointerup = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.pointerType === "touch") {
+            e.preventDefault();
+            this.#parentMenu.toggleOpen();
+        }
+    };
     #onkeydown = (e) => {
         if (this.#disabled.current)
             return;
@@ -715,6 +727,7 @@ class DropdownMenuTriggerState {
         [this.#parentMenu.root.getAttr("trigger")]: "",
         //
         onpointerdown: this.#onpointerdown,
+        onpointerup: this.#onpointerup,
         onkeydown: this.#onkeydown,
     }));
 }