@noahbaumgartner/svelte-ui 0.0.5 → 0.0.6

package/dist/components/time-picker/TimePicker.svelte

@@ -1,3 +1,16 @@
+<script module lang="ts">
+	export type TimePickerLabels = {
+		/** Accessible name of the hours column. */
+		hours?: string;
+		/** Accessible name of the minutes column. */
+		minutes?: string;
+		/** Accessible name of the AM/PM column. */
+		period?: string;
+		am?: string;
+		pm?: string;
+	};
+</script>
+
 <script lang="ts">
 	import { tick } from 'svelte';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -7,37 +20,96 @@
 		value?: string;
 		/** Minutes between the offered values. */
 		minuteStep?: number;
+		/** BCP 47 tag used for numerals, AM/PM text and the 12/24-hour default. Without it the picker shows 24 hours. */
+		locale?: string;
+		/** Forces 12-hour (`true`) or 24-hour (`false`) columns, overriding the locale. */
+		hour12?: boolean;
+		/** Accessible names of the columns and the AM/PM text. */
+		labels?: TimePickerLabels;
 		onselect?: (value: string) => void;
+		ref?: HTMLDivElement | null;
 	};
 
 	let {
 		value = $bindable(''),
 		minuteStep = 1,
+		locale,
+		hour12,
+		labels,
 		onselect,
+		ref = $bindable(null),
 		class: className,
 		...rest
 	}: Props = $props();
 
