@widgetic/design-system 0.5.22 → 0.5.23

package/dist/components/ui/scroll-area/scroll-area.svelte

@@ -24,7 +24,7 @@
 </script>
 
 <ScrollAreaPrimitive.Root bind:ref dir={$textDirection} {...restProps} class={cn("relative overflow-hidden", className)}>
-	<ScrollAreaPrimitive.Viewport class="h-full w-full rounded-[inherit]">
+	<ScrollAreaPrimitive.Viewport class="h-full w-full" style="border-radius: inherit">
 		{@render children?.()}
 	</ScrollAreaPrimitive.Viewport>
 	{#if orientation === "vertical" || orientation === "both"}

package/dist/components/ui/select/select-content.svelte

@@ -5,8 +5,6 @@
 	import { cn } from "../../../utils.js";
 	import { useTextDirection } from "../../textDirection.js";
 
-	// The library writes dir="ltr" on the floating element unless it is told the direction: left to right text and
-	// alignment inside a menu of a right to left screen.
 	const textDirection = useTextDirection();
 
 	let {
@@ -27,7 +25,7 @@
 		{sideOffset}
 		dir={$textDirection}
 		class={cn(
-			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+			"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-xl border border-border bg-popover text-popover-foreground data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/select/select-item.svelte

@@ -1,11 +1,12 @@
+<!-- Figma: Select Option (component set 170:135, node 170:135). -->
 <script lang="ts" module>
 	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
 	export type SelectItemProps = WithoutChild<SelectPrimitive.ItemProps>;
 </script>
 
 <script lang="ts">
-	import Check from "lucide-svelte/icons/check";
-		import { cn } from "../../../utils.js";
+	import IconCheck from "@tabler/icons-svelte/icons/check";
+	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -21,7 +22,7 @@
 	bind:ref
 	{value}
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 ps-8 pe-2 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50",
+		"relative flex h-8 w-full cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 ps-8 text-body outline-hidden data-[highlighted]:bg-accent data-[selected]:bg-brand-subtle data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 		className
 	)}
 	{...restProps}
@@ -29,7 +30,7 @@
 	{#snippet children({ selected, highlighted })}
 		<span class="absolute start-2 flex size-3.5 items-center justify-center">
 			{#if selected}
-				<Check class="size-4" />
+				<IconCheck class="size-4 stroke-[1.333]" aria-hidden="true" />
 			{/if}
 		</span>
 		{#if childrenProp}

package/dist/components/ui/select/select-scroll-down-button.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-	import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import IconChevronDown from "@tabler/icons-svelte/icons/chevron-down";
 		import { cn } from "../../../utils.js";
 
 	let {
@@ -19,5 +19,5 @@
 	class={cn("flex cursor-default items-center justify-center py-1", className)}
 	{...restProps}
 >
-	<ChevronDown class="size-4" />
+	<IconChevronDown class="size-4 stroke-[1.333]" aria-hidden="true" />
 </SelectPrimitive.ScrollDownButton>

package/dist/components/ui/select/select-scroll-up-button.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-	import ChevronUp from "lucide-svelte/icons/chevron-up";
+	import IconChevronUp from "@tabler/icons-svelte/icons/chevron-up";
 		import { cn } from "../../../utils.js";
 
 	let {
@@ -19,5 +19,5 @@
 	class={cn("flex cursor-default items-center justify-center py-1", className)}
 	{...restProps}
 >
-	<ChevronUp class="size-4" />
+	<IconChevronUp class="size-4 stroke-[1.333]" aria-hidden="true" />
 </SelectPrimitive.ScrollUpButton>

package/dist/components/ui/select/select-trigger.svelte

@@ -1,10 +1,11 @@
+<!-- Figma: Select (328:135) and Select Trigger (268:97). -->
 <script lang="ts" module>
 	import { Select as SelectPrimitive, type WithoutChild } from "bits-ui";
 	export type SelectTriggerProps = WithoutChild<SelectPrimitive.TriggerProps>;
 </script>
 
 <script lang="ts">
-		import ChevronDown from "lucide-svelte/icons/chevron-down";
+	import IconChevronDown from "@tabler/icons-svelte/icons/chevron-down";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -18,11 +19,11 @@
 <SelectPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"border-input bg-background ring-offset-background data-placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center justify-between rounded-md border px-3 py-2 text-sm focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+		"flex h-9 w-full items-center justify-between gap-2 rounded-lg border border-input bg-background px-3 py-2 text-start text-body transition-colors duration-fast hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[placeholder]:text-muted-foreground aria-invalid:border-destructive [&>span]:line-clamp-1",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronDown class="size-4 opacity-50" />
+	<IconChevronDown class="size-4 shrink-0 stroke-[1.333] opacity-50" aria-hidden="true" />
 </SelectPrimitive.Trigger>

package/dist/components/ui/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./skeleton.svelte";
+export { Root, Root as Skeleton };

package/dist/components/ui/skeleton/index.js

@@ -0,0 +1,2 @@
+import Root from "./skeleton.svelte";
+export { Root, Root as Skeleton };

package/dist/components/ui/skeleton/skeleton.svelte

@@ -0,0 +1,24 @@
+<!-- Figma: Skeleton (component set 131:2, node 131:10). -->
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		pulse = "high",
+		...restProps
+	}: HTMLAttributes<HTMLDivElement> & {
+		/** Figma Pulse: High (default) | Low (50% opacity). */
+		pulse?: "high" | "low";
+	} = $props();
+</script>
+
+<div
+	class={cn(
+		"rounded-lg bg-muted motion-reduce:opacity-100 motion-safe:animate-pulse",
+		pulse === "low" && "opacity-50",
+		className
+	)}
+	aria-hidden="true"
+	{...restProps}
+></div>

package/dist/components/ui/skeleton/skeleton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLDivElement> & {
+    /** Figma Pulse: High (default) | Low (50% opacity). */
+    pulse?: "high" | "low";
+};
+declare const Skeleton: import("svelte").Component<$$ComponentProps, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/ui/slider/slider.svelte

@@ -1,14 +1,13 @@
+<!-- Figma: IC Slider (Editor); track input, range primary, 4px track / 16px thumb. -->
 <script lang="ts" module>
 	import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	export type SliderProps = WithoutChildrenOrChild<SliderPrimitive.RootProps>;
 </script>
 
 <script lang="ts">
-		import { cn } from "../../../utils.js";
+	import { cn } from "../../../utils.js";
 	import { useTextDirection } from "../../textDirection.js";
 
-	// The slider of the library is left to right unless it is told: on a right to left screen the smallest value is at the
-	// right end, like the rest of the screen, and the arrow keys follow.
 	const textDirection = useTextDirection();
 
 	let {
@@ -19,10 +18,6 @@
 	}: SliderProps = $props();
 </script>
 
-<!--
-Discriminated Unions + Destructing (required for bindable) do not
-get along, so we shut typescript up by casting `value` to `never`.
--->
 <SliderPrimitive.Root
 	bind:value={value as never}
 	bind:ref
@@ -31,13 +26,13 @@ get along, so we shut typescript up by casting `value` to `never`.
 	{...restProps}
 >
 	{#snippet children({ thumbs })}
-		<span class="bg-secondary relative h-2 w-full grow overflow-hidden rounded-full">
-			<SliderPrimitive.Range class="bg-primary absolute h-full" />
+		<span class="relative h-1 w-full grow overflow-hidden rounded-full bg-input">
+			<SliderPrimitive.Range class="absolute z-10 h-full rounded-full bg-primary" />
 		</span>
 		{#each thumbs as thumb}
 			<SliderPrimitive.Thumb
 				index={thumb}
-				class="border-primary bg-background ring-offset-background focus-visible:ring-ring block size-5 rounded-full border-2 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+				class="relative z-20 block size-4 rounded-full border-2 border-primary bg-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50"
 			/>
 		{/each}
 	{/snippet}

package/dist/components/ui/sonner/sonner.svelte

@@ -1,18 +1,20 @@
+<!-- Figma: Toast (135:87) — flat popover surface, 1px border. -->
 <script lang="ts">
 	import { Toaster as Sonner, type ToasterProps as SonnerProps } from "svelte-sonner";
 
-	const browser = typeof window !== 'undefined';
+	const browser = typeof window !== "undefined";
 
 	let restProps: SonnerProps = $props();
-	
-	// Determine theme based on browser preference, fallback to 'light'
-	// This removes the dependency on mode-watcher which requires ModeWatcher component to be mounted
-	function getTheme(): 'light' | 'dark' | 'system' {
-		if (!browser) return 'light';
-		if (typeof window !== 'undefined' && window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
-			return 'dark';
+
+	function getTheme(): "light" | "dark" | "system" {
+		if (!browser) return "light";
+		if (
+			typeof window !== "undefined" &&
+			window.matchMedia?.("(prefers-color-scheme: dark)").matches
+		) {
+			return "dark";
 		}
-		return 'light';
+		return "light";
 	}
 </script>
 
@@ -21,10 +23,14 @@
 	class="toaster group"
 	toastOptions={{
 		classes: {
-			toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-			description: "group-[.toast]:text-muted-foreground",
-			actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-			cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+			toast:
+				"group toast group-[.toaster]:rounded-xl group-[.toaster]:border group-[.toaster]:border-border group-[.toaster]:bg-popover group-[.toaster]:text-popover-foreground",
+			description: "group-[.toast]:text-muted-foreground group-[.toast]:text-body",
+			title: "group-[.toast]:text-body-medium",
+			actionButton:
+				"group-[.toast]:h-8 group-[.toast]:rounded-lg group-[.toast]:border group-[.toast]:border-input group-[.toast]:bg-background group-[.toast]:px-2 group-[.toast]:text-label",
+			cancelButton:
+				"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground group-[.toast]:text-label",
 		},
 	}}
 	{...restProps}

package/dist/components/ui/stepper-button/index.d.ts

@@ -0,0 +1,3 @@
+import Root from "./stepper-button.svelte";
+export { Root, Root as StepperButton };
+export type { StepperKind } from "./stepper-button.svelte";

package/dist/components/ui/stepper-button/index.js

@@ -0,0 +1,2 @@
+import Root from "./stepper-button.svelte";
+export { Root, Root as StepperButton };

package/dist/components/ui/stepper-button/stepper-button.svelte

@@ -0,0 +1,37 @@
+<!-- Figma: Stepper Button (Editor / Atoms 171:81). -->
+<script lang="ts">
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import IconMinus from "@tabler/icons-svelte/icons/minus";
+	import IconPlus from "@tabler/icons-svelte/icons/plus";
+	import { cn } from "../../../utils.js";
+
+	export type StepperKind = "plus" | "minus";
+
+	let {
+		class: className,
+		kind = "plus",
+		label,
+		disabled = false,
+		...restProps
+	}: HTMLButtonAttributes & {
+		kind?: StepperKind;
+		label: string;
+	} = $props();
+</script>
+
+<button
+	type="button"
+	aria-label={label}
+	{disabled}
+	class={cn(
+		"inline-flex size-6 shrink-0 items-center justify-center rounded-lg bg-transparent text-foreground transition-colors duration-fast hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 press-feedback",
+		className
+	)}
+	{...restProps}
+>
+	{#if kind === "minus"}
+		<IconMinus class="size-4 stroke-[1.333]" aria-hidden="true" />
+	{:else}
+		<IconPlus class="size-4 stroke-[1.333]" aria-hidden="true" />
+	{/if}
+</button>

package/dist/components/ui/stepper-button/stepper-button.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLButtonAttributes } from "svelte/elements";
+export type StepperKind = "plus" | "minus";
+type $$ComponentProps = HTMLButtonAttributes & {
+    kind?: StepperKind;
+    label: string;
+};
+declare const StepperButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type StepperButton = ReturnType<typeof StepperButton>;
+export default StepperButton;

package/dist/components/ui/switch/switch.svelte

@@ -1,10 +1,11 @@
+<!-- Figma: Switch (component set 103:21, node 103:2). -->
 <script lang="ts" module>
 	import { Switch as SwitchPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	export type SwitchProps = WithoutChildrenOrChild<SwitchPrimitive.RootProps>;
 </script>
 
 <script lang="ts">
-		import { cn } from "../../../utils.js";
+	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -14,18 +15,22 @@
 	}: SwitchProps = $props();
 </script>
 
+<!--
+	The track is 36x20. `relative before:absolute before:inset-x-0 before:-inset-y-0.5` adds an invisible 2px above and below,
+	so the tap target is 36x24 (the minimum height of a target). Figma keeps the same 24px frame around the 20px track.
+-->
 <SwitchPrimitive.Root
 	bind:ref
 	bind:checked
 	class={cn(
-		"focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-input p-0.5 transition-colors duration-base ease-out before:absolute before:inset-x-0 before:-inset-y-0.5 hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:hover:bg-primary/90",
 		className
 	)}
 	{...restProps}
 >
 	<SwitchPrimitive.Thumb
 		class={cn(
-			"bg-background pointer-events-none block size-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:-translate-x-5"
+			"pointer-events-none block size-4 rounded-full bg-background shadow-none transition-transform duration-base ease-out data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary-foreground data-[state=unchecked]:translate-x-0 rtl:data-[state=checked]:-translate-x-4"
 		)}
 	/>
 </SwitchPrimitive.Root>

package/dist/components/ui/table/table-cell.svelte

@@ -18,7 +18,7 @@
 
 <td
 	bind:this={ref}
-	class={cn("p-4 align-middle [&:has([role=checkbox])]:pe-0", className)}
+	class={cn("text-body p-4 align-middle [&:has([role=checkbox])]:pe-0", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/table/table-head.svelte

@@ -19,7 +19,7 @@
 <th
 	bind:this={ref}
 	class={cn(
-		"text-muted-foreground h-12 px-4 text-start align-middle font-medium [&:has([role=checkbox])]:pe-0",
+		"text-caption-medium text-muted-foreground h-9 px-4 text-start align-middle [&:has([role=checkbox])]:pe-0",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/table/table-row.svelte

@@ -19,7 +19,7 @@
 <tr
 	bind:this={ref}
 	class={cn(
-		"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+		"border-border hover:bg-accent data-[state=selected]:bg-brand-subtle border-b transition-colors duration-fast",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/tabs/tabs-list.svelte

@@ -16,7 +16,7 @@
 <TabsPrimitive.List
 	bind:ref
 	class={cn(
-		"bg-muted text-muted-foreground inline-flex h-10 items-center justify-center rounded-md p-1",
+		"bg-accent text-muted-foreground inline-flex h-9 items-center justify-center gap-0.5 rounded-xl p-1",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/tabs/tabs-trigger.svelte

@@ -16,7 +16,7 @@
 <TabsPrimitive.Trigger
 	bind:ref
 	class={cn(
-		"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-2xs",
+		"text-label focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=inactive]:text-muted-foreground inline-flex h-7 items-center justify-center whitespace-nowrap rounded-lg px-3 transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=inactive]:hover:bg-accent data-[state=inactive]:hover:text-foreground",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/tag/index.d.ts

@@ -0,0 +1,2 @@
+import Root from "./tag.svelte";
+export { Root, Root as Tag };

package/dist/components/ui/tag/index.js

@@ -0,0 +1,2 @@
+import Root from "./tag.svelte";
+export { Root, Root as Tag };

package/dist/components/ui/tag/tag.svelte

@@ -0,0 +1,42 @@
+<!-- Figma: Tag (component set 170:116, node 170:116); radius/lg (8px). -->
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import IconX from "@tabler/icons-svelte/icons/x";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		label,
+		showRemove = false,
+		removeLabel = "Remove tag",
+		disabled = false,
+		onRemove = undefined,
+	}: HTMLAttributes<HTMLSpanElement> & {
+		label: string;
+		showRemove?: boolean;
+		removeLabel?: string;
+		disabled?: boolean;
+		onRemove?: () => void;
+	} = $props();
+</script>
+
+<span
+	class={cn(
+		"inline-flex h-6 max-w-full items-center gap-1 rounded-lg border border-border bg-background px-2 text-label-small text-foreground transition-colors duration-fast",
+		disabled ? "pointer-events-none opacity-50" : "hover:bg-accent",
+		className
+	)}
+>
+	<span class="truncate">{label}</span>
+	{#if showRemove && onRemove}
+		<button
+			type="button"
+			class="inline-flex size-4 shrink-0 items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+			aria-label={removeLabel}
+			{disabled}
+			onclick={onRemove}
+		>
+			<IconX class="size-4 stroke-[1.333]" aria-hidden="true" />
+		</button>
+	{/if}
+</span>

package/dist/components/ui/tag/tag.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLAttributes<HTMLSpanElement> & {
+    label: string;
+    showRemove?: boolean;
+    removeLabel?: string;
+    disabled?: boolean;
+    onRemove?: () => void;
+};
+declare const Tag: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tag = ReturnType<typeof Tag>;
+export default Tag;

package/dist/components/ui/textarea/textarea.svelte

@@ -1,11 +1,12 @@
+<!-- Figma: Textarea (component set 328:152, node 328:152). -->
 <script lang="ts" module>
+	import type { HTMLTextareaAttributes } from "svelte/elements";
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
 
 	export type TextareaProps = WithoutChildren<WithElementRef<HTMLTextareaAttributes>>;
 </script>
 
 <script lang="ts">
-	import type { WithElementRef, WithoutChildren } from "bits-ui";
-	import type { HTMLTextareaAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -19,7 +20,7 @@
 <textarea
 	bind:this={ref}
 	class={cn(
-		"border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+		"flex min-h-[5.5rem] w-full min-w-0 rounded-lg border border-input bg-background px-3 py-2 text-body text-foreground transition-colors duration-fast placeholder:text-muted-foreground hover:bg-accent focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive",
 		className
 	)}
 	bind:value

package/dist/components/ui/textarea/textarea.svelte.d.ts

@@ -1,6 +1,6 @@
-export type TextareaProps = WithoutChildren<WithElementRef<HTMLTextareaAttributes>>;
-import type { WithElementRef, WithoutChildren } from "bits-ui";
 import type { HTMLTextareaAttributes } from "svelte/elements";
+import type { WithElementRef, WithoutChildren } from "bits-ui";
+export type TextareaProps = WithoutChildren<WithElementRef<HTMLTextareaAttributes>>;
 declare const Textarea: import("svelte").Component<Omit<WithElementRef<HTMLTextareaAttributes>, "children">, {}, "ref" | "value">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/dist/components/ui/toggle/toggle.svelte

@@ -1,18 +1,18 @@
+<!-- Figma: Toolbar toggle pattern (brand-subtle when on). -->
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import type { VariantProps } from "tailwind-variants";
 
 	export const toggleVariants = tv({
-		base: "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		base: "inline-flex items-center justify-center gap-2 rounded-lg text-label transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-brand-subtle data-[state=on]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333] hover:bg-accent",
 		variants: {
 			variant: {
-				default: "bg-transparent",
-				outline:
-					"border-input hover:bg-accent hover:text-accent-foreground border bg-transparent",
+				default: "bg-transparent text-foreground",
+				outline: "border border-input bg-background text-foreground hover:bg-accent",
 			},
 			size: {
-				default: "h-10 min-w-10 px-3",
-				sm: "h-9 min-w-9 px-2.5",
-				lg: "h-11 min-w-11 px-5",
+				default: "h-9 min-w-9 px-3",
+				sm: "h-8 min-w-8 px-2",
+				lg: "h-9 min-w-9 px-3",
 			},
 		},
 		defaultVariants: {
@@ -28,7 +28,7 @@
 
 <script lang="ts">
 	import { Toggle as TogglePrimitive } from "bits-ui";
-	import { cn } from "../../../utils.js";
+	import { cn, tv } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),

package/dist/components/ui/toggle/toggle.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from "tailwind-variants";
+import type { VariantProps } from "tailwind-variants";
 export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
@@ -9,15 +9,18 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
+}, undefined, "inline-flex items-center justify-center gap-2 rounded-lg text-label transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-brand-subtle data-[state=on]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333] hover:bg-accent", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        size?: boolean | (string | number | symbol)[] | undefined;
+        variant?: boolean | (string | number | symbol)[] | undefined;
+    } | undefined;
+} & import("tailwind-variants/dist/config.js").TWMConfig & {
+    twMergeConfig: {
+        classGroups: {
+            "font-size": {
+                text: ("display-hero" | "heading-page" | "heading-section" | "body" | "body-medium" | "body-large" | "caption" | "caption-medium" | "label" | "label-small" | "code")[];
+            }[];
+        };
     };
 }, {
     variant: {
@@ -29,16 +32,6 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}>, {
-    variant: {
-        default: string;
-        outline: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
@@ -49,7 +42,7 @@ export declare const toggleVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
     };
-}, undefined, "ring-offset-background hover:bg-muted hover:text-muted-foreground focus-visible:ring-ring data-[state=on]:bg-accent data-[state=on]:text-accent-foreground inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex items-center justify-center gap-2 rounded-lg text-label transition-colors duration-fast focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-brand-subtle data-[state=on]:text-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333] hover:bg-accent", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         outline: string;

package/dist/components/ui/tooltip/tooltip-content.svelte

@@ -24,7 +24,7 @@
 	{sideOffset}
 	dir={$textDirection}
 	class={cn(
-		"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
+		"bg-popover text-popover-foreground border-border text-caption animate-in fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-lg border px-3 py-1.5",
 		className
 	)}
 	{...restProps}