bits-ui 1.0.0-next.56 → 1.0.0-next.58

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

@@ -18,7 +18,7 @@ declare class AvatarRootState {
     delayMs: AvatarRootStateProps["delayMs"];
     loadingStatus: AvatarRootStateProps["loadingStatus"];
     constructor(props: AvatarRootStateProps);
-    loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy): () => void;
+    loadImage: (src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy) => () => void;
     props: {
         readonly id: string;
         readonly "data-avatar-root": "";

package/dist/bits/avatar/avatar.svelte.js

@@ -19,7 +19,7 @@ class AvatarRootState {
             ref: this.#ref,
         });
     }
-    loadImage(src, crossorigin, referrerPolicy) {
+    loadImage = (src, crossorigin, referrerPolicy) => {
         let imageTimerId;
         const image = new Image();
         image.src = src;
@@ -37,9 +37,9 @@ class AvatarRootState {
             this.loadingStatus.current = "error";
         };
         return () => {
-            clearTimeout(imageTimerId);
+            window.clearTimeout(imageTimerId);
         };
-    }
+    };
     props = $derived.by(() => ({
         id: this.#id.current,
         [AVATAR_ROOT_ATTR]: "",
@@ -65,8 +65,10 @@ class AvatarImageState {
             ref: this.#ref,
         });
         $effect.pre(() => {
-            if (!this.#src.current)
+            if (!this.#src.current) {
+                this.#root.loadingStatus.current = "error";
                 return;
+            }
             // dependency on crossorigin
             this.#crossOrigin.current;
             untrack(() => this.#root.loadImage(this.#src.current ?? "", this.#crossOrigin.current, this.#referrerPolicy.current));

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

@@ -1,3 +1,4 @@
+import type { HTMLButtonAttributes } from "svelte/elements";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
 type CheckboxRootStateProps = WithRefProps<ReadableBoxedValues<{
@@ -5,6 +6,7 @@ type CheckboxRootStateProps = WithRefProps<ReadableBoxedValues<{
     required: boolean;
     name: string | undefined;
     value: string | undefined;
+    type: HTMLButtonAttributes["type"];
 }> & WritableBoxedValues<{
     checked: boolean;
     indeterminate: boolean;
@@ -21,7 +23,7 @@ declare class CheckboxRootState {
     props: {
         readonly id: string;
         readonly role: "checkbox";
-        readonly type: "button";
+        readonly type: "button" | "reset" | "submit" | null | undefined;
         readonly disabled: boolean;
         readonly "aria-checked": "true" | "false" | "mixed";
         readonly "aria-required": "true" | "false";

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

@@ -6,6 +6,7 @@ const CHECKBOX_ROOT_ATTR = "data-checkbox-root";
 class CheckboxRootState {
     #id;
     #ref;
+    #type;
     checked;
     disabled;
     required;
@@ -21,6 +22,7 @@ class CheckboxRootState {
         this.#ref = props.ref;
         this.#id = props.id;
         this.indeterminate = props.indeterminate;
+        this.#type = props.type;
         useRefById({
             id: this.#id,
             ref: this.#ref,
@@ -53,7 +55,7 @@ class CheckboxRootState {
     props = $derived.by(() => ({
         id: this.#id.current,
         role: "checkbox",
-        type: "button",
+        type: this.#type.current,
         disabled: this.disabled.current,
         "aria-checked": getAriaChecked(this.checked.current, this.indeterminate.current),
         "aria-required": getAriaRequired(this.required.current),

package/dist/bits/checkbox/components/checkbox.svelte

@@ -20,6 +20,7 @@
 		controlledIndeterminate = false,
 		onIndeterminateChange,
 		child,
+		type = "button",
 		...restProps
 	}: CheckboxRootProps = $props();
 
@@ -55,6 +56,7 @@
 				}
 			}
 		),
+		type: box.with(() => type),
 	});
 
 	const mergedProps = $derived(mergeProps({ ...restProps }, rootState.props));

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

@@ -1,3 +1,4 @@
+import type { KeyboardEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
 type DialogVariant = "alert-dialog" | "dialog";
@@ -47,9 +48,9 @@ declare class DialogTriggerState {
         readonly "aria-haspopup": "dialog";
         readonly "aria-expanded": "true" | "false";
         readonly "aria-controls": string | undefined;
-        readonly onpointerdown: (e: PointerEvent) => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
-        readonly onpointerup: (e: PointerEvent) => void;
+        readonly onpointerdown: PointerEventHandler<HTMLButtonElement>;
+        readonly onkeydown: KeyboardEventHandler<HTMLButtonElement>;
+        readonly onclick: MouseEventHandler<HTMLButtonElement>;
     };
 }
 type DialogCloseStateProps = WithRefProps & ReadableBoxedValues<{
@@ -62,9 +63,9 @@ declare class DialogCloseState {
     props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
-        readonly onpointerdown: (e: PointerEvent) => void;
-        readonly onpointerup: (e: PointerEvent) => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly onpointerdown: PointerEventHandler<HTMLButtonElement>;
+        readonly onclick: MouseEventHandler<HTMLButtonElement>;
+        readonly onkeydown: KeyboardEventHandler<HTMLButtonElement>;
     };
 }
 type DialogActionStateProps = WithRefProps;
@@ -142,9 +143,9 @@ declare class AlertDialogCancelState {
     props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
-        readonly onpointerdown: (e: PointerEvent) => void;
-        readonly onpointerup: (e: PointerEvent) => void;
-        readonly onkeydown: (e: KeyboardEvent) => void;
+        readonly onpointerdown: PointerEventHandler<HTMLButtonElement>;
+        readonly onclick: MouseEventHandler<HTMLButtonElement>;
+        readonly onkeydown: KeyboardEventHandler<HTMLButtonElement>;
     };
 }
 export declare function useDialogRoot(props: DialogRootStateProps): DialogRootState;

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

@@ -64,6 +64,13 @@ class DialogTriggerState {
             },
         });
     }
+    #onclick = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.button > 0)
+            return;
+        this.#root.handleOpen();
+    };
     #onpointerdown = (e) => {
         if (this.#disabled.current)
             return;
@@ -76,14 +83,6 @@ class DialogTriggerState {
         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;
@@ -100,7 +99,7 @@ class DialogTriggerState {
         [this.#root.attrs.trigger]: "",
         onpointerdown: this.#onpointerdown,
         onkeydown: this.#onkeydown,
-        onpointerup: this.#onpointerup,
+        onclick: this.#onclick,
         ...this.#root.sharedProps,
     }));
 }
@@ -123,22 +122,24 @@ class DialogCloseState {
             deps: () => this.#root.open.current,
         });
     }
-    #onpointerdown = (e) => {
+    #onclick = (e) => {
         if (this.#disabled.current)
             return;
-        if (e.pointerType === "touch")
-            return e.preventDefault();
         if (e.button > 0)
             return;
         this.#root.handleClose();
     };
-    #onpointerup = (e) => {
+    #onpointerdown = (e) => {
         if (this.#disabled.current)
             return;
-        if (e.pointerType === "touch") {
-            e.preventDefault();
-            this.#root.handleClose();
-        }
+        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.handleClose();
     };
     #onkeydown = (e) => {
         if (this.#disabled.current)
@@ -152,7 +153,7 @@ class DialogCloseState {
         id: this.#id.current,
         [this.#attr]: "",
         onpointerdown: this.#onpointerdown,
-        onpointerup: this.#onpointerup,
+        onclick: this.#onclick,
         onkeydown: this.#onkeydown,
         ...this.#root.sharedProps,
     }));
@@ -303,6 +304,13 @@ class AlertDialogCancelState {
             },
         });
     }
+    #onclick = (e) => {
+        if (this.#disabled.current)
+            return;
+        if (e.button > 0)
+            return;
+        this.#root.handleClose();
+    };
     #onpointerdown = (e) => {
         if (this.#disabled.current)
             return;
@@ -310,6 +318,9 @@ class AlertDialogCancelState {
             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.handleClose();
     };
     #onkeydown = (e) => {
@@ -320,19 +331,11 @@ class AlertDialogCancelState {
             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]: "",
         onpointerdown: this.#onpointerdown,
-        onpointerup: this.#onpointerup,
+        onclick: this.#onclick,
         onkeydown: this.#onkeydown,
         ...this.#root.sharedProps,
     }));

