@cl-light-ds/ui 0.1.0

package/src/components/card/CardDescription.astro

@@ -0,0 +1,28 @@
+---
+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<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const descriptionVariants = cva("");
+---
+
+<div
+  {...rest}
+  data-slot="card-description"
+  class={cn(
+    "text-muted-foreground text-sm group-data-[size=large]/card:group-data-[orientation=vertical]/card:text-base group-data-[variant=overlay]/card:text-primary-foreground",
+    descriptionVariants(),
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/card/CardFooter.astro

@@ -0,0 +1,24 @@
+---
+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<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const footerVariants = cva("flex items-center justify-between");
+---
+
+<div
+  {...rest}
+  data-slot="card-footer"
+  class={cn("gap-6 p-6 group-data-[orientation=horizontal]/card:hidden", footerVariants(), className)}
+>
+  <slot />
+</div>

package/src/components/card/CardHeader.astro

@@ -0,0 +1,30 @@
+---
+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<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const headerVariants = cva(
+  "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start has-data-[slot=card-action]:grid-cols-[1fr_auto]",
+);
+---
+
+<div
+  {...rest}
+  data-slot="card-header"
+  class={cn(
+    "gap-1.5 px-6 pt-6 pb-0 group-data-[size=large]/card:pt-8 group-data-[variant=overlay]/card:relative group-data-[variant=overlay]/card:z-10 group-data-[variant=overlay]/card:px-0 group-data-[variant=overlay]/card:pt-0 group-data-[variant=overlay]/card:pb-0",
+    headerVariants(),
+    className,
+  )}
+>
+  <slot />
+</div>

package/src/components/card/CardMedia.astro

@@ -0,0 +1,27 @@
+---
+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<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const mediaVariants = cva(
+  "relative z-0 overflow-hidden pt-2 px-2 [&_img]:size-full [&_img]:rounded-md [&_img]:object-cover group-data-[orientation=horizontal]/card:w-2/5 group-data-[orientation=horizontal]/card:self-stretch group-data-[orientation=horizontal]/card:p-0",
+);
+---
+
+<div
+  {...rest}
+  data-slot="card-media"
+  class={cn("", mediaVariants(), className)}
+>
+  <slot />
+</div>
+

package/src/components/card/CardOverlay.astro

@@ -0,0 +1,32 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+type CardOverlayVariant = "default" | "glass";
+
+interface Props extends HTMLAttributes<"div"> {
+  variant?: CardOverlayVariant;
+  class?: string;
+}
+
+const {
+  class: className = "",
+  variant = "default",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="card-overlay"
+  class={cn("", 
+    "inset-0 absolute z-10 opacity-0 p-6 group-hover/card:opacity-100 transition-opacity duration-300 ease-out",
+    variant === "glass"
+      ? "bg-primary/70 backdrop-blur-sm text-primary-foreground"
+      : "bg-primary text-primary-foreground",
+    className,
+  )}
+>
+  <slot />
+</div>
+

package/src/components/card/CardTitle.astro

@@ -0,0 +1,21 @@
+---
+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<"div"> {
+  class?: string;
+}
+
+const { class: className = "", ...rest } = Astro.props as Props;
+
+const titleVariants = cva("font-heading text-balance");
+---
+
+<div
+  {...rest}
+  data-slot="card-title"
+  class={cn("text-xl leading-6 font-semibold group-data-[orientation=horizontal]/card:text-base", titleVariants(), className)}
+>
+  <slot />
+</div>

package/src/components/card/index.ts

@@ -0,0 +1,10 @@
+export { default as Card } from "./Card.astro";
+export { default as CardMedia } from "./CardMedia.astro";
+export { default as CardHeader } from "./CardHeader.astro";
+export { default as CardTitle } from "./CardTitle.astro";
+export { default as CardDescription } from "./CardDescription.astro";
+export { default as CardAction } from "./CardAction.astro";
+export { default as CardContent } from "./CardContent.astro";
+export { default as CardFooter } from "./CardFooter.astro";
+export { default as CardOverlay } from "./CardOverlay.astro";
+

package/src/components/carousel/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+All notable changes to the `Carousel` component will be documented in this file.
+
+## Unreleased

package/src/components/carousel/Carousel.astro

@@ -0,0 +1,106 @@
+---
+/**
+ * @component Carousel
+ * @title Carousel
+ * @description A CSS scroll-snap carousel using only Tailwind classes (no JS).
+ *
+ * @preview
+ *
+ * <!-- Horizontal images with center snapping -->
+ * <Carousel class="gap-4 p-2" align="center">
+ *   <CarouselSlide><img src="https://images.unsplash.com/photo-1759332978018-a6efdacf4d11?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=1290" alt="Example" class="w-64 h-96 object-cover rounded-lg" /></CarouselSlide>
+ *   <CarouselSlide><img src="https://plus.unsplash.com/premium_photo-1760541740387-e0af5182d805?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=1335" alt="Example" class="w-64 h-96 object-cover rounded-lg" /></CarouselSlide>
+ *   <CarouselSlide><img src="https://images.unsplash.com/photo-1760659391924-86d657118008?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=2340" alt="Example" class="w-120 h-96 object-cover rounded-lg" /></CarouselSlide>
+ * </Carousel>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Carousel, CarouselSlide } from '@bejamas/ui/components/carousel';
+ * ---
+ *
+ * <Carousel>
+ *   <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 1</div></CarouselSlide>
+ *   <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 2</div></CarouselSlide>
+ *   <CarouselSlide><div class="w-72 bg-muted rounded-xl p-6">Item 3</div></CarouselSlide>
+ * </Carousel>
+ * ```
+ *
+ * @props
+ * - axis?: "x" | "y" — Scroll direction. Default: "x".
+ * - snapType?: "mandatory" | "proximity" — Scroll-snap behavior. Default: "mandatory".
+ * - align?: "start" | "center" | "end" — Child snap alignment. Default: "start".
+ * - fade?: boolean — Add edge fade via CSS mask on the scroll axis. Default: false.
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cva } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+type Axis = "x" | "y";
+type SnapType = "mandatory" | "proximity";
+type Align = "start" | "center" | "end";
+
+interface Props extends HTMLAttributes<"div"> {
+  axis?: Axis;
+  snapType?: SnapType;
+  align?: Align;
+  fade?: boolean;
+  class?: string;
+}
+
+const {
+  axis = "x",
+  snapType = "mandatory",
+  align = "start",
+  fade = false,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const carouselVariants = cva(
+  "relative w-full overflow-auto scroll-smooth [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden",
+  {
+    variants: {
+      axis: {
+        x: "flex flex-row snap-x",
+        y: "flex flex-col snap-y",
+      },
+      snapType: {
+        mandatory: "snap-mandatory",
+        proximity: "snap-proximity",
+      },
+      align: {
+        start:
+          "[&>[data-slot=carousel-slide]]:snap-start [&>[data-slot=carousel-slide]]:shrink-0",
+        center:
+          "[&>[data-slot=carousel-slide]]:snap-center [&>[data-slot=carousel-slide]]:shrink-0",
+        end: "[&>[data-slot=carousel-slide]]:snap-end [&>[data-slot=carousel-slide]]:shrink-0",
+      },
+    },
+    defaultVariants: {
+      axis: "x",
+      snapType: "mandatory",
+      align: "start",
+    },
+  },
+);
+
+const defaultFadeX = "mask-x-from-80% mask-x-to-95%";
+const defaultFadeY = "mask-y-from-80% mask-y-to-95%";
+---
+
+<div
+  {...rest}
+  data-slot="carousel"
+  class={cn("", 
+    carouselVariants({ axis, snapType, align }),
+    fade && axis === "x" && defaultFadeX,
+    fade && axis === "y" && defaultFadeY,
+    className,
+  )}
+>
+  <slot />
+</div>
+

package/src/components/carousel/CarouselSlide.astro

@@ -0,0 +1,22 @@
+---
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"div"> {
+  class?: string;
+}
+
+const {
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  {...rest}
+  data-slot="carousel-slide"
+  class={cn("", "shrink-0", className)}
+>
+  <slot />
+</div>
+

package/src/components/carousel/index.ts

@@ -0,0 +1,3 @@
+export { default as Carousel } from "./Carousel.astro";
+export { default as CarouselSlide } from "./CarouselSlide.astro";
+

package/src/components/checkbox/CHANGELOG.md

@@ -0,0 +1,58 @@
+# Changelog
+
+All notable changes to the `Checkbox` component will be documented in this file.
+
+## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `46-976`)
+
+Checkbox had never been touched by a Figma-alignment pass and was still the original Bejamas import. This pass added the missing Size and Indeterminate variants documented in Figma, fixed a real disabled-state visual mismatch, and cleaned up dead/inconsistent code found along the way.
+
+### Added
+
+- `size?: "default" | "lg"` — `default` is the existing 16px box (unchanged), `lg` is a new 20px box, matching Figma's two size variants (Figma's own variant was named "Small"; per your call it's being renamed to "Default" in Figma to match this prop, rather than the other way around).
+- `indeterminate?: boolean` — shows a dash icon (matching Figma's Indeterminate type) instead of the checkmark. Since `.indeterminate` is a DOM-only property with no HTML attribute equivalent, this is implemented as a `data-indeterminate` marker plus a small inline `<script>` that sets the real native property on load — everything else (styling, showing/hiding the dash) reacts to the standard CSS `:indeterminate` pseudo-class, so it behaves like a genuine indeterminate checkbox (e.g. clicking it clears indeterminate per native browser behavior), not just a visual approximation.
+- New `checkboxVariants`/`indicatorVariants` (via `cva`) replacing the old single flat class string, to support the two sizes cleanly.
+
+### Fixed
+
+- Disabled state: was `disabled:opacity-50` (uniformly fading everything, including a checked box's blue to a washed-out blue). Figma specifies the box background becomes `bg-muted` (light gray) when disabled — fixed to match, with the indicator icon separately switching to `peer-disabled:text-muted-foreground` so a disabled+checked box reads as gray, not faded blue.
+- `focus-visible:ring-[3px]` (arbitrary value) → `focus-visible:ring-3` (standard Tailwind scale utility, same 3px result, consistent with every other component's focus ring).
+- Removed dead `data-checked:*` utility classes (`data-checked:bg-primary`, etc.) — nothing in this component has ever set a `data-checked` attribute (no JS at all besides the new indeterminate script), so these were inert leftovers from a different origin.
+- Fixed the component's own JSDoc `@preview` block, which used `defaultChecked` (not a real prop — this is a static-rendered Astro component, there's no client state) instead of the native `checked` attribute the storybook docs page and all real usage already correctly use.
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+
+### Notes
+
+- Figma's "Checkbox Combo" (checkbox + label + description) is already fully covered by the existing `Field`/`FieldContent`/`FieldLabel`/`FieldDescription` components — no new component was added for it.
+- Figma also showed a Hover state — excluded per your call; not necessary, and being removed from Figma too.
+- The component's own wrapping `<label>` + `<slot/>`, used alongside a sibling `<Label for="id">` in all existing examples, was left as-is — both work correctly (`for` targets by id regardless of DOM nesting), not a bug.
+- All values are token-based (`--primary`, `--muted`, `--border`, `--input`, `--ring`, `--destructive`, `--radius-sm` from `globals.css`) — no hardcoded arbitrary values.
+
+## 2026-09-09 — Docs: checkbox/label/description alignment + token colors
+
+### Fixed
+
+- "With description" demo (`checkbox.astro` docs page and `Checkbox.astro`'s own JSDoc `@preview`): migrated from a hand-rolled `<div class="grid gap-2">` + plain `Label` to `Field`/`FieldContent`/`FieldLabel`/`FieldDescription`. The plain `Label` renders at `leading-none` (14px line-height for `text-sm`) — *shorter* than the 16px checkbox itself — so `items-start` always left the checkbox visibly overhanging the label. `FieldLabel` uses `leading-snug` (19.25px) and, combined with the `Field` alignment fix (see `field`'s changelog), now centers the checkbox against the label to within a sub-pixel difference. Verified live via `getBoundingClientRect()`, not just visually.
+- "Selectable card" demo: same root cause (a hand-rolled `leading-none` title paragraph). Since this demo needs to stay a single clickable `<Label>` card (not `Field`, which isn't a label and wouldn't preserve click-anywhere-on-card behavior), fixed it directly: title paragraph `leading-none` → `leading-5` (20px — see the later entry below for why this specific value, and why it changed from an initial `leading-snug` guess).
+- "Selectable card" colors: replaced hardcoded Tailwind palette colors (`border-blue-600`, `bg-blue-50`, `dark:border-blue-900`, `dark:bg-blue-950`) with token-based equivalents (`border-primary/30`, `bg-primary/5`, `dark:border-primary/20`, `dark:bg-primary/10` — matching the exact opacity convention `FieldLabel` already uses for its own `has-data-checked` state). Also removed the now-redundant `checked:border-blue-600 checked:bg-blue-600 ...` override on the `Checkbox` instance itself — unnecessary since the component's own default checked state is already `bg-primary`/`border-primary`.
+
+Note: this entry originally also added `class="mt-px"` directly on the `Checkbox` instance as the alignment nudge. That was wrong and got fixed in the next entry below — see that entry for why and what replaced it.
+
+## 2026-09-09 — Fixed checkbox/icon desync, disabled-label reflection, and icon stroke geometry
+
+### Fixed
+
+- **Checkbox+icon desync bug**, introduced by the previous entry's `class="mt-px"` fix: that class landed on the `<input>` only (`Checkbox`'s public `class` prop merges onto the input element), while the checkmark/dash icon is a separately-positioned `absolute inset-0` overlay on a *different* wrapping `<span>` that never moved. Net effect: the box border shifted 1px down to align with the label, but the icon inside it stayed put — looking like the checkmark was "pushed upward" inside the box, and the checkbox still didn't read as properly centered overall.
+  - Fixed by adding `data-slot="checkbox"` to the component's outermost `<label>`, so the nudge can target the whole box+icon unit atomically instead of the input alone. Updated `Field.astro`'s alignment selector (`horizontal`/`responsive` variants) to match `[data-slot=checkbox]` (and `RadioGroupItem`'s existing `[data-slot=radio-group-item]`) instead of a bare `input[type=checkbox]` — see `field`'s changelog for the full detail.
+  - "Selectable card" (not `Field`-based) updated the same way: `[&_[data-slot=checkbox]]:mt-px` added directly to the card's own `Label` class, replacing the `class="mt-px"` on `Checkbox` itself.
+  - Verified live: box and icon now move as one unit (0.00px delta between them), and the whole checkbox centers against its label to within ~0.6px in both "With description" and "Selectable card".
+- **Disabled label not dimming**: `Label`'s own `peer-disabled:opacity-50` can't reach a disabled `Checkbox`'s native input, because `Checkbox` wraps its input in its own `<label>`+`<span>` — the input isn't a true CSS sibling of an externally-paired `<Label for="...">`, so `peer-*` (which relies on the `~` sibling combinator) never matches across that nesting gap. This is a structural limitation of pairing `Checkbox` with a sibling `Label`, not something fixable inside `Checkbox` itself. Reflected correctly in the "Disabled" storybook demo using `:has()` instead (which reaches into any descendant depth): wrapped the row in `group`, added `group-has-disabled:opacity-50` to the `Label`. Mirrored in `Checkbox.astro`'s own JSDoc preview.
+- **Icon stroke didn't match Figma**: the checkmark/dash were a single 24×24-viewBox icon with `stroke-width="2"`, scaled down via `size-3`/`size-4` for display — at the default 12px display size this rendered a ~1px visual stroke. Figma's actual assets use a viewBox matching the icon's own native display size (12×12 for the default/small icon, 16×16 for large) with `stroke-width="1.5"` in both — i.e. Figma keeps the stroke a constant 1.5px regardless of size, not scaled proportionally. Replaced the single scaled icon with per-size `viewBox`/path data taken directly from Figma's exported assets (`stroke-width="1.5"` in both cases), so the rendered stroke now matches exactly at both sizes (verified: 1.5px computed at both `size-3` and `size-4` display).
+
+## 2026-09-09 — Alignment nudge corrected: 1px guess → Figma's actual 2px offset
+
+The `mt-px` (1px) alignment nudge from the previous entry was derived by measurement/approximation, not sourced from Figma directly. Checked Figma's actual "Checkbox Combo" node: it wraps the checkbox in `p-0.5` (2px padding on all sides) inside an `items-start` row, with the label at an explicit `leading-[20px]` — i.e. a plain 2px top offset, not a computed value.
+
+### Changed
+
+- "Selectable card": `[&_[data-slot=checkbox]]:mt-px` → `mt-0.5` (2px), and the title paragraph `leading-snug` (19.25px, a guess) → `leading-5` (20px, Figma's actual value). With these exact values, centering is now **0.000px** off (verified live), not just "close."
+- `Field`'s alignment selector (see `field`'s changelog): `mt-px` → `mt-0.5` for the same reason. Since `FieldLabel` itself still uses `leading-snug` rather than Figma's literal `leading-[20px]`, the "With description" demo (which uses `Field`) has a ~0.375px residual — imperceptible, and not worth changing `FieldLabel`'s shared typography (used by many other components) over.

package/src/components/checkbox/Checkbox.astro

@@ -0,0 +1,159 @@
+---
+/**
+ * @component Checkbox
+ * @title Checkbox
+ * @description An accessible control for toggling between checked and unchecked states. Built on native HTML checkbox.
+ * @figmaUrl https://www.figma.com/design/qXkzdqZ3QPQqgckU3AwIAH/ClickLearn-Lightning-Design-Library?node-id=46-976
+ *
+ * @preview
+ *
+ * <div class="flex flex-col gap-6 not-content">
+ * <div class="flex items-center gap-3">
+ *   <Checkbox id="terms" />
+ *   <Label for="terms">Accept terms and conditions</Label>
+ * </div>
+ *
+ * <Field orientation="horizontal" class="max-w-sm">
+ *   <Checkbox id="terms-2" checked />
+ *   <FieldContent>
+ *     <FieldLabel for="terms-2">Accept terms and conditions</FieldLabel>
+ *     <FieldDescription>
+ *       By clicking this checkbox, you agree to the terms and conditions.
+ *     </FieldDescription>
+ *   </FieldContent>
+ * </Field>
+ *
+ * <div class="group flex items-center gap-3">
+ *   <Checkbox id="toggle" disabled />
+ *   <Label for="toggle" class="group-has-disabled:opacity-50">Enable notifications</Label>
+ * </div>
+ *
+ * <Label
+ *   class="hover:bg-accent/5 border-border flex items-start gap-3 rounded-lg border p-3 has-[:checked]:border-primary/30 has-[:checked]:bg-primary/5 dark:has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10 [&_[data-slot=checkbox]]:mt-0.5"
+ * >
+ *   <Checkbox id="toggle-2" checked />
+ *   <div class="grid gap-1.5 font-normal">
+ *     <p class="text-sm leading-5 font-medium">Enable notifications</p>
+ *     <p class="text-muted-foreground text-sm">
+ *       You can enable or disable notifications at any time.
+ *     </p>
+ *   </div>
+ * </Label>
+ * </div>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { Checkbox } from '@bejamas/ui/components/checkbox';
+ * import { Label } from '@bejamas/ui/components/label';
+ * ---
+ *
+ * <div class="flex items-center gap-3">
+ *   <Checkbox id="terms" />
+ *   <Label for="terms">Accept terms and conditions</Label>
+ * </div>
+ * ```
+ *
+ * @examples
+ *
+ * ### Sizes
+ *
+ * <div class="flex items-center gap-6">
+ *   <Checkbox id="size-default" checked />
+ *   <Checkbox id="size-lg" size="lg" checked />
+ * </div>
+ *
+ * ### Indeterminate
+ *
+ * <Checkbox id="indeterminate-example" indeterminate />
+ */
+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<"input"> {
+  class?: string;
+  id?: string;
+  name?: string;
+  size?: "default" | "lg";
+  indeterminate?: boolean;
+}
+
+const {
+  class: className = "",
+  id = "",
+  name = id,
+  size = "default",
+  indeterminate = false,
+  ...props
+} = Astro.props as Props;
+
+const checkboxVariants = cva(
+  "peer appearance-none shrink-0 rounded-sm border border-input shadow-xs outline-none transition-colors checked:bg-primary checked:border-primary indeterminate:bg-primary indeterminate:border-primary dark:bg-input/30 dark:checked:bg-primary dark:checked:border-primary dark:indeterminate:bg-primary dark:indeterminate:border-primary focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:border-ring aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:checked:border-primary disabled:cursor-not-allowed disabled:bg-muted disabled:border-input group-has-disabled/field:opacity-50 relative after:absolute after:-inset-x-3 after:-inset-y-2",
+  {
+    variants: {
+      size: {
+        default: "size-4",
+        lg: "size-5",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+const indicatorVariants = cva(
+  "pointer-events-none absolute inset-0 grid place-content-center transition-opacity peer-disabled:text-muted-foreground text-primary-foreground",
+  {
+    variants: {
+      size: {
+        default: "[&>svg]:size-3",
+        lg: "[&>svg]:size-4",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  },
+);
+
+// Icon geometry matches Figma exactly per size (viewBox = native px, stroke-width 1.5)
+// rather than scaling a single 24px icon, which rendered the stroke ~33% thinner than Figma.
+const iconViewBox = size === "lg" ? "0 0 16 16" : "0 0 12 12";
+const checkPath = size === "lg" ? "M13.3333 4L6 11.3333L2.66667 8" : "M10 3L4.5 8.5L2 6";
+const dashPath = size === "lg" ? "M3.33333 8H12.6667" : "M2.5 6H9.5";
+---
+
+<label data-slot="checkbox" class="inline-flex items-center gap-2 cursor-pointer">
+  <span class="relative inline-flex items-center justify-center">
+    <input
+      id={id}
+      name={name}
+      type="checkbox"
+      data-indeterminate={indeterminate ? "" : undefined}
+      class={cn(checkboxVariants({ size }), className)}
+      {...props}
+    />
+    <span
+      data-slot="checkbox-indicator"
+      class={cn(indicatorVariants({ size }), "opacity-0 peer-checked:opacity-100 peer-indeterminate:opacity-0")}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox={iconViewBox}><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d={checkPath}/></svg>
+    </span>
+    <span
+      data-slot="checkbox-indeterminate-indicator"
+      class={cn(indicatorVariants({ size }), "opacity-0 peer-indeterminate:opacity-100")}
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox={iconViewBox}><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d={dashPath}/></svg>
+    </span>
+  </span>
+  <slot />
+</label>
+
+<script>
+  document.querySelectorAll("input[data-indeterminate]").forEach((el) => {
+    (el as HTMLInputElement).indeterminate = true;
+  });
+</script>

package/src/components/checkbox/index.ts

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

package/src/components/collapsible/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+All notable changes to the `Collapsible` component will be documented in this file.
+
+## Unreleased