bits-ui 2.3.1 → 2.4.1

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

@@ -76,6 +76,7 @@
 				<EscapeLayer
 					{...mergedProps}
 					enabled={contentState.root.opts.open.current}
+					ref={contentState.opts.ref}
 					onEscapeKeydown={(e) => {
 						onEscapeKeydown(e);
 						if (e.defaultPrevented) return;

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { watch } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { type DateValue } from "@internationalized/date";
 	import { useCalendarRoot } from "../calendar.svelte.js";
@@ -6,7 +7,7 @@
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	let {
 		child,
@@ -24,7 +25,7 @@
 		isDateUnavailable = () => false,
 		fixedWeeks = false,
 		numberOfMonths = 1,
-		locale = "en",
+		locale,
 		calendarLabel = "Event",
 		disabled = false,
 		readonly = false,
@@ -84,7 +85,7 @@
 		isDateUnavailable: box.with(() => isDateUnavailable),
 		fixedWeeks: box.with(() => fixedWeeks),
 		numberOfMonths: box.with(() => numberOfMonths),
-		locale: box.with(() => locale),
+		locale: resolveLocaleProp(() => locale),
 		calendarLabel: box.with(() => calendarLabel),
 		readonly: box.with(() => readonly),
 		disabled: box.with(() => disabled),

package/dist/bits/date-field/components/date-field.svelte

@@ -1,18 +1,19 @@
 <script lang="ts">
+	import { watch } from "runed";
 	import { box } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { useDateFieldRoot } from "../date-field.svelte.js";
 	import type { DateFieldRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	let {
 		disabled = false,
 		granularity,
 		hideTimeZone = false,
 		hourCycle,
-		locale = "en",
+		locale,
 		maxValue,
 		minValue,
 		onPlaceholderChange = noop,
@@ -73,7 +74,7 @@
 		granularity: box.with(() => granularity),
 		hideTimeZone: box.with(() => hideTimeZone),
 		hourCycle: box.with(() => hourCycle),
-		locale: box.with(() => locale),
+		locale: resolveLocaleProp(() => locale),
 		maxValue: box.with(() => maxValue),
 		minValue: box.with(() => minValue),
 		validate: box.with(() => validate),

package/dist/bits/date-picker/components/date-picker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	// Date Picker composes the DateField, Popover, and Calendar components
+	import { watch } from "runed";
 	import { box } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { useDatePickerRoot } from "../date-picker.svelte.js";
@@ -9,7 +10,7 @@
 	import { useDateFieldRoot } from "../../date-field/date-field.svelte.js";
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	let {
 		open = $bindable(false),
@@ -28,7 +29,7 @@
 		granularity,
 		readonlySegments = [],
 		hourCycle,
-		locale = "en",
+		locale,
 		hideTimeZone = false,
 		required = false,
 		calendarLabel = "Event",
@@ -107,7 +108,7 @@
 		granularity: box.with(() => granularity),
 		readonlySegments: box.with(() => readonlySegments),
 		hourCycle: box.with(() => hourCycle),
-		locale: box.with(() => locale),
+		locale: resolveLocaleProp(() => locale),
 		hideTimeZone: box.with(() => hideTimeZone),
 		required: box.with(() => required),
 		calendarLabel: box.with(() => calendarLabel),

package/dist/bits/date-range-field/components/date-range-field.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { watch } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { useDateRangeFieldRoot } from "../date-range-field.svelte.js";
@@ -7,7 +8,7 @@
 	import { noop } from "../../../internal/noop.js";
 	import type { DateRange } from "../../../shared/index.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	const uid = $props.id();
 
@@ -23,7 +24,7 @@
 		required = false,
 		hourCycle,
 		granularity,
-		locale = "en-US",
+		locale,
 		hideTimeZone = false,
 		validate = noop,
 		onInvalid = noop,
@@ -89,7 +90,7 @@
 		required: box.with(() => required),
 		hourCycle: box.with(() => hourCycle),
 		granularity: box.with(() => granularity),
-		locale: box.with(() => locale),
+		locale: resolveLocaleProp(() => locale),
 		hideTimeZone: box.with(() => hideTimeZone),
 		validate: box.with(() => validate),
 		maxValue: box.with(() => maxValue),

package/dist/bits/date-range-picker/components/date-range-picker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { watch } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { useDateRangePickerRoot } from "../date-range-picker.svelte.js";
@@ -10,7 +11,7 @@
 	import { useId } from "../../../internal/use-id.js";
 	import type { DateRange } from "../../../shared/index.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	let {
 		open = $bindable(false),
@@ -30,7 +31,7 @@
 		granularity,
 		readonlySegments = [],
 		hourCycle,
-		locale = "en",
+		locale,
 		hideTimeZone = false,
 		required = false,
 		calendarLabel = "Event",
@@ -136,7 +137,7 @@
 		granularity: box.with(() => granularity),
 		readonlySegments: box.with(() => readonlySegments),
 		hourCycle: box.with(() => hourCycle),
-		locale: box.with(() => locale),
+		locale: resolveLocaleProp(() => locale),
 		hideTimeZone: box.with(() => hideTimeZone),
 		required: box.with(() => required),
 		calendarLabel: box.with(() => calendarLabel),

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

@@ -69,6 +69,7 @@
 				<EscapeLayer
 					{...mergedProps}
 					enabled={contentState.root.opts.open.current}
+					ref={contentState.opts.ref}
 					onEscapeKeydown={(e) => {
 						onEscapeKeydown(e);
 						if (e.defaultPrevented) return;

package/dist/bits/index.d.ts

@@ -2,6 +2,7 @@ export { Accordion } from "./accordion/index.js";
 export { AlertDialog } from "./alert-dialog/index.js";
 export { AspectRatio } from "./aspect-ratio/index.js";
 export { Avatar } from "./avatar/index.js";
+export { BitsConfig, getBitsConfig } from "./utilities/config/index.js";
 export { Button } from "./button/index.js";
 export { Calendar } from "./calendar/index.js";
 export { Checkbox } from "./checkbox/index.js";

package/dist/bits/index.js

@@ -2,6 +2,7 @@ export { Accordion } from "./accordion/index.js";
 export { AlertDialog } from "./alert-dialog/index.js";
 export { AspectRatio } from "./aspect-ratio/index.js";
 export { Avatar } from "./avatar/index.js";
+export { BitsConfig, getBitsConfig } from "./utilities/config/index.js";
 export { Button } from "./button/index.js";
 export { Calendar } from "./calendar/index.js";
 export { Checkbox } from "./checkbox/index.js";

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

@@ -73,6 +73,7 @@
 	{#snippet children({ props: dismissibleProps })}
 		<EscapeLayer
 			enabled={true}
+			ref={contentImplState.opts.ref}
 			onEscapeKeydown={(e) => {
 				onEscapeKeydown(e);
 				if (e.defaultPrevented) return;

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { watch } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { type DateValue } from "@internationalized/date";
 	import type { RangeCalendarRootProps } from "../types.js";
@@ -6,7 +7,7 @@
 	import { noop } from "../../../internal/noop.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { getDefaultDate } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	const uid = $props.id();
 
@@ -26,7 +27,7 @@
 		isDateUnavailable = () => false,
 		fixedWeeks = false,
 		numberOfMonths = 1,
-		locale = "en",
+		locale,
 		calendarLabel = "Event",
 		disabled = false,
 		readonly = false,
@@ -107,7 +108,7 @@
 		weekStartsOn: box.with(() => weekStartsOn),
 		weekdayFormat: box.with(() => weekdayFormat),
 		numberOfMonths: box.with(() => numberOfMonths),
-		locale: box.with(() => locale),
+		locale: resolveLocaleProp(() => locale),
 		calendarLabel: box.with(() => calendarLabel),
 		fixedWeeks: box.with(() => fixedWeeks),
 		disableDaysOutsideMonth: box.with(() => disableDaysOutsideMonth),

package/dist/bits/scroll-area/scroll-area.svelte.js

@@ -506,7 +506,7 @@ class ScrollAreaScrollbarSharedState {
                 if (isScrollbarWheel)
                     this.handleWheelScroll(e, maxScrollPos);
             };
-            const unsubListener = addEventListener(document, "wheel", handleWheel, {
+            const unsubListener = addEventListener(this.root.domContext.getDocument(), "wheel", handleWheel, {
                 passive: false,
             });
             return unsubListener;

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

@@ -442,7 +442,7 @@ class SelectTriggerState {
                     return;
                 this.root.opts.value.current = matchedItem.value;
             },
-            enabled: !this.root.isMulti && this.root.dataTypeaheadEnabled,
+            enabled: () => !this.root.isMulti && this.root.dataTypeaheadEnabled,
             candidateValues: () => (this.root.isMulti ? [] : this.root.candidateLabels),
             getWindow: () => this.root.domContext.getWindow(),
         });

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

@@ -1,4 +1,4 @@
-import { type Box, type ReadableBox } from "svelte-toolbelt";
+import { type Box, type ReadableBox, DOMContext } from "svelte-toolbelt";
 import { Context } from "runed";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { BitsKeyboardEvent, OnChangeFn, WithRefProps } from "../../internal/types.js";
@@ -22,6 +22,7 @@ declare class SliderBaseRootState {
     isActive: boolean;
     direction: "rl" | "lr" | "tb" | "bt";
     normalizedSteps: number[];
+    domContext: DOMContext;
     constructor(opts: SliderBaseRootStateProps);
     isThumbActive(_index: number): boolean;
     getAllThumbs: () => HTMLElement[];

package/dist/bits/slider/slider.svelte.js

@@ -3,7 +3,7 @@
  * Abdelrahman (https://github.com/abdel-17)
  */
 import { untrack } from "svelte";
-import { executeCallbacks, onMountEffect, attachRef, } from "svelte-toolbelt";
+import { executeCallbacks, onMountEffect, attachRef, DOMContext, } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { Context, watch } from "runed";
 import { getRangeStyles, getThumbStyles, getTickStyles, normalizeSteps, snapValueToCustomSteps, getAdjacentStepValue, getTickLabelStyles, getThumbLabelStyles, } from "./helpers.js";
@@ -31,8 +31,10 @@ class SliderBaseRootState {
     normalizedSteps = $derived.by(() => {
         return normalizeSteps(this.opts.step.current, this.opts.min.current, this.opts.max.current);
     });
+    domContext;
     constructor(opts) {
         this.opts = opts;
+        this.domContext = new DOMContext(this.opts.ref);
     }
     isThumbActive(_index) {
         return this.isActive;
@@ -101,7 +103,7 @@ class SliderSingleRootState extends SliderBaseRootState {
         super(opts);
         this.opts = opts;
         onMountEffect(() => {
-            return executeCallbacks(on(document, "pointerdown", this.handlePointerDown), on(document, "pointerup", this.handlePointerUp), on(document, "pointermove", this.handlePointerMove), on(document, "pointerleave", this.handlePointerUp));
+            return executeCallbacks(on(this.domContext.getDocument(), "pointerdown", this.handlePointerDown), on(this.domContext.getDocument(), "pointerup", this.handlePointerUp), on(this.domContext.getDocument(), "pointermove", this.handlePointerMove), on(this.domContext.getDocument(), "pointerleave", this.handlePointerUp));
         });
         watch([
             () => this.opts.step.current,
@@ -191,7 +193,7 @@ class SliderSingleRootState extends SliderBaseRootState {
         const closestThumb = this.getAllThumbs()[0];
         if (!closestThumb || !sliderNode)
             return;
-        const target = e.target;
+        const target = e.composedPath()[0] ?? e.target;
         if (!isElementOrSVGElement(target) || !sliderNode.contains(target))
             return;
         e.preventDefault();
@@ -286,7 +288,7 @@ class SliderMultiRootState extends SliderBaseRootState {
         super(opts);
         this.opts = opts;
         onMountEffect(() => {
-            return executeCallbacks(on(document, "pointerdown", this.handlePointerDown), on(document, "pointerup", this.handlePointerUp), on(document, "pointermove", this.handlePointerMove), on(document, "pointerleave", this.handlePointerUp));
+            return executeCallbacks(on(this.domContext.getDocument(), "pointerdown", this.handlePointerDown), on(this.domContext.getDocument(), "pointerup", this.handlePointerUp), on(this.domContext.getDocument(), "pointermove", this.handlePointerMove), on(this.domContext.getDocument(), "pointerleave", this.handlePointerUp));
         });
         watch([
             () => this.opts.step.current,
@@ -405,7 +407,7 @@ class SliderMultiRootState extends SliderBaseRootState {
         const closestThumb = this.#getClosestThumb(e);
         if (!closestThumb || !sliderNode)
             return;
-        const target = e.target;
+        const target = e.composedPath()[0] ?? e.target;
         if (!isElementOrSVGElement(target) || !sliderNode.contains(target))
             return;
         e.preventDefault();

package/dist/bits/time-field/components/time-field.svelte

@@ -5,19 +5,20 @@
 </script>
 
 <script lang="ts" generics="T extends TimeValue = Time">
+	import { watch } from "runed";
 	import { box } from "svelte-toolbelt";
 	import { useTimeFieldRoot } from "../time-field.svelte.js";
 	import type { TimeFieldRootProps } from "../types.js";
 	import { noop } from "../../../internal/noop.js";
 	import { getDefaultTime } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	let {
 		disabled = false,
 		granularity,
 		hideTimeZone = false,
 		hourCycle,
-		locale = "en",
+		locale,
 		maxValue,
 		minValue,
 		onPlaceholderChange = noop,
@@ -78,7 +79,7 @@
 		granularity: box.with(() => granularity),
 		hideTimeZone: box.with(() => hideTimeZone),
 		hourCycle: box.with(() => hourCycle),
-		locale: box.with(() => locale),
+		locale: resolveLocaleProp(() => locale),
 		maxValue: box.with(() => maxValue),
 		minValue: box.with(() => minValue),
 		validate: box.with(() => validate),

package/dist/bits/time-range-field/components/time-range-field.svelte

@@ -6,13 +6,14 @@
 </script>
 
 <script lang="ts" generics="T extends TimeValue = Time">
+	import { watch } from "runed";
 	import { box, mergeProps } from "svelte-toolbelt";
 	import { useTimeRangeFieldRoot } from "../time-range-field.svelte.js";
 	import type { TimeRangeFieldRootProps } from "../types.js";
 	import { createId } from "../../../internal/create-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import { getDefaultTime } from "../../../internal/date-time/utils.js";
-	import { watch } from "runed";
+	import { resolveLocaleProp } from "../../utilities/config/prop-resolvers.js";
 
 	const uid = $props.id();
 
@@ -28,7 +29,7 @@
 		required = false,
 		hourCycle,
 		granularity,
-		locale = "en-US",
+		locale,
 		hideTimeZone = false,
 		validate = noop,
 		onInvalid = noop,
@@ -94,7 +95,7 @@
 		required: box.with(() => required),
 		hourCycle: box.with(() => hourCycle),
 		granularity: box.with(() => granularity),
-		locale: box.with(() => locale),
+		locale: resolveLocaleProp(() => locale),
 		hideTimeZone: box.with(() => hideTimeZone),
 		validate: box.with(() => validate),
 		maxValue: box.with(() => maxValue),

package/dist/bits/utilities/config/bits-config.d.ts

@@ -0,0 +1,44 @@
+import { Context } from "runed";
+import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
+import type { BitsConfigPropsWithoutChildren } from "./types.js";
+type BitsConfigStateProps = ReadableBoxedValues<BitsConfigPropsWithoutChildren>;
+export declare const BitsConfigContext: Context<BitsConfigState>;
+/**
+ * Gets the current Bits UI configuration state from the context.
+ *
+ * Returns a default configuration (where all values are `undefined`) if no configuration is found.
+ */
+export declare function getBitsConfig(): Required<ReadableBoxedValues<BitsConfigPropsWithoutChildren>>;
+/**
+ * Creates and sets a new Bits UI configuration state that inherits from parent configs.
+ *
+ * @param opts - Configuration options for this level
+ * @returns The configuration state instance
+ *
+ * @example
+ * ```typescript
+ * // In a component that wants to set a default portal target
+ * const config = useBitsConfig({ defaultPortalTo: box("#some-element") });
+ *
+ * // Child components will inherit this config and can override specific values
+ * const childConfig = useBitsConfig({ someOtherProp: box("value") });
+ * // childConfig still has defaultPortalTo="#some-element" from parent
+ * ```
+ */
+export declare function useBitsConfig(opts: BitsConfigStateProps): BitsConfigState;
+/**
+ * Configuration state that inherits from parent configurations.
+ *
+ * @example
+ * Config resolution:
+ * ```
+ * Level 1: { defaultPortalTo: "#some-element", theme: "dark" }
+ * Level 2: { spacing: "large" } // inherits defaultPortalTo="#some-element", theme="dark"
+ * Level 3: { theme: "light" }   // inherits defaultPortalTo="#some-element", spacing="large", overrides theme="light"
+ * ```
+ */
+export declare class BitsConfigState {
+    readonly opts: Required<BitsConfigStateProps>;
+    constructor(parent: BitsConfigState | null, opts: BitsConfigStateProps);
+}
+export {};

package/dist/bits/utilities/config/bits-config.js

@@ -0,0 +1,92 @@
+import { Context } from "runed";
+import { box } from "svelte-toolbelt";
+export const BitsConfigContext = new Context("BitsConfig");
+/**
+ * Gets the current Bits UI configuration state from the context.
+ *
+ * Returns a default configuration (where all values are `undefined`) if no configuration is found.
+ */
+export function getBitsConfig() {
+    const fallback = new BitsConfigState(null, {});
+    return BitsConfigContext.getOr(fallback).opts;
+}
+/**
+ * Creates and sets a new Bits UI configuration state that inherits from parent configs.
+ *
+ * @param opts - Configuration options for this level
+ * @returns The configuration state instance
+ *
+ * @example
+ * ```typescript
+ * // In a component that wants to set a default portal target
+ * const config = useBitsConfig({ defaultPortalTo: box("#some-element") });
+ *
+ * // Child components will inherit this config and can override specific values
+ * const childConfig = useBitsConfig({ someOtherProp: box("value") });
+ * // childConfig still has defaultPortalTo="#some-element" from parent
+ * ```
+ */
+export function useBitsConfig(opts) {
+    return BitsConfigContext.set(new BitsConfigState(BitsConfigContext.getOr(null), opts));
+}
+/**
+ * Configuration state that inherits from parent configurations.
+ *
+ * @example
+ * Config resolution:
+ * ```
+ * Level 1: { defaultPortalTo: "#some-element", theme: "dark" }
+ * Level 2: { spacing: "large" } // inherits defaultPortalTo="#some-element", theme="dark"
+ * Level 3: { theme: "light" }   // inherits defaultPortalTo="#some-element", spacing="large", overrides theme="light"
+ * ```
+ */
+export class BitsConfigState {
+    opts;
+    constructor(parent, opts) {
+        const resolveConfigOption = createConfigResolver(parent, opts);
+        this.opts = {
+            defaultPortalTo: resolveConfigOption((config) => config.defaultPortalTo),
+            defaultLocale: resolveConfigOption((config) => config.defaultLocale),
+        };
+    }
+}
+/**
+ * Returns a config resolver that resolves a given config option's value.
+ *
+ * The resolver creates reactive boxes that resolve config option values using this priority:
+ * 1. Current level's value (if defined)
+ * 2. Parent level's value (if defined and current is undefined)
+ * 3. `undefined` (if no value is found in either parent or child)
+ *
+ * @param parent - Parent configuration state (null if this is root level)
+ * @param currentOpts - Current level's configuration options
+ *
+ * @example
+ * ```typescript
+ * // Given this hierarchy:
+ * // Root: { defaultPortalTo: "#some-element" }
+ * // Child: { someOtherProp: "value" } // no defaultPortalTo specified
+ *
+ * const resolveConfigOption = createConfigResolver(parent, opts);
+ * const portalTo = resolveConfigOption(config => config.defaultPortalTo);
+ *
+ * // portalTo.current === "#some-element" (inherited from parent)
+ * // even when child didn't specify `defaultPortalTo`
+ * ```
+ */
+function createConfigResolver(parent, currentOpts) {
+    return (getter) => {
+        const configOption = box.with(() => {
+            // try current opts first
+            const value = getter(currentOpts)?.current;
+            if (value !== undefined)
+                return value;
+            // if no parent, return undefined
+            if (parent === null)
+                return undefined;
+            // get value from parent (which already has its own chain resolved)
+            return getter(parent.opts)?.current;
+        });
+        return configOption;
+    };
+}

package/dist/bits/utilities/config/components/bits-config.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { BitsConfigProps } from "../types.js";
+	import { useBitsConfig } from "../bits-config.js";
+	import { box } from "svelte-toolbelt";
+
+	let { children, defaultPortalTo, defaultLocale }: BitsConfigProps = $props();
+
+	useBitsConfig({
+		defaultPortalTo: box.with(() => defaultPortalTo),
+		defaultLocale: box.with(() => defaultLocale),
+	});
+</script>
+
+{@render children?.()}

package/dist/bits/utilities/config/components/bits-config.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { BitsConfigProps } from "../types.js";
+declare const BitsConfig: import("svelte").Component<BitsConfigProps, {}, "">;
+type BitsConfig = ReturnType<typeof BitsConfig>;
+export default BitsConfig;

package/dist/bits/utilities/config/exports.d.ts

@@ -0,0 +1,2 @@
+export { default as BitsConfig } from "./components/bits-config.svelte";
+export { getBitsConfig, BitsConfigState } from "./bits-config.js";

package/dist/bits/utilities/config/exports.js

@@ -0,0 +1,2 @@
+export { default as BitsConfig } from "./components/bits-config.svelte";
+export { getBitsConfig, BitsConfigState } from "./bits-config.js";

package/dist/bits/utilities/config/index.d.ts

@@ -0,0 +1 @@
+export * from "./exports.js";

package/dist/bits/utilities/config/index.js

@@ -0,0 +1 @@
+export * from "./exports.js";

package/dist/bits/utilities/config/prop-resolvers.d.ts

@@ -0,0 +1,13 @@
+import { type Getter, type ReadableBox } from "svelte-toolbelt";
+/**
+ * Resolves a locale value using the prop, the config default, or a fallback.
+ *
+ * Default value: `"en"`
+ */
+export declare const resolveLocaleProp: (getProp: Getter<string | undefined>) => ReadableBox<string>;
+/**
+ * Resolves a portal's `to` value using the prop, the config default, or a fallback.
+ *
+ * Default value: `"body"`
+ */
+export declare const resolvePortalToProp: (getProp: Getter<string | Element | undefined>) => ReadableBox<string | Element>;

package/dist/bits/utilities/config/prop-resolvers.js

@@ -0,0 +1,37 @@
+import { box } from "svelte-toolbelt";
+import { getBitsConfig } from "./bits-config.js";
+/**
+ * Creates a generic prop resolver that follows a standard priority chain:
+ * 1. The getter's prop value (if defined)
+ * 2. The config default value (if no getter prop value is defined)
+ * 3. The fallback value (if no config value found)
+ */
+function createPropResolver(configOption, fallback) {
+    return (getProp) => {
+        const config = getBitsConfig();
+        return box.with(() => {
+            // 1. return the prop's value, if provided
+            const propValue = getProp();
+            if (propValue !== undefined)
+                return propValue;
+            // 2. return the resolved config option value, if available
+            const option = configOption(config).current;
+            if (option !== undefined)
+                return option;
+            // 3. return the fallback if no other value is found
+            return fallback;
+        });
+    };
+}
+/**
+ * Resolves a locale value using the prop, the config default, or a fallback.
+ *
+ * Default value: `"en"`
+ */
+export const resolveLocaleProp = createPropResolver((config) => config.defaultLocale, "en");
+/**
+ * Resolves a portal's `to` value using the prop, the config default, or a fallback.
+ *
+ * Default value: `"body"`
+ */
+export const resolvePortalToProp = createPropResolver((config) => config.defaultPortalTo, "body");

package/dist/bits/utilities/config/types.d.ts

@@ -0,0 +1,13 @@
+import type { WithChildren } from "../../../internal/types.js";
+import type { PortalTarget } from "../portal/types.js";
+export type BitsConfigPropsWithoutChildren = {
+    /**
+     * The default portal `to`/target to use for the `Portal` components throughout the app.
+     */
+    defaultPortalTo?: PortalTarget;
+    /**
+     * The default locale to use for the components that support localization.
+     */
+    defaultLocale?: string;
+};
+export type BitsConfigProps = WithChildren<BitsConfigPropsWithoutChildren>;

package/dist/bits/utilities/config/types.js

@@ -0,0 +1 @@
+export {};

package/dist/bits/utilities/escape-layer/escape-layer.svelte

@@ -9,12 +9,14 @@
 		onEscapeKeydown = noop,
 		children,
 		enabled,
+		ref,
 	}: EscapeLayerImplProps = $props();
 
 	useEscapeLayer({
 		escapeKeydownBehavior: box.with(() => escapeKeydownBehavior),
 		onEscapeKeydown: box.with(() => onEscapeKeydown),
 		enabled: box.with(() => enabled),
+		ref,
 	});
 </script>
 

package/dist/bits/utilities/escape-layer/types.d.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from "svelte";
+import type { Box } from "svelte-toolbelt";
 export type EscapeBehaviorType = "close" | "defer-otherwise-close" | "defer-otherwise-ignore" | "ignore";
 export type EscapeLayerProps = {
     /**
@@ -24,4 +25,5 @@ export type EscapeLayerImplProps = {
      */
     enabled: boolean;
     children?: Snippet;
+    ref: Box<HTMLElement | null>;
 } & EscapeLayerProps;

package/dist/bits/utilities/escape-layer/use-escape-layer.svelte.d.ts

@@ -1,9 +1,13 @@
+import { DOMContext, type Box } from "svelte-toolbelt";
 import type { EscapeLayerImplProps } from "./types.js";
 import type { ReadableBoxedValues } from "../../../internal/box.svelte.js";
-type EscapeLayerStateProps = ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, "children">>>;
+type EscapeLayerStateProps = ReadableBoxedValues<Required<Omit<EscapeLayerImplProps, "children" | "ref">>> & {
+    ref: Box<HTMLElement | null>;
+};
 export declare class EscapeLayerState {
     #private;
     readonly opts: EscapeLayerStateProps;
+    readonly domContext: DOMContext;
     constructor(opts: EscapeLayerStateProps);
 }
 export declare function useEscapeLayer(props: EscapeLayerStateProps): EscapeLayerState;

package/dist/bits/utilities/escape-layer/use-escape-layer.svelte.js

@@ -1,3 +1,4 @@
+import { DOMContext } from "svelte-toolbelt";
 import { watch } from "runed";
 import { on } from "svelte/events";
 import { kbd } from "../../../internal/kbd.js";
@@ -5,8 +6,10 @@ import { noop } from "../../../internal/noop.js";
 globalThis.bitsEscapeLayers ??= new Map();
 export class EscapeLayerState {
     opts;
+    domContext;
     constructor(opts) {
         this.opts = opts;
+        this.domContext = new DOMContext(this.opts.ref);
         let unsubEvents = noop;
         watch(() => opts.enabled.current, (enabled) => {
             if (enabled) {
@@ -20,7 +23,7 @@ export class EscapeLayerState {
         });
     }
     #addEventListener = () => {
-        return on(document, "keydown", this.#onkeydown, { passive: false });
+        return on(this.domContext.getDocument(), "keydown", this.#onkeydown, { passive: false });
     };
     #onkeydown = (e) => {
         if (e.key !== kbd.ESCAPE || !isResponsibleEscapeLayer(this))

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -183,6 +183,8 @@ class FloatingContentState {
                 return cleanup;
             },
             open: () => this.opts.enabled.current,
+            sideOffset: () => this.opts.sideOffset.current,
+            alignOffset: () => this.opts.alignOffset.current,
         });
         $effect(() => {
             if (!this.floating.isPositioned)

package/dist/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -91,7 +91,7 @@
 			{ref}
 		>
 			{#snippet focusScope({ props: focusScopeProps })}
-				<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled}>
+				<EscapeLayer {onEscapeKeydown} {escapeKeydownBehavior} {enabled} {ref}>
 					<DismissibleLayer
 						{id}
 						{onInteractOutside}

package/dist/bits/utilities/portal/portal.svelte

@@ -5,40 +5,41 @@
 	import PortalConsumer from "./portal-consumer.svelte";
 	import type { PortalProps } from "./types.js";
 	import { isBrowser } from "../../../internal/is.js";
+	import { resolvePortalToProp } from "../config/prop-resolvers.js";
 
-	let { to = "body", children, disabled }: PortalProps = $props();
+	let { to: toProp, children, disabled }: PortalProps = $props();
 
+	const to = resolvePortalToProp(() => toProp);
 	const context = getAllContexts();
 
 	let target = $derived(getTarget());
 
 	function getTarget() {
 		if (!isBrowser || disabled) return null;
-		let localTarget: HTMLElement | null | DocumentFragment | Element = null;
-		if (typeof to === "string") {
-			localTarget = document.querySelector(to);
-			if (localTarget === null) {
-				if (DEV) {
-					throw new Error(`Target element "${to}" not found.`);
-				}
+
+		let localTarget: Element | null = null;
+
+		if (typeof to.current === "string") {
+			const target = document.querySelector(to.current);
+			if (DEV && target === null) {
+				throw new Error(`Target element "${to.current}" not found.`);
 			}
-		} else if (to instanceof HTMLElement || to instanceof DocumentFragment) {
-			localTarget = to;
+			localTarget = target;
 		} else {
-			if (DEV) {
-				throw new TypeError(
-					`Unknown portal target type: ${
-						to === null ? "null" : typeof to
-					}. Allowed types: string (query selector), HTMLElement, or DocumentFragment.`
-				);
-			}
+			localTarget = to.current;
+		}
+
+		if (DEV && !(localTarget instanceof Element)) {
+			const type = localTarget === null ? "null" : typeof localTarget;
+			throw new TypeError(
+				`Unknown portal target type: ${type}. Allowed types: string (query selector) or Element.`
+			);
 		}
 
 		return localTarget;
 	}
 
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	let instance: any;
+	let instance: ReturnType<typeof mount> | null;
 
 	function unmountInstance() {
 		if (instance) {
@@ -53,8 +54,7 @@
 			return;
 		}
 		instance = mount(PortalConsumer, {
-			// eslint-disable-next-line @typescript-eslint/no-explicit-any
-			target: target as any,
+			target: target,
 			props: { children },
 			context,
 		});

package/dist/bits/utilities/portal/types.d.ts

@@ -1,11 +1,12 @@
 import type { Snippet } from "svelte";
+export type PortalTarget = Element | string;
 export type PortalProps = {
     /**
      * Where to portal the content to.
      *
      * @default document.body
      */
-    to?: HTMLElement | string | DocumentFragment;
+    to?: PortalTarget;
     /**
      * Disable portalling and render the component inline
      *

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup as unstable_RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, BitsConfig, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup as unstable_RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, getBitsConfig, } from "./bits/index.js";
 export * from "./shared/index.js";
 export type * from "./shared/index.js";
 export * from "./types.js";

package/dist/index.js

@@ -1,3 +1,3 @@
-export { Accordion, AlertDialog, AspectRatio, Avatar, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup as unstable_RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, } from "./bits/index.js";
+export { Accordion, AlertDialog, AspectRatio, Avatar, BitsConfig, Button, Calendar, Checkbox, Collapsible, Combobox, Command, ContextMenu, DateField, DatePicker, DateRangeField, DateRangePicker, Dialog, DropdownMenu, Label, LinkPreview, Menubar, Meter, NavigationMenu, Pagination, PinInput, Popover, Progress, RadioGroup, RangeCalendar, RatingGroup as unstable_RatingGroup, ScrollArea, Select, Separator, Slider, Switch, Tabs, TimeField, TimeRangeField, Toggle, ToggleGroup, Toolbar, Tooltip, Portal, IsUsingKeyboard, computeCommandScore, getBitsConfig, } from "./bits/index.js";
 export * from "./shared/index.js";
 export * from "./types.js";

package/dist/internal/floating-svelte/types.d.ts

@@ -41,6 +41,18 @@ export type UseFloatingOptions = {
      * @default undefined
      */
     whileElementsMounted?: (reference: ReferenceElement, floating: FloatingElement, update: () => void) => () => void;
+    /**
+     * The offset from the reference element along the side axis.
+     * Used to detect bad coordinates during transitions.
+     * @default undefined
+     */
+    sideOffset?: ValueOrGetValue<number | undefined>;
+    /**
+     * The offset from the reference element along the alignment axis.
+     * Used to detect bad coordinates during transitions.
+     * @default undefined
+     */
+    alignOffset?: ValueOrGetValue<number | undefined>;
 };
 export type UseFloatingReturn = {
     /**

package/dist/internal/floating-svelte/use-floating.svelte.js

@@ -9,6 +9,8 @@ export function useFloating(options) {
     const transformOption = $derived(get(options.transform) ?? true);
     const placementOption = $derived(get(options.placement) ?? "bottom");
     const strategyOption = $derived(get(options.strategy) ?? "absolute");
+    const sideOffsetOption = $derived(get(options.sideOffset) ?? 0);
+    const alignOffsetOption = $derived(get(options.alignOffset) ?? 0);
     const reference = options.reference;
     /** State */
     let x = $state(0);
@@ -19,21 +21,17 @@ export function useFloating(options) {
     let middlewareData = $state({});
     let isPositioned = $state(false);
     const floatingStyles = $derived.by(() => {
-        const initialStyles = {
-            position: strategy,
-            left: "0",
-            top: "0",
-        };
-        if (!floating.current) {
-            return initialStyles;
-        }
-        const xVal = roundByDPR(floating.current, x);
-        const yVal = roundByDPR(floating.current, y);
+        // preserve last known position when floating ref is null (during transitions)
+        const xVal = floating.current ? roundByDPR(floating.current, x) : x;
+        const yVal = floating.current ? roundByDPR(floating.current, y) : y;
         if (transformOption) {
             return {
-                ...initialStyles,
+                position: strategy,
+                left: "0",
+                top: "0",
                 transform: `translate(${xVal}px, ${yVal}px)`,
-                ...(getDPR(floating.current) >= 1.5 && {
+                ...(floating.current &&
+                    getDPR(floating.current) >= 1.5 && {
                     willChange: "transform",
                 }),
             };
@@ -54,6 +52,14 @@ export function useFloating(options) {
             placement: placementOption,
             strategy: strategyOption,
         }).then((position) => {
+            // ignore bad coordinates that cause jumping during close transitions
+            if (!openOption && x !== 0 && y !== 0) {
+                // if we had a good position and now getting coordinates near
+                // the expected offset bounds during close, ignore it
+                const maxExpectedOffset = Math.max(Math.abs(sideOffsetOption), Math.abs(alignOffsetOption), 15);
+                if (position.x <= maxExpectedOffset && position.y <= maxExpectedOffset)
+                    return;
+            }
             x = position.x;
             y = position.y;
             strategy = position.strategy;

package/dist/internal/use-data-typeahead.svelte.d.ts

@@ -4,7 +4,7 @@ type UseDataTypeaheadOpts = {
     onMatch: (value: string) => void;
     getCurrentItem: () => string;
     candidateValues: Getter<string[]>;
-    enabled: boolean;
+    enabled: Getter<boolean>;
     getWindow: () => Window & typeof globalThis;
 };
 export declare function useDataTypeahead(opts: UseDataTypeaheadOpts): {

package/dist/internal/use-data-typeahead.svelte.js

@@ -8,7 +8,7 @@ export function useDataTypeahead(opts) {
     });
     const candidateValues = $derived(opts.candidateValues());
     function handleTypeaheadSearch(key) {
-        if (!opts.enabled)
+        if (!opts.enabled())
             return;
         if (!candidateValues.length)
             return;

package/dist/internal/use-grace-area.svelte.js

@@ -1,4 +1,4 @@
-import { executeCallbacks, getWindow } from "svelte-toolbelt";
+import { executeCallbacks, getDocument, getWindow } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { watch } from "runed";
 import { boxAutoReset } from "./box-auto-reset.svelte.js";
@@ -60,7 +60,10 @@ export function useGraceArea(opts) {
                 opts.onPointerExit();
             }
         };
-        return on(document, "pointermove", handleTrackPointerGrace);
+        const doc = getDocument(opts.triggerNode() ?? opts.contentNode());
+        if (!doc)
+            return;
+        return on(doc, "pointermove", handleTrackPointerGrace);
     });
     return {
         isPointerInTransit,

package/dist/types.d.ts

@@ -40,4 +40,5 @@ export type * from "./bits/toggle/types.js";
 export type * from "./bits/toggle-group/types.js";
 export type * from "./bits/toolbar/types.js";
 export type * from "./bits/tooltip/types.js";
+export type * from "./bits/utilities/config/types.js";
 export type { PortalProps } from "./bits/utilities/portal/types.js";

package/package.json

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