@heyramzi/ui 3.1.0 → 3.2.0

package/src/charts/dashboard/hint.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	// A span whose `text` shows as a tooltip on hover and on focus. A native title never
+	// showed on focus, so the keyboard never reached it.
+	import type { Snippet } from "svelte";
+	import * as Tooltip from "../../shadcn/tooltip/index.js";
+	import { cn } from "../../lib/utils.js";
+
+	interface Props {
+		/** Left out, the span is plain and takes no focus. */
+		text?: string;
+		class?: string;
+		children: Snippet;
+	}
+
+	let { text, class: className, children }: Props = $props();
+</script>
+
+{#if text}
+	<Tooltip.Root>
+		<Tooltip.Trigger>
+			{#snippet child({ props })}
+				<span
+					{...props}
+					class={cn("rounded-xs outline-none focus-visible:shadow-(--ring-focus)", className)}
+				>
+					{@render children()}
+				</span>
+			{/snippet}
+		</Tooltip.Trigger>
+		<Tooltip.Content>{text}</Tooltip.Content>
+	</Tooltip.Root>
+{:else}
+	<span class={className}>{@render children()}</span>
+{/if}

package/src/charts/dashboard/hint.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Left out, the span is plain and takes no focus. */
+    text?: string;
+    class?: string;
+    children: Snippet;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -2,6 +2,7 @@
 	// 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";
+	import Hint from "./hint.svelte";
 
 	interface Props {
 		grade: string;
@@ -21,13 +22,13 @@
 	};
 </script>
 
-<span
+<Hint
+	text={hint}
 	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_TINT[GRADE_TONE[grade] ?? "neutral"],
 		className,
 	)}
-	title={hint}
 >
 	{grade}
-</span>
+</Hint>

package/src/charts/legend.css

@@ -39,13 +39,10 @@
     align-items: center;
     gap: 0.5rem 0.625rem;
     padding: 0.375rem 0.5rem;
-    border: 0;
     border-radius: 0.5rem;
     background: transparent;
-    font: inherit;
     color: var(--foreground);
     text-align: left;
-    cursor: pointer;
     transition:
       background 160ms ease,
       opacity 160ms ease;
@@ -57,11 +54,6 @@
     padding: 0.25rem 0.375rem;
   }
 
