@dorsk/tsumikit 0.56.0 → 0.58.0

package/dist/components/molecules/RadioGroup.svelte

@@ -3,6 +3,7 @@
 		value: string;
 		label: string;
 		hint?: string;
+		/** Secondary text under the label, announced via `aria-describedby`. */
 		description?: string;
 		note?: string;
 		disabled?: boolean;
@@ -26,6 +27,7 @@
 		variant = 'list',
 		action,
 		below,
+		onfocuschange,
 		class: klass = ''
 	}: {
 		options: RadioOption[];
@@ -36,8 +38,21 @@
 		variant?: 'list' | 'rows' | 'swatch';
 		action?: Snippet<[RadioOption]>;
 		below?: Snippet<[RadioOption]>;
+		/** Fires once each time a different option becomes active — by keyboard
+		 *  focus or by pointer hover — so a consumer can drive a preview pane. */
+		onfocuschange?: (value: string) => void;
 		class?: string;
 	} = $props();
+
+	const uid = $props.id();
+	const descId = (o: RadioOption) => (o.description ? `${uid}-${o.value}-desc` : undefined);
+
+	let active: string | undefined;
+	function activate(v: string) {
+		if (v === active) return;
+		active = v;
+		onfocuschange?.(v);
+	}
 </script>
 
 <div
