@sveltier/ui 0.0.0-stage → 0.1.0-alpha.1

package/dist/core/theme/color.js

@@ -0,0 +1,54 @@
+// Minimal oklch maths: enough to pick readable "on" colours and to check WCAG contrast.
+// Conversion from Björn Ottosson's OKLab reference (https://bottosson.github.io/posts/oklab/).
+const OKLCH = /^oklch\(\s*([\d.]+)(%?)\s+([\d.]+)(%?)\s+([\d.]+)(?:deg)?\s*(?:\/\s*([\d.]+)(%?))?\s*\)$/i;
+/** Parses `oklch(L C H)` or `oklch(L C H / A)` with numbers or percentages. */
+export function parseOklch(value) {
+    const match = OKLCH.exec(value.trim());
+    if (!match)
+        return undefined;
+    const [, l = '0', lPct, c = '0', cPct, h = '0', a, aPct] = match;
+    return {
+        l: lPct ? +l / 100 : +l,
+        c: cPct ? (+c / 100) * 0.4 : +c,
+        h: +h,
+        alpha: a === undefined ? 1 : aPct ? +a / 100 : +a
+    };
+}
+const clamp01 = (value) => Math.min(1, Math.max(0, value));
+/** Linear-light sRGB channels, clamped to the sRGB gamut. */
+export function toLinearSrgb({ l, c, h }) {
+    const rad = (h * Math.PI) / 180;
+    const a = c * Math.cos(rad);
+    const b = c * Math.sin(rad);
+    const l3 = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+    const m3 = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+    const s3 = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+    return [
+        clamp01(4.0767416621 * l3 - 3.3077115913 * m3 + 0.2309699292 * s3),
+        clamp01(-1.2684380046 * l3 + 2.6097574011 * m3 - 0.3413193965 * s3),
+        clamp01(-0.0041960863 * l3 - 0.7034186147 * m3 + 1.707614701 * s3)
+    ];
+}
+/** WCAG relative luminance of an opaque colour. */
+export function luminance(color) {
+    const [r, g, b] = toLinearSrgb(color);
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** WCAG 2 contrast ratio between two opaque oklch colours (1–21). */
+export function contrast(a, b) {
+    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+}
+const format = ({ l, c, h }) => `oklch(${l} ${c} ${h})`;
+/**
+ * Picks a readable text colour for a filled background: a deep ink or a near-white, both
+ * tinted with the background's hue, whichever contrasts more.
+ */
+export function onColor(background) {
+    const bg = parseOklch(background);
+    if (!bg)
+        return undefined;
+    const dark = { l: 0.2, c: 0.02, h: bg.h, alpha: 1 };
+    const light = { l: 0.985, c: 0.005, h: bg.h, alpha: 1 };
+    return format(contrast(bg, dark) >= contrast(bg, light) ? dark : light);
+}

package/dist/core/theme/context.d.ts

@@ -0,0 +1,25 @@
+import type { ThemeChoice, ThemeDefinition } from './types.js';
+/** The nearest `<ThemeProvider>`, as seen by `useTheme()`. All fields are reactive. */
+export interface ThemeInstance {
+    /** "system" or a theme name. */
+    readonly choice: ThemeChoice;
+    /**
+     * The theme in effect. With "system" it follows `prefers-color-scheme`; during server
+     * rendering, where the preference is unknown, it is the `light` theme.
+     */
+    readonly name: string;
+    readonly current: ThemeDefinition;
+    readonly isDark: boolean;
+    readonly themes: Readonly<Record<string, ThemeDefinition>>;
+    /** Theme names that "system" and `toggle()` switch between. */
+    readonly light: string;
+    readonly dark: string;
+    /** Selects a theme name or "system". The root provider remembers it. */
+    set(choice: ThemeChoice): void;
+    /** Switches between the `light` and `dark` themes. */
+    toggle(): void;
+}
+export declare const hasThemeContext: () => boolean;
+export declare const setThemeContext: (theme: ThemeInstance) => ThemeInstance;
+/** Returns the nearest theme. Must be called during component initialisation. */
+export declare function useTheme(): ThemeInstance;

package/dist/core/theme/context.js

@@ -0,0 +1,14 @@
+import { getContext, hasContext, setContext } from 'svelte';
+import { sveltierError } from '../errors/errors.js';
+// A private symbol key instead of createContext(): its `has` function only exists from
+// Svelte 5.57, and the supported range starts at 5.40.
+const KEY = Symbol('sveltier.theme');
+export const hasThemeContext = () => hasContext(KEY);
+export const setThemeContext = (theme) => setContext(KEY, theme);
+/** Returns the nearest theme. Must be called during component initialisation. */
+export function useTheme() {
+    if (!hasContext(KEY)) {
+        throw sveltierError('SV1007', 'useTheme() was called outside a <ThemeProvider>. Call it in a component inside <UIProvider> or <ThemeProvider>.');
+    }
+    return getContext(KEY);
+}

package/dist/core/theme/css.d.ts

@@ -0,0 +1,25 @@
+import type { ThemeChoice, ThemeDefinition } from './types.js';
+export declare const THEME_ATTRIBUTE = "data-sv-theme";
+export interface ThemeCssOptions {
+    themes: Record<string, ThemeDefinition>;
+    /** Theme used by "system" when the OS prefers light. */
+    light: string;
+    /** Theme used by "system" when the OS prefers dark. */
+    dark: string;
+    /** What `<html>` shows before any attribute is set (no JavaScript, nothing stored). */
+    fallback: ThemeChoice;
+}
+/**
+ * One stylesheet for every theme, keyed by `data-sv-theme`. "system" is pure CSS
+ * (`prefers-color-scheme`), so the right theme paints before any JavaScript runs.
+ * It also holds a `.sv-color-<name>` class for every colour with an `on-` colour (intents
+ * and custom colours), which a component's `color` prop sets.
+ */
+export declare function themeCss({ themes, light, dark, fallback }: ThemeCssOptions): string;
+/**
+ * Render-blocking script for `<head>`: applies a stored choice to `<html>` before the body
+ * is parsed, if it is one of `choices`. Exposed so a Content Security Policy can hash it.
+ */
+export declare function themeScript(storageKey: string, choices: string[]): string;
+/** Markup for `<svelte:head>`: the theme stylesheet, then the optional script. */
+export declare function themeHead(css: string, script: string, nonce?: string): string;

package/dist/core/theme/css.js

@@ -0,0 +1,73 @@
+import { sveltierError } from '../errors/errors.js';
+export const THEME_ATTRIBUTE = 'data-sv-theme';
+const NAME = /^(?!system$)[a-z][\w-]*$/i;
+const KEY = /^[a-z][\w-]*$/i;
+const UNSAFE = /[<>{};]/;
+const NONCE = /^[\w+/=-]+$/;
+function check(ok, code, message) {
+    if (!ok)
+        throw sveltierError(code, message);
+}
+/** `{color-scheme:…;--sv-color-scrim:…;--sv-color-x:…;--sv-on-x:…;--sv-var:…}` for one theme. */
+function block(theme, name, registered) {
+    check(theme, 'SV1002', `Unknown theme "${name}". Registered: ${registered}.`);
+    // The veil behind modal layers: the theme's ink over a light theme, its background over a
+    // dark one. Written here, where the mode is known: bundlers rewrite CSS light-dark() into
+    // variables that only their own color-scheme rules set, and these themes are set at runtime.
+    const scrim = theme.dark ? 'var(--sv-color-background) 61.8%' : 'var(--sv-color-text) 38.2%';
+    let out = `color-scheme:${theme.dark ? 'dark' : 'light'};--sv-color-scrim:color-mix(in oklch,${scrim},transparent)`;
+    const entries = [
+        ...Object.entries(theme.colors).map(([k, v]) => [k.startsWith('on-') ? k : `color-${k}`, v]),
+        ...Object.entries(theme.variables)
+    ];
+    for (const [key, value] of entries) {
+        check(KEY.test(key), 'SV1003', `Invalid colour or variable name "${key}". Use letters, digits, - and _, starting with a letter.`);
+        check(!UNSAFE.test(String(value)), 'SV1004', `Unsafe value for "${key}": it contains <, >, {, } or ;. Use a plain CSS value.`);
+        out += `;--sv-${key}:${value}`;
+    }
+    return `{${out}}`;
+}
+/**
+ * One stylesheet for every theme, keyed by `data-sv-theme`. "system" is pure CSS
+ * (`prefers-color-scheme`), so the right theme paints before any JavaScript runs.
+ * It also holds a `.sv-color-<name>` class for every colour with an `on-` colour (intents
+ * and custom colours), which a component's `color` prop sets.
+ */
+export function themeCss({ themes, light, dark, fallback }) {
+    const attr = (name) => `[${THEME_ATTRIBUTE}="${name}"]`;
+    const bare = `:root:not([${THEME_ATTRIBUTE}])`;
+    const system = attr('system') + (fallback === 'system' ? `,${bare}` : '');
+    const colors = new Set();
+    const registered = Object.keys(themes).join(', ');
+    let css = '';
+    for (const [name, theme] of Object.entries(themes)) {
+        check(NAME.test(name), 'SV1005', `Invalid theme name "${name}". Use letters, digits, - and _, starting with a letter; "system" is reserved.`);
+        css += attr(name) + block(theme, name, registered);
+        for (const key in theme.colors)
+            if (key.startsWith('on-'))
+                colors.add(key.slice(3));
+    }
+    css += `@media (prefers-color-scheme:light){${system}${block(themes[light], light, registered)}}`;
+    css += `@media (prefers-color-scheme:dark){${system}${block(themes[dark], dark, registered)}}`;
+    if (fallback !== 'system')
+        css += bare + block(themes[fallback], fallback, registered);
+    let classes = '';
+    for (const color of colors) {
+        classes += `.sv-color-${color}{--sv-color:var(--sv-color-${color});--sv-on-color:var(--sv-on-${color})}`;
+    }
+    return `@layer sv.tokens,sv.base,sv.components,sv.utilities;@layer sv.tokens{${css}}@layer sv.base{${classes}}`;
+}
+/**
+ * Render-blocking script for `<head>`: applies a stored choice to `<html>` before the body
+ * is parsed, if it is one of `choices`. Exposed so a Content Security Policy can hash it.
+ */
+export function themeScript(storageKey, choices) {
+    const json = (data) => JSON.stringify(data).replace(/</g, '\\u003c');
+    return `(function(){try{var t=localStorage.getItem(${json(storageKey)});if(${json(choices)}.indexOf(t)>-1)document.documentElement.setAttribute("${THEME_ATTRIBUTE}",t)}catch(e){}})()`;
+}
+/** Markup for `<svelte:head>`: the theme stylesheet, then the optional script. */
+export function themeHead(css, script, nonce) {
+    check(nonce === undefined || NONCE.test(nonce), 'SV1006', 'Invalid nonce. Pass the base64 nonce of your Content Security Policy as it is.');
+    const attr = nonce ? ` nonce="${nonce}"` : '';
+    return `<style id="sv-theme"${attr}>${css}</style>${script && `<script${attr}>${script}</script>`}`;
+}

package/dist/core/theme/define.d.ts

@@ -0,0 +1,11 @@
+import type { ThemeDefinition, ThemeInput } from './types.js';
+/**
+ * Builds a complete theme from the parts you change over `base`, the theme you extend.
+ * Missing colours and variables come from `base`. `on-` colours are recomputed for every
+ * colour you override, unless you pass them yourself. `base` is never mutated.
+ *
+ * @example
+ * import { monolithDark } from '@sveltier/ui/themes/monolith';
+ * const midnight = defineTheme({ colors: { primary: 'oklch(0.78 0.11 260)' } }, monolithDark);
+ */
+export declare function defineTheme(input: ThemeInput, base: ThemeDefinition): ThemeDefinition;

package/dist/core/theme/define.js

@@ -0,0 +1,21 @@
+import { withOnColors } from './resolve.js';
+/**
+ * Builds a complete theme from the parts you change over `base`, the theme you extend.
+ * Missing colours and variables come from `base`. `on-` colours are recomputed for every
+ * colour you override, unless you pass them yourself. `base` is never mutated.
+ *
+ * @example
+ * import { monolithDark } from '@sveltier/ui/themes/monolith';
+ * const midnight = defineTheme({ colors: { primary: 'oklch(0.78 0.11 260)' } }, monolithDark);
+ */
+export function defineTheme(input, base) {
+    const overrides = input.colors ?? {};
+    const colors = { ...base.colors };
+    for (const name of Object.keys(overrides))
+        delete colors[`on-${name}`];
+    return withOnColors({
+        dark: input.dark ?? base.dark,
+        colors: { ...colors, ...overrides },
+        variables: { ...base.variables, ...input.variables }
+    });
+}

package/dist/core/theme/resolve.d.ts

@@ -0,0 +1,6 @@
+import { type ThemeDefinition } from './types.js';
+/**
+ * Returns a copy of the theme where every non-neutral colour without an explicit `on-`
+ * colour gets a computed one (a deep ink or a near-white, whichever contrasts more).
+ */
+export declare function withOnColors(theme: ThemeDefinition): ThemeDefinition;

package/dist/core/theme/resolve.js

@@ -0,0 +1,18 @@
+import { onColor } from './color.js';
+import { NEUTRAL_COLORS } from './types.js';
+const NEUTRAL = new Set(NEUTRAL_COLORS);
+/**
+ * Returns a copy of the theme where every non-neutral colour without an explicit `on-`
+ * colour gets a computed one (a deep ink or a near-white, whichever contrasts more).
+ */
+export function withOnColors(theme) {
+    const colors = { ...theme.colors };
+    for (const [name, value] of Object.entries(theme.colors)) {
+        if (NEUTRAL.has(name) || name.startsWith('on-') || colors[`on-${name}`])
+            continue;
+        const on = onColor(value);
+        if (on)
+            colors[`on-${name}`] = on;
+    }
+    return { ...theme, colors };
+}

package/dist/core/theme/theme-provider.css

@@ -0,0 +1,13 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/* A theme scope only re-declares custom properties, which inherit through display: contents. */
+	.sv-theme-provider {
+		display: contents;
+	}
+
+	.sv-theme-provider--background {
+		display: block;
+		background-color: var(--sv-color-background);
+	}
+}

