@sveltier/ui 0.1.0-alpha.0 → 0.1.0-alpha.1

package/dist/core/provider/UIProvider.svelte

@@ -29,12 +29,13 @@
 </script>
 
 <script lang="ts">
-	// The root of an app: theme, defaults, display and locale in one component.
+	// The root of an app: theme, defaults, display, locale and toasts in one component.
 	import { untrack } from 'svelte';
 	import DefaultsProvider from '../defaults/DefaultsProvider.svelte';
 	import { createDisplay, setDisplayContext } from '../display/display.js';
 	import { createLocale, setLocaleContext } from '../locale/locale.js';
 	import ThemeProvider from '../theme/ThemeProvider.svelte';
+	import ToastProvider from '../toast/ToastProvider.svelte';
 
 	let {
 		themes,
@@ -55,6 +56,8 @@
 
 <ThemeProvider {themes} bind:theme {light} {dark} {storageKey} {nonce}>
 	<DefaultsProvider defaults={defaults ?? {}}>
-		{@render children?.()}
+		<ToastProvider>
+			{@render children?.()}
+		</ToastProvider>
 	</DefaultsProvider>
 </ThemeProvider>

package/dist/core/theme/css.js

@@ -8,10 +8,14 @@ function check(ok, code, message) {
     if (!ok)
         throw sveltierError(code, message);
 }
-/** `{color-scheme:…;--sv-color-x:…;--sv-on-x:…;--sv-var:…}` for one theme. */
+/** `{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}.`);
-    let out = `color-scheme:${theme.dark ? 'dark' : 'light'}`;
+    // 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)

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;

package/dist/core/toast/toast.css

@@ -0,0 +1,134 @@
+@layer sv.tokens, sv.base, sv.components, sv.utilities;
+
+@layer sv.components {
+	/*
+	 * The region: a strip of the screen's height in the top layer, with the toasts at its
+	 * bottom, across a phone and at the end from 600px. It never changes height, so a toast
+	 * fading out stays where it was while the others move. Around the toasts, presses go
+	 * through to the page.
+	 */
+	.sv-toasts {
+		position: fixed;
+		inset-block: 0;
+		inset-inline: var(--sv-space-8);
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-end;
+		inline-size: auto;
+		block-size: auto;
+		max-inline-size: none;
+		max-block-size: none;
+		margin: 0;
+		padding-block: 0 calc(var(--sv-space-21) + env(safe-area-inset-bottom, 0px));
+		padding-inline: 0;
+		border: 0;
+		overflow: visible;
+		background: transparent;
+		color: var(--sv-color-text);
+		font-family: var(--sv-font-ui);
+		pointer-events: none;
+	}
+
+	@media (width >= 600px) {
+		.sv-toasts {
+			inset-inline: auto var(--sv-space-21);
+			inline-size: 21rem;
+		}
+	}
+
+	/* F8 focuses the region; the ring goes round the toasts, not the strip. */
+	.sv-toasts:focus-visible {
+		outline: none;
+	}
+
+	.sv-toasts:focus-visible .sv-toasts__list {
+		outline: var(--sv-focus-width) solid var(--sv-color-primary);
+		outline-offset: var(--sv-focus-offset);
+	}
+
+	.sv-toasts__list {
+		display: grid;
+		gap: var(--sv-space-8);
+		margin: 0;
+		padding: 0;
+		border-radius: var(--sv-rounded, min(var(--sv-radius-md), var(--sv-radius-lg)));
+		list-style: none;
+		pointer-events: auto;
+	}
+
+	/* Filled with its colour; neutral is the page inverted, so it reads on any surface. */
+	.sv-toast {
+		display: flex;
+		gap: var(--sv-space-5);
+		align-items: center;
+		box-sizing: border-box;
+		min-block-size: calc(var(--sv-control-lg) * var(--sv-density));
+		padding-block: calc(var(--sv-space-5) * var(--sv-density));
+		padding-inline: calc(var(--sv-space-13) * var(--sv-density)) var(--sv-space-5);
+		border-radius: var(--sv-rounded, min(var(--sv-radius-md), var(--sv-radius-lg)));
+		background-color: var(--sv-variant-bg);
+		box-shadow: var(--sv-shadow);
+		color: var(--sv-variant-fg);
+		font-size: var(--sv-text-sm);
+		line-height: var(--sv-leading-snug);
+	}
+
+	.sv-toast__message {
+		flex: 1;
+		min-inline-size: 0;
+		margin: 0;
+		padding-block: var(--sv-space-3);
+		overflow-wrap: break-word;
+	}
+
+	.sv-toast__action,
+	.sv-toast__close {
+		flex: none;
+		border: 0;
+		background: transparent;
+		color: inherit;
+		cursor: pointer;
+	}
+
+	.sv-toast__action {
+		min-block-size: var(--sv-control-sm);
+		padding-inline: var(--sv-space-8);
+		border-radius: var(--sv-radius-sm);
+		font: inherit;
+		font-weight: var(--sv-weight-semibold);
+		/* Lettered like the theme's buttons: capitals in a theme that sets them. */
+		letter-spacing: var(--sv-button-tracking);
+		text-transform: var(--sv-button-transform);
+		white-space: nowrap;
+	}
+
+	.sv-toast__close {
+		display: inline-grid;
+		place-items: center;
+		inline-size: var(--sv-control-sm);
+		block-size: var(--sv-control-sm);
+		padding: 0;
+		border-radius: 50%;
+	}
+
+	.sv-toast__close svg {
+		inline-size: 1.272em;
+		block-size: 1.272em;
+	}
+
+	@media (hover: hover) {
+		:is(.sv-toast__action, .sv-toast__close):hover {
+			background-color: color-mix(in oklch, currentColor var(--sv-state-hover), transparent);
+		}
+	}
+
+	:is(.sv-toast__action, .sv-toast__close):active {
+		background-color: color-mix(in oklch, currentColor var(--sv-state-press), transparent);
+	}
+
+	/* The ring takes the toast's own text colour, which contrasts with it in every colour. */
+	.sv-toast :focus-visible {
+		outline-color: currentColor;
+	}
+}

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

