bits-ui 1.0.0-next.7 → 1.0.0-next.71

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 { BitsKeyboardEvent, BitsPointerEvent, WithRefProps } from "../../internal/types.js";
+import { type UseRovingFocusReturn } from "../../internal/use-roving-focus.svelte.js";
 import type { Orientation } from "../../shared/index.js";
 type AccordionBaseStateProps = WithRefProps<ReadableBoxedValues<{
     disabled: boolean;
@@ -27,8 +27,8 @@ export declare class AccordionSingleState extends AccordionBaseState {
     #private;
     isMulti: false;
     constructor(props: AccordionSingleStateProps);
-    includesItem: (item: string) => boolean;
-    toggleItem: (item: string) => void;
+    includesItem(item: string): boolean;
+    toggleItem(item: string): void;
 }
 type AccordionMultiStateProps = AccordionBaseStateProps & WritableBoxedValues<{
     value: string[];
@@ -37,8 +37,8 @@ export declare class AccordionMultiState extends AccordionBaseState {
     #private;
     isMulti: true;
     constructor(props: AccordionMultiStateProps);
-    includesItem: (item: string) => boolean;
-    toggleItem: (item: string) => void;
+    includesItem(item: string): boolean;
+    toggleItem(item: string): void;
 }
 type AccordionItemStateProps = WithRefProps<ReadableBoxedValues<{
     value: string;
@@ -54,10 +54,7 @@ export declare class AccordionItemState {
     isActive: boolean;
     isDisabled: boolean;
     constructor(props: AccordionItemStateProps);
-    updateValue: () => void;
-    createTrigger(props: AccordionTriggerStateProps): AccordionTriggerState;
-    createContent(props: AccordionContentStateProps): AccordionContentState;
-    createHeader(props: AccordionHeaderStateProps): AccordionHeaderState;
+    updateValue(): void;
     props: {
         readonly id: string;
         readonly "data-state": "open" | "closed";
@@ -72,18 +69,22 @@ type AccordionTriggerStateProps = WithRefProps<ReadableBoxedValues<{
 declare class AccordionTriggerState {
     #private;
     constructor(props: AccordionTriggerStateProps, itemState: AccordionItemState);
+    onpointerdown(e: BitsPointerEvent): void;
+    onpointerup(e: BitsPointerEvent): void;
+    onkeydown(e: BitsKeyboardEvent): void;
     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 onkeydown: (e: KeyboardEvent) => void;
+        readonly onpointerdown: (e: BitsPointerEvent) => void;
+        readonly onpointerup: (e: BitsPointerEvent) => void;
+        readonly onkeydown: (e: BitsKeyboardEvent) => void;
     };
 }
 type AccordionContentStateProps = WithRefProps<ReadableBoxedValues<{
@@ -118,8 +119,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";
@@ -46,13 +45,15 @@ export class AccordionSingleState extends AccordionBaseState {
     constructor(props) {
         super(props);
         this.#value = props.value;
+        this.includesItem = this.includesItem.bind(this);
+        this.toggleItem = this.toggleItem.bind(this);
     }
-    includesItem = (item) => {
+    includesItem(item) {
         return this.#value.current === item;
-    };
-    toggleItem = (item) => {
+    }
+    toggleItem(item) {
         this.#value.current = this.includesItem(item) ? "" : item;
-    };
+    }
 }
 export class AccordionMultiState extends AccordionBaseState {
     #value;
@@ -60,18 +61,20 @@ export class AccordionMultiState extends AccordionBaseState {
     constructor(props) {
         super(props);
         this.#value = props.value;
+        this.includesItem = this.includesItem.bind(this);
+        this.toggleItem = this.toggleItem.bind(this);
     }
-    includesItem = (item) => {
+    includesItem(item) {
         return this.#value.current.includes(item);
-    };
-    toggleItem = (item) => {
+    }
+    toggleItem(item) {
         if (this.includesItem(item)) {
             this.#value.current = this.#value.current.filter((v) => v !== item);
         }
         else {
             this.#value.current = [...this.#value.current, item];
         }
-    };
+    }
 }
 export class AccordionItemState {
     #id;
@@ -87,23 +90,15 @@ export class AccordionItemState {
         this.root = props.rootState;
         this.#id = props.id;
         this.#ref = props.ref;
+        this.updateValue = this.updateValue.bind(this);
         useRefById({
             id: this.#id,
             ref: this.#ref,
-            condition: () => this.isActive,
+            deps: () => this.isActive,
         });
     }
-    updateValue = () => {
+    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,
@@ -128,24 +123,39 @@ class AccordionTriggerState {
         this.#root = itemState.root;
         this.#id = props.id;
         this.#ref = props.ref;
+        this.onpointerdown = this.onpointerdown.bind(this);
+        this.onpointerup = this.onpointerup.bind(this);
+        this.onkeydown = this.onkeydown.bind(this);
         useRefById({
             id: props.id,
             ref: this.#ref,
         });
     }
-    #onclick = () => {
+    onpointerdown(e) {
         if (this.#isDisabled)
             return;
+        if (e.pointerType === "touch" || e.button !== 0)
+            return e.preventDefault();
         this.#itemState.updateValue();
-    };
-    #onkeydown = (e) => {
+    }
+    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();
             return;
         }
         this.#root.rovingFocusGroup.handleKeydown(this.#ref.current, e);
-    };
+    }
     props = $derived.by(() => ({
         id: this.#id.current,
         disabled: this.#isDisabled,
@@ -157,8 +167,9 @@ class AccordionTriggerState {
         [ACCORDION_TRIGGER_ATTR]: "",
         tabindex: 0,
         //
-        onclick: this.#onclick,
-        onkeydown: this.#onkeydown,
+        onpointerdown: this.onpointerdown,
+        onpointerup: this.onpointerup,
+        onkeydown: this.onkeydown,
     }));
 }
 class AccordionContentState {
@@ -271,11 +282,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,8 +1,7 @@
 <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 { 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 {
@@ -11,7 +10,7 @@
 		id = useId(),
 		ref = $bindable(null),
 		...restProps
-	}: ActionProps = $props();
+	}: AlertDialogActionProps = $props();
 
 	const actionState = useAlertDialogAction({
 		id: box.with(() => id),

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";