@cl-light-ds/ui 0.2.0 → 0.3.0

package/src/components/button/Button.astro

@@ -1,233 +1,233 @@
----
-/**
- * @component Button
- * @title Button
- * @description A clickable element for triggering actions or submitting forms.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=74-1461
- *
- * @preview
- *
- * <div class="flex flex-wrap items-center gap-2 md:flex-row">
- *   <Button>Button</Button>
- *   <Button variant="outline" size="icon" aria-label="Submit">
- *     <ArrowUpIcon />
- *   </Button>
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Button } from '@bejamas/ui/components/button';
- * ---
- *
- * <Button>Click me</Button>
- * ```
- *
- * ## Link
- *
- * You can use the `as` prop to render the component as an anchor.
- *
- * ```astro nocollapse
- * ---
- * import { Button } from '@bejamas/ui/components/button';
- * ---
- *
- * <Button as="a" href="https://bejamas.com">Click me</Button>
- * ```
- *
- * @examples
- *
- * ### Variants
- *
- * <div class="flex flex-col items-start gap-8 sm:flex-row">
- *   <Button variant="default">Default</Button>
- *   <Button variant="secondary">Secondary</Button>
- *   <Button variant="outline">Outline</Button>
- *   <Button variant="ghost">Ghost</Button>
- *   <Button variant="destructive">Destructive</Button>
- * </div>
- *
- * ### Sizes
- *
- * <div class="flex flex-col items-start gap-8 sm:flex-row">
- *   <div class="flex items-start gap-2">
- *     <Button size="sm" variant="outline">
- *       Small
- *     </Button>
- *     <Button size="icon-sm" aria-label="Submit" variant="outline">
- *       <ArrowUpRightIcon />
- *     </Button>
- *   </div>
- *   <div class="flex items-start gap-2">
- *     <Button variant="outline">Default</Button>
- *     <Button size="icon" aria-label="Submit" variant="outline">
- *       <ArrowUpRightIcon />
- *     </Button>
- *   </div>
- *   <div class="flex items-start gap-2">
- *     <Button variant="outline" size="lg">
- *       Large
- *     </Button>
- *     <Button size="icon-lg" aria-label="Submit" variant="outline">
- *       <ArrowUpRightIcon />
- *     </Button>
- *   </div>
- * </div>
- *
- * ### With icons
- *
- * <div class="flex flex-wrap items-center gap-2">
- *   <Button leadIcon>
- *     <ArrowUpIcon slot="lead-icon" />
- *     Click me
- *   </Button>
- *   <Button variant="outline" tailIcon>
- *     Click me
- *     <ArrowUpRightIcon slot="tail-icon" />
- *   </Button>
- * </div>
- *
- * ### With badge
- *
- * <Button variant="default" badge>
- *   Click me
- *   <Badge slot="badge" variant="secondary" shape="sharp" size="sm">Value</Badge>
- * </Button>
- *
- * ### Destructive
- *
- * <Button variant="destructive">Click me</Button>
- *
- * ### Outline
- *
- * <Button variant="outline">Click me</Button>
- *
- * ### Secondary
- *
- * <Button variant="secondary">Click me</Button>
- *
- * ### Ghost
- *
- * <Button variant="ghost">Click me</Button>
- *
- * ### Link
- *
- * <Button variant="link">Click me</Button>
- *
- * ### Default
- *
- * <Button>Click me</Button>
- *
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cva, type VariantProps } from "class-variance-authority";
-
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:border-transparent disabled:bg-muted disabled:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/80",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
-        outline: "border border-border bg-background text-foreground hover:bg-background-hover",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-background-button-hover",
-        ghost: "text-foreground hover:bg-background-hover",
-        link: "text-primary hover:bg-background-hover hover:underline",
-      },
-      size: {
-        default: "h-9 gap-1 px-2.5 text-xs [&_svg]:size-4",
-        sm: "h-8 gap-1 px-2 text-xs [&_svg]:size-3.5",
-        lg: "h-10 gap-1 px-2.5 text-sm [&_svg]:size-5",
-        icon: "size-9 [&_svg]:size-4",
-        "icon-sm": "size-8 [&_svg]:size-3.5",
-        "icon-lg": "size-10 [&_svg]:size-5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-type ButtonVariantProps = VariantProps<typeof buttonVariants>;
-
-type ButtonAsButton = {
-  as?: "button";
-} & HTMLAttributes<"button">;
-
-type ButtonAsAnchor = {
-  as: "a";
-} & HTMLAttributes<"a">;
-
-type ButtonOwnProps = ButtonVariantProps & {
-  leadIcon?: boolean;
-  tailIcon?: boolean;
-  badge?: boolean;
-};
-
-export type Props = (ButtonAsButton | ButtonAsAnchor) & ButtonOwnProps;
-
-const hasLeadIconSlot = Astro.slots.has("lead-icon");
-const hasTailIconSlot = Astro.slots.has("tail-icon");
-const hasBadgeSlot = Astro.slots.has("badge");
-
-const {
-  as: Tag = "button",
-  variant = "default",
-  size = "default",
-  leadIcon = hasLeadIconSlot,
-  tailIcon = hasTailIconSlot,
-  badge = hasBadgeSlot,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
----
-
-{
-  /*
-  TS can't reconcile our discriminated union props with a dynamic intrinsic Tag.
-  The public Props type *is* strict (href only allowed when as="a"),
-  but JSX wants an intersection of button+anchor attributes here.
-  We deliberately suppress this internal error and rely on Props for caller safety.
-*/
-}
-<!-- @ts-expect-error – union Props + dynamic Tag confuse JSX typing (see comment above) -->
-<Tag
-  data-slot="button"
-  data-variant={variant}
-  data-size={size}
-  class={cn(
-    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1 in-data-[slot=button-group]:hover:bg-background-hover in-data-[slot=button-group]:hover:border-badge-accent aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding font-semibold aria-invalid:ring-3 ease-out duration-150 active:scale-98",
-    buttonVariants({ variant, size }),
-    className,
-  )}
-  {...rest}
->
-  {
-    leadIcon && (
-      <span data-slot="button-lead-icon" class="inline-flex shrink-0 items-center">
-        <slot name="lead-icon" />
-      </span>
-    )
-  }
-  <slot />
-  {
-    badge && (
-      <span data-slot="button-badge" class="inline-flex shrink-0 items-center">
-        <slot name="badge" />
-      </span>
-    )
-  }
-  {
-    tailIcon && (
-      <span data-slot="button-tail-icon" class="inline-flex shrink-0 items-center">
-        <slot name="tail-icon" />
-      </span>
-    )
-  }
-</Tag>
+---
+/**
+ * @component Button
+ * @title Button
+ * @description A clickable element for triggering actions or submitting forms.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=74-1461
+ *
+ * @preview
+ *
+ * <div class="flex flex-wrap items-center gap-2 md:flex-row">
+ *   <Button>Button</Button>
+ *   <Button variant="outline" size="icon" aria-label="Submit">
+ *     <ArrowUpIcon />
+ *   </Button>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Button } from '@bejamas/ui/components/button';
+ * ---
+ *
+ * <Button>Click me</Button>
+ * ```
+ *
+ * ## Link
+ *
+ * You can use the `as` prop to render the component as an anchor.
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Button } from '@bejamas/ui/components/button';
+ * ---
+ *
+ * <Button as="a" href="https://bejamas.com">Click me</Button>
+ * ```
+ *
+ * @examples
+ *
+ * ### Variants
+ *
+ * <div class="flex flex-col items-start gap-8 sm:flex-row">
+ *   <Button variant="default">Default</Button>
+ *   <Button variant="secondary">Secondary</Button>
+ *   <Button variant="outline">Outline</Button>
+ *   <Button variant="ghost">Ghost</Button>
+ *   <Button variant="destructive">Destructive</Button>
+ * </div>
+ *
+ * ### Sizes
+ *
+ * <div class="flex flex-col items-start gap-8 sm:flex-row">
+ *   <div class="flex items-start gap-2">
+ *     <Button size="sm" variant="outline">
+ *       Small
+ *     </Button>
+ *     <Button size="icon-sm" aria-label="Submit" variant="outline">
+ *       <ArrowUpRightIcon />
+ *     </Button>
+ *   </div>
+ *   <div class="flex items-start gap-2">
+ *     <Button variant="outline">Default</Button>
+ *     <Button size="icon" aria-label="Submit" variant="outline">
+ *       <ArrowUpRightIcon />
+ *     </Button>
+ *   </div>
+ *   <div class="flex items-start gap-2">
+ *     <Button variant="outline" size="lg">
+ *       Large
+ *     </Button>
+ *     <Button size="icon-lg" aria-label="Submit" variant="outline">
+ *       <ArrowUpRightIcon />
+ *     </Button>
+ *   </div>
+ * </div>
+ *
+ * ### With icons
+ *
+ * <div class="flex flex-wrap items-center gap-2">
+ *   <Button leadIcon>
+ *     <ArrowUpIcon slot="lead-icon" />
+ *     Click me
+ *   </Button>
+ *   <Button variant="outline" tailIcon>
+ *     Click me
+ *     <ArrowUpRightIcon slot="tail-icon" />
+ *   </Button>
+ * </div>
+ *
+ * ### With badge
+ *
+ * <Button variant="default" badge>
+ *   Click me
+ *   <Badge slot="badge" variant="secondary" shape="sharp" size="sm">Value</Badge>
+ * </Button>
+ *
+ * ### Destructive
+ *
+ * <Button variant="destructive">Click me</Button>
+ *
+ * ### Outline
+ *
+ * <Button variant="outline">Click me</Button>
+ *
+ * ### Secondary
+ *
+ * <Button variant="secondary">Click me</Button>
+ *
+ * ### Ghost
+ *
+ * <Button variant="ghost">Click me</Button>
+ *
+ * ### Link
+ *
+ * <Button variant="link">Click me</Button>
+ *
+ * ### Default
+ *
+ * <Button>Click me</Button>
+ *
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:border-transparent disabled:bg-muted disabled:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive-hover",
+        outline: "border border-border bg-background text-foreground hover:bg-background-hover",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-background-button-hover",
+        ghost: "text-foreground hover:bg-background-hover",
+        link: "text-primary hover:bg-background-hover hover:underline",
+      },
+      size: {
+        default: "h-9 gap-1 px-2.5 text-xs [&_svg]:size-4",
+        sm: "h-8 gap-1 px-2 text-xs [&_svg]:size-3.5",
+        lg: "h-10 gap-1 px-2.5 text-sm [&_svg]:size-5",
+        icon: "size-9 [&_svg]:size-4",
+        "icon-sm": "size-8 [&_svg]:size-3.5",
+        "icon-lg": "size-10 [&_svg]:size-5",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+
+type ButtonAsButton = {
+  as?: "button";
+} & HTMLAttributes<"button">;
+
+type ButtonAsAnchor = {
+  as: "a";
+} & HTMLAttributes<"a">;
+
+type ButtonOwnProps = ButtonVariantProps & {
+  leadIcon?: boolean;
+  tailIcon?: boolean;
+  badge?: boolean;
+};
+
+export type Props = (ButtonAsButton | ButtonAsAnchor) & ButtonOwnProps;
+
+const hasLeadIconSlot = Astro.slots.has("lead-icon");
+const hasTailIconSlot = Astro.slots.has("tail-icon");
+const hasBadgeSlot = Astro.slots.has("badge");
+
+const {
+  as: Tag = "button",
+  variant = "default",
+  size = "default",
+  leadIcon = hasLeadIconSlot,
+  tailIcon = hasTailIconSlot,
+  badge = hasBadgeSlot,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+{
+  /*
+  TS can't reconcile our discriminated union props with a dynamic intrinsic Tag.
+  The public Props type *is* strict (href only allowed when as="a"),
+  but JSX wants an intersection of button+anchor attributes here.
+  We deliberately suppress this internal error and rely on Props for caller safety.
+*/
+}
+<!-- @ts-expect-error – union Props + dynamic Tag confuse JSX typing (see comment above) -->
+<Tag
+  data-slot="button"
+  data-variant={variant}
+  data-size={size}
+  class={cn(
+    "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1 in-data-[slot=button-group]:hover:bg-background-hover in-data-[slot=button-group]:hover:border-badge-accent aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding font-semibold aria-invalid:ring-3 ease-out duration-150 active:scale-98",
+    buttonVariants({ variant, size }),
+    className,
+  )}
+  {...rest}
+>
+  {
+    leadIcon && (
+      <span data-slot="button-lead-icon" class="inline-flex shrink-0 items-center">
+        <slot name="lead-icon" />
+      </span>
+    )
+  }
+  <slot />
+  {
+    badge && (
+      <span data-slot="button-badge" class="inline-flex shrink-0 items-center">
+        <slot name="badge" />
+      </span>
+    )
+  }
+  {
+    tailIcon && (
+      <span data-slot="button-tail-icon" class="inline-flex shrink-0 items-center">
+        <slot name="tail-icon" />
+      </span>
+    )
+  }
+</Tag>

