@dorsk/tsumikit 0.53.0 → 0.55.0

package/README.md

@@ -222,6 +222,23 @@ renders, and the trigger belongs to `Popover`, so `.toolbar .my-trigger` compile
 to `.toolbar.svelte-x .my-trigger.svelte-x` and matches nothing. Use `style` and
 the properties above instead.
 
+### Anchoring to a component
+
+Components that render a single addressable element forward rest props onto it,
+so `data-journey`, `data-testid` and analytics attributes land where you expect.
+`Popover` puts them on its **trigger** (so `Menu`, `ThemePicker` and
+`FontScalePicker` forward through to it), `Tabs` on its root — with a per-tab
+`attrs` bag on each `TabItem` — `FilterInput` on its root, and `FilterSearchBar`
+forwards onto that. `Menu` items take an `attrs` bag. Components that forward
+into another component take `AnchorAttributes` (`data-*` only), which cannot
+collide with the child's own props; the rest take full `HTMLAttributes`. The
+component's own `role`, `aria-*`, `class` and keyboard wiring are applied after
+the spread and always win, so an anchor can never break behaviour; `class` in a
+rest/`attrs` bag is therefore dropped — use `class` / `triggerClass`.
+
+Never target the private `data-tsu="…"` markers: they are internal, unguarded by
+any test, and change without a major.
+
 ## Components
 
 **Atoms:** Text, Heading, Button, Input (`icon` inset leading glyph,
@@ -241,7 +258,8 @@ always/hover/none, `align`), Icon (open registry — pass a `children` snippet f
 any custom SVG).
 
 **Molecules:** Field (`grow`), IconButton, SelectButton, Toggle, OptionButton, Modal,
-Popover, Menu (items take a free-form trailing `tag` + `tagTone`, or a `tag` snippet),
+Popover, Menu (items take a free-form trailing `tag` + `tagTone`, or a `tag` snippet,
+and an `attrs` object for `data-*`/test ids on the row),
 Tabs, RadioGroup (`variant="rows"`: bordered rows, per-option `note`/`description`,
 `action(option)` trailing control that never toggles, `below(option)` inline panel),
 Tooltip, Accordion, CopyButton, FileButton,
@@ -523,6 +541,14 @@ triggers, and `SegmentedControl`. Each renders an exact
 original ghost icon-button default. Use `control` on `Button` or `Popover` when
 the roomier shared `--control-height` composer contract is required.
 
+`Toolbar` implements the keyboard contract its `role="toolbar"` announces: the
+bar is a **single tab stop**, and `←`/`→` (plus `Home`/`End`) move between the
+controls that are actually visible — collapsed `data-overflow` children drop out
+of the ring and the `…` trigger is its last stop. Controls that own the arrow
+keys themselves (text inputs, `select`, sliders) keep them. Pass
+`roving={false}` to opt out; that drops the role along with the promise, leaving
+every child an ordinary tab stop.
+
 Button and Popover share the same semantic tones. For a confirmed positive
 action, `tone="success"` gives neutral controls a success tint; combine it with
 `variant="primary"` for a filled success action without consumer CSS.
@@ -610,7 +636,8 @@ label, copy, line numbers, wrap, scroll) and takes code three ways: plain
   `disabled` and native events pass through.
 - Visible `:focus-visible` rings; ARIA patterns implemented for switch, menu
   (`role=menu` + roving focus), tabs (`tablist` + arrow keys), radiogroup,
-  dialog; polite live region for toasts; `.sr-only`.
+  toolbar (`role=toolbar` + roving tabindex), dialog; polite live region for
+  toasts; `.sr-only`.
 - Mobile-first: one `min-width: 640px` breakpoint, bottom-sheet→centered-modal,
   safe-area insets, 16px-min inputs (no iOS zoom).
 - A verified color-blind-safe theme (Okabe-Ito); meaning never relies on hue

package/dist/anchor.d.ts

@@ -0,0 +1,10 @@
+/**
+ * `data-*` attributes for addressing a component later — tour anchors, test ids.
+ *
+ * Components rendering their own element take a full `HTMLAttributes` rest
+ * instead; this narrower bag is for those that forward into another component,
+ * where a full attribute type collides with the child's narrower props.
+ */
+export type AnchorAttributes = {
+    [key: `data-${string}`]: string | number | boolean | null | undefined;
+};

