@heyramzi/ui 2.1.0 → 2.2.0

package/src/tasks/kanban-board.svelte

@@ -42,8 +42,8 @@
 		/** Rendered under a column's cards, e.g. a "Show all 12" or an add button. */
 		columnFooter?: Snippet<[C, KanbanColumnContext]>;
 		/**
-		 * Wraps a whole column, for a context menu or a tooltip around it. Render `column` once and
-		 * spread the `props` it hands you, so the wrapper's trigger lands on the column.
+		 * Wraps a column for a context menu or tooltip: render `column` once and spread the
+		 * `props` it hands you, so the trigger lands on the column.
 		 */
 		wrapColumn?: Snippet<[C, Snippet<[Record<string, unknown>]>]>;
 		/** Enter or Space on a focused card. Leave out when the card holds its own links and buttons. */
@@ -52,8 +52,8 @@
 		getLabel?: (item: T) => string;
 		emptyLabel?: string;
 		/**
-		 * Cards a column shows before the rest fold behind a footer. Return undefined for no cap.
-		 * A capped column's empty space drops on top, since the tail is out of sight.
+		 * Cards a column shows before the rest fold behind a footer, or undefined for no cap; a
+		 * capped column drops on top, since its tail is out of sight.
 		 */
 		limit?: (columnId: string) => number | undefined;
 		/** Column ids whose `limit` is lifted. Controlled; leave out to let the board remember. */
@@ -158,7 +158,7 @@
 	}
 
 	function canDrop(columnId: string): boolean {
-		return isDroppable?.(columnId) ?? (columns.find((c) => c.id === columnId)?.droppable ?? true);
+		return isDroppable?.(columnId) ?? columns.find((c) => c.id === columnId)?.droppable ?? true;
 	}
 
 	function expand(columnId: string): void {
@@ -216,9 +216,8 @@
 	});
 
 	/**
-	 * Keyboard move: Alt + ArrowLeft/Right drops the focused card in the
-	 * adjacent droppable column. Native drag stays the primary path; this
-	 * covers keyboard and touch-reader users with the same onMove contract.
+	 * Alt + ArrowLeft/Right moves the focused card to the next droppable column, so
+	 * keyboard and screen-reader users get drag's onMove contract.
 	 */
 	function onCardKeyDown(e: KeyboardEvent, id: string): void {
 		if (onSelect && e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
@@ -373,7 +372,8 @@
 			<div
 				role="listitem"
 				tabindex="0"
-				aria-label={getLabel?.(item) ?? "Card. Press Alt plus Left or Right arrow to move between columns."}
+				aria-label={getLabel?.(item) ??
+					"Card. Press Alt plus Left or Right arrow to move between columns."}
 				aria-keyshortcuts="Alt+ArrowLeft Alt+ArrowRight"
 				draggable="true"
 				ondragstart={(e) => {
@@ -465,8 +465,10 @@
 								"kanban-rail-item rounded-md transition-[background-color,outline-color] duration-[var(--duration-quick,120ms)] ease-[var(--ease-smooth-out,ease-out)]",
 								leaving.has(column.id) && "kanban-rail-item-leaving",
 							)}
-							style:background="color-mix(in oklch, {hue} {over ? 10 : 0}%, transparent)"
-							style:outline="1px solid color-mix(in oklch, {hue} {over ? 28 : 0}%, transparent)"
+							style:background="color-mix(in oklch, {hue}
+							{over ? 10 : 0}%, transparent)"
+							style:outline="1px solid color-mix(in oklch, {hue}
+							{over ? 28 : 0}%, transparent)"
 							ondragover={(e) => onHiddenDragOver(e, column.id)}
 							ondragleave={onHiddenDragLeave}
 							ondrop={(e) => onHiddenDrop(e, column.id)}