package/dist/core/theme/types.d.ts

@@ -0,0 +1,35 @@
+/** Neutral roles: page, surfaces, rules and text. They have no `on-` colour. */
+export declare const NEUTRAL_COLORS: readonly ["background", "surface", "surface-raised", "border", "border-soft", "border-strong", "text", "text-muted", "text-subtle"];
+/**
+ * Intent colours, usable as a component's `color`. Each gets an `on-` colour for text on a
+ * filled background. `up` / `down` are price direction and are kept separate from
+ * `success` / `error`, because some markets show rising prices in red.
+ */
+export declare const INTENT_COLORS: readonly ["primary", "success", "warning", "error", "info", "up", "down"];
+export type NeutralColor = (typeof NEUTRAL_COLORS)[number];
+export type IntentColor = (typeof INTENT_COLORS)[number];
+/** Every colour value is an `oklch()` string. */
+export type ThemeColors = Record<NeutralColor | IntentColor, string> & Partial<Record<`on-${IntentColor}`, string>> & Record<string, string>;
+/**
+ * The theme contract: every theme sets all of these, so one theme switch restyles type,
+ * shape, depth and motion as well as colour. Emitted as `--sv-<name>`.
+ */
+export declare const THEME_VARIABLES: readonly ["font-display", "font-ui", "font-data", "weight-display", "tracking-display", "label-size", "label-transform", "label-tracking", "button-transform", "button-tracking", "radius-sm", "radius-md", "radius-lg", "radius-xl", "radius-full", "surface-alpha", "surface-blur", "backdrop", "ornament", "bevel", "shadow", "ease", "duration-fast", "duration-normal", "duration-slow"];
+export type ThemeVariable = (typeof THEME_VARIABLES)[number];
+export type ThemeVariables = Record<ThemeVariable, string | number>;
+export interface ThemeDefinition {
+    /** Dark themes set `color-scheme: dark` and are the `dark` target of "system". */
+    dark: boolean;
+    /** Emitted as `--sv-color-<name>`, and `on-<name>` keys as `--sv-on-<name>`. */
+    colors: ThemeColors;
+    /** The theme contract plus any extra custom properties, emitted as `--sv-<name>`. */
+    variables: ThemeVariables & Record<string, string | number>;
+}
+/** Partial theme accepted by `defineTheme()`; missing values come from the base theme. */
+export interface ThemeInput {
+    dark?: boolean;
+    colors?: Partial<ThemeColors>;
+    variables?: Partial<ThemeVariables> & Record<string, string | number>;
+}
+/** A user choice: a theme name, or "system" to follow `prefers-color-scheme`. */
+export type ThemeChoice = 'system' | (string & {});

