@salmexio/ui 1.2.0 → 1.3.0

package/dist/forms/DatePicker/DatePicker.svelte

@@ -0,0 +1,725 @@
+<!--
+  @component DatePicker
+
+  INFRARED — Date input with calendar popup, month/year navigation,
+  today button, keyboard navigation, and full ARIA compliance.
+  Zero dependencies.
+
+  @example
+  <DatePicker label="Launch date" bind:value={date} />
+  <DatePicker label="Start" min="2024-01-01" max="2025-12-31" />
+-->
+<script lang="ts">
+import { cn } from '../../utils/cn.js';
+import { Keys, generateId } from '../../utils/keyboard.js';
+import { onMount, tick } from 'svelte';
+
+type DatePickerSize = 'sm' | 'md' | 'lg';
+
+interface Props {
+	/** Visible label. */
+	label: string;
+	/** Selected date in YYYY-MM-DD format. */
+	value?: string;
+	/** Placeholder text. */
+	placeholder?: string;
+	/** Minimum allowed date (YYYY-MM-DD). */
+	min?: string;
+	/** Maximum allowed date (YYYY-MM-DD). */
+	max?: string;
+	/** Size variant. */
+	size?: DatePickerSize;
+	/** 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 date changes. */
+	onchange?: (value: string) => void;
+	/** Test ID. */
+	testId?: string;
+}
+
+let {
+	label,
+	value = $bindable(''),
+	placeholder = 'YYYY-MM-DD',
+	min,
+	max,
+	size = 'md',
+	required = false,
+	disabled = false,
+	error = '',
+	hint = '',
+	hideLabel = false,
+	alwaysShowFooter = true,
+	class: className = '',
+	onchange,
+	testId
+}: Props = $props();
+
+const id = generateId('datepicker');
+const errorId = `${id}-error`;
+const hintId = `${id}-hint`;
+const calendarId = `${id}-calendar`;
+
+let triggerEl = $state<HTMLElement | null>(null);
+let calendarEl = $state<HTMLElement | null>(null);
+let isOpen = $state(false);
+let hasInteracted = $state(false);
+
+// Calendar navigation state
+let viewYear = $state(new Date().getFullYear());
+let viewMonth = $state(new Date().getMonth());
+let focusedDay = $state(new Date().getDate());
+
+const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June',
+	'July', 'August', 'September', 'October', 'November', 'December'];
+
+const showError = $derived(hasInteracted && !!error);
+const ariaDescribedBy = $derived(
+	[showError && errorId, hint && hintId].filter(Boolean).join(' ') || undefined
+);
+const hasFooterContent = $derived(showError || !!hint);
+
+// Parse the selected value into a Date
+const selectedDate = $derived(value ? parseDate(value) : null);
+
+// Display text
+const displayText = $derived(
+	selectedDate
+		? `${MONTHS[selectedDate.getMonth()]} ${selectedDate.getDate()}, ${selectedDate.getFullYear()}`
+		: ''
+);
+
+// Calendar grid
+const firstDayOfMonth = $derived(new Date(viewYear, viewMonth, 1).getDay());
+const daysInMonth = $derived(new Date(viewYear, viewMonth + 1, 0).getDate());
+const daysInPrevMonth = $derived(new Date(viewYear, viewMonth, 0).getDate());
+
+// Panel positioning
+let panelTop = $state(0);
+let panelLeft = $state(0);
+let placeAbove = $state(false);
+
+function parseDate(str: string): Date | null {
+	const parts = str.split('-');
+	if (parts.length !== 3) return null;
+	const d = new Date(Number(parts[0]), Number(parts[1]) - 1, Number(parts[2]));
+	return isNaN(d.getTime()) ? null : d;
+}
+
+function padYear(y: number): string {
+	return String(y).padStart(4, '0');
+}
+
+function formatDate(d: Date): string {
+	const y = padYear(d.getFullYear());
+	const m = String(d.getMonth() + 1).padStart(2, '0');
+	const day = String(d.getDate()).padStart(2, '0');
+	return `${y}-${m}-${day}`;
+}
+
+function isDateDisabled(year: number, month: number, day: number): boolean {
+	const dateStr = `${padYear(year)}-${String(month + 1).padStart(2, '0')}-${String(day).padStart(2, '0')}`;
+	if (min && dateStr < min) return true;
+	if (max && dateStr > max) return true;
+	return false;
+}
+
+function isToday(year: number, month: number, day: number): boolean {
+	const now = new Date();
+	return year === now.getFullYear() && month === now.getMonth() && day === now.getDate();
+}
+
+function isSelected(year: number, month: number, day: number): boolean {
+	if (!selectedDate) return false;
+	return year === selectedDate.getFullYear() && month === selectedDate.getMonth() && day === selectedDate.getDate();
+}
+
+function positionCalendar() {
+	if (!triggerEl) return;
+	const rect = triggerEl.getBoundingClientRect();
+	const viewportH = window.innerHeight;
+	const calH = 340;
+	const spaceBelow = viewportH - rect.bottom;
+	const spaceAbove = rect.top;
+
+	placeAbove = spaceBelow < calH && spaceAbove > spaceBelow;
+	panelLeft = rect.left;
+	panelTop = placeAbove ? rect.top - calH - 4 : rect.bottom + 4;
+}
+
+function open() {
+	if (disabled) return;
+	if (selectedDate) {
+		viewYear = selectedDate.getFullYear();
+		viewMonth = selectedDate.getMonth();
+		focusedDay = selectedDate.getDate();
+	} else {
+		const now = new Date();
+		viewYear = now.getFullYear();
+		viewMonth = now.getMonth();
+		focusedDay = now.getDate();
+	}
+	isOpen = true;
+	positionCalendar();
+}
+
+function close() {
+	isOpen = false;
+}
+
+function selectDay(day: number) {
+	if (isDateDisabled(viewYear, viewMonth, day)) return;
+	value = formatDate(new Date(viewYear, viewMonth, day));
+	hasInteracted = true;
+	onchange?.(value);
+	close();
+	triggerEl?.focus();
+}
+
+function selectToday() {
+	const now = new Date();
+	if (isDateDisabled(now.getFullYear(), now.getMonth(), now.getDate())) return;
+	value = formatDate(now);
+	viewYear = now.getFullYear();
+	viewMonth = now.getMonth();
+	hasInteracted = true;
+	onchange?.(value);
+	close();
+	triggerEl?.focus();
+}
+
+function prevMonth() {
+	if (viewMonth === 0) {
+		viewMonth = 11;
+		viewYear--;
+	} else {
+		viewMonth--;
+	}
+	focusedDay = Math.min(focusedDay, new Date(viewYear, viewMonth + 1, 0).getDate());
+}
+
+function nextMonth() {
+	if (viewMonth === 11) {
+		viewMonth = 0;
+		viewYear++;
+	} else {
+		viewMonth++;
+	}
+	focusedDay = Math.min(focusedDay, new Date(viewYear, viewMonth + 1, 0).getDate());
+}
+
+function prevYear() {
+	viewYear--;
+	focusedDay = Math.min(focusedDay, new Date(viewYear, viewMonth + 1, 0).getDate());
+}
+
+function nextYear() {
+	viewYear++;
+	focusedDay = Math.min(focusedDay, new Date(viewYear, viewMonth + 1, 0).getDate());
+}
+
+function handleTriggerKeydown(e: KeyboardEvent) {
+	if (e.key === Keys.Enter || e.key === Keys.Space || e.key === Keys.ArrowDown) {
+		e.preventDefault();
+		if (!isOpen) open();
+	}
+}
+
+function handleCalendarKeydown(e: KeyboardEvent) {
+	switch (e.key) {
+		case Keys.ArrowRight:
+			e.preventDefault();
+			if (focusedDay < daysInMonth) focusedDay++;
+			else { nextMonth(); focusedDay = 1; }
+			break;
+		case Keys.ArrowLeft:
+			e.preventDefault();
+			if (focusedDay > 1) focusedDay--;
+			else { prevMonth(); focusedDay = daysInMonth; }
+			break;
+		case Keys.ArrowDown:
+			e.preventDefault();
+			if (focusedDay + 7 <= daysInMonth) focusedDay += 7;
+			else { const overflow = focusedDay + 7 - daysInMonth; nextMonth(); focusedDay = overflow; }
+			break;
+		case Keys.ArrowUp:
+			e.preventDefault();
+			if (focusedDay - 7 >= 1) focusedDay -= 7;
+			else { const newDay = daysInPrevMonth + (focusedDay - 7); prevMonth(); focusedDay = newDay; }
+			break;
+		case Keys.Home:
+			e.preventDefault();
+			focusedDay = 1;
+			break;
+		case Keys.End:
+			e.preventDefault();
+			focusedDay = daysInMonth;
+			break;
+		case Keys.Enter:
+		case Keys.Space:
+			e.preventDefault();
+			selectDay(focusedDay);
+			break;
+		case Keys.Escape:
+			e.preventDefault();
+			close();
+			triggerEl?.focus();
+			break;
+	}
+}
+
+function handleClickOutside(e: MouseEvent) {
+	const target = e.target as Node;
+	if (triggerEl?.contains(target)) return;
+	if (calendarEl?.contains(target)) return;
+	close();
+}
+
+function handleReposition() {
+	if (isOpen) positionCalendar();
+}
+
+// Portal calendar to body
+$effect(() => {
+	if (calendarEl && isOpen) {
+		document.body.appendChild(calendarEl);
+		return () => {
+			if (calendarEl?.parentNode === document.body) {
+				document.body.removeChild(calendarEl);
+			}
+		};
+	}
+});
+
+onMount(() => {
+	document.addEventListener('mousedown', handleClickOutside);
+	window.addEventListener('scroll', handleReposition, true);
+	window.addEventListener('resize', handleReposition);
+	return () => {
+		document.removeEventListener('mousedown', handleClickOutside);
+		window.removeEventListener('scroll', handleReposition, true);
+		window.removeEventListener('resize', handleReposition);
+		if (calendarEl?.parentNode === document.body) {
+			document.body.removeChild(calendarEl);
+		}
+	};
+});
+</script>
+
+<div
+	class={cn('sx-datepicker', `sx-datepicker-${size}`, disabled && 'sx-datepicker-disabled', className)}
+	data-testid={testId}
+>
+	<label for={id} class={cn('sx-datepicker-label', hideLabel && 'sx-sr-only')}>
+		{label}
+		{#if required}
+			<span class="sx-datepicker-required" aria-hidden="true">*</span>
+		{/if}
+	</label>
+
+	<button
+		bind:this={triggerEl}
+		{id}
+		type="button"
+		class={cn(
+			'sx-datepicker-trigger',
+			isOpen && 'sx-datepicker-trigger-open',
+			showError && 'sx-datepicker-trigger-error',
+			disabled && 'sx-datepicker-trigger-disabled'
+		)}
+		{disabled}
+		aria-haspopup="dialog"
+		aria-expanded={isOpen}
+		aria-controls={isOpen ? calendarId : undefined}
+		aria-describedby={ariaDescribedBy}
+		onclick={() => { if (isOpen) close(); else open(); }}
+		onkeydown={handleTriggerKeydown}
+	>
+		<span class="sx-datepicker-icon" aria-hidden="true">
+			<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
+				<rect x="3" y="4" width="18" height="18" rx="2" ry="2" /><line x1="16" y1="2" x2="16" y2="6" /><line x1="8" y1="2" x2="8" y2="6" /><line x1="3" y1="10" x2="21" y2="10" />
+			</svg>
+		</span>
+		<span class={cn('sx-datepicker-value', !displayText && 'sx-datepicker-placeholder')}>
+			{displayText || placeholder}
+		</span>
+	</button>
+
+	{#if alwaysShowFooter || hasFooterContent}
+		<div class="sx-datepicker-footer">
+			{#if showError}
+				<p id={errorId} class="sx-datepicker-error" role="alert" aria-live="assertive">{error}</p>
+			{:else if hint}
+				<p id={hintId} class="sx-datepicker-hint">{hint}</p>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<!-- Calendar popup -->
+{#if isOpen}
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<div
+		bind:this={calendarEl}
+		id={calendarId}
+		class="sx-calendar"
+		style="position:fixed;left:{panelLeft}px;top:{panelTop}px;"
+		role="dialog"
+		aria-modal="false"
+		aria-label="{MONTHS[viewMonth]} {viewYear}"
+		tabindex="-1"
+		onkeydown={handleCalendarKeydown}
+	>
+		<!-- Header: month/year navigation -->
+		<div class="sx-calendar-header">
+			<button type="button" class="sx-calendar-nav" aria-label="Previous year" onclick={prevYear}>
+				<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 2L3 6L7 10" /><path d="M10 2L6 6L10 10" /></svg>
+			</button>
+			<button type="button" class="sx-calendar-nav" aria-label="Previous month" onclick={prevMonth}>
+				<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M8 2L4 6L8 10" /></svg>
+			</button>
+			<span class="sx-calendar-title" aria-live="polite">
+				{MONTHS[viewMonth]} {viewYear}
+			</span>
+			<button type="button" class="sx-calendar-nav" aria-label="Next month" onclick={nextMonth}>
+				<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 2L8 6L4 10" /></svg>
+			</button>
+			<button type="button" class="sx-calendar-nav" aria-label="Next year" onclick={nextYear}>
+				<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 2L9 6L5 10" /><path d="M2 2L6 6L2 10" /></svg>
+			</button>
+		</div>
+
+		<!-- Day labels -->
+		<div class="sx-calendar-weekdays" role="row">
+			{#each DAYS as day}
+				<span class="sx-calendar-weekday" role="columnheader" aria-label={day}>{day}</span>
+			{/each}
+		</div>
+
+		<!-- Day grid -->
+		<div class="sx-calendar-grid" role="grid" aria-label="Calendar">
+			<!-- Leading blanks -->
+			{#each Array(firstDayOfMonth) as _, i}
+				<span class="sx-calendar-day sx-calendar-day-outside" aria-hidden="true">
+					{daysInPrevMonth - firstDayOfMonth + 1 + i}
+				</span>
+			{/each}
+
+			<!-- Current month days -->
+			{#each Array(daysInMonth) as _, i}
+				{@const day = i + 1}
+				{@const dayDisabled = isDateDisabled(viewYear, viewMonth, day)}
+				{@const daySelected = isSelected(viewYear, viewMonth, day)}
+				{@const dayToday = isToday(viewYear, viewMonth, day)}
+				{@const dayFocused = day === focusedDay}
+				<button
+					type="button"
+					class={cn(
+						'sx-calendar-day',
+						daySelected && 'sx-calendar-day-selected',
+						dayToday && !daySelected && 'sx-calendar-day-today',
+						dayFocused && 'sx-calendar-day-focused',
+						dayDisabled && 'sx-calendar-day-disabled'
+					)}
+					disabled={dayDisabled}
+					tabindex={dayFocused ? 0 : -1}
+					aria-current={dayToday ? 'date' : undefined}
+					onclick={() => selectDay(day)}
+				>
+					{day}
+				</button>
+			{/each}
+		</div>
+
+		<!-- Footer -->
+		<div class="sx-calendar-footer">
+			<button type="button" class="sx-calendar-today-btn" onclick={selectToday}>
+				Today
+			</button>
+			{#if value}
+				<button type="button" class="sx-calendar-clear-btn" onclick={() => { value = ''; hasInteracted = true; onchange?.(''); close(); triggerEl?.focus(); }}>
+					Clear
+				</button>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.sx-datepicker {
+		display: flex;
+		flex-direction: column;
+		gap: var(--sx-space-1);
+		font-family: var(--sx-font-body);
+	}
+
+	.sx-datepicker-disabled { opacity: 0.5; }
+
+	.sx-datepicker-label {
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-datepicker-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;
+	}
+
+	/* Trigger */
+	.sx-datepicker-trigger {
+		display: flex;
+		align-items: center;
+		gap: var(--sx-space-2);
+		width: 100%;
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		background: var(--sx-color-surface);
+		color: var(--sx-color-text);
+		font-family: var(--sx-font-body);
+		font-weight: 500;
+		cursor: pointer;
+		text-align: left;
+		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-datepicker-trigger:hover:not(:disabled) { border-color: var(--sx-color-border-hover); }
+
+	.sx-datepicker-trigger:focus-visible {
+		outline: none;
+		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-datepicker-trigger-open {
+		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-datepicker-trigger-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-datepicker-trigger-disabled { cursor: not-allowed; box-shadow: none; }
+
+	.sx-datepicker-sm .sx-datepicker-trigger { min-height: 32px; padding: 0 var(--sx-space-3); font-size: var(--sx-text-xs); }
+	.sx-datepicker-md .sx-datepicker-trigger { min-height: 40px; padding: 0 var(--sx-space-4); font-size: var(--sx-text-sm); }
+	.sx-datepicker-lg .sx-datepicker-trigger { min-height: 48px; padding: 0 var(--sx-space-5); font-size: var(--sx-text-base); }
+
+	.sx-datepicker-icon {
+		flex-shrink: 0;
+		display: flex;
+		align-items: center;
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-datepicker-value { flex: 1; }
+	.sx-datepicker-placeholder { color: var(--sx-color-text-disabled); }
+
+	/* Footer */
+	.sx-datepicker-footer { min-height: 1.25rem; }
+	.sx-datepicker-error { font-size: var(--sx-text-xs); font-weight: 500; color: var(--sx-color-red); margin: 0; }
+	.sx-datepicker-hint { font-size: var(--sx-text-xs); color: var(--sx-color-text-secondary); margin: 0; }
+
+	/* Calendar popup */
+	.sx-calendar {
+		z-index: var(--sx-z-dropdown);
+		background: var(--sx-color-surface-2);
+		border: 1px solid var(--sx-color-border-strong);
+		border-radius: var(--sx-radius-md);
+		box-shadow: var(--sx-shadow-lg);
+		backdrop-filter: var(--sx-glass-blur);
+		-webkit-backdrop-filter: var(--sx-glass-blur);
+		padding: var(--sx-space-3);
+		font-family: var(--sx-font-body);
+		width: 280px;
+		outline: none;
+	}
+
+	.sx-calendar-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--sx-space-1);
+		margin-bottom: var(--sx-space-2);
+	}
+
+	.sx-calendar-nav {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 28px;
+		height: 28px;
+		border: none;
+		border-radius: var(--sx-radius-sm);
+		background: transparent;
+		color: var(--sx-color-text-secondary);
+		cursor: pointer;
+		transition: background var(--sx-transition-fast), color var(--sx-transition-fast);
+	}
+
+	.sx-calendar-nav:hover {
+		background: var(--sx-color-surface-3);
+		color: var(--sx-color-text);
+	}
+
+	.sx-calendar-nav:focus-visible {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 1px;
+	}
+
+	.sx-calendar-title {
+		flex: 1;
+		text-align: center;
+		font-size: var(--sx-text-sm);
+		font-weight: 600;
+		color: var(--sx-color-text);
+	}
+
+	.sx-calendar-weekdays {
+		display: grid;
+		grid-template-columns: repeat(7, 1fr);
+		margin-bottom: var(--sx-space-1);
+	}
+
+	.sx-calendar-weekday {
+		text-align: center;
+		font-size: var(--sx-text-xs);
+		font-weight: 600;
+		color: var(--sx-color-text-disabled);
+		padding: var(--sx-space-1) 0;
+	}
+
+	.sx-calendar-grid {
+		display: grid;
+		grid-template-columns: repeat(7, 1fr);
+		gap: 2px;
+	}
+
+	.sx-calendar-day {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 34px;
+		height: 34px;
+		border: none;
+		border-radius: var(--sx-radius-sm);
+		background: transparent;
+		color: var(--sx-color-text);
+		font-size: var(--sx-text-sm);
+		font-weight: 500;
+		cursor: pointer;
+		transition: background var(--sx-transition-fast), color var(--sx-transition-fast);
+	}
+
+	.sx-calendar-day:hover:not(:disabled) {
+		background: var(--sx-color-surface-3);
+	}
+
+	.sx-calendar-day:focus-visible {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: -2px;
+	}
+
+	.sx-calendar-day-focused:not(.sx-calendar-day-selected) {
+		box-shadow: inset 0 0 0 2px var(--sx-color-border-hover);
+	}
+
+	.sx-calendar-day-today {
+		color: var(--sx-color-primary);
+		font-weight: 700;
+	}
+
+	.sx-calendar-day-today::after {
+		content: '';
+		position: absolute;
+		bottom: 4px;
+		width: 4px;
+		height: 4px;
+		border-radius: 50%;
+		background: var(--sx-color-primary);
+	}
+
+	.sx-calendar-day-selected {
+		background: var(--sx-gradient-brand) !important;
+		color: #fff;
+		font-weight: 700;
+		box-shadow: 0 0 8px -2px rgba(255, 107, 53, 0.4);
+	}
+
+	.sx-calendar-day-disabled {
+		opacity: 0.3;
+		cursor: not-allowed;
+	}
+
+	.sx-calendar-day-outside {
+		color: var(--sx-color-text-disabled);
+		cursor: default;
+		pointer-events: none;
+	}
+
+	.sx-calendar-footer {
+		display: flex;
+		justify-content: center;
+		gap: var(--sx-space-2);
+		margin-top: var(--sx-space-2);
+		padding-top: var(--sx-space-2);
+		border-top: 1px solid var(--sx-color-border);
+	}
+
+	.sx-calendar-today-btn,
+	.sx-calendar-clear-btn {
+		border: none;
+		background: none;
+		font-family: var(--sx-font-body);
+		font-size: var(--sx-text-xs);
+		font-weight: 600;
+		color: var(--sx-color-primary);
+		cursor: pointer;
+		padding: var(--sx-space-1) var(--sx-space-3);
+		border-radius: var(--sx-radius-sm);
+	}
+
+	.sx-calendar-today-btn:hover,
+	.sx-calendar-clear-btn:hover {
+		background: var(--sx-color-primary-subtle);
+	}
+
+	.sx-calendar-today-btn:focus-visible,
+	.sx-calendar-clear-btn:focus-visible {
+		outline: 2px solid var(--sx-color-primary);
+		outline-offset: 1px;
+	}
+
+	.sx-calendar-clear-btn {
+		color: var(--sx-color-text-secondary);
+	}
+
+	.sx-calendar-clear-btn:hover {
+		background: var(--sx-color-surface-3);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.sx-datepicker-trigger, .sx-calendar-nav, .sx-calendar-day { transition: none; }
+	}
+</style>