bits-ui 1.0.0-next.98 → 1.2.0

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

@@ -65,6 +65,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		side="right"
 		sideOffset={2}
@@ -96,6 +97,7 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		side="right"
 		sideOffset={2}

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

@@ -65,6 +65,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		side="right"
 		sideOffset={2}
 		align="start"
@@ -96,6 +97,7 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		side="right"
 		sideOffset={2}
 		align="start"

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

@@ -51,6 +51,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -77,6 +78,7 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}

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

@@ -51,6 +51,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -78,6 +79,7 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}

package/dist/bits/link-preview/components/link-preview-content-static.svelte

@@ -6,14 +6,15 @@
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		children,
 		child,
 		id = useId(),
 		ref = $bindable(null),
-		onInteractOutside,
-		onEscapeKeydown,
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
 	}: LinkPreviewContentStaticProps = $props();
@@ -24,33 +25,20 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-
-	function handleInteractOutside(e: PointerEvent) {
-		onInteractOutside?.(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
-
-	function handleEscapeKeydown(e: KeyboardEvent) {
-		onEscapeKeydown?.(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
 </script>
 
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.root.opts.open.current}
 		isStatic
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}
@@ -72,13 +60,10 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.root.opts.open.current}
 		isStatic
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}

package/dist/bits/link-preview/components/link-preview-content.svelte

@@ -7,6 +7,7 @@
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 	import Mounted from "../../utilities/mounted.svelte";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		children,
@@ -21,8 +22,8 @@
 		sticky = "partial",
 		hideWhenDetached = false,
 		collisionPadding = 0,
-		onInteractOutside,
-		onEscapeKeydown,
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
 	}: LinkPreviewContentProps = $props();
@@ -33,6 +34,8 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
 	});
 
 	const floatingProps = $derived({
@@ -47,29 +50,14 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));
-
-	function handleInteractOutside(e: PointerEvent) {
-		onInteractOutside?.(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
-
-	function handleEscapeKeydown(e: KeyboardEvent) {
-		onEscapeKeydown?.(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
 </script>
 
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}
@@ -93,12 +81,9 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}

package/dist/bits/link-preview/link-preview.svelte.d.ts

@@ -45,7 +45,10 @@ declare class LinkPreviewTriggerState {
         readonly onpointerleave: (e: BitsPointerEvent) => void;
     };
 }
-type LinkPreviewContentStateProps = WithRefProps;
+type LinkPreviewContentStateProps = WithRefProps & ReadableBoxedValues<{
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+}>;
 declare class LinkPreviewContentState {
     readonly opts: LinkPreviewContentStateProps;
     readonly root: LinkPreviewRootState;
@@ -53,6 +56,10 @@ declare class LinkPreviewContentState {
     onpointerdown(e: BitsPointerEvent): void;
     onpointerenter(e: BitsPointerEvent): void;
     onfocusout(e: BitsFocusEvent): void;
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    onOpenAutoFocus: (e: Event) => void;
+    onCloseAutoFocus: (e: Event) => void;
     snippetProps: {
         open: boolean;
     };
@@ -65,6 +72,12 @@ declare class LinkPreviewContentState {
         readonly onpointerenter: (e: BitsPointerEvent) => void;
         readonly onfocusout: (e: BitsFocusEvent) => void;
     };
+    popperProps: {
+        onInteractOutside: (e: PointerEvent) => void;
+        onEscapeKeydown: (e: KeyboardEvent) => void;
+        onOpenAutoFocus: (e: Event) => void;
+        onCloseAutoFocus: (e: Event) => void;
+    };
 }
 export declare function useLinkPreviewRoot(props: LinkPreviewRootStateProps): LinkPreviewRootState;
 export declare function useLinkPreviewTrigger(props: LinkPreviewTriggerStateProps): LinkPreviewTriggerState;

package/dist/bits/link-preview/link-preview.svelte.js

@@ -181,6 +181,24 @@ class LinkPreviewContentState {
     onfocusout(e) {
         e.preventDefault();
     }
+    onInteractOutside = (e) => {
+        this.opts.onInteractOutside.current(e);
+        if (e.defaultPrevented)
+            return;
+        this.root.handleClose();
+    };
+    onEscapeKeydown = (e) => {
+        this.opts.onEscapeKeydown.current?.(e);
+        if (e.defaultPrevented)
+            return;
+        this.root.handleClose();
+    };
+    onOpenAutoFocus = (e) => {
+        e.preventDefault();
+    };
+    onCloseAutoFocus = (e) => {
+        e.preventDefault();
+    };
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -191,6 +209,12 @@ class LinkPreviewContentState {
         onpointerenter: this.onpointerenter,
         onfocusout: this.onfocusout,
     }));
+    popperProps = {
+        onInteractOutside: this.onInteractOutside,
+        onEscapeKeydown: this.onEscapeKeydown,
+        onOpenAutoFocus: this.onOpenAutoFocus,
+        onCloseAutoFocus: this.onCloseAutoFocus,
+    };
 }
 const LinkPreviewRootContext = new Context("LinkPreview.Root");
 export function useLinkPreviewRoot(props) {

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

@@ -54,6 +54,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -83,6 +84,7 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}

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

