@dorsk/tsumikit 0.38.1 → 0.39.0

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

@@ -1,12 +1,14 @@
+import { type Tone } from '../../tone';
 import type { Snippet } from 'svelte';
 import { type IconName } from '../atoms/Icon.svelte';
 type $$ComponentProps = {
     title?: string;
     description?: string | Snippet;
     icon?: IconName;
-    tone?: 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+    tone?: Tone;
     actionLabel?: string;
     onAction?: () => void;
+    /** @deprecated use `size="compact"`; `size` wins when both are set. */
     compact?: boolean;
     size?: 'inline' | 'compact' | 'default';
     loading?: boolean;

package/dist/components/molecules/Field.svelte

@@ -17,6 +17,7 @@
 		layout = 'stack',
 		labelWidth,
 		grow = false,
+		shrink = true,
 		class: klass = '',
 		children
 	}: {
@@ -29,6 +30,8 @@
 		labelWidth?: string;
 		/** Fill the available width of a flex/Cluster row (flex: 1). */
 		grow?: boolean;
+		/** `false` pins the field (`flex: none`) in a row. */
+		shrink?: boolean;
 		class?: string;
 		children?: Snippet;
 	} = $props();
@@ -54,7 +57,7 @@
 	});
 </script>
 
-<div class="field {klass}" class:field-grow={grow} class:field-inline={layout === 'inline'} data-tsu="Field">
+<div class="field {klass}" class:field-grow={grow} class:field-no-shrink={!shrink} class:field-inline={layout === 'inline'} data-tsu="Field">
 	{#if label}
 		<label class="label" for={forId} style:width={labelWidth}>{label}</label>
 	{/if}
@@ -75,6 +78,9 @@
 		flex: 1 1 0;
 		min-width: 0;
 	}
