@ruckc/truss-ui 1.2.0 → 1.4.0

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

@@ -7,10 +7,18 @@ type $$ComponentProps = {
     center?: Snippet;
     /** Trailing region (e.g. social links). */
     end?: Snippet;
+    /** Identity (e.g. a logo) at the start. With `brand`, `meta` or `links`, `start`/`center`/`end` are ignored. */
+    brand?: Snippet;
+    /** Small print (e.g. copyright) stacked directly under `brand`. */
+    meta?: Snippet;
+    /** One or more link groups, right-aligned on the same row when wide. */
+    links?: Snippet;
     /** Free-form content; replaces the three regions. */
     children?: Snippet;
     /** `bordered` adds a top border. */
     variant?: 'plain' | 'bordered';
+    /** Align the content to the `Container` max-width and gutters while the background stays full-bleed. `true` is `lg`; sizes match `Container`. */
+    contained?: boolean | 'sm' | 'md' | 'lg';
     class?: string;
 } & Omit<HTMLAttributes<HTMLElement>, 'children' | 'class'>;
 declare const Footer: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/GridLayout.svelte

@@ -0,0 +1,242 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { compact, moveItem, resizeItem, colsFor, sameLayout, bottom, type GridItem } from '../grid-layout';
+
+	let {
+		items = $bindable([]),
+		cols = 12,
+		rowHeight,
+		gap,
+		editable = true,
+		breakpoints,
+		handle,
+		label = 'Dashboard layout',
+		itemLabel = (item: GridItem) => `Tile ${item.id}`,
+		onchange,
+		tile
+	}: {
+		/** Tiles in grid cells. Bound: drops and resizes write the new layout back. */
+		items?: GridItem[];
+		/** Column count (the maximum when `breakpoints` is set). */
+		cols?: number;
+		/** Row height in px. Defaults to twice the density row height, so it follows density modes. */
+		rowHeight?: number;
+		/** Space between tiles in px. Defaults to the `--tr-gap` token. */
+		gap?: number;
+		/** Turn dragging, resizing and the keyboard model on or off. */
+		editable?: boolean;
+		/** Container width in px (minimum) → column count, e.g. `{ 0: 1, 600: 6, 1000: 12 }`. */
+		breakpoints?: Record<number, number>;
+		/** CSS selector of the element inside a tile that starts a drag. Omit to drag by the whole tile. */
+		handle?: string;
+		/** Accessible name of the grid. */
+		label?: string;
+		/** Accessible name of a tile. */
+		itemLabel?: (item: GridItem) => string;
+		/** Called with the new layout after a drop, resize or keyboard commit. */
+		onchange?: (layout: GridItem[]) => void;
+		tile: Snippet<[{ item: GridItem }]>;
+	} = $props();
+
+	const uid = $props.id();
+	let root: HTMLDivElement;
+	let probe: HTMLDivElement;
+	let width = $state(0);
+	let animate = $state(false);
+	const eff = $derived(Math.max(1, breakpoints ? colsFor(width, breakpoints, cols) : cols));
+
+	/** Preview layout while a pointer drag or a keyboard pick-up is in flight. */
+	let live = $state<GridItem[] | null>(null);
+	const base = $derived(compact(items, eff));
+	const shown = $derived(live ?? base);
+	const rows = $derived(bottom(shown));
+	let announcement = $state('');
+
+	$effect(() => {
+		if (!root) return;
+		const ro = new ResizeObserver(() => (width = root.clientWidth));
+		width = root.clientWidth;
+		ro.observe(root);
+		// animate tile moves only once the first real layout is on screen, so the grid never slides in from a 0px-wide guess
+		const f = requestAnimationFrame(() => requestAnimationFrame(() => (animate = true)));
+		return () => { ro.disconnect(); cancelAnimationFrame(f); };
+	});
+
+	function commit(layout: GridItem[]) {
+		const next = compact(layout, eff);
+		if (sameLayout(next, base) && sameLayout(next, items)) return false;
+		items = next;
+		onchange?.(next);
+		return true;
+	}
+
+	const pos = (it: GridItem) => `column ${it.x + 1}, row ${it.y + 1}`;
+	const find = (layout: GridItem[], id: string) => layout.find((i) => i.id === id)!;
+
+	// ───────────── pointer
+	type Drag = { id: string; mode: 'move' | 'resize'; x0: number; y0: number; dx: number; dy: number; stepX: number; stepY: number; orig: GridItem; moved: boolean };
+	let drag = $state<Drag | null>(null);
+
+	function measure() {
+		const g = probe.getBoundingClientRect().width;
+		const rh = probe.getBoundingClientRect().height;
+		const colW = (root.clientWidth - g * (eff - 1)) / eff;
+		return { stepX: colW + g, stepY: rh + g };
+	}
+
+	const INTERACTIVE = 'button, a[href], input, select, textarea, [contenteditable="true"], [role="button"], [data-no-drag]';
+	function down(e: PointerEvent, item: GridItem) {
+		if (!editable || item.static || (e.pointerType === 'mouse' && e.button !== 0) || kb) return;
+		const t = e.target as Element;
+		const resize = !!t.closest('.rh');
+		const el = e.currentTarget as HTMLElement;
+		if (!resize) {
+			if (handle ? !t.closest(handle) || !el.contains(t.closest(handle)) : t.closest(INTERACTIVE) && t.closest(INTERACTIVE) !== el) return;
+		}
+		el.setPointerCapture(e.pointerId);
+		const { stepX, stepY } = measure();
+		drag = { id: item.id, mode: resize ? 'resize' : 'move', x0: e.clientX, y0: e.clientY, dx: 0, dy: 0, stepX, stepY, orig: find(shown, item.id), moved: false };
+		live = shown;
+		e.preventDefault();
+		el.focus({ preventScroll: true });
+	}
+	function move(e: PointerEvent) {
+		if (!drag) return;
+		const d = drag;
+		d.dx = e.clientX - d.x0;
+		d.dy = e.clientY - d.y0;
+		if (!d.moved && Math.hypot(d.dx, d.dy) < 3) return;
+		d.moved = true;
+		const gx = Math.round(d.dx / d.stepX), gy = Math.round(d.dy / d.stepY);
+		const o = d.orig;
+		const next = d.mode === 'move' ? moveItem(base, d.id, o.x + gx, o.y + gy, eff) : resizeItem(base, d.id, o.w + gx, o.h + gy, eff);
+		if (!sameLayout(next, live!)) live = next;
+	}
+	function up(e: PointerEvent) {
+		if (!drag) return;
+		const d = drag;
+		(e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId);
+		drag = null;
+		const layout = live!;
+		live = null;
+		if (!d.moved || e.type === 'pointercancel') return;
+		const it = find(layout, d.id);
+		if (commit(layout)) announcement = `${d.mode === 'move' ? 'Moved' : 'Resized'} ${itemLabel(it)} to ${pos(it)}, ${it.w} wide, ${it.h} tall.`;
+	}
+
+	// ───────────── keyboard
+	let kb = $state<{ id: string } | null>(null);
+	const ARROWS: Record<string, [number, number]> = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] };
+	const status = (it: GridItem) => `${pos(it)}, ${it.w} wide, ${it.h} tall.`;
+
+	function key(e: KeyboardEvent, item: GridItem) {
+		if (drag && e.key === 'Escape') { drag = null; live = null; announcement = 'Cancelled.'; return; }
+		if (!editable || item.static || e.target !== e.currentTarget || drag) return;
+		if (!kb) {
+			if (e.key !== 'Enter' && e.key !== ' ') return;
+			e.preventDefault();
+			kb = { id: item.id };
+			live = shown;
+			announcement = `Picked up ${itemLabel(item)}. ${status(item)} Arrow keys move, Shift plus arrow keys resize, Enter drops, Escape cancels.`;
+			return;
+		}
+		const cur = find(live!, item.id);
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			const layout = live!;
+			kb = null;
+			live = null;
+			const it = find(layout, item.id);
+			commit(layout);
+			announcement = `Dropped ${itemLabel(it)} at ${status(it)}`;
+		} else if (e.key === 'Escape') {
+			e.preventDefault();
+			e.stopPropagation();
+			kb = null;
+			live = null;
+			announcement = `Cancelled. ${itemLabel(item)} stays at ${status(find(base, item.id))}`;
+		} else if (ARROWS[e.key]) {
+			e.preventDefault();
+			const [dx, dy] = ARROWS[e.key];
+			const next = e.shiftKey ? resizeItem(live!, item.id, cur.w + dx, cur.h + dy, eff) : moveItem(live!, item.id, cur.x + dx, cur.y + dy, eff);
+			const it = find(next, item.id);
+			if (it.x === cur.x && it.y === cur.y && it.w === cur.w && it.h === cur.h) announcement = `Cannot ${e.shiftKey ? 'resize' : 'move'} further. ${status(it)}`;
+			else { live = next; announcement = `${e.shiftKey ? 'Resized' : 'Moved'} to ${status(it)}`; }
+		}
+	}
+	function blur(e: FocusEvent) {
+		if (!kb || e.currentTarget !== e.target) return;
+		kb = null;
+		live = null;
+		announcement = 'Move cancelled.';
+	}
+
+	const cell = (it: GridItem) => `left: calc((100% + var(--_gap)) / ${eff} * ${it.x}); top: calc((var(--_rh) + var(--_gap)) * ${it.y}); width: calc((100% + var(--_gap)) / ${eff} * ${it.w} - var(--_gap)); height: calc((var(--_rh) + var(--_gap)) * ${it.h} - var(--_gap));`;
+	/** The dragged tile follows the pointer instead of snapping to its cell. */
+	function style(it: GridItem) {
+		if (drag?.id !== it.id) return cell(it);
+		const { orig: o, dx, dy, stepX, stepY } = drag;
+		return drag.mode === 'move'
+			? `left: ${Math.max(0, o.x * stepX + dx)}px; top: ${Math.max(0, o.y * stepY + dy)}px; ${cell(o).replace(/left:[^;]*;|top:[^;]*;/g, '')}`
+			: `${cell(o).replace(/width:[^;]*;|height:[^;]*;/g, '')} width: calc(${o.w * stepX + dx}px - var(--_gap)); height: calc(${o.h * stepY + dy}px - var(--_gap));`;
+	}
+	const placeholder = $derived(drag?.moved ? find(shown, drag.id) : kb ? find(shown, kb.id) : null);
+</script>
+
+<div
+	bind:this={root} class="gl" role="group" aria-label={label} aria-describedby="{uid}-hint"
+	data-editable={editable} data-dragging={!!drag} data-cols={eff} data-animate={animate}
+	style="--_gap: {gap == null ? 'var(--tr-gap)' : `${gap}px`}; --_rh: {rowHeight == null ? 'calc(var(--tr-row-h) * 2)' : `${rowHeight}px`}; height: calc((var(--_rh) + var(--_gap)) * {rows} - var(--_gap));"
+>
+	<div class="probe" bind:this={probe} aria-hidden="true"></div>
+	{#each shown as item (item.id)}
+		{@const picked = kb?.id === item.id}
+		{@const active = drag?.id === item.id && drag.moved}
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+		<div
+			class="tile" role="group" aria-label={itemLabel(item)} aria-describedby={editable && !item.static ? `${uid}-hint` : undefined}
+			tabindex={editable && !item.static ? 0 : undefined}
+			data-id={item.id} data-static={item.static || undefined} data-picked={picked || undefined} data-active={active || undefined}
+			data-x={item.x} data-y={item.y} data-w={item.w} data-h={item.h}
+			style={style(item)}
+			onpointerdown={(e) => down(e, item)} onpointermove={move} onpointerup={up} onpointercancel={up}
+			onkeydown={(e) => key(e, item)} onfocusout={blur}
+		>
+			<div class="body">{@render tile({ item })}</div>
+			{#if editable && !item.static}<span class="rh" aria-hidden="true"></span>{/if}
+		</div>
+	{/each}
+	{#if placeholder}
+		<div class="ph" aria-hidden="true" style={cell(placeholder)}></div>
+	{/if}
+	<span id="{uid}-hint" class="tr-visually-hidden">Press Enter or Space to pick up a tile. Arrow keys move it, Shift plus arrow keys resize it, Enter drops it and Escape cancels.</span>
+	<div class="tr-visually-hidden" role="status" aria-live="polite" aria-atomic="true">{announcement}</div>
+</div>
+
+<style>
+	.gl { position: relative; width: 100%; }
+	.probe { position: absolute; left: 0; top: 0; width: var(--_gap); height: var(--_rh); visibility: hidden; pointer-events: none; }
+	.tile { position: absolute; box-sizing: border-box; min-width: 0; min-height: 0; border-radius: var(--tr-radius-md); outline: none; }
+	.gl[data-animate='true'] .tile {
+		transition: left var(--tr-dur) var(--tr-ease), top var(--tr-dur) var(--tr-ease), width var(--tr-dur) var(--tr-ease), height var(--tr-dur) var(--tr-ease), box-shadow var(--tr-dur) var(--tr-ease);
+	}
+	.body { height: 100%; display: grid; min-width: 0; min-height: 0; }
+	.body > :global(*) { min-width: 0; min-height: 0; }
+	.gl[data-editable='true'] .tile:not([data-static]) { cursor: grab; touch-action: none; }
+	.tile:focus-visible { box-shadow: var(--tr-focus-ring); }
+	.tile[data-picked] { box-shadow: 0 0 0 2px var(--tr-primary), var(--tr-elevation-3); z-index: 3; }
+	.tile[data-active], .gl[data-animate='true'] .tile[data-active] { z-index: 4; transition: none; box-shadow: var(--tr-elevation-4); cursor: grabbing; }
+	.gl[data-dragging='true'] { user-select: none; }
+	.ph {
+		position: absolute; box-sizing: border-box; border-radius: var(--tr-radius-md); z-index: 0; pointer-events: none;
+		background: color-mix(in srgb, var(--tr-primary) 12%, transparent); border: 2px dashed var(--tr-primary);
+	}
+	.gl[data-animate='true'] .ph {
+		transition: left var(--tr-dur) var(--tr-ease), top var(--tr-dur) var(--tr-ease), width var(--tr-dur) var(--tr-ease), height var(--tr-dur) var(--tr-ease);
+	}
+	.rh { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; opacity: 0; transition: opacity var(--tr-dur) var(--tr-ease); z-index: 2; }
+	.rh::after { content: ''; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px; border-right: 2px solid var(--tr-on-surface-variant); border-bottom: 2px solid var(--tr-on-surface-variant); border-radius: 0 0 3px 0; }
+	.tile:hover > .rh, .tile:focus-visible > .rh, .tile[data-active] > .rh, .tile[data-picked] > .rh { opacity: 0.8; }
+	@media (pointer: coarse) { .rh { opacity: 0.6; } }
+	@media (prefers-reduced-motion: reduce) { .tile, .ph, .rh { transition: none; } }
+</style>

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

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+import { type GridItem } from '../grid-layout';
+type $$ComponentProps = {
+    /** Tiles in grid cells. Bound: drops and resizes write the new layout back. */
+    items?: GridItem[];
+    /** Column count (the maximum when `breakpoints` is set). */
+    cols?: number;
+    /** Row height in px. Defaults to twice the density row height, so it follows density modes. */
+    rowHeight?: number;
+    /** Space between tiles in px. Defaults to the `--tr-gap` token. */
+    gap?: number;
+    /** Turn dragging, resizing and the keyboard model on or off. */
+    editable?: boolean;
+    /** Container width in px (minimum) → column count, e.g. `{ 0: 1, 600: 6, 1000: 12 }`. */
+    breakpoints?: Record<number, number>;
+    /** CSS selector of the element inside a tile that starts a drag. Omit to drag by the whole tile. */
+    handle?: string;
+    /** Accessible name of the grid. */
+    label?: string;
+    /** Accessible name of a tile. */
+    itemLabel?: (item: GridItem) => string;
+    /** Called with the new layout after a drop, resize or keyboard commit. */
+    onchange?: (layout: GridItem[]) => void;
+    tile: Snippet<[{
+        item: GridItem;
+    }]>;
+};
+declare const GridLayout: import("svelte").Component<$$ComponentProps, {}, "items">;
+type GridLayout = ReturnType<typeof GridLayout>;
+export default GridLayout;

package/dist/components/HoverCard.svelte

@@ -0,0 +1,158 @@
+<script lang="ts" generics="T = unknown">
+	import type { Snippet } from 'svelte';
+	import Popover from './Popover.svelte';
+	import Skeleton from './Skeleton.svelte';
+
+	/**
+	 * A preview card for a trigger (a link, a record reference…). Opens on hover intent, keyboard (focused trigger +
+	 * Enter or Space) or touch long-press; closes on Escape, outside press, or once the pointer has left both the
+	 * trigger and the card for `closeDelay`. It is a non-modal dialog, so interactive content works, and it never takes
+	 * focus on hover. A keyboard open moves focus into the card; Escape returns it to the trigger.
+	 */
+	let {
+		open = $bindable(false),
+		label,
+		trigger,
+		children,
+		load,
+		loading,
+		error,
+		placement = 'bottom',
+		openDelay = 500,
+		closeDelay = 200,
+		openKeys = ['Enter', ' ']
+	}: {
+		open?: boolean;
+		/** Accessible name of the card (it is announced as a dialog, not a tooltip). */
+		label: string;
+		/** The element the card previews. Its first focusable element (else the wrapper) gets `aria-haspopup`/`aria-expanded`. */
+		trigger: Snippet;
+		/** Card content; receives the value resolved by `load` (undefined without one). */
+		children: Snippet<[value: T]>;
+		/** Fetches the card's data when it opens; a Skeleton shows meanwhile. A successful result is kept. */
+		load?: () => Promise<T>;
+		/** Replaces the default Skeleton while `load` is pending. */
+		loading?: Snippet;
+		/** Shown when `load` rejects (default: a short message); reopening retries. */
+		error?: Snippet<[reason: unknown]>;
+		placement?: 'top' | 'bottom' | 'left' | 'right';
+		/** ms the pointer must rest on the trigger before the card opens. */
+		openDelay?: number;
+		/** ms grace after the pointer leaves, so it can travel from the trigger into the card. */
+		closeDelay?: number;
+		/** Keys that open the card while the trigger is focused. A key that opens the card does not also activate the trigger. */
+		openKeys?: string[];
+	} = $props();
+
+	const id = $props.id();
+	const LONG_PRESS = 500;
+	const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
+	let wrap = $state<HTMLSpanElement>();
+	let card = $state<HTMLDivElement>();
+	let hostEl = $state<HTMLSpanElement>();
+	let timer: ReturnType<typeof setTimeout>;
+	let press: ReturnType<typeof setTimeout> | undefined;
+	let pressAt = { x: 0, y: 0 };
+	let swallowClick = false;
+	let pinned = false;
+	let value = $state<T>();
+	let loaded = $state(false);
+	let failure = $state<{ reason: unknown } | undefined>();
+	let token = 0;
+
+	const target = () => (hostEl?.querySelector<HTMLElement>(FOCUSABLE) ?? hostEl) as HTMLElement | undefined;
+	const clear = () => { clearTimeout(timer); clearTimeout(press); press = undefined; };
+	const show = (delay: number) => { clearTimeout(timer); if (open) return; timer = setTimeout(() => (open = true), delay); };
+	const hide = (delay: number) => { clearTimeout(timer); if (!open) return; timer = setTimeout(() => (open = false), delay); };
+	$effect(() => () => clear());
+
+	// Trigger semantics live on the real focusable element so assistive tech announces "dialog popup, expanded".
+	$effect(() => {
+		const el = target();
+		if (!el) return;
+		el.setAttribute('aria-haspopup', 'dialog');
+		el.setAttribute('aria-expanded', String(open));
+		if (open) el.setAttribute('aria-controls', id); else el.removeAttribute('aria-controls');
+		if (el === hostEl && !el.hasAttribute('tabindex')) el.tabIndex = 0;
+	});
+
+	$effect(() => {
+		if (!open) { pinned = false; return; }
+		if (!load || loaded) return;
+		const mine = ++token;
+		failure = undefined;
+		load().then(
+			(v) => { if (mine === token) { value = v; loaded = true; } },
+			(reason) => { if (mine === token) failure = { reason }; }
+		);
+		return () => { token++; };
+	});
+
+	function onclose(refocus: boolean) {
+		clear();
+		if (refocus) target()?.focus();
+	}
+
+	function onkeydown(e: KeyboardEvent) {
+		if (e.target !== target() || e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || !openKeys.includes(e.key)) return;
+		if (open) return; // already open: let the key activate the trigger
+		e.preventDefault();
+		clear();
+		pinned = true;
+		open = true;
+		// the card renders on the next frame; move focus into it so keyboard users can reach its content
+		requestAnimationFrame(() => (card?.querySelector<HTMLElement>(FOCUSABLE) ?? card)?.focus());
+	}
+
+	function onpointerenter(e: PointerEvent) { if (e.pointerType !== 'touch') show(openDelay); }
+	function onpointerleave(e: PointerEvent) { if (e.pointerType !== 'touch' && !pinned) hide(closeDelay); else clearTimeout(timer); }
+	function onpointerdown(e: PointerEvent) {
+		if (e.pointerType !== 'touch' || !hostEl?.contains(e.target as Node)) return;
+		pressAt = { x: e.clientX, y: e.clientY };
+		clearTimeout(press);
+		press = setTimeout(() => { press = undefined; swallowClick = true; pinned = true; open = true; }, LONG_PRESS);
+	}
+	function onpointermove(e: PointerEvent) {
+		if (press && Math.hypot(e.clientX - pressAt.x, e.clientY - pressAt.y) > 10) { clearTimeout(press); press = undefined; }
+	}
+	const endPress = () => { clearTimeout(press); press = undefined; };
+	// a long-press must not also follow the link (click) or raise the browser's context menu
+	function onclickcapture(e: MouseEvent) { if (swallowClick) { swallowClick = false; e.preventDefault(); e.stopPropagation(); } }
+	function oncontextmenu(e: MouseEvent) { if (press || swallowClick) e.preventDefault(); }
+	function onfocusout(e: FocusEvent) {
+		const to = e.relatedTarget as Node | null;
+		const left = () => { open = false; clear(); };
+		if (to) { if (!wrap?.contains(to)) left(); }
+		else setTimeout(() => { if (!wrap?.contains(document.activeElement)) left(); }); // focus went to the page chrome or nowhere
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<span
+	class="tr-hovercard" bind:this={wrap}
+	{onpointerenter} {onpointerleave} {onpointerdown} {onpointermove} onpointerup={endPress} onpointercancel={endPress}
+	{onclickcapture} {oncontextmenu} {onkeydown} {onfocusout}
+>
+	<span class="host" bind:this={hostEl}>{@render trigger()}</span>
+	<Popover bind:open fixed anchor={hostEl} {placement} {onclose}>
+		<div class="card" role="dialog" aria-label={label} {id} tabindex="-1" bind:this={card}>
+			{#if load && !loaded}
+				{#if failure}
+					{#if error}{@render error(failure.reason)}{:else}<p class="msg" role="alert">Could not load this preview.</p>{/if}
+				{:else if loading}{@render loading()}{:else}<Skeleton lines={3} label="Loading preview" />{/if}
+			{:else}
+				{@render children(value as T)}
+			{/if}
+		</div>
+	</Popover>
+</span>
+
+<style>
+	.tr-hovercard { display: inline-flex; }
+	.host { display: inline-flex; -webkit-touch-callout: none; }
+	.card {
+		box-sizing: border-box; min-width: 12rem; max-width: min(24rem, calc(100vw - 16px)); padding: var(--tr-space-3);
+		color: var(--tr-on-surface); font: 400 var(--tr-text-sm) / 1.45 var(--tr-font-sans); outline: none;
+	}
+	.msg { margin: 0; color: var(--tr-danger); }
+</style>

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

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T = unknown>(): {
+    props: {
+        open?: boolean;
+        /** Accessible name of the card (it is announced as a dialog, not a tooltip). */
+        label: string;
+        /** The element the card previews. Its first focusable element (else the wrapper) gets `aria-haspopup`/`aria-expanded`. */
+        trigger: Snippet;
+        /** Card content; receives the value resolved by `load` (undefined without one). */
+        children: Snippet<[value: T]>;
+        /** Fetches the card's data when it opens; a Skeleton shows meanwhile. A successful result is kept. */
+        load?: () => Promise<T>;
+        /** Replaces the default Skeleton while `load` is pending. */
+        loading?: Snippet;
+        /** Shown when `load` rejects (default: a short message); reopening retries. */
+        error?: Snippet<[reason: unknown]>;
+        placement?: "top" | "bottom" | "left" | "right";
+        /** ms the pointer must rest on the trigger before the card opens. */
+        openDelay?: number;
+        /** ms grace after the pointer leaves, so it can travel from the trigger into the card. */
+        closeDelay?: number;
+        /** Keys that open the card while the trigger is focused. A key that opens the card does not also activate the trigger. */
+        openKeys?: string[];
+    };
+    exports: {};
+    bindings: "open";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T = unknown> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "open";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T = unknown>(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 = unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const HoverCard: $$IsomorphicComponent;
+type HoverCard<T = unknown> = InstanceType<typeof HoverCard<T>>;
+export default HoverCard;

package/dist/components/Kbd.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { formatShortcut, isApple } from '../keys.js';
+
+	let {
+		keys,
+		class: klass = ''
+	}: {
+		/** A key combination such as `mod+shift+p`, or a sequence such as `g h`. `mod` shows as ⌘ on Apple platforms and Ctrl elsewhere. */
+		keys: string;
+		class?: string;
+	} = $props();
+
+	// The platform is resolved after mount so server and client markup agree
+	let apple = $state(false);
+	$effect(() => { apple = isApple(); });
+	const steps = $derived(formatShortcut(keys, apple ? 'apple' : 'other'));
+</script>
+
+<span class="tr-kbd {klass}">
+	{#each steps as step, s}
+		{#if s > 0}<span class="then" aria-hidden="true">then</span>{/if}
+		{#each step as k}<kbd>{k}</kbd>{/each}
+	{/each}
+</span>
+
+<style>
+	.tr-kbd { display: inline-flex; align-items: center; gap: 3px; vertical-align: baseline; color: inherit; }
+	kbd {
+		display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; height: 1.5em; padding: 0 0.4em; box-sizing: border-box;
+		font: 500 var(--tr-text-xs) / 1 var(--tr-font-mono); color: inherit;
+		background: color-mix(in srgb, currentColor 10%, transparent);
+		border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
+		border-bottom-width: 2px; border-radius: var(--tr-radius-sm);
+	}
+	.then { font: var(--tr-text-xs) var(--tr-font-sans); opacity: 0.7; margin: 0 2px; }
+</style>

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    /** A key combination such as `mod+shift+p`, or a sequence such as `g h`. `mod` shows as ⌘ on Apple platforms and Ctrl elsewhere. */
+    keys: string;
+    class?: string;
+};
+declare const Kbd: import("svelte").Component<$$ComponentProps, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/Link.svelte

@@ -31,7 +31,7 @@
 </a>
 
 <style>
-	.ln { color: var(--tr-primary); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; border-radius: var(--tr-radius-sm); }
+	.ln { color: var(--tr-primary-text, var(--tr-primary)); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; border-radius: var(--tr-radius-sm); }
 	.ln:hover { text-decoration-thickness: 2px; }
 	.ln:focus-visible { outline: 2px solid var(--tr-primary); outline-offset: 2px; }
 	.ic { display: inline-flex; vertical-align: -0.15em; margin-left: 0.2em; }

package/dist/components/List.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	/**
+	 * A prose list: a real `ul` (or `ol` when `ordered`) with spacing and marker styling from tokens.
+	 *
+	 * Markers: `disc` (default) and `ordered` numbering use native `list-style-type`, so they are
+	 * drawn by the browser. `check` and `dash` hide the native marker and draw one with `::before`.
+	 * `none` removes it. Ordered lists always number their items; `marker="none"` removes the numbers.
+	 * When the marker is removed or replaced (`check`, `dash`, `none`), `role="list"` is set so
+	 * Safari and VoiceOver still announce the list.
+	 *
+	 * Customise with CSS custom properties on the list or any ancestor:
+	 * `--tr-list-marker-color` (default `--tr-primary`) and `--tr-list-indent` (default `1.25rem`).
+	 * The default marker colour is the primary token, which reaches at least 3:1 contrast against
+	 * `--tr-surface` in both the light and the dark theme. A custom colour must meet that bar too.
+	 */
+	let {
+		ordered = false,
+		marker = 'disc',
+		gap = 2,
+		size = 'md',
+		class: klass = '',
+		children,
+		...rest
+	}: {
+		/** Render an `ol` with numbered items instead of a `ul`. */
+		ordered?: boolean;
+		/** Marker style. Ordered lists number their items, so only `none` changes them. */
+		marker?: 'disc' | 'check' | 'dash' | 'none';
+		/** Space between items, from the `--tr-space-*` scale. */
+		gap?: 1 | 2 | 3 | 4 | 5 | 6;
+		size?: 'sm' | 'md';
+		class?: string;
+		/** `ListItem`s, or plain `li` elements. */
+		children?: Snippet;
+	} & HTMLAttributes<HTMLUListElement | HTMLOListElement> = $props();
+
+	const effective = $derived(ordered ? (marker === 'none' ? 'none' : 'decimal') : marker);
+	const customMarker = $derived(effective === 'check' || effective === 'dash' || effective === 'none');
+</script>
+
+<svelte:element
+	this={ordered ? 'ol' : 'ul'}
+	class="list {klass}"
+	role={customMarker ? 'list' : undefined}
+	data-marker={effective}
+	data-size={size}
+	data-gap={gap}
+	{...rest}
+>
+	{@render children?.()}
+</svelte:element>
+
+<style>
+	.list {
+		margin: 0;
+		padding: 0 0 0 var(--tr-list-indent, 1.25rem);
+		color: var(--tr-on-surface);
+		font-size: var(--tr-text-md);
+		line-height: 1.5;
+		list-style-position: outside;
+	}
+	.list[data-size='sm'] { font-size: var(--tr-text-sm); }
+
+	.list[data-marker='disc'] { list-style-type: disc; }
+	.list[data-marker='decimal'] { list-style-type: decimal; }
+	.list[data-marker='none'],
+	.list[data-marker='check'],
+	.list[data-marker='dash'] { list-style-type: none; }
+
+	/* the native marker takes the marker colour */
+	.list[data-marker='disc'] > :global(li)::marker,
+	.list[data-marker='decimal'] > :global(li)::marker {
+		color: var(--tr-list-marker-color, var(--tr-primary));
+	}
+
+	/* spacing: space between items, from the token scale */
+	.list > :global(li + li) { margin-block-start: var(--tr-list-gap, 0); }
+	.list[data-gap='1'] { --tr-list-gap: var(--tr-space-1); }
+	.list[data-gap='2'] { --tr-list-gap: var(--tr-space-2); }
+	.list[data-gap='3'] { --tr-list-gap: var(--tr-space-3); }
+	.list[data-gap='4'] { --tr-list-gap: var(--tr-space-4); }
+	.list[data-gap='5'] { --tr-list-gap: var(--tr-space-5); }
+	.list[data-gap='6'] { --tr-list-gap: var(--tr-space-6); }
+
+	/* drawn markers for check and dash */
+	.list > :global(li) { position: relative; }
+	.list[data-marker='check'] > :global(li)::before,
+	.list[data-marker='dash'] > :global(li)::before {
+		content: '';
+		position: absolute;
+		left: calc(-1 * var(--tr-list-indent, 1.25rem));
+		top: 0.3em;
+		width: 1em;
+		height: 1em;
+		background-color: var(--tr-list-marker-color, var(--tr-primary));
+	}
+	.list[data-marker='check'] > :global(li)::before {
+		width: 0.9em;
+		height: 0.9em;
+		top: 0.3em;
+		-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+	}
+	.list[data-marker='dash'] > :global(li)::before {
+		left: calc(-1 * var(--tr-list-indent, 1.25rem) + 0.1em);
+		top: 0.7em;
+		width: 0.8em;
+		height: 2px;
+	}
+</style>