@dorsk/tsumikit 0.52.0 → 0.54.0

package/README.md

@@ -190,7 +190,7 @@ sanctioned escape hatch for everything else.
 | component | published properties |
 | --- | --- |
 | `Button` | `--btn-bg`, `--btn-fg`, `--btn-border`, `--btn-size`, `--btn-radius`, `--btn-tone`, `--btn-on`, `--btn-box` |
-| `Badge` | `--badge-bg`, `--badge-fg`, `--badge-border`, `--badge-radius`, `--badge-tone`, `--badge-max-width` |
+| `Badge` | `--badge-bg`, `--badge-fg`, `--badge-border`, `--badge-radius`, `--badge-tone`, `--badge-max-width`, `--badge-fs`, `--badge-fw`, `--badge-min-size` |
 | `Text` | `--txt-fg`, `--txt-size` |
 | `Select` | `--select-bg`, `--select-fg`, `--select-border`, `--select-size`, `--select-radius` |
 | `Input` | `--input-bg`, `--input-fg`, `--input-border`, `--input-size`, `--input-radius` |
@@ -204,10 +204,24 @@ sanctioned escape hatch for everything else.
 | `Fieldset` | `--fieldset-pad`, `--fieldset-border` |
 | `GitRef` | `--git-ref-tone`, `--git-ref-max-width` |
 | `EmptyState` | `--empty-tone` |
+| `Popover` | `--pop-trigger-bg`, `--pop-trigger-fg`, `--pop-trigger-border`, `--pop-trigger-radius`, `--pop-trigger-size`, `--pop-trigger-pad`, `--pop-box` |
 
 `tests/css-custom-property-contract.test.js` reads this table and fails if a
 listed property is not actually read by its component, so the docs cannot drift.
 
