next: Chores & Prop Renames & More (#669)

packages/bits-ui/src/lib/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -19,9 +19,9 @@
 		ref = $bindable(null),
 		forceMount = false,
 		interactOutsideBehavior = "ignore",
-		onDestroyAutoFocus = noop,
+		onCloseAutoFocus = noop,
 		onEscapeKeydown = noop,
-		onMountAutoFocus = noop,
+		onOpenAutoFocus = noop,
 		onInteractOutsideStart = noop,
 		preventScroll = true,
 		trapFocus = true,
@@ -46,13 +46,13 @@
 			loop
 			trapFocus={present.current && trapFocus}
 			{...mergedProps}
-			onDestroyAutoFocus={(e) => {
-				onDestroyAutoFocus(e);
+			onCloseAutoFocus={(e) => {
+				onCloseAutoFocus(e);
 				if (e.defaultPrevented) return;
 				contentState.root.triggerNode?.focus();
 			}}
-			onMountAutoFocus={(e) => {
-				onMountAutoFocus(e);
+			onOpenAutoFocus={(e) => {
+				onOpenAutoFocus(e);
 				if (e.defaultPrevented) return;
 				e.preventDefault();
 				contentState.root.cancelNode?.focus();

packages/bits-ui/src/lib/bits/calendar/calendar.svelte.ts

@@ -21,11 +21,7 @@ import {
 	getDataSelected,
 	getDataUnavailable,
 } from "$lib/internal/attrs.js";
-import {
-	type ReadableBoxedValues,
-	type WritableBoxedValues,
-	watch,
-} from "$lib/internal/box.svelte.js";
+import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import { createContext } from "$lib/internal/createContext.js";
 import type { WithRefProps } from "$lib/internal/types.js";
 import { useId } from "$lib/internal/useId.js";

packages/bits-ui/src/lib/bits/context-menu/components/context-menu-content-static.svelte

@@ -56,10 +56,8 @@
 </script>
 
 <PopperLayer
+	isStatic={true}
 	{...mergedProps}
-	side="right"
-	sideOffset={2}
-	align="start"
 	present={contentState.parentMenu.open.current || forceMount}
 	{onInteractOutsideStart}
 	onInteractOutside={(e) => {
@@ -83,7 +81,6 @@
 		}
 		return false;
 	}}
-	trapFocus
 	{loop}
 >
 	{#snippet popper({ props })}

packages/bits-ui/src/lib/bits/context-menu/types.ts

@@ -9,7 +9,7 @@ export type ContextMenuContentPropsWithoutHTML = Omit<
 
 export type ContextMenuContentProps = Omit<
 	MenuContentProps,
-	"side" | "onMountAutoFocus" | "sideOffset" | "align"
+	"side" | "onOpenAutoFocus" | "sideOffset" | "align"
 >;
 
 export type ContextMenuTriggerPropsWithoutHTML = WithChild<{

packages/bits-ui/src/lib/bits/date-picker/components/date-picker-content-static.svelte

@@ -4,11 +4,11 @@
 	import { pickerOpenFocus } from "$lib/shared/date/index.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	let { ref = $bindable(null), onMountAutoFocus, ...restProps }: ContentStaticProps = $props();
+	let { ref = $bindable(null), onOpenAutoFocus, ...restProps }: ContentStaticProps = $props();
 
 	const mergedProps = $derived(
-		mergeProps({ onMountAutoFocus }, { onMountAutoFocus: pickerOpenFocus })
-	) as any;
+		mergeProps({ onOpenAutoFocus }, { onOpenAutoFocus: pickerOpenFocus })
+	);
 </script>
 
 <PopoverContentStatic {...mergedProps} bind:ref {...restProps} />

packages/bits-ui/src/lib/bits/date-picker/components/date-picker-content.svelte

@@ -4,10 +4,10 @@
 	import { pickerOpenFocus } from "$lib/shared/date/index.js";
 	import { mergeProps } from "$lib/internal/mergeProps.js";
 
-	let { ref = $bindable(null), onMountAutoFocus, ...restProps }: ContentProps = $props();
+	let { ref = $bindable(null), onOpenAutoFocus, ...restProps }: ContentProps = $props();
 
 	const mergedProps = $derived(
-		mergeProps({ onMountAutoFocus }, { onMountAutoFocus: pickerOpenFocus })
+		mergeProps({ onOpenAutoFocus }, { onOpenAutoFocus: pickerOpenFocus })
 	) as any;
 </script>
 

packages/bits-ui/src/lib/bits/dialog/components/dialog-content.svelte

@@ -18,10 +18,11 @@
 		child,
 		ref = $bindable(null),
 		forceMount = false,
-		onDestroyAutoFocus = noop,
+		onCloseAutoFocus = noop,
 		onEscapeKeydown = noop,
 		onInteractOutside = noop,
 		trapFocus = true,
+		preventScroll = true,
 		...restProps
 	}: ContentProps = $props();
 
@@ -38,13 +39,13 @@
 
 <PresenceLayer {...mergedProps} present={contentState.root.open.current || forceMount}>
 	{#snippet presence({ present })}
-		<ScrollLock {...mergedProps} />
+		<ScrollLock {preventScroll} />
 		<FocusScope
 			loop
 			trapFocus={present.current && trapFocus}
 			{...mergedProps}
-			onDestroyAutoFocus={(e) => {
-				onDestroyAutoFocus(e);
+			onCloseAutoFocus={(e) => {
+				onCloseAutoFocus(e);
 				if (e.defaultPrevented) return;
 				contentState.root.triggerNode?.focus();
 			}}

packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content-static.svelte

@@ -43,8 +43,8 @@
 		if (e.defaultPrevented) return;
 		contentState.root.immediateClose();
 	}}
-	onMountAutoFocus={(e) => e.preventDefault()}
-	onDestroyAutoFocus={(e) => e.preventDefault()}
+	onOpenAutoFocus={(e) => e.preventDefault()}
+	onCloseAutoFocus={(e) => e.preventDefault()}
 	trapFocus={false}
 	loop={false}
 	preventScroll={false}

packages/bits-ui/src/lib/bits/link-preview/components/link-preview-content.svelte

@@ -61,8 +61,8 @@
 		if (e.defaultPrevented) return;
 		contentState.root.immediateClose();
 	}}
-	onMountAutoFocus={(e) => e.preventDefault()}
-	onDestroyAutoFocus={(e) => e.preventDefault()}
+	onOpenAutoFocus={(e) => e.preventDefault()}
+	onCloseAutoFocus={(e) => e.preventDefault()}
 	trapFocus={false}
 	loop={false}
 	preventScroll={false}

packages/bits-ui/src/lib/bits/listbox/components/listbox-content-static.svelte

@@ -46,8 +46,8 @@
 		if (e.defaultPrevented) return;
 		contentState.root.closeMenu();
 	}}
-	onMountAutoFocus={(e) => e.preventDefault()}
-	onDestroyAutoFocus={(e) => e.preventDefault()}
+	onOpenAutoFocus={(e) => e.preventDefault()}
+	onCloseAutoFocus={(e) => e.preventDefault()}
 	trapFocus={false}
 	loop={false}
 	preventScroll={false}

packages/bits-ui/src/lib/bits/listbox/components/listbox-content.svelte

@@ -47,8 +47,8 @@
 		if (e.defaultPrevented) return;
 		contentState.root.closeMenu();
 	}}
-	onMountAutoFocus={(e) => e.preventDefault()}
-	onDestroyAutoFocus={(e) => e.preventDefault()}
+	onOpenAutoFocus={(e) => e.preventDefault()}
+	onCloseAutoFocus={(e) => e.preventDefault()}
 	trapFocus={false}
 	loop={false}
 	preventScroll={false}

packages/bits-ui/src/lib/bits/listbox/components/listbox-viewport.svelte

@@ -39,6 +39,16 @@
 		-ms-overflow-style: none !important;
 		-webkit-overflow-scrolling: touch !important;
 	}
