@heyramzi/ui 2.24.0 → 3.1.0

package/src/work/task-list.svelte

@@ -1,5 +1,7 @@
 <script lang="ts" generics="T, C extends KanbanColumnDef = KanbanColumnDef">
 	import type { Snippet } from "svelte";
+	import LiveRegion from "../lib/live-region.svelte";
+	import { focusAfterRender } from "../lib/focus.js";
 	import { flip } from "svelte/animate";
 	import { cubicOut } from "svelte/easing";
 	import { durationMs } from "../lib/motion.js";
@@ -48,8 +50,12 @@
 		 * rows hold their own links and buttons.
 		 */
 		draggable?: boolean;
-		/** The screen-reader name of a row. Defaults to a hint about the keyboard move. */
+		/** The screen-reader name of a row. Defaults to the row's own text. */
 		getLabel?: (item: T) => string;
+		/** Read after a draggable row's name, as its description. */
+		moveHint?: string;
+		/** What a screen reader hears after a row moves with the keyboard. */
+		movedLabel?: (group: C) => string;
 		/** Fires when a group is folded or unfolded, with every folded id. */
 		onCollapsedChange?: (ids: string[]) => void;
 		sortKeys?: KanbanSortKey<T>[];
@@ -85,6 +91,8 @@
 		manualTiebreak,
 		draggable = true,
 		getLabel,
+		moveHint = "Press Alt plus Up or Down arrow to move between groups.",
+		movedLabel = (group) => `Moved to ${group.label}`,
 		onCollapsedChange,
 		sortKeys = [],
 		sortKey = "manual",
@@ -103,6 +111,10 @@
 
 	// svelte-ignore state_referenced_locally
 	let folded = $state(new Set(collapsed));
+	const uid = $props.id();
+	const hintId = `${uid}-hint`;
+	let listEl: HTMLDivElement | undefined = $state();
+	let live: LiveRegion | undefined = $state();
 
 	function compare(a: T, b: T): number {
 		if (sortKey === "manual") {
@@ -178,8 +190,36 @@
 		onCollapsedChange?.([...next]);
 	}
 
+	/** Unfolds a group and every group it sits in, so a row moved there can take focus. */
+	function reveal(groupId: string): void {
+		const next = new Set(folded);
+		const seen = new Set<string>();
+		let group = groups.find((g) => g.id === groupId);
+		while (group && !seen.has(group.id)) {
+			seen.add(group.id);
+			next.delete(group.id);
+			const parent = getParent?.(group);
+			group = parent ? groups.find((g) => g.id === parent) : undefined;
+		}
+		if (next.size === folded.size) return;
+		folded = next;
+		onCollapsedChange?.([...next]);
+	}
+
 	/** Alt + ArrowUp/Down sends the focused row to the end of the group above or below. */
-	function onRowKeyDown(e: KeyboardEvent, id: string): void {
+	async function onRowKeyDown(e: KeyboardEvent, id: string): Promise<void> {
+		const target = moveRow(e, id);
+		if (!target) return;
+		await target.done;
+		reveal(target.group.id);
+		void live?.announce(movedLabel(target.group));
+		await focusAfterRender(listEl, `[data-task-row="${CSS.escape(id)}"]`);
+	}
+
+	function moveRow(
+		e: KeyboardEvent,
+		id: string,
+	): { group: C; done: void | Promise<void> } | undefined {
 		if (!e.altKey || (e.key !== "ArrowUp" && e.key !== "ArrowDown")) return;
 		const item = items.find((entry) => getId(entry) === id);
 		if (!item) return;
@@ -191,21 +231,18 @@
 			const target = groups[i];
 			if (!canDrop(target.id)) continue;
 			e.preventDefault();
-			if (sortKey === "manual") {
-				const rows = sortedByGroup(target.id).filter((entry) => getId(entry) !== id);
-				const last = rows.at(-1);
-				void onMove(id, {
-					columnId: target.id,
-					...(boardOrder
-						? { boardOrder: boardOrderAt(rows, rows.length, (entry) => boardOrder(entry)) }
-						: {}),
-					beforeId: last === undefined ? null : getId(last),
-					afterId: null,
-				});
-			} else {
-				void onMove(id, { columnId: target.id });
-			}
-			return;
+			if (sortKey !== "manual") return { group: target, done: onMove(id, { columnId: target.id }) };
+			const rows = sortedByGroup(target.id).filter((entry) => getId(entry) !== id);
+			const last = rows.at(-1);
+			const done = onMove(id, {
+				columnId: target.id,
+				...(boardOrder
+					? { boardOrder: boardOrderAt(rows, rows.length, (entry) => boardOrder(entry)) }
+					: {}),
+				beforeId: last === undefined ? null : getId(last),
+				afterId: null,
+			});
+			return { group: target, done };
 		}
 	}
 </script>
@@ -254,7 +291,7 @@
 						class:tl-chevron-open={open}
 						aria-hidden="true"
 					>
-						<CaretRight weight="bold" />
+						<CaretRight aria-hidden="true" weight="bold" />
 					</span>
 				</Button>
 			{/if}
@@ -276,11 +313,13 @@
 			{/if}
 		</div>
 
-		<div class="tl-fold" class:tl-fold-open={open}>
+		<!-- 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) &&
@@ -290,10 +329,11 @@
 						<div
 							role="listitem"
 							tabindex={draggable ? 0 : undefined}
