@widgetic/design-system 0.5.21 → 0.5.23

package/dist/components/ui/chip/chip.svelte

@@ -0,0 +1,48 @@
+<!-- Figma: Chip (component set 65:4, node 65:2). -->
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import IconX from "@tabler/icons-svelte/icons/x";
+	import { cn } from "../../../utils.js";
+
+	let {
+		class: className,
+		label,
+		showRemove = false,
+		removeLabel = "Remove",
+		disabled = false,
+		onRemove = undefined,
+		leading,
+	}: HTMLAttributes<HTMLDivElement> & {
+		label: string;
+		showRemove?: boolean;
+		removeLabel?: string;
+		disabled?: boolean;
+		onRemove?: () => void;
+		leading?: Snippet;
+	} = $props();
+</script>
+
+<div
+	class={cn(
+		"inline-flex h-7 max-w-full items-center gap-1.5 rounded-lg border border-border bg-transparent px-2 text-label-small text-foreground transition-colors duration-fast",
+		disabled ? "pointer-events-none opacity-50" : "hover:bg-accent",
+		className
+	)}
+>
+	{#if leading}
+		<span class="flex shrink-0 items-center">{@render leading()}</span>
+	{/if}
+	<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}
+</div>

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

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

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

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

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

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

package/dist/components/ui/command/command-dialog.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <Dialog.Root bind:open {...restProps}>
-	<Dialog.Content class="overflow-hidden p-0 shadow-lg" {portalProps}>
+	<Dialog.Content class="overflow-hidden p-0" {portalProps}>
 		<Command
 			class="[&_[data-command-group]:not([hidden])_~[data-command-group]]:pt-0 **:data-command-group:px-2 [&_[data-command-input-wrapper]_svg]:h-5 [&_[data-command-input-wrapper]_svg]:w-5 **:data-command-input:h-12 **:data-command-item:px-2 **:data-command-item:py-3 [&_[data-command-item]_svg]:h-5 [&_[data-command-item]_svg]:w-5"
 			{...restProps}

package/dist/components/ui/command/command-input.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-		import Search from "lucide-svelte/icons/search";
+	import IconSearch from "@tabler/icons-svelte/icons/search";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -15,11 +15,11 @@
 	}: CommandInputProps = $props();
 </script>
 
-<div class="flex items-center border-b px-2" data-command-input-wrapper="">
-	<Search class="me-2 size-4 shrink-0 opacity-50" />
+<div class="border-border flex items-center border-b px-2" data-command-input-wrapper="">
+	<IconSearch class="text-muted-foreground me-2 size-4 shrink-0 stroke-[1.333]" />
 	<CommandPrimitive.Input
 		class={cn(
-			"placeholder:text-muted-foreground flex h-11 w-full rounded-md bg-transparent py-3 text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+			"text-body placeholder:text-muted-foreground flex h-9 w-full bg-transparent py-2 outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
 		bind:ref

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

@@ -15,7 +15,7 @@
 
 <CommandPrimitive.Item
 	class={cn(
-		"aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		"text-body aria-selected:bg-accent aria-selected:text-foreground relative flex h-8 cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
 		className
 	)}
 	bind:ref

package/dist/components/ui/command/command.svelte

@@ -16,7 +16,7 @@
 
 <CommandPrimitive.Root
 	class={cn(
-		"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+		"bg-popover text-popover-foreground border-border flex h-full w-full flex-col overflow-hidden rounded-xl border",
 		className
 	)}
 	bind:value

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

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import X from "lucide-svelte/icons/x";
+	import IconX from "@tabler/icons-svelte/icons/x";
 	import type { Snippet } from "svelte";
 	import * as Dialog from "./index.js";
 	import { cn } from "../../../utils.js";
@@ -25,16 +25,16 @@
 	<DialogPrimitive.Content
 		bind:ref
 		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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] bg-background fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-background border-border fixed start-1/2 top-1/2 z-50 grid w-dialog max-w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-panel border p-6 duration-base",
 			className
 		)}
 		{...restProps}
 	>
 		{@render children?.()}
 		<DialogPrimitive.Close
-			class="ring-offset-background focus:ring-ring absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+			class="text-foreground hover:bg-accent absolute end-4 top-4 inline-flex size-8 items-center justify-center rounded-lg 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"
 		>
-			<X class="size-4" />
+			<IconX class="size-4 stroke-[1.333]" />
 			<span class="sr-only">{closeLabel}</span>
 		</DialogPrimitive.Close>
 	</DialogPrimitive.Content>

package/dist/components/ui/dialog/dialog-description.svelte

@@ -15,6 +15,6 @@
 
 <DialogPrimitive.Description
 	bind:ref
-	class={cn("text-muted-foreground text-sm", className)}
+	class={cn("text-body text-muted-foreground", className)}
 	{...restProps}
 />

