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

package/dist/app.d.ts

@@ -0,0 +1,15 @@
+import type { ReadableBox } from "svelte-toolbelt";
+import type { DismissibleLayerState } from "./bits/utilities/dismissible-layer/useDismissibleLayer.svelte.ts";
+import type { InteractOutsideBehaviorType } from "./bits/utilities/dismissible-layer/types.ts";
+import type { EscapeLayerState } from "./bits/utilities/escape-layer/useEscapeLayer.svelte.ts";
+import type { EscapeBehaviorType } from "./bits/utilities/escape-layer/types.ts";
+import type { TextSelectionLayerState } from "./bits/utilities/text-selection-layer/useTextSelectionLayer.svelte.ts";
+
+declare global {
+	// eslint-disable-next-line vars-on-top, no-var
+	var bitsDismissableLayers: Map<DismissibleLayerState, ReadableBox<InteractOutsideBehaviorType>>;
+	// eslint-disable-next-line vars-on-top, no-var
+	var bitsEscapeLayers: Map<EscapeLayerState, ReadableBox<EscapeBehaviorType>>;
+	// eslint-disable-next-line vars-on-top, no-var
+	var bitsTextSelectionLayers: Map<TextSelectionLayerState, ReadableBox<boolean>>;
+}

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

@@ -1,6 +1,6 @@
 import type { Box, ReadableBoxedValues, WritableBoxedValues } from "../../internal/box.svelte.js";
 import type { WithRefProps } from "../../internal/types.js";
-import { type UseRovingFocusReturn } from "../../internal/useRovingFocus.svelte.js";
+import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { Orientation } from "../../shared/index.js";
 type AccordionBaseStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
