@dorsk/tsumikit 0.57.0 → 0.58.1

package/dist/components/molecules/Combobox.svelte

@@ -0,0 +1,299 @@
+<script lang="ts" generics="T">
+	// Listbox of suggestions for a text field the consumer renders as `children`
+	// (an Input for plain autocomplete, a Textarea for `@`/`#` mentions). The kit
+	// owns the listbox, its placement, the field's combobox ARIA (applied to the
+	// wrapped element imperatively, since the field is not ours) and the keys;
+	// the consumer decides *when* it is open and what the options are.
+	import { tick, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { type AnchorRect, placeAt } from '../../floating';
+	import { caretRect, comboboxAction } from './combobox-keyboard.js';
+
+	type FieldEl = HTMLInputElement | HTMLTextAreaElement;
+	type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+	type CloseReason = 'escape' | 'blur' | 'select';
+
+	type Own = {
+		options: T[];
+		/** Whether the listbox shows. The kit only ever sets it to `false`. */
+		open?: boolean;
+		/** Highlighted option. */
+		index?: number;
+		/** Accessible name of the listbox. */
+		label: string;
+		/** The wrapped field; defaults to the first `input`/`textarea` in `children`. */
+		el?: FieldEl | null;
+		/** Float under the field's edge, or under the text caret. */
+		anchor?: 'field' | 'caret';
+		placement?: Placement;
+		gap?: number;
+		/** Arrow keys wrap at the ends. */
+		loop?: boolean;
+		/** Home/End jump the highlight instead of moving the caret. */
+		homeEnd?: boolean;
+		/** Keys that pick the highlighted option. */
+		selectOn?: readonly ('Enter' | 'Tab')[];
+		/** Close when focus leaves the field and the listbox. */
+		closeOnBlur?: boolean;
+		/** `role="combobox"` on the field: `auto` applies it to an `input` only,
+		 *  since ARIA in HTML forbids it on a `textarea`. */
+		fieldRole?: 'auto' | 'combobox' | 'none';
+		getKey?: (option: T, index: number) => string | number;
+		/** Default row text when no `option` snippet is given. */
+		getLabel?: (option: T) => string;
+		onselect?: (option: T, index: number) => void;
+		onclose?: (reason: CloseReason) => void;
+		option?: Snippet<[T, { active: boolean; index: number }]>;
+		/** Shown instead of rows when `options` is empty; without it the listbox hides. */
+		empty?: string | Snippet;
+		children: Snippet;
+		class?: string;
+		style?: string;
+		panelClass?: string;
+		panelStyle?: string;
+	};
+
+	let {
+		options,
+		open = $bindable(false),
+		index = $bindable(0),
+		label,
+		el = null,
+		anchor = 'field',
+		placement = 'bottom-start',
+		gap = 4,
+		loop = true,
+		homeEnd = false,
+		selectOn = ['Enter', 'Tab'],
+		closeOnBlur = true,
+		fieldRole = 'auto',
+		getKey,
+		getLabel = (o) => String(o),
+		onselect,
+		onclose,
+		option,
+		empty,
+		children,
+		class: klass = '',
+		style: styleProp = '',
+		panelClass = '',
+		panelStyle = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
+
+	const id = `cb-${Math.random().toString(36).slice(2, 8)}`;
+	const optionId = (i: number) => `${id}-o${i}`;
+
+	let wrapEl = $state<HTMLDivElement | null>(null);
+	let panelEl = $state<HTMLDivElement | null>(null);
+	const found = $derived(wrapEl?.querySelector<FieldEl>('input, textarea') ?? null);
+	const field = $derived(el ?? found);
+	const visible = $derived(open && (options.length > 0 || empty !== undefined));
+	const active = $derived(options.length ? Math.min(Math.max(index, 0), options.length - 1) : -1);
+
+	const FIELD_ATTRS = [
+		'role',
+		'aria-autocomplete',
+		'aria-haspopup',
+		'aria-expanded',
+		'aria-controls',
+		'aria-activedescendant',
+	];
+
+	$effect(() => {
+		const f = field;
+		if (!f) return;
+		return () => {
+			for (const a of FIELD_ATTRS) f.removeAttribute(a);
+		};
+	});
+
+	$effect(() => {
+		const f = field;
+		if (!f) return;
+		const role =
+			fieldRole === 'combobox' || (fieldRole === 'auto' && f.tagName === 'INPUT') ? 'combobox' : null;
+		if (role) f.setAttribute('role', role);
+		else f.removeAttribute('role');
+		f.setAttribute('aria-autocomplete', 'list');
+		f.setAttribute('aria-haspopup', 'listbox');
+		f.setAttribute('aria-expanded', String(visible));
+		if (visible) f.setAttribute('aria-controls', id);
+		else f.removeAttribute('aria-controls');
+		if (visible && active >= 0) f.setAttribute('aria-activedescendant', optionId(active));
+		else f.removeAttribute('aria-activedescendant');
+	});
+
+	function anchorRect(f: FieldEl): AnchorRect {
+		return anchor === 'caret' ? caretRect(f) : f.getBoundingClientRect();
+	}
+
+	function reposition() {
+		const f = field;
+		if (!visible || !f || !panelEl) return;
+		const r = anchorRect(f);
+		panelEl.style.width = anchor === 'field' ? `${r.width}px` : '';
+		placeAt(r, panelEl, placement, gap);
+	}
+
+	$effect(() => {
+		const p = panelEl;
+		if (!visible || !p) return;
+		try {
+			p.showPopover();
+		} catch {}
+		reposition();
+		addEventListener('scroll', reposition, true);
+		addEventListener('resize', reposition);
+		return () => {
+			removeEventListener('scroll', reposition, true);
+			removeEventListener('resize', reposition);
+			try {
+				p.hidePopover();
+			} catch {}
+		};
+	});
+
+	$effect(() => {
+		void options.length;
+		void anchor;
+		void placement;
+		if (visible) tick().then(reposition);
+	});
+
+	$effect(() => {
+		if (!visible || active < 0) return;
+		const row = panelEl?.children[active] as HTMLElement | undefined;
+		row?.scrollIntoView?.({ block: 'nearest' });
+	});
+
+	function close(reason: CloseReason) {
+		if (!open) return;
+		open = false;
+		onclose?.(reason);
+	}
+
+	function select(i: number) {
+		const o = options[i];
+		if (o === undefined) return;
+		onselect?.(o, i);
+		close('select');
+	}
+
+	function onKeydown(e: KeyboardEvent) {
+		const action = comboboxAction(e, {
+			open: visible,
+			count: options.length,
+			index: active,
+			loop,
+			homeEnd,
+			selectOn,
+		});
+		if (!action) return;
+		e.preventDefault();
+		e.stopPropagation();
+		if (action.type === 'move') index = action.index;
+		else if (action.type === 'select') select(active);
+		else close('escape');
+	}
+
+	function onFocusOut(e: FocusEvent) {
+		if (!closeOnBlur) return;
+		const to = e.relatedTarget as Node | null;
+		if (to && wrapEl?.contains(to)) return;
+		close('blur');
+	}
+</script>
+
+<div
+	bind:this={wrapEl}
+	{...rest}
+	data-tsu="Combobox"
+	class="cb {klass}"
+	style={styleProp}
+	onkeydowncapture={onKeydown}
+	onfocusout={onFocusOut}
+	oninput={reposition}
+	onclick={reposition}
+>
+	{@render children()}
+	{#if visible}
+		<div
+			bind:this={panelEl}
+			{id}
+			popover="manual"
+			role="listbox"
+			aria-label={label}
+			class="cb-panel {panelClass}"
+			class:cb-caret={anchor === 'caret'}
+			style={panelStyle}
+		>
+			{#each options as o, i (getKey ? getKey(o, i) : i)}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<div
+					id={optionId(i)}
+					role="option"
+					tabindex={-1}
+					aria-selected={i === active}
+					class="cb-option"
+					class:active={i === active}
+					onpointerdown={(e) => e.preventDefault()}
+					onpointerenter={() => (index = i)}
+					onclick={() => select(i)}
+				>
+					{#if option}{@render option(o, { active: i === active, index: i })}{:else}{getLabel(o)}{/if}
+				</div>
+			{:else}
+				<div class="cb-empty">
+					{#if typeof empty === 'string'}{empty}{:else if empty}{@render empty()}{/if}
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.cb {
+		position: relative;
+		min-width: 0;
+	}
+	.cb-panel {
+		position: fixed;
+		margin: 0;
+		inset: auto;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		gap: 1px;
+		min-width: var(--cb-min-width, 10rem);
+		max-width: calc(100vw - 2 * var(--sp-3));
+		max-height: var(--cb-max-height, min(16rem, 40vh));
+		overflow-y: auto;
+		padding: var(--sp-1);
+		background: var(--cb-bg, var(--bg-elevated));
+		color: var(--text);
+		border: 1px solid var(--cb-border, var(--border-strong));
+		border-radius: var(--cb-radius, var(--r-md));
+		box-shadow: var(--shadow-md);
+	}
+	.cb-panel.cb-caret {
+		max-width: min(22rem, calc(100vw - 2 * var(--sp-3)));
+	}
+	.cb-option {
+		padding: var(--sp-1) var(--sp-2);
+		border-radius: var(--r-sm);
+		font-size: var(--fs-sm);
+		cursor: pointer;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+	.cb-option.active {
+		background: var(--cb-active-bg, var(--bg-elevated-2));
+	}
+	.cb-empty {
+		padding: var(--sp-1) var(--sp-2);
+		font-size: var(--fs-sm);
+		color: var(--text-muted);
+	}
+</style>

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

@@ -0,0 +1,108 @@
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<T>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, keyof {
+        options: T[];
+        /** Whether the listbox shows. The kit only ever sets it to `false`. */
+        open?: boolean;
+        /** Highlighted option. */
+        index?: number;
+        /** Accessible name of the listbox. */
+        label: string;
+        /** The wrapped field; defaults to the first `input`/`textarea` in `children`. */
+        el?: (HTMLTextAreaElement | HTMLInputElement) | null;
+        /** Float under the field's edge, or under the text caret. */
+        anchor?: "field" | "caret";
+        placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end";
+        gap?: number;
+        /** Arrow keys wrap at the ends. */
+        loop?: boolean;
+        /** Home/End jump the highlight instead of moving the caret. */
+        homeEnd?: boolean;
+        /** Keys that pick the highlighted option. */
+        selectOn?: readonly ("Enter" | "Tab")[];
+        /** Close when focus leaves the field and the listbox. */
+        closeOnBlur?: boolean;
+        /** `role="combobox"` on the field: `auto` applies it to an `input` only,
+         *  since ARIA in HTML forbids it on a `textarea`. */
+        fieldRole?: "auto" | "combobox" | "none";
+        getKey?: (option: T, index: number) => string | number;
+        /** Default row text when no `option` snippet is given. */
+        getLabel?: (option: T) => string;
+        onselect?: (option: T, index: number) => void;
+        onclose?: (reason: "blur" | "select" | "escape") => void;
+        option?: Snippet<[T, {
+            active: boolean;
+            index: number;
+        }]>;
+        /** Shown instead of rows when `options` is empty; without it the listbox hides. */
+        empty?: string | Snippet;
+        children: Snippet;
+        class?: string;
+        style?: string;
+        panelClass?: string;
+        panelStyle?: string;
+    }> & {
+        options: T[];
+        /** Whether the listbox shows. The kit only ever sets it to `false`. */
+        open?: boolean;
+        /** Highlighted option. */
+        index?: number;
+        /** Accessible name of the listbox. */
+        label: string;
+        /** The wrapped field; defaults to the first `input`/`textarea` in `children`. */
+        el?: (HTMLTextAreaElement | HTMLInputElement) | null;
+        /** Float under the field's edge, or under the text caret. */
+        anchor?: "field" | "caret";
+        placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end";
+        gap?: number;
+        /** Arrow keys wrap at the ends. */
+        loop?: boolean;
+        /** Home/End jump the highlight instead of moving the caret. */
+        homeEnd?: boolean;
+        /** Keys that pick the highlighted option. */
+        selectOn?: readonly ("Enter" | "Tab")[];
+        /** Close when focus leaves the field and the listbox. */
+        closeOnBlur?: boolean;
+        /** `role="combobox"` on the field: `auto` applies it to an `input` only,
+         *  since ARIA in HTML forbids it on a `textarea`. */
+        fieldRole?: "auto" | "combobox" | "none";
+        getKey?: (option: T, index: number) => string | number;
+        /** Default row text when no `option` snippet is given. */
+        getLabel?: (option: T) => string;
+        onselect?: (option: T, index: number) => void;
+        onclose?: (reason: "blur" | "select" | "escape") => void;
+        option?: Snippet<[T, {
+            active: boolean;
+            index: number;
+        }]>;
+        /** Shown instead of rows when `options` is empty; without it the listbox hides. */
+        empty?: string | Snippet;
+        children: Snippet;
+        class?: string;
+        style?: string;
+        panelClass?: string;
+        panelStyle?: string;
+    };
+    exports: {};
+    bindings: "open" | "index";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "open" | "index";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Combobox: $$IsomorphicComponent;
+type Combobox<T> = InstanceType<typeof Combobox<T>>;
+export default Combobox;

package/dist/components/molecules/Composer.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-	// Chat composer: autoresizing Textarea with attach + send controls, submit
-	// shortcuts, prompt history on ↑/↓ at the text edges, paste-to-attach and
-	// drag-over state. Attachments render as removable chips above the field.
+	// Chat composer: autoresizing Textarea with attach + send controls fused into
+	// one InputGroup, submit shortcuts, prompt history on ↑/↓ at the text edges,
+	// paste-to-attach and drag-over state. Attachments render as removable chips
+	// above the field.
 	import type { Snippet } from 'svelte';
 	import Button from '../atoms/Button.svelte';
 	import Textarea from '../atoms/Textarea.svelte';
 	import AttachmentList from './AttachmentList.svelte';
 	import FileButton from './FileButton.svelte';
+	import InputGroup from './InputGroup.svelte';
 
 	let {
 		value = $bindable(''),
@@ -22,6 +24,7 @@
 		disabled = false,
 		maxHeight = '40vh',
 		rows = 1,
+		resize = 'none',
 		sendLabel = 'Send',
 		attachLabel = 'Attach',
 		leading,
@@ -44,6 +47,8 @@
 		disabled?: boolean;
 		maxHeight?: string;
 		rows?: number;
+		/** Manual drag handle on the top edge; `none` hides it. */
+		resize?: 'none' | 'top';
 		sendLabel?: string;
 		attachLabel?: string;
 		leading?: Snippet;
@@ -60,6 +65,7 @@
 	const fine = () => typeof matchMedia === 'function' && matchMedia('(pointer: fine)').matches;
 	const mode = $derived(submitOn === 'auto' ? (fine() ? 'enter' : 'mod-enter') : submitOn);
 	const canSend = $derived(!busy && !disabled && (value.trim().length > 0 || attachments.length > 0));
+	const hasAttach = $derived(!!onfiles || accept !== undefined);
 
 	function submit() {
 		if (!canSend) return;
@@ -123,6 +129,19 @@
 	}
 </script>
 
+{#snippet groupLeading()}
+	{#if leading}{@render leading()}{/if}
+	{#if hasAttach}
+		<FileButton onfiles={addFiles} {accept} multiple iconOnly label={attachLabel} variant="ghost" box="sm" {disabled} />
+	{/if}
+{/snippet}
+{#snippet groupTrailing()}
+	{#if trailing}{@render trailing()}{/if}
+	<Button variant="primary" box="sm" loading={busy} disabled={!canSend} aria-label={sendLabel} title={sendLabel} onclick={submit}>
+		<span aria-hidden="true">➤</span>
+	</Button>
+{/snippet}
+
 <div
 	data-tsu="Composer"
 	class="composer {klass}"
@@ -138,11 +157,12 @@
 	{ondrop}
 >
 	<AttachmentList files={attachments} onremove={removeAt} />
-	<div class="row">
-		{#if leading}{@render leading()}{/if}
-		{#if onfiles || accept !== undefined}
-			<FileButton onfiles={addFiles} {accept} multiple iconOnly label={attachLabel} variant="ghost" box="md" {disabled} />
-		{/if}
+	<InputGroup
+		align="end"
+		{disabled}
+		leading={leading || hasAttach ? groupLeading : undefined}
+		trailing={groupTrailing}
+	>
 		<Textarea
 			bind:value
 			bind:el
@@ -150,18 +170,13 @@
 			{rows}
 			{maxHeight}
 			{placeholder}
-			resize="none"
-			grow
+			{resize}
 			aria-label={placeholder}
 			disabled={disabled || busy}
 			{onkeydown}
 			{onpaste}
 		/>
-		{#if trailing}{@render trailing()}{/if}
-		<Button variant="primary" square loading={busy} disabled={!canSend} aria-label={sendLabel} title={sendLabel} onclick={submit}>
-			<span aria-hidden="true">➤</span>
-		</Button>
-	</div>
+	</InputGroup>
 	<span class="hint">{mode === 'enter' ? 'Enter to send · Shift+Enter for a new line' : 'Ctrl/⌘+Enter to send'}</span>
 </div>
 
@@ -170,23 +185,11 @@
 		display: flex;
 		flex-direction: column;
 		gap: var(--sp-2);
-		padding: var(--sp-2);
-		border: 1px solid var(--border-strong);
 		border-radius: var(--r-lg);
-		background: var(--surface);
-		transition: border-color 0.12s var(--ease);
-	}
-	.composer:focus-within {
-		border-color: var(--accent);
 	}
 	.composer.dragging {
-		border-style: dashed;
-		border-color: var(--accent);
-	}
-	.row {
-		display: flex;
-		align-items: flex-end;
-		gap: var(--sp-2);
+		outline: 2px dashed var(--accent);
+		outline-offset: var(--sp-1);
 	}
 	.hint {
 		font-size: var(--fs-xs);

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

@@ -15,6 +15,8 @@ type $$ComponentProps = {
     disabled?: boolean;
     maxHeight?: string;
     rows?: number;
+    /** Manual drag handle on the top edge; `none` hides it. */
+    resize?: 'none' | 'top';
     sendLabel?: string;
     attachLabel?: string;
     leading?: Snippet;

package/dist/components/molecules/Disclosure.svelte

@@ -0,0 +1,155 @@
+<script lang="ts" module>
+	export type DisclosureChevron = 'start' | 'end' | false;
+	export interface DisclosureHeaderContext {
+		open: boolean;
+	}
+</script>
+
+<script lang="ts">
+	// Single collapsible: a native <button aria-expanded aria-controls> (so Enter
+	// and Space activate it without a keydown handler) toggling a region panel.
+	// `open` is bindable; an unbound `open` plus `onchange` gives controlled mode.
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Icon from '../atoms/Icon.svelte';
+
+	let {
+		open = $bindable(false),
+		header,
+		children,
+		chevron = 'end',
+		id,
+		onchange,
+		disabled = false,
+		class: klass = '',
+		style: styleProp = '',
+		buttonClass = '',
+		panelClass = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
+
+	type Own = {
+		open?: boolean;
+		/** Rich header content; receives the live open state. */
+		header: Snippet<[DisclosureHeaderContext]>;
+		children: Snippet;
+		/** Chevron placement; `false` hides it. */
+		chevron?: DisclosureChevron;
+		/** Base for the button/panel ids the ARIA wiring uses. */
+		id?: string;
+		onchange?: (open: boolean) => void;
+		disabled?: boolean;
+		class?: string;
+		style?: string;
+		buttonClass?: string;
+		panelClass?: string;
+	};
+
+	const uid = $props.id();
+	const baseId = $derived(id ?? `disclosure-${uid}`);
+	const buttonId = $derived(`${baseId}-button`);
+	const panelId = $derived(`${baseId}-panel`);
+
+	function toggle() {
+		open = !open;
+		onchange?.(open);
+	}
+</script>
+
+<div
+	{...rest}
+	class="disclosure {klass}"
+	class:disclosure--open={open}
+	style={styleProp}
+	data-tsu="Disclosure"
+>
+	<button
+		type="button"
+		id={buttonId}
+		class="disclosure__button {buttonClass}"
+		aria-expanded={open}
+		aria-controls={panelId}
+		{disabled}
+		onclick={toggle}
+	>
+		{#if chevron === 'start'}
+			<span class="disclosure__chevron"><Icon name="chevron-down" /></span>
+		{/if}
+		<span class="disclosure__header">{@render header({ open })}</span>
+		{#if chevron === 'end'}
+			<span class="disclosure__chevron"><Icon name="chevron-down" /></span>
+		{/if}
+	</button>
+	<div
+		id={panelId}
+		class="disclosure__panel {panelClass}"
+		role="region"
+		aria-labelledby={buttonId}
+		hidden={!open}
+	>
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	.disclosure {
+		display: block;
+	}
+	.disclosure__button {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--sp-2);
+		width: 100%;
+		padding: var(--sp-3) var(--sp-4);
+		border: 0;
+		background: none;
+		color: inherit;
+		font: inherit;
+		font-weight: var(--fw-medium);
+		font-size: var(--fs-sm);
+		text-align: start;
+		cursor: pointer;
+		user-select: none;
+	}
+	.disclosure__button:hover:not(:disabled) {
+		background: var(--bg-elevated-2);
+	}
+	.disclosure__button:focus-visible {
+		outline: 2px solid var(--accent);
+		outline-offset: -2px;
+	}
+	.disclosure__button:disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+	.disclosure__header {
+		display: flex;
+		align-items: center;
+		gap: var(--sp-2);
+		min-width: 0;
+		flex: 1 1 auto;
+	}
+	.disclosure__chevron {
+		display: inline-flex;
+		flex: none;
+		color: var(--text-muted);
+		transition: transform 0.15s var(--ease);
+	}
+	.disclosure--open .disclosure__chevron {
+		transform: rotate(180deg);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.disclosure__chevron {
+			transition: none;
+		}
+	}
+	.disclosure__panel {
+		padding: 0 var(--sp-4) var(--sp-4);
+		font-size: var(--fs-sm);
+		color: var(--text-muted);
+	}
+	.disclosure__panel[hidden] {
+		display: none;
+	}
+</style>