@dorsk/tsumikit 0.72.0 → 0.73.1

package/dist/components/molecules/SelectButton.svelte

@@ -66,7 +66,8 @@
 </script>
 
 <!-- The wrapper (owned here, so styled scoped) is the positioning context that
-     clips the transparent overlaid <select>; the icon Button shows through. -->
+     clips the transparent overlaid <select>; the inert icon Button is the face
+     behind it, so the select is the only focusable control. -->
 <span
 	class="select-button {klass}"
 	class:row={variant === 'row'}
@@ -77,32 +78,33 @@
 	class:no-shrink={!shrink}
 	class:block={block || variant === 'row'}
 >
-	<Button variant="ghost" icon={variant === 'square'} block={variant === 'row'} {box} {hitArea} {title} aria-label={label}>
+	<Button variant="ghost" icon={variant === 'square'} block={variant === 'row'} {box} {hitArea} inert tabindex={-1}>
 		<span aria-hidden="true" class="sb-glyph">
 			{#if iconChildren}<Icon>{@render iconChildren()}</Icon>{:else if icon}<Icon name={icon} />{:else}{glyph}{/if}
 		</span>
 		{#if variant === 'row'}<span aria-hidden="true" class="sb-label">{label}</span>{/if}
-		<Select
-			variant="ghost"
-			aria-label={label}
-			{value}
-			onchange={(e) => onchange((e.currentTarget as HTMLSelectElement).value)}
-		>
-			{#if groups}
-				{#each groups as g (g.label)}
-					<optgroup label={g.label}>
-						{#each g.options as o (o.value)}
-							<option value={o.value}>{o.label}</option>
-						{/each}
-					</optgroup>
-				{/each}
-			{:else}
-				{#each options ?? [] as o (o.value)}
-					<option value={o.value}>{o.label}</option>
-				{/each}
-			{/if}
-		</Select>
 	</Button>
+	<Select
+		variant="ghost"
+		aria-label={label}
+		{title}
+		{value}
+		onchange={(e) => onchange((e.currentTarget as HTMLSelectElement).value)}
+	>
+		{#if groups}
+			{#each groups as g (g.label)}
+				<optgroup label={g.label}>
+					{#each g.options as o (o.value)}
+						<option value={o.value}>{o.label}</option>
+					{/each}
+				</optgroup>
+			{/each}
+		{:else}
+			{#each options ?? [] as o (o.value)}
+				<option value={o.value}>{o.label}</option>
+			{/each}
+		{/if}
+	</Select>
 </span>
 
 <style>
@@ -127,6 +129,15 @@
 	.select-button.active {
 		color: var(--accent);
 	}
+	/* The inert face takes no pointer events: mirror ghost hover and the
+	   focus ring from the select overlaying it. */
+	.select-button:hover :global(.btn-ghost) {
+		background: var(--bg-elevated-2);
+	}
+	.select-button:has(:focus-visible) {
+		outline: 2px solid var(--accent);
+		outline-offset: 2px;
+	}
 	.select-button.row :global(.btn) {
 		justify-content: flex-start;
 		gap: var(--sp-2);

package/dist/components/molecules/SwipeRow.svelte

@@ -18,6 +18,10 @@
 	 * a drag that is more vertical than horizontal is left to the scroller.
 	 * The same actions are reachable as visually hidden buttons for keyboard
 	 * and screen-reader users.
+	 *
+	 * On touch the browser implicitly captures the pointer on the element under
+	 * the finger; taking capture on the row makes that child fire a bubbling
+	 * `lostpointercapture`, which must not be read as a cancel.
 	 */
 	import type { Snippet } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -162,8 +166,8 @@
 		e.preventDefault();
 	}
 
-	function onlostpointercapture() {
-		if (pointerId === null) return;
+	function onlostpointercapture(e: PointerEvent) {
+		if (pointerId === null || e.pointerId !== pointerId || e.target !== e.currentTarget) return;
 		pointerId = null;
 		locked = null;
 		dragging = false;

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

@@ -13,6 +13,10 @@ export interface SwipeAction {
      * a drag that is more vertical than horizontal is left to the scroller.
      * The same actions are reachable as visually hidden buttons for keyboard
      * and screen-reader users.
+     *
+     * On touch the browser implicitly captures the pointer on the element under
+     * the finger; taking capture on the row makes that child fire a bubbling
+     * `lostpointercapture`, which must not be read as a cancel.
      */
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes } from 'svelte/elements';

package/dist/components/molecules/Tabs.svelte

@@ -86,6 +86,12 @@
 	let listEl = $state<HTMLDivElement | null>(null);
 	const baseId = `tabs-${Math.random().toString(36).slice(2, 8)}`;
 	const panelId = $derived(panel ? `${baseId}-panel` : undefined);
+	// The roving tab stop: the selected tab, or the first enabled one when the
+	// selection is unknown or disabled, so the strip never drops out of the Tab order.
+	const stop = $derived(
+		tabs.find((t) => t.id === value && !t.disabled) ?? tabs.find((t) => !t.disabled)
+	);
+	const tabId = (id: string) => `${baseId}-tab-${id}`;
 
 	function canClose(t: TabItem): boolean {
 		return t.closable ?? closable;
@@ -95,7 +101,7 @@
 		if (tabs.find((t) => t.id === id)?.disabled) return;
 		value = id;
 		queueMicrotask(() => {
-			const el = listEl?.querySelector<HTMLElement>(`#${baseId}-tab-${id}`);
+			const el = listEl?.ownerDocument.getElementById(tabId(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' });
@@ -129,7 +135,7 @@
 		close(id);
 	}
 	function onkeydown(e: KeyboardEvent) {
-		const i = tabs.findIndex((t) => t.id === value);
+		const i = stop ? tabs.indexOf(stop) : -1;
 		if (i < 0) return;
 		if (e.key === 'Delete') {
 			if (!canClose(tabs[i])) return;
@@ -169,7 +175,7 @@
 						aria-selected={value === t.id}
 						aria-controls={panelId}
 						aria-disabled={t.disabled || undefined}
-						tabindex={value === t.id ? 0 : -1}
+						tabindex={stop?.id === t.id ? 0 : -1}
 						class="tab closable"
 						class:selected={value === t.id}
 						class:disabled={t.disabled}
@@ -202,7 +208,7 @@
 						aria-selected={value === t.id}
 						aria-controls={panelId}
 						disabled={t.disabled}
-						tabindex={value === t.id ? 0 : -1}
+						tabindex={stop?.id === t.id ? 0 : -1}
 						class="tab"
 						class:selected={value === t.id}
 						onclick={() => select(t.id)}
@@ -217,7 +223,7 @@
 		{/if}
 	</div>
 	{#if panel}
-		<div role="tabpanel" id={panelId} tabindex="0" class="tabpanel {panelClass}" class:pad-none={panelPadding === 'none'} class:pad-sm={panelPadding === 'sm'}>
+		<div role="tabpanel" id={panelId} aria-labelledby={value === undefined ? undefined : tabId(value)} tabindex="0" class="tabpanel {panelClass}" class:pad-none={panelPadding === 'none'} class:pad-sm={panelPadding === 'sm'}>
 			{#if value !== undefined}{@render panel(value)}{/if}
 		</div>
 	{/if}

package/dist/components/molecules/Timestamp.svelte

@@ -130,7 +130,7 @@
 	<!-- Unparseable input: degrade to an inert dash rather than empty text. -->
 	<time class="{cls} ts-invalid" data-tsu="Timestamp" style={styleProp} style:font-size={sizeVar}>—</time>
 {:else if showPopover}
-	<Popover label="Timestamp details" placement="bottom-start" bare>
+	<Popover label="{label}, details" placement="bottom-start" bare>
 		{#snippet trigger()}
 			<time class="{cls} ts-trigger" data-tsu="Timestamp" style={styleProp} style:font-size={sizeVar} datetime={machine}>{label}</time>
 		{/snippet}

package/dist/components/molecules/Toaster.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	// Renders the toast queue bottom-centered in two live regions: polite for
 	// ok/info/neutral, assertive (role=alert) for errors. Mount once near the
-	// app root. The stack lives in a manual popover so it paints in the
-	// top layer above an open Modal <dialog>; without the Popover API the
-	// attribute is ignored and the fixed/z-index positioning applies instead.
+	// app root. The stack lives in a manual popover so it paints in the top
+	// layer; without the Popover API the attribute is ignored and the
+	// fixed/z-index positioning applies instead. While a modal <dialog> is open
+	// everything outside it is inert, top layer included, so the stack moves
+	// into the topmost modal dialog and back to its host when it closes.
 	import { toasts } from '../../stores/toast.svelte';
 	import Button from '../atoms/Button.svelte';
 	import Card from '../atoms/Card.svelte';
@@ -11,16 +13,61 @@
 
 	let { class: klass = '', style: styleProp = '' }: { class?: string; style?: string } = $props();
 
+	let host: HTMLDivElement | undefined = $state();
 	let el: HTMLDivElement | undefined = $state();
 	const polite = $derived(toasts.items.filter((t) => t.tone !== 'error'));
 	const assertive = $derived(toasts.items.filter((t) => t.tone === 'error'));
 
-	$effect(() => {
-		if (!el || typeof el.showPopover !== 'function') return;
+	function topModal(): HTMLDialogElement | null {
+		let found: HTMLDialogElement | null = null;
+		for (const d of document.querySelectorAll<HTMLDialogElement>('dialog[open]')) {
+			try {
+				if (d.matches(':modal')) found = d;
+			} catch {}
+		}
+		return found;
+	}
+
+	let shown = false;
+	function show(stack: HTMLDivElement) {
+		if (typeof stack.showPopover !== 'function') return;
 		try {
-			if (toasts.items.length) el.showPopover();
-			else el.hidePopover();
+			stack.showPopover();
+			shown = true;
 		} catch {}
+	}
+	function hide(stack: HTMLDivElement) {
+		if (!shown || typeof stack.hidePopover !== 'function') return;
+		shown = false;
+		try {
+			stack.hidePopover();
+		} catch {}
+	}
+
+	$effect(() => {
+		const stack = el;
+		const home = host;
+		if (!stack || !home) return;
+		if (!toasts.items.length) {
+			hide(stack);
+			return;
+		}
+		const place = () => {
+			const target = topModal() ?? home;
+			if (stack.parentNode !== target) {
+				hide(stack);
+				target.appendChild(stack);
+			}
+			show(stack);
+		};
+		place();
+		const observer = new MutationObserver(place);
+		observer.observe(document.body, { attributes: true, attributeFilter: ['open'], subtree: true });
+		return () => observer.disconnect();
+	});
+
+	$effect(() => () => {
+		if (el && host && el.parentNode !== host) host.appendChild(el);
 	});
 </script>
 
@@ -62,16 +109,21 @@
 	{/if}
 {/snippet}
 
-<div class="toaster {klass}" style={styleProp} bind:this={el} popover="manual" data-tsu="Toaster">
-	<div class="region" role="status" aria-live="polite">
-		{#each polite as t (t.id)}{@render toast(t)}{/each}
-	</div>
-	<div class="region" role="alert" aria-live="assertive">
-		{#each assertive as t (t.id)}{@render toast(t)}{/each}
+<div class="toaster-host" bind:this={host}>
+	<div class="toaster {klass}" style={styleProp} bind:this={el} popover="manual" data-tsu="Toaster">
+		<div class="region" role="status" aria-live="polite">
+			{#each polite as t (t.id)}{@render toast(t)}{/each}
+		</div>
+		<div class="region" role="alert" aria-live="assertive">
+			{#each assertive as t (t.id)}{@render toast(t)}{/each}
+		</div>
 	</div>
 </div>
 
 <style>
+	.toaster-host {
+		display: contents;
+	}
 	.toaster {
 		position: fixed;
 		inset: auto;
@@ -142,4 +194,9 @@
 			opacity: 0;
 		}
 	}
+	@media (prefers-reduced-motion: reduce) {
+		.toaster :global(.toast) {
+			animation: none;
+		}
+	}
 </style>

package/dist/components/molecules/Tooltip.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	// Lightweight tooltip. Shows on hover (after a short delay) and on keyboard
-	// focus of the trigger; hides on blur / mouseleave / Escape. The trigger is
+	// focus of the trigger; hides on blur / mouseleave / Escape (anywhere). The trigger is
 	// any snippet; an action wires `aria-describedby` onto its first focusable
 	// element so screen readers announce the text.
 	//
@@ -63,6 +63,11 @@
 		if (wrapEl && tipEl) place(wrapEl, tipEl, `${placement}-center`, 6);
 	}
 
+	// Escape must dismiss a hover-opened bubble even while focus sits elsewhere.
+	function onEscape(e: KeyboardEvent) {
+		if (e.key === 'Escape') hideNow();
+	}
+
 	function show() {
 		clearTimeout(hideTimer); // pointer came back within the grace period
 		clearTimeout(showTimer);
@@ -72,15 +77,20 @@
 			reposition();
 			addEventListener('scroll', reposition, true);
 			addEventListener('resize', reposition);
+			document.addEventListener('keydown', onEscape);
 		}, delay);
 	}
 	function hideNow() {
 		clearTimeout(showTimer);
 		clearTimeout(hideTimer);
-		if (tipEl?.matches(':popover-open')) tipEl.hidePopover();
+		try {
+			if (tipEl?.matches(':popover-open')) tipEl.hidePopover();
+		} catch {}
 		removeEventListener('scroll', reposition, true);
 		removeEventListener('resize', reposition);
+		document.removeEventListener('keydown', onEscape);
 	}
+	$effect(() => () => hideNow());
 	// Debounced close: cancelled if the pointer/focus enters the panel (rich
 	// mode) or returns to the trigger before `closeDelay` elapses.
 	function scheduleHide() {
@@ -104,21 +114,23 @@
 			node.tabIndex = 0;
 			target = node;
 		}
-		target.setAttribute('aria-describedby', id);
-		const onkey = (e: KeyboardEvent) => e.key === 'Escape' && hideNow();
+		// The trigger may already be described (a Field hint/error): append our
+		// id to the token list and take back only that token on destroy.
+		const describedBy = () => (target.getAttribute('aria-describedby') ?? '').split(/\s+/).filter(Boolean);
+		target.setAttribute('aria-describedby', [...describedBy().filter((t) => t !== id), id].join(' '));
 		node.addEventListener('mouseenter', show);
 		node.addEventListener('mouseleave', scheduleHide);
 		node.addEventListener('focusin', show);
 		node.addEventListener('focusout', scheduleHide);
-		node.addEventListener('keydown', onkey);
 		return {
 			destroy() {
-				target.removeAttribute('aria-describedby');
+				const rest = describedBy().filter((t) => t !== id);
+				if (rest.length) target.setAttribute('aria-describedby', rest.join(' '));
+				else target.removeAttribute('aria-describedby');
 				node.removeEventListener('mouseenter', show);
 				node.removeEventListener('mouseleave', scheduleHide);
 				node.removeEventListener('focusin', show);
 				node.removeEventListener('focusout', scheduleHide);
-				node.removeEventListener('keydown', onkey);
 			}
 		};
 	}
@@ -126,19 +138,16 @@
 	// Action for the panel: in rich mode it accepts the pointer/focus, which
 	// cancels the pending close (hovercard persistence).
 	function panel(node: HTMLElement) {
-		const onkey = (e: KeyboardEvent) => e.key === 'Escape' && hideNow();
 		node.addEventListener('mouseenter', cancelHide);
 		node.addEventListener('mouseleave', scheduleHide);
 		node.addEventListener('focusin', cancelHide);
 		node.addEventListener('focusout', scheduleHide);
-		node.addEventListener('keydown', onkey);
 		return {
 			destroy() {
 				node.removeEventListener('mouseenter', cancelHide);
 				node.removeEventListener('mouseleave', scheduleHide);
 				node.removeEventListener('focusin', cancelHide);
 				node.removeEventListener('focusout', scheduleHide);
-				node.removeEventListener('keydown', onkey);
 			}
 		};
 	}