@cl-light-ds/ui 0.1.0 → 0.3.0

package/src/components/label/CHANGELOG.md

@@ -1,28 +1,28 @@
-# Changelog
-
-All notable changes to the `Label` component will be documented in this file.
-
-## Date 10th Sep 2026
-## Figma alignment (node 7228-1290, prop table 7423-9892)
-
-### Fixed
-
-- Removed a copy-paste duplicate class string passed twice into `cn()`.
-- Dropped `leading-none` on the label text — it collapsed the line-height to 1, whereas Figma's `text/md/md-medium` style specifies a 20px line-height, which Tailwind's `text-sm` already provides by default.
-- Added explicit `text-foreground` for the default-state text color, matching Figma's `var(--foreground)` token (previously relied on ambient inherited color).
-
-### Added
-
-New props, matching Figma's Props Reference table:
-
-- `supportiveText?: string` — optional secondary text rendered below the label.
-- `showSupportiveText?: boolean` (default `false`) — shows the `supportiveText` line when both this and `supportiveText` are set.
-- `showHintIcon?: boolean` (default `false`) — shows a small `CircleQuestionMark` icon (`@lucide/astro`) beside the label text.
-
-Figma's table documents both new booleans defaulting to `true`, but they default to `false` here: defaulting to `true` would have made a hint icon appear next to every existing `<Label>` in the app that doesn't already opt out, since no current usage passes these props. Opt-in keeps every existing call site (including `Checkbox`'s and `FieldLabel`'s compositions) visually unchanged.
-
-The `label` prop documented in Figma's table was intentionally not added — every caller in this repo supplies label text via `<slot />` (e.g. `FieldLabel.astro`), so the slot remains the sole content API.
-
-The new layout (label text + icon row, supportive text below) only applies when `showHintIcon` or `showSupportiveText`+`supportiveText` are actually used (`hasExtras`); otherwise the label renders with the exact same classes as before (`flex items-center gap-2 ...`), so it doesn't disturb consumers that override the root layout themselves (e.g. the side-by-side custom composition in `Checkbox.astro`'s JSDoc preview).
-
-No explicit `disabled` prop was added — disabled styling continues to come from the existing `group-data-[disabled=true]` / `peer-disabled` CSS hooks tied to a sibling control, unchanged.
+# Changelog
+
+All notable changes to the `Label` component will be documented in this file.
+
+## Date 10th Sep 2026
+## Figma alignment (node 7228-1290, prop table 7423-9892)
+
+### Fixed
+
+- Removed a copy-paste duplicate class string passed twice into `cn()`.
+- Dropped `leading-none` on the label text — it collapsed the line-height to 1, whereas Figma's `text/md/md-medium` style specifies a 20px line-height, which Tailwind's `text-sm` already provides by default.
+- Added explicit `text-foreground` for the default-state text color, matching Figma's `var(--foreground)` token (previously relied on ambient inherited color).
+
+### Added
+
+New props, matching Figma's Props Reference table:
+
+- `supportiveText?: string` — optional secondary text rendered below the label.
+- `showSupportiveText?: boolean` (default `false`) — shows the `supportiveText` line when both this and `supportiveText` are set.
+- `showHintIcon?: boolean` (default `false`) — shows a small `CircleQuestionMark` icon (`@lucide/astro`) beside the label text.
+
+Figma's table documents both new booleans defaulting to `true`, but they default to `false` here: defaulting to `true` would have made a hint icon appear next to every existing `<Label>` in the app that doesn't already opt out, since no current usage passes these props. Opt-in keeps every existing call site (including `Checkbox`'s and `FieldLabel`'s compositions) visually unchanged.
+
+The `label` prop documented in Figma's table was intentionally not added — every caller in this repo supplies label text via `<slot />` (e.g. `FieldLabel.astro`), so the slot remains the sole content API.
+
+The new layout (label text + icon row, supportive text below) only applies when `showHintIcon` or `showSupportiveText`+`supportiveText` are actually used (`hasExtras`); otherwise the label renders with the exact same classes as before (`flex items-center gap-2 ...`), so it doesn't disturb consumers that override the root layout themselves (e.g. the side-by-side custom composition in `Checkbox.astro`'s JSDoc preview).
+
+No explicit `disabled` prop was added — disabled styling continues to come from the existing `group-data-[disabled=true]` / `peer-disabled` CSS hooks tied to a sibling control, unchanged.

package/src/components/label/index.ts

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

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

