@cl-light-ds/ui 0.2.0 → 0.4.0

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

@@ -1,125 +1,125 @@
----
-/**
- * @component NativeSelect
- * @title Native Select
- * @description A styled native HTML select element with consistent design system integration.
- *
- * @preview
- * <NativeSelect class="w-[200px]">
- *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
- *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
- *   <NativeSelectOption value="cherry">Cherry</NativeSelectOption>
- * </NativeSelect>
- *
- * @usage
- *
- * ```astro nocollapse
- * ---
- * import {
- *   NativeSelect,
- *   NativeSelectOption,
- *   NativeSelectOptGroup,
- * } from '@bejamas/ui/components/native-select';
- * ---
- *
- * <NativeSelect>
- *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
- *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
- * </NativeSelect>
- * ```
- *
- * ### Native Select vs Select
- *
- * Use **NativeSelect** when you need standard browser form behavior — native validation, mobile-optimized pickers, and zero JavaScript. Use **Select** when you need a custom-styled dropdown with keyboard navigation, grouped items, and rich content.
- *
- * @examples
- *
- * ### With Groups
- *
- * <NativeSelect class="w-[200px]">
- *   <NativeSelectOptGroup label="Fruits">
- *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
- *   </NativeSelectOptGroup>
- *   <NativeSelectOptGroup label="Vegetables">
- *     <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
- *     <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
- *   </NativeSelectOptGroup>
- * </NativeSelect>
- *
- * ### Sizes
- *
- * <div class="flex flex-col items-start gap-4 sm:flex-row">
- *   <NativeSelect class="w-[180px]" size="sm">
- *     <NativeSelectOption value="">Small (h-8)</NativeSelectOption>
- *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
- *   </NativeSelect>
- *   <NativeSelect class="w-[180px]" size="default">
- *     <NativeSelectOption value="">Default (h-9)</NativeSelectOption>
- *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
- *   </NativeSelect>
- *   <NativeSelect class="w-[180px]" size="lg">
- *     <NativeSelectOption value="">Large (h-10)</NativeSelectOption>
- *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
- *   </NativeSelect>
- * </div>
- *
- * ### Disabled
- *
- * <NativeSelect disabled class="w-[200px]">
- *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
- * </NativeSelect>
- *
- * ### Invalid
- *
- * <NativeSelect aria-invalid="true" class="w-[200px]">
- *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
- *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
- *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
- * </NativeSelect>
- *
- */
-
-import type { HTMLAttributes } from "astro/types";
-import { cn } from "@cl-light-ds/ui/lib/utils";
-
-interface Props extends HTMLAttributes<"select"> {
-  class?: string;
-  size?: "sm" | "default" | "lg";
-}
-
-const {
-  class: className = "",
-  size = "default",
-  ...rest
-} = Astro.props as Props;
----
-
-<div
-  data-slot="native-select-wrapper"
-  data-size={size}
-  class={cn("",
-    "group/native-select relative w-fit has-[select:disabled]:opacity-50",
-    className,
-  )}
->
-  <select
-    data-slot="native-select"
-    data-size={size}
-    class={cn(
-      "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8 rounded-lg outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
-    )}
-    {...rest}
-  >
-    <slot />
-  </select>
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none"
-    aria-hidden="true"
-    data-slot="native-select-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
-</div>
+---
+/**
+ * @component NativeSelect
+ * @title Native Select
+ * @description A styled native HTML select element with consistent design system integration.
+ *
+ * @preview
+ * <NativeSelect class="w-[200px]">
+ *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+ *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ *   <NativeSelectOption value="cherry">Cherry</NativeSelectOption>
+ * </NativeSelect>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import {
+ *   NativeSelect,
+ *   NativeSelectOption,
+ *   NativeSelectOptGroup,
+ * } from '@bejamas/ui/components/native-select';
+ * ---
+ *
+ * <NativeSelect>
+ *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+ *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ * </NativeSelect>
+ * ```
+ *
+ * ### Native Select vs Select
+ *
+ * Use **NativeSelect** when you need standard browser form behavior — native validation, mobile-optimized pickers, and zero JavaScript. Use **Select** when you need a custom-styled dropdown with keyboard navigation, grouped items, and rich content.
+ *
+ * @examples
+ *
+ * ### With Groups
+ *
+ * <NativeSelect class="w-[200px]">
+ *   <NativeSelectOptGroup label="Fruits">
+ *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ *   </NativeSelectOptGroup>
+ *   <NativeSelectOptGroup label="Vegetables">
+ *     <NativeSelectOption value="carrot">Carrot</NativeSelectOption>
+ *     <NativeSelectOption value="broccoli">Broccoli</NativeSelectOption>
+ *   </NativeSelectOptGroup>
+ * </NativeSelect>
+ *
+ * ### Sizes
+ *
+ * <div class="flex flex-col items-start gap-4 sm:flex-row">
+ *   <NativeSelect class="w-[180px]" size="sm">
+ *     <NativeSelectOption value="">Small (h-8)</NativeSelectOption>
+ *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ *   </NativeSelect>
+ *   <NativeSelect class="w-[180px]" size="default">
+ *     <NativeSelectOption value="">Default (h-9)</NativeSelectOption>
+ *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ *   </NativeSelect>
+ *   <NativeSelect class="w-[180px]" size="lg">
+ *     <NativeSelectOption value="">Large (h-10)</NativeSelectOption>
+ *     <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *     <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ *   </NativeSelect>
+ * </div>
+ *
+ * ### Disabled
+ *
+ * <NativeSelect disabled class="w-[200px]">
+ *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ * </NativeSelect>
+ *
+ * ### Invalid
+ *
+ * <NativeSelect aria-invalid="true" class="w-[200px]">
+ *   <NativeSelectOption value="">Select a fruit</NativeSelectOption>
+ *   <NativeSelectOption value="apple">Apple</NativeSelectOption>
+ *   <NativeSelectOption value="banana">Banana</NativeSelectOption>
+ * </NativeSelect>
+ *
+ */
+
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+
+interface Props extends HTMLAttributes<"select"> {
+  class?: string;
+  size?: "sm" | "default" | "lg";
+}
+
+const {
+  class: className = "",
+  size = "default",
+  ...rest
+} = Astro.props as Props;
+---
+
+<div
+  data-slot="native-select-wrapper"
+  data-size={size}
+  class={cn("",
+    "group/native-select relative w-fit has-[select:disabled]:opacity-50",
+    className,
+  )}
+>
+  <select
+    data-slot="native-select"
+    data-size={size}
+    class={cn(
+      "border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8 rounded-lg outline-none disabled:pointer-events-none disabled:cursor-not-allowed",
+    )}
+    {...rest}
+  >
+    <slot />
+  </select>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none"
+    aria-hidden="true"
+    data-slot="native-select-icon"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9l6 6l6-6"/></svg>
+</div>

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

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

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