@joewinke/jatui 0.41.1 → 0.43.0

package/dist/components/basic/RadioGroup.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+	import ChoiceCard from '../form-cards/ChoiceCard.svelte';
+
 	export interface RadioOption {
 		value: string;
 		label: string;
 		disabled?: boolean;
+		/** Secondary line — shown by `variant="card"`. */
+		description?: string;
+		/** Leading icon — shown by `variant="card"`. */
+		icon?: Snippet;
 	}
 
 	interface Props {
@@ -14,6 +21,16 @@
 		orientation?: 'horizontal' | 'vertical';
 		onchange?: (value: string) => void;
 		class?: string;
+		/**
+		 * `card` renders each option as a ChoiceCard (title + description +
+		 * icon, whole card clickable). The radios stay native, so arrow keys
+		 * still rove inside the group.
+		 */
+		display?: 'default' | 'card';
+		/** Accessible name for the group (`aria-label`). */
+		label?: string;
+		/** Where the radio dot sits on a card. Default `start`. */
+		controlPosition?: 'start' | 'end';
 	}
 
 	let {
@@ -24,7 +41,10 @@
 		variant = 'primary',
 		orientation = 'vertical',
 		onchange,
-		class: className = ''
+		class: className = '',
+		display = 'default',
+		label,
+		controlPosition = 'start'
 	}: Props = $props();
 
 	const sizeClass = $derived({ xs: 'radio-xs', sm: 'radio-sm', md: '', lg: 'radio-lg' }[size]);
@@ -42,7 +62,15 @@
 	);
 	const radioClass = $derived(['radio', sizeClass, variantClass].filter(Boolean).join(' '));
 	const groupClass = $derived(
-		['flex', orientation === 'horizontal' ? 'flex-row flex-wrap gap-4' : 'flex-col gap-2', className].join(' ')
+		[
+			'flex',
+			orientation === 'horizontal'
+				? display === 'card'
+					? 'flex-row flex-wrap gap-3'
+					: 'flex-row flex-wrap gap-4'
+				: 'flex-col gap-2',
+			className
+		].join(' ')
 	);
 
 	function handleChange(e: Event, optValue: string) {
@@ -51,9 +79,36 @@
 	}
 </script>
 
