@cl-light-ds/ui 0.1.0 → 0.3.0

package/src/components/checkbox/CHANGELOG.md

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

@@ -24,8 +24,8 @@
  * </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>
+ *   <Checkbox id="notifications-checkbox-disabled" disabled />
+ *   <Label for="notifications-checkbox-disabled" class="group-has-disabled:opacity-50">Enable notifications</Label>
  * </div>
  *
  * <Label

package/src/components/checkbox/index.ts

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

package/src/components/collapsible/CHANGELOG.md

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

package/src/components/collapsible/index.ts

@@ -1,4 +1,4 @@
-export { default as Collapsible } from "./Collapsible.astro";
-export { default as CollapsibleTrigger } from "./CollapsibleTrigger.astro";
-export { default as CollapsibleContent } from "./CollapsibleContent.astro";
-export { collapsibleContentVariants } from "./CollapsibleContent.astro";
+export { default as Collapsible } from "./Collapsible.astro";
+export { default as CollapsibleTrigger } from "./CollapsibleTrigger.astro";
+export { default as CollapsibleContent } from "./CollapsibleContent.astro";
+export { collapsibleContentVariants } from "./CollapsibleContent.astro";

package/src/components/combobox/CHANGELOG.md

@@ -1,27 +1,27 @@
-# Changelog
-
-All notable changes to the `Combobox` component family (`Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxSeparator`, `ComboboxEmpty`, `ComboboxTrigger`, `ComboboxValue`) are documented in this file.
-
-## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `5455-12863`)
-
-Styling-only pass — no props, components, or behavior were added or removed. The implementation (including the shared `InputGroup`/`InputGroupInput` it delegates trigger styling to) was already close to Figma; this fixed the remaining concrete mismatches found by comparing computed styles against the Figma spec.
-
-### Fixed
-
-- `ComboboxContent` (popover): computed border-radius was rendering at 8px instead of Figma's 6px, because the class string set both `rounded-md` and a later, conflicting `rounded-lg` — removed the erroneous `rounded-lg`.
-- `ComboboxItem`: radius was `rounded-sm` (4px); Figma specifies `rounded-lg` (8px) for items.
-- `ComboboxLabel` (group label, e.g. "Frontend"/"Backend"): was missing `font-medium` — Figma's group label is medium (500) weight, not the browser default.
-- `ComboboxList`: removed a duplicate, malformed `max-h-[...]` utility (`calc(--spacing(72)---spacing(9))` — invalid calc syntax) that was redundant with the correct `max-h-[min(18rem,calc(var(--available-height)-var(--anchor-height)))]` already present later in the same class string.
-
-### Added
-
-- `@figmaUrl` JSDoc tag on `Combobox.astro` (previously had none).
-
-### Changed (docs only)
-
-- Removed the "Sizes" preview section from the storybook page (`apps/web/.../_sections/combobox.astro`), since Figma has no distinct size variants for this component and showcasing one there implied it was a designed feature. The underlying `size` prop on `ComboboxInput` itself (`"sm" | "default" | "lg"`, delegated to `InputGroup`) was **not** removed — it's real, pre-existing functionality shared with other inputs, just no longer given its own demo/prop-table framing as a Figma-specified variant.
-
-### Notes
-
-- Figma's trigger box (border, radius, shadow, Default/Hover/Focus/Invalid/Disabled states), item hover highlight (`bg-background-hover`), and the selected-item checkmark visibility already matched exactly — verified via computed styles in the browser, not just source reading.
-- No new props/components were introduced, per explicit instruction — this was a pure token/styling correction pass.
+# Changelog
+
+All notable changes to the `Combobox` component family (`Combobox`, `ComboboxInput`, `ComboboxContent`, `ComboboxList`, `ComboboxItem`, `ComboboxGroup`, `ComboboxLabel`, `ComboboxSeparator`, `ComboboxEmpty`, `ComboboxTrigger`, `ComboboxValue`) are documented in this file.
+
+## 2026-09-08 — Figma alignment (ClickLearn Lightning Design Library, node `5455-12863`)
+
+Styling-only pass — no props, components, or behavior were added or removed. The implementation (including the shared `InputGroup`/`InputGroupInput` it delegates trigger styling to) was already close to Figma; this fixed the remaining concrete mismatches found by comparing computed styles against the Figma spec.
+
+### Fixed
+
+- `ComboboxContent` (popover): computed border-radius was rendering at 8px instead of Figma's 6px, because the class string set both `rounded-md` and a later, conflicting `rounded-lg` — removed the erroneous `rounded-lg`.
+- `ComboboxItem`: radius was `rounded-sm` (4px); Figma specifies `rounded-lg` (8px) for items.
+- `ComboboxLabel` (group label, e.g. "Frontend"/"Backend"): was missing `font-medium` — Figma's group label is medium (500) weight, not the browser default.
+- `ComboboxList`: removed a duplicate, malformed `max-h-[...]` utility (`calc(--spacing(72)---spacing(9))` — invalid calc syntax) that was redundant with the correct `max-h-[min(18rem,calc(var(--available-height)-var(--anchor-height)))]` already present later in the same class string.
+
+### Added
+
+- `@figmaUrl` JSDoc tag on `Combobox.astro` (previously had none).
+
+### Changed (docs only)
+
+- Removed the "Sizes" preview section from the storybook page (`apps/web/.../_sections/combobox.astro`), since Figma has no distinct size variants for this component and showcasing one there implied it was a designed feature. The underlying `size` prop on `ComboboxInput` itself (`"sm" | "default" | "lg"`, delegated to `InputGroup`) was **not** removed — it's real, pre-existing functionality shared with other inputs, just no longer given its own demo/prop-table framing as a Figma-specified variant.
+
+### Notes
+
+- Figma's trigger box (border, radius, shadow, Default/Hover/Focus/Invalid/Disabled states), item hover highlight (`bg-background-hover`), and the selected-item checkmark visibility already matched exactly — verified via computed styles in the browser, not just source reading.
+- No new props/components were introduced, per explicit instruction — this was a pure token/styling correction pass.