@@ -54,6 +54,7 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}
@@ -84,6 +85,7 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.parentMenu.opts.open.current}
 		onInteractOutside={handleInteractOutside}
 		onEscapeKeydown={handleEscapeKeydown}

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

@@ -74,12 +74,14 @@ declare class MenuContentState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly onblur: (e: BitsFocusEvent) => void;
         readonly onfocus: (_: BitsFocusEvent) => void;
-        readonly onCloseAutoFocus: (e: Event) => void;
         readonly dir: Direction;
         readonly style: {
             readonly pointerEvents: "auto";
         };
     };
+    popperProps: {
+        onCloseAutoFocus: (e: Event) => void;
+    };
 }
 type MenuItemSharedStateProps = WithRefProps & ReadableBoxedValues<{
     disabled: boolean;

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

@@ -281,12 +281,14 @@ class MenuContentState {
         onkeydown: this.onkeydown,
         onblur: this.onblur,
         onfocus: this.onfocus,
-        onCloseAutoFocus: (e) => this.onCloseAutoFocus(e),
         dir: this.parentMenu.root.opts.dir.current,
         style: {
             pointerEvents: "auto",
         },
     }));
+    popperProps = {
+        onCloseAutoFocus: (e) => this.onCloseAutoFocus(e),
+    };
 }
 class MenuItemSharedState {
     opts;

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

@@ -33,12 +33,4 @@
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<MenuContentStatic
-	bind:ref
-	{...mergedProps}
-	preventScroll={false}
-	onInteractOutside={contentState.onInteractOutside}
-	onFocusOutside={contentState.onFocusOutside}
-	onCloseAutoFocus={contentState.onCloseAutoFocus}
-	onOpenAutoFocus={contentState.onOpenAutoFocus}
-/>
+<MenuContentStatic bind:ref {...mergedProps} {...contentState.popperProps} preventScroll={false} />

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

@@ -33,12 +33,4 @@
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<MenuContent
-	bind:ref
-	{...mergedProps}
-	preventScroll={false}
-	onInteractOutside={contentState.onInteractOutside}
-	onFocusOutside={contentState.onFocusOutside}
-	onCloseAutoFocus={contentState.onCloseAutoFocus}
-	onOpenAutoFocus={contentState.onOpenAutoFocus}
-/>
+<MenuContent bind:ref {...mergedProps} {...contentState.popperProps} preventScroll={false} />

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

@@ -103,10 +103,10 @@ declare class MenubarContentState {
     hasInteractedOutside: boolean;
     focusScopeContext: FocusScopeContextValue;
     constructor(opts: MenubarContentStateProps, menu: MenubarMenuState);
-    onCloseAutoFocus(e: Event): void;
-    onFocusOutside(e: FocusEvent): void;
-    onInteractOutside(e: PointerEvent): void;
-    onOpenAutoFocus(e: Event): void;
+    onCloseAutoFocus: (e: Event) => void;
+    onFocusOutside: (e: FocusEvent) => void;
+    onInteractOutside: (e: PointerEvent) => void;
+    onOpenAutoFocus: (e: Event) => void;
     onkeydown(e: BitsKeyboardEvent): void;
     props: {
         readonly id: string;
@@ -121,6 +121,12 @@ declare class MenubarContentState {
         readonly onkeydown: (e: BitsKeyboardEvent) => void;
         readonly "data-menu-content": "";
     };
+    popperProps: {
+        onCloseAutoFocus: (e: Event) => void;
+        onFocusOutside: (e: FocusEvent) => void;
+        onInteractOutside: (e: PointerEvent) => void;
+        onOpenAutoFocus: (e: Event) => void;
+    };
 }
 export declare function useMenubarRoot(props: MenubarRootStateProps): MenubarRootState;
 export declare function useMenubarMenu(props: MenubarMenuStateProps): MenubarMenuState;

package/dist/bits/menubar/menubar.svelte.js

@@ -202,10 +202,6 @@ class MenubarContentState {
         this.menu = menu;
         this.root = menu.root;
         this.focusScopeContext = FocusScopeContext.get();
-        this.onCloseAutoFocus = this.onCloseAutoFocus.bind(this);
-        this.onFocusOutside = this.onFocusOutside.bind(this);
-        this.onInteractOutside = this.onInteractOutside.bind(this);
-        this.onOpenAutoFocus = this.onOpenAutoFocus.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
         useRefById({
             ...opts,
@@ -215,7 +211,7 @@ class MenubarContentState {
             deps: () => this.menu.open,
         });
     }
-    onCloseAutoFocus(e) {
+    onCloseAutoFocus = (e) => {
         this.opts.onCloseAutoFocus.current(e);
         if (e.defaultPrevented)
             return;
@@ -226,8 +222,8 @@ class MenubarContentState {
         }
         this.hasInteractedOutside = false;
         e.preventDefault();
-    }
-    onFocusOutside(e) {
+    };
+    onFocusOutside = (e) => {
         const target = e.target;
         const isMenubarTrigger = this.root
             .getTriggers()
@@ -235,17 +231,17 @@ class MenubarContentState {
         if (isMenubarTrigger)
             e.preventDefault();
         this.opts.onFocusOutside.current(e);
-    }
-    onInteractOutside(e) {
+    };
+    onInteractOutside = (e) => {
         this.hasInteractedOutside = true;
         this.opts.onInteractOutside.current(e);
-    }
-    onOpenAutoFocus(e) {
+    };
+    onOpenAutoFocus = (e) => {
         this.opts.onOpenAutoFocus.current(e);
         if (e.defaultPrevented)
             return;
         afterTick(() => this.opts.ref.current?.focus());
-    }
+    };
     onkeydown(e) {
         if (e.key !== kbd.ARROW_LEFT && e.key !== kbd.ARROW_RIGHT)
             return;
@@ -290,6 +286,12 @@ class MenubarContentState {
         onkeydown: this.onkeydown,
         "data-menu-content": "",
     }));
+    popperProps = {
+        onCloseAutoFocus: this.onCloseAutoFocus,
+        onFocusOutside: this.onFocusOutside,
+        onInteractOutside: this.onInteractOutside,
+        onOpenAutoFocus: this.onOpenAutoFocus,
+    };
 }
 const MenubarRootContext = new Context("Menubar.Root");
 const MenubarMenuContext = new Context("Menubar.Menu");

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

@@ -19,7 +19,6 @@
 		onInteractOutside = noop,
 		trapFocus = true,
 		preventScroll = false,
-
 		...restProps
 	}: PopoverContentStaticProps = $props();
 
@@ -40,12 +39,10 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		enabled={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={contentState.handleInteractOutside}
-		onEscapeKeydown={contentState.handleEscapeKeydown}
-		onCloseAutoFocus={contentState.handleCloseAutoFocus}
 		{trapFocus}
 		{preventScroll}
 		loop
@@ -67,12 +64,10 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		present={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={contentState.handleInteractOutside}
-		onEscapeKeydown={contentState.handleEscapeKeydown}
-		onCloseAutoFocus={contentState.handleCloseAutoFocus}
 		{trapFocus}
 		{preventScroll}
 		loop

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

@@ -39,11 +39,9 @@
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={contentState.handleInteractOutside}
-		onEscapeKeydown={contentState.handleEscapeKeydown}
-		onCloseAutoFocus={contentState.handleCloseAutoFocus}
 		{trapFocus}
 		{preventScroll}
 		loop
@@ -67,11 +65,9 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={contentState.handleInteractOutside}
-		onEscapeKeydown={contentState.handleEscapeKeydown}
-		onCloseAutoFocus={contentState.handleCloseAutoFocus}
 		{trapFocus}
 		{preventScroll}
 		loop

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

@@ -45,9 +45,9 @@ declare class PopoverContentState {
     readonly opts: PopoverContentStateProps;
     readonly root: PopoverRootState;
     constructor(opts: PopoverContentStateProps, root: PopoverRootState);
-    handleInteractOutside(e: PointerEvent): void;
-    handleEscapeKeydown(e: KeyboardEvent): void;
-    handleCloseAutoFocus(e: Event): void;
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    onCloseAutoFocus: (e: Event) => void;
     snippetProps: {
         open: boolean;
     };
@@ -60,6 +60,11 @@ declare class PopoverContentState {
             readonly pointerEvents: "auto";
         };
     };
+    popperProps: {
+        onInteractOutside: (e: PointerEvent) => void;
+        onEscapeKeydown: (e: KeyboardEvent) => void;
+        onCloseAutoFocus: (e: Event) => void;
+    };
 }
 type PopoverCloseStateProps = WithRefProps;
 declare class PopoverCloseState {

package/dist/bits/popover/popover.svelte.js

@@ -92,11 +92,8 @@ class PopoverContentState {
                 this.root.contentNode = node;
             },
         });
-        this.handleInteractOutside = this.handleInteractOutside.bind(this);
-        this.handleEscapeKeydown = this.handleEscapeKeydown.bind(this);
-        this.handleCloseAutoFocus = this.handleCloseAutoFocus.bind(this);
     }