package/dist/anchor.js

@@ -0,0 +1 @@
+export {};

package/dist/components/layouts/Toolbar.svelte

@@ -3,10 +3,22 @@
 	// every child marked `data-overflow` is hidden and a `…` button opens a Menu
 	// with `items` (or the `overflow` snippet in a Popover) that stands in for
 	// them. `sticky` pins the bar under `stickyOffset`.
+	//
+	// `role="toolbar"` is a promise of keyboard behaviour, so the bar keeps it:
+	// roving tabindex makes it one tab stop and ←/→/Home/End move between the
+	// controls actually visible, the `…` trigger included. Children are arbitrary
+	// snippet content, so the ring is read from the DOM rather than a list prop.
 	import type { Snippet } from 'svelte';
 	import IconButton from '../molecules/IconButton.svelte';
 	import Menu, { type MenuItem } from '../molecules/Menu.svelte';
 	import Popover from '../molecules/Popover.svelte';
+	import {
+		consumesArrowKeys,
+		isToolbarNavKey,
+		nextToolbarStop,
+		TOOLBAR_STOP_ATTR,
+		toolbarStops
+	} from './toolbar-roving.js';
 
 	let {
 		children,
@@ -18,6 +30,7 @@
 		density = 'default',
 		overflowLabel = 'More',
 		label,
+		roving = true,
 		class: klass = '',
 		style: styleProp = ''
 	}: {
@@ -34,6 +47,10 @@
 		overflowLabel?: string;
 		/** Accessible name of the bar (`role="toolbar"`). */
 		label?: string;
+		/** Roving tabindex: the bar is one tab stop and ←/→ (plus Home/End) move
+		 *  between its controls. `false` drops `role="toolbar"` along with the
+		 *  keyboard contract it promises, leaving children as ordinary tab stops. */
+		roving?: boolean;
 		class?: string;
 		style?: string;
 	} = $props();
@@ -64,13 +81,77 @@
 	});
 
 	const hasOverflow = $derived(!!items?.length || !!overflow);
+
+	let activeStop: HTMLElement | null = null;
+
+	// Collapsed `data-overflow` children are `display: none`, so they have no box —
+	// that, not a class check, is what takes them out of the ring.
+	const stops = () => toolbarStops(el, (node) => node.getClientRects().length === 0);
+
+	function rove(list: HTMLElement[], index: number) {
+		activeStop = list[index] ?? null;
+		list.forEach((node, i) => {
+			node.setAttribute(TOOLBAR_STOP_ATTR, '');
+			node.tabIndex = i === index ? 0 : -1;
+		});
+	}
+
+	function sync() {
+		const list = stops();
+		if (!list.length) return;
+		const current = activeStop ? list.indexOf(activeStop) : -1;
+		rove(list, current < 0 ? 0 : current);
+	}
+
+	$effect(() => {
+		if (!roving || !el) return;
+		const node = el;
+		sync();
+		// Only attributes the caller owns are observed: writing tabindex and
+		// TOOLBAR_STOP_ATTR back must not re-enter this.
+		const mo = new MutationObserver(sync);
+		mo.observe(node, {
+			childList: true,
+			subtree: true,
+			attributes: true,
+			attributeFilter: ['disabled', 'hidden', 'aria-hidden', 'class', 'style']
+		});
+		return () => mo.disconnect();
+	});
+
+	function onKeydown(event: KeyboardEvent) {
+		if (!roving || event.defaultPrevented) return;
+		if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+		if (!isToolbarNavKey(event.key)) return;
+		const target = event.target as HTMLElement | null;
+		if (consumesArrowKeys(target)) return;
+		const list = stops();
+		const next = nextToolbarStop(
+			list.length,
+			list.findIndex((node) => node.contains(target)),
+			event.key
+		);
+		if (next === undefined) return;
+		event.preventDefault();
+		rove(list, next);
+		list[next].focus();
+	}
+
+	function onFocusin(event: FocusEvent) {
+		if (!roving) return;
+		const list = stops();
+		const index = list.findIndex((node) => node.contains(event.target as Node));
+		if (index >= 0 && list[index] !== activeStop) rove(list, index);
+	}
 </script>
 
 <div
 	bind:this={el}
 	data-tsu="Toolbar"
