@heyramzi/ui 2.23.0 → 3.0.0

package/src/charts/trend-pill.css

@@ -1,36 +1,43 @@
+@layer theme, base, components, utilities;
+
 /* Styles for TrendPill. Plain stylesheet (see area-chart.css for why). All
    selectors are already namespaced under `.hr-trend`. */
 
-.hr-trend {
-  display: inline-flex;
-  /* WHY no shrink: the delta is the row's point, and it is only three characters wide. */
-  flex: 0 0 auto;
-  align-items: center;
-  gap: 0.1875rem;
-  padding: 0.1875rem 0.5rem;
-  border-radius: 999px;
-  border: 1px solid color-mix(in srgb, var(--stat-trend, currentColor) 22%, transparent);
-  background: color-mix(in srgb, var(--stat-trend, currentColor) 10%, transparent);
-  /* The raw hue measured 3.5:1 on its own wash, so it mixes toward --foreground,
-	   which fixes the contrast in both themes with one rule. */
-  color: color-mix(
-    in oklab,
-    var(--stat-trend, var(--muted-foreground, oklch(0.5 0.01 286))) 72%,
-    var(--foreground, oklch(0.2 0.01 286))
-  );
-  font-size: 0.75rem;
-  font-weight: 600;
-  font-feature-settings: "tnum";
-  line-height: 1.2;
-  white-space: nowrap;
-}
-.hr-trend[data-trend="up"] {
-  --stat-trend: var(--stat-up, oklch(0.6 0.13 163));
-}
-.hr-trend[data-trend="down"] {
-  --stat-trend: var(--stat-down, oklch(0.58 0.22 25));
-}
-.hr-trend-arrow {
-  font-size: 0.8125rem;
-  line-height: 1;
+@layer components {
+  .hr-trend {
+    display: inline-flex;
+    /* WHY no shrink: the delta is the row's point, and it is only three characters wide. */
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 0.1875rem;
+    padding: 0.1875rem 0.5rem;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--stat-trend, currentColor) 22%, transparent);
+    background: color-mix(in srgb, var(--stat-trend, currentColor) 10%, transparent);
+    /* The raw hue measured 3.5:1 on its own wash, so it mixes toward --foreground,
+  	   which fixes the contrast in both themes with one rule. */
+    color: color-mix(
+      in oklab,
+      var(--stat-trend, var(--muted-foreground, oklch(0.5 0.01 286))) 72%,
+      var(--foreground, oklch(0.2 0.01 286))
+    );
+    font-size: 0.75rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.2;
+    white-space: nowrap;
+  }
+
+  .hr-trend[data-trend="up"] {
+    --stat-trend: var(--stat-up, oklch(0.6 0.13 163));
+  }
+
+  .hr-trend[data-trend="down"] {
+    --stat-trend: var(--stat-down, oklch(0.58 0.22 25));
+  }
+
+  .hr-trend-arrow {
+    font-size: 0.8125rem;
+    line-height: 1;
+  }
 }

package/src/charts/trend-pill.svelte.d.ts

