@cl-light-ds/ui 0.1.0 → 0.3.0

package/src/components/dropdown-menu/dropdown-menu-item-variants.ts

@@ -1,24 +1,24 @@
-import { cva } from "class-variance-authority";
-
-/**
- * Shared box classes for DropdownMenuItem / DropdownMenuCheckboxItem / DropdownMenuRadioItem.
- * Kept in one place so all three item components stay pixel-identical at rest.
- */
-export const itemVariants = cva(
-  "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-lg border border-transparent outline-hidden transition-colors select-none data-inset:pl-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-chart-1 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "p-2 text-xs font-semibold text-foreground hover:bg-background-hover hover:text-foreground",
-        destructive:
-          "p-2 text-xs font-semibold text-destructive hover:bg-background-hover hover:text-destructive dark:hover:bg-destructive/20 [&_svg]:text-destructive",
-        category: "pointer-events-none gap-1 pt-1 pr-1 pb-0 pl-1 text-xs font-medium text-muted-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export type ItemVariant = "default" | "destructive" | "category";
+import { cva } from "class-variance-authority";
+
+/**
+ * Shared box classes for DropdownMenuItem / DropdownMenuCheckboxItem / DropdownMenuRadioItem.
+ * Kept in one place so all three item components stay pixel-identical at rest.
+ */
+export const itemVariants = cva(
+  "group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-lg border border-transparent outline-hidden transition-colors select-none data-inset:pl-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-chart-1 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "p-2 text-xs font-semibold text-foreground hover:bg-background-hover hover:text-foreground",
+        destructive:
+          "p-2 text-xs font-semibold text-destructive hover:bg-background-hover hover:text-destructive dark:hover:bg-destructive/20 [&_svg]:text-destructive",
+        category: "pointer-events-none gap-1 pt-1 pr-1 pb-0 pl-1 text-xs font-medium text-muted-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export type ItemVariant = "default" | "destructive" | "category";

package/src/components/dropdown-menu/index.ts

@@ -1,12 +1,12 @@
-export { default as DropdownMenu } from "./DropdownMenu.astro";
-export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.astro";
-export { default as DropdownMenuContent } from "./DropdownMenuContent.astro";
-export { default as DropdownMenuGroup } from "./DropdownMenuGroup.astro";
-export { default as DropdownMenuItem } from "./DropdownMenuItem.astro";
-export { default as DropdownMenuLabel } from "./DropdownMenuLabel.astro";
-export { default as DropdownMenuPortal } from "./DropdownMenuPortal.astro";
-export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.astro";
-export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.astro";
-export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.astro";
-export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.astro";
-export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.astro";
+export { default as DropdownMenu } from "./DropdownMenu.astro";
+export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.astro";
+export { default as DropdownMenuContent } from "./DropdownMenuContent.astro";
+export { default as DropdownMenuGroup } from "./DropdownMenuGroup.astro";
+export { default as DropdownMenuItem } from "./DropdownMenuItem.astro";
+export { default as DropdownMenuLabel } from "./DropdownMenuLabel.astro";
+export { default as DropdownMenuPortal } from "./DropdownMenuPortal.astro";
+export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.astro";
+export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.astro";
+export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.astro";
+export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.astro";
+export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.astro";

package/src/components/field/CHANGELOG.md

@@ -1,33 +1,33 @@
-# Changelog
-
-All notable changes to the `Field` component will be documented in this file.
-
-## 2026-09-09 — Fixed control-to-label vertical alignment for native checkbox/radio
-
-### Fixed
-
-- `Field` (`orientation="horizontal"` with a `FieldContent` child, e.g. checkbox/radio + label + description): the `mt-px` nudge that vertically aligns the control against the label's line was written as `[&>[role=checkbox],[role=radio]]` — a CSS selector bug where the `>` (direct-child) combinator only bound to the first alternative (`[role=checkbox]`); the second (`[role=radio]`) was an unscoped, effectively dead alternative. Separately, the selector only matched an explicit `role="checkbox"`/`role="radio"` **attribute**, which Radix-style custom controls set but a plain native `<input type="checkbox">` never does (the role is implicit/computed, not a literal attribute) — so the nudge silently never applied to native checkbox/radio inputs.
-- Rewrote the selector as `[&_[role=checkbox],&_[role=radio],&_input[type=checkbox],&_input[type=radio]]` — correctly repeats the combinator for every alternative, switches from a direct-child (`>`) to a descendant (`_`) combinator (since `Checkbox` wraps its native input in its own `<label>`/`<span>`, so the input is not a direct child of `Field`), and adds explicit matching for native `input[type=checkbox]`/`input[type=radio]`.
-- Verified live: a `Checkbox` inside `Field`/`FieldContent` (checkbox + label + description) now measures ~1px margin-top, centering the 16px box against the label's line to within a sub-pixel difference — previously 0px (top-aligned, visibly off-center against the label specifically once a description pushed the block taller).
-
-### Notes
-
-- Same underlying bug also affects `RadioGroupItem` (also a plain element with no explicit `role` attribute) when used the same way — not otherwise touched in this pass, but now covered by this same fix since it targets `Field`.
-
-## 2026-09-09 — Follow-up: target the whole control, not just its native input
-
-The `input[type=checkbox]`/`input[type=radio]` matching added above was itself incomplete: `Checkbox` renders its icon overlay as an `absolute inset-0` sibling positioned relative to a *different* wrapping `<span>`, not relative to the `<input>`. Nudging the input alone with `margin-top` moved the box border but left the overlaid checkmark/dash icon in place, desyncing them by the nudge amount.
-
-### Changed
-
-- Selector updated (again) to `[&_[role=checkbox],&_[role=radio],&_[data-slot=checkbox],&_[data-slot=radio-group-item]]` — dropped the raw `input[type=checkbox]`/`input[type=radio]` matching in favor of `[data-slot=checkbox]`, a new marker `Checkbox` now sets on its outermost `<label>` (the element that actually contains the input *and* its icon overlay as one atomic unit). `RadioGroupItem` already exposes `data-slot="radio-group-item"` on its own root element, so it needed no changes.
-- Verified live: box and icon now move together (0px delta between them) when the `Field` nudge applies.
-
-## 2026-09-09 — Nudge value corrected to match Figma's actual mechanism (`mt-px` → `mt-0.5`)
-
-The `mt-px` (1px) value above was a derived approximation, not sourced from Figma. Checked Figma's actual "Checkbox Combo" node directly: it wraps the checkbox in `p-0.5` (2px padding on all sides, effectively a 2px top offset) inside an `items-start` row, and its label uses an explicit `leading-[20px]` (20px line-height) — not `FieldLabel`'s `leading-snug` (19.25px) approximation. With a 16px checkbox: `(20 - 16) / 2 = 2px` offset centers it exactly.
-
-### Changed
-
-- `mt-px` → `mt-0.5` in both the `horizontal` and `responsive` variant selectors, matching Figma's literal `p-0.5` mechanism instead of a derived guess.
-- Verified live: with `FieldLabel`'s actual 19.25px line-height, this leaves a ~0.375px residual (imperceptible) rather than a guessed value that happened to look close. A sibling demo using Figma's exact `leading-[20px]` (see `checkbox`'s "Selectable card" changelog entry) now centers to **0.000px**.
+# Changelog
+
+All notable changes to the `Field` component will be documented in this file.
+
+## 2026-09-09 — Fixed control-to-label vertical alignment for native checkbox/radio
+
+### Fixed
+
+- `Field` (`orientation="horizontal"` with a `FieldContent` child, e.g. checkbox/radio + label + description): the `mt-px` nudge that vertically aligns the control against the label's line was written as `[&>[role=checkbox],[role=radio]]` — a CSS selector bug where the `>` (direct-child) combinator only bound to the first alternative (`[role=checkbox]`); the second (`[role=radio]`) was an unscoped, effectively dead alternative. Separately, the selector only matched an explicit `role="checkbox"`/`role="radio"` **attribute**, which Radix-style custom controls set but a plain native `<input type="checkbox">` never does (the role is implicit/computed, not a literal attribute) — so the nudge silently never applied to native checkbox/radio inputs.
+- Rewrote the selector as `[&_[role=checkbox],&_[role=radio],&_input[type=checkbox],&_input[type=radio]]` — correctly repeats the combinator for every alternative, switches from a direct-child (`>`) to a descendant (`_`) combinator (since `Checkbox` wraps its native input in its own `<label>`/`<span>`, so the input is not a direct child of `Field`), and adds explicit matching for native `input[type=checkbox]`/`input[type=radio]`.
+- Verified live: a `Checkbox` inside `Field`/`FieldContent` (checkbox + label + description) now measures ~1px margin-top, centering the 16px box against the label's line to within a sub-pixel difference — previously 0px (top-aligned, visibly off-center against the label specifically once a description pushed the block taller).
+
+### Notes
+
+- Same underlying bug also affects `RadioGroupItem` (also a plain element with no explicit `role` attribute) when used the same way — not otherwise touched in this pass, but now covered by this same fix since it targets `Field`.
+
+## 2026-09-09 — Follow-up: target the whole control, not just its native input
+
+The `input[type=checkbox]`/`input[type=radio]` matching added above was itself incomplete: `Checkbox` renders its icon overlay as an `absolute inset-0` sibling positioned relative to a *different* wrapping `<span>`, not relative to the `<input>`. Nudging the input alone with `margin-top` moved the box border but left the overlaid checkmark/dash icon in place, desyncing them by the nudge amount.
+
+### Changed
+
+- Selector updated (again) to `[&_[role=checkbox],&_[role=radio],&_[data-slot=checkbox],&_[data-slot=radio-group-item]]` — dropped the raw `input[type=checkbox]`/`input[type=radio]` matching in favor of `[data-slot=checkbox]`, a new marker `Checkbox` now sets on its outermost `<label>` (the element that actually contains the input *and* its icon overlay as one atomic unit). `RadioGroupItem` already exposes `data-slot="radio-group-item"` on its own root element, so it needed no changes.
+- Verified live: box and icon now move together (0px delta between them) when the `Field` nudge applies.
+
+## 2026-09-09 — Nudge value corrected to match Figma's actual mechanism (`mt-px` → `mt-0.5`)
+
+The `mt-px` (1px) value above was a derived approximation, not sourced from Figma. Checked Figma's actual "Checkbox Combo" node directly: it wraps the checkbox in `p-0.5` (2px padding on all sides, effectively a 2px top offset) inside an `items-start` row, and its label uses an explicit `leading-[20px]` (20px line-height) — not `FieldLabel`'s `leading-snug` (19.25px) approximation. With a 16px checkbox: `(20 - 16) / 2 = 2px` offset centers it exactly.
+
+### Changed
+
+- `mt-px` → `mt-0.5` in both the `horizontal` and `responsive` variant selectors, matching Figma's literal `p-0.5` mechanism instead of a derived guess.
+- Verified live: with `FieldLabel`'s actual 19.25px line-height, this leaves a ~0.375px residual (imperceptible) rather than a guessed value that happened to look close. A sibling demo using Figma's exact `leading-[20px]` (see `checkbox`'s "Selectable card" changelog entry) now centers to **0.000px**.

package/src/components/field/index.ts

@@ -1,10 +1,10 @@
-export { default as Field } from "./Field.astro";
-export { default as FieldContent } from "./FieldContent.astro";
-export { default as FieldDescription } from "./FieldDescription.astro";
-export { default as FieldError } from "./FieldError.astro";
-export { default as FieldGroup } from "./FieldGroup.astro";
-export { default as FieldLabel } from "./FieldLabel.astro";
-export { default as FieldLegend } from "./FieldLegend.astro";
-export { default as FieldSeparator } from "./FieldSeparator.astro";
-export { default as FieldSet } from "./FieldSet.astro";
-export { default as FieldTitle } from "./FieldTitle.astro";
+export { default as Field } from "./Field.astro";
+export { default as FieldContent } from "./FieldContent.astro";
+export { default as FieldDescription } from "./FieldDescription.astro";
+export { default as FieldError } from "./FieldError.astro";
+export { default as FieldGroup } from "./FieldGroup.astro";
+export { default as FieldLabel } from "./FieldLabel.astro";
+export { default as FieldLegend } from "./FieldLegend.astro";
+export { default as FieldSeparator } from "./FieldSeparator.astro";
+export { default as FieldSet } from "./FieldSet.astro";
+export { default as FieldTitle } from "./FieldTitle.astro";

package/src/components/hover-card/CHANGELOG.md

@@ -1,20 +1,20 @@
-# Changelog
-
-All notable changes to the `HoverCard` component family (`HoverCard`, `HoverCardTrigger`, `HoverCardContent`) are documented in this file.
-
-## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `5455-14770`)
-
-Figma shows three content **Variants** (Default, Simple, Avatar) and two **States** (Default, Focus) for the card surface.
-
-### Fixed
-
-- `HoverCardContent`: added the missing `@figmaUrl` to `HoverCard.astro`'s JSDoc (this component had never had one).
-- `HoverCardContent`: replaced the `ring-1 ring-foreground/10` border approximation with a real `border border-border`, and `shadow-md` → `shadow-lg` — matching Figma's spec'd tokens (`--border` = `#e4e4e7`, and a named `shadow-lg` multi-layer drop shadow), the same category of fix already made to `DialogContent` in the previous pass.
-- `HoverCardContent`: added a focus-visible ring (`has-[:focus-visible]:border-ring has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-ring/50`) to match Figma's "Focus" state (`--ring` = `#5f9de6`), using the same `border-ring` + `ring-3 ring-ring/50` idiom already established for Accordion/Checkbox/Dialog. This activates whenever a keyboard-focusable element inside custom `HoverCardContent` children receives focus — none of the current demos happen to place one, so it isn't visually exercised yet, but the capability is now available.
-- `HoverCardContent`: removed a dead, redundant raw class string that duplicated almost the entire `contentVariants()` class list directly on the rendered div — the same class of bug already fixed in `DialogFooter`/`TooltipContent`. It also silently conflicted on `duration-100` vs. `contentVariants()`'s `duration-150`; since `contentVariants()` came later in the `cn()` call, `150ms` was already winning and `100ms` was fully dead code.
-
-### Notes
-
-- Figma's three content variants (Default/Simple/Avatar) are pure content compositions, not distinct props — the existing headless `HoverCardContent` already supports all three via whatever children are passed in (Preview ≈ Default, "With avatar" ≈ Avatar, "Positioning options"/"Custom timing" ≈ Simple). No new props or sub-components added, matching the same call made for Combobox.
-- Typography (bold title, `text-muted-foreground text-xs` meta line) and sizing (`w-64`, `rounded-lg`, `p-3`, avatar `size-10`) already matched Figma's tokens exactly — no changes needed there.
-- No changes to `HoverCardTrigger` — Figma's Focus frame shows only the card, not trigger-specific styling.
+# Changelog
+
+All notable changes to the `HoverCard` component family (`HoverCard`, `HoverCardTrigger`, `HoverCardContent`) are documented in this file.
+
+## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `5455-14770`)
+
+Figma shows three content **Variants** (Default, Simple, Avatar) and two **States** (Default, Focus) for the card surface.
+
+### Fixed
+
+- `HoverCardContent`: added the missing `@figmaUrl` to `HoverCard.astro`'s JSDoc (this component had never had one).
+- `HoverCardContent`: replaced the `ring-1 ring-foreground/10` border approximation with a real `border border-border`, and `shadow-md` → `shadow-lg` — matching Figma's spec'd tokens (`--border` = `#e4e4e7`, and a named `shadow-lg` multi-layer drop shadow), the same category of fix already made to `DialogContent` in the previous pass.
+- `HoverCardContent`: added a focus-visible ring (`has-[:focus-visible]:border-ring has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-ring/50`) to match Figma's "Focus" state (`--ring` = `#5f9de6`), using the same `border-ring` + `ring-3 ring-ring/50` idiom already established for Accordion/Checkbox/Dialog. This activates whenever a keyboard-focusable element inside custom `HoverCardContent` children receives focus — none of the current demos happen to place one, so it isn't visually exercised yet, but the capability is now available.
+- `HoverCardContent`: removed a dead, redundant raw class string that duplicated almost the entire `contentVariants()` class list directly on the rendered div — the same class of bug already fixed in `DialogFooter`/`TooltipContent`. It also silently conflicted on `duration-100` vs. `contentVariants()`'s `duration-150`; since `contentVariants()` came later in the `cn()` call, `150ms` was already winning and `100ms` was fully dead code.
+
+### Notes
+
+- Figma's three content variants (Default/Simple/Avatar) are pure content compositions, not distinct props — the existing headless `HoverCardContent` already supports all three via whatever children are passed in (Preview ≈ Default, "With avatar" ≈ Avatar, "Positioning options"/"Custom timing" ≈ Simple). No new props or sub-components added, matching the same call made for Combobox.
+- Typography (bold title, `text-muted-foreground text-xs` meta line) and sizing (`w-64`, `rounded-lg`, `p-3`, avatar `size-10`) already matched Figma's tokens exactly — no changes needed there.
+- No changes to `HoverCardTrigger` — Figma's Focus frame shows only the card, not trigger-specific styling.

package/src/components/hover-card/index.ts

@@ -1,3 +1,3 @@
-export { default as HoverCard } from "./HoverCard.astro";
-export { default as HoverCardTrigger } from "./HoverCardTrigger.astro";
-export { default as HoverCardContent } from "./HoverCardContent.astro";
+export { default as HoverCard } from "./HoverCard.astro";
+export { default as HoverCardTrigger } from "./HoverCardTrigger.astro";
+export { default as HoverCardContent } from "./HoverCardContent.astro";

package/src/components/input/CHANGELOG.md

@@ -1,29 +1,29 @@
-# Changelog
-
-All notable changes to the `Input` component will be documented in this file.
-
-## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `145-3`)
-
-Figma documents Input across four pages: Variants (Default, Lead, Tail, Complex, Wide), Sizes (Default 32px, Large 40px), States (Default, Hover, Pressed, Focus, Disabled, Error), and Contents (Default, Lead Icon, Tail Icon, Label, Counter, Helper, Error text, All Details).
-
-### Fixed
-
-- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
-- Background: `bg-transparent dark:bg-input/30` → `bg-card` — Figma's surface token is `card` (`#ffffff`), which genuinely differs from `--background`/transparent in dark mode, same category of fix already made to `DialogContent`/`HoverCardContent`.
-- Disabled: replaced the blanket `disabled:opacity-50` fade with an explicit `disabled:bg-muted disabled:text-muted-foreground`, matching Figma's actual flat muted-gray disabled treatment (same category of fix as Checkbox's disabled state).
-- Large size: `data-[size=lg]:md:text-base` (16px) → `data-[size=lg]:md:text-sm` (14px) — Figma's Large instance binds the identical 14px font token as Default; only padding/height grow, not font size. **Reverted in the follow-up below** — the three sizes read as visually indistinct with matching font sizes, so the user asked to keep them differentiated.
-- Added a Pressed (`:active`) state: `active:border-ring`, matching Figma's Pressed state (same border-color token as Focus, without Focus's outer glow).
-- Removed dead, redundant unconditional legacy classes (`h-9`, `rounded-md`, `px-2.5 py-1`, `text-base`, `md:text-sm`) that were fully superseded by the newer `data-[size=*]:...` gated system already present in the same class string — same class of cleanup already done on Dialog/HoverCard/TooltipContent.
-
-### Notes (not changed)
-
-- Border color (`border-input`), radius (`rounded-lg`), Focus (`focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`), and Error/`aria-invalid` styling already matched Figma's tokens exactly — no changes needed.
-- Figma's Hover state isn't implemented, per the standing project direction to skip hover states ("ignore hover states, they are not necessary... I will delete from figma").
-- Figma's two documented sizes — Default (32px) and Large (40px) — correspond exactly to the existing `sm` (`h-8`) and `lg` (`h-10`) tiers. The code's own literal `"default"` tier (`h-9`, 36px) isn't represented in Figma at all — flagging in case you want to rename in Figma, same as was done for Accordion/Checkbox.
-- Lead/Tail/Complex/Wide (icon and toolbar compositions) are already fully covered by the existing `InputGroup` family — no new props added to `Input`. Added storybook examples for all four so they're visibly demonstrated on the Input docs page.
-- Label/Helper/Error-text content variants are already covered by the existing `Field`/`FieldLabel`/`FieldDescription`/`FieldError` primitives (shared across the whole design system, not Input-specific) — no new props added. Added a storybook example combining `Field` + `Input` to demonstrate Helper text, a character counter, and an Error state, since none of these Figma-documented compositions had a visible Input demo before. The small icon Figma shows before Helper/Error text is left as consumer-supplied slot content rather than hardcoded, since `Field` is used well beyond Input.
-- Counter (e.g. "10/100") has no dedicated primitive — it's a plain flex row + a counter `<span>` next to `FieldLabel`, demonstrated in the new storybook example above.
-
-### Fixed (follow-up)
-
-- User correction: the three sizes weren't visually distinct enough with matching font sizes (per Figma's literal token match above). Restored a differentiated type scale across the existing Tailwind tokens: `sm` → `text-xs` (12px, unchanged), `default` → `text-sm` (14px, unchanged), `lg` → `text-base` (16px, reverted from the Figma-matched 14px).
+# Changelog
+
+All notable changes to the `Input` component will be documented in this file.
+
+## 2026-09-09 — Figma alignment (ClickLearn Lightning Design Library, node `145-3`)
+
+Figma documents Input across four pages: Variants (Default, Lead, Tail, Complex, Wide), Sizes (Default 32px, Large 40px), States (Default, Hover, Pressed, Focus, Disabled, Error), and Contents (Default, Lead Icon, Tail Icon, Label, Counter, Helper, Error text, All Details).
+
+### Fixed
+
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- Background: `bg-transparent dark:bg-input/30` → `bg-card` — Figma's surface token is `card` (`#ffffff`), which genuinely differs from `--background`/transparent in dark mode, same category of fix already made to `DialogContent`/`HoverCardContent`.
+- Disabled: replaced the blanket `disabled:opacity-50` fade with an explicit `disabled:bg-muted disabled:text-muted-foreground`, matching Figma's actual flat muted-gray disabled treatment (same category of fix as Checkbox's disabled state).
+- Large size: `data-[size=lg]:md:text-base` (16px) → `data-[size=lg]:md:text-sm` (14px) — Figma's Large instance binds the identical 14px font token as Default; only padding/height grow, not font size. **Reverted in the follow-up below** — the three sizes read as visually indistinct with matching font sizes, so the user asked to keep them differentiated.
+- Added a Pressed (`:active`) state: `active:border-ring`, matching Figma's Pressed state (same border-color token as Focus, without Focus's outer glow).
+- Removed dead, redundant unconditional legacy classes (`h-9`, `rounded-md`, `px-2.5 py-1`, `text-base`, `md:text-sm`) that were fully superseded by the newer `data-[size=*]:...` gated system already present in the same class string — same class of cleanup already done on Dialog/HoverCard/TooltipContent.
+
+### Notes (not changed)
+
+- Border color (`border-input`), radius (`rounded-lg`), Focus (`focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50`), and Error/`aria-invalid` styling already matched Figma's tokens exactly — no changes needed.
+- Figma's Hover state isn't implemented, per the standing project direction to skip hover states ("ignore hover states, they are not necessary... I will delete from figma").
+- Figma's two documented sizes — Default (32px) and Large (40px) — correspond exactly to the existing `sm` (`h-8`) and `lg` (`h-10`) tiers. The code's own literal `"default"` tier (`h-9`, 36px) isn't represented in Figma at all — flagging in case you want to rename in Figma, same as was done for Accordion/Checkbox.
+- Lead/Tail/Complex/Wide (icon and toolbar compositions) are already fully covered by the existing `InputGroup` family — no new props added to `Input`. Added storybook examples for all four so they're visibly demonstrated on the Input docs page.
+- Label/Helper/Error-text content variants are already covered by the existing `Field`/`FieldLabel`/`FieldDescription`/`FieldError` primitives (shared across the whole design system, not Input-specific) — no new props added. Added a storybook example combining `Field` + `Input` to demonstrate Helper text, a character counter, and an Error state, since none of these Figma-documented compositions had a visible Input demo before. The small icon Figma shows before Helper/Error text is left as consumer-supplied slot content rather than hardcoded, since `Field` is used well beyond Input.
+- Counter (e.g. "10/100") has no dedicated primitive — it's a plain flex row + a counter `<span>` next to `FieldLabel`, demonstrated in the new storybook example above.
+
+### Fixed (follow-up)
+
+- User correction: the three sizes weren't visually distinct enough with matching font sizes (per Figma's literal token match above). Restored a differentiated type scale across the existing Tailwind tokens: `sm` → `text-xs` (12px, unchanged), `default` → `text-sm` (14px, unchanged), `lg` → `text-base` (16px, reverted from the Figma-matched 14px).