-	role="toolbar"
-	aria-label={label}
+	role={roving ? 'toolbar' : undefined}
+	aria-label={roving ? label : undefined}
+	onkeydown={onKeydown}
+	onfocusin={onFocusin}
 	class="toolbar density-{density} {klass}"
 	class:sticky
 	class:collapsed

package/dist/components/layouts/Toolbar.svelte.d.ts

@@ -14,6 +14,10 @@ type $$ComponentProps = {
     overflowLabel?: string;
     /** Accessible name of the bar (`role="toolbar"`). */
     label?: string;
+    /** Roving tabindex: the bar is one tab stop and ←/→ (plus Home/End) move
+     *  between its controls. `false` drops `role="toolbar"` along with the
+     *  keyboard contract it promises, leaving children as ordinary tab stops. */
+    roving?: boolean;
     class?: string;
     style?: string;
 };

package/dist/components/layouts/toolbar-roving.d.ts

@@ -0,0 +1,53 @@
+/** @param {string} key */
+export function isToolbarNavKey(key: string): boolean;
+/**
+ * Controls that own the arrow keys themselves (caret, spinner, native listbox):
+ * the toolbar must not steal them.
+ *
+ * @param {{ tagName?: string; type?: string; isContentEditable?: boolean } | null | undefined} el
+ */
+export function consumesArrowKeys(el: {
+    tagName?: string;
+    type?: string;
+    isContentEditable?: boolean;
+} | null | undefined): boolean;
+/**
+ * @param {{
+ *   disabled?: boolean;
+ *   hidden?: boolean;
+ *   ariaHidden?: boolean;
+ *   inPopover?: boolean;
+ *   tabindex?: string | null;
+ *   claimed?: boolean;
+ * }} el
+ */
+export function acceptsRovingStop(el: {
+    disabled?: boolean;
+    hidden?: boolean;
+    ariaHidden?: boolean;
+    inPopover?: boolean;
+    tabindex?: string | null;
+    claimed?: boolean;
+}): boolean;
+/**
+ * The ring, in DOM order. `isHidden` is injected because "has no box" is the only
+ * honest test for a collapsed child and it cannot be computed without layout.
+ *
+ * @param {Element | null} container
+ * @param {(node: HTMLElement) => boolean} isHidden
+ * @returns {HTMLElement[]}
+ */
+export function toolbarStops(container: Element | null, isHidden: (node: HTMLElement) => boolean): HTMLElement[];
+/**
+ * Arrows wrap; Home/End jump to the ends. `undefined` means "not ours" — the
+ * caller must leave the event alone.
+ *
+ * @param {number} count
+ * @param {number} current
+ * @param {string} key
+ * @returns {number | undefined}
+ */
+export function nextToolbarStop(count: number, current: number, key: string): number | undefined;
+export const TOOLBAR_STOP_SELECTOR: "button, a[href], input, select, textarea, summary, [tabindex]";
+/** Marks a control the toolbar has taken over, so its `-1` reads as ours, not the author's. */
+export const TOOLBAR_STOP_ATTR: "data-toolbar-stop";

package/dist/components/layouts/toolbar-roving.js

