bits-ui 1.0.0-next.8 → 1.0.0-next.81

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

@@ -1,19 +1,18 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import type { DateValue } from "@internationalized/date";
 	import { useDateRangePickerRoot } from "../date-range-picker.svelte.js";
-	import type { RootProps } from "../index.js";
-	import { getDefaultDate } from "../../../shared/date/utils.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import type { DateRangePickerRootProps } from "../types.js";
+	import { noop } from "../../../internal/noop.js";
 	import { usePopoverRoot } from "../../popover/popover.svelte.js";
 	import { useDateRangeFieldRoot } from "../../date-range-field/date-range-field.svelte.js";
-	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import FloatingLayer from "../../utilities/floating-layer/components/floating-layer.svelte";
+	import { useId } from "../../../internal/use-id.js";
 	import type { DateRange } from "../../../shared/index.js";
+	import { getDefaultDate } from "../../../internal/date-time/utils.js";
 
 	let {
-		open = false,
+		open = $bindable(false),
 		onOpenChange = noop,
 		value = $bindable(),
 		id = useId(),
@@ -45,25 +44,18 @@
 		closeOnRangeSelect = true,
 		onStartValueChange = noop,
 		onEndValueChange = noop,
-		controlledValue = false,
-		controlledPlaceholder = false,
-		controlledOpen = false,
 		validate = noop,
 		errorMessageId,
 		child,
 		children,
 		...restProps
-	}: RootProps = $props();
+	}: DateRangePickerRootProps = $props();
 
 	let startValue = $state<DateValue | undefined>(value?.start);
 	let endValue = $state<DateValue | undefined>(value?.end);
 
 	if (value === undefined) {
-		if (controlledValue) {
-			onValueChange({ start: undefined, end: undefined });
-		} else {
-			value = { start: undefined, end: undefined };
-		}
+		value = { start: undefined, end: undefined };
 	}
 
 	if (placeholder === undefined) {
@@ -72,20 +64,13 @@
 			defaultPlaceholder: undefined,
 			defaultValue: value?.start,
 		});
-		if (controlledPlaceholder) {
-			onPlaceholderChange(defaultPlaceholder);
-		} else {
-			placeholder = defaultPlaceholder;
-		}
+
+		placeholder = defaultPlaceholder;
 	}
 
 	function onRangeSelect() {
 		if (closeOnRangeSelect) {
-			if (controlledOpen) {
-				onOpenChange(false);
-			} else {
-				open = false;
-			}
+			open = false;
 		}
 	}
 
@@ -93,34 +78,22 @@
 		open: box.with(
 			() => open,
 			(v) => {
-				if (controlledOpen) {
-					onOpenChange(v);
-				} else {
-					open = v;
-					onOpenChange(v);
-				}
+				open = v;
+				onOpenChange(v);
 			}
 		),
 		value: box.with(
 			() => value as DateRange,
 			(v) => {
-				if (controlledValue) {
-					onValueChange(v);
-				} else {
-					value = v;
-					onValueChange(v);
-				}
+				value = v;
+				onValueChange(v);
 			}
 		),
 		placeholder: box.with(
 			() => placeholder as DateValue,
 			(v) => {
-				if (controlledPlaceholder) {
-					onPlaceholderChange(v as DateValue);
-				} else {
-					placeholder = v;
-					onPlaceholderChange(v as DateValue);
-				}
+				placeholder = v;
+				onPlaceholderChange(v as DateValue);
 			}
 		),
 		isDateUnavailable: box.with(() => isDateUnavailable),
@@ -192,7 +165,7 @@
 	const mergedProps = $derived(mergeProps(restProps, fieldRootState.props));
 </script>
 
