@heyramzi/ui 3.7.1 → 3.9.0

package/src/shadcn/dialog/dialog-content.svelte

@@ -14,12 +14,15 @@
 		portalProps,
 		children,
 		showCloseButton = true,
+		closeLabel = "Close",
 		overlayClass,
 		...restProps
 	}: WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
 		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
 		children: Snippet;
 		showCloseButton?: boolean;
+		/** What a screen reader calls the built-in close button, in the app's language. */
+		closeLabel?: string;
 		/** Classes for the backdrop this dialog mounts, which is its sibling in the
 		 *  portal and so cannot be reached from the content's own class. */
 		overlayClass?: string;
@@ -62,7 +65,7 @@
 						{...props}
 					>
 						<X aria-hidden="true" size={16} />
-						<span class="sr-only">Close</span>
+						<span class="sr-only">{closeLabel}</span>
 					</Button>
 				{/snippet}
 			</DialogPrimitive.Close>

package/src/shadcn/dialog/dialog-content.svelte.d.ts

@@ -7,6 +7,8 @@ type $$ComponentProps = WithoutChildrenOrChild<DialogPrimitive.ContentProps> & {
     portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DialogPortal>>;
     children: Snippet;
     showCloseButton?: boolean;
+    /** What a screen reader calls the built-in close button, in the app's language. */
+    closeLabel?: string;
     /** Classes for the backdrop this dialog mounts, which is its sibling in the
      *  portal and so cannot be reached from the content's own class. */
     overlayClass?: string;

package/src/shadcn/dialog/dialog-footer.svelte

@@ -9,10 +9,13 @@
 		class: className,
 		children,
 		showCloseButton = false,
+		closeLabel = "Close",
 		band = false,
 		...restProps
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		showCloseButton?: boolean;
+		/** The close button's text, in the app's language. */
+		closeLabel?: string;
 		/**
 		 * Draw the footer as a band: a hairline on top and a quiet surface out to both edges
 		 * and the bottom corners. It cancels the content's `--dialog-pad` with a negative
@@ -43,7 +46,7 @@
 	{#if showCloseButton}
 		<DialogPrimitive.Close>
 			{#snippet child({ props })}
-				<Button variant="outline" {...props}>Close</Button>
+				<Button variant="outline" {...props}>{closeLabel}</Button>
 			{/snippet}
 		</DialogPrimitive.Close>
 	{/if}

package/src/shadcn/dialog/dialog-footer.svelte.d.ts

@@ -2,6 +2,8 @@ import { type WithElementRef } from "../../lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     showCloseButton?: boolean;
+    /** The close button's text, in the app's language. */
+    closeLabel?: string;
     /**
      * Draw the footer as a band: a hairline on top and a quiet surface out to both edges
      * and the bottom corners. It cancels the content's `--dialog-pad` with a negative

package/src/shadcn/input/input.svelte

@@ -6,7 +6,7 @@
 
 	type Props = WithElementRef<
 		Omit<HTMLInputAttributes, "type"> &
-			({ type: "file"; files?: FileList } | { type?: InputType; files?: undefined })
+			({ type: "file"; files?: FileList | null } | { type?: InputType; files?: undefined })
 	>;
 
 	let {

package/src/shadcn/input/input.svelte.d.ts

@@ -3,7 +3,7 @@ import { type WithElementRef } from "../../lib/utils.js";
 type InputType = Exclude<HTMLInputTypeAttribute, "file">;
 type Props = WithElementRef<Omit<HTMLInputAttributes, "type"> & ({
     type: "file";
-    files?: FileList;
+    files?: FileList | null;
 } | {
     type?: InputType;
     files?: undefined;

package/src/shadcn/input/secret-input.svelte

@@ -14,12 +14,26 @@
 		variant?: "lock" | "obfuscate";
 		value?: string;
 		class?: string;
+		/** The reveal button's name while the value is hidden, in the app's language. */
+		revealLabel?: string;
+		/** The same button's name while the value shows. */
+		hideLabel?: string;
+		/** The name of the `obfuscate` box. */
+		maskedLabel?: string;
 	};
 
 	// =========================
 	// PROPS
 	// =========================