-	const pad = (n: number) => String(n).padStart(2, '0');
-	const hours = Array.from({ length: 24 }, (_, i) => i);
-	let minutes = $derived(
-		Array.from(
-			{ length: Math.ceil(60 / Math.max(1, minuteStep)) },
-			(_, i) => i * Math.max(1, minuteStep)
-		)
+	type Column = 'hour' | 'minute' | 'period';
+	type Entry = { id: number; text: string };
+
+	let twelve = $derived(
+		hour12 ??
+			(locale !== undefined &&
+				['h11', 'h12'].includes(
+					new Intl.DateTimeFormat(locale, { hour: 'numeric' }).resolvedOptions().hourCycle ?? ''
+				))
 	);
 
+	let format = $derived(
+		new Intl.NumberFormat(locale, { minimumIntegerDigits: 2, useGrouping: false }).format
+	);
+	let formatPlain = $derived(new Intl.NumberFormat(locale, { useGrouping: false }).format);
+
+	function dayPeriod(hour: number, fallback: string) {
+		if (locale === undefined) return fallback;
+		return (
+			new Intl.DateTimeFormat(locale, { hour: 'numeric', hour12: true })
+				.formatToParts(new Date(2000, 0, 1, hour))
+				.find((part) => part.type === 'dayPeriod')?.value ?? fallback
+		);
+	}
+
+	let hoursLabel = $derived(labels?.hours ?? 'Hours');
+	let minutesLabel = $derived(labels?.minutes ?? 'Minutes');
+	let periodLabel = $derived(labels?.period ?? 'AM/PM');
+	let amLabel = $derived(labels?.am ?? dayPeriod(9, 'AM'));
+	let pmLabel = $derived(labels?.pm ?? dayPeriod(15, 'PM'));
+
+	let hourEntries: Entry[] = $derived(
+		twelve
+			? Array.from({ length: 12 }, (_, i) => {
+					const id = i === 0 ? 12 : i;
+					return { id, text: formatPlain(id) };
+				})
+			: Array.from({ length: 24 }, (_, i) => ({ id: i, text: format(i) }))
+	);
+	let minuteEntries: Entry[] = $derived(
+		Array.from({ length: Math.ceil(60 / Math.max(1, minuteStep)) }, (_, i) => {
+			const id = i * Math.max(1, minuteStep);
+			return { id, text: format(id) };
+		})
+	);
+	let periodEntries: Entry[] = $derived([
+		{ id: 0, text: amLabel },
+		{ id: 1, text: pmLabel }
+	]);
+
 	let hour = $derived(value ? Number(value.slice(0, 2)) : undefined);
 	let minute = $derived(value ? Number(value.slice(3, 5)) : undefined);
+	let period = $derived(hour === undefined ? undefined : hour >= 12 ? 1 : 0);
+	let shownHour = $derived(hour === undefined ? undefined : twelve ? hour % 12 || 12 : hour);
 
-	let hoursEl: HTMLElement | undefined = $state();
-	let minutesEl: HTMLElement | undefined = $state();
+	let columnEls: Partial<Record<Column, HTMLElement>> = $state({});
 
 	function set(nextHour: number, nextMinute: number) {
-		value = `${pad(nextHour)}:${pad(nextMinute)}`;
+		value = `${String(nextHour).padStart(2, '0')}:${String(nextMinute).padStart(2, '0')}`;
 		onselect?.(value);
 	}
 
+	function choose(column: Column, id: number) {
+		if (column === 'minute') return set(hour ?? 0, id);
+		if (column === 'period') return set(((hour ?? 0) % 12) + id * 12, minute ?? 0);
+		set(twelve ? (id % 12) + (period ?? 0) * 12 : id, minute ?? 0);
+	}
+
 	function center(column: HTMLElement | undefined) {
 		const item = column?.querySelector<HTMLElement>('[tabindex="0"]');
 		if (column && item)
@@ -47,14 +119,16 @@
 	$effect(() => {
 		void value;
 		tick().then(() => {
-			center(hoursEl);
-			center(minutesEl);
+			center(columnEls.hour);
+			center(columnEls.minute);
 		});
 	});
 
-	async function handleKeydown(event: KeyboardEvent, column: 'hour' | 'minute') {
-		const list = column === 'hour' ? hours : minutes;
-		const current = list.indexOf((column === 'hour' ? hour : minute) ?? list[0]);
+	async function handleKeydown(event: KeyboardEvent, column: Column) {
+		const list = { hour: hourEntries, minute: minuteEntries, period: periodEntries }[column];
+		const selected = { hour: shownHour, minute, period }[column];
+		const found = list.findIndex((entry) => entry.id === (selected ?? list[0].id));
+		const current = found === -1 ? 0 : found;
 		const next = {
 			ArrowUp: current - 1,
 			ArrowDown: current + 1,
@@ -64,99 +138,154 @@
 		if (next === undefined) return;
 
 		event.preventDefault();
-		const clamped = list[Math.min(list.length - 1, Math.max(0, next))];
-		if (column === 'hour') set(clamped, minute ?? 0);
-		else set(hour ?? 0, clamped);
+		choose(column, list[Math.min(list.length - 1, Math.max(0, next))].id);
 		await tick();
-		(column === 'hour' ? hoursEl : minutesEl)
-			?.querySelector<HTMLElement>('[tabindex="0"]')
-			?.focus();
+		columnEls[column]?.querySelector<HTMLElement>('[tabindex="0"]')?.focus();
 	}
 </script>
 
-{#snippet columnItems(list: number[], current: number | undefined, column: 'hour' | 'minute')}
-	{#each list as item, i (item)}
+{#snippet columnItems(list: Entry[], current: number | undefined, column: Column)}
+	{#each list as item, i (item.id)}
 		<button
 			type="button"
-			class={['time-picker-item', { 'time-picker-item--selected': item === current }]}
-			tabindex={item === current || (current === undefined && i === 0) ? 0 : -1}
-			aria-pressed={item === current}
-			onclick={() => (column === 'hour' ? set(item, minute ?? 0) : set(hour ?? 0, item))}
+			class={['time-picker-item', { 'time-picker-item--selected': item.id === current }]}
+			tabindex={item.id === current || (current === undefined && i === 0) ? 0 : -1}
+			aria-pressed={item.id === current}
+			onclick={() => choose(column, item.id)}
 			onkeydown={(event) => handleKeydown(event, column)}
 		>
-			{pad(item)}
+			{item.text}
 		</button>
 	{/each}
 {/snippet}
 
-<div {...rest} class={['time-picker', className]}>
-	<div class="time-picker-column" role="group" aria-label="Hours" bind:this={hoursEl}>
-		{@render columnItems(hours, hour, 'hour')}
+<div {...rest} bind:this={ref} class={['time-picker', className]}>
+	<div class="time-picker-column" role="group" aria-label={hoursLabel} bind:this={columnEls.hour}>
+		{@render columnItems(hourEntries, shownHour, 'hour')}
 	</div>
-	<div class="time-picker-column" role="group" aria-label="Minutes" bind:this={minutesEl}>
-		{@render columnItems(minutes, minute, 'minute')}
+	<div
+		class="time-picker-column"
+		role="group"
+		aria-label={minutesLabel}
+		bind:this={columnEls.minute}
+	>
+		{@render columnItems(minuteEntries, minute, 'minute')}
 	</div>
+	{#if twelve}
+		<div
+			class="time-picker-column"
+			role="group"
+			aria-label={periodLabel}
+			bind:this={columnEls.period}
+		>
+			{@render columnItems(periodEntries, period, 'period')}
+		</div>
+	{/if}
 </div>
 
 <style>
-	.time-picker {
-		display: flex;
-		gap: 4px;
-		height: 232px;
-		font-size: 13px;
-		color: var(--color-text);
-		user-select: none;
-	}
+	@layer svelte-ui {
+		.time-picker {
+			display: flex;
+			gap: 4px;
+			height: 232px;
+			font-size: 13px;
+			color: var(--color-text);
+			user-select: none;
+		}
 
-	.time-picker-column {
-		display: flex;
-		flex-direction: column;
-		gap: 2px;
-		width: 48px;
-		padding: 0 2px;
-		overflow-y: auto;
-		scrollbar-width: none;
-		scroll-snap-type: y proximity;
-	}
+		.time-picker-column {
+			display: flex;
+			flex-direction: column;
+			gap: 2px;
+			width: 48px;
+			padding: 0 2px;
+			overflow-y: auto;
+			scrollbar-width: none;
+			scroll-snap-type: y proximity;
+		}
 
-	.time-picker-column + .time-picker-column {
-		padding-left: 6px;
-		border-left: 1px solid var(--color-border);
-	}
+		.time-picker-column + .time-picker-column {
+			padding-left: 6px;
+			border-left: 1px solid var(--color-border);
+		}
 
-	.time-picker-item {
-		flex-shrink: 0;
-		height: 28px;
-		padding: 0;
-		font-family: inherit;
-		font-size: 13px;
-		font-variant-numeric: tabular-nums;
-		color: var(--color-text);
-		background-color: transparent;
-		border: none;
-		border-radius: 8px;
-		outline: none;
-		cursor: pointer;
-		scroll-snap-align: center;
-		transition: background-color 200ms ease;
-	}
+		.time-picker-item {
+			flex-shrink: 0;
+			height: 28px;
+			padding: 0;
+			font-family: inherit;
+			font-size: 13px;
+			font-variant-numeric: tabular-nums;
+			color: var(--color-text);
+			background-color: transparent;
+			border: none;
+			border-radius: 8px;
+			outline: none;
+			cursor: pointer;
+			scroll-snap-align: center;
+			transition: background-color 200ms ease;
+		}
 
-	.time-picker-item:hover {
-		background-color: var(--color-surface);
-	}
+		.time-picker-item:hover {
+			background-color: var(--color-surface);
+		}
 
-	.time-picker-item:focus-visible {
-		outline: 2px solid var(--color-accent);
-		outline-offset: -2px;
-	}
+		.time-picker-item:focus-visible {
+			outline: 2px solid var(--color-accent);
+			outline-offset: -2px;
+		}
 
-	.time-picker-item--selected,
-	.time-picker-item--selected:hover {
-		color: var(--color-accent-foreground);
-		background-color: var(--color-accent);
-	}
+		.time-picker-item--selected,
+		.time-picker-item--selected:hover {
+			color: var(--color-accent-foreground);
+			background-color: var(--color-accent);
+		}
+
+		.time-picker-item--selected:focus-visible {
+			outline-color: var(--color-accent-foreground);
+		}
+
+		@media (pointer: coarse) {
+			.time-picker-column {
+				width: 56px;
+			}
+
+			.time-picker-item {
+				min-height: 44px;
+			}
+		}
+
+		@media (forced-colors: active) {
+			.time-picker-item {
+				color: ButtonText;
+			}
+
+			.time-picker-item--selected,
+			.time-picker-item--selected:hover {
+				color: HighlightText;
+				background-color: Highlight;
+			}
+
+			.time-picker-item:hover:not(.time-picker-item--selected) {
+				outline: 1px solid Highlight;
+				outline-offset: -1px;
+			}
+
+			.time-picker-item:focus-visible,
+			.time-picker-item--selected:focus-visible {
+				outline: 2px solid CanvasText;
+			}
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.time-picker-item {
+				transition: none;
+			}
 
-	.time-picker-item--selected:focus-visible {
-		outline-color: var(--color-accent-foreground);
+			.time-picker-column {
+				scroll-behavior: auto;
+			}
+		}
 	}
 </style>

package/dist/components/time-picker/TimePicker.svelte.d.ts

@@ -1,11 +1,28 @@
+export type TimePickerLabels = {
+    /** Accessible name of the hours column. */
+    hours?: string;
+    /** Accessible name of the minutes column. */
+    minutes?: string;
+    /** Accessible name of the AM/PM column. */
+    period?: string;
+    am?: string;
+    pm?: string;
+};
 import type { HTMLAttributes } from 'svelte/elements';
 type Props = Omit<HTMLAttributes<HTMLDivElement>, 'onselect'> & {
     /** Bindable, `HH:MM` in 24-hour time like `<input type="time">`. */
     value?: string;
     /** Minutes between the offered values. */
     minuteStep?: number;
+    /** BCP 47 tag used for numerals, AM/PM text and the 12/24-hour default. Without it the picker shows 24 hours. */
+    locale?: string;
+    /** Forces 12-hour (`true`) or 24-hour (`false`) columns, overriding the locale. */
+    hour12?: boolean;
+    /** Accessible names of the columns and the AM/PM text. */
+    labels?: TimePickerLabels;
     onselect?: (value: string) => void;
+    ref?: HTMLDivElement | null;
 };
-declare const TimePicker: import("svelte").Component<Props, {}, "value">;
+declare const TimePicker: import("svelte").Component<Props, {}, "ref" | "value">;
 type TimePicker = ReturnType<typeof TimePicker>;
 export default TimePicker;

package/dist/components/toaster/Toaster.svelte

@@ -1,16 +1,49 @@
+<script module lang="ts">
+	export type ToasterLabels = {
+		/** Accessible name of the notification region. */
+		region?: string;
+		/** Hint shown on a toast that closes when clicked. */
+		dismiss?: string;
+	};
+</script>
+
 <script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
 	import type { Attachment } from 'svelte/attachments';
 	import { fly } from 'svelte/transition';
 	import Button from '../button/Button.svelte';
 	import Spinner from '../spinner/Spinner.svelte';
 	import { toast, toasts, type ToastData } from './toast.svelte.js';
 
-	type Props = {
-		/** Accessible name of the notification region. */
+	type Props = Omit<HTMLAttributes<HTMLOListElement>, 'children'> & {
+		/** Accessible name of the notification region. Shorthand for `labels.region`. */
 		label?: string;
+		/** Texts of the region. */
+		labels?: ToasterLabels;
+		/** BCP 47 tag of the toast messages; sets `lang` on the region. */
+		locale?: string;
+		/** Replaces the message of each toast. */
+		message?: Snippet<[toast: ToastData]>;
+		ref?: HTMLOListElement | null;
 	};
 
-	let { label = 'Notifications' }: Props = $props();
+	let {
+		label,
+		labels,
+		locale,
+		message,
+		ref = $bindable(null),
+		class: className,
+		...rest
+	}: Props = $props();
+
+	const regionLabel = $derived(label ?? labels?.region ?? 'Notifications');
+	const dismissLabel = $derived(labels?.dismiss ?? 'Dismiss');
+
+	function reducedMotion() {
+		return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+	}
 
 	// Hovering or focusing the toast pauses its timer; they restart on leave.
 	let paused = $state(false);
@@ -23,11 +56,13 @@
 	};
 
 	const exitDuration = 150;
+	const enterDuration = 200;
 
 	// Waits for the outgoing toast, still in the DOM, to slide out first.
 	function enter(node: HTMLElement) {
 		const replacing = node.parentElement!.childElementCount > 1;
-		return fly(node, { y: 24, duration: 200, delay: replacing ? exitDuration : 0 });
+		if (reducedMotion()) return fly(node, { y: 0, duration: 0 });
+		return fly(node, { y: 24, duration: enterDuration, delay: replacing ? exitDuration : 0 });
 	}
 
 	function timer(data: ToastData): Attachment {
@@ -41,8 +76,11 @@
 </script>
 
 <ol
-	class="toaster"
-	aria-label={label}
+	{...rest}
+	bind:this={ref}
+	class={['toaster', className]}
+	lang={locale}
+	aria-label={regionLabel}
 	aria-live="polite"
 	popover="manual"
 	onpointerenter={() => (paused = true)}
@@ -56,18 +94,21 @@
 		<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_noninteractive_element_interactions -->
 		<li
 			class="toast"
+			title={dismissLabel}
 			onclick={() => toast.dismiss(data.id)}
 			aria-busy={data.loading || undefined}
 			{@attach timer(data)}
 			in:enter
-			out:fly={{ y: 24, duration: exitDuration }}
+			out:fly={{ y: 24, duration: reducedMotion() ? 0 : exitDuration }}
 		>
 			{#if data.loading}
 				<Spinner class="toast-spinner" aria-hidden="true" />
 			{:else if data.icon}
 				<data.icon class="toast-icon" aria-hidden="true" />
 			{/if}
-			<span class="toast-message">{data.message}</span>
+			<span class="toast-message">
+				{#if message}{@render message(data)}{:else}{data.message}{/if}
+			</span>
 			{#if data.action}
 				{@const action = data.action}
 				<Button class="toast-action" variant="secondary" size="sm" onclick={action.onclick}>
@@ -79,73 +120,94 @@
 </ol>
 
 <style>
-	.toaster {
-		position: fixed;
-		inset: auto 0 16px;
-		/* One cell: the outgoing toast overlaps the incoming one instead of stacking */
-		display: grid;
-		/* minmax(0, …) keeps a long message from widening the column past the screen */
-		grid-template-columns: minmax(0, 1fr);
-		justify-items: center;
-		align-items: end;
-		width: auto;
-		height: auto;
-		margin: 0;
-		padding: 0 16px;
-		overflow: visible;
-		list-style: none;
-		background: none;
-		border: none;
-		pointer-events: none;
-	}
+	@layer svelte-ui {
+		.toaster {
+			position: fixed;
+			inset: auto 0 16px;
+			/* One cell: the outgoing toast overlaps the incoming one instead of stacking */
+			display: grid;
+			/* minmax(0, …) keeps a long message from widening the column past the screen */
+			grid-template-columns: minmax(0, 1fr);
+			justify-items: center;
+			align-items: end;
+			width: auto;
+			height: auto;
+			margin: 0;
+			padding: 0 16px;
+			overflow: visible;
+			list-style: none;
+			background: none;
+			border: none;
+			pointer-events: none;
+		}
 
-	.toast {
-		grid-area: 1 / 1;
-		display: flex;
-		align-items: center;
-		gap: 10px;
-		box-sizing: border-box;
-		max-width: min(420px, 100%);
-		height: 44px;
-		padding: 8px 16px 8px 14px;
-		font-size: 13px;
-		line-height: 1.4;
-		background-color: var(--color-bg);
-		color: var(--color-text);
-		border: 1px solid var(--color-border);
-		border-radius: 16px;
-		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
-		pointer-events: auto;
-		cursor: pointer;
-	}
+		.toast {
+			grid-area: 1 / 1;
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			box-sizing: border-box;
+			max-width: min(420px, 100%);
+			height: 44px;
+			padding: 8px 16px 8px 14px;
+			font-size: 13px;
+			line-height: 1.4;
+			background-color: var(--color-bg);
+			color: var(--color-text);
+			border: 1px solid var(--color-border);
+			border-radius: 16px;
+			box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+			pointer-events: auto;
+			cursor: pointer;
+		}
 
-	/* Same gap to the right edge as above and below the 28px button: (44 - 2 - 28) / 2 */
-	.toast:has(:global(.toast-action)) {
-		padding-right: 7px;
-	}
+		/* Same gap to the right edge as above and below the 28px button: (44 - 2 - 28) / 2 */
+		.toast:has(:global(.toast-action)) {
+			padding-right: 7px;
+		}
 
-	/* Same sizes as in a Button */
-	.toast :global(.toast-icon) {
-		width: 16px;
-		height: 16px;
-		flex-shrink: 0;
-	}
+		/* Same sizes as in a Button */
+		.toast :global(.toast-icon) {
+			width: 16px;
+			height: 16px;
+			flex-shrink: 0;
+		}
 
-	.toast :global(.toast-spinner) {
-		--spinner-size: 14px;
-		margin: 0 1px;
-	}
+		.toast :global(.toast-spinner) {
+			--spinner-size: 14px;
+			margin: 0 1px;
+		}
 
-	.toast-message {
-		flex: 1;
-		min-width: 0;
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
+		.toast-message {
+			flex: 1;
+			min-width: 0;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		.toast :global(.toast-action) {
+			flex-shrink: 0;
+			margin-left: 6px;
+		}
+
+		@media (pointer: coarse) {
+			.toast {
+				height: auto;
+				min-height: 56px;
+			}
+
+			.toast :global(.toast-action) {
+				min-width: 44px;
+				min-height: 44px;
+			}
+		}
 
-	.toast :global(.toast-action) {
-		flex-shrink: 0;
-		margin-left: 6px;
+		@media (forced-colors: active) {
+			.toast {
+				border-color: CanvasText;
+				box-shadow: none;
+			}
+		}
 	}
 </style>

package/dist/components/toaster/Toaster.svelte.d.ts

@@ -1,7 +1,23 @@
-type Props = {
+export type ToasterLabels = {
     /** Accessible name of the notification region. */
+    region?: string;
+    /** Hint shown on a toast that closes when clicked. */
+    dismiss?: string;
+};
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type ToastData } from './toast.svelte.js';
+type Props = Omit<HTMLAttributes<HTMLOListElement>, 'children'> & {
+    /** Accessible name of the notification region. Shorthand for `labels.region`. */
     label?: string;
+    /** Texts of the region. */
+    labels?: ToasterLabels;
+    /** BCP 47 tag of the toast messages; sets `lang` on the region. */
+    locale?: string;
+    /** Replaces the message of each toast. */
+    message?: Snippet<[toast: ToastData]>;
+    ref?: HTMLOListElement | null;
 };
-declare const Toaster: import("svelte").Component<Props, {}, "">;
+declare const Toaster: import("svelte").Component<Props, {}, "ref">;
 type Toaster = ReturnType<typeof Toaster>;
 export default Toaster;