entasis 0.12.0 → 0.13.1

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- **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. 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's bottom padding grows by `--keyboard-inset` (the height the keyboard covers, published on `<html>` by the Theme), the panel shrinks to the room above the keyboard, and the field is centered once the visual viewport has stopped moving. 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";
+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";

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

@@ -60,7 +60,7 @@ The Dialog component (also known as Modal) displays content in a layer above the
 - **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
 - **closable**: boolean (default: true) - Whether dialog can be closed
 - **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\`…) and returns one of these, or nothing to restore as usual
-- **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. A dialog above another one keeps the one beneath moving with it: its scale and fade follow the swipe's progress
+- **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
 - **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
 - **inset**: a spacing step or \`'none'\` — 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
 - **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
@@ -452,7 +452,7 @@ Non-modal dialogs do not set them.
 
 ## On-screen keyboard
 
-In a \`drawerBottom\` (or a modal collapsed into a mobile sheet), while a text field inside the panel has focus the sheet's bottom padding grows by \`--keyboard-inset\` (the height the keyboard covers, published on \`<html>\` by the Theme), the panel shrinks to the room above the keyboard, and the field is centered once the visual viewport has stopped moving. 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.
+In 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.
 
 ## Notes
 

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

@@ -121,7 +121,8 @@ export type DialogProps = WithSlot<{
      *  does a drag that travels more across the axis than along it. A flick dismisses on release
      *  speed alone. A mouse or pen drags only from the handles (the thumb and the header), so
      *  dragging over the body selects text; a finger drags from anywhere unless text is selected
-     *  in the panel. Opt elements out with `data-no-swipe`. A dialog above another keeps the one
+     *  in the panel, buttons and links included (a field, a select or a media element keeps its
+     *  own gesture). Opt elements out with `data-no-swipe`. A dialog above another keeps the one
      *  beneath moving with its swipe. */
     swipeToDismiss?: boolean;
     /** Show the drag thumb bar on swipe-dismissable drawers; set false to hide. Default true. */

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

@@ -42,7 +42,7 @@ export declare class DialogState extends DialogState_base implements DialogApi {
     };
     /** The details of the last change that was applied, kept until the next one. */
     lastOpenChange: OpenChangeDetails | null;
-    layer: import("../../utils/layers.svelte.js").LayerHandle;
+    layer: import("../../utils/layers.svelte.ts").LayerHandle;
     /**
      * Trigger state in the library's semantic vocabulary: spread on the built-in Button, and
      * written as ARIA attributes by `reference` / `trigger` on a snippet trigger.
@@ -64,7 +64,7 @@ export declare class DialogState extends DialogState_base implements DialogApi {
     zIndex: number;
     stackScale: number;
     stackOpacity: number;
-    computedSize: import("../../types/theme.js").Sizes;
+    computedSize: import("../../types/theme.ts").Sizes;
     computedType: import("./dialog.props.js").DialogType;
     computedScroll: "inner" | "outer";
     /** Whether the resolved type is `alert`: an interruption that needs an explicit answer. */
@@ -77,7 +77,7 @@ export declare class DialogState extends DialogState_base implements DialogApi {
      */
     computedCloseOnClickOutside: boolean;
     private resolveMotion;
-    computedTransition: import("../../utils/motion/index.js").ResolvedMotion;
+    computedTransition: import("../../utils/motion/index.ts").ResolvedMotion;
     isDrawer: boolean;
     swipeEnabled: boolean;
     swipeAxis: 'x' | 'y';

package/dist/components/Dialog/dialog.state.svelte.js

@@ -416,14 +416,14 @@ export class DialogState extends createBindableStateClass() {
             };
         });
     };
-    // Native controls that own their own pointer gesture — a drag starting on one of
-    // these must never become a drawer dismiss.
+    // Native controls that own their own pointer gesture (a caret, a selection, a slider, a
+    // scrubber): a drag starting on one of these must never become a drawer dismiss. Buttons and
+    // links have none, so a drawer made of rows (a mobile sidebar) still swipes; a tap stays a
+    // tap, since the drag only takes the pointer once it has travelled toward the edge.
     static NO_SWIPE_TAGS = [
         'INPUT',
         'TEXTAREA',
         'SELECT',
-        'BUTTON',
-        'A',
         'VIDEO',
         'AUDIO'
     ];
@@ -435,9 +435,11 @@ export class DialogState extends createBindableStateClass() {
         return panel.contains(selection.anchorNode) || panel.contains(selection.focusNode);
     }
     // While a text field inside the panel has focus the on-screen keyboard may be up. A bottom sheet
-    // then makes room for it (`keyboardAvoiding`, see `--keyboard-inset`), and the field is brought
-    // into view once the visual viewport has stopped moving. The flag is released a frame late, so
-    // a tap that moves focus from one field to the next never lets the sheet drop in between.
+    // then fits itself above it (`keyboardAvoiding`, see `--keyboard-inset`), and once the visual
+    // viewport has stopped moving the field is scrolled into view inside the dialog. Only the
+    // dialog's own scroll containers move: scrolling the page would move the visual viewport the
+    // sheet follows. The flag is released a frame late, so a tap that moves focus from one field
+    // to the next never lets the sheet drop in between.
     keyboardAttachment = (node) => {
         const view = node.ownerDocument.defaultView;
         if (!view)
@@ -445,9 +447,28 @@ export class DialogState extends createBindableStateClass() {
         let release = 0;
         let reveal;
         let revealing;
-        const insetNow = () => parseFloat(view
-            .getComputedStyle(node.ownerDocument.documentElement)
-            .getPropertyValue('--keyboard-inset')) || 0;
+        const keyboardUp = () => {
+            const root = view.getComputedStyle(node.ownerDocument.documentElement);
+            return ((parseFloat(root.getPropertyValue('--keyboard-inset')) || 0) +
+                (parseFloat(root.getPropertyValue('--visual-viewport-top')) || 0) >
+                0);
+        };
+        // Centres the field in each scroll container between it and the dialog root that clips it.
+        const revealField = (field) => {
+            const stop = node.closest('[data-layer-root]');
+            for (let scroller = field.parentElement; scroller; scroller = scroller.parentElement) {
+                const { overflowY } = view.getComputedStyle(scroller);
+                if (/auto|scroll/.test(overflowY) && scroller.scrollHeight > scroller.clientHeight) {
+                    const box = scroller.getBoundingClientRect();
+                    const target = field.getBoundingClientRect();
+                    if (target.top < box.top || target.bottom > box.bottom) {
+                        scroller.scrollTop += target.top + target.height / 2 - (box.top + box.height / 2);
+                    }
+                }
+                if (scroller === stop)
+                    break;
+            }
+        };
         const stopRevealing = () => {
             clearTimeout(reveal);
             reveal = undefined;
@@ -459,8 +480,8 @@ export class DialogState extends createBindableStateClass() {
             const viewport = view.visualViewport;
             const show = () => {
                 stopRevealing();
-                if (field.isConnected && field.ownerDocument.activeElement === field && insetNow() > 0) {
-                    field.scrollIntoView({ block: 'center', inline: 'nearest' });
+                if (field.isConnected && field.ownerDocument.activeElement === field && keyboardUp()) {
+                    revealField(field);
                 }
             };
             // The keyboard animates for a few hundred ms: wait for the viewport to stop resizing, and