-<FloatingLayer.Root>
+<FloatingLayer>
 	{#if child}
 		{@render child({ props: mergedProps })}
 	{:else}
@@ -200,4 +173,4 @@
 			{@render children?.()}
 		</div>
 	{/if}
-</FloatingLayer.Root>
+</FloatingLayer>

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

@@ -1,19 +1,4 @@
-import type { RootProps } from "../index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DateRangePicker: $$__sveltets_2_IsomorphicComponent<RootProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "value" | "placeholder" | "ref">;
-type DateRangePicker = InstanceType<typeof DateRangePicker>;
+import type { DateRangePickerRootProps } from "../types.js";
+declare const DateRangePicker: import("svelte").Component<DateRangePickerRootProps, {}, "value" | "placeholder" | "ref" | "open">;
+type DateRangePicker = ReturnType<typeof DateRangePicker>;
 export default DateRangePicker;

package/dist/bits/date-range-picker/date-range-picker.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { DateValue } from "@internationalized/date";
+import { Context } from "runed";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
-import type { DateMatcher, Granularity, HourCycle, WeekStartsOn } from "../../shared/date/types.js";
-import type { DateRange, SegmentPart } from "../../shared/index.js";
+import type { DateMatcher, DateRange, SegmentPart } from "../../shared/index.js";
+import type { Granularity, HourCycle, WeekStartsOn } from "../../shared/date/types.js";
 type DateRangePickerRootStateProps = WritableBoxedValues<{
     value: DateRange;
     startValue: DateValue | undefined;
@@ -35,6 +36,6 @@ declare class DateRangePickerRootState {
     readonly props: DateRangePickerRootStateProps;
     constructor(props: DateRangePickerRootStateProps);
 }
-export declare const setDateRangePickerRootContext: (value: DateRangePickerRootState) => DateRangePickerRootState, getDateRangePickerRootContext: <T extends DateRangePickerRootState | null | undefined = DateRangePickerRootState>(fallback?: T | undefined) => T extends null ? DateRangePickerRootState | null : DateRangePickerRootState;
+export declare const DateRangePickerRootContext: Context<DateRangePickerRootState>;
 export declare function useDateRangePickerRoot(props: DateRangePickerRootStateProps): DateRangePickerRootState;
 export {};

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

@@ -1,11 +1,11 @@
-import { createContext } from "../../internal/createContext.js";
+import { Context } from "runed";
 class DateRangePickerRootState {
     props;
     constructor(props) {
         this.props = props;
     }
 }
-export const [setDateRangePickerRootContext, getDateRangePickerRootContext] = createContext("DateRangePicker.Root");
+export const DateRangePickerRootContext = new Context("DateRangePicker.Root");
 export function useDateRangePickerRoot(props) {
-    return setDateRangePickerRootContext(new DateRangePickerRootState(props));
+    return DateRangePickerRootContext.set(new DateRangePickerRootState(props));
 }

package/dist/bits/date-range-picker/exports.d.ts

@@ -0,0 +1,21 @@
+export { default as Root } from "./components/date-range-picker.svelte";
+export { default as Calendar } from "./components/date-range-picker-calendar.svelte";
+export { default as Trigger } from "./components/date-range-picker-trigger.svelte";
+export { default as Content } from "../date-picker/components/date-picker-content.svelte";
+export { default as Arrow } from "../popover/components/popover-arrow.svelte";
+export { default as Close } from "../popover/components/popover-close.svelte";
+export { default as Input } from "../date-range-field/components/date-range-field-input.svelte";
+export { default as Label } from "../date-range-field/components/date-range-field-label.svelte";
+export { default as Segment } from "../date-field/components/date-field-segment.svelte";
+export { default as GridBody } from "../calendar/components/calendar-grid-body.svelte";
+export { default as GridHead } from "../calendar/components/calendar-grid-head.svelte";
+export { default as GridRow } from "../calendar/components/calendar-grid-row.svelte";
+export { default as Grid } from "../calendar/components/calendar-grid.svelte";
+export { default as HeadCell } from "../calendar/components/calendar-head-cell.svelte";
+export { default as Header } from "../calendar/components/calendar-header.svelte";
+export { default as Heading } from "../calendar/components/calendar-heading.svelte";
+export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
+export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
+export { default as Cell } from "../range-calendar/components/range-calendar-cell.svelte";
+export { default as Day } from "../range-calendar/components/range-calendar-day.svelte";
+export type { DateRangePickerRootProps as RootProps, DateRangePickerLabelProps as LabelProps, DateRangePickerInputProps as InputProps, DateRangePickerSegmentProps as SegmentProps, DateRangePickerArrowProps as ArrowProps, DateRangePickerCloseProps as CloseProps, DateRangePickerContentProps as ContentProps, DateRangePickerTriggerProps as TriggerProps, DateRangePickerCalendarProps as CalendarProps, DateRangePickerCellProps as CellProps, DateRangePickerDayProps as DayProps, DateRangePickerGridBodyProps as GridBodyProps, DateRangePickerGridHeadProps as GridHeadProps, DateRangePickerGridProps as GridProps, DateRangePickerGridRowProps as GridRowProps, DateRangePickerHeadCellProps as HeadCellProps, DateRangePickerHeaderProps as HeaderProps, DateRangePickerHeadingProps as HeadingProps, DateRangePickerNextButtonProps as NextButtonProps, DateRangePickerPrevButtonProps as PrevButtonProps, } from "./types.js";

package/dist/bits/date-range-picker/exports.js

@@ -0,0 +1,20 @@
+export { default as Root } from "./components/date-range-picker.svelte";
+export { default as Calendar } from "./components/date-range-picker-calendar.svelte";
+export { default as Trigger } from "./components/date-range-picker-trigger.svelte";
+export { default as Content } from "../date-picker/components/date-picker-content.svelte";
+export { default as Arrow } from "../popover/components/popover-arrow.svelte";
+export { default as Close } from "../popover/components/popover-close.svelte";
+export { default as Input } from "../date-range-field/components/date-range-field-input.svelte";
+export { default as Label } from "../date-range-field/components/date-range-field-label.svelte";
+export { default as Segment } from "../date-field/components/date-field-segment.svelte";
+export { default as GridBody } from "../calendar/components/calendar-grid-body.svelte";
+export { default as GridHead } from "../calendar/components/calendar-grid-head.svelte";
+export { default as GridRow } from "../calendar/components/calendar-grid-row.svelte";
+export { default as Grid } from "../calendar/components/calendar-grid.svelte";
+export { default as HeadCell } from "../calendar/components/calendar-head-cell.svelte";
+export { default as Header } from "../calendar/components/calendar-header.svelte";
+export { default as Heading } from "../calendar/components/calendar-heading.svelte";
+export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
+export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
+export { default as Cell } from "../range-calendar/components/range-calendar-cell.svelte";
+export { default as Day } from "../range-calendar/components/range-calendar-day.svelte";

package/dist/bits/date-range-picker/index.d.ts

@@ -1,21 +1 @@
-export { default as Root } from "./components/date-range-picker.svelte";
-export { default as Calendar } from "./components/date-range-picker-calendar.svelte";
-export { default as Trigger } from "./components/date-range-picker-trigger.svelte";
-export { default as Content } from "../date-picker/components/date-picker-content.svelte";
-export { Arrow } from "../popover/index.js";
-export { default as Close } from "../popover/components/popover-close.svelte";
-export { default as Input } from "../date-range-field/components/date-range-field-input.svelte";
-export { default as Label } from "../date-range-field/components/date-range-field-label.svelte";
-export { default as Segment } from "../date-field/components/date-field-segment.svelte";
-export { default as GridBody } from "../calendar/components/calendar-grid-body.svelte";
-export { default as GridHead } from "../calendar/components/calendar-grid-head.svelte";
-export { default as GridRow } from "../calendar/components/calendar-grid-row.svelte";
-export { default as Grid } from "../calendar/components/calendar-grid.svelte";
-export { default as HeadCell } from "../calendar/components/calendar-head-cell.svelte";
-export { default as Header } from "../calendar/components/calendar-header.svelte";
-export { default as Heading } from "../calendar/components/calendar-heading.svelte";
-export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
-export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
-export { default as Cell } from "../range-calendar/components/range-calendar-cell.svelte";
-export { default as Day } from "../range-calendar/components/range-calendar-day.svelte";
-export type { DateRangePickerRootProps as RootProps, DateRangePickerLabelProps as LabelProps, DateRangePickerInputProps as InputProps, DateRangePickerSegmentProps as SegmentProps, DateRangePickerArrowProps as ArrowProps, DateRangePickerCloseProps as CloseProps, DateRangePickerContentProps as ContentProps, DateRangePickerTriggerProps as TriggerProps, DateRangePickerCalendarProps as CalendarProps, DateRangePickerCellProps as CellProps, DateRangePickerDayProps as DayProps, DateRangePickerGridBodyProps as GridBodyProps, DateRangePickerGridHeadProps as GridHeadProps, DateRangePickerGridProps as GridProps, DateRangePickerGridRowProps as GridRowProps, DateRangePickerHeadCellProps as HeadCellProps, DateRangePickerHeaderProps as HeaderProps, DateRangePickerHeadingProps as HeadingProps, DateRangePickerNextButtonProps as NextButtonProps, DateRangePickerPrevButtonProps as PrevButtonProps, } from "./types.js";
+export * as DateRangePicker from "./exports.js";

package/dist/bits/date-range-picker/index.js

@@ -1,20 +1 @@
-export { default as Root } from "./components/date-range-picker.svelte";
-export { default as Calendar } from "./components/date-range-picker-calendar.svelte";
-export { default as Trigger } from "./components/date-range-picker-trigger.svelte";
-export { default as Content } from "../date-picker/components/date-picker-content.svelte";
-export { Arrow } from "../popover/index.js";
-export { default as Close } from "../popover/components/popover-close.svelte";
-export { default as Input } from "../date-range-field/components/date-range-field-input.svelte";
-export { default as Label } from "../date-range-field/components/date-range-field-label.svelte";
-export { default as Segment } from "../date-field/components/date-field-segment.svelte";
-export { default as GridBody } from "../calendar/components/calendar-grid-body.svelte";
-export { default as GridHead } from "../calendar/components/calendar-grid-head.svelte";
-export { default as GridRow } from "../calendar/components/calendar-grid-row.svelte";
-export { default as Grid } from "../calendar/components/calendar-grid.svelte";
-export { default as HeadCell } from "../calendar/components/calendar-head-cell.svelte";
-export { default as Header } from "../calendar/components/calendar-header.svelte";
-export { default as Heading } from "../calendar/components/calendar-heading.svelte";
-export { default as NextButton } from "../calendar/components/calendar-next-button.svelte";
-export { default as PrevButton } from "../calendar/components/calendar-prev-button.svelte";
-export { default as Cell } from "../range-calendar/components/range-calendar-cell.svelte";
-export { default as Day } from "../range-calendar/components/range-calendar-day.svelte";
+export * as DateRangePicker from "./exports.js";

package/dist/bits/date-range-picker/types.d.ts

@@ -1,10 +1,9 @@
 import type { DateValue } from "@internationalized/date";
 import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveDivAttributes } from "../../shared/attributes.js";
-import type { EditableSegmentPart } from "../../shared/date/field/types.js";
-import type { DateMatcher, DateOnInvalid, DateRangeValidator, Granularity, WeekStartsOn } from "../../shared/date/types.js";
-import type { DateRange } from "../../shared/index.js";
+import type { BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { DateMatcher, DateOnInvalid, DateRange, DateRangeValidator, EditableSegmentPart } from "../../shared/index.js";
 import type { CalendarRootSnippetProps } from "../../types.js";
+import type { Granularity, WeekStartsOn } from "../../shared/date/types.js";
 export type DateRangePickerRootPropsWithoutHTML = WithChild<{
     /**
      * The value of the date picker.
@@ -229,41 +228,15 @@ export type DateRangePickerRootPropsWithoutHTML = WithChild<{
      * only part of the value is changed/completed.
      */
     onEndValueChange?: OnChangeFn<DateValue | undefined>;
-    /**
-     * Whether or not the value is controlled or not. If `true`, the component will not update
-     * the value state internally, instead it will call `onValueChange` when it would have
-     * otherwise, and it is up to you to update the `value` prop that is passed to the component.
-     *
-     * @defaultValue false
-     */
-    controlledValue?: boolean;
-    /**
-     * Whether or not the placeholder is controlled or not. If `true`, the component will not update
-     * the placeholder state internally, instead it will call `onPlaceholderChange` when it would
-     * have otherwise, and it is up to you to update the `placeholder` prop that is passed to the
-     * component.
-     *
-     * @defaultValue false
-     */
-    controlledPlaceholder?: boolean;
-    /**
-     * Whether or not the open state is controlled or not. If `true`, the component will not update
-     * the open state internally, instead it will call `onOpenChange` when it would
-     * have otherwise, and it is up to you to update the `open` prop that is passed to the
-     * component.
-     *
-     * @defaultValue false
-     */
-    controlledOpen?: boolean;
     /**
      * The `id` of the element which contains the error messages for the date field when the
      * date is invalid.
      */
     errorMessageId?: string;
 }>;
-export type DateRangePickerRootProps = DateRangePickerRootPropsWithoutHTML & Without<PrimitiveDivAttributes, DateRangePickerRootPropsWithoutHTML>;
+export type DateRangePickerRootProps = DateRangePickerRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DateRangePickerRootPropsWithoutHTML>;
 export type { PopoverTriggerPropsWithoutHTML as DateRangePickerTriggerPropsWithoutHTML, PopoverTriggerProps as DateRangePickerTriggerProps, PopoverContentPropsWithoutHTML as DateRangePickerContentPropsWithoutHTML, PopoverContentProps as DateRangePickerContentProps, PopoverArrowPropsWithoutHTML as DateRangePickerArrowPropsWithoutHTML, PopoverArrowProps as DateRangePickerArrowProps, PopoverClosePropsWithoutHTML as DateRangePickerClosePropsWithoutHTML, PopoverCloseProps as DateRangePickerCloseProps, } from "../popover/types.js";
 export type { DateRangeFieldInputPropsWithoutHTML as DateRangePickerInputPropsWithoutHTML, DateRangeFieldInputProps as DateRangePickerInputProps, DateRangeFieldLabelPropsWithoutHTML as DateRangePickerLabelPropsWithoutHTML, DateRangeFieldLabelProps as DateRangePickerLabelProps, DateRangeFieldSegmentPropsWithoutHTML as DateRangePickerSegmentPropsWithoutHTML, DateRangeFieldSegmentProps as DateRangePickerSegmentProps, } from "../date-range-field/types.js";
 export type DateRangePickerCalendarPropsWithoutHTML = WithChild<{}, CalendarRootSnippetProps>;
-export type DateRangePickerCalendarProps = DateRangePickerCalendarPropsWithoutHTML & Without<PrimitiveDivAttributes, DateRangePickerCalendarPropsWithoutHTML>;
+export type DateRangePickerCalendarProps = DateRangePickerCalendarPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DateRangePickerCalendarPropsWithoutHTML>;
 export type { RangeCalendarCellPropsWithoutHTML as DateRangePickerCellPropsWithoutHTML, RangeCalendarCellProps as DateRangePickerCellProps, RangeCalendarDayPropsWithoutHTML as DateRangePickerDayPropsWithoutHTML, RangeCalendarDayProps as DateRangePickerDayProps, RangeCalendarGridPropsWithoutHTML as DateRangePickerGridPropsWithoutHTML, RangeCalendarGridProps as DateRangePickerGridProps, RangeCalendarGridBodyPropsWithoutHTML as DateRangePickerGridBodyPropsWithoutHTML, RangeCalendarGridBodyProps as DateRangePickerGridBodyProps, RangeCalendarGridHeadPropsWithoutHTML as DateRangePickerGridHeadPropsWithoutHTML, RangeCalendarGridHeadProps as DateRangePickerGridHeadProps, RangeCalendarGridRowPropsWithoutHTML as DateRangePickerGridRowPropsWithoutHTML, RangeCalendarGridRowProps as DateRangePickerGridRowProps, RangeCalendarHeadCellPropsWithoutHTML as DateRangePickerHeadCellPropsWithoutHTML, RangeCalendarHeadCellProps as DateRangePickerHeadCellProps, RangeCalendarHeaderPropsWithoutHTML as DateRangePickerHeaderPropsWithoutHTML, RangeCalendarHeaderProps as DateRangePickerHeaderProps, RangeCalendarHeadingPropsWithoutHTML as DateRangePickerHeadingPropsWithoutHTML, RangeCalendarHeadingProps as DateRangePickerHeadingProps, RangeCalendarNextButtonPropsWithoutHTML as DateRangePickerNextButtonPropsWithoutHTML, RangeCalendarNextButtonProps as DateRangePickerNextButtonProps, RangeCalendarPrevButtonPropsWithoutHTML as DateRangePickerPrevButtonPropsWithoutHTML, RangeCalendarPrevButtonProps as DateRangePickerPrevButtonProps, } from "../range-calendar/types.js";

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

@@ -1,17 +1,17 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDialogClose } from "../dialog.svelte.js";
-	import type { CloseProps } from "../index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import type { DialogCloseProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		children,
 		child,
 		id = useId(),
 		ref = $bindable(null),
+		disabled = false,
 		...restProps
-	}: CloseProps = $props();
+	}: DialogCloseProps = $props();
 
 	const closeState = useDialogClose({
 		variant: box.with(() => "close"),
@@ -20,6 +20,7 @@
 			() => ref,
 			(v) => (ref = v)
 		),
+		disabled: box.with(() => Boolean(disabled)),
 	});
 
 	const mergedProps = $derived(mergeProps(restProps, closeState.props));

