@dorsk/tsumikit 0.38.1 → 0.39.0

package/dist/components/atoms/Progress.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import type { ControlSize } from '../../size';
+	import { canonicalTone, type Tone } from '../../tone';
 	// Progress bar. Determinate when `value` is a number (0..max); omit `value`
 	// (or pass `indeterminate`) for an indeterminate animation. Uses
 	// role="progressbar" with the right aria-value* attributes. Token-styled.
@@ -16,8 +18,17 @@
 		size = 'md',
 		gradient = false,
 		striped = false,
+		grow = false,
+		shrink = true,
+		block = false,
 		indeterminate: indeterminateProp = false,
-		class: klass = ''
+		markers = [],
+		toneAt,
+		color,
+		showValue = false,
+		format = (v: number, m: number) => `${Math.round((v / m) * 100)}%`,
+		class: klass = '',
+		...rest
 	}: {
 		value?: number;
 		max?: number;
@@ -25,27 +36,57 @@
 		// Fill colour. `accent` is the default brand fill; the semantic tones
 		// retint the bar for severity (e.g. usage meters going warm/hot).
 		// `ok` and `success` are aliases.
-		tone?: 'accent' | 'ok' | 'success' | 'warn' | 'danger';
+		tone?: Tone;
 		// Track height. `sm` is a thin ~5px track for inline rows.
-		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`) so a flex row cannot squeeze it. */
+		shrink?: boolean;
+		/** Full-width block. */
+		block?: boolean;
 		// Accent→teal gradient fill (overrides the flat tone colour).
 		gradient?: boolean;
 		// Diagonal stripes; animated in indeterminate mode.
 		striped?: boolean;
 		// Force indeterminate mode even when a `value` is supplied.
 		indeterminate?: boolean;
+		/** Thin vertical lines at `at / max` (caps, thresholds). */
+		markers?: { at: number; label?: string; tone?: Tone }[];
+		/** Percent thresholds that auto-pick warn/danger; an explicit `tone` other
+		 *  than the default `accent` wins. */
+		toneAt?: { warn?: number; danger?: number };
+		/** Any CSS colour for the fill; wins over `tone`. */
+		color?: string;
+		/** Trailing numeric readout after the track. */
+		showValue?: boolean;
+		format?: (value: number, max: number) => string;
 		class?: string;
+		[key: string]: unknown;
 	} = $props();
 
 	const pct = $derived(value == null ? 0 : Math.max(0, Math.min(100, (value / max) * 100)));
 	const indeterminate = $derived(indeterminateProp || value == null);
-	const toneClass = $derived(tone === 'ok' ? 'success' : tone);
+	const autoTone = $derived.by((): Tone => {
+		if (!toneAt || tone !== 'accent' || indeterminate) return tone;
+		if (toneAt.danger !== undefined && pct >= toneAt.danger) return 'danger';
+		if (toneAt.warn !== undefined && pct >= toneAt.warn) return 'warn';
+		return tone;
+	});
+	const toneClass = $derived(canonicalTone(autoTone) === 'ok' ? 'success' : canonicalTone(autoTone));
+	const markerPct = (at: number) => Math.max(0, Math.min(100, (at / max) * 100));
 </script>
 
+{#snippet track()}
 <div
 	data-tsu="Progress"
 	class="progress tone-{toneClass} size-{size} {klass}"
+	class:grow={grow}
+	class:no-shrink={!shrink}
+	class:block={block}
 	class:indeterminate
+	style:--fill={color}
+	{...rest}
 	class:gradient
 	class:striped
 	role="progressbar"
@@ -55,10 +96,54 @@
 	aria-valuenow={indeterminate ? undefined : value}
 >
 	<div class="bar" style={indeterminate ? undefined : `width: ${pct}%`}></div>
+	{#each markers as m (m.at)}
+		<span
+			class="marker tone-{m.tone ? canonicalTone(m.tone) : 'text'}"
+			style="left: {markerPct(m.at)}%"
+			title={m.label}
+			aria-hidden="true"
+		></span>
+	{/each}
 </div>
+{/snippet}
+
+{#if showValue}
+	<span class="progress-row" class:grow={grow} class:no-shrink={!shrink} class:block={block}>
+		{@render track()}
+		<span class="progress-value">{indeterminate || value == null ? '' : format(value, max)}</span>
+	</span>
+{:else}
+	{@render track()}
+{/if}
 
 <style>
+	.progress-row {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-2);
+		width: 100%;
+	}
+	.progress-value {
+		flex: none;
+		min-width: 3ch;
+		text-align: right;
+		font-size: var(--fs-xs);
+		font-variant-numeric: tabular-nums;
+		color: var(--text-muted);
+	}
+	.grow {
+		flex: 1 1 0;
+		min-width: 0;
+	}
+	.no-shrink {
+		flex: none;
+	}
+	.block {
+		display: flex;
+		width: 100%;
+	}
 	.progress {
+		position: relative;
 		width: 100%;
 		height: 0.5rem;
 		background: var(--bg-elevated-2);
@@ -74,9 +159,39 @@
 		border-radius: inherit;
 		transition: width 0.2s var(--ease);
 	}
+	.marker {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 2px;
+		transform: translateX(-50%);
+		background: var(--marker, var(--text));
+		pointer-events: none;
+	}
+	.marker.tone-ok {
+		--marker: var(--ok);
+	}
+	.marker.tone-warn {
+		--marker: var(--warn);
+	}
+	.marker.tone-danger {
+		--marker: var(--danger);
+	}
+	.marker.tone-info {
+		--marker: var(--info);
+	}
+	.marker.tone-accent {
+		--marker: var(--accent);
+	}
 	.tone-success {
 		--fill: var(--ok);
 	}
+	.tone-info {
+		--fill: var(--info);
+	}
+	.tone-neutral {
+		--fill: var(--text-faint);
+	}
 	.tone-warn {
 		--fill: var(--warn);
 	}

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

@@ -1,13 +1,39 @@
+import type { ControlSize } from '../../size';
+import { type Tone } from '../../tone';
 type $$ComponentProps = {
     value?: number;
     max?: number;
     label?: string;
-    tone?: 'accent' | 'ok' | 'success' | 'warn' | 'danger';
-    size?: 'sm' | 'md';
+    tone?: Tone;
+    size?: ControlSize;
+    /** Fill the free space of a flex row (`flex: 1 1 0`). */
+    grow?: boolean;
+    /** `false` pins the box (`flex: none`) so a flex row cannot squeeze it. */
+    shrink?: boolean;
+    /** Full-width block. */
+    block?: boolean;
     gradient?: boolean;
     striped?: boolean;
     indeterminate?: boolean;
+    /** Thin vertical lines at `at / max` (caps, thresholds). */
+    markers?: {
+        at: number;
+        label?: string;
+        tone?: Tone;
+    }[];
+    /** Percent thresholds that auto-pick warn/danger; an explicit `tone` other
+     *  than the default `accent` wins. */
+    toneAt?: {
+        warn?: number;
+        danger?: number;
+    };
+    /** Any CSS colour for the fill; wins over `tone`. */
+    color?: string;
+    /** Trailing numeric readout after the track. */
+    showValue?: boolean;
+    format?: (value: number, max: number) => string;
     class?: string;
+    [key: string]: unknown;
 };
 declare const Progress: import("svelte").Component<$$ComponentProps, {}, "">;
 type Progress = ReturnType<typeof Progress>;

package/dist/components/atoms/Scrim.svelte

@@ -5,7 +5,9 @@
 		onclose,
 		hideBelow,
 		z = 'var(--z-drawer)',
-		label = 'Close'
+		label = 'Close',
+		class: klass = '',
+		style: styleProp = '',
 	}: {
 		/** Called on click anywhere on the scrim and on Escape (document-level). */
 		onclose?: () => void;
@@ -16,6 +18,8 @@
 		z?: string | number;
 		/** Accessible name of the click target. */
 		label?: string;
+		class?: string;
+		style?: string;
 	} = $props();
 
 	let hidden = $state(false);
@@ -49,7 +53,8 @@
 {#if !hidden}
 	<button
 		type="button"
-		class="scrim"
+		class="scrim {klass}"
+		style={styleProp}
 		style:z-index={z}
 		aria-label={label}
 		tabindex="-1"

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

@@ -8,6 +8,8 @@ type $$ComponentProps = {
     z?: string | number;
     /** Accessible name of the click target. */
     label?: string;
+    class?: string;
+    style?: string;
 };
 declare const Scrim: import("svelte").Component<$$ComponentProps, {}, "">;
 type Scrim = ReturnType<typeof Scrim>;

package/dist/components/atoms/SegmentedProgress.svelte

@@ -1,4 +1,5 @@
 <script lang="ts" module>
+	import type { Tone } from '../../tone';
 	// One bar split into segments, each with its own tone. Two modes:
 	//   • segments (default): widths ∝ `max`, each filled value/max, thin gaps.
 	//   • stacked: one shared track, widths ∝ `value` (Σvalue = full width, or
@@ -10,7 +11,7 @@
 		max: number;
 		// Fill colour per segment. `ok` is an alias of `success`; `muted` renders a
 		// faint fill for empty parts.
-		tone?: 'accent' | 'success' | 'ok' | 'warn' | 'danger' | 'muted';
+		tone?: Tone | 'muted';
 		// Native tooltip / accessible name / legend caption for the segment.
 		label?: string;
 	};
@@ -21,11 +22,14 @@
 		ok: 'var(--ok)',
 		warn: 'var(--warn)',
 		danger: 'var(--danger)',
+		info: 'var(--info)',
+		neutral: 'var(--text-faint)',
 		muted: 'var(--text-faint)',
 	};
 </script>
 
 <script lang="ts">
+	import type { ControlSize } from '../../size';
 	import type { Snippet } from 'svelte';
 	import Dot from './Dot.svelte';
 	import Text from './Text.svelte';
@@ -39,11 +43,12 @@
 		max,
 		legend = false,
 		class: klass = '',
+		...rest
 	}: {
 		segments: ProgressSegment[];
 		label?: string;
 		// Track height. `sm` is a thin ~5px track for inline rows.
-		size?: 'sm' | 'md';
+		size?: ControlSize;
 		mode?: 'segments' | 'stacked';
 		// Space between segments in `segments` mode; a bare number is px.
 		gap?: number | string;
@@ -53,6 +58,7 @@
 		// `true` = 'below'. A snippet receives the segments for custom rendering.
 		legend?: boolean | 'inline' | 'below' | Snippet<[ProgressSegment[]]>;
 		class?: string;
+		[key: string]: unknown;
 	} = $props();
 
 	const stacked = $derived(mode === 'stacked');
@@ -90,6 +96,7 @@
 		<div
 			data-tsu="SegmentedProgress"
 			class="segmented-progress stacked size-{size} {rootClass}"
+			{...rest}
 			style="gap: {gapCss}"
 			role="img"
 			aria-label={stackedLabel}
@@ -107,6 +114,7 @@
 		<div
 			data-tsu="SegmentedProgress"
 			class="segmented-progress size-{size} {rootClass}"
+			{...rest}
 			style="gap: {gapCss}"
 			role="progressbar"
 			aria-label={label}
@@ -186,6 +194,10 @@
 	.tone-danger {
 		--fill: var(--danger);
 	}
+	.tone-info {
+		--seg-fill: var(--info);
+	}
+	.tone-neutral,
 	.tone-muted {
 		--fill: var(--text-faint);
 	}

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

@@ -1,20 +1,23 @@
+import type { Tone } from '../../tone';
 export type ProgressSegment = {
     value: number;
     max: number;
-    tone?: 'accent' | 'success' | 'ok' | 'warn' | 'danger' | 'muted';
+    tone?: Tone | 'muted';
     label?: string;
 };
 export declare const TONE_FILL: Record<NonNullable<ProgressSegment['tone']>, string>;
+import type { ControlSize } from '../../size';
 import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     segments: ProgressSegment[];
     label?: string;
-    size?: 'sm' | 'md';
+    size?: ControlSize;
     mode?: 'segments' | 'stacked';
     gap?: number | string;
     max?: number;
     legend?: boolean | 'inline' | 'below' | Snippet<[ProgressSegment[]]>;
     class?: string;
+    [key: string]: unknown;
 };
 declare const SegmentedProgress: import("svelte").Component<$$ComponentProps, {}, "">;
 type SegmentedProgress = ReturnType<typeof SegmentedProgress>;

package/dist/components/atoms/Select.svelte

@@ -13,6 +13,7 @@
 </script>
 
 <script lang="ts">
+	import type { ControlSize } from '../../size';
 	// Native <select> primitive. Owns its styling from theme tokens; supports
 	// `bind:value` and passes through every native attribute. Options are either
 	// slotted children (full control over <option> rendering) or an `options`
@@ -48,12 +49,11 @@
 		variant?: 'default' | 'ghost' | 'embedded';
 		/** Error state: danger border + aria-invalid. */
 		invalid?: boolean;
-		/** Compact inline form: smaller padding + font for dense toolbars/headers.
-		 *  Deprecated alias for `size="sm"` (kept for backward compatibility). */
+		/** @deprecated use `size="sm"`; `size` wins when both are set. */
 		compact?: boolean;
 		/** Size scale matching Button/SegmentedControl: `sm` also adopts the shared
 		 *  `--control-height-compact` toolbar height so it lines up with siblings. */
-		size?: 'sm' | 'md';
+		size?: ControlSize;
 		/** Draw the custom chevron (default). Set false for a bare inline select. */
 		chevron?: boolean;
 		/** `auto` sizes to the selected option instead of filling the row. */
@@ -74,7 +74,7 @@
 		variant = 'default',
 		invalid = false,
 		compact = false,
-		size = 'md',
+		size,
 		chevron,
 		width = 'full',
 		grow = false,
@@ -94,7 +94,7 @@
 
 	$effect(() => warnUnlabelled(el, 'Select'));
 
-	const small = $derived(compact || size === 'sm');
+	const small = $derived((size ?? (compact ? 'sm' : 'md')) === 'sm');
 	const showChevron = $derived(chevron ?? variant !== 'embedded');
 	const selected = $derived(options?.find((o) => o.value === value));
 	const hasFace = $derived(!!options && variant !== 'ghost');
@@ -138,6 +138,7 @@
 			bind:this={el}
 			class="select"
 			class:compact={small}
+			class:select-lg={size === 'lg'}
 			class:select-sm={size === 'sm'}
 			class:w-auto={width === 'auto'}
 			class:embedded={variant === 'embedded'}
@@ -187,7 +188,9 @@
 	}
 	.select {
 		width: 100%;
-		padding: var(--sp-3);
+		min-height: var(--control-height-default);
+		padding: var(--sp-2) var(--sp-3);
+		line-height: var(--lh-tight);
 		background: var(--bg);
 		border: 1px solid var(--border-strong);
 		border-radius: var(--r-md);
@@ -205,6 +208,11 @@
 		padding-right: var(--sp-3);
 	}
 	/* Compact inline form for dense headers/toolbars. */
+	.select.select-lg {
+		min-height: var(--control-height-large);
+		padding: var(--sp-3) var(--sp-4);
+		font-size: var(--fs-base);
+	}
 	.select.compact {
 		padding: var(--sp-1) var(--sp-2);
 		font-size: var(--fs-xs);
@@ -229,6 +237,10 @@
 		outline: none;
 		border-color: var(--accent);
 	}
+	.select:focus-visible {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
 	.select[aria-invalid='true'],
 	.select[aria-invalid='true']:focus {
 		border-color: var(--danger);

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

@@ -8,18 +8,18 @@ export type SelectOption = {
     hint?: string;
     disabled?: boolean;
 };
+import type { ControlSize } from '../../size';
 import type { Snippet } from 'svelte';
 import type { HTMLSelectAttributes } from 'svelte/elements';
 type Props = Omit<HTMLSelectAttributes, 'size'> & {
     variant?: 'default' | 'ghost' | 'embedded';
     /** Error state: danger border + aria-invalid. */
     invalid?: boolean;
-    /** Compact inline form: smaller padding + font for dense toolbars/headers.
-     *  Deprecated alias for `size="sm"` (kept for backward compatibility). */
+    /** @deprecated use `size="sm"`; `size` wins when both are set. */
     compact?: boolean;
     /** Size scale matching Button/SegmentedControl: `sm` also adopts the shared
      *  `--control-height-compact` toolbar height so it lines up with siblings. */
-    size?: 'sm' | 'md';
+    size?: ControlSize;
     /** Draw the custom chevron (default). Set false for a bare inline select. */
     chevron?: boolean;
     /** `auto` sizes to the selected option instead of filling the row. */

package/dist/components/atoms/Skeleton.svelte

@@ -1,15 +1,8 @@
 <script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
 	// Shimmering placeholder bar(s) standing in for content that is still
 	// loading. Decorative only — the surrounding region should carry aria-busy.
-	let {
-		width = '100%',
-		height = '1em',
-		lines = 1,
-		circle = false,
-		radius = 'var(--r-sm)',
-		class: klass = '',
-		...rest
-	}: {
+	type Own = {
 		width?: string;
 		height?: string;
 		/** Stacked bars; the last one is shortened to read as a paragraph. */
@@ -18,8 +11,16 @@
 		circle?: boolean;
 		radius?: string;
 		class?: string;
-		[key: string]: unknown;
-	} = $props();
+	};
+	let {
+		width = '100%',
+		height = '1em',
+		lines = 1,
+		circle = false,
+		radius = 'var(--r-sm)',
+		class: klass = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
 
 	const w = $derived(circle ? height : width);
 	const r = $derived(circle ? '50%' : radius);

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

@@ -1,4 +1,5 @@
-type $$ComponentProps = {
+import type { HTMLAttributes } from 'svelte/elements';
+type Own = {
     width?: string;
     height?: string;
     /** Stacked bars; the last one is shortened to read as a paragraph. */
@@ -7,8 +8,8 @@ type $$ComponentProps = {
     circle?: boolean;
     radius?: string;
     class?: string;
-    [key: string]: unknown;
 };
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
 declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
 type Skeleton = ReturnType<typeof Skeleton>;
 export default Skeleton;

package/dist/components/atoms/Slider.svelte

@@ -21,6 +21,8 @@
 		'aria-invalid': ariaInvalid,
 		invalid = false,
 		ticks = false,
+		marks = [],
+		width,
 		class: klass = '',
 		el = $bindable(null),
 		...rest
@@ -37,6 +39,10 @@
 		/** Visible dots at each step (segmented slider). `true` = one per `step`;
 		 *  a number array places dots at those values. */
 		ticks?: boolean | number[];
+		/** Clickable labelled tick row under the track. */
+		marks?: { value: number; label: string }[];
+		/** Fixed width (`flex: none`). */
+		width?: string;
 		id?: string;
 		'aria-describedby'?: string | null;
 		'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
@@ -61,7 +67,7 @@
 	});
 </script>
 
-<div class="slider {klass}" class:has-ticks={tickValues.length > 0} style="--pct: {pct}%" data-tsu="Slider">
+<div class="slider {klass}" class:has-ticks={tickValues.length > 0} class:has-marks={marks.length > 0} class:fixed={!!width} style="--pct: {pct}%; {width ? `width: ${width}` : ''}" data-tsu="Slider">
 	<span class="range">
 	<input
 		bind:this={el}
@@ -87,9 +93,45 @@
 	{#if showValue}
 		<output for={id} class="slider-out">{format(Number(value))}</output>
 	{/if}
+	{#if marks.length > 0}
+		<span class="marks" aria-hidden="true">
+			{#each marks as m (m.value)}
+				<button type="button" class="mark" class:on={Number(value) === m.value} style="--f: {frac(m.value)}" tabindex="-1" onclick={() => (value = m.value)}>{m.label}</button>
+			{/each}
+		</span>
+	{/if}
 </div>
 
 <style>
+	.slider.fixed {
+		flex: none;
+	}
+	.slider.has-marks {
+		flex-wrap: wrap;
+		row-gap: var(--sp-1);
+	}
+	.marks {
+		position: relative;
+		flex: 1 0 100%;
+		height: 1.2em;
+		font-size: var(--fs-xs);
+		color: var(--text-faint);
+	}
+	.mark {
+		position: absolute;
+		left: calc(var(--f) * 100%);
+		transform: translateX(-50%);
+		border: 0;
+		background: none;
+		padding: 0;
+		font: inherit;
+		color: inherit;
+		cursor: pointer;
+		white-space: nowrap;
+	}
+	.mark.on {
+		color: var(--text);
+	}
 	.slider {
 		display: flex;
 		align-items: center;
@@ -160,11 +202,11 @@
 		outline: none;
 	}
 	input[type='range']:focus-visible::-webkit-slider-thumb {
-		outline: 2px solid var(--accent);
+		outline: var(--focus-ring);
 		outline-offset: 2px;
 	}
 	input[type='range']:focus-visible::-moz-range-thumb {
-		outline: 2px solid var(--accent);
+		outline: var(--focus-ring);
 		outline-offset: 2px;
 	}
 	input[type='range']:disabled {

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

@@ -12,6 +12,13 @@ type $$ComponentProps = HTMLInputAttributes & {
     /** Visible dots at each step (segmented slider). `true` = one per `step`;
      *  a number array places dots at those values. */
     ticks?: boolean | number[];
+    /** Clickable labelled tick row under the track. */
+    marks?: {
+        value: number;
+        label: string;
+    }[];
+    /** Fixed width (`flex: none`). */
+    width?: string;
     id?: string;
     'aria-describedby'?: string | null;
     'aria-invalid'?: HTMLInputAttributes['aria-invalid'];

package/dist/components/atoms/Spinner.svelte

@@ -15,6 +15,8 @@
 		/** AT label announcing the busy state. Set to undefined to make the
 		 *  spinner decorative when an ancestor already conveys the loading state. */
 		label?: string;
+		class?: string;
+		style?: string;
 		[key: string]: unknown;
 	} = $props();
 </script>

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

@@ -4,6 +4,8 @@ type $$ComponentProps = {
     /** AT label announcing the busy state. Set to undefined to make the
      *  spinner decorative when an ancestor already conveys the loading state. */
     label?: string;
+    class?: string;
+    style?: string;
     [key: string]: unknown;
 };
 declare const Spinner: import("svelte").Component<$$ComponentProps, {}, "">;