+`Popover`'s hooks paint the **trigger**; hover states keep their own feedback
+colours. `--pop-box: auto` releases the square floor, so `pill` plus
+`--pop-trigger-pad` reshapes the default trigger into a chip of any height. `--pop-trigger-border` needs the chromed trigger — `bare` means no ring
+by definition. `Badge`'s `--badge-min-size` pairs with `numeric` (already centred
+and tabular) to turn a count badge into a square/circular counter.
+
+A `triggerClass` on `Popover` (or `class` on the pickers that wrap it) is a hook
+for a **globally loaded** stylesheet only. Your component's *scoped* CSS cannot
+reach it: Svelte's scoping attribute is added to elements your own template
+renders, and the trigger belongs to `Popover`, so `.toolbar .my-trigger` compiles
+to `.toolbar.svelte-x .my-trigger.svelte-x` and matches nothing. Use `style` and
+the properties above instead.
+
 ## Components
 
 **Atoms:** Text, Heading, Button, Input (`icon` inset leading glyph,
@@ -509,6 +523,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.
@@ -596,7 +618,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/components/atoms/Badge.svelte

@@ -167,8 +167,8 @@
 		gap: var(--sp-1);
 		padding: 0.15rem var(--sp-2);
 		border-radius: var(--badge-radius, var(--r-pill));
-		font-size: var(--fs-xs);
-		font-weight: var(--fw-medium);
+		font-size: var(--badge-fs, var(--fs-xs));
+		font-weight: var(--badge-fw, var(--fw-medium));
 		line-height: 1.4;
 		background: var(--badge-bg, var(--bg-elevated-2));
 		color: var(--badge-fg, var(--text-muted));
@@ -178,7 +178,7 @@
 	}
 	.badge-sm,
 	.badge-xs {
-		font-size: calc(var(--fs-xs) * 0.92);
+		font-size: var(--badge-fs, calc(var(--fs-xs) * 0.92));
 		gap: 0.15rem;
 	}
 	.badge-sm {
@@ -205,16 +205,17 @@
 	}
 	.mono {
 		font-family: var(--font-mono);
-		font-weight: var(--fw-normal);
+		font-weight: var(--badge-fw, var(--fw-normal));
 	}
 	.uppercase {
 		text-transform: uppercase;
 		letter-spacing: 0.04em;
-		font-weight: var(--fw-semibold);
+		font-weight: var(--badge-fw, var(--fw-semibold));
 	}
 	.numeric {
 		font-variant-numeric: tabular-nums;
-		min-width: 1.5em;
+		min-width: var(--badge-min-size, 1.5em);
+		min-height: var(--badge-min-size, auto);
 		justify-content: center;
 	}
 	.truncate {

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/FontScalePicker.svelte

@@ -4,18 +4,53 @@
 	// Everything inside the popover is sized in plain rem, never --fs-*: if the
 	// panel rescaled with the page the slider would move under the pointer
 	// mid-drag and oscillate between steps.
+	import type { ComponentProps } from 'svelte';
 	import Popover from './Popover.svelte';
 	import Slider from '../atoms/Slider.svelte';
 	import { fontScale, SCALE_LEVELS } from '../../stores/fontscale.svelte';
 
-	let { class: klass = '' }: { class?: string } = $props();
+	type TriggerChrome = Pick<
+		ComponentProps<typeof Popover>,
+		'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'bare' | 'hitArea' | 'placement' | 'disabled'
+	>;
+
+	let {
+		box = 'md',
+		placement = 'bottom-end',
+		variant,
+		tone,
+		size,
+		pill,
+		control,
+		block,
+		bare,
+		hitArea,
+		disabled,
+		class: klass = '',
+		style: styleProp = '',
+	}: TriggerChrome & { class?: string; style?: string } = $props();
 
 	const index = $derived(Math.max(0, SCALE_LEVELS.findIndex((l) => l.id === fontScale.levelId)));
 	const level = $derived(SCALE_LEVELS[index]);
 	const set = (i: number) => fontScale.set(SCALE_LEVELS[Math.max(0, Math.min(SCALE_LEVELS.length - 1, i))].id);
 </script>
 
-<Popover label="Text size" placement="bottom-end" triggerClass={klass} box="md">
+<Popover
+	label="Text size"
+	{placement}
+	{box}
+	{variant}
+	{tone}
+	{size}
+	{pill}
+	{control}
+	{block}
+	{bare}
+	{hitArea}
+	{disabled}
+	triggerClass={klass}
+	style={styleProp}
+>
 	{#snippet trigger()}<span class="glyph" data-tsu="FontScalePicker" title="Text size: {level.label}">A</span>{/snippet}
 	<div class="panel">
 		<div class="row">

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

@@ -1,5 +1,9 @@
-type $$ComponentProps = {
+import type { ComponentProps } from 'svelte';
+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 & {
     class?: string;
+    style?: string;
 };
 declare const FontScalePicker: import("svelte").Component<$$ComponentProps, {}, "">;
 type FontScalePicker = ReturnType<typeof FontScalePicker>;

package/dist/components/molecules/Menu.svelte

@@ -34,6 +34,7 @@
 		| 'tone'
 		| 'size'
 		| 'box'
+		| 'pill'
 		| 'control'
 		| 'block'
 		| 'triggerClass'
@@ -55,6 +56,7 @@
 		tone,
 		size,
 		box,
+		pill,
 		control,
 		block,
 		triggerClass,
@@ -135,6 +137,7 @@
 	{tone}
 	{size}
 	{box}
+	{pill}
 	{control}
 	{block}
 	{triggerClass}

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

@@ -15,7 +15,7 @@ export interface MenuItem {
 import type { ComponentProps, Snippet } from 'svelte';
 import Popover from './Popover.svelte';
 type PopoverProps = ComponentProps<typeof Popover>;
-type TriggerChrome = Pick<PopoverProps, 'variant' | 'tone' | 'size' | 'box' | 'control' | 'block' | 'triggerClass' | 'bare' | 'hitArea' | 'disabled' | 'gap' | 'onopen' | 'onclose'>;
+type TriggerChrome = Pick<PopoverProps, 'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'triggerClass' | 'bare' | 'hitArea' | 'disabled' | 'gap' | 'onopen' | 'onclose'>;
 type $$ComponentProps = {
     label: string;
     items: MenuItem[];

package/dist/components/molecules/Popover.svelte

@@ -32,6 +32,7 @@
 		tone = 'none',
 		size,
 		box,
+		pill = false,
 		control = false,
 		block = false,
 		hitArea = 'auto',
@@ -58,8 +59,11 @@
 		/** Panel content. Receives `{ close }` to dismiss the panel from inside;
 		 *  zero-argument snippets keep working. */
 		children: Snippet<[{ close: () => void }]>;
-		/** Extra class on the trigger button — style it from your own scoped CSS,
-		 *  no :global needed (you supply the class). */
+		/** Extra class on the trigger button, for a stylesheet you already load
+		 *  globally. Your *scoped* CSS cannot reach it: the element is rendered by
+		 *  `Popover`, so it carries `Popover`'s scope hash, not yours, and a
+		 *  selector like `.toolbar .my-trigger` matches nothing. Use `style` and
+		 *  the published `--pop-trigger-*` / `--pop-box` properties instead. */
 		triggerClass?: string;
 		/** Drop the default ghost-icon chrome so the trigger is an unstyled button
 		 *  you fully own (pair with `triggerClass`). */
@@ -71,9 +75,11 @@
 		size?: TriggerSize;
 		/** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger,
 		 *  pinning the square exactly. The default trigger floors at the `sm` box
-		 *  and grows with its content; override that floor from `triggerClass`
-		 *  with `--pop-box`. */
+		 *  and grows with its content; override that floor with
+		 *  `style="--pop-box: …"` for any square the four tiers do not cover. */
 		box?: 'xs' | 'sm' | 'md' | 'lg';
+		/** Fully rounded trigger (`--r-pill`), as on `Button`. */
+		pill?: boolean;
 		/** Use the shared `--control-height` toolbar/composer contract. */
 		control?: boolean;
 		block?: boolean;
@@ -226,6 +232,7 @@
 	class:trigger-control={control}
 	class:trigger-block={block}
 	class:trigger-box={box !== undefined}
+	class:trigger-pill={pill}
 	class:hit-compact={hitArea === 'compact'}
 	style:--pop-box={box ? `var(--box-${box})` : undefined}
 	class:trigger-tone-accent={tone === 'accent'}
@@ -271,19 +278,20 @@
 	   (triggerClass) overrides it; `:not(.bare)` keeps it off bare triggers such
 	   as the Timestamp <time>, which stay plain inline text. */
 	/* The square is one knob, `--pop-box`: the `box` prop sets it inline, and a
-	   consumer's `triggerClass` can set it too (`--pop-box: var(--box-xs)`) — a
-	   plain width/height there would not have beaten a `min-*` floor. */
+	   consumer reaches it with `style="--pop-box: var(--box-xs)"` — a plain
+	   width/height would not have beaten a `min-*` floor. */
 	:where(.pop-trigger:not(.bare)) {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
 		min-height: var(--pop-box, var(--box-sm));
 		min-width: var(--pop-box, var(--box-sm));
-		padding: var(--sp-1);
-		border: 1px solid transparent;
-		border-radius: var(--r-md);
-		background: transparent;
-		color: var(--text);
+		padding: var(--pop-trigger-pad, var(--sp-1));
+		border: 1px solid var(--pop-trigger-border, transparent);
+		border-radius: var(--pop-trigger-radius, var(--r-md));
+		background: var(--pop-trigger-bg, transparent);
+		color: var(--pop-trigger-fg, var(--text));
+		font-size: var(--pop-trigger-size, inherit);
 		transition:
 			background 0.12s var(--ease),
 			border-color 0.12s var(--ease);
@@ -296,11 +304,11 @@
 	.pop-trigger.canonical {
 		min-width: 0;
 		min-height: var(--control-height-default);
-		padding: var(--sp-2) var(--sp-4);
-		border-color: var(--border-strong);
-		background: var(--surface);
+		padding: var(--pop-trigger-pad, var(--sp-2) var(--sp-4));
+		border-color: var(--pop-trigger-border, var(--border-strong));
+		background: var(--pop-trigger-bg, var(--surface));
 		font-weight: var(--fw-medium);
-		font-size: var(--fs-sm);
+		font-size: var(--pop-trigger-size, var(--fs-sm));
 		line-height: 1;
 		user-select: none;
 		white-space: nowrap;
@@ -310,9 +318,9 @@
 		background: var(--surface);
 	}
 	.pop-trigger.trigger-primary {
-		background: var(--accent);
-		border-color: var(--accent);
-		color: var(--text-on-accent);
+		background: var(--pop-trigger-bg, var(--accent));
+		border-color: var(--pop-trigger-border, var(--accent));
+		color: var(--pop-trigger-fg, var(--text-on-accent));
 		font-weight: var(--fw-semibold);
 	}
 	.pop-trigger.trigger-primary:hover:not(:disabled) {
@@ -321,16 +329,16 @@
 		filter: brightness(1.08);
 	}
 	.pop-trigger.trigger-ghost {
-		background: transparent;
-		border-color: transparent;
+		background: var(--pop-trigger-bg, transparent);
+		border-color: var(--pop-trigger-border, transparent);
 	}
 	.pop-trigger.trigger-ghost:hover:not(:disabled) {
 		background: var(--bg-elevated-2);
 		border-color: transparent;
 	}
 	.pop-trigger.trigger-danger {
-		color: var(--danger);
-		border-color: color-mix(in srgb, var(--danger) 50%, var(--border));
+		color: var(--pop-trigger-fg, var(--danger));
+		border-color: var(--pop-trigger-border, color-mix(in srgb, var(--danger) 50%, var(--border)));
 	}
 	.pop-trigger.trigger-danger:hover:not(:disabled) {
 		background: color-mix(in srgb, var(--danger) 14%, transparent);
@@ -339,28 +347,31 @@
 	.pop-trigger.trigger-sm {
 		height: var(--control-height-compact);
 		min-height: var(--control-height-compact);
-		padding: var(--sp-1) var(--sp-3);
-		font-size: var(--fs-xs);
+		padding: var(--pop-trigger-pad, var(--sp-1) var(--sp-3));
+		font-size: var(--pop-trigger-size, var(--fs-xs));
 	}
 	.pop-trigger.trigger-lg {
 		min-height: var(--control-height-large);
-		padding: var(--sp-3) var(--sp-5);
-		font-size: var(--fs-base);
+		padding: var(--pop-trigger-pad, var(--sp-3) var(--sp-5));
+		font-size: var(--pop-trigger-size, var(--fs-base));
 	}
 	.pop-trigger.trigger-control {
 		height: var(--control-height);
 		min-height: var(--control-height);
-		padding: 0 var(--sp-3);
+		padding: var(--pop-trigger-pad, 0 var(--sp-3));
 	}
 	.pop-trigger.trigger-block {
 		width: 100%;
 	}
+	.pop-trigger.trigger-pill {
+		border-radius: var(--pop-trigger-radius, var(--r-pill));
+	}
 	.pop-trigger.trigger-box {
 		width: var(--pop-box);
 		min-width: var(--pop-box);
 		height: var(--pop-box);
 		min-height: var(--pop-box);
-		padding: 0;
+		padding: var(--pop-trigger-pad, 0);
 		flex: none;
 	}
 	/* Coarse pointers: icon-only triggers extend their hit area to --touch-target
@@ -395,8 +406,8 @@
 	.pop-trigger.trigger-tone-info,
 	.pop-trigger.trigger-tone-warn,
 	.pop-trigger.trigger-tone-danger {
-		color: var(--pop-trigger-tone);
-		border-color: color-mix(in srgb, var(--pop-trigger-tone) 50%, var(--border));
+		color: var(--pop-trigger-fg, var(--pop-trigger-tone));
+		border-color: var(--pop-trigger-border, color-mix(in srgb, var(--pop-trigger-tone) 50%, var(--border)));
 	}
 	.pop-trigger.trigger-tone-accent:hover:not(:disabled),
 	.pop-trigger.trigger-tone-success:hover:not(:disabled),
@@ -407,9 +418,9 @@
 		border-color: var(--pop-trigger-tone);
 	}
 	.pop-trigger.trigger-primary.trigger-tone-success {
-		background: var(--ok);
-		border-color: var(--ok);
-		color: var(--text-on-success);
+		background: var(--pop-trigger-bg, var(--ok));
+		border-color: var(--pop-trigger-border, var(--ok));
+		color: var(--pop-trigger-fg, var(--text-on-success));
 	}
 	.pop-trigger.trigger-primary.trigger-tone-success:hover:not(:disabled) {
 		background: var(--ok);
@@ -431,12 +442,13 @@
 	/* `bare`: strip the chrome down to a plain button the consumer styles. */
 	:where(.pop-trigger.bare) {
 		display: inline;
-		padding: 0;
+		padding: var(--pop-trigger-pad, 0);
 		border: 0;
-		border-radius: 0;
-		background: none;
-		color: inherit;
+		border-radius: var(--pop-trigger-radius, 0);
+		background: var(--pop-trigger-bg, none);
+		color: var(--pop-trigger-fg, inherit);
 		font: inherit;
+		font-size: var(--pop-trigger-size, inherit);
 		line-height: inherit;
 		vertical-align: baseline;
 		cursor: pointer;

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

@@ -17,8 +17,11 @@ type $$ComponentProps = {
     children: Snippet<[{
         close: () => void;
     }]>;
-    /** Extra class on the trigger button — style it from your own scoped CSS,
-     *  no :global needed (you supply the class). */
+    /** Extra class on the trigger button, for a stylesheet you already load
+     *  globally. Your *scoped* CSS cannot reach it: the element is rendered by
+     *  `Popover`, so it carries `Popover`'s scope hash, not yours, and a
+     *  selector like `.toolbar .my-trigger` matches nothing. Use `style` and
+     *  the published `--pop-trigger-*` / `--pop-box` properties instead. */
     triggerClass?: string;
     /** Drop the default ghost-icon chrome so the trigger is an unstyled button
      *  you fully own (pair with `triggerClass`). */
@@ -30,9 +33,11 @@ type $$ComponentProps = {
     size?: TriggerSize;
     /** Shared square box scale (`--box-xs/sm/md/lg`) for an icon-only trigger,
      *  pinning the square exactly. The default trigger floors at the `sm` box
-     *  and grows with its content; override that floor from `triggerClass`
-     *  with `--pop-box`. */
+     *  and grows with its content; override that floor with
+     *  `style="--pop-box: …"` for any square the four tiers do not cover. */
     box?: 'xs' | 'sm' | 'md' | 'lg';
+    /** Fully rounded trigger (`--r-pill`), as on `Button`. */
+    pill?: boolean;
     /** Use the shared `--control-height` toolbar/composer contract. */
     control?: boolean;
     block?: boolean;

package/dist/components/molecules/ThemePicker.svelte

@@ -5,18 +5,36 @@
 	// (--c-bg, --c-surface, --c-text, --c-accent; the derived --bg etc. are
 	// 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 Popover from './Popover.svelte';
 	import { type ThemeDef, theme } from '../../stores/theme.svelte';
 	import { AUTO_THEME } from '../../theme-mode';
 
+	type TriggerChrome = Pick<
+		ComponentProps<typeof Popover>,
+		'variant' | 'tone' | 'size' | 'box' | 'pill' | 'control' | 'block' | 'bare' | 'hitArea' | 'placement' | 'disabled'
+	>;
+
 	let {
+		box = 'md',
+		placement = 'bottom-end',
+		variant,
+		tone,
+		size,
+		pill,
+		control,
+		block,
+		bare,
+		hitArea,
+		disabled,
 		auto = false,
 		autoLabel = 'Auto',
 		autoHelp = 'Follow the system light/dark setting',
 		lightLabel = 'Light',
 		darkLabel = 'Dark',
 		class: klass = '',
-	}: {
+		style: styleProp = '',
+	}: TriggerChrome & {
 		/** Offer an "auto" row that follows `prefers-color-scheme`, remembering
 		 *  one light and one dark theme. */
 		auto?: boolean;
@@ -25,6 +43,7 @@
 		lightLabel?: string;
 		darkLabel?: string;
 		class?: string;
+		style?: string;
 	} = $props();
 
 	let hovered = $state<ThemeDef | null>(null);
@@ -54,7 +73,22 @@
 	</span>
 {/snippet}
 
-<Popover label={title} placement="bottom-end" triggerClass={klass} box="md">
+<Popover
+	label={title}
+	{placement}
+	{box}
+	{variant}
+	{tone}
+	{size}
+	{pill}
+	{control}
+	{block}
+	{bare}
+	{hitArea}
+	{disabled}
+	triggerClass={klass}
+	style={styleProp}
+>
 	{#snippet trigger()}<span class="trigger" data-tsu="ThemePicker" {title}>{@render swatch(theme.current)}{#if isAuto}<span class="auto-dot" aria-hidden="true">◐</span>{/if}</span>{/snippet}
 	<div class="panel">
 		{#each groups as g (g.mode)}

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

@@ -1,4 +1,7 @@
-type $$ComponentProps = {
+import type { ComponentProps } from 'svelte';
+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 & {
     /** Offer an "auto" row that follows `prefers-color-scheme`, remembering
      *  one light and one dark theme. */
     auto?: boolean;
@@ -7,6 +10,7 @@ type $$ComponentProps = {
     lightLabel?: string;
     darkLabel?: string;
     class?: string;
+    style?: string;
 };
 declare const ThemePicker: import("svelte").Component<$$ComponentProps, {}, "">;
 type ThemePicker = ReturnType<typeof ThemePicker>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.52.0",
+  "version": "0.54.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",