From a64a68bf4e11cb7c38132941d517a666c38c9f4f Mon Sep 17 00:00:00 2001
From: eti <eti@eti.tf>
Date: Wed, 15 Jul 2026 13:51:37 +0000
Subject: [PATCH] web/ui/components: 3rd batch 🥧

Signed-off-by: eti <eti@eti.tf>
---
 web/src/app.css | 2 ++
 web/src/lib/components/ui/Button.svelte | 7 ++++++-
 web/src/lib/components/ui/Pagination.stories.svelte | 4 +++-
 web/src/lib/components/ui/Pagination.svelte | 18 +++++++++---------
 web/src/lib/components/ui/Radio.stories.svelte | 8 --------
 web/src/lib/components/ui/Radio.svelte | 15 +++++++++++----
 web/src/lib/components/ui/Scaffold.stories.svelte | 38 --------------------------------------
 web/src/lib/components/ui/Scaffold.svelte | 39 ---------------------------------------
 web/src/lib/components/ui/Select.stories.svelte | 21 ---------------------
 web/src/lib/components/ui/Select.svelte | 34 +++++++++++++++++++++++++++++-----
 web/src/lib/components/ui/Thumbnail.stories.svelte | 30 ------------------------------
 web/src/lib/components/ui/Thumbnail.svelte | 29 -----------------------------
 12 file(s) changed, 60 insertion(s)(+), 185 deletion(s)(-)

diff --git a/web/src/app.css b/web/src/app.css
--- a/web/src/app.css
+++ b/web/src/app.css
@@ -47,6 +47,7 @@ --color-foreground-success-strong: #166534;
 	--color-foreground-success-disabled: #16a34a80;
 	--color-foreground-danger: #dc2626;
 	--color-foreground-danger-strong: #991b1b;
+	--color-foreground-danger-subtle: #f87171;
 	--color-foreground-warning: #d97706;
 	--color-foreground-warning-strong: #92400e;
 	--color-foreground-info: #4338ca;
@@ -73,6 +74,7 @@ --color-border-focus-success: #22c55e;
 	--color-border-focus-danger: #ef4444;
 	--color-border-success: #15803d;
 	--color-border-danger: #fca5a5;
+	--color-border-danger-subtle: #fecaca;
 
 	/* --- shadow (inner depth) --- */
 	--color-shadow-inner-strong: #d1d5db;
diff --git a/web/src/lib/components/ui/Button.svelte b/web/src/lib/components/ui/Button.svelte
--- a/web/src/lib/components/ui/Button.svelte
+++ b/web/src/lib/components/ui/Button.svelte
@@ -104,6 +104,7 @@ href?: ResolvedPathname;
 		type?: "button" | "submit" | "reset";
 		disabled?: boolean;
 		icon?: Component<SvelteHTMLElements["svg"]>;
+		iconSide?: string;
 		class?: string;
 		loading?: boolean;
 		spinnerClass?: string;
@@ -118,6 +119,7 @@ href,
 		type = "button",
 		disabled = false,
 		icon,
+		iconSide = "left",
 		class: className,
 		loading = false,
 		spinnerClass,