@@ -51,22 +66,40 @@
 >
 	{#each options as o (o.value)}
 		{#if variant === 'swatch'}
-			<label class="swatch" class:disabled={o.disabled} title={o.label}>
-				<input type="radio" {name} value={o.value} bind:group={value} disabled={o.disabled} aria-label={o.label} />
+			<label class="swatch" class:disabled={o.disabled} title={o.label} onpointerenter={() => activate(o.value)}>
+				<input
+					type="radio"
+					{name}
+					value={o.value}
+					bind:group={value}
+					disabled={o.disabled}
+					aria-label={o.label}
+					aria-describedby={descId(o)}
+					onfocus={() => activate(o.value)}
+				/>
+				{#if o.description}<span class="sr-only" id={descId(o)}>{o.description}</span>{/if}
 				<span class="swatch-chip" aria-hidden="true" style="--swatch: {o.color ?? 'var(--accent)'}"></span>
 			</label>
 		{:else 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} />
+					<label class="radio" onpointerenter={() => activate(o.value)}>
+						<input
+							type="radio"
+							{name}
+							value={o.value}
+							bind:group={value}
+							disabled={o.disabled}
+							aria-describedby={descId(o)}
+							onfocus={() => activate(o.value)}
+						/>
 						<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.description}<span class="description" id={descId(o)}>{o.description}</span>{/if}
 							{#if o.hint}<span class="hint">{o.hint}</span>{/if}
 						</span>
 					</label>
@@ -75,11 +108,20 @@
 				{#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} />
+			<label class="radio" class:disabled={o.disabled} onpointerenter={() => activate(o.value)}>
+				<input
+					type="radio"
+					{name}
+					value={o.value}
+					bind:group={value}
+					disabled={o.disabled}
+					aria-describedby={descId(o)}
+					onfocus={() => activate(o.value)}
+				/>
 				<span class="dot-ctl" aria-hidden="true"></span>
 				<span class="texts">
 					<span class="label-text">{o.label}</span>
+					{#if o.description}<span class="description" id={descId(o)}>{o.description}</span>{/if}
 					{#if o.hint}<span class="hint">{o.hint}</span>{/if}
 				</span>
 			</label>
@@ -208,10 +250,20 @@
 	.description {
 		font-size: var(--fs-xs);
 		color: var(--text-muted);
+	}
+	.row .description {
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
 	}
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		overflow: hidden;
+		clip: rect(0 0 0 0);
+		white-space: nowrap;
+	}
 	.action {
 		flex: none;
 		margin-left: auto;

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

@@ -2,6 +2,7 @@ export interface RadioOption {
     value: string;
     label: string;
     hint?: string;
+    /** Secondary text under the label, announced via `aria-describedby`. */
     description?: string;
     note?: string;
     disabled?: boolean;
@@ -18,6 +19,9 @@ type $$ComponentProps = {
     variant?: 'list' | 'rows' | 'swatch';
     action?: Snippet<[RadioOption]>;
     below?: Snippet<[RadioOption]>;
+    /** Fires once each time a different option becomes active — by keyboard
+     *  focus or by pointer hover — so a consumer can drive a preview pane. */
+    onfocuschange?: (value: string) => void;
     class?: string;
 };
 declare const RadioGroup: import("svelte").Component<$$ComponentProps, {}, "value">;

package/dist/components/molecules/SplitButton.svelte

@@ -0,0 +1,181 @@
+<script lang="ts">
+	// One control, two segments: a primary action and a narrow caret that opens
+	// a Menu. Both segments keep their own hover/active/focus, and the caret
+	// carries the popup semantics. The segments are the stock Button and Menu
+	// triggers, joined through their published `--btn-*` / `--pop-trigger-*`
+	// properties so the fused look needs no reach into their scoped CSS.
+	import type { ControlSize } from '../../size';
+	import type { ComponentProps, Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../atoms/Button.svelte';
+	import Icon from '../atoms/Icon.svelte';
+	import Menu, { type MenuItem } from './Menu.svelte';
+
+	type MenuProps = ComponentProps<typeof Menu>;
+
+	type Own = {
+		variant?: 'default' | 'primary' | 'danger';
+		size?: ControlSize;
+		/** Use the shared `--control-height` toolbar/composer contract. */
+		control?: boolean;
+		/** Disables both segments. */
+		disabled?: boolean;
+		/** Disables the caret only; the primary action keeps working. */
+		menuDisabled?: boolean;
+		/** Accessible name of the caret ("More send options"). */
+		label: string;
+		items: MenuItem[];
+		placement?: MenuProps['placement'];
+		/** Custom trailing content for items that carry a `tag`. */
+		tag?: MenuProps['tag'];
+		panelClass?: string;
+		gap?: number;
+		/** Bindable open state of the menu. */
+		open?: boolean;
+		onopen?: () => void;
+		onclose?: () => void;
+		/** `type` of the primary action, for a submit inside a form. */
+		type?: 'button' | 'submit';
+		/** Busy primary action: spinner, blocks clicks, `aria-busy`. */
+		loading?: boolean;
+		/** Handler of the primary action. */
+		onclick?: (e: MouseEvent) => void;
+		class?: string;
+		style?: string;
+		/** Content of the primary action. */
+		children: Snippet;
+	};
+
+	let {
+		variant = 'default',
+		size = 'md',
+		control = false,
+		disabled = false,
+		menuDisabled = false,
+		label,
+		items,
+		placement = 'bottom-end',
+		tag,
+		panelClass,
+		gap,
+		open = $bindable(false),
+		onopen,
+		onclose,
+		type = 'button',
+		loading = false,
+		onclick,
+		class: klass = '',
+		style: styleProp = '',
+		children,
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
+
+	const HEIGHT: Record<ControlSize, string> = {
+		sm: 'var(--control-height-compact)',
+		md: 'var(--control-height-default)',
+		lg: 'var(--control-height-large)',
+	};
+	const height = $derived(control ? 'var(--control-height)' : HEIGHT[size]);
+	const caretDisabled = $derived(disabled || menuDisabled);
+
+	let caretEl = $state<HTMLSpanElement | null>(null);
+
+	function openMenu() {
+		caretEl?.querySelector<HTMLButtonElement>('[popovertarget]')?.click();
+	}
+
+	function onPrimaryKeydown(e: KeyboardEvent) {
+		if (e.key !== 'ArrowDown' || caretDisabled) return;
+		e.preventDefault();
+		openMenu();
+	}
+</script>
+
+<div
+	{...rest}
+	data-tsu="SplitButton"
+	class="split {klass}"
+	class:split-primary={variant === 'primary'}
+	style={styleProp}
+	style:--split-height={height}
+>
+	<span class="split-main">
+		<Button
+			{variant}
+			{size}
+			{control}
+			{type}
+			{loading}
+			{disabled}
+			block
+			{onclick}
+			onkeydown={onPrimaryKeydown}
+		>
+			{@render children()}
+		</Button>
+	</span>
+	<span class="split-caret" bind:this={caretEl}>
+		<Menu
+			{label}
+			{items}
+			{placement}
+			{tag}
+			{panelClass}
+			{gap}
+			{variant}
+			{size}
+			{control}
+			block
+			disabled={caretDisabled}
+			bind:open
+			{onopen}
+			{onclose}
+		>
+			{#snippet trigger()}<Icon name="chevron-down" size={size === 'sm' ? 14 : 16} />{/snippet}
+		</Menu>
+	</span>
+</div>
+
+<style>
+	.split {
+		display: inline-flex;
+		align-items: stretch;
+		vertical-align: middle;
+	}
+	.split-main {
+		display: flex;
+		position: relative;
+		--btn-radius: var(--r-md) 0 0 var(--r-md);
+	}
+	/* The caret is as wide as the control is tall; its border overlaps the
+	   primary's so the two 1px lines read as one divider. */
+	.split-caret {
+		display: flex;
+		position: relative;
+		width: var(--split-height);
+		flex: none;
+		margin-inline-start: -1px;
+		--pop-trigger-radius: 0 var(--r-md) var(--r-md) 0;
+		--pop-trigger-pad: 0;
+	}
+	/* The hovered or focused segment paints above its neighbour, so its
+	   accent border and focus ring are not cut by the overlap. */
+	.split-main:hover,
+	.split-main:focus-within,
+	.split-caret:hover,
+	.split-caret:focus-within {
+		z-index: 1;
+	}
+	/* On a filled primary the borders match the fill; paint the divider in the
+	   on-accent foreground instead. */
+	.split-primary .split-caret::before {
+		content: '';
+		position: absolute;
+		inset-block: 0;
+		inset-inline-start: 0;
+		width: 1px;
+		background: color-mix(in srgb, var(--text-on-accent) 35%, transparent);
+		pointer-events: none;
+		z-index: 2;
+	}
+</style>

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

@@ -0,0 +1,41 @@
+import type { ControlSize } from '../../size';
+import type { ComponentProps, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import Menu, { type MenuItem } from './Menu.svelte';
+type MenuProps = ComponentProps<typeof Menu>;
+type Own = {
+    variant?: 'default' | 'primary' | 'danger';
+    size?: ControlSize;
+    /** Use the shared `--control-height` toolbar/composer contract. */
+    control?: boolean;
+    /** Disables both segments. */
+    disabled?: boolean;
+    /** Disables the caret only; the primary action keeps working. */
+    menuDisabled?: boolean;
+    /** Accessible name of the caret ("More send options"). */
+    label: string;
+    items: MenuItem[];
+    placement?: MenuProps['placement'];
+    /** Custom trailing content for items that carry a `tag`. */
+    tag?: MenuProps['tag'];
+    panelClass?: string;
+    gap?: number;
+    /** Bindable open state of the menu. */
+    open?: boolean;
+    onopen?: () => void;
+    onclose?: () => void;
+    /** `type` of the primary action, for a submit inside a form. */
+    type?: 'button' | 'submit';
+    /** Busy primary action: spinner, blocks clicks, `aria-busy`. */
+    loading?: boolean;
+    /** Handler of the primary action. */
+    onclick?: (e: MouseEvent) => void;
+    class?: string;
+    style?: string;
+    /** Content of the primary action. */
+    children: Snippet;
+};
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
+declare const SplitButton: import("svelte").Component<$$ComponentProps, {}, "open">;
+type SplitButton = ReturnType<typeof SplitButton>;
+export default SplitButton;

package/dist/components/molecules/Tabs.svelte

@@ -7,6 +7,10 @@
 		disabled?: boolean;
 		/** Trailing count badge. */
 		count?: number | string;
+		/** Hover text for the whole tab — the full document name behind a truncated label. */
+		title?: string;
+		/** Per-tab override of the strip's `closable` (pin one tab open). */
+		closable?: boolean;
 		/**
 		 * Extra attributes for this tab's button — `data-*`, `title`…
 		 * The tab's own semantics (`role`, `aria-*`, `id`, `class`, `disabled`,
@@ -23,15 +27,25 @@
 	// and reveal the panel in one step; roving tabindex keeps exactly one tab in
 	// the Tab order. `value` is bindable; `panel` is a snippet that receives the
 	// active id so the caller renders the matching content.
+	//
+	// Without `panel` the tablist stands alone as a document strip: `closable`
+	// tabs gain a close control, Delete and middle-click close the focused tab,
+	// `leading` decorates each tab and `actions` trails the strip.
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
 	import Icon from '../atoms/Icon.svelte';
+	import IconButton from './IconButton.svelte';
 
 	let {
 		tabs,
 		value = $bindable(),
 		label = 'Tabs',
 		panel,
+		closable = false,
+		onclose,
+		closeLabel = 'Close tab',
+		leading,
+		actions,
 		class: klass = '',
 		style: styleProp = '',
 		panelClass = '',
@@ -43,7 +57,18 @@
 		tabs: TabItem[];
 		value?: string;
 		label?: string;
-		panel: Snippet<[string]>;
+		/** Content for the active tab. Omit it for a strip-only tablist. */
+		panel?: Snippet<[string]>;
+		/** Every tab gets a close control; Delete and middle-click close too. */
+		closable?: boolean;
+		/** Called with the tab id; the caller removes it from `tabs`. */
+		onclose?: (id: string) => void;
+		/** Accessible name of each close control. */
+		closeLabel?: string;
+		/** Rendered before the icon and label of every tab (a status dot, a number). */
+		leading?: Snippet<[TabItem]>;
+		/** Trailing controls after the strip (close all, new tab). */
+		actions?: Snippet;
 		class?: string;
 		style?: string;
 		panelClass?: string;
@@ -60,12 +85,17 @@
 
 	let listEl = $state<HTMLDivElement | null>(null);
 	const baseId = `tabs-${Math.random().toString(36).slice(2, 8)}`;
+	const panelId = $derived(panel ? `${baseId}-panel` : undefined);
+
+	function canClose(t: TabItem): boolean {
+		return t.closable ?? closable;
+	}
 
 	function select(id: string, focus = false) {
 		if (tabs.find((t) => t.id === id)?.disabled) return;
 		value = id;
 		queueMicrotask(() => {
-			const el = listEl?.querySelector<HTMLButtonElement>(`#${baseId}-tab-${id}`);
+			const el = listEl?.querySelector<HTMLElement>(`#${baseId}-tab-${id}`);
 			// The list scrolls when it is too narrow, so keyboard selection has to
 			// bring the tab back into view or it moves somewhere unseen.
 			el?.scrollIntoView({ block: 'nearest', inline: 'nearest' });
@@ -80,9 +110,33 @@
 		}
 		return from;
 	}
+	// Closing the selected tab hands selection to a neighbour first, so the
+	// caller's removal never leaves the strip without a tabbable tab.
+	function close(id: string, focus = false) {
+		const i = tabs.findIndex((t) => t.id === id);
+		if (i < 0 || !canClose(tabs[i])) return;
+		if (value === id) {
+			const others = tabs.filter((t) => t.id !== id && !t.disabled);
+			const next = others.find((t) => tabs.indexOf(t) > i) ?? others.at(-1);
+			if (next) select(next.id, focus);
+			else value = undefined;
+		}
+		onclose?.(id);
+	}
+	function onauxclick(e: MouseEvent, id: string) {
+		if (e.button !== 1) return;
+		e.preventDefault();
+		close(id);
+	}
 	function onkeydown(e: KeyboardEvent) {
 		const i = tabs.findIndex((t) => t.id === value);
 		if (i < 0) return;
+		if (e.key === 'Delete') {
+			if (!canClose(tabs[i])) return;
+			e.preventDefault();
+			close(tabs[i].id, true);
+			return;
+		}
 		let next = i;
 		if (e.key === 'ArrowRight') next = step(i, 1);
 		else if (e.key === 'ArrowLeft') next = step(i, -1);
@@ -94,36 +148,90 @@
 	}
 </script>
 
+{#snippet body(t: TabItem)}
+	{#if leading}{@render leading(t)}{/if}
+	{#if t.icon}<Icon name={t.icon} />{/if}
+	<span class="label">{t.label}</span>
+	{#if t.count !== undefined}<Badge size="sm" tone={value === t.id ? 'accent' : 'neutral'}>{t.count}</Badge>{/if}
+{/snippet}
+
 <div {...rest} class="tabs {klass}" style={styleProp} data-tsu="Tabs">
-	<div bind:this={listEl} role="tablist" aria-label={label} tabindex="-1" class="tablist" {onkeydown}>
-		{#each tabs as t (t.id)}
-			<button
-				type="button"
-				{...t.attrs}
-				role="tab"
-				id="{baseId}-tab-{t.id}"
-				aria-selected={value === t.id}
-				aria-controls="{baseId}-panel"
-				disabled={t.disabled}
-				tabindex={value === t.id ? 0 : -1}
-				class="tab"
-				class:selected={value === t.id}
-				onclick={() => select(t.id)}
-			>
-				{#if t.icon}<Icon name={t.icon} />{/if}
-				<span>{t.label}</span>
-				{#if t.count !== undefined}<Badge size="sm" tone={value === t.id ? 'accent' : 'neutral'}>{t.count}</Badge>{/if}
-			</button>
-		{/each}
-	</div>
-	<div role="tabpanel" id="{baseId}-panel" tabindex="0" class="tabpanel {panelClass}" class:pad-none={panelPadding === 'none'} class:pad-sm={panelPadding === 'sm'}>
-		{#if value !== undefined}{@render panel(value)}{/if}
+	<div class="strip">
+		<div bind:this={listEl} role="tablist" aria-label={label} tabindex="-1" class="tablist" {onkeydown}>
+			{#each tabs as t (t.id)}
+				{#if canClose(t)}
+					<!-- A close control cannot nest inside a <button>, so a closable tab is a div. -->
+					<div
+						{...t.attrs as HTMLAttributes<HTMLDivElement>}
+						role="tab"
+						id="{baseId}-tab-{t.id}"
+						title={t.title ?? t.attrs?.title}
+						aria-selected={value === t.id}
+						aria-controls={panelId}
+						aria-disabled={t.disabled || undefined}
+						tabindex={value === t.id ? 0 : -1}
+						class="tab closable"
+						class:selected={value === t.id}
+						class:disabled={t.disabled}
+						onclick={() => select(t.id)}
+						onauxclick={(e) => onauxclick(e, t.id)}
+					>
+						{@render body(t)}
+						<IconButton
+							icon="x"
+							label={closeLabel}
+							inline
+							hoverDanger
+							size={14}
+							hitArea="compact"
+							tabindex={-1}
+							disabled={t.disabled}
+							onclick={(e) => {
+								e.stopPropagation();
+								close(t.id);
+							}}
+						/>
+					</div>
+				{:else}
+					<button
+						type="button"
+						{...t.attrs}
+						role="tab"
+						id="{baseId}-tab-{t.id}"
+						title={t.title ?? t.attrs?.title}
+						aria-selected={value === t.id}
+						aria-controls={panelId}
+						disabled={t.disabled}
+						tabindex={value === t.id ? 0 : -1}
+						class="tab"
+						class:selected={value === t.id}
+						onclick={() => select(t.id)}
+					>
+						{@render body(t)}
+					</button>
+				{/if}
+			{/each}
+		</div>
+		{#if actions}
+			<div class="actions">{@render actions()}</div>
+		{/if}
 	</div>
+	{#if panel}
+		<div role="tabpanel" id={panelId} tabindex="0" class="tabpanel {panelClass}" class:pad-none={panelPadding === 'none'} class:pad-sm={panelPadding === 'sm'}>
+			{#if value !== undefined}{@render panel(value)}{/if}
+		</div>
+	{/if}
 </div>
 
 <style>
+	.strip {
+		display: flex;
+		align-items: stretch;
+	}
 	.tablist {
 		display: flex;
+		flex: 1 1 auto;
+		min-width: 0;
 		gap: var(--sp-1);
 		border-bottom: 1px solid var(--border);
 		overflow-x: auto;
@@ -144,14 +252,21 @@
 		font-weight: var(--fw-medium);
 		border-bottom: 2px solid transparent;
 		margin-bottom: -1px;
+		max-width: var(--tab-max-width, none);
 		transition:
 			color 0.12s var(--ease),
 			border-color 0.12s var(--ease);
 	}
-	.tab:hover:not(:disabled) {
+	.tab.closable {
+		cursor: pointer;
+		padding-inline-end: var(--sp-2);
+		user-select: none;
+	}
+	.tab:hover:not(:disabled, .disabled) {
 		color: var(--text);
 	}
-	.tab:disabled {
+	.tab:disabled,
+	.tab.disabled {
 		opacity: 0.45;
 		cursor: not-allowed;
 	}
@@ -159,6 +274,19 @@
 		color: var(--accent);
 		border-bottom-color: var(--accent);
 	}
+	.label {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+	.actions {
+		display: flex;
+		flex: 0 0 auto;
+		align-items: center;
+		gap: var(--sp-1);
+		padding-inline-start: var(--sp-2);
+		border-bottom: 1px solid var(--border);
+	}
 	.tabpanel {
 		padding-top: var(--sp-4);
 	}

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

@@ -6,6 +6,10 @@ export interface TabItem {
     disabled?: boolean;
     /** Trailing count badge. */
     count?: number | string;
+    /** Hover text for the whole tab — the full document name behind a truncated label. */
+    title?: string;
+    /** Per-tab override of the strip's `closable` (pin one tab open). */
+    closable?: boolean;
     /**
      * Extra attributes for this tab's button — `data-*`, `title`…
      * The tab's own semantics (`role`, `aria-*`, `id`, `class`, `disabled`,
@@ -19,7 +23,18 @@ type Own = {
     tabs: TabItem[];
     value?: string;
     label?: string;
-    panel: Snippet<[string]>;
+    /** Content for the active tab. Omit it for a strip-only tablist. */
+    panel?: Snippet<[string]>;
+    /** Every tab gets a close control; Delete and middle-click close too. */
+    closable?: boolean;
+    /** Called with the tab id; the caller removes it from `tabs`. */
+    onclose?: (id: string) => void;
+    /** Accessible name of each close control. */
+    closeLabel?: string;
+    /** Rendered before the icon and label of every tab (a status dot, a number). */
+    leading?: Snippet<[TabItem]>;
+    /** Trailing controls after the strip (close all, new tab). */
+    actions?: Snippet;
     class?: string;
     style?: string;
     panelClass?: string;