-							aria-label={getLabel?.(item) ??
-								(draggable
-									? "Row. Press Alt plus Up or Down arrow to move between groups."
-									: 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 }}
@@ -307,7 +347,7 @@
 							ondragover={draggable
 								? (e) => dnd.onItemDragOver(e, group.id, id, idAt(rows, index + 1))
 								: undefined}
-							onkeydown={draggable ? (e) => onRowKeyDown(e, id) : 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)",
@@ -346,6 +386,7 @@
 {/snippet}
 
 <div
+	bind:this={listEl}
 	class={cn(
 		"task-list flex min-h-0 flex-1 flex-col overflow-y-auto",
 		flat ? "bg-card" : workLooks.panel,
@@ -366,102 +407,125 @@
 	{#each roots as group (group.id)}
 		{@render section(group, 0)}
 	{/each}
+
+	<LiveRegion bind:this={live} />
+	{#if draggable}
+		<p id={hintId} hidden>{moveHint}</p>
+	{/if}
 </div>
 
 <style>
-	.tl-group {
-		transition: background-color var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
 
-	.tl-group-active {
-		background: color-mix(in oklab, var(--tl-hue) 6%, transparent);
-	}
+	@layer components {
+		.tl-group {
+			transition: background-color var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	.tl-chevron {
-		transition: rotate var(--duration-fast) var(--ease-smooth-out);
-	}
+		.tl-group-active {
+			background: color-mix(in oklab, var(--tl-hue) 6%, transparent);
+		}
 
-	.tl-chevron-open {
-		rotate: 90deg;
-	}
+		.tl-chevron {
+			transition: rotate var(--duration-fast) var(--ease-smooth-out);
+		}
 
-	/* A 0fr to 1fr track folds to any height. Padding lives inside, or 0fr never fully closes. */
-	.tl-fold {
-		display: grid;
-		grid-template-rows: 0fr;
-		opacity: 0;
-		transition:
-			grid-template-rows var(--duration-fast) var(--ease-smooth-out),
-			opacity var(--duration-quick) var(--ease-smooth-out);
-	}
+		.tl-chevron-open {
+			rotate: 90deg;
+		}
 
-	.tl-fold-open {
-		grid-template-rows: 1fr;
-		opacity: 1;
-	}
+		/* A 0fr to 1fr track folds to any height. Padding lives inside, or 0fr never fully closes. */
+		.tl-fold {
+			display: grid;
+			grid-template-rows: 0fr;
+			opacity: 0;
+			transition:
+				grid-template-rows var(--duration-fast) var(--ease-smooth-out),
+				opacity var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	.tl-fold-inner {
-		min-height: 0;
-		overflow: hidden;
-	}
+		.tl-fold-open {
+			grid-template-rows: 1fr;
+			opacity: 1;
+		}
 
-	.tl-row {
-		animation: tl-row-in var(--duration-slow) var(--ease-smooth-out) backwards;
-		animation-delay: calc(var(--tl-i, 0) * var(--duration-stagger));
-		transition: background-color var(--duration-quick) var(--ease-smooth-out);
-	}
+		.tl-fold-inner {
+			min-height: 0;
+			overflow: hidden;
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.tl-row:hover {
-			background: color-mix(in oklab, var(--color-foreground) 4%, transparent);
+		.tl-row {
+			animation: tl-row-in var(--duration-slow) var(--ease-smooth-out) backwards;
+			animation-delay: calc(var(--tl-i, 0) * var(--duration-stagger));
+			transition: background-color var(--duration-quick) var(--ease-smooth-out);
 		}
-	}
 
-	/* The drop line: a hairline in the group's hue with a dot where it starts. */
-	.tl-drop-before::before,
-	.tl-drop-end::before {
-		content: "";
-		position: absolute;
-		left: 0.5rem;
-		right: 0.5rem;
-		height: 2px;
-		background: var(--tl-hue);
-		animation: tl-line-in var(--duration-quick) var(--ease-smooth-out) both;
-	}
+		@media (hover: hover) and (pointer: fine) {
+			.tl-row:hover {
+				background: color-mix(in oklab, var(--color-foreground) 4%, transparent);
+			}
+		}
 
-	/* A ring where the line starts, so the drop point reads at a glance. */
-	.tl-drop-before::after,
-	.tl-drop-end::after {
-		content: "";
-		position: absolute;
-		left: 0.25rem;
-		width: 8px;
-		height: 8px;
-		/* A ring drawn as a gradient, so the line needs no radius or border of its own. */
-		background: radial-gradient(
-			circle closest-side,
-			var(--color-card) calc(50% - 0.5px),
-			var(--tl-hue) 50%,
-			var(--tl-hue) calc(100% - 0.5px),
-			transparent 100%
-		);
-		animation: tl-line-in var(--duration-quick) var(--ease-smooth-out) both;
-	}
+		/* The drop line: a hairline in the group's hue with a dot where it starts. */
+		.tl-drop-before::before,
+		.tl-drop-end::before {
+			content: "";
+			position: absolute;
+			left: 0.5rem;
+			right: 0.5rem;
+			height: 2px;
+			background: var(--tl-hue);
+			animation: tl-line-in var(--duration-quick) var(--ease-smooth-out) both;
+		}
 
-	.tl-drop-before::before {
-		top: -1px;
-	}
+		/* A ring where the line starts, so the drop point reads at a glance. */
+		.tl-drop-before::after,
+		.tl-drop-end::after {
+			content: "";
+			position: absolute;
+			left: 0.25rem;
+			width: 8px;
+			height: 8px;
+			/* A ring drawn as a gradient, so the line needs no radius or border of its own. */
+			background: radial-gradient(
+				circle closest-side,
+				var(--color-card) calc(50% - 0.5px),
+				var(--tl-hue) 50%,
+				var(--tl-hue) calc(100% - 0.5px),
+				transparent 100%
+			);
+			animation: tl-line-in var(--duration-quick) var(--ease-smooth-out) both;
+		}
 
-	.tl-drop-before::after {
-		top: -4px;
-	}
+		.tl-drop-before::before {
+			top: -1px;
+		}
 
-	.tl-drop-end::before {
-		top: 0;
-	}
+		.tl-drop-before::after {
+			top: -4px;
+		}
+
+		.tl-drop-end::before {
+			top: 0;
+		}
 
-	.tl-drop-end::after {
-		top: -3px;
+		.tl-drop-end::after {
+			top: -3px;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.tl-row,
+			.tl-drop-before::before,
+			.tl-drop-end::before,
+			.tl-drop-before::after,
+			.tl-drop-end::after {
+				animation: none;
+			}
+			.tl-fold,
+			.tl-chevron {
+				transition: none;
+			}
+		}
 	}
 
 	@keyframes tl-row-in {
@@ -478,18 +542,4 @@
 			transform: scaleX(0.6);
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.tl-row,
-		.tl-drop-before::before,
-		.tl-drop-end::before,
-		.tl-drop-before::after,
-		.tl-drop-end::after {
-			animation: none;
-		}
-		.tl-fold,
-		.tl-chevron {
-			transition: none;
-		}
-	}
 </style>

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

@@ -0,0 +1,81 @@
+import type { Snippet } from "svelte";
+import type { KanbanColumn as KanbanColumnDef, KanbanMove, KanbanSortKey } from "./kanban-types.js";
+import type { TaskListGroupContext, TaskListRowContext } from "./task-types.js";
+interface Props<T, C extends KanbanColumnDef> {
+    /** The same shape as board columns, so one config feeds both views. */
+    groups: C[];
+    items: T[];
+    getId: (item: T) => string;
+    /** The group id a row belongs to. */
+    getGroup: (item: T) => string;
+    /**
+     * Nests a group under another by its id, e.g. a project under its client, so it folds with
+     * its parent. Return nothing for a top-level group.
+     */
+    getParent?: (group: C) => string | null | undefined;
+    /** Called on drop with what to persist. Same contract as the board. */
+    onMove: (id: string, move: KanbanMove) => void | Promise<void>;
+    renderRow: Snippet<[T, TaskListRowContext]>;
+    /** Optional sticky header row above every group, e.g. column labels. */
+    head?: Snippet;
+    groupHeader?: Snippet<[C, TaskListGroupContext]>;
+    /** Controls at the end of a group header, shown on hover, focus or a coarse pointer. */
+    actions?: Snippet<[C, TaskListGroupContext]>;
+    /** Rendered under a group's rows, e.g. an add-task row. Folds with the group. */
+    groupFooter?: Snippet<[C, TaskListGroupContext]>;
+    boardOrder?: (item: T) => string | null | undefined;
+    /** Breaks a tie in manual order: two rows with the same key, or both without one. */
+    manualTiebreak?: (a: T, b: T) => number;
+    /**
+     * Rows drag and take Alt plus Up or Down. Turn it off for a list that only groups, where
+     * rows hold their own links and buttons.
+     */
+    draggable?: boolean;
+    /** The screen-reader name of a row. Defaults to the row's own text. */
+    getLabel?: (item: T) => string;
+    /** Read after a draggable row's name, as its description. */
+    moveHint?: string;
+    /** What a screen reader hears after a row moves with the keyboard. */
+    movedLabel?: (group: C) => string;
+    /** Fires when a group is folded or unfolded, with every folded id. */
+    onCollapsedChange?: (ids: string[]) => void;
+    sortKeys?: KanbanSortKey<T>[];
+    sortKey?: string;
+    /** Groups can be folded from their header. Defaults to true. */
+    collapsible?: boolean;
+    /** Group ids that start folded. */
+    collapsed?: string[];
+    emptyLabel?: string;
+    /** Shows a plus in each default group head that adds a row to that group. */
+    onAdd?: (groupId: string) => void;
+    /** The plus button's accessible name, followed by the group label. */
+    addLabel?: string;
+    isDroppable?: (groupId: string) => boolean;
+    /** Drops the card chrome (border, radius, fill) so the list sits flat on the page. Group dividers stay. */
+    flat?: boolean;
+    class?: string;
+}
+declare function $$render<T, C extends KanbanColumnDef = KanbanColumnDef>(): {
+    props: Props<T, C>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T, C extends KanbanColumnDef = KanbanColumnDef> {
+    props(): ReturnType<typeof $$render<T, C>>['props'];
+    events(): ReturnType<typeof $$render<T, C>>['events'];
+    slots(): ReturnType<typeof $$render<T, C>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T, C extends KanbanColumnDef = KanbanColumnDef>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, C>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, C>['props']>, ReturnType<__sveltets_Render<T, C>['events']>, ReturnType<__sveltets_Render<T, C>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, C>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, C>['exports']>;
+    <T, C extends KanbanColumnDef = KanbanColumnDef>(internal: unknown, props: ReturnType<__sveltets_Render<T, C>['props']> & {}): ReturnType<__sveltets_Render<T, C>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<T, C extends KanbanColumnDef = KanbanColumnDef> = InstanceType<typeof $$Component<T, C>>;
+export default $$Component;

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

@@ -0,0 +1,113 @@
+import { createRawSnippet, flushSync, mount, tick, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import TaskList from "./task-list.svelte";
+import type { KanbanMove } from "./kanban-types.js";
+
+type Task = { id: string; groupId: string; title: string; boardOrder: string };
+
+const groups = [
+  { id: "todo", label: "To do" },
+  { id: "doing", label: "In progress" },
+  { id: "done", label: "Done" },
+];
+
+const renderRow = createRawSnippet((task: () => Task) => ({
+  render: () => `<p>${task().title}</p>`,
+}));
+
+function render(collapsed: string[] = []) {
+  const props = $state({
+    groups,
+    collapsed,
+    items: [
+      { id: "t1", groupId: "todo", title: "Draft notes", boardOrder: "a0" },
+      { id: "t2", groupId: "doing", title: "Ship flow", boardOrder: "a0" },
+      { id: "t3", groupId: "done", title: "Close out", boardOrder: "a0" },
+    ] as Task[],
+    getId: (t: Task) => t.id,
+    getGroup: (t: Task) => t.groupId,
+    boardOrder: (t: Task) => t.boardOrder,
+    renderRow,
+    onMove: (id: string, move: KanbanMove) => {
+      props.items = props.items.map((t) =>
+        t.id === id ? { ...t, groupId: move.columnId, boardOrder: move.boardOrder ?? "" } : t,
+      );
+    },
+  });
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(TaskList<Task>, { target, props });
+  flushSync();
+  return {
+    target,
+    row: (id: string) => target.querySelector<HTMLElement>(`[data-task-row="${id}"]`),
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
+}
+
+// Waits out the list's await of onMove and its tick, then Svelte's flush.
+async function settle() {
+  for (let i = 0; i < 4; i++) await tick();
+  flushSync();
+}
+
+// Svelte sets inert as a property, and jsdom doesn't reflect it to the attribute.
+function insideInert(el: HTMLElement | null): boolean {
+  for (let node = el; node; node = node.parentElement) if (node.inert) return true;
+  return false;
+}
+
+function pressAltDown(el: HTMLElement | null) {
+  el?.dispatchEvent(
+    new KeyboardEvent("keydown", { key: "ArrowDown", altKey: true, bubbles: true }),
+  );
+}
+
+describe("TaskList keyboard move", () => {
+  it("keeps focus on the moved row in its new group and announces the move", async () => {
+    const { target, row, done } = render();
+    row("t1")?.focus();
+    pressAltDown(row("t1"));
+    await settle();
+
+    const moved = row("t1");
+    expect(moved?.closest('section[aria-label="In progress"]')).not.toBeNull();
+    expect(document.activeElement).toBe(moved);
+    expect(target.querySelector('[role="status"]')?.textContent).toBe("Moved to In progress");
+    done();
+  });
+
+  it("opens a folded group a row moves into, so the row keeps focus", async () => {
+    const { row, done } = render(["doing"]);
+    row("t1")?.focus();
+    pressAltDown(row("t1"));
+    await settle();
+
+    const moved = row("t1");
+    expect(insideInert(moved)).toBe(false);
+    expect(document.activeElement).toBe(moved);
+    done();
+  });
+});
+
+describe("TaskList folds and names", () => {
+  it("makes a folded group's rows inert, so Tab skips them", () => {
+    const { row, done } = render(["done"]);
+    expect(insideInert(row("t3"))).toBe(true);
+    expect(insideInert(row("t1"))).toBe(false);
+    done();
+  });
+
+  it("names a row by its own text and describes it with the move hint", () => {
+    const { row, done } = render();
+    const el = row("t1");
+    expect(el?.hasAttribute("aria-label")).toBe(false);
+    expect(el?.getAttribute("aria-labelledby")).toBe(el?.id);
+    const hint = document.getElementById(el?.getAttribute("aria-describedby") ?? "");
+    expect(hint?.textContent).toBe("Press Alt plus Up or Down arrow to move between groups.");
+    done();
+  });
+});

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

@@ -54,10 +54,8 @@
 		{/snippet}
 		<span aria-hidden="true">
 			{formatMinutes(minutes)}{#if estimate}<span
-					class={cn(
-						"font-normal",
-						tone === "neutral" ? "text-muted-foreground/70" : TONE_TEXT[tone],
-					)}>{`\u2009/\u2009${formatMinutes(estimate)}`}</span
+					class={cn("font-normal", tone === "neutral" ? "text-muted-foreground" : TONE_TEXT[tone])}
+					>{`\u2009/\u2009${formatMinutes(estimate)}`}</span
 				>{/if}
 		</span>
 	</StatusPill>

package/src/work/time/time-chip.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** Minutes logged on the task. */
+    minutes: number;
+    /** Minutes budgeted. Draws a small ring and tints the chip as the budget runs out. */
+    estimate?: number;
+    /** A timer is running on the task. */
+    running?: boolean;
+    /** Replaces the spoken name. Defaults to a sentence built from the numbers. */
+    label?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -18,24 +18,37 @@
 ></span>
 
 <style>
-	.time-dot {
-		position: relative;
-		display: inline-block;
-		flex: none;
-		width: var(--time-dot-size);
-		height: var(--time-dot-size);
-		/* A dot, the one round shape DESIGN rule 15 allows for a status. */
-		border-radius: 50%;
-		background: currentColor;
-	}
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.time-dot {
+			position: relative;
+			display: inline-block;
+			flex: none;
+			width: var(--time-dot-size);
+			height: var(--time-dot-size);
+			/* A dot, the one round shape DESIGN rule 15 allows for a status. */
+			border-radius: 50%;
+			background: currentColor;
+		}
+
+		.time-dot.is-running::after {
+			content: "";
+			position: absolute;
+			inset: 0;
+			border-radius: inherit;
+			background: currentColor;
+			animation: time-dot-pulse var(--time-pulse-duration, 2000ms) var(--ease-out, ease-out)
+				infinite;
+		}
 
-	.time-dot.is-running::after {
-		content: "";
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		background: currentColor;
-		animation: time-dot-pulse var(--time-pulse-duration, 2000ms) var(--ease-out, ease-out) infinite;
+		@media (prefers-reduced-motion: reduce) {
+			.time-dot.is-running::after {
+				animation: none;
+				transform: scale(1.9);
+				opacity: 0.25;
+			}
+		}
 	}
 
 	@keyframes time-dot-pulse {
@@ -48,12 +61,4 @@
 			opacity: 0;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.time-dot.is-running::after {
-			animation: none;
-			transform: scale(1.9);
-			opacity: 0.25;
-		}
-	}
 </style>