@salmexio/ui 1.2.0 → 1.3.0

package/dist/forms/TimePicker/TimePicker.svelte

@@ -0,0 +1,417 @@
+<!--
+  @component TimePicker
+
+  INFRARED — Time input with hour/minute fields, optional seconds,
+  12/24-hour format, and keyboard increment support.
+  Output in HH:MM or HH:MM:SS format.
+
+  @example
+  <TimePicker label="Start time" bind:value={time} />
+  <TimePicker label="Alarm" format="12h" step={15} />
+-->
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+import { generateId } from '../../utils/keyboard.js';
+
+type TimeSize = 'sm' | 'md' | 'lg';
+type TimeFormat = '12h' | '24h';
+
+interface Props {
+	/** Visible label. */
+	label: string;
+	/** Time value in HH:MM or HH:MM:SS format (24h). */
+	value?: string;
+	/** Time format display. */
+	format?: TimeFormat;
+	/** Minute step increment. */
+	step?: number;
+	/** Show seconds field. */
+	showSeconds?: boolean;
+	/** Minimum time (HH:MM). */
+	min?: string;
+	/** Maximum time (HH:MM). */
+	max?: string;
+	/** Size variant. */
+	size?: TimeSize;
+	/** Required field. */
+	required?: boolean;
+	/** Disabled state. */
+	disabled?: boolean;
+	/** Error message. */
+	error?: string;
+	/** Hint text. */
+	hint?: string;
+	/** Hide the visible label. */
+	hideLabel?: boolean;
+	/** Reserve footer space even when empty. */
+	alwaysShowFooter?: boolean;
+	/** Additional CSS class. */
+	class?: string;
+	/** Called when time changes. */
+	onchange?: (value: string) => void;
+	/** Test ID. */
+	testId?: string;
+}
+
+let {
+	label,
+	value = $bindable(''),
+	format = '24h',
+	step = 1,
+	showSeconds = false,
+	min,
+	max,
+	size = 'md',
+	required = false,
+	disabled = false,
+	error = '',
+	hint = '',
+	hideLabel = false,
+	alwaysShowFooter = true,
+	class: className = '',
+	onchange,
+	testId
+}: Props = $props();
+
+const id = generateId('timepicker');
+const errorId = `${id}-error`;
+const hintId = `${id}-hint`;
+
+// Guard: step must be a positive integer
+const safeStep = $derived(Math.max(1, Math.round(step)));
+
+let hasInteracted = $state(false);
+
+const showError = $derived(hasInteracted && !!error);
+const ariaDescribedBy = $derived(
+	[showError && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
+);
+const hasFooterContent = $derived(showError || !!hint);
+
+// Parse value into parts
+const parsed = $derived.by(() => {
+	const parts = (value || '00:00:00').split(':');
+	return {
+		hours: parseInt(parts[0] || '0', 10),
+		minutes: parseInt(parts[1] || '0', 10),
+		seconds: parseInt(parts[2] || '0', 10)
+	};
+});
+
+const displayHours = $derived.by(() => {
+	if (format === '12h') {
+		const h = parsed.hours % 12;
+		return h === 0 ? 12 : h;
+	}
+	return parsed.hours;
+});
+
+const period = $derived<'AM' | 'PM'>(parsed.hours >= 12 ? 'PM' : 'AM');
+
+function pad(n: number): string {
+	return String(n).padStart(2, '0');
+}
+
+function buildValue(h: number, m: number, s: number): string {
+	h = Math.max(0, Math.min(23, h));
+	m = Math.max(0, Math.min(59, m));
+	s = Math.max(0, Math.min(59, s));
+	return showSeconds ? `${pad(h)}:${pad(m)}:${pad(s)}` : `${pad(h)}:${pad(m)}`;
+}
+
+function normalizeTimeStr(t: string): string {
+	const parts = t.split(':');
+	const h = (parts[0] || '00').padStart(2, '0');
+	const m = (parts[1] || '00').padStart(2, '0');
+	const s = (parts[2] || '00').padStart(2, '0');
+	return showSeconds ? `${h}:${m}:${s}` : `${h}:${m}`;
+}
+
+function clampToRange(val: string): string {
+	if (min) {
+		const normMin = normalizeTimeStr(min);
+		if (val < normMin) return normMin;
+	}
+	if (max) {
+		const normMax = normalizeTimeStr(max);
+		if (val > normMax) return normMax;
+	}
+	return val;
+}
+
+function updateValue(h: number, m: number, s: number) {
+	const newVal = clampToRange(buildValue(h, m, s));
+	value = newVal;
+	hasInteracted = true;
+	onchange?.(newVal);
+}
+
+function handleHourInput(e: Event) {
+	const target = e.target as HTMLInputElement;
+	let h = parseInt(target.value, 10);
+	if (isNaN(h)) return;
+	if (format === '12h') {
+		if (period === 'PM' && h < 12) h += 12;
+		else if (period === 'AM' && h === 12) h = 0;
+	}
+	updateValue(h, parsed.minutes, parsed.seconds);
+}
+
+function handleMinuteInput(e: Event) {
+	const target = e.target as HTMLInputElement;
+	let m = parseInt(target.value, 10);
+	if (isNaN(m)) return;
+	m = Math.round(m / safeStep) * safeStep;
+	updateValue(parsed.hours, m, parsed.seconds);
+}
+
+function handleSecondInput(e: Event) {
+	const target = e.target as HTMLInputElement;
+	const s = parseInt(target.value, 10);
+	if (isNaN(s)) return;
+	updateValue(parsed.hours, parsed.minutes, s);
+}
+
+function togglePeriod() {
+	const h = parsed.hours >= 12 ? parsed.hours - 12 : parsed.hours + 12;
+	updateValue(h, parsed.minutes, parsed.seconds);
+}
+
+function handleKeydown(e: KeyboardEvent, field: 'hour' | 'minute' | 'second') {
+	const delta = e.key === 'ArrowUp' ? 1 : e.key === 'ArrowDown' ? -1 : 0;
+	if (!delta) return;
+	e.preventDefault();
+
+	let { hours, minutes, seconds } = parsed;
+	if (field === 'hour') {
+		hours = (hours + delta + 24) % 24;
+	} else if (field === 'minute') {
+		minutes = (minutes + delta * safeStep + 60) % 60;
+	} else {
+		seconds = (seconds + delta + 60) % 60;
+	}
+	updateValue(hours, minutes, seconds);
+}
+</script>
+
+<div
+	class={cn('sx-timepicker', `sx-timepicker-${size}`, disabled && 'sx-timepicker-disabled', className)}
+	data-testid={testId}
+>
+	<label for={`${id}-hour`} class={cn('sx-timepicker-label', hideLabel && 'sx-sr-only')}>
+		{label}
+		{#if required}
+			<span class="sx-timepicker-required" aria-hidden="true">*</span>
+		{/if}
+	</label>
+
+	<div
+		class={cn(
+			'sx-timepicker-field',
+			showError && 'sx-timepicker-field-error'
+		)}
+		role="group"
+		aria-label={label}
+		aria-describedby={ariaDescribedBy}
+	>
+		<span class="sx-timepicker-icon" aria-hidden="true">
+			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+				<circle cx="12" cy="12" r="10" /><polyline points="12 6 12 12 16 14" />
+			</svg>
+		</span>
+
+		<input
+			id={`${id}-hour`}
+			type="number"
+			class="sx-timepicker-input"
+			value={pad(displayHours)}
+			min={format === '12h' ? 1 : 0}
+			max={format === '12h' ? 12 : 23}
+			{disabled}
+			aria-label="Hours"
+			oninput={handleHourInput}
+			onkeydown={(e) => handleKeydown(e, 'hour')}
+		/>
+
+		<span class="sx-timepicker-sep" aria-hidden="true">:</span>
+
+		<input
+			id={`${id}-minute`}
+			type="number"
+			class="sx-timepicker-input"
+			value={pad(parsed.minutes)}
+			min={0}
+			max={59}
+			step={safeStep}
+			{disabled}
+			aria-label="Minutes"
+			oninput={handleMinuteInput}
+			onkeydown={(e) => handleKeydown(e, 'minute')}
+		/>
+
+		{#if showSeconds}
+			<span class="sx-timepicker-sep" aria-hidden="true">:</span>
+			<input
+				id={`${id}-second`}
+				type="number"
+				class="sx-timepicker-input"
+				value={pad(parsed.seconds)}
+				min={0}
+				max={59}
+				{disabled}
+				aria-label="Seconds"
+				oninput={handleSecondInput}
+				onkeydown={(e) => handleKeydown(e, 'second')}
+			/>
+		{/if}
+
+		{#if format === '12h'}
+			<button
+				type="button"
+				class="sx-timepicker-period"
+				{disabled}
+				aria-label={`Switch to ${period === 'AM' ? 'PM' : 'AM'}`}
+				onclick={togglePeriod}
+			>
+				{period}
+			</button>
+		{/if}
+	</div>
+
+	{#if alwaysShowFooter || hasFooterContent}
+		<div class="sx-timepicker-footer">
+			{#if showError}
+				<p id={errorId} class="sx-timepicker-error" role="alert" aria-live="assertive">{error}</p>
+			{:else if hint}
+				<p id={hintId} class="sx-timepicker-hint">{hint}</p>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.sx-timepicker {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sx-space-1);
+		font-family: var(--sx-font-body);
+	}
+
+	.sx-timepicker-disabled { opacity: 0.5; }
+
+	.sx-timepicker-label {
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-timepicker-required { color: var(--sx-color-red); margin-left: 2px; }
+
+	.sx-sr-only {
+		position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+		overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+	}
+
+	.sx-timepicker-field {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--sx-space-1);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		background: var(--sx-color-surface);
+		transition: border-color var(--sx-transition-fast), box-shadow var(--sx-transition-fast);
+		box-shadow:
+			inset 0 1px 3px rgba(0, 0, 0, 0.3),
+			inset 0 0 0 1px rgba(0, 0, 0, 0.06);
+	}
+
+	.sx-timepicker-field:focus-within {
+		border-color: var(--sx-color-primary);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-primary-ring);
+	}
+
+	.sx-timepicker-field-error {
+		border-color: var(--sx-color-red);
+		box-shadow:
+			inset 0 1px 2px rgba(0, 0, 0, 0.2),
+			0 0 0 3px var(--sx-color-red-ring);
+	}
+
+	.sx-timepicker-sm .sx-timepicker-field { min-height: 32px; padding: 0 var(--sx-space-2); }
+	.sx-timepicker-md .sx-timepicker-field { min-height: 40px; padding: 0 var(--sx-space-3); }
+	.sx-timepicker-lg .sx-timepicker-field { min-height: 48px; padding: 0 var(--sx-space-4); }
+
+	.sx-timepicker-icon {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-timepicker-input {
+		width: 32px;
+		border: none;
+		background: transparent;
+		color: var(--sx-color-text);
+		font-family: var(--sx-font-mono);
+		font-size: var(--sx-text-sm);
+		font-weight: 600;
+		text-align: center;
+		outline: none;
+		appearance: textfield;
+		-moz-appearance: textfield;
+		padding: var(--sx-space-1) 0;
+	}
+
+	.sx-timepicker-input::-webkit-inner-spin-button,
+	.sx-timepicker-input::-webkit-outer-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	.sx-timepicker-input:focus {
+		background: var(--sx-color-surface-2);
+		border-radius: var(--sx-radius-sm);
+	}
+
+	.sx-timepicker-sep {
+		color: var(--sx-color-text-disabled);
+		font-family: var(--sx-font-mono);
+		font-size: var(--sx-text-sm);
+		font-weight: 600;
+	}
+
+	.sx-timepicker-period {
+		border: none;
+		background: var(--sx-color-surface-2);
+		border-radius: var(--sx-radius-sm);
+		color: var(--sx-color-primary);
+		font-family: var(--sx-font-mono);
+		font-size: var(--sx-text-xs);
+		font-weight: 700;
+		padding: var(--sx-space-1) var(--sx-space-2);
+		cursor: pointer;
+		transition: background var(--sx-transition-fast);
+		margin-left: var(--sx-space-1);
+	}
+
+	.sx-timepicker-period:hover {
+		background: var(--sx-color-primary-subtle);
+	}
+
+	.sx-timepicker-period:focus-visible {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 1px;
+	}
+
+	/* Footer */
+	.sx-timepicker-footer { min-height: 1.25rem; }
+	.sx-timepicker-error { font-size: var(--sx-text-xs); font-weight: 500; color: var(--sx-color-red); margin: 0; }
+	.sx-timepicker-hint { font-size: var(--sx-text-xs); color: var(--sx-color-text-secondary); margin: 0; }
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-timepicker-field, .sx-timepicker-period { transition: none; }
+	}
+</style>

package/dist/forms/TimePicker/TimePicker.svelte.d.ts

@@ -0,0 +1,53 @@
+type TimeSize = 'sm' | 'md' | 'lg';
+type TimeFormat = '12h' | '24h';
+interface Props {
+    /** Visible label. */
+    label: string;
+    /** Time value in HH:MM or HH:MM:SS format (24h). */
+    value?: string;
+    /** Time format display. */
+    format?: TimeFormat;
+    /** Minute step increment. */
+    step?: number;
+    /** Show seconds field. */
+    showSeconds?: boolean;
+    /** Minimum time (HH:MM). */
+    min?: string;
+    /** Maximum time (HH:MM). */
+    max?: string;
+    /** Size variant. */
+    size?: TimeSize;
+    /** Required field. */
+    required?: boolean;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Error message. */
+    error?: string;
+    /** Hint text. */
+    hint?: string;
+    /** Hide the visible label. */
+    hideLabel?: boolean;
+    /** Reserve footer space even when empty. */
+    alwaysShowFooter?: boolean;
+    /** Additional CSS class. */
+    class?: string;
+    /** Called when time changes. */
+    onchange?: (value: string) => void;
+    /** Test ID. */
+    testId?: string;
+}
+/**
+ * TimePicker
+ *
+ * INFRARED — Time input with hour/minute fields, optional seconds,
+ * 12/24-hour format, and keyboard increment support.
+ * Output in HH:MM or HH:MM:SS format.
+ *
+ * @example
+ * <TimePicker label="Start time" bind:value={time} />
+ * <TimePicker label="Alarm" format="12h" step={15} />
+ */
+declare const TimePicker: import("svelte").Component<Props, {}, "value">;
+type TimePicker = ReturnType<typeof TimePicker>;
+export default TimePicker;
+//# sourceMappingURL=TimePicker.svelte.d.ts.map

package/dist/forms/TimePicker/TimePicker.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimePicker.svelte.d.ts","sourceRoot":"","sources":["../../../src/forms/TimePicker/TimePicker.svelte.ts"],"names":[],"mappings":"AAOA,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACnC,KAAK,UAAU,GAAG,KAAK,GAAG,KAAK,CAAC;AAEhC,UAAU,KAAK;IACd,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2BAA2B;IAC3B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,4BAA4B;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,oBAAoB;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,8BAA8B;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,eAAe;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAyMD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,UAAU,gDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/forms/TimePicker/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TimePicker } from './TimePicker.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/forms/TimePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/forms/TimePicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/forms/TimePicker/index.js

@@ -0,0 +1 @@
+export { default as TimePicker } from './TimePicker.svelte';

package/dist/forms/index.d.ts

@@ -5,4 +5,16 @@ export type { SelectOption, SelectGroup } from './Select/index.js';
 export { Textarea } from './Textarea/index.js';
 export { Slider } from './Slider/index.js';
 export { Toggle } from './Toggle/index.js';
+export { FormField } from './FormField/index.js';
+export { RadioGroup } from './RadioGroup/index.js';
+export type { RadioOption } from './RadioGroup/index.js';
+export { SearchInput } from './SearchInput/index.js';
+export type { SearchOption, SearchGroup } from './SearchInput/index.js';
+export { MultiSelect } from './MultiSelect/index.js';
+export type { MultiSelectOption, MultiSelectGroup } from './MultiSelect/index.js';
+export { DatePicker } from './DatePicker/index.js';
+export { TimePicker } from './TimePicker/index.js';
+export { PhoneInput } from './PhoneInput/index.js';
+export type { Country } from './PhoneInput/index.js';
+export { DEFAULT_COUNTRIES } from './PhoneInput/index.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/forms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AACrD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAClF,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,YAAY,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC"}

package/dist/forms/index.js

@@ -4,3 +4,11 @@ export { Select } from './Select/index.js';
 export { Textarea } from './Textarea/index.js';
 export { Slider } from './Slider/index.js';
 export { Toggle } from './Toggle/index.js';
+export { FormField } from './FormField/index.js';
+export { RadioGroup } from './RadioGroup/index.js';
+export { SearchInput } from './SearchInput/index.js';
+export { MultiSelect } from './MultiSelect/index.js';
+export { DatePicker } from './DatePicker/index.js';
+export { TimePicker } from './TimePicker/index.js';
+export { PhoneInput } from './PhoneInput/index.js';
+export { DEFAULT_COUNTRIES } from './PhoneInput/index.js';

package/dist/layout/Container/Container.svelte

@@ -22,6 +22,7 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
 	id?: string;
 	class?: string;
 	children?: Snippet;
+	testId?: string;
 }
 
 let {
@@ -34,6 +35,7 @@ let {
 	id,
 	class: className = '',
 	children,
+	testId,
 	...restProps
 }: Props = $props();
 
@@ -52,6 +54,7 @@ const resolvedPaddingY = $derived(paddingY ?? 'none');
 		centered && 'sx-container-centered',
 		className
 	)}
+	data-testid={testId}
 	{...restProps}
 >
 	{#if children}

package/dist/layout/Container/Container.svelte.d.ts

@@ -12,6 +12,7 @@ interface Props extends Omit<HTMLAttributes<HTMLDivElement>, 'class'> {
     id?: string;
     class?: string;
     children?: Snippet;
+    testId?: string;
 }
 /**
  * Container

package/dist/layout/Container/Container.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/Container/Container.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAItD,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AACjF,KAAK,gBAAgB,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3D,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA4CD;;;;;GAKG;AACH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"Container.svelte.d.ts","sourceRoot":"","sources":["../../../src/layout/Container/Container.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAItD,KAAK,aAAa,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,OAAO,GAAG,MAAM,CAAC;AACjF,KAAK,gBAAgB,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3D,UAAU,KAAM,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACpE,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AA6CD;;;;;GAKG;AACH,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/primitives/Badge/Badge.svelte

@@ -30,6 +30,7 @@ interface Props {
 	children?: Snippet;
 	/** Accessible label when dot (required when dot for a11y) */
 	'aria-label'?: string;
+	testId?: string;
 }
 
 let {
@@ -39,7 +40,8 @@ let {
 	icon,
 	class: className = '',
 	children,
-	'aria-label': ariaLabel
+	'aria-label': ariaLabel,
+	testId
 }: Props = $props();
 </script>
 
@@ -54,6 +56,7 @@ let {
 		)}
 		role="status"
 		aria-label={ariaLabel ?? status}
+		data-testid={testId}
 	>
 		<span class="sx-sr-only">{ariaLabel ?? status}</span>
 	</span>
@@ -66,6 +69,7 @@ let {
 			className
 		)}
 		role="status"