@@ -0,0 +1,104 @@
+export const TOOLBAR_STOP_SELECTOR =
+	'button, a[href], input, select, textarea, summary, [tabindex]';
+
+/** Marks a control the toolbar has taken over, so its `-1` reads as ours, not the author's. */
+export const TOOLBAR_STOP_ATTR = 'data-toolbar-stop';
+
+const NAV_KEYS = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Home', 'End']);
+
+const ARROW_CONSUMING_INPUTS = new Set([
+	'text',
+	'search',
+	'email',
+	'url',
+	'tel',
+	'password',
+	'number',
+	'date',
+	'datetime-local',
+	'month',
+	'week',
+	'time',
+	'range',
+]);
+
+/** @param {string} key */
+export function isToolbarNavKey(key) {
+	return NAV_KEYS.has(key);
+}
+
+/**
+ * Controls that own the arrow keys themselves (caret, spinner, native listbox):
+ * the toolbar must not steal them.
+ *
+ * @param {{ tagName?: string; type?: string; isContentEditable?: boolean } | null | undefined} el
+ */
+export function consumesArrowKeys(el) {
+	if (!el) return false;
+	if (el.isContentEditable) return true;
+	const tag = (el.tagName ?? '').toLowerCase();
+	if (tag === 'textarea' || tag === 'select') return true;
+	if (tag !== 'input') return false;
+	return ARROW_CONSUMING_INPUTS.has((el.type ?? 'text').toLowerCase());
+}
+
+/**
+ * @param {{
+ *   disabled?: boolean;
+ *   hidden?: boolean;
+ *   ariaHidden?: boolean;
+ *   inPopover?: boolean;
+ *   tabindex?: string | null;
+ *   claimed?: boolean;
+ * }} el
+ */
+export function acceptsRovingStop(el) {
+	if (el.disabled || el.hidden || el.ariaHidden || el.inPopover) return false;
+	return el.claimed === true || el.tabindex !== '-1';
+}
+
+/**
+ * The ring, in DOM order. `isHidden` is injected because "has no box" is the only
+ * honest test for a collapsed child and it cannot be computed without layout.
+ *
+ * @param {Element | null} container
+ * @param {(node: HTMLElement) => boolean} isHidden
+ * @returns {HTMLElement[]}
+ */
+export function toolbarStops(container, isHidden) {
+	if (!container) return [];
+	return [
+		.../** @type {NodeListOf<HTMLElement>} */ (container.querySelectorAll(TOOLBAR_STOP_SELECTOR)),
+	].filter((node) =>
+		acceptsRovingStop({
+			disabled: /** @type {HTMLButtonElement} */ (node).disabled,
+			hidden: node.hidden || isHidden(node),
+			ariaHidden: node.getAttribute('aria-hidden') === 'true',
+			inPopover: node.closest('[popover]') !== null,
+			tabindex: node.getAttribute('tabindex'),
+			claimed: node.hasAttribute(TOOLBAR_STOP_ATTR),
+		}),
+	);
+}
+
+/**
+ * Arrows wrap; Home/End jump to the ends. `undefined` means "not ours" — the
+ * caller must leave the event alone.
+ *
+ * @param {number} count
+ * @param {number} current
+ * @param {string} key
+ * @returns {number | undefined}
+ */
+export function nextToolbarStop(count, current, key) {
+	if (count <= 0 || current < 0 || current >= count) return undefined;
+	if (key === 'Home') return 0;
+	if (key === 'End') return count - 1;
+
+	let direction;
+	if (key === 'ArrowRight' || key === 'ArrowDown') direction = 1;
+	else if (key === 'ArrowLeft' || key === 'ArrowUp') direction = -1;
+	else return undefined;
+
+	return (((current + direction) % count) + count) % count;
+}

package/dist/components/molecules/FilterInput.svelte

@@ -38,6 +38,7 @@
 	// `ValueProvider`s). No `fetch` lives in here; the bar owns the QUERY string.
 	// ───────────────────────────────────────────────────────────────────────
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import Icon, { type IconName } from '../atoms/Icon.svelte';
 	import { filters, freeText } from '../../query/ast';
 	import { autoQuoteEdit, backspaceEmptyQuotes, closingQuoteExit } from '../../query/edit';
@@ -70,7 +71,10 @@
 		below,
 		class: klass = '',
 		style: styleProp = '',
