entasis 0.11.0 → 0.12.0

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

@@ -4,6 +4,10 @@ export declare const defaultDialog: (props?: (import("../../utils/cva/types.js")
         inner: string;
         outer: string;
     };
+    modal: {
+        true: string;
+        false: string;
+    };
 }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 export declare const defaultDialogAlign: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
     type: {
@@ -19,6 +23,10 @@ export declare const defaultDialogAlign: (props?: (import("../../utils/cva/types
         inner: string;
         outer: string;
     };
+    keyboard: {
+        true: string;
+        false: string;
+    };
 }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 export declare const defaultDialogBackdrop: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
 export declare const defaultDialogContent: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
@@ -40,6 +48,10 @@ export declare const defaultDialogContent: (props?: (import("../../utils/cva/typ
         inner: string;
         outer: string;
     };
+    modal: {
+        true: string;
+        false: string;
+    };
 }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
 export declare const defaultDialogThumb: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
     type: {
@@ -185,6 +197,10 @@ export declare const dialogTheme: {
             inner: string;
             outer: string;
         };
+        modal: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     align: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         type: {
@@ -200,6 +216,10 @@ export declare const dialogTheme: {
             inner: string;
             outer: string;
         };
+        keyboard: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     backdrop: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     content: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
@@ -221,6 +241,10 @@ export declare const dialogTheme: {
             inner: string;
             outer: string;
         };
+        modal: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     thumb: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         type: {
@@ -323,6 +347,10 @@ export declare const setDialogTheme: (theme: InferComponentTheme<{
             inner: string;
             outer: string;
         };
+        modal: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     align: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         type: {
@@ -338,6 +366,10 @@ export declare const setDialogTheme: (theme: InferComponentTheme<{
             inner: string;
             outer: string;
         };
+        keyboard: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     backdrop: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     content: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
@@ -359,6 +391,10 @@ export declare const setDialogTheme: (theme: InferComponentTheme<{
             inner: string;
             outer: string;
         };
+        modal: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     thumb: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         type: {
@@ -459,6 +495,10 @@ export declare const useDialogTheme: import("../../utils/cva/theme.js").UseCompo
             inner: string;
             outer: string;
         };
+        modal: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     align: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         type: {
@@ -474,6 +514,10 @@ export declare const useDialogTheme: import("../../utils/cva/theme.js").UseCompo
             inner: string;
             outer: string;
         };
+        keyboard: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     backdrop: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     content: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
@@ -495,6 +539,10 @@ export declare const useDialogTheme: import("../../utils/cva/theme.js").UseCompo
             inner: string;
             outer: string;
         };
+        modal: {
+            true: string;
+            false: string;
+        };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
     thumb: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
         type: {

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

@@ -7,10 +7,17 @@ export const defaultDialog = cva({
         scroll: {
             inner: 'overflow-hidden',
             outer: 'overflow-y-auto'
+        },
+        // A non-modal dialog leaves the page behind usable: the full-viewport root lets pointer
+        // events through, and only the panel takes them (see `content`).
+        modal: {
+            true: '',
+            false: 'pointer-events-none'
         }
     },
     defaultVariants: {
-        scroll: 'inner'
+        scroll: 'inner',
+        modal: true
     }
 });
 export const defaultDialogAlign = cva({
@@ -32,10 +39,18 @@ export const defaultDialogAlign = cva({
         scroll: {
             inner: 'h-full',
             outer: 'min-h-full'
+        },
+        // A bottom sheet with a focused text field makes room for the on-screen keyboard: the
+        // bottom padding grows by `--keyboard-inset` (published on `<html>` by the Theme), which
+        // is 0 where there is no overlapping keyboard.
+        keyboard: {
+            true: 'pb-[calc(var(--drawer-inset)+var(--keyboard-inset,0px))]',
+            false: ''
         }
     },
     defaultVariants: {
-        scroll: 'inner'
+        scroll: 'inner',
+        keyboard: false
     }
 });
 export const defaultDialogBackdrop = cva({
@@ -66,10 +81,16 @@ export const defaultDialogContent = cva({
         scroll: {
             inner: 'max-h-full overflow-auto overscroll-none',
             outer: ''
+        },
+        // The panel takes pointer events again inside a non-modal root that lets them through.
+        modal: {
+            true: '',
+            false: 'pointer-events-auto'
         }
     },
     defaultVariants: {
-        scroll: 'inner'
+        scroll: 'inner',
+        modal: true
     }
 });
 // Drag thumb for swipe-dismissable drawers: in-flow bar on the inner edge for
@@ -77,15 +98,17 @@ export const defaultDialogContent = cva({
 export const defaultDialogThumb = cva({
     // Absolute so the bar overlays the panel edge instead of taking flow space (the header
     // sits flush at the top). The ::before oversizes the hitbox around the 6px bar (~38px
-    // touch target); pointer events on it target the thumb, so drags there count as handle drags.
-    base: "absolute z-10 touch-none rounded-full bg-neutral-muted before:absolute before:-inset-4 before:content-['']",
+    // touch target) except past the panel edge, where it would overflow the panel and add a
+    // scrollable sliver (in RTL, 10px of horizontal scroll); pointer events on it target the thumb,
+    // so drags there count as handle drags.
+    base: "absolute z-10 touch-none rounded-full bg-neutral-muted before:absolute before:content-['']",
     variants: {
         type: {
             fullScreen: 'hidden',
-            drawerRight: 'left-1.5 top-1/2 -translate-y-1/2 h-12 w-1.5',
-            drawerLeft: 'right-1.5 top-1/2 -translate-y-1/2 h-12 w-1.5',
-            drawerBottom: 'left-1/2 -translate-x-1/2 top-1.5 h-1.5 w-12',
-            drawerTop: 'left-1/2 -translate-x-1/2 bottom-1.5 h-1.5 w-12',
+            drawerRight: 'left-1.5 top-1/2 -translate-y-1/2 h-12 w-1.5 before:-inset-y-4 before:-left-1.5 before:-right-4',
+            drawerLeft: 'right-1.5 top-1/2 -translate-y-1/2 h-12 w-1.5 before:-inset-y-4 before:-right-1.5 before:-left-4',
+            drawerBottom: 'left-1/2 -translate-x-1/2 top-1.5 h-1.5 w-12 before:-inset-x-4 before:-top-1.5 before:-bottom-4',
+            drawerTop: 'left-1/2 -translate-x-1/2 bottom-1.5 h-1.5 w-12 before:-inset-x-4 before:-bottom-1.5 before:-top-4',
             modal: 'hidden',
             alert: 'hidden'
         }

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

@@ -1,3 +1,6 @@
 export { default as Dialog } from './Dialog.svelte';
-export type { DialogProps, DialogType } from './dialog.props.js';
+export type { DialogProps, DialogSnapPoint, DialogType } from './dialog.props.js';
+export type { DialogApi } from './dialog.api.js';
+export type { FocusOnClose } from '../../utils/useFocusScope.svelte.js';
 export { dialogTheme, setDialogTheme, useDialogTheme, type DialogTheme, type DialogThemeProps } from './dialog.theme.js';
+export { dialogDataAttributes, dialogCssVariables, type DialogDataAttribute, type DialogCssVariable } from './dialog.attributes.js';

package/dist/components/Dialog/index.js

@@ -1,2 +1,3 @@
 export { default as Dialog } from './Dialog.svelte';
 export { dialogTheme, setDialogTheme, useDialogTheme } from './dialog.theme.js';
+export { dialogDataAttributes, dialogCssVariables } from './dialog.attributes.js';

package/dist/components/DocumentViewer/DocumentSearchControl.svelte

@@ -6,7 +6,8 @@
 	import { caretUpIcon } from '../Icons/caretUp.js';
 	import { magnifyingGlassIcon } from '../Icons/magnifyingGlass.js';
 	import Popover from '../Popover/Popover.svelte';
-	import type { PopoverState } from '../Popover/popover.state.svelte.js';
+	import { popoverInternals } from '../Popover/popover.state.svelte.js';
+	import type { PopoverApi } from '../Popover/popover.api.js';
 	import type { Colors, Sizes } from '../../types/index.js';
 	import type { DocumentToolbarPosition } from './documentViewer.props.js';
 	import type { DocumentViewerState } from './documentViewer.state.svelte.js';
@@ -67,12 +68,13 @@
 		clearTimeout(searchTimer);
 		searchTimer = setTimeout(runSearch, 250);
 	};
-	const onAfterClose = (popover: PopoverState) => {
+	const onAfterClose = (api: PopoverApi) => {
 		clearTimeout(searchTimer);
 		searchTimer = undefined;
 		query = '';
 		viewer.clearSearch();
-		if (popover.referenceElement instanceof HTMLElement) popover.referenceElement.focus();
+		const { referenceElement } = popoverInternals(api);
+		if (referenceElement instanceof HTMLElement) referenceElement.focus();
 	};
 	const onKeydown = (event: KeyboardEvent) => {
 		if (event.key !== 'Enter') return;

package/dist/components/DocumentViewer/documentOutput.js

@@ -1,3 +1,4 @@
+import { applyCspNonce } from '../../utils/cspNonce.js';
 import { toArrayBuffer } from './documentViewer.source.js';
 import { getOoxmlUnitCount, renderOoxmlUnit } from './ooxmlAdapter.js';
 const mimeByFormat = {
@@ -73,7 +74,7 @@ export class DocumentOutput {
             frame.remove();
             throw new Error('The browser could not create a print document.');
         }
-        const style = printDocument.createElement('style');
+        const style = applyCspNonce(printDocument.createElement('style'));
         style.textContent =
             '@page{margin:12mm}body{margin:0;background:white}.unit{break-after:page;display:flex;justify-content:center}.unit:last-child{break-after:auto}canvas{max-width:100%;height:auto}.legacy{white-space:pre-wrap;font:12pt/1.5 system-ui;padding:8mm;box-sizing:border-box;width:100%}h1{font:600 22pt/1.2 system-ui}';
         printDocument.head.appendChild(style);

package/dist/components/FloatingWindow/FloatingWindow.svelte

@@ -16,6 +16,7 @@
 	import { FloatingWindowState } from './floatingWindow.state.svelte.js';
 	import { useFloatingWindowMotion, useFloatingWindowTheme } from './floatingWindow.theme.js';
 	import { useI18n } from '../../i18n/context.svelte.js';
+	import { useOpenLifecycle } from '../../utils/openLifecycle.svelte.js';
 
 	let {
 		id: customId,
@@ -181,29 +182,16 @@
 			? (dimensions.max?.[1] ?? windowState.viewportHeight - 16)
 			: (dimensions.max?.[0] ?? windowState.viewportWidth - 16);
 
-	let observedOpen = openState.value;
-	let pendingAfterOpen = openState.value;
-	let pendingAfterClose = false;
-
-	$effect(() => {
-		const nextOpen = openState.value;
-		if (nextOpen === observedOpen) return;
-		observedOpen = nextOpen;
-		pendingAfterOpen = nextOpen;
-		pendingAfterClose = !nextOpen;
+	// One open and one close report each, whichever surface (window or dock item) animates; a
+	// window open at creation reports its open once mounted. Minimizing and restoring move between
+	// the two surfaces without reporting anything.
+	const lifecycle = useOpenLifecycle({
+		isOpen: () => openState.value,
+		onAfterOpen: () => onAfterOpen?.(windowState.payload),
+		onAfterClose: () => onAfterClose?.(windowState.payload)
 	});
-
-	const handleIntroEnd = () => {
-		if (!pendingAfterOpen) return;
-		pendingAfterOpen = false;
-		onAfterOpen?.(windowState.payload);
-	};
-
-	const handleOutroEnd = () => {
-		if (!pendingAfterClose) return;
-		pendingAfterClose = false;
-		onAfterClose?.(windowState.payload);
-	};
+	const sendTracked = lifecycle.transition(send);
+	const receiveTracked = lifecycle.transition(receive);
 </script>
 
 {#if backdrop && openState.value && !minimized && windowState.position}
@@ -231,10 +219,10 @@
 		{@attach windowState.theme.floatingWindows.portal}
 		{@attach windowState.root}
 		{@attach windowState.windowDrag}
-		in:receive={{ key: id }}
-		out:send={{ key: id }}
-		onintroend={handleIntroEnd}
-		onoutroend={handleOutroEnd}
+		in:receiveTracked={{ key: id }}
+		out:sendTracked={{ key: id }}
+		onintroend={lifecycle.introEnd}
+		onoutroend={lifecycle.outroEnd}
 		bind:this={ref}
 		{id}
 		role="dialog"
@@ -297,7 +285,7 @@
 						squared
 						label={t.closeWindow}
 						class={classes.control()}
-						onclick={() => windowState.close()}
+						onclick={(event) => windowState.close({ reason: 'close-press', event })}
 					>
 						{@render xIcon({ size: 16 })}
 					</Button>
@@ -337,10 +325,10 @@
 		{@attach windowState.theme.floatingWindows.portal}
 		{@attach windowState.dock}
 		{@attach windowState.dockDrag}
-		in:receive={{ key: id }}
-		out:send={{ key: id }}
-		onintroend={handleIntroEnd}
-		onoutroend={handleOutroEnd}
+		in:receiveTracked={{ key: id }}
+		out:sendTracked={{ key: id }}
+		onintroend={lifecycle.introEnd}
+		onoutroend={lifecycle.outroEnd}
 		bind:this={ref}
 		role="group"
 		aria-label={t.minimizedWindow}
@@ -399,7 +387,7 @@
 					squared
 					label={t.closeWindow}
 					class={classes.control()}
-					onclick={() => windowState.close()}
+					onclick={(event) => windowState.close({ reason: 'close-press', event })}
 				>
 					{@render xIcon({ size: 15 })}
 				</Button>

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

@@ -1,4 +1,4 @@
 import type { FloatingWindowProps } from './floatingWindow.props.js';
-declare const FloatingWindow: import("svelte").Component<FloatingWindowProps, {}, "ref" | "open" | "position" | "minimized" | "dimensions">;
+declare const FloatingWindow: import("svelte").Component<FloatingWindowProps, {}, "position" | "ref" | "open" | "minimized" | "dimensions">;
 type FloatingWindow = ReturnType<typeof FloatingWindow>;
 export default FloatingWindow;

package/dist/components/FloatingWindow/floatingWindow.mcp.d.ts

@@ -1 +1 @@
-export declare const floatingWindowDescription = "\n# FloatingWindow Component\n\nFloatingWindow renders a portaled utility window, non-modal unless `backdrop` is set, that can be moved, resized, minimized into a configurable viewport-edge dock, restored, and closed. Multiple windows inside the same Theme provider coordinate their z-order and stack independently by dock placement. The Theme keeps floating windows below modal Dialog surfaces, so an open window remains mounted behind a dialog and returns unchanged when the dialog closes.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n  import { Button } from '../Button/index.ts';\n  import { FloatingWindow } from './index.ts';\n\n  let open = $state(false);\n</script>\n\n<Button onclick={() => (open = true)}>Open notes</Button>\n\n<FloatingWindow bind:open title=\"Notes\">\n  <p>Window content remains interactive alongside the page.</p>\n</FloatingWindow>\n```\n\n## Props\n\n- **id**: string - Stable DOM id. Generated when omitted.\n- **open**: boolean (default: true) - Bindable rendered state.\n- **defaultOpen**: boolean (default: true) - Initial state when open is not provided.\n- **minimized**: boolean (default: false) - Bindable docked state.\n- **dockPlacement**: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' (default: 'bottom-left') - Edge and alignment used by the minimized dock. Top and bottom placements stack horizontally; left and right placements use a vertical title bar and stack vertically.\n- **title**: Slot<FloatingWindowPayload> (required) - Window title as text or a snippet.\n- **children**: Slot<FloatingWindowPayload> - Main content.\n- **dragFrom**: 'header' | 'window' (default: 'header') - Restricts dragging to the header or allows any non-interactive surface to start a drag.\n- **draggable**: boolean (default: true) - Enables pointer dragging.\n- **resizable**: boolean (default: true) - Enables four edge and four corner resize handles.\n- **minimizable**: boolean (default: true) - Shows the minimize control.\n- **closable**: boolean (default: true) - Shows the close control.\n- **closeOnEscape**: boolean (default: true) - Closes the topmost expanded floating window when Escape is pressed.\n- **backdrop**: boolean (default: false) - Dims the page behind the expanded window and makes it modal like a Dialog: Tab stays inside, the rest of the page is inert, and page scroll is locked. Minimizing into the dock lifts all of it; restoring brings it back. Clicking the backdrop does nothing: close with the close control or Escape.\n- **position**: { x: number; y: number } - Bindable viewport-relative top-left position. The first render is centered when omitted.\n- **dimensions**: { width: number; height: number; min?: [width, height]; max?: [width, height] } (default: 480 x 320, minimum 280 x 160) - Bindable pixel dimensions and optional constraint tuples. Maximum dimensions remain additionally constrained to the viewport.\n- **class**: string - Additional classes on the visible window.\n- **theme**: FloatingWindowThemeProps - Per-instance theme overrides.\n- **ref**: HTMLDivElement - Bindable reference to the visible window or minimized dock item.\n- **onOpenChange**: (open: boolean) => void - Runs once for each library-requested state change.\n- **onAfterOpen**: (payload) => void - Runs after the open transition finishes.\n- **onAfterClose**: (payload) => void - Runs after the close transition finishes.\n- **onMinimize**: (payload) => void - Runs after minimize state updates.\n- **onRestore**: (payload) => void - Runs after restore state updates.\n- **onMove**: ({ position, window }) => void - Runs when a move commits.\n- **onResize**: ({ dimensions, window }) => void - Runs when a pointer or keyboard resize commits.\n\n## Dragging\n\nHeader dragging is the default because it preserves text selection and content interactions. With `dragFrom=\"window\"`, buttons, links, inputs, editable content, resize handles, and descendants marked `data-floating-window-no-drag` remain excluded from drag starts.\n\n## Accessibility\n\n- The expanded surface uses a `dialog` role labelled by its title: `aria-modal=\"false\"`, or `\"true\"` with `backdrop`.\n- Close, minimize, and restore controls are native Entasis buttons with accessible labels.\n- Edge resize handles use `separator` semantics and support arrow-key resizing; hold Shift for a larger step.\n- Opening focuses the window, closing restores focus to its previous owner, and only the topmost expanded floating window handles Escape.\n- Alt+Arrow moves the focused window; hold Shift for a larger step.\n- Corner handles are pointer-only because a diagonal separator has no valid ARIA orientation.\n- Without `backdrop` it does not trap focus or hide page content. With it, Tab and Shift+Tab stay inside the window, every sibling subtree up to `<body>` is `inert` (other windows and dock items included), and page scroll is locked, until the window closes or is minimized.\n\n## Theme Parts\n\n- **backdrop**: Page dim behind a window opened with `backdrop`, one layer below the window.\n- **root**: Floating window surface and drag/resize states.\n- **header**: Default title bar and drag handle.\n- **title**: Header title.\n- **actions**: Header control group.\n- **control**: Header and dock icon buttons.\n- **scrollArea**: Flexible ScrollArea root that owns body scrolling.\n- **content**: Padded content inside the ScrollArea viewport.\n- **resizeHandle**: Edge and corner handles by direction.\n- **dockItem**: Minimized surface.\n- **dockTitle**: Full-width restore button in the dock item.\n- **dockTitleText**: Truncated title text and lateral writing direction.\n- **dockActions**: Dock restore and close controls.\n\n## Motion\n\n- **motion** theme slot, keyed by `phase`: `flight` times the crossfade between window and\n  dock pill, `enter` / `exit` the scale fallback when there is no counterpart.\n- Only `duration` / `easing` (plus the fallback's `scale` / `opacity`) are read.\n- The backdrop fades on the `enter` / `exit` timings.\n- Ladder: `<Theme components={{ 'floating-window': { motion } }}>` \u2192\n  `setFloatingWindowTheme({ motion })` \u2192 `theme.motion`. Read once, at mount.\n";
+export declare const floatingWindowDescription = "\n# FloatingWindow Component\n\nFloatingWindow renders a portaled utility window, non-modal unless `backdrop` is set, that can be moved, resized, minimized into a configurable viewport-edge dock, restored, and closed. Multiple windows inside the same Theme provider coordinate their z-order and stack independently by dock placement. The Theme keeps floating windows below modal Dialog surfaces, so an open window remains mounted behind a dialog and returns unchanged when the dialog closes.\n\n## Basic Usage\n\n```svelte\n<script lang=\"ts\">\n  import { Button } from '../Button/index.ts';\n  import { FloatingWindow } from './index.ts';\n\n  let open = $state(false);\n</script>\n\n<Button onclick={() => (open = true)}>Open notes</Button>\n\n<FloatingWindow bind:open title=\"Notes\">\n  <p>Window content remains interactive alongside the page.</p>\n</FloatingWindow>\n```\n\n## Props\n\n- **id**: string - Stable DOM id. Generated when omitted.\n- **open**: boolean (default: true) - Bindable rendered state.\n- **defaultOpen**: boolean (default: true) - Initial state when open is not provided.\n- **minimized**: boolean (default: false) - Bindable docked state.\n- **dockPlacement**: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' (default: 'bottom-left') - Edge and alignment used by the minimized dock. Top and bottom placements stack horizontally; left and right placements use a vertical title bar and stack vertically.\n- **title**: Slot<FloatingWindowPayload> (required) - Window title as text or a snippet.\n- **children**: Slot<FloatingWindowPayload> - Main content.\n- **dragFrom**: 'header' | 'window' (default: 'header') - Restricts dragging to the header or allows any non-interactive surface to start a drag.\n- **draggable**: boolean (default: true) - Enables pointer dragging.\n- **resizable**: boolean (default: true) - Enables four edge and four corner resize handles.\n- **minimizable**: boolean (default: true) - Shows the minimize control.\n- **closable**: boolean (default: true) - Shows the close control.\n- **closeOnEscape**: boolean (default: true) - Closes the topmost expanded floating window when Escape is pressed.\n- **backdrop**: boolean (default: false) - Dims the page behind the expanded window and makes it modal like a Dialog: Tab stays inside, the rest of the page is inert, and page scroll is locked. Minimizing into the dock lifts all of it; restoring brings it back. Clicking the backdrop does nothing: close with the close control or Escape.\n- **position**: { x: number; y: number } - Bindable viewport-relative top-left position. The first render is centered when omitted.\n- **dimensions**: { width: number; height: number; min?: [width, height]; max?: [width, height] } (default: 480 x 320, minimum 280 x 160) - Bindable pixel dimensions and optional constraint tuples. Maximum dimensions remain additionally constrained to the viewport.\n- **class**: string - Additional classes on the visible window.\n- **theme**: FloatingWindowThemeProps - Per-instance theme overrides.\n- **ref**: HTMLDivElement - Bindable reference to the visible window or minimized dock item.\n- **onOpenChange**: (open: boolean, details: OpenChangeDetails) => void - Runs before the window closes, with `details.reason` (`'close-press'`, `'escape-key'`, `'imperative-action'` for `payload.close()`), `details.event` and `details.cancel()`, which keeps it open.\n- **onAfterOpen**: (payload) => void - Runs once per open after the open transition finishes; a window open at creation reports it once mounted.\n- **onAfterClose**: (payload) => void - Runs once per close after the close transition finishes.\n- **onMinimize**: (payload) => void - Runs after minimize state updates.\n- **onRestore**: (payload) => void - Runs after restore state updates.\n- **onMove**: ({ position, window }) => void - Runs when a move commits.\n- **onResize**: ({ dimensions, window }) => void - Runs when a pointer or keyboard resize commits.\n\n## Dragging\n\nHeader dragging is the default because it preserves text selection and content interactions. With `dragFrom=\"window\"`, buttons, links, inputs, editable content, resize handles, and descendants marked `data-floating-window-no-drag` remain excluded from drag starts.\n\n## Accessibility\n\n- The expanded surface uses a `dialog` role labelled by its title: `aria-modal=\"false\"`, or `\"true\"` with `backdrop`.\n- Close, minimize, and restore controls are native Entasis buttons with accessible labels.\n- Edge resize handles use `separator` semantics and support arrow-key resizing; hold Shift for a larger step.\n- Opening focuses the window, closing restores focus to its previous owner, and only the topmost expanded floating window handles Escape.\n- Alt+Arrow moves the focused window; hold Shift for a larger step.\n- Corner handles are pointer-only because a diagonal separator has no valid ARIA orientation.\n- Without `backdrop` it does not trap focus or hide page content. With it, Tab and Shift+Tab stay inside the window, every sibling subtree up to `<body>` is `inert` (other windows and dock items included), and page scroll is locked, until the window closes or is minimized.\n\n## Theme Parts\n\n- **backdrop**: Page dim behind a window opened with `backdrop`, one layer below the window.\n- **root**: Floating window surface and drag/resize states.\n- **header**: Default title bar and drag handle.\n- **title**: Header title.\n- **actions**: Header control group.\n- **control**: Header and dock icon buttons.\n- **scrollArea**: Flexible ScrollArea root that owns body scrolling.\n- **content**: Padded content inside the ScrollArea viewport.\n- **resizeHandle**: Edge and corner handles by direction.\n- **dockItem**: Minimized surface.\n- **dockTitle**: Full-width restore button in the dock item.\n- **dockTitleText**: Truncated title text and lateral writing direction.\n- **dockActions**: Dock restore and close controls.\n\n## Motion\n\n- **motion** theme slot, keyed by `phase`: `flight` times the crossfade between window and\n  dock pill, `enter` / `exit` the scale fallback when there is no counterpart.\n- Only `duration` / `easing` (plus the fallback's `scale` / `opacity`) are read.\n- The backdrop fades on the `enter` / `exit` timings.\n- Ladder: `<Theme components={{ 'floating-window': { motion } }}>` \u2192\n  `setFloatingWindowTheme({ motion })` \u2192 `theme.motion`. Read once, at mount.\n";

package/dist/components/FloatingWindow/floatingWindow.mcp.js

@@ -41,9 +41,9 @@ FloatingWindow renders a portaled utility window, non-modal unless \`backdrop\`
 - **class**: string - Additional classes on the visible window.
 - **theme**: FloatingWindowThemeProps - Per-instance theme overrides.
 - **ref**: HTMLDivElement - Bindable reference to the visible window or minimized dock item.
-- **onOpenChange**: (open: boolean) => void - Runs once for each library-requested state change.
-- **onAfterOpen**: (payload) => void - Runs after the open transition finishes.
-- **onAfterClose**: (payload) => void - Runs after the close transition finishes.
+- **onOpenChange**: (open: boolean, details: OpenChangeDetails) => void - Runs before the window closes, with \`details.reason\` (\`'close-press'\`, \`'escape-key'\`, \`'imperative-action'\` for \`payload.close()\`), \`details.event\` and \`details.cancel()\`, which keeps it open.
+- **onAfterOpen**: (payload) => void - Runs once per open after the open transition finishes; a window open at creation reports it once mounted.
+- **onAfterClose**: (payload) => void - Runs once per close after the close transition finishes.
 - **onMinimize**: (payload) => void - Runs after minimize state updates.
 - **onRestore**: (payload) => void - Runs after restore state updates.
 - **onMove**: ({ position, window }) => void - Runs when a move commits.

package/dist/components/FloatingWindow/floatingWindow.props.d.ts

@@ -1,6 +1,7 @@
 import type { Slot } from '../Slot/slot.js';
 import type { WithAttachments } from '../../types/props.js';
 import type { FloatingWindowThemeProps } from './floatingWindow.theme.js';
+import type { OpenChangeHandler } from '../../utils/openChange.js';
 export type FloatingWindowDragFrom = 'header' | 'window';
 export type FloatingWindowDockPlacement = 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right' | 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom';
 export type FloatingWindowPosition = {
@@ -80,11 +81,15 @@ export type FloatingWindowProps = WithAttachments<{
     class?: string;
     /** Per-instance theme overrides. */
     theme?: FloatingWindowThemeProps;
-    /** Called once when the library requests an open-state change. */
-    onOpenChange?: (open: boolean) => void;
-    /** Called after the open transition finishes. */
+    /**
+     * Called before the window closes (the close button, Escape, `payload.close()`), with the
+     * change details: `reason` (`'close-press'`, `'escape-key'`, `'imperative-action'`), the
+     * originating `event` and `cancel()`, which keeps the window open.
+     */
+    onOpenChange?: OpenChangeHandler;
+    /** Called once per open, after the open transition finishes (once mounted for a window open at creation). */
     onAfterOpen?: (payload: FloatingWindowPayload) => void;
-    /** Called after the close transition finishes. */
+    /** Called once per close, after the close transition finishes. */
     onAfterClose?: (payload: FloatingWindowPayload) => void;
     /** Called after the minimize command updates state. */
     onMinimize?: (payload: FloatingWindowPayload) => void;

package/dist/components/FloatingWindow/floatingWindow.state.svelte.d.ts

@@ -1,4 +1,5 @@
 import type { Attachment } from 'svelte/attachments';
+import { type OpenChangeDetails, type OpenChangeHandler, type OpenChangeInit } from '../../utils/openChange.js';
 import type { FloatingWindowSurface } from '../Theme/theme.floatingWindows.js';
 import type { FloatingWindowDimensions, FloatingWindowDockPlacement, FloatingWindowDragFrom, FloatingWindowPayload, FloatingWindowPosition, FloatingWindowResizeDirection } from './floatingWindow.props.js';
 type FloatingWindowStateOptions = {
@@ -15,7 +16,7 @@ type FloatingWindowStateOptions = {
     backdrop: boolean;
     position?: FloatingWindowPosition;
     dimensions: FloatingWindowDimensions;
-    onOpenChange?: (open: boolean) => void;
+    onOpenChange?: OpenChangeHandler;
     onMinimize?: (payload: FloatingWindowPayload) => void;
     onRestore?: (payload: FloatingWindowPayload) => void;
     onMove?: (payload: {
@@ -65,7 +66,11 @@ export declare class FloatingWindowState extends FloatingWindowState_base {
     /** The index reserved just below the window when it activated with a backdrop. */
     get backdropZIndex(): number;
     bringToFront(): void;
-    close(): void;
+    /**
+     * Closes the window, minimized or not, through `onOpenChange`; returns `false` when it stays
+     * open (not closable, or the change was cancelled).
+     */
+    close(input?: OpenChangeDetails | OpenChangeInit | Event): boolean;
     minimize(): void;
     restore(): void;
     restoreFromDock(): void;
@@ -78,6 +83,7 @@ export declare class FloatingWindowState extends FloatingWindowState_base {
     private startResize;
     private updateResize;
     private endResize;
+    /** `onOpenChange(nextOpen, details)` runs first; a cancelled change leaves the window as is. */
     private setOpen;
 }
 export {};

package/dist/components/FloatingWindow/floatingWindow.state.svelte.js

@@ -5,6 +5,7 @@ import { withOptions } from '../../utils/state.svelte.js';
 import { useTheme } from '../Theme/theme.state.svelte.js';
 import { useFocusScope } from '../../utils/useFocusScope.svelte.js';
 import { useScrollLock } from '../../utils/useScrollLock.svelte.js';
+import { requestOpenChange, resolveOpenChangeDetails } from '../../utils/openChange.js';
 import { FloatingWindowDockState } from './floatingWindow.dock.svelte.js';
 import { FLOATING_WINDOW_VIEWPORT_GAP, FloatingWindowGeometry } from './floatingWindow.geometry.js';
 const KEYBOARD_STEP = 10;
@@ -41,7 +42,7 @@ export class FloatingWindowState extends withOptions() {
         isOpen: () => this.open && !this.minimized,
         isModal: () => this.backdrop,
         dismissOnEscape: () => this.closeOnEscape && this.closable && this.theme.floatingWindows.isTopWindow(this.id),
-        onDismiss: () => this.close(),
+        onDismiss: (request) => this.close(request),
         state: this
     });
     moveStartPosition = { x: 0, y: 0 };
@@ -172,11 +173,17 @@ export class FloatingWindowState extends withOptions() {
     bringToFront() {
         this.activateSurface(this.minimized ? 'dock' : 'window');
     }
-    close() {
+    /**
+     * Closes the window, minimized or not, through `onOpenChange`; returns `false` when it stays
+     * open (not closable, or the change was cancelled).
+     */
+    close(input) {
         if (!this.closable)
-            return;
+            return false;
+        if (!this.setOpen(false, input))
+            return false;
         this.minimized = false;
-        this.setOpen(false);
+        return true;
     }
     minimize() {
         if (!this.minimizable || this.minimized)
@@ -303,10 +310,14 @@ export class FloatingWindowState extends withOptions() {
             this.onResize?.({ dimensions: this.dimensions, window: this.payload });
         }
     }
-    setOpen(nextOpen) {
+    /** `onOpenChange(nextOpen, details)` runs first; a cancelled change leaves the window as is. */
+    setOpen(nextOpen, input) {
         if (this.open === nextOpen)
-            return;
+            return true;
+        const details = resolveOpenChangeDetails(input);
+        if (!requestOpenChange(this.onOpenChange, nextOpen, details))
+            return false;
         this.open = nextOpen;
-        this.onOpenChange?.(nextOpen);
+        return true;
     }
 }

package/dist/components/Form/Ask/Ask.svelte

@@ -2,7 +2,7 @@
 	import Button from '../../Button/Button.svelte';
 	import Dialog from '../../Dialog/Dialog.svelte';
 	import type { Sizes } from '../../../types/theme.js';
-	import { onMount, tick } from 'svelte';
+	import { onMount } from 'svelte';
 	import Form from '../Form/Form.svelte';
 	import type { FormState } from '../Form/form.state.svelte.js';
 	import type { FormInputs, InferFormValue, LiveFormValue } from '../Form/form.js';
@@ -41,10 +41,12 @@
 		return { text, disabled, size, props };
 	}
 
+	// Each request mounts its Dialog open: the Dialog itself renders once mounted, so it still
+	// plays its enter transition and reports `onAfterOpen`.
 	function enqueueAsk(request: AskRequest): void {
 		const viewState: AskViewState = {
 			...request,
-			open: false,
+			open: true,
 			value: { ...request.options.value },
 			hasFailure: false,
 			settled: false,
@@ -53,13 +55,6 @@
 		};
 
 		asks.push(viewState);
-		void openAsk(viewState);
-	}
-
-	async function openAsk(askState: AskViewState): Promise<void> {
-		await tick();
-		const activeAsk = asks.find((candidate) => candidate.id === askState.id);
-		if (activeAsk && !activeAsk.settled) activeAsk.open = true;
 	}
 
 	function cancelAsk(askState: AskViewState): void {
@@ -164,6 +159,8 @@
 			density={askState.options.density}
 			variant={askState.options.variant}
 			layout={askState.options.layout}
+			validationMode={askState.options.validationMode}
+			validationDebounce={askState.options.validationDebounce}
 			theme={askState.options.theme}
 		/>
 
@@ -171,6 +168,8 @@
 			<!-- The button row lays itself out against the dialog footer's own width, not the
 			     viewport: the wrapper is the inline-size container and `@sm` (24rem) is the width
 			     at which a Cancel + Confirm pair sits side by side without either button wrapping. -->
+			<!-- Confirm marks itself `loading`, never natively `disabled`, while the form submits: the
+			     pressed button keeps keyboard focus, and Button still refuses activation. -->
 			<div class="@container w-full">
 				<div class="flex flex-col gap-2 @sm:flex-row @sm:justify-end">
 					<Button
@@ -192,10 +191,7 @@
 						type="button"
 						size={confirmButton.size ?? askState.options.size}
 						loading={askState.form?.loading ?? false}
-						disabled={!askState.open ||
-							!askState.form ||
-							askState.form.loading ||
-							confirmButton.disabled}
+						disabled={!askState.open || !askState.form || confirmButton.disabled}
 						bind:ref={askState.confirmButton}
 						onclick={() => void submitAsk(askState)}
 					>

package/dist/components/Form/Ask/ask.mcp.d.ts

@@ -1 +1 @@
-export declare const askDescription = "\n# Ask\n\nImport from `entasis/ask`.\n\nMount Ask to host programmatic requests created by ask. Requests use the existing Form inputs and validation boundary inside Dialog, including input types the app registered with registerFormInputs (see Form), so a request can arrive as plain data. AskResult reports submitted and value; cancellation preserves the current form value. Submission failures reject the request. Mount the host before requesting a form.\n";
+export declare const askDescription = "\n# Ask\n\nImport from `entasis/ask`.\n\nMount Ask to host programmatic requests created by ask. Requests use the existing Form inputs and validation boundary inside Dialog, including input types the app registered with registerFormInputs (see Form), so a request can arrive as plain data. AskResult reports submitted and value; cancellation preserves the current form value. Submission failures reject the request. Fields validate as in Form (validationMode and validationDebounce are accepted, async validators are awaited), disabled fields are left out of the result, and Confirm marks itself loading rather than natively disabled while the form submits, so it keeps keyboard focus. Mount the host before requesting a form.\n";

package/dist/components/Form/Ask/ask.mcp.js

@@ -3,5 +3,5 @@ export const askDescription = `
 
 Import from \`entasis/ask\`.
 
-Mount Ask to host programmatic requests created by ask. Requests use the existing Form inputs and validation boundary inside Dialog, including input types the app registered with registerFormInputs (see Form), so a request can arrive as plain data. AskResult reports submitted and value; cancellation preserves the current form value. Submission failures reject the request. Mount the host before requesting a form.
+Mount Ask to host programmatic requests created by ask. Requests use the existing Form inputs and validation boundary inside Dialog, including input types the app registered with registerFormInputs (see Form), so a request can arrive as plain data. AskResult reports submitted and value; cancellation preserves the current form value. Submission failures reject the request. Fields validate as in Form (validationMode and validationDebounce are accepted, async validators are awaited), disabled fields are left out of the result, and Confirm marks itself loading rather than natively disabled while the form submits, so it keeps keyboard focus. Mount the host before requesting a form.
 `;

package/dist/components/Form/Ask/ask.props.d.ts

@@ -7,7 +7,7 @@ export type AskButton = string | ({
     text: string;
 } & Omit<ButtonProps, 'children' | 'onclick' | 'loading' | 'href' | 'target' | 'rel' | 'download' | 'type' | 'ref'>);
 export type AskDialogOptions = Pick<DialogProps, 'type' | 'responsive' | 'size' | 'scroll'>;
-export type AskOptions<I extends FormInputs> = Pick<FormProps<I>, 'inputs' | 'value' | 'onSubmit' | 'class' | 'size' | 'density' | 'variant' | 'layout' | 'theme'> & {
+export type AskOptions<I extends FormInputs> = Pick<FormProps<I>, 'inputs' | 'value' | 'onSubmit' | 'class' | 'size' | 'density' | 'variant' | 'layout' | 'theme' | 'validationMode' | 'validationDebounce'> & {
     /** Accessible title rendered in the Dialog header. */
     title: Slot;
     /** Supporting text rendered below the title. */