@cl-light-ds/ui 0.2.0 → 0.4.0

package/src/components/avatar/AvatarImage.astro

@@ -1,46 +1,46 @@
----
-import { cn } from "@cl-light-ds/ui/lib/utils";
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"img"> {
-  class?: string;
-  src?: string;
-  alt?: string;
-}
-
-const {
-  class: className = "",
-  src,
-  alt = "",
-  ...rest
-} = Astro.props as Props;
----
-
-{
-  src ? (
-    <img
-      {...rest}
-      data-slot="avatar-image"
-      src={src}
-      alt={alt}
-      class={cn(
-        "rounded-full",
-        "relative z-10 aspect-square size-full object-cover",
-        className,
-      )}
-    />
-  ) : (
-    <div
-      {...rest}
-      data-slot="avatar-image"
-      class={cn(
-        "rounded-full",
-        "relative z-10 aspect-square size-full overflow-hidden",
-        "[&_img]:size-full [&_img]:object-cover",
-        className,
-      )}
-    >
-      <slot />
-    </div>
-  )
-}
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"img"> {
+  class?: string;
+  src?: string;
+  alt?: string;
+}
+
+const {
+  class: className = "",
+  src,
+  alt = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+{
+  src ? (
+    <img
+      {...rest}
+      data-slot="avatar-image"
+      src={src}
+      alt={alt}
+      class={cn(
+        "rounded-full",
+        "relative z-10 aspect-square size-full object-cover",
+        className,
+      )}
+    />
+  ) : (
+    <div
+      {...rest}
+      data-slot="avatar-image"
+      class={cn(
+        "rounded-full",
+        "relative z-10 aspect-square size-full overflow-hidden",
+        "[&_img]:size-full [&_img]:object-cover",
+        className,
+      )}
+    >
+      <slot />
+    </div>
+  )
+}

package/src/components/avatar/CHANGELOG.md

@@ -1,44 +1,44 @@
-# Changelog Avatar
-
-All notable changes to the `Avatar` component will be documented in this file.
-
-
-## New props
-
-| Prop | Type | Default | Purpose |
-| :--- | :--- | :--- | :--- |
-| `variant` | `"image" &#124; "initials" &#124; "icon"` | `"image"` | Sets `data-variant`; gates the new inline icon rendering. Image/Initials still render via whichever child (`<AvatarImage>`/`<AvatarFallback>`) you slot in — this doesn't replace that. |
-| `icon` | `AstroComponent` (from `@lucide/astro`) | — | Icon to render when `variant="icon"`, same pattern as `Alert`'s icon prop. |
-| `status` | `"active" &#124; "inactive"` | `undefined` (no badge) | Renders an internal status dot — green for active/online, red for inactive/offline. |
-
-## Styling
-
-- Migrated the root class string to `cva` (size × variant), matching the pattern `Alert.astro` already uses, instead of the old chained `data-[size=...]:` selectors.
-- Added a border to the circle at every size, bound to the `border-border` token: 1px (sm), 1.5px (default), 2px (lg) — previously there was no border at all.
-- `variant="icon"` adds `bg-primary-foreground` (white fill) since there's no child component supplying it.
-
-## Markup
-
-- Added `data-variant` and `data-status` attributes alongside the existing `data-slot`/`data-size`.
-- Icon is rendered inline (centered, sized 14/16/20px per size) when `variant="icon"` — no new subcomponent file needed.
-- Status badge is now rendered internally via `<AvatarBadge status={status} />` when status is set, instead of requiring the consumer to manually slot `<AvatarBadge />`.
-
-## Docs (JSDoc block)
-
-- `@figmaUrl` corrected — it was pointing at the old generic BejamasUI template file; now points at your ClickLearn Lightning node (`node-id=113-1145`).
-- `@description` updated to mention initials/icon/status.
-- Replaced the old "Badge" example with a "Variants" example (image/initials/icon) and a "Status" example (active/inactive).
-- `@preview` / `@usage` updated to use `status="active"` instead of a bare `<AvatarBadge />` child.
-
-## Sibling files (part of the same alignment)
-
-- `AvatarBadge.astro` — added `status?: "active" | "inactive"` (default `"active"`, keeps old bare `<AvatarBadge />` usage looking the same); color now `bg-success`/`bg-destructive` by status; size now scales 6/10/12px per avatar size; swapped `ring-background` for an explicit `border-primary-foreground` to match Figma's literal token.
-- `AvatarFallback.astro` (the Initials variant) — recolored from `bg-muted`/`text-muted-foreground` to `bg-primary-foreground`/`text-foreground`/`font-semibold`; text size now scales with avatar size.
-- `Avatar.stories.ts` / `AvatarStory.astro` — added Initials, Icon, StatusActive, StatusInactive stories.
-- `apps/web/.../_sections/avatar.astro` — props table updated with variant/icon/status; added "Variants" and "Status" preview sections.
-
-## Not changed
-
-- `AvatarImage.astro`, `AvatarGroup.astro`, `AvatarGroupCount.astro` — diameters were already correct, and group-stacking behavior was verified visually to still look right after the border change.
-
-## Unreleased
+# Changelog Avatar
+
+All notable changes to the `Avatar` component will be documented in this file.
+
+
+## New props
+
+| Prop | Type | Default | Purpose |
+| :--- | :--- | :--- | :--- |
+| `variant` | `"image" &#124; "initials" &#124; "icon"` | `"image"` | Sets `data-variant`; gates the new inline icon rendering. Image/Initials still render via whichever child (`<AvatarImage>`/`<AvatarFallback>`) you slot in — this doesn't replace that. |
+| `icon` | `AstroComponent` (from `@lucide/astro`) | — | Icon to render when `variant="icon"`, same pattern as `Alert`'s icon prop. |
+| `status` | `"active" &#124; "inactive"` | `undefined` (no badge) | Renders an internal status dot — green for active/online, red for inactive/offline. |
+
+## Styling
+
+- Migrated the root class string to `cva` (size × variant), matching the pattern `Alert.astro` already uses, instead of the old chained `data-[size=...]:` selectors.
+- Added a border to the circle at every size, bound to the `border-border` token: 1px (sm), 1.5px (default), 2px (lg) — previously there was no border at all.
+- `variant="icon"` adds `bg-primary-foreground` (white fill) since there's no child component supplying it.
+
+## Markup
+
+- Added `data-variant` and `data-status` attributes alongside the existing `data-slot`/`data-size`.
+- Icon is rendered inline (centered, sized 14/16/20px per size) when `variant="icon"` — no new subcomponent file needed.
+- Status badge is now rendered internally via `<AvatarBadge status={status} />` when status is set, instead of requiring the consumer to manually slot `<AvatarBadge />`.
+
+## Docs (JSDoc block)
+
+- `@figmaUrl` corrected — it was pointing at the old generic BejamasUI template file; now points at your ClickLearn Lightning node (`node-id=113-1145`).
+- `@description` updated to mention initials/icon/status.
+- Replaced the old "Badge" example with a "Variants" example (image/initials/icon) and a "Status" example (active/inactive).
+- `@preview` / `@usage` updated to use `status="active"` instead of a bare `<AvatarBadge />` child.
+
+## Sibling files (part of the same alignment)
+
+- `AvatarBadge.astro` — added `status?: "active" | "inactive"` (default `"active"`, keeps old bare `<AvatarBadge />` usage looking the same); color now `bg-success`/`bg-destructive` by status; size now scales 6/10/12px per avatar size; swapped `ring-background` for an explicit `border-primary-foreground` to match Figma's literal token.
+- `AvatarFallback.astro` (the Initials variant) — recolored from `bg-muted`/`text-muted-foreground` to `bg-primary-foreground`/`text-foreground`/`font-semibold`; text size now scales with avatar size.
+- `Avatar.stories.ts` / `AvatarStory.astro` — added Initials, Icon, StatusActive, StatusInactive stories.
+- `apps/web/.../_sections/avatar.astro` — props table updated with variant/icon/status; added "Variants" and "Status" preview sections.
+
+## Not changed
+
+- `AvatarImage.astro`, `AvatarGroup.astro`, `AvatarGroupCount.astro` — diameters were already correct, and group-stacking behavior was verified visually to still look right after the border change.
+
+## Unreleased

package/src/components/avatar/index.ts

@@ -1,6 +1,6 @@
-export { default as Avatar } from "./Avatar.astro";
-export { default as AvatarImage } from "./AvatarImage.astro";
-export { default as AvatarFallback } from "./AvatarFallback.astro";
-export { default as AvatarBadge } from "./AvatarBadge.astro";
-export { default as AvatarGroup } from "./AvatarGroup.astro";
-export { default as AvatarGroupCount } from "./AvatarGroupCount.astro";
+export { default as Avatar } from "./Avatar.astro";
+export { default as AvatarImage } from "./AvatarImage.astro";
+export { default as AvatarFallback } from "./AvatarFallback.astro";
+export { default as AvatarBadge } from "./AvatarBadge.astro";
+export { default as AvatarGroup } from "./AvatarGroup.astro";
+export { default as AvatarGroupCount } from "./AvatarGroupCount.astro";

package/src/components/badge/Badge.astro

@@ -1,167 +1,167 @@
----
-/**
- * @component Badge
- * @description A small label for status, categories, or counts.
- * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=80-1462
- * @preview
- *
- * <div class="flex flex-col items-center gap-3">
- *   <div class="flex w-full flex-wrap items-center gap-3">
- *     <Badge>Badge</Badge>
- *     <Badge variant="secondary">Secondary</Badge>
- *     <Badge variant="outline">Outline</Badge>
- *     <Badge variant="destructive">Destructive</Badge>
- *     <Badge variant="success">Success</Badge>
- *     <Badge variant="warning">Warning</Badge>
- *     <Badge variant="accent">Accent</Badge>
- *     <Badge variant="ghost">Ghost</Badge>
- *   </div>
- *   <div class="flex w-full flex-wrap items-center gap-3">
- *     <Badge shape="pill">Pill</Badge>
- *     <Badge shape="rounded">Rounded</Badge>
- *     <Badge shape="sharp">Sharp</Badge>
- *   </div>
- *   <div class="flex w-full flex-wrap items-center gap-3">
- *     <Badge leadIcon>
- *       <BadgeCheckIcon slot="lead-icon" />
- *       Verified
- *     </Badge>
- *     <Badge variant="secondary" tailIcon>
- *       Dismissible
- *       <XIcon slot="tail-icon" />
- *     </Badge>
- *     <Badge size="sm">8</Badge>
- *   </div>
- * </div>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import { Badge } from '@bejamas/ui/components/badge';
- * ---
- *
- * <Badge>Badge</Badge>
- * <Badge variant="secondary">Secondary</Badge>
- * ```
- */
-
-import type { HTMLTag } from "astro/types";
-import { cva } from "class-variance-authority";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-type BadgeVariant =
-  | "default"
-  | "secondary"
-  | "destructive"
-  | "outline"
-  | "success"
-  | "warning"
-  | "accent"
-  | "ghost";
-type BadgeShape = "sharp" | "pill" | "rounded";
-type BadgeSize = "default" | "sm";
-
-interface Props {
-  as?: HTMLTag;
-  variant?: BadgeVariant;
-  shape?: BadgeShape;
-  size?: BadgeSize;
-  leadIcon?: boolean;
-  tailIcon?: boolean;
-  class?: string;
-}
-
-const hasLeadIconSlot = Astro.slots.has("lead-icon");
-const hasTailIconSlot = Astro.slots.has("tail-icon");
-
-const {
-  as = "span",
-  variant = "default",
-  shape = "pill",
-  size = "default",
-  leadIcon = hasLeadIconSlot,
-  tailIcon = hasTailIconSlot,
-  class: className = "",
-  ...rest
-} = Astro.props as Props;
-
-const badgeVariants = cva(
-  [
-    "inline-flex w-fit shrink-0 items-center justify-center gap-0.5 overflow-hidden border whitespace-nowrap transition-[color,box-shadow]",
-    "font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0",
-    "outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
-    "disabled:pointer-events-none disabled:border-transparent disabled:bg-muted disabled:text-muted-foreground",
-  ],
-  {
-    variants: {
-      variant: {
-        default:
-          "border-primary bg-primary text-primary-foreground [a]:hover:bg-primary/80 [a]:hover:border-primary/80 [button]:hover:bg-primary/80 [button]:hover:border-primary/80",
-        secondary:
-          "border-border bg-secondary text-secondary-foreground [a]:hover:bg-background-button-hover [button]:hover:bg-background-button-hover",
-        outline:
-          "border-border bg-transparent text-foreground [a]:hover:bg-background-hover [button]:hover:bg-background-hover",
-        destructive:
-          "border-destructive bg-destructive text-destructive-foreground [a]:hover:bg-destructive-hover [button]:hover:bg-destructive-hover",
-        success:
-          "border-badge-success bg-badge-success text-badge-success-foreground [a]:hover:bg-badge-success/90 [a]:hover:border-badge-success/90 [button]:hover:bg-badge-success/90 [button]:hover:border-badge-success/90",
-        warning:
-          "border-badge-warning bg-badge-warning text-badge-warning-foreground [a]:hover:bg-badge-warning/80 [button]:hover:bg-badge-warning/80",
-        accent:
-          "border-badge-accent bg-badge-accent text-badge-accent-foreground [a]:hover:bg-badge-accent-hover [a]:hover:border-badge-accent-hover [button]:hover:bg-badge-accent-hover [button]:hover:border-badge-accent-hover",
-        ghost:
-          "border-transparent bg-card text-foreground [a]:hover:bg-background-hover [button]:hover:bg-background-hover",
-      },
-      shape: {
-        sharp: "rounded-xs",
-        rounded: "rounded-md",
-        pill: "rounded-full",
-      },
-      size: {
-        default: "h-6 px-1.5 py-0.5 text-sm",
-        sm: "h-5 px-1 py-0.5 text-xs",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      shape: "pill",
-      size: "default",
-    },
-  },
-);
-
-const iconVariants = cva("[&>svg]:size-full", {
-  variants: {
-    size: {
-      default: "size-3.5",
-      sm: "size-3",
-    },
-  },
-  defaultVariants: {
-    size: "default",
-  },
-});
-
-const Tag = as;
-const classes = cn(badgeVariants({ variant, shape, size }), className);
-const iconClass = iconVariants({ size });
----
-
-<Tag data-slot="badge" data-variant={variant} data-shape={shape} data-size={size} class={classes} {...rest}>
-  {
-    leadIcon && (
-      <span data-slot="badge-lead-icon" class={iconClass}>
-        <slot name="lead-icon" />
-      </span>
-    )
-  }
-  <slot />
-  {
-    tailIcon && (
-      <span data-slot="badge-tail-icon" class={iconClass}>
-        <slot name="tail-icon" />
-      </span>
-    )
-  }
-</Tag>
+---
+/**
+ * @component Badge
+ * @description A small label for status, categories, or counts.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=80-1462
+ * @preview
+ *
+ * <div class="flex flex-col items-center gap-3">
+ *   <div class="flex w-full flex-wrap items-center gap-3">
+ *     <Badge>Badge</Badge>
+ *     <Badge variant="secondary">Secondary</Badge>
+ *     <Badge variant="outline">Outline</Badge>
+ *     <Badge variant="destructive">Destructive</Badge>
+ *     <Badge variant="success">Success</Badge>
+ *     <Badge variant="warning">Warning</Badge>
+ *     <Badge variant="accent">Accent</Badge>
+ *     <Badge variant="ghost">Ghost</Badge>
+ *   </div>
+ *   <div class="flex w-full flex-wrap items-center gap-3">
+ *     <Badge shape="pill">Pill</Badge>
+ *     <Badge shape="rounded">Rounded</Badge>
+ *     <Badge shape="sharp">Sharp</Badge>
+ *   </div>
+ *   <div class="flex w-full flex-wrap items-center gap-3">
+ *     <Badge leadIcon>
+ *       <BadgeCheckIcon slot="lead-icon" />
+ *       Verified
+ *     </Badge>
+ *     <Badge variant="secondary" tailIcon>
+ *       Dismissible
+ *       <XIcon slot="tail-icon" />
+ *     </Badge>
+ *     <Badge size="sm">8</Badge>
+ *   </div>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Badge } from '@bejamas/ui/components/badge';
+ * ---
+ *
+ * <Badge>Badge</Badge>
+ * <Badge variant="secondary">Secondary</Badge>
+ * ```
+ */
+
+import type { HTMLTag } from "astro/types";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+type BadgeVariant =
+  | "default"
+  | "secondary"
+  | "destructive"
+  | "outline"
+  | "success"
+  | "warning"
+  | "accent"
+  | "ghost";
+type BadgeShape = "sharp" | "pill" | "rounded";
+type BadgeSize = "default" | "sm";
+
+interface Props {
+  as?: HTMLTag;
+  variant?: BadgeVariant;
+  shape?: BadgeShape;
+  size?: BadgeSize;
+  leadIcon?: boolean;
+  tailIcon?: boolean;
+  class?: string;
+}
+
+const hasLeadIconSlot = Astro.slots.has("lead-icon");
+const hasTailIconSlot = Astro.slots.has("tail-icon");
+
+const {
+  as = "span",
+  variant = "default",
+  shape = "pill",
+  size = "default",
+  leadIcon = hasLeadIconSlot,
+  tailIcon = hasTailIconSlot,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const badgeVariants = cva(
+  [
+    "inline-flex w-fit shrink-0 items-center justify-center gap-0.5 overflow-hidden border whitespace-nowrap transition-[color,box-shadow]",
+    "font-semibold [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    "outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50",
+    "disabled:pointer-events-none disabled:border-transparent disabled:bg-muted disabled:text-muted-foreground",
+  ],
+  {
+    variants: {
+      variant: {
+        default:
+          "border-primary bg-primary text-primary-foreground [a]:hover:bg-primary/80 [a]:hover:border-primary/80 [button]:hover:bg-primary/80 [button]:hover:border-primary/80",
+        secondary:
+          "border-border bg-secondary text-secondary-foreground [a]:hover:bg-background-button-hover [button]:hover:bg-background-button-hover",
+        outline:
+          "border-border bg-transparent text-foreground [a]:hover:bg-background-hover [button]:hover:bg-background-hover",
+        destructive:
+          "border-destructive bg-destructive text-destructive-foreground [a]:hover:bg-destructive-hover [button]:hover:bg-destructive-hover",
+        success:
+          "border-badge-success bg-badge-success text-badge-success-foreground [a]:hover:bg-badge-success/90 [a]:hover:border-badge-success/90 [button]:hover:bg-badge-success/90 [button]:hover:border-badge-success/90",
+        warning:
+          "border-badge-warning bg-badge-warning text-badge-warning-foreground [a]:hover:bg-badge-warning/80 [button]:hover:bg-badge-warning/80",
+        accent:
+          "border-badge-accent bg-badge-accent text-badge-accent-foreground [a]:hover:bg-badge-accent-hover [a]:hover:border-badge-accent-hover [button]:hover:bg-badge-accent-hover [button]:hover:border-badge-accent-hover",
+        ghost:
+          "border-transparent bg-card text-foreground [a]:hover:bg-background-hover [button]:hover:bg-background-hover",
+      },
+      shape: {
+        sharp: "rounded-xs",
+        rounded: "rounded-md",
+        pill: "rounded-full",
+      },
+      size: {
+        default: "h-6 px-1.5 py-0.5 text-sm",
+        sm: "h-5 px-1 py-0.5 text-xs",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      shape: "pill",
+      size: "default",
+    },
+  },
+);
+
+const iconVariants = cva("[&>svg]:size-full", {
+  variants: {
+    size: {
+      default: "size-3.5",
+      sm: "size-3",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+});
+
+const Tag = as;
+const classes = cn(badgeVariants({ variant, shape, size }), className);
+const iconClass = iconVariants({ size });
+---
+
+<Tag data-slot="badge" data-variant={variant} data-shape={shape} data-size={size} class={classes} {...rest}>
+  {
+    leadIcon && (
+      <span data-slot="badge-lead-icon" class={iconClass}>
+        <slot name="lead-icon" />
+      </span>
+    )
+  }
+  <slot />
+  {
+    tailIcon && (
+      <span data-slot="badge-tail-icon" class={iconClass}>
+        <slot name="tail-icon" />
+      </span>
+    )
+  }
+</Tag>

package/src/components/badge/CHANGELOG.md

@@ -1,49 +1,49 @@
-# Changelog for Badge.astro
-
-## Variants
-
-- Added 4 new variants: `success`, `warning`, `accent`, and `ghost` (previously only `default`, `secondary`, `destructive`, and `outline`).
-- **Destructive restyled:** Now uses a solid red background with white text (previously a soft/light red-on-red-tint style).
-- **Ghost:** Matches its name by using `bg-card` with no border, seamlessly blending into the surface.
-
-## Shapes
-
-- Renamed `shape="default"` to `shape="sharp"` (breaking rename, approved).
-- Added `shape="rounded"` (6px radius).
-- Default shape changed from `"default"` to `"pill"`.
-
-## Sizing & Spacing
-
-- Fixed a padding bug where both sizes shared the same horizontal padding. Sizes are now distinctly mapped per Figma: `sm` uses `px-1`, and `default` uses `px-1.5`.
-- Tightened the icon/label gap from `gap-1` (4px) to `gap-0.5` (2px).
-
-## New Props
-
-- `leadIcon` / `tailIcon` (`boolean`): Renders a lead-icon / tail-icon named slot before/after the label. This is auto-detected from slot presence if not explicitly passed (matching the pattern used for `Alert`'s `hasActions`).
-- Icon sizing now dynamically scales with the badge size (12px for small / 14px for default).
-
-## States
-
-- **Focus:** Added `focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3` (replacing dead code where the old `has-data-[icon=...]` selectors never matched).
-- **Disabled:** Added `disabled:bg-muted disabled:text-muted-foreground disabled:border-transparent`.
-- **Hover:** Added in a follow-up pass to align with new Figma designs.
-  - Every variant now has its own hover fill, which fires on both `as="a"` and `as="button"` elements. Plain `<span>` badges remain static.
-  - Fixed a selector bug (`[a]:hover:` is confirmed working) and removed an incorrect text-color hover change on the outline variant.
-
-## Tokens (`globals.css`)
-
-New CSS variables were added. None of these conflict with or touch the shared `--accent` / `--success` tokens used elsewhere in the app:
-- **Solid variant colors:** `--badge-success`, `--badge-warning`, `--badge-accent` (plus their respective foregrounds).
-- **Hover-only colors:** `--background-button-hover`, `--destructive-hover`, `--badge-accent-hover` (used for hover states that require specific colors rather than simple opacity fades of existing tokens).
-
-## Storybook & Docs (`_sections/badge.astro`)
-
-- Rebuilt the prop table to include the new variants, shape values, and `leadIcon` / `tailIcon` rows.
-- Added new preview blocks: **Shapes**, **Sizes**, and **With icons**.
-- Added an **Interactive states** block. All variants are rendered `as="button"` alongside a disabled example, so hover, focus, and disabled states can be previewed live rather than just described.
-
-## Not Changed
-
-- Disabled and Focus states were already correct from the initial pass. They were confirmed against the latest Figma updates and left as-is.
-
-## Unreleased
+# Changelog for Badge.astro
+
+## Variants
+
+- Added 4 new variants: `success`, `warning`, `accent`, and `ghost` (previously only `default`, `secondary`, `destructive`, and `outline`).
+- **Destructive restyled:** Now uses a solid red background with white text (previously a soft/light red-on-red-tint style).
+- **Ghost:** Matches its name by using `bg-card` with no border, seamlessly blending into the surface.
+
+## Shapes
+
+- Renamed `shape="default"` to `shape="sharp"` (breaking rename, approved).
+- Added `shape="rounded"` (6px radius).
+- Default shape changed from `"default"` to `"pill"`.
+
+## Sizing & Spacing
+
+- Fixed a padding bug where both sizes shared the same horizontal padding. Sizes are now distinctly mapped per Figma: `sm` uses `px-1`, and `default` uses `px-1.5`.
+- Tightened the icon/label gap from `gap-1` (4px) to `gap-0.5` (2px).
+
+## New Props
+
+- `leadIcon` / `tailIcon` (`boolean`): Renders a lead-icon / tail-icon named slot before/after the label. This is auto-detected from slot presence if not explicitly passed (matching the pattern used for `Alert`'s `hasActions`).
+- Icon sizing now dynamically scales with the badge size (12px for small / 14px for default).
+
+## States
+
+- **Focus:** Added `focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3` (replacing dead code where the old `has-data-[icon=...]` selectors never matched).
+- **Disabled:** Added `disabled:bg-muted disabled:text-muted-foreground disabled:border-transparent`.
+- **Hover:** Added in a follow-up pass to align with new Figma designs.
+  - Every variant now has its own hover fill, which fires on both `as="a"` and `as="button"` elements. Plain `<span>` badges remain static.
+  - Fixed a selector bug (`[a]:hover:` is confirmed working) and removed an incorrect text-color hover change on the outline variant.
+
+## Tokens (`globals.css`)
+
+New CSS variables were added. None of these conflict with or touch the shared `--accent` / `--success` tokens used elsewhere in the app:
+- **Solid variant colors:** `--badge-success`, `--badge-warning`, `--badge-accent` (plus their respective foregrounds).
+- **Hover-only colors:** `--background-button-hover`, `--destructive-hover`, `--badge-accent-hover` (used for hover states that require specific colors rather than simple opacity fades of existing tokens).
+
+## Storybook & Docs (`_sections/badge.astro`)
+
+- Rebuilt the prop table to include the new variants, shape values, and `leadIcon` / `tailIcon` rows.
+- Added new preview blocks: **Shapes**, **Sizes**, and **With icons**.
+- Added an **Interactive states** block. All variants are rendered `as="button"` alongside a disabled example, so hover, focus, and disabled states can be previewed live rather than just described.
+
+## Not Changed
+
+- Disabled and Focus states were already correct from the initial pass. They were confirmed against the latest Figma updates and left as-is.
+
+## Unreleased

package/src/components/badge/index.ts

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