@dorsk/tsumikit 0.25.0 → 0.27.0

package/README.md

@@ -144,15 +144,19 @@ for a light theme (`:root` defaults to dark, so dark themes may omit it).
 
 ## Components
 
-**Atoms:** Text, Heading, Button, Input, Textarea, Select, Switch, Checkbox,
-Slider, Progress, Card (`tone` tints the surface for inline banners), Badge
+**Atoms:** Text, Heading, Button, Input (`icon` inset leading glyph,
+`clearable` + `onclear`, `shape="pill"`, `width` fixed + `flex: none`,
+`onenter(value)`; the bare `<input>` DOM is unchanged unless `icon`/`clearable`
+is used), Textarea, Select, Switch, Checkbox,
+Slider, Progress, Artwork (lazy cover image with seeded gradient + initials
+fallback, `aspect`, `status` overlay), 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,
+**Molecules:** Field (`grow`), IconButton, SelectButton, Toggle, OptionButton, Modal,
 Popover, Menu, Tabs, RadioGroup, Tooltip, Accordion, CopyButton, FileButton,
 Dropzone, CodeBlock, Callout, EmptyState, ConfirmModal, Pagination, Toaster,
 ThemePicker, FontScalePicker, SectionHeader, KeyValue, LoadMore.
@@ -165,7 +169,13 @@ paints a left accent bar + `data-tone`, `rowClass(row)`, `rowActions` snippet
 for a hover/focus-revealed trailing cell (always visible on touch),
 `stickyOffset` for the sticky header's `top`, `size="sm"`, `loading`,
 `onloadmore` footer button, `empty` as string or snippet; `data-part`