package/dist/core/theme/types.js

@@ -0,0 +1,61 @@
+/** Neutral roles: page, surfaces, rules and text. They have no `on-` colour. */
+export const NEUTRAL_COLORS = [
+    'background',
+    'surface',
+    'surface-raised',
+    'border',
+    'border-soft',
+    'border-strong',
+    'text',
+    'text-muted',
+    'text-subtle'
+];
+/**
+ * Intent colours, usable as a component's `color`. Each gets an `on-` colour for text on a
+ * filled background. `up` / `down` are price direction and are kept separate from
+ * `success` / `error`, because some markets show rising prices in red.
+ */
+export const INTENT_COLORS = [
+    'primary',
+    'success',
+    'warning',
+    'error',
+    'info',
+    'up',
+    'down'
+];
+/**
+ * The theme contract: every theme sets all of these, so one theme switch restyles type,
+ * shape, depth and motion as well as colour. Emitted as `--sv-<name>`.
+ */
+export const THEME_VARIABLES = [
+    // Type
+    'font-display',
+    'font-ui',
+    'font-data',
+    'weight-display',
+    'tracking-display',
+    'label-size',
+    'label-transform',
+    'label-tracking',
+    'button-transform',
+    'button-tracking',
+    // Shape
+    'radius-sm',
+    'radius-md',
+    'radius-lg',
+    'radius-xl',
+    'radius-full',
+    // Depth
+    'surface-alpha',
+    'surface-blur',
+    'backdrop',
+    'ornament',
+    'bevel',
+    'shadow',
+    // Motion (collapsed to near zero when the user prefers reduced motion)
+    'ease',
+    'duration-fast',
+    'duration-normal',
+    'duration-slow'
+];