package/dist/bits/dialog/components/dialog-close.svelte.d.ts

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DialogClose: $$__sveltets_2_IsomorphicComponent<import("../types.js").DialogTriggerProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type DialogClose = InstanceType<typeof DialogClose>;
+declare const DialogClose: import("svelte").Component<import("../types.js").DialogTriggerProps, {}, "ref">;
+type DialogClose = ReturnType<typeof DialogClose>;
 export default DialogClose;

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

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDialogContent } from "../dialog.svelte.js";
-	import type { ContentProps } from "../index.js";
+	import type { DialogContentProps } from "../types.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
 	import EscapeLayer from "../../utilities/escape-layer/escape-layer.svelte";
 	import FocusScope from "../../utilities/focus-scope/focus-scope.svelte";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 	import TextSelectionLayer from "../../utilities/text-selection-layer/text-selection-layer.svelte";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
+	import { shouldTrapFocus } from "../../../internal/should-trap-focus.js";
 
 	let {
 		id = useId(),
@@ -23,8 +23,9 @@
 		onInteractOutside = noop,
 		trapFocus = true,
 		preventScroll = true,
+		restoreScrollDelay = null,
 		...restProps
-	}: ContentProps = $props();
+	}: DialogContentProps = $props();
 
 	const contentState = useDialogContent({
 		id: box.with(() => id),
@@ -37,12 +38,16 @@
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<PresenceLayer {...mergedProps} present={contentState.root.open.current || forceMount}>
+<PresenceLayer {...mergedProps} {forceMount} present={contentState.root.open.current || forceMount}>
 	{#snippet presence({ present })}
-		<ScrollLock {preventScroll} />
 		<FocusScope
 			loop
-			trapFocus={present.current && trapFocus}
+			trapFocus={shouldTrapFocus({
+				forceMount,
+				present: present.current,
+				trapFocus,
+				open: contentState.root.open.current,
+			})}
 			{...mergedProps}
 			onCloseAutoFocus={(e) => {
 				onCloseAutoFocus(e);
@@ -71,19 +76,17 @@
 					>
 						<TextSelectionLayer {...mergedProps} enabled={present.current}>
 							{#if child}
+								{#if contentState.root.open.current}
+									<ScrollLock {preventScroll} {restoreScrollDelay} />
+								{/if}
 								{@render child({
 									props: mergeProps(mergedProps, focusScopeProps),
 									...contentState.snippetProps,
 								})}
 							{:else}
-								<div
-									{...mergeProps(mergedProps, focusScopeProps, {
-										style: {
-											pointerEvents: "auto",
-										},
-									})}
-								>
-									{@render children?.(contentState.snippetProps)}
+								<ScrollLock {preventScroll} />
+								<div {...mergeProps(mergedProps, focusScopeProps)}>
+									{@render children?.()}
 								</div>
 							{/if}
 						</TextSelectionLayer>

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

@@ -1,19 +1,4 @@
-import type { ContentProps } from "../index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DialogContent: $$__sveltets_2_IsomorphicComponent<ContentProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type DialogContent = InstanceType<typeof DialogContent>;
+import type { DialogContentProps } from "../types.js";
+declare const DialogContent: import("svelte").Component<DialogContentProps, {}, "ref">;
+type DialogContent = ReturnType<typeof DialogContent>;
 export default DialogContent;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDialogDescription } from "../dialog.svelte.js";
-	import type { DescriptionProps } from "../index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import type { DialogDescriptionProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),
@@ -11,7 +10,7 @@
 		child,
 		ref = $bindable(null),
 		...restProps
-	}: DescriptionProps = $props();
+	}: DialogDescriptionProps = $props();
 
 	const descriptionState = useDialogDescription({
 		id: box.with(() => id),

package/dist/bits/dialog/components/dialog-description.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { DescriptionProps } from "../index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DialogDescription: $$__sveltets_2_IsomorphicComponent<DescriptionProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type DialogDescription = InstanceType<typeof DialogDescription>;
+import type { DialogDescriptionProps } from "../types.js";
+declare const DialogDescription: import("svelte").Component<DialogDescriptionProps, {}, "ref">;
+type DialogDescription = ReturnType<typeof DialogDescription>;
 export default DialogDescription;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDialogOverlay } from "../dialog.svelte.js";
-	import type { OverlayProps } from "../index.js";
-	import { useId } from "../../../internal/useId.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
+	import type { DialogOverlayProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
 	import PresenceLayer from "../../utilities/presence-layer/presence-layer.svelte";
 
 	let {
@@ -13,7 +12,7 @@
 		children,
 		ref = $bindable(null),
 		...restProps
-	}: OverlayProps = $props();
+	}: DialogOverlayProps = $props();
 
 	const overlayState = useDialogOverlay({
 		id: box.with(() => id),

package/dist/bits/dialog/components/dialog-overlay.svelte.d.ts

@@ -1,19 +1,4 @@
-import type { OverlayProps } from "../index.js";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const DialogOverlay: $$__sveltets_2_IsomorphicComponent<OverlayProps, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, "ref">;
-type DialogOverlay = InstanceType<typeof DialogOverlay>;
+import type { DialogOverlayProps } from "../types.js";
+declare const DialogOverlay: import("svelte").Component<DialogOverlayProps, {}, "ref">;
+type DialogOverlay = ReturnType<typeof DialogOverlay>;
 export default DialogOverlay;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useDialogTitle } from "../dialog.svelte.js";
-	import type { TitleProps } from "../index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import type { DialogTitleProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),
@@ -12,7 +11,7 @@
 		children,
 		level = 2,
 		...restProps
-	}: TitleProps = $props();
+	}: DialogTitleProps = $props();
 
 	const titleState = useDialogTitle({
 		id: box.with(() => id),