@heyramzi/ui 3.1.0 → 3.3.1

package/src/editor/image-toolbar.svelte

@@ -2,61 +2,124 @@
 	// =========================
 	// IMPORTS
 	// =========================
+	import { Toolbar } from "bits-ui";
+	import * as Popover from "../shadcn/popover/index.js";
+	import * as Tooltip from "../shadcn/tooltip/index.js";
 	import { Trash, TextAlignLeft, TextAlignCenter, TextAlignRight } from "phosphor-svelte";
 
 	// =========================
 	// TYPES
 	// =========================
 	interface Props {
-		pos: { top: number; left: number };
+		/** The image the toolbar floats over. */
+		anchor: HTMLElement | null;
+		open: boolean;
 		onAlign: (align: "left" | "center" | "right") => void;
 		onDelete: () => void;
 	}
 
+	type Tool = {
+		label: string;
+		icon: typeof Trash;
+		destructive?: boolean;
+		run: () => void;
+	};
+
 	// =========================
 	// PROPS
 	// =========================
-	let { pos, onAlign, onDelete }: Props = $props();
+	let { anchor, open = $bindable(), onAlign, onDelete }: Props = $props();
+
+	// =========================
+	// CONSTANTS
+	// =========================
+	const ALIGN: Tool[] = [
+		{ label: "Align left", icon: TextAlignLeft, run: () => onAlign("left") },
+		{ label: "Align center", icon: TextAlignCenter, run: () => onAlign("center") },
+		{ label: "Align right", icon: TextAlignRight, run: () => onAlign("right") },
+	];
+
+	// =========================
+	// STATE
+	// =========================
+	let content = $state<HTMLElement | null>(null);
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	/** Esc from inside the toolbar goes back to the text, which still holds the image selected. */
+	function returnToText(e: Event) {
+		e.preventDefault();
+		const active = document.activeElement;
+		if (!active || active === document.body || content?.contains(active)) {
+			anchor?.closest<HTMLElement>("[contenteditable='true']")?.focus();
+		}
+	}
 </script>
 
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<div class="image-toolbar" style="top: {pos.top}px; left: {pos.left}px;" role="toolbar">
-	<button
-		type="button"
-		class="image-toolbar-btn"
-		title="Align left"
-		onclick={() => onAlign("left")}
-	>
-		<TextAlignLeft aria-hidden="true" size={14} />
-	</button>
-	<button
-		type="button"
-		class="image-toolbar-btn"
-		title="Align center"
-		onclick={() => onAlign("center")}
-	>
-		<TextAlignCenter aria-hidden="true" size={14} />
-	</button>
-	<button
-		type="button"
-		class="image-toolbar-btn"
-		title="Align right"
-		onclick={() => onAlign("right")}
-	>
-		<TextAlignRight aria-hidden="true" size={14} />
-	</button>
-	<div class="image-toolbar-divider"></div>
-	<button
-		type="button"
-		class="image-toolbar-btn destructive"
-		title="Delete image"
-		onclick={onDelete}
+{#snippet tool(t: Tool)}
+	<Tooltip.Root>
+		<Tooltip.Trigger aria-label={t.label} onclick={t.run}>
+			{#snippet child({ props: trigger })}
+				<Toolbar.Button {...trigger}>
+					{#snippet child({ props })}
+						<button {...props} class="image-toolbar-btn" class:destructive={t.destructive}>
+							<t.icon aria-hidden="true" size={14} />
+						</button>
+					{/snippet}
+				</Toolbar.Button>
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content>{t.label}</Tooltip.Content>
+	</Tooltip.Root>
+{/snippet}
+
+<!-- Not portaled, so Tab from the text reaches it next. Focus stays in the text when it opens. -->
+<Popover.Root bind:open>
+	<Popover.Content
+		bind:ref={content}
+		customAnchor={anchor}
+		side="top"
+		sideOffset={4}
+		trapFocus={false}
+		portalProps={{ disabled: true }}
+		onOpenAutoFocus={(e) => e.preventDefault()}
+		onCloseAutoFocus={returnToText}
 	>
-		<Trash aria-hidden="true" size={14} />
-	</button>
-</div>
+		{#snippet child({ props, wrapperProps })}
+			<div {...wrapperProps}>
+				<!-- Esc closes the toolbar itself here; left to Bits, the first one only shuts the tooltip. -->
+				<Toolbar.Root
+					{...props}
+					aria-label="Image"
+					onkeydown={(e: KeyboardEvent) => {
+						if (e.key === "Escape") open = false;
+					}}
+				>
+					{#snippet child({ props: root })}
+						<Tooltip.Provider>
+							<div {...root} class="image-toolbar">
+								{#each ALIGN as t (t.label)}
+									{@render tool(t)}
+								{/each}
+								<div class="image-toolbar-divider"></div>
+								{@render tool({
+									label: "Delete image",
+									icon: Trash,
+									destructive: true,
+									run: onDelete,
+								})}
+							</div>
+						</Tooltip.Provider>
+					{/snippet}
+				</Toolbar.Root>
+			</div>
+		{/snippet}
+	</Popover.Content>
+</Popover.Root>
 
 <!-- =========================== -->
 <!-- STYLE -->
@@ -67,7 +130,6 @@
 	@layer components {
 		/* ---- IMAGE TOOLBAR ---- */
 		.image-toolbar {
-			position: absolute;
 			z-index: 40;
 			display: flex;
 			align-items: center;

package/src/editor/image-toolbar.svelte.d.ts

@@ -1,11 +1,10 @@
 interface Props {
-    pos: {
-        top: number;
-        left: number;
-    };
+    /** The image the toolbar floats over. */
+    anchor: HTMLElement | null;
+    open: boolean;
     onAlign: (align: "left" | "center" | "right") => void;
     onDelete: () => void;
 }
-declare const $$Component: import("svelte").Component<Props, {}, "">;
+declare const $$Component: import("svelte").Component<Props, {}, "open">;
 type $$Component = ReturnType<typeof $$Component>;
 export default $$Component;

package/src/editor/url-dialog.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { Button } from "../shadcn/button/index.js";
+	import * as Dialog from "../shadcn/dialog/index.js";
+	import { SimpleField } from "../shadcn/field/index.js";
+	import { Input } from "../shadcn/input/index.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	interface Props {
+		open: boolean;
+		heading: string;
+		label: string;
+		placeholder: string;
+		/** Adds an optional second field under the link, with this label. */
+		titleLabel?: string;
+		/** Inserts from the fields, then answers the error to show, or null once it's done. */
+		onSubmit: (url: string, title: string) => string | null;
+		/** Focus goes back to the text, whichever way the dialog closed. */
+		onClosed: () => void;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		open = $bindable(),
+		heading,
+		label,
+		placeholder,
+		titleLabel,
+		onSubmit,
+		onClosed,
+	}: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	const uid = $props.id();
+	let url = $state("");
+	let title = $state("");
+	let error = $state<string | null>(null);
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function submit(e: SubmitEvent) {
+		e.preventDefault();
+		error = onSubmit(url.trim(), title.trim());
+		if (!error) open = false;
+	}
+
+	function reset(e: Event) {
+		e.preventDefault();
+		url = "";
+		title = "";
+		error = null;
+		onClosed();
+	}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<Dialog.Root bind:open>
+	<Dialog.Content onCloseAutoFocus={reset}>
+		<form class="contents" novalidate onsubmit={submit}>
+			<Dialog.Header>
+				<Dialog.Title>{heading}</Dialog.Title>
+			</Dialog.Header>
+			<Dialog.Body>
+				<SimpleField {label} for="{uid}-url" error={error ?? undefined}>
+					<Input
+						id="{uid}-url"
+						type="url"
+						bind:value={url}
+						{placeholder}
+						oninput={() => (error = null)}
+					/>
+				</SimpleField>
+				{#if titleLabel}
+					<SimpleField label={titleLabel} for="{uid}-title">
+						<Input id="{uid}-title" bind:value={title} />
+					</SimpleField>
+				{/if}
+			</Dialog.Body>
+			<Dialog.Footer>
+				<Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
+				<Button type="submit">Insert</Button>
+			</Dialog.Footer>
+		</form>
+	</Dialog.Content>
+</Dialog.Root>

package/src/editor/url-dialog.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    open: boolean;
+    heading: string;
+    label: string;
+    placeholder: string;
+    /** Adds an optional second field under the link, with this label. */
+    titleLabel?: string;
+    /** Inserts from the fields, then answers the error to show, or null once it's done. */
+    onSubmit: (url: string, title: string) => string | null;
+    /** Focus goes back to the text, whichever way the dialog closed. */
+    onClosed: () => void;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "open">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/theme-toggle/ThemeToggle.css

@@ -86,7 +86,7 @@
     transition: opacity 500ms;
   }
 
-  .theme-toggle-slide[data-state="dark"] {
+  .theme-toggle-slide[data-mode="dark"] {
     --tt-glow-x: 75%;
   }
 
@@ -110,17 +110,17 @@
     color: var(--theme-toggle-moon, var(--color-muted-foreground));
   }
 
-  .theme-toggle-slide[data-state="light"] .theme-toggle-slide__icon--sun,
-  .theme-toggle-slide[data-state="dark"] .theme-toggle-slide__icon--moon {
+  .theme-toggle-slide[data-mode="light"] .theme-toggle-slide__icon--sun,
+  .theme-toggle-slide[data-mode="dark"] .theme-toggle-slide__icon--moon {
     opacity: 0.7;
     transform: scale(1);
   }
 
-  .theme-toggle-slide[data-state="light"] .theme-toggle-slide__icon--sun {
+  .theme-toggle-slide[data-mode="light"] .theme-toggle-slide__icon--sun {
     animation: theme-toggle-spin 8s linear infinite;
   }
 
-  .theme-toggle-slide[data-state="dark"] .theme-toggle-slide__icon--moon {
+  .theme-toggle-slide[data-mode="dark"] .theme-toggle-slide__icon--moon {
     animation: theme-toggle-wiggle 2s ease-in-out infinite;
   }
 
@@ -143,7 +143,7 @@
       background-color 500ms;
   }
 
-  .theme-toggle-slide[data-state="dark"] .theme-toggle-slide__thumb {
+  .theme-toggle-slide[data-mode="dark"] .theme-toggle-slide__thumb {
     --tt-thumb-color: var(--theme-toggle-thumb-dark, var(--color-primary));
     transform: translateX(var(--tt-thumb));
   }
@@ -174,12 +174,12 @@
     transform: scale(0.9) rotate(-90deg);
   }
 
-  .theme-toggle-slide[data-state="dark"] .theme-toggle-slide__mark--sun {
+  .theme-toggle-slide[data-mode="dark"] .theme-toggle-slide__mark--sun {
     opacity: 0;
     transform: scale(0.9) rotate(90deg);
   }
 
-  .theme-toggle-slide[data-state="dark"] .theme-toggle-slide__mark--moon {
+  .theme-toggle-slide[data-mode="dark"] .theme-toggle-slide__mark--moon {
     opacity: 1;
     transform: scale(1) rotate(0);
   }

package/src/effects/theme-toggle/ThemeToggle.svelte

@@ -4,6 +4,7 @@
 	// =========================
 	import "./ThemeToggle.css";
 	import { cn } from "../../lib/utils.js";
+	import { Switch } from "bits-ui";
 	import { Monitor, Moon, Sun } from "phosphor-svelte";
 	import { revealTheme } from "../../lib/theme-transition.js";
 
@@ -55,6 +56,8 @@
 	let text = $derived(
 		label ?? (mode ? `Theme: ${mode}` : isDark ? "Switch to light mode" : "Switch to dark mode"),
 	);
+	// A switch reads its own on or off, so its name stays put instead of naming the next press.
+	let slideText = $derived(label ?? "Dark mode");
 
 	// =========================
 	// FUNCTIONS
@@ -63,6 +66,14 @@
 		revealTheme(event, () => onToggle(event), { skip: skipTransition });
 	}
 
+	// bits-ui flips a switch on keydown with no click, and `onToggle` wants a MouseEvent, so the
+	// key becomes the click a plain button would have fired. preventDefault stops bits-ui's own.
+	function clickOnKey(event: KeyboardEvent & { currentTarget: HTMLButtonElement }) {
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		event.currentTarget.click();
+	}
+
 	function iconClass(show: boolean, tilt: "rotate-90" | "-rotate-90") {
 		return `absolute size-4 transition-[opacity,scale,rotate] duration-300 ${
 			show ? "scale-100 rotate-0 opacity-100" : `scale-90 ${tilt} opacity-0`
@@ -74,12 +85,15 @@
 <!-- MARKUP -->
 <!-- =========================== -->
 {#if style === "slide"}
-	<button
-		type="button"
+	<!-- WHY a no-op setter: the theme is the caller's, so `onclick` hands it the MouseEvent and
+	     the switch only mirrors `active`. -->
+	<Switch.Root
+		bind:checked={() => active === "dark", () => {}}
 		onclick={handleClick}
-		aria-label={text}
+		onkeydown={clickOnKey}
+		aria-label={slideText}
 		{title}
-		data-state={active === "dark" ? "dark" : "light"}
+		data-mode={active === "dark" ? "dark" : "light"}
 		class={cn("theme-toggle-slide", size === "default" && "theme-toggle-slide--lg", className)}
 	>
 		<span class="theme-toggle-slide__glow" aria-hidden="true"></span>
@@ -104,8 +118,8 @@
 				class="theme-toggle-slide__mark theme-toggle-slide__mark--moon"
 			/>
 		</span>
-		<span class="sr-only">{text}</span>
-	</button>
+		<span class="sr-only">{slideText}</span>
+	</Switch.Root>
 {:else}
 	<button
 		onclick={handleClick}

package/src/inbox/thread-inbox.svelte

@@ -139,6 +139,8 @@
 	let labels = $derived(resolveInboxLabels(labelOverrides));
 	let filter = $state<InboxFilter>({ ...NO_FILTER });
 	let snoozing = $state(false);
+	const uid = $props.id();
+	const snoozeChoicesId = `${uid}-snooze`;
 	let pane = $state<"rail" | "detail">("rail");
 	let root = $state<HTMLDivElement>();
 	let cards = $state<Record<string, ReturnType<typeof InboxCard> | null>>({});
@@ -472,6 +474,7 @@
 								variant="ghost"
 								onclick={snoozeKey}
 								aria-expanded={snoozing}
+								aria-controls={snoozeChoicesId}
 								aria-keyshortcuts="h"
 							>
 								<BellSlash aria-hidden="true" />{labels.snooze}
@@ -496,7 +499,12 @@
 				</DetailHeader>
 
 				{#if snoozing}
-					<div class="flex flex-wrap gap-2" role="group" aria-label={labels.snooze}>
+					<div
+						id={snoozeChoicesId}
+						class="flex flex-wrap gap-2"
+						role="group"
+						aria-label={labels.snooze}
+					>
 						{#each snoozeChoices(new Date()) as choice, index (choice.id)}
 							<Button size="sm" variant="outline" onclick={() => snooze(choice.until)}>
 								<Kbd>{index + 1}</Kbd>{snoozeLabel(choice.id)}

package/src/lib/live-region.svelte

@@ -1,14 +1,22 @@
 <script lang="ts">
 	import { tick } from "svelte";
 
-	let message = $state("");
+	interface Props {
+		/** Drives the region from state: whatever it holds is what gets read. Leave it out to use `announce`. */
+		message?: string;
+	}
+
+	let { message }: Props = $props();
+
+	let spoken = $state("");
 
 	/** Reads text out politely. Clearing first makes the same words read again. */
 	export async function announce(text: string): Promise<void> {
-		message = "";
+		spoken = "";
 		await tick();
-		message = text;
+		spoken = text;
 	}
 </script>
 
-<div class="sr-only" role="status" aria-live="polite">{message}</div>
+<!-- A span, so it can sit inside a button. sr-only takes it out of the flow either way. -->
+<span class="sr-only" role="status" aria-live="polite">{message ?? spoken}</span>

package/src/lib/live-region.svelte.d.ts

@@ -1,4 +1,8 @@
-declare const $$Component: import("svelte").Component<Record<string, never>, {
+interface Props {
+    /** Drives the region from state: whatever it holds is what gets read. Leave it out to use `announce`. */
+    message?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {
     announce: (text: string) => Promise<void>;
 }, "">;
 type $$Component = ReturnType<typeof $$Component>;

package/src/lib/sliding-pill.ts

@@ -6,11 +6,12 @@ import type { Attachment } from "svelte/attachments";
 // `parentElement`, so any strip that renders one span gets the motion.
 
 // WHY measure: the active item's width is its label. The selector covers the
-// three ways a strip marks it: a tab, a nav link, a toggle.
+// ways a strip marks it: a tab, a nav link, a pressed button, a bits-ui toggle group item.
 
 // Per transitions.dev `tabs-sliding`: first paint and resizes write the
 // position with the transition off, so the pill snaps in instead of flying.
-const ACTIVE = '[data-state="active"],[aria-current="page"],[aria-pressed="true"]';
+const ACTIVE =
+  '[data-state="active"],[aria-current="page"],[aria-pressed="true"],[data-state="on"]';
 
 export const slidingPill: Attachment<HTMLElement> = (pill) => {
   const list = pill.parentElement;

package/src/record/info-list.svelte

@@ -3,15 +3,14 @@
 	// IMPORTS
 	// =========================
 	import type { Snippet } from "svelte";
-	import { Check, CaretUpDown } from "phosphor-svelte";
+	import { CaretUpDown } from "phosphor-svelte";
 	import { cn } from "../lib/utils.js";
-	import { Button } from "../shadcn/button/index.js";
+	import { Button, buttonVariants } from "../shadcn/button/index.js";
 	import { Input } from "../shadcn/input/index.js";
 	import { Textarea } from "../shadcn/textarea/index.js";
 	import { Spinner } from "../shadcn/spinner/index.js";
 	import * as Select from "../shadcn/select/index.js";
-	import * as Popover from "../shadcn/popover/index.js";
-	import * as Command from "../shadcn/command/index.js";
+	import { Picker } from "../components/picker/index.js";
 	import { TagsInput } from "../components/tags-input/index.js";
 	import StatusBadge from "../status/status-badge.svelte";
 	import { resolveLabels, type InfoRow, type RecordLabels } from "./types.js";
@@ -58,7 +57,6 @@
 	let draft = $state("");
 	let saving = $state<string | null>(null);
 	let failed = $state<{ key: string; text: string } | null>(null);
-	let pickerOpen = $state<string | null>(null);
 
 	// =========================
 	// DERIVED
@@ -130,7 +128,6 @@
 	}
 
 	function pick(row: InfoRow, value: string) {
-		pickerOpen = null;
 		const current = typeof row.editValue === "string" ? row.editValue : null;
 		if (value !== current) void commit(row, value, false);
 	}
@@ -197,58 +194,34 @@
 {/snippet}
 
 {#snippet list(row: InfoRow, key: string, multi: boolean)}
-	{@const options = row.options ?? []}
-	{@const current = multi
-		? Array.isArray(row.editValue)
-			? row.editValue
-			: []
-		: [typeof row.editValue === "string" ? row.editValue : ""]}
-	<Popover.Root open={pickerOpen === key} onOpenChange={(open) => (pickerOpen = open ? key : null)}>
-		<Popover.Trigger>
-			{#snippet child({ props })}
-				<Button
-					{...props}
-					variant="text"
-					size="sm"
-					class={OPENER}
-					aria-label={t.edit(row.label)}
-					disabled={saving === key}
-				>
-					{@render display(row)}
-					{#if saving === key}
-						<Spinner class="size-3.5 text-muted-foreground" />
-					{:else if !multi}
-						<CaretUpDown aria-hidden="true" class="size-3.5 shrink-0 opacity-60" />
-					{/if}
-				</Button>
-			{/snippet}
-		</Popover.Trigger>
-		<Popover.Content class="w-64 p-0" align="start">
-			<Command.Root>
-				<Command.Input placeholder={t.search} />
-				<Command.List class="max-h-72 overflow-y-auto">
-					<Command.Empty>{t.noMatch}</Command.Empty>
-					<Command.Group>
-						{#each options as option (option.value)}
-							<Command.Item
-								value={option.label}
-								onSelect={() => (multi ? toggle(row, option.value) : pick(row, option.value))}
-							>
-								<Check
-									aria-hidden="true"
-									class={cn(
-										"size-3.5",
-										current.includes(option.value) ? "opacity-100" : "opacity-0",
-									)}
-								/>
-								{option.label}
-							</Command.Item>
-						{/each}
-					</Command.Group>
-				</Command.List>
-			</Command.Root>
-		</Popover.Content>
-	</Popover.Root>
+	<Picker
+		options={row.options ?? []}
+		value={multi
+			? Array.isArray(row.editValue)
+				? row.editValue
+				: []
+			: typeof row.editValue === "string"
+				? row.editValue
+				: null}
+		onSelect={(value) => (multi ? toggle(row, value) : pick(row, value))}
+		triggerClass={cn(buttonVariants({ variant: "text", size: "sm" }), OPENER)}
+		searchable
+		searchPlaceholder={t.search}
+		emptyLabel={t.noMatch}
+		width="lg"
+		disabled={saving === key}
+	>
+		{#snippet trigger()}
+			<!-- Named by its text: the field, then the value it shows (WCAG 2.5.3, label in name). -->
+			<span class="sr-only">{t.edit(row.label)}</span>
+			{@render display(row)}
+			{#if saving === key}
+				<Spinner class="size-3.5 text-muted-foreground" />
+			{:else if !multi}
+				<CaretUpDown aria-hidden="true" class="size-3.5 shrink-0 opacity-60" />
+			{/if}
+		{/snippet}
+	</Picker>
 {/snippet}
 
 {#if layout === "row" && (shown.length > 0 || trailing)}
@@ -412,9 +385,10 @@
 								variant="text"
 								size="sm"
 								class={cn(OPENER, isEmpty(row) && "text-muted-foreground")}
-								aria-label={t.edit(row.label)}
 								onclick={() => begin(row)}
 							>
+								<!-- Named by its text: the field, then the value it shows (WCAG 2.5.3, label in name). -->
+								<span class="sr-only">{t.edit(row.label)}</span>
 								{@render display(row)}
 							</Button>
 						{/if}

package/src/record/measure-clamp.ts

@@ -0,0 +1,31 @@
+import { untrack } from "svelte";
+import type { Attachment } from "svelte/attachments";
+
+/** Reports whether a line-clamped box cuts its text, so "More" shows only then. */
+
+// WHY measure: a note that fits two lines at 1280px overflows at 390px.
+
+// WHY untracked: an open box keeps its last answer, so a fold never remounts the toggle under focus.
+export function measureClamp(
+  expanded: () => boolean,
+  onCut: (cut: boolean) => void,
+): Attachment<HTMLElement> {
+  return (el) => {
+    const measure = () =>
+      untrack(() => {
+        if (!expanded()) onCut(el.scrollHeight > el.clientHeight + 1);
+      });
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    // A web font landing rewraps the text in a box that keeps its height, and the observer stays quiet.
+    let live = true;
+    void document.fonts?.ready.then(() => live && measure());
+    document.fonts?.addEventListener("loadingdone", measure);
+    return () => {
+      live = false;
+      observer.disconnect();
+      document.fonts?.removeEventListener("loadingdone", measure);
+    };
+  };
+}