+
+	:global([data-combobox-viewport]) {
+		scrollbar-width: none !important;
+		-ms-overflow-style: none !important;
+		-webkit-overflow-scrolling: touch !important;
+	}
+
+	:global([data-combobox-viewport])::-webkit-scrollbar {
+		display: none !important;
+	}
 	:global([data-listbox-viewport])::-webkit-scrollbar {
 		display: none !important;
 	}

packages/bits-ui/src/lib/bits/listbox/types.ts

@@ -1,11 +1,8 @@
+import type { Expand } from "svelte-toolbelt";
 import type { PortalProps } from "../utilities/portal/types.js";
 import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popper-layer/types.js";
 import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
-import type {
-	PrimitiveButtonAttributes,
-	PrimitiveDivAttributes,
-	PrimitiveInputAttributes,
-} from "$lib/shared/attributes.js";
+import type { PrimitiveButtonAttributes, PrimitiveDivAttributes } from "$lib/shared/attributes.js";
 import type { OnChangeFn, WithChild, WithChildren, Without } from "$lib/internal/types.js";
 
 export type ListboxBaseRootPropsWithoutHTML = WithChildren<{
@@ -118,13 +115,30 @@ export type ListboxRootPropsWithoutHTML = ListboxBaseRootPropsWithoutHTML &
 
 export type ListboxRootProps = ListboxRootPropsWithoutHTML;
 
-export type ListboxContentPropsWithoutHTML = WithChild<Omit<PopperLayerProps, "content">>;
+export type _SharedListboxContentProps = {
+	/**
+	 * Whether or not to loop through the items when navigating with the keyboard.
+	 *
+	 * @defaultValue `false`
+	 */
+	loop?: boolean;
+};
+
+export type ListboxContentPropsWithoutHTML = Expand<
+	WithChild<
+		Omit<PopperLayerProps, "content" | "onOpenAutoFocus" | "trapFocus"> &
+			_SharedListboxContentProps
+	>
+>;
 
 export type ListboxContentProps = ListboxContentPropsWithoutHTML &
 	Without<PrimitiveDivAttributes, ListboxContentPropsWithoutHTML>;
 
-export type ListboxContentStaticPropsWithoutHTML = WithChild<
-	Omit<PopperLayerStaticProps, "content">
+export type ListboxContentStaticPropsWithoutHTML = Expand<
+	WithChild<
+		Omit<PopperLayerStaticProps, "content" | "onOpenAutoFocus" | "trapFocus"> &
+			_SharedListboxContentProps
+	>
 >;
 
 export type ListboxContentStaticProps = ListboxContentStaticPropsWithoutHTML &

packages/bits-ui/src/lib/bits/menu/components/menu-sub-content.svelte

@@ -53,15 +53,15 @@
 
 	const mergedProps = $derived(
 		mergeProps(restProps, subContentState.props, {
-			onMountAutoFocus,
-			onDestroyAutoFocus,
+			onOpenAutoFocus,
+			onCloseAutoFocus,
 			side,
 			onkeydown,
 			"data-menu-sub-content": "",
 		})
 	);
 
-	function onMountAutoFocus(e: Event) {
+	function onOpenAutoFocus(e: Event) {
 		afterTick(() => {
 			e.preventDefault();
 			if (subContentState.parentMenu.root.isUsingKeyboard.current) {
@@ -71,7 +71,7 @@
 		});
 	}
 
-	function onDestroyAutoFocus(e: Event) {
+	function onCloseAutoFocus(e: Event) {
 		e.preventDefault();
 	}
 </script>
@@ -80,7 +80,7 @@
 	{...mergedProps}
 	{interactOutsideBehavior}
 	{escapeKeydownBehavior}
-	{onMountAutoFocus}
+	{onOpenAutoFocus}
 	present={subContentState.parentMenu.open.current || forceMount}
 	onInteractOutside={(e) => {
 		onInteractOutside(e);

packages/bits-ui/src/lib/bits/menu/menu.svelte.ts

@@ -344,7 +344,7 @@ class MenuContentState {
 		return false;
 	}
 
-	onMountAutoFocus(e: Event) {
+	onOpenAutoFocus(e: Event) {
 		if (e.defaultPrevented) return;
 		e.preventDefault();
 		const contentNode = this.parentMenu.contentNode;

packages/bits-ui/src/lib/bits/menu/types.ts

@@ -1,3 +1,4 @@
+import type { Expand } from "svelte-toolbelt";
 import type { PopperLayerProps, PopperLayerStaticProps } from "../utilities/popper-layer/types.js";
 import type { ArrowProps, ArrowPropsWithoutHTML } from "../utilities/arrow/types.js";
 import type { OnChangeFn, WithChild, WithChildren, Without } from "$lib/internal/types.js";
@@ -26,12 +27,25 @@ export type MenuRootPropsWithoutHTML = WithChildren<{
 
 export type MenuRootProps = MenuRootPropsWithoutHTML;
 
-export type MenuContentPropsWithoutHTML = WithChild<Omit<PopperLayerProps, "content">>;
+export type _SharedMenuContentProps = {
+	/**
+	 * When `true`, the menu will loop through items when navigating with the keyboard.
+	 *
+	 * @defaultValue false
+	 */
+	loop?: boolean;
+};
+
+export type MenuContentPropsWithoutHTML = Expand<
+	WithChild<Omit<PopperLayerProps, "content"> & _SharedMenuContentProps>
+>;
 
 export type MenuContentProps = MenuContentPropsWithoutHTML &
 	Without<PrimitiveDivAttributes, MenuContentPropsWithoutHTML>;
 
-export type MenuContentStaticPropsWithoutHTML = WithChild<Omit<PopperLayerStaticProps, "content">>;
+export type MenuContentStaticPropsWithoutHTML = Expand<
+	WithChild<Omit<PopperLayerStaticProps, "content"> & _SharedMenuContentProps>
+>;
 
 export type MenuContentStaticProps = MenuContentStaticPropsWithoutHTML &
 	Without<PrimitiveDivAttributes, MenuContentStaticPropsWithoutHTML>;
@@ -112,7 +126,10 @@ export type MenuSubPropsWithoutHTML = WithChildren<{
 	onOpenChange?: OnChangeFn<boolean>;
 }>;
 
-export type MenuSubContentPropsWithoutHTML = WithChild<Omit<PopperLayerProps, "content">>;
+export type MenuSubContentPropsWithoutHTML = Expand<
+	WithChild<Omit<PopperLayerProps, "content"> & _SharedMenuContentProps>
+>;
+
 export type MenuSubContentProps = MenuSubContentPropsWithoutHTML &
 	Without<PrimitiveDivAttributes, MenuSubContentPropsWithoutHTML>;
 

packages/bits-ui/src/lib/bits/menubar/components/menubar-content-static.svelte

@@ -31,6 +31,6 @@
 	preventScroll={false}
 	onInteractOutside={contentState.onInteractOutside}
 	onFocusOutside={contentState.onFocusOutside}
-	onDestroyAutoFocus={contentState.onDestroyAutoFocus}
-	onMountAutoFocus={contentState.onMountAutoFocus}
+	onCloseAutoFocus={contentState.onCloseAutoFocus}
+	onOpenAutoFocus={contentState.onOpenAutoFocus}
 />

packages/bits-ui/src/lib/bits/menubar/components/menubar-content.svelte

@@ -31,6 +31,6 @@
 	preventScroll={false}
 	onInteractOutside={contentState.onInteractOutside}
 	onFocusOutside={contentState.onFocusOutside}
-	onDestroyAutoFocus={contentState.onDestroyAutoFocus}
-	onMountAutoFocus={contentState.onMountAutoFocus}
+	onCloseAutoFocus={contentState.onCloseAutoFocus}
+	onOpenAutoFocus={contentState.onOpenAutoFocus}
 />

packages/bits-ui/src/lib/bits/menubar/menubar.svelte.ts

@@ -306,7 +306,7 @@ class MenubarContentState {
 		});
 	}
 
-	onDestroyAutoFocus = (e: Event) => {
+	onCloseAutoFocus = (e: Event) => {
 		const menubarOpen = Boolean(this.root.value.current);
 		if (!menubarOpen && !this.hasInteractedOutside) {
 			this.menu.getTriggerNode()?.focus();
@@ -328,7 +328,7 @@ class MenubarContentState {
 		this.hasInteractedOutside = true;
 	};
 
-	onMountAutoFocus = () => {
+	onOpenAutoFocus = () => {
 		afterTick(() => this.ref.current?.focus());
 	};
 

packages/bits-ui/src/lib/bits/navigation-menu/navigation-menu.svelte.ts

@@ -2,11 +2,7 @@ import { untrack } from "svelte";
 import { box } from "svelte-toolbelt";
 import { Previous } from "runed";
 import { getTabbableCandidates } from "$lib/internal/focus.js";
-import {
-	type ReadableBoxedValues,
-	type WritableBoxedValues,
-	watch,
-} from "$lib/internal/box.svelte.js";
+import type { ReadableBoxedValues, WritableBoxedValues } from "$lib/internal/box.svelte.js";
 import type { Direction, Orientation } from "$lib/shared/index.js";
 import {
 	getAriaExpanded,