@dorsk/tsumikit 0.38.0 → 0.39.0

package/dist/components/molecules/RadioGroup.svelte

@@ -6,6 +6,8 @@
 		description?: string;
 		note?: string;
 		disabled?: boolean;
+		/** `swatch` variant: any CSS colour (or var()). */
+		color?: string;
 	}
 </script>
 
@@ -30,7 +32,8 @@
 		value?: string;
 		name?: string;
 		label: string;
-		variant?: 'list' | 'rows';
+		/** `swatch` renders each option as a colour chip with the label as its name. */
+		variant?: 'list' | 'rows' | 'swatch';
 		action?: Snippet<[RadioOption]>;
 		below?: Snippet<[RadioOption]>;
 		class?: string;
@@ -42,11 +45,17 @@
 	aria-label={label}
 	class="radio-group {klass}"
 	class:rows={variant === 'rows'}
+	class:swatches={variant === 'swatch'}
 	data-tsu="RadioGroup"
 	data-variant={variant}
 >
 	{#each options as o (o.value)}
-		{#if variant === 'rows'}
+		{#if variant === 'swatch'}
+			<label class="swatch" class:disabled={o.disabled} title={o.label}>
+				<input type="radio" {name} value={o.value} bind:group={value} disabled={o.disabled} aria-label={o.label} />
+				<span class="swatch-chip" aria-hidden="true" style="--swatch: {o.color ?? 'var(--accent)'}"></span>
+			</label>
+		{:else if variant === 'rows'}
 			<div class="row-wrap">
 				<div class="row" class:selected={o.value === value} class:disabled={o.disabled}>
 					<label class="radio">
@@ -215,4 +224,35 @@
 	.below:empty {
 		display: none;
 	}
+	.swatches {
+		flex-direction: row;
+		flex-wrap: wrap;
+		gap: var(--sp-2);
+	}
+	.swatch {
+		position: relative;
+		display: inline-flex;
+		cursor: pointer;
+	}
+	.swatch.disabled {
+		opacity: 0.45;
+		cursor: not-allowed;
+	}
+	.swatch-chip {
+		width: 1.6rem;
+		height: 1.6rem;
+		border-radius: var(--r-pill);
+		background: var(--swatch);
+		border: 2px solid transparent;
+		box-shadow: 0 0 0 1px var(--border-strong);
+		transition: box-shadow 0.12s var(--ease);
+	}
+	.swatch input:checked + .swatch-chip {
+		border-color: var(--bg);
+		box-shadow: 0 0 0 2px var(--accent);
+	}
+	.swatch input:focus-visible + .swatch-chip {
+		outline: var(--focus-ring);
+		outline-offset: 2px;
+	}
 </style>

package/dist/components/molecules/RadioGroup.svelte.d.ts

@@ -5,6 +5,8 @@ export interface RadioOption {
     description?: string;
     note?: string;
     disabled?: boolean;
+    /** `swatch` variant: any CSS colour (or var()). */
+    color?: string;
 }
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
@@ -12,7 +14,8 @@ type $$ComponentProps = {
     value?: string;
     name?: string;
     label: string;
-    variant?: 'list' | 'rows';
+    /** `swatch` renders each option as a colour chip with the label as its name. */
+    variant?: 'list' | 'rows' | 'swatch';
     action?: Snippet<[RadioOption]>;
     below?: Snippet<[RadioOption]>;
     class?: string;

package/dist/components/molecules/SectionHeader.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { canonicalTone, type Tone } from '../../tone';
 	// Section / group header: heading + optional subtitle, icon, count, hue
 	// swatch and right-aligned actions on one wrapping row. `divider` underlines
 	// it, `sticky` pins it under the app header and publishes its height as
@@ -11,7 +12,6 @@
 	import Icon, { type IconName } from '../atoms/Icon.svelte';
 	import Text from '../atoms/Text.svelte';
 
-	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 	type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 
 	let {
@@ -80,7 +80,7 @@
 	bind:this={el}
 	bind:offsetHeight={height}
 	data-tsu="SectionHeader"
-	class="section-header sh-{tone} {klass}"
+	class="section-header sh-{canonicalTone(tone)} {klass}"
 	class:sh-divider={divider}
 	class:sh-group={variant === 'group'}
 	class:sh-sticky={sticky}
@@ -150,6 +150,9 @@
 	.sh-info {
 		--sh-tone: var(--info);
 	}
+	.sh-accent {
+		--sh-tone: var(--accent);
+	}
 	.sh-row {
 		display: flex;
 		align-items: center;

package/dist/components/molecules/SectionHeader.svelte.d.ts

@@ -1,6 +1,6 @@
+import { type Tone } from '../../tone';
 import type { Snippet } from 'svelte';
 import { type IconName } from '../atoms/Icon.svelte';
-type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
 type $$ComponentProps = {
     title?: string;

package/dist/components/molecules/SegmentedControl.svelte

@@ -13,6 +13,7 @@
 </script>
 
 <script lang="ts">
+	import type { ControlSize } from '../../size';
 	// Single-select segmented control. One token-driven row of options covering
 	// the two repeated redesign controls:
 	//   • filter pills  — label + optional count badge ("All 742 / Missing 120")
@@ -27,11 +28,15 @@
 	let {
 		options,
 		value = $bindable(),
+		onchange,
+		justify,
+		wrap = false,
 		// `icon` packs the segments into compact square buttons (label hidden as an
 		// accessible name only); `pill` keeps the labelled filter-pill layout.
 		variant = 'pill',
 		size = 'md',
 		control = false,
+		box = false,
 		label = 'Options',
 		// `mobile` hides segment labels below the mobile breakpoint, collapsing
 		// labelled segments to centered icon-only squares (aria-label preserved).
@@ -46,11 +51,20 @@
 	}: {
 		options: SegmentOption[];
 		value?: string;
+		/** Fires after a selection (click or keyboard). */
+		onchange?: (value: string) => void;
+		/** Pin the control to the start/end of a flex row. */
+		justify?: 'start' | 'end';
+		/** Allow segments to wrap onto multiple lines. */
+		wrap?: boolean;
 		variant?: 'pill' | 'icon';
-		size?: 'sm' | 'md';
+		size?: ControlSize;
 		/** Adopt the shared `--control-height` toolbar contract (like Popover/Button
 		 *  `control`) so the whole segmented control height-matches its siblings. */
 		control?: boolean;
+		/** Adopt `--control-height-default` so an icon toggle lines up with
+		 *  `Button square` / `box` siblings. */
+		box?: boolean;
 		label?: string;
 		collapseLabels?: 'never' | 'mobile' | 'container';
 		/** Single non-wrapping row that scrolls horizontally (scrollbar hidden). */
@@ -75,6 +89,7 @@
 	function select(val: string, focus = false) {
 		if (options.find((o) => o.value === val)?.disabled) return;
 		value = val;
+		onchange?.(val);
 		if (focus) {
 			queueMicrotask(() =>
 				listEl?.querySelector<HTMLButtonElement>(`#${baseId}-${val}`)?.focus()
@@ -97,6 +112,10 @@
 	tabindex="-1"
 	class="seg seg-{variant} seg-{size} {klass}"
 	class:seg-control={control}
+	class:seg-box={box}
+	class:seg-wrap={wrap}
+	class:justify-start={justify === 'start'}
+	class:justify-end={justify === 'end'}
 	class:seg-collapse-mobile={collapseLabels === 'mobile'}
 	class:collapse-container={collapseLabels === 'container'}
 	class:seg-scroll={scroll}
@@ -143,6 +162,15 @@
 	.seg-icon {
 		border-radius: var(--r-md);
 	}
+	.seg-wrap {
+		flex-wrap: wrap;
+	}
+	.justify-start {
+		margin-inline-end: auto;
+	}
+	.justify-end {
+		margin-inline-start: auto;
+	}
 	.seg-scroll {
 		flex: 1 0 100%;
 		flex-wrap: nowrap;
@@ -206,6 +234,13 @@
 	.seg-control .seg-item {
 		height: 100%;
 	}
+	.seg-box {
+		height: var(--control-height-default);
+		min-height: var(--control-height-default);
+	}
+	.seg-box .seg-item {
+		height: 100%;
+	}
 	.seg-icon .seg-item {
 		gap: 0;
 		padding: 0.35rem;

package/dist/components/molecules/SegmentedControl.svelte.d.ts

@@ -9,15 +9,25 @@ export interface SegmentOption {
     /** Greyed out, not selectable, skipped by keyboard navigation. */
     disabled?: boolean;
 }
+import type { ControlSize } from '../../size';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     options: SegmentOption[];
     value?: string;
+    /** Fires after a selection (click or keyboard). */
+    onchange?: (value: string) => void;
+    /** Pin the control to the start/end of a flex row. */
+    justify?: 'start' | 'end';
+    /** Allow segments to wrap onto multiple lines. */
+    wrap?: boolean;
     variant?: 'pill' | 'icon';
-    size?: 'sm' | 'md';
+    size?: ControlSize;
     /** Adopt the shared `--control-height` toolbar contract (like Popover/Button
      *  `control`) so the whole segmented control height-matches its siblings. */
     control?: boolean;
+    /** Adopt `--control-height-default` so an icon toggle lines up with
+     *  `Button square` / `box` siblings. */
+    box?: boolean;
     label?: string;
     collapseLabels?: 'never' | 'mobile' | 'container';
     /** Single non-wrapping row that scrolls horizontally (scrollbar hidden). */

package/dist/components/molecules/SelectButton.svelte

@@ -4,13 +4,19 @@
 	// affordance. Used by the header font-size + theme pickers and the drawer
 	// font-size picker (CCT-250 #5 / CCT-297 #11). Composes the Button primitive
 	// for the base look.
+	import type { Snippet } from 'svelte';
 	import Button from '../atoms/Button.svelte';
+	import Icon, { type IconName } from '../atoms/Icon.svelte';
 	import Select from '../atoms/Select.svelte';
 
 	type Option = { value: string; label: string };
 
 	let {
 		glyph,
+		icon,
+		iconChildren,
+		variant = 'square',
+		active = false,
 		label,
 		title,
 		value,
@@ -19,12 +25,30 @@
 		onchange,
 		box,
 		hitArea = 'auto',
+		grow = false,
+		shrink = true,
+		block = false,
 		class: klass = '',
 		...rest
 	}: {
 		// Visible content of the button (a letter like "A" or an emoji icon).
-		glyph: string;
+		glyph?: string;
+		/** Registry glyph, used instead of `glyph`. */
+		icon?: IconName;
+		/** Raw SVG children for an off-registry glyph. */
+		iconChildren?: Snippet;
+		/** `row` is a full-width, left-aligned row showing `label` beside the glyph
+		 *  (overflow menus); `square` is the compact icon box. */
+		variant?: 'square' | 'row';
+		/** Accent tint when the picker's current value is "on". */
+		active?: boolean;
 		label: string;
+		/** Fill the free space of a flex row (`flex: 1 1 0`). */
+		grow?: boolean;
+		/** `false` pins the box (`flex: none`) so a flex row cannot squeeze it. */
+		shrink?: boolean;
+		/** Full-width block. */
+		block?: boolean;
 		title?: string;
 		value: string;
 		// Flat option list. Ignored when `groups` is given.
@@ -43,9 +67,21 @@
 
 <!-- The wrapper (owned here, so styled scoped) is the positioning context that
      clips the transparent overlaid <select>; the icon Button shows through. -->
-<span class="select-button {klass}" data-tsu="SelectButton" {...rest}>
-	<Button variant="ghost" icon {box} {hitArea} {title} aria-label={label}>
-		<span aria-hidden="true">{glyph}</span>
+<span
+	class="select-button {klass}"
+	class:row={variant === 'row'}
+	class:active
+	data-tsu="SelectButton"
+	{...rest}
+	class:grow={grow}
+	class:no-shrink={!shrink}
+	class:block={block || variant === 'row'}
+>
+	<Button variant="ghost" icon={variant === 'square'} block={variant === 'row'} {box} {hitArea} {title} aria-label={label}>
+		<span aria-hidden="true" class="sb-glyph">
+			{#if iconChildren}<Icon>{@render iconChildren()}</Icon>{:else if icon}<Icon name={icon} />{:else}{glyph}{/if}
+		</span>
+		{#if variant === 'row'}<span aria-hidden="true" class="sb-label">{label}</span>{/if}
 		<Select
 			variant="ghost"
 			aria-label={label}
@@ -70,6 +106,17 @@
 </span>
 
 <style>
+	.grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+	.no-shrink {
+		flex: none;
+	}
+	.block {
+		display: flex;
+		width: 100%;
+	}
 	.select-button {
 		position: relative;
 		display: inline-flex;
@@ -77,4 +124,17 @@
 		border-radius: var(--r-md);
 		font-weight: var(--fw-bold);
 	}
+	.select-button.active {
+		color: var(--accent);
+	}
+	.select-button.row :global(.btn) {
+		justify-content: flex-start;
+		gap: var(--sp-2);
+		width: 100%;
+		font-weight: var(--fw-medium);
+	}
+	.sb-glyph {
+		display: inline-flex;
+		align-items: center;
+	}
 </style>

package/dist/components/molecules/SelectButton.svelte.d.ts

@@ -1,10 +1,27 @@
+import type { Snippet } from 'svelte';
+import { type IconName } from '../atoms/Icon.svelte';
 type Option = {
     value: string;
     label: string;
 };
 type $$ComponentProps = {
-    glyph: string;
+    glyph?: string;
+    /** Registry glyph, used instead of `glyph`. */
+    icon?: IconName;
+    /** Raw SVG children for an off-registry glyph. */
+    iconChildren?: Snippet;
+    /** `row` is a full-width, left-aligned row showing `label` beside the glyph
+     *  (overflow menus); `square` is the compact icon box. */
+    variant?: 'square' | 'row';
+    /** Accent tint when the picker's current value is "on". */
+    active?: boolean;
     label: string;
+    /** Fill the free space of a flex row (`flex: 1 1 0`). */
+    grow?: boolean;
+    /** `false` pins the box (`flex: none`) so a flex row cannot squeeze it. */
+    shrink?: boolean;
+    /** Full-width block. */
+    block?: boolean;
     title?: string;
     value: string;
     options?: Option[];

package/dist/components/molecules/Tabs.svelte

@@ -5,10 +5,13 @@
 		icon?: import('../atoms/Icon.svelte').IconName;
 		/** Greyed out, not selectable, skipped by keyboard navigation. */
 		disabled?: boolean;
+		/** Trailing count badge. */
+		count?: number | string;
 	}
 </script>
 
 <script lang="ts">
+	import Badge from '../atoms/Badge.svelte';
 	// WAI-ARIA tabs. A `tablist` of `tab`s controlling a single `tabpanel`.
 	// Follows the automatic-activation pattern: ←/→ (and Home/End) move selection
 	// and reveal the panel in one step; roving tabindex keeps exactly one tab in
@@ -21,12 +24,20 @@
 		tabs,
 		value = $bindable(),
 		label = 'Tabs',
-		panel
+		panel,
+		class: klass = '',
+		style: styleProp = '',
+		panelClass = '',
+		panelPadding = 'md',
 	}: {
 		tabs: TabItem[];
 		value?: string;
 		label?: string;
 		panel: Snippet<[string]>;
+		class?: string;
+		style?: string;
+		panelClass?: string;
+		panelPadding?: 'none' | 'sm' | 'md';
 	} = $props();
 
 	// Default to the first selectable tab when no value is supplied.
@@ -73,7 +84,7 @@
 	}
 </script>
 
-<div class="tabs" data-tsu="Tabs">
+<div class="tabs {klass}" style={styleProp} data-tsu="Tabs">
 	<div bind:this={listEl} role="tablist" aria-label={label} tabindex="-1" class="tablist" {onkeydown}>
 		{#each tabs as t (t.id)}
 			<button
@@ -90,10 +101,11 @@
 			>
 				{#if t.icon}<Icon name={t.icon} />{/if}
 				<span>{t.label}</span>
+				{#if t.count !== undefined}<Badge size="sm" tone={value === t.id ? 'accent' : 'neutral'}>{t.count}</Badge>{/if}
 			</button>
 		{/each}
 	</div>
-	<div role="tabpanel" id="{baseId}-panel" tabindex="0" class="tabpanel">
+	<div role="tabpanel" id="{baseId}-panel" tabindex="0" class="tabpanel {panelClass}" class:pad-none={panelPadding === 'none'} class:pad-sm={panelPadding === 'sm'}>
 		{#if value !== undefined}{@render panel(value)}{/if}
 	</div>
 </div>
@@ -139,6 +151,12 @@
 	.tabpanel {
 		padding-top: var(--sp-4);
 	}
+	.tabpanel.pad-sm {
+		padding-top: var(--sp-2);
+	}
+	.tabpanel.pad-none {
+		padding-top: 0;
+	}
 	.tabpanel:focus-visible {
 		outline: 2px solid var(--accent);
 		outline-offset: 2px;

package/dist/components/molecules/Tabs.svelte.d.ts

@@ -4,6 +4,8 @@ export interface TabItem {
     icon?: import('../atoms/Icon.svelte').IconName;
     /** Greyed out, not selectable, skipped by keyboard navigation. */
     disabled?: boolean;
+    /** Trailing count badge. */
+    count?: number | string;
 }
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
@@ -11,6 +13,10 @@ type $$ComponentProps = {
     value?: string;
     label?: string;
     panel: Snippet<[string]>;
+    class?: string;
+    style?: string;
+    panelClass?: string;
+    panelPadding?: 'none' | 'sm' | 'md';
 };
 declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Tabs = ReturnType<typeof Tabs>;

package/dist/components/molecules/Timestamp.svelte

@@ -39,7 +39,10 @@
 		mono = false,
 		tone = 'muted',
 		size,
-		tickMs = 30_000
+		short = false,
+		tickMs = 30_000,
+		class: klass = '',
+		style: styleProp = '',
 	}: {
 		/** The instant: a Date, epoch milliseconds, or an ISO/parseable string.
 		 *  null/undefined (or unparseable input) renders an inert "—". */
@@ -68,8 +71,12 @@
 		/** Font size, mirroring <Text> sizes (maps to --fs-* tokens). Omit to
 		 *  inherit the surrounding size. */
 		size?: Size;
+		/** Relative mode without the "ago" suffix ("6m", "2h", "3d"). */
+		short?: boolean;
 		/** How often relative mode re-renders so "3m ago" stays fresh. */
 		tickMs?: number;
+		class?: string;
+		style?: string;
 	} = $props();
 
 	// User's in-popover choice overrides the `mode` prop; until they pick, we
@@ -88,11 +95,11 @@
 	});
 
 	const date = $derived(toDate(value));
-	const label = $derived(formatTimestamp(value, current, now, utc, precision));
+	const label = $derived(formatTimestamp(value, current, now, utc, precision, short));
 	// datetime= wants a valid ISO string; omit it entirely on bad input.
 	const machine = $derived(date ? toISO(date) : undefined);
 	const showPopover = $derived(details || selectable);
-	const cls = $derived(`ts tone-${tone}${mono ? ' mono' : ''}`);
+	const cls = $derived(`ts tone-${tone}${mono ? ' mono' : ''} ${klass}`);
 	// Size maps straight onto the --fs-* scale; null leaves font-size unset so the
 	// timestamp inherits its surrounding run.
 	const sizeVar = $derived(size ? `var(--fs-${size})` : null);
@@ -121,11 +128,11 @@
 
 {#if !date}
 	<!-- Unparseable input: degrade to an inert dash rather than empty text. -->
-	<time class="{cls} ts-invalid" data-tsu="Timestamp" style:font-size={sizeVar}>—</time>
+	<time class="{cls} ts-invalid" data-tsu="Timestamp" style={styleProp} style:font-size={sizeVar}>—</time>
 {:else if showPopover}
 	<Popover label="Timestamp details" placement="bottom-start" bare>
 		{#snippet trigger()}
-			<time class="{cls} ts-trigger" data-tsu="Timestamp" style:font-size={sizeVar} datetime={machine}>{label}</time>
+			<time class="{cls} ts-trigger" data-tsu="Timestamp" style={styleProp} style:font-size={sizeVar} datetime={machine}>{label}</time>
 		{/snippet}
 		<div class="ts-panel">
 			{#if selectable}
@@ -152,7 +159,7 @@
 		</div>
 	</Popover>
 {:else}
-	<time class={cls} data-tsu="Timestamp" style:font-size={sizeVar} datetime={machine}>{label}</time>
+	<time class={cls} data-tsu="Timestamp" style={styleProp} style:font-size={sizeVar} datetime={machine}>{label}</time>
 {/if}
 
 <style>

package/dist/components/molecules/Timestamp.svelte.d.ts

@@ -29,8 +29,12 @@ type $$ComponentProps = {
     /** Font size, mirroring <Text> sizes (maps to --fs-* tokens). Omit to
      *  inherit the surrounding size. */
     size?: Size;
+    /** Relative mode without the "ago" suffix ("6m", "2h", "3d"). */
+    short?: boolean;
     /** How often relative mode re-renders so "3m ago" stays fresh. */
     tickMs?: number;
+    class?: string;
+    style?: string;
 };
 declare const Timestamp: import("svelte").Component<$$ComponentProps, {}, "">;
 type Timestamp = ReturnType<typeof Timestamp>;

package/dist/components/molecules/Toaster.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	// Renders the toast queue in a bottom-centered, polite live region. Mount once
-	// near the app root. The stack lives in a manual popover so it paints in the
+	// Renders the toast queue bottom-centered in two live regions: polite for
+	// ok/info/neutral, assertive (role=alert) for errors. Mount once near the
+	// app root. The stack lives in a manual popover so it paints in the
 	// top layer above an open Modal <dialog>; without the Popover API the
 	// attribute is ignored and the fixed/z-index positioning applies instead.
 	import { toasts } from '../../stores/toast.svelte';
@@ -8,7 +9,11 @@
 	import Card from '../atoms/Card.svelte';
 	import Icon from '../atoms/Icon.svelte';
 
+	let { class: klass = '', style: styleProp = '' }: { class?: string; style?: string } = $props();
+
 	let el: HTMLDivElement | undefined = $state();
+	const polite = $derived(toasts.items.filter((t) => t.tone !== 'error'));
+	const assertive = $derived(toasts.items.filter((t) => t.tone === 'error'));
 
 	$effect(() => {
 		if (!el || typeof el.showPopover !== 'function') return;
@@ -19,46 +24,51 @@
 	});
 </script>
 
-<div
-	class="toaster"
-	bind:this={el}
-	popover="manual"
-	role="status"
-	aria-live="polite"
-	aria-relevant="additions"
-	data-tsu="Toaster"
->
-	{#each toasts.items as t (t.id)}
-		{#if t.action}
-			<Card
-				as="div"
-				surface="raised"
-				class="toast"
-				tone={t.tone === 'ok' ? 'ok' : t.tone === 'error' ? 'danger' : t.tone === 'info' ? 'info' : undefined}
-			>
-				<button type="button" class="toast-text" onclick={() => toasts.dismiss(t.id)}>
-					{#if t.tone === 'ok'}<Icon name="check" />{:else if t.tone === 'error'}<Icon name="warning" />{:else if t.tone === 'info'}<Icon name="info" />{/if}
-					<span class="msg">{t.message}</span>
-				</button>
-				<Button size="sm" variant="ghost" loading={t.pending} onclick={() => toasts.act(t.id)}>
-					{t.action.label}
-				</Button>
-			</Card>
-		{:else}
-			<Card
-				as="button"
-				surface="raised"
-				class="toast"
-				tone={t.tone === 'ok' ? 'ok' : t.tone === 'error' ? 'danger' : t.tone === 'info' ? 'info' : undefined}
+{#snippet toast(t: (typeof toasts.items)[number])}
+	{@const tone = t.tone === 'ok' ? 'ok' : t.tone === 'error' ? 'danger' : t.tone === 'info' ? 'info' : undefined}
+	{#if t.action}
+		<Card as="div" surface="raised" class="toast" {tone}>
+			<button
 				type="button"
+				class="toast-text"
+				aria-label="Dismiss: {t.message}"
 				onclick={() => toasts.dismiss(t.id)}
 			>
-				{#if t.tone === 'ok'}<Icon name="check" />{:else if t.tone === 'error'}<Icon name="warning" />{:else if t.tone === 'info'}<Icon name="info" />{/if}
+				<span aria-hidden="true" class="toast-icon">
+					{#if t.tone === 'ok'}<Icon name="check" />{:else if t.tone === 'error'}<Icon name="warning" />{:else if t.tone === 'info'}<Icon name="info" />{/if}
+				</span>
 				<span class="msg">{t.message}</span>
-				<Icon name="x" />
-			</Card>
-		{/if}
-	{/each}
+			</button>
+			<Button size="sm" variant="ghost" loading={t.pending} onclick={() => toasts.act(t.id)}>
+				{t.action.label}
+			</Button>
+		</Card>
+	{:else}
+		<Card
+			as="button"
+			surface="raised"
+			class="toast"
+			{tone}
+			type="button"
+			aria-label="Dismiss: {t.message}"
+			onclick={() => toasts.dismiss(t.id)}
+		>
+			<span aria-hidden="true" class="toast-icon">
+				{#if t.tone === 'ok'}<Icon name="check" />{:else if t.tone === 'error'}<Icon name="warning" />{:else if t.tone === 'info'}<Icon name="info" />{/if}
+			</span>
+			<span class="msg">{t.message}</span>
+			<span aria-hidden="true" class="toast-icon"><Icon name="x" /></span>
+		</Card>
+	{/if}
+{/snippet}
+
+<div class="toaster {klass}" style={styleProp} bind:this={el} popover="manual" data-tsu="Toaster">
+	<div class="region" role="status" aria-live="polite">
+		{#each polite as t (t.id)}{@render toast(t)}{/each}
+	</div>
+	<div class="region" role="alert" aria-live="assertive">
+		{#each assertive as t (t.id)}{@render toast(t)}{/each}
+	</div>
 </div>
 
 <style>
@@ -84,6 +94,12 @@
 	.toaster:not(:popover-open) {
 		display: none;
 	}
+	.region {
+		display: contents;
+	}
+	.toast-icon {
+		display: inline-flex;
+	}
 	.toaster :global(.toast) {
 		pointer-events: auto;
 		display: flex;