entasis 0.11.0 → 0.13.0

package/dist/components/DataTable/dataTable.theme.js

@@ -30,7 +30,6 @@ const viewport = cva({
     },
     defaultVariants: { fill: false }
 });
-const savingIndicator = cva({ base: '!absolute !z-30 !rounded-none' });
 const scrollArea = cva({ base: 'h-full' });
 const virtualTable = cva({ base: 'grid min-w-full table-fixed text-sm' });
 const caption = cva({
@@ -185,15 +184,20 @@ const pinnedBoundary = cva({
     defaultVariants: { side: 'none' }
 });
 const editor = cva({ base: 'relative grid h-full w-full min-w-0 items-center' });
-const editorField = cva({ base: 'w-full min-w-0' });
+// No gap: a field with a label keeps its (visually hidden) label row, and the field's gap
+// beside it would make the cell taller than the row while it edits.
+const editorField = cva({ base: 'w-full min-w-0 gap-0' });
 const editorInput = cva({ base: 'h-auto min-w-0 rounded-none text-sm' });
+// The padding matches the cell's, so the value does not move when editing starts. A field action
+// (the date picker's calendar button) pulls itself into the field's own `px-lg` padding with a
+// negative margin; here it pulls back by the cell padding instead, or it would overflow the cell.
 const editorInputContainer = cva({
     base: 'w-full rounded-none border-0 bg-transparent shadow-none transition-none focus-within:ring-0',
     variants: {
         density: {
-            compact: 'min-h-row-sm px-sm py-xs',
-            normal: 'min-h-row-md p-md',
-            comfortable: 'min-h-row-lg p-lg'
+            compact: 'min-h-row-sm px-sm py-xs [&>button:first-child]:-ml-sm [&>button:last-child]:-mr-sm',
+            normal: 'min-h-row-md p-md [&>button:first-child]:-ml-md [&>button:last-child]:-mr-md',
+            comfortable: 'min-h-row-lg p-lg [&>button:first-child]:-ml-lg [&>button:last-child]:-mr-lg'
         }
     },
     defaultVariants: { density: 'normal' }
@@ -237,7 +241,6 @@ export const dataTableTheme = {
     toolbarGroup,
     search,
     viewport,
-    savingIndicator,
     scrollArea,
     virtualTable,
     caption,

package/dist/components/Dialog/Dialog.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createBindableValue } from '../../utils/state.svelte.js';
-	import type { DialogProps } from './dialog.props.js';
+	import type { DialogProps, DialogSnapPoint } from './dialog.props.js';
 	import { useDialogTheme } from './dialog.theme.js';
 	import { DialogState } from './dialog.state.svelte.js';
 	import Slot from '../Slot/Slot.svelte';
@@ -9,11 +9,14 @@
 	import { fso } from '../../transitions/transition.js';
 	import { portal } from '../../attachments/portal.js';
 	import { drawerInsetValue } from '../Theme/theme.designTokens.js';
+	import { composeHandlers } from '../../utils/handlers.js';
+	import { useI18n } from '../../i18n/context.svelte.js';
 
 	let {
 		id: customId,
 		type,
 		responsive,
+		modal = true,
 		defaultOpen = false,
 		open = $bindable(),
 		onOpenChange,
@@ -24,10 +27,15 @@
 		transition,
 		children,
 		closeOnEscape = true,
-		closeOnClickOutside = true,
+		closeOnClickOutside,
 		closable = true,
+		focusOnClose,
 		swipeToDismiss,
 		swipeFrom,
+		snapPoints,
+		snapPoint = $bindable(),
+		defaultSnapPoint,
+		onSnapPointChange,
 		thumb = true,
 		inset,
 		class: className,
@@ -47,6 +55,15 @@
 		() => defaultOpen
 	);
 
+	const snapState = createBindableValue<DialogSnapPoint | undefined>(
+		() => snapPoint,
+		(next) => {
+			snapPoint = next;
+		},
+		() => undefined
+	);
+
+	const t = $derived(useI18n());
 	const id = $props.id();
 	const dialog = new DialogState({
 		get id() {
@@ -67,6 +84,12 @@
 		get onOpenChange() {
 			return onOpenChange;
 		},
+		get onAfterOpen() {
+			return onAfterOpen;
+		},
+		get onAfterClose() {
+			return onAfterClose;
+		},
 		get size() {
 			return size;
 		},
@@ -85,12 +108,33 @@
 		get closable() {
 			return closable;
 		},
+		get focusOnClose() {
+			return focusOnClose;
+		},
 		get swipeToDismiss() {
 			return swipeToDismiss;
 		},
 		get swipeFrom() {
 			return swipeFrom;
 		},
+		get modal() {
+			return modal;
+		},
+		get snapPoints() {
+			return snapPoints;
+		},
+		get snapPoint() {
+			return snapState.value;
+		},
+		set snapPoint(value) {
+			snapState.value = value;
+		},
+		get defaultSnapPoint() {
+			return defaultSnapPoint;
+		},
+		get onSnapPointChange() {
+			return onSnapPointChange;
+		},
 		get motion() {
 			return theme?.motion;
 		}
@@ -100,13 +144,31 @@
 
 	const hasHeader = $derived(!!(title || description));
 
-	const in_out = fso();
+	// A close button that renders nothing (the Popover mobile sheet passes one) leaves the dialog
+	// without a visible way to close it, like `closeButton={false}`: the hidden one takes over.
+	let customCloseButtonEmpty = $state(false);
+	const visibleCloseSuppressed = $derived(closeButton === false || customCloseButtonEmpty);
+	const watchCustomCloseButton = (node: HTMLElement) => {
+		customCloseButtonEmpty = node.childElementCount === 0 && !node.textContent?.trim();
+		return () => {
+			customCloseButtonEmpty = false;
+		};
+	};
+
+	// Wrapped so the lifecycle knows when the panel's transition plays (and when none does).
+	const panelTransition = dialog.lifecycle.transition(fso());
 </script>
 
 {#snippet CLOSE_BUTTON()}
-	{#if closeButton}
+	{#if closeButton === false}
+		<!-- Suppressed: a hidden button at the end of the panel still closes it for screen readers. -->
+	{:else if closeButton}
 		<!-- The part positions a custom close button through this wrapper. -->
-		<Slot class={classes.closeButton({ size: dialog.computedSize })} render={closeButton} />
+		<Slot
+			class={classes.closeButton({ size: dialog.computedSize })}
+			render={closeButton}
+			{@attach watchCustomCloseButton}
+		/>
 	{:else}
 		<!-- The default button carries the part itself. Wrapped in the same classes, the empty
 		     wrapper drew a dot at the corner when hovered (padding, rounded, state layer). -->
@@ -115,62 +177,73 @@
 			class={classes.closeButton({ size: dialog.computedSize })}
 			size="small"
 			variant="ghost"
+			label={t.close}
 			{@attach (node) => node.setAttribute('data-autofocus-skip', '')}
-			onclick={() => dialog.close()}
+			onclick={(event) => dialog.close({ reason: 'close-press', event })}
 		>
 			{@render xIcon({ size: 20 })}
 		</Button>
 	{/if}
 {/snippet}
 
-{#if dialog.isOpen}
+{#if dialog.isRendered}
 	<div
 		{@attach portal()}
 		id={dialog.id}
-		role="dialog"
-		aria-modal="true"
+		role={dialog.role}
+		aria-modal={dialog.modal ? 'true' : undefined}
 		aria-labelledby={title ? `${dialog.id}-label` : undefined}
 		aria-describedby={description ? `${dialog.id}-description` : undefined}
 		data-layer-root
 		class={classes.root({
 			scroll: dialog.computedScroll,
+			modal: dialog.modal,
 			className
 		})}
-		data-type={dialog.type}
+		data-type={dialog.computedType}
 		data-size={size}
+		data-modal={dialog.modal}
+		{...dialog.stateAttributes}
 		style:z-index={dialog.zIndex}
 		style:--drawer-inset={inset === undefined ? undefined : drawerInsetValue(inset)}
 	>
-		<div class={classes.align({ type: dialog.computedType, scroll: dialog.computedScroll })}>
+		<div
+			class={classes.align({
+				type: dialog.computedType,
+				scroll: dialog.computedScroll,
+				keyboard: dialog.keyboardAvoiding
+			})}
+		>
 			<div
 				{@attach dialog.contentAttachment}
-				data-type={dialog.type}
+				data-type={dialog.computedType}
+				{...dialog.stateAttributes}
 				style:transform={dialog.contentTransform}
-				style:transition={dialog.dragging ? 'none' : undefined}
-				in:in_out={dialog.computedTransition.in}
-				out:in_out={dialog.computedTransition.out}
-				onintroend={() => {
-					dialog.hasTransitioned = true;
-					onAfterOpen?.(dialog);
-				}}
-				onoutrostart={() => {
-					dialog.hasTransitioned = false;
-				}}
-				onoutroend={() => {
-					dialog.focusScope.restore();
-					onAfterClose?.(dialog);
-				}}
+				style:transition={dialog.dragging || dialog.followsChild ? 'none' : undefined}
+				style:height={dialog.snapPanelHeight === undefined
+					? undefined
+					: `${dialog.snapPanelHeight}px`}
+				style:touch-action={dialog.bodyScrollLocked ? 'none' : undefined}
+				in:panelTransition={dialog.computedTransition.in}
+				out:panelTransition={dialog.computedTransition.out}
+				onintroend={dialog.lifecycle.introEnd}
+				onoutroend={dialog.lifecycle.outroEnd}
 				class={classes.content({
 					size: dialog.computedSize,
 					type: dialog.computedType,
-					scroll: dialog.computedScroll
+					scroll: dialog.computedScroll,
+					modal: dialog.modal,
+					// A class, not an inline style: Svelte's transitions stash and rewrite the inline
+					// `overflow` shorthand, which drops an `overflow-y` longhand when the intro ends.
+					className: dialog.bodyScrollLocked ? 'overflow-y-hidden!' : undefined
 				})}
 			>
 				<div
 					class="duration-normal ease-standard flex min-h-0 flex-1 flex-col transition-opacity will-change-[opacity]"
 					style:opacity={dialog.stackOpacity}
+					style:transition={dialog.followsChild ? 'none' : undefined}
 				>
-					{#if thumb && dialog.swipeEnabled}
+					{#if thumb && dialog.gestureEnabled}
 						<div
 							aria-hidden="true"
 							data-drag-handle
@@ -180,12 +253,12 @@
 					<Slot
 						as="header"
 						render={header}
-						attrs={dialog.swipeEnabled ? { 'data-drag-handle': true } : undefined}
+						attrs={dialog.gestureEnabled ? { 'data-drag-handle': true } : undefined}
 						class={classes.header({
 							size: dialog.computedSize,
 							// The header doubles as the drag handle on touch, where a scrollable body
 							// would otherwise let the browser claim the pan before we can.
-							className: dialog.swipeEnabled ? 'touch-none' : undefined
+							className: dialog.gestureEnabled ? 'touch-none' : undefined
 						})}
 						renderIf={hasHeader}
 					>
@@ -203,11 +276,24 @@
 							{@render CLOSE_BUTTON()}
 						{/if}
 					</Slot>
-					{#if !hasHeader}
+					{#if !hasHeader && closable}
 						{@render CLOSE_BUTTON()}
 					{/if}
 					{@render children?.(dialog)}
 					<Slot render={footer} class={classes.footer({ size: dialog.computedSize })} />
+					{#if closable && !dialog.isAlert && visibleCloseSuppressed}
+						<!-- Out of the Tab order (Escape and the sheet's own gestures serve sighted keyboard and
+						     touch users), but in the accessibility tree for a screen reader's virtual cursor. -->
+						<button
+							type="button"
+							class="sr-only"
+							tabindex="-1"
+							data-autofocus-skip
+							onclick={(event) => dialog.close({ reason: 'close-press', event })}
+						>
+							{t.close}
+						</button>
+					{/if}
 				</div>
 			</div>
 		</div>
@@ -220,11 +306,10 @@
 		{@const { content, children, onclick, ...buttonProps } = trigger}
 		<Button
 			{...buttonProps}
-			onclick={(event) => {
-				onclick?.(event);
-				dialog.open();
-			}}
+			{...dialog.triggerProps}
+			onclick={composeHandlers(onclick, (event) => dialog.open(event))}
 			children={children ?? content}
+			{@attach dialog.reference}
 		/>
 	{/if}
 {/if}

package/dist/components/Dialog/Dialog.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { DialogProps } from './dialog.props.js';
-declare const Dialog: import("svelte").Component<DialogProps, {}, "open">;
+declare const Dialog: import("svelte").Component<DialogProps, {}, "open" | "snapPoint">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/dist/components/Dialog/DialogBackdrop.svelte

@@ -7,6 +7,8 @@
 	import type { ResolvedMotion } from '../../utils/motion/index.js';
 	import { portal } from '../../attachments/portal.js';
 	import { useScrollLock } from '../../utils/useScrollLock.svelte.js';
+	import { applyDialogIndent } from './dialog.indent.js';
+	import { applyStateAttributes, openStateAttributes } from '../../utils/stateAttributes.js';
 
 	const theme = useTheme();
 	const classes = $derived(useDialogTheme());
@@ -18,7 +20,9 @@
 	const resolveMotion = useDialogMotion();
 	const fallbackMotion = $derived(resolveMotion({ type: 'modal' }));
 
-	const openDialogs = $derived(theme.layers.ofKind('dialog'));
+	// Only modal dialogs dim the page, lock its scroll and move it back; a non-modal one leaves
+	// the page as it is.
+	const openDialogs = $derived(theme.layers.ofKind('dialog').filter((layer) => layer.isModal));
 	const isVisible = $derived(openDialogs.length > 0);
 
 	// Swipe-to-dismiss on the top drawer fades the backdrop with the drag; a snap-back
@@ -38,6 +42,20 @@
 	);
 
 	useScrollLock({ isActive: () => openDialogs.length > 0 });
+
+	// `data-open` / `data-closed` follow the stack from here: the template's own attributes freeze
+	// while the backdrop's fade-out plays (Svelte pauses an outroing block's effects).
+	let backdrop = $state<HTMLElement | null>(null);
+	$effect(() => {
+		if (backdrop) applyStateAttributes(backdrop, openStateAttributes(isVisible));
+	});
+
+	// `data-dialog-open` and `--dialog-depth` on <html>, for pages that scale back behind a sheet.
+	$effect(() => {
+		const depth = openDialogs.length;
+		if (depth === 0) return;
+		return applyDialogIndent(document.documentElement, depth);
+	});
 </script>
 
 {#if isVisible}
@@ -48,7 +66,9 @@
 		aria-hidden="true"
 	>
 		<div
+			bind:this={backdrop}
 			class={classes.backdrop()}
+			{...openStateAttributes(isVisible)}
 			style:opacity={dragOpacity}
 			style:transition={top?.dragging
 				? 'none'

package/dist/components/Dialog/dialog.api.d.ts

@@ -0,0 +1,65 @@
+import type { Attachment } from 'svelte/attachments';
+import type { OpenTransitionStatus } from '../../utils/stateAttributes.js';
+import type { PopupTriggerProps } from '../../utils/trigger.js';
+import type { DialogProps, DialogSnapPoint, DialogType } from './dialog.props.js';
+import type { DialogOpenChangeInput } from './dialog.state.svelte.js';
+/**
+ * The dialog handed to the `trigger` and `children` snippets, `onAfterOpen` and `onAfterClose`:
+ * its open state, the requests that change it, and the attachments that make an element its
+ * trigger.
+ */
+export interface DialogApi {
+    /** The dialog id, which the open trigger's `aria-controls` points at. */
+    readonly id: string;
+    /** Whether the dialog is open. */
+    readonly isOpen: boolean;
+    /**
+     * Where the dialog is in its open/close lifecycle: `closed`, `entering`, `open` or `exiting`
+     * (the values behind `data-entering` and `data-exiting`).
+     */
+    readonly status: OpenTransitionStatus;
+    /** Whether the dialog is modal. */
+    readonly modal: boolean;
+    /** The type resolved for the current viewport, after the mobile-sheet collapse. */
+    readonly computedType: DialogType;
+    /** The point a snap-point drawer rests at, as written in `snapPoints`. */
+    readonly currentSnapPoint: DialogSnapPoint | undefined;
+    /**
+     * Trigger state in the library's semantic vocabulary (`haspopup`, `expanded`, `controls`), to
+     * spread on a Button. `trigger` and `reference` already write it as ARIA attributes.
+     */
+    readonly triggerProps: PopupTriggerProps;
+    /** Requests opening through `onOpenChange`. */
+    readonly open: (input?: DialogOpenChangeInput) => void;
+    /** Requests closing through `onOpenChange`. */
+    readonly close: (input?: DialogOpenChangeInput) => void;
+    /** Requests the other state through `onOpenChange`. */
+    readonly toggle: (input?: DialogOpenChangeInput) => void;
+    /** Requests an explicit state; returns `false` when `onOpenChange` cancelled it. */
+    setOpen(open: boolean, input?: DialogOpenChangeInput): boolean;
+    /**
+     * Moves a snap-point drawer to one of its `snapPoints` (or the nearest to `point`) through
+     * `onSnapPointChange`; returns `false` when it did not move.
+     */
+    setSnapPoint(point: DialogSnapPoint, input?: DialogOpenChangeInput): boolean;
+    /**
+     * Makes any element the dialog's trigger (`{@attach dialog.trigger}`): `reference`, plus a
+     * click that opens the dialog, and on a non-control `role="button"`, `tabindex="0"` and
+     * Enter/Space activation. The element's own handler runs first.
+     */
+    readonly trigger: Attachment<HTMLElement>;
+    /**
+     * Keeps a custom trigger's `aria-haspopup`, `aria-expanded` and `aria-controls` in sync and
+     * makes it the element focus returns to, leaving clicks to the element.
+     */
+    readonly reference: Attachment<HTMLElement>;
+    /** @deprecated Read `status === 'open'`; kept for one minor. */
+    readonly hasTransitioned: boolean;
+    /**
+     * @deprecated Read `computedType` for the type in effect, or the `type` prop you passed; kept
+     * for one minor.
+     */
+    readonly type?: DialogProps['type'];
+    /** @deprecated Read the `size` prop you passed; kept for one minor. */
+    readonly size?: DialogProps['size'];
+}

package/dist/components/Dialog/dialog.api.js

@@ -0,0 +1 @@
+export {};

package/dist/components/Dialog/dialog.attributes.d.ts

@@ -0,0 +1,23 @@
+/**
+ * The styling hooks a Dialog exposes. Attributes are presence attributes (`''` while the state
+ * holds, omitted otherwise) unless the description says they carry a value.
+ */
+export declare const dialogDataAttributes: {
+    readonly 'data-open': "On the root (`role=\"dialog\"`), the panel and the shared backdrop: present while open.";
+    readonly 'data-closed': "On the root, the panel and the backdrop: present while their exit transition plays (a closed dialog is not rendered).";
+    readonly 'data-entering': "On the root and the panel: present while the enter transition plays.";
+    readonly 'data-exiting': "On the root and the panel: present while the exit transition plays.";
+    readonly 'data-type': "On the root and the panel: the type actually shown (`modal`, `drawerBottom`, ...), after responsive records and the mobile-sheet fallback resolve.";
+    readonly 'data-modal': "On the root: `true` or `false`, whether the dialog is modal.";
+    readonly 'data-popup-open': "On the trigger (the built-in button, or an element with `dialog.trigger` / `dialog.reference`): present while the dialog is open.";
+    readonly 'data-dialog-open': "On `<html>`: present while at least one modal dialog is open.";
+};
+/** The name of a Dialog data attribute. */
+export type DialogDataAttribute = keyof typeof dialogDataAttributes;
+export declare const dialogCssVariables: {
+    readonly '--dialog-depth': "On `<html>`: how many modal dialogs are open (`1` for a single sheet), for pages that scale back behind a sheet.";
+    readonly '--drawer-inset': "On the root: the gap between a drawer and the screen edge, from the `inset` prop or the theme.";
+    readonly '--drawer-edge-radius': "On a drawer's panel: the radius of its screen-edge corners, `0` while it touches the edge.";
+};
+/** The name of a Dialog CSS variable. */
+export type DialogCssVariable = keyof typeof dialogCssVariables;

package/dist/components/Dialog/dialog.attributes.js

@@ -0,0 +1,19 @@
+/**
+ * The styling hooks a Dialog exposes. Attributes are presence attributes (`''` while the state
+ * holds, omitted otherwise) unless the description says they carry a value.
+ */
+export const dialogDataAttributes = {
+    'data-open': 'On the root (`role="dialog"`), the panel and the shared backdrop: present while open.',
+    'data-closed': 'On the root, the panel and the backdrop: present while their exit transition plays (a closed dialog is not rendered).',
+    'data-entering': 'On the root and the panel: present while the enter transition plays.',
+    'data-exiting': 'On the root and the panel: present while the exit transition plays.',
+    'data-type': 'On the root and the panel: the type actually shown (`modal`, `drawerBottom`, ...), after responsive records and the mobile-sheet fallback resolve.',
+    'data-modal': 'On the root: `true` or `false`, whether the dialog is modal.',
+    'data-popup-open': 'On the trigger (the built-in button, or an element with `dialog.trigger` / `dialog.reference`): present while the dialog is open.',
+    'data-dialog-open': 'On `<html>`: present while at least one modal dialog is open.'
+};
+export const dialogCssVariables = {
+    '--dialog-depth': 'On `<html>`: how many modal dialogs are open (`1` for a single sheet), for pages that scale back behind a sheet.',
+    '--drawer-inset': 'On the root: the gap between a drawer and the screen edge, from the `inset` prop or the theme.',
+    '--drawer-edge-radius': "On a drawer's panel: the radius of its screen-edge corners, `0` while it touches the edge."
+};

package/dist/components/Dialog/dialog.indent.d.ts

@@ -0,0 +1,6 @@
+/** Attribute on `<html>` while at least one modal dialog is open. */
+export declare const DIALOG_OPEN_ATTRIBUTE = "data-dialog-open";
+/** Custom property on `<html>`: how many modal dialogs are open (`1` for a single sheet). */
+export declare const DIALOG_DEPTH_VARIABLE = "--dialog-depth";
+/** Writes the hooks for `depth` open modal dialogs on `root`; the returned function removes them. */
+export declare const applyDialogIndent: (root: HTMLElement, depth: number) => () => void;

package/dist/components/Dialog/dialog.indent.js

@@ -0,0 +1,16 @@
+// The indent effect: while a modal dialog is open, `<html>` carries a hook for the page behind to
+// move back (scale and round the app shell behind a sheet) and the stack's depth, with nothing
+// the page has to measure.
+/** Attribute on `<html>` while at least one modal dialog is open. */
+export const DIALOG_OPEN_ATTRIBUTE = 'data-dialog-open';
+/** Custom property on `<html>`: how many modal dialogs are open (`1` for a single sheet). */
+export const DIALOG_DEPTH_VARIABLE = '--dialog-depth';
+/** Writes the hooks for `depth` open modal dialogs on `root`; the returned function removes them. */
+export const applyDialogIndent = (root, depth) => {
+    root.setAttribute(DIALOG_OPEN_ATTRIBUTE, '');
+    root.style.setProperty(DIALOG_DEPTH_VARIABLE, String(depth));
+    return () => {
+        root.removeAttribute(DIALOG_OPEN_ATTRIBUTE);
+        root.style.removeProperty(DIALOG_DEPTH_VARIABLE);
+    };
+};

package/dist/components/Dialog/dialog.mcp.d.ts

@@ -1 +1 @@
-export declare const dialogDescription = "\n# Dialog Component\n\nThe Dialog component (also known as Modal) displays content in a layer above the page, blocking interaction with the rest of the application until dismissed.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\t\n</script>\n// By default Dialog comes with a button that trigger them, no need to define a callback and a $state\n<Dialog title=\"Dialog Title\">\n\tDialog content goes here\n</Dialog>\n```\n\n## Props\n\n### Core Props\n- **open**: boolean (bindable) - Controls dialog visibility\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided\n- **id**: string - Unique identifier for the dialog\n- **type**: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'alert' | 'modal' (default: 'modal')\n  - fullScreen: Full screen dialog overlay\n  - drawerRight: Drawer sliding in from the right\n  - drawerLeft: Drawer sliding in from the left\n  - drawerBottom: Drawer sliding in from the bottom\n  - drawerTop: Drawer sliding in from the top\n  - alert: Alert-style dialog\n  - modal: Standard modal dialog\n  - Supports responsive values: pass a `Partial<Record<Breakpoint, DialogType>>` record such as `{ xs: 'drawerBottom', md: 'modal' }` to vary the type per breakpoint (breakpoint is one of 'xs' | 'sm' | 'md' | 'lg' | 'xl', tracked live from the viewport; the nearest defined key at or below the active one wins)\n- **responsive**: boolean (default: true) - When the resolved type is `modal`, collapse it into a `drawerBottom` bottom sheet on mobile (viewport < 768px). The sheet inherits swipe-to-dismiss and the drag thumb. Set false to keep a centered modal on every screen size\n\n### Layout Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: Compact dialog size\n  - normal: Standard dialog size\n  - large: Larger dialog size\n\n### Event Props\n- **onOpenChange**: (open: boolean) => void - Called once for each library-requested state change\n- **onAfterOpen**: (payload: DialogState) => void - Called after the open transition finishes\n- **onAfterClose**: (payload: DialogState) => void - Called after the close transition finishes\n\n### Slot Props\n- **title**: string | Snippet<[DialogState]> - Dialog title\n- **description**: string | Snippet<[DialogState]> - Dialog description\n- **children**: Snippet<[DialogState]> - Main dialog content\n- **header**: Snippet - Custom header content\n- **footer**: Snippet - Custom footer content\n- **trigger**: Snippet | (ButtonProps & { content?: string }) - Custom trigger button\n- **closeButton**: Snippet - Custom close button\n\n### Behavior Props\n- **closeOnEscape**: boolean (default: true) - Close when Escape key is pressed\n- **closeOnClickOutside**: boolean (default: true) - Close when clicking outside dialog\n- **closable**: boolean (default: true) - Whether dialog can be closed\n- **swipeToDismiss**: boolean (default: true for drawer types) - Drag the drawer toward its edge to dismiss. Direction-aware (drawerRight drags right, drawerBottom drags down, etc.) and never hijacks inner scrolling; opt elements out with `data-no-swipe`\n- **thumb**: boolean (default: true) - Drag thumb bar shown on swipe-dismissable drawers (inner edge, orientation follows the drawer side, oversized hitbox); set false to hide. Themeable via the `thumb` theme part\n- **inset**: a spacing step or `'none'` \u2014 how far a drawer stands off the screen edge for this dialog. Defaults to the theme's `designTokens.drawerInset` (`'layout-md'`). At `'none'` the drawer is edge to edge, its edge corners square off and only the corners facing the page stay rounded\n- **swipeFrom**: 'panel' | 'handle' (default: 'panel') - Where a swipe can start: anywhere on the panel, or only the drag handles (thumb and header)\n\n### Visual Props\n- **transition**: TransitionConfig - Custom transition animation\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<DialogOverlay>\n\t<DialogContent>\n\t\t<DialogHeader>\n\t\t\t<Title />\n\t\t\t<Description />\n\t\t\t<CloseButton />\n\t\t</DialogHeader>\n\t\t<DialogBody>\n\t\t\t<Children />\n\t\t</DialogBody>\n\t\t<DialogFooter />\n\t</DialogContent>\n</DialogOverlay>\n```\n\n## Examples\n\n### More Examples\n\n### A with a custom trigger \n```svelte\n\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n</script>\n\n\n<Dialog bind:open title=\"Welcome\">\n\t<p>This is a basic dialog.</p>\n\t\n\t{#snippet trigger(dialog)}\n\t\t<Button onclick={() => dialog.open()}>Open</Button>\n\t{/snippet}\n</Dialog>\n```\n\n### A with a custom as button props \n```svelte\n\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n</script>\n\n\n<Dialog bind:open title=\"Welcome\"\ntrigger={{\ncontent:\"Click me\",\ncolor:\"secondary\",\nsize:\"small\"\n}}\n>\n\t<p>This is a basic dialog.</p>\t\n</Dialog>\n```\n\n### With Description\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n</script>\n\n<Dialog \t\n\ttitle=\"Confirm Action\"\n\tdescription=\"Are you sure you want to continue?\"\n>\n\t<p>This action cannot be undone.</p>\n</Dialog>\n```\n\n### Different Sizes\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\tlet open = $state(false);\n</script>\n\n```\n\n### Advanced Example\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n\t\n\tfunction handleConfirm() {\n\t\tconsole.log('Confirmed!');\n\t\topen = false;\n\t}\n</script>\n\n<Dialog bind:open title=\"Confirm\">\n\tAre you sure?\n\t\n\t{#snippet footer()}\n\t\t<div class=\"flex gap-2 justify-end\">\n\t\t\t<Button variant=\"ghost\" onclick={() => open = false}>\n\t\t\t\tCancel\n\t\t\t</Button>\n\t\t\t<Button color=\"danger\" onclick={handleConfirm}>\n\t\t\t\tConfirm\n\t\t\t</Button>\n\t\t</div>\n\t{/snippet}\n</Dialog>\n```\n\n### Drawer Types\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\t\n</script>\n\n<!-- Right drawer -->\n<Dialog type=\"drawerRight\" title=\"Side Drawer\">\n\tThis slides in from the right\n</Dialog>\n\n<!-- Left drawer -->\n<Dialog type=\"drawerLeft\" title=\"Left Drawer\">\n\tThis slides in from the left\n</Dialog>\n\n<!-- Bottom drawer -->\n<Dialog type=\"drawerBottom\" title=\"Bottom Drawer\">\n\tThis slides in from the bottom\n</Dialog>\n\n<!-- Full screen -->\n<Dialog type=\"fullScreen\" title=\"Full Screen\">\n\tFull screen dialog content\n</Dialog>\n```\n\n### Custom Header\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { warningIcon } from 'entasis/icons/warning';\n</script>\n\n<Dialog bind:open>\n\t{#snippet header()}\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t{@render warningIcon()}\n\t\t\t<h2>Warning</h2>\n\t\t</div>\n\t{/snippet}\n\t\n\tThis is important!\n</Dialog>\n```\n\n\n### With Lifecycle Hooks\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\tlet open = $state(false);\n</script>\n\n<Dialog \n\tbind:open\n\ttitle=\"Lifecycle\"\n\tonAfterOpen={(payload) => console.log('Dialog opened', payload)}\n\tonAfterClose={(payload) => console.log('Dialog closed', payload)}\n>\n\tWatch the console\n</Dialog>\n```\n\n## State Management\n\nThe Dialog component uses a `DialogState` instance that is passed to all slot snippets. This state object provides:\n\n- **id**: string - Dialog identifier\n- **type**: DialogType - Current dialog type\n- **size**: Size - Current dialog size\n- **open()**: () => void - Method to open the dialog\n- **close()**: () => void - Method to close the dialog\n\n## Accessibility\n\n- Initial focus goes to an `[autofocus]` / `[data-autofocus]` element inside the dialog, else the first tabbable control (the close button is skipped), else the panel itself\n- Tab and Shift+Tab are contained inside the dialog, and the rest of the page is `inert` while a modal is open\n- Focus is restored to the opener after the close transition finishes, just before `onAfterClose`\n- `aria-labelledby` links the `title` and `aria-describedby` links the `description`\n- Escape closes only the topmost open layer and an outside press dismisses the layers above the one pressed; both honour `closeOnEscape` / `closable` / `closeOnClickOutside` through the shared layer stack\n- Body scroll is locked when dialog is open\n\n## Notes\n\n- Multiple dialogs can be stacked\n- Last opened dialog receives focus\n- Background overlay prevents interaction with page\n- Scroll locking prevents background scroll\n- Transitions are customizable\n\n## Theme Customization\n\nThe Dialog component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **motion**: Open/close transition preset, keyed by `type` (drawers fly from their edge). Takes\n  `in` / `out` FSO params plus a `duration` / `easing` motion token; the `transition` prop wins\n  over it\n- **root**: Dialog overlay/backdrop styles\n- **content**: Dialog content container styles\n- **thumb**: Drag thumb bar styles (type variant controls per-side placement)\n- **header**: Dialog header section styles\n- **footer**: Dialog footer section styles\n- **closeButton**: Close button styles\n- **title**: Dialog title text styles\n- **description**: Dialog description text styles\n\n### Theme Type Definition\n\n```typescript\nimport type { DialogThemeProps } from 'entasis/dialog';\n\n// Example theme customization\nconst customTheme: DialogThemeProps = {\n  root: {\n    base: 'z-[+50] fixed inset-0 flex',\n    scroll: {\n      inner: 'overflow-hidden',\n      outer: 'overflow-auto'\n    }\n  },\n  align: {\n    type: {\n      fullScreen: 'justify-center items-center',\n      drawerRight: 'justify-end',\n      drawerLeft: 'justify-start',\n      drawerBottom: 'justify-center items-end',\n      drawerTop: 'justify-center items-start',\n      modal: 'justify-center',\n      alert: 'justify-center'\n    }\n  },\n  content: {\n    size: {\n      small: 'max-w-md w-full',\n      normal: 'max-w-xl w-full',\n      large: 'max-w-3xl w-full'\n    },\n    type: {\n      fullScreen: 'h-full w-full max-w-full',\n      drawerRight: 'rounded-r-[var(--drawer-edge-radius)] h-full',\n      modal: ''\n    }\n  },\n  header: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  },\n  title: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  },\n  description: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes for dialog overlay/backdrop\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size constraints\n  - type: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'modal' | 'alert' - Dialog type/layout\n\n**content**:\n- base: Base classes for dialog content container\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Content max-width\n  - type: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'modal' | 'alert' - Content styling based on type\n\n**header**:\n- base: Base classes for header section\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**footer**:\n- base: Base classes for footer section\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**closeButton**:\n- base: Base classes for close button\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**title**:\n- base: Base classes for title text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Dialog \n  title=\"Custom Dialog\"\n  theme={{\n    content: {\n      base: 'rounded-2xl raised-5',\n      size: {\n        normal: 'max-w-2xl'\n      }\n    },\n    header: {\n      base: 'border-b-2 border-primary'\n    }\n  }}\n>\n  Custom styled dialog content\n</Dialog>\n```\n\n**Drawer Type Customization**:\n```svelte\n<Dialog \n  type=\"drawerRight\"\n  theme={{\n    align: {\n      type: {\n        drawerRight: 'justify-end'\n      }\n    },\n    backdrop: {\n      base: 'bg-black/50'\n    },\n    content: {\n      type: {\n        drawerRight: 'rounded-l-xl raised-5'\n      }\n    }\n  }}\n>\n  Custom drawer styling\n</Dialog>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setDialogTheme } from './index.ts';\n  \n  setDialogTheme({\n    root: {\n      base: 'backdrop-blur-sm'\n    },\n    content: {\n      base: 'lift-5 border-2',\n      size: {\n        normal: 'max-w-2xl'\n      }\n    },\n    title: {\n      base: 'text-2xl font-bold'\n    }\n  });\n</script>\n```\n";
+export declare const dialogDescription = "\n# Dialog Component\n\nThe Dialog component (also known as Modal) displays content in a layer above the page, blocking interaction with the rest of the application until dismissed.\n\n## Basic Usage\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\t\n</script>\n// By default Dialog comes with a button that trigger them, no need to define a callback and a $state\n<Dialog title=\"Dialog Title\">\n\tDialog content goes here\n</Dialog>\n```\n\n## Props\n\n### Core Props\n- **open**: boolean (bindable) - Controls dialog visibility\n- **modal**: boolean (default: true) - A modal makes the page behind `inert`, locks page scroll, contains Tab, dims the page with the shared backdrop and dismisses on an outside press. `modal={false}` leaves the page interactive: no `inert`, no scroll lock, no backdrop, no Tab containment, and an outside press does not dismiss it unless `closeOnClickOutside` is set. Escape, the close button and swipes still close it (the Android Back gesture does not: it closes modal dialogs only). It renders no `aria-modal` (and `data-modal=\"false\"`), always scrolls inside its card, and does not push dialogs beneath it back\n- **defaultOpen**: boolean (default: false) - Initial state when open is not provided\n- **id**: string - Unique identifier for the dialog\n- **type**: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'alert' | 'modal' (default: 'modal')\n  - fullScreen: Full screen dialog overlay\n  - drawerRight: Drawer sliding in from the right\n  - drawerLeft: Drawer sliding in from the left\n  - drawerBottom: Drawer sliding in from the bottom\n  - drawerTop: Drawer sliding in from the top\n  - alert: Alert dialog for an interruption that needs an answer: renders `role=\"alertdialog\"` and ignores outside presses unless `closeOnClickOutside` is set (Escape still closes it)\n  - modal: Standard modal dialog\n  - Supports responsive values: pass a `Partial<Record<Breakpoint, DialogType>>` record such as `{ xs: 'drawerBottom', md: 'modal' }` to vary the type per breakpoint (breakpoint is one of 'xs' | 'sm' | 'md' | 'lg' | 'xl', tracked live from the viewport; the nearest defined key at or below the active one wins)\n- **responsive**: boolean (default: true) - When the resolved type is `modal`, collapse it into a `drawerBottom` bottom sheet on mobile (viewport < 768px). The sheet inherits swipe-to-dismiss and the drag thumb. Set false to keep a centered modal on every screen size\n\n### Layout Props\n- **size**: 'small' | 'normal' | 'large' (default: 'normal')\n  - small: Compact dialog size\n  - normal: Standard dialog size\n  - large: Larger dialog size\n\n### Event Props\n- **onOpenChange**: (open: boolean, details: OpenChangeDetails) => void - Called before each library-requested state change, with `details.reason` (`'trigger-press'`, `'escape-key'`, `'outside-press'`, `'close-press'`, `'swipe'`, `'close-watcher'` for the Android Back gesture, `'imperative-action'`\u2026), `details.event`, `details.trigger`, `details.interaction` and `details.cancel()`. Cancelling keeps the dialog as it is (a cancelled swipe snaps back) and leaves the event untouched. Inside the callback `open` still holds the previous state. Types from `entasis/types`\n- **onAfterOpen**: (payload: DialogApi) => void - Called once per open after the open transition finishes; a dialog created open (`defaultOpen`) renders once mounted, animates in and reports it too\n- **onAfterClose**: (payload: DialogApi) => void - Called once per close after the close transition finishes\n\n### Slot Props\n- **title**: string | Snippet - Dialog title\n- **description**: string | Snippet - Dialog description\n- **children**: Snippet<[DialogApi]> - Main dialog content\n- **header**: Snippet - Custom header content\n- **footer**: Snippet - Custom footer content\n- **trigger**: Snippet<[DialogApi]> | (ButtonProps & { content?: string }) - Custom trigger button. The built-in button carries `aria-haspopup=\"dialog\"`, `aria-expanded` and `aria-controls`; its `onclick` runs first, and `event.preventDefault()` there keeps the dialog closed. In a snippet, `{@attach dialog.trigger}` gives any element the same contract\n- **closeButton**: Snippet | false - Custom close button, or `false` to suppress the visible one. A closable dialog whose visible button is suppressed (`false`, or a snippet that renders nothing, as the Popover mobile sheet passes) still renders a visually hidden `Close` button at the end of the panel, out of the Tab order but in the accessibility tree, so screen reader users have a control that closes it. An `alert` never gets one: its own buttons answer it. The default close button is named `Close` (translated by the i18n catalog)\n\n### Behavior Props\n- **closeOnEscape**: boolean (default: true) - Close when Escape key is pressed (and, for a modal dialog on Android, on the Back gesture)\n- **closeOnClickOutside**: boolean (default: true, false for `type=\"alert\"` and for `modal={false}`) - Close when pressing outside dialog. A press that began before the dialog opened does not count\n- **closable**: boolean (default: true) - Whether dialog can be closed\n- **focusOnClose**: boolean | HTMLElement | ((details) => HTMLElement | boolean | void) (default: true) - Where focus goes when the dialog closes. `true` returns it to the control that opened the dialog, else to the most recent element still on the page; `false` leaves focus alone; an element receives it; a function gets the change details (`reason`, `interaction`\u2026) and returns one of these, or nothing to restore as usual\n- **swipeToDismiss**: boolean (default: true for drawer types) - Drag the drawer toward its edge to dismiss. Direction-aware (drawerRight drags right, drawerBottom drags down, etc.) and never hijacks inner scrolling (including a horizontal scroller in a right-to-left layout) or a mostly sideways drag (a press that travels more across the dismiss axis than along it is spent); a quick flick dismisses even when the last move before release is nearly stationary; opt elements out with `data-no-swipe`. A mouse or pen drags a drawer only from its handles (thumb and header), so dragging over the body selects text; a finger drags from anywhere unless text is selected in the panel, buttons and links included (a field, a select or a media element keeps its own gesture, and a tap stays a tap). A dialog above another one keeps the one beneath moving with it: its scale and fade follow the swipe's progress\n- **thumb**: boolean (default: true) - Drag thumb bar shown on swipe-dismissable drawers (inner edge, orientation follows the drawer side, oversized hitbox); set false to hide. Themeable via the `thumb` theme part\n- **inset**: a spacing step or `'none'` \u2014 how far a drawer stands off the screen edge for this dialog. Defaults to the theme's `designTokens.drawerInset` (`'layout-md'`). At `'none'` the drawer is edge to edge, its edge corners square off and only the corners facing the page stay rounded\n- **swipeFrom**: 'panel' | 'handle' (default: 'panel') - Where a finger swipe can start: anywhere on the panel, or only the drag handles (thumb and header). Mouse and pen always start from a handle\n- **snapPoints**: (number | string)[] - Where a `drawerBottom` or `drawerTop` (or a modal collapsed into a mobile sheet) can rest. A number is a fraction of the available height (above 0, at most 1), a string a CSS length (`'148px'`, `'20rem'`, `'40%'`, `'50vh'`). The panel is as tall as the largest point and shows only the active one; a drag moves it between the points, a flick (0.4 px/ms or more) carries it to the next one in the direction it was thrown, and dragging below the lowest dismisses it when swipe-to-dismiss is on (otherwise the lowest is as far as it goes). The body scrolls only at the largest point; below it, a drag anywhere moves the panel. Ignored by the other types\n- **snapPoint**: number | string (bindable) - The point the drawer rests at, one of `snapPoints`\n- **defaultSnapPoint**: number | string - The point it opens at when `snapPoint` is not bound (default: the largest)\n- **onSnapPointChange**: ({ snapPoint, details }: { snapPoint; details: OpenChangeDetails }) => void - Called before the resting point changes. `details.reason` is `'swipe'` or `'imperative-action'` (`dialog.setSnapPoint`); `details.cancel()` keeps the current point and a cancelled drag snaps back\n\n### Visual Props\n- **transition**: TransitionConfig - Custom transition animation\n\n### Styling Props\n- **class**: string - Additional CSS classes\n- **theme**: ComponentTheme - Custom theme overrides\n\n## Structure\n\n```\n<DialogOverlay>\n\t<DialogContent>\n\t\t<DialogHeader>\n\t\t\t<Title />\n\t\t\t<Description />\n\t\t\t<CloseButton />\n\t\t</DialogHeader>\n\t\t<DialogBody>\n\t\t\t<Children />\n\t\t</DialogBody>\n\t\t<DialogFooter />\n\t</DialogContent>\n</DialogOverlay>\n```\n\n## Examples\n\n### More Examples\n\n### A with a custom trigger \n```svelte\n\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n</script>\n\n\n<Dialog bind:open title=\"Welcome\">\n\t<p>This is a basic dialog.</p>\n\t\n\t<!-- {@attach dialog.trigger} opens the dialog on click (Enter/Space on a non-control) and\n\t     keeps aria-haspopup / aria-expanded / aria-controls in sync; focus returns to it -->\n\t{#snippet trigger(dialog)}\n\t\t<Button {@attach dialog.trigger}>Open</Button>\n\t{/snippet}\n</Dialog>\n```\n\n### Choose where focus goes on close\n\n```svelte\n<script lang=\"ts\">\n\timport { Dialog } from 'entasis/dialog';\n\n\tlet search = $state<HTMLInputElement | null>(null);\n</script>\n\n<input bind:this={search} aria-label=\"Search\" />\n<!-- After a save, focus the search field instead of the button that opened the dialog. -->\n<Dialog\n\ttitle=\"Rename\"\n\ttrigger={{ content: 'Rename' }}\n\tfocusOnClose={(details) => (details?.reason === 'close-press' ? search : undefined)}\n>\n\t<p>New name</p>\n</Dialog>\n```\n\n### Cancel a close\n\n```svelte\n<script lang=\"ts\">\n\timport { Dialog } from 'entasis/dialog';\n\timport type { OpenChangeDetails } from 'entasis/types';\n\n\tlet draft = $state('');\n\t// Runs before the change: with a draft, only the close button closes the dialog.\n\tconst keepDraft = (open: boolean, details: OpenChangeDetails) => {\n\t\tif (!open && draft && details.reason !== 'close-press') details.cancel();\n\t};\n</script>\n\n<Dialog title=\"New message\" trigger={{ content: 'Write' }} onOpenChange={keepDraft}>\n\t<textarea aria-label=\"Message\" bind:value={draft}></textarea>\n</Dialog>\n```\n\n### Ask before closing\n\n```svelte\n<script lang=\"ts\">\n\timport { Dialog } from 'entasis/dialog';\n\timport { confirmation } from 'entasis/confirmation';\n\timport type { OpenChangeDetails } from 'entasis/types';\n\n\tlet open = $state(false);\n\tlet draft = $state('');\n\n\t// Escape, an outside press, the close button, a swipe and Android Back all arrive here.\n\tconst askBeforeClosing = (nextOpen: boolean, details: OpenChangeDetails) => {\n\t\tif (nextOpen || !draft) return;\n\t\tdetails.cancel();\n\t\tconfirmation({\n\t\t\ttitle: 'Discard this draft?',\n\t\t\tdescription: 'Your changes will be lost.',\n\t\t\tconfirm: { text: 'Discard', color: 'danger' },\n\t\t\tcancel: 'Keep editing'\n\t\t}).then(({ confirmed }) => {\n\t\t\tif (!confirmed) return;\n\t\t\tdraft = '';\n\t\t\topen = false;\n\t\t});\n\t};\n</script>\n\n<Dialog type=\"drawerRight\" title=\"New message\" bind:open onOpenChange={askBeforeClosing}>\n\t<textarea aria-label=\"Message\" bind:value={draft}></textarea>\n</Dialog>\n```\n\n### Non-modal\n\n```svelte\n<Dialog modal={false} type=\"drawerRight\" title=\"Inspector\" trigger={{ content: 'Open inspector' }}>\n\t<p>The page behind stays interactive.</p>\n</Dialog>\n```\n\n### Snap points\n\n```svelte\n<script lang=\"ts\">\n\timport { Dialog } from 'entasis/dialog';\n\n\tlet snapPoint = $state<number | string>(0.3);\n</script>\n\n<Dialog\n\ttype=\"drawerBottom\"\n\ttitle=\"Snap points\"\n\tsnapPoints={[0.3, 0.6, 1]}\n\tbind:snapPoint\n\tonSnapPointChange={({ snapPoint, details }) => console.log(snapPoint, details.reason)}\n\ttrigger={{ content: 'Open sheet' }}\n>\n\t{#snippet children(dialog)}\n\t\t<button onclick={() => dialog.setSnapPoint(1)}>Expand</button>\n\t{/snippet}\n</Dialog>\n```\n\n### A with a custom as button props \n```svelte\n\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n</script>\n\n\n<Dialog bind:open title=\"Welcome\"\ntrigger={{\ncontent:\"Click me\",\ncolor:\"secondary\",\nsize:\"small\"\n}}\n>\n\t<p>This is a basic dialog.</p>\t\n</Dialog>\n```\n\n### With Description\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n</script>\n\n<Dialog \t\n\ttitle=\"Confirm Action\"\n\tdescription=\"Are you sure you want to continue?\"\n>\n\t<p>This action cannot be undone.</p>\n</Dialog>\n```\n\n### Different Sizes\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\tlet open = $state(false);\n</script>\n\n```\n\n### Advanced Example\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { Button } from 'entasis/button';\n\t\n\tlet open = $state(false);\n\t\n\tfunction handleConfirm() {\n\t\tconsole.log('Confirmed!');\n\t\topen = false;\n\t}\n</script>\n\n<Dialog bind:open title=\"Confirm\">\n\tAre you sure?\n\t\n\t{#snippet footer()}\n\t\t<div class=\"flex gap-2 justify-end\">\n\t\t\t<Button variant=\"ghost\" onclick={() => open = false}>\n\t\t\t\tCancel\n\t\t\t</Button>\n\t\t\t<Button color=\"danger\" onclick={handleConfirm}>\n\t\t\t\tConfirm\n\t\t\t</Button>\n\t\t</div>\n\t{/snippet}\n</Dialog>\n```\n\n### Drawer Types\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\t\n</script>\n\n<!-- Right drawer -->\n<Dialog type=\"drawerRight\" title=\"Side Drawer\">\n\tThis slides in from the right\n</Dialog>\n\n<!-- Left drawer -->\n<Dialog type=\"drawerLeft\" title=\"Left Drawer\">\n\tThis slides in from the left\n</Dialog>\n\n<!-- Bottom drawer -->\n<Dialog type=\"drawerBottom\" title=\"Bottom Drawer\">\n\tThis slides in from the bottom\n</Dialog>\n\n<!-- Full screen -->\n<Dialog type=\"fullScreen\" title=\"Full Screen\">\n\tFull screen dialog content\n</Dialog>\n```\n\n### Custom Header\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\timport { warningIcon } from 'entasis/icons/warning';\n</script>\n\n<Dialog bind:open>\n\t{#snippet header()}\n\t\t<div class=\"flex items-center gap-2\">\n\t\t\t{@render warningIcon()}\n\t\t\t<h2>Warning</h2>\n\t\t</div>\n\t{/snippet}\n\t\n\tThis is important!\n</Dialog>\n```\n\n\n### With Lifecycle Hooks\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n\t\n\tlet open = $state(false);\n</script>\n\n<Dialog \n\tbind:open\n\ttitle=\"Lifecycle\"\n\tonAfterOpen={(payload) => console.log('Dialog opened', payload)}\n\tonAfterClose={(payload) => console.log('Dialog closed', payload)}\n>\n\tWatch the console\n</Dialog>\n```\n\n## State Management\n\nThe `trigger` and `children` snippets, `onAfterOpen` and `onAfterClose` receive a `DialogApi` (`import type { DialogApi } from './index.ts'`). It is a narrow handle: the class behind it stays internal, so its layer, focus scope and swipe machinery can change without breaking you. It provides:\n\n- **id**: string - Dialog identifier, which the open trigger's `aria-controls` points at\n- **isOpen**: boolean - Whether the dialog is open\n- **status**: 'closed' | 'entering' | 'open' | 'exiting' - Where the dialog is in its open/close lifecycle\n- **modal**: boolean - Whether the dialog is modal\n- **computedType**: DialogType - The type resolved for the current viewport, after the mobile sheet collapse\n- **open(details?)**, **close(details?)**, **toggle(details?)** - Request a change through `onOpenChange`; each accepts the DOM event or partial details (`{ reason, event }`), and reports `'imperative-action'` unless a trigger press is dispatching\n- **setOpen(open, details?)**: boolean - The same request with an explicit state; returns `false` when `onOpenChange` cancelled it\n- **setSnapPoint(point, details?)**: boolean - Moves a snap-point drawer to one of its `snapPoints` (or the nearest to `point`) through `onSnapPointChange`; returns `false` when it did not move\n- **currentSnapPoint**: number | string | undefined - The point the drawer rests at, as written in `snapPoints`\n- **triggerProps**: { haspopup, expanded, controls } - The trigger state in the library's semantic vocabulary, to spread on a Button; `trigger` and `reference` already write it as ARIA attributes\n- **trigger**: attachment that makes any element the dialog's trigger (`{@attach dialog.trigger}`): `reference`, plus a click that opens the dialog and, on a non-control, `role=\"button\"`, `tabindex=\"0\"` and Enter/Space activation. The element's own handler runs first; `event.preventDefault()` there stops it\n- **reference**: attachment that keeps a custom trigger's `aria-haspopup`, `aria-expanded` and `aria-controls` in sync and makes it the element focus returns to, leaving clicks to the element\n\n## Styling hooks\n\nThe root, the panel, the trigger and the shared backdrop carry state attributes, so a theme or a `class` can style each phase without reading component state.\n\nAttributes are presence attributes (set while the state holds, omitted otherwise) unless they carry a value.\n\n**Data attributes**\n- `data-open`: On the root (`role=\"dialog\"`), the panel and the shared backdrop: present while open.\n- `data-closed`: On the root, the panel and the backdrop: present while their exit transition plays (a closed dialog is not rendered).\n- `data-entering`: On the root and the panel: present while the enter transition plays.\n- `data-exiting`: On the root and the panel: present while the exit transition plays.\n- `data-type`: On the root and the panel: the type actually shown (`modal`, `drawerBottom`, ...), after responsive records and the mobile-sheet fallback resolve.\n- `data-modal`: On the root: `true` or `false`, whether the dialog is modal.\n- `data-popup-open`: On the trigger (the built-in button, or an element with `dialog.trigger` / `dialog.reference`): present while the dialog is open.\n- `data-dialog-open`: On `<html>`: present while at least one modal dialog is open.\n\n**CSS variables**\n- `--dialog-depth`: On `<html>`: how many modal dialogs are open (`1` for a single sheet), for pages that scale back behind a sheet.\n- `--drawer-inset`: On the root: the gap between a drawer and the screen edge, from the `inset` prop or the theme.\n- `--drawer-edge-radius`: On a drawer's panel: the radius of its screen-edge corners, `0` while it touches the edge.\n\nThe typed maps `dialogDataAttributes` and `dialogCssVariables` (from `entasis/dialog`) list each name with its meaning.\n\n```svelte\n<script>\n\timport { Dialog } from 'entasis/dialog';\n</script>\n\n<!-- Fade the trigger while its dialog is open -->\n<Dialog trigger={{ content: 'Open', class: 'data-popup-open:opacity-60' }} title=\"Settings\">\u2026</Dialog>\n```\n\n## Accessibility\n\n- Initial focus goes to an `[autofocus]` / `[data-autofocus]` element inside the dialog, else the first tabbable control (the close button is skipped), else the panel itself\n- Tab and Shift+Tab are contained inside the dialog, and the rest of the page is `inert` while a modal is open\n- Focus is restored to the opener after the close transition finishes, just before `onAfterClose`: the trigger that opened it, else the element focused when it opened. When that element is gone or disabled (a menu item that opened the dialog), focus goes to the last element that had it inside the dialog beneath this one, else to the most recent element still on the page. A close by Escape or from the keyboard returns focus with a visible focus ring, and in Safari a focused text field is blurred before it unmounts so the page does not jump. `focusOnClose` overrides all of this\n- When a dialog (a Confirmation, say) closes over another dialog, the one beneath keeps focus where it was and receives it back from the closing one; it does not move focus to its first field again\n- Tab moves focus inside the dialog itself instead of leaving it to the browser, so it wraps in Safari too, where Tab skips buttons by default\n- The trigger (built-in, or a snippet element with `{@attach dialog.trigger}`) carries `aria-haspopup=\"dialog\"`, `aria-expanded` and `aria-controls` pointing at the open dialog\n- On Android, the Back gesture closes the topmost modal dialog (not a `modal={false}` one) through a `CloseWatcher` (`reason: 'close-watcher'`), under the same rules as Escape\n- `aria-labelledby` links the `title` and `aria-describedby` links the `description`\n- The root is `role=\"dialog\"`, or `role=\"alertdialog\"` for `type=\"alert\"`, always with `aria-modal=\"true\"`\n- The root and the panel carry `data-type` with the resolved type (a responsive record or a modal collapsed into a mobile sheet reports the type actually shown), which drawer edge rounding keys on\n- A closable dialog whose visible close button is suppressed has a visually hidden `Close` button (`tabindex=\"-1\"`) at the end of the panel for a screen reader's virtual cursor; the default close button is named `Close`\n- Every way out of a dialog (Escape, an outside press, the close button, a swipe, Android Back) goes through `onOpenChange` with its `reason` before anything changes, so `details.cancel()` can hold any of them back; a cancelled swipe snaps back with no exit animation\n- Escape closes only the topmost open layer and an outside press dismisses the layers above the one pressed; both honour `closeOnEscape` / `closable` / `closeOnClickOutside` through the shared layer stack\n- Page scroll is locked while a dialog is open: `data-entasis-scroll-lock` on `<html>` (the Tailwind plugin turns it into `overflow: hidden`, so a lock another library holds is never overwritten) and `--entasis-scrollbar-width` with the hidden scrollbar's width, for `position: fixed` headers that must not jump. A page with `scrollbar-gutter: stable` gets no second gutter\n\n## Indent effect\n\nWhile at least one modal dialog is open, `<html>` carries the `data-dialog-open` attribute and the `--dialog-depth` custom property (the number of open modal dialogs, `1` for a single sheet). A page can scale back behind a sheet with plain CSS:\n\n```css\n.app-shell { transition: transform 300ms ease; transform-origin: 50% 0; }\nhtml[data-dialog-open] .app-shell { transform: scale(calc(1 - var(--dialog-depth) * 0.04)); }\n```\n\nNon-modal dialogs do not set them.\n\n## On-screen keyboard\n\nIn a `drawerBottom` (or a modal collapsed into a mobile sheet), while a text field inside the panel has focus the sheet stays inside the part of the screen the keyboard leaves visible: its bottom padding grows by `--keyboard-inset` (the height the keyboard covers) and its top padding by `--visual-viewport-top` (how far iOS scrolled the page to show the field), both published on `<html>` by the Theme. The panel sits on the keyboard and shrinks to the room above it, and once the visual viewport has stopped moving the field is centered by scrolling the dialog's own scroll containers, never the page. On iOS the Theme also keeps Safari from zooming into a focused field (see Theme). Focus moving from one field to the next never lets the sheet drop in between. Browsers that resize the layout viewport for the keyboard (Chrome on Android only with `interactive-widget=resizes-content` in the viewport meta tag) report no inset and need no help; by default Chrome on Android reports the inset and the sheet uses it, like iOS.\n\n## Notes\n\n- Multiple dialogs can be stacked\n- Last opened dialog receives focus\n- Background overlay prevents interaction with page\n- Scroll locking prevents background scroll\n- Transitions are customizable\n\n## Theme Customization\n\nThe Dialog component uses a theme object that can be customized using the `theme` prop or by setting a global theme.\n\n### Theme Structure\n\nThe theme object contains the following parts:\n- **motion**: Open/close transition preset, keyed by `type` (drawers fly from their edge). Takes\n  `in` / `out` FSO params plus a `duration` / `easing` motion token; the `transition` prop wins\n  over it\n- **root**: Dialog overlay/backdrop styles\n- **content**: Dialog content container styles\n- **thumb**: Drag thumb bar styles (type variant controls per-side placement)\n- **header**: Dialog header section styles\n- **footer**: Dialog footer section styles\n- **closeButton**: Close button styles\n- **title**: Dialog title text styles\n- **description**: Dialog description text styles\n\n### Theme Type Definition\n\n```typescript\nimport type { DialogThemeProps } from 'entasis/dialog';\n\n// Example theme customization\nconst customTheme: DialogThemeProps = {\n  root: {\n    base: 'z-[+50] fixed inset-0 flex',\n    scroll: {\n      inner: 'overflow-hidden',\n      outer: 'overflow-auto'\n    }\n  },\n  align: {\n    type: {\n      fullScreen: 'justify-center items-center',\n      drawerRight: 'justify-end',\n      drawerLeft: 'justify-start',\n      drawerBottom: 'justify-center items-end',\n      drawerTop: 'justify-center items-start',\n      modal: 'justify-center',\n      alert: 'justify-center'\n    }\n  },\n  content: {\n    size: {\n      small: 'max-w-md w-full',\n      normal: 'max-w-xl w-full',\n      large: 'max-w-3xl w-full'\n    },\n    type: {\n      fullScreen: 'h-full w-full max-w-full',\n      drawerRight: 'rounded-r-[var(--drawer-edge-radius)] h-full',\n      modal: ''\n    }\n  },\n  header: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  },\n  title: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  },\n  description: {\n    size: {\n      small: '',\n      normal: '',\n      large: ''\n    }\n  }\n};\n```\n\n### Available Variants\n\n**root**:\n- base: Base classes for dialog overlay/backdrop\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size constraints\n  - type: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'modal' | 'alert' - Dialog type/layout\n\n**content**:\n- base: Base classes for dialog content container\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Content max-width\n  - type: 'fullScreen' | 'drawerRight' | 'drawerLeft' | 'drawerBottom' | 'drawerTop' | 'modal' | 'alert' - Content styling based on type\n\n**header**:\n- base: Base classes for header section\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**footer**:\n- base: Base classes for footer section\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**closeButton**:\n- base: Base classes for close button\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Size-based styling\n\n**title**:\n- base: Base classes for title text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n**description**:\n- base: Base classes for description text\n- Variants:\n  - size: 'small' | 'normal' | 'large' - Text size\n\n### Usage Examples\n\n**Basic Theme Override**:\n```svelte\n<Dialog \n  title=\"Custom Dialog\"\n  theme={{\n    content: {\n      base: 'rounded-2xl raised-5',\n      size: {\n        normal: 'max-w-2xl'\n      }\n    },\n    header: {\n      base: 'border-b-2 border-primary'\n    }\n  }}\n>\n  Custom styled dialog content\n</Dialog>\n```\n\n**Drawer Type Customization**:\n```svelte\n<Dialog \n  type=\"drawerRight\"\n  theme={{\n    align: {\n      type: {\n        drawerRight: 'justify-end'\n      }\n    },\n    backdrop: {\n      base: 'bg-black/50'\n    },\n    content: {\n      type: {\n        drawerRight: 'rounded-l-xl raised-5'\n      }\n    }\n  }}\n>\n  Custom drawer styling\n</Dialog>\n```\n\n**Global Theme Setting**:\n```svelte\n<script>\n  import { setDialogTheme } from './index.ts';\n  \n  setDialogTheme({\n    root: {\n      base: 'backdrop-blur-sm'\n    },\n    content: {\n      base: 'lift-5 border-2',\n      size: {\n        normal: 'max-w-2xl'\n      }\n    },\n    title: {\n      base: 'text-2xl font-bold'\n    }\n  });\n</script>\n```\n";