@@ -0,0 +1,14 @@
+import "./trend-pill.css";
+type Trend = "up" | "down" | "neutral";
+interface Props {
+    /** Percentage change. Its sign drives the color/arrow unless `trend` is set. */
+    delta: number;
+    /** Force the direction independent of `delta`'s sign. */
+    trend?: Trend;
+    /** Format the delta text. */
+    format?: (v: number) => string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/class-tokens.test.ts

@@ -0,0 +1,34 @@
+/*
+ * A missing space glues two classes into one Tailwind never matches: trace-line's pending state never dimmed (10 Nov 2026).
+ */
+
+import { readdirSync, readFileSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vite-plus/test";
+
+const src = dirname(fileURLToPath(import.meta.url));
+
+function svelteFiles(dir: string): string[] {
+  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) return svelteFiles(path);
+    return entry.name.endsWith(".svelte") ? [path] : [];
+  });
+}
+
+// A data-[...] or aria-[...] variant starts a class, so a letter or digit right before it is a lost space.
+const GLUED = /[a-z0-9](?:data|aria)-\[/g;
+
+describe("class strings", () => {
+  it("never glue a variant onto the class before it", () => {
+    const found = svelteFiles(src).flatMap((file) => {
+      const source = readFileSync(file, "utf8");
+      return [...source.matchAll(GLUED)].map((match) => {
+        const line = source.slice(0, match.index).split("\n").length;
+        return `${relative(src, file)}:${line}`;
+      });
+    });
+    expect(found).toEqual([]);
+  });
+});

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/count-chip.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "svelte/elements";
+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;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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/chip/tag-chip.svelte

@@ -8,7 +8,7 @@
 		/** A leading mark: a tag icon, a colour dot, an avatar. */
 		icon?: Snippet;
 		/** Shows a remove button after the label. */
-		onremove?: () => void;
+		onRemove?: () => void;
 		/** The remove button's accessible name. */
 		removeLabel?: string;
 		/**
@@ -22,7 +22,7 @@
 
 	let {
 		icon,
-		onremove,
+		onRemove,
 		removeLabel = "Remove",
 		removeFocusable = true,
 		children,
@@ -38,14 +38,14 @@
 	class={cn(
 		"inline-flex h-5 max-w-full shrink-0 items-center gap-1 overflow-hidden rounded-sm border border-border bg-muted/60 px-1.5 text-xs text-foreground",
 		"[&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:text-muted-foreground",
-		onremove && "pr-0.5",
+		onRemove && "pr-0.5",
 		className,
 	)}
 	{...restProps}
 >
 	{@render icon?.()}
 	<span class="min-w-0 truncate">{@render children?.()}</span>
-	{#if onremove}
+	{#if onRemove}
 		<!-- The glyph is 12px; the after: box takes the hit area to 24px without growing the chip. -->
 		<button
 			type="button"
@@ -55,9 +55,9 @@
 			onmousedown={(e) => {
 				if (!removeFocusable) e.preventDefault();
 			}}
-			onclick={onremove}
+			onclick={onRemove}
 		>
-			<X class="size-3" weight="bold" />
+			<X aria-hidden="true" class="size-3" weight="bold" />
 		</button>
 	{/if}
 </span>

package/src/components/chip/tag-chip.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> {
+    /** A leading mark: a tag icon, a colour dot, an avatar. */
+    icon?: Snippet;
+    /** Shows a remove button after the label. */
+    onRemove?: () => void;
+    /** The remove button's accessible name. */
+    removeLabel?: string;
+    /**
+     * False keeps the remove button out of the tab order and stops it taking focus on press,
+     * for a chip inside a field whose input owns the keyboard (Backspace removes).
+     */
+    removeFocusable?: boolean;
+    children?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/copy/copy-button.svelte

@@ -1,22 +1,11 @@
-<script lang="ts">
-	/**
-	 * The one copy control. No `text` prop draws the icon button; `text` draws the
-	 * chip. `agent` marks a payload written for a model.
-	 */
-
-	// =========================
-	// IMPORTS
-	// =========================
-	import { Check, Copy, StarFour } from "phosphor-svelte";
-	import { cn } from "../../lib/utils.js";
-	import { buttonVariants } from "../../shadcn/button/index.js";
+<script lang="ts" module>
 	import type { HTMLButtonAttributes } from "svelte/elements";
-	import { copyText } from "./clipboard.js";
 
-	// =========================
-	// TYPES
-	// =========================
-	interface Props extends Omit<HTMLButtonAttributes, "value" | "onclick" | "children"> {
+	// Exported so a wrapper's published declaration can name it (scripts/svelte-dts.mjs).
+	export interface CopyButtonProps extends Omit<
+		HTMLButtonAttributes,
+		"value" | "onclick" | "children"
+	> {
 		/**
 		 * What lands on the clipboard. A function runs on the click, so a long list
 		 * doesn't build every prompt up front. It may return a promise.
@@ -49,6 +38,21 @@
 		onCopied?: () => void;
 		class?: string;
 	}
+</script>
+
+<script lang="ts">
+	/**
+	 * The one copy control. No `text` prop draws the icon button; `text` draws the
+	 * chip. `agent` marks a payload written for a model.
+	 */
+
+	// =========================
+	// IMPORTS
+	// =========================
+	import { Check, Copy, StarFour } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+	import { buttonVariants } from "../../shadcn/button/index.js";
+	import { copyText } from "./clipboard.js";
 
 	// =========================
 	// PROPS
@@ -65,7 +69,7 @@
 		onCopied,
 		class: className,
 		...restProps
-	}: Props = $props();
+	}: CopyButtonProps = $props();
 
 	// =========================
 	// STATE

package/src/components/copy/copy-button.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { HTMLButtonAttributes } from "svelte/elements";
+export interface CopyButtonProps extends Omit<HTMLButtonAttributes, "value" | "onclick" | "children"> {
+    /**
+     * What lands on the clipboard. A function runs on the click, so a long list
+     * doesn't build every prompt up front. It may return a promise.
+     */
+    value: string | (() => string | Promise<string>);
+    /** Names the thing being copied, for a screen reader and the tooltip. */
+    label?: string;
+    /** Announced when the write lands; see `announce`. */
+    copiedLabel?: string;
+    /** The chip's visible text. Its presence is what makes this a chip. */
+    text?: string;
+    /** Marks the payload as an instruction for an AI rather than a raw string. */
+    agent?: boolean;
+    /**
+     * `sm` matches `OpenIn`, for the icon row inside a calendar chip. `md` is
+     * the 28px icon `Button`, for a toolbar that sits beside other icon buttons.
+     */
+    size?: "default" | "md" | "sm";
+    /**
+     * Ghost unless it sits beside an outline button; `inline` is for the chip,
+     * taking the surrounding text's font and colour.
+     */
+    variant?: "ghost" | "outline" | "inline";
+    /**
+     * `region` announces `copiedLabel` in a live region; `name` swaps the button's
+     * name to it (write it in full), for a page rendering hundreds of these.
+     */
+    announce?: "region" | "name";
+    /** Runs after a write that landed, for a toast the call site owns. */
+    onCopied?: () => void;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<CopyButtonProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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/infinite-scroll.svelte.d.ts

@@ -0,0 +1,37 @@
+import type { Snippet } from "svelte";
+declare function $$render<T>(): {
+    props: {
+        items: T[];
+        isDone: boolean;
+        isLoading: boolean;
+        children: Snippet<[{
+            items: T[];
+        }]>;
+        /** Skeleton snippet rendered while loading more */
+        skeleton?: Snippet;
+        onLoadMore: () => void;
+        threshold?: number;
+        loadingClass?: 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 $$Component: $$IsomorphicComponent;
+type $$Component<T> = InstanceType<typeof $$Component<T>>;
+export default $$Component;

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

@@ -0,0 +1,22 @@
+/**
+ * Shift+F10 or the ContextMenu key sends Bits UI's ContextMenu the `contextmenu` event Safari
+ * never fires for a key. Preventing the key stops Chrome sending a second one.
+ */
+export function openMenuFromKey(event: KeyboardEvent): void {
+  const menuKey = event.key === "ContextMenu" || (event.shiftKey && event.key === "F10");
+  if (!menuKey || event.defaultPrevented) return;
+  event.preventDefault();
+  const row = event.currentTarget as HTMLElement;
+  const box = row.getBoundingClientRect();
+  row.dispatchEvent(
+    new MouseEvent("contextmenu", {
+      bubbles: true,
+      cancelable: true,
+      clientX: box.left + 16,
+      clientY: box.top + box.height,
+    }),
+  );
+}
+
+/** What a row with a menu tells a screen reader about the keys that open it. */
+export const MENU_KEYS = "Shift+F10 ContextMenu";

package/src/components/data-table/pagination.svelte

@@ -11,10 +11,21 @@
 		onPageChange?: (page: number) => void;
 		/** If provided, renders <a> tags instead of buttons (for server-side pagination) */
 		buildHref?: (page: number) => string;
+		/** The accessible name of the icon-only previous and next buttons. */
+		previousLabel?: string;
+		nextLabel?: string;
 	}
 
 	// ========================= PROPS
-	let { page, pageSize, total, onPageChange, buildHref }: Props = $props();
+	let {
+		page,
+		pageSize,
+		total,
+		onPageChange,
+		buildHref,
+		previousLabel = "Previous page",
+		nextLabel = "Next page",
+	}: Props = $props();
 
 	// ========================= DERIVED
 	let pages = $derived(calcTotalPages(total, pageSize));
@@ -32,22 +43,34 @@
 		<div class="flex items-center gap-1">
 			{#if buildHref}
 				{#if hasPrev}
-					<Button variant="outline" size="sm" icon href={buildHref(page - 1)}>
-						<CaretLeft class="size-4" />
+					<Button
+						variant="outline"
+						size="sm"
+						icon
+						href={buildHref(page - 1)}
+						aria-label={previousLabel}
+					>
+						<CaretLeft class="size-4" aria-hidden="true" />
 					</Button>
 				{:else}
-					<Button variant="outline" size="sm" icon disabled>
-						<CaretLeft class="size-4" />
+					<Button variant="outline" size="sm" icon disabled aria-label={previousLabel}>
+						<CaretLeft class="size-4" aria-hidden="true" />
 					</Button>
 				{/if}
 				<span class="mx-2 tabular-nums">{page.toLocaleString()} / {pages.toLocaleString()}</span>
 				{#if hasNext}
-					<Button variant="outline" size="sm" icon href={buildHref(page + 1)}>
-						<CaretRight class="size-4" />
+					<Button
+						variant="outline"
+						size="sm"
+						icon
+						href={buildHref(page + 1)}
+						aria-label={nextLabel}
+					>
+						<CaretRight class="size-4" aria-hidden="true" />
 					</Button>
 				{:else}
-					<Button variant="outline" size="sm" icon disabled>
-						<CaretRight class="size-4" />
+					<Button variant="outline" size="sm" icon disabled aria-label={nextLabel}>
+						<CaretRight class="size-4" aria-hidden="true" />
 					</Button>
 				{/if}
 			{:else}
@@ -56,9 +79,10 @@
 					size="sm"
 					icon
 					disabled={!hasPrev}
+					aria-label={previousLabel}
 					onclick={() => onPageChange?.(page - 1)}
 				>
-					<CaretLeft class="size-4" />
+					<CaretLeft class="size-4" aria-hidden="true" />
 				</Button>
 				<span class="mx-2 tabular-nums">{page.toLocaleString()} / {pages.toLocaleString()}</span>
 				<Button
@@ -66,9 +90,10 @@
 					size="sm"
 					icon
 					disabled={!hasNext}
+					aria-label={nextLabel}
 					onclick={() => onPageChange?.(page + 1)}
 				>
-					<CaretRight class="size-4" />
+					<CaretRight class="size-4" aria-hidden="true" />
 				</Button>
 			{/if}
 		</div>

package/src/components/data-table/pagination.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    page: number;
+    pageSize: number;
+    total: number;
+    onPageChange?: (page: number) => void;
+    /** If provided, renders <a> tags instead of buttons (for server-side pagination) */
+    buildHref?: (page: number) => string;
+    /** The accessible name of the icon-only previous and next buttons. */
+    previousLabel?: string;
+    nextLabel?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/data-table/row-arrow.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -5,7 +5,9 @@
 	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";
+	import { MENU_KEYS, openMenuFromKey } from "./menu-key.js";
 
 	// =========================
 	// TYPES
@@ -47,14 +49,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>
 
@@ -64,25 +64,25 @@
 <ContextMenu.Root>
 	<ContextMenu.Trigger>
 		{#snippet child({ props })}
-			{@render children(props)}
+			{@render children({ ...props, onkeydown: openMenuFromKey, "aria-keyshortcuts": MENU_KEYS })}
 		{/snippet}
 	</ContextMenu.Trigger>
 	<ContextMenu.Content class="w-48">
 		{#if href}
 			<ContextMenu.Item onclick={handleOpen}>
-				<ArrowUpRight size={14} />
+				<ArrowUpRight aria-hidden="true" size={14} />
 				Open
 			</ContextMenu.Item>
 		{/if}
 		{#if href}
 			<ContextMenu.Item onclick={handleCopyLink}>
-				<LinkSimple size={14} />
+				<LinkSimple aria-hidden="true" size={14} />
 				{copyLinkLabel}
 			</ContextMenu.Item>
 		{/if}
 		{#if id}
 			<ContextMenu.Item onclick={handleCopyId}>
-				<Copy size={14} />
+				<Copy aria-hidden="true" size={14} />
 				{copyIdLabel}
 			</ContextMenu.Item>
 		{/if}
@@ -92,10 +92,10 @@
 		<HoldToConfirm
 			duration={800}
 			onConfirm={onDelete}
-			class="relative flex w-full cursor-default items-center justify-start gap-2 rounded-lg px-1.5 py-1 text-sm text-destructive outline-hidden"
+			class="relative flex w-full cursor-default items-center justify-start gap-2 rounded-lg px-1.5 py-1 text-sm text-destructive-ink outline-hidden"
 		>
 			{#snippet idle()}
-				<Trash size={14} />
+				<Trash aria-hidden="true" size={14} />
 				{deleteLabel}
 			{/snippet}
 			{#snippet holding()}

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+interface Props {
+    onDelete: () => void;
+    href?: string;
+    id?: string;
+    deleteLabel?: string;
+    copyLinkLabel?: string;
+    copyIdLabel?: string;
+    /** Called after a successful clipboard copy so consumers can show their own toast */
+    onCopied?: () => void;
+    children: Snippet<[Record<string, unknown>]>;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;