-	}: {
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
+
+	type Own = {
 		schema: Schema;
 		/**
 		 * Single-key mode: the name (or alias) of the ONE schema field being
@@ -127,7 +131,7 @@
 		below?: Snippet<[FilterInputContext]>;
 		class?: string;
 		style?: string;
-	} = $props();
+	};
 
 	const field = getFieldContext();
 	let el = $state<HTMLInputElement | null>(null);
@@ -335,6 +339,7 @@
 </script>
 
 <div
+	{...rest}
 	class="fi {klass}"
 	style={styleProp}
 	class:fi--sm={size === 'sm'}

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

@@ -20,9 +20,10 @@ export interface FilterInputContext {
 }
 import type { ControlSize } from '../../size';
 import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 import { type IconName } from '../atoms/Icon.svelte';
 import { type Schema } from '../../query/schema';
-type $$ComponentProps = {
+type Own = {
     schema: Schema;
     /**
      * Single-key mode: the name (or alias) of the ONE schema field being
@@ -80,6 +81,7 @@ type $$ComponentProps = {
     class?: string;
     style?: string;
 };
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
 declare const FilterInput: import("svelte").Component<$$ComponentProps, {}, "value">;
 type FilterInput = ReturnType<typeof FilterInput>;
 export default FilterInput;

package/dist/components/molecules/Menu.svelte

@@ -12,6 +12,12 @@
 		pressed?: boolean;
 		/** Custom row content (a rename Input, a slider…) replacing icon/label/tag. */
 		content?: import('svelte').Snippet<[MenuItem]>;
+		/**
+		 * Extra attributes for the rendered row — `data-*`, `title`, `aria-describedby`…
+		 * The row's own semantics (`role`, `aria-checked`, `disabled`, `class`, `onclick`)
+		 * are applied after and win.
+		 */
+		attrs?: import('svelte/elements').HTMLButtonAttributes;
 	}
 </script>
 
@@ -165,6 +171,7 @@
 		{#each items as item (item.label)}
 			<button
 				type="button"
+				{...item.attrs}
 				role={item.pressed === undefined ? 'menuitem' : 'menuitemcheckbox'}
 				aria-checked={item.pressed === undefined ? undefined : item.pressed}
 				class="menu-item"

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

@@ -11,6 +11,12 @@ export interface MenuItem {
     pressed?: boolean;
     /** Custom row content (a rename Input, a slider…) replacing icon/label/tag. */
     content?: import('svelte').Snippet<[MenuItem]>;
+    /**
+     * Extra attributes for the rendered row — `data-*`, `title`, `aria-describedby`…
+     * The row's own semantics (`role`, `aria-checked`, `disabled`, `class`, `onclick`)
+     * are applied after and win.
+     */
+    attrs?: import('svelte/elements').HTMLButtonAttributes;
 }
 import type { ComponentProps, Snippet } from 'svelte';
 import Popover from './Popover.svelte';

package/dist/components/molecules/Popover.svelte

@@ -10,6 +10,7 @@
 	// ships beyond Chromium; the popover semantics above are the hard part and
 	// are broadly supported today.)
 	import { tick, type Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import { place } from '../../floating';
 	import { HOVER_CLOSE_GRACE, HOVER_OPEN_DELAY, createHoverIntent, opensOnHover } from './popover-hover.js';
 
@@ -20,36 +21,7 @@
 	type PanelRole = 'dialog' | 'menu' | 'listbox' | 'group';
 	type HasPopup = 'menu' | 'dialog' | 'listbox' | true;
 
-	let {
-		placement = 'bottom-start',
-		gap = 6,
-		label,
-		trigger,
-		children,
-		triggerClass = '',
-		bare = false,
-		variant,
-		tone = 'none',
-		size,
-		box,
-		pill = false,
-		control = false,
-		block = false,
-		hitArea = 'auto',
-		disabled = false,
-		openOn = 'click',
-		hoverDelay = HOVER_OPEN_DELAY,
-		as = 'button',
-		href,
-		role = 'dialog',
-		haspopup = 'dialog',
-		onopen,
-		onclose,
-		class: klass = '',
-		style: styleProp = '',
-		panelClass = '',
-		panelStyle = '',
-	}: {
+	type Own = {
 		placement?: Placement;
 		gap?: number;
 		/** Accessible name for the trigger. */
@@ -106,7 +78,39 @@
 		/** Class / inline style on the floating panel. */
 		panelClass?: string;
 		panelStyle?: string;
-	} = $props();
+	};
+
+	let {
+		placement = 'bottom-start',
+		gap = 6,
+		label,
+		trigger,
+		children,
+		triggerClass = '',
+		bare = false,
+		variant,
+		tone = 'none',
+		size,
+		box,
+		pill = false,
+		control = false,
+		block = false,
+		hitArea = 'auto',
+		disabled = false,
+		openOn = 'click',
+		hoverDelay = HOVER_OPEN_DELAY,
+		as = 'button',
+		href,
+		role = 'dialog',
+		haspopup = 'dialog',
+		onopen,
+		onclose,
+		class: klass = '',
+		style: styleProp = '',
+		panelClass = '',
+		panelStyle = '',
+		...rest
+	}: Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own = $props();
 
 	const canonicalChrome = $derived(
 		variant !== undefined || tone !== 'none' || size !== undefined || control || block
@@ -219,6 +223,7 @@
 <svelte:element
 	this={as}
 	bind:this={triggerEl}
+	{...rest}
 	data-tsu="Popover"
 	class="pop-trigger {triggerClass} {klass}"
 	style={styleProp}

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

@@ -1,11 +1,12 @@
 import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
 type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger';
 type TriggerTone = 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
 type TriggerSize = 'sm' | 'md' | 'lg';
 type PanelRole = 'dialog' | 'menu' | 'listbox' | 'group';
 type HasPopup = 'menu' | 'dialog' | 'listbox' | true;
-type $$ComponentProps = {
+type Own = {
     placement?: Placement;
     gap?: number;
     /** Accessible name for the trigger. */
@@ -65,6 +66,7 @@ type $$ComponentProps = {
     panelClass?: string;
     panelStyle?: string;
 };
+type $$ComponentProps = Omit<HTMLAttributes<HTMLElement>, keyof Own> & Own;
 declare const Popover: import("svelte").Component<$$ComponentProps, {}, "">;
 type Popover = ReturnType<typeof Popover>;
 export default Popover;

package/dist/components/molecules/Tabs.svelte

@@ -7,6 +7,12 @@
 		disabled?: boolean;
 		/** Trailing count badge. */
 		count?: number | string;
+		/**
+		 * Extra attributes for this tab's button — `data-*`, `title`…
+		 * The tab's own semantics (`role`, `aria-*`, `id`, `class`, `disabled`,
+		 * `tabindex`, `onclick`) are applied after and win.
+		 */
+		attrs?: import('svelte/elements').HTMLButtonAttributes;
 	}
 </script>
 
@@ -18,6 +24,7 @@
 	// the Tab order. `value` is bindable; `panel` is a snippet that receives the
 	// active id so the caller renders the matching content.
 	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import Icon from '../atoms/Icon.svelte';
 
 	let {
@@ -29,7 +36,10 @@
 		style: styleProp = '',
 		panelClass = '',
 		panelPadding = 'md',
-	}: {
+		...rest
+	}: Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own = $props();
+
+	type Own = {
 		tabs: TabItem[];
 		value?: string;
 		label?: string;
@@ -38,7 +48,7 @@
 		style?: string;
 		panelClass?: string;
 		panelPadding?: 'none' | 'sm' | 'md';
-	} = $props();
+	};
 
 	// Default to the first selectable tab when no value is supplied.
 	$effect(() => {
@@ -84,11 +94,12 @@
 	}
 </script>
 
-<div class="tabs {klass}" style={styleProp} data-tsu="Tabs">
+<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}

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

@@ -6,9 +6,16 @@ export interface TabItem {
     disabled?: boolean;
     /** Trailing count badge. */
     count?: number | string;
+    /**
+     * Extra attributes for this tab's button — `data-*`, `title`…
+     * The tab's own semantics (`role`, `aria-*`, `id`, `class`, `disabled`,
+     * `tabindex`, `onclick`) are applied after and win.
+     */
+    attrs?: import('svelte/elements').HTMLButtonAttributes;
 }
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
+import type { HTMLAttributes } from 'svelte/elements';
+type Own = {
     tabs: TabItem[];
     value?: string;
     label?: string;
@@ -18,6 +25,7 @@ type $$ComponentProps = {
     panelClass?: string;
     panelPadding?: 'none' | 'sm' | 'md';
 };
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, keyof Own> & Own;
 declare const Tabs: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Tabs = ReturnType<typeof Tabs>;
 export default Tabs;

package/dist/components/molecules/ThemePicker.svelte

@@ -6,6 +6,7 @@
 	// resolved once at :root and would not re-scope). The root default theme
 	// has no [data-theme] block, so its swatch carries the :root values.
 	import type { ComponentProps } from 'svelte';
+	import type { AnchorAttributes } from '../../anchor';
 	import Popover from './Popover.svelte';
 	import { type ThemeDef, theme } from '../../stores/theme.svelte';
 	import { AUTO_THEME } from '../../theme-mode';
@@ -34,7 +35,10 @@
 		darkLabel = 'Dark',
 		class: klass = '',
 		style: styleProp = '',
-	}: TriggerChrome & {
+		...rest
+	}: AnchorAttributes & TriggerChrome & Own = $props();
+
+	type Own = {
 		/** Offer an "auto" row that follows `prefers-color-scheme`, remembering
 		 *  one light and one dark theme. */
 		auto?: boolean;
@@ -44,7 +48,7 @@
 		darkLabel?: string;
 		class?: string;
 		style?: string;
-	} = $props();
+	};
 
 	let hovered = $state<ThemeDef | null>(null);
 	let hoveredAuto = $state(false);
@@ -74,6 +78,7 @@
 {/snippet}
 
 <Popover
+	{...rest}
 	label={title}
 	{placement}
 	{box}

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

@@ -1,7 +1,8 @@
 import type { ComponentProps } from 'svelte';
+import type { AnchorAttributes } from '../../anchor';
 import Popover from './Popover.svelte';
 type TriggerChrome = Pick<ComponentProps<typeof Popover>, 'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'bare' | 'hitArea' | 'placement' | 'disabled'>;
-type $$ComponentProps = TriggerChrome & {
+type Own = {
     /** Offer an "auto" row that follows `prefers-color-scheme`, remembering
      *  one light and one dark theme. */
     auto?: boolean;
@@ -12,6 +13,7 @@ type $$ComponentProps = TriggerChrome & {
     class?: string;
     style?: string;
 };
+type $$ComponentProps = AnchorAttributes & TriggerChrome & Own;
 declare const ThemePicker: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemePicker = ReturnType<typeof ThemePicker>;
 export default ThemePicker;

package/dist/components/organisms/FilterSearchBar.svelte

@@ -14,6 +14,7 @@
 	// and forwards onchange/onsubmit. Everything project-specific is INJECTED via
 	// `schema` (with per-field async `ValueProvider`s).
 	// ───────────────────────────────────────────────────────────────────────
+	import type { AnchorAttributes } from '../../anchor';
 	import Badge from '../atoms/Badge.svelte';
 	import FilterInput from '../molecules/FilterInput.svelte';
 	import type { Query } from '../../query/ast';
@@ -35,7 +36,10 @@
 		onsubmit,
 		class: klass = '',
 		style: styleProp = '',
-	}: {
+		...rest
+	}: AnchorAttributes & Own = $props();
+
+	type Own = {
 		schema: Schema;
 		/** The raw textual query (two-way bindable). */
 		value?: string;
@@ -61,7 +65,7 @@
 		onsubmit?: (value: string) => void;
 		class?: string;
 		style?: string;
-	} = $props();
+	};
 
 	function labelFor(fieldName: string): string {
 		return findField(schema, fieldName)?.label ?? fieldName;
@@ -69,6 +73,7 @@
 </script>
 
 <FilterInput
+	{...rest}
 	{schema}
 	bind:value
 	{placeholder}

package/dist/components/organisms/FilterSearchBar.svelte.d.ts

@@ -1,7 +1,8 @@
 import type { ControlSize } from '../../size';
+import type { AnchorAttributes } from '../../anchor';
 import type { Query } from '../../query/ast';
 import { type Schema } from '../../query/schema';
-type $$ComponentProps = {
+type Own = {
     schema: Schema;
     /** The raw textual query (two-way bindable). */
     value?: string;
@@ -28,6 +29,7 @@ type $$ComponentProps = {
     class?: string;
     style?: string;
 };
+type $$ComponentProps = AnchorAttributes & Own;
 declare const FilterSearchBar: import("svelte").Component<$$ComponentProps, {}, "value">;
 type FilterSearchBar = ReturnType<typeof FilterSearchBar>;
 export default FilterSearchBar;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export type { AnchorAttributes } from './anchor';
 export { artworkGradient, artworkHue, initials } from './artwork';
 export { autoresize } from './autoresize';
 export { copyToClipboard } from './clipboard';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",
@@ -73,6 +73,7 @@
     "@sveltejs/kit": "^2.22.0",
     "@sveltejs/package": "^2.3.0",
     "@sveltejs/vite-plugin-svelte": "^6.0.0",
+    "@types/jsdom": "^30.0.0",
     "@types/node": "^25.9.3",
     "esbuild": "^0.28.2",
     "esbuild-svelte": "^0.9.5",