package/src/components/combobox/index.ts

@@ -1,11 +1,11 @@
-export { default as Combobox } from "./Combobox.astro";
-export { default as ComboboxContent } from "./ComboboxContent.astro";
-export { default as ComboboxEmpty } from "./ComboboxEmpty.astro";
-export { default as ComboboxGroup } from "./ComboboxGroup.astro";
-export { default as ComboboxInput } from "./ComboboxInput.astro";
-export { default as ComboboxItem } from "./ComboboxItem.astro";
-export { default as ComboboxLabel } from "./ComboboxLabel.astro";
-export { default as ComboboxList } from "./ComboboxList.astro";
-export { default as ComboboxSeparator } from "./ComboboxSeparator.astro";
-export { default as ComboboxTrigger } from "./ComboboxTrigger.astro";
-export { default as ComboboxValue } from "./ComboboxValue.astro";
+export { default as Combobox } from "./Combobox.astro";
+export { default as ComboboxContent } from "./ComboboxContent.astro";
+export { default as ComboboxEmpty } from "./ComboboxEmpty.astro";
+export { default as ComboboxGroup } from "./ComboboxGroup.astro";
+export { default as ComboboxInput } from "./ComboboxInput.astro";
+export { default as ComboboxItem } from "./ComboboxItem.astro";
+export { default as ComboboxLabel } from "./ComboboxLabel.astro";
+export { default as ComboboxList } from "./ComboboxList.astro";
+export { default as ComboboxSeparator } from "./ComboboxSeparator.astro";
+export { default as ComboboxTrigger } from "./ComboboxTrigger.astro";
+export { default as ComboboxValue } from "./ComboboxValue.astro";

package/src/components/date/CHANGELOG.md