@@ -481,7 +483,9 @@
 								{:else}
 									<span class="truncate whitespace-nowrap">{column.label}</span>
 									{#if count > 0}
-										<span class="ms-auto text-xs text-muted-foreground/60 tabular-nums">{count}</span>
+										<span class="ms-auto text-xs text-muted-foreground/60 tabular-nums"
+											>{count}</span
+										>
 									{/if}
 								{/if}
 							</button>

package/src/tasks/kanban-types.ts

@@ -24,9 +24,8 @@ export type KanbanMove = {
    */
   boardOrder?: string;
   /**
-   * The cards that sit above and below the drop slot once the dragged card is
-   * set aside. Set on manual drops only, null at an end. For a backend that
-   * orders by neighbour instead of by key.
+   * The drop slot's neighbours, for a backend that orders by neighbour, not by
+   * key. Set on manual drops only, null at an end.
    */
   beforeId?: string | null;
   afterId?: string | null;

package/src/tasks/presets/sales.ts

@@ -5,12 +5,12 @@ import { defineStatuses } from "../../status/define-statuses.js";
  * swap the keys and labels for your own domain.
  */
 export const salesStatuses = defineStatuses({
-	new: { label: "New", tone: "accent", variant: "open" },
-	contacted: { label: "Contacted", tone: "info", variant: "open" },
-	proposal: { label: "Proposal", tone: "accent", variant: "progress", progress: 0.25 },
-	negotiation: { label: "Negotiation", tone: "warning", variant: "progress", progress: 0.75 },
-	won: { label: "Won", tone: "success", variant: "completed" },
-	lost: { label: "Lost", tone: "destructive", variant: "lost" },
+  new: { label: "New", tone: "accent", variant: "open" },
+  contacted: { label: "Contacted", tone: "info", variant: "open" },
+  proposal: { label: "Proposal", tone: "accent", variant: "progress", progress: 0.25 },
+  negotiation: { label: "Negotiation", tone: "warning", variant: "progress", progress: 0.75 },
+  won: { label: "Won", tone: "success", variant: "completed" },
+  lost: { label: "Lost", tone: "destructive", variant: "lost" },
 });
 
 export type SalesStatus = (typeof salesStatuses.ids)[number];

package/src/tasks/task-gantt.svelte

@@ -33,8 +33,8 @@
 		/** ISO date, inclusive. See `getStart`. */
 		getEnd: (item: T) => string | null | undefined;
 		/**
-		 * The id of the task this one sits under. Children nest under their parent, indented
-		 * and foldable. A parent with no dates of its own draws the span of what is below it.
+		 * The parent task's id; a parent with no dates of its own draws the span of the
+		 * children nested under it.
 		 */
 		getParent?: (item: T) => string | null | undefined;
 		/** Draws a flag at the end date instead of a bar. Milestones are not draggable. */
@@ -133,10 +133,16 @@
 	});
 
 	let days = $derived(buildDays(range.first, dayCount));
-	let monthFormat = $derived(new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }));
-	let dayFormat = $derived(new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", timeZone: "UTC" }));
+	let monthFormat = $derived(
+		new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }),
+	);
+	let dayFormat = $derived(
+		new Intl.DateTimeFormat(locale, { month: "short", day: "numeric", timeZone: "UTC" }),
+	);
 	let months = $derived(buildMonths(days, monthFormat));
-	let rows = $derived(buildRows(items, { getId, getStart, getEnd, getParent, groups, getGroup, folded, drag }));
+	let rows = $derived(
+		buildRows(items, { getId, getStart, getEnd, getParent, groups, getGroup, folded, drag }),
+	);
 	let arrows = $derived(getDependsOn ? buildArrows(rows, layout, getDependsOn) : []);
 	let groupHue = $derived(new Map((groups ?? []).map((g) => [g.id, g.hue])));
 
