@thomasfosterau/components 0.0.0 → 0.2.0

package/dist/feedback/SegmentBar.svelte

@@ -0,0 +1,83 @@
+<!-- @component
+One horizontal bar split into proportional, coloured segments: a vote share, a storage breakdown, a pass/fail split.
+-->
+<!--
+  SegmentBar — one horizontal bar split into proportional, coloured segments:
+  a vote share, a storage breakdown, a pass/fail split.
+
+  ARIA contract, and the whole reason this is a component: the bar is a
+  SINGLE `role="img"` whose `aria-label` spells out every segment ("Storage:
+  photos 62%, video 31%, other 7%"), so assistive technology gets the picture
+  in one read. The alternative — a run of coloured boxes, each with its own
+  label — is a dozen unlabelled or half-labelled announcements that never add
+  up to the comparison the bar is drawn to make. Every segment is therefore
+  `aria-hidden`, and the in-segment percentages are decorative.
+
+  Fractions are given, not derived from values: the caller already knows its
+  denominator (and whether the remainder should stay unfilled), and passing
+  shares keeps this component out of the business of summing anything. They
+  are clamped, and a total under 1 leaves the track showing.
+
+  A segment's colour is either a semantic `tone` or a `colourToken` — a CSS
+  custom-property NAME the app's theme declares in both its light and dark
+  themes. The value never appears here; see `ui/colour-token.ts`.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { backgroundTone } from "../ui/tones.js";
+import { colourTokenStyle } from "../ui/colour-token.js";
+import { barSize } from "./sizes.js";
+/** The custom property a segment's `colourToken` is bound to. */
+const SEGMENT_COLOUR_PROPERTY = "--segment-colour";
+let { label, segments, showValues = false, marker, size = "md", locales, class: className, ...rest } = $props();
+const context = getComponentsContext();
+const clamp = (fraction) => Math.min(1, Math.max(0, fraction));
+const percent = $derived(new Intl.NumberFormat(locales ?? context.locale(), {
+	style: "percent",
+	maximumFractionDigits: 1
+}));
+const shares = $derived(segments.map((segment) => ({
+	segment,
+	fraction: clamp(segment.fraction)
+})));
+const description = $derived(`${label}: ${shares.map(({ segment, fraction }) => `${segment.label} ${percent.format(fraction)}`).join(", ")}`);
+</script>
+
+<div
+  {...rest}
+  role="img"
+  aria-label={description}
+  class={[
+    'bg-base-300 relative flex w-full overflow-hidden rounded-(--radius-selector)',
+    barSize[size],
+    className,
+  ]}
+>
+  {#each shares as { segment, fraction }, index (index)}
+    <div
+      aria-hidden="true"
+      class={[
+        'flex h-full items-center justify-center overflow-hidden text-xs font-medium whitespace-nowrap',
+        segment.colourToken === undefined
+          ? [backgroundTone[segment.tone ?? 'neutral'], 'text-neutral-content']
+          : 'text-base-100 bg-(--segment-colour)',
+      ]}
+      style={[
+        `width: ${(fraction * 100).toFixed(2)}%`,
+        colourTokenStyle(SEGMENT_COLOUR_PROPERTY, segment.colourToken),
+      ]
+        .filter((part) => part !== undefined)
+        .join('; ')}
+    >
+      {#if showValues && size !== 'sm' && fraction >= 0.08}
+        {percent.format(fraction)}
+      {/if}
+    </div>
+  {/each}
+  {#if marker !== undefined}
+    <div
+      aria-hidden="true"
+      class="bg-base-content absolute inset-y-0 w-0.5"
+      style={`left: ${(clamp(marker) * 100).toFixed(2)}%`}
+    ></div>
+  {/if}
+</div>

package/dist/feedback/SegmentBar.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../ui/tones.ts';
+import { type BarSize } from './sizes.ts';
+/** One part of a `SegmentBar`: its label, its share of the bar, and its colour. */
+export interface BarSegment {
+    /** Read out for this segment in the bar's accessible label. */
+    readonly label: string;
+    /** Share of the whole bar, in `[0, 1]`. */
+    readonly fraction: number;
+    /** A CSS custom-property name the app's theme declares (`--party-alp`). */
+    readonly colourToken?: string | undefined;
+    /** Semantic colour, used when there is no `colourToken`. */
+    readonly tone?: Tone | undefined;
+}
+interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'role'> {
+    /** What the bar shows. Leads the accessible label. */
+    label: string;
+    /** The parts, in order; widths are proportional to their values. */
+    segments: readonly BarSegment[];
+    /** Print each segment's percentage inside it when it fits. */
+    showValues?: boolean | undefined;
+    /** Draw a marker at this fraction — a 50% majority line, a quota. */
+    marker?: number | undefined;
+    /**
+     * Bar height step.
+     * @defaultValue `'md'`
+     */
+    size?: BarSize | undefined;
+    /** Locale(s) for the percentages. Defaults to the components context's. */
+    locales?: string | readonly string[] | undefined;
+    /** Extra classes, merged last. */
+    class?: string | undefined;
+}
+/** One horizontal bar split into proportional, coloured segments: a vote share, a storage breakdown, a pass/fail split. */
+declare const SegmentBar: import("svelte").Component<Props, {}, "">;
+type SegmentBar = ReturnType<typeof SegmentBar>;
+export default SegmentBar;

package/dist/feedback/StatTile.svelte

@@ -0,0 +1,77 @@
+<!-- @component
+One daisyUI `stat`: a headline figure with its label and optional change line and description; wrap a row in `Stats`.
+-->
+<!--
+  StatTile — one daisyUI `stat`: a headline figure with its label, an optional
+  change line and an optional description. Wrap a row of them in `Stats`.
+
+  ARIA contract: no roles, on purpose. A stat is text, and daisyUI's
+  `stat-title` / `stat-value` / `stat-desc` order puts it in the reading order
+  a reader expects — label, then figure, then the change. What the markup
+  cannot convey is the DIRECTION of the change: the arrow that tells a sighted
+  reader "up" is `aria-hidden`, so the direction is also spelled out in
+  visually hidden text beside it, and the tone colour is never the only
+  carrier.
+
+  Numbers are formatted through `Intl` for the context's locale; pass a
+  pre-formatted string for anything that is not a plain count.
+-->
+<script lang="ts">import { Minus, TrendingDown, TrendingUp } from "@lucide/svelte";
+import { getComponentsContext } from "../context.svelte.js";
+let { label, value, delta, description, upLabel = "Up", downLabel = "Down", flatLabel = "No change", locales, figure, class: className, ...rest } = $props();
+const context = getComponentsContext();
+const chosenLocales = $derived(locales ?? context.locale());
+const countFormat = $derived(new Intl.NumberFormat(chosenLocales));
+const signedCount = $derived(new Intl.NumberFormat(chosenLocales, {
+	signDisplay: "exceptZero",
+	maximumFractionDigits: 0
+}));
+const signedDecimal = $derived(new Intl.NumberFormat(chosenLocales, {
+	signDisplay: "exceptZero",
+	maximumFractionDigits: 1
+}));
+const signedPercent = $derived(new Intl.NumberFormat(chosenLocales, {
+	style: "percent",
+	signDisplay: "exceptZero",
+	maximumFractionDigits: 1
+}));
+const formattedValue = $derived(typeof value === "number" ? countFormat.format(value) : value);
+const deltaText = $derived.by(() => {
+	if (delta === undefined) return "";
+	const unit = delta.unit ?? "count";
+	const number = unit === "count" ? signedCount.format(delta.value) : unit === "percent" ? signedPercent.format(delta.value / 100) : signedDecimal.format(delta.value);
+	return delta.label === undefined ? number : `${number} ${delta.label}`;
+});
+const direction = $derived(delta === undefined || delta.value === 0 ? "flat" : delta.value > 0 ? "up" : "down");
+const deltaClass = {
+	up: "text-success",
+	down: "text-error",
+	flat: "text-base-content/70"
+};
+</script>
+
+<div {...rest} class={['stat', className]}>
+  {#if figure}
+    <div class="stat-figure">{@render figure()}</div>
+  {/if}
+  <div class="stat-title">{label}</div>
+  <div class="stat-value tabular-nums">{formattedValue}</div>
+  {#if delta !== undefined}
+    <div class={['stat-desc flex items-center gap-1 tabular-nums', deltaClass[direction]]}>
+      {#if direction === 'up'}
+        <TrendingUp class="size-4" aria-hidden="true" />
+        <span class="sr-only">{upLabel}</span>
+      {:else if direction === 'down'}
+        <TrendingDown class="size-4" aria-hidden="true" />
+        <span class="sr-only">{downLabel}</span>
+      {:else}
+        <Minus class="size-4" aria-hidden="true" />
+        <span class="sr-only">{flatLabel}</span>
+      {/if}
+      <span>{deltaText}</span>
+    </div>
+  {/if}
+  {#if description !== undefined}
+    <div class="stat-desc">{description}</div>
+  {/if}
+</div>

package/dist/feedback/StatTile.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+/** The change line a `StatTile` shows under its value: a signed amount, how to render it, and trailing words. */
+export interface StatDelta {
+    /**
+     * The change. Positive is up. With `unit: 'percent'` it is read as a
+     * percentage — `3.2` renders as `+3.2%`.
+     */
+    readonly value: number;
+    /**
+     * How to render it: a whole count, a percentage, or a decimal whose unit
+     * the caller names in `label` (`'pts swing'`).
+     */
+    readonly unit?: 'count' | 'percent' | 'points' | undefined;
+    /** Trailing words, e.g. `swing` or `since April`. */
+    readonly label?: string | undefined;
+}
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** The `stat-title`. */
+    label: string;
+    /** The headline figure; a number is formatted as a count. */
+    value: string | number;
+    /** Change line under the value. */
+    delta?: StatDelta | undefined;
+    /** Plain description, rendered after the delta when both are present. */
+    description?: string | undefined;
+    /**
+     * Announced in place of the rising arrow.
+     * @defaultValue `'Up'`
+     */
+    upLabel?: string | undefined;
+    /**
+     * Announced in place of the falling arrow.
+     * @defaultValue `'Down'`
+     */
+    downLabel?: string | undefined;
+    /**
+     * Announced in place of the flat marker.
+     * @defaultValue `'No change'`
+     */
+    flatLabel?: string | undefined;
+    /** Locale(s) for the figures. Defaults to the components context's. */
+    locales?: string | readonly string[] | undefined;
+    /** Icon or sparkline in the `stat-figure` slot. */
+    figure?: Snippet<[]> | undefined;
+}
+/** One daisyUI `stat`: a headline figure with its label and optional change line and description; wrap a row in `Stats`. */
+declare const StatTile: import("svelte").Component<Props, {}, "">;
+type StatTile = ReturnType<typeof StatTile>;
+export default StatTile;

package/dist/feedback/Stats.svelte

@@ -0,0 +1,18 @@
+<!-- @component
+The daisyUI `stats` wrapper a row of `StatTile`s sits in, drawing the dividers between them.
+-->
+<!--
+  Stats — the daisyUI `stats` wrapper a row of `StatTile`s sits in. It is what
+  draws the dividers between tiles, so a lone tile still wants one.
+
+  No ARIA of its own: it is a grouping box around text. When a row of stats
+  needs a name (a dashboard with several), give it `aria-label` — the native
+  attributes spread — or put it inside a `Section` that already has a heading.
+-->
+<script lang="ts">import { statsOrientation } from "./sizes.js";
+let { orientation = "responsive", children, class: className, ...rest } = $props();
+</script>
+
+<div {...rest} class={['stats', statsOrientation[orientation], className]}>
+  {@render children()}
+</div>

package/dist/feedback/Stats.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type StatsOrientation } from './sizes.ts';
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Row, column, or stacked-then-row from the `sm` breakpoint up.
+     * @defaultValue `'responsive'`
+     */
+    orientation?: StatsOrientation | undefined;
+    /** The `StatTile`s. */
+    children: Snippet<[]>;
+}
+/** The daisyUI `stats` wrapper a row of `StatTile`s sits in, drawing the dividers between them. */
+declare const Stats: import("svelte").Component<Props, {}, "">;
+type Stats = ReturnType<typeof Stats>;
+export default Stats;

package/dist/feedback/Steps.svelte

@@ -0,0 +1,72 @@
+<!-- @component
+The stages of a multi-step flow as daisyUI `steps`, with the current one marked.
+-->
+<!--
+  Steps — a short, fixed sequence (a sign-up wizard, an order's fulfilment,
+  "Plan → Sow → Transplant → Harvest") where position and state are the
+  content. Unlike `Timeline`, which is dated, open-ended history.
+
+  Each step's state comes from its own `state`, or, when that is omitted,
+  from the list's `current` index: before it is complete, at it is current,
+  after it is upcoming. An explicit `state` always wins, so an `error` step
+  can sit in a `current`-driven wizard.
+
+  ARIA contract: an `<ol>` named by `label`, because order is the content.
+  Colour carries nothing on its own (WCAG 1.4.1): each step reads its label
+  followed by a visually hidden state ("Sow, Completed"). The marker, the
+  step number or a ✓ / ✕ glyph, is always a real `step-icon` span with
+  `aria-hidden`. Rendering one suppresses daisyUI's `::after` number, and
+  CSS generated content would otherwise join the accessible name. The
+  current step carries `aria-current="step"`: on its link in link mode, on
+  the `<li>` otherwise. Only steps with an `href` are links; whether an
+  upcoming step is navigable is the caller's call, not this component's.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+import { stepTone } from "../ui/tones.js";
+import { stepsOrientation } from "./sizes.js";
+let { items, label, current, orientation = "horizontal", tone = "primary", completeLabel = "Completed", currentLabel = "Current step", upcomingLabel = "Not started", errorLabel = "Error", marker, class: className, ...rest } = $props();
+const context = getComponentsContext();
+function stateOf(step, index) {
+	if (step.state !== undefined) return step.state;
+	if (current === undefined || index > current) return "upcoming";
+	return index < current ? "complete" : "current";
+}
+const stateLabels = $derived({
+	complete: completeLabel,
+	current: currentLabel,
+	upcoming: upcomingLabel,
+	error: errorLabel
+});
+const stateClasses = $derived({
+	complete: stepTone[tone],
+	current: stepTone[tone],
+	upcoming: "",
+	error: stepTone.error
+});
+const glyphs = {
+	complete: "✓",
+	error: "✕"
+};
+</script>
+
+<ol {...rest} aria-label={label} class={['steps', stepsOrientation[orientation], className]}>
+  {#each items as step, index (step.id)}
+    {@const state = stateOf(step, index)}
+    {@const ariaCurrent = state === 'current' ? 'step' : undefined}
+    <li
+      class={['step', stateClasses[state]]}
+      aria-current={step.href === undefined ? ariaCurrent : undefined}
+    >
+      <span class="step-icon" aria-hidden="true">
+        {#if marker}{@render marker(step, index)}{:else}{glyphs[state] ?? index + 1}{/if}
+      </span>
+      {#if step.href !== undefined}
+        <a href={context.href(step.href)} class="link link-hover" aria-current={ariaCurrent}>
+          {step.label}<span class="sr-only">, {stateLabels[state]}</span>
+        </a>
+      {:else}
+        <span>{step.label}<span class="sr-only">, {stateLabels[state]}</span></span>
+      {/if}
+    </li>
+  {/each}
+</ol>

package/dist/feedback/Steps.svelte.d.ts

@@ -0,0 +1,61 @@
+import type { Snippet } from 'svelte';
+import type { HTMLOlAttributes } from 'svelte/elements';
+import { type Tone } from '../ui/tones.ts';
+import { type StepsOrientation } from './sizes.ts';
+/** Where a step stands in the flow. */
+export type StepState = 'complete' | 'current' | 'upcoming' | 'error';
+/** One stage of a `Steps` list. */
+export interface StepItem {
+    /** Stable key for the step. */
+    readonly id: string;
+    /** The step's name, read first. */
+    readonly label: string;
+    /** Overrides the state derived from the list's `current` index. */
+    readonly state?: StepState | undefined;
+    /** Makes the step a link (to revisit it), resolved through the components context's `href`. */
+    readonly href?: string | undefined;
+}
+interface Props extends Omit<HTMLOlAttributes, 'children'> {
+    /** The steps, in order. */
+    items: readonly StepItem[];
+    /** Accessible name of the list, e.g. `'Checkout progress'`. */
+    label: string;
+    /**
+     * Index of the current step. Steps before it are complete and steps after
+     * it upcoming, unless a step sets its own `state`.
+     */
+    current?: number | undefined;
+    /** @defaultValue `'horizontal'` */
+    orientation?: StepsOrientation | undefined;
+    /**
+     * Tone of the complete and current steps.
+     * @defaultValue `'primary'`
+     */
+    tone?: Tone | undefined;
+    /**
+     * Read after a complete step's label.
+     * @defaultValue `'Completed'`
+     */
+    completeLabel?: string | undefined;
+    /**
+     * Read after the current step's label.
+     * @defaultValue `'Current step'`
+     */
+    currentLabel?: string | undefined;
+    /**
+     * Read after an upcoming step's label.
+     * @defaultValue `'Not started'`
+     */
+    upcomingLabel?: string | undefined;
+    /**
+     * Read after a failed step's label.
+     * @defaultValue `'Error'`
+     */
+    errorLabel?: string | undefined;
+    /** Custom marker content per step (an icon), rendered in the `aria-hidden` `step-icon`. */
+    marker?: Snippet<[StepItem, number]> | undefined;
+}
+/** The stages of a multi-step flow as daisyUI `steps`, with the current one marked. */
+declare const Steps: import("svelte").Component<Props, {}, "">;
+type Steps = ReturnType<typeof Steps>;
+export default Steps;

package/dist/feedback/Timeline.svelte

@@ -0,0 +1,86 @@
+<!-- @component
+A vertical daisyUI `timeline` of dated entries.
+-->
+<!--
+  Timeline — a vertical daisyUI `timeline` of dated entries: offices held,
+  releases shipped, a plant's life in a bed.
+
+  An `<ol>` because the order is the content: read out of sequence the list
+  means something else. Each entry shows its span on the start side, a marker
+  in the middle (filled for an open-ended, still-current entry, tinted with
+  the caller's colour token when given) and a `timeline-box` with the entry
+  itself.
+
+  ARIA contract: native list semantics plus an `aria-label` on the list, so a
+  reader hears what the sequence is before its length. The dash between the
+  two dates is `aria-hidden` and `toLabel` is read in its place — "May 2019 –
+  May 2022" is announced as a range, not a subtraction — and an open-ended
+  entry is introduced by `currentLabel` rather than by the filled marker
+  alone. Both markers are `aria-hidden`.
+
+  `colourToken` is a CSS custom-property NAME the app's theme declares; the
+  colour value itself never appears here. See `ui/colour-token.ts`.
+-->
+<script lang="ts">import { Circle, CircleDot } from "@lucide/svelte";
+import { getComponentsContext } from "../context.svelte.js";
+import { colourTokenStyle } from "../ui/colour-token.js";
+/** The custom property an entry's `colourToken` is bound to. */
+const TIMELINE_COLOUR_PROPERTY = "--timeline-colour";
+let { items, presentLabel = "present", toLabel = "to", currentLabel = "Current", label = "Timeline", item: itemBody, class: className, ...rest } = $props();
+const context = getComponentsContext();
+</script>
+
+<ol
+  {...rest}
+  aria-label={label}
+  class={['timeline timeline-vertical timeline-compact timeline-snap-icon', className]}
+>
+  {#each items as entry, index (entry.id)}
+    {@const current = entry.end === undefined}
+    <li style={colourTokenStyle(TIMELINE_COLOUR_PROPERTY, entry.colourToken)}>
+      {#if index > 0}<hr />{/if}
+      <div class="timeline-start text-base-content/70 mb-2 text-sm tabular-nums md:mb-0">
+        <time datetime={entry.start.dateTime}>{entry.start.label}</time>
+        <span aria-hidden="true">–</span>
+        <span class="sr-only">{toLabel}</span>
+        {#if entry.end === undefined}
+          <span>{presentLabel}</span>
+        {:else}
+          <time datetime={entry.end.dateTime}>{entry.end.label}</time>
+        {/if}
+      </div>
+      <div
+        class={[
+          'timeline-middle',
+          entry.colourToken === undefined
+            ? 'text-base-content/60'
+            : 'text-(--timeline-colour)',
+        ]}
+      >
+        {#if current}
+          <CircleDot class="size-5" aria-hidden="true" />
+          <span class="sr-only">{currentLabel}</span>
+        {:else}
+          <Circle class="size-5" aria-hidden="true" />
+        {/if}
+      </div>
+      <div class="timeline-end timeline-box">
+        {#if itemBody}
+          {@render itemBody(entry)}
+        {:else}
+          <p class="font-medium">
+            {#if entry.href !== undefined}
+              <a href={context.href(entry.href)} class="link link-hover">{entry.label}</a>
+            {:else}
+              {entry.label}
+            {/if}
+          </p>
+          {#if entry.subtitle !== undefined}
+            <p class="text-base-content/70 text-sm">{entry.subtitle}</p>
+          {/if}
+        {/if}
+      </div>
+      {#if index < items.length - 1}<hr />{/if}
+    </li>
+  {/each}
+</ol>

package/dist/feedback/Timeline.svelte.d.ts

@@ -0,0 +1,55 @@
+import type { Snippet } from 'svelte';
+import type { HTMLOlAttributes } from 'svelte/elements';
+/** One end of a `Timeline` entry's span: display text plus an optional machine-readable `datetime`. */
+export interface TimelineDate {
+    /** Display text, e.g. `March 1996`. */
+    readonly label: string;
+    /** Machine-readable `<time datetime>` value, e.g. `1996-03-02`. */
+    readonly dateTime?: string | undefined;
+}
+/** One dated entry of a `Timeline`: a label, a start, an optional end and link, and an optional theme colour. */
+export interface TimelineEntry {
+    /** Stable key for the entry. */
+    readonly id: string;
+    /** The entry itself — the line in the box. */
+    readonly label: string;
+    /** Second line under it. */
+    readonly subtitle?: string | undefined;
+    readonly start: TimelineDate;
+    /** Omit for an open-ended, still-current entry. */
+    readonly end?: TimelineDate | undefined;
+    /** Links the entry's label, through the components context. */
+    readonly href?: string | undefined;
+    /** A CSS custom-property name the app's theme declares (`--party-alp`). */
+    readonly colourToken?: string | undefined;
+}
+interface Props extends Omit<HTMLOlAttributes, 'children'> {
+    /** The entries, in display order. */
+    items: readonly TimelineEntry[];
+    /**
+     * Shown in place of a missing `end`.
+     * @defaultValue `'present'`
+     */
+    presentLabel?: string | undefined;
+    /**
+     * Read between the two dates of a span.
+     * @defaultValue `'to'`
+     */
+    toLabel?: string | undefined;
+    /**
+     * Introduces an open-ended entry.
+     * @defaultValue `'Current'`
+     */
+    currentLabel?: string | undefined;
+    /**
+     * Accessible name of the list.
+     * @defaultValue `'Timeline'`
+     */
+    label?: string | undefined;
+    /** Replaces the default box body. */
+    item?: Snippet<[TimelineEntry]> | undefined;
+}
+/** A vertical daisyUI `timeline` of dated entries. */
+declare const Timeline: import("svelte").Component<Props, {}, "">;
+type Timeline = ReturnType<typeof Timeline>;
+export default Timeline;

package/dist/feedback/Toaster.svelte

@@ -0,0 +1,78 @@
+<!-- @component
+The notification region, plus the context that lets any descendant push a toast into it (`getToaster().add({ title: 'Saved' })`).
+-->
+<!--
+  Toaster — the notification region, plus the context that lets any descendant
+  push into it (`getToaster().add({ title: 'Saved' })`).
+
+  Hand-rolled rather than on a bits-ui primitive, deliberately: there is no
+  interaction to get right. A toast takes no focus, traps nothing and has no
+  keyboard contract of its own — it is a live region with a queue and a timer,
+  and the queue is a plain rune.
+
+  ARIA contract: ONE `aria-live="polite"` region, named by `regionLabel`, and
+  nothing live inside it. The tempting `role="status"` on each toast is the
+  bug this replaces: a status inside a live region makes assistive technology
+  announce the same text twice, and a region that is only created when the
+  first toast arrives is often not announced at all — so the region is in the
+  document from mount, empty, and only its contents change. Dismiss is a
+  labelled text button, not a bare glyph.
+
+  Timers are held in a map and cleared on destroy: a toast that outlives its
+  page would otherwise write to a component that is gone.
+-->
+<script lang="ts">import { alertTone } from "../ui/tones.js";
+import Button from "../ui/Button.svelte";
+import { toastPosition } from "./sizes.js";
+import { setToaster } from "./toaster.js";
+let { position = "bottom-end", regionLabel = "Notifications", dismissLabel = "Dismiss", durationMs = 6e3, class: className, children } = $props();
+let toasts = $state([]);
+let nextId = 1;
+const timers = new Map();
+const dismiss = (id) => {
+	const timer = timers.get(id);
+	if (timer !== undefined) {
+		clearTimeout(timer);
+		timers.delete(id);
+	}
+	toasts = toasts.filter((toast) => toast.id !== id);
+};
+const api = {
+	add(toast, duration = durationMs) {
+		const id = nextId++;
+		toasts = [...toasts, {
+			...toast,
+			tone: toast.tone ?? "info",
+			id
+		}];
+		if (duration > 0) timers.set(id, setTimeout(() => dismiss(id), duration));
+		return id;
+	},
+	dismiss
+};
+setToaster(api);
+$effect(() => () => {
+	for (const timer of timers.values()) clearTimeout(timer);
+	timers.clear();
+});
+</script>
+
+{@render children()}
+
+<div
+  class={['toast z-50', toastPosition[position], className]}
+  aria-live="polite"
+  aria-label={regionLabel}
+>
+  {#each toasts as toast (toast.id)}
+    <div class={['alert items-start shadow-lg', alertTone[toast.tone]]}>
+      <div>
+        <p class="font-semibold">{toast.title}</p>
+        {#if toast.description !== undefined}
+          <p class="text-sm">{toast.description}</p>
+        {/if}
+      </div>
+      <Button variant="ghost" size="sm" onclick={() => dismiss(toast.id)}>{dismissLabel}</Button>
+    </div>
+  {/each}
+</div>

package/dist/feedback/Toaster.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import { type ToastPosition } from './sizes.ts';
+interface Props {
+    /**
+     * Which corner the stack grows from.
+     * @defaultValue `'bottom-end'`
+     */
+    position?: ToastPosition | undefined;
+    /**
+     * Accessible name of the live region.
+     * @defaultValue `'Notifications'`
+     */
+    regionLabel?: string | undefined;
+    /**
+     * Accessible name of every toast's dismiss button.
+     * @defaultValue `'Dismiss'`
+     */
+    dismissLabel?: string | undefined;
+    /**
+     * How long a toast lives when `add` is given no duration. `0` = sticky.
+     * @defaultValue `6_000`
+     */
+    durationMs?: number | undefined;
+    /** Extra classes on the region. */
+    class?: string | undefined;
+    /** The application. Rendered above the region. */
+    children: Snippet<[]>;
+}
+/** The notification region, plus the context that lets any descendant push a toast into it (`getToaster().add({ title: 'Saved' })`). */
+declare const Toaster: import("svelte").Component<Props, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
+export default Toaster;