@@ -1,18 +1,18 @@
-# Changelog
-
-All notable changes to the `Date` component will be documented in this file.
-
-## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `2329-6519`)
-
-Unlike Accordion/Combobox/Checkbox, `Date` is not an interactive widget — it's a lightweight, non-interactive date-*formatting* component (renders a plain `<time>`, no sub-components, no behavior library). Figma's "Date" page turned out to be a reference table of six formatting variants (Default, Short, Time, Full, Long, "Long with time") with sample output strings, not a visual widget spec.
-
-### Notes (no missing variants or props found)
-
-- All six variants Figma demos are already fully supported by the existing `format` (`"short" | "time" | "full" | "long"`, default `"long"`) and `includeTime` props — confirmed each one produces the exact same formatted output Figma shows (e.g. `format="full"` → "Friday, June 13, 2025"). No new props were needed.
-- Figma's "Short" sample text ("6/13/2025") doesn't match what `Intl.DateTimeFormat`'s real `dateStyle: "short"` produces ("6/13/25", 2-digit year — the correct standard short-style output). Left the component using the real `Intl` API rather than "fixing" it to match what was evidently a hand-typed mockup value.
-
-### Fixed
-
-- The rendered `<time>` element had **zero** default styling (`class={cn("", className)}` — a literal empty base string). Added `text-sm` plus a text color as the default — first set to `text-muted-foreground` per Figma's reference table (which styled the value text as regular-weight/muted), then corrected to `text-foreground` per your direct call.
-- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
-- Polished the demo page (`apps/web/.../_sections/date.astro`) and the component's own JSDoc `@preview`: the row labels ("Default:", "Short:", etc.) were plain unstyled `<div>`s; Figma styles them `text-foreground text-sm font-medium` (bold, dark) — added to both.
+# Changelog
+
+All notable changes to the `Date` component will be documented in this file.
+
+## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `2329-6519`)
+
+Unlike Accordion/Combobox/Checkbox, `Date` is not an interactive widget — it's a lightweight, non-interactive date-*formatting* component (renders a plain `<time>`, no sub-components, no behavior library). Figma's "Date" page turned out to be a reference table of six formatting variants (Default, Short, Time, Full, Long, "Long with time") with sample output strings, not a visual widget spec.
+
+### Notes (no missing variants or props found)
+
+- All six variants Figma demos are already fully supported by the existing `format` (`"short" | "time" | "full" | "long"`, default `"long"`) and `includeTime` props — confirmed each one produces the exact same formatted output Figma shows (e.g. `format="full"` → "Friday, June 13, 2025"). No new props were needed.
+- Figma's "Short" sample text ("6/13/2025") doesn't match what `Intl.DateTimeFormat`'s real `dateStyle: "short"` produces ("6/13/25", 2-digit year — the correct standard short-style output). Left the component using the real `Intl` API rather than "fixing" it to match what was evidently a hand-typed mockup value.
+
+### Fixed
+
+- The rendered `<time>` element had **zero** default styling (`class={cn("", className)}` — a literal empty base string). Added `text-sm` plus a text color as the default — first set to `text-muted-foreground` per Figma's reference table (which styled the value text as regular-weight/muted), then corrected to `text-foreground` per your direct call.
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- Polished the demo page (`apps/web/.../_sections/date.astro`) and the component's own JSDoc `@preview`: the row labels ("Default:", "Short:", etc.) were plain unstyled `<div>`s; Figma styles them `text-foreground text-sm font-medium` (bold, dark) — added to both.

package/src/components/date/index.ts

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

package/src/components/dialog/CHANGELOG.md

