bits-ui 1.7.0 → 2.1.0

package/dist/bits/navigation-menu/types.d.ts

@@ -15,21 +15,22 @@ export type NavigationMenuRootPropsWithoutHTML = WithChild<{
      */
     onValueChange?: OnChangeFn<string>;
     /**
-     * The duration from when the mouse enters a trigger until the content opens.
+     * The amount of time in ms from when the mouse enters a trigger until the content opens.
      *
-     * @defaultValue 200
+     * @default 200
      */
     delayDuration?: number;
     /**
-     * How much time a user has to enter another trigger without incurring a delay again.
+     * The amount of time in ms that a user has to enter another trigger without
+     * incurring a delay again.
      *
-     * @defaultValue 300
+     * @default 300
      */
     skipDelayDuration?: number;
     /**
      * The reading direction of the content.
      *
-     * @defaultValue "ltr"
+     * @default "ltr"
      */
     dir?: Direction;
     /**
@@ -68,6 +69,13 @@ export type NavigationMenuItemPropsWithoutHTML = WithChild<{
      * The value of the menu item.
      */
     value?: string;
+    /**
+     * Whether to open the menu associated with the item when the item's trigger
+     * is hovered.
+     *
+     * @default true
+     */
+    openOnHover?: boolean;
 }>;
 export type NavigationMenuItemProps = NavigationMenuItemPropsWithoutHTML & Without<BitsPrimitiveLiAttributes, NavigationMenuItemPropsWithoutHTML>;
 export type NavigationMenuTriggerPropsWithoutHTML = WithChild<{
@@ -82,7 +90,6 @@ export type NavigationMenuContentPropsWithoutHTML = WithChild<{
     /**
      * Callback fired when an interaction occurs outside the content.
      * Default behavior can be prevented with `event.preventDefault()`
-     *
      */
     onInteractOutside?: (event: PointerEvent) => void;
     /**
@@ -108,7 +115,7 @@ export type NavigationMenuContentPropsWithoutHTML = WithChild<{
      * This is useful when wanting to use more custom transition and animation
      * libraries.
      *
-     * @defaultValue false
+     * @default false
      */
     forceMount?: boolean;
 }>;

package/dist/bits/pagination/components/pagination-next-button.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationNextButtonProps } from "../types.js";
 	import { usePaginationButton } from "../pagination.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),

package/dist/bits/pagination/components/pagination-page.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationPageProps } from "../types.js";
 	import { usePaginationPage } from "../pagination.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		page,
 		child,
 		children,

package/dist/bits/pagination/components/pagination-prev-button.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationPrevButtonProps } from "../types.js";
 	import { usePaginationButton } from "../pagination.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		child,
 		children,
 		ref = $bindable(null),

package/dist/bits/pagination/components/pagination.svelte

@@ -2,11 +2,13 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PaginationRootProps } from "../types.js";
 	import { usePaginationRoot } from "../pagination.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		count,
 		perPage = 1,
 		page = $bindable(1),

package/dist/bits/pagination/pagination.svelte.js

@@ -1,4 +1,4 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 import { getDataOrientation } from "../../internal/attrs.js";
 import { getElemDirection } from "../../internal/locale.js";
@@ -28,7 +28,6 @@ class PaginationRootState {
     }));
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
     }
     setPage(page) {
         this.opts.page.current = page;
@@ -62,6 +61,7 @@ class PaginationRootState {
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         [PAGINATION_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class PaginationPageState {
@@ -71,7 +71,6 @@ class PaginationPageState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -100,6 +99,7 @@ class PaginationPageState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 class PaginationButtonState {
@@ -108,7 +108,6 @@ class PaginationButtonState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -148,6 +147,7 @@ class PaginationButtonState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
+        ...attachRef(this.opts.ref),
     }));
 }
 //

package/dist/bits/pin-input/components/pin-input-cell.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PinInputCellProps } from "../types.js";
 	import { usePinInputCell } from "../pin-input.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		cell,
 		child,

package/dist/bits/pin-input/components/pin-input.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PinInputRootProps } from "../types.js";
 	import { usePinInput } from "../pin-input.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
-		id = useId(),
-		inputId = useId(),
+		id = createId(uid),
+		inputId = `${createId(uid)}-input`,
 		ref = $bindable(null),
 		maxlength = 6,
 		textalign = "left",

package/dist/bits/pin-input/pin-input.svelte.js

@@ -1,6 +1,6 @@
 import { Previous, watch } from "runed";
 import { onMount } from "svelte";
-import { box, useRefById } from "svelte-toolbelt";
+import { box, attachRef } from "svelte-toolbelt";
 import { usePasswordManagerBadge } from "./usePasswordManager.svelte.js";
 import { getDisabled } from "../../internal/attrs.js";
 import { on } from "svelte/events";