@@ -55,9 +55,6 @@ export declare class AccordionItemState {
     isDisabled: boolean;
     constructor(props: AccordionItemStateProps);
     updateValue: () => void;
-    createTrigger(props: AccordionTriggerStateProps): AccordionTriggerState;
-    createContent(props: AccordionContentStateProps): AccordionContentState;
-    createHeader(props: AccordionHeaderStateProps): AccordionHeaderState;
     props: {
         readonly id: string;
         readonly "data-state": "open" | "closed";
@@ -75,14 +72,15 @@ declare class AccordionTriggerState {
     props: {
         readonly id: string;
         readonly disabled: boolean;
-        readonly "aria-expanded": "false" | "true";
-        readonly "aria-disabled": "false" | "true";
+        readonly "aria-expanded": "true" | "false";
+        readonly "aria-disabled": "true" | "false";
         readonly "data-disabled": "" | undefined;
         readonly "data-state": "open" | "closed";
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-accordion-trigger": "";
         readonly tabindex: 0;
-        readonly onclick: () => void;
+        readonly onpointerdown: (e: PointerEvent) => void;
+        readonly onpointerup: (e: PointerEvent) => void;
         readonly onkeydown: (e: KeyboardEvent) => void;
     };
 }
@@ -118,8 +116,8 @@ declare class AccordionHeaderState {
     props: {
         readonly id: string;
         readonly role: "heading";
-        readonly "aria-level": 3 | 4 | 2 | 1 | 5 | 6;
-        readonly "data-heading-level": 3 | 4 | 2 | 1 | 5 | 6;
+        readonly "aria-level": 1 | 2 | 3 | 4 | 5 | 6;
+        readonly "data-heading-level": 1 | 2 | 3 | 4 | 5 | 6;
         readonly "data-state": "open" | "closed";
         readonly "data-orientation": "horizontal" | "vertical";
         readonly "data-accordion-header": "";

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

@@ -1,9 +1,8 @@
-import { afterTick } from "../../internal/afterTick.js";
+import { afterTick, useRefById } from "svelte-toolbelt";
 import { getAriaDisabled, getAriaExpanded, getDataDisabled, getDataOpenClosed, getDataOrientation, } from "../../internal/attrs.js";
 import { kbd } from "../../internal/kbd.js";
-import { useRefById } from "../../internal/useRefById.svelte.js";
-import { useRovingFocus } from "../../internal/useRovingFocus.svelte.js";
-import { createContext } from "../../internal/createContext.js";
+import { useRovingFocus, } from "../../internal/use-roving-focus.svelte.js";
+import { createContext } from "../../internal/create-context.js";
 const ACCORDION_ROOT_ATTR = "data-accordion-root";
 const ACCORDION_TRIGGER_ATTR = "data-accordion-trigger";
 const ACCORDION_CONTENT_ATTR = "data-accordion-content";
@@ -90,21 +89,12 @@ export class AccordionItemState {
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.isActive,
+            deps: () => this.isActive,
         });
     }
     updateValue = () => {
         this.root.toggleItem(this.value.current);
     };
-    createTrigger(props) {
-        return new AccordionTriggerState(props, this);
-    }
-    createContent(props) {
-        return new AccordionContentState(props, this);
-    }
-    createHeader(props) {
-        return new AccordionHeaderState(props, this);
-    }
     props = $derived.by(() => ({
         id: this.#id.current,
         "data-state": getDataOpenClosed(this.isActive),
@@ -133,12 +123,24 @@ class AccordionTriggerState {
             ref: this.#ref,
         });
     }
-    #onclick = () => {
+    #onpointerdown = (e) => {
         if (this.#isDisabled)
             return;
+        if (e.pointerType === "touch" || e.button !== 0)
+            return e.preventDefault();
         this.#itemState.updateValue();
     };
+    #onpointerup = (e) => {
+        if (this.#isDisabled)
+            return;
+        if (e.pointerType === "touch") {
+            e.preventDefault();
+            this.#itemState.updateValue();
+        }
+    };
     #onkeydown = (e) => {
+        if (this.#isDisabled)
+            return;
         if (e.key === kbd.SPACE || e.key === kbd.ENTER) {
             e.preventDefault();
             this.#itemState.updateValue();
@@ -157,7 +159,8 @@ class AccordionTriggerState {
         [ACCORDION_TRIGGER_ATTR]: "",
         tabindex: 0,
         //
-        onclick: this.#onclick,
+        onpointerdown: this.#onpointerdown,
+        onpointerup: this.#onpointerup,
         onkeydown: this.#onkeydown,
     }));
 }
@@ -271,11 +274,14 @@ export function useAccordionItem(props) {
     return setAccordionItemContext(new AccordionItemState({ ...props, rootState }));
 }
 export function useAccordionTrigger(props) {
-    return getAccordionItemContext().createTrigger(props);
+    const item = getAccordionItemContext();
+    return new AccordionTriggerState(props, item);
 }
 export function useAccordionContent(props) {
-    return getAccordionItemContext().createContent(props);
+    const item = getAccordionItemContext();
+    return new AccordionContentState(props, item);
 }
 export function useAccordionHeader(props) {
-    return getAccordionItemContext().createHeader(props);
+    const item = getAccordionItemContext();
+    return new AccordionHeaderState(props, item);
 }

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

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { useAccordionContent } from "../accordion.svelte.js";
 	import type { AccordionContentProps } from "../types.js";
 	import { PresenceLayer } from "../../utilities/presence-layer/index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		child,
@@ -37,7 +36,7 @@
 			})}
 		{:else}
 			<div {...mergedProps}>
-				{@render children?.(contentState.snippetProps)}
+				{@render children?.()}
 			</div>
 		{/if}
 	{/snippet}

package/dist/bits/accordion/components/accordion-header.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AccordionHeaderProps } from "../types.js";
 	import { useAccordionHeader } from "../accordion.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),

package/dist/bits/accordion/components/accordion-item.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AccordionItemProps } from "../types.js";
 	import { useAccordionItem } from "../accordion.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		id = useId(),

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import type { AccordionTriggerProps } from "../types.js";
 	import { useAccordionTrigger } from "../accordion.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		disabled = false,

package/dist/bits/accordion/components/accordion.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-	import { type WritableBox, box } from "svelte-toolbelt";
+	import { type WritableBox, box, mergeProps } from "svelte-toolbelt";
 	import { useAccordionRoot } from "../accordion.svelte.js";