@@ -0,0 +1,117 @@
+import type { Color, Density, Rounded } from '../props/types.js';
+/** The Toast props that `DefaultsProvider` and `UIProvider` can set for a subtree. */
+export interface ToastDefaults {
+    /**
+     * The colour of a toast shown without one: `neutral` is the page inverted.
+     * @default 'neutral'
+     */
+    color: Color;
+    /**
+     * How long a toast stays, in ms, not counting the time it is hovered or focused. `0` keeps
+     * it until it is dismissed.
+     * @default 6000
+     */
+    duration: number;
+    /**
+     * Multiplies the padding, never the text.
+     * @default 'default'
+     */
+    density: Density;
+    /**
+     * Corner rounding. `true` keeps the theme's radius.
+     * @default true
+     */
+    rounded: Rounded;
+}
+declare module '../defaults/context.js' {
+    interface ComponentDefaults {
+        Toast: ToastDefaults;
+    }
+}
+/** A button in a toast, such as Undo. The toast closes after `onclick` has run. */
+export interface ToastAction {
+    /** The button's text, short: "Undo", "Retry", "View". */
+    label: string;
+    onclick: () => void;
+}
+/** How a toast looks and how long it stays. Unset options take the Toast defaults. */
+export interface ToastOptions {
+    /** A button that acts on what the message reports, such as Undo. */
+    action?: ToastAction;
+    /** The colour. `error` is announced at once; the others wait for the screen reader to pause. */
+    color?: Color;
+    /** In ms, not counting the time it is hovered or focused. `0` keeps it until it is dismissed. */
+    duration?: number;
+}
+/**
+ * Short messages at the bottom of the screen that report what just happened, with a button
+ * to act on it, such as Undo. At most three show at once, newest first; each leaves after
+ * its duration, which waits while the pointer or focus is on the toasts. F8 moves focus to
+ * them. While a Dialog or Sheet is open they show inside it, so they can still be pressed.
+ * Returned by `useToast()`.
+ *
+ * @example
+ * const toast = useToast();
+ * toast.show('Payment sent', { action: { label: 'Undo', onclick: cancelPayment } });
+ */
+export interface ToastInstance {
+    /** Shows `message` and returns the toast's id. */
+    show(message: string, options?: ToastOptions): string;
+    /** Closes the toast with this id, if it is still shown. */
+    dismiss(id: string): void;
+}
+/** A toast as the outlets render it. */
+export interface ToastEntry {
+    id: string;
+    message: string;
+    color: Color;
+    action?: ToastAction;
+}
+/** What the live regions read out: the message, then the action's label. */
+export interface Announcement {
+    id: string;
+    message: string;
+    action?: string;
+    assertive: boolean;
+}
+/**
+ * The toasts of an app: the queue, the timers and what to announce. Outlets render them: the
+ * provider's at the end of the page, and one inside each open modal dialog, which makes the
+ * rest of the page inert. The topmost outlet shows them all.
+ */
+export declare class Toasts {
+    #private;
+    /** Newest first. */
+    list: ToastEntry[];
+    announcements: Announcement[];
+    /** The provider's outlet, used while no modal dialog has one open. */
+    readonly base: {};
+    constructor(defaults: () => ToastDefaults);
+    /** The outlet that shows the toasts. */
+    get top(): object;
+    /** The density and rounding of every toast, from the provider's defaults. */
+    get style(): Pick<ToastDefaults, 'density' | 'rounded'>;
+    /** Makes `outlet` the topmost until the returned function is called. */
+    register(outlet: object): () => void;
+    show(message: string, { action, color, duration }?: ToastOptions): string;
+    dismiss(id: string): void;
+    /** Stops every timer until each source has resumed: the pointer on the toasts, focus in them. */
+    pause(source: object): void;
+    resume(source: object): void;
+}
+/** The nearest provider's toasts, if there is one. */
+export declare const getToasts: () => Toasts | undefined;
+export declare const setToasts: (toasts: Toasts) => Toasts;
+/**
+ * Returns the toasts of the nearest `<UIProvider>` or `<ToastProvider>`. Call it while a
+ * component initialises; call `show()` whenever something happens.
+ *
+ * @example
+ * <script>
+ *   import { Button, useToast } from '@sveltier/ui';
+ *   const toast = useToast();
+ * </script>
+ *
+ * <Button onclick={() => toast.show('Saved', { color: 'success' })}>Save</Button>
+ */
+export declare function useToast(): ToastInstance;