package/src/components/input/index.ts

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

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

@@ -1,49 +1,49 @@
-# Changelog
-
-All notable changes to the `InputGroup` component family (`InputGroup`, `InputGroupAddon`, `InputGroupButton`, `InputGroupInput`, `InputGroupText`, `InputGroupTextarea`) are documented in this file.
-
-## 2026-09-10 — Figma alignment (ClickLearn Lightning Design Library, node `2282-6923`)
-
-Figma documents a single "Default" composition with three example rows: a lead-icon search input with trailing supportive text, a plain input with a trailing icon, and a multi-line textarea with a toolbar (icon button + ghost text button + supportive text + separator + circular primary send button). No Sizes/States/Variants pages exist for this component in Figma (unlike `Input`) — scope is narrower accordingly.
-
-### Fixed
-
-- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
-- Background: the root `InputGroup` container had no light-mode background at all (`dark:bg-input/30` with nothing for light mode, fully transparent) — Figma's surface token is `card` (`#ffffff`). Fixed to `bg-card`, same category of fix already made to `Input`/`DialogContent`/`HoverCardContent`.
-- Toolbar icon buttons (the leading `+` and the trailing send button in the textarea/toolbar composition): Figma's instances measure exactly 32×32px, which is the existing `icon-sm` size tier, not the `icon-xs` (24px) tier the demos were using. Fixed in `InputGroup.astro`'s own JSDoc preview, `InputGroupStory.astro`, and the storybook docs page (`_sections/input-group.astro`), plus the equivalent "Wide" example added to `Input`'s own storybook page.
-
-### Added
-
-- A "Tail icon" storybook example (plain input + trailing icon, no button) matching Figma's second documented row exactly — this composition wasn't previously demonstrated (the existing "https://" + "Check"-button example is a different, still-valid pattern, kept alongside).
-
-### Notes
-
-- `primary`/`primary-foreground` (send button), `foreground`/`background` (plain icon button), `muted-foreground` (addon text), and `radius-lg` all already matched Figma's tokens exactly — no changes needed.
-- No new props added — `InputGroup`'s existing `InputGroupAddon`/`InputGroupButton`/`InputGroupText`/`InputGroupTextarea` primitives already cover every composition Figma documents.
-
-## 2026-09-10 — Fixed `InputGroupButton` `size="sm"` no-op bug
-
-Surfaced by the new side-by-side sizes comparison above: `size="sm"` mapped to an empty string in `inputGroupButtonVariants`, so it added no override classes at all. Since `InputGroupButton` never forwards its own `size` prop to the underlying `Button` (only a `data-size` attribute), this meant `sm` silently fell through to `Button`'s own unscaled default size (`h-9`, 36px) — rendering *larger* than `xs` (24px), the opposite of what its name implies.
-
-### Fixed
-
-- `sm` → `"h-8 gap-1 px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5"`, matching `Button`'s own existing `sm` tier (`h-8`, 32px) and lining up with `icon-sm`'s 32px — giving a clean two-tier scale (24px compact / 32px comfortable) across both text and icon-only buttons.
-
-## 2026-09-10 — Fixed `InputGroup`'s `size` prop doing nothing
-
-The user asked what the `size` prop actually controls — turned out to be nothing. Two separate, compounding bugs:
-
-1. `InputGroup.astro`'s root had a hard-coded, unconditional `h-9` — never actually responsive to its own `data-size` attribute, so the group container's own height never changed for `sm`/`lg`.
-2. The intended mechanism for resizing the *inner* `InputGroupInput` control (`group-data-[size=sm]/input-group:h-8`, etc.) existed only in `controlClasses.ts`'s `inputGroupControlClasses` export — but nothing in the codebase imported it. `InputGroupInput.astro` had its own separate, non-responsive hard-coded class list instead. Confirmed live: `sm`/`default`/`lg` all rendered at an identical 36px / 14px font.
-
-### Fixed
-
-- `InputGroup.astro`: replaced the unconditional `h-9` with `data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10` on the root.
-- `InputGroupInput.astro`: now imports and applies `inputGroupControlClasses` from `controlClasses.ts` instead of its own disconnected duplicate class list.
-- `controlClasses.ts`: even after reconnecting it, `sm`/`lg` still had no effect — inspected the actual matched CSS rules via Chrome DevTools Protocol and found a genuine specificity conflict: Tailwind compiles the `group-data-[size=sm]/input-group:h-8` ancestor selector wrapped in `:where(...)` (zero specificity), so the whole rule resolves to a single-class specificity — lower than `Input`'s own self-referential `data-[size=default]:h-9` (class + attribute selector), which is *always* active since `Input` always sets its own `data-size="default"` unless given an explicit `size` prop. Added `!` (Tailwind v4 important-marker) to every `group-data-[size=*]/input-group:` class in `inputGroupControlClasses` to force it to win regardless — same convention already used elsewhere in this codebase for equivalent specificity fights (e.g. `HoverCardContent`'s `data-[instant]:...!` classes).
-- Verified live: `sm`/`default`/`lg` now correctly render the group container **and** the inner input at 32/36/40px with 12/14/16px font, matching the demo labels for the first time.
-
-### Fixed (regression from the above)
-
-- Making the root's height conditional (`data-[size=default]:h-9`, one class + one attribute selector) accidentally gave it the *same* specificity as the existing `has-[>textarea]:h-auto` / `has-[>[data-align=block-*]]:h-auto` overrides (also one class + one pseudo-class) that make the "Wide" toolbar/textarea composition grow to fit its content instead of clipping to a fixed height. Previously the plain unconditional `h-9` (lower specificity, one class only) always lost to those `has-[]:` overrides safely — the new conditional version could win the specificity tie instead, depending on Tailwind's internal rule-emission order. Confirmed live: the "Wide" example's container had collapsed to a fixed 36px, clipping the toolbar row outside its border.
-- Fixed by adding `!` to `has-[>textarea]:h-auto`, `has-[>[data-align=block-end]]:h-auto`, and `has-[>[data-align=block-start]]:h-auto` on `InputGroup.astro`'s root, so they unconditionally win over the sizing classes whenever a textarea or block-aligned addon is present. Verified live: the "Wide" example is back to its correct auto-height (112px), and `sm`/`default`/`lg` sizing is unaffected (still 32/36/40px).
+# Changelog
+
+All notable changes to the `InputGroup` component family (`InputGroup`, `InputGroupAddon`, `InputGroupButton`, `InputGroupInput`, `InputGroupText`, `InputGroupTextarea`) are documented in this file.
+
+## 2026-09-10 — Figma alignment (ClickLearn Lightning Design Library, node `2282-6923`)
+
+Figma documents a single "Default" composition with three example rows: a lead-icon search input with trailing supportive text, a plain input with a trailing icon, and a multi-line textarea with a toolbar (icon button + ghost text button + supportive text + separator + circular primary send button). No Sizes/States/Variants pages exist for this component in Figma (unlike `Input`) — scope is narrower accordingly.
+
+### Fixed
+
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- Background: the root `InputGroup` container had no light-mode background at all (`dark:bg-input/30` with nothing for light mode, fully transparent) — Figma's surface token is `card` (`#ffffff`). Fixed to `bg-card`, same category of fix already made to `Input`/`DialogContent`/`HoverCardContent`.
+- Toolbar icon buttons (the leading `+` and the trailing send button in the textarea/toolbar composition): Figma's instances measure exactly 32×32px, which is the existing `icon-sm` size tier, not the `icon-xs` (24px) tier the demos were using. Fixed in `InputGroup.astro`'s own JSDoc preview, `InputGroupStory.astro`, and the storybook docs page (`_sections/input-group.astro`), plus the equivalent "Wide" example added to `Input`'s own storybook page.
+
+### Added
+
+- A "Tail icon" storybook example (plain input + trailing icon, no button) matching Figma's second documented row exactly — this composition wasn't previously demonstrated (the existing "https://" + "Check"-button example is a different, still-valid pattern, kept alongside).
+
+### Notes
+
+- `primary`/`primary-foreground` (send button), `foreground`/`background` (plain icon button), `muted-foreground` (addon text), and `radius-lg` all already matched Figma's tokens exactly — no changes needed.
+- No new props added — `InputGroup`'s existing `InputGroupAddon`/`InputGroupButton`/`InputGroupText`/`InputGroupTextarea` primitives already cover every composition Figma documents.
+
+## 2026-09-10 — Fixed `InputGroupButton` `size="sm"` no-op bug
+
+Surfaced by the new side-by-side sizes comparison above: `size="sm"` mapped to an empty string in `inputGroupButtonVariants`, so it added no override classes at all. Since `InputGroupButton` never forwards its own `size` prop to the underlying `Button` (only a `data-size` attribute), this meant `sm` silently fell through to `Button`'s own unscaled default size (`h-9`, 36px) — rendering *larger* than `xs` (24px), the opposite of what its name implies.
+
+### Fixed
+
+- `sm` → `"h-8 gap-1 px-2 text-xs [&>svg:not([class*='size-'])]:size-3.5"`, matching `Button`'s own existing `sm` tier (`h-8`, 32px) and lining up with `icon-sm`'s 32px — giving a clean two-tier scale (24px compact / 32px comfortable) across both text and icon-only buttons.
+
+## 2026-09-10 — Fixed `InputGroup`'s `size` prop doing nothing
+
+The user asked what the `size` prop actually controls — turned out to be nothing. Two separate, compounding bugs:
+
+1. `InputGroup.astro`'s root had a hard-coded, unconditional `h-9` — never actually responsive to its own `data-size` attribute, so the group container's own height never changed for `sm`/`lg`.
+2. The intended mechanism for resizing the *inner* `InputGroupInput` control (`group-data-[size=sm]/input-group:h-8`, etc.) existed only in `controlClasses.ts`'s `inputGroupControlClasses` export — but nothing in the codebase imported it. `InputGroupInput.astro` had its own separate, non-responsive hard-coded class list instead. Confirmed live: `sm`/`default`/`lg` all rendered at an identical 36px / 14px font.
+
+### Fixed
+
+- `InputGroup.astro`: replaced the unconditional `h-9` with `data-[size=sm]:h-8 data-[size=default]:h-9 data-[size=lg]:h-10` on the root.
+- `InputGroupInput.astro`: now imports and applies `inputGroupControlClasses` from `controlClasses.ts` instead of its own disconnected duplicate class list.
+- `controlClasses.ts`: even after reconnecting it, `sm`/`lg` still had no effect — inspected the actual matched CSS rules via Chrome DevTools Protocol and found a genuine specificity conflict: Tailwind compiles the `group-data-[size=sm]/input-group:h-8` ancestor selector wrapped in `:where(...)` (zero specificity), so the whole rule resolves to a single-class specificity — lower than `Input`'s own self-referential `data-[size=default]:h-9` (class + attribute selector), which is *always* active since `Input` always sets its own `data-size="default"` unless given an explicit `size` prop. Added `!` (Tailwind v4 important-marker) to every `group-data-[size=*]/input-group:` class in `inputGroupControlClasses` to force it to win regardless — same convention already used elsewhere in this codebase for equivalent specificity fights (e.g. `HoverCardContent`'s `data-[instant]:...!` classes).
+- Verified live: `sm`/`default`/`lg` now correctly render the group container **and** the inner input at 32/36/40px with 12/14/16px font, matching the demo labels for the first time.
+
+### Fixed (regression from the above)
+
+- Making the root's height conditional (`data-[size=default]:h-9`, one class + one attribute selector) accidentally gave it the *same* specificity as the existing `has-[>textarea]:h-auto` / `has-[>[data-align=block-*]]:h-auto` overrides (also one class + one pseudo-class) that make the "Wide" toolbar/textarea composition grow to fit its content instead of clipping to a fixed height. Previously the plain unconditional `h-9` (lower specificity, one class only) always lost to those `has-[]:` overrides safely — the new conditional version could win the specificity tie instead, depending on Tailwind's internal rule-emission order. Confirmed live: the "Wide" example's container had collapsed to a fixed 36px, clipping the toolbar row outside its border.
+- Fixed by adding `!` to `has-[>textarea]:h-auto`, `has-[>[data-align=block-end]]:h-auto`, and `has-[>[data-align=block-start]]:h-auto` on `InputGroup.astro`'s root, so they unconditionally win over the sizing classes whenever a textarea or block-aligned addon is present. Verified live: the "Wide" example is back to its correct auto-height (112px), and `sm`/`default`/`lg` sizing is unaffected (still 32/36/40px).

