@ternkit/tern 1.2.1 → 1.4.0

package/dist/ui/Calendar.svelte

@@ -0,0 +1,265 @@
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { addDays, addMonths, format, localeWeekStart, monthGrid, startOfMonth, today, type ISODate } from './dates.js';
+
+	export type DateRange = { start: ISODate | null; end: ISODate | null };
+
+	type Props = {
+		/** single picks a day; range picks a start and an end. */
+		mode?: 'single' | 'range';
+		/** The chosen day (single) or { start, end } (range); bind it. */
+		value?: ISODate | null | DateRange;
+		/** The earliest and latest days that can be picked. */
+		min?: ISODate;
+		max?: ISODate;
+		/** Other days that can't be picked, such as weekends. */
+		isDisabled?: (date: ISODate) => boolean;
+		/** The locale for month and day names; the browser's by default. */
+		locale?: string;
+		/** The first day of the week, 0 for Sunday; the locale's by default. */
+		weekStart?: number;
+		/** Names the calendar for screen readers. */
+		label?: string;
+		class?: string;
+		/** Runs when a day (single) or a whole range is picked. */
+		onselect?: (value: ISODate | DateRange) => void;
+	};
+	let { mode = 'single', value = $bindable(mode === 'range' ? { start: null, end: null } : null), min, max, isDisabled, locale, weekStart, label, class: klass = '', onselect }: Props = $props();
+
+	const uid = $props.id();
+	const id = `tern-calendar-${uid}`;
+	const first = $derived(weekStart ?? localeWeekStart(locale));
+	const range = $derived(mode === 'range' ? ((value as DateRange | null) ?? { start: null, end: null }) : null);
+	const single = $derived(mode === 'single' ? (value as ISODate | null) : null);
+	const now = today();
+	let focused = $state<ISODate>(today());
+	let hovered = $state<ISODate | null>(null);
+	let grid = $state<HTMLTableElement>();
+
+	// Start where the value is.
+	$effect.pre(() => {
+		const start = single ?? range?.start;
+		if (start) focused = start;
+	});
+
+	const weeks = $derived(monthGrid(focused, first));
+	const month = $derived(focused.slice(0, 7));
+	const weekdays = $derived(weeks[0]!.map((d) => ({ short: format(d, locale, { weekday: 'short' }), long: format(d, locale, { weekday: 'long' }) })));
+
+	const blocked = (d: ISODate) => (min !== undefined && d < min) || (max !== undefined && d > max) || !!isDisabled?.(d);
+	const selected = (d: ISODate) => (single ? d === single : !!range && (d === range.start || d === range.end));
+	const between = (d: ISODate) => {
+		if (!range?.start) return false;
+		const end = range.end ?? hovered;
+		if (!end) return false;
+		const [a, b] = range.start <= end ? [range.start, end] : [end, range.start];
+		return d > a && d < b;
+	};
+
+	async function moveTo(d: ISODate) {
+		if (min && d < min) d = min;
+		if (max && d > max) d = max;
+		focused = d;
+		await tick();
+		grid?.querySelector<HTMLElement>(`[data-date="${d}"]`)?.focus();
+	}
+
+	function pick(d: ISODate) {
+		if (blocked(d)) return;
+		focused = d;
+		if (mode === 'single') {
+			value = d;
+			onselect?.(d);
+			return;
+		}
+		const r = range!;
+		if (!r.start || r.end) value = { start: d, end: null };
+		else {
+			const next = d < r.start ? { start: d, end: r.start } : { start: r.start, end: d };
+			value = next;
+			onselect?.(next);
+		}
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		const dow = (new Date(`${focused}T00:00:00Z`).getUTCDay() - first + 7) % 7;
+		const moves: Record<string, () => ISODate> = {
+			ArrowRight: () => addDays(focused, 1),
+			ArrowLeft: () => addDays(focused, -1),
+			ArrowDown: () => addDays(focused, 7),
+			ArrowUp: () => addDays(focused, -7),
+			Home: () => addDays(focused, -dow),
+			End: () => addDays(focused, 6 - dow),
+			PageDown: () => addMonths(focused, e.shiftKey ? 12 : 1),
+			PageUp: () => addMonths(focused, e.shiftKey ? -12 : -1)
+		};
+		if (e.key in moves) {
+			e.preventDefault();
+			moveTo(moves[e.key]!());
+		} else if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			pick(focused);
+		}
+	}
+
+	const canPrev = $derived(!min || startOfMonth(focused) > min);
+	const canNext = $derived(!max || addMonths(startOfMonth(focused), 1) <= max);
+</script>
+
+<div class="tern-calendar {klass}" role="group" aria-label={label}>
+	<div class="header">
+		<button type="button" class="nav" aria-label="Previous month" disabled={!canPrev} onclick={() => (focused = addMonths(focused, -1))}>
+			<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M10 4l-4 4 4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
+		</button>
+		<div class="title" id="{id}-title" aria-live="polite">{format(focused, locale, { month: 'long', year: 'numeric' })}</div>
+		<button type="button" class="nav" aria-label="Next month" disabled={!canNext} onclick={() => (focused = addMonths(focused, 1))}>
+			<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M6 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
+		</button>
+	</div>
+	<table bind:this={grid} role="grid" aria-labelledby="{id}-title" aria-multiselectable={mode === 'range' || undefined}>
+		<thead>
+			<tr>
+				{#each weekdays as w (w.long)}<th scope="col" abbr={w.long}>{w.short}</th>{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#each weeks as week (week[0])}
+				<tr>
+					{#each week as d (d)}
+						{@const outside = d.slice(0, 7) !== month}
+						<td
+							aria-selected={selected(d)}
+							class:start={range?.start === d && !!(range.end || hovered)}
+							class:end={range?.end === d || (!range?.end && hovered === d && range?.start && range.start < d)}
+							class:between={between(d)}
+						>
+							<button
+								type="button"
+								data-date={d}
+								tabindex={d === focused ? 0 : -1}
+								class="day"
+								class:outside
+								class:selected={selected(d)}
+								aria-label={format(d, locale, { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}
+								aria-current={d === now ? 'date' : undefined}
+								aria-disabled={blocked(d) || undefined}
+								onclick={() => pick(d)}
+								onfocus={() => (focused = d)}
+								onpointerenter={() => (hovered = d)}
+								onpointerleave={() => (hovered = null)}
+								{onkeydown}
+							>
+								{Number(d.slice(8))}
+							</button>
+						</td>
+					{/each}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
+
+<style>
+	.tern-calendar {
+		display: inline-grid;
+		gap: 0.5rem;
+		color: var(--tern-fg);
+		font-size: 0.875rem;
+	}
+	.header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+	.title {
+		font-weight: 600;
+	}
+	.nav {
+		display: grid;
+		place-items: center;
+		width: 2rem;
+		height: 2rem;
+		color: var(--tern-muted);
+		background: transparent;
+		border: 1px solid var(--tern-border);
+		border-radius: var(--tern-radius-sm);
+		cursor: pointer;
+	}
+	.nav:hover:not(:disabled) {
+		color: var(--tern-fg);
+		background: var(--tern-surface-2);
+	}
+	.nav:disabled {
+		opacity: 0.4;
+		cursor: not-allowed;
+	}
+	.nav:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 1px;
+	}
+	table {
+		border-collapse: collapse;
+	}
+	th {
+		width: 2.25rem;
+		padding-bottom: 0.25rem;
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: var(--tern-muted);
+	}
+	td {
+		padding: 1px 0;
+	}
+	td.between,
+	td.start,
+	td.end {
+		background: var(--tern-accent-soft);
+	}
+	td.start {
+		border-radius: 50% 0 0 50%;
+	}
+	td.end {
+		border-radius: 0 50% 50% 0;
+	}
+	td.start.end {
+		border-radius: 50%;
+	}
+	.day {
+		display: grid;
+		place-items: center;
+		width: 2.25rem;
+		height: 2.25rem;
+		padding: 0;
+		font: inherit;
+		font-variant-numeric: tabular-nums;
+		color: var(--tern-fg);
+		background: transparent;
+		border: 0;
+		border-radius: 50%;
+		cursor: pointer;
+	}
+	.day:hover:not([aria-disabled='true']):not(.selected) {
+		background: var(--tern-surface-2);
+	}
+	.day.outside {
+		color: var(--tern-muted);
+	}
+	.day[aria-current='date'] {
+		font-weight: 700;
+		box-shadow: inset 0 0 0 1px var(--tern-border-strong);
+	}
+	.day.selected {
+		color: var(--tern-accent-fg);
+		background: var(--tern-accent);
+	}
+	.day[aria-disabled='true'] {
+		color: var(--tern-muted);
+		opacity: 0.45;
+		text-decoration: line-through;
+		cursor: not-allowed;
+	}
+	.day:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 1px;
+	}
+</style>

package/dist/ui/Calendar.svelte.d.ts

@@ -0,0 +1,28 @@
+import { type ISODate } from './dates.js';
+export type DateRange = {
+    start: ISODate | null;
+    end: ISODate | null;
+};
+type Props = {
+    /** single picks a day; range picks a start and an end. */
+    mode?: 'single' | 'range';
+    /** The chosen day (single) or { start, end } (range); bind it. */
+    value?: ISODate | null | DateRange;
+    /** The earliest and latest days that can be picked. */
+    min?: ISODate;
+    max?: ISODate;
+    /** Other days that can't be picked, such as weekends. */
+    isDisabled?: (date: ISODate) => boolean;
+    /** The locale for month and day names; the browser's by default. */
+    locale?: string;
+    /** The first day of the week, 0 for Sunday; the locale's by default. */
+    weekStart?: number;
+    /** Names the calendar for screen readers. */
+    label?: string;
+    class?: string;
+    /** Runs when a day (single) or a whole range is picked. */
+    onselect?: (value: ISODate | DateRange) => void;
+};
+declare const Calendar: import("svelte").Component<Props, {}, "value">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/ui/Card.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	type Props = HTMLAttributes<HTMLElement> & {
+		/** A heading for the card. */
+		title?: string;
+		description?: string;
+		/** The heading level, to fit the page's outline. */
+		level?: 2 | 3 | 4;
+		/** The element to render: section for standalone content, article for items in a feed. */
+		as?: 'div' | 'section' | 'article';
+		children?: Snippet;
+		/** Actions in the header's corner. */
+		actions?: Snippet;
+		footer?: Snippet;
+	};
+	let { title, description, level = 3, as = 'div', class: klass = '', children, actions, footer, ...rest }: Props = $props();
+</script>
+
+<svelte:element this={as} class="tern-card {klass}" {...rest}>
+	{#if title || actions}
+		<header>
+			<div>
+				{#if title}<svelte:element this={`h${level}`} class="title">{title}</svelte:element>{/if}
+				{#if description}<p class="description">{description}</p>{/if}
+			</div>
+			{#if actions}<div class="actions">{@render actions()}</div>{/if}
+		</header>
+	{/if}
+	{#if children}<div class="body">{@render children()}</div>{/if}
+	{#if footer}<footer>{@render footer()}</footer>{/if}
+</svelte:element>
+
+<style>
+	.tern-card {
+		display: grid;
+		gap: 1rem;
+		padding: 1.25rem;
+		background: var(--tern-surface);
+		color: var(--tern-fg);
+		border: 1px solid var(--tern-border);
+		border-radius: calc(var(--tern-radius) + 2px);
+		box-shadow: var(--tern-shadow);
+	}
+	header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: 1rem;
+	}
+	.title {
+		margin: 0;
+		font-size: 1rem;
+		font-weight: 650;
+		letter-spacing: -0.01em;
+	}
+	.description {
+		margin: 0.2rem 0 0;
+		font-size: 0.875rem;
+		color: var(--tern-muted);
+	}
+	.actions {
+		display: flex;
+		gap: 0.5rem;
+	}
+	footer {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5rem;
+		padding-top: 1rem;
+		border-top: 1px solid var(--tern-border);
+	}
+</style>

package/dist/ui/Card.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type Props = HTMLAttributes<HTMLElement> & {
+    /** A heading for the card. */
+    title?: string;
+    description?: string;
+    /** The heading level, to fit the page's outline. */
+    level?: 2 | 3 | 4;
+    /** The element to render: section for standalone content, article for items in a feed. */
+    as?: 'div' | 'section' | 'article';
+    children?: Snippet;
+    /** Actions in the header's corner. */
+    actions?: Snippet;
+    footer?: Snippet;
+};
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;

package/dist/ui/Carousel.svelte

@@ -0,0 +1,169 @@
+<script lang="ts" generics="T">
+	import type { Snippet } from 'svelte';
+
+	type Props = {
+		items: T[];
+		/** Names the carousel, such as "Featured projects". */
+		label: string;
+		/** Draws one slide. */
+		slide: Snippet<[T, number]>;
+		/** Slides visible at once on wide screens. */
+		perView?: number;
+		/** Moves on by itself every this many milliseconds, with a pause button. Stops on hover and focus. */
+		autoplay?: number;
+		class?: string;
+	};
+	let { items, label, slide, perView = 1, autoplay, class: klass = '' }: Props = $props();
+
+	const uid = $props.id();
+	let track = $state<HTMLDivElement>();
+	let current = $state(0);
+	// svelte-ignore state_referenced_locally
+	let playing = $state(!!autoplay);
+	let paused = $state(false); // by hover or focus
+
+	function go(i: number) {
+		const n = Math.max(0, items.length - perView);
+		current = ((i % (n + 1)) + n + 1) % (n + 1);
+		const el = track?.children[current] as HTMLElement | undefined;
+		track?.scrollTo({ left: el?.offsetLeft ?? 0, behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' });
+	}
+
+	$effect(() => {
+		if (!autoplay || !playing || paused) return;
+		const t = setInterval(() => go(current + 1), autoplay);
+		return () => clearInterval(t);
+	});
+
+	// Keep current in step when the user scrolls or swipes.
+	function onscroll() {
+		if (!track) return;
+		const w = (track.children[0] as HTMLElement | undefined)?.offsetWidth || 1;
+		current = Math.round(track.scrollLeft / w);
+	}
+</script>
+
+<section
+	class="tern-carousel {klass}"
+	aria-roledescription="carousel"
+	aria-label={label}
+	onpointerenter={() => (paused = true)}
+	onpointerleave={() => (paused = false)}
+	onfocusin={() => (paused = true)}
+	onfocusout={() => (paused = false)}
+	style:--per-view={perView}
+>
+	<div class="controls">
+		{#if autoplay}
+			<button type="button" class="control" aria-label={playing ? 'Stop slides' : 'Start slides'} onclick={() => (playing = !playing)}>
+				{#if playing}
+					<svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14"><path d="M5 3.5v9M11 3.5v9" stroke="currentColor" stroke-width="2" stroke-linecap="round" /></svg>
+				{:else}
+					<svg aria-hidden="true" viewBox="0 0 16 16" width="14" height="14"><path d="M5 3.5l7 4.5-7 4.5z" fill="currentColor" /></svg>
+				{/if}
+			</button>
+		{/if}
+		<button type="button" class="control" aria-label="Previous slide" aria-controls="tern-carousel-{uid}" onclick={() => go(current - 1)}>
+			<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M10 4l-4 4 4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
+		</button>
+		<button type="button" class="control" aria-label="Next slide" aria-controls="tern-carousel-{uid}" onclick={() => go(current + 1)}>
+			<svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"><path d="M6 4l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
+		</button>
+	</div>
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+	<div
+		bind:this={track}
+		class="track"
+		id="tern-carousel-{uid}"
+		role="group"
+		aria-label="Slides"
+		tabindex="0"
+		aria-live={playing && !paused ? 'off' : 'polite'}
+		{onscroll}
+		onkeydown={(e) => {
+			if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
+				e.preventDefault();
+				go(current + (e.key === 'ArrowRight' ? 1 : -1));
+			}
+		}}
+	>
+		{#each items as item, i (i)}
+			<div class="slide" role="group" aria-roledescription="slide" aria-label="{i + 1} of {items.length}" inert={i < current || i >= current + perView ? true : undefined}>
+				{@render slide(item, i)}
+			</div>
+		{/each}
+	</div>
+	<div class="dots" aria-hidden="true">
+		{#each { length: Math.max(1, items.length - perView + 1) }, i (i)}<span class:on={i === current}></span>{/each}
+	</div>
+</section>
+
+<style>
+	.tern-carousel {
+		display: grid;
+		gap: 0.75rem;
+	}
+	.controls {
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.375rem;
+	}
+	.track {
+		display: flex;
+		gap: 1rem;
+		overflow-x: auto;
+		scroll-snap-type: x mandatory;
+		scrollbar-width: none;
+		border-radius: var(--tern-radius);
+	}
+	.track:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+	.track::-webkit-scrollbar {
+		display: none;
+	}
+	.slide {
+		flex: 0 0 calc((100% - (var(--per-view) - 1) * 1rem) / var(--per-view));
+		scroll-snap-align: start;
+		min-width: 0;
+	}
+	@media (max-width: 40rem) {
+		.slide {
+			flex-basis: 85%;
+		}
+	}
+	.control {
+		display: grid;
+		place-items: center;
+		width: 2rem;
+		height: 2rem;
+		color: var(--tern-fg);
+		background: var(--tern-surface);
+		border: 1px solid var(--tern-border-strong);
+		border-radius: 50%;
+		cursor: pointer;
+	}
+	.control:hover {
+		background: var(--tern-surface-2);
+	}
+	.control:focus-visible {
+		outline: 2px solid var(--tern-ring);
+		outline-offset: 2px;
+	}
+	.dots {
+		display: flex;
+		justify-content: center;
+		gap: 0.375rem;
+	}
+	.dots span {
+		width: 0.4rem;
+		height: 0.4rem;
+		border-radius: 50%;
+		background: var(--tern-border-strong);
+		transition: background var(--tern-duration);
+	}
+	.dots span.on {
+		background: var(--tern-accent);
+	}
+</style>

package/dist/ui/Carousel.svelte.d.ts

@@ -0,0 +1,36 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        items: T[];
+        /** Names the carousel, such as "Featured projects". */
+        label: string;
+        /** Draws one slide. */
+        slide: Snippet<[T, number]>;
+        /** Slides visible at once on wide screens. */
+        perView?: number;
+        /** Moves on by itself every this many milliseconds, with a pause button. Stops on hover and focus. */
+        autoplay?: number;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Carousel: $$IsomorphicComponent;
+type Carousel<T> = InstanceType<typeof Carousel<T>>;
+export default Carousel;