-<div class={groupClass} role="radiogroup">
+<div class={groupClass} role="radiogroup" aria-label={label}>
 	{#each options as opt}
 		{@const inputId = `${name}-${opt.value}`}
+		{#if display === 'card'}
+			<ChoiceCard
+				title={opt.label}
+				description={opt.description}
+				icon={opt.icon}
+				disabled={opt.disabled}
+				size={size === 'xs' || size === 'sm' ? 'sm' : 'md'}
+				{controlPosition}
+				for={inputId}
+				descriptionId={opt.description ? `${inputId}-desc` : undefined}
+				class={orientation === 'horizontal' ? 'min-w-48 flex-1' : ''}
+			>
+				{#snippet control()}
+					<input
+						type="radio"
+						id={inputId}
+						{name}
+						value={opt.value}
+						class={radioClass}
+						checked={value === opt.value}
+						disabled={opt.disabled}
+						aria-describedby={opt.description ? `${inputId}-desc` : undefined}
+						onchange={(e) => handleChange(e, opt.value)}
+					/>
+				{/snippet}
+			</ChoiceCard>
+		{:else}
 		<label class="flex cursor-pointer items-center gap-2" for={inputId}>
 			<input
 				type="radio"
@@ -67,5 +122,6 @@
 			/>
 			<span class="label-text">{opt.label}</span>
 		</label>
+		{/if}
 	{/each}
 </div>

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

@@ -1,7 +1,12 @@
+import type { Snippet } from 'svelte';
 export interface RadioOption {
     value: string;
     label: string;
     disabled?: boolean;
+    /** Secondary line — shown by `variant="card"`. */
+    description?: string;
+    /** Leading icon — shown by `variant="card"`. */
+    icon?: Snippet;
 }
 interface Props {
     value?: string;
@@ -12,6 +17,16 @@ interface Props {
     orientation?: 'horizontal' | 'vertical';
     onchange?: (value: string) => void;
     class?: string;
+    /**
+     * `card` renders each option as a ChoiceCard (title + description +
+     * icon, whole card clickable). The radios stay native, so arrow keys
+     * still rove inside the group.
+     */
+    display?: 'default' | 'card';
+    /** Accessible name for the group (`aria-label`). */
+    label?: string;
+    /** Where the radio dot sits on a card. Default `start`. */
+    controlPosition?: 'start' | 'end';
 }
 declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;

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/calendar/CalendarHeader.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+	/**
+	 * CalendarHeader — previous/next month buttons around a live month title.
+	 * Shared by every month panel (CalendarPicker, DatePicker, DateRangePicker,
+	 * BookingScheduler). `title` replaces the plain heading (EventCalendar uses it
+	 * for its month-switcher pill).
+	 */
+	import type { Snippet } from 'svelte';
+	import IconButton from '../IconButton.svelte';
+
+	let {
+		label,
+		onPrev,
+		onNext,
+		canPrev = true,
+		canNext = true,
+		size = 'md',
+		hidePrev = false,
+		hideNext = false,
+		prevLabel = 'Previous month',
+		nextLabel = 'Next month',
+		title
+	}: {
+		label: string;
+		onPrev?: () => void;
+		onNext?: () => void;
+		canPrev?: boolean;
+		canNext?: boolean;
+		size?: 'sm' | 'md';
+		/** Hide one arrow (the inner edges of a two-month view). Keeps its space. */
+		hidePrev?: boolean;
+		hideNext?: boolean;
+		prevLabel?: string;
+		nextLabel?: string;
+		title?: Snippet;
+	} = $props();
+</script>
+
+<div class="jatui-cal-header">
+	<span class:jatui-cal-header__ghost={hidePrev}>
+		<IconButton
+			label={prevLabel}
+			size={size === 'sm' ? 'xs' : 'sm'}
+			shape="circle"
+			disabled={!canPrev || hidePrev}
+			onclick={() => onPrev?.()}
+		>
+			<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" class="jatui-cal-header__chev">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
+			</svg>
+		</IconButton>
+	</span>
+	{#if title}
+		{@render title()}
+	{:else}
+		<h3 class="jatui-cal-header__title" class:is-sm={size === 'sm'} aria-live="polite">{label}</h3>
+	{/if}
+	<span class:jatui-cal-header__ghost={hideNext}>
+		<IconButton
+			label={nextLabel}
+			size={size === 'sm' ? 'xs' : 'sm'}
+			shape="circle"
+			disabled={!canNext || hideNext}
+			onclick={() => onNext?.()}
+		>
+			<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" class="jatui-cal-header__chev">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+			</svg>
+		</IconButton>
+	</span>
+</div>
+
+<style>
+	.jatui-cal-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 0.5rem;
+		margin-block-end: 0.5rem;
+	}
+	.jatui-cal-header__title {
+		margin: 0;
+		font-size: 1rem;
+		font-weight: 600;
+		text-align: center;
+		flex: 1;
+	}
+	.jatui-cal-header__title.is-sm {
+		font-size: 0.875rem;
+	}
+	.jatui-cal-header__ghost {
+		visibility: hidden;
+	}
+	/* Chevrons point the reading direction. */
+	:global([dir='rtl']) .jatui-cal-header__chev {
+		transform: scaleX(-1);
+	}
+</style>

package/dist/components/calendar/CalendarHeader.svelte.d.ts

@@ -0,0 +1,24 @@
+/**
+     * CalendarHeader — previous/next month buttons around a live month title.
+     * Shared by every month panel (CalendarPicker, DatePicker, DateRangePicker,
+     * BookingScheduler). `title` replaces the plain heading (EventCalendar uses it
+     * for its month-switcher pill).
+     */
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    label: string;
+    onPrev?: () => void;
+    onNext?: () => void;
+    canPrev?: boolean;
+    canNext?: boolean;
+    size?: 'sm' | 'md';
+    /** Hide one arrow (the inner edges of a two-month view). Keeps its space. */
+    hidePrev?: boolean;
+    hideNext?: boolean;
+    prevLabel?: string;
+    nextLabel?: string;
+    title?: Snippet;
+};
+declare const CalendarHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type CalendarHeader = ReturnType<typeof CalendarHeader>;
+export default CalendarHeader;