@dorsk/tsumikit 0.33.0 → 0.35.0

package/dist/components/atoms/Checkbox.svelte

@@ -4,12 +4,16 @@
 	// label. Supports `bind:checked`, `indeterminate`, and passes through every
 	// native attribute via `...rest`.
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getFieldContext } from '../../field-context';
 
 	let {
 		checked = $bindable(false),
 		indeterminate = false,
 		invalid = false,
 		label,
+		id,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
 		class: klass = '',
 		el = $bindable(null),
 		...rest
@@ -19,9 +23,15 @@
 		/** Error state: danger box border + aria-invalid. */
 		invalid?: boolean;
 		label: string;
+		id?: string;
+		'aria-describedby'?: string | null;
+		'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
 		el?: HTMLInputElement | null;
 	} = $props();
 
+	const field = getFieldContext();
+	const isInvalid = $derived(invalid || !!field?.invalid);
+
 	// `indeterminate` is a property, not an attribute — sync it imperatively.
 	$effect(() => {
 		if (el) el.indeterminate = indeterminate;
@@ -29,7 +39,15 @@
 </script>
 
 <label class="checkbox {klass}" data-tsu="Checkbox">
-	<input bind:this={el} type="checkbox" bind:checked {...rest} aria-invalid={invalid || undefined} />
+	<input
+		bind:this={el}
+		type="checkbox"
+		bind:checked
+		{...rest}
+		id={id ?? field?.id}
+		aria-describedby={ariaDescribedby ?? field?.describedBy}
+		aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
+	/>
 	<span class="box" aria-hidden="true"></span>
 	<span class="label-text">{label}</span>
 </label>

package/dist/components/atoms/Checkbox.svelte.d.ts

@@ -5,6 +5,9 @@ type $$ComponentProps = HTMLInputAttributes & {
     /** Error state: danger box border + aria-invalid. */
     invalid?: boolean;
     label: string;
+    id?: string;
+    'aria-describedby'?: string | null;
+    'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
     el?: HTMLInputElement | null;
 };
 declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "checked" | "el">;

package/dist/components/atoms/Input.svelte

@@ -6,6 +6,7 @@
 	// stays as-is otherwise.
 	import type { HTMLInputAttributes } from 'svelte/elements';
 	import Icon, { type IconName } from './Icon.svelte';
+	import { getFieldContext, warnUnlabelled } from '../../field-context';
 
 	// `size` shadows the native char-width attribute (unused in token-sized
 	// layouts) to expose a height preset instead.
@@ -31,6 +32,9 @@
 		onenter?: (value: string) => void;
 		/** Alias of `onenter`; both fire when given. */
 		onsubmit?: (value: string) => void;
+		id?: string;
+		'aria-describedby'?: string | null;
+		'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
 		class?: string;
 		value?: HTMLInputAttributes['value'];
 		el?: HTMLInputElement | null;
@@ -50,12 +54,20 @@
 		onenter,
 		onsubmit,
 		onkeydown,
+		id,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
 		class: klass = '',
 		value = $bindable(),
 		el = $bindable(null),
 		...rest
 	}: Props = $props();
 
+	const field = getFieldContext();
+	const isInvalid = $derived(invalid || !!field?.invalid);
+
+	$effect(() => warnUnlabelled(el, 'Input'));
+
 	const wrapped = $derived(!!icon || clearable);
 
 	function handleKeydown(e: KeyboardEvent & { currentTarget: EventTarget & HTMLInputElement }) {
@@ -87,7 +99,9 @@
 		bind:value
 		{...rest}
 		onkeydown={onenter || onsubmit || onkeydown ? handleKeydown : undefined}
-		aria-invalid={invalid || undefined}
+		id={id ?? field?.id}
+		aria-describedby={ariaDescribedby ?? field?.describedBy}
+		aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
 	/>
 {/snippet}
 

package/dist/components/atoms/Input.svelte.d.ts

@@ -22,6 +22,9 @@ type Props = Omit<HTMLInputAttributes, 'size'> & {
     onenter?: (value: string) => void;
     /** Alias of `onenter`; both fire when given. */
     onsubmit?: (value: string) => void;
+    id?: string;
+    'aria-describedby'?: string | null;
+    'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
     class?: string;
     value?: HTMLInputAttributes['value'];
     el?: HTMLInputElement | null;

package/dist/components/atoms/Select.svelte

@@ -17,6 +17,7 @@
 	import type { Snippet } from 'svelte';
 	import type { HTMLSelectAttributes } from 'svelte/elements';
 	import Icon from './Icon.svelte';
+	import { getFieldContext, warnUnlabelled } from '../../field-context';
 
 	// `size` shadows the native option-count attribute (unused in token layouts) to
 	// expose the sm|md height scale instead.
@@ -36,6 +37,9 @@
 		width?: 'full' | 'auto';
 		/** Fill the available width of a flex/Cluster row (flex: 1). */
 		grow?: boolean;
+		id?: string;
+		'aria-describedby'?: string | null;
+		'aria-invalid'?: HTMLSelectAttributes['aria-invalid'];
 		class?: string;
 		value?: HTMLSelectAttributes['value'];
 		children?: Snippet;
@@ -49,18 +53,36 @@
 		chevron,
 		width = 'full',
 		grow = false,
+		id,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
 		class: klass = '',
 		value = $bindable(),
 		children,
 		...rest
 	}: Props = $props();
 
+	const field = getFieldContext();
+	const isInvalid = $derived(invalid || !!field?.invalid);
+	let el = $state<HTMLSelectElement | null>(null);
+
+	$effect(() => warnUnlabelled(el, 'Select'));
+
 	const small = $derived(compact || size === 'sm');
 	const showChevron = $derived(chevron ?? variant !== 'embedded');
 </script>
 
 {#if variant === 'ghost'}
-	<select class="select ghost {klass}" data-tsu="Select" bind:value {...rest} aria-invalid={invalid || undefined}>
+	<select
+		bind:this={el}
+		class="select ghost {klass}"
+		data-tsu="Select"
+		bind:value
+		{...rest}
+		id={id ?? field?.id}
+		aria-describedby={ariaDescribedby ?? field?.describedBy}
+		aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
+	>
 		{@render children?.()}
 	</select>
 {:else}
@@ -72,6 +94,7 @@
 		data-tsu="Select"
 	>
 		<select
+			bind:this={el}
 			class="select"
 			class:compact={small}
 			class:select-sm={size === 'sm'}
@@ -79,7 +102,9 @@
 			class:embedded={variant === 'embedded'}
 			bind:value
 			{...rest}
-			aria-invalid={invalid || undefined}
+			id={id ?? field?.id}
+			aria-describedby={ariaDescribedby ?? field?.describedBy}
+			aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
 		>
 			{@render children?.()}
 		</select>

package/dist/components/atoms/Select.svelte.d.ts

@@ -16,6 +16,9 @@ type Props = Omit<HTMLSelectAttributes, 'size'> & {
     width?: 'full' | 'auto';
     /** Fill the available width of a flex/Cluster row (flex: 1). */
     grow?: boolean;
+    id?: string;
+    'aria-describedby'?: string | null;
+    'aria-invalid'?: HTMLSelectAttributes['aria-invalid'];
     class?: string;
     value?: HTMLSelectAttributes['value'];
     children?: Snippet;

package/dist/components/atoms/Slider.svelte

@@ -6,6 +6,7 @@
 	// for-association. `bind:value` and all native attrs/events pass through.
 	// Recolor per-instance via `--slider-accent` (defaults to the theme accent).
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { getFieldContext, warnUnlabelled } from '../../field-context';
 
 	let {
 		value = $bindable(0),
@@ -15,7 +16,10 @@
 		label,
 		showValue = false,
 		format = (v: number) => String(v),
-		id = `slider-${Math.random().toString(36).slice(2, 8)}`,
+		id: idProp,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
+		invalid = false,
 		class: klass = '',
 		el = $bindable(null),
 		...rest
@@ -27,9 +31,21 @@
 		label?: string;
 		showValue?: boolean;
 		format?: (v: number) => string;
+		/** Error state: aria-invalid. */
+		invalid?: boolean;
+		id?: string;
+		'aria-describedby'?: string | null;
+		'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
 		el?: HTMLInputElement | null;
 	} = $props();
 
+	const field = getFieldContext();
+	const fallbackId = $props.id();
+	const id = $derived(idProp ?? field?.id ?? fallbackId);
+	const isInvalid = $derived(invalid || !!field?.invalid);
+
+	$effect(() => warnUnlabelled(el, 'Slider'));
+
 	// Fill percentage for the track gradient.
 	const pct = $derived(
 		Math.max(0, Math.min(100, ((Number(value) - +min) / (+max - +min || 1)) * 100))
@@ -47,6 +63,8 @@
 		bind:value
 		aria-label={label}
 		{...rest}
+		aria-describedby={ariaDescribedby ?? field?.describedBy}
+		aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
 	/>
 	{#if showValue}
 		<output for={id} class="slider-out">{format(Number(value))}</output>

package/dist/components/atoms/Slider.svelte.d.ts

@@ -7,6 +7,11 @@ type $$ComponentProps = HTMLInputAttributes & {
     label?: string;
     showValue?: boolean;
     format?: (v: number) => string;
+    /** Error state: aria-invalid. */
+    invalid?: boolean;
+    id?: string;
+    'aria-describedby'?: string | null;
+    'aria-invalid'?: HTMLInputAttributes['aria-invalid'];
     el?: HTMLInputElement | null;
 };
 declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value" | "el">;

package/dist/components/atoms/Switch.svelte

@@ -3,14 +3,28 @@
 	// Owns its sizing/colors from theme tokens; the parent supplies `checked`
 	// and an `onclick` handler plus an accessible label/title.
 	import type { HTMLButtonAttributes } from 'svelte/elements';
+	import { getFieldContext } from '../../field-context';
 
 	let {
 		checked = false,
 		invalid = false,
 		label,
+		id,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
 		class: klass = '',
 		...rest
-	}: HTMLButtonAttributes & { checked?: boolean; invalid?: boolean; label: string } = $props();
+	}: HTMLButtonAttributes & {
+		checked?: boolean;
+		invalid?: boolean;
+		label: string;
+		id?: string;
+		'aria-describedby'?: string | null;
+		'aria-invalid'?: HTMLButtonAttributes['aria-invalid'];
+	} = $props();
+
+	const field = getFieldContext();
+	const isInvalid = $derived(invalid || !!field?.invalid);
 </script>
 
 <button
@@ -21,7 +35,9 @@
 	class:on={checked}
 	role="switch"
 	aria-checked={checked}
-	aria-invalid={invalid || undefined}
+	id={id ?? field?.id}
+	aria-describedby={ariaDescribedby ?? field?.describedBy}
+	aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
 	aria-label={label}
 >
 	<span class="knob"></span>

package/dist/components/atoms/Switch.svelte.d.ts

@@ -3,6 +3,9 @@ type $$ComponentProps = HTMLButtonAttributes & {
     checked?: boolean;
     invalid?: boolean;
     label: string;
+    id?: string;
+    'aria-describedby'?: string | null;
+    'aria-invalid'?: HTMLButtonAttributes['aria-invalid'];
 };
 declare const Switch: import("svelte").Component<$$ComponentProps, {}, "">;
 type Switch = ReturnType<typeof Switch>;

package/dist/components/atoms/Textarea.svelte

@@ -20,6 +20,7 @@
 	// default whenever `onsubmit` is given).
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import { autoresize as autoresizeAction } from '../../autoresize';
+	import { getFieldContext, warnUnlabelled } from '../../field-context';
 
 	type Props = HTMLTextareaAttributes & {
 		mono?: boolean;
@@ -37,6 +38,9 @@
 		/** Fires with the current value on the `submitOn` key combo. */
 		onsubmit?: (value: string) => void;
 		submitOn?: 'enter' | 'mod-enter' | 'none';
+		id?: string;
+		'aria-describedby'?: string | null;
+		'aria-invalid'?: HTMLTextareaAttributes['aria-invalid'];
 		class?: string;
 		value?: HTMLTextareaAttributes['value'];
 		el?: HTMLTextAreaElement | null;
@@ -52,12 +56,20 @@
 		onsubmit,
 		submitOn = 'none',
 		onkeydown,
+		id,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
 		class: klass = '',
 		value = $bindable(),
 		el = $bindable(null),
 		...rest
 	}: Props = $props();
 
+	const field = getFieldContext();
+	const isInvalid = $derived(invalid || !!field?.invalid);
+
+	$effect(() => warnUnlabelled(el, 'Textarea'));
+
 	// With autoresize, only the top handle (a min-height floor) is meaningful.
 	const handleEdge = $derived(autoresize ? (resize === 'top' ? 'top' : 'none') : resize);
 	const showHandle = $derived(handleEdge !== 'none');
@@ -137,7 +149,9 @@
 			use:autoresizeAction={typeof value === 'string' ? value : ''}
 			{...rest}
 			onkeydown={onsubmit || onkeydown ? handleKeydown : undefined}
-			aria-invalid={invalid || undefined}
+			id={id ?? field?.id}
+			aria-describedby={ariaDescribedby ?? field?.describedBy}
+			aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
 		></textarea>
 	{:else}
 		<textarea
@@ -150,7 +164,9 @@
 			bind:value
 			{...rest}
 			onkeydown={onsubmit || onkeydown ? handleKeydown : undefined}
-			aria-invalid={invalid || undefined}
+			id={id ?? field?.id}
+			aria-describedby={ariaDescribedby ?? field?.describedBy}
+			aria-invalid={ariaInvalid ?? (isInvalid ? 'true' : undefined)}
 		></textarea>
 	{/if}
 	{#if showHandle}

package/dist/components/atoms/Textarea.svelte.d.ts

@@ -15,6 +15,9 @@ type Props = HTMLTextareaAttributes & {
     /** Fires with the current value on the `submitOn` key combo. */
     onsubmit?: (value: string) => void;
     submitOn?: 'enter' | 'mod-enter' | 'none';
+    id?: string;
+    'aria-describedby'?: string | null;
+    'aria-invalid'?: HTMLTextareaAttributes['aria-invalid'];
     class?: string;
     value?: HTMLTextareaAttributes['value'];
     el?: HTMLTextAreaElement | null;

package/dist/components/molecules/Field.svelte

@@ -1,15 +1,17 @@
 <script lang="ts">
 	// Form field wrapper: a label above a slotted control, with optional hint and
 	// error text. Replaces the ad-hoc `<div class="field"><label class="label">`
-	// markup. Renders a real <label for> when `for` is given (associates with the
-	// control), else a plain <span> for control groups (radio/segment rows).
+	// markup. The label is a real <label for>; when `for` is omitted a generated
+	// id is published via field context so the slotted control adopts it (plus
+	// aria-describedby for hint/error and aria-invalid) automatically.
 	// `layout="inline"` puts the label beside the control (fixed `labelWidth`
 	// aligns a column of them); hint/error then follow the control on the row.
 	import type { Snippet } from 'svelte';
+	import { setFieldContext } from '../../field-context';
 
 	let {
 		label,
-		for: forId,
+		for: forProp,
 		hint,
 		error,
 		layout = 'stack',
@@ -30,21 +32,37 @@
 		class?: string;
 		children?: Snippet;
 	} = $props();
+
+	const uid = $props.id();
+	const forId = $derived(forProp ?? uid);
+	const hintId = $derived(`${forId}-hint`);
+	const errorId = $derived(`${forId}-err`);
+	const describedBy = $derived(
+		[hint ? hintId : null, error ? errorId : null].filter(Boolean).join(' ') || undefined
+	);
+
+	setFieldContext({
+		get id() {
+			return forId;
+		},
+		get describedBy() {
+			return describedBy;
+		},
+		get invalid() {
+			return !!error;
+		}
+	});
 </script>
 
 <div class="field {klass}" class:field-grow={grow} class:field-inline={layout === 'inline'} data-tsu="Field">
 	{#if label}
-		{#if forId}
-			<label class="label" for={forId} style:width={labelWidth}>{label}</label>
-		{:else}
-			<span class="label" style:width={labelWidth}>{label}</span>
-		{/if}
+		<label class="label" for={forId} style:width={labelWidth}>{label}</label>
 	{/if}
 	{@render children?.()}
 	{#if hint}
-		<span class="hint">{#if typeof hint === 'function'}{@render hint()}{:else}{hint}{/if}</span>
+		<span class="hint" id={hintId}>{#if typeof hint === 'function'}{@render hint()}{:else}{hint}{/if}</span>
 	{/if}
-	{#if error}<span class="error">{error}</span>{/if}
+	{#if error}<span class="error" id={errorId}>{error}</span>{/if}
 </div>
 
 <style>

package/dist/components/molecules/FilterInput.svelte

@@ -43,6 +43,7 @@
 	import { parse } from '../../query/parser';
 	import { type Schema } from '../../query/schema';
 	import { suggest, type SuggestState } from '../../query/suggest';
+	import { getFieldContext, warnUnlabelled } from '../../field-context';
 
 	let {
 		schema,
@@ -57,6 +58,9 @@
 		hotkey,
 		showHotkey = false,
 		grow = false,
+		id,
+		'aria-describedby': ariaDescribedby,
+		'aria-invalid': ariaInvalid,
 		onchange,
 		onsubmit,
 		inline,
@@ -88,6 +92,9 @@
 		showHotkey?: boolean;
 		/** Fill the available width of a flex/Cluster row (flex: 1). */
 		grow?: boolean;
+		id?: string;
+		'aria-describedby'?: string | null;
+		'aria-invalid'?: 'true' | 'false' | boolean | null;
 		/** Fires the parsed AST on every change — feed this to your backend. */
 		onchange?: (query: Query, raw: string) => void;
 		/** Fires on Enter / clear / chip-remove with the raw query string. */
@@ -105,6 +112,7 @@
 		below?: Snippet<[FilterInputContext]>;
 	} = $props();
 
+	const field = getFieldContext();
 	let el = $state<HTMLInputElement | null>(null);
 	let menuEl = $state<HTMLDivElement | null>(null);
 	let menu = $state<SuggestState | null>(null);
@@ -288,6 +296,8 @@
 		queueMicrotask(() => el?.focus());
 	}
 
+	$effect(() => warnUnlabelled(el, 'FilterInput'));
+
 	const kindLabel: Record<string, string> = {
 		field: 'Fields',
 		operator: 'Operators',
@@ -311,6 +321,9 @@
 			bind:this={el}
 			bind:value
 			class="fi__input"
+			id={id ?? field?.id}
+			aria-describedby={ariaDescribedby ?? field?.describedBy}
+			aria-invalid={ariaInvalid ?? (field?.invalid ? 'true' : undefined)}
 			spellcheck="false"
 			autocomplete="off"
 			{placeholder}

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

@@ -48,6 +48,9 @@ type $$ComponentProps = {
     showHotkey?: boolean;
     /** Fill the available width of a flex/Cluster row (flex: 1). */
     grow?: boolean;
+    id?: string;
+    'aria-describedby'?: string | null;
+    'aria-invalid'?: 'true' | 'false' | boolean | null;
     /** Fires the parsed AST on every change — feed this to your backend. */
     onchange?: (query: Query, raw: string) => void;
     /** Fires on Enter / clear / chip-remove with the raw query string. */

package/dist/components/molecules/Menu.svelte

@@ -9,7 +9,7 @@
 </script>
 
 <script lang="ts">
-	// Dropdown menu: a Popover whose panel is a WAI-ARIA `menu`. Items are
+	// Dropdown menu: a Popover whose panel carries the WAI-ARIA `menu` role. Items are
 	// `menuitem`s navigable with ↑/↓/Home/End, activated with Enter/Space (and
 	// click). Selecting an item runs its action and closes the menu. Focus moves
 	// to the first item when the menu opens. Escape / click-outside close it
@@ -112,13 +112,15 @@
 	{hitArea}
 	{disabled}
 	{gap}
+	role="menu"
+	haspopup="menu"
 	{onclose}
 	onopen={() => {
 		queueMicrotask(() => focusAt(0));
 		onopen?.();
 	}}
 >
-	<div bind:this={listEl} role="menu" aria-label={label} class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
+	<div bind:this={listEl} role="none" class="menu" data-tsu="Menu" tabindex="-1" {onkeydown}>
 		{#each items as item (item.label)}
 			<button
 				type="button"

package/dist/components/molecules/Popover.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
 	// Floating panel built on the native Popover API. The platform gives us the
 	// top layer (no z-index races, renders above dialogs/sticky headers), light
-	// dismiss (click-outside), Escape-to-close and correct focus/`aria-expanded`
-	// wiring between the invoker and the panel — all declaratively via the
-	// `popovertarget` / `popover` attributes. We add only smart placement:
-	// position the panel against its trigger and flip into the viewport when it
-	// would overflow. (CSS anchor positioning would replace the JS here once it
+	// dismiss (click-outside), Escape-to-close and focus wiring between the
+	// invoker and the panel — declaratively via the `popovertarget` / `popover`
+	// attributes. We add explicit `aria-expanded` / `aria-haspopup` on the
+	// trigger (the implicit popover semantics are not exposed uniformly by
+	// assistive tech), the panel role, and smart placement: position the panel
+	// against its trigger and flip into the viewport when it would overflow. (CSS anchor positioning would replace the JS here once it
 	// ships beyond Chromium; the popover semantics above are the hard part and
 	// are broadly supported today.)
 	import { tick, type Snippet } from 'svelte';
@@ -15,6 +16,8 @@
 	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;
 
 	let {
 		placement = 'bottom-start',
@@ -32,6 +35,8 @@
 		block = false,
 		hitArea = 'auto',
 		disabled = false,
+		role = 'dialog',
+		haspopup = 'dialog',
 		onopen,
 		onclose
 	}: {
@@ -63,6 +68,10 @@
 		/** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
 		hitArea?: 'auto' | 'compact';
 		disabled?: boolean;
+		/** ARIA role of the panel. */
+		role?: PanelRole;
+		/** `aria-haspopup` announced on the trigger. */
+		haspopup?: HasPopup;
 		onopen?: () => void;
 		onclose?: () => void;
 	} = $props();
@@ -78,6 +87,7 @@
 	// reopening is instant. The panel element itself always renders — the native
 	// `popovertarget` wiring needs its id present in the DOM at all times.
 	let opened = $state(false);
+	let open = $state(false);
 
 	function reposition() {
 		if (triggerEl && panelEl) place(triggerEl, panelEl, placement, gap);
@@ -87,6 +97,7 @@
 		if (e.newState === 'open') {
 			const firstOpen = !opened;
 			opened = true;
+			open = true;
 			// On the first open the content snippet mounts this tick; measure the
 			// panel only once it has, so placement accounts for its real size.
 			if (firstOpen) await tick();
@@ -95,6 +106,7 @@
 			addEventListener('resize', reposition);
 			onopen?.();
 		} else {
+			open = false;
 			removeEventListener('scroll', reposition, true);
 			removeEventListener('resize', reposition);
 			onclose?.();
@@ -126,6 +138,8 @@
 	class:trigger-tone-danger={tone === 'danger'}
 	popovertarget={id}
 	aria-label={label}
+	aria-haspopup={haspopup}
+	aria-expanded={open}
 	{disabled}
 >
 	{@render trigger()}
@@ -136,7 +150,7 @@
 	{id}
 	popover="auto"
 	class="pop-panel"
-	role="group"
+	{role}
 	aria-label={label}
 	ontoggle={onToggle}
 >

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

@@ -3,6 +3,8 @@ 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 = {
     placement?: Placement;
     gap?: number;
@@ -32,6 +34,10 @@ type $$ComponentProps = {
     /** Icon-only triggers grow a 44px hit slab on coarse pointers; `compact` opts out. */
     hitArea?: 'auto' | 'compact';
     disabled?: boolean;
+    /** ARIA role of the panel. */
+    role?: PanelRole;
+    /** `aria-haspopup` announced on the trigger. */
+    haspopup?: HasPopup;
     onopen?: () => void;
     onclose?: () => void;
 };

package/dist/field-context.d.ts

@@ -0,0 +1,9 @@
+export declare const FIELD_KEY: unique symbol;
+export type FieldContext = {
+    id: string;
+    describedBy?: string;
+    invalid: boolean;
+};
+export declare function setFieldContext(ctx: FieldContext): FieldContext;
+export declare function getFieldContext(): FieldContext | undefined;
+export declare function warnUnlabelled(el: HTMLElement | null | undefined, name: string): void;

package/dist/field-context.js

@@ -0,0 +1,24 @@
+import { getContext, setContext } from 'svelte';
+export const FIELD_KEY = Symbol('tsu-field');
+export function setFieldContext(ctx) {
+    return setContext(FIELD_KEY, ctx);
+}
+export function getFieldContext() {
+    return getContext(FIELD_KEY);
+}
+const warned = new WeakSet();
+export function warnUnlabelled(el, name) {
+    if (!import.meta.env.DEV || !el || typeof document === 'undefined')
+        return;
+    if (warned.has(el))
+        return;
+    if (el.getAttribute('aria-label') || el.getAttribute('aria-labelledby'))
+        return;
+    if (el.closest('label'))
+        return;
+    const id = el.id;
+    if (id && document.querySelector(`label[for="${CSS.escape(id)}"]`))
+        return;
+    warned.add(el);
+    console.warn(`[tsumikit] <${name}> rendered without an accessible label`);
+}

package/dist/index.d.ts

@@ -66,6 +66,7 @@ export { default as Tooltip } from './components/molecules/Tooltip.svelte';
 export { default as Truncate } from './components/molecules/Truncate.svelte';
 export { type Column, default as DataTable, type RowTone, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
+export { FIELD_KEY, type FieldContext, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 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 { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
 export { type Mode, THEMES, theme } from './stores/theme.svelte';

package/dist/index.js

@@ -77,6 +77,7 @@ export { default as Truncate } from './components/molecules/Truncate.svelte';
 // ---- organisms ----
 export { default as DataTable, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
+export { FIELD_KEY, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 // ---- query core (headless: schema / parser / AST / suggest / compilers) ----
 export { activeToken, compilePredicate, defaultOperator, filters, findField, freeText, OPERATORS, operatorByCode, operatorById, operatorsFor, parse, resolveValues, serialize, serializeFilter, suggest, toSql, walk, } from './query';
 export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';

package/package.json

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