bits-ui 2.8.0 → 2.8.2

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

@@ -1,5 +1,5 @@
 import { type Box, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { Orientation } from "../../shared/index.js";
 import { RovingFocusGroup } from "../../internal/roving-focus-group.js";
 interface AccordionBaseStateOpts extends WithRefOpts, ReadableBoxedValues<{
@@ -47,6 +47,7 @@ declare abstract class AccordionBaseState {
     readonly opts: AccordionBaseStateOpts;
     readonly rovingFocusGroup: RovingFocusGroup;
     abstract readonly isMulti: boolean;
+    readonly attachment: RefAttachment;
     constructor(opts: AccordionBaseStateOpts);
     abstract includesItem(item: string): boolean;
     abstract toggleItem(item: string): void;
@@ -79,6 +80,7 @@ export declare class AccordionItemState {
     readonly root: AccordionRoot;
     readonly isActive: boolean;
     readonly isDisabled: boolean;
+    readonly attachment: RefAttachment;
     constructor(opts: AccordionItemStateOpts);
     updateValue(): void;
     readonly props: {
@@ -92,6 +94,7 @@ export declare class AccordionTriggerState {
     #private;
     readonly opts: AccordionTriggerStateOpts;
     readonly itemState: AccordionItemState;
+    readonly attachment: RefAttachment;
     constructor(opts: AccordionTriggerStateOpts, itemState: AccordionItemState);
     static create(props: AccordionTriggerStateOpts): AccordionTriggerState;
     onclick(e: BitsMouseEvent): void;
@@ -113,6 +116,7 @@ export declare class AccordionContentState {
     #private;
     readonly opts: AccordionContentStateOpts;
     readonly item: AccordionItemState;
+    readonly attachment: RefAttachment;
     readonly open: boolean;
     constructor(opts: AccordionContentStateOpts, item: AccordionItemState);
     static create(props: AccordionContentStateOpts): AccordionContentState;
@@ -133,6 +137,7 @@ export declare class AccordionContentState {
 export declare class AccordionHeaderState {
     readonly opts: AccordionHeaderStateOpts;
     readonly item: AccordionItemState;
+    readonly attachment: RefAttachment;
     constructor(opts: AccordionHeaderStateOpts, item: AccordionItemState);
     static create(props: AccordionHeaderStateOpts): AccordionHeaderState;
     readonly props: {

package/dist/bits/accordion/accordion.svelte.js

@@ -13,6 +13,7 @@ const AccordionItemContext = new Context("Accordion.Item");
 class AccordionBaseState {
     opts;
     rovingFocusGroup;
+    attachment;
     constructor(opts) {
         this.opts = opts;
         this.rovingFocusGroup = new RovingFocusGroup({
@@ -21,13 +22,14 @@ class AccordionBaseState {
             loop: this.opts.loop,
             orientation: this.opts.orientation,
         });
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-orientation": getDataOrientation(this.opts.orientation.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         [accordionAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 class AccordionSingleState extends AccordionBaseState {
@@ -81,10 +83,12 @@ export class AccordionItemState {
     root;
     isActive = $derived.by(() => this.root.includesItem(this.opts.value.current));
     isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
+    attachment;
     constructor(opts) {
         this.opts = opts;
         this.root = opts.rootState;
         this.updateValue = this.updateValue.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     updateValue() {
         this.root.toggleItem(this.opts.value.current);
@@ -95,7 +99,7 @@ export class AccordionItemState {
         "data-disabled": getDataDisabled(this.isDisabled),
         "data-orientation": getDataOrientation(this.root.opts.orientation.current),
         [accordionAttrs.item]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class AccordionTriggerState {
@@ -105,12 +109,14 @@ export class AccordionTriggerState {
     #isDisabled = $derived.by(() => this.opts.disabled.current ||
         this.itemState.opts.disabled.current ||
         this.#root.opts.disabled.current);
+    attachment;
     constructor(opts, itemState) {
         this.opts = opts;
         this.itemState = itemState;
         this.#root = itemState.root;
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     static create(props) {
         return new AccordionTriggerState(props, AccordionItemContext.get());
@@ -144,12 +150,13 @@ export class AccordionTriggerState {
         tabindex: 0,
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class AccordionContentState {
     opts;
     item;
+    attachment;
     #originalStyles = undefined;
     #isMountAnimationPrevented = false;
     #dimensions = $state({ width: 0, height: 0 });
@@ -158,6 +165,7 @@ export class AccordionContentState {
         this.opts = opts;
         this.item = item;
         this.#isMountAnimationPrevented = this.item.isActive;
+        this.attachment = attachRef(this.opts.ref);
         // Prevent mount animations on initial render
         $effect(() => {
             const rAF = requestAnimationFrame(() => {
@@ -206,15 +214,17 @@ export class AccordionContentState {
             "--bits-accordion-content-height": `${this.#dimensions.height}px`,
             "--bits-accordion-content-width": `${this.#dimensions.width}px`,
         },
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class AccordionHeaderState {
     opts;
     item;
+    attachment;
     constructor(opts, item) {
         this.opts = opts;
         this.item = item;
+        this.attachment = attachRef(this.opts.ref);
     }
     static create(props) {
         return new AccordionHeaderState(props, AccordionItemContext.get());
@@ -227,6 +237,6 @@ export class AccordionHeaderState {
         "data-state": getDataOpenClosed(this.item.isActive),
         "data-orientation": getDataOrientation(this.item.root.opts.orientation.current),
         [accordionAttrs.header]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { afterTick, box, mergeProps } from "svelte-toolbelt";
+	import { afterSleep, box, mergeProps } from "svelte-toolbelt";
 	import type { AlertDialogContentProps } from "../types.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
@@ -10,7 +10,7 @@
 	import { noop } from "../../../internal/noop.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
 	import { DialogContentState } from "../../dialog/dialog.svelte.js";
-	import { shouldTrapFocus } from "../../../internal/should-trap-focus.js";
+	import { shouldEnableFocusTrap } from "../../../internal/should-enable-focus-trap.js";
 
 	const uid = $props.id();
 
@@ -51,25 +51,22 @@
 		<FocusScope
 			ref={contentState.opts.ref}
 			loop
-			trapFocus={shouldTrapFocus({
+			{trapFocus}
+			enabled={shouldEnableFocusTrap({
 				forceMount,
 				present: contentState.root.opts.open.current,
-				trapFocus,
 				open: contentState.root.opts.open.current,
 			})}
-			{id}
 			onCloseAutoFocus={(e) => {
 				onCloseAutoFocus(e);
 				if (e.defaultPrevented) return;
-				contentState.root.triggerNode?.focus();
+				afterSleep(0, () => contentState.root.triggerNode?.focus());
 			}}
 			onOpenAutoFocus={(e) => {
 				onOpenAutoFocus(e);
 				if (e.defaultPrevented) return;
 				e.preventDefault();
-				afterTick(() => {
-					contentState.opts.ref.current?.focus();
-				});
+				afterSleep(0, () => contentState.opts.ref.current?.focus());
 			}}
 		>
 			{#snippet focusScope({ props: focusScopeProps })}

package/dist/bits/aspect-ratio/aspect-ratio.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type ReadableBoxedValues } from "svelte-toolbelt";
-import type { WithRefOpts } from "../../internal/types.js";
+import type { RefAttachment, WithRefOpts } from "../../internal/types.js";
 interface AspectRatioRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
     ratio: number;
 }> {
@@ -7,6 +7,7 @@ interface AspectRatioRootStateOpts extends WithRefOpts, ReadableBoxedValues<{
 export declare class AspectRatioRootState {
     static create(opts: AspectRatioRootStateOpts): AspectRatioRootState;
     readonly opts: AspectRatioRootStateOpts;
+    readonly attachment: RefAttachment;
     constructor(opts: AspectRatioRootStateOpts);
     readonly props: {
         readonly id: string;

package/dist/bits/aspect-ratio/aspect-ratio.svelte.js

@@ -9,8 +9,10 @@ export class AspectRatioRootState {
         return new AspectRatioRootState(opts);
     }
     opts;
+    attachment;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -22,6 +24,6 @@ export class AspectRatioRootState {
             left: 0,
         },
         [aspectRatioAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

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

@@ -1,7 +1,7 @@
 import { DOMContext, type ReadableBox, type WritableBox, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { HTMLImgAttributes } from "svelte/elements";
 import type { AvatarImageLoadingStatus } from "./types.js";
-import type { WithRefOpts } from "../../internal/types.js";
+import type { RefAttachment, WithRefOpts } from "../../internal/types.js";
 type CrossOrigin = HTMLImgAttributes["crossorigin"];
 type ReferrerPolicy = HTMLImgAttributes["referrerpolicy"];
 type AvatarImageSrc = string | null | undefined;
@@ -13,6 +13,7 @@ export declare class AvatarRootState {
     static create(opts: AvatarRootStateOpts): AvatarRootState;
     readonly opts: AvatarRootStateOpts;
     readonly domContext: DOMContext;
+    readonly attachment: RefAttachment;
     constructor(opts: AvatarRootStateOpts);
     loadImage(src: string, crossorigin?: CrossOrigin, referrerPolicy?: ReferrerPolicy): (() => void) | undefined;
     props: {
@@ -30,6 +31,7 @@ export declare class AvatarImageState {
     static create(opts: AvatarImageStateOpts): AvatarImageState;
     readonly opts: AvatarImageStateOpts;
     readonly root: AvatarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: AvatarImageStateOpts, root: AvatarRootState);
     readonly props: {
         readonly id: string;
@@ -48,6 +50,7 @@ export declare class AvatarFallbackState {
     static create(opts: AvatarFallbackStateOpts): AvatarFallbackState;
     readonly opts: AvatarFallbackStateOpts;
     readonly root: AvatarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: AvatarFallbackStateOpts, root: AvatarRootState);
     readonly style: {
         display: string;

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

@@ -12,10 +12,12 @@ export class AvatarRootState {
     }
     opts;
     domContext;
+    attachment;
     constructor(opts) {
         this.opts = opts;
         this.domContext = new DOMContext(this.opts.ref);
         this.loadImage = this.loadImage.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     loadImage(src, crossorigin, referrerPolicy) {
         if (this.opts.loadingStatus.current === "loaded")
@@ -46,7 +48,7 @@ export class AvatarRootState {
         id: this.opts.id.current,
         [avatarAttrs.root]: "",
         "data-status": this.opts.loadingStatus.current,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class AvatarImageState {
@@ -55,9 +57,11 @@ export class AvatarImageState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         watch.pre([() => this.opts.src.current, () => this.opts.crossOrigin.current], ([src, crossOrigin]) => {
             if (!src) {
                 this.root.opts.loadingStatus.current = "error";
@@ -76,7 +80,7 @@ export class AvatarImageState {
         src: this.opts.src.current,
         crossorigin: this.opts.crossOrigin.current,
         referrerpolicy: this.opts.referrerPolicy.current,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class AvatarFallbackState {
@@ -85,15 +89,17 @@ export class AvatarFallbackState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     style = $derived.by(() => this.root.opts.loadingStatus.current === "loaded" ? { display: "none" } : undefined);
     props = $derived.by(() => ({
         style: this.style,
         "data-status": this.root.opts.loadingStatus.current,
         [avatarAttrs.fallback]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

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

@@ -2,7 +2,7 @@ import { type DateValue } from "@internationalized/date";
 import { DOMContext, type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import { Context } from "runed";
 import type { RangeCalendarRootState } from "../range-calendar/range-calendar.svelte.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 import type { DateMatcher, Month } from "../../shared/index.js";
 import { type Announcer } from "../../internal/date-time/announcer.js";
 import { type Formatter } from "../../internal/date-time/formatter.js";
@@ -49,6 +49,7 @@ export declare class CalendarRootState {
     readonly formatter: Formatter;
     readonly accessibleHeadingId: string;
     readonly domContext: DOMContext;
+    readonly attachment: RefAttachment;
     months: Month<DateValue>[];
     announcer: Announcer;
     constructor(opts: CalendarRootStateOpts);
@@ -109,6 +110,7 @@ export declare class CalendarHeadingState {
     static create(opts: CalendarHeadingStateOpts): CalendarHeadingState;
     readonly opts: CalendarHeadingStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarHeadingStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -135,6 +137,7 @@ export declare class CalendarCellState {
     readonly isFocusedDate: boolean;
     readonly isSelectedDate: boolean;
     readonly labelText: string;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarCellStateOpts, root: CalendarRootState);
     readonly snippetProps: {
         disabled: boolean;
@@ -176,6 +179,7 @@ export declare class CalendarDayState {
     static create(opts: CalendarDayStateOpts): CalendarDayState;
     readonly opts: CalendarDayStateOpts;
     readonly cell: CalendarCellState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarDayStateOpts, cell: CalendarCellState);
     onclick(e: BitsMouseEvent): void;
     readonly snippetProps: {
@@ -210,6 +214,7 @@ export declare class CalendarNextButtonState {
     readonly opts: CalendarNextButtonStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
     readonly isDisabled: boolean;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarNextButtonStateOpts, root: CalendarRootState | RangeCalendarRootState);
     onclick(_: BitsMouseEvent): void;
     readonly props: {
@@ -230,6 +235,7 @@ export declare class CalendarPrevButtonState {
     readonly opts: CalendarPrevButtonStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
     readonly isDisabled: boolean;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarPrevButtonStateOpts, root: CalendarRootState | RangeCalendarRootState);
     onclick(_: BitsMouseEvent): void;
     readonly props: {
@@ -249,6 +255,7 @@ export declare class CalendarGridState {
     static create(opts: CalendarGridStateOpts): CalendarGridState;
     readonly opts: CalendarGridStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarGridStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -266,6 +273,7 @@ export declare class CalendarGridBodyState {
     static create(opts: CalendarGridBodyStateOpts): CalendarGridBodyState;
     readonly opts: CalendarGridBodyStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarGridBodyStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -279,6 +287,7 @@ export declare class CalendarGridHeadState {
     static create(opts: CalendarGridHeadStateOpts): CalendarGridHeadState;
     readonly opts: CalendarGridHeadStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarGridHeadStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -292,6 +301,7 @@ export declare class CalendarGridRowState {
     static create(opts: CalendarGridRowStateOpts): CalendarGridRowState;
     readonly opts: CalendarGridRowStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarGridRowStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -305,6 +315,7 @@ export declare class CalendarHeadCellState {
     static create(opts: CalendarHeadCellStateOpts): CalendarHeadCellState;
     readonly opts: CalendarHeadCellStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarHeadCellStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -318,6 +329,7 @@ export declare class CalendarHeaderState {
     static create(opts: CalendarHeaderStateOpts): CalendarHeaderState;
     readonly opts: CalendarHeaderStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarHeaderStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly props: {
         readonly id: string;
@@ -335,6 +347,7 @@ export declare class CalendarMonthSelectState {
     static create(opts: CalendarMonthSelectStateOpts): CalendarMonthSelectState;
     readonly opts: CalendarMonthSelectStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarMonthSelectStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly monthItems: {
         value: number;
@@ -371,6 +384,7 @@ export declare class CalendarYearSelectState {
     static create(opts: CalendarYearSelectStateOpts): CalendarYearSelectState;
     readonly opts: CalendarYearSelectStateOpts;
     readonly root: CalendarRootState | RangeCalendarRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CalendarYearSelectStateOpts, root: CalendarRootState | RangeCalendarRootState);
     readonly years: number[];
     readonly yearItems: {