+	.field-no-shrink {
+		flex: none;
+	}
 	.field-inline {
 		flex-direction: row;
 		align-items: center;

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

@@ -9,6 +9,8 @@ type $$ComponentProps = {
     labelWidth?: string;
     /** Fill the available width of a flex/Cluster row (flex: 1). */
     grow?: boolean;
+    /** `false` pins the field (`flex: none`) in a row. */
+    shrink?: boolean;
     class?: string;
     children?: Snippet;
 };

package/dist/components/molecules/FileButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { ControlSize } from '../../size';
 	// File-picker button. A real <input type="file"> visually hidden inside a
 	// <label> styled as a button — so it's keyboard-focusable and works with zero
 	// JS to open the dialog. Emits the chosen files via `onfiles`. Dependency-free.
@@ -38,7 +39,7 @@
 		variant?: 'default' | 'primary' | 'ghost';
 		/** Match the Button atom's sizes so a FileButton lines up with buttons in
 		 *  the same row. */
-		size?: 'sm' | 'md' | 'lg';
+		size?: ControlSize;
 		/** Uniform `--control-height`, like Button's `control`, so it lines up in a
 		 *  composer/toolbar row. */
 		control?: boolean;

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

@@ -1,3 +1,4 @@
+import type { ControlSize } from '../../size';
 import type { IconName } from '../atoms/Icon.svelte';
 type $$ComponentProps = {
     onfiles: (files: File[]) => void;
@@ -17,7 +18,7 @@ type $$ComponentProps = {
     variant?: 'default' | 'primary' | 'ghost';
     /** Match the Button atom's sizes so a FileButton lines up with buttons in
      *  the same row. */
-    size?: 'sm' | 'md' | 'lg';
+    size?: ControlSize;
     /** Uniform `--control-height`, like Button's `control`, so it lines up in a
      *  composer/toolbar row. */
     control?: boolean;

package/dist/components/molecules/FilterInput.svelte

@@ -23,6 +23,7 @@
 </script>
 
 <script lang="ts">
+	import type { ControlSize } from '../../size';
 	// ───────────────────────────────────────────────────────────────────────
 	// FilterInput primitive — the headless base of the structured search bar.
 	//
@@ -64,7 +65,9 @@
 		onchange,
 		onsubmit,
 		inline,
-		below
+		below,
+		class: klass = '',
+		style: styleProp = '',
 	}: {
 		schema: Schema;
 		/** The raw textual query (two-way bindable). */
@@ -81,7 +84,7 @@
 		/** Leading icon; pass `null` to hide it. */
 		icon?: IconName | null;
 		/** `sm` renders a compact-toolbar bar (`--control-height-compact`). */
-		size?: 'sm' | 'md';
+		size?: ControlSize;
 		shape?: 'square' | 'pill';
 		/** Theme-aware surface shade of the bar (mirrors Card). */
 		surface?: 'base' | 'raised' | 'sunken';
@@ -110,6 +113,8 @@
 		 * passes its chip row here; single-field hosts simply omit it.
 		 */
 		below?: Snippet<[FilterInputContext]>;
+		class?: string;
+		style?: string;
 	} = $props();
 
 	const field = getFieldContext();
@@ -306,7 +311,8 @@
 </script>
 
 <div
-	class="fi"
+	class="fi {klass}"
+	style={styleProp}
 	class:fi--sm={size === 'sm'}
 	class:fi--pill={shape === 'pill'}
 	class:surface-raised={surface === 'raised'}
@@ -436,6 +442,10 @@
 		border-color: var(--accent);
 		box-shadow: 0 0 0 3px var(--accent-dim);
 	}
+	.fi__bar:has(:focus-visible) {
+		outline: var(--focus-ring);
+		outline-offset: var(--focus-ring-offset);
+	}
 	.fi__icon {
 		display: flex;
 		color: var(--text-faint);

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

@@ -18,6 +18,7 @@ export interface FilterInputContext {
     /** Focus the underlying input. */
     focus: () => void;
 }
+import type { ControlSize } from '../../size';
 import type { Snippet } from 'svelte';
 import { type IconName } from '../atoms/Icon.svelte';
 import { type Schema } from '../../query/schema';
@@ -37,7 +38,7 @@ type $$ComponentProps = {
     /** Leading icon; pass `null` to hide it. */
     icon?: IconName | null;
     /** `sm` renders a compact-toolbar bar (`--control-height-compact`). */
-    size?: 'sm' | 'md';
+    size?: ControlSize;
     shape?: 'square' | 'pill';
     /** Theme-aware surface shade of the bar (mirrors Card). */
     surface?: 'base' | 'raised' | 'sunken';
@@ -66,6 +67,8 @@ type $$ComponentProps = {
      * passes its chip row here; single-field hosts simply omit it.
      */
     below?: Snippet<[FilterInputContext]>;
+    class?: string;
+    style?: string;
 };
 declare const FilterInput: import("svelte").Component<$$ComponentProps, {}, "value">;
 type FilterInput = ReturnType<typeof FilterInput>;

package/dist/components/molecules/IconButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Tone } from '../../tone';
 	import type { Snippet } from 'svelte';
 	import type { HTMLButtonAttributes } from 'svelte/elements';
 	import Button from '../atoms/Button.svelte';
@@ -22,7 +23,7 @@
 		// Forwarded to Button.
 		shrink?: boolean;
 		// Semantic state tint (forwarded to Button). Pairs well with `chip`.
-		tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
+		tone?: Tone | 'none';
 		// Outlined `--box-lg` square icon-chip (header/toolbar actions).
 		chip?: boolean;
 		// Shared square box scale (`--box-xs/sm/md/lg`); default `md` is the classic
@@ -48,6 +49,13 @@
 		// open-on-GitHub action. Forwarded to Button; `href` implies `as="a"`.
 		as?: 'button' | 'a';
 		href?: string;
+		/** Render `label` as visible text beside the glyph. `row` is a full-width,
+		 *  left-aligned menu-row form for overflow menus. */
+		showLabel?: boolean | 'row';
+		/** Rotate the glyph (refresh in flight). */
+		spin?: boolean;
+		/** Forwarded to Button: spinner, blocks clicks, aria-busy. */
+		loading?: boolean;
 		class?: string;
 	};
 
@@ -69,6 +77,9 @@
 		inline = false,
 		hoverDanger = false,
 		pressed,
+		showLabel = false,
+		spin = false,
+		loading = false,
 		disabled = false,
 		onclick,
 		class: klass = '',
@@ -94,36 +105,50 @@
 	{box}
 	{hitArea}
 	{disabled}
+	{loading}
 	{title}
 	{onclick}
-	icon={!inline && !chip}
+	icon={!inline && !chip && !showLabel}
 	iconInline={inline}
+	block={showLabel === 'row'}
 	{hoverDanger}
 	aria-pressed={pressed}
-	class={klass}
+	class="{showLabel ? 'ib-labelled' : ''} {showLabel === 'row' ? 'ib-row' : ''} {klass}"
 	aria-label={label}
 >
 	{#if children}
 		{#if glyphCss}
-			<span class="glyph" style="font-size: {glyphCss}"><Icon>{@render children()}</Icon></span>
+			<span class="glyph" style="font-size: {glyphCss}"><Icon {spin}>{@render children()}</Icon></span>
 		{:else}
-			<Icon {size}>{@render children()}</Icon>
+			<Icon {size} {spin}>{@render children()}</Icon>
 		{/if}
 	{:else if emoji}
 		<span class="emoji" style="font-size: {emojiCss}" aria-hidden="true">{emoji}</span>
 	{:else if icon}
 		{#if glyphCss}
-			<span class="glyph" style="font-size: {glyphCss}"><Icon name={icon} /></span>
+			<span class="glyph" style="font-size: {glyphCss}"><Icon name={icon} {spin} /></span>
 		{:else}
-			<Icon name={icon} {size} />
+			<Icon name={icon} {size} {spin} />
 		{/if}
 	{/if}
+	{#if showLabel}<span class="ib-label">{label}</span>{/if}
 </Button>
 
 <style>
 	/* Off-registry glyph (emoji) rendered as text rather than an SVG. Sized off the
 	   `size` prop (×1.35, since an emoji reads small next to an SVG glyph of the
 	   same px) unless `glyphSize` is exact; centered so it shares the tap target. */
+	.ib-label {
+		white-space: nowrap;
+	}
+	:global(.btn.ib-labelled) {
+		gap: var(--sp-2);
+	}
+	:global(.btn.ib-row) {
+		justify-content: flex-start;
+		width: 100%;
+		text-align: left;
+	}
 	.emoji,
 	.glyph {
 		display: inline-flex;

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

@@ -1,3 +1,4 @@
+import type { Tone } from '../../tone';
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { IconName } from '../atoms/Icon.svelte';
@@ -14,7 +15,7 @@ type IconButtonProps = HTMLButtonAttributes & {
     variant?: 'default' | 'primary' | 'ghost' | 'danger';
     pill?: boolean;
     shrink?: boolean;
-    tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
+    tone?: Tone | 'none';
     chip?: boolean;
     box?: 'xs' | 'sm' | 'md' | 'lg';
     size?: number;
@@ -25,6 +26,13 @@ type IconButtonProps = HTMLButtonAttributes & {
     pressed?: boolean;
     as?: 'button' | 'a';
     href?: string;
+    /** Render `label` as visible text beside the glyph. `row` is a full-width,
+     *  left-aligned menu-row form for overflow menus. */
+    showLabel?: boolean | 'row';
+    /** Rotate the glyph (refresh in flight). */
+    spin?: boolean;
+    /** Forwarded to Button: spinner, blocks clicks, aria-busy. */
+    loading?: boolean;
     class?: string;
 };
 declare const IconButton: import("svelte").Component<IconButtonProps, {}, "">;

package/dist/components/molecules/KeyValue.svelte

@@ -1,7 +1,8 @@
 <script lang="ts" module>
 	import type { Snippet } from 'svelte';
 
-	export type KeyValueTone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+	import type { Tone } from '../../tone';
+	export type KeyValueTone = Tone;
 
 	export interface KeyValueRow {
 		label: string;
@@ -23,6 +24,8 @@
 		warn: 'warn',
 		danger: 'danger',
 		info: 'accent',
+		success: 'success',
+		accent: 'accent',
 	} as const;
 
 	let {

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

@@ -1,5 +1,6 @@
 import type { Snippet } from 'svelte';
-export type KeyValueTone = 'neutral' | 'ok' | 'warn' | 'danger' | 'info';
+import type { Tone } from '../../tone';
+export type KeyValueTone = Tone;
 export interface KeyValueRow {
     label: string;
     value: string | number | Snippet;

package/dist/components/molecules/Menu.svelte

@@ -8,6 +8,10 @@
 		/** 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'];
+		/** Two-state item: rendered as `menuitemcheckbox` with a check glyph when on. */
+		pressed?: boolean;
+		/** Custom row content (a rename Input, a slider…) replacing icon/label/tag. */
+		content?: import('svelte').Snippet<[MenuItem]>;
 	}
 </script>
 
@@ -59,7 +63,11 @@
 		disabled,
 		gap,
 		onopen,
-		onclose
+		onclose,
+		open = $bindable(false),
+		class: klass = '',
+		style: styleProp = '',
+		panelClass = '',
 	}: {
 		label: string;
 		items: MenuItem[];
@@ -67,13 +75,28 @@
 		/** Custom trailing content for items that carry a `tag`. */
 		tag?: Snippet<[MenuItem]>;
 		placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+		/** Bindable open state; set it to open/close programmatically. */
+		open?: boolean;
+		class?: string;
+		style?: string;
+		panelClass?: string;
 	} & TriggerChrome = $props();
 
 	let listEl = $state<HTMLDivElement | null>(null);
 
+	$effect(() => {
+		const pop = listEl?.closest<HTMLElement>('[popover]');
+		if (!pop) return;
+		const isOpen = pop.matches(':popover-open');
+		try {
+			if (open && !isOpen) pop.showPopover();
+			else if (!open && isOpen) pop.hidePopover();
+		} catch {}
+	});
+
 	function buttons(): HTMLButtonElement[] {
 		return listEl
-			? Array.from(listEl.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled)'))
+			? Array.from(listEl.querySelectorAll<HTMLButtonElement>('[role="menuitem"]:not(:disabled), [role="menuitemcheckbox"]:not(:disabled)'))
 			: [];
 	}
 	function focusAt(i: number) {
@@ -116,14 +139,21 @@
 	{control}
 	{block}
 	{triggerClass}
+	class={klass}
+	style={styleProp}
+	{panelClass}
 	{bare}
 	{hitArea}
 	{disabled}
 	{gap}
 	role="menu"
 	haspopup="menu"
-	{onclose}
+	onclose={() => {
+		open = false;
+		onclose?.();
+	}}
 	onopen={() => {
+		open = true;
 		queueMicrotask(() => focusAt(0));
 		onopen?.();
 	}}
@@ -132,14 +162,19 @@
 		{#each items as item (item.label)}
 			<button
 				type="button"
-				role="menuitem"
+				role={item.pressed === undefined ? 'menuitem' : 'menuitemcheckbox'}
+				aria-checked={item.pressed === undefined ? undefined : item.pressed}
 				class="menu-item"
 				class:danger={item.danger}
+				class:on={item.pressed}
 				disabled={item.disabled}
 				tabindex="-1"
 				onclick={() => select(item)}
 			>
-				{#if item.icon}<Icon name={item.icon} />{/if}
+				{#if item.content}
+					{@render item.content(item)}
+				{:else}
+				{#if item.pressed !== undefined}<span class="menu-check"><Icon name="check" /></span>{:else if item.icon}<Icon name={item.icon} />{/if}
 				<span>{item.label}</span>
 				{#if item.tag !== undefined}
 					{#if tag}
@@ -150,6 +185,7 @@
 						</span>
 					{/if}
 				{/if}
+				{/if}
 			</button>
 		{/each}
 	</div>
@@ -183,6 +219,15 @@
 	.menu-item.danger {
 		color: var(--danger);
 	}
+	.menu-check {
+		display: inline-flex;
+		width: 1em;
+		visibility: hidden;
+	}
+	.menu-item.on .menu-check {
+		visibility: visible;
+		color: var(--accent);
+	}
 	.menu-tag {
 		display: inline-flex;
 		flex: none;

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

@@ -7,6 +7,10 @@ export interface MenuItem {
     /** 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'];
+    /** Two-state item: rendered as `menuitemcheckbox` with a check glyph when on. */
+    pressed?: boolean;
+    /** Custom row content (a rename Input, a slider…) replacing icon/label/tag. */
+    content?: import('svelte').Snippet<[MenuItem]>;
 }
 import type { ComponentProps, Snippet } from 'svelte';
 import Popover from './Popover.svelte';
@@ -19,7 +23,12 @@ type $$ComponentProps = {
     /** Custom trailing content for items that carry a `tag`. */
     tag?: Snippet<[MenuItem]>;
     placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    /** Bindable open state; set it to open/close programmatically. */
+    open?: boolean;
+    class?: string;
+    style?: string;
+    panelClass?: string;
 } & TriggerChrome;
-declare const Menu: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Menu: import("svelte").Component<$$ComponentProps, {}, "open">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/components/molecules/Meter.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	// Labelled usage meter: label row, Progress track (markers / thresholds
+	// forwarded), trailing value and an optional caption line (reset time…).
+	import type { Snippet } from 'svelte';
+	import Progress from '../atoms/Progress.svelte';
+	import type { ControlSize } from '../../size';
+	import type { Tone } from '../../tone';
+
+	let {
+		label,
+		value,
+		max = 100,
+		format = (v: number, m: number) => `${Math.round((v / m) * 100)}%`,
+		caption,
+		markers,
+		toneAt,
+		tone,
+		size = 'md',
+		actions,
+		class: klass = '',
+		style: styleProp = ''
+	}: {
+		label: string;
+		value: number;
+		max?: number;
+		/** Trailing readout; defaults to a percentage. */
+		format?: (value: number, max: number) => string;
+		caption?: string | Snippet;
+		markers?: { at: number; label?: string; tone?: Tone }[];
+		toneAt?: { warn?: number; danger?: number };
+		tone?: Tone;
+		size?: ControlSize;
+		/** Inline controls after the readout (edit cap, bypass…). */
+		actions?: Snippet;
+		class?: string;
+		style?: string;
+	} = $props();
+</script>
+
+<div data-tsu="Meter" class="meter size-{size} {klass}" style={styleProp}>
+	<div class="head">
+		<span class="label">{label}</span>
+		<span class="readout">{format(value, max)}</span>
+		{#if actions}<span class="actions">{@render actions()}</span>{/if}
+	</div>
+	<Progress {value} {max} label={label} {markers} {toneAt} tone={tone ?? 'accent'} size={size === 'lg' ? 'md' : size} />
+	{#if caption}
+		<div class="caption">{#if typeof caption === 'string'}{caption}{:else}{@render caption()}{/if}</div>
+	{/if}
+</div>
+
+<style>
+	.meter {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sp-1);
+		min-width: 0;
+		font-size: var(--fs-sm);
+	}
+	.size-sm {
+		font-size: var(--fs-xs);
+	}
+	.head {
+		display: flex;
+		align-items: baseline;
+		gap: var(--sp-2);
+	}
+	.label {
+		flex: 1 1 auto;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		color: var(--text-muted);
+	}
+	.readout {
+		font-variant-numeric: tabular-nums;
+		font-family: var(--font-mono);
+		color: var(--text);
+		white-space: nowrap;
+	}
+	.actions {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sp-1);
+	}
+	.caption {
+		font-size: var(--fs-xs);
+		color: var(--text-faint);
+	}
+</style>

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

@@ -0,0 +1,29 @@
+import type { Snippet } from 'svelte';
+import type { ControlSize } from '../../size';
+import type { Tone } from '../../tone';
+type $$ComponentProps = {
+    label: string;
+    value: number;
+    max?: number;
+    /** Trailing readout; defaults to a percentage. */
+    format?: (value: number, max: number) => string;
+    caption?: string | Snippet;
+    markers?: {
+        at: number;
+        label?: string;
+        tone?: Tone;
+    }[];
+    toneAt?: {
+        warn?: number;
+        danger?: number;
+    };
+    tone?: Tone;
+    size?: ControlSize;
+    /** Inline controls after the readout (edit cap, bypass…). */
+    actions?: Snippet;
+    class?: string;
+    style?: string;
+};
+declare const Meter: import("svelte").Component<$$ComponentProps, {}, "">;
+type Meter = ReturnType<typeof Meter>;
+export default Meter;