@dorsk/tsumikit 0.36.0 → 0.37.1

package/README.md

@@ -147,7 +147,8 @@ for a light theme (`:root` defaults to dark, so dark themes may omit it).
 **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,
+is used), Textarea, Select (`options` array with per-option `icon`/`emoji`/`hint`/`disabled`;
+the trigger overlays the selected option's glyph + muted hint on the native control), Switch, Checkbox,
 Slider, Progress, Gauge (vertical consumption cell, `variant` continuous/segments,
 threshold tones via `warnAt`/`dangerAt`, `corner` snippet), Artwork (lazy cover image with seeded gradient + initials
 fallback, `aspect`, `status` overlay), Card (`tone` tints the surface for inline banners), Badge
@@ -158,12 +159,19 @@ always/hover/none, `align`), Icon (open registry — pass a `children` snippet f
 any custom SVG).
 
 **Molecules:** Field (`grow`), IconButton, SelectButton, Toggle, OptionButton, Modal,
-Popover, Menu, Tabs, RadioGroup, Tooltip, Accordion, CopyButton, FileButton,
+Popover, Menu (items take a free-form trailing `tag` + `tagTone`, or a `tag` snippet),
+Tabs, RadioGroup (`variant="rows"`: bordered rows, per-option `note`/`description`,
+`action(option)` trailing control that never toggles, `below(option)` inline panel),
+Tooltip, Accordion, CopyButton, FileButton,
 Dropzone, CodeBlock, Callout, EmptyState, ConfirmModal, Pagination, Toaster,
 ThemePicker, FontScalePicker, SectionHeader, KeyValue, LoadMore,
 GitRef (branch chip + PR link tinted by state + `+N −N` diff; `collapse`
 auto/never/glyph degrades to icons inside a narrow `.cq` container),
-CapBar (consumption track with a draggable, keyboard-steppable cap handle; `oninput` live, `onchange` on commit), WorkingDir
+CapBar (consumption track with a draggable, keyboard-steppable cap handle; `oninput` live, `onchange` on commit),
+Drawer (side-panel `<dialog>`: `side`, `width` clamped to the viewport, full-screen
+under 48rem; `nav` page column that turns into a horizontal strip on narrow
+screens, or `navMobile`; sticky `footer`; Escape / scrim / close button all close),
+Timestamp (`mode` date/time/datetime/relative/iso/`short-iso` for a locale-independent `YYYY-MM-DD`; `utc`; click for a details popover), WorkingDir
 (fish-style path chip: ancestors abbreviate left to right as the slot narrows,
 then the leaf ellipsises down to `minLeaf`; `full` skips the fit, `copy` makes it
 a copy-on-click button; candidates via the `workingDirCandidates` helper).
@@ -320,6 +328,8 @@ chip), `uppercase` (eyebrow group label), `divider`, `sticky` (pins at
 `--sticky-offset` / `--header-h` and publishes `--section-header-h` on its
 parent), `collapsible` + `bind:open` (title becomes a disclosure button with
 `aria-expanded`; `children` render beneath while open), `actions` snippet.
+`variant="group"` is the non-wrapping list-group row: `lead` snippet (dot /
+badge) · title · `count` · flexible 1px rule · `actions` (sort menu, eye toggle).
 
 `Card` gains `header` / `footer` snippets rendered outside the padded body
 behind a divider, `title` / `subtitle` / `actions` sugar that renders a

package/dist/components/atoms/Select.svelte

@@ -1,7 +1,30 @@
+<script lang="ts" module>
+	import type { IconName } from './Icon.svelte';
+
+	export type SelectOption = {
+		value: string;
+		label: string;
+		icon?: IconName;
+		emoji?: string;
+		/** Muted, right-aligned secondary text (e.g. "62%"). */
+		hint?: string;
+		disabled?: boolean;
+	};
+</script>
+
 <script lang="ts">
 	// Native <select> primitive. Owns its styling from theme tokens; supports
-	// `bind:value` and passes through every native attribute. Options are slotted
-	// children so call-sites keep full control over <option> rendering.
+	// `bind:value` and passes through every native attribute. Options are either
+	// slotted children (full control over <option> rendering) or an `options`
+	// array, which adds per-option icon/emoji/hint.
+	//
+	// A native <select> cannot render icons in its popup or trigger. With
+	// `options`, the trigger text is drawn by a pointer-transparent face layer
+	// (leading icon/emoji, label, muted right-aligned hint) laid over the native
+	// control whose own text is made transparent, so keyboard, focus, form
+	// submission and the platform popup stay native. The popup degrades
+	// gracefully: emoji and hint are folded into the option text
+	// (`🐼 personal · 62%`); an `icon` only shows in the trigger.
 	//
 	// The default variant hides the OS chevron (appearance: none) and draws its
 	// own, so the control looks identical across platforms and the chevron sits
@@ -42,6 +65,8 @@
 		'aria-invalid'?: HTMLSelectAttributes['aria-invalid'];
 		class?: string;
 		value?: HTMLSelectAttributes['value'];
+		/** Rich option list; rendered instead of `children` when given. */
+		options?: SelectOption[];
 		children?: Snippet;
 	};
 