-	let { variant = "lock", value = $bindable(""), class: className, ...rest }: Props = $props();
+	let {
+		variant = "lock",
+		value = $bindable(""),
+		class: className,
+		revealLabel = "Reveal value",
+		hideLabel = "Hide value",
+		maskedLabel = "Encrypted value",
+		...rest
+	}: Props = $props();
 
 	// =========================
 	// STATE
@@ -46,7 +60,7 @@
 			"border-input bg-muted/30 text-muted-foreground flex h-8 w-full items-center gap-2 rounded-lg border px-2.5 py-1 font-mono text-sm",
 			className,
 		)}
-		aria-label="Encrypted value"
+		aria-label={maskedLabel}
 	>
 		<LockKey aria-hidden="true" class="text-muted-foreground/70 size-3.5 shrink-0" />
 		<span class="truncate">{masked || "••••••••"}</span>
@@ -61,7 +75,7 @@
 		/>
 		<button
 			type="button"
-			aria-label={revealed ? "Hide value" : "Reveal value"}
+			aria-label={revealed ? hideLabel : revealLabel}
 			class="text-muted-foreground hover:text-foreground absolute inset-y-0 right-0 flex w-8 items-center justify-center rounded-r-lg transition-colors"
 			onclick={() => (revealed = !revealed)}
 		>

package/src/shadcn/input/secret-input.svelte.d.ts

@@ -3,6 +3,12 @@ type Props = Omit<HTMLInputAttributes, "type" | "value" | "class" | "files"> & {
     variant?: "lock" | "obfuscate";
     value?: string;
     class?: string;
+    /** The reveal button's name while the value is hidden, in the app's language. */
+    revealLabel?: string;
+    /** The same button's name while the value shows. */
+    hideLabel?: string;
+    /** The name of the `obfuscate` box. */
+    maskedLabel?: string;
 };
 declare const $$Component: import("svelte").Component<Props, {}, "value">;
 type $$Component = ReturnType<typeof $$Component>;

package/src/shadcn/input-group/input-group-input.svelte.d.ts

