@fuzdev/fuz_ui 0.200.0 → 0.202.0

package/dist/Dialog.svelte.d.ts

@@ -1,28 +1,59 @@
 import type { Snippet } from 'svelte';
-import type { DialogLayout } from './dialog.js';
-type $$ComponentProps = {
-    container?: HTMLElement;
+import type { SvelteHTMLElements } from 'svelte/elements';
+import { type DialogContext, type DialogAlign } from './dialog.js';
+type $$ComponentProps = Omit<SvelteHTMLElements['dialog'], 'children' | 'onclose'> & {
     /**
-     * @default 'centered'
+     * Whether the dialog is shown. When the `<dialog>` mounts it opens via
+     * `showModal()`; when it unmounts it closes.
+     * Defaults to `true` so the `{#if opened}<Dialog>...</Dialog>{/if}` pattern
+     * works without passing `show` -- mounting the component opens the dialog.
+     * Pass `show={opened}` to skip the outer `{#if}` and let the component manage
+     * its own conditional rendering.
+     * @default true
      */
-    layout?: DialogLayout;
+    show?: boolean;
     /**
-     * index 0 is under 1 is under 2 etc -- the topmost dialog is the last in the array
-     * @default 0
+     * How the content is aligned in the viewport. `center` vertically centers it;
+     * `top` aligns it to the top and grows downward, which avoids jank when the
+     * content's height changes.
+     * @default 'center'
      */
-    index?: number;
+    align?: DialogAlign;
     /**
+     * Whether clicking outside the content (see `content_selector`) closes the
+     * dialog. `Escape` closes it regardless of this.
      * @default true
      */
-    active?: boolean;
+    dismissable?: boolean;
     /**
-     * If provided, prevents clicks that would close the dialog
-     * from bubbling past any elements matching this selector.
+     * Fallback selector for a content surface you render in `children` yourself
+     * (rather than via `DialogContent`, which self-registers).
+     * When `dismissable`, a press that isn't inside a registered surface (e.g.
+     * `DialogContent`, which self-registers) and doesn't match this selector
+     * closes the dialog. Defaults to the fuz_css `.pane` card; set it to match
+     * your surface's outermost element -- with no registered surface and no
+     * match, presses anywhere close the dialog.
      * @default '.pane'
      */
-    content_selector?: string | null;
+    content_selector?: string;
+    /**
+     * Called before a user-initiated close (`Escape`, click-outside, or `close`).
+     * Return `false` to veto and keep the dialog open -- e.g. to confirm
+     * discarding unsaved changes. Programmatic close via `show={false}` bypasses
+     * this.
+     */
+    onbeforeclose?: () => boolean | void;
+    /**
+     * Called when the dialog closes -- via `Escape`, click-outside, or `close`.
+     * Use it to sync your own open state, e.g. `onclose={() => (opened = false)}`.
+     * Like `onbeforeclose`, programmatic close via `show={false}` bypasses this.
+     */
     onclose?: () => void;
-    children: Snippet<[close: (e?: Event) => void]>;
+    /**
+     * Rendered inside the dialog overlay. Receives the `DialogContext` (e.g.
+     * `{close}`); pair with `DialogContent` or render your own surface.
+     */
+    children: Snippet<[dialog: DialogContext]>;
 };
 declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "">;
 type Dialog = ReturnType<typeof Dialog>;

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Dialog.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAKpC,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,aAAa,CAAC;AAE7C,KAAK,gBAAgB,GAAI;IAExB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,OAAO,CAAC,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC;CAChD,CAAC;AA4HH,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Dialog.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Dialog.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAIxD,OAAO,EAAiB,KAAK,aAAa,EAAE,KAAK,WAAW,EAAC,MAAM,aAAa,CAAC;AAEhF,KAAK,gBAAgB,GAAI,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC,GAAG;IACrF;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,MAAM,OAAO,GAAG,IAAI,CAAC;IACrC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;CAC3C,CAAC;AAsHH,QAAA,MAAM,MAAM,sDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}

package/dist/DialogContent.svelte

