@dorsk/tsumikit 0.35.1 → 0.37.0

package/README.md

@@ -147,8 +147,10 @@ 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,
-Slider, Progress, Artwork (lazy cover image with seeded gradient + initials
+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
 (`tone` semantic palette or `color` for any CSS colour, `size` xs/sm/md, `dot`,
 `icon`, `numeric`, `truncate`, `variant="text"`; all tints derive from
@@ -157,9 +159,24 @@ 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.
+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),
+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).
+Fieldset (bordered zone, legend rides the border; `droppable` makes it an HTML5
+drop target with `accepts`/`ondrop`/`dropHint` — keyboard alternative is the consumer's job).
 
 **Organisms:** DataTable (generic `<T>`, typed columns + cell snippets;
 `layout="fixed"` makes column widths authoritative, `Column.truncate` /
@@ -186,7 +203,9 @@ 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; `icon` from the
 registry, `iconPath` / `iconChildren` for custom glyphs, `activeStyle="bar"`
-for the inset-bar active look), Container, Stack
+for the inset-bar active look), MasterDetail (list + detail columns that
+become two pages — one pane at a time with a sticky 44px back header — below
+their own `breakpoint`, so `selected` can be driven from the URL), 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
@@ -309,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/cap-bar.d.ts

@@ -0,0 +1,8 @@
+export declare function clampCap(value: number, min?: number, max?: number): number;
+export declare function snapCap(value: number, step?: number, min?: number, max?: number): number;
+export declare function capFromPointer(clientX: number, rect: {
+    left: number;
+    width: number;
+}, step?: number, min?: number, max?: number): number;
+export declare function capKeyStep(key: string, shift: boolean, current: number, step?: number, min?: number, max?: number): number | null;
+export declare function capTone(value: number, cap: number, warnAt?: number): 'ok' | 'warn' | 'danger';

package/dist/cap-bar.js

@@ -0,0 +1,43 @@
+export function clampCap(value, min = 0, max = 100) {
+    if (Number.isNaN(value))
+        return min;
+    return Math.min(max, Math.max(min, value));
+}
+export function snapCap(value, step = 5, min = 0, max = 100) {
+    const s = step > 0 ? step : 1;
+    return clampCap(min + Math.round((value - min) / s) * s, min, max);
+}
+export function capFromPointer(clientX, rect, step = 5, min = 0, max = 100) {
+    if (rect.width <= 0)
+        return min;
+    const ratio = (clientX - rect.left) / rect.width;
+    return snapCap(min + ratio * (max - min), step, min, max);
+}
+export function capKeyStep(key, shift, current, step = 5, min = 0, max = 100) {
+    const delta = shift ? step * 5 : step;
+    switch (key) {
+        case 'ArrowRight':
+        case 'ArrowUp':
+            return snapCap(current + delta, step, min, max);
+        case 'ArrowLeft':
+        case 'ArrowDown':
+            return snapCap(current - delta, step, min, max);
+        case 'Home':
+            return min;
+        case 'End':
+            return max;
+        case 'PageUp':
+            return snapCap(current + step * 5, step, min, max);
+        case 'PageDown':
+            return snapCap(current - step * 5, step, min, max);
+        default:
+            return null;
+    }
+}
+export function capTone(value, cap, warnAt = 75) {
+    if (value >= cap)
+        return 'danger';
+    if (value >= warnAt)
+        return 'warn';
+    return 'ok';
+}

package/dist/components/atoms/Gauge.svelte