@@ -148,7 +154,11 @@
 	}
 
 	function hueOf(item: T): string {
-		return getHue?.(item) ?? (getGroup ? groupHue.get(getGroup(item)) : undefined) ?? "var(--color-primary)";
+		return (
+			getHue?.(item) ??
+			(getGroup ? groupHue.get(getGroup(item)) : undefined) ??
+			"var(--color-primary)"
+		);
 	}
 
 	function hover(id: string, on: boolean): void {
@@ -172,7 +182,10 @@
 	export function scrollToToday(): void {
 		if (!scroller) return;
 		const label = corner?.offsetWidth ?? 0;
-		scroller.scrollTo({ left: Math.max(0, dayX(layout, todayDay) - (scroller.clientWidth - label) / 3), behavior: "smooth" });
+		scroller.scrollTo({
+			left: Math.max(0, dayX(layout, todayDay) - (scroller.clientWidth - label) / 3),
+			behavior: "smooth",
+		});
 	}
 </script>
 
@@ -192,7 +205,14 @@
 		<GanttHeader {layout} {days} {months} {labelHeading} {locale} bind:corner />
 
 		<div class="relative">
-			<GanttGrid {layout} {days} {arrows} rowCount={rows.length} {hoveredId} draggingId={drag?.id ?? null} />
+			<GanttGrid
+				{layout}
+				{days}
+				{arrows}
+				rowCount={rows.length}
+				{hoveredId}
+				draggingId={drag?.id ?? null}
+			/>
 
 			<div role="list" aria-label="Timeline">
 				{#each rows as row, index (row.kind === "group" ? `g:${row.group.id}` : row.id)}

package/src/tasks/task-list.svelte

@@ -7,7 +7,11 @@
 	import { cn } from "../lib/utils.js";
 	import { createKanbanDnd } from "./use-kanban-dnd.svelte.js";
 	import { CaretRight } from "phosphor-svelte";
-	import type { KanbanColumn as KanbanColumnDef, KanbanMove, KanbanSortKey } from "./kanban-types.js";
+	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> {
@@ -18,8 +22,8 @@
 		/** 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. A child draws
-		 * inside its parent's section, indented, and folds with it. Return nothing for a top-level group.
+		 * 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. */
@@ -36,8 +40,8 @@
 		/** Breaks a tie in manual order: two rows with the same key, or both without one. */
 		manualTiebreak?: (a: T, b: T) => number;
 		/**
-		 * Rows are draggable and take Alt plus Up or Down. Turn it off for a list that only groups,
-		 * where rows hold their own links and buttons and a drop makes no sense.
+		 * 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 a hint about the keyboard move. */
@@ -115,7 +119,7 @@
 		groups.filter((g) => {
 			const parent = getParent?.(g);
 			return !parent || !groupIds.has(parent);
-		})
+		}),
 	);
 	let childrenOf = $derived.by(() => {
 		const map = new Map<string, C[]>();
@@ -137,7 +141,7 @@
 	function canDrop(groupId: string): boolean {
 		// A group that only holds other groups has no rows of its own to drop into.
 		if (childrenOf.has(groupId)) return false;
-		return isDroppable?.(groupId) ?? (groups.find((g) => g.id === groupId)?.droppable ?? true);
+		return isDroppable?.(groupId) ?? groups.find((g) => g.id === groupId)?.droppable ?? true;
 	}
 
 	function idAt(list: T[], index: number): string | null {
@@ -194,7 +198,6 @@
 			return;
 		}
 	}
-
 </script>
 
 {#snippet section(group: C, depth: number)}
@@ -207,7 +210,10 @@
 	{@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={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)}
@@ -215,7 +221,11 @@
 		ondrop={children.length ? undefined : (e) => dnd.onDrop(e, group.id)}
 	>
 		<div
-			class={cn("sticky z-10 flex h-10 items-center gap-2 px-3 backdrop-blur-sm", flat ? "bg-background/90" : "bg-card/90", depth === 0 && (head ? "top-9" : "top-0"))}
+			class={cn(
+				"sticky z-10 flex h-10 items-center gap-2 px-3 backdrop-blur-sm",
+				flat ? "bg-background/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}
 		>
@@ -227,7 +237,11 @@
 					onclick={() => toggle(group.id)}
 					class="-ml-1 grid size-6 place-items-center rounded-md text-muted-foreground outline-none transition-colors duration-[var(--duration-quick,150ms)] hover:bg-foreground/5 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/60"
 				>
-					<span class="tl-chevron size-3.5 [&>svg]:size-full" class:tl-chevron-open={open} aria-hidden="true">
+					<span
+						class="tl-chevron size-3.5 [&>svg]:size-full"
+						class:tl-chevron-open={open}
+						aria-hidden="true"
+					>
 						<CaretRight weight="bold" />
 					</span>
 				</button>
@@ -267,7 +281,9 @@
 							role="listitem"
 							tabindex={draggable ? 0 : undefined}
 							aria-label={getLabel?.(item) ??
-								(draggable ? "Row. Press Alt plus Up or Down arrow to move between groups." : undefined)}
+								(draggable
+									? "Row. Press Alt plus Up or Down arrow to move between groups."
+									: undefined)}
 							aria-keyshortcuts={draggable ? "Alt+ArrowUp Alt+ArrowDown" : undefined}
 							draggable={draggable ? "true" : undefined}
 							animate:flip={{ duration: 250, easing: cubicOut }}
@@ -303,7 +319,9 @@
 					{/if}
 
 					{#if rows.length === 0 && children.length === 0 && !active}
-						<p class="mx-1.5 rounded-lg border border-dashed border-border px-3 py-3 text-xs text-muted-foreground">
+						<p
+							class="mx-1.5 rounded-lg border border-dashed border-border px-3 py-3 text-xs text-muted-foreground"
+						>
 							{emptyLabel}
 						</p>
 					{/if}
@@ -326,7 +344,10 @@
 >
 	{#if head}
 		<div
-			class={cn("sticky top-0 z-20 flex h-9 shrink-0 items-center border-b border-border text-xs font-medium text-muted-foreground backdrop-blur-sm", flat ? "bg-background/90" : "bg-card/90")}
+			class={cn(
+				"sticky top-0 z-20 flex h-9 shrink-0 items-center border-b border-border text-xs font-medium text-muted-foreground backdrop-blur-sm",
+				flat ? "bg-background/90" : "bg-card/90",
+			)}
 		>
 			{@render head()}
 		</div>
@@ -357,7 +378,8 @@
 	}
 
 	.tl-chevron {
-		transition: rotate var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+		transition: rotate var(--duration-fast, 250ms)
+			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
 	}
 
 	.tl-chevron-open {
@@ -370,7 +392,8 @@
 		grid-template-rows: 0fr;
 		opacity: 0;
 		transition:
-			grid-template-rows var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
+			grid-template-rows var(--duration-fast, 250ms)
+				var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
 			opacity var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
 	}
 
@@ -385,7 +408,8 @@
 	}
 
 	.tl-row {
-		animation: tl-row-in var(--duration-slow, 400ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
+		animation: tl-row-in var(--duration-slow, 400ms)
+			var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)) backwards;
 		animation-delay: calc(var(--tl-i, 0) * var(--duration-stagger, 40ms));
 		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
 	}

package/src/tasks/time/duration.ts

@@ -2,68 +2,68 @@ import type { Tone } from "../../lib/tone.js";
 
 /** "90", "45m", "1h", "1.5h", "1h30", "1h 30m" and "1:30" to whole minutes. Null when it isn't a duration. */
 export function parseMinutes(text: string): number | null {
-	const value = text.trim().toLowerCase();
-	if (!value) return null;
-	if (/^\d+$/.test(value)) return Number(value);
-	const clock = /^(\d+):([0-5]?\d)$/.exec(value);
-	if (clock) return Number(clock[1]) * 60 + Number(clock[2]);
-	const decimalHours = /^(\d+(?:[.,]\d+)?)\s*h$/.exec(value);
-	if (decimalHours?.[1]) return Math.round(Number(decimalHours[1].replace(",", ".")) * 60);
-	const parts = /^(?:(\d+)\s*h)?\s*(?:(\d+)\s*m?)?$/.exec(value);
-	if (!parts || (!parts[1] && !parts[2])) return null;
-	return Number(parts[1] ?? 0) * 60 + Number(parts[2] ?? 0);
+  const value = text.trim().toLowerCase();
+  if (!value) return null;
+  if (/^\d+$/.test(value)) return Number(value);
+  const clock = /^(\d+):([0-5]?\d)$/.exec(value);
+  if (clock) return Number(clock[1]) * 60 + Number(clock[2]);
+  const decimalHours = /^(\d+(?:[.,]\d+)?)\s*h$/.exec(value);
+  if (decimalHours?.[1]) return Math.round(Number(decimalHours[1].replace(",", ".")) * 60);
+  const parts = /^(?:(\d+)\s*h)?\s*(?:(\d+)\s*m?)?$/.exec(value);
+  if (!parts || (!parts[1] && !parts[2])) return null;
+  return Number(parts[1] ?? 0) * 60 + Number(parts[2] ?? 0);
 }
 
 /** 150 to "2h 30m". */
 export function formatMinutes(minutes: number): string {
-	const whole = Math.max(0, Math.round(Number.isFinite(minutes) ? minutes : 0));
-	const hours = Math.floor(whole / 60);
-	const rest = whole % 60;
-	if (hours === 0) return `${rest}m`;
-	return rest === 0 ? `${hours}h` : `${hours}h ${rest}m`;
+  const whole = Math.max(0, Math.round(Number.isFinite(minutes) ? minutes : 0));
+  const hours = Math.floor(whole / 60);
+  const rest = whole % 60;
+  if (hours === 0) return `${rest}m`;
+  return rest === 0 ? `${hours}h` : `${hours}h ${rest}m`;
 }
 
 /** Milliseconds to the timer readout, "1:05:09". */
 export function formatClock(ms: number): { hours: string; minutes: string; seconds: string } {
-	const total = Math.max(0, Math.floor(ms / 1000));
-	return {
-		hours: String(Math.floor(total / 3600)),
-		minutes: String(Math.floor((total % 3600) / 60)).padStart(2, "0"),
-		seconds: String(total % 60).padStart(2, "0"),
-	};
+  const total = Math.max(0, Math.floor(ms / 1000));
+  return {
+    hours: String(Math.floor(total / 3600)),
+    minutes: String(Math.floor((total % 3600) / 60)).padStart(2, "0"),
+    seconds: String(total % 60).padStart(2, "0"),
+  };
 }
 
 /** The reader's own calendar day as `YYYY-MM-DD`. */
 export function localDay(date: Date = new Date()): string {
-	const month = String(date.getMonth() + 1).padStart(2, "0");
-	const day = String(date.getDate()).padStart(2, "0");
-	return `${date.getFullYear()}-${month}-${day}`;
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${date.getFullYear()}-${month}-${day}`;
 }
 
 /** "Today", "Yesterday", then "Mon, Oct 12", in the given locale. */
 export function dayLabel(day: string, locale?: string): string {
-	const date = new Date(`${day}T12:00:00`);
-	const now = new Date();
-	now.setHours(12, 0, 0, 0);
-	const gap = Math.round((date.getTime() - now.getTime()) / 86_400_000);
-	if (gap === 0 || gap === -1) {
-		const word = new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(gap, "day");
-		return word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);
-	}
-	return date.toLocaleDateString(locale, { weekday: "short", month: "short", day: "numeric" });
+  const date = new Date(`${day}T12:00:00`);
+  const now = new Date();
+  now.setHours(12, 0, 0, 0);
+  const gap = Math.round((date.getTime() - now.getTime()) / 86_400_000);
+  if (gap === 0 || gap === -1) {
+    const word = new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(gap, "day");
+    return word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);
+  }
+  return date.toLocaleDateString(locale, { weekday: "short", month: "short", day: "numeric" });
 }
 
 /** The tone of a budget: quiet until 90%, warning to 100%, destructive past it. */
 export function budgetTone(logged: number, estimate: number | null | undefined): Tone {
-	if (!estimate || estimate <= 0) return "neutral";
-	const ratio = logged / estimate;
-	if (ratio > 1) return "destructive";
-	return ratio >= 0.9 ? "warning" : "neutral";
+  if (!estimate || estimate <= 0) return "neutral";
+  const ratio = logged / estimate;
+  if (ratio > 1) return "destructive";
+  return ratio >= 0.9 ? "warning" : "neutral";
 }
 
 /** A stable color for a person, from their name or id. */
 export function personColor(key: string): string {
-	let hash = 0;
-	for (const char of key) hash = (hash * 31 + char.charCodeAt(0)) % 360;
-	return `oklch(0.72 0.12 ${hash})`;
+  let hash = 0;
+  for (const char of key) hash = (hash * 31 + char.charCodeAt(0)) % 360;
+  return `oklch(0.72 0.12 ${hash})`;
 }

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

@@ -16,7 +16,7 @@
 		/** Replaces the spoken name. Defaults to a sentence built from the numbers. */
 		label?: string;
 		class?: string;
-	};
+	}
 
 	let { minutes, estimate, running = false, label, class: className }: Props = $props();
 
@@ -56,7 +56,14 @@
 			<span class="size-3 shrink-0 [&>svg]:size-full" aria-hidden="true"><Clock /></span>
 		{/if}
 		<span aria-hidden="true">
-			{formatMinutes(minutes)}{#if estimate}<span class={cn("font-normal", tone === "neutral" ? "text-muted-foreground/70" : TONE_TEXT[tone])}> / {formatMinutes(estimate)}</span>{/if}
+			{formatMinutes(minutes)}{#if estimate}<span
+					class={cn(
+						"font-normal",
+						tone === "neutral" ? "text-muted-foreground/70" : TONE_TEXT[tone],
+					)}
+				>
+					/ {formatMinutes(estimate)}</span
+				>{/if}
 		</span>
 	</span>
 {/if}

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

@@ -6,7 +6,7 @@
 		running?: boolean;
 		size?: number;
 		class?: string;
-	};
+	}
 
 	let { running = false, size = 8, class: className }: Props = $props();
 </script>

package/src/tasks/time/time-ring.svelte

@@ -17,7 +17,7 @@
 		/** Rendered in the middle, e.g. the percentage. */
 		children?: Snippet;
 		class?: string;
-	};
+	}
 
 	let { value, max, size = 56, stroke = 4, label, children, class: className }: Props = $props();
 
@@ -36,7 +36,14 @@
 	aria-hidden={label ? undefined : "true"}
 >
 	<svg viewBox="0 0 36 36" class="size-full -rotate-90" fill="none" aria-hidden="true">
-		<circle cx="18" cy="18" r={R} stroke="currentColor" stroke-width={stroke} class="text-foreground/10" />
+		<circle
+			cx="18"
+			cy="18"
+			r={R}
+			stroke="currentColor"
+			stroke-width={stroke}
+			class="text-foreground/10"
+		/>
 		<circle
 			cx="18"
 			cy="18"
@@ -58,7 +65,8 @@
 <style>
 	.time-ring-arc {
 		transition:
-			stroke-dasharray var(--duration-slow, 400ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
+			stroke-dasharray var(--duration-slow, 400ms)
+				var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1)),
 			color var(--duration-fast, 250ms) var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
 	}