@@ -0,0 +1,142 @@
+<script lang="ts">
+	import type {Snippet} from 'svelte';
+	import type {HTMLAttributes, SvelteHTMLElements} from 'svelte/elements';
+
+	import {dialog_context, type DialogContext, type DialogCloseButtonAttrs} from './dialog.js';
+	import {icon_close} from './icons.js';
+	import Svg from './Svg.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.
+	 *
+	 * @module
+	 */
+
+	const {
+		padding = 'var(--space_xl)',
+		pane = true,
+		gutter = 'var(--space_xl3)',
+		max_width = 'var(--distance_md)',
+		close_button = true,
+		children,
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+		/**
+		 * 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).
+		 * @default 'var(--space_xl)'
+		 */
+		padding?: string;
+		/**
+		 * 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.
+		 * @default true
+		 */
+		pane?: boolean;
+		/**
+		 * 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.
+		 * @default 'var(--space_xl3)'
+		 */
+		gutter?: string;
+		/**
+		 * 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).
+		 * @default 'var(--distance_md)'
+		 */
+		max_width?: string;
+		/**
+		 * 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.
+		 * @default true
+		 */
+		close_button?: boolean | Snippet<[attrs: DialogCloseButtonAttrs, dialog: DialogContext]>;
+		/**
+		 * 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.
+		 */
+		children: Snippet<[dialog: DialogContext]>;
+	} = $props();
+
+	const dialog = dialog_context.get('DialogContent must be rendered inside a Dialog');
+
+	// the default close button's attributes; `onclick` closes the dialog and the rest
+	// is handed to a custom `close_button` snippet so it can inherit the corner-anchored
+	// button by spreading them. positioning is inline (not a scoped class) so it travels
+	// into the consumer's snippet, which carries its own style scope
+	const close_button_attrs: DialogCloseButtonAttrs = {
+		type: 'button',
+		class: 'sm plain icon_button',
+		style: 'position: absolute; top: 0; right: 0;',
+		onclick: dialog.close,
+		title: 'close',
+		'aria-label': 'close',
+	} satisfies SvelteHTMLElements['button'];
+</script>
+
+<!-- The surface is centered by `Dialog`'s `.dialog-wrapper` flex (no wrapper of its own
+needed) and is a containing block (`position: relative`) for the close button and any
+absolutely-positioned content in `children`. `gutter` is the surface's margin -- the
+dismiss zone outside the card, where a press lands on the wrapper and closes the dialog.
+`min-width: 0` lets this flex-item surface shrink below its content's intrinsic width, so
+content with its own overflow (e.g. `Code`) scrolls instead of forcing the card wider. -->
+<div
+	{...rest}
+	class:pane
+	style:padding
+	style:margin={gutter}
+	style:max-width={max_width}
+	style:min-width="0"
+	style:position="relative"
+	{@attach dialog.register_surface}
+>
+	{@render children(dialog)}
+	<!-- rendered after `children` so a content control (or an `autofocus` element)
+	takes initial focus on open, not the close button -->
+	{#if close_button === true}
+		<button {...close_button_attrs}><Svg data={icon_close} /></button>
+	{:else if close_button}
+		{@render close_button(close_button_attrs, dialog)}
+	{/if}
+</div>

package/dist/DialogContent.svelte.d.ts

@@ -0,0 +1,69 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type DialogContext, type DialogCloseButtonAttrs } from './dialog.js';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    /**
+     * 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).
+     * @default 'var(--space_xl)'
+     */
+    padding?: string;
+    /**
+     * 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.
+     * @default true
+     */
+    pane?: boolean;
+    /**
+     * 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.
+     * @default 'var(--space_xl3)'
+     */
+    gutter?: string;
+    /**
+     * 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).
+     * @default 'var(--distance_md)'
+     */
+    max_width?: string;
+    /**
+     * 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.
+     * @default true
+     */
+    close_button?: boolean | Snippet<[attrs: DialogCloseButtonAttrs, dialog: DialogContext]>;
+    /**
+     * 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.
+     */
+    children: Snippet<[dialog: DialogContext]>;
+};
+declare const DialogContent: import("svelte").Component<$$ComponentProps, {}, "">;
+type DialogContent = ReturnType<typeof DialogContent>;
+export default DialogContent;
+//# sourceMappingURL=DialogContent.svelte.d.ts.map