@@ -135,11 +137,14 @@ {#snippet content()}
 	{#if loading}
 		<Spinner class={spinnerSize} />
 	{:else}
-		{#if Icon}
+		{#if Icon && iconSide == "left"}
 			<Icon class="{iconSize} shrink-0" aria-hidden="true" />
 		{/if}
 		{#if children}
 			{@render children()}
+		{/if}
+		{#if Icon && iconSide == "right"}
+			<Icon class="{iconSize} shrink-0" aria-hidden="true" />
 		{/if}
 	{/if}
 {/snippet}
diff --git a/web/src/lib/components/ui/Pagination.stories.svelte b/web/src/lib/components/ui/Pagination.stories.svelte
--- a/web/src/lib/components/ui/Pagination.stories.svelte
+++ b/web/src/lib/components/ui/Pagination.stories.svelte
@@ -8,7 +8,8 @@ component: Pagination,
 		tags: ["autodocs"],
 		argTypes: {
 			page: { control: { type: "number" } },
-			total: { control: { type: "number" } }
+			total: { control: { type: "number" } },
+			labels: { control: { type: "boolean" } }
 		},
 		args: {
 			page: 1,
@@ -23,3 +24,4 @@ <Story name="LastPage" args={{ page: 10, total: 10 }} />
 <Story name="FewPages" args={{ page: 2, total: 3 }} />
 <Story name="SinglePage" args={{ page: 1, total: 1 }} />
 <Story name="ManyPages" args={{ page: 12, total: 40 }} />
+<Story name="WithLabels" args={{ page: 5, total: 10, labels: true }} />
diff --git a/web/src/lib/components/ui/Pagination.svelte b/web/src/lib/components/ui/Pagination.svelte
--- a/web/src/lib/components/ui/Pagination.svelte
+++ b/web/src/lib/components/ui/Pagination.svelte
@@ -58,9 +58,10 @@ page: number;
 		total: number;
 		onchange?: (page: number) => void;
 		class?: string;
+		labels?: boolean;
 	}
 
-	let { page = $bindable(1), total, onchange, class: className }: Props = $props();
+	let { page = $bindable(1), total, onchange, class: className, labels }: Props = $props();
 
 	const count = $derived(Math.max(total, 1));
 	const items = $derived(getPageItems(Math.min(Math.max(page, 1), count), count));
@@ -76,20 +77,18 @@
 <nav aria-label="Pagination" class={pagination({ class: className })}>
 	<Button
 		variant="ghost"
-		size="sm"
-		class="size-8 p-0"
 		icon={ChevronLeft}
 		disabled={page <= 1}
 		aria-label="Previous page"
 		onclick={() => goTo(page - 1)}
-	/>
+	>
+		<span class="hidden sm:inline">{labels ? "Previous" : ""}</span>
+	</Button>
 
 	{#each items as item, i (typeof item === "number" ? item : `${item}-${i}`)}
 		{#if typeof item === "number"}
 			<Button
 				variant={item === page ? "default" : "ghost"}
-				size="sm"
-				class="size-8 p-0"
 				aria-current={item === page ? "page" : undefined}
 				aria-label={`Page ${item}`}
 				onclick={() => goTo(item)}
@@ -108,11 +107,12 @@ {/each}
 
 	<Button
 		variant="ghost"
-		size="sm"
-		class="size-8 p-0"
 		icon={ChevronRight}
+		iconSide="right"
 		disabled={page >= count}
 		aria-label="Next page"
 		onclick={() => goTo(page + 1)}
-	/>
+	>
+		<span class="hidden sm:inline">{labels ? "Next" : ""}</span>
+	</Button>
 </nav>
diff --git a/web/src/lib/components/ui/Radio.stories.svelte b/web/src/lib/components/ui/Radio.stories.svelte
--- a/web/src/lib/components/ui/Radio.stories.svelte
+++ b/web/src/lib/components/ui/Radio.stories.svelte
@@ -24,11 +24,3 @@ <Story name="Default">Option</Story>
 <Story name="Checked" args={{ group: "a" }}>Option</Story>
 <Story name="Disabled" args={{ disabled: true }}>Option</Story>
 <Story name="Disabled checked" args={{ group: "a", disabled: true }}>Option</Story>
-
-<Story name="Group">
-	<div class="flex items-center gap-4">
-		<Radio value="a" group="a">Option</Radio>
-		<Radio value="b" group="a">Option</Radio>
-		<Radio value="c" group="a" disabled>Option</Radio>
-	</div>
-</Story>
diff --git a/web/src/lib/components/ui/Radio.svelte b/web/src/lib/components/ui/Radio.svelte
--- a/web/src/lib/components/ui/Radio.svelte
+++ b/web/src/lib/components/ui/Radio.svelte
@@ -20,22 +20,29 @@ ...rest
 	}: Props = $props();
 
 	const labelClasses = $derived(
-		`inline-flex items-center gap-2 cursor-pointer ${disabled ? "cursor-not-allowed text-foreground-disabled" : ""} ${className ?? ""}`
+		`inline-flex items-center gap-2 ${disabled ? "cursor-not-allowed text-foreground-disabled" : "cursor-pointer"} ${className ?? ""}`
 	);
 </script>
 
 <label class={labelClasses}>
-	<span class="relative inline-flex size-4 shrink-0">
+	<span class="relative inline-flex">
 		<input
 			type="radio"
 			{value}
 			bind:group
 			{disabled}
-			class="peer size-4 shrink-0 appearance-none rounded-full border border-border-strong bg-background-default transition-colors duration-150 hover:bg-background-subtle checked:border-foreground-default focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50"
+			class="peer size-4 shrink-0 appearance-none rounded-full cursor-pointer border border-border-strong bg-background-default transition-colors duration-150 \
+			     hover:bg-background-subtle \
+				 checked:border-foreground-default \
+				   focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default \
+				   disabled:cursor-not-allowed disabled:pointer-events-none disabled:border-border-disabled disabled:hover:bg-inherit"
 			{...rest}
 		/>
 		<span
-			class="pointer-events-none absolute inset-0 m-auto hidden size-2 rounded-full bg-foreground-default peer-checked:block peer-disabled:opacity-50"
+			class="absolute inset-0 m-auto hidden size-2 rounded-full \
+			      bg-foreground-default \
+			      peer-checked:block \
+				  peer-disabled:text-foreground-disabled peer-disabled:bg-foreground-disabled"
 			aria-hidden="true"
 		></span>
 	</span>
diff --git a/web/src/lib/components/ui/Scaffold.stories.svelte b/web/src/lib/components/ui/Scaffold.stories.svelte
deleted file mode 100644
--- a/web/src/lib/components/ui/Scaffold.stories.svelte
+++ /dev/null
@@ -1,38 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import Scaffold from "./Scaffold.svelte";
-
-	const { Story } = defineMeta({
-		title: "UI/Scaffold",
-		component: Scaffold,
-		tags: ["autodocs"],
-		argTypes: {
-			width: {
-				control: { type: "inline-radio" },
-				options: ["lg", "xl", "full"]
-			}
-		},
-		args: {
-			width: "lg"
-		}
-	});
-</script>
-
-<!-- Scaffold content comes through its `children` snippet, provided here as Story slot content. -->
-<Story name="Default">
-	<Scaffold>
-		<div class="rounded border border-border-default bg-background-default p-4">Content</div>
-	</Scaffold>
-</Story>
-
-<Story name="Wide" args={{ width: "xl" }}>
-	<Scaffold width="xl">
-		<div class="rounded border border-border-default bg-background-default p-4">Content</div>
-	</Scaffold>
-</Story>
-
-<Story name="Full" args={{ width: "full" }}>
-	<Scaffold width="full">
-		<div class="rounded border border-border-default bg-background-default p-4">Content</div>
-	</Scaffold>
-</Story>
diff --git a/web/src/lib/components/ui/Scaffold.svelte b/web/src/lib/components/ui/Scaffold.svelte
deleted file mode 100644
--- a/web/src/lib/components/ui/Scaffold.svelte
+++ /dev/null
@@ -1,39 +0,0 @@
-<script module lang="ts">
-	import { tv, type VariantProps } from "tailwind-variants";
-
-	// Echoes the +layout.svelte container idiom: a centered, padded section
-	// clamped to a max width (matches Figma node 35:791's single Content slot).
-	export const scaffold = tv({
-		base: "mx-auto w-full px-4 py-6",
-		variants: {
-			width: {
-				lg: "max-w-screen-lg",
-				xl: "max-w-screen-xl",
-				full: "max-w-full"
-			}
-		},
-		defaultVariants: {
-			width: "lg"
-		}
-	});
-
-	export type ScaffoldVariants = VariantProps<typeof scaffold>;
-</script>
-
-<script lang="ts">
-	import type { Snippet } from "svelte";
-
-	interface Props {
-		width?: ScaffoldVariants["width"];
-		class?: string;
-		children: Snippet;
-	}
-
-	let { width = "lg", class: className, children }: Props = $props();
-
-	const classes = $derived(scaffold({ width, class: className }));
-</script>
-
-<div class={classes}>
-	{@render children()}
-</div>
diff --git a/web/src/lib/components/ui/Select.stories.svelte b/web/src/lib/components/ui/Select.stories.svelte
--- a/web/src/lib/components/ui/Select.stories.svelte
+++ b/web/src/lib/components/ui/Select.stories.svelte
@@ -42,24 +42,3 @@ <option value="one">One</option>
 	<option value="two">Two</option>
 	<option value="three">Three</option>
 </Story>
-
-<Story name="States">
-	<div class="flex flex-col gap-3">
-		<Select>
-			<option value="" disabled selected>Select</option>
-			<option value="one">One</option>
-		</Select>
-		<Select value="one">
-			<option value="one">One</option>
-			<option value="two">Two</option>
-		</Select>
-		<Select error value="one">
-			<option value="one">One</option>
-			<option value="two">Two</option>
-		</Select>
-		<Select disabled value="one">
-			<option value="one">One</option>
-			<option value="two">Two</option>
-		</Select>
-	</div>
-</Story>
diff --git a/web/src/lib/components/ui/Select.svelte b/web/src/lib/components/ui/Select.svelte
--- a/web/src/lib/components/ui/Select.svelte
+++ b/web/src/lib/components/ui/Select.svelte
@@ -11,9 +11,17 @@ true: "border-border-danger bg-background-danger-subtle text-foreground-danger focus:border-border-focus-danger focus:ring-1 focus:ring-border-focus-danger"
 			},
 			disabled: {
 				false: "",
-				true: "bg-background-inset text-foreground-disabled"
+				true: "text-foreground-disabled"
 			}
 		},
+		compoundVariants: [
+			{
+				error: true,
+				disabled: true,
+				class:
+					"border-border-danger-subtle bg-background-danger-subtle text-foreground-danger-subtle"
+			}
+		],
 		defaultVariants: {
 			error: false,
 			disabled: false
@@ -21,6 +29,25 @@ }
 	});
 
 	export type SelectVariants = VariantProps<typeof select>;
+
+	const chevron = tv({
+		base: "pointer-events-none absolute right-3 top-1/2 size-3.5 -translate-y-1/2 text-foreground-subtle",
+		variants: {
+			error: {
+				true: "text-foreground-danger"
+			},
+			disabled: {
+				true: "text-foreground-disabled"
+			}
+		},
+		compoundVariants: [
+			{
+				error: true,
+				disabled: true,
+				class: "text-foreground-danger-subtle"
+			}
+		]
+	});
 </script>
 
 <script lang="ts">
@@ -54,8 +81,5 @@ {#if children}
 			{@render children()}
 		{/if}
 	</select>
-	<ChevronDown
-		class="pointer-events-none absolute right-3 top-1/2 size-4 -translate-y-1/2 text-foreground-subtle"
-		aria-hidden="true"
-	/>
+	<ChevronDown class={chevron({ error, disabled })} aria-hidden="true" />
 </div>
diff --git a/web/src/lib/components/ui/Thumbnail.stories.svelte b/web/src/lib/components/ui/Thumbnail.stories.svelte
deleted file mode 100644
--- a/web/src/lib/components/ui/Thumbnail.stories.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script module lang="ts">
-	import { defineMeta } from "@storybook/addon-svelte-csf";
-	import Thumbnail from "./Thumbnail.svelte";
-
-	const { Story } = defineMeta({
-		title: "UI/Thumbnail",
-		component: Thumbnail,
-		tags: ["autodocs"],
-		argTypes: {
-			title: { control: "text" }
-		},
-		args: {
-			title: "Design System"
-		}
-	});
-</script>
-
-<Story name="Default">
-	<div class="w-96">
-		<Thumbnail />
-	</div>
-</Story>
-
-<Story name="Custom content">
-	<div class="w-96">
-		<Thumbnail>
-			<span class="text-2xl font-bold text-foreground-default sm:text-3xl">Thumbnail</span>
-		</Thumbnail>
-	</div>
-</Story>
diff --git a/web/src/lib/components/ui/Thumbnail.svelte b/web/src/lib/components/ui/Thumbnail.svelte
deleted file mode 100644
--- a/web/src/lib/components/ui/Thumbnail.svelte
+++ /dev/null
@@ -1,29 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from "svelte";
-	import Logo from "./Logo.svelte";
-
-	interface Props {
-		title?: string;
-		class?: string;
-		children?: Snippet;
-	}
-
-	let { title, class: className, children }: Props = $props();
-</script>
-
-<div
-	class={`relative flex aspect-video flex-col gap-6 overflow-hidden rounded-lg border border-border-default bg-background-subtle p-8 ${className ?? ""}`}
->
-	<div
-		class="pointer-events-none absolute inset-0 bg-[radial-gradient(var(--color-border-strong)_1px,transparent_1px)] bg-[length:12px_12px] [mask-image:linear-gradient(to_bottom,transparent,black)] opacity-60"
-		aria-hidden="true"
-	></div>
-	<div class="relative z-10 flex flex-col gap-6">
-		<Logo wordmark />
-		{#if children}
-			{@render children()}
-		{:else if title}
-			<span class="text-2xl font-bold text-foreground-default sm:text-3xl">{title}</span>
-		{/if}
-	</div>
-</div>

--
tangled.sh