package/dist/bits/utilities/focus-scope/useFocusScope.svelte.js

@@ -73,15 +73,15 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
                 focus(container);
             }
         }
-        const unsubEvents = executeCallbacks(addEventListener(document, "focusin", handleFocusIn), addEventListener(document, "focusout", handleFocusOut));
-        const mutationObserver = new MutationObserver(handleMutations);
-        if (container) {
+        return untrack(() => {
+            const unsubEvents = executeCallbacks(addEventListener(document, "focusin", handleFocusIn), addEventListener(document, "focusout", handleFocusOut));
+            const mutationObserver = new MutationObserver(handleMutations);
             mutationObserver.observe(container, { childList: true, subtree: true });
-        }
-        return () => {
-            unsubEvents();
-            mutationObserver.disconnect();
-        };
+            return () => {
+                unsubEvents();
+                mutationObserver.disconnect();
+            };
+        });
     });
     $effect(() => {
         if (forceMount.current)
@@ -100,8 +100,8 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
     $effect(() => {
         if (!forceMount.current)
             return;
-        let container = ref.current;
         enabled.current;
+        const container = ref.current;
         const previouslyFocusedElement = document.activeElement;
         untrack(() => {
             handleMount(container, previouslyFocusedElement);
@@ -113,9 +113,8 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
         };
     });
     function handleMount(container, prevFocusedElement) {
-        if (!container) {
+        if (!container)
             container = document.getElementById(id.current);
-        }
         if (!container)
             return;
         focusScopeStack.add(focusScope);

package/dist/internal/should-trap-focus.js

@@ -2,5 +2,5 @@ export function shouldTrapFocus({ forceMount, present, trapFocus, open, }) {
     if (forceMount) {
         return open && trapFocus;
     }
-    return present && trapFocus;
+    return present && trapFocus && open;
 }

package/package.json

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