@@ -58,6 +83,7 @@
 		'aria-invalid': ariaInvalid,
 		class: klass = '',
 		value = $bindable(),
+		options,
 		children,
 		...rest
 	}: Props = $props();
@@ -70,8 +96,23 @@
 
 	const small = $derived(compact || size === 'sm');
 	const showChevron = $derived(chevron ?? variant !== 'embedded');
+	const selected = $derived(options?.find((o) => o.value === value));
+	const hasFace = $derived(!!options && variant !== 'ghost');
+
+	const optionText = (o: SelectOption) =>
+		[o.emoji, o.label, o.hint && `· ${o.hint}`].filter(Boolean).join(' ');
 </script>
 
+{#snippet optionList()}
+	{#if options}
+		{#each options as o (o.value)}
+			<option value={o.value} disabled={o.disabled}>{optionText(o)}</option>
+		{/each}
+	{:else}
+		{@render children?.()}
+	{/if}
+{/snippet}
+
 {#if variant === 'ghost'}
 	<select
 		bind:this={el}
@@ -83,7 +124,7 @@
 		aria-describedby={ariaDescribedby ?? field?.describedBy}
 		aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
 	>
-		{@render children?.()}
+		{@render optionList()}
 	</select>
 {:else}
 	<div
@@ -100,14 +141,28 @@
 			class:select-sm={size === 'sm'}
 			class:w-auto={width === 'auto'}
 			class:embedded={variant === 'embedded'}
+			class:has-face={hasFace}
 			bind:value
 			{...rest}
 			id={id ?? field?.id}
 			aria-describedby={ariaDescribedby ?? field?.describedBy}
 			aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
 		>
-			{@render children?.()}
+			{@render optionList()}
 		</select>
+		{#if hasFace}
+			<span class="select-face" class:compact={small} aria-hidden="true">
+				{#if selected?.icon}
+					<Icon name={selected.icon} size={small ? 14 : 16} />
+				{:else if selected?.emoji}
+					<span class="select-emoji">{selected.emoji}</span>
+				{/if}
+				<span class="select-label">{selected?.label ?? ''}</span>
+				{#if selected?.hint}
+					<span class="select-hint">{selected.hint}</span>
+				{/if}
+			</span>
+		{/if}
 		{#if showChevron}
 			<span class="select-chevron" aria-hidden="true">
 				<Icon name="chevron-down" size={16} />
@@ -178,6 +233,59 @@
 	.select[aria-invalid='true']:focus {
 		border-color: var(--danger);
 	}
+	/* The face draws the trigger text; the native text underneath stays laid out
+	   (so `width="auto"` still sizes to it) but invisible. Popup options keep
+	   their own colour so the transparency does not inherit into the list. */
+	.select.has-face {
+		color: transparent;
+	}
+	.select.has-face option {
+		color: var(--text);
+		background: var(--bg);
+	}
+	.select-face {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		padding: 0 var(--sp-3);
+		padding-right: calc(var(--sp-3) + 1.25rem);
+		color: var(--text);
+		pointer-events: none;
+		overflow: hidden;
+	}
+	.select-wrap.no-chevron .select-face {
+		padding-right: var(--sp-3);
+	}
+	.select-face.compact {
+		padding: 0 var(--sp-2);
+		padding-right: calc(var(--sp-2) + 1rem);
+		font-size: var(--fs-xs);
+	}
+	.select-wrap.no-chevron .select-face.compact {
+		padding-right: var(--sp-2);
+	}
+	.select:disabled ~ .select-face {
+		color: var(--text-muted);
+	}
+	.select-emoji {
+		line-height: 1;
+	}
+	.select-label {
+		flex: 1 1 auto;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.select-hint {
+		flex: none;
+		margin-left: auto;
+		color: var(--text-muted);
+		font-size: var(--fs-xs);
+		font-variant-numeric: tabular-nums;
+	}
 	.select-chevron {
 		position: absolute;
 		top: 50%;

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

@@ -1,3 +1,13 @@
+import type { IconName } from './Icon.svelte';
+export type SelectOption = {
+    value: string;
+    label: string;
+    icon?: IconName;
+    emoji?: string;
+    /** Muted, right-aligned secondary text (e.g. "62%"). */
+    hint?: string;
+    disabled?: boolean;
+};
 import type { Snippet } from 'svelte';
 import type { HTMLSelectAttributes } from 'svelte/elements';
 type Props = Omit<HTMLSelectAttributes, 'size'> & {
@@ -21,6 +31,8 @@ type Props = Omit<HTMLSelectAttributes, 'size'> & {
     'aria-invalid'?: HTMLSelectAttributes['aria-invalid'];
     class?: string;
     value?: HTMLSelectAttributes['value'];
+    /** Rich option list; rendered instead of `children` when given. */
+    options?: SelectOption[];
     children?: Snippet;
 };
 declare const Select: import("svelte").Component<Props, {}, "value">;

package/dist/components/molecules/CapBar.svelte

@@ -184,7 +184,7 @@
 		position: relative;
 		height: var(--track-h);
 		border-radius: var(--r-pill);
-		background: color-mix(in oklab, var(--accent) 26%, var(--bg));
+		background: color-mix(in oklab, var(--fill) 26%, var(--bg));
 		cursor: ew-resize;
 		touch-action: none;
 		user-select: none;

package/dist/components/molecules/Drawer.svelte

@@ -0,0 +1,302 @@
+<script lang="ts">
+	// Side panel on the native <dialog>: top layer, focus trap, inert background,
+	// focus restoration and Escape come from the platform. Adds click-outside,
+	// body scroll lock, an optional page-nav column and a sticky footer.
+	import type { Snippet } from 'svelte';
+	import { browser } from '../../env';
+	import Icon, { type IconName } from '../atoms/Icon.svelte';
+	import IconButton from './IconButton.svelte';
+
+	let {
+		open = $bindable(),
+		side = 'right',
+		width = '620px',
+		navWidth = '150px',
+		title,
+		page,
+		icon,
+		onclose,
+		closeLabel = 'Close panel',
+		header,
+		nav,
+		navMobile,
+		children,
+		footer,
+		class: className,
+		style
+	}: {
+		/** Controlled visibility. When provided the `<dialog>` stays mounted and
+		 *  `showModal()`/`close()` follow the value; closing sets it back to false.
+		 *  Omit to open on mount (mount/unmount the component to show/hide). */
+		open?: boolean;
+		side?: 'left' | 'right';
+		/** Panel width on wide viewports (any CSS length); clamps to 100vw. Below
+		 *  48rem the panel is always full-screen. */
+		width?: string;
+		/** Width of the `nav` column on wide viewports. */
+		navWidth?: string;
+		title: string;
+		/** Name of the current page, shown after the title in the header. */
+		page?: string;
+		/** Leading header glyph. */
+		icon?: IconName;
+		onclose?: () => void;
+		closeLabel?: string;
+		/** Replaces the whole header row (title, page, close button). */
+		header?: Snippet;
+		/** Vertical page list beside the content on wide viewports; on narrow
+		 *  viewports it becomes a horizontal strip above the content unless
+		 *  `navMobile` is provided. */
+		nav?: Snippet;
+		navMobile?: Snippet;
+		children: Snippet;
+		footer?: Snippet;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const titleId = `drawer-title-${Math.random().toString(36).slice(2, 8)}`;
+
+	let dialogEl = $state<HTMLDialogElement | null>(null);
+	const controlled = $derived(open !== undefined);
+	const shown = $derived(!controlled || open === true);
+
+	$effect(() => {
+		if (!dialogEl) return;
+		if (!controlled) {
+			dialogEl.showModal();
+			return;
+		}
+		if (open && !dialogEl.open) dialogEl.showModal();
+		else if (!open && dialogEl.open) dialogEl.close();
+	});
+
+	$effect(() => {
+		if (!browser || !shown) return;
+		const previous = document.body.style.overflow;
+		document.body.style.overflow = 'hidden';
+		return () => {
+			document.body.style.overflow = previous;
+		};
+	});
+
+	function requestClose() {
+		if (controlled) open = false;
+		onclose?.();
+	}
+
+	function onDialogClick(e: MouseEvent) {
+		if (e.target === dialogEl) requestClose();
+	}
+</script>
+
+<dialog
+	bind:this={dialogEl}
+	data-tsu="Drawer"
+	class="drawer"
+	data-side={side}
+	aria-labelledby={header ? undefined : titleId}
+	aria-label={header ? title : undefined}
+	oncancel={(e) => {
+		e.preventDefault();
+		requestClose();
+	}}
+	onclose={() => {
+		if (controlled) open = false;
+	}}
+	onclick={onDialogClick}
+>
+	<div
+		class={['panel', className]}
+		class:has-nav={Boolean(nav)}
+		style:--drawer-w={width}
+		style:--drawer-nav-w={navWidth}
+		{style}
+	>
+		{#if header}
+			{@render header()}
+		{:else}
+			<div class="panel-head">
+				{#if icon}<span class="panel-icon"><Icon name={icon} size={18} /></span>{/if}
+				<span id={titleId} class="panel-title truncate">{title}</span>
+				{#if page}<span class="panel-page truncate">{page}</span>{/if}
+				<div class="spacer"></div>
+				<IconButton icon="x" label={closeLabel} onclick={requestClose} />
+			</div>
+		{/if}
+		{#if nav}
+			<nav class="panel-nav" class:has-mobile={Boolean(navMobile)}>{@render nav()}</nav>
+		{/if}
+		{#if navMobile}
+			<nav class="panel-nav-mobile">{@render navMobile()}</nav>
+		{/if}
+		<div class="panel-body">
+			{@render children()}
+		</div>
+		{#if footer}
+			<div class="panel-foot">{@render footer()}</div>
+		{/if}
+	</div>
+</dialog>
+
+<style>
+	.drawer {
+		margin: 0;
+		padding: 0;
+		border: 0;
+		background: none;
+		max-width: 100vw;
+		max-height: 100dvh;
+		width: 100%;
+		height: 100%;
+		color: var(--text);
+		display: flex;
+		justify-content: flex-end;
+	}
+	.drawer:not([open]) {
+		display: none;
+	}
+	.drawer[data-side='left'] {
+		justify-content: flex-start;
+	}
+	.drawer::backdrop {
+		background: rgba(0, 0, 0, 0.55);
+		animation: drawer-backdrop-in 0.18s var(--ease);
+	}
+	@keyframes drawer-backdrop-in {
+		from {
+			opacity: 0;
+		}
+	}
+
+	.panel {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		grid-template-rows: auto auto minmax(0, 1fr) auto;
+		grid-template-areas:
+			'head'
+			'nav'
+			'body'
+			'foot';
+		width: 100vw;
+		height: 100dvh;
+		background: var(--bg-elevated);
+		padding-top: var(--safe-top);
+		padding-bottom: var(--safe-bottom);
+		animation: drawer-slide-right 0.2s var(--ease);
+	}
+	.drawer[data-side='left'] .panel {
+		animation-name: drawer-slide-left;
+	}
+	@keyframes drawer-slide-right {
+		from {
+			transform: translateX(100%);
+		}
+	}
+	@keyframes drawer-slide-left {
+		from {
+			transform: translateX(-100%);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.drawer::backdrop,
+		.panel {
+			animation: none;
+		}
+	}
+
+	.panel-head {
+		grid-area: head;
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		padding: var(--sp-4);
+		border-bottom: 1px solid var(--border);
+	}
+	.panel-icon {
+		display: inline-flex;
+		flex: none;
+		color: var(--text-muted);
+	}
+	.panel-title {
+		font-size: var(--fs-lg);
+		font-weight: var(--fw-semibold);
+	}
+	.panel-page {
+		color: var(--text-muted);
+		font-size: var(--fs-sm);
+	}
+	.panel-page::before {
+		content: '·';
+		margin-right: var(--sp-2);
+	}
+
+	.panel-nav,
+	.panel-nav-mobile {
+		grid-area: nav;
+		display: flex;
+		gap: var(--sp-1);
+		padding: var(--sp-2);
+		border-bottom: 1px solid var(--border);
+		overflow-x: auto;
+		scrollbar-width: thin;
+	}
+	.panel-nav.has-mobile {
+		display: none;
+	}
+
+	.panel-body {
+		grid-area: body;
+		padding: var(--sp-4);
+		overflow-y: auto;
+		-webkit-overflow-scrolling: touch;
+	}
+	.panel-foot {
+		grid-area: foot;
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: var(--sp-2);
+		padding: var(--sp-4);
+		border-top: 1px solid var(--border);
+	}
+
+	@media (min-width: 48rem) {
+		.panel {
+			width: min(var(--drawer-w), 100vw);
+			padding-top: 0;
+			padding-bottom: 0;
+			border-left: 1px solid var(--border-strong);
+			box-shadow: var(--shadow-lg);
+			grid-template-columns: minmax(0, 1fr);
+			grid-template-rows: auto minmax(0, 1fr) auto;
+			grid-template-areas:
+				'head'
+				'body'
+				'foot';
+		}
+		.drawer[data-side='left'] .panel {
+			border-left: 0;
+			border-right: 1px solid var(--border-strong);
+		}
+		.panel.has-nav {
+			grid-template-columns: var(--drawer-nav-w) minmax(0, 1fr);
+			grid-template-areas:
+				'head head'
+				'nav body'
+				'foot foot';
+		}
+		.panel-nav,
+		.panel-nav.has-mobile {
+			display: flex;
+			flex-direction: column;
+			overflow-x: hidden;
+			overflow-y: auto;
+			border-bottom: 0;
+			border-right: 1px solid var(--border);
+		}
+		.panel-nav-mobile {
+			display: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,35 @@
+import type { Snippet } from 'svelte';
+import { type IconName } from '../atoms/Icon.svelte';
+type $$ComponentProps = {
+    /** Controlled visibility. When provided the `<dialog>` stays mounted and
+     *  `showModal()`/`close()` follow the value; closing sets it back to false.
+     *  Omit to open on mount (mount/unmount the component to show/hide). */
+    open?: boolean;
+    side?: 'left' | 'right';
+    /** Panel width on wide viewports (any CSS length); clamps to 100vw. Below
+     *  48rem the panel is always full-screen. */
+    width?: string;
+    /** Width of the `nav` column on wide viewports. */
+    navWidth?: string;
+    title: string;
+    /** Name of the current page, shown after the title in the header. */
+    page?: string;
+    /** Leading header glyph. */
+    icon?: IconName;
+    onclose?: () => void;
+    closeLabel?: string;
+    /** Replaces the whole header row (title, page, close button). */
+    header?: Snippet;
+    /** Vertical page list beside the content on wide viewports; on narrow
+     *  viewports it becomes a horizontal strip above the content unless
+     *  `navMobile` is provided. */
+    nav?: Snippet;
+    navMobile?: Snippet;
+    children: Snippet;
+    footer?: Snippet;
+    class?: string;
+    style?: string;
+};
+declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/molecules/Menu.svelte

@@ -5,6 +5,9 @@
 		icon?: import('../atoms/Icon.svelte').IconName;
 		danger?: boolean;
 		disabled?: boolean;
+		/** Free-form trailing pill ("admin", "pro", "beta"…), rendered as a Badge after the label. */
+		tag?: string;
+		tagTone?: import('svelte').ComponentProps<typeof import('../atoms/Badge.svelte').default>['tone'];
 	}
 </script>
 
@@ -13,10 +16,12 @@
 	// `menuitem`s navigable with ↑/↓/Home/End, activated with Enter/Space (and
 	// click). Selecting an item runs its action and closes the menu. Focus moves
 	// to the first item when the menu opens. Escape / click-outside close it
-	// (inherited from the native popover).
+	// (inherited from the native popover). An item's `tag` renders as a soft
+	// Badge pill after the label; the `tag` snippet replaces that pill.
 	import type { ComponentProps, Snippet } from 'svelte';
 	import Popover from './Popover.svelte';
 	import Icon from '../atoms/Icon.svelte';
+	import Badge from '../atoms/Badge.svelte';
 
 	type PopoverProps = ComponentProps<typeof Popover>;
 	type TriggerChrome = Pick<
@@ -40,6 +45,7 @@
 		label,
 		items,
 		trigger,
+		tag,
 		placement = 'bottom-start',
 		variant,
 		tone,
@@ -58,6 +64,8 @@
 		label: string;
 		items: MenuItem[];
 		trigger: Snippet;
+		/** Custom trailing content for items that carry a `tag`. */
+		tag?: Snippet<[MenuItem]>;
 		placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 	} & TriggerChrome = $props();
 
@@ -133,6 +141,15 @@
 			>
 				{#if item.icon}<Icon name={item.icon} />{/if}
 				<span>{item.label}</span>
+				{#if item.tag !== undefined}
+					{#if tag}
+						{@render tag(item)}
+					{:else}
+						<span class="menu-tag">
+							<Badge size="xs" tone={item.tagTone ?? 'neutral'} border={false}>{item.tag}</Badge>
+						</span>
+					{/if}
+				{/if}
 			</button>
 		{/each}
 	</div>
@@ -166,6 +183,12 @@
 	.menu-item.danger {
 		color: var(--danger);
 	}
+	.menu-tag {
+		display: inline-flex;
+		flex: none;
+		margin-inline-start: auto;
+		padding-inline-start: var(--sp-3);
+	}
 	.menu-item:disabled {
 		opacity: 0.45;
 		cursor: not-allowed;

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

@@ -4,6 +4,9 @@ export interface MenuItem {
     icon?: import('../atoms/Icon.svelte').IconName;
     danger?: boolean;
     disabled?: boolean;
+    /** Free-form trailing pill ("admin", "pro", "beta"…), rendered as a Badge after the label. */
+    tag?: string;
+    tagTone?: import('svelte').ComponentProps<typeof import('../atoms/Badge.svelte').default>['tone'];
 }
 import type { ComponentProps, Snippet } from 'svelte';
 import Popover from './Popover.svelte';
@@ -13,6 +16,8 @@ type $$ComponentProps = {
     label: string;
     items: MenuItem[];
     trigger: Snippet;
+    /** Custom trailing content for items that carry a `tag`. */
+    tag?: Snippet<[MenuItem]>;
     placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 } & TriggerChrome;
 declare const Menu: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/molecules/RadioGroup.svelte

@@ -3,40 +3,78 @@
 		value: string;
 		label: string;
 		hint?: string;
+		description?: string;
+		note?: string;
 		disabled?: boolean;
 	}
 </script>
 
 <script lang="ts">
-	// Radio group built on native <input type="radio"> sharing one `name`, so the
-	// browser handles single-selection, arrow-key navigation and form
-	// participation. Wrapped in a labelled `radiogroup` with token-styled dots.
-	// `value` is bindable.
+	import type { Snippet } from 'svelte';
+
+	// Native <input type="radio"> sharing one `name`: the browser handles
+	// single-selection, arrow keys and form participation. `variant="rows"`
+	// turns each option into a bordered row with optional trailing `action`
+	// (outside the label, so clicking it never toggles) and a `below` panel.
 	let {
 		options,
 		value = $bindable(),
 		name = `radio-${Math.random().toString(36).slice(2, 8)}`,
 		label,
+		variant = 'list',
+		action,
+		below,
 		class: klass = ''
 	}: {
 		options: RadioOption[];
 		value?: string;
 		name?: string;
 		label: string;
+		variant?: 'list' | 'rows';
+		action?: Snippet<[RadioOption]>;
+		below?: Snippet<[RadioOption]>;
 		class?: string;
 	} = $props();
 </script>
 
-<div role="radiogroup" aria-label={label} class="radio-group {klass}" data-tsu="RadioGroup">
+<div
+	role="radiogroup"
+	aria-label={label}
+	class="radio-group {klass}"
+	class:rows={variant === 'rows'}
+	data-tsu="RadioGroup"
+	data-variant={variant}
+>
 	{#each options as o (o.value)}
-		<label class="radio" class:disabled={o.disabled}>
-			<input type="radio" {name} value={o.value} bind:group={value} disabled={o.disabled} />
-			<span class="dot-ctl" aria-hidden="true"></span>
-			<span class="texts">
-				<span class="label-text">{o.label}</span>
-				{#if o.hint}<span class="hint">{o.hint}</span>{/if}
-			</span>
-		</label>
+		{#if variant === 'rows'}
+			<div class="row-wrap">
+				<div class="row" class:selected={o.value === value} class:disabled={o.disabled}>
+					<label class="radio">
+						<input type="radio" {name} value={o.value} bind:group={value} disabled={o.disabled} />
+						<span class="dot-ctl" aria-hidden="true"></span>
+						<span class="texts">
+							<span class="label-line">
+								<span class="label-text">{o.label}</span>
+								{#if o.note}<span class="note">{o.note}</span>{/if}
+							</span>
+							{#if o.description}<span class="description">{o.description}</span>{/if}
+							{#if o.hint}<span class="hint">{o.hint}</span>{/if}
+						</span>
+					</label>
+					{#if action}<span class="action">{@render action(o)}</span>{/if}
+				</div>
+				{#if below}<div class="below">{@render below(o)}</div>{/if}
+			</div>
+		{:else}
+			<label class="radio" class:disabled={o.disabled}>
+				<input type="radio" {name} value={o.value} bind:group={value} disabled={o.disabled} />
+				<span class="dot-ctl" aria-hidden="true"></span>
+				<span class="texts">
+					<span class="label-text">{o.label}</span>
+					{#if o.hint}<span class="hint">{o.hint}</span>{/if}
+				</span>
+			</label>
+		{/if}
 	{/each}
 </div>
 
@@ -54,8 +92,12 @@
 		font-size: var(--fs-sm);
 		color: var(--text);
 	}
-	.radio.disabled {
+	.radio.disabled,
+	.row.disabled .radio {
 		cursor: not-allowed;
+	}
+	.radio.disabled,
+	.row.disabled {
 		opacity: 0.45;
 	}
 	input {
@@ -102,9 +144,73 @@
 		display: flex;
 		flex-direction: column;
 		gap: 1px;
+		min-width: 0;
 	}
 	.hint {
 		font-size: var(--fs-xs);
 		color: var(--text-faint);
 	}
+
+	.rows {
+		gap: var(--sp-1);
+	}
+	.row-wrap {
+		display: flex;
+		flex-direction: column;
+	}
+	.row {
+		display: flex;
+		align-items: flex-start;
+		gap: var(--sp-2);
+		padding: var(--pad, var(--sp-2) var(--sp-3));
+		border: 1px solid var(--border);
+		border-radius: var(--r-md);
+		transition:
+			border-color 0.12s var(--ease),
+			background-color 0.12s var(--ease);
+	}
+	.row.selected {
+		border-color: var(--accent-dim);
+		background: var(--bg-elevated);
+	}
+	.row .radio {
+		flex: 1 1 auto;
+		min-width: 0;
+	}
+	.row .texts {
+		flex: 1 1 auto;
+	}
+	.label-line {
+		display: flex;
+		align-items: baseline;
+		gap: var(--sp-2);
+		min-width: 0;
+	}
+	.row .label-text {
+		font-weight: 600;
+	}
+	.note {
+		font-size: var(--fs-xs);
+		color: var(--text-faint);
+		white-space: nowrap;
+	}
+	.description {
+		font-size: var(--fs-xs);
+		color: var(--text-muted);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.action {
+		flex: none;
+		margin-left: auto;
+		display: flex;
+		align-items: center;
+	}
+	.below {
+		padding: var(--sp-2) 0 0 var(--sp-3);
+	}
+	.below:empty {
+		display: none;
+	}
 </style>

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

@@ -2,13 +2,19 @@ export interface RadioOption {
     value: string;
     label: string;
     hint?: string;
+    description?: string;
+    note?: string;
     disabled?: boolean;
 }
+import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     options: RadioOption[];
     value?: string;
     name?: string;
     label: string;
+    variant?: 'list' | 'rows';
+    action?: Snippet<[RadioOption]>;
+    below?: Snippet<[RadioOption]>;
     class?: string;
 };
 declare const RadioGroup: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/molecules/SectionHeader.svelte

@@ -4,7 +4,8 @@
 	// it, `sticky` pins it under the app header and publishes its height as
 	// `--section-header-h` on the parent so sibling sticky content can offset
 	// itself. `collapsible` turns the title into a disclosure button that
-	// toggles the `children` block rendered beneath.
+	// toggles the `children` block rendered beneath. `variant="group"` is the
+	// non-wrapping list-group row: `lead` · title · count · flexible rule · actions.
 	import type { Snippet } from 'svelte';
 	import Heading from '../atoms/Heading.svelte';
 	import Icon, { type IconName } from '../atoms/Icon.svelte';
@@ -16,6 +17,8 @@
 	let {
 		title,
 		label,
+		variant = 'default',
+		lead,
 		level = 2,
 		size,
 		subtitle,
@@ -36,6 +39,9 @@
 		title?: string;
 		/** Alias for `title`. */
 		label?: string;
+		variant?: 'default' | 'group';
+		/** Leading content before the title (status dot, badge); group rows. */
+		lead?: Snippet;
 		level?: 1 | 2 | 3 | 4;
 		size?: Size;
 		subtitle?: string;
@@ -76,6 +82,7 @@
 	data-tsu="SectionHeader"
 	class="section-header sh-{tone} {klass}"
 	class:sh-divider={divider}
+	class:sh-group={variant === 'group'}
 	class:sh-sticky={sticky}
 	class:sh-uppercase={uppercase}
 	class:sh-open={open}
@@ -99,6 +106,9 @@
 		{#if subtitle}
 			<Text variant="caption" class="sh-subtitle">{subtitle}</Text>
 		{/if}
+		{#if variant === 'group'}
+			<span class="sh-rule" aria-hidden="true"></span>
+		{/if}
 		{#if actions}
 			<div class="sh-actions">{@render actions()}</div>
 		{/if}
@@ -109,6 +119,9 @@
 </div>
 
 {#snippet head()}
+	{#if lead}
+		<span class="sh-lead">{@render lead()}</span>
+	{/if}
 	{#if hue !== undefined}
 		<span class="sh-swatch" style:--sh-hue={hue} aria-hidden="true"></span>
 	{/if}
@@ -148,6 +161,27 @@
 		padding-bottom: var(--sp-2);
 		border-bottom: 1px solid var(--border);
 	}
+	.sh-group > .sh-row {
+		flex-wrap: nowrap;
+		gap: var(--sp-2);
+	}
+	.sh-lead {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-2);
+		flex: none;
+	}
+	.sh-rule {
+		flex: 1 1 auto;
+		min-width: var(--sp-4);
+		height: 1px;
+		background: var(--border);
+	}
+	.sh-group .sh-actions {
+		flex: none;
+		flex-wrap: nowrap;
+		margin-inline-start: 0;
+	}
 	.sh-sticky {
 		position: sticky;
 		top: var(--sticky-offset, var(--header-h, 0));

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

@@ -6,6 +6,9 @@ type $$ComponentProps = {
     title?: string;
     /** Alias for `title`. */
     label?: string;
+    variant?: 'default' | 'group';
+    /** Leading content before the title (status dot, badge); group rows. */
+    lead?: Snippet;
     level?: 1 | 2 | 3 | 4;
     size?: Size;
     subtitle?: string;

package/dist/components/molecules/Timestamp.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	// A timestamp you can read five ways and inspect in one place. Inline it
-	// renders in the chosen `mode` (date / time / datetime / relative / iso),
+	// A timestamp you can read six ways and inspect in one place. Inline it
+	// renders in the chosen `mode` (date / time / datetime / relative / iso /
+	// short-iso),
 	// in the viewer's zone or UTC via the `utc` flag; by default clicking it
 	// opens a popover that lays out the same instant as ISO-UTC, local, relative,
 	// the IANA zone and the unix epoch — so the one value answers "when,
@@ -45,8 +46,8 @@
 		value: TimeInput | null | undefined;
 		/** Inline display mode. Default 'datetime'. */
 		mode?: TimestampMode;
-		/** Render the date/time/datetime modes in UTC rather than the viewer's
-		 *  zone. Default false. Ignored by 'iso' (always UTC) and 'relative'
+		/** Render the date/time/datetime/short-iso modes in UTC rather than the
+		 *  viewer's zone. Default false. Ignored by 'iso' (always UTC) and 'relative'
 		 *  (zoneless). Handy for calendar-date fields, where a local midnight-UTC
 		 *  value would otherwise show the wrong day. */
 		utc?: boolean;
@@ -101,7 +102,8 @@
 		{ id: 'time', name: 'Time' },
 		{ id: 'datetime', name: 'Date+time' },
 		{ id: 'relative', name: 'Relative' },
-		{ id: 'iso', name: 'ISO' }
+		{ id: 'iso', name: 'ISO' },
+		{ id: 'short-iso', name: 'YYYY-MM-DD' }
 	];
 
 	const rows = $derived(

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

@@ -7,8 +7,8 @@ type $$ComponentProps = {
     value: TimeInput | null | undefined;
     /** Inline display mode. Default 'datetime'. */
     mode?: TimestampMode;
-    /** Render the date/time/datetime modes in UTC rather than the viewer's
-     *  zone. Default false. Ignored by 'iso' (always UTC) and 'relative'
+    /** Render the date/time/datetime/short-iso modes in UTC rather than the
+     *  viewer's zone. Default false. Ignored by 'iso' (always UTC) and 'relative'
      *  (zoneless). Handy for calendar-date fields, where a local midnight-UTC
      *  value would otherwise show the wrong day. */
     utc?: boolean;

package/dist/components/molecules/WorkingDir.svelte

@@ -114,6 +114,7 @@
 		align-items: center;
 		flex: 1 1 0;
 		min-width: 0;
+		min-height: max-content;
 		overflow: hidden;
 	}
 	.rail.full {

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export { default as Link } from './components/atoms/Link.svelte';
 export { default as Progress } from './components/atoms/Progress.svelte';
 export { default as Scrim } from './components/atoms/Scrim.svelte';
 export { default as SegmentedProgress, type ProgressSegment, } from './components/atoms/SegmentedProgress.svelte';
+export type { SelectOption } from './components/atoms/Select.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
 export { default as Skeleton } from './components/atoms/Skeleton.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
@@ -41,6 +42,7 @@ export { default as CapBar } from './components/molecules/CapBar.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
 export { default as ConfirmModal } from './components/molecules/ConfirmModal.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
+export { default as Drawer } from './components/molecules/Drawer.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
 export { default as EmptyState } from './components/molecules/EmptyState.svelte';
 export { default as Field } from './components/molecules/Field.svelte';

package/dist/index.js

@@ -48,6 +48,7 @@ export { default as CapBar } from './components/molecules/CapBar.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
 export { default as ConfirmModal } from './components/molecules/ConfirmModal.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
+export { default as Drawer } from './components/molecules/Drawer.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
 export { default as EmptyState } from './components/molecules/EmptyState.svelte';
 // ---- molecules ----

package/dist/query/parser.js

@@ -110,7 +110,7 @@ function parseOr(sc, schema) {
         children.push(first);
     for (;;) {
         const kw = peekKeyword(sc);
-        if (!kw || kw.word !== 'OR')
+        if (kw?.word !== 'OR')
             break;
         sc.i = kw.next;
         const next = parseAnd(sc, schema);

package/dist/timestamp.d.ts

@@ -1,10 +1,10 @@
 export type TimeInput = Date | number | string;
 /**
  * Which slice of the instant the inline text shows. Orthogonal to the zone:
- * `date`/`time`/`datetime` honour the `utc` flag, while `iso` is always UTC
- * (by definition) and `relative` is zoneless.
+ * `date`/`time`/`datetime`/`short-iso` honour the `utc` flag, while `iso` is
+ * always UTC (by definition) and `relative` is zoneless.
  */
-export type TimestampMode = 'date' | 'time' | 'datetime' | 'relative' | 'iso';
+export type TimestampMode = 'date' | 'time' | 'datetime' | 'relative' | 'iso' | 'short-iso';
 /**
  * Coerce a loose input to a Date, or null when it's missing or can't be parsed.
  * Accepting null/undefined lets callers pass an optional field straight through
@@ -20,6 +20,12 @@ export declare function toISO(d: Date): string;
  * without the off-by-one a local midnight-UTC value otherwise shows.
  */
 export declare function toLocale(d: Date, parts?: 'date' | 'time' | 'datetime', utc?: boolean): string;
+/**
+ * Calendar date as `YYYY-MM-DD`, locale-independent — in UTC or, with
+ * `utc=false`, the viewer's zone (so a local evening past midnight UTC still
+ * reads as the viewer's day).
+ */
+export declare function toShortISO(d: Date, utc?: boolean): string;
 /** Unix epoch in whole seconds. */
 export declare function toEpochSeconds(d: Date): number;
 /** The viewer's IANA time zone — `Asia/Tokyo`, `UTC`, … */
@@ -38,7 +44,7 @@ export declare function localTimeZone(): string;
 export declare function relativeTime(value: TimeInput | null | undefined, now?: number, precision?: boolean): string;
 /**
  * Render a date in the chosen inline mode. `utc` selects UTC over the viewer's
- * zone for the date/time/datetime modes (ignored by `iso`, always UTC, and
- * `relative`, zoneless). Returns '' for unparseable input.
+ * zone for the date/time/datetime/short-iso modes (ignored by `iso`, always
+ * UTC, and `relative`, zoneless). Returns '' for unparseable input.
  */
 export declare function formatTimestamp(value: TimeInput | null | undefined, mode: TimestampMode, now?: number, utc?: boolean, precision?: boolean): string;

package/dist/timestamp.js

@@ -41,6 +41,18 @@ export function toLocale(d, parts = 'datetime', utc = false) {
     }
     return new Intl.DateTimeFormat(undefined, opts).format(d);
 }
+/**
+ * Calendar date as `YYYY-MM-DD`, locale-independent — in UTC or, with
+ * `utc=false`, the viewer's zone (so a local evening past midnight UTC still
+ * reads as the viewer's day).
+ */
+export function toShortISO(d, utc = true) {
+    const y = utc ? d.getUTCFullYear() : d.getFullYear();
+    const m = (utc ? d.getUTCMonth() : d.getMonth()) + 1;
+    const day = utc ? d.getUTCDate() : d.getDate();
+    const pad = (n, w = 2) => String(n).padStart(w, '0');
+    return `${pad(y, 4)}-${pad(m)}-${pad(day)}`;
+}
 /** Unix epoch in whole seconds. */
 export function toEpochSeconds(d) {
     return Math.floor(d.getTime() / 1000);
@@ -103,8 +115,8 @@ export function relativeTime(value, now = Date.now(), precision = false) {
 }
 /**
  * Render a date in the chosen inline mode. `utc` selects UTC over the viewer's
- * zone for the date/time/datetime modes (ignored by `iso`, always UTC, and
- * `relative`, zoneless). Returns '' for unparseable input.
+ * zone for the date/time/datetime/short-iso modes (ignored by `iso`, always
+ * UTC, and `relative`, zoneless). Returns '' for unparseable input.
  */
 export function formatTimestamp(value, mode, now, utc = false, precision = false) {
     const d = toDate(value);
@@ -113,6 +125,8 @@ export function formatTimestamp(value, mode, now, utc = false, precision = false
     switch (mode) {
         case 'iso':
             return toISO(d);
+        case 'short-iso':
+            return toShortISO(d, utc);
         case 'date':
         case 'time':
         case 'datetime':

package/package.json

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