@runwisp/ui 0.12.0 → 0.14.0

package/src/lib/components/Modal.svelte

@@ -82,7 +82,7 @@
             class="
 				relative z-10 w-full {sizeClasses[size]}
 				flex max-h-[90vh] flex-col
-				rounded-2xl bg-surface-overlay shadow-xl
+				rounded-[4px] border border-outline bg-surface-overlay shadow-lg
 				{className}
 			"
             role="dialog"
@@ -91,16 +91,19 @@
         >
             <!-- Header -->
             {#if header}
-                <div class="border-b border-outline-faint px-6 py-4">
+                <div class="border-b border-outline px-6 py-4">
                     {@render header()}
                 </div>
             {:else if title || closable}
                 <div
-                    class="flex items-start justify-between gap-4 border-b border-outline-faint px-6 py-4"
+                    class="flex items-start justify-between gap-4 border-b border-outline px-6 py-4"
                 >
                     <div>
                         {#if title}
-                            <h2 id="modal-title" class="text-lg font-semibold text-on-surface">
+                            <h2
+                                id="modal-title"
+                                class="font-mono text-lg font-semibold text-on-surface"
+                            >
                                 {title}
                             </h2>
                         {/if}
@@ -111,7 +114,7 @@
                     {#if closable}
                         <button
                             onclick={handleClose}
-                            class="-m-2 shrink-0 rounded-lg p-2 text-on-surface-faint transition-colors hover:bg-surface-sunken hover:text-on-surface-muted"
+                            class="-m-2 shrink-0 rounded-[3px] p-2 text-on-surface-faint hover:bg-surface-sunken hover:text-on-surface-muted"
                             aria-label="Close"
                         >
                             <X size={20} />
@@ -129,9 +132,7 @@
 
             <!-- Footer -->
             {#if footer}
-                <div
-                    class="rounded-b-2xl border-t border-outline-faint bg-surface-sunken/50 px-6 py-4"
-                >
+                <div class="rounded-b-[4px] border-t border-outline bg-surface-sunken px-6 py-4">
                     {@render footer()}
                 </div>
             {/if}

package/src/lib/components/PageContainer.svelte

@@ -33,6 +33,6 @@
     };
 </script>
 
-<div class="animate-in fade-in duration-300 {variantClasses[variant]} {className}">
+<div class="{variantClasses[variant]} {className}">
     {@render children()}
 </div>

package/src/lib/components/PageHeader.svelte

@@ -16,7 +16,7 @@
 
 <div class="flex shrink-0 flex-wrap items-start justify-between gap-3 px-1 {className}">
     <div class="min-w-0">
-        <h1 class="text-2xl font-bold tracking-tight text-on-surface">{title}</h1>
+        <h1 class="font-mono text-2xl font-bold tracking-tight text-on-surface">{title}</h1>
         {#if subtitle}
             <p class="mt-0.5 text-sm text-on-surface-muted">{subtitle}</p>
         {/if}

package/src/lib/components/Pagination.svelte

@@ -43,7 +43,7 @@
 </script>
 
 <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between {className}">
-    <div class="flex items-center gap-4 text-sm text-on-surface-muted">
+    <div class="flex items-center gap-4 font-mono text-sm text-on-surface-muted">
         {#if totalItems === 0}
             <span>No results</span>
         {:else}
@@ -57,8 +57,8 @@
                     value={pageSize}
                     onchange={handlePageSizeChange}
                     class="
-                        appearance-none rounded-lg border border-outline bg-surface-raised py-1 pr-7 pl-2 text-sm
-                        font-medium text-on-surface-muted shadow-sm focus:border-ring focus:ring-1 focus:ring-ring focus:outline-none
+                        appearance-none rounded-[3px] border border-outline bg-surface-raised py-1 pr-7 pl-2 font-mono
+                        text-sm text-on-surface-muted shadow-sm hover:border-outline-hover focus:border-ring focus:ring-1 focus:ring-ring focus:outline-none
                     "
                 >
                     {#each pageSizeOptions as size (size)}
@@ -81,7 +81,7 @@
             disabled={safePage <= 1}
             onclick={() => goTo(safePage - 1)}>Prev</Button
         >
-        <div class="min-w-[4rem] text-center text-xs text-on-surface-muted">
+        <div class="min-w-[4rem] text-center font-mono text-xs text-on-surface-muted">
             Page {safePage} of {totalPages}
         </div>
         <Button

package/src/lib/components/Popover.svelte

@@ -6,8 +6,7 @@
     import type { Placement } from "@floating-ui/dom";
     import { onDestroy } from "svelte";
     import { computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
-    import { scale, fade } from "svelte/transition";
-    import { quintOut } from "svelte/easing";
+    import { fade } from "svelte/transition";
     import { portal } from "../actions/portal.js";
 
     interface Props {
@@ -139,20 +138,19 @@
             <div
                 use:portal
                 transition:fade={{ duration: 120 }}
-                class="fixed inset-0 z-[9998] bg-on-surface/40"
+                class="fixed inset-0 z-[9998] bg-backdrop"
                 aria-hidden="true"
             ></div>
         {/if}
         <div
             use:portal
             bind:this={contentEl}
-            transition:scale={{ duration: 150, start: 0.95, easing: quintOut }}
             class="
                 z-[9999] max-h-[80vh] overflow-y-auto
-                border border-outline bg-surface-overlay shadow-xl shadow-on-surface/5
+                border border-outline bg-surface-overlay shadow-lg
                 {asSheet
-                ? 'fixed inset-x-0 bottom-0 max-h-[85vh] rounded-t-2xl border-x-0 border-b-0 p-5'
-                : 'rounded-xl p-4'}
+                ? 'fixed inset-x-0 bottom-0 max-h-[85vh] rounded-t-[4px] border-x-0 border-b-0 p-5'
+                : 'rounded-[4px] p-4'}
             "
         >
             {#if children}

package/src/lib/components/Progress.svelte

@@ -45,19 +45,21 @@
     {#if showLabel || label}
         <div class="mb-1.5 flex items-center justify-between">
             {#if label}
-                <span class="text-sm font-medium text-on-surface-muted">{label}</span>
+                <span class="font-mono text-sm text-on-surface-muted">{label}</span>
             {/if}
             {#if showLabel}
-                <span class="text-sm text-on-surface-muted">{Math.round(percentage)}%</span>
+                <span class="font-mono text-sm text-on-surface-muted"
+                    >{Math.round(percentage)}%</span
+                >
             {/if}
         </div>
     {/if}
 
-    <div class="w-full {sizeClasses[size]} overflow-hidden rounded-full bg-outline">
+    <div class="w-full {sizeClasses[size]} overflow-hidden rounded-full bg-surface-sunken">
         <div
             class="{sizeClasses[size]} {variantClasses[
                 variant
-            ]} rounded-full transition-all duration-300"
+            ]} rounded-full transition-[width] duration-200"
             style="width: {percentage}%"
             role="progressbar"
             aria-valuenow={value}

package/src/lib/components/Prose.svelte

@@ -28,10 +28,10 @@
         prose-headings:text-on-surface
         prose-p:text-on-surface-muted prose-a:text-primary prose-a:no-underline
         hover:prose-a:underline
-        prose-blockquote:border-outline prose-blockquote:text-on-surface-muted prose-strong:text-on-surface prose-code:rounded prose-code:bg-surface-sunken
-        prose-code:px-1 prose-code:py-0.5 prose-code:text-on-surface
-        prose-pre:border prose-pre:border-outline
-        prose-pre:bg-surface-sunken
+        prose-blockquote:border-outline prose-blockquote:text-on-surface-muted prose-strong:text-on-surface prose-code:rounded-[3px] prose-code:bg-surface-sunken
+        prose-code:px-1 prose-code:py-0.5 prose-code:font-mono prose-code:text-on-surface
+        prose-pre:rounded-[4px] prose-pre:border prose-pre:border-outline
+        prose-pre:bg-surface-sunken prose-pre:font-mono
         prose-li:text-on-surface-muted
         prose-th:text-on-surface
         prose-td:text-on-surface-muted

package/src/lib/components/Radio.svelte

@@ -49,21 +49,20 @@
             checked={isChecked}
             onchange={() => (groupValue = value)}
             class="
-                peer {sizeClasses[size].radio} duration-fast
+                peer {sizeClasses[size].radio}
                 cursor-pointer appearance-none rounded-full
-                border-2 border-outline-hover
-                bg-surface-raised transition-colors
-                checked:border-primary checked:bg-primary
-                hover:border-on-surface-faint
+                border border-outline
+                bg-surface-raised checked:border-primary checked:bg-primary
+                hover:border-outline-hover
                 checked:hover:border-primary-hover checked:hover:bg-primary-hover
-                focus:ring-2 focus:ring-ring/20
-                focus:ring-offset-0 focus:outline-none
-                disabled:cursor-not-allowed disabled:hover:border-outline-hover
+                focus:ring-2 focus:ring-ring focus:ring-offset-2
+                focus:outline-none
+                disabled:cursor-not-allowed disabled:hover:border-outline
                 disabled:checked:hover:bg-primary
             "
         />
         <div
-            class="duration-fast pointer-events-none absolute rounded-full bg-on-primary opacity-0 transition-opacity peer-checked:opacity-100 {sizeClasses[
+            class="pointer-events-none absolute rounded-full bg-on-primary opacity-0 peer-checked:opacity-100 {sizeClasses[
                 size
             ].dot}"
         ></div>
@@ -72,7 +71,9 @@
     {#if label || description}
         <div class="flex flex-col gap-0.5">
             {#if label}
-                <span class="{sizeClasses[size].text} font-medium text-on-surface">{label}</span>
+                <span class="{sizeClasses[size].text} font-mono font-medium text-on-surface"
+                    >{label}</span
+                >
             {/if}
             {#if description}
                 <span class="text-sm text-on-surface-muted">{description}</span>

package/src/lib/components/RadioGroup.svelte

@@ -36,7 +36,7 @@
 
 <fieldset class="space-y-3 {className}" role="radiogroup" aria-label={label}>
     {#if label}
-        <legend class="text-sm font-medium text-on-surface-muted">{label}</legend>
+        <legend class="font-mono text-xs font-medium text-on-surface-muted">{label}</legend>
     {/if}
 
     <div class={orientationClasses[orientation]}>
@@ -44,12 +44,10 @@
     </div>
 
     {#if error}
-        <p
-            class="animate-in slide-in-from-top-1 fade-in text-sm text-danger-soft-text duration-200"
-        >
+        <p class="font-sans text-xs text-danger-soft-text">
             {error}
         </p>
     {:else if hint}
-        <p class="text-sm text-on-surface-muted">{hint}</p>
+        <p class="font-sans text-xs text-on-surface-muted">{hint}</p>
     {/if}
 </fieldset>

package/src/lib/components/Select.svelte

@@ -18,7 +18,6 @@
 <script lang="ts">
     import { tick, onDestroy } from "svelte";
     import { ChevronDown, Check, Search } from "@lucide/svelte";
-    import { fade } from "svelte/transition";
     import { computePosition, autoUpdate, flip, shift, offset } from "@floating-ui/dom";
     import { generateUlid } from "@runwisp/common";
 
@@ -231,18 +230,17 @@
     };
 
     const triggerBase = `
-        relative w-full text-left cursor-pointer
-        rounded-lg border bg-surface-raised
-        transition-all duration-normal ease-out
-        flex items-center justify-between
-        focus:outline-none focus:ring-4 focus:ring-ring/10 focus:border-ring
+        relative w-full text-left cursor-pointer font-mono
+        rounded-[3px] border bg-surface-raised
+                flex items-center justify-between
+        focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:border-ring
     `;
 
     const borderClass = $derived(
         error
-            ? "border-danger-300 ring-danger-500/20"
+            ? "border-danger-surface"
             : isOpen
-              ? "border-ring ring-4 ring-ring/10"
+              ? "border-ring ring-2 ring-ring ring-offset-2"
               : "border-outline hover:border-outline-hover shadow-sm hover:shadow-md",
     );
 </script>
@@ -251,7 +249,7 @@
 
 <div class="relative w-full {className}">
     {#if label}
-        <label for={id} class="mb-1.5 block text-sm font-medium text-on-surface-muted">
+        <label for={id} class="mb-1.5 block font-mono text-xs font-medium text-on-surface-muted">
             {label}
         </label>
     {/if}
@@ -292,10 +290,7 @@
         <div
             class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-on-surface-faint"
         >
-            <ChevronDown
-                size={16}
-                class="transition-transform duration-200 {isOpen ? 'rotate-180' : ''}"
-            />
+            <ChevronDown size={16} class={isOpen ? "rotate-180" : ""} />
         </div>
     </button>
 
@@ -306,16 +301,10 @@
 
     <!-- Dropdown Menu -->
     {#if isOpen}
-        <div
-            use:portal
-            bind:this={menuEl}
-            transition:fade={{ duration: 100 }}
-            class="z-[9999] min-w-[200px]"
-        >
+        <div use:portal bind:this={menuEl} class="z-[9999] min-w-[200px]">
             <div
                 class="
-                overflow-hidden rounded-xl border border-outline bg-surface-overlay shadow-xl
-                ring-1 shadow-on-surface/5 ring-black/5
+                overflow-hidden rounded-[4px] border border-outline bg-surface-overlay shadow-md
             "
             >
                 {#if searchable}
@@ -331,8 +320,8 @@
                                 onkeydown={handleKeydown}
                                 placeholder="Search..."
                                 class="
-                                    w-full rounded-lg border border-outline bg-surface-raised py-1.5 pr-3 pl-8 text-xs
-                                    text-on-surface placeholder:text-on-surface-faint focus:border-ring focus:ring-1
+                                    w-full rounded-[3px] border border-outline bg-surface-raised py-1.5 pr-3 pl-8 font-mono text-xs
+                                    text-on-surface placeholder:text-on-surface-faint focus:border-ring focus:ring-2
                                     focus:ring-ring focus:outline-none
                                 "
                             />
@@ -341,7 +330,7 @@
                 {/if}
 
                 <div
-                    class="scrollbar-thin scrollbar-thumb-mist-200 scrollbar-track-transparent max-h-60 overflow-x-hidden overflow-y-auto p-1"
+                    class="max-h-60 scrollbar-thin scrollbar-thumb-mist-200 scrollbar-track-transparent overflow-x-hidden overflow-y-auto p-1"
                 >
                     {#if flattenedVisibleOptions.length === 0}
                         <div class="px-4 py-8 text-center text-sm text-on-surface-muted">
@@ -363,7 +352,7 @@
 
                     {#each Object.entries(groupedOptions.groups) as [groupName, groupOptions] (groupName)}
                         <div
-                            class="sticky top-0 z-10 mt-1 bg-surface-sunken/50 px-2 py-1.5 text-xs font-semibold tracking-wider text-on-surface-faint uppercase backdrop-blur-sm first:mt-0"
+                            class="sticky top-0 z-10 mt-1 bg-surface-sunken/50 px-2 py-1.5 font-mono text-xs font-semibold tracking-wider text-on-surface-faint uppercase backdrop-blur-sm first:mt-0"
                         >
                             {groupName}
                         </div>
@@ -385,11 +374,11 @@
     {/if}
 
     {#if error}
-        <p class="animate-in slide-in-from-top-1 fade-in mt-1.5 text-sm text-danger-soft-text">
+        <p class="mt-1.5 font-sans text-xs text-danger-soft-text">
             {error}
         </p>
     {:else if hint}
-        <p class="mt-1.5 text-xs text-on-surface-muted">
+        <p class="mt-1.5 font-sans text-xs text-on-surface-muted">
             {hint}
         </p>
     {/if}
@@ -416,8 +405,9 @@
         {onclick}
         onmouseenter={onsemiactive}
         class="
-            flex w-full items-start gap-3 rounded-lg px-2.5 py-2 text-left transition-colors
-            {active ? 'bg-surface-sunken' : 'hover:bg-surface-sunken/50'}
+            flex w-full items-start gap-3 rounded-[3px] px-2.5 py-2 text-left {active
+            ? 'bg-surface-sunken'
+            : 'hover:bg-surface-sunken/50'}
             {selected ? 'bg-primary-soft/50 font-medium text-on-surface' : 'text-on-surface-muted'}
             {option.disabled
             ? 'pointer-events-none cursor-not-allowed opacity-50'
@@ -433,14 +423,14 @@
 
         <div class="min-w-0 flex-1">
             <div class="flex items-center justify-between gap-2">
-                <span class="block truncate text-sm font-medium">{option.label}</span>
+                <span class="block truncate font-mono text-sm font-medium">{option.label}</span>
                 {#if selected}
                     <Check size={14} class="shrink-0 text-primary" />
                 {/if}
             </div>
             {#if option.description}
                 <div
-                    class="mt-0.5 line-clamp-2 text-xs leading-normal text-wrap text-on-surface-muted"
+                    class="mt-0.5 line-clamp-2 font-sans text-xs leading-normal text-wrap text-on-surface-muted"
                 >
                     {option.description}
                 </div>

package/src/lib/components/Separator.svelte

@@ -22,7 +22,10 @@
 {:else if label}
     <div role="separator" class="flex items-center gap-3 {className}">
         <div class="h-px flex-1 bg-outline"></div>
-        <span class="text-xs font-medium text-on-surface-faint select-none">{label}</span>
+        <span
+            class="font-mono text-xs font-medium tracking-wider text-on-surface-faint uppercase select-none"
+            >{label}</span
+        >
         <div class="h-px flex-1 bg-outline"></div>
     </div>
 {:else}

package/src/lib/components/Skeleton.svelte

@@ -30,7 +30,7 @@
 
 {#if shape === "circle"}
     <div
-        class="animate-pulse rounded-full bg-outline {className}"
+        class="animate-pulse rounded-full bg-surface-sunken {className}"
         style="width: {width ?? '2.5rem'}; height: {height ?? width ?? '2.5rem'}"
         role="status"
         aria-label="Loading"
@@ -39,7 +39,7 @@
     </div>
 {:else if shape === "rect"}
     <div
-        class="animate-pulse rounded-lg bg-outline {className}"
+        class="animate-pulse rounded-[4px] bg-surface-sunken {className}"
         style="width: {width ?? '100%'}; height: {height ?? '2rem'}"
         role="status"
         aria-label="Loading"
@@ -50,8 +50,8 @@
     <div class="animate-pulse space-y-6 p-6 {className}" role="status" aria-label="Loading content">
         {#if header}
             <div class="space-y-3">
-                <div class="h-7 w-48 rounded-lg bg-outline"></div>
-                <div class="h-4 w-72 rounded bg-outline-faint"></div>
+                <div class="h-7 w-48 rounded-[4px] bg-surface-sunken"></div>
+                <div class="h-4 w-72 rounded-[3px] bg-surface-sunken"></div>
             </div>
         {/if}
 
@@ -59,11 +59,11 @@
             {#each Array.from({ length: rows }, (_, i) => i) as i (i)}
                 <div class="space-y-2">
                     <div
-                        class="h-4 rounded bg-outline-faint"
+                        class="h-4 rounded-[3px] bg-surface-sunken"
                         style="width: {70 + ((i * 17) % 30)}%"
                     ></div>
                     <div
-                        class="h-4 rounded bg-surface-sunken"
+                        class="h-4 rounded-[3px] bg-surface-sunken"
                         style="width: {40 + ((i * 23) % 40)}%"
                     ></div>
                 </div>

package/src/lib/components/StatusIndicator.svelte

@@ -5,13 +5,7 @@
     import { fade } from "svelte/transition";
 
     type Status =
-        | "running"
-        | "success"
-        | "failed"
-        | "pending"
-        | "paused"
-        | "scheduled"
-        | "cancelled";
+        "running" | "success" | "failed" | "pending" | "paused" | "scheduled" | "cancelled";
     type Size = "sm" | "md" | "lg";
 
     interface Props {
@@ -36,24 +30,22 @@
     const STATUS_CONFIG: Record<Status, { label: string; classes: string; iconColor: string }> = {
         running: {
             label: "Running",
-            classes: "bg-info-soft text-info-soft-text border-info-soft ring-1 ring-info-soft",
+            classes: "bg-info-soft text-info-soft-text border-info-soft-border",
             iconColor: "text-info-surface",
         },
         success: {
             label: "Success",
-            classes:
-                "bg-success-soft text-success-soft-text border-success-soft ring-1 ring-success-soft/50",
+            classes: "bg-success-soft text-success-soft-text border-success-soft-border",
             iconColor: "text-success-surface",
         },
         failed: {
             label: "Failed",
-            classes:
-                "bg-danger-soft text-danger-soft-text border-danger-soft ring-1 ring-danger-soft/50",
+            classes: "bg-danger-soft text-danger-soft-text border-danger-soft-border",
             iconColor: "text-danger-surface",
         },
         pending: {
             label: "Pending",
-            classes: "bg-warning-soft text-warning-soft-text border-warning-soft",
+            classes: "bg-warning-soft text-warning-soft-text border-warning-soft-border",
             iconColor: "text-warning-surface",
         },
         paused: {
@@ -63,7 +55,7 @@
         },
         scheduled: {
             label: "Scheduled",
-            classes: "bg-primary-soft text-primary-soft-text border-primary-soft",
+            classes: "bg-primary-soft text-primary-soft-text border-primary-soft-border",
             iconColor: "text-primary",
         },
         cancelled: {
@@ -85,7 +77,7 @@
 </script>
 
 <div
-    class="duration-normal inline-flex items-center justify-center rounded-full border font-medium transition-all {config.classes} {sizeConfig.classes} {className}"
+    class="inline-flex items-center justify-center rounded-full border font-mono tracking-wide {config.classes} {sizeConfig.classes} {className}"
     role="status"
     in:fade={{ duration: 150 }}
 >

package/src/lib/components/Table.svelte

@@ -12,7 +12,7 @@
     let { children, class: className = "" }: Props = $props();
 </script>
 
-<div class="overflow-x-auto rounded-xl border border-outline {className}">
+<div class="overflow-x-auto rounded-[4px] border border-outline {className}">
     <table class="w-full text-sm">
         {@render children()}
     </table>

package/src/lib/components/TableCell.svelte

@@ -27,7 +27,7 @@
 <svelte:element
     this={tag}
     class="px-4 py-3 {alignClasses[align]} {header
-        ? 'text-xs font-medium tracking-wider text-on-surface-muted uppercase'
+        ? 'font-mono text-xs tracking-wide text-on-surface-faint uppercase'
         : 'text-on-surface'} {className}"
 >
     {@render children()}

package/src/lib/components/TableRow.svelte

@@ -13,10 +13,6 @@
     let { children, hoverable = false, class: className = "" }: Props = $props();
 </script>
 
-<tr
-    class="border-b border-outline-faint {hoverable
-        ? 'duration-fast transition-colors hover:bg-surface-sunken'
-        : ''} {className}"
->
+<tr class="border-b border-outline {hoverable ? 'hover:bg-surface-sunken' : ''} {className}">
     {@render children()}
 </tr>

package/src/lib/components/Tabs.svelte

@@ -53,9 +53,8 @@
         const baseClasses = `
             ${fullWidth ? "flex-1" : ""}
             inline-flex items-center justify-center gap-2 px-4 py-2.5
-            text-sm font-medium
-            transition-colors duration-150
-            disabled:cursor-not-allowed disabled:opacity-50
+            text-sm font-mono
+                        disabled:cursor-not-allowed disabled:opacity-50
         `;
 
         const isActive = activeTab === tab.id;
@@ -63,16 +62,16 @@
         if (variant === "underline") {
             return `${baseClasses} -mb-px border-b-2 ${
                 isActive
-                    ? "border-primary text-primary-soft-text"
-                    : "border-transparent text-on-surface-muted hover:border-outline-hover hover:text-on-surface"
+                    ? "border-primary text-primary"
+                    : "border-transparent text-on-surface-muted hover:border-outline-hover hover:text-primary"
             }`;
         }
 
         if (variant === "pills" || variant === "enclosed") {
-            return `${baseClasses} rounded-lg ${
+            return `${baseClasses} rounded-[3px] ${
                 isActive
-                    ? "bg-surface-raised text-on-surface shadow-sm"
-                    : "text-on-surface-muted hover:text-on-surface"
+                    ? "bg-primary-soft text-primary-soft-text"
+                    : "text-on-surface-muted hover:text-primary"
             }`;
         }
 
@@ -85,8 +84,8 @@
     <div
         class="
 			{variant === 'underline' ? 'border-b border-outline' : ''}
-			{variant === 'pills' ? 'rounded-xl bg-surface-sunken p-1' : ''}
-			{variant === 'enclosed' ? 'rounded-xl border border-outline bg-surface-sunken p-1' : ''}
+			{variant === 'pills' ? 'rounded-[4px] bg-surface-sunken p-1' : ''}
+			{variant === 'enclosed' ? 'rounded-[4px] border border-outline bg-surface-sunken p-1' : ''}
 		"
         role="tablist"
     >
@@ -120,7 +119,7 @@
                     {#if tab.badge || tab.badge === 0}
                         <span
                             class="
-							rounded-full px-1.5 py-0.5 text-xs font-medium
+							rounded-[3px] px-1.5 py-0.5 font-mono text-xs
 							{activeTab === tab.id
                                 ? 'bg-primary-soft text-primary-soft-text'
                                 : 'bg-surface-sunken text-on-surface-muted'}

package/src/lib/components/TaskCard.svelte

@@ -15,16 +15,19 @@
 
     let { accent = "wisp", onclick, children, class: className = "" }: Props = $props();
 
+    // Each accent maps to a left keyline in the matching semantic colour. The
+    // other three sides stay a neutral hairline (set per-side so the shorthand
+    // never overrides the accent left-colour), and hover lifts the surface.
     const accentClasses: Record<TaskCardAccent, string> = {
-        danger: "hover:border-danger-soft-border",
-        wisp: "hover:border-primary-soft-border",
-        aurora: "hover:border-info-soft-border",
+        danger: "border-l-danger-surface",
+        wisp: "border-l-primary",
+        aurora: "border-l-info",
     };
 </script>
 
 <button
     type="button"
-    class="group w-full rounded-lg border border-outline-faint bg-surface-raised p-3 text-left transition-all hover:shadow-sm {accentClasses[
+    class="group w-full rounded-[4px] border border-l-2 border-t-outline border-r-outline border-b-outline bg-surface-raised p-3 text-left hover:bg-surface-sunken {accentClasses[
         accent
     ]} {className}"
     {onclick}