@@ -60,11 +60,6 @@ class PinInputRootState {
             isFocused: this.#isFocused,
             pushPasswordManagerStrategy: this.opts.pushPasswordManagerStrategy,
         });
-        useRefById(opts);
-        useRefById({
-            id: this.opts.inputId,
-            ref: this.#inputRef,
-        });
         onMount(() => {
             const input = this.#inputRef.current;
             const container = this.opts.ref.current;
@@ -155,6 +150,7 @@ class PinInputRootState {
         id: this.opts.id.current,
         [ROOT_ATTR]: "",
         style: this.#rootStyles,
+        ...attachRef(this.opts.ref),
     }));
     inputWrapperProps = $derived.by(() => ({
         style: {
@@ -365,6 +361,7 @@ class PinInputRootState {
         onmouseleave: this.onmouseleave,
         onfocus: this.onfocus,
         onblur: this.onblur,
+        ...attachRef(this.#inputRef),
     }));
     #cells = $derived.by(() => Array.from({ length: this.opts.maxLength.current }).map((_, idx) => {
         const isActive = this.#isFocused.current &&
@@ -390,16 +387,13 @@ class PinInputCellState {
     opts;
     constructor(opts) {
         this.opts = opts;
-        useRefById({
-            id: this.opts.id,
-            ref: this.opts.ref,
-        });
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         [CELL_ATTR]: "",
         "data-active": this.opts.cell.current.isActive ? "" : undefined,
         "data-inactive": !this.opts.cell.current.isActive ? "" : undefined,
+        ...attachRef(this.opts.ref),
     }));
 }
 // eslint-disable-next-line @typescript-eslint/no-explicit-any

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

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PopoverCloseProps } from "../types.js";
 	import { usePopoverClose } from "../popover.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		child,
 		children,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: PopoverCloseProps = $props();

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

@@ -4,15 +4,17 @@
 	import { usePopoverContent } from "../popover.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
 		child,
 		children,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		forceMount = false,
 		onCloseAutoFocus = noop,
 		onEscapeKeydown = noop,
@@ -40,6 +42,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		isStatic
 		enabled={contentState.root.opts.open.current}
 		{id}
@@ -65,6 +68,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		isStatic
 		present={contentState.root.opts.open.current}
 		{id}

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

@@ -4,15 +4,17 @@
 	import { usePopoverContent } from "../popover.svelte.js";
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
 
+	const uid = $props.id();
+
 	let {
 		child,
 		children,
 		ref = $bindable(null),
-		id = useId(),
+		id = createId(uid),
 		forceMount = false,
 		onCloseAutoFocus = noop,
 		onEscapeKeydown = noop,
@@ -40,6 +42,7 @@
 	<PopperLayerForceMount
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		enabled={contentState.root.opts.open.current}
 		{id}
 		{trapFocus}
@@ -66,6 +69,7 @@
 	<PopperLayer
 		{...mergedProps}
 		{...contentState.popperProps}
+		ref={contentState.opts.ref}
 		present={contentState.root.opts.open.current}
 		{id}
 		{trapFocus}

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

@@ -2,13 +2,15 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { PopoverTriggerProps } from "../types.js";
 	import { usePopoverTrigger } from "../popover.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import FloatingLayerAnchor from "../../utilities/floating-layer/components/floating-layer-anchor.svelte";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		type = "button",
 		disabled = false,
@@ -27,7 +29,7 @@
 	const mergedProps = $derived(mergeProps(restProps, triggerState.props, { type }));
 </script>
 
-<FloatingLayerAnchor {id}>
+<FloatingLayerAnchor {id} ref={triggerState.opts.ref}>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}

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

@@ -1,4 +1,4 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context } from "runed";
 import { kbd } from "../../internal/kbd.js";
 import { getAriaExpanded, getDataOpenClosed } from "../../internal/attrs.js";
@@ -25,12 +25,6 @@ class PopoverTriggerState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            onRefChange: (node) => {
-                this.root.triggerNode = node;
-            },
-        });
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -66,6 +60,7 @@ class PopoverTriggerState {
         //
         onkeydown: this.onkeydown,
         onclick: this.onclick,
+        ...attachRef(this.opts.ref, (v) => (this.root.triggerNode = v)),
     }));
 }
 class PopoverContentState {
@@ -74,13 +69,6 @@ class PopoverContentState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-            onRefChange: (node) => {
-                this.root.contentNode = node;
-            },
-        });
     }
     onInteractOutside = (e) => {
         this.opts.onInteractOutside.current(e);
@@ -115,6 +103,7 @@ class PopoverContentState {
         style: {
             pointerEvents: "auto",
         },
+        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
     }));
     popperProps = {
         onInteractOutside: this.onInteractOutside,
@@ -128,10 +117,6 @@ class PopoverCloseState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById({
-            ...opts,
-            deps: () => this.root.opts.open.current,
-        });
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -150,6 +135,7 @@ class PopoverCloseState {
         onkeydown: this.onkeydown,
         type: "button",
         "data-popover-close": "",
+        ...attachRef(this.opts.ref),
     }));
 }
 //

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