@@ -1,6 +1,6 @@
 declare const $$Component: import("svelte").Component<(Omit<import("svelte/elements").HTMLInputAttributes, "type"> & ({
     type: "file";
-    files?: FileList;
+    files?: FileList | null;
 } | {
     type?: "number" | "hidden" | "color" | "text" | "search" | "submit" | "reset" | "button" | "checkbox" | "radio" | (string & {}) | "tel" | "url" | "email" | "date" | "image" | "time" | "month" | "datetime-local" | "password" | "range" | "week";
     files?: undefined;

package/src/shadcn/input-otp/input-otp-group.svelte

@@ -13,6 +13,7 @@
 <div
 	bind:this={ref}
 	data-slot="input-otp-group"
+	aria-hidden="true"
 	class={cn("flex items-center", className)}
 	{...restProps}
 >

package/src/shadcn/input-otp/input-otp-slot.svelte

@@ -22,5 +22,9 @@
 	)}
 	{...restProps}
 >
-	{cell.char}
+	{#snippet child({ props })}
+		<div {...props} data-active={cell.isActive}>
+			{cell.char}
+		</div>
+	{/snippet}
 </InputOTPPrimitive.Cell>

package/src/shadcn/input-otp/input-otp.svelte

@@ -4,6 +4,7 @@
 
 	let {
 		ref = $bindable(null),
+		inputRef = $bindable(null),
 		class: className,
 		value = $bindable(""),
 		...restProps
@@ -12,6 +13,7 @@
 
 <InputOTPPrimitive.Root
 	bind:ref
+	bind:inputRef
 	bind:value
 	data-slot="input-otp"
 	class={cn(

package/src/shadcn/input-otp/input-otp.svelte.d.ts

@@ -1,4 +1,4 @@
 import { PinInput as InputOTPPrimitive } from "bits-ui";
-declare const $$Component: import("svelte").Component<InputOTPPrimitive.RootProps, {}, "value" | "ref">;
+declare const $$Component: import("svelte").Component<InputOTPPrimitive.RootProps, {}, "value" | "ref" | "inputRef">;
 type $$Component = ReturnType<typeof $$Component>;
 export default $$Component;

package/src/shadcn/message-scroller/message-scroller-button.svelte

@@ -14,12 +14,20 @@
 		variant = "outline",
 		size = "sm",
 		onclick,
+		label,
 		...restProps
 	}: MessageScrollerPrimitive.ButtonProps & {
 		variant?: ButtonVariant;
 		size?: ButtonSize;
+		/**
+		 * What a screen reader calls the icon-only button, in the app's language.
+		 * Defaults to "Scroll to end", or "Scroll to start" when `direction="start"`.
+		 */
+		label?: string;
 	} = $props();
 
+	const srLabel = $derived(label ?? (direction === "end" ? "Scroll to end" : "Scroll to start"));
+
 	// The primitive blurs the button and it turns inert at the end, dropping focus to the page. Focus goes to the thread instead.
 	function handleClick(event: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {
 		onclick?.(event);
@@ -54,9 +62,7 @@
 					{@render children()}
 				{:else}
 					<ArrowDown aria-hidden="true" />
-					<span class="sr-only">
-						{direction === "end" ? "Scroll to end" : "Scroll to start"}
-					</span>
+					<span class="sr-only">{srLabel}</span>
 				{/if}
 			</Button>
 		{/if}

package/src/shadcn/message-scroller/message-scroller-button.svelte.d.ts

@@ -3,6 +3,11 @@ import type { ButtonSize, ButtonVariant } from "../button/index.js";
 type $$ComponentProps = MessageScrollerPrimitive.ButtonProps & {
     variant?: ButtonVariant;
     size?: ButtonSize;
+    /**
+     * What a screen reader calls the icon-only button, in the app's language.
+     * Defaults to "Scroll to end", or "Scroll to start" when `direction="start"`.
+     */
+    label?: string;
 };
 declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type $$Component = ReturnType<typeof $$Component>;

package/src/shadcn/pagination/pagination-next.svelte

@@ -7,8 +7,12 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		label = "Next",
 		...restProps
-	}: PaginationPrimitive.NextButtonProps = $props();
+	}: PaginationPrimitive.NextButtonProps & {
+		/** The text beside the arrow from `sm` up. Name the button with `aria-label`. */
+		label?: string;
+	} = $props();
 </script>
 
 <PaginationPrimitive.NextButton
@@ -17,7 +21,7 @@
 	class={cn(buttonVariants({ variant: "ghost", size: "default" }), "pr-2!", className)}
 	{...restProps}
 >
-	<span class="hidden sm:block">Next</span>
+	<span class="hidden sm:block">{label}</span>
 	<CaretRight
 		aria-hidden="true"
 		data-icon="inline-end"

package/src/shadcn/pagination/pagination-next.svelte.d.ts

@@ -1,4 +1,8 @@
 import { Pagination as PaginationPrimitive } from "bits-ui";
-declare const $$Component: import("svelte").Component<PaginationPrimitive.NextButtonProps, {}, "ref">;
+type $$ComponentProps = PaginationPrimitive.NextButtonProps & {
+    /** The text beside the arrow from `sm` up. Name the button with `aria-label`. */
+    label?: string;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type $$Component = ReturnType<typeof $$Component>;
 export default $$Component;

package/src/shadcn/pagination/pagination-previous.svelte

@@ -7,8 +7,12 @@
 	let {
 		ref = $bindable(null),
 		class: className,
+		label = "Previous",
 		...restProps
-	}: PaginationPrimitive.PrevButtonProps = $props();
+	}: PaginationPrimitive.PrevButtonProps & {
+		/** The text beside the arrow from `sm` up. Name the button with `aria-label`. */
+		label?: string;
+	} = $props();
 </script>
 
 <PaginationPrimitive.PrevButton
@@ -26,5 +30,5 @@
 		data-icon="inline-start"
 		class="cn-rtl-flip"
 	/>
-	<span class="hidden sm:block">Previous</span>
+	<span class="hidden sm:block">{label}</span>
 </PaginationPrimitive.PrevButton>

package/src/shadcn/pagination/pagination-previous.svelte.d.ts

@@ -1,4 +1,8 @@
 import { Pagination as PaginationPrimitive } from "bits-ui";
-declare const $$Component: import("svelte").Component<PaginationPrimitive.PrevButtonProps, {}, "ref">;
+type $$ComponentProps = PaginationPrimitive.PrevButtonProps & {
+    /** The text beside the arrow from `sm` up. Name the button with `aria-label`. */
+    label?: string;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type $$Component = ReturnType<typeof $$Component>;
 export default $$Component;

package/src/shadcn/sheet/close-label.test.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	// An open Sheet and Dialog, for the close-label test.
+	import * as Sheet from "./index.js";
+	import * as Dialog from "../dialog/index.js";
+
+	let { closeLabel }: { closeLabel?: string } = $props();
+</script>
+
+<Sheet.Root open>
+	<Sheet.Content {closeLabel}>
+		<Sheet.Title>Sheet</Sheet.Title>
+	</Sheet.Content>
+</Sheet.Root>
+
+<Dialog.Root open>
+	<Dialog.Content {closeLabel}>
+		<Dialog.Title>Dialog</Dialog.Title>
+		<Dialog.Footer showCloseButton {closeLabel} />
+	</Dialog.Content>
+</Dialog.Root>

package/src/shadcn/sheet/close-label.test.svelte.d.ts

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

package/src/shadcn/sheet/close-label.test.ts

@@ -0,0 +1,44 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import Overlays from "./close-label.test.svelte";
+import SecretInput from "../input/secret-input.svelte";
+
+// A French app's Assistant panel announced "Close" (TSK-2735): each built-in label takes a prop.
+function closeNames(closeLabel?: string): string[] {
+  const app = mount(Overlays, { target: document.body, props: closeLabel ? { closeLabel } : {} });
+  flushSync();
+  const names = [
+    ...document.querySelectorAll(
+      '[data-slot="sheet-close"], [data-slot="dialog-close"], [data-slot="dialog-footer"] button',
+    ),
+  ].map((b) => b.textContent?.trim() ?? "");
+  void unmount(app);
+  return names;
+}
+
+describe("built-in close buttons", () => {
+  it("say Close by default", () => {
+    expect(closeNames()).toEqual(["Close", "Close", "Close"]);
+  });
+
+  it("say the caller's closeLabel", () => {
+    expect(closeNames("Fermer")).toEqual(["Fermer", "Fermer", "Fermer"]);
+  });
+});
+
+describe("SecretInput", () => {
+  it("names its reveal button in the caller's words", () => {
+    const target = document.createElement("div");
+    const app = mount(SecretInput, {
+      target,
+      props: { revealLabel: "Afficher", hideLabel: "Masquer" },
+    });
+    flushSync();
+    const button = target.querySelector("button");
+    expect(button?.getAttribute("aria-label")).toBe("Afficher");
+    button?.click();
+    flushSync();
+    expect(button?.getAttribute("aria-label")).toBe("Masquer");
+    void unmount(app);
+  });
+});

package/src/shadcn/sheet/sheet-content.svelte

@@ -19,6 +19,7 @@
 		class: className,
 		side = "right",
 		showCloseButton = true,
+		closeLabel = "Close",
 		floating,
 		portalProps,
 		children,
@@ -27,6 +28,8 @@
 		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
 		side?: Side;
 		showCloseButton?: boolean;
+		/** What a screen reader calls the built-in close button, in the app's language. */
+		closeLabel?: string;
 		/**
 		 * From `sm` up a left or right sheet floats 8px off the edge, like SidePanel;
 		 * `floating={false}` keeps it flush. A phone stays full bleed for the width.
@@ -82,7 +85,7 @@
 				{#snippet child({ props })}
 					<Button variant="ghost" class="absolute top-3 right-2" size="sm" icon {...props}>
 						<X aria-hidden="true" size={16} />
-						<span class="sr-only">Close</span>
+						<span class="sr-only">{closeLabel}</span>
 					</Button>
 				{/snippet}
 			</SheetPrimitive.Close>

package/src/shadcn/sheet/sheet-content.svelte.d.ts

@@ -9,6 +9,8 @@ type $$ComponentProps = WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
     portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
     side?: Side;
     showCloseButton?: boolean;
+    /** What a screen reader calls the built-in close button, in the app's language. */
+    closeLabel?: string;
     /**
      * From `sm` up a left or right sheet floats 8px off the edge, like SidePanel;
      * `floating={false}` keeps it flush. A phone stays full bleed for the width.

package/src/shadcn/sidebar/sidebar-input.svelte.d.ts

@@ -1,6 +1,6 @@
 declare const $$Component: import("svelte").Component<(Omit<import("svelte/elements").HTMLInputAttributes, "type"> & ({
     type: "file";
-    files?: FileList;
+    files?: FileList | null;
 } | {
     type?: "number" | "hidden" | "color" | "text" | "search" | "submit" | "reset" | "button" | "checkbox" | "radio" | (string & {}) | "tel" | "url" | "email" | "date" | "image" | "time" | "month" | "datetime-local" | "password" | "range" | "week";
     files?: undefined;

package/src/shadcn/sidebar/sidebar-rail.svelte

@@ -7,8 +7,12 @@
 		ref = $bindable(null),
 		class: className,
 		children,
+		label = "Toggle Sidebar",
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+		/** The rail's name and hover tooltip, in the app's language. */
+		label?: string;
+	} = $props();
 
 	const sidebar = useSidebar();
 </script>
@@ -17,10 +21,10 @@
 	bind:this={ref}
 	data-sidebar="rail"
 	data-slot="sidebar-rail"
-	aria-label="Toggle Sidebar"
+	aria-label={label}
 	tabindex={-1}
 	onclick={sidebar.toggle}
-	title="Toggle Sidebar"
+	title={label}
 	class={cn(
 		"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-[background-color,transform,inset] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
 		"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",

package/src/shadcn/sidebar/sidebar-rail.svelte.d.ts

@@ -1,5 +1,9 @@
 import { type WithElementRef } from "../../lib/utils.js";
 import type { HTMLAttributes } from "svelte/elements";
-declare const $$Component: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}, "ref">;
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+    /** The rail's name and hover tooltip, in the app's language. */
+    label?: string;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type $$Component = ReturnType<typeof $$Component>;
 export default $$Component;

package/src/shadcn/sidebar/sidebar-trigger.svelte

@@ -9,9 +9,12 @@
 		ref = $bindable(null),
 		class: className,
 		onclick,
+		label = "Toggle Sidebar",
 		...restProps
 	}: ComponentProps<typeof Button> & {
 		onclick?: (e: MouseEvent) => void;
+		/** What a screen reader calls the icon-only button, in the app's language. */
+		label?: string;
 	} = $props();
 
 	const sidebar = useSidebar();
@@ -35,5 +38,5 @@
 	{...restProps}
 >
 	<SidebarSimple aria-hidden="true" size={16} />
-	<span class="sr-only">Toggle Sidebar</span>
+	<span class="sr-only">{label}</span>
 </Button>

package/src/shadcn/sidebar/sidebar-trigger.svelte.d.ts

@@ -2,6 +2,8 @@ import { Button } from "../button/index.js";
 import type { ComponentProps } from "svelte";
 type $$ComponentProps = ComponentProps<typeof Button> & {
     onclick?: (e: MouseEvent) => void;
+    /** What a screen reader calls the icon-only button, in the app's language. */
+    label?: string;
 };
 declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type $$Component = ReturnType<typeof $$Component>;

package/src/thread/index.ts

@@ -13,6 +13,7 @@ export type {
   ThreadAuthorKind,
   ThreadComment,
   ThreadEvent,
+  ThreadEventRecord,
   ThreadItem,
   ThreadLabels,
   ThreadNode,

package/src/thread/thread-events.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import * as TraceUI from "../shadcn/trace/index.js";
+	import { TagChip } from "../components/chip/index.js";
 	import type { ThreadEvent } from "./types.js";
 
 	interface Props {
@@ -8,6 +9,16 @@
 	}
 
 	let { events, when }: Props = $props();
+
+	const TOKEN = "{record}";
+
+	// The sentence around the chip. No token puts the chip at the end, so an older event with a
+	// record and a plain title still reads in order.
+	function split(event: ThreadEvent): [string, string] {
+		const at = event.title.indexOf(TOKEN);
+		if (at < 0) return [`${event.title} `, ""];
+		return [event.title.slice(0, at), event.title.slice(at + TOKEN.length)];
+	}
 </script>
 
 <!-- ps-1 centres each 16px icon in the 24px avatar column the comments use. -->
@@ -19,9 +30,27 @@
 				<TraceUI.Icon class="mt-px"><Icon size={14} /></TraceUI.Icon>
 			{/if}
 			<!-- Wraps, not truncates: a status name can be a sentence, and a touch screen has no hover title. -->
-			<TraceUI.Title class="flex-1 whitespace-normal text-pretty [overflow-wrap:anywhere]"
-				>{event.title}</TraceUI.Title
-			>
+			<TraceUI.Title class="flex-1 whitespace-normal text-pretty [overflow-wrap:anywhere]">
+				{#if event.record}
+					{@const record = event.record}
+					{@const [before, after] = split(event)}
+					{before}{#if record.href}<a
+							href={record.href}
+							class="rounded-sm align-middle outline-none focus-visible:shadow-[var(--ring-focus)]"
+							><TagChip>
+								{#snippet icon()}{#if record.icon}{@const RecordIcon = record.icon}<RecordIcon
+											aria-hidden="true"
+										/>{/if}{/snippet}{record.label}</TagChip
+							></a
+						>{:else}<TagChip class="align-middle">
+							{#snippet icon()}{#if record.icon}{@const RecordIcon = record.icon}<RecordIcon
+										aria-hidden="true"
+									/>{/if}{/snippet}{record.label}</TagChip
+						>{/if}{after}
+				{:else}
+					{event.title}
+				{/if}
+			</TraceUI.Title>
 			<TraceUI.Description>
 				<time datetime={event.at}>{when(event)}</time>
 			</TraceUI.Description>

package/src/thread/types.ts

@@ -57,6 +57,16 @@ export type ThreadEvent = {
   /** ISO timestamp. */
   at: string;
   icon?: PhosphorIcon;
+  /** A record the sentence names, drawn as a chip inside it. Write `{record}` in `title` where
+      it goes; without the token it ends the sentence. */
+  record?: ThreadEventRecord;
+};
+
+/** A linked record inside an activity line: a task, a doc, a thread. */
+export type ThreadEventRecord = {
+  label: string;
+  href?: string;
+  icon?: PhosphorIcon;
 };
 
 /** The thread in time order: a conversation, or a run of events between two of them. */

package/src/work/task-gantt.svelte

@@ -73,6 +73,8 @@
 		/** Width of the task column in px. It never takes more than 40% of a narrow screen. */
 		labelWidth?: number;
 		labelHeading?: string;
+		/** What a screen reader calls the list of bars. */
+		timelineLabel?: string;
 		locale?: string;
 		/** Drops the card chrome (border, radius, fill) so the chart sits flat on the page. */
 		flat?: boolean;
@@ -105,6 +107,7 @@
 		rowHeight = 40,
 		labelWidth = 240,
 		labelHeading = "Task",
+		timelineLabel = "Timeline",
 		locale = "en-US",
 		flat = false,
 		class: className,
@@ -227,7 +230,7 @@
 				draggingId={drag?.id ?? null}
 			/>
 
-			<div role="list" aria-label="Timeline">
+			<div role="list" aria-label={timelineLabel}>
 				{#each rows as row, index (row.kind === "group" ? `g:${row.group.id}` : row.id)}
 					{#if row.kind === "group"}
 						<GanttGroupRow {row} {index} {layout} staggerCap={STAGGER_CAP} />

package/src/work/task-gantt.svelte.d.ts

@@ -50,6 +50,8 @@ interface Props<T> {
     /** Width of the task column in px. It never takes more than 40% of a narrow screen. */
     labelWidth?: number;
     labelHeading?: string;
+    /** What a screen reader calls the list of bars. */
+    timelineLabel?: string;
     locale?: string;
     /** Drops the card chrome (border, radius, fill) so the chart sits flat on the page. */
     flat?: boolean;

package/scripts/lib/svelte-modules.d.mts

@@ -1,4 +0,0 @@
-/** Deletes every `x.svelte.js` that sits beside an `x.svelte.ts` under `src`. */
-export function cleanSvelteModules(src: any): void;
-/** Writes a type-free `x.svelte.js` beside each `x.svelte.ts` under `src`, and returns how many. */
-export function writeSvelteModules(src: any): Promise<number>;