@dorsk/tsumikit 0.33.0 → 0.34.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/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.34.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",