bits-ui 1.0.0-next.6 → 1.0.0-next.61

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.
@@ -261,9 +260,9 @@ export type DateRangePickerRootPropsWithoutHTML = WithChild<{
      */
     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-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,4 +1,4 @@
-import type { ContentProps } from "../index.js";
+import type { DialogContentProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const DialogContent: $$__sveltets_2_IsomorphicComponent<ContentProps, {
+declare const DialogContent: $$__sveltets_2_IsomorphicComponent<DialogContentProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type DialogContent = InstanceType<typeof 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,4 +1,4 @@
-import type { DescriptionProps } from "../index.js";
+import type { DialogDescriptionProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const DialogDescription: $$__sveltets_2_IsomorphicComponent<DescriptionProps, {
+declare const DialogDescription: $$__sveltets_2_IsomorphicComponent<DialogDescriptionProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type DialogDescription = InstanceType<typeof 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,4 +1,4 @@
-import type { OverlayProps } from "../index.js";
+import type { DialogOverlayProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const DialogOverlay: $$__sveltets_2_IsomorphicComponent<OverlayProps, {
+declare const DialogOverlay: $$__sveltets_2_IsomorphicComponent<DialogOverlayProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type DialogOverlay = InstanceType<typeof 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),

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

@@ -1,4 +1,4 @@
-import type { TitleProps } from "../index.js";
+import type { DialogTitleProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const DialogTitle: $$__sveltets_2_IsomorphicComponent<TitleProps, {
+declare const DialogTitle: $$__sveltets_2_IsomorphicComponent<DialogTitleProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type DialogTitle = InstanceType<typeof DialogTitle>;

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

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

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

@@ -1,4 +1,4 @@
-import type { TriggerProps } from "../index.js";
+import type { DialogTriggerProps } from "../types.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;
@@ -12,7 +12,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const DialogTrigger: $$__sveltets_2_IsomorphicComponent<TriggerProps, {
+declare const DialogTrigger: $$__sveltets_2_IsomorphicComponent<DialogTriggerProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type DialogTrigger = InstanceType<typeof DialogTrigger>;

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

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import { box } from "svelte-toolbelt";
 	import { useDialogRoot } from "../dialog.svelte.js";
-	import type { RootProps } from "../index.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import type { DialogRootProps } from "../types.js";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		open = $bindable(false),
 		onOpenChange = noop,
 		controlledOpen = false,
 		children,
-	}: RootProps = $props();
+	}: DialogRootProps = $props();
 
 	useDialogRoot({
 		variant: box.with(() => "dialog"),

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

@@ -1,3 +1,4 @@
+import type { KeyboardEventHandler, MouseEventHandler, PointerEventHandler } from "svelte/elements";
 import type { ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
 type DialogVariant = "alert-dialog" | "dialog";
@@ -31,18 +32,13 @@ declare class DialogRootState {
     constructor(props: DialogRootStateProps);
     handleOpen: () => void;
     handleClose: () => void;
-    createTrigger(props: DialogTriggerStateProps): DialogTriggerState;
-    createTitle(props: DialogTitleStateProps): DialogTitleState;
-    createContent(props: DialogContentStateProps): DialogContentState;
-    createOverlay(props: DialogOverlayStateProps): DialogOverlayState;
-    createDescription(props: DialogDescriptionStateProps): DialogDescriptionState;
-    createClose(props: DialogCloseStateProps): DialogCloseState;
-    createCancel(props: AlertDialogCancelStateProps): AlertDialogCancelState;
     sharedProps: {
         readonly "data-state": "open" | "closed";
     };
 }
-type DialogTriggerStateProps = WithRefProps;
+type DialogTriggerStateProps = WithRefProps & ReadableBoxedValues<{
+    disabled: boolean;
+}>;
 declare class DialogTriggerState {
     #private;
     constructor(props: DialogTriggerStateProps, root: DialogRootState);
@@ -50,13 +46,16 @@ declare class DialogTriggerState {
         readonly "data-state": "open" | "closed";
         readonly id: string;
         readonly "aria-haspopup": "dialog";
-        readonly "aria-expanded": "false" | "true";
+        readonly "aria-expanded": "true" | "false";
         readonly "aria-controls": string | undefined;
-        readonly onclick: () => void;
+        readonly onpointerdown: PointerEventHandler<HTMLButtonElement>;
+        readonly onkeydown: KeyboardEventHandler<HTMLButtonElement>;
+        readonly onclick: MouseEventHandler<HTMLButtonElement>;
     };
 }
 type DialogCloseStateProps = WithRefProps & ReadableBoxedValues<{
     variant: "action" | "cancel" | "close";
+    disabled: boolean;
 }>;
 declare class DialogCloseState {
     #private;
@@ -64,7 +63,18 @@ declare class DialogCloseState {
     props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
-        readonly onclick: () => void;
+        readonly onpointerdown: PointerEventHandler<HTMLButtonElement>;
+        readonly onclick: MouseEventHandler<HTMLButtonElement>;
+        readonly onkeydown: KeyboardEventHandler<HTMLButtonElement>;
+    };
+}
+type DialogActionStateProps = WithRefProps;
+declare class DialogActionState {
+    #private;
+    constructor(props: DialogActionStateProps, root: DialogRootState);
+    props: {
+        readonly "data-state": "open" | "closed";
+        readonly id: string;
     };
 }
 type DialogTitleStateProps = WithRefProps<ReadableBoxedValues<{
@@ -77,7 +87,7 @@ declare class DialogTitleState {
         readonly "data-state": "open" | "closed";
         readonly id: string;
         readonly role: "heading";
-        readonly "aria-level": 3 | 4 | 2 | 1 | 5 | 6;
+        readonly "aria-level": 1 | 2 | 3 | 4 | 5 | 6;
     };
 }
 type DialogDescriptionStateProps = WithRefProps;
@@ -103,6 +113,9 @@ declare class DialogContentState {
         readonly role: "dialog" | "alertdialog";
         readonly "aria-describedby": string | undefined;
         readonly "aria-labelledby": string | undefined;
+        readonly style: {
+            readonly pointerEvents: "auto";
+        };
     };
 }
 type DialogOverlayStateProps = WithRefProps;
@@ -116,16 +129,23 @@ declare class DialogOverlayState {
     props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
+        readonly style: {
+            readonly pointerEvents: "auto";
+        };
     };
 }
-type AlertDialogCancelStateProps = WithRefProps;
+type AlertDialogCancelStateProps = WithRefProps & ReadableBoxedValues<{
+    disabled: boolean;
+}>;
 declare class AlertDialogCancelState {
     #private;
     constructor(props: AlertDialogCancelStateProps, root: DialogRootState);
     props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
-        readonly onclick: () => void;
+        readonly onpointerdown: PointerEventHandler<HTMLButtonElement>;
+        readonly onclick: MouseEventHandler<HTMLButtonElement>;
+        readonly onkeydown: KeyboardEventHandler<HTMLButtonElement>;
     };
 }
 export declare function useDialogRoot(props: DialogRootStateProps): DialogRootState;
@@ -136,4 +156,5 @@ export declare function useDialogOverlay(props: DialogOverlayStateProps): Dialog
 export declare function useDialogDescription(props: DialogDescriptionStateProps): DialogDescriptionState;
 export declare function useDialogClose(props: DialogCloseStateProps): DialogCloseState;
 export declare function useAlertDialogCancel(props: AlertDialogCancelStateProps): AlertDialogCancelState;
+export declare function useAlertDialogAction(props: DialogActionStateProps): DialogActionState;
 export {};