@joewinke/jatui 0.42.0 → 0.43.0

package/dist/components/basic/Slider.svelte

@@ -1,16 +1,48 @@
 <script lang="ts">
+	/**
+	 * Slider — single value or a two-thumb range.
+	 *
+	 * Pass a number for one thumb (the original DaisyUI `range`, unchanged
+	 * markup), or a `[min, max]` pair for two. The two-thumb form stacks two
+	 * native `<input type="range">`s over one drawn track; only the thumbs
+	 * take pointer events, so native keys (arrows, PgUp/PgDn, Home/End) and
+	 * screen-reader support come for free. A thumb can't cross the other one
+	 * (`minGap` keeps them apart).
+	 *
+	 * `formatValue` feeds the bubble, the `showValue` readout and
+	 * `aria-valuetext`. `bubble` shows a value bubble above each thumb:
+	 * `always`, `drag` (while pressed or keyboard-focused) or `none`.
+	 *
+	 * Two-thumb + value-bubble behaviour after BoardUI's slider (MIT © 2026
+	 * Mertcan Dundar Esmergul); written fresh on native inputs.
+	 */
+	import { bubbleLeft, moveThumb, normalizePair, percentOf, topThumb } from './sliderMath';
+
+	type Variant = 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+
 	interface Props {
-		value?: number;
+		value?: number | [number, number];
 		min?: number;
 		max?: number;
 		step?: number;
 		size?: 'xs' | 'sm' | 'md' | 'lg';
-		variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+		variant?: Variant;
 		showValue?: boolean;
 		disabled?: boolean;
 		name?: string;
 		id?: string;
 		onchange?: (value: number) => void;
+		/** Fires with the pair in two-thumb mode (and with a number otherwise). */
+		onvaluechange?: (value: number | [number, number]) => void;
+		/** Formats the bubble, the readout and aria-valuetext. */
+		formatValue?: (value: number) => string;
+		/** Value bubble above each thumb. Default `none`. */
+		bubble?: 'always' | 'drag' | 'none';
+		/** Accessible name(s). A string names a single thumb; a pair names the two. */
+		label?: string;
+		thumbLabels?: [string, string];
+		/** Smallest allowed distance between the two thumbs. */
+		minGap?: number;
 		class?: string;
 	}
 
@@ -26,6 +58,12 @@
 		name,
 		id,
 		onchange,
+		onvaluechange,
+		formatValue,
+		bubble = 'none',
+		label,
+		thumbLabels,
+		minGap = 0,
 		class: className = ''
 	}: Props = $props();
 
@@ -43,14 +81,67 @@
 		}[variant]
 	);
 	const rangeClass = $derived(['range', sizeClass, variantClass, className].filter(Boolean).join(' '));
+	// DaisyUI thumb sizes: --size-selector (0.25rem) × 4/5/6/7.
+	const thumbPx = $derived({ xs: 16, sm: 20, md: 24, lg: 28 }[size]);
+
+	const THUMBS = [0, 1] as const;
+	const fmt = (v: number) => (formatValue ? formatValue(v) : String(v));
+	const isRange = $derived(Array.isArray(value));
+
+	// ── single ────────────────────────────────────────────────────────
+	const single = $derived(typeof value === 'number' ? value : 0);
+	let singleActive = $state(false);
 
 	function handleInput(e: Event) {
 		value = Number((e.target as HTMLInputElement).value);
 		onchange?.(value);
+		onvaluechange?.(value);
+	}
+
+	// ── range ─────────────────────────────────────────────────────────
+	const pair = $derived<[number, number]>(
+		Array.isArray(value) ? normalizePair(value, min, max, step) : [min, max]
+	);
+	let lastActive = $state<0 | 1>(1);
+	let active = $state<[boolean, boolean]>([false, false]);
+	const onTop = $derived(topThumb(pair, min, max, lastActive));
+	const p0 = $derived(percentOf(pair[0], min, max));
+	const p1 = $derived(percentOf(pair[1], min, max));
+
+	function handlePairInput(e: Event, index: 0 | 1) {
+		const input = e.target as HTMLInputElement;
+		const next = moveThumb(pair, index, Number(input.value), min, max, step, minGap);
+		// The native input may have moved past the other thumb — pull it back.
+		input.value = String(next[index]);
+		lastActive = index;
+		value = next;
+		onvaluechange?.(next);
 	}
