@dorsk/tsumikit 0.51.0 → 0.53.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,
@@ -267,7 +281,10 @@ hooks on head/row/cell; `responsive="stack"` turns rows into cards below
 prefix, the `<table>` stays a table for assistive tech), FilterSearchBar /
 FilterInput (`size="sm"` compact bar on `--control-height-compact`,
 `shape="pill"`, `surface`, `hotkey="/"` focuses the input from anywhere
-outside an editable element, `showHotkey` renders the `<kbd>` hint, `grow`).
+outside an editable element, `showHotkey` renders the `<kbd>` hint, `grow`;
+`key="cwd"` puts FilterInput in single-key mode — `value` is the bare value
+instead of a `key:"value"` query, no key prefix in the box, the `placeholder`
+shows while empty, and completion still runs through that field's provider).
 
 **Layouts:** AppShell (responsive header/sidebar/main/footer — persistent
 sidebar on desktop, overlay drawer on mobile, optionally resizable;

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

@@ -56,7 +56,7 @@
 	{...rest}
 >
 	<div class="navbar-inner">
-		{#each items as item (item.href)}
+		{#each items as item, i (`${i}:${item.href}`)}
 			<a
 				href={item.href}
 				class="navbar-link"

package/dist/components/molecules/FilterInput.svelte

@@ -43,13 +43,15 @@
 	import { autoQuoteEdit, backspaceEmptyQuotes, closingQuoteExit } from '../../query/edit';
 	import { parse } from '../../query/parser';
 	import { type Schema } from '../../query/schema';
+	import { singleQuery, suggestSingle } from '../../query/single';
 	import { suggest, type SuggestState } from '../../query/suggest';
 	import { getFieldContext, warnUnlabelled } from '../../field-context';
 
 	let {
 		schema,
+		key,
 		value = $bindable(''),
-		placeholder = 'artist:"Daft Punk" AND year>=2000',
+		placeholder,
 		autoQuote = true,
 		showClear = true,
 		icon = 'search',
@@ -70,13 +72,23 @@
 		style: styleProp = '',
 	}: {
 		schema: Schema;
-		/** The raw textual query (two-way bindable). */
+		/**
+		 * Single-key mode: the name (or alias) of the ONE schema field being
+		 * edited. `value` then holds the bare value instead of a `key:"value"`
+		 * query — no key prefix in the box, the placeholder shows while empty and
+		 * completion still runs through that field's provider. The equivalent query
+		 * is synthesised for `onchange` and the snippet context.
+		 */
+		key?: string;
+		/** The raw textual query, or the bare value in single-key mode (bindable). */
 		value?: string;
+		/** Defaults to a sample query, or to nothing in single-key mode. */
 		placeholder?: string;
 		/**
 		 * When a string field's value step opens (`title:`), auto-insert a `""`
 		 * pair with the caret inside so multi-word values stay together; Tab exits
 		 * the quotes. Set false for bare typing where spaces split the value.
+		 * Always off in single-key mode, which quotes nothing.
 		 */
 		autoQuote?: boolean;
 		/** Show the trailing clear (✕) button when the field is non-empty. */
@@ -147,8 +159,12 @@
 		return () => document.removeEventListener('keydown', onHotkey);
 	});
 
+	const single = $derived(!!key);
+	const quoting = $derived(autoQuote && !single);
+	const hint = $derived(placeholder ?? (single ? '' : 'artist:"Daft Punk" AND year>=2000'));
+
 	// Parsed view (drives the onchange AST + the snippet context).
-	const ast = $derived(parse(value, schema));
+	const ast = $derived(parse(key ? singleQuery(schema, key, value) : value, schema));
 	const chips = $derived(filters(ast));
 	const text = $derived(freeText(ast));
 
@@ -183,7 +199,7 @@
 	}
 
 	function oninput(e: Event) {
-		if (autoQuote && el && (e as InputEvent).inputType?.startsWith('insert')) {
+		if (quoting && el && (e as InputEvent).inputType?.startsWith('insert')) {
 			const pos = el.selectionStart ?? value.length;
 			const edit = autoQuoteEdit(schema, value, pos);
 			if (edit) {
@@ -200,7 +216,7 @@
 		if (!el) return;
 		const pos = el.selectionStart ?? value.length;
 		const id = ++reqId;
-		const next = await suggest(schema, value, pos);
+		const next = key ? await suggestSingle(schema, key, value) : await suggest(schema, value, pos);
 		if (id !== reqId) return; // a newer keystroke won
 		menu = next;
 		active = 0;
@@ -217,7 +233,7 @@
 		let caret = s.caret;
 		// A field/operator pick that opens a string field's value step gets the
 		// same auto-quotes as manual typing.
-		if (autoQuote && s.advance) {
+		if (quoting && s.advance) {
 			const edit = autoQuoteEdit(schema, value, caret);
 			if (edit) {
 				value = edit.value;
@@ -236,7 +252,7 @@
 	}
 
 	function onkeydown(e: KeyboardEvent) {
-		if (autoQuote && el) {
+		if (quoting && el) {
 			const pos = el.selectionStart ?? value.length;
 			if (e.key === 'Tab') {
 				// Inside auto-quotes Tab exits them (takes priority over accepting a
@@ -292,6 +308,14 @@
 	}
 
 	function removeChip(span: [number, number]) {
+		// Single-key spans index the synthesised query, not the box: the only
+		// clause there is the value itself, so removing it empties the field.
+		if (single) {
+			value = '';
+			onsubmit?.('');
+			queueMicrotask(() => el?.focus());
+			return;
+		}
 		// Splice the clause out, plus trailing spaces to avoid doubles.
 		const [a, b] = span;
 		let end = b;
@@ -332,7 +356,7 @@
 			aria-invalid={ariaInvalid ?? (field?.invalid ? 'true' : undefined)}
 			spellcheck="false"
 			autocomplete="off"
-			{placeholder}
+			placeholder={hint}
 			{oninput}
 			onclick={refresh}
 			onkeyup={(e) => {

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

@@ -24,13 +24,23 @@ import { type IconName } from '../atoms/Icon.svelte';
 import { type Schema } from '../../query/schema';
 type $$ComponentProps = {
     schema: Schema;
-    /** The raw textual query (two-way bindable). */
+    /**
+     * Single-key mode: the name (or alias) of the ONE schema field being
+     * edited. `value` then holds the bare value instead of a `key:"value"`
+     * query — no key prefix in the box, the placeholder shows while empty and
+     * completion still runs through that field's provider. The equivalent query
+     * is synthesised for `onchange` and the snippet context.
+     */
+    key?: string;
+    /** The raw textual query, or the bare value in single-key mode (bindable). */
     value?: string;
+    /** Defaults to a sample query, or to nothing in single-key mode. */
     placeholder?: string;
     /**
      * When a string field's value step opens (`title:`), auto-insert a `""`
      * pair with the caret inside so multi-word values stay together; Tab exits
      * the quotes. Set false for bare typing where spaces split the value.
+     * Always off in single-key mode, which quotes nothing.
      */
     autoQuote?: boolean;
     /** Show the trailing clear (✕) button when the field is non-empty. */

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/dist/index.d.ts

@@ -87,7 +87,7 @@ export { default as FilterSearchBar } from './components/organisms/FilterSearchB
 export { EMOJI_GROUPS, type EmojiEntry, type EmojiGroup, searchEmoji } from './emoji';
 export { FIELD_KEY, type FieldContext, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 export * as filterQuery from './query';
-export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, suggest, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
+export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, singleQuery, suggest, suggestSingle, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
 export { type OptionSection, sectionOptions } from './select-options';
 export type { ControlSize } from './size';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';

package/dist/index.js

@@ -98,7 +98,7 @@ export { EMOJI_GROUPS, searchEmoji } from './emoji';
 export { FIELD_KEY, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 // ---- query core (headless: schema / parser / AST / suggest / compilers) ----
 export * as filterQuery from './query';
-export { activeToken, compilePredicate, defaultOperator, filters, findField, freeText, OPERATORS, operatorByCode, operatorById, operatorsFor, parse, resolveValues, serialize, serializeFilter, suggest, toSql, walk, } from './query';
+export { activeToken, compilePredicate, defaultOperator, filters, findField, freeText, OPERATORS, operatorByCode, operatorById, operatorsFor, parse, resolveValues, serialize, serializeFilter, singleQuery, suggest, suggestSingle, toSql, walk, } from './query';
 export { sectionOptions } from './select-options';
 export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
 // ---- stores / actions ----

package/dist/query/index.d.ts

@@ -5,5 +5,6 @@ export { parse } from './parser';
 export { compilePredicate, serialize, serializeFilter, toSql } from './query';
 export type { FieldDef, FieldType, Operator, OperatorId, Schema, ValueContext, ValueOption, ValueProvider, } from './schema';
 export { defaultOperator, findField, OPERATORS, operatorByCode, operatorById, operatorsFor, resolveValues, } from './schema';
+export { singleQuery, suggestSingle } from './single';
 export type { Suggestion, SuggestKind, SuggestState } from './suggest';
 export { activeToken, suggest } from './suggest';

package/dist/query/index.js

@@ -7,4 +7,5 @@ export { autoQuoteEdit, backspaceEmptyQuotes, closingQuoteExit, insideQuoteAtCar
 export { parse } from './parser';
 export { compilePredicate, serialize, serializeFilter, toSql } from './query';
 export { defaultOperator, findField, OPERATORS, operatorByCode, operatorById, operatorsFor, resolveValues, } from './schema';
+export { singleQuery, suggestSingle } from './single';
 export { activeToken, suggest } from './suggest';

package/dist/query/single.d.ts

@@ -0,0 +1,15 @@
+import { type Schema } from './schema';
+import type { SuggestState } from './suggest';
+/**
+ * The textual query a bare `value` stands for, using `key`'s default operator —
+ * `"/srv/my app"` under key `cwd` becomes `cwd:"/srv/my app"`. Empty values (and
+ * unknown keys) yield an empty query so the AST stays empty rather than parsing
+ * a half-written clause.
+ */
+export declare function singleQuery(schema: Schema, key: string, value: string): string;
+/**
+ * Value suggestions for `key` given the whole box as the fragment. The span
+ * always covers the entire value, so accepting an item replaces it outright —
+ * there is no field or operator step to advance to.
+ */
+export declare function suggestSingle(schema: Schema, key: string, value: string): Promise<SuggestState | null>;

package/dist/query/single.js

@@ -0,0 +1,43 @@
+// ─────────────────────────────────────────────────────────────────────────
+// Single-key mode — the headless half of FilterInput's `key` prop: the box
+// holds the bare value (`/srv/app`, not `cwd:"/srv/app"`), completing through
+// the field's own provider, and the equivalent query is synthesised only for
+// the `inline` / `below` snippets and the `onchange` AST.
+// ─────────────────────────────────────────────────────────────────────────
+import { defaultOperator, findField, resolveValues } from './schema';
+function quoteIfNeeded(v) {
+    return /[\s,()]/.test(v) ? `"${v}"` : v;
+}
+/**
+ * The textual query a bare `value` stands for, using `key`'s default operator —
+ * `"/srv/my app"` under key `cwd` becomes `cwd:"/srv/my app"`. Empty values (and
+ * unknown keys) yield an empty query so the AST stays empty rather than parsing
+ * a half-written clause.
+ */
+export function singleQuery(schema, key, value) {
+    const field = findField(schema, key);
+    if (!field || !value)
+        return '';
+    return `${field.name}${defaultOperator(field).code}${quoteIfNeeded(value)}`;
+}
+/**
+ * Value suggestions for `key` given the whole box as the fragment. The span
+ * always covers the entire value, so accepting an item replaces it outright —
+ * there is no field or operator step to advance to.
+ */
+export async function suggestSingle(schema, key, value) {
+    const field = findField(schema, key);
+    if (!field)
+        return null;
+    const span = [0, value.length];
+    const options = await resolveValues(field, value, { rawQuery: value, span, caret: value.length });
+    if (options.length === 0)
+        return null;
+    const items = options.map((o) => ({
+        label: o.label,
+        hint: o.hint,
+        insert: o.value,
+        caret: o.value.length,
+    }));
+    return { kind: 'value', span, items };
+}

package/package.json

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