@widgetic/design-system 0.5.22 → 0.5.23

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

@@ -14,7 +14,8 @@
 
 <svelte:element
 	this={level}
-	class={cn("mb-1 font-medium leading-none tracking-tight", className)}
+	data-slot="alert-title"
+	class={cn("text-body-medium", className)}
 	{...$$restProps}
 >
 	<slot />

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from "tailwind-variants";
+import type { VariantProps } from "tailwind-variants";
 import Root from "./alert.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
@@ -7,27 +7,29 @@ export declare const alertVariants: import("tailwind-variants").TVReturnType<{
         default: string;
         destructive: string;
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:ps-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        destructive: string;
+}, undefined, "relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:col-start-2 [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:col-start-2 [&_[data-slot=alert-description]]:row-start-2", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        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: {
         default: string;
         destructive: string;
     };
-}>, {
-    variant: {
-        default: string;
-        destructive: string;
-    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
         destructive: string;
     };
-}, undefined, "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:ps-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:col-start-2 [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:col-start-2 [&_[data-slot=alert-description]]:row-start-2", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         destructive: string;

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

@@ -1,13 +1,13 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../../utils.js";
 import Root from "./alert.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
 export const alertVariants = tv({
-    base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&:has(svg)]:ps-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4",
+    base: "relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-xl border border-border bg-background p-3 pe-4 ps-4 text-foreground [&>svg]:col-start-1 [&>svg]:row-start-1 [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:stroke-[1.333] [&_[data-slot=alert-title]]:col-start-2 [&_[data-slot=alert-title]]:row-start-1 [&_[data-slot=alert-description]]:col-start-2 [&_[data-slot=alert-description]]:row-start-2",
     variants: {
         variant: {
-            default: "bg-background text-foreground",
-            destructive: "border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive",
+            default: "text-foreground [&>svg]:text-foreground",
+            destructive: "[&>svg]:text-destructive [&_[data-slot=alert-title]]:text-destructive [&_[data-slot=alert-description]]:text-destructive/90",
         },
     },
     defaultVariants: {

package/dist/components/ui/avatar/avatar-utils.d.ts

@@ -0,0 +1,2 @@
+/** Derive one or two letter initials from a display name (Figma Avatar / Type=Initials). */
+export declare function avatarInitials(name: string): string;

package/dist/components/ui/avatar/avatar-utils.js

@@ -0,0 +1,9 @@
+/** Derive one or two letter initials from a display name (Figma Avatar / Type=Initials). */
+export function avatarInitials(name) {
+    const parts = name.trim().split(/\s+/).filter(Boolean);
+    if (parts.length === 0)
+        return "?";
+    if (parts.length === 1)
+        return parts[0].slice(0, 2).toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}

package/dist/components/ui/avatar/avatar.svelte

@@ -0,0 +1,63 @@
+<!-- Figma: Avatar (component set 50:17, node 50:3). -->
+<script lang="ts" module>
+	import type { VariantProps } from "tailwind-variants";
+
+	export const avatarVariants = tv({
+		base: "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-brand-subtle text-brand-foreground",
+		variants: {
+			size: {
+				sm: "size-6 text-caption-medium",
+				default: "size-8 text-caption-medium",
+				lg: "size-10 text-label-small",
+			},
+			type: {
+				initials: "bg-brand-subtle text-brand-foreground",
+				icon: "bg-muted text-foreground",
+			},
+		},
+		defaultVariants: {
+			size: "sm",
+			type: "initials",
+		},
+	});
+
+	export type AvatarSize = VariantProps<typeof avatarVariants>["size"];
+	export type AvatarType = VariantProps<typeof avatarVariants>["type"];
+</script>
+
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { Snippet } from "svelte";
+	import { cn, tv } from "../../../utils.js";
+	import { avatarInitials } from "./avatar-utils.js";
+
+	let {
+		class: className,
+		size = "sm",
+		type = "initials",
+		src = undefined,
+		alt = "",
+		name = "",
+		icon,
+		...restProps
+	}: HTMLAttributes<HTMLSpanElement> & {
+		size?: AvatarSize;
+		type?: AvatarType;
+		src?: string;
+		alt?: string;
+		name?: string;
+		icon?: Snippet;
+	} = $props();
+
+	const initials = $derived(avatarInitials(name || alt));
+</script>
+
+<span class={cn(avatarVariants({ size, type }), className)} {...restProps}>
+	{#if src}
+		<img {src} {alt} class="size-full object-cover" />
+	{:else if type === "icon" && icon}
+		<span class="flex items-center justify-center">{@render icon()}</span>
+	{:else}
+		<span aria-hidden="true">{initials}</span>
+	{/if}
+</span>

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

@@ -0,0 +1,80 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const avatarVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    type: {
+        initials: string;
+        icon: string;
+    };
+}, undefined, "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-brand-subtle text-brand-foreground", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        size?: boolean | (string | number | symbol)[] | undefined;
+        type?: 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")[];
+            }[];
+        };
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    type: {
+        initials: string;
+        icon: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    type: {
+        initials: string;
+        icon: string;
+    };
+}, undefined, "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-brand-subtle text-brand-foreground", import("tailwind-variants/dist/config.js").TVConfig<{
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    type: {
+        initials: string;
+        icon: string;
+    };
+}, {
+    size: {
+        sm: string;
+        default: string;
+        lg: string;
+    };
+    type: {
+        initials: string;
+        icon: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type AvatarSize = VariantProps<typeof avatarVariants>["size"];
+export type AvatarType = VariantProps<typeof avatarVariants>["type"];
+import type { HTMLAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+type $$ComponentProps = HTMLAttributes<HTMLSpanElement> & {
+    size?: AvatarSize;
+    type?: AvatarType;
+    src?: string;
+    alt?: string;
+    name?: string;
+    icon?: Snippet;
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

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

@@ -0,0 +1,4 @@
+import Root from "./avatar.svelte";
+export { avatarInitials } from "./avatar-utils.js";
+export { avatarVariants, type AvatarSize } from "./avatar.svelte";
+export { Root, Root as Avatar };

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

@@ -0,0 +1,4 @@
+import Root from "./avatar.svelte";
+export { avatarInitials } from "./avatar-utils.js";
+export { avatarVariants } from "./avatar.svelte";
+export { Root, Root as Avatar };

package/dist/components/ui/badge/badge.svelte

@@ -1,17 +1,15 @@
+<!-- Figma: Badge (component set 50:4, node 50:2). -->
 <script lang="ts" module>
-	import { type VariantProps, tv } from "tailwind-variants";
+	import type { VariantProps } from "tailwind-variants";
 
 	export const badgeVariants = tv({
-		base: "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2",
+		base: "inline-flex h-5 max-w-full items-center gap-1.5 rounded-full border border-transparent px-2 text-label-small focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
 		variants: {
 			variant: {
-				default:
-					"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
-				secondary:
-					"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
-				destructive:
-					"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
-				outline: "text-foreground",
+				default: "bg-secondary text-secondary-foreground",
+				secondary: "bg-brand-subtle text-brand-foreground",
+				destructive: "bg-destructive text-destructive-foreground",
+				outline: "border-border bg-transparent text-foreground",
 			},
 		},
 		defaultVariants: {
@@ -25,17 +23,19 @@
 <script lang="ts">
 	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAnchorAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, tv } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		href,
 		class: className,
 		variant = "default",
+		showDot = false,
 		children,
 		...restProps
 	}: WithElementRef<HTMLAnchorAttributes> & {
 		variant?: BadgeVariant;
+		showDot?: boolean;
 	} = $props();
 </script>
 
@@ -46,5 +46,17 @@
 	class={cn(badgeVariants({ variant }), className)}
 	{...restProps}
 >
+	{#if showDot}
+		<span
+			class={cn(
+				"size-1.5 shrink-0 rounded-full bg-current",
+				variant === "default" && "bg-secondary-foreground",
+				variant === "secondary" && "bg-brand-foreground",
+				variant === "destructive" && "bg-destructive-foreground",
+				variant === "outline" && "bg-foreground"
+			)}
+			aria-hidden="true"
+		></span>
+	{/if}
 	{@render children?.()}
 </svelte:element>

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from "tailwind-variants";
+import type { VariantProps } from "tailwind-variants";
 export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
@@ -6,12 +6,17 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config.js").TVConfig<{
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
+}, undefined, "inline-flex h-5 max-w-full items-center gap-1.5 rounded-full border border-transparent px-2 text-label-small focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", {
+    responsiveVariants?: boolean | (string | number | symbol)[] | {
+        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: {
@@ -20,13 +25,6 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}>, {
-    variant: {
-        default: string;
-        secondary: string;
-        destructive: string;
-        outline: string;
-    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         default: string;
@@ -34,7 +32,7 @@ export declare const badgeVariants: import("tailwind-variants").TVReturnType<{
         destructive: string;
         outline: string;
     };
-}, undefined, "focus:ring-ring inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-offset-2", import("tailwind-variants/dist/config.js").TVConfig<{
+}, undefined, "inline-flex h-5 max-w-full items-center gap-1.5 rounded-full border border-transparent px-2 text-label-small focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", import("tailwind-variants/dist/config.js").TVConfig<{
     variant: {
         default: string;
         secondary: string;
@@ -54,6 +52,7 @@ import type { WithElementRef } from "bits-ui";
 import type { HTMLAnchorAttributes } from "svelte/elements";
 type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
     variant?: BadgeVariant;
+    showDot?: boolean;
 };
 declare const Badge: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Badge = ReturnType<typeof Badge>;

package/dist/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-	import Ellipsis from "lucide-svelte/icons/ellipsis";
+	import IconDots from "@tabler/icons-svelte/icons/dots";
 	import type { WithElementRef, WithoutChildren } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
@@ -23,6 +23,6 @@
 	class={cn("flex size-9 items-center justify-center", className)}
 	{...restProps}
 >
-	<Ellipsis class="size-4" />
+	<IconDots class="size-4 stroke-[1.333]" />
 	<span class="sr-only">More</span>
 </span>

package/dist/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -16,7 +16,7 @@
 	} = $props();
 
 	const attrs = $derived({
-		class: cn("hover:text-foreground transition-colors", className),
+		class: cn("text-caption-medium text-muted-foreground hover:text-foreground transition-colors duration-fast", className),
 		href,
 		...restProps,
 	});

package/dist/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -21,7 +21,7 @@
 	role="link"
 	aria-disabled="true"
 	aria-current="page"
-	class={cn("text-foreground font-normal", className)}
+	class={cn("text-caption-medium text-foreground", className)}
 	{...restProps}
 >
 	{@render children?.()}

package/dist/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -4,7 +4,7 @@
 </script>
 
 <script lang="ts">
-	import ChevronRight from "lucide-svelte/icons/chevron-right";
+	import IconChevronRight from "@tabler/icons-svelte/icons/chevron-right";
 	import type { WithElementRef } from "bits-ui";
 	import type { HTMLLiAttributes } from "svelte/elements";
 	import { cn } from "../../../utils.js";
@@ -27,6 +27,6 @@
 	{#if children}
 		{@render children?.()}
 	{:else}
-		<ChevronRight class="rtl:-scale-x-100" />
+		<IconChevronRight class="stroke-[1.333] rtl:-scale-x-100" />
 	{/if}
 </li>

package/dist/components/ui/button/button-padding.d.ts

@@ -0,0 +1,9 @@
+/**
+ * True when a `class` string sets the padding of a side: `p-0`, `px-2`, `ps-4`, `pr-1`, also with a modifier in front
+ * (`!px-3`, `md:px-2`, `[&_svg]:p-0`) or behind it (`px-3!`).
+ *
+ * The Button reads this to leave its icon rule out (Figma pads the icon side by 12 and the label side by 16, see the note
+ * at the top of `button.svelte`): a caller that has chosen the sides itself, like an icon-only button with `p-0`, would
+ * otherwise get one of them changed by a rule it knows nothing about.
+ */
+export declare function classNameSetsPadding(className: string | null | undefined): boolean;

package/dist/components/ui/button/button-padding.js

@@ -0,0 +1,15 @@
+/**
+ * True when a `class` string sets the padding of a side: `p-0`, `px-2`, `ps-4`, `pr-1`, also with a modifier in front
+ * (`!px-3`, `md:px-2`, `[&_svg]:p-0`) or behind it (`px-3!`).
+ *
+ * The Button reads this to leave its icon rule out (Figma pads the icon side by 12 and the label side by 16, see the note
+ * at the top of `button.svelte`): a caller that has chosen the sides itself, like an icon-only button with `p-0`, would
+ * otherwise get one of them changed by a rule it knows nothing about.
+ */
+export function classNameSetsPadding(className) {
+    if (!className)
+        return false;
+    // The utility has to start a class name (`px-` in `placeholder-x` or `peer-x` is not a padding): at the start, after a
+    // space or after the `:` of a modifier. The hyphen after the letters is what tells `pl-` from `placeholder`.
+    return /(^|[\s:])!?-?(?:p|px|ps|pe|pl|pr)-/.test(className);
+}

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

@@ -1,48 +1,102 @@
+<!--
+	Figma: Button (component set 33:4, page Button); Button Small (33:215) maps to size `sm`.
+	Width: the button pads its sides by 12 (small: 8) and the label sits in a box with 4 more on each side, so a button with
+	only a label is the text + 32 wide (small: + 24). With an icon first it is the text + 48 (small: + 40): the icon touches
+	the 12 and the label keeps its 4 + 12 on the other side; with an icon at each end both sides are 12 (text + 64).
+	The 1px stroke of Outline and Stroke sits inside that padding and takes no room in Figma.
+	With bits-ui triggers (Dialog, DropdownMenu, Tooltip, …), use `{#snippet child({ props })}` and spread
+	`props` onto `<Button {...props}>` — do not wrap `<Button>` inside a default trigger (nested buttons).
+-->
 <script lang="ts" module>
 	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAnchorAttributes, HTMLButtonAttributes } from "svelte/elements";
-	import { type VariantProps, tv } from "tailwind-variants";
+	import type { VariantProps } from "tailwind-variants";
 
 	export const buttonVariants = tv({
-		base: "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",
+		base: "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]",
 		variants: {
 			variant: {
 				default: "bg-primary text-primary-foreground hover:bg-primary/90",
-				destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/90",
 				outline:
-					"border-input bg-background hover:bg-accent hover:text-accent-foreground border",
-				secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-				ghost: "hover:bg-accent hover:text-accent-foreground",
+					"border border-input bg-background text-foreground hover:bg-accent hover:text-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-accent hover:text-foreground",
+				ghost: "text-foreground hover:bg-accent hover:text-foreground",
+				accent: "bg-brand text-brand-foreground hover:bg-brand/90",
+				stroke:
+					"border border-border-strong/30 bg-transparent text-foreground hover:bg-accent hover:text-foreground",
 				link: "text-primary underline-offset-4 hover:underline",
 			},
 			size: {
-				default: "h-10 px-4 py-2",
-				sm: "h-9 rounded-md px-3",
-				lg: "h-11 rounded-md px-8",
-				icon: "h-10 w-10",
+				// The 12 of the side (small: 8) and the 4 of the label box (see the note at the top), as Figma
+				default: "h-9 px-4",
+				sm: "h-8 px-3",
+				lg: "h-10 px-6",
+				icon: "h-9 w-9",
+				"icon-sm": "h-8 w-8",
+			},
+			// Switched on by the Button below and not by every caller of `buttonVariants` (a calendar cell or a menu trigger
+			// sets its own padding): an icon sits at the side with no label box, so that side is 12 (small: 8)
+			iconPadding: {
+				true: "",
+				false: "",
 			},
 		},
+		compoundVariants: [
+			// The first icon is taken as the leading one (CSS cannot tell a leading icon from a trailing one, text is no
+			// element); a second icon makes the other side 12 as well. Either way the width is the one Figma draws.
+			{
+				size: "default",
+				iconPadding: true,
+				class: "has-[>svg]:ps-3 has-[>svg:nth-of-type(2)]:pe-3",
+			},
+			{
+				size: "sm",
+				iconPadding: true,
+				class: "has-[>svg]:ps-2 has-[>svg:nth-of-type(2)]:pe-2",
+			},
+			// Figma draws the 1px stroke of Outline and Stroke inside the padding, a CSS border sits outside it: those two take
+			// 1px off every side, so that they are as wide as the other styles
+			{ variant: ["outline", "stroke"], size: "default", class: "px-[15px]" },
+			{ variant: ["outline", "stroke"], size: "sm", class: "px-[11px]" },
+			{
+				variant: ["outline", "stroke"],
+				size: "default",
+				iconPadding: true,
+				class: "has-[>svg]:ps-[11px] has-[>svg:nth-of-type(2)]:pe-[11px]",
+			},
+			{
+				variant: ["outline", "stroke"],
+				size: "sm",
+				iconPadding: true,
+				class: "has-[>svg]:ps-[7px] has-[>svg:nth-of-type(2)]:pe-[7px]",
+			},
+		],
 		defaultVariants: {
 			variant: "default",
 			size: "default",
+			iconPadding: false,
 		},
 	});
 
 	export type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
 	export type ButtonSize = VariantProps<typeof buttonVariants>["size"];
 
-    export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
-        WithElementRef<HTMLAnchorAttributes> & {
-            ref?: any;
-            href?: string;
-            class?: string;
-            variant?: ButtonVariant;
-            size?: ButtonSize;
-        };
+	export type ButtonProps = WithElementRef<HTMLButtonAttributes> &
+		WithElementRef<HTMLAnchorAttributes> & {
+			ref?: any;
+			href?: string;
+			class?: string;
+			variant?: ButtonVariant;
+			size?: ButtonSize;
+		};
 </script>
 
 <script lang="ts">
-	import { cn } from "../../../utils.js";
+	import { cn, tv } from "../../../utils.js";
+	import { classNameSetsPadding } from "./button-padding.js";
 
 	let {
 		class: className,
@@ -54,24 +108,20 @@
 		children,
 		...restProps
 	}: ButtonProps = $props();
+
+	// A caller that sets the padding itself (`p-0` on an icon-only button, `px-2`, `!px-3`, …) has chosen the sides: the rule
+	// for an icon would change one of them, so it stays off then
+	const classes = $derived(
+		cn(buttonVariants({ variant, size, iconPadding: !classNameSetsPadding(className), className })),
+	);
 </script>
 
 {#if href}
-	<a
-		bind:this={ref}
-		class={cn(buttonVariants({ variant, size, className }))}
-		{href}
-		{...restProps}
-	>
+	<a bind:this={ref} class={classes} {href} {...restProps}>
 		{@render children?.()}
 	</a>
 {:else}
-	<button
-		bind:this={ref}
-		class={cn(buttonVariants({ variant, size, className }))}
-		{type}
-		{...restProps}
-	>
+	<button bind:this={ref} class={classes} {type} {...restProps}>
 		{@render children?.()}
 	</button>
 {/if}