@@ -0,0 +1,165 @@
+<script lang="ts" module>
+	export type GaugeTone = 'ok' | 'warn' | 'danger';
+
+	export function clampPct(value: number): number {
+		return Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 0;
+	}
+
+	export function gaugeTone(value: number, warnAt = 70, dangerAt = 90): GaugeTone {
+		const v = clampPct(value);
+		if (v >= dangerAt) return 'danger';
+		if (v >= warnAt) return 'warn';
+		return 'ok';
+	}
+
+	export function litSegments(value: number, segments = 3): number {
+		const v = clampPct(value);
+		if (segments <= 0) return 0;
+		return Math.min(segments, Math.floor((v / 100) * segments));
+	}
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		value,
+		variant = 'continuous',
+		segments = 3,
+		tone,
+		warnAt = 70,
+		dangerAt = 90,
+		label,
+		as = 'div',
+		width,
+		height,
+		corner,
+		class: klass = '',
+		style = '',
+		...rest
+	}: {
+		value: number;
+		variant?: 'continuous' | 'segments';
+		// `segments` variant only: number of stacked bars, lit bottom-up.
+		segments?: number;
+		// Forces the fill colour; otherwise derived from `warnAt` / `dangerAt`.
+		tone?: GaugeTone;
+		warnAt?: number;
+		dangerAt?: number;
+		label?: string;
+		as?: 'div' | 'a' | 'button';
+		width?: string;
+		height?: string;
+		corner?: Snippet;
+		class?: string;
+		style?: string;
+		[key: string]: unknown;
+	} = $props();
+
+	const pct = $derived(clampPct(value));
+	const resolvedTone = $derived(tone ?? gaugeTone(pct, warnAt, dangerAt));
+	const lit = $derived(litSegments(pct, segments));
+	const segmentCount = $derived(Math.max(0, Math.floor(segments)));
+</script>
+
+<svelte:element
+	this={as}
+	data-tsu="Gauge"
+	class="gauge tone-{resolvedTone} {klass}"
+	class:interactive={as !== 'div'}
+	type={as === 'button' ? 'button' : undefined}
+	role="meter"
+	aria-label={label}
+	aria-valuemin={0}
+	aria-valuemax={100}
+	aria-valuenow={pct}
+	style:--gauge-w={width}
+	style:--gauge-h={height}
+	{style}
+	{...rest}
+>
+	{#if variant === 'segments'}
+		<span class="segments" style:--gauge-segments={segmentCount}>
+			{#each { length: segmentCount } as _, i (i)}
+				<span class="segment" class:lit={i < lit}></span>
+			{/each}
+		</span>
+	{:else}
+		<span class="fill" style:height="{pct}%"></span>
+	{/if}
+	{#if corner}
+		<span class="corner">{@render corner()}</span>
+	{/if}
+</svelte:element>
+
+<style>
+	.gauge {
+		position: relative;
+		display: inline-flex;
+		flex: none;
+		box-sizing: border-box;
+		width: var(--gauge-w, 0.875rem);
+		height: var(--gauge-h, 1.25rem);
+		margin: 0;
+		padding: 0;
+		border: 1px solid var(--border);
+		border-radius: var(--r-sm);
+		background: var(--bg-elevated-2);
+		overflow: visible;
+		color: inherit;
+		font: inherit;
+		text-decoration: none;
+		vertical-align: middle;
+	}
+	.interactive {
+		cursor: pointer;
+	}
+	.interactive:hover {
+		border-color: var(--gauge-fill);
+	}
+	.interactive:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
+	.tone-ok {
+		--gauge-fill: var(--ok);
+	}
+	.tone-warn {
+		--gauge-fill: var(--warn);
+	}
+	.tone-danger {
+		--gauge-fill: var(--danger);
+	}
+	.fill {
+		position: absolute;
+		inset: auto 0 0 0;
+		border-radius: calc(var(--r-sm) - 1px);
+		background: var(--gauge-fill);
+		transition: height 0.2s var(--ease), background 0.2s var(--ease);
+	}
+	.segments {
+		position: absolute;
+		inset: 2px;
+		display: flex;
+		flex-direction: column-reverse;
+		gap: 2px;
+	}
+	.segment {
+		flex: 1 1 0%;
+		border-radius: 2px;
+		background: var(--bg-elevated);
+		transition: background 0.2s var(--ease);
+	}
+	.segment.lit {
+		background: var(--gauge-fill);
+	}
+	.corner {
+		position: absolute;
+		right: -0.35em;
+		bottom: -0.35em;
+		display: inline-flex;
+		font-size: 0.625rem;
+		line-height: 1;
+		pointer-events: none;
+	}
+</style>

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

@@ -0,0 +1,24 @@
+export type GaugeTone = 'ok' | 'warn' | 'danger';
+export declare function clampPct(value: number): number;
+export declare function gaugeTone(value: number, warnAt?: number, dangerAt?: number): GaugeTone;
+export declare function litSegments(value: number, segments?: number): number;
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    value: number;
+    variant?: 'continuous' | 'segments';
+    segments?: number;
+    tone?: GaugeTone;
+    warnAt?: number;
+    dangerAt?: number;
+    label?: string;
+    as?: 'div' | 'a' | 'button';
+    width?: string;
+    height?: string;
+    corner?: Snippet;
+    class?: string;
+    style?: string;
+    [key: string]: unknown;
+};
+declare const Gauge: import("svelte").Component<$$ComponentProps, {}, "">;
+type Gauge = ReturnType<typeof Gauge>;
+export default Gauge;

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">;