DialogContent.svelte

The default content surface for Dialog: a fuz_css .pane card with a gutter margin (the dismiss zone), centered in the viewport by Dialog's own layout. It reads close from dialog_context (set by Dialog) and passes it to children, so content can close the dialog without the consumer threading close down from Dialog's own children snippet.

Must be rendered inside a Dialog, with which it registers its surface, so click-outside-to-close treats presses inside the card as inside regardless of classes -- pane={false} works without further setup.

By default it renders a close_button floating just outside the surface's top-right corner. The surface is a containing block (position: relative) for that button and any absolutely-positioned content in children.

The surface has no layout of its own -- it's a plain block, so children flow top-to-bottom in normal document order. Pass class through (e.g. box for a centered column, column for an uncentered one) to add one.

view source

Declarations
#

DialogContent
#

DialogContent.svelte view source

accepts children

import DialogContent from '@fuzdev/fuz_ui/DialogContent.svelte';

padding?

The content surface's padding, set as an inline style. Defaults to var(--space_xl) for a comfortable gutter between the card edge and its content. Set to '' or '0' for no padding (e.g. a flush image or a surface that manages its own spacing).

type string
optional default 'var(--space_xl)'

pane?

Whether to apply the fuz_css .pane card class to the content surface -- its opaque background, shadow, and rounded corners. true (the default) is the standard dialog card; false gives a chromeless surface. Either way the surface registers with Dialog, so click-outside-to-close keeps working.

type boolean
optional default true

gutter?

The gutter around the .pane card -- its outer margin, and so the area outside the card where a press dismisses the dialog. Set to '' or '0' to remove.

type string
optional default 'var(--space_xl3)'

max_width?

The card's max width. The card shrinks to its content and is capped here, so narrow content stays narrow while wide content doesn't sprawl. Set to '' for no cap (pure shrink-to-content).

type string
optional default 'var(--distance_md)'

close_button?

The close button floating just outside the content surface's top-right corner. true (the default) renders an absolutely-positioned .sm.plain.icon_button that closes the dialog; false removes it. It renders after children, so a content control (or an autofocus element) takes initial focus on open rather than the close button.

Pass a Snippet to render your own. It receives attrs (DialogCloseButtonAttrs) carrying the default's placement, styling, a11y, and onclick (closes the dialog), plus the DialogContext (e.g. {close}). Spread attrs onto a <button> to inherit the corner anchoring and override only what differs (e.g. the glyph), or drop it to place the button freely. The surface is a containing block (position: relative), so an absolutely-positioned custom button anchors to it.

type boolean | Snippet<[attrs: DialogCloseButtonAttrs, dialog: DialogContext]>
optional default true

children

Rendered inside the content surface. Receives the DialogContext (e.g. {close}) so content can close the dialog without reaching into Dialog's children snippet.

The default close_button renders as the surface's last child (so a content control or autofocus element wins initial focus over it). Because it's a real child, it throws off universal child-spacing selectors: your content's last element is no longer :last-child (so > :not(:last-child) matches it and > :last-child skips it), and > * + * matches the button itself. Either scope spacing to your own elements or a class, or wrap your content in a single element so its child selectors no longer see the button.

type Snippet<[dialog: DialogContext]>
snippet parameters
dialog DialogContext

intersects

Omit<HTMLAttributes<HTMLDivElement>, 'children'>

Depends on
#

Imported by
#