package/dist/core/toast/ToastOutlet.svelte

@@ -0,0 +1,192 @@
+<script lang="ts">
+	// Where the toasts show: the region in the top layer and the live regions that read them
+	// out. The provider renders one at the end of the page, and the modal shell one inside each
+	// open dialog; only the topmost outlet shows the toasts.
+	import { flip } from 'svelte/animate';
+	import { on } from 'svelte/events';
+	import { easing, fade, motion, rise } from '../../primitives/motion/motion.js';
+	import '../../styles/visually-hidden.css';
+	import { useLocale } from '../locale/locale.js';
+	import { sharedClasses } from '../props/classes.js';
+	import './toast.css';
+	import type { ToastEntry, Toasts } from './toast.svelte.js';
+
+	let {
+		toasts,
+		outlet,
+		ref = $bindable(null)
+	}: {
+		toasts: Toasts;
+		/** This outlet's token, which the toasts compare with their topmost outlet. */
+		outlet: object;
+		/** The region, which a dialog counts as inside itself. */
+		ref?: HTMLElement | null;
+	} = $props();
+
+	const locale = useLocale();
+	const top = $derived(toasts.top === outlet);
+	const style = $derived(toasts.style);
+	const notes = $derived(top ? toasts.announcements : []);
+
+	const CLOSE =
+		'M6.4 5 12 10.6 17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6L6.4 19 5 17.6l5.6-5.6L5 6.4z';
+
+	// The region joins the top layer when it starts showing toasts, and again each time it
+	// becomes the topmost outlet, so it sits above whatever opened before. Emptied, it stays,
+	// which lets the last toast fade out.
+	const showing = $derived(top && toasts.list.length > 0);
+	$effect(() => {
+		if (!showing || !ref) return;
+		if (ref.matches(':popover-open')) ref.hidePopover();
+		ref.showPopover();
+	});
+
+	// The timers wait while the pointer or focus is on the toasts.
+	const hover = {};
+	const focus = {};
+	$effect(() => {
+		if (!top) return;
+		return () => {
+			toasts.resume(hover);
+			toasts.resume(focus);
+		};
+	});
+
+	// Where focus goes back to when the user leaves the toasts.
+	let back: HTMLElement | null = null;
+
+	// F8 moves focus to the toasts, the way to reach an action before its toast leaves; Escape
+	// in them goes back to where focus came from. Captured, so the layer stack never sees that
+	// Escape and an open dialog stays open.
+	$effect(() => {
+		if (!top) return;
+		return on(document, 'keydown', onkey, { capture: true });
+	});
+
+	function onkey(event: KeyboardEvent) {
+		if (!ref) return;
+		const inside = ref.contains(document.activeElement);
+		if (event.key === 'Escape') {
+			if (!inside || !back?.isConnected) return;
+			event.preventDefault();
+			goBack();
+			return;
+		}
+		const plain = !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+		if (event.key !== 'F8' || !plain || toasts.list.length === 0) return;
+		event.preventDefault();
+		if (!inside) back = focused(document.activeElement);
+		ref.focus();
+	}
+
+	const focused = (element: unknown) =>
+		element instanceof HTMLElement && element !== document.body ? element : null;
+
+	function enter(event: FocusEvent) {
+		toasts.pause(focus);
+		if (!ref?.contains(event.relatedTarget as Node | null)) {
+			back = focused(event.relatedTarget) ?? back;
+		}
+	}
+
+	function exit(event: FocusEvent) {
+		if (!(event.relatedTarget instanceof Node && ref?.contains(event.relatedTarget))) {
+			toasts.resume(focus);
+		}
+	}
+
+	function goBack() {
+		if (back?.isConnected) back.focus();
+		back = null;
+	}
+
+	// A toast that closes with focus in it hands focus on first: to the toasts left, else back.
+	function leave() {
+		if (!ref?.contains(document.activeElement)) return;
+		if (toasts.list.length > 1) ref.focus();
+		else goBack();
+	}
+
+	function act(toast: ToastEntry) {
+		leave();
+		try {
+			toast.action?.onclick();
+		} finally {
+			toasts.dismiss(toast.id);
+		}
+	}
+
+	function close(toast: ToastEntry) {
+		leave();
+		toasts.dismiss(toast.id);
+	}
+
+	// Toasts below one that leaves move into its place with the theme's timing.
+	function move(node: Element, rects: { from: DOMRect; to: DOMRect }) {
+		const timing = motion(node);
+		return flip(node, rects, { duration: timing.normal, easing: easing(timing.ease) });
+	}
+</script>
+
+<!-- Read out once each, then emptied: the toasts themselves are not live. -->
+{#snippet read(assertive: boolean)}
+	{#each notes as note (note.id)}
+		{#if note.assertive === assertive}<p>{note.message}</p>
+			{#if note.action}<p>{note.action}</p>{/if}{/if}
+	{/each}
+{/snippet}
+<div class="sv-visually-hidden" aria-live="polite">{@render read(false)}</div>
+<div class="sv-visually-hidden" aria-live="assertive">{@render read(true)}</div>
+
+<section
+	bind:this={ref}
+	popover="manual"
+	tabindex="-1"
+	aria-label="{locale.t('notifications')} (F8)"
+	class="sv-toasts"
+	onfocusin={enter}
+	onfocusout={exit}
+>
+	{#if top}
+		<ol
+			class="sv-toasts__list"
+			onpointerenter={() => toasts.pause(hover)}
+			onpointerleave={() => toasts.resume(hover)}
+		>
+			{#each toasts.list as toast (toast.id)}
+				<li
+					class={[
+						'sv-toast',
+						sharedClasses(
+							{
+								variant: 'flat',
+								color: toast.color,
+								density: style.density,
+								rounded: style.rounded
+							},
+							'Toast'
+						)
+					]}
+					in:rise
+					out:fade
+					animate:move
+				>
+					<p class="sv-toast__message">{toast.message}</p>
+					{#if toast.action}
+						<button type="button" class="sv-toast__action" onclick={() => act(toast)}>
+							{toast.action.label}
+						</button>
+					{/if}
+					<button
+						type="button"
+						class="sv-toast__close"
+						aria-label={locale.t('close')}
+						onclick={() => close(toast)}
+					>
+						<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d={CLOSE} /></svg>
+					</button>
+				</li>
+			{/each}
+		</ol>
+	{/if}
+</section>

package/dist/core/toast/ToastOutlet.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Toasts } from './toast.svelte.js';
+type $$ComponentProps = {
+    toasts: Toasts;
+    /** This outlet's token, which the toasts compare with their topmost outlet. */
+    outlet: object;
+    /** The region, which a dialog counts as inside itself. */
+    ref?: HTMLElement | null;
+};
+declare const ToastOutlet: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ToastOutlet = ReturnType<typeof ToastOutlet>;
+export default ToastOutlet;

package/dist/core/toast/ToastProvider.svelte

@@ -0,0 +1,39 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	/**
+	 * Gives its subtree toasts: `useToast()` inside it shows them at the bottom of the screen.
+	 * `<UIProvider>` already includes one; add it yourself only when the app uses
+	 * `<ThemeProvider>` alone.
+	 *
+	 * @example
+	 * <ThemeProvider themes={monolith}>
+	 *   <ToastProvider>
+	 *     {@render children()}
+	 *   </ToastProvider>
+	 * </ThemeProvider>
+	 */
+	export interface ToastProviderProps {
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	// The toasts of a subtree, and the outlet that shows them while no modal dialog is open.
+	import { useDefaults } from '../defaults/context.js';
+	import { setToasts, Toasts, type ToastDefaults } from './toast.svelte.js';
+	import ToastOutlet from './ToastOutlet.svelte';
+
+	let { children }: ToastProviderProps = $props();
+
+	const resolve = useDefaults<ToastDefaults>('Toast', {
+		color: 'neutral',
+		duration: 6000,
+		density: 'default',
+		rounded: true
+	});
+	const toasts = setToasts(new Toasts(() => resolve({})));
+</script>
+
+{@render children?.()}
+<ToastOutlet {toasts} outlet={toasts.base} />

package/dist/core/toast/ToastProvider.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+/**
+ * Gives its subtree toasts: `useToast()` inside it shows them at the bottom of the screen.
+ * `<UIProvider>` already includes one; add it yourself only when the app uses
+ * `<ThemeProvider>` alone.
+ *
+ * @example
+ * <ThemeProvider themes={monolith}>
+ *   <ToastProvider>
+ *     {@render children()}
+ *   </ToastProvider>
+ * </ThemeProvider>
+ */
+export interface ToastProviderProps {
+    children?: Snippet;
+}
+declare const ToastProvider: import("svelte").Component<ToastProviderProps, {}, "">;
+type ToastProvider = ReturnType<typeof ToastProvider>;
+export default ToastProvider;