@heyramzi/ui 2.20.0 → 2.21.1

package/src/work/demo.svelte

@@ -3,7 +3,19 @@
 	import TaskList from "./task-list.svelte";
 	import TaskGantt from "./task-gantt.svelte";
 	import { SegmentedFilter } from "../components/segmented/index.js";
-	import { ChartBarHorizontal, Kanban, ListBullets } from "phosphor-svelte";
+	import {
+		CalendarBlank,
+		CellSignalFull,
+		CellSignalLow,
+		CellSignalMedium,
+		ChartBarHorizontal,
+		Kanban,
+		ListBullets,
+	} from "phosphor-svelte";
+	import StatusPill from "../status/status-pill.svelte";
+	import { Card } from "../shadcn/card/index.js";
+	import WorkCard from "../components/work-parts/work-card.svelte";
+	import type { Tone } from "../lib/tone.js";
 	import StatusBadge from "../status/status-badge.svelte";
 	import StatusDot from "../status/status-dot.svelte";
 	import { defineStatuses } from "../status/define-statuses.js";
@@ -161,11 +173,12 @@
 		{ id: "due", label: "Due date", compare: (a: Task, b: Task) => a.end.localeCompare(b.end) },
 	];
 
-	const priorityClass: Record<Priority, string> = {
-		low: "bg-muted text-muted-foreground",
-		medium: "bg-warning/15 text-warning-700 dark:text-warning-400",
-		high: "bg-destructive/15 text-destructive",
+	const priorityTone: Record<Priority, Tone> = {
+		low: "neutral",
+		medium: "warning",
+		high: "destructive",
 	};
+	const priorityIcon = { low: CellSignalLow, medium: CellSignalMedium, high: CellSignalFull };
 
 	const people: Record<string, string> = {
 		Ada: "oklch(0.72 0.12 280)",
@@ -275,6 +288,14 @@
 		"grid grid-cols-[minmax(0,1fr)_7rem_5.5rem_4.5rem] items-center gap-3 max-sm:grid-cols-[minmax(0,1fr)_4.5rem]";
 </script>
 
+{#snippet priority(level: Priority)}
+	{@const Icon = priorityIcon[level]}
+	<StatusPill tone={priorityTone[level]} class="capitalize">
+		{#snippet icon()}<Icon weight="bold" aria-hidden="true" />{/snippet}
+		{level}
+	</StatusPill>
+{/snippet}
+
 {#snippet avatar(name: string)}
 	<span
 		class="grid size-5 shrink-0 place-items-center rounded-full text-[10px] font-semibold text-white"
@@ -285,7 +306,7 @@
 	</span>
 {/snippet}
 
-<div class="flex flex-col gap-6 rounded-xl border border-border bg-background p-4">
+<Card class="gap-6 p-4">
 	<div class="flex h-[600px] flex-col gap-3">
 		<div class="flex flex-wrap items-center gap-2">
 			<SegmentedFilter options={views} bind:value={view} ariaLabel="Task view" block={false} />
@@ -312,7 +333,7 @@
 					<select
 						id="tasks-sort"
 						bind:value={sortKey}
-						class="h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground"
+						class="h-8 rounded-md border border-border bg-card px-2 text-xs text-foreground"
 					>
 						<option value="manual">Manual</option>
 						{#each sortKeys as key (key.id)}
@@ -338,15 +359,15 @@
 					>
 						{#snippet renderCard(task)}
 							{@const d = due(task)}
-							<article
-								class="rounded-xl border border-border bg-card p-2.5 text-card-foreground shadow-sm"
-							>
-								<p class="text-sm leading-snug">{task.title}</p>
-								<div class="mt-2.5 flex items-center gap-2 text-xs">
-									{@render avatar(task.assignee)}
-									<span class={d.late ? "font-medium text-destructive" : "text-muted-foreground"}
-										>{d.label}</span
+							<WorkCard>
+								{task.title}
+								{#snippet meta()}
+									<span
+										class="flex items-center gap-1 {d.late ? 'font-medium text-destructive' : ''}"
 									>
+										<CalendarBlank class="size-3.5" aria-hidden="true" />
+										{d.label}
+									</span>
 									{#if tracking}
 										<TimeChip
 											minutes={minutesByTask[task.id] ?? 0}
@@ -354,15 +375,12 @@
 											running={timer?.taskId === task.id}
 										/>
 									{/if}
-									<span
-										class="ml-auto rounded-full px-1.5 py-0.5 font-medium capitalize {priorityClass[
-											task.priority
-										]}"
-									>
-										{task.priority}
+									<span class="ms-auto flex items-center gap-1.5">
+										{@render priority(task.priority)}
+										{@render avatar(task.assignee)}
 									</span>
-								</div>
-							</article>
+								{/snippet}
+							</WorkCard>
 						{/snippet}
 					</KanbanBoard>
 				{:else if view === "list"}
@@ -386,7 +404,7 @@
 						{/snippet}
 						{#snippet renderRow(task)}
 							{@const d = due(task)}
-							<div class="{listGrid} h-10 px-2 text-sm">
+							<div class="{listGrid} px-2 text-sm">
 								<span class="flex min-w-0 items-center gap-2.5">
 									{#key task.status}
 										<StatusDot {statuses} status={task.status} />
@@ -410,15 +428,7 @@
 									{@render avatar(task.assignee)}
 									<span class="truncate">{task.assignee}</span>
 								</span>
-								<span class="max-sm:hidden">
-									<span
-										class="rounded-full px-1.5 py-0.5 text-xs font-medium capitalize {priorityClass[
-											task.priority
-										]}"
-									>
-										{task.priority}
-									</span>
-								</span>
+								<span class="max-sm:hidden">{@render priority(task.priority)}</span>
 								<span
 									class="text-right text-xs tabular-nums {d.late
 										? 'font-medium text-destructive'
@@ -469,13 +479,11 @@
 	{#if tracking}
 		<section class="flex flex-col gap-3 border-t border-border pt-4">
 			<div class="flex items-center justify-between gap-3">
-				<h3 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-					Task time
-				</h3>
+				<h3 class="text-xs font-semibold text-muted-foreground">Task time</h3>
 				<select
 					bind:value={timeTaskId}
 					aria-label="Task"
-					class="h-8 max-w-[60%] rounded-md border border-border bg-background px-2 text-xs text-foreground"
+					class="h-8 max-w-[60%] rounded-md border border-border bg-card px-2 text-xs text-foreground"
 				>
 					{#each tasks as task (task.id)}
 						<option value={task.id}>{task.title}</option>
@@ -483,7 +491,7 @@
 				</select>
 			</div>
 			<TimeTracker
-				class="mx-auto w-full max-w-xl"
+				class="w-full max-w-xl"
 				entries={timeEntries}
 				getId={(entry) => entry.id}
 				getMinutes={(entry) => entry.minutes}
@@ -505,9 +513,7 @@
 	{/if}
 
 	<section class="flex flex-col gap-2 border-t border-border pt-4">
-		<h3 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">
-			Status badges
-		</h3>
+		<h3 class="text-xs font-semibold text-muted-foreground">Status badges</h3>
 		<div class="flex flex-wrap items-center gap-2">
 			{#each salesStatuses.ids as id (id)}
 				<StatusBadge statuses={salesStatuses} status={id} />
@@ -522,7 +528,7 @@
 			{/each}
 		</ul>
 	</section>
-</div>
+</Card>
 
 <style>
 	/* Switching views: the new one rises in with a touch of blur, the old one is gone at once. */

package/src/work/detail/detail-demo.svelte

@@ -1,5 +1,17 @@
 <script lang="ts">
-	import { CalendarBlank, CircleDashed, Flag, Folder, User } from "phosphor-svelte";
+	import {
+		CalendarBlank,
+		CircleDashed,
+		CircleHalf,
+		Flag,
+		Folder,
+		Timer,
+		User,
+		UserCircle,
+	} from "phosphor-svelte";
+	import { Button } from "../../shadcn/button/index.js";
+	import { Card } from "../../shadcn/card/index.js";
+	import * as Avatar from "../../shadcn/avatar/index.js";
 	import TaskDetail from "./task-detail.svelte";
 	import TaskProperty from "./task-property.svelte";
 	import TaskChip from "./task-chip.svelte";
@@ -144,29 +156,27 @@
 <div class="flex flex-col gap-3">
 	<div class="flex flex-wrap items-center gap-1.5" role="group" aria-label="Scenario">
 		{#each scenarios as item (item.id)}
-			<button
-				type="button"
+			<Button
+				size="sm"
+				variant={scenario === item.id ? "default" : "outline"}
 				aria-pressed={scenario === item.id}
 				onclick={() => (scenario = item.id)}
-				class="h-7 rounded-md border border-border px-2.5 text-[13px] font-medium transition-colors hover:bg-muted aria-pressed:bg-foreground aria-pressed:text-background"
 			>
 				{item.label}
-			</button>
+			</Button>
 		{/each}
-		<button
-			type="button"
+		<Button
+			size="sm"
+			variant={narrow ? "default" : "outline"}
+			class="ms-auto"
 			aria-pressed={narrow}
 			onclick={() => (narrow = !narrow)}
-			class="ms-auto h-7 rounded-md border border-border px-2.5 text-[13px] font-medium transition-colors hover:bg-muted aria-pressed:bg-foreground aria-pressed:text-background"
 		>
 			390 wide
-		</button>
+		</Button>
 	</div>
 
-	<div
-		class="mx-auto w-full overflow-hidden rounded-xl border border-border bg-background"
-		style:max-width={narrow ? "390px" : "none"}
-	>
+	<Card class="mx-auto w-full gap-0 py-0" style="max-width: {narrow ? '390px' : 'none'}">
 		<TaskDetail
 			{title}
 			onTitleChange={(next) => {
@@ -192,35 +202,34 @@
 				<span class="tabular-nums">Created Sep 9, 2026</span>
 			{/snippet}
 			{#snippet properties()}
-				<TaskProperty label="Status">
+				<TaskProperty label="Status" icon={CircleHalf}>
 					<TaskChip aria-label="Status: {statusLabel}"
 						><StatusDot {statuses} {status} size={14} animate={false} />{statusLabel}</TaskChip
 					>
 				</TaskProperty>
-				<TaskProperty label="Priority">
+				<TaskProperty label="Priority" icon={Flag}>
 					<TaskChip><Flag weight="fill" class="text-destructive" aria-hidden="true" />High</TaskChip
 					>
 				</TaskProperty>
-				<TaskProperty label="Assignee">
+				<TaskProperty label="Assignee" icon={UserCircle}>
 					{#if assignee}
 						<TaskChip>
-							<span
-								class="grid size-4 place-items-center rounded-full bg-muted text-[0px]"
-								aria-hidden="true"><User /></span
-							>
+							<Avatar.Root class="size-4" aria-hidden="true">
+								<Avatar.Fallback><User class="size-3" /></Avatar.Fallback>
+							</Avatar.Root>
 							{assignee}
 						</TaskChip>
 					{:else}
 						<TaskChip empty><CircleDashed aria-hidden="true" />Assign</TaskChip>
 					{/if}
 				</TaskProperty>
-				<TaskProperty label="Due date">
+				<TaskProperty label="Due date" icon={CalendarBlank}>
 					<TaskChip><CalendarBlank aria-hidden="true" />Oct 9, 2026</TaskChip>
 				</TaskProperty>
-				<TaskProperty label="Project">
+				<TaskProperty label="Project" icon={Folder}>
 					<TaskChip><Folder aria-hidden="true" />Agency OS</TaskChip>
 				</TaskProperty>
-				<TaskProperty label="Time">
+				<TaskProperty label="Time" icon={Timer}>
 					<TimeTracker
 						{entries}
 						running={timer}
@@ -242,5 +251,5 @@
 				</TaskProperty>
 			{/snippet}
 		</TaskDetail>
-	</div>
+	</Card>
 </div>

package/src/work/detail/task-chip.svelte

@@ -2,6 +2,7 @@
 	import type { Snippet } from "svelte";
 	import type { HTMLButtonAttributes } from "svelte/elements";
 	import { cn } from "../../lib/utils.js";
+	import { buttonVariants } from "../../shadcn/button/index.js";
 
 	interface Props extends Omit<HTMLButtonAttributes, "children"> {
 		/** No value yet: the label is a prompt and recedes until hovered. */
@@ -12,13 +13,12 @@
 	let { empty = false, class: className, children, ...rest }: Props = $props();
 </script>
 
-<!-- The one box every property value sits in: 28px, 40 under a coarse pointer. -->
+<!-- The one box every property value sits in: a quiet ghost Button, 28px, 40 under a coarse pointer. -->
 <button
 	type="button"
 	class={cn(
-		"inline-flex h-7 min-w-0 items-center gap-1.5 rounded-md ps-1.5 pe-2.5 text-[13px] whitespace-nowrap outline-none select-none any-pointer-coarse:h-10",
-		"transition-colors hover:bg-muted data-[state=open]:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50",
-		"disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-3.5 [&_svg]:shrink-0",
+		buttonVariants({ variant: "ghost", size: "sm" }),
+		"min-w-0 justify-start ps-1.5 pe-2.5 text-(length:--text-control) font-normal data-[state=open]:bg-muted",
 		empty && "text-muted-foreground hover:text-foreground",
 		className,
 	)}

package/src/work/detail/task-detail.svelte

@@ -2,6 +2,8 @@
 	import type { Snippet } from "svelte";
 	import { Circle, CheckCircle, PencilSimple } from "phosphor-svelte";
 	import { cn } from "../../lib/utils.js";
+	import { Button } from "../../shadcn/button/index.js";
+	import { Textarea } from "../../shadcn/textarea/index.js";
 	import {
 		DEFAULT_TASK_DETAIL_LABELS,
 		type TaskComment,
@@ -118,13 +120,15 @@
 		<header class="min-w-0 px-4 pt-6 @3xl:col-start-1 @3xl:px-8">
 			<div class="mx-auto w-full max-w-184">
 				<div class="flex items-start gap-2">
-					<button
-						type="button"
+					<Button
+						variant="ghost"
+						size="sm"
+						icon
 						onclick={onToggleDone}
 						disabled={!onToggleDone}
 						aria-label={done ? labels.markIncomplete : labels.markComplete}
 						class={cn(
-							"tk-icon mt-px",
+							"mt-px disabled:opacity-100",
 							done ? "text-success" : "text-muted-foreground/60 hover:text-foreground",
 						)}
 					>
@@ -133,30 +137,30 @@
 						{:else}
 							<Circle class="size-5" aria-hidden="true" />
 						{/if}
-					</button>
+					</Button>
 
 					{#if editingTitle}
-						<textarea
-							bind:this={titleField}
+						<Textarea
+							bind:ref={titleField}
 							bind:value={titleDraft}
 							onkeydown={onTitleKeydown}
 							onblur={commitTitle}
 							rows={2}
 							aria-label={labels.editTitle}
-							class="-mx-2 -my-1 min-w-0 flex-1 resize-none rounded-md border border-input bg-transparent px-2 py-1 text-2xl leading-tight font-semibold tracking-tight outline-none focus-visible:ring-3 focus-visible:ring-ring/50"
-						></textarea>
+							class="-mx-2 -my-1 min-h-0 min-w-0 flex-1 resize-none px-2 py-1 text-2xl leading-tight font-semibold tracking-tight md:text-2xl"
+						/>
 					{:else}
 						<h1
 							class="min-w-0 flex-1 text-2xl leading-tight font-semibold tracking-tight text-balance break-words"
 						>
-							<button
-								type="button"
+							<Button
+								variant="text"
 								onclick={startTitle}
 								disabled={!onTitleChange}
 								aria-label={labels.editTitle}
 								class={cn(
-									"group -mx-2 -my-1 rounded-md px-2 py-1 text-start outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
-									onTitleChange && "hover:bg-muted/60",
+									"group -mx-2 -my-1 px-2 py-1 text-2xl leading-tight font-semibold tracking-tight disabled:opacity-100",
+									!onTitleChange && "hover:bg-transparent",
 									closed && "text-muted-foreground",
 								)}
 							>
@@ -167,7 +171,7 @@
 										aria-hidden="true"
 									/>
 								{/if}
-							</button>
+							</Button>
 						</h1>
 					{/if}
 				</div>
@@ -203,58 +207,56 @@
 					<div class="flex h-7 items-center justify-between">
 						<h2 class="text-xs font-medium text-muted-foreground">{labels.description}</h2>
 						{#if !editingDescription && description && onDescriptionChange}
-							<button
-								type="button"
-								class="tk-icon"
+							<Button
+								variant="ghost"
+								size="sm"
+								icon
+								class="text-muted-foreground"
 								onclick={startDescription}
 								aria-label={labels.editDescription}
 							>
-								<PencilSimple class="size-3.5" aria-hidden="true" />
-							</button>
+								<PencilSimple aria-hidden="true" />
+							</Button>
 						{/if}
 					</div>
 
 					{#if editingDescription}
-						<textarea
+						<Textarea
 							bind:value={descriptionDraft}
 							rows={8}
 							placeholder={labels.addDescription}
 							aria-label={labels.description}
-							class="w-full resize-y rounded-md border border-input bg-transparent px-3 py-2 text-sm leading-relaxed outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50"
-						></textarea>
+							class="resize-y px-3 leading-relaxed"
+						/>
 						<div class="mt-1 flex justify-end gap-1.5">
-							<button type="button" class="tk-button" onclick={() => (editingDescription = false)}
-								>{labels.cancel}</button
-							>
-							<button
-								type="button"
-								class="tk-button tk-primary"
-								onclick={saveDescription}
-								disabled={savingDescription}
+							<Button variant="ghost" size="sm" onclick={() => (editingDescription = false)}
+								>{labels.cancel}</Button
 							>
+							<Button size="sm" onclick={saveDescription} disabled={savingDescription}>
 								{savingDescription ? labels.saving : labels.save}
-							</button>
+							</Button>
 						</div>
 					{:else if description}
-						<button
-							type="button"
+						<Button
+							variant="text"
 							onclick={startDescription}
 							disabled={!onDescriptionChange}
 							class={cn(
-								"-mx-3 block w-[calc(100%+1.5rem)] rounded-md px-3 py-1.5 text-start text-sm leading-relaxed whitespace-pre-wrap text-pretty outline-none focus-visible:ring-3 focus-visible:ring-ring/50",
-								onDescriptionChange && "hover:bg-muted/50",
+								"-mx-3 block w-[calc(100%+1.5rem)] px-3 py-1.5 leading-relaxed font-normal whitespace-pre-wrap text-pretty disabled:opacity-100",
+								!onDescriptionChange && "hover:bg-transparent",
 							)}
 						>
 							{description}
-						</button>
+						</Button>
 					{:else if onDescriptionChange}
-						<button
-							type="button"
+						<Button
+							variant="dashed"
+							size="sm"
 							onclick={startDescription}
-							class="flex h-7 w-full items-center rounded-md border border-dashed border-border px-2.5 text-[13px] text-muted-foreground transition-colors outline-none hover:border-muted-foreground/40 hover:bg-muted/40 hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50"
+							class="w-full justify-start text-(length:--text-control) font-normal"
 						>
 							{labels.addDescription}
-						</button>
+						</Button>
 					{/if}
 				</div>
 
@@ -274,72 +276,3 @@
 		</section>
 	</div>
 </div>
-
-<style>
-	.tk-icon {
-		display: grid;
-		place-items: center;
-		width: 1.75rem;
-		height: 1.75rem;
-		flex: none;
-		border-radius: var(--radius-md, 0.5rem);
-		outline: none;
-		transition:
-			background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out),
-			color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
-	}
-
-	@media (hover: hover) and (pointer: fine) {
-		.tk-icon:hover:not(:disabled) {
-			background: var(--color-muted);
-		}
-	}
-
-	.tk-icon:focus-visible,
-	.tk-button:focus-visible {
-		box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-ring) 50%, transparent);
-	}
-
-	.tk-button {
-		height: 1.75rem;
-		padding-inline: 0.75rem;
-		border-radius: var(--radius-md, 0.5rem);
-		font-size: 0.8125rem;
-		font-weight: 500;
-		outline: none;
-		transition: background-color var(--duration-quick, 150ms) var(--ease-smooth-out, ease-out);
-	}
-
-	@media (hover: hover) and (pointer: fine) {
-		.tk-button:hover:not(:disabled) {
-			background: var(--color-muted);
-		}
-	}
-
-	.tk-button:disabled {
-		opacity: 0.5;
-		pointer-events: none;
-	}
-
-	.tk-primary {
-		background: var(--color-primary);
-		color: var(--color-primary-foreground);
-	}
-
-	@media (hover: hover) and (pointer: fine) {
-		.tk-primary:hover:not(:disabled) {
-			background: color-mix(in oklab, var(--color-primary) 90%, transparent);
-		}
-	}
-
-	@media (any-pointer: coarse) {
-		.tk-icon {
-			width: 2.5rem;
-			height: 2.5rem;
-		}
-
-		.tk-button {
-			height: 2.5rem;
-		}
-	}
-</style>

package/src/work/detail/task-property.svelte

@@ -1,23 +1,17 @@
 <script lang="ts">
-	import type { Snippet } from "svelte";
+	import type { Component, Snippet } from "svelte";
+	import PropertyRow from "../../components/work-parts/property-row.svelte";
 
 	interface Props {
 		label: string;
+		/** A Phosphor icon before the label, shown when the rail is wide. */
+		icon?: Component<{ class?: string; "aria-hidden"?: boolean | "true" | "false" }>;
 		children: Snippet;
 	}
 
-	let { label, children }: Props = $props();
+	let { label, icon, children }: Props = $props();
 </script>
 
-<!-- A labelled row in the rail. In the narrow chip row the label hides and
+<!-- A labelled row in the rail: icon, label, value. In the narrow chip row the label hides and
      names the group for assistive tech. -->
-<div
-	class="flex min-h-7 items-center @3xl:grid @3xl:grid-cols-[6rem_minmax(0,1fr)]"
-	role="group"
-	aria-label={label}
->
-	<span class="hidden text-xs font-medium text-muted-foreground @3xl:block" aria-hidden="true"
-		>{label}</span
-	>
-	<div class="flex min-w-0 items-center">{@render children()}</div>
-</div>
+<PropertyRow {label} {icon} layout="responsive">{@render children()}</PropertyRow>