package/dist/core/toast/toast.svelte.js

@@ -0,0 +1,133 @@
+import { getContext, hasContext, setContext, untrack } from 'svelte';
+import { sveltierError } from '../errors/errors.js';
+// At most this many on screen; a newer toast pushes the oldest out.
+const MAX = 3;
+// Long enough for a screen reader to take the text, short enough that switching outlets
+// does not read it twice.
+const ANNOUNCED = 1000;
+/**
+ * The toasts of an app: the queue, the timers and what to announce. Outlets render them: the
+ * provider's at the end of the page, and one inside each open modal dialog, which makes the
+ * rest of the page inert. The topmost outlet shows them all.
+ */
+export class Toasts {
+    /** Newest first. */
+    list = $state.raw([]);
+    announcements = $state.raw([]);
+    /** The provider's outlet, used while no modal dialog has one open. */
+    base = {};
+    #outlets = $state.raw([]);
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- never read reactively
+    #timers = new Map();
+    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- never read reactively
+    #pausers = new Set();
+    #count = 0;
+    #defaults;
+    constructor(defaults) {
+        this.#defaults = defaults;
+    }
+    /** The outlet that shows the toasts. */
+    get top() {
+        return this.#outlets.at(-1) ?? this.base;
+    }
+    /** The density and rounding of every toast, from the provider's defaults. */
+    get style() {
+        const { density, rounded } = this.#defaults();
+        return { density, rounded };
+    }
+    // The methods below may run inside an effect, which must not come to depend on the lists
+    // they change, so they read them untracked.
+    /** Makes `outlet` the topmost until the returned function is called. */
+    register(outlet) {
+        untrack(() => (this.#outlets = [...this.#outlets, outlet]));
+        return () => untrack(() => (this.#outlets = this.#outlets.filter((other) => other !== outlet)));
+    }
+    show(message, { action, color, duration } = {}) {
+        const id = `sv-toast-${++this.#count}`;
+        // Toasts answer what the user does, so they belong to the browser: one shown while the
+        // server renders would have nothing to hydrate into.
+        if (typeof window === 'undefined')
+            return id;
+        const defaults = untrack(this.#defaults);
+        const entry = { id, message, color: color ?? defaults.color, action };
+        untrack(() => (this.list = [entry, ...this.list]));
+        for (const old of untrack(() => this.list.slice(MAX)))
+            this.dismiss(old.id);
+        const time = duration ?? defaults.duration;
+        if (time > 0 && Number.isFinite(time)) {
+            this.#timers.set(id, { remaining: time, started: 0 });
+            if (this.#pausers.size === 0)
+                this.#start(id);
+        }
+        this.#announce(entry);
+        return id;
+    }
+    dismiss(id) {
+        this.#stop(id);
+        this.#timers.delete(id);
+        untrack(() => (this.list = this.list.filter((toast) => toast.id !== id)));
+    }
+    /** Stops every timer until each source has resumed: the pointer on the toasts, focus in them. */
+    pause(source) {
+        if (this.#pausers.size === 0)
+            for (const id of this.#timers.keys())
+                this.#stop(id);
+        this.#pausers.add(source);
+    }
+    resume(source) {
+        if (!this.#pausers.delete(source) || this.#pausers.size > 0)
+            return;
+        for (const id of this.#timers.keys())
+            this.#start(id);
+    }
+    #start(id) {
+        const timer = this.#timers.get(id);
+        if (!timer)
+            return;
+        timer.started = performance.now();
+        timer.handle = setTimeout(() => this.dismiss(id), timer.remaining);
+    }
+    #stop(id) {
+        const timer = this.#timers.get(id);
+        if (timer?.handle === undefined)
+            return;
+        clearTimeout(timer.handle);
+        timer.handle = undefined;
+        timer.remaining -= performance.now() - timer.started;
+    }
+    #announce({ id, message, action, color }) {
+        const note = { id, message, action: action?.label, assertive: color === 'error' };
+        untrack(() => (this.announcements = [...this.announcements, note]));
+        setTimeout(() => {
+            this.announcements = this.announcements.filter((other) => other !== note);
+        }, ANNOUNCED);
+    }
+}
+// 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.toasts');
+/** The nearest provider's toasts, if there is one. */
+export const getToasts = () => hasContext(KEY) ? getContext(KEY) : undefined;
+export const setToasts = (toasts) => setContext(KEY, toasts);
+/**
+ * Returns the toasts of the nearest `<UIProvider>` or `<ToastProvider>`. Call it while a
+ * component initialises; call `show()` whenever something happens.
+ *
+ * @example
+ * <script>
+ *   import { Button, useToast } from '@sveltier/ui';
+ *   const toast = useToast();
+ * </script>
+ *
+ * <Button onclick={() => toast.show('Saved', { color: 'success' })}>Save</Button>
+ */
+export function useToast() {
+    const toasts = getToasts();
+    if (!toasts) {
+        throw sveltierError('SV4003', 'useToast() was called outside a <UIProvider>. Call it in a component inside <UIProvider>, or inside <ToastProvider> when the app uses <ThemeProvider> alone.');
+    }
+    return {
+        show: (message, options) => toasts.show(message, options),
+        dismiss: (id) => toasts.dismiss(id)
+    };
+}