entasis 0.10.2 → 0.12.0

package/dist/components/DataTable/dataTable.mcp.d.ts

@@ -1 +1 @@
-export declare const dataTableDescription = "\n# DataTable\n\nDataTable is the typed, interactive, virtualized table for application data. Its public API is\nEntasis-native; TanStack Table Core remains private, but it must be installed as an optional peer\ndependency. Use Table for static tabular content.\n\n## Requires\n\nDataTable builds its row model with TanStack Table Core, which ships with entasis.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n  import {\n    createDataTableColumnHelper,\n    DataTable\n  } from './index.ts';\n\n  type Person = { id: string; name: string; role: string; active: boolean };\n  const column = createDataTableColumnHelper<Person>();\n  const columns = [\n    column.accessor('name', {\n      id: 'name',\n      header: 'Name',\n      sortable: true,\n      filter: { type: 'text' }\n    }),\n    column.accessor('role', { id: 'role', header: 'Role' }),\n    column.accessor('active', {\n      id: 'active',\n      header: 'Active',\n      filter: { type: 'boolean' }\n    })\n  ];\n</script>\n\n<DataTable\n  {items}\n  {columns}\n  getRowId={(person) => person.id}\n  height={420}\n  search\n  pagination={{ pageSize: 25, pageSizes: [25, 50, 100] }}\n/>\n```\n\n`items`, `columns`, and `getRowId` are required. Without `height`, DataTable fills a\nparent with a definite height so the virtual viewport remains bounded. Pass `virtualize={false}`\ninstead to drop the table into normal document flow at its natural height:\n\n```svelte\n<DataTable {items} {columns} {getRowId} virtualize={false} />\n```\n\n## Core props\n\n- **items**: `readonly TData[]`.\n- **columns**: `readonly DataTableColumn<TData>[]`.\n- **getRowId**: stable row identity used by selection, expansion, virtualization, and focus.\n- **height**: optional `string | number`; otherwise fills a definite-height parent. Only read\n  while virtualizing.\n- **virtualize**: default true. False renders every row in normal flow, so the table needs no\n  height and no definite-height parent.\n- **density**: `compact | normal | comfortable`, default `normal`.\n- **interactionMode**: `table | grid`, default `table`.\n- **processingMode**: `client | manual`, default `client`.\n- **selectionMode**: `none | single | multiple`, default `none`.\n- **pagination**: `false | DataTablePaginationConfig`. False disables pagination processing.\n  `showControls: false` keeps processing active while hiding the built-in footer. The size select\n  always offers the current `pageSize`, even when `pageSizes` leaves it out.\n- **search**: false, true, or placeholder/debounce configuration.\n- **showColumnVisibilityControl**: default false.\n- **stickyHeader**, **overscan**, **estimatedRowHeight**, and **animateRows** control rendering.\n- **disabled** blocks sorting controls, selection paths, editing, and column manipulation.\n- **loading** and **error** drive table states and the NetworkIndicator.\n- **api**: bindable narrow external-control instance handle (`DataTableApi<TData>`).\n- **cell** and **header**: table-level renderer snippets with `renderDefault` delegates.\n- **class**, **theme**, **ref**, and Svelte attachments follow Entasis conventions.\n\n## Column definitions\n\n`DataTableColumn<TData, TValue>` supports `id`, `accessor`, required `header`, optional\n`cell` and `aggregatedCell`, sorting, filtering, grouping, aggregation, editing, visibility,\nresizing, reordering, pinning, alignment, `width` / `minWidth` / `maxWidth`, and column\nclasses.\n\nUse `createDataTableColumnHelper<TData>()` to infer accessor values inside cell and editor\nconfiguration. Raw DataTableColumn definitions remain available as an escape hatch.\n\n## Rendering\n\nColumn-level renderers are part of the default rendering chain. A table-level `cell` renderer\nwraps every public ordinary, grouped, aggregated, and placeholder cell. It does not wrap selection\ncells, action cells, detail rows, or active editors. A table-level `header` renderer wraps only\nconfigured public header content; sorting, menus, dragging, resizing, focus, and ARIA remain owned\nby DataTable.\n\n`DataTableCellRenderPayload<TData>` contains the normal cell payload plus `column`,\n`placeholder`, and `renderDefault`. `DataTableHeaderRenderPayload<TData>` contains the normal\nheader payload plus `renderDefault`.\n\n```svelte\n{#snippet cell({ columnId, value, renderDefault })}\n  {#if columnId === 'status'}\n    <Chip>{value}</Chip>\n  {:else}\n    {@render renderDefault()}\n  {/if}\n{/snippet}\n```\n\nPrecedence is structural rendering or an active editor, then the table-level renderer, then\n`renderDefault`, which resolves the column renderer before the built-in fallback.\n\n## Filters\n\nBuilt-in filters are text, number range, select, multi-select, date range, and boolean.\nA custom filter is `{ type: 'custom', render, predicate }`. Its renderer receives the column,\ncurrent value, active state, `setValue(value)`, and `clear()`; `predicate(row, value,\ncolumnValue)` owns client matching. Filtering, searching, sorting, and grouping reset page one.\n\n## State and external composition\n\nUse `createDataTableState(columns, initialState?, pageSize?)` for controlled state. The bindable\nstate contains sorting, globalFilter, columnFilters, one-based pagination, rowSelection,\ncolumnVisibility, columnOrder, columnPinning, columnSizing, grouping, and expanded.\n\nDataTable updates replace slices immutably and call `onStateChange(nextState)`. Parent-originated\nmutations through `bind:state` are observed without calling that callback again.\n\n`bind:api` exposes a stable `DataTableApi<TData>` with reactive state, totals, visible\nrows, selected loaded rows, save status, and commands for global/column filters, selection clearing,\npage, and page size. Commands use the same guards and reset rules as built-in controls.\n\n```svelte\n<DataTable\n  bind:state\n  bind:api\n  pagination={{ pageSize: 25, showControls: false }}\n  {...props}\n/>\n```\n\n## Client and manual processing\n\nClient mode runs filtering, sorting, grouping, aggregation, expansion, and pagination locally.\n\nManual mode delegates filtering, sorting, and pagination together. It requires `rowCount`, and\n`items` must contain the already processed current page. Grouping and aggregation are client-only\nin this release: grouping commands are hidden and unsupported manual grouping state is normalized\naway. Abort stale requests when state changes. In manual mode, `dataTable.selectedRows` includes\nonly loaded row objects; all selected IDs remain in `state.rowSelection`.\n\n## Editing\n\nBuilt-in editors are text, number, select, date, and switch. A custom editor snippet receives row\nmetadata, draft, pending/error state, `setDraft`, `commit`, and `cancel`. DataTable never\nmutates rows; changed values call `onCellCommit` and render optimistically while the\nNetworkIndicator tracks the request. Unchanged drafts close without a commit. Rejection rolls back,\nrestores the editor and draft, and exposes the error. Only one asynchronous transaction can be\nactive or recoverable. Columns with editors do not enter edit mode without `onCellCommit` and\nissue a development warning.\n\nEnter and outside clicks commit, Escape cancels, and Tab commits without leaving the edited cell.\nCalendar selection synchronizes its draft before commit. Arrow keys remain owned by editor controls.\n\n## Slots\n\n- **caption**, **toolbarPrefix**, **toolbarSuffix**, **bulkActions**, **rowActions**,\n  **expandedContent**, **loadingContent**, **empty**, **noResults**, and **errorContent**.\n- Toolbar slots receive state, selected loaded rows, visible rows, clearFilters, and clearSelection.\n- Row slots receive row identity, selection/expansion state, depth, and guarded toggle actions.\n- The row actions column is 36px, one icon button; set `rowActionsWidth` (pixels) for text\n  buttons or several actions.\n\n## Row activation\n\n`onRowActivate(payload)` receives the row payload plus the native `event`, for modifier keys.\nIt fires on a click anywhere in the row except on a control (link, button, input, label, focusable\nelement), the selection or actions column, a group row, or a click that ends a text selection.\nIn grid mode Enter activates a cell that has no editor and no control. Rows show a pointer while it\nis set. Table-mode rows are not focusable, so keep a link or row action for keyboard users.\n\n## Accessibility and virtualization\n\nTable mode preserves native table semantics. Grid mode uses one roving cell tab stop with arrows,\nTab/Shift+Tab, Home/End, Ctrl+Home/Ctrl+End, and PageUp/PageDown. Focus is reconciled by row and\ncolumn identity after data, pagination, filtering, grouping, and visibility changes. State rows use\ncomplete column spans and keep recovery controls keyboard reachable. Logical row indices derive\nfrom the final grouped/expanded row model.\n\nRows are virtualized by default; `virtualize={false}` renders all of them in normal flow at\ntheir natural height, keeping the same selection, keyboard navigation, and editing paths. Use it for\nsmall datasets that belong in document flow, not for large ones. Semantic table mode keeps all\ncolumns mounted; grid mode additionally virtualizes center columns while pinned columns stay\nmounted. Resize handles support pointer and\nkeyboard resizing. Reorder handles support left/right keyboard movement and pointer movement within\ntheir current pin region. Logical inset positioning preserves RTL pinning.\n";
+export declare const dataTableDescription = "\n# DataTable\n\nDataTable is the typed, interactive, virtualized table for application data. Its public API is\nEntasis-native; TanStack Table Core remains private, but it must be installed as an optional peer\ndependency. Use Table for static tabular content.\n\n## Requires\n\nDataTable builds its row model with TanStack Table Core, which ships with entasis.\n\n## Basic usage\n\n```svelte\n<script lang=\"ts\">\n  import {\n    createDataTableColumnHelper,\n    DataTable\n  } from './index.ts';\n\n  type Person = { id: string; name: string; role: string; active: boolean };\n  const column = createDataTableColumnHelper<Person>();\n  const columns = [\n    column.accessor('name', {\n      id: 'name',\n      header: 'Name',\n      sortable: true,\n      filter: { type: 'text' }\n    }),\n    column.accessor('role', { id: 'role', header: 'Role' }),\n    column.accessor('active', {\n      id: 'active',\n      header: 'Active',\n      filter: { type: 'boolean' }\n    })\n  ];\n</script>\n\n<DataTable\n  {items}\n  {columns}\n  getRowId={(person) => person.id}\n  height={420}\n  search\n  pagination={{ pageSize: 25, pageSizes: [25, 50, 100] }}\n/>\n```\n\n`items`, `columns`, and `getRowId` are required. Without `height`, DataTable fills a\nparent with a definite height so the virtual viewport remains bounded. Pass `virtualize={false}`\ninstead to drop the table into normal document flow at its natural height:\n\n```svelte\n<DataTable {items} {columns} {getRowId} virtualize={false} />\n```\n\n## Core props\n\n- **items**: `readonly TData[]`.\n- **columns**: `readonly DataTableColumn<TData>[]`.\n- **getRowId**: stable row identity used by selection, expansion, virtualization, and focus.\n- **height**: optional `string | number`; otherwise fills a definite-height parent. Only read\n  while virtualizing.\n- **virtualize**: default true. False renders every row in normal flow, so the table needs no\n  height and no definite-height parent.\n- **density**: `compact | normal | comfortable`, default `normal`.\n- **interactionMode**: `table | grid`, default `table`.\n- **processingMode**: `client | manual`, default `client`.\n- **selectionMode**: `none | single | multiple`, default `none`.\n- **pagination**: `false | DataTablePaginationConfig`. False disables pagination processing.\n  `showControls: false` keeps processing active while hiding the built-in footer. The size select\n  always offers the current `pageSize`, even when `pageSizes` leaves it out.\n- **search**: false, true, or placeholder/debounce configuration.\n- **showColumnVisibilityControl**: default false.\n- **stickyHeader**, **overscan**, **estimatedRowHeight**, and **animateRows** control rendering.\n- **disabled** blocks sorting controls, selection paths, editing, and column manipulation.\n- **loading** and **error** drive the table's loading skeleton and error state. DataTable draws no\n  request indicator: show your own (a `NetworkIndicator`, a toast\u2026) from `loading` and the\n  `onCellCommit` promise.\n- **api**: bindable narrow external-control instance handle (`DataTableApi<TData>`).\n- **cell** and **header**: table-level renderer snippets with `renderDefault` delegates.\n- **class**, **theme**, **ref**, and Svelte attachments follow Entasis conventions.\n\n## Column definitions\n\n`DataTableColumn<TData, TValue>` supports `id`, `accessor`, required `header`, optional\n`cell` and `aggregatedCell`, sorting, filtering, grouping, aggregation, editing, visibility,\nresizing, reordering, pinning, alignment, `width` / `minWidth` / `maxWidth`, and column\nclasses.\n\nUse `createDataTableColumnHelper<TData>()` to infer accessor values inside cell and editor\nconfiguration. Raw DataTableColumn definitions remain available as an escape hatch.\n\n## Rendering\n\nColumn-level renderers are part of the default rendering chain. A table-level `cell` renderer\nwraps every public ordinary, grouped, aggregated, and placeholder cell. It does not wrap selection\ncells, action cells, detail rows, or active editors. A table-level `header` renderer wraps only\nconfigured public header content; sorting, menus, dragging, resizing, focus, and ARIA remain owned\nby DataTable.\n\n`DataTableCellRenderPayload<TData>` contains the normal cell payload plus `column`,\n`placeholder`, and `renderDefault`. `DataTableHeaderRenderPayload<TData>` contains the normal\nheader payload plus `renderDefault`.\n\n```svelte\n{#snippet cell({ columnId, value, renderDefault })}\n  {#if columnId === 'status'}\n    <Chip>{value}</Chip>\n  {:else}\n    {@render renderDefault()}\n  {/if}\n{/snippet}\n```\n\nPrecedence is structural rendering or an active editor, then the table-level renderer, then\n`renderDefault`, which resolves the column renderer before the built-in fallback.\n\n## Filters\n\nBuilt-in filters are text, number range, select, multi-select, date range, and boolean.\nA custom filter is `{ type: 'custom', render, predicate }`. Its renderer receives the column,\ncurrent value, active state, `setValue(value)`, and `clear()`; `predicate(row, value,\ncolumnValue)` owns client matching. Filtering, searching, sorting, and grouping reset page one.\n\n## State and external composition\n\nUse `createDataTableState(columns, initialState?, pageSize?)` for controlled state. The bindable\nstate contains sorting, globalFilter, columnFilters, one-based pagination, rowSelection,\ncolumnVisibility, columnOrder, columnPinning, columnSizing, grouping, and expanded.\n\nDataTable updates replace slices immutably and call `onStateChange(nextState)`. Parent-originated\nmutations through `bind:state` are observed without calling that callback again.\n\n`bind:api` exposes a stable `DataTableApi<TData>` with reactive state, totals, visible\nrows, selected loaded rows, save status, and commands for global/column filters, selection clearing,\npage, and page size. Commands use the same guards and reset rules as built-in controls.\n\n```svelte\n<DataTable\n  bind:state\n  bind:api\n  pagination={{ pageSize: 25, showControls: false }}\n  {...props}\n/>\n```\n\n## Client and manual processing\n\nClient mode runs filtering, sorting, grouping, aggregation, expansion, and pagination locally.\n\nManual mode delegates filtering, sorting, and pagination together. It requires `rowCount`, and\n`items` must contain the already processed current page. Grouping and aggregation are client-only\nin this release: grouping commands are hidden and unsupported manual grouping state is normalized\naway. Abort stale requests when state changes. In manual mode, `dataTable.selectedRows` includes\nonly loaded row objects; all selected IDs remain in `state.rowSelection`.\n\n## Editing\n\nBuilt-in editors are text, number, select, date, and switch. A custom editor snippet receives row\nmetadata, draft, pending/error state, `setDraft`, `commit`, and `cancel`. DataTable never\nmutates rows; changed values call `onCellCommit` and render optimistically while the\nrequest runs; the edited cell's editor is `pending` and the table is `aria-busy` until it settles. Unchanged drafts close without a commit. Rejection rolls back,\nrestores the editor and draft, and exposes the error. Only one asynchronous transaction can be\nactive or recoverable. Columns with editors do not enter edit mode without `onCellCommit` and\nissue a development warning.\n\nEnter and outside clicks commit, Escape cancels, and Tab commits without leaving the edited cell.\nCalendar selection synchronizes its draft before commit. Arrow keys remain owned by editor controls.\n\n## Slots\n\n- **caption**, **toolbarPrefix**, **toolbarSuffix**, **bulkActions**, **rowActions**,\n  **expandedContent**, **loadingContent**, **empty**, **noResults**, and **errorContent**.\n- Toolbar slots receive state, selected loaded rows, visible rows, clearFilters, and clearSelection.\n- Row slots receive row identity, selection/expansion state, depth, and guarded toggle actions.\n- The row actions column is 36px, one icon button; set `rowActionsWidth` (pixels) for text\n  buttons or several actions.\n\n## Row activation\n\n`onRowActivate(payload)` receives the row payload plus the native `event`, for modifier keys.\nIt fires on a click anywhere in the row except on a control (link, button, input, label, focusable\nelement), the selection or actions column, a group row, or a click that ends a text selection.\nIn grid mode Enter activates a cell that has no editor and no control. Rows show a pointer while it\nis set. Table-mode rows are not focusable, so keep a link or row action for keyboard users.\n\n## Accessibility and virtualization\n\nTable mode preserves native table semantics. Grid mode uses one roving cell tab stop with arrows,\nTab/Shift+Tab, Home/End, Ctrl+Home/Ctrl+End, and PageUp/PageDown. Focus is reconciled by row and\ncolumn identity after data, pagination, filtering, grouping, and visibility changes. State rows use\ncomplete column spans and keep recovery controls keyboard reachable. Logical row indices derive\nfrom the final grouped/expanded row model.\n\nRows are virtualized by default; `virtualize={false}` renders all of them in normal flow at\ntheir natural height, keeping the same selection, keyboard navigation, and editing paths. Use it for\nsmall datasets that belong in document flow, not for large ones. Semantic table mode keeps all\ncolumns mounted; grid mode additionally virtualizes center columns while pinned columns stay\nmounted. Resize handles support pointer and\nkeyboard resizing. Reorder handles support left/right keyboard movement and pointer movement within\ntheir current pin region. Logical inset positioning preserves RTL pinning.\n";

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