-	import type { RootProps } from "../index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
-	import { noop } from "../../../internal/callbacks.js";
+	import type { AccordionRootProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { noop } from "../../../internal/noop.js";
 
 	let {
 		disabled = false,
@@ -19,7 +18,7 @@
 		orientation = "vertical",
 		controlledValue = false,
 		...restProps
-	}: RootProps = $props();
+	}: AccordionRootProps = $props();
 
 	value === undefined && (value = type === "single" ? "" : []);
 

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

@@ -1,4 +1,4 @@
-import type { RootProps } from "../index.js";
+import type { AccordionRootProps } 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 Accordion: $$__sveltets_2_IsomorphicComponent<RootProps, {
+declare const Accordion: $$__sveltets_2_IsomorphicComponent<AccordionRootProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "value" | "ref">;
 type Accordion = InstanceType<typeof Accordion>;

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

@@ -0,0 +1,6 @@
+export { default as Root } from "./components/accordion.svelte";
+export { default as Item } from "./components/accordion-item.svelte";
+export { default as Header } from "./components/accordion-header.svelte";
+export { default as Trigger } from "./components/accordion-trigger.svelte";
+export { default as Content } from "./components/accordion-content.svelte";
+export type { AccordionRootProps as RootProps, AccordionItemProps as ItemProps, AccordionHeaderProps as HeaderProps, AccordionTriggerProps as TriggerProps, AccordionContentProps as ContentProps, } from "./types.js";

package/dist/bits/accordion/exports.js

@@ -0,0 +1,5 @@
+export { default as Root } from "./components/accordion.svelte";
+export { default as Item } from "./components/accordion-item.svelte";
+export { default as Header } from "./components/accordion-header.svelte";
+export { default as Trigger } from "./components/accordion-trigger.svelte";
+export { default as Content } from "./components/accordion-content.svelte";

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

@@ -1,6 +1 @@
-export { default as Root } from "./components/accordion.svelte";
-export { default as Item } from "./components/accordion-item.svelte";
-export { default as Header } from "./components/accordion-header.svelte";
-export { default as Trigger } from "./components/accordion-trigger.svelte";
-export { default as Content } from "./components/accordion-content.svelte";
-export type { AccordionRootProps as RootProps, AccordionItemProps as ItemProps, AccordionHeaderProps as HeaderProps, AccordionTriggerProps as TriggerProps, AccordionContentProps as ContentProps, } from "./types.js";
+export * as Accordion from "./exports.js";

package/dist/bits/accordion/index.js

@@ -1,5 +1 @@
-export { default as Root } from "./components/accordion.svelte";
-export { default as Item } from "./components/accordion-item.svelte";
-export { default as Header } from "./components/accordion-header.svelte";
-export { default as Trigger } from "./components/accordion-trigger.svelte";
-export { default as Content } from "./components/accordion-content.svelte";
+export * as Accordion from "./exports.js";

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

@@ -1,5 +1,5 @@
-import type { OnChangeFn, WithChild, Without } from "../../internal/types.js";
-import type { PrimitiveButtonAttributes, PrimitiveDivAttributes } from "../../shared/attributes.js";
+import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, Without } from "../../internal/types.js";
+import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { Orientation } from "../../shared/index.js";
 export type BaseAccordionRootPropsWithoutHTML = {
     /**
@@ -16,7 +16,7 @@ export type BaseAccordionRootPropsWithoutHTML = {
      */
     loop?: boolean;
     /**
-     * The orienation of the accordion.
+     * The orientation of the accordion.
      *
      * @defaultValue "vertical"
      */
@@ -74,16 +74,16 @@ export type AccordionRootMultiplePropsWithoutHTML = BaseAccordionRootPropsWithou
     onValueChange?: OnChangeFn<string[]>;
 };
 export type AccordionRootPropsWithoutHTML = WithChild<AccordionRootSinglePropsWithoutHTML> | WithChild<AccordionRootMultiplePropsWithoutHTML>;
