@heyramzi/ui 2.24.0 → 3.0.0

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/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

@@ -7,6 +7,7 @@
 	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
@@ -63,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}
@@ -91,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;

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

@@ -8,6 +8,7 @@
 	import type { Snippet } from "svelte";
 	import { CaretDown, CaretUp, CaretUpDown } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
+	import * as Table from "../../shadcn/table/index.js";
 	import type { SortDirection, SortState } from "./data-table.js";
 
 	// ========================= TYPES
@@ -42,43 +43,37 @@
 	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();
-			onSort(key);
-		}
-	}
 </script>
 
-<th
-	data-slot="table-head"
+<!-- A real button, so a screen reader calls the head a control; aria-sort stays on the th.
+     Its ::after covers the cell, so the whole head takes the click. -->
+<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",
+		"relative 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)",
+		"has-[button:focus-visible]:shadow-(--ring-focus-inset)",
 		numeric && "text-right",
 		className,
 	)}
-	tabindex="0"
 	aria-sort={ariaSort}
-	onclick={() => onSort(key)}
-	onkeydown={handleKeydown}
 >
 	<!-- 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">
+	<button
+		type="button"
+		class="inline-flex cursor-pointer items-center gap-1 align-top outline-none after:absolute after:inset-0 focus-visible:shadow-none"
+		onclick={() => onSort(key)}
+	>
 		{#if numeric}
 			{@render caret()}{@render children()}
 		{:else}
 			{@render children()}{@render caret()}
 		{/if}
-	</span>
-</th>
+	</button>
+</Table.Head>
 
 {#snippet caret()}
 	{#if direction === "asc"}

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

@@ -0,0 +1,38 @@
+import type { Snippet } from "svelte";
+import type { SortState } from "./data-table.js";
+declare function $$render<T>(): {
+    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;
+    };
+    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/table-skeleton.svelte.d.ts

@@ -0,0 +1,18 @@
+type ColumnDef = {
+    width?: string;
+    align?: "left" | "center" | "right";
+    /** Show a small circle before the skeleton bar (e.g. logo/avatar column) */
+    circle?: boolean;
+};
+interface Props {
+    /** Number of skeleton rows to render */
+    rows?: number;
+    /** Column definitions control skeleton widths and alignment */
+    columns?: ColumnDef[];
+    /** Simple mode: just specify column count */
+    columnCount?: number;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/docs/doc-page.svelte

@@ -17,7 +17,11 @@
 		title: string;
 		/** One line under the title. Optional: a page with nothing to add leaves it out. */
 		summary?: string;
-		icon?: Component<{ class?: string; weight?: "bold" }>;
+		icon?: Component<{
+			class?: string;
+			weight?: "bold";
+			"aria-hidden"?: boolean | "true" | "false";
+		}>;
 		/** Where the page lives, as a reader would say it: "Marketing / Reports". */
 		section?: string;
 		/** Already worded and localised: "Updated 30 Jul 2026". */
@@ -95,7 +99,7 @@
 				items={headings}
 				active={spy.active}
 				label={contentsLabel}
-				onselect={(id) => spy.jump(id)}
+				onSelect={(id) => spy.jump(id)}
 			/>
 		</div>
 	{/if}
@@ -112,7 +116,7 @@
 						<span
 							class="flex size-11 shrink-0 items-center justify-center rounded-xl bg-brand-100 text-brand dark:bg-brand-800/30 dark:text-brand-light"
 						>
-							<Icon class="size-5" weight="bold" />
+							<Icon aria-hidden="true" class="size-5" weight="bold" />
 						</span>
 					{/if}
 					<div class="min-w-0 flex-1">
@@ -160,7 +164,7 @@
 					items={headings}
 					active={spy.active}
 					label={contentsLabel}
-					onselect={(id) => spy.jump(id)}
+					onSelect={(id) => spy.jump(id)}
 				/>
 			</aside>
 		{/if}

package/src/components/docs/doc-page.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Component, Snippet } from "svelte";
+import { type DocHeading, type LocateHeading } from "./scroll-spy.svelte.js";
+interface Props {
+    title: string;
+    /** One line under the title. Optional: a page with nothing to add leaves it out. */
+    summary?: string;
+    icon?: Component<{
+        class?: string;
+        weight?: "bold";
+        "aria-hidden"?: boolean | "true" | "false";
+    }>;
+    /** Where the page lives, as a reader would say it: "Marketing / Reports". */
+    section?: string;
+    /** Already worded and localised: "Updated 30 Jul 2026". */
+    updated?: string;
+    /** Room at the right of the title for a page's own controls. */
+    actions?: Snippet;
+    /** The document's h2s, which the contents rail walks. Under two, there's no rail. */
+    headings?: DocHeading[];
+    /** The rail's name: "On this page". */
+    contentsLabel: string;
+    /** Supplied by a document that lives in a frame; the default reads the DOM by id. */
+    locate?: LocateHeading;
+    /** Changes when the page is swapped without navigation, so the pane returns to the top. */
+    resetKey?: string;
+    /** The reading column's width. `wide` is for a document that brings tables and boards. */
+    measure?: "prose" | "wide";
+    /** The scroll box, for a document that has to place things inside it. */
+    scroller?: HTMLElement | null;
+    children: Snippet;
+}
+declare const $$Component: Component<Props, {}, "scroller">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;