package/src/components/input-group/controlClasses.ts

@@ -1,2 +1,2 @@
-export const inputGroupControlClasses =
-  "rounded-none border-0 bg-transparent text-base shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 min-w-0 group-data-[size=sm]/input-group:h-8! group-data-[size=sm]/input-group:px-2.5! group-data-[size=sm]/input-group:py-1! group-data-[size=sm]/input-group:md:text-xs! group-data-[size=default]/input-group:h-9! group-data-[size=default]/input-group:px-3! group-data-[size=default]/input-group:py-1! group-data-[size=default]/input-group:md:text-sm! group-data-[size=lg]/input-group:h-10! group-data-[size=lg]/input-group:px-3.5! group-data-[size=lg]/input-group:py-1.5! group-data-[size=lg]/input-group:md:text-base!";
+export const inputGroupControlClasses =
+  "rounded-none border-0 bg-transparent text-base shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 min-w-0 group-data-[size=sm]/input-group:h-8! group-data-[size=sm]/input-group:px-2.5! group-data-[size=sm]/input-group:py-1! group-data-[size=sm]/input-group:md:text-xs! group-data-[size=default]/input-group:h-9! group-data-[size=default]/input-group:px-3! group-data-[size=default]/input-group:py-1! group-data-[size=default]/input-group:md:text-sm! group-data-[size=lg]/input-group:h-10! group-data-[size=lg]/input-group:px-3.5! group-data-[size=lg]/input-group:py-1.5! group-data-[size=lg]/input-group:md:text-base!";

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