-export type AccordionRootProps = AccordionRootPropsWithoutHTML & Without<PrimitiveDivAttributes, AccordionRootPropsWithoutHTML>;
+export type AccordionRootProps = AccordionRootPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AccordionRootPropsWithoutHTML>;
 export type AccordionTriggerPropsWithoutHTML = WithChild;
-export type AccordionTriggerProps = AccordionTriggerPropsWithoutHTML & Without<PrimitiveButtonAttributes, AccordionTriggerPropsWithoutHTML>;
+export type AccordionTriggerProps = AccordionTriggerPropsWithoutHTML & Without<BitsPrimitiveButtonAttributes, AccordionTriggerPropsWithoutHTML>;
 export type AccordionContentSnippetProps = {
     /**
      * Whether the accordion content is active/open or not.
      */
     open: boolean;
 };
-export type AccordionContentPropsWithoutHTML = WithChild<{
+export type AccordionContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<{
     /**
      * Whether to forcefully mount the content, regardless of the open state.
      * This is useful if you want to use Svelte transitions for the content.
@@ -92,7 +92,7 @@ export type AccordionContentPropsWithoutHTML = WithChild<{
      */
     forceMount?: boolean;
 }, AccordionContentSnippetProps>;
-export type AccordionContentProps = AccordionContentPropsWithoutHTML & Without<PrimitiveDivAttributes, AccordionContentPropsWithoutHTML>;
+export type AccordionContentProps = AccordionContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, AccordionContentPropsWithoutHTML>;
 export type AccordionItemPropsWithoutHTML = WithChild<{
     /**
      * The value of the accordion item. This is used to identify if the item is open or closed.
@@ -106,7 +106,7 @@ export type AccordionItemPropsWithoutHTML = WithChild<{
      */
     disabled?: boolean;
 }>;
-export type AccordionItemProps = AccordionItemPropsWithoutHTML & PrimitiveDivAttributes;
+export type AccordionItemProps = AccordionItemPropsWithoutHTML & BitsPrimitiveDivAttributes;
 export type AccordionHeaderPropsWithoutHTML = WithChild<{
     /**
      * The level of the accordion header, applied to the element's `aria-level` attribute.
@@ -116,4 +116,4 @@ export type AccordionHeaderPropsWithoutHTML = WithChild<{
      */
     level?: 1 | 2 | 3 | 4 | 5 | 6;
 }>;
-export type AccordionHeaderProps = AccordionHeaderPropsWithoutHTML & PrimitiveDivAttributes;
+export type AccordionHeaderProps = AccordionHeaderPropsWithoutHTML & BitsPrimitiveDivAttributes;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ActionProps } from "../index.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
-	import { useDialogClose } from "../../dialog/dialog.svelte.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { AlertDialogActionProps } from "../types.js";
+	import { useId } from "../../../internal/use-id.js";
+	import { useAlertDialogAction } from "../../dialog/dialog.svelte.js";
 
 	let {
 		children,
@@ -11,10 +10,9 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: ActionProps = $props();
+	}: AlertDialogActionProps = $props();
 