package/src/components/button/CHANGELOG.md

@@ -1,41 +1,41 @@
-# Changelog for Button.astro
-
-All notable changes to the `Button` component will be documented in this file.
-
-## Date 8th Sep 2026
-## Figma alignment (node 114-6897, prop table 7185-13418) 
-
-### Variants
-
-- **Primary:** removed the duplicated/conflicting hover utilities (`hover:bg-primary/80` next to `hover:bg-primary/90`); Figma's hover state resolves to `#3785e0cc`, i.e. `bg-primary` at 80% opacity. Kept `hover:bg-primary/80` only.
-- **Destructive:** completely rebuilt. It previously mixed `text-destructive` and `text-white`, and stacked four different hover opacities (`/20`, `/30`, `/60`, `/90`) across light/dark. Figma's destructive is flat: `bg-destructive text-destructive-foreground`, hover `bg-destructive-hover` (`#ef4444`, already an existing token).
-- **Outline:** dropped the leftover `dark:bg-input/30 dark:border-input dark:hover:bg-input/50` and the duplicate `border`/`shadow-xs shadow-none` pair. Now `border border-border bg-background text-foreground`, hover `bg-background-hover`.
-- **Secondary:** hover changed from `hover:bg-secondary/80` to `hover:bg-background-button-hover` (`#e4e4e7`), matching the resolved Figma value and the same token Badge already uses for its secondary hover.
-- **Ghost:** dropped the implicit `bg-secondary`/`bg-muted` hover mix; now `text-foreground hover:bg-background-hover`, matching Figma exactly.
-- **Link:** was rendered with `p-0` (no padding box) and no hover treatment beyond `hover:underline`. Figma's Link symbol keeps the same padding box as every other variant and adds a `hover:bg-background-hover` wash in addition to the underline. Removed `p-0`.
-- Dropped `aria-expanded:*` variant styling that had no corresponding Figma state — components should express open/active state through `variant`/`class`, not baked into every variant.
-
-### States
-
-- **Disabled:** was `disabled:opacity-50` (just dims whatever variant color). Figma switches every variant to the same flat `bg-muted`/`text-muted-foreground`/`border-transparent`, confirmed identical across Primary, Secondary, Outline, Ghost and Destructive. Moved to the shared base class so it applies uniformly.
-- **Focus:** ring was `focus-visible:ring-ring/50` (translucent). Figma's focus ring is a solid 2px ring in `chart-1` (`#afcef3`, = `primary-200`) plus a `border-ring` border — both already existing tokens. Now `focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1`.
-
-### Sizing & Spacing
-
-- **Radius:** unified to `rounded-lg` (8px) for every size. Previously `sm` used a one-off `rounded-[min(var(--radius-md),10px)]` and only `lg`/`default` used `rounded-lg` — Figma uses the same 8px radius across all three sizes and both icon-only and labeled buttons.
-- **Font size:** `default`/`sm` were rendering at Tailwind's `text-sm` (14px) but Figma's token for those sizes is 12px (`text-xs` in this Tailwind scale). `lg` was `text-base` (16px) but Figma's large text token is 14px (`text-sm`). Fixed both.
-- **Icon size:** replaced the single blanket `[&_svg:not([class*='size-'])]:size-4` (16px for every size) with per-size rules: `size-3.5` (14px) for `sm`, `size-4` (16px) for `default`, `size-5` (20px) for `lg` — confirmed against Figma's lead/tail icon dimensions per size.
-- **Gap:** simplified nested Figma auto-layout spacing (2px flex gap + 2px label padding on each side ≈ 4px effective gap) down to a single `gap-1` (4px) on the root, applied uniformly across sizes.
-- **Horizontal padding:** `sm` uses `px-2` (8px), `default`/`lg` both use `px-2.5` (10px) — confirmed from Figma's resolved padding tokens (large's extra height comes from its bigger icon/font/fixed `h-10`, not extra horizontal padding).
-
-### New Props
-
-- `leadIcon` / `tailIcon` / `badge` (`boolean`): render the `lead-icon` / `tail-icon` / `badge` named slots before/after the label. Auto-detected from slot presence if not explicitly passed — same pattern as Badge's `leadIcon`/`tailIcon`.
-- This replaces the previous implicit convention of dropping an icon in as a bare child with a `data-icon="inline-start"|"inline-end"` attribute and relying on `has-data-[icon=...]`/`has-[.badge:last-child]` selectors for spacing. No existing usages in the repo relied on that convention (grepped for `data-icon=`), so this is a clean cutover.
-- Docs updated: the "With badge" example now also sets `shape="sharp" size="sm"` on the nested `Badge`, matching the compact/square badge Figma nests inside a Button (`rounded-xs`, `px-1 py-0.5`) rather than Badge's own pill/default sizing.
-
-### Tokens (`globals.css`)
-
-No new tokens were needed — every color Button uses already exists: `primary`/`primary-foreground`, `secondary`/`secondary-foreground`, `background`/`background-hover`/`background-button-hover`, `destructive`/`destructive-foreground`/`destructive-hover`, `muted`/`muted-foreground`, `border`, `ring`, `chart-1`.
-
-## Unreleased
+# Changelog for Button.astro
+
+All notable changes to the `Button` component will be documented in this file.
+
+## Date 8th Sep 2026
+## Figma alignment (node 114-6897, prop table 7185-13418) 
+
+### Variants
+
+- **Primary:** removed the duplicated/conflicting hover utilities (`hover:bg-primary/80` next to `hover:bg-primary/90`); Figma's hover state resolves to `#3785e0cc`, i.e. `bg-primary` at 80% opacity. Kept `hover:bg-primary/80` only.
+- **Destructive:** completely rebuilt. It previously mixed `text-destructive` and `text-white`, and stacked four different hover opacities (`/20`, `/30`, `/60`, `/90`) across light/dark. Figma's destructive is flat: `bg-destructive text-destructive-foreground`, hover `bg-destructive-hover` (`#ef4444`, already an existing token).
+- **Outline:** dropped the leftover `dark:bg-input/30 dark:border-input dark:hover:bg-input/50` and the duplicate `border`/`shadow-xs shadow-none` pair. Now `border border-border bg-background text-foreground`, hover `bg-background-hover`.
+- **Secondary:** hover changed from `hover:bg-secondary/80` to `hover:bg-background-button-hover` (`#e4e4e7`), matching the resolved Figma value and the same token Badge already uses for its secondary hover.
+- **Ghost:** dropped the implicit `bg-secondary`/`bg-muted` hover mix; now `text-foreground hover:bg-background-hover`, matching Figma exactly.
+- **Link:** was rendered with `p-0` (no padding box) and no hover treatment beyond `hover:underline`. Figma's Link symbol keeps the same padding box as every other variant and adds a `hover:bg-background-hover` wash in addition to the underline. Removed `p-0`.
+- Dropped `aria-expanded:*` variant styling that had no corresponding Figma state — components should express open/active state through `variant`/`class`, not baked into every variant.
+
+### States
+
+- **Disabled:** was `disabled:opacity-50` (just dims whatever variant color). Figma switches every variant to the same flat `bg-muted`/`text-muted-foreground`/`border-transparent`, confirmed identical across Primary, Secondary, Outline, Ghost and Destructive. Moved to the shared base class so it applies uniformly.
+- **Focus:** ring was `focus-visible:ring-ring/50` (translucent). Figma's focus ring is a solid 2px ring in `chart-1` (`#afcef3`, = `primary-200`) plus a `border-ring` border — both already existing tokens. Now `focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1`.
+
+### Sizing & Spacing
+
+- **Radius:** unified to `rounded-lg` (8px) for every size. Previously `sm` used a one-off `rounded-[min(var(--radius-md),10px)]` and only `lg`/`default` used `rounded-lg` — Figma uses the same 8px radius across all three sizes and both icon-only and labeled buttons.
+- **Font size:** `default`/`sm` were rendering at Tailwind's `text-sm` (14px) but Figma's token for those sizes is 12px (`text-xs` in this Tailwind scale). `lg` was `text-base` (16px) but Figma's large text token is 14px (`text-sm`). Fixed both.
+- **Icon size:** replaced the single blanket `[&_svg:not([class*='size-'])]:size-4` (16px for every size) with per-size rules: `size-3.5` (14px) for `sm`, `size-4` (16px) for `default`, `size-5` (20px) for `lg` — confirmed against Figma's lead/tail icon dimensions per size.
+- **Gap:** simplified nested Figma auto-layout spacing (2px flex gap + 2px label padding on each side ≈ 4px effective gap) down to a single `gap-1` (4px) on the root, applied uniformly across sizes.
+- **Horizontal padding:** `sm` uses `px-2` (8px), `default`/`lg` both use `px-2.5` (10px) — confirmed from Figma's resolved padding tokens (large's extra height comes from its bigger icon/font/fixed `h-10`, not extra horizontal padding).
+
+### New Props
+
+- `leadIcon` / `tailIcon` / `badge` (`boolean`): render the `lead-icon` / `tail-icon` / `badge` named slots before/after the label. Auto-detected from slot presence if not explicitly passed — same pattern as Badge's `leadIcon`/`tailIcon`.
+- This replaces the previous implicit convention of dropping an icon in as a bare child with a `data-icon="inline-start"|"inline-end"` attribute and relying on `has-data-[icon=...]`/`has-[.badge:last-child]` selectors for spacing. No existing usages in the repo relied on that convention (grepped for `data-icon=`), so this is a clean cutover.
+- Docs updated: the "With badge" example now also sets `shape="sharp" size="sm"` on the nested `Badge`, matching the compact/square badge Figma nests inside a Button (`rounded-xs`, `px-1 py-0.5`) rather than Badge's own pill/default sizing.
+
+### Tokens (`globals.css`)
+
+No new tokens were needed — every color Button uses already exists: `primary`/`primary-foreground`, `secondary`/`secondary-foreground`, `background`/`background-hover`/`background-button-hover`, `destructive`/`destructive-foreground`/`destructive-hover`, `muted`/`muted-foreground`, `border`, `ring`, `chart-1`.
+
+## Unreleased

package/src/components/button/index.ts

@@ -1,2 +1,2 @@
-export { default as Button } from "./Button.astro";
-
+export { default as Button } from "./Button.astro";
+