@@ -1,6 +1,6 @@
-export { default as InputGroup } from "./InputGroup.astro";
-export { default as InputGroupAddon } from "./InputGroupAddon.astro";
-export { default as InputGroupButton } from "./InputGroupButton.astro";
-export { default as InputGroupInput } from "./InputGroupInput.astro";
-export { default as InputGroupText } from "./InputGroupText.astro";
-export { default as InputGroupTextarea } from "./InputGroupTextarea.astro";
+export { default as InputGroup } from "./InputGroup.astro";
+export { default as InputGroupAddon } from "./InputGroupAddon.astro";
+export { default as InputGroupButton } from "./InputGroupButton.astro";
+export { default as InputGroupInput } from "./InputGroupInput.astro";
+export { default as InputGroupText } from "./InputGroupText.astro";
+export { default as InputGroupTextarea } from "./InputGroupTextarea.astro";

package/src/components/item/CHANGELOG.md

@@ -1,27 +1,27 @@
-# Changelog
-
-All notable changes to the `Item` component family (`Item`, `ItemGroup`, `ItemSeparator`, `ItemHeader`, `ItemFooter`, `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions`) are documented in this file.
-
-## 2026-09-10 — Figma alignment (ClickLearn Lightning Design Library, node `2329-7472`)
-
-Figma documents Item across four pages: Variants (Default, Outline, Muted), Sizes (Small, Large, Header), States (Default, Hover, Focus, Disabled), and Contents (Tail Icon, Tail Button, Lead Icon, Lead Image).
-
-### Fixed
-
-- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
-- Removed a dead, redundant `rounded-md` — `rounded-lg` (added afterward in the same class string) always won anyway, same class of cleanup already done on Dialog/HoverCard/Input/TooltipContent.
-- Removed a broken hover selector, `[a]:hover:bg-muted` — invalid Tailwind arbitrary-variant syntax (missing `&`), effectively dead/no-op. Per the standing project direction to skip hover states ("ignore hover states, they are not necessary... I will delete from figma"), removed rather than fixed into a working hover state.
-- Removed dead, unreachable `group-data-[size=xs]/item:...` selectors in `ItemMedia`/`ItemContent`/`ItemDescription` and `has-data-[size=xs]:...` in `ItemGroup` — these referenced a size value that has never existed in `Item`'s own `size` prop type and isn't documented in Figma either; pure leftover dead code.
-
-### Added
-
-- **Focus state**: `has-[:focus-visible]:border-ring has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-ring/50` on the root — Figma shows a border+glow-ring treatment on the whole item (ring hex confirmed `#5f9de6` = `--ring`; the baked-in glow color Figma shows, `#afcef3`, is just `--ring` at ~50% opacity over white, confirming this is the same `ring-3 ring-ring/50` idiom used everywhere else, e.g. `HoverCardContent`). Since `Item`'s root is a plain non-focusable `<div>`, this activates whenever a focusable descendant (e.g. an action button) receives keyboard focus.
-- **`disabled` prop** (new, `boolean`, default `false`): sets `aria-disabled="true"` + `data-disabled` on the root, styled via `data-[disabled=true]:bg-muted data-[disabled=true]:pointer-events-none` — matches Figma's Disabled state (a real `bg-muted` swap, not an opacity fade, same category as the Checkbox/Input disabled fixes). Scope note: this only styles/blocks-interaction on the `Item` root itself — it does not automatically disable nested interactive children (e.g. an `ItemActions` button); consumers should still set `disabled` on those separately, as shown in the new JSDoc example.
-- **`size="header"`** (new): Figma's third documented size is a fundamentally different vertical/card layout — full-width square media on top, title/description below, no trailing action. `Item`'s `flex-wrap`/`items-center` row layout is now driven entirely per-size (`default`/`sm` stay row-based; `header` switches to `flex-col items-start gap-4 p-4`), and `ItemMedia`'s `image` variant grows to a full-width square (`w-full aspect-square`, canceling the row-oriented baseline nudge) whenever the parent `Item` has `data-size="header"`.
-
-### Notes
-
-- Variants (`default`/`outline`/`muted`) already matched Figma's three variants exactly — no change needed.
-- Lead Icon / Lead Image / Tail Button content compositions were already fully achievable via the existing `ItemMedia`/`ItemActions` primitives.
-- **Tail Icon** (a trailing chevron, no lead media) is already achievable today via `<ItemActions><ChevronRight /></ItemActions>` — no new prop needed, just added a storybook example since it wasn't previously demonstrated.
-- Figma's "Small"/"Large" size names correspond to the code's existing `sm`/`default` tiers respectively — same recurring size-naming situation as Accordion/Checkbox/Input, not renamed here.
+# Changelog
+
+All notable changes to the `Item` component family (`Item`, `ItemGroup`, `ItemSeparator`, `ItemHeader`, `ItemFooter`, `ItemMedia`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions`) are documented in this file.
+
+## 2026-09-10 — Figma alignment (ClickLearn Lightning Design Library, node `2329-7472`)
+
+Figma documents Item across four pages: Variants (Default, Outline, Muted), Sizes (Small, Large, Header), States (Default, Hover, Focus, Disabled), and Contents (Tail Icon, Tail Button, Lead Icon, Lead Image).
+
+### Fixed
+
+- Updated `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library link.
+- Removed a dead, redundant `rounded-md` — `rounded-lg` (added afterward in the same class string) always won anyway, same class of cleanup already done on Dialog/HoverCard/Input/TooltipContent.
+- Removed a broken hover selector, `[a]:hover:bg-muted` — invalid Tailwind arbitrary-variant syntax (missing `&`), effectively dead/no-op. Per the standing project direction to skip hover states ("ignore hover states, they are not necessary... I will delete from figma"), removed rather than fixed into a working hover state.
+- Removed dead, unreachable `group-data-[size=xs]/item:...` selectors in `ItemMedia`/`ItemContent`/`ItemDescription` and `has-data-[size=xs]:...` in `ItemGroup` — these referenced a size value that has never existed in `Item`'s own `size` prop type and isn't documented in Figma either; pure leftover dead code.
+
+### Added
+
+- **Focus state**: `has-[:focus-visible]:border-ring has-[:focus-visible]:ring-3 has-[:focus-visible]:ring-ring/50` on the root — Figma shows a border+glow-ring treatment on the whole item (ring hex confirmed `#5f9de6` = `--ring`; the baked-in glow color Figma shows, `#afcef3`, is just `--ring` at ~50% opacity over white, confirming this is the same `ring-3 ring-ring/50` idiom used everywhere else, e.g. `HoverCardContent`). Since `Item`'s root is a plain non-focusable `<div>`, this activates whenever a focusable descendant (e.g. an action button) receives keyboard focus.
+- **`disabled` prop** (new, `boolean`, default `false`): sets `aria-disabled="true"` + `data-disabled` on the root, styled via `data-[disabled=true]:bg-muted data-[disabled=true]:pointer-events-none` — matches Figma's Disabled state (a real `bg-muted` swap, not an opacity fade, same category as the Checkbox/Input disabled fixes). Scope note: this only styles/blocks-interaction on the `Item` root itself — it does not automatically disable nested interactive children (e.g. an `ItemActions` button); consumers should still set `disabled` on those separately, as shown in the new JSDoc example.
+- **`size="header"`** (new): Figma's third documented size is a fundamentally different vertical/card layout — full-width square media on top, title/description below, no trailing action. `Item`'s `flex-wrap`/`items-center` row layout is now driven entirely per-size (`default`/`sm` stay row-based; `header` switches to `flex-col items-start gap-4 p-4`), and `ItemMedia`'s `image` variant grows to a full-width square (`w-full aspect-square`, canceling the row-oriented baseline nudge) whenever the parent `Item` has `data-size="header"`.
+
+### Notes
+
+- Variants (`default`/`outline`/`muted`) already matched Figma's three variants exactly — no change needed.
+- Lead Icon / Lead Image / Tail Button content compositions were already fully achievable via the existing `ItemMedia`/`ItemActions` primitives.
+- **Tail Icon** (a trailing chevron, no lead media) is already achievable today via `<ItemActions><ChevronRight /></ItemActions>` — no new prop needed, just added a storybook example since it wasn't previously demonstrated.
+- Figma's "Small"/"Large" size names correspond to the code's existing `sm`/`default` tiers respectively — same recurring size-naming situation as Accordion/Checkbox/Input, not renamed here.

package/src/components/item/index.ts

@@ -1,10 +1,10 @@
-export { default as Item } from "./Item.astro";
-export { default as ItemActions } from "./ItemActions.astro";
-export { default as ItemContent } from "./ItemContent.astro";
-export { default as ItemDescription } from "./ItemDescription.astro";
-export { default as ItemFooter } from "./ItemFooter.astro";
-export { default as ItemGroup } from "./ItemGroup.astro";
-export { default as ItemHeader } from "./ItemHeader.astro";
-export { default as ItemMedia } from "./ItemMedia.astro";
-export { default as ItemSeparator } from "./ItemSeparator.astro";
-export { default as ItemTitle } from "./ItemTitle.astro";
+export { default as Item } from "./Item.astro";
+export { default as ItemActions } from "./ItemActions.astro";
+export { default as ItemContent } from "./ItemContent.astro";
+export { default as ItemDescription } from "./ItemDescription.astro";
+export { default as ItemFooter } from "./ItemFooter.astro";
+export { default as ItemGroup } from "./ItemGroup.astro";
+export { default as ItemHeader } from "./ItemHeader.astro";
+export { default as ItemMedia } from "./ItemMedia.astro";
+export { default as ItemSeparator } from "./ItemSeparator.astro";
+export { default as ItemTitle } from "./ItemTitle.astro";

package/src/components/kbd/CHANGELOG.md

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

package/src/components/kbd/index.ts

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