@cl-light-ds/ui 0.1.0

package/src/components/badge/Badge.astro

@@ -0,0 +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>

package/src/components/badge/CHANGELOG.md

@@ -0,0 +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

package/src/components/badge/index.ts

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

package/src/components/breadcrumb/Breadcrumb.astro

@@ -0,0 +1,76 @@
+---
+/**
+ * @component Breadcrumb
+ * @title Breadcrumb
+ * @description A navigation path showing the user's location in the site hierarchy with links to parent pages.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=2166-5409
+ *
+ * @preview
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><a href="/docs">Docs</a></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbSeparator } from '@bejamas/ui/components/breadcrumb';
+ * ---
+ *
+ * <Breadcrumb>
+ *   <BreadcrumbList>
+ *     <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
+ *     <BreadcrumbSeparator />
+ *     <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ * ```
+ *
+ * @examples
+ *
+ * ### Custom separator
+ *
+ *  <Breadcrumb>
+ *    <BreadcrumbList>
+ *       <BreadcrumbItem><a href="/">Home</a></BreadcrumbItem>
+ *       <BreadcrumbSeparator>
+ *         <SlashIcon />
+ *       </BreadcrumbSeparator>
+ *       <BreadcrumbItem><a href="/docs">Docs</a></BreadcrumbItem>
+ *       <BreadcrumbSeparator>
+ *         <SlashIcon />
+ *       </BreadcrumbSeparator>
+ *       <BreadcrumbItem><span aria-current="page">Page</span></BreadcrumbItem>
+ *   </BreadcrumbList>
+ * </Breadcrumb>
+ */
+
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"nav"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<nav
+  {...rest}
+  aria-label="breadcrumb"
+  data-slot="breadcrumb"
+  class={cn("", className)}
+>
+  <slot />
+</nav>
+

package/src/components/breadcrumb/BreadcrumbItem.astro

@@ -0,0 +1,32 @@
+---
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"li"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const itemVariants = cva("inline-flex items-center");
+---
+
+<li
+  {...rest}
+  data-slot="breadcrumb-item"
+  class={cn(
+    "gap-1.5",
+    "[&_a]:inline-flex [&_a]:items-center [&_a]:gap-1 [&_a]:rounded-lg [&_a]:px-3 [&_a]:py-2 [&_a]:font-medium [&_a]:outline-none [&_a]:transition-colors [&_a]:focus-visible:ring-3 [&_a]:focus-visible:ring-ring/50",
+    "[&_a]:text-muted-foreground [&_a:hover]:text-foreground",
+    "[&_[aria-current=page]]:inline-flex [&_[aria-current=page]]:items-center [&_[aria-current=page]]:gap-1 [&_[aria-current=page]]:rounded-lg [&_[aria-current=page]]:px-3 [&_[aria-current=page]]:py-2 [&_[aria-current=page]]:font-medium",
+    "[&_[aria-current=page]]:text-foreground",
+    itemVariants(),
+    className,
+  )}
+>
+  <slot />
+</li>

package/src/components/breadcrumb/BreadcrumbList.astro

@@ -0,0 +1,26 @@
+---
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"ol"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const listVariants = cva(
+  "flex flex-wrap items-center wrap-break-word",
+);
+---
+
+<ol
+  {...rest}
+  data-slot="breadcrumb-list"
+  class={cn("text-muted-foreground gap-0 text-sm", listVariants(), className)}
+>
+  <slot />
+</ol>

package/src/components/breadcrumb/BreadcrumbSeparator.astro

@@ -0,0 +1,26 @@
+---
+import { ChevronRight } from "@lucide/astro";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"li"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<li
+  {...rest}
+  role="presentation"
+  aria-hidden="true"
+  data-slot="breadcrumb-separator"
+  class={cn("[&>svg]:size-4", className)}
+>
+  <slot>
+    <ChevronRight />
+  </slot>
+</li>

package/src/components/breadcrumb/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Changelog
+
+All notable changes to the `Breadcrumb` component family (`Breadcrumb`, `BreadcrumbList`, `BreadcrumbItem`, `BreadcrumbSeparator`) are documented in this file.
+
+## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `2166-5409`)
+
+Aligned the component visually with Figma's `breadcrumb.link` component, entirely within the existing four-part structure — no new components were introduced, and `BreadcrumbItem` still accepts any raw child content unchanged.
+
+### Changed
+
+- `BreadcrumbItem`: styling for Figma's Default/Hover/Active `breadcrumb.link` states is now baked directly into the item via descendant selectors, targeting whatever `<a>` / `<span aria-current="page">` the consumer slots in:
+  - Color: `[&_a]:text-muted-foreground`, `[&_a:hover]:text-foreground`, `[&_[aria-current=page]]:text-foreground`.
+  - Click-target sizing: `inline-flex items-center gap-1 rounded-lg px-3 py-2 font-medium` on both the link and the current-page span, matching Figma's padded/rounded treatment.
+  - Focus: `outline-none focus-visible:ring-3 focus-visible:ring-ring/50` on the link (Figma doesn't demo a focus state, but keyboard-focus visibility is a baseline requirement, reusing the idiom established on `AccordionTrigger`).
+  - This is a universal, non-opt-in fix — existing raw `<a>`/`<span>` usage now gets the correct look automatically instead of requiring `class="hover:text-foreground transition-colors"` inlined at every call site (following the same convention already used by the sibling `LinkGroupItem`).
+- `BreadcrumbList`: `gap-1.5 sm:gap-2.5` (6px/10px responsive) → `gap-0`. Figma itself specifies a flat `gap-2` (8px), but the row read as too spacious once `BreadcrumbItem`'s own `px-3 py-2` link padding was added (that padding already provides breathing room around each label/separator), so the list-level gap was dropped to `gap-0` as a deliberate visual call on top of the Figma spec.
+- `BreadcrumbSeparator`: icon size `size-3.5` (14px) → `size-4` (16px), matching Figma. Swapped the raw inline `<svg>` chevron-right path for `ChevronRight` from `@lucide/astro` (same glyph, matches the icon-library convention already established elsewhere in this design system).
+- Fixed the `@figmaUrl` JSDoc (was the old Bejamas file) to the ClickLearn Lightning Design Library link.
+
+### Notes
+
+- Figma's `breadcrumb.link` also exposes an optional leading icon and a trailing dropdown chevron. These were **not** added as props — `BreadcrumbItem` wraps opaque slotted content, so it can't inject markup inside a consumer's `<a>`; a consumer who wants an icon can already include it directly in their own link markup (e.g. `<BreadcrumbItem><a href="/"><HouseIcon class="size-4" /> Home</a></BreadcrumbItem>`), and it will inherit the correct sizing/spacing from the `[&_a]` treatment above.
+- Figma's collapsed-trail "..." is modeled as plain text inside a normal link-styled slot, not a distinct component — no `BreadcrumbEllipsis` was added; `<BreadcrumbItem><span>...</span></BreadcrumbItem>` already covers it.
+- All spacing/color values are token-based (Tailwind's `--spacing` scale, `--muted-foreground`/`--foreground`/`--radius-lg` from `globals.css`) — no hardcoded arbitrary values.

package/src/components/breadcrumb/index.ts

@@ -0,0 +1,5 @@
+export { default as Breadcrumb } from "./Breadcrumb.astro";
+export { default as BreadcrumbList } from "./BreadcrumbList.astro";
+export { default as BreadcrumbItem } from "./BreadcrumbItem.astro";
+export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.astro";
+

package/src/components/button/Button.astro

@@ -0,0 +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>