@@ -2,7 +2,9 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { ProgressRootProps } from "../types.js";
 	import { useProgressRootState } from "../progress.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		child,
@@ -10,7 +12,7 @@
 		value = 0,
 		max = 100,
 		min = 0,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: ProgressRootProps = $props();

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

@@ -1,10 +1,9 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 const ROOT_ATTR = "data-progress-root";
 class ProgressRootState {
     opts;
     constructor(opts) {
         this.opts = opts;
-        useRefById(opts);
     }
     props = $derived.by(() => ({
         role: "progressbar",
@@ -18,6 +17,7 @@ class ProgressRootState {
         "data-min": this.opts.min.current,
         "data-indeterminate": this.opts.value.current === null ? "" : undefined,
         [ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 function getProgressDataState(value, max) {

package/dist/bits/radio-group/components/radio-group-item.svelte

@@ -2,10 +2,12 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { RadioGroupItemProps } from "../types.js";
 	import { useRadioGroupItem } from "../radio-group.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
-		id = useId(),
+		id = createId(uid),
 		children,
 		child,
 		value,

package/dist/bits/radio-group/components/radio-group.svelte

@@ -3,9 +3,11 @@
 	import type { RadioGroupRootProps } from "../types.js";
 	import { useRadioGroupRoot } from "../radio-group.svelte.js";
 	import RadioGroupInput from "./radio-group-input.svelte";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 
+	const uid = $props.id();
+
 	let {
 		disabled = false,
 		children,
@@ -16,7 +18,7 @@
 		loop = true,
 		name = undefined,
 		required = false,
-		id = useId(),
+		id = createId(uid),
 		onValueChange = noop,
 		...restProps
 	}: RadioGroupRootProps = $props();

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

@@ -1,4 +1,4 @@
-import { useRefById } from "svelte-toolbelt";
+import { attachRef } from "svelte-toolbelt";
 import { Context, watch } from "runed";
 import { getAriaChecked, getAriaRequired, getDataDisabled } from "../../internal/attrs.js";
 import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
@@ -12,15 +12,11 @@ class RadioGroupRootState {
     constructor(opts) {
         this.opts = opts;
         this.rovingFocusGroup = useRovingFocus({
-            rootNodeId: this.opts.id,
+            rootNode: this.opts.ref,
             candidateAttr: RADIO_GROUP_ITEM_ATTR,
             loop: this.opts.loop,
             orientation: this.opts.orientation,
         });
-        useRefById({
-            id: this.opts.id,
-            ref: this.opts.ref,
-        });
     }
     isChecked(value) {
         return this.opts.value.current === value;
@@ -35,6 +31,7 @@ class RadioGroupRootState {
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         "data-orientation": this.opts.orientation.current,
         [RADIO_GROUP_ROOT_ATTR]: "",
+        ...attachRef(this.opts.ref),
     }));
 }
 class RadioGroupItemState {
@@ -47,7 +44,6 @@ class RadioGroupItemState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
-        useRefById(opts);
         if (this.opts.value.current === this.root.opts.value.current) {
             this.root.rovingFocusGroup.setCurrentTabStopId(this.opts.id.current);
             this.#tabIndex = 0;
@@ -105,6 +101,7 @@ class RadioGroupItemState {
         onkeydown: this.onkeydown,
         onfocus: this.onfocus,
         onclick: this.onclick,
+        ...attachRef(this.opts.ref),
     }));
 }
 //

package/dist/bits/range-calendar/components/range-calendar-cell.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { RangeCalendarCellProps } from "../types.js";
 	import { useRangeCalendarCell } from "../range-calendar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		date,
 		month,

package/dist/bits/range-calendar/components/range-calendar-day.svelte

@@ -2,12 +2,14 @@
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { RangeCalendarDayProps } from "../types.js";
 	import { useRangeCalendarDay } from "../range-calendar.svelte.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
+
+	const uid = $props.id();
 
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		...restProps
 	}: RangeCalendarDayProps = $props();

package/dist/bits/range-calendar/components/range-calendar.svelte

@@ -4,14 +4,16 @@
 	import type { RangeCalendarRootProps } from "../types.js";
 	import { useRangeCalendarRoot } from "../range-calendar.svelte.js";
 	import { noop } from "../../../internal/noop.js";
-	import { useId } from "../../../internal/use-id.js";
+	import { createId } from "../../../internal/create-id.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
 	import { watch } from "runed";
 
+	const uid = $props.id();
+
 	let {
 		children,
 		child,
-		id = useId(),
+		id = createId(uid),
 		ref = $bindable(null),
 		value = $bindable(),
 		onValueChange = noop,