@heyramzi/ui 3.1.0 → 3.3.0

package/src/work/task-list.svelte

@@ -11,6 +11,7 @@
 	import { createKanbanDnd } from "./use-kanban-dnd.svelte.js";
 	import { CaretRight } from "phosphor-svelte";
 	import { Button } from "../shadcn/button/index.js";
+	import * as Collapsible from "../shadcn/collapsible/index.js";
 	import GroupHead from "../components/work-parts/group-head.svelte";
 	import { workLooks } from "../components/work-parts/looks.js";
 	import type {
@@ -182,9 +183,10 @@
 		isDroppable: canDrop,
 	});
 
-	function toggle(groupId: string): void {
+	function setOpen(groupId: string, open: boolean): void {
+		if (open !== folded.has(groupId)) return;
 		const next = new Set(folded);
-		if (next.has(groupId)) next.delete(groupId);
+		if (open) next.delete(groupId);
 		else next.add(groupId);
 		folded = next;
 		onCollapsedChange?.([...next]);
@@ -255,134 +257,153 @@
 	{@const open = !folded.has(group.id)}
 	{@const hue = group.hue ?? "var(--color-primary)"}
 	{@const context = { count, active, open, depth, hasChildren: children.length > 0 }}
-	<section
-		aria-label={group.ariaLabel ?? group.label}
-		class={cn(
-			"tl-group group/tl",
-			depth === 0 ? "border-b border-border last:border-b-0" : "border-t border-border/60",
-		)}
-		class:tl-group-active={active}
-		style:--tl-hue={hue}
-		ondragover={children.length ? undefined : (e) => dnd.onColumnDragOver(e, group.id)}
-		ondragleave={children.length ? undefined : dnd.onDragLeave}
-		ondrop={children.length ? undefined : (e) => dnd.onDrop(e, group.id)}
-	>
-		<div
-			class={cn(
-				"hover-row sticky z-10 flex h-10 items-center gap-2 px-3 backdrop-blur-sm",
-				flat ? "bg-card/90" : "bg-card/90",
-				depth === 0 && (head ? "top-9" : "top-0"),
-			)}
-			style:top={depth > 0 ? `${(head ? 2.25 : 0) + depth * 2.5}rem` : undefined}
-			style:padding-inline-start={depth > 0 ? `${0.75 + depth * 1.25}rem` : undefined}
-		>
-			{#if collapsible}
-				<Button
-					variant="ghost"
-					size="sm"
-					icon
-					aria-expanded={open}
-					aria-label="{open ? 'Fold' : 'Unfold'} {group.label}"
-					onclick={() => toggle(group.id)}
-					class="-ml-1.5 text-muted-foreground"
+	<Collapsible.Root bind:open={() => open, (next) => setOpen(group.id, next)}>
+		{#snippet child({ props })}
+			<section
+				{...props}
+				aria-label={group.ariaLabel ?? group.label}
+				class={cn(
+					"tl-group group/tl",
+					depth === 0 ? "border-b border-border last:border-b-0" : "border-t border-border/60",
+				)}
+				class:tl-group-active={active}
+				style:--tl-hue={hue}
+				ondragover={children.length ? undefined : (e) => dnd.onColumnDragOver(e, group.id)}
+				ondragleave={children.length ? undefined : dnd.onDragLeave}
+				ondrop={children.length ? undefined : (e) => dnd.onDrop(e, group.id)}
+			>
+				<div
+					class={cn(
+						"hover-row sticky z-10 flex h-10 items-center gap-2 px-3 backdrop-blur-sm",
+						flat ? "bg-card/90" : "bg-card/90",
+						depth === 0 && (head ? "top-9" : "top-0"),
+					)}
+					style:top={depth > 0 ? `${(head ? 2.25 : 0) + depth * 2.5}rem` : undefined}
+					style:padding-inline-start={depth > 0 ? `${0.75 + depth * 1.25}rem` : undefined}
 				>
-					<span
-						class="tl-chevron size-3.5 [&>svg]:size-full"
-						class:tl-chevron-open={open}
-						aria-hidden="true"
-					>
-						<CaretRight aria-hidden="true" weight="bold" />
-					</span>
-				</Button>
-			{/if}
-			{#if groupHeader}
-				{@render groupHeader(group, context)}
-			{:else}
-				<GroupHead
-					label={group.label}
-					{hue}
-					{count}
-					onAdd={onAdd ? () => onAdd(group.id) : undefined}
-					{addLabel}
-				/>
-			{/if}
-			{#if actions}
-				<div class="tl-actions row-action ms-auto flex shrink-0 items-center gap-1">
-					{@render actions(group, context)}
-				</div>
-			{/if}
-		</div>
-
-		<!-- inert: a folded group's rows leave the Tab order and the accessibility tree. -->
-		<div class="tl-fold" class:tl-fold-open={open} inert={!open}>
-			<div class="tl-fold-inner">
-				<div role="list" aria-label={group.label} class="flex flex-col pb-1.5">
-					{#each rows as item, index (getId(item))}
-						{@const id = getId(item)}
-						{@const rowId = `${uid}-row-${encodeURIComponent(id)}`}
-						{@const dropBefore =
-							dnd.showIndicatorBefore(group.id, id) &&
-							!dnd.isDragSource(id) &&
-							idAt(rows, index - 1) !== dnd.draggedId}
-						<!-- WHY: a row is a list item that takes focus for the Alt+arrow move; making it a button would hide the list from screen readers. -->
-						<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
-						<div
-							role="listitem"
-							tabindex={draggable ? 0 : undefined}
-							id={rowId}
-							data-task-row={id}
-							aria-label={getLabel?.(item)}
-							aria-labelledby={draggable && !getLabel ? rowId : undefined}
-							aria-describedby={draggable ? hintId : undefined}
-							aria-keyshortcuts={draggable ? "Alt+ArrowUp Alt+ArrowDown" : undefined}
-							draggable={draggable ? "true" : undefined}
-							animate:flip={{ duration: () => durationMs("fast"), easing: cubicOut }}
-							ondragstart={draggable
-								? (e) => {
-										liftDragImage(e);
-										dnd.onDragStart(e, id);
-									}
-								: undefined}
-							ondragend={draggable ? () => dnd.resetDrag() : undefined}
-							ondragover={draggable
-								? (e) => dnd.onItemDragOver(e, group.id, id, idAt(rows, index + 1))
-								: undefined}
-							onkeydown={draggable ? (e) => void onRowKeyDown(e, id) : undefined}
-							style:--tl-i={Math.min(index, STAGGER_CAP)}
-							class={cn(
-								"tl-row relative mx-1.5 outline-none focus-visible:shadow-(--ring-focus)",
-								workLooks.row,
-								workLooks.rowHeight,
-								draggable && "cursor-grab active:cursor-grabbing",
-								dropBefore && "tl-drop-before",
-								dnd.isDragSource(id) && "opacity-40",
-							)}
-						>
-							{@render renderRow(item, { groupId: group.id, index })}
-						</div>
-					{/each}
-
-					{#if dnd.showIndicatorEnd(group.id) && idAt(rows, rows.length - 1) !== dnd.draggedId}
-						<div class="tl-drop-end relative mx-1.5 h-2" aria-hidden="true"></div>
+					{#if collapsible}
+						<Collapsible.Trigger>
+							{#snippet child({ props })}
+								<Button
+									{...props}
+									variant="ghost"
+									size="sm"
+									icon
+									aria-label="{open ? 'Fold' : 'Unfold'} {group.label}"
+									class="-ml-1.5 text-muted-foreground"
+								>
+									<span
+										class="tl-chevron size-3.5 [&>svg]:size-full"
+										class:tl-chevron-open={open}
+										aria-hidden="true"
+									>
+										<CaretRight aria-hidden="true" weight="bold" />
+									</span>
+								</Button>
+							{/snippet}
+						</Collapsible.Trigger>
 					{/if}
-
-					{#if groupFooter}
-						{@render groupFooter(group, context)}
+					{#if groupHeader}
+						{@render groupHeader(group, context)}
+					{:else}
+						<GroupHead
+							label={group.label}
+							{hue}
+							{count}
+							onAdd={onAdd ? () => onAdd(group.id) : undefined}
+							{addLabel}
+						/>
 					{/if}
-
-					{#if rows.length === 0 && children.length === 0 && !active}
-						<p class={cn(workLooks.rowHole, "mx-1.5 px-3 py-3 text-xs text-muted-foreground")}>
-							{emptyLabel}
-						</p>
+					{#if actions}
+						<div class="tl-actions row-action ms-auto flex shrink-0 items-center gap-1">
+							{@render actions(group, context)}
+						</div>
 					{/if}
 				</div>
 
-				{#each children as child (child.id)}
-					{@render section(child, depth + 1)}
-				{/each}
-			</div>
-		</div>
-	</section>
+				<!-- inert: a folded group's rows leave the Tab order and the accessibility tree. -->
+				<Collapsible.Content forceMount>
+					{#snippet child({ props })}
+						<div {...props} class="tl-fold" class:tl-fold-open={open}>
+							<!-- On the inner box: beside the spread Svelte writes inert as an attribute, and
+							     clearing it leaves the rows inert in the unit tests' DOM. -->
+							<div class="tl-fold-inner" inert={!open}>
+								<div role="list" aria-label={group.label} class="flex flex-col pb-1.5">
+									{#each rows as item, index (getId(item))}
+										{@const id = getId(item)}
+										{@const rowId = `${uid}-row-${encodeURIComponent(id)}`}
+										{@const dropBefore =
+											dnd.showIndicatorBefore(group.id, id) &&
+											!dnd.isDragSource(id) &&
+											idAt(rows, index - 1) !== dnd.draggedId}
+										<!-- WHY: a row is a list item that takes focus for the Alt+arrow move; making it a button would hide the list from screen readers. -->
+										<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+										<div
+											role="listitem"
+											tabindex={draggable ? 0 : undefined}
+											id={rowId}
+											data-task-row={id}
+											aria-label={getLabel?.(item)}
+											aria-labelledby={draggable && !getLabel ? rowId : undefined}
+											aria-describedby={draggable ? hintId : undefined}
+											aria-keyshortcuts={draggable ? "Alt+ArrowUp Alt+ArrowDown" : undefined}
+											draggable={draggable ? "true" : undefined}
+											animate:flip={{ duration: () => durationMs("fast"), easing: cubicOut }}
+											ondragstart={draggable
+												? (e) => {
+														liftDragImage(e);
+														dnd.onDragStart(e, id);
+													}
+												: undefined}
+											ondragend={draggable ? () => dnd.resetDrag() : undefined}
+											ondragover={draggable
+												? (e) => dnd.onItemDragOver(e, group.id, id, idAt(rows, index + 1))
+												: undefined}
+											onkeydown={draggable ? (e) => void onRowKeyDown(e, id) : undefined}
+											style:--tl-i={Math.min(index, STAGGER_CAP)}
+											class={cn(
+												"tl-row relative mx-1.5 outline-none focus-visible:shadow-(--ring-focus)",
+												workLooks.row,
+												workLooks.rowHeight,
+												draggable && "cursor-grab active:cursor-grabbing",
+												dropBefore && "tl-drop-before",
+												dnd.isDragSource(id) && "opacity-40",
+											)}
+										>
+											{@render renderRow(item, { groupId: group.id, index })}
+										</div>
+									{/each}
+
+									{#if dnd.showIndicatorEnd(group.id) && idAt(rows, rows.length - 1) !== dnd.draggedId}
+										<div class="tl-drop-end relative mx-1.5 h-2" aria-hidden="true"></div>
+									{/if}
+
+									{#if groupFooter}
+										{@render groupFooter(group, context)}
+									{/if}
+
+									{#if rows.length === 0 && children.length === 0 && !active}
+										<p
+											class={cn(
+												workLooks.rowHole,
+												"mx-1.5 px-3 py-3 text-xs text-muted-foreground",
+											)}
+										>
+											{emptyLabel}
+										</p>
+									{/if}
+								</div>
+
+								{#each children as sub (sub.id)}
+									{@render section(sub, depth + 1)}
+								{/each}
+							</div>
+						</div>
+					{/snippet}
+				</Collapsible.Content>
+			</section>
+		{/snippet}
+	</Collapsible.Root>
 {/snippet}
 
 <div

package/src/work/task-list.svelte.test.ts

@@ -54,9 +54,12 @@ async function settle() {
   flushSync();
 }
 
-// Svelte sets inert as a property, and jsdom doesn't reflect it to the attribute.
+// jsdom doesn't reflect inert between property and attribute, and Svelte sets the attribute
+// when the element also takes a spread (the Collapsible's props), so read both.
 function insideInert(el: HTMLElement | null): boolean {
-  for (let node = el; node; node = node.parentElement) if (node.inert) return true;
+  for (let node = el; node; node = node.parentElement) {
+    if (node.inert || node.hasAttribute("inert")) return true;
+  }
   return false;
 }
 

package/src/work/time/time-tracker.svelte

@@ -1,5 +1,6 @@
 <script lang="ts" generics="T">
 	import type { Snippet } from "svelte";
+	import { Meter } from "bits-ui";
 	import { cn } from "../../lib/utils.js";
 	import { initial } from "../../lib/initials.js";
 	import { TONE_COLOR, TONE_TEXT } from "../../lib/tone.js";
@@ -84,6 +85,10 @@
 
 	let labels = $derived({ ...DEFAULT_TIME_LABELS, ...labelOverrides });
 
+	const uid = $props.id();
+	const invalidId = `${uid}-invalid`;
+	const loggedId = `${uid}-logged`;
+
 	// ---- timer
 	let now = $state(Date.now());
 	let open = $state(false);
@@ -143,7 +148,7 @@
 	let note = $state("");
 	let saving = $state(false);
 	let invalid = $state(false);
-	let durationInput = $state<HTMLInputElement>();
+	let durationInput = $state<HTMLInputElement | null>(null);
 	let parsed = $derived(parseMinutes(duration));
 	let preview = $derived(
 		parsed !== null && parsed >= 1 && parsed <= 1440 ? formatMinutes(parsed) : "",
@@ -170,6 +175,14 @@
 
 	// ---- summary
 	let total = $derived(entries.reduce((sum, entry) => sum + getMinutes(entry), 0));
+	// What the trigger shows, so its name holds it (WCAG 2.5.3, label in name).
+	let shown = $derived(
+		running
+			? `${clock.hours}:${clock.minutes}:${clock.seconds}`
+			: total > 0
+				? `${formatMinutes(total)}${estimate ? ` / ${formatMinutes(estimate)}` : ""}`
+				: labels.timer,
+	);
 	let liveTotal = $derived(total + elapsedMinutes);
 	let tone = $derived(budgetTone(liveTotal, estimate));
 	let percent = $derived(estimate ? Math.round((liveTotal / estimate) * 100) : 0);
@@ -245,7 +258,7 @@
 					buttonVariants({ variant: "ghost", size: "sm" }),
 					"time-open gap-1.5 ps-1 pe-2 text-(length:--text-control) tabular-nums data-[state=open]:bg-muted",
 				)}
-				aria-label={labels.title}
+				aria-label="{labels.title}: {shown}"
 			>
 				{#if running}
 					<TimeDot running size={6} />
@@ -278,7 +291,7 @@
 						placeholder={labels.durationPlaceholder}
 						aria-label={labels.duration}
 						aria-invalid={invalid}
-						aria-describedby={invalid ? "time-invalid" : undefined}
+						aria-describedby={invalid ? invalidId : undefined}
 						autocomplete="off"
 						inputmode="text"
 						class={cn(
@@ -313,20 +326,33 @@
 				</Button>
 			</form>
 			{#if invalid}
-				<p id="time-invalid" class="text-xs text-destructive-ink" role="alert">{labels.invalid}</p>
+				<p id={invalidId} class="text-xs text-destructive-ink" role="alert">{labels.invalid}</p>
 			{/if}
 
 			{#if entries.length > 0 || estimate}
 				<div class="flex flex-col gap-2 border-t border-border/60 pt-3">
 					<div class="flex items-baseline justify-between gap-2">
-						<span class="text-xs font-medium text-muted-foreground">{labels.logged}</span>
+						<span id={loggedId} class="text-xs font-medium text-muted-foreground"
+							>{labels.logged}</span
+						>
 						{#key total}
 							<span class="time-pop font-medium tabular-nums">{formatMinutes(total)}</span>
 						{/key}
 					</div>
 					{#if estimate}
+						{@const budget =
+							liveTotal > estimate
+								? labels.over(formatMinutes(liveTotal - estimate), formatMinutes(estimate))
+								: labels.remaining(formatMinutes(estimate - liveTotal), formatMinutes(estimate))}
 						<div class="flex flex-col gap-1">
-							<div class={cn("h-1 overflow-hidden bg-muted", ganttLooks.track)} aria-hidden="true">
+							<!-- The meter speaks the budget line, so the line below stays out of the reading order. -->
+							<Meter.Root
+								value={Math.min(liveTotal, estimate)}
+								max={estimate}
+								aria-labelledby={loggedId}
+								aria-valuetext={budget}
+								class={cn("h-1 overflow-hidden bg-muted", ganttLooks.track)}
+							>
 								<div
 									class={cn("time-segment h-full", ganttLooks.track)}
 									style:background={tone === "neutral"
@@ -334,16 +360,15 @@
 										: TONE_COLOR[tone]}
 									style:width="{Math.min(100, percent)}%"
 								></div>
-							</div>
+							</Meter.Root>
 							<p
 								class={cn(
 									"text-xs tabular-nums",
 									tone === "neutral" ? "text-muted-foreground" : TONE_TEXT[tone],
 								)}
+								aria-hidden="true"
 							>
-								{liveTotal > estimate
-									? labels.over(formatMinutes(liveTotal - estimate), formatMinutes(estimate))
-									: labels.remaining(formatMinutes(estimate - liveTotal), formatMinutes(estimate))}
+								{budget}
 							</p>
 						</div>
 					{/if}