@cl-light-ds/ui 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cl-light-ds/ui",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "ClickLearn Lightning Design System — Astro UI component library.",
   "license": "MIT",
   "type": "module",

package/src/components/accordion/CHANGELOG.md

@@ -1,41 +1,41 @@
-# Changelog
-
-All notable changes to the `Accordion` component family (`Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`) are documented in this file.
-
-## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `133-7547`)
-
-Aligned the component visually and functionally with Figma, while preserving the existing 4-part structure and all pre-existing props.
-
-### Added
-
-- `Accordion`: `shape` prop (`"default" | "flush" | "rounded"`) — `default` keeps the bottom-border divider list, `flush` removes dividers entirely, `rounded` renders each item as its own bordered, rounded card with an 8px gap between items.
-- `AccordionItem`: `disabled` prop.
-- `AccordionTrigger`:
-  - `icon` — leading icon rendered before the label (e.g. a lucide-astro icon component).
-  - `badge` — optional pill (now backed by the shared `Badge` component: `variant="outline" shape="pill" size="sm"`) rendered next to the label.
-  - `disabled` prop.
-  - `indicatorIcon` (`"plus-minus" | "chevron"`, default `"plus-minus"`) — style of the built-in expand/collapse indicator.
-
-### Changed
-
-- `AccordionTrigger`: replaced the hardcoded chevron up/down indicator with a Plus/Minus swap by default (matches Figma; chevron still available via `indicatorIcon="chevron"`).
-- `AccordionTrigger`: padding `py-4` → `p-3`; bottom padding reduces to `pb-1` when expanded, tightening the header-to-body gap.
-- `AccordionTrigger` / `AccordionContent`: label and caption text size `text-sm` → `text-xs` (12px), matching Figma's actual type token (this design system's `text-sm` utility is 14px).
-- `AccordionContent`: caption color now explicit `text-muted-foreground` (previously inherited the default dark foreground color).
-- `AccordionContent`: horizontal padding now `pr-3 pl-(--accordion-indent, --spacing(3))` — a shared `--accordion-indent` CSS variable (set on `AccordionItem`, `--spacing(3)` by default, `--spacing(9)` when the trigger has a lead icon) so the body text aligns under the label, not under the lead icon.
-- `AccordionContent`: `pb-4` → `pb-3` (12px); `pt-0` → `pt-1` (4px) — combined with the trigger's `aria-expanded:pb-1`, the header-to-body gap is 8px total.
-- `AccordionItem`: shape-driven classes for border/radius/background (`default` → `border-b`, `rounded` → `border` + `rounded-lg` + `bg-card`, `flush` → none).
-- Focus ring moved from the trigger button to `AccordionItem` (via `has-[[data-slot=accordion-trigger]:focus-visible]:*`), so a focused item's ring wraps the whole box — including the expanded caption — not just the header row. Reverted an interim change that used `focus:` (any pointer/click focus); it is `focus-visible:` only, so a mouse click does not show the ring.
-- Fixed the malformed `@figmaUrl` JSDoc (previously two concatenated URLs) to the correct single ClickLearn Lightning Design Library link.
-
-### Fixed
-
-- Lead icon color: was `text-muted-foreground` (gray); Figma's actual asset is `text-foreground` (dark, matching the label).
-- Lead icon size: the `<svg>` was rendering at its native 24px inside a 20px (later 16px) wrapper span, because the size class was only applied to the wrapper, not the icon itself — silently eating into the icon-to-label gap. Fixed by passing the size class directly to the icon component.
-- Badge text picked up the trigger's `hover:underline` (text-decoration propagates to inline descendants). Added `no-underline` — currently not present after switching the badge to the shared `Badge` component with no `class` override, so this regressed; needs revisiting if the badge should stay non-underlined on hover.
-
-### Notes
-
-- `shape` lives only on the `Accordion` root (cascades to all items uniformly) — Figma's "Nested" demo renders identically to "Rounded", so it isn't a distinct shape value.
-- `disabled`, `badge`, and the `flush` shape value have no dedicated demo frame in the Figma file; they were implemented using the design system's existing muted/border tokens rather than a pixel-exact spec.
-- All spacing values are token-based (Tailwind's `--spacing` scale) or reference `globals.css` color tokens — no hardcoded arbitrary pixel/rem/hex values remain in the four component files.
+# Changelog
+
+All notable changes to the `Accordion` component family (`Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`) are documented in this file.
+
+## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `133-7547`)
+
+Aligned the component visually and functionally with Figma, while preserving the existing 4-part structure and all pre-existing props.
+
+### Added
+
+- `Accordion`: `shape` prop (`"default" | "flush" | "rounded"`) — `default` keeps the bottom-border divider list, `flush` removes dividers entirely, `rounded` renders each item as its own bordered, rounded card with an 8px gap between items.
+- `AccordionItem`: `disabled` prop.
+- `AccordionTrigger`:
+  - `icon` — leading icon rendered before the label (e.g. a lucide-astro icon component).
+  - `badge` — optional pill (now backed by the shared `Badge` component: `variant="outline" shape="pill" size="sm"`) rendered next to the label.
+  - `disabled` prop.
+  - `indicatorIcon` (`"plus-minus" | "chevron"`, default `"plus-minus"`) — style of the built-in expand/collapse indicator.
+
+### Changed
+
+- `AccordionTrigger`: replaced the hardcoded chevron up/down indicator with a Plus/Minus swap by default (matches Figma; chevron still available via `indicatorIcon="chevron"`).
+- `AccordionTrigger`: padding `py-4` → `p-3`; bottom padding reduces to `pb-1` when expanded, tightening the header-to-body gap.
+- `AccordionTrigger` / `AccordionContent`: label and caption text size `text-sm` → `text-xs` (12px), matching Figma's actual type token (this design system's `text-sm` utility is 14px).
+- `AccordionContent`: caption color now explicit `text-muted-foreground` (previously inherited the default dark foreground color).
+- `AccordionContent`: horizontal padding now `pr-3 pl-(--accordion-indent, --spacing(3))` — a shared `--accordion-indent` CSS variable (set on `AccordionItem`, `--spacing(3)` by default, `--spacing(9)` when the trigger has a lead icon) so the body text aligns under the label, not under the lead icon.
+- `AccordionContent`: `pb-4` → `pb-3` (12px); `pt-0` → `pt-1` (4px) — combined with the trigger's `aria-expanded:pb-1`, the header-to-body gap is 8px total.
+- `AccordionItem`: shape-driven classes for border/radius/background (`default` → `border-b`, `rounded` → `border` + `rounded-lg` + `bg-card`, `flush` → none).
+- Focus ring moved from the trigger button to `AccordionItem` (via `has-[[data-slot=accordion-trigger]:focus-visible]:*`), so a focused item's ring wraps the whole box — including the expanded caption — not just the header row. Reverted an interim change that used `focus:` (any pointer/click focus); it is `focus-visible:` only, so a mouse click does not show the ring.
+- Fixed the malformed `@figmaUrl` JSDoc (previously two concatenated URLs) to the correct single ClickLearn Lightning Design Library link.
+
+### Fixed
+
+- Lead icon color: was `text-muted-foreground` (gray); Figma's actual asset is `text-foreground` (dark, matching the label).
+- Lead icon size: the `<svg>` was rendering at its native 24px inside a 20px (later 16px) wrapper span, because the size class was only applied to the wrapper, not the icon itself — silently eating into the icon-to-label gap. Fixed by passing the size class directly to the icon component.
+- Badge text picked up the trigger's `hover:underline` (text-decoration propagates to inline descendants). Added `no-underline` — currently not present after switching the badge to the shared `Badge` component with no `class` override, so this regressed; needs revisiting if the badge should stay non-underlined on hover.
+
+### Notes
+
+- `shape` lives only on the `Accordion` root (cascades to all items uniformly) — Figma's "Nested" demo renders identically to "Rounded", so it isn't a distinct shape value.
+- `disabled`, `badge`, and the `flush` shape value have no dedicated demo frame in the Figma file; they were implemented using the design system's existing muted/border tokens rather than a pixel-exact spec.
+- All spacing values are token-based (Tailwind's `--spacing` scale) or reference `globals.css` color tokens — no hardcoded arbitrary pixel/rem/hex values remain in the four component files.

package/src/components/accordion/index.ts

@@ -1,4 +1,4 @@
-export { default as Accordion } from "./Accordion.astro";
-export { default as AccordionItem } from "./AccordionItem.astro";
-export { default as AccordionTrigger } from "./AccordionTrigger.astro";
-export { default as AccordionContent } from "./AccordionContent.astro";
+export { default as Accordion } from "./Accordion.astro";
+export { default as AccordionItem } from "./AccordionItem.astro";
+export { default as AccordionTrigger } from "./AccordionTrigger.astro";
+export { default as AccordionContent } from "./AccordionContent.astro";

package/src/components/alert/CHANGELOG.md

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

package/src/components/alert/index.ts

@@ -1,4 +1,4 @@
-export { default as Alert } from "./Alert.astro";
-export { default as AlertTitle } from "./AlertTitle.astro";
-export { default as AlertDescription } from "./AlertDescription.astro";
-
+export { default as Alert } from "./Alert.astro";
+export { default as AlertTitle } from "./AlertTitle.astro";
+export { default as AlertDescription } from "./AlertDescription.astro";
+

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/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";
+

package/src/components/breadcrumb/CHANGELOG.md

@@ -1,24 +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.
+# 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

@@ -1,5 +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";
-
+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/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";
+

package/src/components/button-group/CHANGELOG.md

@@ -1,34 +1,34 @@
-# Changelog for ButtonGroup.astro
-
-All notable changes to the `ButtonGroup` component will be documented in this file.
-
-## Date 8th Sep 2026
-## Figma alignment (node 114-9882)
-
-### Sizing & Spacing
-
-- **Radius fixed:** `Button.astro` was forcing `in-data-[slot=button-group]:rounded-md` (6px) on the `default`, `sm`, `lg`, and `icon-sm` sizes whenever a button sat inside a group, while `icon` and `icon-lg` had no such override. Figma's grouped item corners are unambiguously `--radius/rounded-lg` (8px, same token as `--radius-lg` in `globals.css`) across every size. Removed the override entirely — end-item corners on a `ButtonGroup` now render at 8px consistently, matching standalone `Button` and every size.
-- No changes were needed to `ButtonGroup.astro`'s own merge logic (`rounded-e-lg!`, `border-s-0`, etc.) — it already resolved to 8px correctly; the bug was solely in `Button.astro`'s per-size override.
-
-### States (new, `Button.astro`, scoped via `in-data-[slot=button-group]:`)
-
-Previously, grouped buttons had no state styling of their own — they just inherited standalone `outline`-variant hover (`hover:bg-background-hover`) and the shared global focus ring. Figma's `Button Group` states are defined per-size in the `Button Group / Items` master symbols frame (node `114:11217`) — note the separate `States` showcase page (node `2597:6822`) had its `Hover`/`Focus` symbol instances swapped, so the master symbols frame was used as the authoritative source instead:
-
-- **Hover:** background becomes `bg-background-hover` (`#f4f4f5`, existing `--background-hover` token), border uses Figma's `accent` variable (`#ebf3fc`) — which doesn't match this codebase's `--accent` token (a neutral gray) but is identical to the existing `--badge-accent`/`--primary-50` token, so bound to `border-badge-accent` (same token/pattern `Badge.astro` already uses for its own `accent` variant). No shadow. New `in-data-[slot=button-group]:hover:*` rule on `Button.astro`.
-- **Focus-visible:** background stays `bg-background` (white, unchanged), border is `border-ring` (`#5f9de6`, existing `--ring` token), plus a 2px `ring-chart-1` shadow (the effect is literally named `border-focus` in the Figma file). This is **exactly** `Button.astro`'s existing global `focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1` rule — no grouped-context override needed; grouped and standalone buttons share identical focus-visible styling.
-- **Disabled:** unchanged — `bg-muted`/`text-muted-foreground`/`border-transparent` from `Button.astro`'s shared `disabled:` classes already matches Figma's grouped disabled state (`bg-muted`/`border-muted`/`text-muted-foreground`) visually.
-- **Default:** unchanged — Figma's grouped item (`bg-background`/`border-border`/`text-foreground`) is exactly `Button`'s existing `outline` variant, which is what every documented `ButtonGroup` usage already passes.
-
-### Storybook & Docs (`_sections/button-group.astro`)
-
-- Added a "Disabled" preview block, alongside the existing `Preview`/`Vertical orientation`/`Sizes` sections, so the disabled state is visible in Storybook.
-
-### Not changed (flagged, not acted on)
-
-A few things in Figma's `Button Group` variants don't match `Button`'s already-finalized standalone sizing from its own alignment pass, and read more like authoring artifacts in the Figma file than intentional grouped-only rules — left as-is rather than re-touching `Button.astro`'s validated standalone spacing:
-
-- Figma's grouped "Medium/Default" item uses 8px horizontal padding vs. standalone `Button` `default` size's 10px (`px-2.5`). Small and Large sizes match their standalone counterparts exactly, so this looks like one mistyped padding token in the Figma file.
-- Figma's grouped `lg` item shows a 6px icon/label gap vs. `Button`'s current `lg` gap of 4px (`gap-1`).
-- Figma's grouped icons are a flat 14px (text mode) / 16px (icon-only) regardless of size, vs. `Button`'s current per-size icon scaling (14/16/20 for sm/default/lg) — which the prior `Button` alignment pass deliberately validated against `Button`'s own (different) Figma variants.
-
-## Unreleased
+# Changelog for ButtonGroup.astro
+
+All notable changes to the `ButtonGroup` component will be documented in this file.
+
+## Date 8th Sep 2026
+## Figma alignment (node 114-9882)
+
+### Sizing & Spacing
+
+- **Radius fixed:** `Button.astro` was forcing `in-data-[slot=button-group]:rounded-md` (6px) on the `default`, `sm`, `lg`, and `icon-sm` sizes whenever a button sat inside a group, while `icon` and `icon-lg` had no such override. Figma's grouped item corners are unambiguously `--radius/rounded-lg` (8px, same token as `--radius-lg` in `globals.css`) across every size. Removed the override entirely — end-item corners on a `ButtonGroup` now render at 8px consistently, matching standalone `Button` and every size.
+- No changes were needed to `ButtonGroup.astro`'s own merge logic (`rounded-e-lg!`, `border-s-0`, etc.) — it already resolved to 8px correctly; the bug was solely in `Button.astro`'s per-size override.
+
+### States (new, `Button.astro`, scoped via `in-data-[slot=button-group]:`)
+
+Previously, grouped buttons had no state styling of their own — they just inherited standalone `outline`-variant hover (`hover:bg-background-hover`) and the shared global focus ring. Figma's `Button Group` states are defined per-size in the `Button Group / Items` master symbols frame (node `114:11217`) — note the separate `States` showcase page (node `2597:6822`) had its `Hover`/`Focus` symbol instances swapped, so the master symbols frame was used as the authoritative source instead:
+
+- **Hover:** background becomes `bg-background-hover` (`#f4f4f5`, existing `--background-hover` token), border uses Figma's `accent` variable (`#ebf3fc`) — which doesn't match this codebase's `--accent` token (a neutral gray) but is identical to the existing `--badge-accent`/`--primary-50` token, so bound to `border-badge-accent` (same token/pattern `Badge.astro` already uses for its own `accent` variant). No shadow. New `in-data-[slot=button-group]:hover:*` rule on `Button.astro`.
+- **Focus-visible:** background stays `bg-background` (white, unchanged), border is `border-ring` (`#5f9de6`, existing `--ring` token), plus a 2px `ring-chart-1` shadow (the effect is literally named `border-focus` in the Figma file). This is **exactly** `Button.astro`'s existing global `focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-chart-1` rule — no grouped-context override needed; grouped and standalone buttons share identical focus-visible styling.
+- **Disabled:** unchanged — `bg-muted`/`text-muted-foreground`/`border-transparent` from `Button.astro`'s shared `disabled:` classes already matches Figma's grouped disabled state (`bg-muted`/`border-muted`/`text-muted-foreground`) visually.
+- **Default:** unchanged — Figma's grouped item (`bg-background`/`border-border`/`text-foreground`) is exactly `Button`'s existing `outline` variant, which is what every documented `ButtonGroup` usage already passes.
+
+### Storybook & Docs (`_sections/button-group.astro`)
+
+- Added a "Disabled" preview block, alongside the existing `Preview`/`Vertical orientation`/`Sizes` sections, so the disabled state is visible in Storybook.
+
+### Not changed (flagged, not acted on)
+
+A few things in Figma's `Button Group` variants don't match `Button`'s already-finalized standalone sizing from its own alignment pass, and read more like authoring artifacts in the Figma file than intentional grouped-only rules — left as-is rather than re-touching `Button.astro`'s validated standalone spacing:
+
+- Figma's grouped "Medium/Default" item uses 8px horizontal padding vs. standalone `Button` `default` size's 10px (`px-2.5`). Small and Large sizes match their standalone counterparts exactly, so this looks like one mistyped padding token in the Figma file.
+- Figma's grouped `lg` item shows a 6px icon/label gap vs. `Button`'s current `lg` gap of 4px (`gap-1`).
+- Figma's grouped icons are a flat 14px (text mode) / 16px (icon-only) regardless of size, vs. `Button`'s current per-size icon scaling (14/16/20 for sm/default/lg) — which the prior `Button` alignment pass deliberately validated against `Button`'s own (different) Figma variants.
+
+## Unreleased

package/src/components/button-group/index.ts

@@ -1,3 +1,3 @@
-export { default as ButtonGroup } from "./ButtonGroup.astro";
-export { default as ButtonGroupSeparator } from "./ButtonGroupSeparator.astro";
-export { default as ButtonGroupText } from "./ButtonGroupText.astro";
+export { default as ButtonGroup } from "./ButtonGroup.astro";
+export { default as ButtonGroupSeparator } from "./ButtonGroupSeparator.astro";
+export { default as ButtonGroupText } from "./ButtonGroupText.astro";