@widgetic/design-system 0.5.22 → 0.5.23

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

@@ -1,6 +1,6 @@
 import type { WithElementRef } from "bits-ui";
 import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-import { type VariantProps } from "tailwind-variants";
+import type { VariantProps } from "tailwind-variants";
 export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
@@ -8,6 +8,8 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         secondary: string;
         ghost: string;
+        accent: string;
+        stroke: string;
         link: string;
     };
     size: {
@@ -15,21 +17,25 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
         icon: string;
+        "icon-sm": string;
     };
-}, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap 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;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
+    iconPadding: {
+        true: string;
+        false: string;
     };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+}, undefined, "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg text-label 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]", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        size?: boolean | (string | number | symbol)[] | undefined;
+        variant?: boolean | (string | number | symbol)[] | undefined;
+        iconPadding?: 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: {
@@ -38,6 +44,8 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         secondary: string;
         ghost: string;
+        accent: string;
+        stroke: string;
         link: string;
     };
     size: {
@@ -45,21 +53,11 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
         icon: string;
+        "icon-sm": string;
     };
-}>, {
-    variant: {
-        default: string;
-        destructive: string;
-        outline: string;
-        secondary: string;
-        ghost: string;
-        link: string;
-    };
-    size: {
-        default: string;
-        sm: string;
-        lg: string;
-        icon: string;
+    iconPadding: {
+        true: string;
+        false: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
@@ -68,6 +66,8 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         secondary: string;
         ghost: string;
+        accent: string;
+        stroke: string;
         link: string;
     };
     size: {
@@ -75,14 +75,21 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
         icon: string;
+        "icon-sm": string;
     };
-}, undefined, "ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center gap-2 whitespace-nowrap 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<{
+    iconPadding: {
+        true: string;
+        false: string;
+    };
+}, undefined, "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-lg text-label 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]", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;
         outline: string;
         secondary: string;
         ghost: string;
+        accent: string;
+        stroke: string;
         link: string;
     };
     size: {
@@ -90,6 +97,11 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
         icon: string;
+        "icon-sm": string;
+    };
+    iconPadding: {
+        true: string;
+        false: string;
     };
 }, {
     variant: {
@@ -98,6 +110,8 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         outline: string;
         secondary: string;
         ghost: string;
+        accent: string;
+        stroke: string;
         link: string;
     };
     size: {
@@ -105,6 +119,11 @@ export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
         sm: string;
         lg: string;
         icon: string;
+        "icon-sm": string;
+    };
+    iconPadding: {
+        true: string;
+        false: string;
     };
 }>, unknown, unknown, undefined>>;
 export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];

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

@@ -16,7 +16,7 @@
 <CalendarPrimitive.Cell
 	bind:ref
 	class={cn(
-		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md",
+		"[&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-month])]:bg-accent/50 relative size-9 p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-lg",
 		className
 	)}
 	{...restProps}

package/dist/components/ui/calendar/calendar-head-cell.svelte

@@ -15,6 +15,6 @@
 
 <CalendarPrimitive.HeadCell
 	bind:ref
-	class={cn("text-muted-foreground w-9 rounded-md text-[0.8rem] font-normal", className)}
+	class={cn("text-caption text-muted-foreground w-9 rounded-lg font-normal", className)}
 	{...restProps}
 />

package/dist/components/ui/calendar/calendar-next-button.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <script lang="ts">
-		import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import IconChevronRight from "@tabler/icons-svelte/icons/chevron-right";
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
@@ -25,7 +25,7 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronRight class="size-4 rtl:-scale-x-100" />
+	<IconChevronRight class="size-4 stroke-[1.333] rtl:-scale-x-100" />
 {/snippet}
 
 <CalendarPrimitive.NextButton

package/dist/components/ui/calendar/calendar-prev-button.svelte

@@ -11,7 +11,7 @@
 </script>
 
 <script lang="ts">
-		import ChevronLeft from "lucide-svelte/icons/chevron-left";
+	import IconChevronLeft from "@tabler/icons-svelte/icons/chevron-left";
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
@@ -25,7 +25,7 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeft class="size-4 rtl:-scale-x-100" />
+	<IconChevronLeft class="size-4 stroke-[1.333] rtl:-scale-x-100" />
 {/snippet}
 
 <CalendarPrimitive.PrevButton

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

@@ -16,6 +16,6 @@
 	}: CardDescriptionProps = $props();
 </script>
 
-<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+<p bind:this={ref} class={cn("text-body text-muted-foreground", className)} {...restProps}>
 	{@render children?.()}
 </p>

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

@@ -18,7 +18,7 @@
 	role="heading"
 	aria-level={level}
 	bind:this={ref}
-	class={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+	class={cn("text-heading-section", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/card/card.svelte

@@ -18,7 +18,7 @@
 
 <div
 	bind:this={ref}
-	class={cn("bg-card text-card-foreground rounded-lg border shadow-2xs", className)}
+	class={cn("bg-card text-card-foreground border-border rounded-card border", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/checkbox/checkbox.svelte

@@ -1,11 +1,12 @@
+<!-- Figma: Checkbox (component set 170:73, node 170:73). -->
 <script lang="ts" module>
 	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
 	export type CheckboxProps = WithoutChildrenOrChild<CheckboxPrimitive.RootProps>;
 </script>
 
 <script lang="ts">
-		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";
 
 	let {
@@ -20,7 +21,7 @@
 <CheckboxPrimitive.Root
 	bind:ref
 	class={cn(
-		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		"peer flex size-4 shrink-0 items-center justify-center rounded-sm border border-input bg-background text-primary-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 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=indeterminate]:border-primary data-[state=indeterminate]:bg-primary",
 		className
 	)}
 	bind:checked
@@ -30,9 +31,12 @@
 	{#snippet children({ checked, indeterminate })}
 		<div class="flex size-4 items-center justify-center text-current">
 			{#if indeterminate}
-				<Minus class="size-3.5" />
+				<IconMinus class="size-3.5 stroke-[1.333]" aria-hidden="true" />
 			{:else}
-				<Check class={cn("size-3.5", !checked && "text-transparent")} />
+				<IconCheck
+					class={cn("size-3.5 stroke-[1.333]", !checked && "text-transparent")}
+					aria-hidden="true"
+				/>
 			{/if}
 		</div>
 	{/snippet}

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}
 />