@dorsk/tsumikit 0.20.0 → 0.22.0

package/README.md

@@ -69,8 +69,12 @@ import { Button, Field, Input, Modal, ThemePicker } from '@dorsk/tsumikit';
 ## Components
 
 **Atoms:** Text, Heading, Button, Input, Textarea, Select, Switch, Checkbox,
-Slider, Progress, Card (`tone` tints the surface for inline banners), Badge, Dot, Link, Icon (open registry — pass a
-`children` snippet for any custom SVG).
+Slider, Progress, Card (`tone` tints the surface for inline banners), Badge
+(`tone` semantic palette or `color` for any CSS colour, `size` xs/sm/md, `dot`,
+`icon`, `numeric`, `truncate`, `variant="text"`; all tints derive from
+`--badge-tone`), Dot (`ring` dark halo over artwork), Link (`tone`, `underline`
+always/hover/none, `align`), Icon (open registry — pass a `children` snippet for
+any custom SVG).
 
 **Molecules:** Field, IconButton, SelectButton, Toggle, OptionButton, Modal,
 Popover, Menu, Tabs, RadioGroup, Tooltip, Accordion, CopyButton, FileButton,
@@ -79,11 +83,26 @@ Dropzone, CodeBlock, Callout, EmptyState, Toaster, ThemePicker, FontScalePicker.
 **Organisms:** DataTable (generic `<T>`, typed columns + cell snippets).
 
 **Layouts:** AppShell (responsive header/sidebar/main/footer — persistent
-sidebar on desktop, overlay drawer on mobile, optionally resizable), NavItem
+sidebar on desktop, overlay drawer on mobile, optionally resizable;
+`layout="sidebar-full"` runs the sidebar the full height with the header over
+the content column only, `stickySidebar` pins it to the viewport, and
+`sidebarPadding="none" | "sm" | "md"` sets the aside gutter — the header and its
+children are `min-width: 0` so a wide title/actions row can't widen the grid on
+mobile), NavItem
 (collapses to an icon rail when the sidebar is narrow), Container, Stack
 (vertical), Cluster (wrapping row), AutoGrid (intrinsically responsive columns —
 no media/container query needed).
 
+### Container
+
+`size` caps the column (`--content-max` by default; `size="none"` fills the parent),
+`gutter` overrides the `--sp-4` inline padding (safe-area insets still win),
+`align="start"` drops the centering. `fullWidth` is a *viewport* breakout for
+edge-to-edge sections — inside AppShell's main column use `size="none"` instead;
+`inset="<left> <right>"` keeps a `fullWidth` container clear of docked panels.
+Children can bleed to the column edge with
+`margin-inline: calc(-1 * var(--container-gutter))`.
+
 ### Stacked distribution + legend
 
 `SegmentedProgress mode="stacked"` turns the bar into one shared track whose slice
