@dorsk/tsumikit 0.38.0 → 0.39.0

package/dist/components/atoms/Switch.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
+	import type { ControlSize } from '../../size';
 	// Canonical on/off toggle (role="switch") — a pill track with a sliding knob.
-	// Owns its sizing/colors from theme tokens; the parent supplies `checked`
-	// and an `onclick` handler plus an accessible label/title.
+	// `checked` is bindable (clicking toggles it) and `onclick` still fires.
+	// `label` is the accessible name; `labelVisible` renders it beside the track.
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import { getFieldContext } from '../../field-context';
 
 	let {
-		checked = false,
+		checked = $bindable(false),
 		invalid = false,
 		label,
+		labelVisible = false,
+		size = 'md',
+		onclick,
 		id,
 		'aria-describedby': ariaDescribedby,
 		'aria-invalid': ariaInvalid,
@@ -18,6 +22,9 @@
 		checked?: boolean;
 		invalid?: boolean;
 		label: string;
+		/** Render `label` as visible text beside the track. */
+		labelVisible?: boolean;
+		size?: ControlSize;
 		id?: string;
 		'aria-describedby'?: string | null;
 		'aria-invalid'?: HTMLButtonAttributes['aria-invalid'];
@@ -25,23 +32,42 @@
 
 	const field = getFieldContext();
 	const isInvalid = $derived(invalid || !!field?.invalid);
+
+	function toggle(e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
+		onclick?.(e);
+		if (e.defaultPrevented) return;
+		checked = !checked;
+	}
 </script>
 
-<button
-	data-tsu="Switch"
-	{...rest}
-	type="button"
-	class="switch {klass}"
-	class:on={checked}
-	role="switch"
-	aria-checked={checked}
-	id={id ?? field?.id}
-	aria-describedby={ariaDescribedby ?? field?.describedBy}
-	aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
-	aria-label={label}
->
-	<span class="knob"></span>
-</button>
+{#snippet control()}
+	<button
+		data-tsu="Switch"
+		{...rest}
+		type="button"
+		class="switch {klass}"
+		class:on={checked}
+		class:switch-sm={size === 'sm'}
+		role="switch"
+		aria-checked={checked}
+		id={id ?? field?.id}
+		aria-describedby={ariaDescribedby ?? field?.describedBy}
+		aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
+		aria-label={labelVisible ? undefined : label}
+		onclick={toggle}
+	>
+		<span class="knob"></span>
+	</button>
+{/snippet}
+
+{#if labelVisible}
+	<label class="switch-row" class:switch-row-sm={size === 'sm'}>
+		{@render control()}
+		<span class="switch-label">{label}</span>
+	</label>
+{:else}
+	{@render control()}
+{/if}
 
 <style>
 	.switch {
@@ -76,6 +102,10 @@
 		transform: translateX(1.15rem);
 		background: var(--text-on-accent);
 	}
+	.switch:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
 	.switch:disabled {
 		opacity: 0.45;
 		cursor: not-allowed;
@@ -83,4 +113,26 @@
 	.switch[aria-invalid='true']:not(.on) {
 		border-color: var(--danger);
 	}
+	.switch-sm {
+		width: 2rem;
+		height: 1.2rem;
+	}
+	.switch-sm .knob {
+		width: 0.9rem;
+		height: 0.9rem;
+	}
+	.switch-sm.on .knob {
+		transform: translateX(0.8rem);
+	}
+	.switch-row {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-2);
+		cursor: pointer;
+		font-size: var(--fs-sm);
+		color: var(--text);
+	}
+	.switch-row-sm {
+		font-size: var(--fs-xs);
+	}
 </style>

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

@@ -1,12 +1,16 @@
+import type { ControlSize } from '../../size';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type $$ComponentProps = HTMLButtonAttributes & {
     checked?: boolean;
     invalid?: boolean;
     label: string;
+    /** Render `label` as visible text beside the track. */
+    labelVisible?: boolean;
+    size?: ControlSize;
     id?: string;
     'aria-describedby'?: string | null;
     'aria-invalid'?: HTMLButtonAttributes['aria-invalid'];
 };
-declare const Switch: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Switch: import("svelte").Component<$$ComponentProps, {}, "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/atoms/Text.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { canonicalTone, type Tone } from '../../tone';
 	// Text primitive: the ONLY place body/label/caption/code text and its bearing
 	// elements (<p>/<span>/<label>/<div> of pure text) are emitted. `variant` picks
 	// a token preset; `tone`/`weight`/`size` override individual axes; bare <Text>
@@ -9,39 +11,21 @@
 
 	type Size = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
 
-	let {
-		as = 'span',
-		variant,
-		tone = 'inherit',
-		weight,
-		size,
-		numeric = false,
-		truncate = false,
-		italic = false,
-		nowrap = false,
-		wrap = 'normal',
-		uppercase = false,
-		leading,
-		measure,
-		grow = false,
-		scale = true,
-		block = false,
-		class: klass = '',
-		children,
-		...rest
-	}: {
+	type Own = {
 		as?: 'span' | 'p' | 'div' | 'label';
 		// body: default reading text · label: form-label · caption: small meta ·
 		// code: monospace · eyebrow: small uppercase muted kicker. Omit for inline
 		// glue that should inherit its parent.
 		variant?: 'body' | 'label' | 'caption' | 'code' | 'eyebrow';
 		// `ok` and `success` are aliases.
-		tone?: 'inherit' | 'default' | 'muted' | 'faint' | 'ok' | 'success' | 'warn' | 'danger' | 'accent';
+		tone?: 'inherit' | 'default' | 'muted' | 'faint' | Tone;
 		weight?: 'normal' | 'medium' | 'semibold' | 'bold';
 		size?: Size;
 		// Tabular figures: digits share a fixed advance width so counts/percentages
 		// don't jitter as they change. Use for counters, timers, metrics.
 		numeric?: boolean;
+		/** Monospace family without the `code` variant's chip styling. */
+		mono?: boolean;
 		truncate?: boolean;
 		italic?: boolean;
 		nowrap?: boolean;
@@ -56,10 +40,33 @@
 		block?: boolean;
 		class?: string;
 		children?: Snippet;
-		[key: string]: unknown;
-	} = $props();
+	};
+	let {
+		as = 'span',
+		variant,
+		tone = 'inherit',
+		weight,
+		size,
+		numeric = false,
+		mono = false,
+		truncate = false,
+		italic = false,
+		nowrap = false,
+		wrap = 'normal',
+		uppercase = false,
+		leading,
+		measure,
+		grow = false,
+		scale = true,
+		block = false,
+		class: klass = '',
+		children,
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
 
-	const toneClass = $derived(tone === 'ok' ? 'success' : tone);
+	const toneClass = $derived(
+		tone === 'neutral' ? 'default' : canonicalTone(tone) === 'ok' ? 'success' : canonicalTone(tone)
+	);
 	const styleAttr = $derived(measure ? `max-width: ${measure}` : undefined);
 </script>
 
@@ -68,7 +75,7 @@
 	data-tsu="Text"
 	class="text {variant ? `v-${variant}` : ''} tone-{toneClass} {weight ? `fw-${weight}` : ''} {size
 		? `fs-${size}`
-		: ''} {numeric ? 'numeric' : ''} {truncate ? 'truncate' : ''} {leading ? `lh-${leading}` : ''} {wrap !==
+		: ''} {numeric ? 'numeric' : ''} {mono ? 'mono' : ''} {truncate ? 'truncate' : ''} {leading ? `lh-${leading}` : ''} {wrap !==
 	'normal'
 		? `wrap-${wrap}`
 		: ''} {klass}"
@@ -116,6 +123,9 @@
 		letter-spacing: 0.04em;
 	}
 	/* Tone (colour) — overrides variant colour. */
+	.mono {
+		font-family: var(--font-mono);
+	}
 	.tone-default {
 		color: var(--text);
 	}
@@ -134,6 +144,9 @@
 	.tone-danger {
 		color: var(--danger);
 	}
+	.tone-info {
+		color: var(--info);
+	}
 	.tone-accent {
 		color: var(--accent);
 	}

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

@@ -1,12 +1,16 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type Tone } from '../../tone';
 import type { Snippet } from 'svelte';
 type Size = 'xs' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl';
-type $$ComponentProps = {
+type Own = {
     as?: 'span' | 'p' | 'div' | 'label';
     variant?: 'body' | 'label' | 'caption' | 'code' | 'eyebrow';
-    tone?: 'inherit' | 'default' | 'muted' | 'faint' | 'ok' | 'success' | 'warn' | 'danger' | 'accent';
+    tone?: 'inherit' | 'default' | 'muted' | 'faint' | Tone;
     weight?: 'normal' | 'medium' | 'semibold' | 'bold';
     size?: Size;
     numeric?: boolean;
+    /** Monospace family without the `code` variant's chip styling. */
+    mono?: boolean;
     truncate?: boolean;
     italic?: boolean;
     nowrap?: boolean;
@@ -19,8 +23,8 @@ type $$ComponentProps = {
     block?: boolean;
     class?: string;
     children?: Snippet;
-    [key: string]: unknown;
 };
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
 declare const Text: import("svelte").Component<$$ComponentProps, {}, "">;
 type Text = ReturnType<typeof Text>;
 export default Text;

package/dist/components/atoms/Textarea.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { ControlSize } from '../../size';
 	// Multi-line text input primitive. Owns its styling from theme tokens;
 	// supports `bind:value` and passes through every native <textarea> attribute
 	// and event (Svelte 5 events are props, so `...rest` forwards them). `mono`
@@ -10,10 +11,9 @@
 	// handle on the top or bottom edge, styled like the Modal/AppShell grips: a
 	// centered pill that's a thicker portion of the border.
 	//
-	// With `autoresize`, only a `top` handle is offered and it sets a manual
-	// *floor* (min-height) rather than a fixed height: the textarea still grows
-	// with content, but dragging up reserves extra space. (A bottom handle makes
-	// no sense alongside content-driven sizing, so it's suppressed.)
+	// With `autoresize`, the handle (either edge) sets a manual *floor*
+	// (min-height) rather than a fixed height: the textarea still grows with
+	// content, but dragging reserves extra space. `rows` is the initial floor.
 	//
 	// `onsubmit` fires with the value on Enter (`submitOn="enter"`, Shift+Enter
 	// still inserts a newline) or Ctrl/Meta+Enter (`submitOn="mod-enter"`, the
@@ -25,10 +25,16 @@
 	type Props = HTMLTextareaAttributes & {
 		mono?: boolean;
 		autoresize?: boolean;
-		size?: 'sm' | 'md';
+		size?: ControlSize;
+		/** Fill the free space of a flex row (`flex: 1 1 0`). */
+		grow?: boolean;
+		/** `false` pins the box (`flex: none`). */
+		shrink?: boolean;
+		/** Full-width block. */
+		block?: boolean;
 		/** Manual resize handle edge, or 'none' to disable. Defaults to a bottom
-		 *  handle. With `autoresize`, only `top` is honored and it drags a
-		 *  min-height floor (the textarea still grows with content). */
+		 *  handle. With `autoresize` it drags a min-height floor (the textarea
+		 *  still grows with content). */
 		resize?: 'none' | 'top' | 'bottom';
 		/** Error state: danger border + aria-invalid (also styles if a consumer
 		 *  sets aria-invalid directly). */
@@ -50,6 +56,9 @@
 		mono = false,
 		autoresize = false,
 		size = 'md',
+		grow = false,
+		shrink = true,
+		block = false,
 		resize = 'bottom',
 		invalid = false,
 		maxHeight,
@@ -70,8 +79,7 @@
 
 	$effect(() => warnUnlabelled(el, 'Textarea'));
 
-	// With autoresize, only the top handle (a min-height floor) is meaningful.
-	const handleEdge = $derived(autoresize ? (resize === 'top' ? 'top' : 'none') : resize);
+	const handleEdge = $derived(resize);
 	const showHandle = $derived(handleEdge !== 'none');
 	const submitMode = $derived(submitOn === 'none' && onsubmit ? 'mod-enter' : submitOn);
 
@@ -136,13 +144,21 @@
 	}
 </script>
 
-<div class="textarea-wrap" class:dragging data-tsu="Textarea">
+<div
+	class="textarea-wrap"
+	class:dragging
+	class:grow={grow}
+	class:no-shrink={!shrink}
+	class:block={block}
+	data-tsu="Textarea"
+>
 	{#if autoresize}
 		<textarea
 			bind:this={el}
 			class="textarea {klass}"
 			class:mono
 			class:textarea-sm={size === 'sm'}
+			class:textarea-lg={size === 'lg'}
 			class:capped={!!maxHeight}
 			style:max-height={maxHeight}
 			bind:value
@@ -159,6 +175,7 @@
 			class="textarea {klass}"
 			class:mono
 			class:textarea-sm={size === 'sm'}
+			class:textarea-lg={size === 'lg'}
 			class:capped={!!maxHeight}
 			style:max-height={maxHeight}
 			bind:value
@@ -184,6 +201,17 @@
 </div>
 
 <style>
+	.grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+	.no-shrink {
+		flex: none;
+	}
+	.block {
+		display: flex;
+		width: 100%;
+	}
 	.textarea-wrap {
 		position: relative;
 		display: flex;
@@ -212,6 +240,10 @@
 		outline: none;
 		border-color: var(--accent);
 	}
+	.textarea:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
 	.textarea.capped {
 		overflow-y: auto;
 	}
@@ -220,6 +252,11 @@
 		font-size: var(--fs-sm);
 		min-height: 2rem;
 	}
+	.textarea-lg {
+		padding: var(--sp-3) var(--sp-4);
+		font-size: var(--fs-base);
+		min-height: var(--control-height-large);
+	}
 	.textarea[aria-invalid='true'],
 	.textarea[aria-invalid='true']:focus {
 		border-color: var(--danger);

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

@@ -1,11 +1,18 @@
+import type { ControlSize } from '../../size';
 import type { HTMLTextareaAttributes } from 'svelte/elements';
 type Props = HTMLTextareaAttributes & {
     mono?: boolean;
     autoresize?: boolean;
-    size?: 'sm' | 'md';
+    size?: ControlSize;
+    /** Fill the free space of a flex row (`flex: 1 1 0`). */
+    grow?: boolean;
+    /** `false` pins the box (`flex: none`). */
+    shrink?: boolean;
+    /** Full-width block. */
+    block?: boolean;
     /** Manual resize handle edge, or 'none' to disable. Defaults to a bottom
-     *  handle. With `autoresize`, only `top` is honored and it drags a
-     *  min-height floor (the textarea still grows with content). */
+     *  handle. With `autoresize` it drags a min-height floor (the textarea
+     *  still grows with content). */
     resize?: 'none' | 'top' | 'bottom';
     /** Error state: danger border + aria-invalid (also styles if a consumer
      *  sets aria-invalid directly). */

package/dist/components/layouts/AppShell.svelte

@@ -27,7 +27,9 @@
 		sidebarWidthKey,
 		layout = 'header-top',
 		stickySidebar = false,
-		sidebarPadding = 'md'
+		sidebarPadding = 'md',
+		class: klass = '',
+		style: styleProp = '',
 	}: {
 		header?: Snippet;
 		sidebar?: Snippet;
@@ -52,6 +54,8 @@
 		stickySidebar?: boolean;
 		/** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
 		sidebarPadding?: 'none' | 'sm' | 'md';
+		class?: string;
+		style?: string;
 	} = $props();
 
 	let open = $state(false);
@@ -127,11 +131,11 @@
 <svelte:window onkeydown={(e) => e.key === 'Escape' && (open = false)} />
 
 <div
-	class="shell"
+	class="shell {klass}"
 	class:dragging
 	class:sidebar-full={layout === 'sidebar-full'}
 	class:sticky-sidebar={stickySidebar}
-	style="--shell-sidebar-w: {widthCss}"
+	style="--shell-sidebar-w: {widthCss}; {styleProp}"
 	data-tsu="AppShell"
 >
 	<header class="shell-header">

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

@@ -23,6 +23,8 @@ type $$ComponentProps = {
     stickySidebar?: boolean;
     /** Inner padding of the sidebar; `'none'` when the nav owns its gutters. */
     sidebarPadding?: 'none' | 'sm' | 'md';
+    class?: string;
+    style?: string;
 };
 declare const AppShell: import("svelte").Component<$$ComponentProps, {}, "">;
 type AppShell = ReturnType<typeof AppShell>;

package/dist/components/layouts/AutoGrid.svelte

@@ -28,6 +28,7 @@
 		fill = false,
 		gap = 'var(--sp-4)',
 		maxCols,
+		template,
 		align = 'start',
 		justify,
 		class: klass = '',
@@ -45,6 +46,8 @@
 		fill?: boolean;
 		gap?: string;
 		maxCols?: number;
+		/** Explicit `grid-template-columns` (e.g. `1fr 1fr auto`); bypasses `min`/`max`. */
+		template?: string;
 		/** Cross-axis alignment of items in their row (align-items). Defaults to `start`. */
 		align?: 'start' | 'center' | 'end' | 'stretch';
 		/** Inline (main-axis) distribution of tracks (justify-content). Defaults to
@@ -70,6 +73,7 @@
 			`--ag-mode: ${mode}`,
 			maxCols != null ? `--ag-gap: ${gap}` : null,
 			maxCols != null ? `--ag-cols: ${maxCols}` : null,
+			template ? `grid-template-columns: ${template}` : null,
 			`gap: ${gap}`,
 			`align-items: ${align}`,
 			justifyValue ? `justify-content: ${justifyValue}` : null

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

@@ -11,6 +11,8 @@ type $$ComponentProps = {
     fill?: boolean;
     gap?: string;
     maxCols?: number;
+    /** Explicit `grid-template-columns` (e.g. `1fr 1fr auto`); bypasses `min`/`max`. */
+    template?: string;
     /** Cross-axis alignment of items in their row (align-items). Defaults to `start`. */
     align?: 'start' | 'center' | 'end' | 'stretch';
     /** Inline (main-axis) distribution of tracks (justify-content). Defaults to

package/dist/components/layouts/Cluster.svelte

@@ -27,6 +27,10 @@
 		wrap = true,
 		size,
 		grow = false,
+		shrink = true,
+		fill = false,
+		push,
+		wrapAt,
 		stackAt,
 		class: klass = '',
 		children,
@@ -39,18 +43,56 @@
 		wrap?: boolean;
 		size?: 'sm' | 'md' | 'lg';
 		grow?: boolean;
+		/** `false` pins the cluster (`flex: none`) inside a parent row. */
+		shrink?: boolean;
+		/** `height: 100%` to fill a flex parent. */
+		fill?: boolean;
+		/** Auto margin that pushes the cluster to the start/end of its parent. */
+		push?: 'start' | 'end';
+		/** Width (px/em/rem) under which the row starts wrapping (wraps always when unset and `wrap`). */
+		wrapAt?: string;
 		stackAt?: 'xs' | 'sm' | 'md' | 'lg';
 		class?: string;
+		style?: string;
 		children?: Snippet;
 		[key: string]: unknown;
 	} = $props();
+
+	let el = $state<HTMLElement | null>(null);
+	let narrow = $state(false);
+	function toPx(length: string, node: HTMLElement): number {
+		const n = Number.parseFloat(length);
+		const fontSize = (x: Element) => Number.parseFloat(getComputedStyle(x).fontSize);
+		if (length.endsWith('rem')) return n * fontSize(document.documentElement);
+		if (length.endsWith('em')) return n * fontSize(node);
+		return n;
+	}
+	$effect(() => {
+		if (!wrapAt || !el) {
+			narrow = false;
+			return;
+		}
+		const node = el;
+		const limit = toPx(wrapAt, node);
+		const ro = new ResizeObserver(([entry]) => {
+			narrow = entry.contentRect.width < limit;
+		});
+		ro.observe(node);
+		return () => ro.disconnect();
+	});
+	const wrapping = $derived(wrapAt ? narrow : wrap);
 </script>
 
 <svelte:element
 	this={as}
+	bind:this={el}
 	data-tsu="Cluster"
 	class="cluster-c {klass}"
 	class:cluster-grow={grow}
+	class:no-shrink={!shrink}
+	class:fill
+	class:push-start={push === 'start'}
+	class:push-end={push === 'end'}
 	class:cluster-stack={stackAt !== undefined}
 	class:stack-xs={stackAt === 'xs'}
 	class:stack-sm={stackAt === 'sm'}
@@ -59,7 +101,7 @@
 	style:gap
 	style:align-items={align}
 	style:justify-content={justify}
-	style:flex-wrap={wrap ? 'wrap' : 'nowrap'}
+	style:flex-wrap={wrapping ? 'wrap' : 'nowrap'}
 	style:--control-height={size ? CONTROL_TIER[size] : undefined}
 	{...rest}
 >
@@ -74,6 +116,25 @@
 		flex: 1 1 0;
 		min-width: 0;
 	}
+	.cluster-c > :global([data-grow]) {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+	.cluster-c > :global([data-shrink='false']) {
+		flex: none;
+	}
+	.no-shrink {
+		flex: none;
+	}
+	.fill {
+		height: 100%;
+	}
+	.push-start {
+		margin-inline-end: auto;
+	}
+	.push-end {
+		margin-inline-start: auto;
+	}
 	.cluster-stack {
 		container-type: inline-size;
 	}

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

@@ -7,8 +7,17 @@ type $$ComponentProps = {
     wrap?: boolean;
     size?: 'sm' | 'md' | 'lg';
     grow?: boolean;
+    /** `false` pins the cluster (`flex: none`) inside a parent row. */
+    shrink?: boolean;
+    /** `height: 100%` to fill a flex parent. */
+    fill?: boolean;
+    /** Auto margin that pushes the cluster to the start/end of its parent. */
+    push?: 'start' | 'end';
+    /** Width (px/em/rem) under which the row starts wrapping (wraps always when unset and `wrap`). */
+    wrapAt?: string;
     stackAt?: 'xs' | 'sm' | 'md' | 'lg';
     class?: string;
+    style?: string;
     children?: Snippet;
     [key: string]: unknown;
 };