-	const closeState = useDialogClose({
-		variant: box.with(() => "action"),
+	const actionState = useAlertDialogAction({
 		id: box.with(() => id),
 		ref: box.with(
 			() => ref,
@@ -22,7 +20,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, closeState.props));
+	const mergedProps = $derived(mergeProps(restProps, actionState.props));
 </script>
 
 {#if child}

package/dist/bits/alert-dialog/components/alert-dialog-action.svelte.d.ts

@@ -11,7 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AlertDialogAction: $$__sveltets_2_IsomorphicComponent<import("../index.js").TriggerProps, {
+declare const AlertDialogAction: $$__sveltets_2_IsomorphicComponent<import("../types.js").AlertDialogTriggerProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type AlertDialogAction = InstanceType<typeof AlertDialogAction>;

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

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

package/dist/bits/alert-dialog/components/alert-dialog-cancel.svelte.d.ts

@@ -11,7 +11,7 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const AlertDialogCancel: $$__sveltets_2_IsomorphicComponent<import("../index.js").TriggerProps, {
+declare const AlertDialogCancel: $$__sveltets_2_IsomorphicComponent<import("../types.js").AlertDialogTriggerProps, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, "ref">;
 type AlertDialogCancel = InstanceType<typeof AlertDialogCancel>;

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

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { ContentProps } from "../index.js";
+	import { 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";
 	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 { useDialogContent } from "../../dialog/dialog.svelte.js";
+	import { shouldTrapFocus } from "../../../internal/should-trap-focus.js";
 
 	let {
 		id = useId(),
@@ -25,8 +25,9 @@
 		onInteractOutside = noop,
 		preventScroll = true,
 		trapFocus = true,
+		restoreScrollDelay = null,
 		...restProps
-	}: ContentProps = $props();
+	}: AlertDialogContentProps = $props();
 
 	const contentState = useDialogContent({
 		id: box.with(() => id),
@@ -39,12 +40,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);
@@ -80,19 +85,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/alert-dialog/components/alert-dialog.svelte

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

package/dist/bits/alert-dialog/exports.d.ts

@@ -0,0 +1,10 @@
+export { default as Root } from "./components/alert-dialog.svelte";
+export { default as Title } from "../dialog/components/dialog-title.svelte";
+export { default as Action } from "./components/alert-dialog-action.svelte";
+export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "./components/alert-dialog-content.svelte";
+export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
+export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
+export { default as Description } from "../dialog/components/dialog-description.svelte";
+export type { AlertDialogRootProps as RootProps, AlertDialogTitleProps as TitleProps, AlertDialogActionProps as ActionProps, AlertDialogCancelProps as CancelProps, AlertDialogPortalProps as PortalProps, AlertDialogContentProps as ContentProps, AlertDialogOverlayProps as OverlayProps, AlertDialogTriggerProps as TriggerProps, AlertDialogDescriptionProps as DescriptionProps, } from "./types.js";

package/dist/bits/alert-dialog/exports.js

@@ -0,0 +1,9 @@
+export { default as Root } from "./components/alert-dialog.svelte";
+export { default as Title } from "../dialog/components/dialog-title.svelte";
+export { default as Action } from "./components/alert-dialog-action.svelte";
+export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
+export { default as Portal } from "../utilities/portal/portal.svelte";
+export { default as Content } from "./components/alert-dialog-content.svelte";
+export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
+export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
+export { default as Description } from "../dialog/components/dialog-description.svelte";

package/dist/bits/alert-dialog/index.d.ts

@@ -1,10 +1 @@
-export { default as Root } from "./components/alert-dialog.svelte";
-export { default as Title } from "../dialog/components/dialog-title.svelte";
-export { default as Action } from "./components/alert-dialog-action.svelte";
-export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export { default as Content } from "./components/alert-dialog-content.svelte";
-export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
-export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
-export { default as Description } from "../dialog/components/dialog-description.svelte";
-export type { AlertDialogRootProps as RootProps, AlertDialogTitleProps as TitleProps, AlertDialogActionProps as ActionProps, AlertDialogCancelProps as CancelProps, AlertDialogPortalProps as PortalProps, AlertDialogContentProps as ContentProps, AlertDialogOverlayProps as OverlayProps, AlertDialogTriggerProps as TriggerProps, AlertDialogDescriptionProps as DescriptionProps, } from "./types.js";
+export * as AlertDialog from "./exports.js";

package/dist/bits/alert-dialog/index.js

@@ -1,9 +1 @@
-export { default as Root } from "./components/alert-dialog.svelte";
-export { default as Title } from "../dialog/components/dialog-title.svelte";
-export { default as Action } from "./components/alert-dialog-action.svelte";
-export { default as Cancel } from "./components/alert-dialog-cancel.svelte";
-export { default as Portal } from "../utilities/portal/portal.svelte";
-export { default as Content } from "./components/alert-dialog-content.svelte";
-export { default as Overlay } from "../dialog/components/dialog-overlay.svelte";
-export { default as Trigger } from "../dialog/components/dialog-trigger.svelte";
-export { default as Description } from "../dialog/components/dialog-description.svelte";
+export * as AlertDialog from "./exports.js";

package/dist/bits/alert-dialog/types.d.ts

@@ -1,4 +1,4 @@
 import type { DialogContentProps, DialogContentPropsWithoutHTML } from "../../types.js";
-export type { DialogRootPropsWithoutHTML as AlertDialogRootPropsWithoutHTML, DialogRootProps as AlertDialogRootProps, DialogClosePropsWithoutHTML as AlertDialogActionPropsWithoutHTML, DialogCloseProps as AlertDialogActionProps, DialogClosePropsWithoutHTML as AlertDialogCancelPropsWithoutHTML, DialogCloseProps as AlertDialogCancelProps, DialogPortalPropsWithoutHTML as AlertDialogPortalPropsWithoutHTML, DialogPortalProps as AlertDialogPortalProps, DialogOverlayPropsWithoutHTML as AlertDialogOverlayPropsWithoutHTML, DialogOverlayProps as AlertDialogOverlayProps, DialogTitlePropsWithoutHTML as AlertDialogTitlePropsWithoutHTML, DialogTitleProps as AlertDialogTitleProps, DialogDescriptionPropsWithoutHTML as AlertDialogDescriptionPropsWithoutHTML, DialogDescriptionProps as AlertDialogDescriptionProps, DialogTriggerPropsWithoutHTML as AlertDialogTriggerPropsWithoutHTML, DialogTriggerProps as AlertDialogTriggerProps, } from "../../types.js";
+export type { DialogRootPropsWithoutHTML as AlertDialogRootPropsWithoutHTML, DialogRootProps as AlertDialogRootProps, DialogClosePropsWithoutHTML as AlertDialogActionPropsWithoutHTML, DialogCloseProps as AlertDialogActionProps, DialogClosePropsWithoutHTML as AlertDialogCancelPropsWithoutHTML, DialogCloseProps as AlertDialogCancelProps, DialogPortalPropsWithoutHTML as AlertDialogPortalPropsWithoutHTML, DialogPortalProps as AlertDialogPortalProps, DialogOverlayPropsWithoutHTML as AlertDialogOverlayPropsWithoutHTML, DialogOverlayProps as AlertDialogOverlayProps, DialogTitlePropsWithoutHTML as AlertDialogTitlePropsWithoutHTML, DialogTitleProps as AlertDialogTitleProps, DialogDescriptionPropsWithoutHTML as AlertDialogDescriptionPropsWithoutHTML, DialogDescriptionProps as AlertDialogDescriptionProps, DialogTriggerPropsWithoutHTML as AlertDialogTriggerPropsWithoutHTML, DialogTriggerProps as AlertDialogTriggerProps, } from "../dialog/types.js";
 export type AlertDialogContentPropsWithoutHTML = Omit<DialogContentPropsWithoutHTML, "onInteractOutside">;
 export type AlertDialogContentProps = DialogContentProps;

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

@@ -1,4 +1,4 @@
-import { useRefById } from "../../internal/useRefById.svelte.js";
+import { useRefById } from "svelte-toolbelt";
 const ASPECT_RATIO_ROOT_ATTR = "data-aspect-ratio-root";
 export class AspectRatioRootState {
     #ref;

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

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import { box } from "svelte-toolbelt";
-	import type { RootProps } from "../index.js";
+	import { box, mergeProps } from "svelte-toolbelt";
+	import type { AspectRatioRootProps } from "../types.js";
 	import { useAspectRatioRoot } from "../aspect-ratio.svelte.js";
-	import { mergeProps } from "../../../internal/mergeProps.js";
-	import { useId } from "../../../internal/useId.js";
+	import { useId } from "../../../internal/use-id.js";
 
 	let {
 		ref = $bindable(null),
@@ -12,7 +11,7 @@
 		children,
 		child,
 		...restProps
-	}: RootProps = $props();
+	}: AspectRatioRootProps = $props();
 
 	const rootState = useAspectRatioRoot({
 		id: box.with(() => id),