-  .hr-legend-item:focus-visible {
-    background: var(--muted);
-    outline: none;
-  }
-
   @media (hover: hover) and (pointer: fine) {
     .hr-legend-item:hover {
       background: var(--muted);

package/src/charts/legend.svelte

@@ -77,36 +77,32 @@
 	<ul class="hr-legend-items">
 		{#each items as item, i (item.label + i)}
 			{@const dimmed = hoveredIndex !== null && hoveredIndex !== i}
-			<li>
-				<button
-					type="button"
-					class="hr-legend-item"
-					class:dimmed
-					onmouseenter={() => setHover(i)}
-					onmouseleave={() => setHover(null)}
-					onfocus={() => setHover(i)}
-					onblur={() => setHover(null)}
-				>
-					<span class="hr-legend-marker" style:background={item.color}></span>
-					<span class="hr-legend-label">{item.label}</span>
-					{#if showValue}
-						<span class="hr-legend-value">
-							{formatValue(item.value)}{#if showPercentage && item.maxValue}<span
-									class="hr-legend-pct">{formatPercentage(pct(item))}</span
-								>{/if}
-						</span>
-					{/if}
-					{#if showProgress && item.maxValue}
-						<span class="hr-legend-track">
-							<span
-								class="hr-legend-bar"
-								style:--hr-bar-scale={pct(item) / 100}
-								style:background={item.color}
-								style:animation-delay="{160 + i * 120}ms"
-							></span>
-						</span>
-					{/if}
-				</button>
+			<!-- A row, not a button: hover only highlights its series, so a Tab stop here did nothing. -->
+			<li
+				class="hr-legend-item"
+				class:dimmed
+				onmouseenter={() => setHover(i)}
+				onmouseleave={() => setHover(null)}
+			>
+				<span class="hr-legend-marker" style:background={item.color}></span>
+				<span class="hr-legend-label">{item.label}</span>
+				{#if showValue}
+					<span class="hr-legend-value">
+						{formatValue(item.value)}{#if showPercentage && item.maxValue}<span
+								class="hr-legend-pct">{formatPercentage(pct(item))}</span
+							>{/if}
+					</span>
+				{/if}
+				{#if showProgress && item.maxValue}
+					<span class="hr-legend-track">
+						<span
+							class="hr-legend-bar"
+							style:--hr-bar-scale={pct(item) / 100}
+							style:background={item.color}
+							style:animation-delay="{160 + i * 120}ms"
+						></span>
+					</span>
+				{/if}
 			</li>
 		{/each}
 	</ul>

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

@@ -51,6 +51,7 @@
 	// =========================
 	import { Check, Copy, StarFour } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
+	import LiveRegion from "../../lib/live-region.svelte";
 	import { buttonVariants } from "../../shadcn/button/index.js";
 	import { copyText } from "./clipboard.js";
 
@@ -81,6 +82,13 @@
 	// DERIVED
 	// =========================
 	const inline = $derived(text !== undefined && variant === "inline");
+	// A chip's name holds the text it shows (WCAG 2.5.3, label in name), so a
+	// speech user who says "click acme-4821" reaches it.
+	const restingName = $derived(
+		text === undefined || label.toLowerCase().includes(text.toLowerCase())
+			? label
+			: `${label} ${text}`,
+	);
 
 	// =========================
 	// FUNCTIONS
@@ -107,7 +115,7 @@
 	type="button"
 	onclick={copy}
 	title={label}
-	aria-label={announce === "name" && copied ? copiedLabel : label}
+	aria-label={announce === "name" && copied ? copiedLabel : restingName}
 	class={cn(
 		"group/copy t-press shrink-0 outline-none focus-visible:shadow-(--ring-focus)",
 		text === undefined
@@ -170,6 +178,6 @@
 
 	<!-- The swap is invisible to a reader who cannot see it. -->
 	{#if announce === "region"}
-		<span aria-live="polite" class="sr-only">{copied ? copiedLabel : ""}</span>
+		<LiveRegion message={copied ? copiedLabel : ""} />
 	{/if}
 </button>

package/src/components/copy/copy-button.test.ts

@@ -60,6 +60,13 @@ describe("CopyButton", () => {
     done();
   });
 
+  it("adds the chip's visible text to a label that leaves it out", () => {
+    stubClipboard();
+    const { button, done } = render({ value: "acme-4821", text: "acme-4821", label: "Copy id" });
+    expect(button.getAttribute("aria-label")).toBe("Copy id acme-4821");
+    done();
+  });
+
   it("announces in a live region by default and keeps its name", async () => {
     stubClipboard();
     const { button, target, done } = render({

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	// ========================= IMPORTS
+	import { cn } from "../../lib/utils.js";
 	import { Skeleton } from "../../shadcn/skeleton/index.js";
 
 	// ========================= TYPES
@@ -8,6 +9,8 @@
 		align?: "left" | "center" | "right";
 		/** Show a small circle before the skeleton bar (e.g. logo/avatar column) */
 		circle?: boolean;
+		/** Merged onto the cell, for a table whose own cells pad, hide or rule differently. */
+		class?: string;
 	};
 
 	interface Props {
@@ -17,11 +20,13 @@
 		columns?: ColumnDef[];
 		/** Simple mode: just specify column count */
 		columnCount?: number;
+		/** Merged onto each row, for a table whose own rows draw a different line. */
+		rowClass?: string;
 		class?: string;
 	}
 
 	// ========================= PROPS
-	let { rows = 5, columns, columnCount = 6, class: className }: Props = $props();
+	let { rows = 5, columns, columnCount = 6, rowClass, class: className }: Props = $props();
 
 	// ========================= DERIVED
 	let cols = $derived(
@@ -40,19 +45,22 @@
 <!-- =========================== -->
 <tbody class={className}>
 	{#each { length: rows } as _, rowIdx (rowIdx)}
+		<!-- Placeholders, so a screen reader skips them rather than reading empty rows. -->
 		<tr
 			data-slot="table-row"
-			class="border-b border-border/70 transition-opacity"
+			class={cn("border-b border-border/70 transition-opacity", rowClass)}
+			aria-hidden="true"
 			style="animation: skeleton-fade-in var(--duration-slow) var(--ease-smooth-out) calc(var(--duration-stagger) * {rowIdx}) both"
 		>
 			{#each cols as col, colIdx (colIdx)}
 				<td
 					data-slot="table-cell"
-					class="h-8 px-2 any-pointer-coarse:h-11 {col.align === 'center'
-						? 'text-center'
-						: col.align === 'right'
-							? 'text-right'
-							: ''}"
+					class={cn(
+						"h-8 px-2 any-pointer-coarse:h-11",
+						col.align === "center" && "text-center",
+						col.align === "right" && "text-right",
+						col.class,
+					)}
 				>
 					<div
 						class="flex items-center gap-2 {col.align === 'center'

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

@@ -3,6 +3,8 @@ type ColumnDef = {
     align?: "left" | "center" | "right";
     /** Show a small circle before the skeleton bar (e.g. logo/avatar column) */
     circle?: boolean;
+    /** Merged onto the cell, for a table whose own cells pad, hide or rule differently. */
+    class?: string;
 };
 interface Props {
     /** Number of skeleton rows to render */
@@ -11,6 +13,8 @@ interface Props {
     columns?: ColumnDef[];
     /** Simple mode: just specify column count */
     columnCount?: number;
+    /** Merged onto each row, for a table whose own rows draw a different line. */
+    rowClass?: string;
     class?: string;
 }
 declare const $$Component: import("svelte").Component<Props, {}, "">;

package/src/components/docs/on-this-page.svelte

@@ -123,7 +123,7 @@
 						aria-label={item.label}
 						aria-current={current ? "location" : undefined}
 						onclick={() => pick(item.id)}
-						class="otp-tick group/tick flex h-3.5 w-7 items-center pl-2 any-pointer-coarse:h-6"
+						class="otp-tick group/tick flex h-6 w-7 items-center pl-2"
 					>
 						<span
 							class="block h-0.5 rounded-full transition-[width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] {current
@@ -203,8 +203,8 @@
 {:else}
 	<Popover.Root bind:open>
 		<div class="relative">
+			<!-- Named by its own text, the label then the current heading (WCAG 2.5.3, label in name). -->
 			<Popover.Trigger
-				aria-label={label}
 				class="flex h-11 w-full items-center gap-2.5 px-4 text-left transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] hover:bg-muted/50"
 			>
 				<List size={16} class="shrink-0 text-muted-foreground" aria-hidden="true" />

package/src/components/hold-to-confirm/hold-to-confirm.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	// ========================= IMPORTS
 	import { cn } from "../../lib/utils.js";
+	import LiveRegion from "../../lib/live-region.svelte";
 	import { buttonVariants, type ButtonSize, type ButtonVariant } from "../../shadcn/button/index.js";
 	import type { Snippet } from "svelte";
 	import type { HTMLButtonAttributes } from "svelte/elements";
@@ -191,7 +192,7 @@
 	</span>
 </button>
 <!-- Outside the button so it isn't part of its name, and mounted empty so the prompt is read when it lands. -->
-<span role="status" class="sr-only">{armed ? confirmPrompt : ""}</span>
+<LiveRegion message={armed ? confirmPrompt : ""} />
 
 <!-- ========================= STYLE -->
 <style>

package/src/components/list-page/filter-item.svelte

@@ -3,9 +3,10 @@
 	// IMPORTS
 	// =========================
 	import type { Snippet } from "svelte";
-	import { Checkbox } from "../../shadcn/checkbox/index.js";
+	import { DropdownMenu } from "bits-ui";
 	import { Check } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
+	import { checkboxBoxClass } from "../../shadcn/checkbox/checkbox-box.js";
 
 	// =========================
 	// TYPES
@@ -26,10 +27,14 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<button
-	type="button"
-	class="flex min-h-8 items-center gap-2 rounded-lg px-2 text-sm transition-colors duration-quick ease-smooth-out hover:bg-foreground/6 motion-reduce:transition-none any-pointer-coarse:min-h-11"
-	{onclick}
+<!-- WHY both variants are checkbox items: a radio item needs a group value, and `checked` with
+     `onclick` is the whole interface callers have. The setter hands the toggle to `onclick`, so
+     the caller's state stays the only truth. -->
+<DropdownMenu.CheckboxItem
+	bind:checked={() => checked, () => onclick()}
+	closeOnSelect={false}
+	data-slot="dropdown-menu-checkbox-item"
+	class="flex min-h-8 items-center gap-2 rounded-lg px-2 text-sm outline-hidden select-none transition-colors duration-quick ease-smooth-out hover:bg-foreground/6 data-highlighted:bg-foreground/6 motion-reduce:transition-none any-pointer-coarse:min-h-11"
 >
 	{#if variant === "radio"}
 		<span
@@ -43,7 +48,15 @@
 			{/if}
 		</span>
 	{:else}
-		<Checkbox {checked} />
+		<span
+			aria-hidden="true"
+			data-state={checked ? "checked" : "unchecked"}
+			class={checkboxBoxClass}
+		>
+			{#if checked}
+				<Check aria-hidden="true" size={14} />
+			{/if}
+		</span>
 	{/if}
 	{@render children()}
-</button>
+</DropdownMenu.CheckboxItem>

package/src/components/list-page/filter-popover.svelte

@@ -2,8 +2,9 @@
 	// =========================
 	// IMPORTS
 	// =========================
-	import type { Snippet } from "svelte";
-	import * as Popover from "../../shadcn/popover/index.js";
+	import { tick, type Snippet } from "svelte";
+	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
+	import * as DropdownMenu from "../../shadcn/dropdown-menu/index.js";
 	import { Funnel as FunnelIcon } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
 	import { Button } from "../../shadcn/button/index.js";
@@ -58,13 +59,28 @@
 	// =========================
 	let hasCount = $derived(count > 0);
 	let isActive = $derived(active ?? hasCount);
+
+	// =========================
+	// STATE
+	// =========================
+	let content = $state<HTMLElement | null>(null);
+
+	// =========================
+	// HANDLERS
+	// =========================
+	// Clear unmounts itself, so focus goes back to the menu and the arrows keep working.
+	async function clear() {
+		onClear?.();
+		await tick();
+		content?.focus();
+	}
 </script>
 
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<Popover.Root bind:open>
-	<Popover.Trigger class={toolbarTriggerClass({ active: isActive, className: triggerClass })}>
+<DropdownMenu.Root bind:open>
+	<DropdownMenu.Trigger class={toolbarTriggerClass({ active: isActive, className: triggerClass })}>
 		<IconComponent aria-hidden="true" class="size-3.5" />
 		<span>{label}</span>
 		{#if trailing}
@@ -73,18 +89,27 @@
 		{#if hasCount}
 			<CountChip {count} size="sm" tone="brand" class="ml-0.5" />
 		{/if}
-	</Popover.Trigger>
-	<Popover.Content class={cn("p-2", width, contentClass)} {align}>
+	</DropdownMenu.Trigger>
+	<!-- The popover's surface: rounder, text-sm, sized by `width` and not by the trigger. -->
+	<DropdownMenu.Content
+		bind:ref={content}
+		class={cn("min-w-0 rounded-2xl p-2 text-sm", width, contentClass)}
+		{align}
+	>
 		{@render children()}
 		{#if onClear && hasCount}
-			<Button
-				variant="ghost"
-				size="sm"
-				class="mt-2 w-full text-xs text-muted-foreground"
-				onclick={onClear}
-			>
-				{clearLabel}
-			</Button>
+			<DropdownMenuPrimitive.Item closeOnSelect={false} onSelect={clear}>
+				{#snippet child({ props })}
+					<Button
+						{...props}
+						variant="ghost"
+						size="sm"
+						class="mt-2 w-full text-xs text-muted-foreground"
+					>
+						{clearLabel}
+					</Button>
+				{/snippet}
+			</DropdownMenuPrimitive.Item>
 		{/if}
-	</Popover.Content>
-</Popover.Root>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/src/components/list-page/filter-popover.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from "svelte";
+import { type Snippet } from "svelte";
 import type { PhosphorIcon } from "../../lib/icon-types.js";
 interface Props {
     label: string;

package/src/components/list-page/grouped-list.svelte

@@ -4,9 +4,10 @@
 	// =========================
 	import { untrack, type Snippet } from "svelte";
 	import { SvelteSet } from "svelte/reactivity";
+	import { Accordion } from "bits-ui";
 	import { CaretDown, Plus } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
-	import CountChip from "../chip/count-chip.svelte";
+	import GroupHead from "../work-parts/group-head.svelte";
 
 	// =========================
 	// TYPES
@@ -58,16 +59,24 @@
 	// =========================
 	// STATE
 	// =========================
+	// WHY the collapsed set stays the truth and not the accordion's open list: a group that
+	// leaves `groups` and comes back keeps its fold.
 	const collapsed = new SvelteSet<string>(untrack(() => defaultCollapsed));
+	const uid = $props.id();
+
+	// =========================
+	// DERIVED
+	// =========================
+	let openKeys = $derived(groups.map(getKey).filter((key) => !collapsed.has(key)));
 
 	// =========================
 	// FUNCTIONS
 	// =========================
-	function toggle(key: string) {
-		if (collapsed.has(key)) {
-			collapsed.delete(key);
-		} else {
-			collapsed.add(key);
+	function setOpen(next: string[]) {
+		for (const group of groups) {
+			const key = getKey(group);
+			if (next.includes(key)) collapsed.delete(key);
+			else collapsed.add(key);
 		}
 		onCollapsedChange?.([...collapsed]);
 	}
@@ -76,13 +85,19 @@
 <!-- =========================== -->
 <!-- MARKUP -->
 <!-- =========================== -->
-<div class={cn("flex w-full flex-col", className)}>
+<Accordion.Root
+	type="multiple"
+	bind:value={() => openKeys, setOpen}
+	class={cn("flex w-full flex-col", className)}
+>
 	{#each groups as group, index (getKey(group))}
 		{@const key = getKey(group)}
 		{@const isCollapsed = collapsed.has(key)}
+		{@const rowsId = `${uid}-rows-${index}`}
 		<!-- Groups part by space, not a rule: the header band already marks where one starts
 		     (DESIGN.md rule 19). -->
-		<div
+		<Accordion.Item
+			value={key}
 			class={cn(index > 0 && "mt-4")}
 			role={onGroupDragOver || onGroupDrop ? "group" : undefined}
 			ondragover={onGroupDragOver ? (e) => onGroupDragOver(e, group) : undefined}
@@ -94,11 +109,10 @@
 			<div
 				class="group/header hover-row flex min-h-8 items-center gap-1 rounded-lg bg-foreground/4 transition-colors duration-quick ease-smooth-out hover:bg-foreground/6 motion-reduce:transition-none any-pointer-coarse:min-h-11"
 			>
-				<button
-					type="button"
+				<!-- No Accordion.Header: it would make every group lid a heading. -->
+				<Accordion.Trigger
 					class="flex min-w-0 flex-1 cursor-pointer items-center gap-2 self-stretch rounded-lg px-2.5 text-left outline-none focus-visible:shadow-[var(--ring-focus)]"
-					onclick={() => toggle(key)}
-					aria-expanded={!isCollapsed}
+					aria-controls={rowsId}
 				>
 					<!-- The accordion chevron: it turns on the fast step and holds still under
 					     reduced motion, where the open state is aria-expanded and the rows. -->
@@ -110,11 +124,13 @@
 						)}
 						weight="bold"
 					/>
-					{@render header(group, { collapsed: isCollapsed })}
-					{#if getCount}
-						<CountChip count={getCount(group)} />
-					{/if}
-				</button>
+					<!-- h-auto: the band sets the height, so a tall header still grows it. -->
+					<GroupHead count={getCount?.(group)} class="h-auto">
+						{#snippet title()}
+							{@render header(group, { collapsed: isCollapsed })}
+						{/snippet}
+					</GroupHead>
+				</Accordion.Trigger>
 				{#if actions}
 					<div class="row-action flex shrink-0 items-center gap-1 pe-1">
 						{@render actions(group)}
@@ -132,14 +148,16 @@
 				{/if}
 			</div>
 
-			{#if !isCollapsed}
-				<div>
+			<!-- bits-ui keeps a closed panel in the DOM, hidden. The rows stay unmounted, so a
+			     folded group of 200 rows costs nothing. -->
+			<Accordion.Content id={rowsId}>
+				{#if !isCollapsed}
 					{@render rows(group)}
-				</div>
-			{/if}
-		</div>
+				{/if}
+			</Accordion.Content>
+		</Accordion.Item>
 	{/each}
-</div>
+</Accordion.Root>
 
 <!-- No entrance motion. Four stacked animations made the last group of a
      40-row board arrive two seconds late. Working surfaces don't animate in. -->

package/src/components/picker/picker.svelte

@@ -18,7 +18,8 @@
 		options?: PickerOption<V>[];
 		/** Titled runs, when the menu has a shape worth naming. */
 		groups?: PickerGroup<V>[];
-		value: V | null;
+		/** An array checks each row in it, and a pick leaves the menu open for the next one. */
+		value: V | V[] | null;
 		onSelect: (value: V) => void;
 		/** The control that opens the menu. Rendered inside `Popover.Trigger`. */
 		trigger: Snippet;
@@ -74,10 +75,14 @@
 	const WIDTH = { sm: "w-44", default: "w-52", lg: "w-60" } as const;
 
 	function pick(next: V) {
-		open = false;
+		if (!Array.isArray(value)) open = false;
 		onSelect(next);
 	}
 
+	function isChecked(option: PickerOption<V>): boolean {
+		return Array.isArray(value) ? value.includes(option.value) : option.value === value;
+	}
+
 	/**
 	 * WHY a custom filter: the default one scores `value`, which is often an id.
 	 * Typing "an" fuzzy-matched every uuid, so only the visible words are searched.
@@ -152,7 +157,7 @@
 				{#each resolved as group, i (group.heading ?? i)}
 					<Command.Group heading={group.heading}>
 						{#each group.options as option (option.value)}
-							{@const active = option.value === value}
+							{@const active = isChecked(option)}
 							<Command.Item
 								value={option.value}
 								keywords={keywordsFor(option)}

package/src/components/picker/picker.svelte.d.ts

@@ -6,7 +6,8 @@ declare function $$render<V extends string>(): {
         options?: PickerOption<V>[];
         /** Titled runs, when the menu has a shape worth naming. */
         groups?: PickerGroup<V>[];
-        value: V | null;
+        /** An array checks each row in it, and a pick leaves the menu open for the next one. */
+        value: V | V[] | null;
         onSelect: (value: V) => void;
         /** The control that opens the menu. Rendered inside `Popover.Trigger`. */
         trigger: Snippet;