@joewinke/jatui 0.41.1 → 0.43.0

package/dist/components/TimeSlotPicker.svelte

@@ -4,9 +4,31 @@
 	 *
 	 * Accepts an array of TimeSlot objects with `start` (Date), `end` (Date), and `available` (boolean).
 	 * Grouped automatically by hour: morning (<12), afternoon (<17), evening (17+).
+	 *
+	 * jatui-lfxyy upgrades (all additive):
+	 * - One `role="radiogroup"`; each slot is a `role="radio"` with `aria-checked`
+	 *   and a full accessible name ("Wednesday, March 4, 9:30 AM"). Roving focus:
+	 *   arrows move between available slots (Up/Down jump a visual row), Home/End,
+	 *   Space/Enter choose. `selectOnFocus` makes arrows choose too (radio
+	 *   default) — off by default because choosing usually advances a booking flow.
+	 * - `hourCycle` ('h12' | 'h23') and `timeZone` (IANA): times and the
+	 *   morning/afternoon/evening grouping follow the zone's wall clock.
+	 * - `timezone` snippet: a row above the slots for a zone picker / 12-24h toggle.
+	 * - The accent comes from a static token map (the old interpolated
+	 *   `bg-${accentColor}` classes were never generated by Tailwind).
 	 */
 
+	import type { Snippet } from 'svelte';
 	import type { TimeSlot } from '../types/booking';
+	import {
+		formatSlotLabel,
+		formatSlotTime,
+		groupSlotsByDayPart,
+		nextSlotIndex,
+		type DayPart,
+		type HourCycle
+	} from './calendar/timeSlots';
+	import { calendarAccentStyle } from './calendar/calendarGrid';
 
 	export type { TimeSlot };
 
@@ -16,6 +38,14 @@
 		onSelect,
 		selectedSlot = null,
 		accentColor = 'primary',
+		hourCycle = 'h12',
+		timeZone,
+		locale = 'en-US',
+		selectOnFocus = false,
+		ariaLabel = 'Available times',
+		emptyTitle = 'No Available Times',
+		emptyMessage = 'Please select a different date.',
+		timezone
 	}: {
 		slots: TimeSlot[];
 		loading?: boolean;
@@ -24,153 +54,189 @@
 		 * Compared by start-time value (not object identity) so a re-fetched
 		 * slots array still matches the selection. */
 		selectedSlot?: TimeSlot | null;
+		/** primary | secondary | accent | info | success | warning | error | neutral */
 		accentColor?: string;
+		/** 'h12' → "9:30 AM", 'h23' → "09:30". */
+		hourCycle?: HourCycle;
+		/** IANA zone the times (and their grouping) are shown in. Defaults to the runtime zone. */
+		timeZone?: string;
+		locale?: string;
+		/** Arrow keys also choose the slot they land on (strict radio behaviour). */
+		selectOnFocus?: boolean;
+		ariaLabel?: string;
+		emptyTitle?: string;
+		emptyMessage?: string;
+		/** Rendered above the slot list — a time-zone row or a 12/24h toggle. */
+		timezone?: Snippet;
 	} = $props();
 
+	const uid = `tsp-${Math.random().toString(36).slice(2, 8)}`;
+	const PART_LABEL: Record<DayPart, string> = { morning: 'Morning', afternoon: 'Afternoon', evening: 'Evening' };
+
 	const isSelected = (slot: TimeSlot): boolean =>
 		selectedSlot != null && slot.start.getTime() === selectedSlot.start.getTime();
 