+		data-testid={testId}
 	>
 		{#if icon}
 			<span class="sx-badge-icon" aria-hidden="true">

package/dist/primitives/Badge/Badge.svelte.d.ts

@@ -16,6 +16,7 @@ interface Props {
     children?: Snippet;
     /** Accessible label when dot (required when dot for a11y) */
     'aria-label'?: string;
+    testId?: string;
 }
 /**
  * Badge

package/dist/primitives/Badge/Badge.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhG,UAAU,KAAK;IACd,gCAAgC;IAChC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAoDD;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Badge.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Badge/Badge.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAItC,KAAK,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpC,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;AAEhG,UAAU,KAAK;IACd,gCAAgC;IAChC,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,WAAW;IACX,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iEAAiE;IACjE,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,iCAAiC;IACjC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,6BAA6B;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAqDD;;;;;;;;;GASG;AACH,QAAA,MAAM,KAAK,2CAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}

package/dist/primitives/Tooltip/Tooltip.svelte

@@ -17,6 +17,7 @@
 import type { Snippet } from 'svelte';
 import { cn } from '../../utils/cn.js';
 import { tick } from 'svelte';
+import { onMount } from 'svelte';
 
 type Placement = 'top' | 'bottom' | 'left' | 'right';
 
@@ -140,6 +141,34 @@ function positionTooltip() {
 	computedLeft = `${left}px`;
 	placementOverride = finalPlacement;
 }
+
+// Portal: move tooltip to document.body so position:fixed is viewport-relative
+// (ancestors with transform/backdrop-filter would otherwise create a containing block)
+$effect(() => {
+	if (tooltipEl && visible) {
+		document.body.appendChild(tooltipEl);
+		// Position only after the node is in body and laid out (showcase-style behavior)
+		const run = () => {
+			tick().then(() => {
+				positionTooltip();
+			});
+		};
+		requestAnimationFrame(run);
+		return () => {
+			if (tooltipEl?.parentNode === document.body) {
+				document.body.removeChild(tooltipEl);
+			}
+		};
+	}
+});
+
+onMount(() => {
+	return () => {
+		if (tooltipEl?.parentNode === document.body) {
+			document.body.removeChild(tooltipEl);
+		}
+	};
+});
 </script>
 
 <svelte:window onkeydown={handleKeydown} />
@@ -204,6 +233,7 @@ function positionTooltip() {
 			0 0 8px -4px rgba(255, 107, 53, 0.1);
 		pointer-events: none;
 		animation: sx-tooltip-in 150ms var(--sx-ease-out) both;
+		white-space: normal;
 		word-wrap: break-word;
 	}
 

package/dist/primitives/Tooltip/Tooltip.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,UAAU,KAAK;IACd,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAyID;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Tooltip.svelte.d.ts","sourceRoot":"","sources":["../../../src/primitives/Tooltip/Tooltip.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAMtC,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAErD,UAAU,KAAK;IACd,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,2DAA2D;IAC3D,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,8CAA8C;IAC9C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8BAA8B;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;CAChB;AAsKD;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,OAAO,2CAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/utils/accessibility.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Accessibility utilities for WCAG 2.1 AA compliance.
+ * Focus management, screen reader announcements, media query helpers.
+ */
+/** Check whether an element can receive focus. */
+export declare function isElementFocusable(el: HTMLElement): boolean;
+/** Get all focusable elements within a container, in DOM order. */
+export declare function getFocusableElements(container: HTMLElement): HTMLElement[];
+/**
+ * Announce a message to screen readers via an ARIA live region.
+ * Creates the region lazily and reuses it across calls.
+ */
+export declare function announce(message: string, priority?: 'polite' | 'assertive'): void;
+/** Check if the user prefers reduced motion. */
+export declare function prefersReducedMotion(): boolean;
+//# sourceMappingURL=accessibility.d.ts.map