-hooks on head/row/cell).
+hooks on head/row/cell; `responsive="stack"` turns rows into cards below
+`stackBelow` (48rem, measured on the table's own box) using `Column.role`
+`title | detail | meta | actions | hidden` — detail cells get a `data-label`
+prefix, the `<table>` stays a table for assistive tech), FilterSearchBar /
+FilterInput (`size="sm"` compact bar on `--control-height-compact`,
+`shape="pill"`, `surface`, `hotkey="/"` focuses the input from anywhere
+outside an editable element, `showHotkey` renders the `<kbd>` hint, `grow`).
 
 **Layouts:** AppShell (responsive header/sidebar/main/footer — persistent
 sidebar on desktop, overlay drawer on mobile, optionally resizable;
@@ -174,7 +184,9 @@ 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
+(collapses to an icon rail when the sidebar is narrow; `icon` from the
+registry, `iconPath` / `iconChildren` for custom glyphs, `activeStyle="bar"`
+for the inset-bar active look), Container, Stack
 (vertical), Cluster (wrapping row; `stackAt="xs|sm|md|lg"` makes it its own
 query container and stacks children full-width below 18/30/40/48rem — phone
 action rows without a viewport query), AutoGrid (intrinsically responsive
@@ -321,6 +333,22 @@ error | done, `onload`, `label`, `loadingLabel`, `errorLabel`, `retryLabel`,
 </SectionHeader>
 ```
 
+### Artwork
+
+`Artwork` is the one cover/thumbnail tile: `src` + `alt` (required) render a
+lazy, async-decoded `<img>`; a missing or failing source swaps to a gradient
+seeded from `seed` (default `alt`) with `fallback` initials | icon | none.
+`aspect` ('1/1', '2/3', '16/9' or any ratio), `size` (width), `radius`
+sm | md | lg | pill, `fit` cover | contain, `hover` for tappable tiles,
+`status` snippet overlaid bottom-right, `onerror`. `artworkGradient(seed)`,
+`artworkHue(seed)` and `initials(text)` are exported for non-component use.
+
+```svelte
+<Artwork src={album.cover} alt={album.title} aspect="1/1" size="9rem" hover>
+  {#snippet status()}<Dot status="active" ring />{/snippet}
+</Artwork>
+```
+
 ## Container queries
 
 AppShell's `main` and `sidebar` are query containers (`container-name: main` /

package/dist/artwork.d.ts

@@ -0,0 +1,7 @@
+/** Hue (0–359) derived from `seed`; stable across runs and environments. */
+export declare function artworkHue(seed: string): number;
+/** CSS `linear-gradient(...)` for the artwork fallback, keyed on `seed`. */
+export declare function artworkGradient(seed: string): string;
+/** Up to two uppercase initials: first letters of the first two words, or the
+ *  first two characters of a single word. Empty input yields ''. */
+export declare function initials(text: string): string;

package/dist/artwork.js

@@ -0,0 +1,28 @@
+// Placeholder look for missing artwork: a deterministic hue from `seed` so the
+// same album/show always gets the same tint, tinted over the surface tokens so
+// the fallback tracks the active theme instead of being a fixed dark gradient.
+function hash(text) {
+    let h = 0;
+    for (const ch of text) {
+        h = (h * 31 + (ch.codePointAt(0) ?? 0)) >>> 0;
+    }
+    return h;
+}
+/** Hue (0–359) derived from `seed`; stable across runs and environments. */
+export function artworkHue(seed) {
+    return hash(seed) % 360;
+}
+/** CSS `linear-gradient(...)` for the artwork fallback, keyed on `seed`. */
+export function artworkGradient(seed) {
+    const h = artworkHue(seed);
+    return `linear-gradient(160deg, color-mix(in srgb, hsl(${h} 60% 55%) 28%, var(--bg-elevated-2)), color-mix(in srgb, hsl(${h} 60% 40%) 16%, var(--bg-elevated)))`;
+}
+/** Up to two uppercase initials: first letters of the first two words, or the
+ *  first two characters of a single word. Empty input yields ''. */
+export function initials(text) {
+    const words = text.trim().split(/\s+/).filter(Boolean);
+    if (words.length === 0)
+        return '';
+    const picked = words.length === 1 ? [...words[0]].slice(0, 2) : words.slice(0, 2).map((w) => [...w][0]);
+    return picked.join('').toUpperCase();
+}

package/dist/components/atoms/Artwork.svelte

@@ -0,0 +1,152 @@
+<script lang="ts">
+	// Cover / thumbnail tile: a lazy <img> that swaps to a seeded gradient with
+	// initials (or an icon) when there is no source or it fails to load. Width
+	// comes from `size`, height from `aspect`; `status` overlays a Dot/Badge in
+	// the bottom-right corner.
+	import type { Snippet } from 'svelte';
+	import { artworkGradient, initials as initialsOf } from '../../artwork';
+	import Icon from './Icon.svelte';
+	import type { IconName } from './Icon.svelte';
+
+	let {
+		src,
+		alt,
+		seed,
+		aspect = '1/1',
+		size,
+		radius = 'md',
+		fit = 'cover',
+		fallback = 'initials',
+		icon = 'image',
+		status,
+		hover = false,
+		onerror,
+		class: klass = '',
+		...rest
+	}: {
+		src?: string | null;
+		alt: string;
+		/** Drives the gradient hue and the initials. Defaults to `alt`. */
+		seed?: string;
+		/** CSS aspect-ratio, e.g. '1/1', '2/3', '16/9'. */
+		aspect?: '1/1' | '2/3' | '16/9' | (string & {});
+		/** Width (any CSS length). Omit to fill the container. */
+		size?: string;
+		radius?: 'sm' | 'md' | 'lg' | 'pill';
+		fit?: 'cover' | 'contain';
+		fallback?: 'initials' | 'icon' | 'none';
+		/** Glyph shown when `fallback="icon"`. */
+		icon?: IconName;
+		/** Overlay rendered bottom-right (a Dot or Badge). */
+		status?: Snippet;
+		/** Stronger border + shadow on hover, for tappable tiles. */
+		hover?: boolean;
+		onerror?: () => void;
+		class?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	let failed = $state(false);
+	$effect(() => {
+		src;
+		failed = false;
+	});
+
+	const key = $derived(seed ?? alt);
+	const showImage = $derived(Boolean(src) && !failed);
+	const gradient = $derived(showImage ? undefined : artworkGradient(key));
+	const text = $derived(fallback === 'initials' ? initialsOf(key) : '');
+
+	function fail() {
+		failed = true;
+		onerror?.();
+	}
+</script>
+
+<div
+	data-tsu="Artwork"
+	class="artwork r-{radius} {klass}"
+	class:hover
+	style:aspect-ratio={aspect}
+	style:width={size}
+	style:background={gradient}
+	role={showImage ? undefined : 'img'}
+	aria-label={showImage ? undefined : alt}
+	{...rest}
+>
+	{#if showImage}
+		<img {src} {alt} class="img fit-{fit}" loading="lazy" decoding="async" onerror={fail} />
+	{:else if fallback === 'initials' && text}
+		<span class="initials" aria-hidden="true">{text}</span>
+	{:else if fallback === 'icon'}
+		<span class="glyph" aria-hidden="true"><Icon name={icon} /></span>
+	{/if}
+	{#if status}
+		<span class="status">{@render status()}</span>
+	{/if}
+</div>
+
+<style>
+	.artwork {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		flex: none;
+		background: var(--bg-elevated-2);
+		border: 1px solid var(--border);
+		color: var(--text-muted);
+		container-type: inline-size;
+		transition:
+			border-color 0.12s var(--ease),
+			box-shadow 0.12s var(--ease);
+	}
+	.r-sm {
+		border-radius: var(--r-sm);
+	}
+	.r-md {
+		border-radius: var(--r-md);
+	}
+	.r-lg {
+		border-radius: var(--r-lg);
+	}
+	.r-pill {
+		border-radius: var(--r-pill);
+	}
+	.hover:hover {
+		border-color: var(--border-strong);
+		box-shadow: var(--shadow-md);
+	}
+	.img {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+	.fit-cover {
+		object-fit: cover;
+	}
+	.fit-contain {
+		object-fit: contain;
+	}
+	.initials {
+		font-size: 28cqw;
+		font-weight: var(--fw-semibold);
+		letter-spacing: 0.04em;
+		color: color-mix(in srgb, var(--text) 55%, transparent);
+		user-select: none;
+	}
+	.glyph {
+		font-size: 30cqw;
+		display: flex;
+		color: color-mix(in srgb, var(--text) 40%, transparent);
+	}
+	.status {
+		position: absolute;
+		right: var(--sp-2);
+		bottom: var(--sp-2);
+		display: flex;
+	}
+</style>

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

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+import type { IconName } from './Icon.svelte';
+type $$ComponentProps = {
+    src?: string | null;
+    alt: string;
+    /** Drives the gradient hue and the initials. Defaults to `alt`. */
+    seed?: string;
+    /** CSS aspect-ratio, e.g. '1/1', '2/3', '16/9'. */
+    aspect?: '1/1' | '2/3' | '16/9' | (string & {});
+    /** Width (any CSS length). Omit to fill the container. */
+    size?: string;
+    radius?: 'sm' | 'md' | 'lg' | 'pill';
+    fit?: 'cover' | 'contain';
+    fallback?: 'initials' | 'icon' | 'none';
+    /** Glyph shown when `fallback="icon"`. */
+    icon?: IconName;
+    /** Overlay rendered bottom-right (a Dot or Badge). */
+    status?: Snippet;
+    /** Stronger border + shadow on hover, for tappable tiles. */
+    hover?: boolean;
+    onerror?: () => void;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const Artwork: import("svelte").Component<$$ComponentProps, {}, "">;
+type Artwork = ReturnType<typeof Artwork>;
+export default Artwork;

package/dist/components/atoms/Icon.svelte

@@ -5,7 +5,7 @@
 	// e.g. a lucide-svelte component's contents — without adding it to the
 	// registry. Sized at 1em so it tracks the surrounding text (and the
 	// --fs-scale font control).
-	const ICONS = {
+	const GLYPHS = {
 		// — navigation / chevrons —
 		back: '<path d="m12 19-7-7 7-7" /><path d="M19 12H5" />',
 		'arrow-right': '<path d="M5 12h14" /><path d="m12 5 7 7-7 7" />',
@@ -55,6 +55,7 @@
 		folder: '<path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" />',
 		archive: '<rect width="20" height="5" x="2" y="3" rx="1" /><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8" /><path d="M10 12h4" />',
 		image: '<rect width="18" height="18" x="3" y="3" rx="2" ry="2" /><circle cx="9" cy="9" r="2" /><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />',
+		book: '<path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20" />',
 		markdown: '<rect x="3" y="5" width="18" height="14" rx="2" /><path d="M7 15V9l3 3 3-3v6" /><path d="m15 11 2 2 2-2" />',
 		list: '<path d="M3 5h.01" /><path d="M3 12h.01" /><path d="M3 19h.01" /><path d="M8 5h13" /><path d="M8 12h13" /><path d="M8 19h13" />',
 		grid: '<rect width="7" height="7" x="3" y="3" rx="1" /><rect width="7" height="7" x="14" y="3" rx="1" /><rect width="7" height="7" x="14" y="14" rx="1" /><rect width="7" height="7" x="3" y="14" rx="1" />',
@@ -93,6 +94,9 @@
 		'alert-circle': '<circle cx="12" cy="12" r="10" /><line x1="12" x2="12" y1="8" y2="12" /><line x1="12" x2="12.01" y1="16" y2="16" />',
 	} as const;
 
+	// Alternate names resolving to the same path data.
+	const ICONS = { ...GLYPHS, alert: GLYPHS.warning } as const;
+
 	export type IconName = keyof typeof ICONS;
 
 	/** True when `s` is a registered glyph name (vs. e.g. a raw emoji string). */

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

@@ -1,4 +1,5 @@
 declare const ICONS: {
+    readonly alert: "<path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" /><path d=\"M12 9v4\" /><path d=\"M12 17h.01\" />";
     readonly back: "<path d=\"m12 19-7-7 7-7\" /><path d=\"M19 12H5\" />";
     readonly 'arrow-right': "<path d=\"M5 12h14\" /><path d=\"m12 5 7 7-7 7\" />";
     readonly 'arrow-up': "<path d=\"m5 12 7-7 7 7\" /><path d=\"M12 19V5\" />";
@@ -39,6 +40,7 @@ declare const ICONS: {
     readonly folder: "<path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\" />";
     readonly archive: "<rect width=\"20\" height=\"5\" x=\"2\" y=\"3\" rx=\"1\" /><path d=\"M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8\" /><path d=\"M10 12h4\" />";
     readonly image: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" ry=\"2\" /><circle cx=\"9\" cy=\"9\" r=\"2\" /><path d=\"m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21\" />";
+    readonly book: "<path d=\"M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20\" />";
     readonly markdown: "<rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" /><path d=\"M7 15V9l3 3 3-3v6\" /><path d=\"m15 11 2 2 2-2\" />";
     readonly list: "<path d=\"M3 5h.01\" /><path d=\"M3 12h.01\" /><path d=\"M3 19h.01\" /><path d=\"M8 5h13\" /><path d=\"M8 12h13\" /><path d=\"M8 19h13\" />";
     readonly grid: "<rect width=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\" /><rect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\" /><rect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\" /><rect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\" />";

package/dist/components/atoms/Input.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
 	// Text input primitive. Owns its styling from theme tokens; supports
 	// `bind:value` and passes through every native <input> attribute. `mono`
-	// switches to the monospace family (paths, tokens, env values).
+	// switches to the monospace family (paths, tokens, env values). A wrapper is
+	// rendered only when `icon` / `clearable` are used, so the bare <input> DOM
+	// stays as-is otherwise.
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import Icon, { type IconName } from './Icon.svelte';
 
 	// `size` shadows the native char-width attribute (unused in token-sized
 	// layouts) to expose a height preset instead.
@@ -15,6 +18,17 @@
 		/** Error state: danger border + aria-invalid (also styles if a consumer
 		 *  sets aria-invalid directly). */
 		invalid?: boolean;
+		/** Leading icon, inset inside the control. */
+		icon?: IconName;
+		/** Trailing clear (✕) button shown while the value is non-empty. */
+		clearable?: boolean;
+		onclear?: () => void;
+		clearLabel?: string;
+		shape?: 'square' | 'pill';
+		/** Fixed width (also `flex: none` so flex rows don't stretch it). */
+		width?: string;
+		/** Fires with the current value on Enter. */
+		onenter?: (value: string) => void;
 		class?: string;
 		value?: HTMLInputAttributes['value'];
 		el?: HTMLInputElement | null;
@@ -25,24 +39,73 @@
 		size = 'md',
 		grow = false,
 		invalid = false,
+		icon,
+		clearable = false,
+		onclear,
+		clearLabel = 'Clear',
+		shape = 'square',
+		width,
+		onenter,
+		onkeydown,
 		class: klass = '',
 		value = $bindable(),
 		el = $bindable(null),
 		...rest
 	}: Props = $props();
+
+	const wrapped = $derived(!!icon || clearable);
+
+	function handleKeydown(e: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+		onkeydown?.(e);
+		if (onenter && e.key === 'Enter' && !e.defaultPrevented) onenter(String(value ?? ''));
+	}
+
+	function clear() {
+		value = '';
+		onclear?.();
+		el?.focus();
+	}
 </script>
 
-<input
-	bind:this={el}
-	data-tsu="Input"
-	class="input {klass}"
-	class:mono
-	class:input-sm={size === 'sm'}
-	class:input-grow={grow}
-	bind:value
-	{...rest}
-	aria-invalid={invalid || undefined}
-/>
+{#snippet control()}
+	<input
+		bind:this={el}
+		data-tsu="Input"
+		class="input {klass}"
+		class:mono
+		class:input-sm={size === 'sm'}
+		class:input-grow={grow}
+		class:input-fixed={!!width && !wrapped}
+		class:input-pill={shape === 'pill'}
+		class:has-icon={!!icon}
+		class:has-clear={clearable}
+		style:width={wrapped ? undefined : width}
+		bind:value
+		{...rest}
+		onkeydown={onenter || onkeydown ? handleKeydown : undefined}
+		aria-invalid={invalid || undefined}
+	/>
+{/snippet}
+
+{#if wrapped}
+	<div
+		class="input-wrap"
+		data-part="wrap"
+		class:input-grow={grow}
+		class:input-fixed={!!width}
+		style:width
+	>
+		{#if icon}<span class="input-icon"><Icon name={icon} /></span>{/if}
+		{@render control()}
+		{#if clearable && value}
+			<button type="button" class="input-clear" aria-label={clearLabel} onclick={clear}>
+				<Icon name="x" />
+			</button>
+		{/if}
+	</div>
+{:else}
+	{@render control()}
+{/if}
 
 <style>
 	.input {
@@ -67,6 +130,13 @@
 		width: auto;
 		min-width: 0;
 	}
+	.input-fixed {
+		flex: none;
+	}
+	.input-pill {
+		border-radius: var(--r-pill);
+		padding-inline: var(--sp-4);
+	}
 	.input[aria-invalid='true'] {
 		border-color: var(--danger);
 	}
@@ -76,4 +146,46 @@
 	.mono {
 		font-family: var(--font-mono);
 	}
+
+	.input-wrap {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+	}
+	.input-wrap .input {
+		width: 100%;
+	}
+	.has-icon {
+		padding-inline-start: calc(var(--sp-3) + 1em + var(--sp-2));
+	}
+	.has-clear {
+		padding-inline-end: calc(var(--sp-3) + 1em + var(--sp-2));
+	}
+	.input-icon,
+	.input-clear {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		color: var(--text-faint);
+		pointer-events: none;
+	}
+	.input-icon {
+		left: var(--sp-3);
+	}
+	.input-clear {
+		right: var(--sp-2);
+		pointer-events: auto;
+		border: 0;
+		background: transparent;
+		padding: 0 var(--sp-1);
+		cursor: pointer;
+		border-radius: var(--r-sm);
+	}
+	.input-clear:hover,
+	.input-clear:focus-visible {
+		color: var(--text);
+	}
 </style>

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

@@ -1,4 +1,5 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
+import { type IconName } from './Icon.svelte';
 type Props = Omit<HTMLInputAttributes, 'size'> & {
     mono?: boolean;
     size?: 'sm' | 'md';
@@ -8,6 +9,17 @@ type Props = Omit<HTMLInputAttributes, 'size'> & {
     /** Error state: danger border + aria-invalid (also styles if a consumer
      *  sets aria-invalid directly). */
     invalid?: boolean;
+    /** Leading icon, inset inside the control. */
+    icon?: IconName;
+    /** Trailing clear (✕) button shown while the value is non-empty. */
+    clearable?: boolean;
+    onclear?: () => void;
+    clearLabel?: string;
+    shape?: 'square' | 'pill';
+    /** Fixed width (also `flex: none` so flex rows don't stretch it). */
+    width?: string;
+    /** Fires with the current value on Enter. */
+    onenter?: (value: string) => void;
     class?: string;
     value?: HTMLInputAttributes['value'];
     el?: HTMLInputElement | null;

package/dist/components/layouts/NavItem.svelte

@@ -6,6 +6,8 @@
 	// collapses to a small dot indicator so the count cue survives the rail.
 	// `title`/`aria-label` carry the name so the icon-only state stays accessible
 	// and shows a tooltip. Renders an <a> when `href` is set, else a <button>.
+	// The glyph is `iconChildren` (raw 24×24 SVG content), else `iconPath`
+	// (single path d), else the registry `icon`.
 	import type { Snippet } from 'svelte';
 	import Icon from '../atoms/Icon.svelte';
 	import type { IconName } from '../atoms/Icon.svelte';
@@ -15,19 +17,31 @@
 
 	let {
 		icon,
+		iconChildren,
+		iconPath,
+		iconSize = 18,
 		label,
 		href,
 		active = false,
+		activeStyle = 'fill',
 		onclick,
 		badge,
 		badgeTone = 'neutral',
 		children,
 		...rest
 	}: {
-		icon: IconName;
+		icon?: IconName;
+		/** Raw 24×24 SVG content, for glyphs outside the registry. Wins over `iconPath` and `icon`. */
+		iconChildren?: Snippet;
+		/** Single `<path d>` for a 24×24 outline glyph. Wins over `icon`. */
+		iconPath?: string;
+		iconSize?: number;
 		label: string;
 		href?: string;
 		active?: boolean;
+		/** 'fill' = accent-tinted pill with a rounded left marker; 'bar' = lighter
+		 *  tint with a flat 2px inset accent bar. */
+		activeStyle?: 'fill' | 'bar';
 		onclick?: (e: MouseEvent) => void;
 		/** Optional trailing count pill (e.g. unread / missing items). When the
 		 *  item is `active` it adopts the accent fill; otherwise it uses `badgeTone`. */
@@ -49,13 +63,20 @@
 	type={href ? undefined : 'button'}
 	class="nav-item"
 	class:active
+	class:bar={activeStyle === 'bar'}
 	title={label}
 	aria-label={label}
 	aria-current={active ? 'page' : undefined}
 	{onclick}
 	{...rest}
 >
-	<Icon name={icon} size={18} />
+	{#if iconChildren}
+		<Icon size={iconSize}>{@render iconChildren()}</Icon>
+	{:else if iconPath}
+		<Icon size={iconSize}><path d={iconPath} /></Icon>
+	{:else if icon}
+		<Icon name={icon} size={iconSize} />
+	{/if}
 	<span class="nav-label">{label}</span>
 	{#if hasBadge}
 		<span class="nav-trail">
@@ -101,7 +122,7 @@
 	}
 	/* Active-route accent inset: a left rail marker that survives the icon-rail
 	   collapse (the tint background does too, but the marker reads at a glance). */
-	.nav-item.active::before {
+	.nav-item.active:not(.bar)::before {
 		content: '';
 		position: absolute;
 		left: 0;
@@ -112,6 +133,12 @@
 		border-radius: var(--r-pill);
 		background: var(--accent);
 	}
+	.nav-item.bar.active {
+		background: color-mix(in srgb, var(--accent) 10%, transparent);
+		box-shadow: inset 2px 0 0 var(--accent);
+		border-start-start-radius: 0;
+		border-end-start-radius: 0;
+	}
 	.nav-label {
 		flex: 1;
 		min-width: 0; /* allow the label to shrink/ellipsis instead of overflowing */

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

@@ -2,10 +2,18 @@ import type { Snippet } from 'svelte';
 import type { IconName } from '../atoms/Icon.svelte';
 type BadgeTone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
 type $$ComponentProps = {
-    icon: IconName;
+    icon?: IconName;
+    /** Raw 24×24 SVG content, for glyphs outside the registry. Wins over `iconPath` and `icon`. */
+    iconChildren?: Snippet;
+    /** Single `<path d>` for a 24×24 outline glyph. Wins over `icon`. */
+    iconPath?: string;
+    iconSize?: number;
     label: string;
     href?: string;
     active?: boolean;
+    /** 'fill' = accent-tinted pill with a rounded left marker; 'bar' = lighter
+     *  tint with a flat 2px inset accent bar. */
+    activeStyle?: 'fill' | 'bar';
     onclick?: (e: MouseEvent) => void;
     /** Optional trailing count pill (e.g. unread / missing items). When the
      *  item is `active` it adopts the accent fill; otherwise it uses `badgeTone`. */

package/dist/components/molecules/Field.svelte

@@ -10,6 +10,7 @@
 		for: forId,
 		hint,
 		error,
+		grow = false,
 		class: klass = '',
 		children
 	}: {
@@ -17,12 +18,14 @@
 		for?: string;
 		hint?: string;
 		error?: string;
+		/** Fill the available width of a flex/Cluster row (flex: 1). */
+		grow?: boolean;
 		class?: string;
 		children?: Snippet;
 	} = $props();
 </script>
 
-<div class="field {klass}" data-tsu="Field">
+<div class="field {klass}" class:field-grow={grow} data-tsu="Field">
 	{#if label}
 		{#if forId}
 			<label class="label" for={forId}>{label}</label>
@@ -41,6 +44,10 @@
 		flex-direction: column;
 		gap: var(--sp-1);
 	}
+	.field-grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
 	.label {
 		font-size: var(--fs-sm);
 		font-weight: var(--fw-medium);

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

@@ -4,6 +4,8 @@ type $$ComponentProps = {
     for?: string;
     hint?: string;
     error?: string;
+    /** Fill the available width of a flex/Cluster row (flex: 1). */
+    grow?: boolean;
     class?: string;
     children?: Snippet;
 };

package/dist/components/molecules/FilterInput.svelte

@@ -51,6 +51,12 @@
 		autoQuote = true,
 		showClear = true,
 		icon = 'search',
+		size = 'md',
+		shape = 'square',
+		surface = 'base',
+		hotkey,
+		showHotkey = false,
+		grow = false,
 		onchange,
 		onsubmit,
 		inline,
@@ -70,6 +76,18 @@
 		showClear?: boolean;
 		/** Leading icon; pass `null` to hide it. */
 		icon?: IconName | null;
+		/** `sm` renders a compact-toolbar bar (`--control-height-compact`). */
+		size?: 'sm' | 'md';
+		shape?: 'square' | 'pill';
+		/** Theme-aware surface shade of the bar (mirrors Card). */
+		surface?: 'base' | 'raised' | 'sunken';
+		/** Key (e.g. `'/'`) that focuses the input when pressed outside an editable
+		 *  element and without modifiers. */
+		hotkey?: string;
+		/** Render the hotkey as a `<kbd>` hint, hidden on focus / when non-empty. */
+		showHotkey?: boolean;
+		/** Fill the available width of a flex/Cluster row (flex: 1). */
+		grow?: boolean;
 		/** Fires the parsed AST on every change — feed this to your backend. */
 		onchange?: (query: Query, raw: string) => void;
 		/** Fires on Enter / clear / chip-remove with the raw query string. */
@@ -93,8 +111,29 @@
 	let active = $state(0);
 	let open = $state(false);
 	let keyboardNavigation = $state(false);
+	let focused = $state(false);
 	let reqId = 0;
 
+	function isEditable(target: EventTarget | null): boolean {
+		if (!(target instanceof HTMLElement)) return false;
+		if (target.isContentEditable) return true;
+		return ['INPUT', 'TEXTAREA', 'SELECT'].includes(target.tagName);
+	}
+
+	$effect(() => {
+		if (!hotkey) return;
+		const key = hotkey;
+		function onHotkey(e: KeyboardEvent) {
+			if (e.key !== key || e.defaultPrevented) return;
+			if (e.ctrlKey || e.metaKey || e.altKey) return;
+			if (isEditable(e.target)) return;
+			e.preventDefault();
+			el?.focus();
+		}
+		document.addEventListener('keydown', onHotkey);
+		return () => document.removeEventListener('keydown', onHotkey);
+	});
+
 	// Parsed view (drives the onchange AST + the snippet context).
 	const ast = $derived(parse(value, schema));
 	const chips = $derived(filters(ast));
@@ -256,7 +295,15 @@
 	};
 </script>
 
-<div class="fi" data-tsu="FilterInput">
+<div
+	class="fi"
+	class:fi--sm={size === 'sm'}
+	class:fi--pill={shape === 'pill'}
+	class:surface-raised={surface === 'raised'}
+	class:surface-sunken={surface === 'sunken'}
+	class:fi--grow={grow}
+	data-tsu="FilterInput"
+>
 	<div class="fi__bar">
 		{#if icon}<span class="fi__icon"><Icon name={icon} label="Search" /></span>{/if}
 		{#if inline}{@render inline(ctx)}{/if}
@@ -272,10 +319,19 @@
 			onkeyup={(e) => {
 				if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') refresh();
 			}}
-			onfocus={refresh}
-			onblur={() => setTimeout(() => (open = false), 120)}
+			onfocus={() => {
+				focused = true;
+				refresh();
+			}}
+			onblur={() => {
+				focused = false;
+				setTimeout(() => (open = false), 120);
+			}}
 			{onkeydown}
 		/>
+		{#if showHotkey && hotkey && !focused && !value}
+			<kbd class="fi__kbd" aria-hidden="true">{hotkey}</kbd>
+		{/if}
 		{#if showClear && value}
 			<button
 				type="button"
@@ -324,16 +380,45 @@
 	.fi {
 		position: relative;
 	}
+	.fi--grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
 	.fi__bar {
 		display: flex;
 		align-items: center;
 		gap: var(--sp-2);
 		padding: 0 var(--sp-3);
-		min-height: 44px;
+		min-height: var(--control-height-default);
 		background: var(--bg-elevated);
 		border: 1px solid var(--border-strong);
 		border-radius: var(--r-md);
 	}
+	.fi--sm .fi__bar {
+		min-height: var(--control-height-compact);
+	}
+	.fi--sm .fi__input {
+		font-size: var(--fs-sm);
+	}
+	.fi--pill .fi__bar {
+		border-radius: var(--r-pill);
+		padding-inline: var(--sp-4);
+	}
+	.surface-raised .fi__bar {
+		background: var(--surface);
+	}
+	.surface-sunken .fi__bar {
+		background: var(--bg-elevated-2);
+	}
+	.fi__kbd {
+		font-family: var(--font-mono);
+		font-size: var(--fs-xs);
+		line-height: 1;
+		color: var(--text-faint);
+		border: 1px solid var(--border);
+		border-radius: var(--r-sm);
+		padding: 2px var(--sp-1);
+	}
 	.fi__bar:focus-within {
 		border-color: var(--accent);
 		box-shadow: 0 0 0 3px var(--accent-dim);

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

@@ -36,6 +36,18 @@ type $$ComponentProps = {
     showClear?: boolean;
     /** Leading icon; pass `null` to hide it. */
     icon?: IconName | null;
+    /** `sm` renders a compact-toolbar bar (`--control-height-compact`). */
+    size?: 'sm' | 'md';
+    shape?: 'square' | 'pill';
+    /** Theme-aware surface shade of the bar (mirrors Card). */
+    surface?: 'base' | 'raised' | 'sunken';
+    /** Key (e.g. `'/'`) that focuses the input when pressed outside an editable
+     *  element and without modifiers. */
+    hotkey?: string;
+    /** Render the hotkey as a `<kbd>` hint, hidden on focus / when non-empty. */
+    showHotkey?: boolean;
+    /** Fill the available width of a flex/Cluster row (flex: 1). */
+    grow?: boolean;
     /** Fires the parsed AST on every change — feed this to your backend. */
     onchange?: (query: Query, raw: string) => void;
     /** Fires on Enter / clear / chip-remove with the raw query string. */

package/dist/components/organisms/DataTable.svelte

@@ -18,6 +18,9 @@
 		/** Drop the column when the table's own box is narrower than the breakpoint
 		 *  (sm 30rem, md 48rem, lg 64rem). */
 		hideBelow?: 'sm' | 'md' | 'lg';
+		/** Placement inside the stacked card (`responsive="stack"` only). Columns
+		 *  without a role render as `label: value` detail lines. */
+		role?: 'title' | 'detail' | 'meta' | 'actions' | 'hidden';
 	}
 </script>
 
@@ -50,7 +53,9 @@
 		loading = false,
 		loadingLabel = 'Loading…',
 		onloadmore,
-		loadMoreLabel = 'Load more'
+		loadMoreLabel = 'Load more',
+		responsive = 'scroll',
+		stackBelow = '48rem'
 	}: {
 		columns: Column<T>[];
 		rows: T[];
@@ -82,8 +87,38 @@
 		/** Renders a footer "load more" button that calls this. */
 		onloadmore?: () => void;
 		loadMoreLabel?: string;
+		/** `stack` renders each row as a card once the table's own box is narrower
+		 *  than `stackBelow`; `scroll` (default) keeps a horizontal scroller. */
+		responsive?: 'scroll' | 'stack';
+		/** Width (px/em/rem) under which `stack` mode kicks in. */
+		stackBelow?: string;
 	} = $props();
 
+	let wrapEl = $state<HTMLDivElement | null>(null);
+	let stacked = $state(false);
+
+	function toPx(length: string, el: HTMLElement): number {
+		const n = Number.parseFloat(length);
+		const fontSize = (node: Element) => Number.parseFloat(getComputedStyle(node).fontSize);
+		if (length.endsWith('rem')) return n * fontSize(document.documentElement);
+		if (length.endsWith('em')) return n * fontSize(el);
+		return n;
+	}
+
+	$effect(() => {
+		if (responsive !== 'stack' || !wrapEl) {
+			stacked = false;
+			return;
+		}
+		const el = wrapEl;
+		const limit = toPx(stackBelow, el);
+		const observer = new ResizeObserver(([entry]) => {
+			stacked = entry.contentRect.width < limit;
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	});
+
 	let sortKey = $state<string | null>(null);
 	let sortDir = $state<'asc' | 'desc'>('asc');
 
@@ -121,7 +156,15 @@
 	});
 </script>
 
-<div class="dt-scroll" data-tsu="DataTable" data-size={size} aria-busy={loading || undefined}>
+<div
+	bind:this={wrapEl}
+	class="dt-scroll"
+	class:dt-stack={responsive === 'stack'}
+	data-tsu="DataTable"
+	data-size={size}
+	data-stacked={stacked || undefined}
+	aria-busy={loading || undefined}
+>
 	<table
 		class="dt"
 		class:sticky={stickyHeader}
@@ -199,9 +242,11 @@
 							<td
 								data-part="cell"
 								data-hide-below={col.hideBelow}
+								data-role={responsive === 'stack' ? (col.role ?? 'detail') : undefined}
+								data-label={responsive === 'stack' ? col.label : undefined}
 								class:truncate={col.truncate}
 								class:nowrap={col.nowrap}
-								style:text-align={col.align ?? 'left'}
+								style:text-align={stacked ? undefined : (col.align ?? 'left')}
 							>
 								{#if cellSnippets[col.key]}
 									{@render cellSnippets[col.key](row)}
@@ -389,6 +434,91 @@
 			display: none;
 		}
 	}
+	/* Stacked cards: the <table> stays a table for AT, but every row lays out as
+	   a wrapping flex row (title | actions, detail lines, trailing meta cluster).
+	   The header is clipped, not removed. */
+	[data-stacked] {
+		overflow-x: visible;
+	}
+	[data-stacked] thead th {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border: 0;
+	}
+	[data-stacked] tbody,
+	[data-stacked] tfoot,
+	[data-stacked] td {
+		display: block;
+	}
+	[data-stacked] tr {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		gap: var(--sp-1) var(--sp-3);
+		padding: var(--sp-3);
+		border-bottom: 1px solid var(--border);
+	}
+	[data-stacked] tbody tr:last-child {
+		border-bottom: none;
+	}
+	[data-stacked] td {
+		flex: 0 0 100%;
+		min-width: 0;
+		padding: 0;
+		border: 0;
+	}
+	[data-stacked] td.truncate {
+		max-width: none;
+	}
+	[data-stacked] tr.toned td:first-child {
+		box-shadow: none;
+	}
+	[data-stacked] tr.toned {
+		box-shadow: inset 3px 0 0 var(--dt-tone);
+	}
+	[data-stacked] td[data-role='title'] {
+		flex: 1 1 0;
+		order: -2;
+		font-weight: var(--fw-semibold);
+		font-size: var(--fs-md);
+		color: var(--text);
+	}
+	[data-stacked] td[data-role='detail']::before {
+		content: attr(data-label) ': ';
+		color: var(--text-muted);
+	}
+	[data-stacked] td[data-role='meta'] {
+		flex: none;
+		order: 1;
+		font-family: var(--font-mono);
+		font-size: var(--fs-xs);
+		color: var(--text-muted);
+	}
+	[data-stacked] td[data-role='meta']::before {
+		content: attr(data-label) ' ';
+		color: var(--text-faint);
+	}
+	[data-stacked] td[data-role='actions'],
+	[data-stacked] td.dt-actions {
+		flex: none;
+		order: -1;
+		margin-inline-start: auto;
+		width: auto;
+		opacity: 1;
+	}
+	[data-stacked] td[data-role='hidden'] {
+		display: none;
+	}
+	[data-stacked] td.dt-empty,
+	[data-stacked] td.dt-more {
+		text-align: center;
+	}
 	.dt-empty {
 		text-align: center;
 		color: var(--text-faint);

package/dist/components/organisms/DataTable.svelte.d.ts

@@ -16,6 +16,9 @@ export interface Column<T> {
     /** Drop the column when the table's own box is narrower than the breakpoint
      *  (sm 30rem, md 48rem, lg 64rem). */
     hideBelow?: 'sm' | 'md' | 'lg';
+    /** Placement inside the stacked card (`responsive="stack"` only). Columns
+     *  without a role render as `label: value` detail lines. */
+    role?: 'title' | 'detail' | 'meta' | 'actions' | 'hidden';
 }
 import type { Snippet } from 'svelte';
 declare function $$render<T>(): {
@@ -50,6 +53,11 @@ declare function $$render<T>(): {
         /** Renders a footer "load more" button that calls this. */
         onloadmore?: () => void;
         loadMoreLabel?: string;
+        /** `stack` renders each row as a card once the table's own box is narrower
+         *  than `stackBelow`; `scroll` (default) keeps a horizontal scroller. */
+        responsive?: "scroll" | "stack";
+        /** Width (px/em/rem) under which `stack` mode kicks in. */
+        stackBelow?: string;
     };
     exports: {};
     bindings: "";

package/dist/components/organisms/FilterSearchBar.svelte

@@ -24,6 +24,12 @@
 		placeholder = 'artist:"Daft Punk" AND year>=2000',
 		showChips = true,
 		autoQuote = true,
+		size = 'md',
+		shape = 'square',
+		surface = 'base',
+		hotkey,
+		showHotkey = false,
+		grow = false,
 		onchange,
 		onsubmit
 	}: {
@@ -39,6 +45,13 @@
 		 * the quotes. Set false for bare typing where spaces split the value.
 		 */
 		autoQuote?: boolean;
+		/** Forwarded to FilterInput. */
+		size?: 'sm' | 'md';
+		shape?: 'square' | 'pill';
+		surface?: 'base' | 'raised' | 'sunken';
+		hotkey?: string;
+		showHotkey?: boolean;
+		grow?: boolean;
 		/** Fires the parsed AST on every change — feed this to your backend. */
 		onchange?: (query: Query, raw: string) => void;
 		/** Fires on Enter / clear / chip-remove with the raw query string. */
@@ -50,7 +63,20 @@
 	}
 </script>
 
-<FilterInput {schema} bind:value {placeholder} {autoQuote} {onchange} {onsubmit}>
+<FilterInput
+	{schema}
+	bind:value
+	{placeholder}
+	{autoQuote}
+	{size}
+	{shape}
+	{surface}
+	{hotkey}
+	{showHotkey}
+	{grow}
+	{onchange}
+	{onsubmit}
+>
 	{#snippet below({ filters: chips, text, remove })}
 		{#if showChips && (chips.length || text)}
 			<div class="fsb__chips">

package/dist/components/organisms/FilterSearchBar.svelte.d.ts

@@ -13,6 +13,13 @@ type $$ComponentProps = {
      * the quotes. Set false for bare typing where spaces split the value.
      */
     autoQuote?: boolean;
+    /** Forwarded to FilterInput. */
+    size?: 'sm' | 'md';
+    shape?: 'square' | 'pill';
+    surface?: 'base' | 'raised' | 'sunken';
+    hotkey?: string;
+    showHotkey?: boolean;
+    grow?: boolean;
     /** Fires the parsed AST on every change — feed this to your backend. */
     onchange?: (query: Query, raw: string) => void;
     /** Fires on Enter / clear / chip-remove with the raw query string. */

package/dist/index.d.ts

@@ -1,5 +1,7 @@
+export { artworkGradient, artworkHue, initials } from './artwork';
 export { autoresize } from './autoresize';
 export { copyToClipboard } from './clipboard';
+export { default as Artwork } from './components/atoms/Artwork.svelte';
 export { default as Badge } from './components/atoms/Badge.svelte';
 export { default as Button } from './components/atoms/Button.svelte';
 export { default as Card } from './components/atoms/Card.svelte';

package/dist/index.js

@@ -4,8 +4,10 @@
 // your app root:
 //   import '@dorsk/tsumikit/styles/app.css';
 // then use the components below.
+export { artworkGradient, artworkHue, initials } from './artwork';
 export { autoresize } from './autoresize';
 export { copyToClipboard } from './clipboard';
+export { default as Artwork } from './components/atoms/Artwork.svelte';
 export { default as Badge } from './components/atoms/Badge.svelte';
 export { default as Button } from './components/atoms/Button.svelte';
 export { default as Card } from './components/atoms/Card.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.25.0",
+  "version": "0.27.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",