-	const groupedSlots = $derived(() => {
-		const morning: TimeSlot[] = [];
-		const afternoon: TimeSlot[] = [];
-		const evening: TimeSlot[] = [];
+	const groups = $derived(groupSlotsByDayPart(slots, timeZone));
+	/** Slots in visual order (group by group) — the roving-focus sequence. */
+	const ordered = $derived(groups.flatMap((g) => g.slots));
+	const availableCount = $derived(slots.filter((s) => s.available).length);
 
-		for (const slot of slots) {
-			const hour = slot.start.getHours();
-			if (hour < 12) {
-				morning.push(slot);
-			} else if (hour < 17) {
-				afternoon.push(slot);
-			} else {
-				evening.push(slot);
-			}
-		}
+	let rootEl = $state<HTMLDivElement | null>(null);
+	let focusIndex = $state(-1);
 
-		return { morning, afternoon, evening };
+	/** The one slot in the tab order: the focused one, else the selection, else the first available. */
+	const tabIndexSlot = $derived.by(() => {
+		if (focusIndex >= 0 && ordered[focusIndex]?.available) return focusIndex;
+		const sel = ordered.findIndex((s) => s.available && isSelected(s));
+		if (sel >= 0) return sel;
+		return ordered.findIndex((s) => s.available);
 	});
 
-	function formatTime(date: Date): string {
-		return date.toLocaleTimeString('en-US', {
-			hour: 'numeric',
-			minute: '2-digit',
-			hour12: true
-		});
+	function handleSlotClick(slot: TimeSlot, index: number) {
+		focusIndex = index;
+		if (slot.available) onSelect(slot);
+	}
+
+	/** Columns in the slot's own grid row, read from layout (3 on mobile, 4 from sm). */
+	function columnsAt(el: HTMLElement): number {
+		const grid = el.parentElement;
+		if (!grid) return 1;
+		const cols = getComputedStyle(grid).gridTemplateColumns.split(' ').filter(Boolean).length;
+		return cols || 1;
 	}
 
-	function handleSlotClick(slot: TimeSlot) {
-		if (slot.available) {
-			onSelect(slot);
+	function handleKeydown(e: KeyboardEvent, index: number) {
+		if (e.key === ' ' || e.key === 'Enter') {
+			e.preventDefault();
+			const slot = ordered[index];
+			if (slot?.available) onSelect(slot);
+			return;
 		}
+		const rtl = getComputedStyle(e.currentTarget as HTMLElement).direction === 'rtl';
+		const next = nextSlotIndex(ordered, index, e.key, { columns: columnsAt(e.currentTarget as HTMLElement), rtl });
+		if (next === null) return;
+		e.preventDefault();
+		focusIndex = next;
+		rootEl?.querySelector<HTMLElement>(`[data-slot-index="${next}"]`)?.focus();
+		if (selectOnFocus && ordered[next]?.available) onSelect(ordered[next]);
 	}
 </script>
 
-<div class="time-slot-picker">
+<div class="time-slot-picker" style={calendarAccentStyle(accentColor)} bind:this={rootEl}>
+	{#if timezone}
+		<div class="time-slot-picker__tz">{@render timezone()}</div>
+	{/if}
+
 	{#if loading}
-		<div class="flex justify-center py-12">
-			<span class="loading loading-spinner loading-lg text-{accentColor}"></span>
+		<div class="flex justify-center py-12" role="status" aria-label="Loading times">
+			<span class="loading loading-spinner loading-lg time-slot-picker__spinner"></span>
 		</div>
 	{:else if slots.length === 0}
 		<div class="text-center py-12">
 			<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-base-200 flex items-center justify-center">
 				<!-- Clock icon -->
-				<svg class="w-8 h-8 text-base-content/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<svg class="w-8 h-8 text-base-content/40" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
 					<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
 				</svg>
 			</div>
-			<h3 class="text-lg font-semibold mb-2">No Available Times</h3>
-			<p class="text-base-content/60">Please select a different date.</p>
+			<h3 class="text-lg font-semibold mb-2">{emptyTitle}</h3>
+			<p class="text-base-content/60">{emptyMessage}</p>
 		</div>
 	{:else}
-		{@const { morning, afternoon, evening } = groupedSlots()}
-		{@const availableCount = slots.filter(s => s.available).length}
-
 		<p class="text-[0.8125rem] text-base-content/45 mb-4">
 			{availableCount} time{availableCount !== 1 ? 's' : ''} available
 		</p>
 
-		<div class="space-y-6">
-			{#if morning.length > 0}
-				<div>
-					<h4 class="text-[0.8125rem] text-base-content/45 mb-3 flex items-center gap-2 tracking-[0.005em]">
-						<!-- Sun icon -->
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-						</svg>
-						Morning
+		<div class="space-y-6" role="radiogroup" aria-label={ariaLabel}>
+			{#each groups as group (group.part)}
+				{@const offset = ordered.indexOf(group.slots[0])}
+				<div role="group" aria-labelledby="{uid}-{group.part}">
+					<h4 id="{uid}-{group.part}" class="text-[0.8125rem] text-base-content/45 mb-3 flex items-center gap-2 tracking-[0.005em]">
+						{#if group.part === 'evening'}
+							<!-- Moon icon -->
+							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+							</svg>
+						{:else}
+							<!-- Sun icon -->
+							<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+								<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+							</svg>
+						{/if}
+						{PART_LABEL[group.part]}
 					</h4>
 					<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
-						{#each morning as slot}
+						{#each group.slots as slot, j (slot.start.getTime())}
+							{@const index = offset + j}
 							<button
-								onclick={() => handleSlotClick(slot)}
-								disabled={!slot.available}
-								class="py-3 px-4 rounded-lg text-[0.9375rem] font-medium transition-all duration-200
-									{slot.available
-										? isSelected(slot)
-											? `bg-${accentColor} text-${accentColor}-content ring-2 ring-${accentColor} ring-offset-2 ring-offset-base-100 font-semibold`
-											: `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
-										: 'bg-base-200/20 text-base-content/30 cursor-not-allowed line-through'}"
+								type="button"
+								role="radio"
+								aria-checked={isSelected(slot)}
+								aria-disabled={!slot.available ? 'true' : undefined}
+								aria-label="{formatSlotLabel(slot.start, { hourCycle, timeZone, locale })}{slot.available ? '' : ', unavailable'}"
+								tabindex={index === tabIndexSlot ? 0 : -1}
+								data-slot-index={index}
+								onclick={() => handleSlotClick(slot, index)}
+								onkeydown={(e) => handleKeydown(e, index)}
+								onfocus={() => (focusIndex = index)}
+								class="time-slot-picker__slot py-3 px-4 rounded-lg text-[0.9375rem] font-medium tabular-nums"
+								class:is-selected={slot.available && isSelected(slot)}
+								class:is-unavailable={!slot.available}
 							>
-								{formatTime(slot.start)}
+								{formatSlotTime(slot.start, { hourCycle, timeZone, locale })}
 							</button>
 						{/each}
 					</div>
 				</div>
-			{/if}
-
-			{#if afternoon.length > 0}
-				<div>
-					<h4 class="text-[0.8125rem] text-base-content/45 mb-3 flex items-center gap-2 tracking-[0.005em]">
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
-						</svg>
-						Afternoon
-					</h4>
-					<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
-						{#each afternoon as slot}
-							<button
-								onclick={() => handleSlotClick(slot)}
-								disabled={!slot.available}
-								class="py-3 px-4 rounded-lg text-[0.9375rem] font-medium transition-all duration-200
-									{slot.available
-										? isSelected(slot)
-											? `bg-${accentColor} text-${accentColor}-content ring-2 ring-${accentColor} ring-offset-2 ring-offset-base-100 font-semibold`
-											: `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
-										: 'bg-base-200/20 text-base-content/30 cursor-not-allowed line-through'}"
-							>
-								{formatTime(slot.start)}
-							</button>
-						{/each}
-					</div>
-				</div>
-			{/if}
-
-			{#if evening.length > 0}
-				<div>
-					<h4 class="text-[0.8125rem] text-base-content/45 mb-3 flex items-center gap-2 tracking-[0.005em]">
-						<!-- Moon icon -->
-						<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-							<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
-						</svg>
-						Evening
-					</h4>
-					<div class="grid grid-cols-3 sm:grid-cols-4 gap-2">
-						{#each evening as slot}
-							<button
-								onclick={() => handleSlotClick(slot)}
-								disabled={!slot.available}
-								class="py-3 px-4 rounded-lg text-[0.9375rem] font-medium transition-all duration-200
-									{slot.available
-										? isSelected(slot)
-											? `bg-${accentColor} text-${accentColor}-content ring-2 ring-${accentColor} ring-offset-2 ring-offset-base-100 font-semibold`
-											: `bg-base-200/50 hover:bg-${accentColor} hover:text-${accentColor}-content`
-										: 'bg-base-200/20 text-base-content/30 cursor-not-allowed line-through'}"
-							>
-								{formatTime(slot.start)}
-							</button>
-						{/each}
-					</div>
-				</div>
-			{/if}
+			{/each}
 		</div>
 	{/if}
 </div>
+
+<style>
+	.time-slot-picker {
+		--_accent: var(--jatui-cal-accent, var(--jatui-selection-solid, var(--color-primary)));
+		--_accent-fg: var(--jatui-cal-accent-fg, var(--jatui-selection-solid-fg, var(--color-primary-content)));
+	}
+	.time-slot-picker__tz {
+		margin-block-end: 0.75rem;
+	}
+	.time-slot-picker__spinner {
+		color: var(--_accent);
+	}
+	.time-slot-picker__slot {
+		background: color-mix(in oklab, var(--color-base-200) 50%, transparent);
+		color: var(--color-base-content);
+		cursor: pointer;
+		transition:
+			background-color var(--motion-fast, 150ms) var(--motion-standard, ease),
+			color var(--motion-fast, 150ms) var(--motion-standard, ease);
+	}
+	.time-slot-picker__slot:hover:not(.is-unavailable):not(.is-selected) {
+		background: var(--_accent);
+		color: var(--_accent-fg);
+	}
+	.time-slot-picker__slot:focus-visible {
+		outline: var(--jatui-focus-ring-width, 2px) solid var(--jatui-focus-ring, var(--color-primary));
+		outline-offset: var(--jatui-focus-ring-offset, 2px);
+	}
+	.time-slot-picker__slot.is-selected {
+		background: var(--_accent);
+		color: var(--_accent-fg);
+		font-weight: 600;
+		box-shadow:
+			0 0 0 2px var(--color-base-100),
+			0 0 0 4px var(--_accent);
+	}
+	.time-slot-picker__slot.is-unavailable {
+		background: color-mix(in oklab, var(--color-base-200) 20%, transparent);
+		color: color-mix(in oklab, var(--color-base-content) 30%, transparent);
+		cursor: not-allowed;
+		text-decoration: line-through;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.time-slot-picker__slot {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/TimeSlotPicker.svelte.d.ts

@@ -3,8 +3,22 @@
      *
      * Accepts an array of TimeSlot objects with `start` (Date), `end` (Date), and `available` (boolean).
      * Grouped automatically by hour: morning (<12), afternoon (<17), evening (17+).
+     *
+     * jatui-lfxyy upgrades (all additive):
+     * - One `role="radiogroup"`; each slot is a `role="radio"` with `aria-checked`
+     *   and a full accessible name ("Wednesday, March 4, 9:30 AM"). Roving focus:
+     *   arrows move between available slots (Up/Down jump a visual row), Home/End,
+     *   Space/Enter choose. `selectOnFocus` makes arrows choose too (radio
+     *   default) — off by default because choosing usually advances a booking flow.
+     * - `hourCycle` ('h12' | 'h23') and `timeZone` (IANA): times and the
+     *   morning/afternoon/evening grouping follow the zone's wall clock.
+     * - `timezone` snippet: a row above the slots for a zone picker / 12-24h toggle.
+     * - The accent comes from a static token map (the old interpolated
+     *   `bg-${accentColor}` classes were never generated by Tailwind).
      */
+import type { Snippet } from 'svelte';
 import type { TimeSlot } from '../types/booking';
+import { type HourCycle } from './calendar/timeSlots';
 type $$ComponentProps = {
     slots: TimeSlot[];
     loading?: boolean;
@@ -13,7 +27,20 @@ type $$ComponentProps = {
      * Compared by start-time value (not object identity) so a re-fetched
      * slots array still matches the selection. */
     selectedSlot?: TimeSlot | null;
+    /** primary | secondary | accent | info | success | warning | error | neutral */
     accentColor?: string;
+    /** 'h12' → "9:30 AM", 'h23' → "09:30". */
+    hourCycle?: HourCycle;
+    /** IANA zone the times (and their grouping) are shown in. Defaults to the runtime zone. */
+    timeZone?: string;
+    locale?: string;
+    /** Arrow keys also choose the slot they land on (strict radio behaviour). */
+    selectOnFocus?: boolean;
+    ariaLabel?: string;
+    emptyTitle?: string;
+    emptyMessage?: string;
+    /** Rendered above the slot list — a time-zone row or a 12/24h toggle. */
+    timezone?: Snippet;
 };
 declare const TimeSlotPicker: import("svelte").Component<$$ComponentProps, {
     TimeSlot: typeof TimeSlot;

package/dist/components/basic/Alert.svelte

@@ -1,12 +1,42 @@
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { motionScale } from '../../motion/transitions';
+	import CloseButton from '../CloseButton.svelte';
+
 	interface Props {
 		type?: 'info' | 'success' | 'warning' | 'error';
 		title?: string;
 		class?: string;
-		children?: import('svelte').Snippet;
+		children?: Snippet;
+		/** Show a Dismiss (×) button. The alert exits, then `onClose` fires. */
+		dismissible?: boolean;
+		/** Fired after the dismiss exit transition has finished. */
+		onClose?: () => void;
+		/** Call-to-action area (buttons/links). Full-width in `variant="card"`. */
+		action?: Snippet;
+		/**
+		 * Delay (ms) before the alert enters — lets surrounding UI settle first.
+		 * Reduced motion: it still waits, then appears without animating.
+		 */
+		introDelay?: number;
+		/** 'card' = vertical, sidebar-density layout: icon on top, title, text, CTA. */
+		variant?: 'default' | 'card';
+		/** Accessible label for the dismiss button. */
+		dismissLabel?: string;
 	}
 
-	let { type = 'info', title, class: className = '', children }: Props = $props();
+	let {
+		type = 'info',
+		title,
+		class: className = '',
+		children,
+		dismissible = false,
+		onClose,
+		action,
+		introDelay = 0,
+		variant = 'default',
+		dismissLabel = 'Dismiss'
+	}: Props = $props();
 
 	const typeClass = $derived(
 		{ info: 'alert-info', success: 'alert-success', warning: 'alert-warning', error: 'alert-error' }[type]
@@ -18,19 +48,86 @@
 		warning: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z',
 		error: 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z'
 	};
+
+	// introDelay: start hidden, enter after the delay (the `in:` transition only
+	// plays on a toggle, never on first render — so no delay means no intro).
+	let visible = $state(introDelay <= 0);
+	$effect(() => {
+		if (visible || introDelay <= 0) return;
+		const t = setTimeout(() => (visible = true), introDelay);
+		return () => clearTimeout(t);
+	});
+
+	function dismiss() {
+		visible = false;
+	}
 </script>
 
-<div
-	class="alert {typeClass} {className}"
-	role={type === 'error' ? 'alert' : 'status'}
->
-	<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-		<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icons[type]} />
-	</svg>
-	<div>
-		{#if title}
-			<h3 class="font-bold">{title}</h3>
-		{/if}
-		{#if children}{@render children()}{/if}
-	</div>
-</div>
+{#snippet closeButton(extra: string)}
+	<CloseButton
+		label={dismissLabel}
+		size="xs"
+		shape="square"
+		class="jatui-alert-close {extra}"
+		onclick={dismiss}
+	/>
+{/snippet}
+
+<!-- `{#if visible}` wraps each element directly: transitions are local, so
+     they only play when their IMMEDIATE block toggles. -->
+{#if variant === 'card'}
+	{#if visible}
+		<div
+			class="alert {typeClass} jatui-alert-card relative flex flex-col items-start gap-2 text-start {dismissible ? 'pe-10' : ''} {className}"
+			role={type === 'error' ? 'alert' : 'status'}
+			in:motionScale={{ start: 0.95 }}
+			out:motionScale={{ start: 0.85 }}
+			onoutroend={() => onClose?.()}
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icons[type]} />
+			</svg>
+			<div class="w-full min-w-0">
+				{#if title}
+					<h3 class="font-bold">{title}</h3>
+				{/if}
+				{#if children}<div class="text-sm opacity-80">{@render children()}</div>{/if}
+			</div>
+			{#if action}
+				<div class="jatui-alert-action jatui-alert-action--full w-full">{@render action()}</div>
+			{/if}
+			{#if dismissible}{@render closeButton('absolute top-2 end-2')}{/if}
+		</div>
+	{/if}
+{:else}
+	{#if visible}
+		<div
+			class="alert {typeClass} {className}"
+			role={type === 'error' ? 'alert' : 'status'}
+			in:motionScale={{ start: 0.95 }}
+			out:motionScale={{ start: 0.85 }}
+			onoutroend={() => onClose?.()}
+		>
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={icons[type]} />
+			</svg>
+			<div>
+				{#if title}
+					<h3 class="font-bold">{title}</h3>
+				{/if}
+				{#if children}{@render children()}{/if}
+			</div>
+			{#if action}
+				<div class="jatui-alert-action flex flex-wrap items-center gap-2">{@render action()}</div>
+			{/if}
+			{#if dismissible}{@render closeButton('')}{/if}
+		</div>
+	{/if}
+{/if}
+
+<style>
+	/* Full-width CTA in the card layout: stretch any direct button/link child. */
+	.jatui-alert-action--full > :global(*) {
+		width: 100%;
+	}
+</style>

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

@@ -1,8 +1,24 @@
+import type { Snippet } from 'svelte';
 interface Props {
     type?: 'info' | 'success' | 'warning' | 'error';
     title?: string;
     class?: string;
-    children?: import('svelte').Snippet;
+    children?: Snippet;
+    /** Show a Dismiss (×) button. The alert exits, then `onClose` fires. */
+    dismissible?: boolean;
+    /** Fired after the dismiss exit transition has finished. */
+    onClose?: () => void;
+    /** Call-to-action area (buttons/links). Full-width in `variant="card"`. */
+    action?: Snippet;
+    /**
+     * Delay (ms) before the alert enters — lets surrounding UI settle first.
+     * Reduced motion: it still waits, then appears without animating.
+     */
+    introDelay?: number;
+    /** 'card' = vertical, sidebar-density layout: icon on top, title, text, CTA. */
+    variant?: 'default' | 'card';
+    /** Accessible label for the dismiss button. */
+    dismissLabel?: string;
 }
 declare const Alert: import("svelte").Component<Props, {}, "">;
 type Alert = ReturnType<typeof Alert>;

package/dist/components/basic/Checkbox.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import CheckGlyph from '../form-cards/CheckGlyph.svelte';
 
 	/**
 	 * Any other native attribute (aria-label, aria-describedby, data-*, title,
@@ -25,6 +26,12 @@
 		id?: string;
 		onchange?: (checked: boolean) => void;
 		class?: string;
+		/**
+		 * Draw the box with the shared `CheckGlyph` (the same one `CheckboxCard`
+		 * uses) and draw the tick on when the user checks it. The native input
+		 * stays in the DOM, visually hidden, so keys, forms and AT are unchanged.
+		 */
+		animated?: boolean;
 	}
 
 	let {
@@ -38,9 +45,14 @@
 		id,
 		onchange,
 		class: className = '',
+		animated = false,
 		...rest
 	}: Props = $props();
 
+	// Only animate the tick after the user has changed the box, so a box that
+	// renders pre-checked shows its tick at rest instead of drawing it on load.
+	let interacted = $state(false);
+
 	const sizeClass = $derived({ xs: 'checkbox-xs', sm: 'checkbox-sm', md: '', lg: 'checkbox-lg' }[size]);
 	const variantClass = $derived(
 		{
@@ -68,11 +80,32 @@
 
 	function handleChange(e: Event) {
 		checked = (e.target as HTMLInputElement).checked;
+		interacted = true;
 		onchange?.(checked);
 	}
 </script>
 
-{#if label}
+{#if animated}
+	<label
+		class="jatui-checkbox-target jatui-checkbox-animated {label ? 'jatui-checkbox-row' : 'jatui-checkbox-bare'} {className}"
+		class:jatui-checkbox-disabled={disabled}
+		for={inputId}
+	>
+		<input
+			{...rest}
+			bind:this={inputEl}
+			type="checkbox"
+			{name}
+			id={inputId}
+			class="jatui-checkbox-native"
+			checked={checked}
+			{disabled}
+			onchange={handleChange}
+		/>
+		<CheckGlyph {checked} {indeterminate} {disabled} {size} {variant} animate={interacted} />
+		{#if label}<span class="label-text">{label}</span>{/if}
+	</label>
+{:else if label}
 	<label class="jatui-checkbox-target jatui-checkbox-row" for={inputId}>
 		<input
 			{...rest}
@@ -114,6 +147,25 @@
 		display: flex;
 		gap: 0.5rem;
 	}
+	/* animated: the native input is visually hidden but stays focusable */
+	.jatui-checkbox-animated {
+		position: relative;
+	}
+	.jatui-checkbox-native {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: 0;
+		opacity: 0;
+		pointer-events: none;
+	}
+	.jatui-checkbox-animated:has(.jatui-checkbox-native:focus-visible) :global(.jatui-check-glyph) {
+		outline: 2px solid color-mix(in oklch, var(--color-primary) 65%, transparent);
+		outline-offset: 2px;
+	}
+	.jatui-checkbox-disabled {
+		cursor: not-allowed;
+	}
 	.jatui-checkbox-bare {
 		display: inline-flex;
 		justify-content: center;

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

@@ -19,6 +19,12 @@ interface Props extends Omit<HTMLInputAttributes, 'type' | 'checked' | 'size' |
     id?: string;
     onchange?: (checked: boolean) => void;
     class?: string;
+    /**
+     * Draw the box with the shared `CheckGlyph` (the same one `CheckboxCard`
+     * uses) and draw the tick on when the user checks it. The native input
+     * stays in the DOM, visually hidden, so keys, forms and AT are unchanged.
+     */
+    animated?: boolean;
 }
 declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;