+
+	function setActive(index: 0 | 1, on: boolean) {
+		active = index === 0 ? [on, active[1]] : [active[0], on];
+		if (on) lastActive = index;
+	}
+
+	const showBubble = (on: boolean) => bubble === 'always' || (bubble === 'drag' && on);
+	const thumbNames = $derived<[string, string]>(
+		thumbLabels ?? [label ? `${label} minimum` : 'Minimum', label ? `${label} maximum` : 'Maximum']
+	);
+	const fillClass = $derived(
+		{
+			default: 'bg-base-content',
+			primary: 'bg-primary',
+			secondary: 'bg-secondary',
+			accent: 'bg-accent',
+			success: 'bg-success',
+			warning: 'bg-warning',
+			error: 'bg-error',
+			info: 'bg-info'
+		}[variant]
+	);
 </script>
 
-<div class="flex w-full flex-col gap-1">
+{#snippet singleInput()}
 	<input
 		type="range"
 		{name}
@@ -59,14 +150,171 @@
 		{min}
 		{max}
 		{step}
-		value={value}
+		value={single}
 		{disabled}
 		oninput={handleInput}
-		aria-valuenow={value}
+		aria-label={label}
+		aria-valuenow={single}
 		aria-valuemin={min}
 		aria-valuemax={max}
+		aria-valuetext={formatValue ? fmt(single) : undefined}
+		onpointerdown={() => (singleActive = true)}
+		onpointerup={() => (singleActive = false)}
+		onfocus={(e) => (singleActive = (e.currentTarget as HTMLElement).matches(':focus-visible'))}
+		onblur={() => (singleActive = false)}
 	/>
-	{#if showValue}
-		<div class="text-base-content/60 w-full text-right text-xs tabular-nums">{value}</div>
-	{/if}
-</div>
+{/snippet}
+
+{#if !isRange}
+	<div class="flex w-full flex-col gap-1" class:jatui-slider-bubbled={bubble !== 'none'}>
+		{#if bubble === 'none'}
+			{@render singleInput()}
+		{:else}
+			<div class="jatui-slider-single">
+				{@render singleInput()}
+				<span
+					class="jatui-slider-bubble bg-base-content text-base-100"
+					class:jatui-slider-bubble-on={showBubble(singleActive)}
+					style:left={bubbleLeft(percentOf(single, min, max), thumbPx)}
+					aria-hidden="true">{fmt(single)}</span
+				>
+			</div>
+		{/if}
+		{#if showValue}
+			<div class="text-base-content/60 w-full text-right text-xs tabular-nums">{fmt(single)}</div>
+		{/if}
+	</div>
+{:else}
+	<div
+		class="jatui-slider-range flex w-full flex-col gap-1 {className}"
+		class:jatui-slider-bubbled={bubble !== 'none'}
+		class:jatui-slider-disabled={disabled}
+		role="group"
+		aria-label={label}
+	>
+		<div class="jatui-slider-stack" style:--jatui-thumb="{thumbPx}px">
+			<span class="jatui-slider-track bg-base-content/10" aria-hidden="true">
+				<span
+					class="jatui-slider-fill {fillClass}"
+					style:left={bubbleLeft(p0, thumbPx)}
+					style:right="calc(100% - {bubbleLeft(p1, thumbPx)})"
+				></span>
+			</span>
+			{#each THUMBS as i (i)}
+				<input
+					type="range"
+					name={name ? `${name}${i === 0 ? '_min' : '_max'}` : undefined}
+					id={id ? `${id}-${i === 0 ? 'min' : 'max'}` : undefined}
+					class="{['range', sizeClass, variantClass].filter(Boolean).join(' ')} jatui-slider-thumb-input"
+					style:z-index={onTop === i ? 2 : 1}
+					{min}
+					{max}
+					{step}
+					value={pair[i]}
+					{disabled}
+					aria-label={thumbNames[i]}
+					aria-valuenow={pair[i]}
+					aria-valuemin={min}
+					aria-valuemax={max}
+					aria-valuetext={formatValue ? fmt(pair[i]) : undefined}
+					oninput={(e) => handlePairInput(e, i)}
+					onpointerdown={() => setActive(i, true)}
+					onpointerup={() => setActive(i, false)}
+					onfocus={(e) => setActive(i, (e.currentTarget as HTMLElement).matches(':focus-visible'))}
+					onblur={() => setActive(i, false)}
+				/>
+				{#if bubble !== 'none'}
+					<span
+						class="jatui-slider-bubble bg-base-content text-base-100"
+						class:jatui-slider-bubble-on={showBubble(active[i])}
+						style:left={bubbleLeft(i === 0 ? p0 : p1, thumbPx)}
+						aria-hidden="true">{fmt(pair[i])}</span
+					>
+				{/if}
+			{/each}
+		</div>
+		{#if showValue}
+			<div class="text-base-content/60 w-full text-right text-xs tabular-nums">
+				{fmt(pair[0])} – {fmt(pair[1])}
+			</div>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.jatui-slider-single,
+	.jatui-slider-stack {
+		position: relative;
+		width: 100%;
+	}
+	/* Room for the bubble above the thumb, so it never covers content. */
+	.jatui-slider-bubbled {
+		padding-top: 1.75rem;
+	}
+
+	.jatui-slider-bubble {
+		position: absolute;
+		bottom: calc(100% + 4px);
+		transform: translate(-50%, 4px) scale(0.9);
+		padding: 1px 6px;
+		border-radius: var(--jatui-radius-selector, 0.375rem);
+		font-size: 0.75rem;
+		line-height: 1.125rem;
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+		pointer-events: none;
+		opacity: 0;
+		transition:
+			opacity var(--motion-fast, 150ms) var(--motion-glide, ease-out),
+			transform var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.jatui-slider-bubble-on {
+		opacity: 1;
+		transform: translate(-50%, 0) scale(1);
+	}
+
+	/* ── two thumbs ─────────────────────────────────────────────── */
+	.jatui-slider-stack {
+		height: var(--jatui-thumb);
+	}
+	.jatui-slider-track {
+		position: absolute;
+		inset-inline: 0;
+		top: 50%;
+		height: calc(var(--jatui-thumb) * 0.5);
+		transform: translateY(-50%);
+		border-radius: var(--jatui-radius-selector, 0.375rem);
+		overflow: hidden;
+	}
+	.jatui-slider-fill {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+	}
+	.jatui-slider-thumb-input {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		margin: 0;
+		/* Turn off DaisyUI's own fill and track: the stack draws one track. */
+		--range-fill: 0;
+		--range-bg: transparent;
+		background: transparent;
+		pointer-events: none;
+	}
+	.jatui-slider-thumb-input::-webkit-slider-thumb {
+		pointer-events: auto;
+	}
+	.jatui-slider-thumb-input::-moz-range-thumb {
+		pointer-events: auto;
+	}
+	.jatui-slider-disabled {
+		opacity: 0.5;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-slider-bubble {
+			transition: none;
+		}
+	}
+</style>

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

@@ -1,15 +1,27 @@
+type Variant = 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
 interface Props {
-    value?: number;
+    value?: number | [number, number];
     min?: number;
     max?: number;
     step?: number;
     size?: 'xs' | 'sm' | 'md' | 'lg';
-    variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    variant?: Variant;
     showValue?: boolean;
     disabled?: boolean;
     name?: string;
     id?: string;
     onchange?: (value: number) => void;
+    /** Fires with the pair in two-thumb mode (and with a number otherwise). */
+    onvaluechange?: (value: number | [number, number]) => void;
+    /** Formats the bubble, the readout and aria-valuetext. */
+    formatValue?: (value: number) => string;
+    /** Value bubble above each thumb. Default `none`. */
+    bubble?: 'always' | 'drag' | 'none';
+    /** Accessible name(s). A string names a single thumb; a pair names the two. */
+    label?: string;
+    thumbLabels?: [string, string];
+    /** Smallest allowed distance between the two thumbs. */
+    minGap?: number;
     class?: string;
 }
 declare const Slider: import("svelte").Component<Props, {}, "value">;

package/dist/components/basic/sliderMath.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Pure helpers behind `Slider` — value snapping, two-thumb collision, and
+ * the bubble offset that keeps a value bubble centred over a native thumb.
+ * DOM-free so they unit-test under node:test.
+ */
+/** Snap `v` to the step grid anchored at `min`, then clamp into [min, max]. */
+export declare function snapToStep(v: number, min: number, max: number, step: number): number;
+/**
+ * Move one thumb of a two-thumb range. The moved thumb is clamped so it
+ * never crosses the other one; `minGap` keeps them at least that far apart.
+ * Returns a new pair; the untouched thumb is never moved.
+ */
+export declare function moveThumb(pair: readonly [number, number], index: 0 | 1, next: number, min: number, max: number, step: number, minGap?: number): [number, number];
+/** Normalise any incoming value into a sorted, snapped pair. */
+export declare function normalizePair(value: readonly [number, number], min: number, max: number, step: number): [number, number];
+/** Position of `v` along the track as a 0–100 percentage. */
+export declare function percentOf(v: number, min: number, max: number): number;
+/**
+ * CSS `left` for a bubble centred over a native range thumb. A native thumb
+ * travels from `thumb/2` to `width - thumb/2`, not 0 to width, so a plain
+ * `p%` drifts off the thumb toward the ends. Returns a `calc()` string.
+ */
+export declare function bubbleLeft(percent: number, thumbPx: number): string;
+/**
+ * Which thumb is stacked on top. When the thumbs meet, the top one must be
+ * one that can still move: at the max end that's the lower thumb, at the min
+ * end the upper one, and in between the one the user touched last.
+ */
+export declare function topThumb(pair: readonly [number, number], min: number, max: number, lastActive?: 0 | 1): 0 | 1;

package/dist/components/basic/sliderMath.js

@@ -0,0 +1,64 @@
+/**
+ * Pure helpers behind `Slider` — value snapping, two-thumb collision, and
+ * the bubble offset that keeps a value bubble centred over a native thumb.
+ * DOM-free so they unit-test under node:test.
+ */
+/** Snap `v` to the step grid anchored at `min`, then clamp into [min, max]. */
+export function snapToStep(v, min, max, step) {
+    if (!Number.isFinite(v))
+        return min;
+    const s = step > 0 ? step : 1;
+    const snapped = min + Math.round((v - min) / s) * s;
+    // Round off float noise from the multiplication (0.1 steps etc).
+    const decimals = (String(s).split('.')[1] ?? '').length;
+    const clean = Number(snapped.toFixed(Math.min(decimals + 2, 10)));
+    return Math.min(max, Math.max(min, clean));
+}
+/**
+ * Move one thumb of a two-thumb range. The moved thumb is clamped so it
+ * never crosses the other one; `minGap` keeps them at least that far apart.
+ * Returns a new pair; the untouched thumb is never moved.
+ */
+export function moveThumb(pair, index, next, min, max, step, minGap = 0) {
+    const v = snapToStep(next, min, max, step);
+    const gap = Math.max(0, minGap);
+    if (index === 0) {
+        return [Math.min(v, pair[1] - gap), pair[1]];
+    }
+    return [pair[0], Math.max(v, pair[0] + gap)];
+}
+/** Normalise any incoming value into a sorted, snapped pair. */
+export function normalizePair(value, min, max, step) {
+    const a = snapToStep(value[0], min, max, step);
+    const b = snapToStep(value[1], min, max, step);
+    return a <= b ? [a, b] : [b, a];
+}
+/** Position of `v` along the track as a 0–100 percentage. */
+export function percentOf(v, min, max) {
+    if (max <= min)
+        return 0;
+    return Math.min(100, Math.max(0, ((v - min) / (max - min)) * 100));
+}
+/**
+ * CSS `left` for a bubble centred over a native range thumb. A native thumb
+ * travels from `thumb/2` to `width - thumb/2`, not 0 to width, so a plain
+ * `p%` drifts off the thumb toward the ends. Returns a `calc()` string.
+ */
+export function bubbleLeft(percent, thumbPx) {
+    const offset = thumbPx * (0.5 - percent / 100);
+    return `calc(${percent}% + ${Number(offset.toFixed(2))}px)`;
+}
+/**
+ * Which thumb is stacked on top. When the thumbs meet, the top one must be
+ * one that can still move: at the max end that's the lower thumb, at the min
+ * end the upper one, and in between the one the user touched last.
+ */
+export function topThumb(pair, min, max, lastActive = 1) {
+    if (pair[0] >= max)
+        return 0;
+    if (pair[1] <= min)
+        return 1;
+    if (pair[0] === pair[1])
+        return lastActive;
+    return 1;
+}

package/dist/components/field/FieldHint.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	/**
+	 * FieldHint — the help / error line under a field. With `error` it turns
+	 * error-toned and announces (`role="alert"`). Give it the id your control
+	 * points `aria-describedby` at.
+	 */
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		id?: string;
+		text?: string;
+		/** Error tone + role="alert". */
+		error?: boolean;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let { id, text, error = false, class: className = '', children }: Props = $props();
+</script>
+
+<div class="label {className}">
+	<span
+		{id}
+		class="text-[0.8125rem] {error ? 'text-error' : 'text-base-content/45'}"
+		role={error ? 'alert' : undefined}
+	>
+		{#if children}{@render children()}{:else}{text}{/if}
+	</span>
+</div>

package/dist/components/field/FieldHint.svelte.d.ts

@@ -0,0 +1,17 @@
+/**
+     * FieldHint — the help / error line under a field. With `error` it turns
+     * error-toned and announces (`role="alert"`). Give it the id your control
+     * points `aria-describedby` at.
+     */
+import type { Snippet } from 'svelte';
+interface Props {
+    id?: string;
+    text?: string;
+    /** Error tone + role="alert". */
+    error?: boolean;
+    class?: string;
+    children?: Snippet;
+}
+declare const FieldHint: import("svelte").Component<Props, {}, "">;
+type FieldHint = ReturnType<typeof FieldHint>;
+export default FieldHint;

package/dist/components/field/FieldLabel.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+	/**
+	 * FieldLabel — the label row every jatui field uses (TextInput today), so
+	 * custom controls (PhoneInput, SearchDropdown, your own) line up with it.
+	 *
+	 * `required` adds the asterisk; `tooltip` adds a small info button after
+	 * the text that shows the hint through the shared `use:tooltip` action
+	 * (hover AND keyboard focus, with `aria-describedby`). The button sits
+	 * outside the `<label>` element so clicking it never focuses the input.
+	 *
+	 * Separate label/hint primitives after BoardUI's input parts (MIT © 2026
+	 * Mertcan Dundar Esmergul); written fresh for Svelte and DaisyUI.
+	 */
+	import type { Snippet } from 'svelte';
+	import { tooltip as tooltipAction } from '../../actions/tooltip';
+
+	interface Props {
+		/** id of the control this labels. */
+		for?: string;
+		text?: string;
+		required?: boolean;
+		/** Info-icon hint after the label text. */
+		tooltip?: string;
+		/** Accessible name of the info button. Default "More information". */
+		tooltipLabel?: string;
+		id?: string;
+		class?: string;
+		children?: Snippet;
+	}
+
+	let {
+		for: htmlFor,
+		text,
+		required = false,
+		tooltip,
+		tooltipLabel = 'More information',
+		id,
+		class: className = '',
+		children
+	}: Props = $props();
+</script>
+
+{#snippet labelEl(extra: string)}
+	<label for={htmlFor} {id} class={extra ? `label ${extra}` : 'label'}>
+		<span class="text-[0.8125rem] font-medium text-base-content/85">
+			{#if children}{@render children()}{:else}{text}{/if}
+			{#if required}
+				<span class="text-error ml-1">*</span>
+			{/if}
+		</span>
+	</label>
+{/snippet}
+
+{#if tooltip}
+	<div class="jatui-field-label-row {className}">
+		{@render labelEl('')}
+		<button
+			type="button"
+			class="jatui-field-tip text-base-content/50 hover:text-base-content/80"
+			aria-label={tooltipLabel}
+			use:tooltipAction={{ text: tooltip, placement: 'top' }}
+		>
+			<svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
+				<circle cx="8" cy="8" r="6.25" stroke="currentColor" stroke-width="1.5" />
+				<path d="M8 7.25v3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+				<circle cx="8" cy="5.1" r="0.85" fill="currentColor" />
+			</svg>
+		</button>
+	</div>
+{:else}
+	{@render labelEl(className)}
+{/if}
+
+<style>
+	/* Without a tooltip there is no row — just the bare <label>, exactly the
+	   markup TextInput rendered before FieldLabel existed. */
+	.jatui-field-label-row {
+		display: flex;
+		align-items: center;
+		gap: var(--jatui-space-sm, 4px);
+	}
+	.jatui-field-tip {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		/* 24px target (WCAG 2.5.8) around a 14px glyph */
+		width: 1.5rem;
+		height: 1.5rem;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		cursor: help;
+	}
+	.jatui-field-tip svg {
+		width: 0.875rem;
+		height: 0.875rem;
+	}
+	.jatui-field-tip:focus-visible {
+		outline: 2px solid color-mix(in oklch, var(--color-primary) 65%, transparent);
+		outline-offset: 1px;
+	}
+</style>

package/dist/components/field/FieldLabel.svelte.d.ts

@@ -0,0 +1,29 @@
+/**
+     * FieldLabel — the label row every jatui field uses (TextInput today), so
+     * custom controls (PhoneInput, SearchDropdown, your own) line up with it.
+     *
+     * `required` adds the asterisk; `tooltip` adds a small info button after
+     * the text that shows the hint through the shared `use:tooltip` action
+     * (hover AND keyboard focus, with `aria-describedby`). The button sits
+     * outside the `<label>` element so clicking it never focuses the input.
+     *
+     * Separate label/hint primitives after BoardUI's input parts (MIT © 2026
+     * Mertcan Dundar Esmergul); written fresh for Svelte and DaisyUI.
+     */
+import type { Snippet } from 'svelte';
+interface Props {
+    /** id of the control this labels. */
+    for?: string;
+    text?: string;
+    required?: boolean;
+    /** Info-icon hint after the label text. */
+    tooltip?: string;
+    /** Accessible name of the info button. Default "More information". */
+    tooltipLabel?: string;
+    id?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const FieldLabel: import("svelte").Component<Props, {}, "">;
+type FieldLabel = ReturnType<typeof FieldLabel>;
+export default FieldLabel;