package/dist/DialogContent.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DialogContent.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AACpC,OAAO,KAAK,EAAC,cAAc,EAAqB,MAAM,iBAAiB,CAAC;AAExE,OAAO,EAAiB,KAAK,aAAa,EAAE,KAAK,sBAAsB,EAAC,MAAM,aAAa,CAAC;AAI3F,KAAK,gBAAgB,GAAI,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;;;;;OAeG;IACH,YAAY,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC,CAAC,KAAK,EAAE,sBAAsB,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;IACzF;;;;;;;;;;;;OAYG;IACH,QAAQ,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC;CAC3C,CAAC;AAsEH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/Docs.svelte

@@ -10,6 +10,7 @@
 	import DocsSecondaryNav from './DocsSecondaryNav.svelte';
 	import DocsTertiaryNav from './DocsTertiaryNav.svelte';
 	import Dialog from './Dialog.svelte';
+	import DialogContent from './DialogContent.svelte';
 	import DocsFooter from './DocsFooter.svelte';
 	import {site_context} from './site.svelte.js';
 	import {FUZ_DEV_URL} from './constants.js';
@@ -83,15 +84,17 @@
 <!-- TODO this is messy rendering `DocsSecondaryNav` twice to handle responsive states with SSR correctly -->
 {#if show_secondary_nav_dialog && innerWidth.current && innerWidth.current <= TERTIARY_NAV_BREAKPOINT}
 	<Dialog onclose={() => (show_secondary_nav_dialog = false)}>
-		<div class="pane" style:--docs_menu_width={docs_menu_width}>
-			<div class="p_xl pb_0">
-				<Breadcrumb />
-			</div>
-			<div class="px_lg pb_xl">
-				<DocsSecondaryNav {tomes} sidebar={false} />
-				<DocsTertiaryNav {tomes} {tomes_by_slug} sidebar={false} />
+		<DialogContent padding="">
+			<div style:--docs_menu_width={docs_menu_width}>
+				<div class="p_xl pb_0">
+					<Breadcrumb />
+				</div>
+				<div class="px_lg pb_xl">
+					<DocsSecondaryNav {tomes} sidebar={false} />
+					<DocsTertiaryNav {tomes} {tomes_by_slug} sidebar={false} />
+				</div>
 			</div>
-		</div>
+		</DialogContent>
 	</Dialog>
 {/if}
 

package/dist/Docs.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Docs.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Docs.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAMpC,OAAO,EAAC,IAAI,EAAgB,MAAM,WAAW,CAAC;AAU7C,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAkGH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Docs.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Docs.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,QAAQ,CAAC;AAMpC,OAAO,EAAC,IAAI,EAAgB,MAAM,WAAW,CAAC;AAW7C,KAAK,gBAAgB,GAAI;IACxB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CAClB,CAAC;AAqGH,QAAA,MAAM,IAAI,sDAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/DocsSearch.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
 	import type {SvelteHTMLElements} from 'svelte/elements';
 
+	import {icon_close} from './icons.js';
+	import Svg from './Svg.svelte';
+
 	let {
 		placeholder = 'search modules and declarations...',
 		module_count,
@@ -71,7 +74,7 @@
 			title="clear search"
 			aria-label="clear search"
 		>
-			🗙
+			<Svg data={icon_close} />
 		</button>
 	{/if}
 </label>

package/dist/DocsSearch.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DocsSearch.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsSearch.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAEvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,OAAO,CAAC,GAAG;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,YAAY,EAAE,MAAM,CAAC;CACrB,CAAC;AA+DH,QAAA,MAAM,UAAU,kEAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"DocsSearch.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/DocsSearch.svelte"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAKvD,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,OAAO,CAAC,GAAG;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B;;OAEG;IACH,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,YAAY,EAAE,MAAM,CAAC;CACrB,CAAC;AAkEH,QAAA,MAAM,UAAU,kEAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/Svg.svelte

@@ -4,6 +4,29 @@
 
 	import type {SvgData} from './svg.js';
 
+	/**
+	 * Renders an `SvgData` icon definition to inline `svg` markup, never via `@html`.
+	 *
+	 * ## Security
+	 *
+	 * `SvgData` is rendered structurally into a fixed element set - `svg`, `defs`,
+	 * `linearGradient`/`radialGradient`, `stop`, and `path`. None of these expose a
+	 * navigation or script sink (no `src` or `foreignObject`, and a gradient `href`
+	 * only references another gradient as a template, never a document location),
+	 * and Svelte routes `on*` spread keys through `addEventListener` rather than
+	 * writing inline handler attributes. So even an untrusted `SvgData` cannot
+	 * introduce script execution or navigation - which is why the data is rendered
+	 * through typed fields (`paths`, `gradients`) instead of a raw-markup escape
+	 * hatch.
+	 *
+	 * The one residual: a `style` value (`data.style`, a path's `style`, or a
+	 * gradient's `attrs.style`) can still issue network requests via `url(...)`, so
+	 * sanitize styles if you render untrusted data and that matters. Per-instance
+	 * `svg` attributes come from this component's own props, not from `data`.
+	 *
+	 * @module
+	 */
+
 	const {
 		data,
 		fill,
@@ -44,29 +67,43 @@
 	const final_width = $derived(width ?? size); // TODO @many default value? `100%` or omitted or something else?
 	const final_height = $derived(height ?? size); // TODO @many default value? `100%` or omitted or something else?
 
-	// merge `style` so users don't accidentally clobber any style data - maybe support other attrs or somehow clean this up?
+	// merge `style` so the icon's own style and a per-instance `style` prop don't clobber each other
 	const style = $derived(
-		data.attrs?.style && rest.style
-			? ensure_end(data.attrs.style, ';') + ' ' + rest.style
-			: (data.attrs?.style ?? rest.style),
+		data.style && rest.style
+			? ensure_end(data.style, ';') + ' ' + rest.style
+			: (data.style ?? rest.style),
 	);
-
-	// TODO dont use @html
 </script>
 
 <svg
 	viewBox={data.viewBox ?? '0 0 100 100'}
-	{...data.attrs}
 	{...rest}
 	aria-label={label ?? data.label}
-	class="{data.attrs?.class} {rest.class}"
 	class:inline
 	style:width={final_width}
 	style:height={final_height}
 	style:flex-shrink={shrink ? 1 : 0}
 	{style}
 >
-	{#if data.raw}{@html data.raw}{/if}<!-- eslint-disable-line svelte/no-at-html-tags -->
+	{#if data.gradients}
+		<defs>
+			{#each data.gradients as gradient (gradient.id)}
+				{#if gradient.type === 'radial'}
+					<radialGradient id={gradient.id} {...gradient.attrs}>
+						{#each gradient.stops as stop (stop)}
+							<stop offset={stop.offset} stop-color={stop.color} stop-opacity={stop.opacity} />
+						{/each}
+					</radialGradient>
+				{:else}
+					<linearGradient id={gradient.id} {...gradient.attrs}>
+						{#each gradient.stops as stop (stop)}
+							<stop offset={stop.offset} stop-color={stop.color} stop-opacity={stop.opacity} />
+						{/each}
+					</linearGradient>
+				{/if}
+			{/each}
+		</defs>
+	{/if}
 	{#if data.paths}
 		{#each data.paths as path (path)}
 			<path fill={final_fill} {...path} />

package/dist/Svg.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Svg.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Svg.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAExD,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAErC,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AA8CH,QAAA,MAAM,GAAG,sDAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Svg.svelte.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/Svg.svelte"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,iBAAiB,CAAC;AAExD,OAAO,KAAK,EAAC,OAAO,EAAC,MAAM,UAAU,CAAC;AAErC,KAAK,gBAAgB,GAAI,kBAAkB,CAAC,KAAK,CAAC,GAAG;IACpD,IAAI,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAqFH,QAAA,MAAM,GAAG,sDAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}

package/dist/dialog.d.ts

@@ -1,24 +1,38 @@
-import type { ComponentProps, Component } from 'svelte';
-import type Dialog from './Dialog.svelte';
+export type DialogAlign = 'center' | 'top';
+export declare const dialog_aligns: Array<DialogAlign>;
 /**
- * This helper function is needed to construct `DialogParams` with type safety.
- * It uses TypeScript's inferred generics for functions,
- * which do not work for plain objects as of v5.0.4.
- * * `ContextmenuParams` uses a similar strategy.
+ * Set by `Dialog`, read by `DialogContent`. Lets the content surface close the
+ * dialog without the consumer threading `close` through the `children` snippet.
  */
-export declare const to_dialog_params: <T extends Component<any>>(Component: T, props: ComponentProps<T>, dialog_props?: Partial<ComponentProps<typeof Dialog>>) => DialogParams<T>;
+export interface DialogContext {
+    /**
+     * Closes the dialog. When passed an event it's swallowed (default-prevented
+     * and propagation-stopped) before closing.
+     */
+    close: (e?: Event) => void;
+    /**
+     * Registers a content-surface element so a press inside it isn't treated as an
+     * outside-dismiss. The surface is known by node identity, independent of any
+     * class. Use as an attachment on the surface: `{@attach register_surface}`.
+     * Returns a cleanup that unregisters on unmount.
+     */
+    register_surface: (element: Element) => () => void;
+}
+export declare const dialog_context: {
+    get: (error_message?: string) => DialogContext;
+    get_maybe: () => DialogContext | undefined;
+    set: (value: DialogContext) => DialogContext;
+};
 /**
- * This pattern is based on:
- * https://github.com/ivanhofer/sveltekit-typescript-showcase/blob/main/src/01-props/09-svelte-component/Component.svelte
- * The main limitation is that the generic cannot be inferred automatically,
- * so we use `to_dialog_params` to construct instances in most cases.
- * Definining `DialogParams` with no concrete `T` lacks typechecking for `props`.
+ * The `attrs` a custom `DialogContent` `close_button` snippet receives.
+ * Spread onto a `<button>` to inherit the corner-anchored close button.
  */
-export interface DialogParams<T extends Component<any> = Component<any>> {
-    Component: T;
-    props: ComponentProps<T>;
-    dialog_props?: Partial<ComponentProps<typeof Dialog>> | undefined;
+export interface DialogCloseButtonAttrs {
+    type: 'button';
+    class: string;
+    style: string;
+    onclick: DialogContext['close'];
+    title: string;
+    'aria-label': string;
 }
-export type DialogLayout = 'centered' | 'page';
-export declare const dialog_layouts: Array<DialogLayout>;
 //# sourceMappingURL=dialog.d.ts.map

package/dist/dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dialog.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,cAAc,EAAE,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEtD,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAC;AAE1C;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,SAAS,CAAC,GAAG,CAAC,EACxD,WAAW,CAAC,EACZ,OAAO,cAAc,CAAC,CAAC,CAAC,EACxB,eAAe,OAAO,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,KACnD,YAAY,CAAC,CAAC,CAIf,CAAC;AAEH;;;;;;GAMG;AACH,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,SAAS,CAAC,GAAG,CAAC,GAAG,SAAS,CAAC,GAAG,CAAC;IACtE,SAAS,EAAE,CAAC,CAAC;IACb,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,GAAG,SAAS,CAAC;CAClE;AAED,MAAM,MAAM,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAC/C,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,YAAY,CAAwB,CAAC"}
+{"version":3,"file":"dialog.d.ts","sourceRoot":"../src/lib/","sources":["../src/lib/dialog.ts"],"names":[],"mappings":"AAEA,MAAM,MAAM,WAAW,GAAG,QAAQ,GAAG,KAAK,CAAC;AAC3C,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,WAAW,CAAqB,CAAC;AAEnE;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC7B;;;OAGG;IACH,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;IAC3B;;;;;OAKG;IACH,gBAAgB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,MAAM,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,cAAc;;;;CAAkC,CAAC;AAE9D;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACtC,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,MAAM,CAAC;CACrB"}

package/dist/dialog.js

@@ -1,12 +1,3 @@
-/**
- * This helper function is needed to construct `DialogParams` with type safety.
- * It uses TypeScript's inferred generics for functions,
- * which do not work for plain objects as of v5.0.4.
- * * `ContextmenuParams` uses a similar strategy.
- */
-export const to_dialog_params = (Component, props, dialog_props) => ({
-    Component,
-    props,
-    dialog_props,
-});
-export const dialog_layouts = ['centered', 'page'];
+import { create_context } from './context_helpers.js';
+export const dialog_aligns = ['center', 'top'];
+export const dialog_context = create_context();