@@ -74,7 +74,9 @@ instead to drop the table into normal document flow at its natural height:
 - **showColumnVisibilityControl**: default false.
 - **stickyHeader**, **overscan**, **estimatedRowHeight**, and **animateRows** control rendering.
 - **disabled** blocks sorting controls, selection paths, editing, and column manipulation.
-- **loading** and **error** drive table states and the NetworkIndicator.
+- **loading** and **error** drive the table's loading skeleton and error state. DataTable draws no
+  request indicator: show your own (a \`NetworkIndicator\`, a toast…) from \`loading\` and the
+  \`onCellCommit\` promise.
 - **api**: bindable narrow external-control instance handle (\`DataTableApi<TData>\`).
 - **cell** and **header**: table-level renderer snippets with \`renderDefault\` delegates.
 - **class**, **theme**, **ref**, and Svelte attachments follow Entasis conventions.
@@ -158,7 +160,7 @@ only loaded row objects; all selected IDs remain in \`state.rowSelection\`.
 Built-in editors are text, number, select, date, and switch. A custom editor snippet receives row
 metadata, draft, pending/error state, \`setDraft\`, \`commit\`, and \`cancel\`. DataTable never
 mutates rows; changed values call \`onCellCommit\` and render optimistically while the
-NetworkIndicator tracks the request. Unchanged drafts close without a commit. Rejection rolls back,
+request runs; the edited cell's editor is \`pending\` and the table is \`aria-busy\` until it settles. Unchanged drafts close without a commit. Rejection rolls back,
 restores the editor and draft, and exposes the error. Only one asynchronous transaction can be
 active or recoverable. Columns with editors do not enter edit mode without \`onCellCommit\` and
 issue a development warning.

package/dist/components/DataTable/dataTable.theme.d.ts

@@ -15,7 +15,6 @@ export declare const dataTableTheme: {
             false: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    savingIndicator: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     scrollArea: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     virtualTable: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     caption: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
@@ -180,7 +179,6 @@ export declare const setDataTableTheme: (theme: InferComponentTheme<{
             false: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    savingIndicator: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     scrollArea: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     virtualTable: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     caption: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{
@@ -343,7 +341,6 @@ export declare const useDataTableTheme: import("../../utils/cva/theme.js").UseCo
             false: string;
         };
     }> & import("../../utils/cva/types.js").CVAClassProp) | undefined) => string;
-    savingIndicator: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     scrollArea: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     virtualTable: (props?: import("../../utils/cva/types.js").CVAClassProp | undefined) => string;
     caption: (props?: (import("../../utils/cva/types.js").CVAVariantSchema<{

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);
+    };
+};