@heyramzi/ui 2.22.1 → 2.24.0

package/src/charts/bar-chart.svelte

@@ -8,6 +8,7 @@
 	import { scaleBand } from "d3-scale";
 	import Figure from "./figure.svelte";
 	import { TOOLTIP_GAP, TOOLTIP_TOP } from "./motion.js";
+	import { valueTick } from "./primitives/chart-utils.js";
 
 	// =========================
 	// TYPES
@@ -55,7 +56,7 @@
 		xKey,
 		yKey,
 		series,
-		color = "var(--chart-1)",
+		color = "var(--chart-series-1)",
 		colorOf,
 		height = 240,
 		orientation = "vertical",
@@ -134,16 +135,7 @@
 	});
 	const activeColor = $derived(active && colorOf ? colorOf(active) : color);
 
-	// WHY: "1,000,000" overflows the 48px gutter and the gap between ticks, so a long label
-	// falls back to "1M"; the tooltip keeps the full value.
-	const compact = new Intl.NumberFormat(undefined, {
-		notation: "compact",
-		maximumFractionDigits: 1,
-	});
-	function valueTick(v: number): string {
-		const full = formatValue(v);
-		return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
-	}
+	const tick = $derived(valueTick(formatValue));
 </script>
 
 <!-- =========================== -->
@@ -161,7 +153,7 @@
 	{#if showFigure}
 		<Figure
 			value={active ? valueOf(active) : total}
-			color="var(--chart-1)"
+			color="var(--chart-series-1)"
 			eyebrow={active ? formatX(active[xKey]) : "Total"}
 			format={formatValue}
 			size="md"
@@ -188,12 +180,12 @@
 				<Svg>
 					{#if horizontal}
 						<Axis placement="left" format={(v) => (formatTick ?? formatX)(v)} />
-						<Axis placement="bottom" format={(v) => valueTick(Number(v))} ticks={4} />
+						<Axis placement="bottom" format={(v) => tick(Number(v))} ticks={4} />
 						<g class="hr-bar-grid">
 							<Axis placement="bottom" grid rule={false} ticks={4} format={() => ""} />
 						</g>
 					{:else}
-						<Axis placement="left" format={(v) => valueTick(Number(v))} ticks={4} />
+						<Axis placement="left" format={(v) => tick(Number(v))} ticks={4} />
 						<Axis placement="bottom" format={(v) => (formatTick ?? formatX)(v)} />
 						<g class="hr-bar-grid">
 							<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />

package/src/charts/chart-tokens.css

@@ -16,6 +16,25 @@
   .hr-ring,
   .hr-gauge
 ) {
+  /* The categorical series palette. The brand leads, then hues spaced round the
+     wheel so neighbours never share a family (blue and orange first, the pair that
+     survives colour blindness). Each hue is a cat token pulled 15% toward the text
+     colour: darker on a light card, lighter on a dark one, so every series clears
+     3:1 against the card in both themes (lowest: teal, 3.6:1 light, 6.2:1 dark). */
+  --chart-series-1: var(--color-brand, oklch(0.28 0 0));
+  --chart-series-2: color-mix(in oklab, var(--color-cat-blue) 85%, var(--color-foreground));
+  --chart-series-3: color-mix(in oklab, var(--color-cat-orange) 85%, var(--color-foreground));
+  --chart-series-4: color-mix(in oklab, var(--color-cat-green) 85%, var(--color-foreground));
+  --chart-series-5: color-mix(in oklab, var(--color-cat-pink) 85%, var(--color-foreground));
+  --chart-series-6: color-mix(in oklab, var(--color-cat-teal) 85%, var(--color-foreground));
+  /* The palette's `--chart-N` names point here inside a chart, so a series passed as
+     `var(--chart-3)` gets a hue, not the brand's grey highlight. */
+  --chart-1: var(--chart-series-1);
+  --chart-2: var(--chart-series-2);
+  --chart-3: var(--chart-series-3);
+  --chart-4: var(--chart-series-4);
+  --chart-5: var(--chart-series-5);
+  --chart-6: var(--chart-series-6);
   --chart-label: var(--muted-foreground, oklch(0.5 0.01 286));
   --chart-grid: color-mix(in srgb, var(--border, oklch(0.5 0.01 286)) 50%, transparent);
   --chart-ease-out: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));