@@ -1,75 +1,75 @@
-# Changelog
-
-All notable changes to the `LinkGroup` component will be documented in this file.
-
-## Date 10th Sep 2026
-## Figma alignment (node 2329-7942, item node 2166-5713)
-
-`LinkGroup`/`LinkGroupItem`/`LinkGroupList`/`LinkGroupTitle` had not yet gone through a Figma alignment
-pass — `@figmaUrl` still pointed at the old Bejamas source file, and most typography/padding/state classes
-were either missing entirely or on the wrong scale.
-
-### Variants
-
-- Added an `orientation` prop to `LinkGroupList` (`"vertical" | "horizontal"`, default `"vertical"`) via a
-  new `link-group-list-variants.ts` (`cva`), matching Figma's `Orientation=Vertical/Horizontal` variant
-  property on the "Link Group" component — previously the list was hardcoded to a vertical `flex-col` with
-  no way to render Figma's Horizontal variant at all.
-
-### Sizing & Spacing
-
-- **`LinkGroupList`:** `gap-1` (4px) → `gap-2` (8px) — Figma's list uses `spacing/2` (8px) between items, not 4px.
-- **`LinkGroupItem`:** the slotted `<a>` had no font-size, weight, line-height, padding, or radius at all —
-  added `text-sm font-medium leading-5` (Figma's `text/md/md-medium`, 14px/500/20px), `p-0.5 rounded-lg`
-  (Figma's `padding/p-0.5` = 2px, `radius/rounded-lg` = 8px).
-- **`LinkGroupTitle`:** `text-lg` (18px) → `text-base` (16px) to match Figma's heading size; `text-current` →
-  `text-foreground` for explicit token binding instead of relying on inherited color.
-- **Fixed a real spacing bug:** `LinkGroupTitle` had its own `mb-2` (8px) *on top of* `LinkGroup`'s wrapper
-  `gap-2` (8px) between title and list, doubling the heading-to-list gap to 16px instead of Figma's single
-  8px gap. Removed `mb-2` — `LinkGroup`'s flex `gap-2` now does this alone.
-- `LinkGroup`'s wrapper gained `items-start` (was implicit `stretch`), matching Figma's root container and
-  preventing the title/list from stretching to an unintended width.
-
-### States
-
-- `LinkGroupItem`'s `<a>` kept its existing `hover:underline` (Default: no underline, Hover: underline, no
-  color/background change — already matched Figma exactly).
-- Added `focus-visible:ring-2 focus-visible:ring-chart-1` (plus `outline-hidden`) — **not** documented in
-  Figma, which only shows Default/Hover for this component, but added for keyboard-accessibility parity
-  with every other interactive component in this library (Button/Input/DropdownMenuItem all have an explicit
-  focus-visible ring). See "Flagged for the designer" below.
-
-### Tokens (`globals.css`)
-
-- No new tokens needed — `radius-lg` and `muted-foreground`/`foreground` already existed and match Figma's
-  values exactly (`muted-foreground` = `#71717a`, `foreground` = `#09090b` in light mode). `p-0.5`, `gap-2`,
-  `text-sm`, `leading-5` all come from Tailwind's default scale, which happens to line up 1:1 with Figma's
-  `padding/spacing/font-size` variables here.
-
-### Storybook & Docs
-
-- Added `@figmaUrl`/`@component` JSDoc to `LinkGroupItem.astro` (didn't have one before) and repointed
-  `LinkGroup.astro`'s `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library.
-  Added a "Horizontal orientation" example to `LinkGroup.astro`'s JSDoc.
-- `apps/web/src/pages/storybook/_sections/link-group.astro`: added an `orientation="horizontal"` preview and
-  an `orientation` row to the `LinkGroupList` props table.
-
-### Not changed
-
-- Kept the existing "style the slotted `<a>` via `[&_a]:` selectors" approach on `LinkGroupItem` rather than
-  refactoring to a polymorphic `as="a"` component (like `Button`) — this was a visual alignment pass, not an
-  architecture change. Worth a future discussion if consumers want a self-rendering anchor.
-- Did not add a `linkGroupLabel` boolean prop (Figma has one to toggle the heading) — Astro's `<slot>`
-  presence already handles "heading shown only if provided" for free; a boolean prop would be redundant here.
-
-### Flagged for the designer / engineering (not addressed in this pass)
-
-- The "Component / Link Group / Orientation" usage-example page in Figma shows a divider line under the
-  "Link group name" heading in its Vertical sample, but the actual master component (the one with the real
-  `Orientation` variant property) has no divider — heading, 8px gap, list. Followed the master component;
-  worth cleaning up the usage-example frame in Figma so it doesn't raise the same question next time.
-- The Link component in Figma only documents Default/Hover states — no Focus state. Added a focus-visible
-  ring anyway for accessibility (see "States" above); worth adding an explicit documented Focus variant to
-  the Figma component so future passes don't have to guess the treatment.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `LinkGroup` component will be documented in this file.
+
+## Date 10th Sep 2026
+## Figma alignment (node 2329-7942, item node 2166-5713)
+
+`LinkGroup`/`LinkGroupItem`/`LinkGroupList`/`LinkGroupTitle` had not yet gone through a Figma alignment
+pass — `@figmaUrl` still pointed at the old Bejamas source file, and most typography/padding/state classes
+were either missing entirely or on the wrong scale.
+
+### Variants
+
+- Added an `orientation` prop to `LinkGroupList` (`"vertical" | "horizontal"`, default `"vertical"`) via a
+  new `link-group-list-variants.ts` (`cva`), matching Figma's `Orientation=Vertical/Horizontal` variant
+  property on the "Link Group" component — previously the list was hardcoded to a vertical `flex-col` with
+  no way to render Figma's Horizontal variant at all.
+
+### Sizing & Spacing
+
+- **`LinkGroupList`:** `gap-1` (4px) → `gap-2` (8px) — Figma's list uses `spacing/2` (8px) between items, not 4px.
+- **`LinkGroupItem`:** the slotted `<a>` had no font-size, weight, line-height, padding, or radius at all —
+  added `text-sm font-medium leading-5` (Figma's `text/md/md-medium`, 14px/500/20px), `p-0.5 rounded-lg`
+  (Figma's `padding/p-0.5` = 2px, `radius/rounded-lg` = 8px).
+- **`LinkGroupTitle`:** `text-lg` (18px) → `text-base` (16px) to match Figma's heading size; `text-current` →
+  `text-foreground` for explicit token binding instead of relying on inherited color.
+- **Fixed a real spacing bug:** `LinkGroupTitle` had its own `mb-2` (8px) *on top of* `LinkGroup`'s wrapper
+  `gap-2` (8px) between title and list, doubling the heading-to-list gap to 16px instead of Figma's single
+  8px gap. Removed `mb-2` — `LinkGroup`'s flex `gap-2` now does this alone.
+- `LinkGroup`'s wrapper gained `items-start` (was implicit `stretch`), matching Figma's root container and
+  preventing the title/list from stretching to an unintended width.
+
+### States
+
+- `LinkGroupItem`'s `<a>` kept its existing `hover:underline` (Default: no underline, Hover: underline, no
+  color/background change — already matched Figma exactly).
+- Added `focus-visible:ring-2 focus-visible:ring-chart-1` (plus `outline-hidden`) — **not** documented in
+  Figma, which only shows Default/Hover for this component, but added for keyboard-accessibility parity
+  with every other interactive component in this library (Button/Input/DropdownMenuItem all have an explicit
+  focus-visible ring). See "Flagged for the designer" below.
+
+### Tokens (`globals.css`)
+
+- No new tokens needed — `radius-lg` and `muted-foreground`/`foreground` already existed and match Figma's
+  values exactly (`muted-foreground` = `#71717a`, `foreground` = `#09090b` in light mode). `p-0.5`, `gap-2`,
+  `text-sm`, `leading-5` all come from Tailwind's default scale, which happens to line up 1:1 with Figma's
+  `padding/spacing/font-size` variables here.
+
+### Storybook & Docs
+
+- Added `@figmaUrl`/`@component` JSDoc to `LinkGroupItem.astro` (didn't have one before) and repointed
+  `LinkGroup.astro`'s `@figmaUrl` from the old Bejamas file to the ClickLearn Lightning Design Library.
+  Added a "Horizontal orientation" example to `LinkGroup.astro`'s JSDoc.
+- `apps/web/src/pages/storybook/_sections/link-group.astro`: added an `orientation="horizontal"` preview and
+  an `orientation` row to the `LinkGroupList` props table.
+
+### Not changed
+
+- Kept the existing "style the slotted `<a>` via `[&_a]:` selectors" approach on `LinkGroupItem` rather than
+  refactoring to a polymorphic `as="a"` component (like `Button`) — this was a visual alignment pass, not an
+  architecture change. Worth a future discussion if consumers want a self-rendering anchor.
+- Did not add a `linkGroupLabel` boolean prop (Figma has one to toggle the heading) — Astro's `<slot>`
+  presence already handles "heading shown only if provided" for free; a boolean prop would be redundant here.
+
+### Flagged for the designer / engineering (not addressed in this pass)
+
+- The "Component / Link Group / Orientation" usage-example page in Figma shows a divider line under the
+  "Link group name" heading in its Vertical sample, but the actual master component (the one with the real
+  `Orientation` variant property) has no divider — heading, 8px gap, list. Followed the master component;
+  worth cleaning up the usage-example frame in Figma so it doesn't raise the same question next time.
+- The Link component in Figma only documents Default/Hover states — no Focus state. Added a focus-visible
+  ring anyway for accessibility (see "States" above); worth adding an explicit documented Focus variant to
+  the Figma component so future passes don't have to guess the treatment.
+
+## Unreleased

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

@@ -1,5 +1,5 @@
-export { default as LinkGroup } from "./LinkGroup.astro";
-export { default as LinkGroupTitle } from "./LinkGroupTitle.astro";
-export { default as LinkGroupList } from "./LinkGroupList.astro";
-export { default as LinkGroupItem } from "./LinkGroupItem.astro";
-
+export { default as LinkGroup } from "./LinkGroup.astro";
+export { default as LinkGroupTitle } from "./LinkGroupTitle.astro";
+export { default as LinkGroupList } from "./LinkGroupList.astro";
+export { default as LinkGroupItem } from "./LinkGroupItem.astro";
+

package/src/components/link-group/link-group-list-variants.ts

@@ -1,15 +1,15 @@
-import { cva } from "class-variance-authority";
-
-export const linkGroupListVariants = cva("flex gap-2", {
-  variants: {
-    orientation: {
-      vertical: "flex-col items-start",
-      horizontal: "flex-row items-start w-full",
-    },
-  },
-  defaultVariants: {
-    orientation: "vertical",
-  },
-});
-
-export type LinkGroupOrientation = "vertical" | "horizontal";
+import { cva } from "class-variance-authority";
+
+export const linkGroupListVariants = cva("flex gap-2", {
+  variants: {
+    orientation: {
+      vertical: "flex-col items-start",
+      horizontal: "flex-row items-start w-full",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+});
+
+export type LinkGroupOrientation = "vertical" | "horizontal";

package/src/components/marquee/CHANGELOG.md

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

package/src/components/marquee/index.ts

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

package/src/components/native-select/CHANGELOG.md

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

package/src/components/native-select/NativeSelectOption.astro

@@ -1,9 +1,9 @@
----
-import type { HTMLAttributes } from "astro/types";
-
-interface Props extends HTMLAttributes<"option"> {}
-
-const { ...rest } = Astro.props as Props;
----
-
-<option data-slot="native-select-option" {...rest} class=""><slot /></option>
+---
+import type { HTMLAttributes } from "astro/types";
+
+interface Props extends HTMLAttributes<"option"> {}
+
+const { ...rest } = Astro.props as Props;
+---
+
+<option data-slot="native-select-option" {...rest} class=""><slot /></option>

package/src/components/native-select/index.ts

@@ -1,3 +1,3 @@
-export { default as NativeSelect } from "./NativeSelect.astro";
-export { default as NativeSelectOption } from "./NativeSelectOption.astro";
-export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.astro";
+export { default as NativeSelect } from "./NativeSelect.astro";
+export { default as NativeSelectOption } from "./NativeSelectOption.astro";
+export { default as NativeSelectOptGroup } from "./NativeSelectOptGroup.astro";

package/src/components/navigation-menu/CHANGELOG.md

@@ -1,63 +1,63 @@
-# Changelog
-
-All notable changes to the `NavigationMenu` component will be documented in this file.
-
-## Date 10th Sep 2026 (follow-up)
-## Fix: NavigationMenuItem's `align` prop was a no-op
-
-### Fixed
-
-- `NavigationMenuItem.astro`: added an `align?: "start" | "center" | "end"` prop, rendered as `data-align` on the `<li>` — mirrors how `value`/`data-value` already worked in this file. Previously the prop wasn't declared at all, so passing `align="..."` fell into the component's `{...rest}` spread and rendered as an inert, non-`data-*` HTML attribute that `@data-slot/navigation-menu`'s runtime never reads (it only reads `data-*`). The runtime already supported per-item alignment via `data-align` on either `NavigationMenuContent` (checked first) or `NavigationMenuItem` (checked as a fallback) — confirmed by reading its bundled source — so this was purely a missing pass-through in the Astro wrapper, not a runtime limitation. This also makes `NavigationMenuItem`'s entry in the live Storybook `PropsTable` (`"Content alignment relative to trigger (on NavigationMenuItem/NavigationMenuContent)"`) actually true for the first time.
-- Caught via the new "Item alignment" Storybook preview lane, which showed all three `align` values opening in the identical position before this fix.
-
-## Date 10th Sep 2026 (follow-up)
-## Fix: link title/subtext font tokens (node 5548-10862)
-
-### Fixed
-
-- The designer re-bound the component's font variables in Figma, exposing two named text styles: `text/lg/lg-medium` (Inter, 500, 16px/24px line-height — used for every title/label) and `text/md/md-medium` (Inter, 500, 14px/20px line-height — used for every subtext/description line, now explicitly Medium weight where it was previously an unbound raw value).
-- Audited the codebase's font bindings against these: `--font-sans` (Inter, via Astro's `fontProviders.google()`) and Tailwind's `font-medium` (500) already matched exactly, and Tailwind's `text-base`/`text-sm` utilities already match Figma's `text-base`/`text-md` sizes and line-heights value-for-value — no new CSS tokens were needed.
-- The gap was in the repeated title/subtext markup pattern used everywhere a `NavigationMenuLink` holds a title + description (in `NavigationMenu.astro`'s JSDoc `@preview`/`@usage`/`@examples` blocks, and mirrored in `apps/web/src/pages/storybook/_sections/navigation-menu.astro`): titles used `leading-none font-medium` with no `text-base`, so they inherited `NavigationMenuLink`'s wrapper `text-sm` (14px) instead of the correct 16px, and subtext used `line-clamp-2 text-muted-foreground` with no `font-medium`, rendering at regular/400 weight instead of the now-explicit Medium/500. Fixed both: titles are now `text-base font-medium` (dropped `leading-none` — Tailwind's `text-base` already pairs a matching 24px/1.5 line-height by default), subtext is now `line-clamp-2 font-medium text-muted-foreground`.
-- The JSDoc-only "Featured Card" example had its own drift (`text-lg` title, no `font-medium` on the description) — fixed to `text-base font-medium` / `text-sm font-medium text-muted-foreground` to match the Card variant's spec.
-- `NavigationMenuLink.astro` and `NavigationMenuTrigger.astro` themselves were not changed — the trigger already matched `text/lg/lg-medium` exactly, and the link's base `text-sm` remains the correct default for plain text-only links (e.g. the "With Simple Links" example); only the title/subtext content pattern needed to explicitly opt into the right size/weight at the point of use.
-
-## Date 10th Sep 2026 (follow-up)
-## Fix: NavigationMenuIndicator painting over trigger text (node 5548-10862)
-
-### Fixed
-
-- `NavigationMenuItem.astro`: added `z-10` alongside the existing `relative` class. `NavigationMenuIndicator` is an absolutely-positioned `bg-muted/60` highlight the runtime slides to match the active trigger's exact bounding box; because it's `absolute z-0` and comes last in DOM order among the list's positioned children (`NavigationMenuList` is `relative`, each `NavigationMenuItem` was `relative` with no explicit `z-index`), it was painting on top of — not behind — the active/hovered trigger, washing its text out to a translucent gray instead of `--foreground`. The trigger's own text/background styling was already correct (verified via computed `color`, `opacity`, and `-webkit-text-fill-color`, all unaffected); this was purely a stacking-order bug from a second element overlapping it. Figma's design has no separate sliding-highlight layer at all — every hover/open highlight is baked into the trigger's own background classes — so restacking the indicator behind the trigger is a no-op visually (it's now fully covered by the trigger's own opaque/semi-opaque background) rather than a loss of functionality.
-
-## Date 10th Sep 2026 (follow-up)
-## Fix: trigger label color in the open state (node 5548-10862)
-
-### Fixed
-
-- `NavigationMenuTrigger.astro`: added an explicit `text-foreground` to `navigationMenuTriggerStyle`'s base classes. The trigger previously set no text color at all and relied on inheritance, which let the label read as a dimmer color once open (`data-open:bg-muted/50`). Figma binds the label to `--foreground` in every state (Closed/Default, Closed/Hover, Closed/Focus, Opened) — never a muted color — and every other trigger-style element in the system (`Button`'s `outline`/`ghost` variants) already binds color explicitly rather than relying on inheritance. This brings `NavigationMenuTrigger` in line with both.
-
-## Date 10th Sep 2026
-## Figma alignment (node 5548-10862)
-
-### Sizing & Spacing
-
-- **Trigger** (`NavigationMenuTrigger`): height `h-9` (36px) → `h-11` (44px); vertical padding `py-2` (8px) → `py-2.5` (10px); added an explicit `gap-1.5` (6px) between the label and the chevron, replacing the chevron's old `ml-1` (4px) margin — matches Figma's `padding/p-1-5` gap token exactly.
-- **Link** (`NavigationMenuLink`): padding `p-2` (8px) → `p-3` (12px); icon↔content gap `gap-1.5` (6px) → `gap-4` (16px); alignment `items-center` → `items-start` (Figma's link items top-align icon + title + two-line subtext); radius `rounded-sm` (4px) → `rounded-lg` (8px), matching the popup surface radius and `DropdownMenuItem`'s established radius.
-- **Popup/viewport chrome** (`NavigationMenuPositioner`, `NavigationMenuViewport`, and the no-viewport branch of `NavigationMenuContent`): `ring-1 ring-foreground/10` + generic `shadow` → `border border-border` + Figma's literal `card-light` effect (`shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)]`) — Figma uses a real 1px border, not a ring, same fix already applied to `DropdownMenuContent` in the dropdown-menu pass.
-- **Content** (`NavigationMenuContent`): padding `p-2 pr-2.5` (asymmetric, scrollbar-compensated) → uniform `p-2` (8px), matching Figma's content padding exactly.
-
-### Docs
-
-- `NavigationMenu.astro`'s "Featured Card" `@examples` block switched from a gradient fill (`bg-gradient-to-b from-muted/50 to-muted`, `rounded-md`) to a solid `bg-accent rounded-lg` fill, matching the structure of Figma's featured-card highlight (a flat accent-colored panel, not a gradient).
-
-### Tokens
-
-- No new tokens added. `popover`, `border`, `muted-foreground`, and `ring` (`primary-400`) were already bound correctly and needed no change.
-- **Known drift (not fixed in this pass):** Figma's `accent` variable for the featured-card highlight is `#ebf3fc` (light blue); the codebase's `--accent` token (`globals.css`) is a near-white gray (`oklch(0.97 0 0)`). Left as-is per design decision — the "Featured Card" example above uses `bg-accent` structurally, so it will pick up the correct color automatically whenever `--accent` is revisited as its own task.
-
-### Flagged for the designer / engineering (not addressed in this pass)
-
-- Figma's `showIcon`/`showTitle`/`showSubtext` booleans on the "Navigation Menu" component are Figma-prototyping variants, not real component props — Astro's slot-based composition shows/hides content by presence in the slot, not via a boolean prop. No action needed unless a named-slot pattern (e.g. `<slot name="icon">`) is specifically wanted.
-- The new 44px trigger height doesn't correspond to any size in the shared `Button` scale (`sm`=32px, `default`=36px, `lg`=40px, used by `DropdownMenuTrigger`) — currently bespoke to `NavigationMenuTrigger`. Worth a deliberate call on whether that should become a reusable `Button` size.
-- `NavigationMenuTrigger.astro` calls `cva()` with no `variants` map (just a base-string wrapper) — fine while the trigger has no real variants, but if Figma introduces trigger variants later, extend via the established `<component>-<part>-variants.ts` convention (see `dropdown-menu-item-variants.ts`, `link-group-list-variants.ts`) rather than inline `data-[...]:` selectors.
-
-## Unreleased
+# Changelog
+
+All notable changes to the `NavigationMenu` component will be documented in this file.
+
+## Date 10th Sep 2026 (follow-up)
+## Fix: NavigationMenuItem's `align` prop was a no-op
+
+### Fixed
+
+- `NavigationMenuItem.astro`: added an `align?: "start" | "center" | "end"` prop, rendered as `data-align` on the `<li>` — mirrors how `value`/`data-value` already worked in this file. Previously the prop wasn't declared at all, so passing `align="..."` fell into the component's `{...rest}` spread and rendered as an inert, non-`data-*` HTML attribute that `@data-slot/navigation-menu`'s runtime never reads (it only reads `data-*`). The runtime already supported per-item alignment via `data-align` on either `NavigationMenuContent` (checked first) or `NavigationMenuItem` (checked as a fallback) — confirmed by reading its bundled source — so this was purely a missing pass-through in the Astro wrapper, not a runtime limitation. This also makes `NavigationMenuItem`'s entry in the live Storybook `PropsTable` (`"Content alignment relative to trigger (on NavigationMenuItem/NavigationMenuContent)"`) actually true for the first time.
+- Caught via the new "Item alignment" Storybook preview lane, which showed all three `align` values opening in the identical position before this fix.
+
+## Date 10th Sep 2026 (follow-up)
+## Fix: link title/subtext font tokens (node 5548-10862)
+
+### Fixed
+
+- The designer re-bound the component's font variables in Figma, exposing two named text styles: `text/lg/lg-medium` (Inter, 500, 16px/24px line-height — used for every title/label) and `text/md/md-medium` (Inter, 500, 14px/20px line-height — used for every subtext/description line, now explicitly Medium weight where it was previously an unbound raw value).
+- Audited the codebase's font bindings against these: `--font-sans` (Inter, via Astro's `fontProviders.google()`) and Tailwind's `font-medium` (500) already matched exactly, and Tailwind's `text-base`/`text-sm` utilities already match Figma's `text-base`/`text-md` sizes and line-heights value-for-value — no new CSS tokens were needed.
+- The gap was in the repeated title/subtext markup pattern used everywhere a `NavigationMenuLink` holds a title + description (in `NavigationMenu.astro`'s JSDoc `@preview`/`@usage`/`@examples` blocks, and mirrored in `apps/web/src/pages/storybook/_sections/navigation-menu.astro`): titles used `leading-none font-medium` with no `text-base`, so they inherited `NavigationMenuLink`'s wrapper `text-sm` (14px) instead of the correct 16px, and subtext used `line-clamp-2 text-muted-foreground` with no `font-medium`, rendering at regular/400 weight instead of the now-explicit Medium/500. Fixed both: titles are now `text-base font-medium` (dropped `leading-none` — Tailwind's `text-base` already pairs a matching 24px/1.5 line-height by default), subtext is now `line-clamp-2 font-medium text-muted-foreground`.
+- The JSDoc-only "Featured Card" example had its own drift (`text-lg` title, no `font-medium` on the description) — fixed to `text-base font-medium` / `text-sm font-medium text-muted-foreground` to match the Card variant's spec.
+- `NavigationMenuLink.astro` and `NavigationMenuTrigger.astro` themselves were not changed — the trigger already matched `text/lg/lg-medium` exactly, and the link's base `text-sm` remains the correct default for plain text-only links (e.g. the "With Simple Links" example); only the title/subtext content pattern needed to explicitly opt into the right size/weight at the point of use.
+
+## Date 10th Sep 2026 (follow-up)
+## Fix: NavigationMenuIndicator painting over trigger text (node 5548-10862)
+
+### Fixed
+
+- `NavigationMenuItem.astro`: added `z-10` alongside the existing `relative` class. `NavigationMenuIndicator` is an absolutely-positioned `bg-muted/60` highlight the runtime slides to match the active trigger's exact bounding box; because it's `absolute z-0` and comes last in DOM order among the list's positioned children (`NavigationMenuList` is `relative`, each `NavigationMenuItem` was `relative` with no explicit `z-index`), it was painting on top of — not behind — the active/hovered trigger, washing its text out to a translucent gray instead of `--foreground`. The trigger's own text/background styling was already correct (verified via computed `color`, `opacity`, and `-webkit-text-fill-color`, all unaffected); this was purely a stacking-order bug from a second element overlapping it. Figma's design has no separate sliding-highlight layer at all — every hover/open highlight is baked into the trigger's own background classes — so restacking the indicator behind the trigger is a no-op visually (it's now fully covered by the trigger's own opaque/semi-opaque background) rather than a loss of functionality.
+
+## Date 10th Sep 2026 (follow-up)
+## Fix: trigger label color in the open state (node 5548-10862)
+
+### Fixed
+
+- `NavigationMenuTrigger.astro`: added an explicit `text-foreground` to `navigationMenuTriggerStyle`'s base classes. The trigger previously set no text color at all and relied on inheritance, which let the label read as a dimmer color once open (`data-open:bg-muted/50`). Figma binds the label to `--foreground` in every state (Closed/Default, Closed/Hover, Closed/Focus, Opened) — never a muted color — and every other trigger-style element in the system (`Button`'s `outline`/`ghost` variants) already binds color explicitly rather than relying on inheritance. This brings `NavigationMenuTrigger` in line with both.
+
+## Date 10th Sep 2026
+## Figma alignment (node 5548-10862)
+
+### Sizing & Spacing
+
+- **Trigger** (`NavigationMenuTrigger`): height `h-9` (36px) → `h-11` (44px); vertical padding `py-2` (8px) → `py-2.5` (10px); added an explicit `gap-1.5` (6px) between the label and the chevron, replacing the chevron's old `ml-1` (4px) margin — matches Figma's `padding/p-1-5` gap token exactly.
+- **Link** (`NavigationMenuLink`): padding `p-2` (8px) → `p-3` (12px); icon↔content gap `gap-1.5` (6px) → `gap-4` (16px); alignment `items-center` → `items-start` (Figma's link items top-align icon + title + two-line subtext); radius `rounded-sm` (4px) → `rounded-lg` (8px), matching the popup surface radius and `DropdownMenuItem`'s established radius.
+- **Popup/viewport chrome** (`NavigationMenuPositioner`, `NavigationMenuViewport`, and the no-viewport branch of `NavigationMenuContent`): `ring-1 ring-foreground/10` + generic `shadow` → `border border-border` + Figma's literal `card-light` effect (`shadow-[0px_1px_1px_0px_rgba(5,23,41,0.06)]`) — Figma uses a real 1px border, not a ring, same fix already applied to `DropdownMenuContent` in the dropdown-menu pass.
+- **Content** (`NavigationMenuContent`): padding `p-2 pr-2.5` (asymmetric, scrollbar-compensated) → uniform `p-2` (8px), matching Figma's content padding exactly.
+
+### Docs
+
+- `NavigationMenu.astro`'s "Featured Card" `@examples` block switched from a gradient fill (`bg-gradient-to-b from-muted/50 to-muted`, `rounded-md`) to a solid `bg-accent rounded-lg` fill, matching the structure of Figma's featured-card highlight (a flat accent-colored panel, not a gradient).
+
+### Tokens
+
+- No new tokens added. `popover`, `border`, `muted-foreground`, and `ring` (`primary-400`) were already bound correctly and needed no change.
+- **Known drift (not fixed in this pass):** Figma's `accent` variable for the featured-card highlight is `#ebf3fc` (light blue); the codebase's `--accent` token (`globals.css`) is a near-white gray (`oklch(0.97 0 0)`). Left as-is per design decision — the "Featured Card" example above uses `bg-accent` structurally, so it will pick up the correct color automatically whenever `--accent` is revisited as its own task.
+
+### Flagged for the designer / engineering (not addressed in this pass)
+
+- Figma's `showIcon`/`showTitle`/`showSubtext` booleans on the "Navigation Menu" component are Figma-prototyping variants, not real component props — Astro's slot-based composition shows/hides content by presence in the slot, not via a boolean prop. No action needed unless a named-slot pattern (e.g. `<slot name="icon">`) is specifically wanted.
+- The new 44px trigger height doesn't correspond to any size in the shared `Button` scale (`sm`=32px, `default`=36px, `lg`=40px, used by `DropdownMenuTrigger`) — currently bespoke to `NavigationMenuTrigger`. Worth a deliberate call on whether that should become a reusable `Button` size.
+- `NavigationMenuTrigger.astro` calls `cva()` with no `variants` map (just a base-string wrapper) — fine while the trigger has no real variants, but if Figma introduces trigger variants later, extend via the established `<component>-<part>-variants.ts` convention (see `dropdown-menu-item-variants.ts`, `link-group-list-variants.ts`) rather than inline `data-[...]:` selectors.
+
+## Unreleased

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

@@ -1,10 +1,10 @@
-export { default as NavigationMenu } from "./NavigationMenu.astro";
-export { default as NavigationMenuList } from "./NavigationMenuList.astro";
-export { default as NavigationMenuItem } from "./NavigationMenuItem.astro";
-export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.astro";
-export { default as NavigationMenuContent } from "./NavigationMenuContent.astro";
-export { default as NavigationMenuPositioner } from "./NavigationMenuPositioner.astro";
-export { default as NavigationMenuViewport } from "./NavigationMenuViewport.astro";
-export { default as NavigationMenuLink } from "./NavigationMenuLink.astro";
-export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.astro";
-export { navigationMenuTriggerStyle } from "./NavigationMenuTrigger.astro";
+export { default as NavigationMenu } from "./NavigationMenu.astro";
+export { default as NavigationMenuList } from "./NavigationMenuList.astro";
+export { default as NavigationMenuItem } from "./NavigationMenuItem.astro";
+export { default as NavigationMenuTrigger } from "./NavigationMenuTrigger.astro";
+export { default as NavigationMenuContent } from "./NavigationMenuContent.astro";
+export { default as NavigationMenuPositioner } from "./NavigationMenuPositioner.astro";
+export { default as NavigationMenuViewport } from "./NavigationMenuViewport.astro";
+export { default as NavigationMenuLink } from "./NavigationMenuLink.astro";
+export { default as NavigationMenuIndicator } from "./NavigationMenuIndicator.astro";
+export { navigationMenuTriggerStyle } from "./NavigationMenuTrigger.astro";

package/src/components/organisms/lightning-sidebar-nav/CHANGELOG.md

@@ -0,0 +1,50 @@
+# Changelog
+
+All notable changes to the `LightningSidebarNav` organism will be documented in this file.
+
+## Unreleased
+
+### Added
+
+- New **Organisms** tier (`packages/ui/src/components/organisms/`). `LightningSidebarNav` is the first organism, composed from existing components: Avatar, DropdownMenu, Collapsible, Badge, Separator, Skeleton and Button.
+- `LightningSidebarNav`: renders the whole sidebar from JSON-serialisable backend data (`workspace`, `workspaces`, `sections`, `footerItems`, `usage`, `upgrade`, `loading`).
+  - The active item is resolved from `activeId`, or the longest segment-prefix match of `currentPath` (defaults to `Astro.url.pathname`). It gets `aria-current="page"`.
+  - Groups containing the active link open automatically.
+- Composable parts for custom layouts:
+  - `SidebarNav`: the shell
+  - `SidebarNavWorkspaceSwitcher`
+  - `SidebarNavSection`: `density` is `default` or `compact`, with an optional category `label`
+  - `SidebarNavItem`
+  - `SidebarNavGroup`
+  - `SidebarNavSubItem`
+  - `SidebarNavUsage`
+  - `SidebarNavSkeleton`
+  - `SidebarNavProBadge`
+  - `SidebarNavWorkspaceAvatar`
+- `icons.ts`: a string → Lucide registry so backend data can name icons (`"house"`, `"video"`, …).
+- `sidebar-nav:workspace-change` event (`{ id }`, bubbles, cancelable). Fired when a workspace is picked. If the workspace has an `href` and the event isn't cancelled, the browser navigates there.
+
+### Figma alignment (node 7513:60)
+
+- **Group Item:**
+  - Default: `muted-foreground`, medium weight.
+  - Hover: `bg-muted`, foreground, semibold.
+  - Focus: 1px `sidebar-ring` inset ring.
+  - Active: `sidebar-accent` fill plus semibold `sidebar-accent-foreground`. Active is never shown by colour alone.
+- **.nav item:** 12px medium label against a 1px guide rail at 7.5px. When active, a darker 28px rail segment is drawn over it and the label uses `sidebar-accent-foreground`.
+- **Pro badge:** `Badge variant="accent" size="sm"` with a Lucide `zap` tail icon.
+- **Skeleton:** the workspace switcher stays real. Rows are a 16px square plus an 80px bar.
+- **Spacing:** primary list rows are 12px apart and footer links 2px apart. Separators take 16px of vertical space.
+
+### Tokens (`globals.css`)
+
+- Mapped the previously unused `--sidebar*` variables in `@theme inline`, which gives utilities like `bg-sidebar` and `text-sidebar-accent-foreground`.
+- Aligned the light values to Figma:
+  - `--sidebar`: zinc-50
+  - `--sidebar-accent`: primary-50
+  - `--sidebar-accent-foreground`: primary-950
+  - `--sidebar-border`: `--border`
+  - `--sidebar-ring`: `--ring`
+- Dark mode uses a primary-tinted accent.
+- Added `--sidebar-rail` (zinc-300 light / 15% white dark) for the sub-item guide line.
+- The shared `--accent` token is unchanged.