@@ -1,39 +1,39 @@
-# Changelog
-
-All notable changes to the `Dialog` component family (`Dialog`, `DialogTrigger`, `DialogContent`, `DialogOverlay`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`) are documented in this file.
-
-## Earlier (commit `c3cec7d`, undocumented at the time)
-
-- `DialogContent`: `rounded-xl` → `rounded-lg` (Figma binds 8px radius).
-- `DialogTitle`: `font-medium` → `font-semibold` (Figma title token is Semi Bold/600).
-- Added `Dialog.stories.ts`/`DialogStory.astro` (astrobook preview scaffolding).
-
-No changelog entry was added at the time — backfilled here for a complete history. Everything else in the family (`Dialog.astro`, `DialogTrigger`, `DialogOverlay`, `DialogHeader`, `DialogFooter`, `DialogDescription`, `DialogClose`, `index.ts`) was untouched since the original Bejamas import until this pass.
-
-## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `141-6002`)
-
-Figma shows a single "Opened" dialog state (a cookie-consent example: title, description, content slot, and a Close/Save-changes action row), which surfaced several real gaps beyond what `c3cec7d` had already fixed.
-
-### Fixed
-
-- `DialogContent`: panel background `bg-background` → `bg-card` — these are the same color in light mode but genuinely differ in dark mode (`--background` vs `--card`), so this was a real, if currently invisible, mismatch.
-- `DialogContent`: replaced the `ring-1 ring-foreground/10` approximation with an actual `border border-border` **and** `shadow-lg` — Figma's panel has both a visible 1px border and a distinct multi-layer drop shadow (explicitly annotated "shadow-lg" in the design tokens), not a single subtle ring.
-- `DialogContent`: **restructured** to match Figma's two-layer composition — an outer unpadded panel (bg/border/shadow/radius/position/animation only) now wraps an inner `<div class="grid gap-6 p-6 text-sm">` holding the slotted content, with the close button as a sibling of that inner wrapper rather than a child of it. Previously, the close button (`position: absolute`) was a child of the *padded* content div, so `top-4 right-4` was actually offset from the padding edge — i.e. 24px (padding) + 16px (`top-4`/`right-4`) = 40px from the panel's true corner, not the ~15px Figma shows. Now it's positioned relative to the outer unpadded panel, landing close to the corner as intended.
-- `DialogTitle`: was missing an explicit font-size entirely (relied on inherited/browser default) and used `leading-none` (line-height: 1). Figma specifies `text-xl` (20px) with a 24px line-height — added `text-xl leading-6`. Verified computed: `fontSize: 20px`, `lineHeight: 24px`.
-- `DialogClose`: was a bare, completely unstyled `<button>` — no hover state, no focus ring, no consistent sizing — despite every real usage example (`DialogStory.astro`, the storybook docs page, `Dialog.astro`'s own JSDoc) actually using the shared `Button` component for the footer's "Close" action instead. Figma's own close-button layer is literally named "Ghost" (matching `Button`'s `ghost` variant exactly). Rewrote `DialogClose` to render `<Button variant="ghost" size="icon-sm">` internally instead of a bare button, repositioned to `top-2 right-2` (matches the icon-button's own built-in padding placing the glyph near Figma's corner inset). Verified live: 32×32 hit area, correct hover/focus states inherited from `Button`.
-- Docs/examples (`Dialog.astro` JSDoc, `DialogStory.astro`, the storybook page): the footer's "Close" `Button` used `variant="outline"` (visible border) everywhere — but Figma's own layer name for that button is "Ghost" (no border, text-only until hover). Changed all three to `variant="ghost"`. **Reverted in the follow-up below** — the user confirmed the footer's secondary Close action should stay `outline`; the "Ghost" Figma layer name applies to the corner X close icon (`DialogClose`, see above), not this button.
-- `DialogFooter`: removed a dead, redundant `"gap-2"` first argument to `cn()` that was already superseded by `"flex justify-end gap-2"` later in the same call — the same class of bug `c3cec7d` fixed elsewhere (e.g. `TooltipContent`) but missed here.
-- `index.ts`: `DialogOverlay` existed and is used internally by `DialogContent` but was never exported, so consumers couldn't import or reference it by name. Added the export.
-- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
-
-### Notes
-
-- `DialogDescription` (`text-muted-foreground text-sm`) already matched Figma exactly — no change needed.
-- `DialogOverlay`'s `bg-black/10` backdrop color was left as-is — Figma's export didn't capture a visible backdrop to diff against, and a raw-black dimming overlay (rather than a theme-aware token) is a common, deliberate convention for modal backdrops regardless of light/dark theme.
-- The underlying `@data-slot/dialog` behavior library supports an `alertDialog` option that isn't exposed as a `Dialog` prop. Not added — Figma's file shows only one dialog variant, with no alert-dialog-specific visual spec to align against.
-- All values are token-based (`--card`, `--border`, `--foreground`, `--muted-foreground`, `--radius-lg`, Tailwind's `shadow-lg`) — no hardcoded arbitrary values introduced.
-
-### Fixed (follow-up)
-
-- Removed a leftover `border-red-800` demo class from the nested-dialog example (`Dialog.astro` JSDoc and the storybook docs page). It was inherited from the original Bejamas import and had been a silent no-op (no border-width utility was present to give it a visible width), but became visible once this pass added a real `border` to `DialogContent` — so it started rendering an unintended red border. The nested dialog now correctly falls back to the standard `border-border` color.
-- User correction: the footer's secondary "Close" `Button` (`Dialog.astro` JSDoc ×2, `DialogStory.astro`, the storybook page ×2) reverted from `variant="ghost"` back to `variant="outline"`. The corner X close icon (`DialogClose.astro`) stays `variant="ghost"`, matching Figma's "Ghost" layer name for that specific icon button — that layer name doesn't extend to the separate footer text button.
+# Changelog
+
+All notable changes to the `Dialog` component family (`Dialog`, `DialogTrigger`, `DialogContent`, `DialogOverlay`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`) are documented in this file.
+
+## Earlier (commit `c3cec7d`, undocumented at the time)
+
+- `DialogContent`: `rounded-xl` → `rounded-lg` (Figma binds 8px radius).
+- `DialogTitle`: `font-medium` → `font-semibold` (Figma title token is Semi Bold/600).
+- Added `Dialog.stories.ts`/`DialogStory.astro` (astrobook preview scaffolding).
+
+No changelog entry was added at the time — backfilled here for a complete history. Everything else in the family (`Dialog.astro`, `DialogTrigger`, `DialogOverlay`, `DialogHeader`, `DialogFooter`, `DialogDescription`, `DialogClose`, `index.ts`) was untouched since the original Bejamas import until this pass.
+
+## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `141-6002`)
+
+Figma shows a single "Opened" dialog state (a cookie-consent example: title, description, content slot, and a Close/Save-changes action row), which surfaced several real gaps beyond what `c3cec7d` had already fixed.
+
+### Fixed
+
+- `DialogContent`: panel background `bg-background` → `bg-card` — these are the same color in light mode but genuinely differ in dark mode (`--background` vs `--card`), so this was a real, if currently invisible, mismatch.
+- `DialogContent`: replaced the `ring-1 ring-foreground/10` approximation with an actual `border border-border` **and** `shadow-lg` — Figma's panel has both a visible 1px border and a distinct multi-layer drop shadow (explicitly annotated "shadow-lg" in the design tokens), not a single subtle ring.
+- `DialogContent`: **restructured** to match Figma's two-layer composition — an outer unpadded panel (bg/border/shadow/radius/position/animation only) now wraps an inner `<div class="grid gap-6 p-6 text-sm">` holding the slotted content, with the close button as a sibling of that inner wrapper rather than a child of it. Previously, the close button (`position: absolute`) was a child of the *padded* content div, so `top-4 right-4` was actually offset from the padding edge — i.e. 24px (padding) + 16px (`top-4`/`right-4`) = 40px from the panel's true corner, not the ~15px Figma shows. Now it's positioned relative to the outer unpadded panel, landing close to the corner as intended.
+- `DialogTitle`: was missing an explicit font-size entirely (relied on inherited/browser default) and used `leading-none` (line-height: 1). Figma specifies `text-xl` (20px) with a 24px line-height — added `text-xl leading-6`. Verified computed: `fontSize: 20px`, `lineHeight: 24px`.
+- `DialogClose`: was a bare, completely unstyled `<button>` — no hover state, no focus ring, no consistent sizing — despite every real usage example (`DialogStory.astro`, the storybook docs page, `Dialog.astro`'s own JSDoc) actually using the shared `Button` component for the footer's "Close" action instead. Figma's own close-button layer is literally named "Ghost" (matching `Button`'s `ghost` variant exactly). Rewrote `DialogClose` to render `<Button variant="ghost" size="icon-sm">` internally instead of a bare button, repositioned to `top-2 right-2` (matches the icon-button's own built-in padding placing the glyph near Figma's corner inset). Verified live: 32×32 hit area, correct hover/focus states inherited from `Button`.
+- Docs/examples (`Dialog.astro` JSDoc, `DialogStory.astro`, the storybook page): the footer's "Close" `Button` used `variant="outline"` (visible border) everywhere — but Figma's own layer name for that button is "Ghost" (no border, text-only until hover). Changed all three to `variant="ghost"`. **Reverted in the follow-up below** — the user confirmed the footer's secondary Close action should stay `outline`; the "Ghost" Figma layer name applies to the corner X close icon (`DialogClose`, see above), not this button.
+- `DialogFooter`: removed a dead, redundant `"gap-2"` first argument to `cn()` that was already superseded by `"flex justify-end gap-2"` later in the same call — the same class of bug `c3cec7d` fixed elsewhere (e.g. `TooltipContent`) but missed here.
+- `index.ts`: `DialogOverlay` existed and is used internally by `DialogContent` but was never exported, so consumers couldn't import or reference it by name. Added the export.
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+
+### Notes
+
+- `DialogDescription` (`text-muted-foreground text-sm`) already matched Figma exactly — no change needed.
+- `DialogOverlay`'s `bg-black/10` backdrop color was left as-is — Figma's export didn't capture a visible backdrop to diff against, and a raw-black dimming overlay (rather than a theme-aware token) is a common, deliberate convention for modal backdrops regardless of light/dark theme.
+- The underlying `@data-slot/dialog` behavior library supports an `alertDialog` option that isn't exposed as a `Dialog` prop. Not added — Figma's file shows only one dialog variant, with no alert-dialog-specific visual spec to align against.
+- All values are token-based (`--card`, `--border`, `--foreground`, `--muted-foreground`, `--radius-lg`, Tailwind's `shadow-lg`) — no hardcoded arbitrary values introduced.
+
+### Fixed (follow-up)
+
+- Removed a leftover `border-red-800` demo class from the nested-dialog example (`Dialog.astro` JSDoc and the storybook docs page). It was inherited from the original Bejamas import and had been a silent no-op (no border-width utility was present to give it a visible width), but became visible once this pass added a real `border` to `DialogContent` — so it started rendering an unintended red border. The nested dialog now correctly falls back to the standard `border-border` color.
+- User correction: the footer's secondary "Close" `Button` (`Dialog.astro` JSDoc ×2, `DialogStory.astro`, the storybook page ×2) reverted from `variant="ghost"` back to `variant="outline"`. The corner X close icon (`DialogClose.astro`) stays `variant="ghost"`, matching Figma's "Ghost" layer name for that specific icon button — that layer name doesn't extend to the separate footer text button.

package/src/components/dialog/index.ts

@@ -1,9 +1,9 @@
-export { default as Dialog } from "./Dialog.astro";
-export { default as DialogTitle } from "./DialogTitle.astro";
-export { default as DialogDescription } from "./DialogDescription.astro";
-export { default as DialogContent } from "./DialogContent.astro";
-export { default as DialogFooter } from "./DialogFooter.astro";
-export { default as DialogClose } from "./DialogClose.astro";
-export { default as DialogHeader } from "./DialogHeader.astro";
-export { default as DialogTrigger } from "./DialogTrigger.astro";
-export { default as DialogOverlay } from "./DialogOverlay.astro";
+export { default as Dialog } from "./Dialog.astro";
+export { default as DialogTitle } from "./DialogTitle.astro";
+export { default as DialogDescription } from "./DialogDescription.astro";
+export { default as DialogContent } from "./DialogContent.astro";
+export { default as DialogFooter } from "./DialogFooter.astro";
+export { default as DialogClose } from "./DialogClose.astro";
+export { default as DialogHeader } from "./DialogHeader.astro";
+export { default as DialogTrigger } from "./DialogTrigger.astro";
+export { default as DialogOverlay } from "./DialogOverlay.astro";