package/dist/components/ui/dialog/dialog-overlay.svelte

@@ -16,7 +16,7 @@
 <DialogPrimitive.Overlay
 	bind:ref
 	class={cn(
-		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dialog/dialog-title.svelte

@@ -15,6 +15,6 @@
 
 <DialogPrimitive.Title
 	bind:ref
-	class={cn("text-lg font-semibold leading-none tracking-tight", className)}
+	class={cn("text-heading-page", className)}
 	{...restProps}
 />

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

@@ -19,7 +19,7 @@
 	<DrawerPrimitive.Content
 		bind:ref
 		class={cn(
-			"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
+			"bg-background border-border fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-xl border",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/drawer/drawer-overlay.svelte

@@ -15,6 +15,6 @@
 
 <DrawerPrimitive.Overlay
 	bind:ref
-	class={cn("fixed inset-0 z-50 bg-black/80", className)}
+	class={cn("fixed inset-0 z-50 bg-foreground/40 backdrop-blur-sm", className)}
 	{...restProps}
 />

package/dist/components/ui/dropdown-menu/dropdown-menu-checkbox-item.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import Check from "lucide-svelte/icons/check";
-	import Minus from "lucide-svelte/icons/minus";
+	import IconCheck from "@tabler/icons-svelte/icons/check";
+	import IconMinus from "@tabler/icons-svelte/icons/minus";
 	import { cn } from "../../../utils.js";
 	import type { Snippet } from "svelte";
 
@@ -22,7 +22,7 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex 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",
+		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex h-8 cursor-default select-none items-center rounded-lg py-1.5 ps-8 pe-2 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}
@@ -30,9 +30,9 @@
 	{#snippet children({ checked, indeterminate })}
 		<span class="absolute start-2 flex size-3.5 items-center justify-center">
 			{#if indeterminate}
-				<Minus class="size-4" />
+				<IconMinus class="size-4 stroke-[1.333]" />
 			{:else}
-				<Check class={cn("size-4", !checked && "text-transparent")} />
+				<IconCheck class={cn("size-4 stroke-[1.333]", !checked && "text-transparent")} />
 			{/if}
 		</span>
 		{@render childrenProp?.()}

package/dist/components/ui/dropdown-menu/dropdown-menu-content.svelte

@@ -24,7 +24,7 @@
 		{sideOffset}
 		dir={$textDirection}
 		class={cn(
-			"bg-popover text-popover-foreground 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 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md outline-hidden",
+			"bg-popover text-popover-foreground border-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-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 min-w-[8rem] overflow-hidden rounded-xl border p-1 outline-hidden",
 			className
 		)}
 		{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-group-heading.svelte

@@ -14,6 +14,6 @@
 
 <DropdownMenuPrimitive.GroupHeading
 	bind:ref
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "ps-8", className)}
+	class={cn("text-caption-medium text-muted-foreground px-2 pb-1 pt-1.5", inset && "ps-8", className)}
 	{...restProps}
 />

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte

@@ -6,18 +6,36 @@
 		ref = $bindable(null),
 		class: className,
 		inset,
+		description,
+		label,
+		children,
 		...restProps
 	}: DropdownMenuPrimitive.ItemProps & {
 		inset?: boolean;
+		/** Second line (Menu Item with description — 48px row). */
+		description?: string;
+		/** Primary line when `description` is set (icons stay in the default slot). */
+		label?: string;
 	} = $props();
 </script>
 
 <DropdownMenuPrimitive.Item
 	bind:ref
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333] data-[variant=destructive]:text-destructive data-highlighted:data-[variant=destructive]:text-destructive",
+		description ? "min-h-12" : "min-h-8",
 		inset && "ps-8",
 		className
 	)}
 	{...restProps}