package/src/charts/dashboard/data-table.svelte

@@ -42,9 +42,14 @@
 	 * optional pager. A row opens by `rowHref` or `onRowClick`, stretched over the row from the lead.
 	 */
 	import { cn } from "../../lib/utils.js";
-	import DataSortHead from "./data-sort-head.svelte";
 	import RatingChip from "./rating-chip.svelte";
-	import { Pagination, paginateRows, totalPages } from "../../components/data-table/index.js";
+	import {
+		Pagination,
+		SortableHead,
+		paginateRows,
+		totalPages,
+		type SortState,
+	} from "../../components/data-table/index.js";
 	import {
 		dataTableClass,
 		dataTdClass,
@@ -69,8 +74,8 @@
 		minWidth?: string;
 		/** Omit for every row on one page. */
 		pageSize?: number;
-		sortKey?: string | null;
-		descending?: boolean;
+		/** The ranked column and its direction. Bind it; a column with `sort` sets it. */
+		sort?: SortState;
 		page?: number;
 		/** The row opens a page. The lead becomes the link. */
 		rowHref?: (row: T) => string;
@@ -92,8 +97,7 @@
 		leadWidth,
 		minWidth = "min-w-[48rem]",
 		pageSize,
-		sortKey = $bindable(null),
-		descending = $bindable(true),
+		sort = $bindable(null),
 		page = $bindable(1),
 		rowHref,
 		onRowClick,
@@ -116,9 +120,9 @@
 		"text-left outline-none after:absolute after:inset-0 after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-ring";
 
 	const sorted = $derived.by(() => {
-		const by = columns.find((column) => column.key === sortKey)?.sort;
-		if (!by) return rows;
-		const direction = descending ? -1 : 1;
+		const by = columns.find((column) => column.key === sort?.key)?.sort;
+		if (!by || !sort) return rows;
+		const direction = sort.direction === "desc" ? -1 : 1;
 		return [...rows].sort((left, right) => (by(left) - by(right)) * direction);
 	});
 
@@ -134,12 +138,8 @@
 
 	function rankBy(key: string) {
 		page = 1;
-		if (sortKey === key) {
-			descending = !descending;
-			return;
-		}
-		sortKey = key;
-		descending = true;
+		const flip = sort?.key === key && sort.direction === "desc";
+		sort = { key, direction: flip ? "asc" : "desc" };
 	}
 
 	function isMuted(column: DataColumn<T>, row: T) {
@@ -168,16 +168,16 @@
 			<th scope="col" class={dataThClass}>{leadLabel}</th>
 			{#each columns as column (column.key)}
 				{#if column.sort}
-					<DataSortHead
+					<SortableHead
+						key={column.key}
+						{sort}
+						onSort={rankBy}
 						numeric={column.align !== "start"}
-						class={columnClass(column)}
-						active={sortKey === column.key}
-						{descending}
-						onSort={() => rankBy(column.key)}
+						class={cn(column.align === "start" ? dataThClass : dataThNumClass, columnClass(column))}
 						title={column.hint}
 					>
 						{column.label}
-					</DataSortHead>
+					</SortableHead>
 				{:else}
 					<th
 						scope="col"

package/src/charts/dashboard/index.ts

@@ -1,12 +1,10 @@
-export { default as DataPanel } from "./data-panel.svelte";
-export { default as DataSortHead } from "./data-sort-head.svelte";
+export { default as DataPanel } from "../../lib/panel.svelte";
 export {
   default as DataTable,
   type DataColumn,
   type DataColumnBreakpoint,
 } from "./data-table.svelte";
 export { default as RatingChip } from "./rating-chip.svelte";
-export { default as DashboardEmpty } from "./dashboard-empty.svelte";
 export { default as DashboardSection } from "./dashboard-section.svelte";
 export { default as PanelGrid } from "./panel-grid.svelte";
 export { default as PeriodFilter } from "./period-filter.svelte";

package/src/charts/dashboard/rating-chip.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-	/*
-	 * One A to E grade on one colour scale, so a C means one thing everywhere.
-	 * Light mode takes the 800 shades, since amber on cream fails contrast.
-	 */
+	// One A to E grade on the shared tone scale, so a C means one thing everywhere.
+	import { TONE_TINT, type Tone } from "../../lib/tone.js";
 	import { cn } from "../../lib/utils.js";
 
 	interface Props {
@@ -14,19 +12,19 @@
 
 	let { grade, hint, class: className }: Props = $props();
 
-	const TONE: Record<string, string> = {
-		A: "bg-success/12 text-success-800 dark:text-success",
-		B: "bg-success/12 text-success-800 dark:text-success",
-		C: "bg-muted text-foreground",
-		D: "bg-warning/18 text-warning-800 dark:text-warning",
-		E: "bg-destructive/12 text-destructive",
+	const GRADE_TONE: Record<string, Tone> = {
+		A: "success",
+		B: "success",
+		C: "neutral",
+		D: "warning",
+		E: "destructive",
 	};
 </script>
 
 <span
 	class={cn(
 		"inline-flex h-6 min-w-6 items-center justify-center rounded-md px-1.5 text-xs font-semibold tabular-nums",
-		TONE[grade] ?? TONE.C,
+		TONE_TINT[GRADE_TONE[grade] ?? "neutral"],
 		className,
 	)}
 	title={hint}

package/src/charts/dashboard/stat-tile.svelte

@@ -14,7 +14,6 @@
 	import Sparkline from "../sparkline.svelte";
 	import type { Snippet } from "svelte";
 	import { cn } from "../../lib/utils.js";
-	import { Icon } from "../../components/icon/index.js";
 	import type { PhosphorIcon } from "../../lib/icon-types.js";
 
 	// =========================
@@ -87,7 +86,7 @@
 		shareLabel,
 		color,
 		series,
-		icon,
+		icon: Icon,
 		href,
 		hrefLabel,
 		target = "_blank",
@@ -124,7 +123,7 @@
 	)}
 >
 	{#snippet tileIcon()}
-		{#if icon}<Icon {icon} size={14} class="shrink-0" />{/if}
+		{#if Icon}<Icon size={14} class="shrink-0" />{/if}
 	{/snippet}
 
 	<NumberChart
@@ -135,7 +134,7 @@
 		{share}
 		{shareLabel}
 		{color}
-		icon={icon ? tileIcon : undefined}
+		icon={Icon ? tileIcon : undefined}
 		size={lead ? "lg" : "md"}
 		caption={hint}
 		class={cn(
@@ -159,7 +158,7 @@
 				data={points}
 				xKey="i"
 				yKey="v"
-				color={color ?? "var(--chart-1)"}
+				color={color ?? "var(--chart-series-1)"}
 				height={48}
 				bare
 			/>

package/src/charts/donut-chart.svelte

@@ -130,7 +130,7 @@
 									cornerRadius={3}
 									fill={colorKey
 										? String((arc.data as TData)[colorKey])
-										: `var(--chart-${(i % 5) + 1})`}
+										: `var(--chart-series-${(i % 6) + 1})`}
 									class="hr-donut-arc"
 									data-hovered={isHovered ? "" : undefined}
 									style="opacity: {dimmed ? 0.4 : 1}; translate: {dx}px {dy}px"

package/src/charts/gauge-chart.svelte

@@ -90,7 +90,7 @@
 		endAngle = 405,
 		useGradient = false,
 		activeGradient,
-		activeFill = "var(--chart-1)",
+		activeFill = "var(--chart-series-1)",
 		inactiveFill,
 		activeFillOpacity = 1,
 		inactiveFillOpacity = 0.12,

package/src/charts/line-chart.svelte

@@ -22,6 +22,7 @@
 	import Figure from "./figure.svelte";
 	import HoverFocus from "./hover-focus.svelte";
 	import { DOMAIN_MOTION, TOOLTIP_GAP, TOOLTIP_TOP } from "./motion.js";
+	import { valueTick } from "./primitives/chart-utils.js";
 	import Reveal from "./reveal.svelte";
 
 	// =========================
@@ -68,7 +69,7 @@
 		xKey,
 		yKey,
 		series: seriesInput,
-		color = "var(--chart-1)",
+		color = "var(--chart-series-1)",
 		height = 240,
 		smooth = true,
 		edgeFade = true,
@@ -104,7 +105,7 @@
 			? seriesInput.map((s, i) => ({
 					key: s.key,
 					label: s.label ?? s.key,
-					color: s.color ?? `var(--chart-${(i % 5) + 1})`,
+					color: s.color ?? `var(--chart-series-${(i % 6) + 1})`,
 				}))
 			: yKey
 				? [{ key: yKey, label: yKey, color }]
@@ -119,15 +120,7 @@
 	const fallback = $derived(data.length > 0 ? data[data.length - 1] : null);
 	const display = $derived(active ?? fallback);
 
-	// A long tick label ("1,000,000") falls back to "1M" so the left gutter holds it.
-	const compact = new Intl.NumberFormat(undefined, {
-		notation: "compact",
-		maximumFractionDigits: 1,
-	});
-	function valueTick(v: number): string {
-		const full = formatValue(v);
-		return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
-	}
+	const tick = $derived(valueTick(formatValue));
 	// WHY: a dashed tail is two splines sharing the boundary point so the solid
 	// and dashed segments meet without a gap.
 	const hasTail = $derived(
@@ -200,7 +193,7 @@
 				motion={DOMAIN_MOTION}
 			>
 				<Svg>
-					<Axis placement="left" format={(v) => valueTick(Number(v))} ticks={4} />
+					<Axis placement="left" format={(v) => tick(Number(v))} ticks={4} />
 					<Axis placement="bottom" format={(v) => formatX(v)} />
 					<g class="hr-line-grid">
 						<Axis placement="left" grid rule={false} ticks={4} format={() => ""} />

package/src/charts/number-chart.svelte

@@ -97,7 +97,7 @@
 		deltaThreshold = 0.5,
 		share,
 		shareLabel,
-		color = "var(--chart-1)",
+		color = "var(--chart-series-1)",
 		size = "md",
 		caption,
 		negative = false,

package/src/charts/primitives/chart-utils.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from "vite-plus/test";
+import { valueTick } from "./chart-utils.js";
+
+describe("valueTick", () => {
+  const tick = valueTick((v) => v.toLocaleString("en-US"));
+
+  it("keeps a label of 6 characters or fewer as the formatter wrote it", () => {
+    expect(tick(1234)).toBe("1,234");
+    expect(tick(12345)).toBe("12,345");
+  });
+
+  it("shortens a longer label to compact notation", () => {
+    expect(tick(1_000_000)).toBe("1M");
+    expect(tick(1_234_567)).toBe("1.2M");
+    expect(tick(-12345)).toBe("-12.3K");
+  });
+});

package/src/charts/primitives/chart-utils.ts

@@ -39,6 +39,22 @@ export function getPayloadConfigFromPayload(
   return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config];
 }
 
+const compact = new Intl.NumberFormat(undefined, {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+/**
+ * An axis tick formatter. "1,000,000" overflows the 48px gutter and the gap between ticks, so a
+ * label over 6 characters falls back to "1M"; the tooltip keeps the full value.
+ */
+export function valueTick(format: (v: number) => string): (v: number) => string {
+  return (v) => {
+    const full = format(v);
+    return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
+  };
+}
+
 type ChartContextValue = {
   config: ChartConfig;
 };

package/src/charts/ring-chart.svelte

@@ -16,7 +16,7 @@
 		value: number;
 		/** Denominator for the progress arc. */
 		maxValue: number;
-		/** CSS color or var. Falls back to --chart-1..5. */
+		/** CSS color or var. Falls back to --chart-series-1..6. */
 		color?: string;
 	};
 
@@ -82,7 +82,7 @@
 				index: i,
 				radius,
 				progress,
-				color: d.color ?? `var(--chart-${(i % 5) + 1})`,
+				color: d.color ?? `var(--chart-series-${(i % 6) + 1})`,
 			};
 		}),
 	);

package/src/charts/sparkline.svelte

@@ -54,7 +54,7 @@
 		data: input,
 		xKey,
 		yKey,
-		color = "var(--chart-1)",
+		color = "var(--chart-series-1)",
 		height = 44,
 		smooth = true,
 		endCap = true,

package/src/charts/stat-card.svelte

@@ -81,7 +81,7 @@
 		trend,
 		caption,
 		figureOnly = false,
-		color = "var(--chart-1)",
+		color = "var(--chart-series-1)",
 		height = 150,
 		smooth = true,
 		edgeFade = true,

package/src/charts/time-series-chart.svelte

@@ -62,8 +62,8 @@
 		data,
 		label = "Value",
 		label2,
-		color = "var(--chart-1)",
-		color2 = "var(--muted-foreground)",
+		color = "var(--chart-series-1)",
+		color2 = "var(--chart-series-2)",
 		formatValue = (v) => v.toLocaleString(),
 		formatValue2,
 		height = 280,
@@ -152,7 +152,7 @@
 						<Spline
 							y="value2"
 							curve={curveMonotoneX}
-							style="stroke: {color2}; stroke-dasharray: 4 4; stroke-width: 1; fill: none"
+							style="stroke: {color2}; stroke-dasharray: 4 4; stroke-width: 1.5; fill: none"
 						/>
 					{/if}
 				</Reveal>
@@ -168,9 +168,13 @@
 						})}
 					/>
 					<Tooltip.List>
-						<Tooltip.Item {label} value={formatValue(d.value)} />
+						<Tooltip.Item {label} {color} value={formatValue(d.value)} />
 						{#if label2 && d.value2 !== undefined}
-							<Tooltip.Item label={label2} value={(formatValue2 ?? formatValue)(d.value2)} />
+							<Tooltip.Item
+								label={label2}
+								color={color2}
+								value={(formatValue2 ?? formatValue)(d.value2)}
+							/>
 						{/if}
 					</Tooltip.List>
 				{/snippet}

package/src/components/chip/count-chip.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../lib/utils.js";
+
+	interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> {
+		count: number;
+		/** `sm` is 16px, for a count inside a control or on a button; `md` is 20px, beside a heading. */
+		size?: "sm" | "md";
+		/** `brand` marks a count that is on: an applied filter, the selected segment. */
+		tone?: "neutral" | "brand";
+		class?: string;
+	}
+
+	let { count, size = "md", tone = "neutral", class: className, ...restProps }: Props = $props();
+
+	const SIZE = { sm: "h-4 min-w-4", md: "h-5 min-w-5" };
+	const TONE = {
+		neutral: "bg-foreground/6 text-muted-foreground",
+		brand: "bg-brand/12 text-brand dark:text-brand-light",
+	};
+</script>
+
+<!-- A count is a pill (DESIGN.md rule 15). Min width equals height with 4px padding, so one digit
+     draws a circle, not an ellipse. -->
+<span
+	class={cn(
+		"inline-grid shrink-0 place-items-center rounded-full px-1 text-xs leading-none font-medium tabular-nums",
+		SIZE[size],
+		TONE[tone],
+		className,
+	)}
+	{...restProps}
+>
+	{count.toLocaleString()}
+</span>

package/src/components/chip/index.ts

@@ -1 +1,2 @@
+export { default as CountChip } from "./count-chip.svelte";
 export { default as TagChip } from "./tag-chip.svelte";

package/src/components/data-table/data-table.ts

@@ -26,7 +26,7 @@ export function anyContainsQuery(values: Array<string | null | undefined>, query
 // ========================= TYPES
 export type SortDirection = "asc" | "desc";
 
-export type SortState<T> = {
+export type SortState<T = Record<string, unknown>> = {
   key: keyof T & string;
   direction: SortDirection;
 } | null;

package/src/components/data-table/row-context-menu.svelte

@@ -5,6 +5,7 @@
 	import * as ContextMenu from "../../shadcn/context-menu/index.js";
 	import { HoldToConfirm } from "../hold-to-confirm/index.js";
 	import { ArrowUpRight, Copy, LinkSimple, Trash } from "phosphor-svelte";
+	import { copyText } from "../copy/clipboard.js";
 	import type { Snippet } from "svelte";
 
 	// =========================
@@ -47,14 +48,12 @@
 	// message, a doc or an agent prompt, none of which can resolve "/clients/42".
 	async function handleCopyLink() {
 		if (!href) return;
-		await navigator.clipboard.writeText(new URL(href, window.location.origin).href);
-		onCopied?.();
+		if (await copyText(new URL(href, window.location.origin).href)) onCopied?.();
 	}
 
 	async function handleCopyId() {
 		if (!id) return;
-		await navigator.clipboard.writeText(id);
-		onCopied?.();
+		if (await copyText(id)) onCopied?.();
 	}
 </script>
 

package/src/components/data-table/sortable-head.svelte

@@ -1,4 +1,10 @@
 <script lang="ts" generics="T">
+	/*
+	 * The one sortable column head, for TableView, the dashboard DataTable and hand-built
+	 * tables. Every sortable head shows its caret: hover-only makes people hunt.
+	 */
+
+	// ========================= IMPORTS
 	import type { Snippet } from "svelte";
 	import { CaretDown, CaretUp, CaretUpDown } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
@@ -8,21 +14,36 @@
 	interface Props {
 		key: keyof T & string;
 		sort: SortState<T>;
+		/** Called on click and on Enter/Space. Choosing the next direction is the caller's. */
 		onSort: (key: keyof T & string) => void;
+		/** Numbers right-align to their digits, so their caret leads the label. */
+		numeric?: boolean;
+		/** The long form of an abbreviated head, as the browser tooltip. */
+		title?: string;
 		class?: string;
+		style?: string;
 		children: Snippet;
 	}
 
 	// ========================= PROPS
-	let { key, sort, onSort, class: className, children }: Props = $props();
+	let {
+		key,
+		sort,
+		onSort,
+		numeric = false,
+		title,
+		class: className,
+		style,
+		children,
+	}: Props = $props();
 
 	// ========================= DERIVED
-	let active = $derived(sort?.key === key);
-	let direction = $derived<SortDirection | null>(sort && active ? sort.direction : null);
+	let direction = $derived<SortDirection | null>(sort?.key === key ? sort.direction : null);
 	let ariaSort = $derived<"ascending" | "descending" | "none">(
 		direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none",
 	);
 
+	// ========================= FUNCTIONS
 	function handleKeydown(e: KeyboardEvent) {
 		if (e.key === "Enter" || e.key === " ") {
 			e.preventDefault();
@@ -33,9 +54,14 @@
 
 <th
 	data-slot="table-head"
+	scope="col"
+	{title}
+	{style}
 	class={cn(
 		"text-muted-foreground h-8 px-2 text-left align-middle text-xs font-medium whitespace-nowrap select-none",
 		"cursor-pointer transition-colors duration-quick ease-smooth-out hover:bg-foreground/4 motion-reduce:transition-none",
+		"outline-none focus-visible:shadow-(--ring-focus-inset)",
+		numeric && "text-right",
 		className,
 	)}
 	tabindex="0"
@@ -43,14 +69,23 @@
 	onclick={() => onSort(key)}
 	onkeydown={handleKeydown}
 >
-	<span class="inline-flex items-center gap-1">
-		{@render children()}
-		{#if direction === "asc"}
-			<CaretUp class="size-3.5 text-foreground" weight="bold" />
-		{:else if direction === "desc"}
-			<CaretDown class="size-3.5 text-foreground" weight="bold" />
+	<!-- Pinned to the line's top, not its baseline: a leading caret gave the span the icon's foot
+	     as its baseline and lifted a numeric label 1.5px above the plain heads beside it. -->
+	<span class="inline-flex items-center gap-1 align-top">
+		{#if numeric}
+			{@render caret()}{@render children()}
 		{:else}
-			<CaretUpDown class="size-3.5 text-muted-foreground" />
+			{@render children()}{@render caret()}
 		{/if}
 	</span>
 </th>
+
+{#snippet caret()}
+	{#if direction === "asc"}
+		<CaretUp class="size-3.5 shrink-0 text-foreground" weight="bold" aria-hidden="true" />
+	{:else if direction === "desc"}
+		<CaretDown class="size-3.5 shrink-0 text-foreground" weight="bold" aria-hidden="true" />
+	{:else}
+		<CaretUpDown class="size-3.5 shrink-0 text-muted-foreground" aria-hidden="true" />
+	{/if}
+{/snippet}

package/src/components/language-flag/flags.ts

@@ -0,0 +1,5 @@
+/** Language code to flag image. The host serves these files from /flags. */
+export const LANGUAGE_FLAGS: Record<string, string> = {
+  en: "/flags/US.svg",
+  fr: "/flags/FR.svg",
+};

package/src/components/language-flag/index.ts

@@ -1 +1,2 @@
 export { default as LanguageFlag } from "./language-flag.svelte";
+export { LANGUAGE_FLAGS } from "./flags.js";