@@ -135,6 +154,13 @@ Use the `.cq-*` utilities (`.cq-hide`, `.cq-stack`, `.cq-truncate`,
 you drag the sidebar down to that icon rail (width persisted).
 
 **Stores:** `theme`, `toasts`, `fontScale` (opt-in). **Actions:** `autoresize`.
+
+`toasts.show(message, { tone, duration, action })` plus the `ok`/`error`/`info`
+shorthands (tones `neutral|ok|error|info`; `danger` aliases `error`). An `action`
+(`{ label, run }`) renders a button; the toast shows a loading state while `run`
+settles, then dismisses, and action toasts stay 7s instead of 4s (`duration: 0` is
+sticky). `Toaster` renders in the browser top layer (`popover="manual"`), so toasts
+paint above an open `Modal`; `--toast-max-width` (28rem) caps the stack.
 **Helpers:** `copyToClipboard(text)` — async Clipboard API with an
 insecure-context fallback; returns whether it succeeded.
 

package/dist/components/atoms/Badge.svelte

@@ -1,23 +1,43 @@
 <script lang="ts">
 	// Inline label primitive — the project's single pill. Covers three jobs via
 	// props rather than separate components:
-	//   • state  → `tone` (neutral/ok/warn/danger/info) semantic palette
+	//   • state  → `tone` semantic palette, or `color` for any CSS colour
 	//   • info   → `mono` for paths/ids/code-ish metadata
 	//   • tag    → `removable` renders a dismiss button + fires `onremove`
 	// Polymorphic via `as` so it can be a static <span> or an interactive
-	// <button>. `size="sm"` is the compact form for counts/dense rows.
+	// <button>. Every tinted style derives from the `--badge-tone` custom
+	// property, which is the public hook for consumers who theme by CSS.
 	import type { Snippet } from 'svelte';
+	import Dot from './Dot.svelte';
+	import Icon, { type IconName } from './Icon.svelte';
 
-	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+	type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'accent' | 'muted' | 'violet';
+
+	const TONE_COLOR: Record<Exclude<Tone, 'neutral'>, string> = {
+		ok: 'var(--ok)',
+		warn: 'var(--warn)',
+		danger: 'var(--danger)',
+		info: 'var(--info)',
+		accent: 'var(--accent)',
+		muted: 'var(--text-muted)',
+		violet: 'var(--c-violet)',
+	};
 
 	let {
 		tone = 'neutral',
+		color,
 		as = 'span',
 		size = 'md',
+		variant = 'chip',
 		mono = false,
 		uppercase = false,
+		numeric = false,
+		truncate = false,
+		maxWidth,
 		border = true,
 		active = false,
+		dot = false,
+		icon,
 		removable = false,
 		onremove,
 		class: klass = '',
@@ -25,23 +45,39 @@
 		...rest
 	}: {
 		tone?: Tone;
+		// Any CSS colour (or var()) for a one-off tint; overrides `tone`.
+		color?: string;
 		as?: 'span' | 'button';
-		size?: 'sm' | 'md';
+		// `xs` is the densest form for counters in tight rows.
+		size?: 'xs' | 'sm' | 'md';
+		// `text` drops the chip (no fill, ring or padding) but keeps badge
+		// typography and tint — for mono metadata that must not read as a pill.
+		variant?: 'chip' | 'text';
 		mono?: boolean;
 		// Uppercase, letter-spaced label — for status tags/eyebrows.
 		uppercase?: boolean;
+		// Tabular digits with a minimum width so counters don't jitter.
+		numeric?: boolean;
+		// Clip long content with an ellipsis instead of overflowing.
+		truncate?: boolean;
+		maxWidth?: string;
 		// Borderless "soft" variant: tone-tinted fill pill with no ring. The
 		// default (`true`) keeps the outlined look for backwards compatibility.
 		border?: boolean;
 		// Interactive "on" state for a toggle/count badge (`as="button"`): fills the
 		// pill with its tone instead of just tinting the border.
 		active?: boolean;
+		// Leading status dot in the badge colour.
+		dot?: boolean;
+		icon?: IconName;
 		removable?: boolean;
 		onremove?: (e: MouseEvent) => void;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	const toneColor = $derived(color ?? (tone === 'neutral' ? undefined : TONE_COLOR[tone]));
 </script>
 
 <svelte:element
@@ -52,15 +88,32 @@
 	class:badge-warn={tone === 'warn'}
 	class:badge-danger={tone === 'danger'}
 	class:badge-info={tone === 'info'}
+	class:toned={toneColor !== undefined}
 	class:badge-sm={size === 'sm'}
+	class:badge-xs={size === 'xs'}
+	class:text={variant === 'text'}
 	class:mono
 	class:uppercase
+	class:numeric
+	class:truncate
 	class:borderless={!border}
 	class:active
 	class:interactive={as === 'button'}
+	style:--badge-tone={toneColor}
+	style:--badge-max-width={maxWidth}
 	{...rest}
 >
-	{@render children?.()}
+	{#if dot}
+		<Dot color="var(--badge-tone, currentColor)" />
+	{/if}
+	{#if icon}
+		<Icon name={icon} />
+	{/if}
+	{#if truncate}
+		<span class="clip">{@render children?.()}</span>
+	{:else}
+		{@render children?.()}
+	{/if}
 	{#if removable}
 		<button
 			type="button"
@@ -87,32 +140,29 @@
 		color: var(--text-muted);
 		border: 1px solid var(--border);
 		white-space: nowrap;
-		max-width: 100%;
+		max-width: var(--badge-max-width, 100%);
 	}
-	.badge-sm {
-		padding: 0 0.4rem;
-		font-size: 0.6875rem;
+	.badge-sm,
+	.badge-xs {
+		font-size: calc(var(--fs-xs) * 0.92);
 		gap: 0.15rem;
 	}
-	.badge-ok {
-		color: var(--ok);
-		border-color: color-mix(in srgb, var(--ok) 40%, transparent);
-		background: color-mix(in srgb, var(--ok) 12%, transparent);
+	.badge-sm {
+		padding: 0 0.4rem;
 	}
-	.badge-warn {
-		color: var(--warn);
-		border-color: color-mix(in srgb, var(--warn) 40%, transparent);
-		background: color-mix(in srgb, var(--warn) 12%, transparent);
+	.badge-xs {
+		padding: 0.05rem var(--sp-2);
 	}
-	.badge-danger {
-		color: var(--danger);
-		border-color: color-mix(in srgb, var(--danger) 40%, transparent);
-		background: color-mix(in srgb, var(--danger) 12%, transparent);
+	.toned {
+		color: var(--badge-tone);
+		border-color: color-mix(in srgb, var(--badge-tone) 40%, transparent);
+		background: color-mix(in srgb, var(--badge-tone) 12%, transparent);
 	}
-	.badge-info {
-		color: var(--info);
-		border-color: color-mix(in srgb, var(--info) 40%, transparent);
-		background: color-mix(in srgb, var(--info) 12%, transparent);
+	.text {
+		padding: 0;
+		border-color: transparent;
+		background: none;
+		border-radius: 0;
 	}
 	/* Soft variant: drop the ring, keep the tinted fill. Transparent (not
 	   `border: 0`) so layout/baseline matches the outlined default exactly. */
@@ -128,24 +178,26 @@
 		letter-spacing: 0.04em;
 		font-weight: var(--fw-semibold);
 	}
-	/* Interactive "on" state: fill the pill with its tone. Falls back to the
-	   neutral accent when no semantic tone is set. */
-	.active {
-		color: var(--text-on-accent);
-		background: var(--badge-fill, var(--accent));
-		border-color: var(--badge-fill, var(--accent));
-	}
-	.badge-ok.active {
-		--badge-fill: var(--ok);
+	.numeric {
+		font-variant-numeric: tabular-nums;
+		min-width: 1.5em;
+		justify-content: center;
 	}
-	.badge-warn.active {
-		--badge-fill: var(--warn);
+	.truncate {
+		min-width: 0;
 	}
-	.badge-danger.active {
-		--badge-fill: var(--danger);
+	.clip {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 	}
-	.badge-info.active {
-		--badge-fill: var(--info);
+	/* Interactive "on" state: fill the pill with its tone. Falls back to the
+	   neutral accent when no tone or colour is set. */
+	.active {
+		color: var(--text-on-accent);
+		background: var(--badge-tone, var(--accent));
+		border-color: var(--badge-tone, var(--accent));
 	}
 	.interactive {
 		cursor: pointer;
@@ -159,9 +211,13 @@
 	}
 	.interactive.active:hover {
 		color: var(--text-on-accent);
-		border-color: var(--badge-fill, var(--accent));
+		border-color: var(--badge-tone, var(--accent));
 		filter: brightness(1.08);
 	}
+	.interactive:focus-visible {
+		outline: 2px solid var(--badge-tone, var(--accent));
+		outline-offset: 2px;
+	}
 	.remove {
 		display: inline-flex;
 		align-items: center;

package/dist/components/atoms/Badge.svelte.d.ts

@@ -1,13 +1,21 @@
 import type { Snippet } from 'svelte';
-type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+import { type IconName } from './Icon.svelte';
+type Tone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info' | 'accent' | 'muted' | 'violet';
 type $$ComponentProps = {
     tone?: Tone;
+    color?: string;
     as?: 'span' | 'button';
-    size?: 'sm' | 'md';
+    size?: 'xs' | 'sm' | 'md';
+    variant?: 'chip' | 'text';
     mono?: boolean;
     uppercase?: boolean;
+    numeric?: boolean;
+    truncate?: boolean;
+    maxWidth?: string;
     border?: boolean;
     active?: boolean;
+    dot?: boolean;
+    icon?: IconName;
     removable?: boolean;
     onremove?: (e: MouseEvent) => void;
     class?: string;

package/dist/components/atoms/Dot.svelte

@@ -5,7 +5,8 @@
 	//   • status → one of the semantic presets (active/stale/dead/hibernated),
 	//     each mapped to a token.
 	//   • color  → any CSS colour (or var()) for a one-off; overrides `status`.
-	// `glow` adds a soft halo in the dot's own colour. With a `label` the whole
+	// `glow` adds a soft halo in the dot's own colour; `ring` adds a dark halo so
+	// the dot stays legible over artwork. With a `label` the whole
 	// thing renders as an inline-flex row (dot + caption); without one it's a bare
 	// inline dot, so it can sit inline next to other text.
 	import Text from './Text.svelte';
@@ -24,6 +25,7 @@
 		color,
 		label,
 		glow = false,
+		ring = false,
 		class: klass = '',
 		...rest
 	}: {
@@ -31,6 +33,7 @@
 		color?: string;
 		label?: string;
 		glow?: boolean;
+		ring?: boolean;
 		class?: string;
 		[key: string]: unknown;
 	} = $props();
@@ -40,11 +43,11 @@
 
 {#if label}
 	<span class="dot-row {klass}" data-tsu="Dot" {...rest}>
-		<span class="dot" class:glow style="--dot-color:{resolved}"></span>
+		<span class="dot" class:glow class:ring style="--dot-color:{resolved}"></span>
 		<Text variant="caption">{label}</Text>
 	</span>
 {:else}
-	<span class="dot {klass}" class:glow style="--dot-color:{resolved}" data-tsu="Dot" {...rest}></span>
+	<span class="dot {klass}" class:glow class:ring style="--dot-color:{resolved}" data-tsu="Dot" {...rest}></span>
 {/if}
 
 <style>
@@ -64,4 +67,12 @@
 	.glow {
 		box-shadow: 0 0 6px var(--dot-color);
 	}
+	.ring {
+		box-shadow: 0 0 0 3px rgb(0 0 0 / 0.35);
+	}
+	.ring.glow {
+		box-shadow:
+			0 0 0 3px rgb(0 0 0 / 0.35),
+			0 0 6px var(--dot-color);
+	}
 </style>

package/dist/components/atoms/Dot.svelte.d.ts

@@ -4,6 +4,7 @@ type $$ComponentProps = {
     color?: string;
     label?: string;
     glow?: boolean;
+    ring?: boolean;
     class?: string;
     [key: string]: unknown;
 };

package/dist/components/atoms/Link.svelte

@@ -6,16 +6,38 @@
 
 	let {
 		href,
+		tone = 'accent',
+		underline = 'always',
+		align = 'start',
 		class: klass = '',
 		children,
 		...rest
-	}: { href?: string; class?: string; children?: Snippet; [key: string]: unknown } = $props();
+	}: {
+		href?: string;
+		tone?: 'accent' | 'info' | 'muted' | 'inherit';
+		underline?: 'always' | 'hover' | 'none';
+		// Text alignment of the <button> form; multi-line titles want `start`.
+		align?: 'start' | 'center';
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
 </script>
 
 {#if href}
-	<a {href} class="link {klass}" data-tsu="Link" {...rest}>{@render children?.()}</a>
+	<a
+		{href}
+		class="link tone-{tone} underline-{underline} align-{align} {klass}"
+		data-tsu="Link"
+		{...rest}>{@render children?.()}</a
+	>
 {:else}
-	<button type="button" class="link {klass}" data-tsu="Link" {...rest}>{@render children?.()}</button>
+	<button
+		type="button"
+		class="link tone-{tone} underline-{underline} align-{align} {klass}"
+		data-tsu="Link"
+		{...rest}>{@render children?.()}</button
+	>
 {/if}
 
 <style>
@@ -27,5 +49,25 @@
 		cursor: pointer;
 		text-decoration: underline;
 		font: inherit;
+		text-align: start;
+	}
+	.tone-info {
+		color: var(--info);
+	}
+	.tone-muted {
+		color: var(--text-muted);
+	}
+	.tone-inherit {
+		color: inherit;
+	}
+	.underline-hover,
+	.underline-none {
+		text-decoration: none;
+	}
+	.underline-hover:hover {
+		text-decoration: underline;
+	}
+	.align-center {
+		text-align: center;
 	}
 </style>

package/dist/components/atoms/Link.svelte.d.ts

@@ -1,6 +1,9 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     href?: string;
+    tone?: 'accent' | 'info' | 'muted' | 'inherit';
+    underline?: 'always' | 'hover' | 'none';
+    align?: 'start' | 'center';
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/components/layouts/AppShell.svelte

@@ -24,7 +24,10 @@
 		resizableSidebar = false,
 		minSidebar = 64,
 		maxSidebar = 360,
-		sidebarWidthKey
+		sidebarWidthKey,
+		layout = 'header-top',
+		stickySidebar = false,
+		sidebarPadding = 'md'
 	}: {
 		header?: Snippet;
 		sidebar?: Snippet;
@@ -41,6 +44,14 @@
 		maxSidebar?: number;
 		/** localStorage key to persist the resized width. */
 		sidebarWidthKey?: string;
+		/** `'sidebar-full'`: the sidebar spans the whole height on desktop/tablet
+		 *  and the header only covers the content column (brand sits top-left). */
+		layout?: 'header-top' | 'sidebar-full';
+		/** Pin the desktop sidebar to the viewport (100dvh, own scroll) so its
+		 *  footer stays visible on long pages. */
+		stickySidebar?: boolean;
+		/** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
+		sidebarPadding?: 'none' | 'sm' | 'md';
 	} = $props();
 
 	let open = $state(false);
@@ -115,7 +126,14 @@
 
 <svelte:window onkeydown={(e) => e.key === 'Escape' && (open = false)} />
 
-<div class="shell" class:dragging style="--shell-sidebar-w: {widthCss}" data-tsu="AppShell">
+<div
+	class="shell"
+	class:dragging
+	class:sidebar-full={layout === 'sidebar-full'}
+	class:sticky-sidebar={stickySidebar}
+	style="--shell-sidebar-w: {widthCss}"
+	data-tsu="AppShell"
+>
 	<header class="shell-header">
 		{#if sidebar}
 			<!-- Wrapper owned here so the responsive hide is a scoped rule on our own
@@ -143,6 +161,7 @@
 		<aside
 			class="shell-sidebar"
 			class:open
+			data-padding={sidebarPadding}
 			aria-label={navLabel}
 			inert={isMobile && !open ? true : undefined}
 		>
@@ -190,6 +209,7 @@
 		display: flex;
 		align-items: center;
 		gap: var(--sp-3);
+		min-width: 0;
 		height: var(--header-h);
 		padding-inline: max(var(--sp-4), var(--safe-left)) max(var(--sp-4), var(--safe-right));
 		padding-top: var(--safe-top);
@@ -197,6 +217,9 @@
 		backdrop-filter: blur(8px);
 		border-bottom: 1px solid var(--border);
 	}
+	.shell-header > :global(*) {
+		min-width: 0;
+	}
 	.shell-menu-btn {
 		display: inline-flex;
 		align-items: center;
@@ -229,15 +252,22 @@
 		-webkit-overflow-scrolling: touch;
 		background: var(--bg-elevated);
 		border-right: 1px solid var(--border);
-		padding: var(--sp-3);
-		padding-top: max(var(--sp-3), var(--safe-top));
-		padding-bottom: max(var(--sp-3), var(--safe-bottom));
+		--shell-sidebar-pad: var(--sp-3);
+		padding: var(--shell-sidebar-pad);
+		padding-top: max(var(--shell-sidebar-pad), var(--safe-top));
+		padding-bottom: max(var(--shell-sidebar-pad), var(--safe-bottom));
 		/* A query container named `sidebar` so nav items collapse to an icon rail
 		   based on the sidebar's own width (see NavItem). */
 		container: sidebar / inline-size;
 		transform: translateX(-100%);
 		transition: transform 0.2s var(--ease);
 	}
+	.shell-sidebar[data-padding='sm'] {
+		--shell-sidebar-pad: var(--sp-2);
+	}
+	.shell-sidebar[data-padding='none'] {
+		--shell-sidebar-pad: 0px;
+	}
 	.shell-sidebar.open {
 		transform: translateX(0);
 		box-shadow: var(--shadow-lg);
@@ -273,6 +303,12 @@
 				'sidebar main'
 				'footer footer';
 		}
+		.shell.sidebar-full {
+			grid-template-areas:
+				'sidebar header'
+				'sidebar main'
+				'sidebar footer';
+		}
 		.shell-sidebar {
 			position: relative; /* anchor the absolute resize handle */
 			grid-area: sidebar;
@@ -281,6 +317,12 @@
 			box-shadow: none;
 			border-right: 1px solid var(--border);
 		}
+		.shell.sticky-sidebar .shell-sidebar {
+			position: sticky;
+			top: 0;
+			height: 100dvh;
+			align-self: start;
+		}
 		.shell-scrim,
 		.shell-menu-btn {
 			display: none !important;

package/dist/components/layouts/AppShell.svelte.d.ts

@@ -15,6 +15,14 @@ type $$ComponentProps = {
     maxSidebar?: number;
     /** localStorage key to persist the resized width. */
     sidebarWidthKey?: string;
+    /** `'sidebar-full'`: the sidebar spans the whole height on desktop/tablet
+     *  and the header only covers the content column (brand sits top-left). */
+    layout?: 'header-top' | 'sidebar-full';
+    /** Pin the desktop sidebar to the viewport (100dvh, own scroll) so its
+     *  footer stays visible on long pages. */
+    stickySidebar?: boolean;
+    /** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
+    sidebarPadding?: 'none' | 'sm' | 'md';
 };
 declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "">;
 type AppShell = ReturnType<typeof AppShell>;

package/dist/components/layouts/Container.svelte

@@ -1,31 +1,51 @@
 <script lang="ts">
-	// Centered, max-width content column with token gutters that respect safe-area
-	// insets. `size` overrides the default --content-max; `pad` toggles vertical
-	// padding. `fullWidth` releases the max-width constraint and lets the content
-	// bleed to the full viewport width even when nested inside a centered ancestor
-	// (the `margin-inline: calc(50% - 50vw)` trick), for edge-to-edge sections.
-	// Polymorphic via `as` so it can be a <main>, <section>, etc.
+	// Max-width content column with token gutters that respect safe-area insets.
+	// Self-contained: does not depend on the global `.container` utility. Exposes
+	// `--container-gutter` so children can bleed to the column edge with
+	// `margin-inline: calc(-1 * var(--container-gutter))`.
 	import type { Snippet } from 'svelte';
 
 	let {
 		as = 'div',
 		size,
+		gutter,
+		align = 'center',
 		pad = false,
 		fullWidth = false,
+		inset,
 		class: klass = '',
 		children,
 		...rest
 	}: {
 		as?: 'div' | 'main' | 'section' | 'article';
-		/** Max width (any CSS length). Defaults to --content-max. Ignored when `fullWidth`. */
-		size?: string;
+		/** Max width (any CSS length), or `'none'` to fill the parent. Defaults to --content-max. Ignored when `fullWidth`. */
+		size?: string | 'none';
+		/** Inline gutter (any CSS length). Defaults to --sp-4; safe-area insets still win when larger. */
+		gutter?: string;
+		/** `'center'` (margin-inline auto) or `'start'` (flush with the parent's start edge). */
+		align?: 'center' | 'start';
 		pad?: boolean;
-		/** Break out to the full viewport width, ignoring `size`/--content-max. */
+		/** Break out to the full *viewport* width, ignoring `size`/--content-max and any
+		 *  centered ancestor. Inside a sidebar layout prefer `size="none"` (fills the column). */
 		fullWidth?: boolean;
+		/** Space reserved at the viewport edges when `fullWidth` (`'left right'` or one value
+		 *  for both), e.g. `"var(--dock-left-w) var(--dock-right-w)"` for docked panels. */
+		inset?: string;
 		class?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	const style = $derived.by(() => {
+		const vars: string[] = [];
+		if (!fullWidth && size && size !== 'none') vars.push(`--ct-max: ${size}`);
+		if (gutter) vars.push(`--container-gutter: ${gutter}`);
+		if (fullWidth && inset) {
+			const [left, right = left] = inset.trim().split(/\s+/);
+			vars.push(`--ct-inset-l: ${left}`, `--ct-inset-r: ${right}`);
+		}
+		return vars.length ? vars.join('; ') : undefined;
+	});
 </script>
 
 <svelte:element
@@ -33,25 +53,46 @@
 	data-tsu="Container"
 	class="container ct {klass}"
 	class:pad
+	class:none={size === 'none'}
+	class:start={align === 'start'}
 	class:full={fullWidth}
-	style={!fullWidth && size ? `max-width: ${size}` : undefined}
+	{style}
 	{...rest}
 >
 	{@render children?.()}
 </svelte:element>
 
 <style>
+	.ct {
+		--container-gutter: var(--sp-4);
+		width: 100%;
+		max-width: var(--ct-max, var(--content-max));
+		margin-inline: auto;
+		padding-inline: max(var(--container-gutter), var(--safe-left))
+			max(var(--container-gutter), var(--safe-right));
+	}
+
+	.ct.none {
+		max-width: none;
+	}
+
+	.ct.start {
+		margin-inline: 0;
+	}
+
 	.ct.pad {
 		padding-top: var(--sp-6);
 		padding-bottom: var(--sp-12);
 	}
 
-	/* Break out of any centered ancestor to span the full viewport width.
+	/* Break out of any centered ancestor to span the viewport (minus `inset`).
 	   `margin-inline: calc(50% - 50vw)` pulls each edge out to the viewport,
 	   keeping the element in normal flow (no transform/overflow side-effects). */
 	.ct.full {
+		--ct-inset-l: 0px;
+		--ct-inset-r: 0px;
 		max-width: none;
-		width: 100vw;
-		margin-inline: calc(50% - 50vw);
+		width: calc(100vw - var(--ct-inset-l) - var(--ct-inset-r));
+		margin-inline: calc(50% - 50vw + var(--ct-inset-l)) calc(50% - 50vw + var(--ct-inset-r));
 	}
 </style>

package/dist/components/layouts/Container.svelte.d.ts

@@ -1,11 +1,19 @@
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     as?: 'div' | 'main' | 'section' | 'article';
-    /** Max width (any CSS length). Defaults to --content-max. Ignored when `fullWidth`. */
-    size?: string;
+    /** Max width (any CSS length), or `'none'` to fill the parent. Defaults to --content-max. Ignored when `fullWidth`. */
+    size?: string | 'none';
+    /** Inline gutter (any CSS length). Defaults to --sp-4; safe-area insets still win when larger. */
+    gutter?: string;
+    /** `'center'` (margin-inline auto) or `'start'` (flush with the parent's start edge). */
+    align?: 'center' | 'start';
     pad?: boolean;
-    /** Break out to the full viewport width, ignoring `size`/--content-max. */
+    /** Break out to the full *viewport* width, ignoring `size`/--content-max and any
+     *  centered ancestor. Inside a sidebar layout prefer `size="none"` (fills the column). */
     fullWidth?: boolean;
+    /** Space reserved at the viewport edges when `fullWidth` (`'left right'` or one value
+     *  for both), e.g. `"var(--dock-left-w) var(--dock-right-w)"` for docked panels. */
+    inset?: string;
     class?: string;
     children?: Snippet;
     [key: string]: unknown;

package/dist/components/molecules/Toaster.svelte

@@ -1,31 +1,70 @@
 <script lang="ts">
 	// Renders the toast queue in a bottom-centered, polite live region. Mount once
-	// near the app root. Each toast is tap/click-dismissible; screen readers
-	// announce additions via aria-live. Sits in its own stacking context above
-	// page content but below modals' top layer.
+	// 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';
+	import Button from '../atoms/Button.svelte';
+	import Card from '../atoms/Card.svelte';
 	import Icon from '../atoms/Icon.svelte';
+
+	let el: HTMLDivElement | undefined = $state();
+
+	$effect(() => {
+		if (!el || typeof el.showPopover !== 'function') return;
+		try {
+			if (toasts.items.length) el.showPopover();
+			else el.hidePopover();
+		} catch {}
+	});
 </script>
 
-<div class="toaster" role="status" aria-live="polite" aria-relevant="additions" data-tsu="Toaster">
+<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)}
-		<button
-			type="button"
-			class="toast"
-			class:ok={t.tone === 'ok'}
-			class:err={t.tone === 'error'}
-			onclick={() => toasts.dismiss(t.id)}
-		>
-			{#if t.tone === 'ok'}<Icon name="check" />{:else if t.tone === 'error'}<Icon name="warning" />{/if}
-			<span class="msg">{t.message}</span>
-			<Icon name="x" />
-		</button>
+		{#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}
+				type="button"
+				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>
+				<Icon name="x" />
+			</Card>
+		{/if}
 	{/each}
 </div>
 
 <style>
 	.toaster {
 		position: fixed;
+		inset: auto;
 		left: 50%;
 		transform: translateX(-50%);
 		bottom: calc(var(--safe-bottom) + var(--sp-4));
@@ -34,36 +73,53 @@
 		flex-direction: column;
 		gap: var(--sp-2);
 		width: calc(100% - var(--sp-8));
-		max-width: 30rem;
+		max-width: var(--toast-max-width, 28rem);
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: transparent;
+		overflow: visible;
 		pointer-events: none;
 	}
-	.toast {
+	.toaster:not(:popover-open) {
+		display: none;
+	}
+	.toaster :global(.toast) {
 		pointer-events: auto;
 		display: flex;
 		align-items: center;
 		gap: var(--sp-2);
 		width: 100%;
 		text-align: left;
-		color: var(--text);
-		background: var(--bg-elevated-2);
-		border: 1px solid var(--border-strong);
-		border-radius: var(--r-md);
-		padding: var(--sp-3) var(--sp-4);
-		box-shadow: var(--shadow-md);
 		font-size: var(--fs-sm);
 		animation: toast-in 0.18s var(--ease);
 	}
-	.toast .msg {
-		flex: 1;
-	}
-	.toast.ok {
-		border-color: var(--ok);
+	.toaster :global(.toast.card-ok) {
 		color: var(--ok);
 	}
-	.toast.err {
-		border-color: var(--danger);
+	.toaster :global(.toast.card-danger) {
 		color: var(--danger);
 	}
+	.toaster :global(.toast.card-info) {
+		color: var(--info);
+	}
+	.toast-text {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		min-width: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		text-align: left;
+		cursor: pointer;
+	}
+	.msg {
+		flex: 1;
+	}
 	@keyframes toast-in {
 		from {
 			transform: translateY(8px);

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

@@ -1,18 +1,3 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Toaster: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Toaster = InstanceType<typeof Toaster>;
+declare const Toaster: import("svelte").Component<Record<string, never>, {}, "">;
+type Toaster = ReturnType<typeof Toaster>;
 export default Toaster;

package/dist/index.d.ts

@@ -58,6 +58,6 @@ export { default as FilterSearchBar } from './components/organisms/FilterSearchB
 export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, suggest, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
 export { type Mode, THEMES, theme } from './stores/theme.svelte';
-export { type Toast, type ToastTone, toasts } from './stores/toast.svelte';
+export { type Toast, type ToastAction, type ToastOptions, type ToastTone, type ToastToneInput, toasts, } from './stores/toast.svelte';
 export { formatTimestamp, localTimeZone, relativeTime, type TimeInput, type TimestampMode, } from './timestamp';
 export { type TruncateMode, type TruncateOptions, truncate } from './truncate';

package/dist/index.js

@@ -71,6 +71,6 @@ export { activeToken, compilePredicate, defaultOperator, filters, findField, fre
 export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
 // ---- stores / actions ----
 export { THEMES, theme } from './stores/theme.svelte';
-export { toasts } from './stores/toast.svelte';
+export { toasts, } from './stores/toast.svelte';
 export { formatTimestamp, localTimeZone, relativeTime, } from './timestamp';
 export { truncate } from './truncate';

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

@@ -1,19 +1,37 @@
-export type ToastTone = 'neutral' | 'ok' | 'error';
+export type ToastTone = 'neutral' | 'ok' | 'error' | 'info';
+/** Accepted by show(); 'danger' is normalised to 'error'. */
+export type ToastToneInput = ToastTone | 'danger';
+export interface ToastAction {
+    label: string;
+    run: () => void | Promise<void>;
+}
 export interface Toast {
     id: number;
     message: string;
     tone: ToastTone;
     duration: number;
+    action?: ToastAction;
+    /** True while `action.run` is in flight; the Toaster shows the button loading. */
+    pending: boolean;
+}
+export interface ToastOptions {
+    tone?: ToastToneInput;
+    duration?: number;
+    action?: ToastAction;
 }
+export declare const TOAST_MS = 4000;
+/** Toasts with an action linger longer: the action is only reachable while visible. */
+export declare const ACTION_TOAST_MS = 7000;
 declare class Toasts {
+    #private;
     items: Toast[];
-    show(message: string, opts?: {
-        tone?: ToastTone;
-        duration?: number;
-    }): number;
-    ok(message: string, duration?: number): number;
-    error(message: string, duration?: number): number;
+    show(message: string, opts?: ToastOptions): number;
+    ok(message: string, duration?: number, action?: ToastAction): number;
+    error(message: string, duration?: number, action?: ToastAction): number;
+    info(message: string, duration?: number, action?: ToastAction): number;
     dismiss(id: number): void;
+    /** Run a toast's action once: the toast stays (button loading) until run settles, then dismisses. */
+    act(id: number): Promise<void>;
 }
 export declare const toasts: Toasts;
 export {};

package/dist/stores/toast.svelte.js

@@ -1,26 +1,60 @@
 // Toast manager. A tiny reactive queue; mount one <Toaster /> at the app root
-// and call toasts.show()/ok()/error() from anywhere. Auto-dismisses after
+// and call toasts.show()/ok()/error()/info() from anywhere. Auto-dismisses after
 // `duration` ms (0 = sticky). The Toaster renders an aria-live region so screen
 // readers announce messages.
+export const TOAST_MS = 4000;
+/** Toasts with an action linger longer: the action is only reachable while visible. */
+export const ACTION_TOAST_MS = 7000;
 let seq = 0;
 class Toasts {
     items = $state([]);
+    #timers = new Map();
     show(message, opts = {}) {
         const id = ++seq;
-        const duration = opts.duration ?? 4000;
-        this.items = [...this.items, { id, message, tone: opts.tone ?? 'neutral', duration }];
+        const duration = opts.duration ?? (opts.action ? ACTION_TOAST_MS : TOAST_MS);
+        const tone = opts.tone === 'danger' ? 'error' : (opts.tone ?? 'neutral');
+        this.items = [
+            ...this.items,
+            { id, message, tone, duration, action: opts.action, pending: false },
+        ];
         if (duration > 0)
-            setTimeout(() => this.dismiss(id), duration);
+            this.#timers.set(id, setTimeout(() => this.dismiss(id), duration));
         return id;
     }
-    ok(message, duration) {
-        return this.show(message, { tone: 'ok', duration });
+    ok(message, duration, action) {
+        return this.show(message, { tone: 'ok', duration, action });
     }
-    error(message, duration) {
-        return this.show(message, { tone: 'error', duration });
+    error(message, duration, action) {
+        return this.show(message, { tone: 'error', duration, action });
+    }
+    info(message, duration, action) {
+        return this.show(message, { tone: 'info', duration, action });
     }
     dismiss(id) {
+        const timer = this.#timers.get(id);
+        if (timer)
+            clearTimeout(timer);
+        this.#timers.delete(id);
         this.items = this.items.filter((t) => t.id !== id);
     }
+    /** Run a toast's action once: the toast stays (button loading) until run settles, then dismisses. */
+    async act(id) {
+        const t = this.items.find((x) => x.id === id);
+        if (!t?.action || t.pending)
+            return;
+        const timer = this.#timers.get(id);
+        if (timer)
+            clearTimeout(timer);
+        this.items = this.items.map((x) => (x.id === id ? { ...x, pending: true } : x));
+        try {
+            await t.action.run();
+        }
+        catch (e) {
+            this.error(e instanceof Error ? e.message : String(e));
+        }
+        finally {
+            this.dismiss(id);
+        }
+    }
 }
 export const toasts = new Toasts();

package/dist/styles/app.css

@@ -106,9 +106,7 @@ pre {
 	width: 100%;
 	max-width: var(--content-max);
 	margin-inline: auto;
-	padding-inline: var(--sp-4);
-	padding-left: max(var(--sp-4), var(--safe-left));
-	padding-right: max(var(--sp-4), var(--safe-right));
+	padding-inline: max(var(--sp-4), var(--safe-left)) max(var(--sp-4), var(--safe-right));
 }
 .stack {
 	display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.20.0",
+  "version": "0.22.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",