-/>
+>
+	{#if description && label}
+		{@render children?.()}
+		<div class="flex min-w-0 flex-1 flex-col gap-0">
+			<span class="text-body truncate">{label}</span>
+			<span class="text-caption text-muted-foreground truncate">{description}</span>
+		</div>
+	{:else}
+		{@render children?.()}
+	{/if}
+</DropdownMenuPrimitive.Item>

package/dist/components/ui/dropdown-menu/dropdown-menu-item.svelte.d.ts

@@ -1,6 +1,10 @@
 import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
 type $$ComponentProps = DropdownMenuPrimitive.ItemProps & {
     inset?: boolean;
+    /** Second line (Menu Item with description — 48px row). */
+    description?: string;
+    /** Primary line when `description` is set (icons stay in the default slot). */
+    label?: string;
 };
 declare const DropdownMenuItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type DropdownMenuItem = ReturnType<typeof DropdownMenuItem>;

package/dist/components/ui/dropdown-menu/dropdown-menu-label.svelte

@@ -16,7 +16,11 @@
 
 <div
 	bind:this={ref}
-	class={cn("px-2 py-1.5 text-sm font-semibold", inset && "ps-8", className)}
+	class={cn(
+		"text-caption-medium text-muted-foreground px-2 pb-1 pt-1.5",
+		inset && "ps-8",
+		className
+	)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/dropdown-menu/dropdown-menu-radio-item.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-		import Circle from "lucide-svelte/icons/circle";
+	import IconCircleFilled from "@tabler/icons-svelte/icons/circle-filled";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -18,7 +18,7 @@
 <DropdownMenuPrimitive.RadioItem
 	bind:ref
 	class={cn(
-		"data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex 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",
+		"text-body data-highlighted:bg-accent data-highlighted:text-foreground relative flex h-8 cursor-default select-none items-center rounded-lg py-1.5 ps-8 pe-2 outline-hidden transition-colors duration-fast data-disabled:pointer-events-none data-disabled:opacity-50",
 		className
 	)}
 	{...restProps}
@@ -26,7 +26,7 @@
 	{#snippet children({ checked })}
 		<span class="absolute start-2 flex size-3.5 items-center justify-center">
 			{#if checked}
-				<Circle class="size-2 fill-current" />
+				<IconCircleFilled class="size-2 stroke-[1.333]" />
 			{/if}
 		</span>
 		{@render childrenProp?.({ checked })}

package/dist/components/ui/dropdown-menu/dropdown-menu-separator.svelte

@@ -13,8 +13,9 @@
 	}: DropdownMenuSeparatorProps = $props();
 </script>
 
+<!-- Figma Menu Separator (9px tall): a 1px line with 4px above and below. (py-1 on the line itself drew an 8px band.) -->
 <DropdownMenuPrimitive.Separator
 	bind:ref
-	class={cn("bg-muted -mx-1 my-1 h-px", className)}
+	class={cn("bg-border my-1 h-px", className)}
 	{...restProps}
 />

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-content.svelte

@@ -22,7 +22,7 @@
 	bind:ref
 	dir={$textDirection}
 	class={cn(
-		"bg-popover text-popover-foreground z-50 min-w-[8rem] rounded-md border p-1 shadow-lg focus:outline-hidden",
+		"bg-popover text-popover-foreground border-border z-50 min-w-[8rem] rounded-xl border p-1 focus:outline-hidden",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/dropdown-menu/dropdown-menu-sub-trigger.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu as DropdownMenuPrimitive } from "bits-ui";
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import IconChevronRight from "@tabler/icons-svelte/icons/chevron-right";
 	import { cn } from "../../../utils.js";
 
 	let {
@@ -17,12 +17,12 @@
 <DropdownMenuPrimitive.SubTrigger
 	bind:ref
 	class={cn(
-		"data-highlighted:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+		"text-body data-highlighted:bg-accent data-[state=open]:bg-accent flex h-8 cursor-default select-none items-center gap-2 rounded-lg px-2 py-1.5 outline-hidden transition-colors duration-fast [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
 		inset && "ps-8",
 		className
 	)}
 	{...restProps}
 >
 	{@render children?.()}
-	<ChevronRight class="ms-auto rtl:-scale-x-100" />
+	<IconChevronRight class="ms-auto stroke-[1.333] rtl:-scale-x-100" />
 </DropdownMenuPrimitive.SubTrigger>

package/dist/components/ui/field/field-ids.d.ts

@@ -0,0 +1,7 @@
+export type FieldIds = {
+    controlId: string;
+    descriptionId: string;
+    errorId: string;
+};
+export declare function createFieldIds(baseId: string): FieldIds;
+export declare function fieldDescribedBy(hasDescription: boolean, hasError: boolean, ids: FieldIds): string | undefined;

package/dist/components/ui/field/field-ids.js

@@ -0,0 +1,15 @@
+export function createFieldIds(baseId) {
+    return {
+        controlId: `${baseId}-control`,
+        descriptionId: `${baseId}-description`,
+        errorId: `${baseId}-error`,
+    };
+}
+export function fieldDescribedBy(hasDescription, hasError, ids) {
+    const parts = [];
+    if (hasDescription)
+        parts.push(ids.descriptionId);
+    if (hasError)
+        parts.push(ids.errorId);
+    return parts.length > 0 ? parts.join(" ") : undefined;
+}

package/dist/components/ui/field/field.svelte

@@ -0,0 +1,62 @@
+<!-- Figma: Field (component set 105:27, node 105:2). -->
+<script lang="ts" module>
+	let fieldAutoId = 0;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+	import { Label } from "../label/index.js";
+	import { createFieldIds, fieldDescribedBy } from "./field-ids.js";
+
+	let {
+		class: className,
+		label,
+		description = undefined,
+		error = undefined,
+		required = false,
+		id: idProp = undefined,
+		control,
+	}: {
+		class?: string;
+		label: string;
+		description?: string;
+		error?: string;
+		required?: boolean;
+		id?: string;
+		control: Snippet<
+			[
+				{
+					id: string;
+					describedBy: string | undefined;
+					invalid: boolean;
+					"aria-describedby": string | undefined;
+					"aria-invalid": boolean;
+				},
+			]
+		>;
+	} = $props();
+
+	const resolvedId = idProp ?? `field-${++fieldAutoId}`;
+	const ids = createFieldIds(resolvedId);
+	const invalid = $derived(Boolean(error));
+	const describedBy = $derived(fieldDescribedBy(Boolean(description), invalid, ids));
+</script>
+
+<div class={cn("flex w-full flex-col gap-1.5", className)}>
+	<Label for={ids.controlId} class="text-body-medium">
+		{label}{#if required}<span class="text-destructive" aria-hidden="true"> *</span>{/if}
+	</Label>
+	{@render control({
+		id: ids.controlId,
+		describedBy,
+		invalid,
+		"aria-describedby": describedBy,
+		"aria-invalid": invalid,
+	})}
+	{#if error}
+		<p id={ids.errorId} class="text-caption text-destructive" role="alert">{error}</p>
+	{:else if description}
+		<p id={ids.descriptionId} class="text-caption text-muted-foreground">{description}</p>
+	{/if}
+</div>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    label: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    id?: string;
+    control: Snippet<[
+        {
+            id: string;
+            describedBy: string | undefined;
+            invalid: boolean;
+            "aria-describedby": string | undefined;
+            "aria-invalid": boolean;
+        }
+    ]>;
+};
+declare const Field: import("svelte").Component<$$ComponentProps, {}, "">;
+type Field = ReturnType<typeof Field>;
+export default Field;

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

@@ -0,0 +1,3 @@
+import Root from "./field.svelte";
+export { createFieldIds, fieldDescribedBy, type FieldIds } from "./field-ids.js";
+export { Root, Root as Field };

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

@@ -0,0 +1,3 @@
+import Root from "./field.svelte";
+export { createFieldIds, fieldDescribedBy } from "./field-ids.js";
+export { Root, Root as Field };

package/dist/components/ui/hover-card/hover-card-content.svelte

@@ -26,7 +26,7 @@
 		{sideOffset}
 		dir={$textDirection}
 		class={cn(
-			"bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-hidden",
+			"bg-popover text-popover-foreground border-border z-50 mt-3 w-64 rounded-xl border p-4 outline-hidden",
 			className
 		)}
 		{...restProps}

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

@@ -0,0 +1,72 @@
+<!--
+	Figma: Icon Button (component set 37:3, page Icon Button)
+	With bits-ui triggers, use `{#snippet child({ props })}` and spread `props` onto this button.
+-->
+<script lang="ts" module>
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import type { VariantProps } from "tailwind-variants";
+
+	export const iconButtonVariants = tv({
+		base: "inline-flex shrink-0 items-center justify-center transition-colors duration-fast press-feedback 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:stroke-[1.333]",
+		variants: {
+			variant: {
+				ghost:
+					"rounded-lg text-foreground hover:bg-accent hover:text-foreground",
+				secondary:
+					"rounded-lg bg-secondary text-secondary-foreground hover:bg-accent hover:text-foreground",
+				outline:
+					"rounded-lg border border-input bg-background text-foreground hover:bg-accent hover:text-foreground",
+				primary:
+					"rounded-full bg-primary text-primary-foreground hover:bg-primary/90",
+				accent:
+					"rounded-full bg-brand text-brand-foreground hover:bg-brand/90",
+			},
+			size: {
+				default: "size-8",
+				sm: "size-7",
+			},
+		},
+		defaultVariants: {
+			variant: "ghost",
+			size: "default",
+		},
+	});
+
+	export type IconButtonVariant = VariantProps<typeof iconButtonVariants>["variant"];
+	export type IconButtonSize = VariantProps<typeof iconButtonVariants>["size"];
+
+	export type IconButtonProps = WithElementRef<HTMLButtonAttributes> & {
+		ref?: HTMLButtonElement | null;
+		class?: string;
+		variant?: IconButtonVariant;
+		size?: IconButtonSize;
+		/** Required for accessibility (aria-label). */
+		label: string;
+	};
+</script>
+
+<script lang="ts">
+	import { cn, tv } from "../../../utils.js";
+
+	let {
+		class: className,
+		variant = "ghost",
+		size = "default",
+		label,
+		ref = $bindable(null),
+		type = "button",
+		children,
+		...restProps
+	}: IconButtonProps = $props();
+</script>
+
+<button
+	bind:this={ref}
+	type={type}
+	aria-label={label}
+	class={cn(iconButtonVariants({ variant, size, className }))}
+	{...restProps}
+>
+	{@render children?.()}
+</button>