fix: update segmented component styles

web/src/lib/components/kit/ui/Segmented.svelte

@@ -7,9 +7,15 @@
 	interface Props {
 		options: Option[];
 		value?: string;
+		wide?: boolean;
 		onchange?: (value: string) => void;
 	}
-	let { options, value = $bindable(), onchange }: Props = $props();
+	let {
+		options,
+		wide = false,
+		value = $bindable(),
+		onchange,
+	}: Props = $props();
 
 	function select(v: string) {
 		value = v;
@@ -17,7 +23,7 @@
 	}
 </script>
 
-<div class="segmented" role="group">
+<div class="segmented" class:wide role="group">
 	{#each options as opt (opt.value)}
 		<button
 			type="button"
@@ -33,23 +39,27 @@
 
 <style>
 	.segmented {
-		display: flex;
+		display: inline-flex;
-		height: 32px;
+		border: var(--size-border) solid var(--color-border);
-		border: 1px solid var(--line);
+		cursor: pointer;
+		&.wide {
+			width: 100%;
+		}
 	}
 	.segment {
 		border: 0;
-		border-right: 1px solid var(--line);
+		border-right: var(--size-border) solid var(--color-border);
-		color: var(--muted);
+		color: var(--color-text-muted);
-		font: 10px var(--font-mono);
+		font: var(--font-size-s) var(--font-mono);
 		background: 0 0;
+		padding: var(--space-m);
 		flex: 1;
 	}
 	.segment:last-child {
 		border-right: 0px;
 	}
 	.segment.selected {
-		background: var(--blue);
+		background: var(--color-main);
-		color: #fff;
+		color: var(--color-background);
 	}
 </style>

web/src/lib/components/kit/ui/TopNav.svelte

@@ -9,6 +9,7 @@
 	<a href={resolve("/preview/tools/remove-background-png")}>
 		Background remover
 	</a>
+	<a href={resolve("/preview/kit")}> UI Kit </a>
 </nav>
 
 <style>

web/src/preview.css

@@ -61,6 +61,7 @@
 	button,
 	input:where([type="button"], [type="reset"], [type="submit"]) {
 		appearance: auto;
+		cursor: pointer;
 	}
 
 	a,

web/src/routes/preview/demo/+page.svelte

@@ -7,13 +7,13 @@
 	import PreviewStack from "$lib/components/kit/PreviewStack.svelte";
 	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
 	import SectionLabel from "$lib/components/kit/SectionLabel.svelte";
-	import Segmented from "$lib/components/kit/Segmented.svelte";
 	import SliderField from "$lib/components/kit/SliderField.svelte";
 	import StepCard from "$lib/components/kit/StepCard.svelte";
 	import ToggleRow from "$lib/components/kit/ToggleRow.svelte";
 	import Badge from "$lib/components/kit/ui/Badge.svelte";
 	import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
 	import IconButton from "$lib/components/kit/ui/IconButton.svelte";
+	import Segmented from "$lib/components/kit/ui/Segmented.svelte";
 	import WorkspaceHeader from "$lib/components/kit/WorkspaceHeader.svelte";
 	import {
 		ChevronDown,

web/src/routes/preview/kit/+page.svelte

@@ -8,7 +8,6 @@
 	import Panel from "$lib/components/kit/layout/Panel.svelte";
 	import MetaList from "$lib/components/kit/MetaList.svelte";
 	import PreviewTile from "$lib/components/kit/PreviewTile.svelte";
-	import Segmented from "$lib/components/kit/Segmented.svelte";
 	import SelectField from "$lib/components/kit/SelectField.svelte";
 	import SettingGroup from "$lib/components/kit/SettingGroup.svelte";
 	import SettingsFooter from "$lib/components/kit/SettingsFooter.svelte";
@@ -22,6 +21,7 @@
 	import Button from "$lib/components/kit/ui/Button.svelte";
 	import DownloadButton from "$lib/components/kit/ui/DownloadButton.svelte";
 	import IconButton from "$lib/components/kit/ui/IconButton.svelte";
+	import Segmented from "$lib/components/kit/ui/Segmented.svelte";
 	import { Download, ImageOff, Palette, Plus, Trash2 } from "@lucide/svelte";
 
 	let mode = $state("preview");