-    handleInteractOutside(e) {
+    onInteractOutside = (e) => {
         this.opts.onInteractOutside.current(e);
         if (e.defaultPrevented)
             return;
@@ -106,20 +103,20 @@ class PopoverContentState {
         if (closestTrigger === this.root.triggerNode)
             return;
         this.root.handleClose();
-    }
-    handleEscapeKeydown(e) {
+    };
+    onEscapeKeydown = (e) => {
         this.opts.onEscapeKeydown.current(e);
         if (e.defaultPrevented)
             return;
         this.root.handleClose();
-    }
-    handleCloseAutoFocus(e) {
+    };
+    onCloseAutoFocus = (e) => {
         this.opts.onCloseAutoFocus.current(e);
         if (e.defaultPrevented)
             return;
         e.preventDefault();
         this.root.triggerNode?.focus();
-    }
+    };
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -130,6 +127,11 @@ class PopoverContentState {
             pointerEvents: "auto",
         },
     }));
+    popperProps = {
+        onInteractOutside: this.onInteractOutside,
+        onEscapeKeydown: this.onEscapeKeydown,
+        onCloseAutoFocus: this.onCloseAutoFocus,
+    };
 }
 class PopoverCloseState {
     opts;

package/dist/bits/progress/components/progress.svelte

@@ -9,6 +9,7 @@
 		children,
 		value = 0,
 		max = 100,
+		min = 0,
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
@@ -17,6 +18,7 @@
 	const rootState = useProgressRootState({
 		value: box.with(() => value),
 		max: box.with(() => max),
+		min: box.with(() => min),
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,

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

@@ -3,20 +3,22 @@ import type { WithRefProps } from "../../internal/types.js";
 type ProgressRootStateProps = WithRefProps<ReadableBoxedValues<{
     value: number | null;
     max: number;
+    min: number;
 }>>;
 declare class ProgressRootState {
     readonly opts: ProgressRootStateProps;
     constructor(opts: ProgressRootStateProps);
     props: {
-        readonly role: "meter";
+        readonly role: "progressbar";
         readonly value: number | null;
-        readonly max: number;
-        readonly "aria-valuemin": 0;
+        readonly "aria-valuemin": number;
         readonly "aria-valuemax": number;
-        readonly "aria-valuenow": number | null;
-        readonly "data-value": number | null;
+        readonly "aria-valuenow": number | undefined;
+        readonly "data-value": number | undefined;
         readonly "data-state": "indeterminate" | "loading" | "loaded";
         readonly "data-max": number;
+        readonly "data-min": number;
+        readonly "data-indeterminate": "" | undefined;
         readonly "data-progress-root": "";
     };
 }

package/dist/bits/progress/progress.svelte.js

@@ -7,15 +7,16 @@ class ProgressRootState {
         useRefById(opts);
     }
     props = $derived.by(() => ({
-        role: "meter",
+        role: "progressbar",
         value: this.opts.value.current,
-        max: this.opts.max.current,
-        "aria-valuemin": 0,
+        "aria-valuemin": this.opts.min.current,
         "aria-valuemax": this.opts.max.current,
-        "aria-valuenow": this.opts.value.current,
-        "data-value": this.opts.value.current,
+        "aria-valuenow": this.opts.value.current === null ? undefined : this.opts.value.current,
+        "data-value": this.opts.value.current === null ? undefined : this.opts.value.current,
         "data-state": getProgressDataState(this.opts.value.current, this.opts.max.current),
         "data-max": this.opts.max.current,
+        "data-min": this.opts.min.current,
+        "data-indeterminate": this.opts.value.current === null ? "" : undefined,
         [ROOT_ATTR]: "",
     }));
 }

package/dist/bits/progress/types.d.ts

@@ -4,12 +4,21 @@ export type ProgressRootPropsWithoutHTML = WithChild<{
     /**
      * The current value of the progress bar.
      * If `null`, the progress bar will be in an indeterminate state.
+     *
+     * @default 0
      */
     value?: number | null;
     /**
-     * The maximum value of the progress bar. Used to calculate the percentage
-     * of the progress bar along with the `value` prop.
+     * The maximum value of the progress bar.
+     *
+     * @default 100
      */
     max?: number;
+    /**
+     * The minimum value of the progress bar.
+     *
+     * @default 0
+     */
+    min?: number;
 }>;
 export type ProgressRootProps = ProgressRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, ProgressRootPropsWithoutHTML>;

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

@@ -15,6 +15,7 @@
 		onEscapeKeydown = noop,
 		children,
 		child,
+		preventScroll = false,
 		...restProps
 	}: SelectContentStaticProps = $props();
 
@@ -24,39 +25,21 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-
-	function handleInteractOutside(e: PointerEvent) {
-		contentState.handleInteractOutside(e);
-		if (e.defaultPrevented) return;
-		onInteractOutside(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
-
-	function handleEscapeKeydown(e: KeyboardEvent) {
-		onEscapeKeydown(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
 </script>
 
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		enabled={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
-		trapFocus={false}
-		loop={false}
-		preventScroll={false}
-		onPlaced={() => (contentState.isPositioned = true)}
+		{preventScroll}
 		forceMount={true}
 	>
 		{#snippet popper({ props })}
@@ -73,17 +56,11 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		present={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
-		trapFocus={false}
-		loop={false}
-		preventScroll={false}
-		onPlaced={() => (contentState.isPositioned = true)}
+		{preventScroll}
 		forceMount={false}
 	>
 		{#snippet popper({ props })}

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

@@ -26,37 +26,20 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-
-	function handleInteractOutside(e: PointerEvent) {
-		contentState.handleInteractOutside(e);
-		if (e.defaultPrevented) return;
-		onInteractOutside(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
-
-	function handleEscapeKeydown(e: KeyboardEvent) {
-		onEscapeKeydown(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
 </script>
 
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		{side}
 		enabled={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
-		trapFocus={false}
-		loop={false}
 		{preventScroll}
 		onPlaced={() => (contentState.isPositioned = true)}
 		forceMount={true}
@@ -77,17 +60,11 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		{side}
 		present={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
-		trapFocus={false}
-		loop={false}
 		{preventScroll}
-		onPlaced={() => (contentState.isPositioned = true)}
 		forceMount={false}
 	>
 		{#snippet popper({ props, wrapperProps })}

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

@@ -151,7 +151,10 @@ declare class SelectTriggerState {
         readonly onpointerup: (e: BitsPointerEvent) => void;
     };
 }
-type SelectContentStateProps = WithRefProps;
+type SelectContentStateProps = WithRefProps & ReadableBoxedValues<{
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+}>;
 declare class SelectContentState {
     #private;
     readonly opts: SelectContentStateProps;
@@ -160,7 +163,10 @@ declare class SelectContentState {
     isPositioned: boolean;
     constructor(opts: SelectContentStateProps, root: SelectRootState);
     onpointermove(_: BitsPointerEvent): void;
-    handleInteractOutside(e: PointerEvent): void;
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    onOpenAutoFocus: (e: Event) => void;
+    onCloseAutoFocus: (e: Event) => void;
     snippetProps: {
         open: boolean;
     };
@@ -184,6 +190,15 @@ declare class SelectContentState {
         };
         readonly onpointermove: (_: BitsPointerEvent) => void;
     };
+    popperProps: {
+        onInteractOutside: (e: PointerEvent) => void;
+        onEscapeKeydown: (e: KeyboardEvent) => void;
+        onOpenAutoFocus: (e: Event) => void;
+        onCloseAutoFocus: (e: Event) => void;
+        trapFocus: boolean;
+        loop: boolean;
+        onPlaced: () => void;
+    };
 }
 type SelectItemStateProps = WithRefProps<ReadableBoxedValues<{
     value: string;

package/dist/bits/select/select.svelte.js

@@ -618,7 +618,6 @@ class SelectContentState {
             this.isPositioned = false;
         });
         this.onpointermove = this.onpointermove.bind(this);
-        this.handleInteractOutside = this.handleInteractOutside.bind(this);
     }
     onpointermove(_) {
         this.root.isUsingKeyboard = false;
@@ -633,11 +632,28 @@ class SelectContentState {
             [`${prefix}-anchor-height`]: "var(--bits-floating-anchor-height)",
         };
     });
-    handleInteractOutside(e) {
+    onInteractOutside = (e) => {
         if (e.target === this.root.triggerNode || e.target === this.root.inputNode) {
             e.preventDefault();
+            return;
         }
-    }
+        this.opts.onInteractOutside.current(e);
+        if (e.defaultPrevented)
+            return;
+        this.root.handleClose();
+    };
+    onEscapeKeydown = (e) => {
+        this.opts.onEscapeKeydown.current(e);
+        if (e.defaultPrevented)
+            return;
+        this.root.handleClose();
+    };
+    onOpenAutoFocus = (e) => {
+        e.preventDefault();
+    };
+    onCloseAutoFocus = (e) => {
+        e.preventDefault();
+    };
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -654,6 +670,17 @@ class SelectContentState {
         },
         onpointermove: this.onpointermove,
     }));
+    popperProps = {
+        onInteractOutside: this.onInteractOutside,
+        onEscapeKeydown: this.onEscapeKeydown,
+        onOpenAutoFocus: this.onOpenAutoFocus,
+        onCloseAutoFocus: this.onCloseAutoFocus,
+        trapFocus: false,
+        loop: false,
+        onPlaced: () => {
+            this.isPositioned = true;
+        },
+    };
 }
 class SelectItemState {
     opts;

package/dist/bits/select/types.d.ts

@@ -123,9 +123,9 @@ export type _SharedSelectContentProps = {
      */
     loop?: boolean;
 };
-export type SelectContentPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "onOpenAutoFocus" | "trapFocus"> & _SharedSelectContentProps, FloatingContentSnippetProps>>;
+export type SelectContentPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerProps, "content" | "onOpenAutoFocus" | "trapFocus" | "onCloseAutoFocus"> & _SharedSelectContentProps, FloatingContentSnippetProps>>;
 export type SelectContentProps = SelectContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectContentPropsWithoutHTML>;
-export type SelectContentStaticPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "onOpenAutoFocus" | "trapFocus"> & _SharedSelectContentProps, StaticContentSnippetProps>>;
+export type SelectContentStaticPropsWithoutHTML = Expand<WithChildNoChildrenSnippetProps<Omit<PopperLayerStaticProps, "content" | "onOpenAutoFocus" | "onCloseAutoFocus" | "trapFocus"> & _SharedSelectContentProps, StaticContentSnippetProps>>;
 export type SelectContentStaticProps = SelectContentStaticPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, SelectContentStaticPropsWithoutHTML>;
 export type SelectTriggerPropsWithoutHTML = WithChild;
 export type SelectTriggerProps = SelectTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, SelectTriggerPropsWithoutHTML>;

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

@@ -6,15 +6,15 @@
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		children,
 		child,
 		id = useId(),
 		ref = $bindable(null),
-
-		onInteractOutside,
-		onEscapeKeydown,
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
 	}: TooltipContentStaticProps = $props();
@@ -25,33 +25,20 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
-
-	function handleInteractOutside(e: PointerEvent) {
-		onInteractOutside?.(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
-
-	function handleEscapeKeydown(e: KeyboardEvent) {
-		onEscapeKeydown?.(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
 </script>
 
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		enabled={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}
@@ -73,13 +60,10 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		isStatic
 		present={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}

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

@@ -6,6 +6,7 @@
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		children,
@@ -20,8 +21,8 @@
 		sticky = "partial",
 		hideWhenDetached = false,
 		collisionPadding = 0,
-		onInteractOutside,
-		onEscapeKeydown,
+		onInteractOutside = noop,
+		onEscapeKeydown = noop,
 		forceMount = false,
 		...restProps
 	}: TooltipContentProps = $props();
@@ -32,6 +33,8 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		onInteractOutside: box.with(() => onInteractOutside),
+		onEscapeKeydown: box.with(() => onEscapeKeydown),
 	});
 
 	const floatingProps = $derived({
@@ -46,29 +49,14 @@
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, floatingProps, contentState.props));
-
-	function handleInteractOutside(e: PointerEvent) {
-		onInteractOutside?.(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
-
-	function handleEscapeKeydown(e: KeyboardEvent) {
-		onEscapeKeydown?.(e);
-		if (e.defaultPrevented) return;
-		contentState.root.handleClose();
-	}
 </script>
 
 {#if forceMount}
 	<PopperLayerForceMount
 		{...mergedProps}
+		{...contentState.popperProps}
 		enabled={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}
@@ -92,12 +80,9 @@
 {:else if !forceMount}
 	<PopperLayer
 		{...mergedProps}
+		{...contentState.popperProps}
 		present={contentState.root.opts.open.current}
 		{id}
-		onInteractOutside={handleInteractOutside}
-		onEscapeKeydown={handleEscapeKeydown}
-		onOpenAutoFocus={(e) => e.preventDefault()}
-		onCloseAutoFocus={(e) => e.preventDefault()}
 		trapFocus={false}
 		loop={false}
 		preventScroll={false}

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

@@ -75,11 +75,18 @@ declare class TooltipTriggerState {
         onclick: () => void;
     };
 }
-type TooltipContentStateProps = WithRefProps;
+type TooltipContentStateProps = WithRefProps & ReadableBoxedValues<{
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+}>;
 declare class TooltipContentState {
     readonly opts: TooltipContentStateProps;
     readonly root: TooltipRootState;
     constructor(opts: TooltipContentStateProps, root: TooltipRootState);
+    onInteractOutside: (e: PointerEvent) => void;
+    onEscapeKeydown: (e: KeyboardEvent) => void;
+    onOpenAutoFocus: (e: Event) => void;
+    onCloseAutoFocus: (e: Event) => void;
     snippetProps: {
         open: boolean;
     };
@@ -93,6 +100,12 @@ declare class TooltipContentState {
         };
         readonly "data-tooltip-content": "";
     };
+    popperProps: {
+        onInteractOutside: (e: PointerEvent) => void;
+        onEscapeKeydown: (e: KeyboardEvent) => void;
+        onOpenAutoFocus: (e: Event) => void;
+        onCloseAutoFocus: (e: Event) => void;
+    };
 }
 export declare function useTooltipProvider(props: TooltipProviderStateProps): TooltipProviderState;
 export declare function useTooltipRoot(props: TooltipRootStateProps): TooltipRootState;

package/dist/bits/tooltip/tooltip.svelte.js

@@ -2,7 +2,7 @@ import { box, executeCallbacks, onMountEffect, useRefById } from "svelte-toolbel
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { useTimeoutFn } from "../../internal/use-timeout-fn.svelte.js";
-import { isFocusVisible } from "../../internal/is.js";
+import { isElement, isFocusVisible } from "../../internal/is.js";
 import { useGraceArea } from "../../internal/use-grace-area.svelte.js";
 import { getDataDisabled } from "../../internal/attrs.js";
 import { CustomEventDispatcher } from "../../internal/events.js";
@@ -224,6 +224,30 @@ class TooltipContentState {
             }
         }), TooltipOpenEvent.listen(window, this.root.handleClose)));
     }
+    onInteractOutside = (e) => {
+        if (isElement(e.target) &&
+            this.root.triggerNode?.contains(e.target) &&
+            this.root.disableCloseOnTriggerClick) {
+            e.preventDefault();
+            return;
+        }
+        this.opts.onInteractOutside.current(e);
+        if (e.defaultPrevented)
+            return;
+        this.root.handleClose();
+    };
+    onEscapeKeydown = (e) => {
+        this.opts.onEscapeKeydown.current?.(e);
+        if (e.defaultPrevented)
+            return;
+        this.root.handleClose();
+    };
+    onOpenAutoFocus = (e) => {
+        e.preventDefault();
+    };
+    onCloseAutoFocus = (e) => {
+        e.preventDefault();
+    };
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -235,6 +259,12 @@ class TooltipContentState {
         },
         [TOOLTIP_CONTENT_ATTR]: "",
     }));
+    popperProps = {
+        onInteractOutside: this.onInteractOutside,
+        onEscapeKeydown: this.onEscapeKeydown,
+        onOpenAutoFocus: this.onOpenAutoFocus,
+        onCloseAutoFocus: this.onCloseAutoFocus,
+    };
 }
 //
 // CONTEXT METHODS

package/package.json

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