sdaia-ui 1.0.1

package/src/components/NavHeaderMenuButton/NavHeaderMenuButton.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { HamburgerIcon, XIcon } from '../../icons/IconFactory';
+import type { NavHeaderMenuButtonProps } from './NavHeaderMenuButton.types';
+import { ROOT_BASE, ICON_SLOT } from './NavHeaderMenuButton.variants';
+
+/**
+ * NavHeaderMenuButton — the 40×40 icon-only control that opens and
+ * closes the mobile navigation drawer in the app header.
+ *
+ * States — driven entirely by CSS pseudo-classes (no prop coupling):
+ *   - default       → transparent background
+ *   - hover         → neutral-hovered background
+ *   - active/press  → neutral-pressed background
+ *   - focus-visible → 2px solid black border (inset, no layout shift)
+ *   - disabled      → 50% opacity, hover/active neutralised
+ *
+ * The `opened` prop only controls which glyph renders (hamburger ↔ ×)
+ * and the default `aria-label` / `aria-expanded` values.
+ *
+ * Keyboard: native `<button>` gives Enter / Space activation and Tab
+ * focus. `aria-expanded` communicates the open/closed state to assistive
+ * technologies.
+ */
+export const NavHeaderMenuButton = forwardRef<
+  HTMLButtonElement,
+  NavHeaderMenuButtonProps
+>(function NavHeaderMenuButton(
+  { opened = false, className, type = 'button', 'aria-label': ariaLabel, ...rest },
+  ref,
+) {
+  const resolvedAriaLabel = ariaLabel ?? (opened ? 'Close menu' : 'Open menu');
+
+  return (
+    <button
+      ref={ref}
+      type={type}
+      data-slot="nav-header-menu-button"
+      data-opened={opened || undefined}
+      aria-expanded={opened}
+      aria-label={resolvedAriaLabel}
+      className={cn(ROOT_BASE, className)}
+      {...rest}
+    >
+      <span data-slot="icon" className={ICON_SLOT}>
+        {opened ? <XIcon /> : <HamburgerIcon />}
+      </span>
+    </button>
+  );
+});

package/src/components/NavHeaderMenuButton/NavHeaderMenuButton.types.ts

@@ -0,0 +1,17 @@
+import type { ButtonHTMLAttributes } from 'react';
+
+export interface NavHeaderMenuButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Whether the associated menu/drawer is currently open.
+   * Toggles the glyph between the hamburger (closed) and the × (open) icon.
+   * @default false
+   */
+  opened?: boolean;
+  /**
+   * Accessible label for the button. Strongly recommended — defaults
+   * are provided (`Open menu` / `Close menu`) but consumers should
+   * override to match their product copy or localisation.
+   */
+  'aria-label'?: string;
+}

package/src/components/NavHeaderMenuButton/NavHeaderMenuButton.variants.ts

@@ -0,0 +1,73 @@
+/*
+ * NavHeaderMenuButton — class constants
+ *
+ * State model (CSS-driven, NOT props):
+ *   default   → base (transparent background, icon #161616)
+ *   hovered   → `hover:` pseudo → bg #f3f4f6 (button-background-neutral-hovered)
+ *   pressed   → `active:` pseudo → bg #e5e7eb (button-background-neutral-pressed)
+ *   focused   → `focus-visible:` pseudo → 2px solid #161616 border, inset via box-sizing
+ *
+ * Figma: node 5069:58898 ("_Nav Header Menu Button"). 40×40 outer box,
+ * 24×24 icon, 8px padding, 8px corner radius.
+ */
+
+/* ── Root button ───────────────────────────────────────────────── */
+/**
+ * Base class string applied to the `<button>` element.
+ *
+ * Token mapping:
+ *   p-spacing-md       → 8px padding (matches Global/spacing-md)
+ *   rounded-[8px]      → matches Radius/radius-8 (no responsive alias)
+ *   size-[40px]        → 24px icon + 2×8px padding → fixed 40×40 per Figma
+ *
+ * Colour & focus:
+ *   Default text colour = Icon/icon-default (#161616); the icon inherits
+ *   it via `fill="currentColor"`.
+ *   Hover   → button-background-neutral-hovered (#f3f4f6)
+ *   Active  → button-background-neutral-pressed (#e5e7eb)
+ *   Focus   → 2px solid #161616 border (Border/border-black)
+ *
+ * Dark-mode values follow the package convention: low-alpha white
+ * overlays for hover/pressed, and a light border for focus.
+ *
+ * `focus-visible:outline-none` prevents the browser default ring from
+ * stacking with our custom 2px border. The 2px border is applied via
+ * a transparent default `border-2 border-transparent` so the button
+ * does not shift by 2px when focus lands on it.
+ */
+export const ROOT_BASE = [
+  // Layout
+  'inline-flex items-center justify-center',
+  'size-[40px] shrink-0',
+  'p-spacing-md',
+  'rounded-[8px]',
+  // Reserve space for the focus border so default/hover/pressed don't shift
+  'border-2 border-transparent',
+  // Colours — default (text drives icon colour via currentColor)
+  'bg-transparent',
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]',
+  // Cursor / transition
+  'cursor-pointer',
+  'motion-feedback',
+  // Hover
+  'hover:bg-[rgba(243,244,246,1)] dark:hover:bg-[rgba(255,255,255,0.06)]',
+  // Pressed / active
+  'active:bg-[rgba(229,231,235,1)] dark:active:bg-[rgba(255,255,255,0.1)]',
+  // Focus-visible — 2px solid black border, background returns to transparent
+  'focus-visible:outline-none',
+  'focus-visible:border-[rgba(22,22,22,1)] dark:focus-visible:border-[rgba(210,214,219,1)]',
+  'focus-visible:bg-transparent dark:focus-visible:bg-transparent',
+  // Disabled
+  'disabled:cursor-not-allowed disabled:opacity-50',
+  'disabled:hover:bg-transparent disabled:active:bg-transparent',
+].join(' ');
+
+/* ── Icon slot ─────────────────────────────────────────────────── */
+/**
+ * Fixed 24×24 wrapper around the inline SVG. Figma specifies a
+ * constant 24px glyph at every breakpoint, and no `size-icon-*`
+ * token resolves to 24 across all three breakpoints, so this is
+ * an intentional hardcode.
+ */
+export const ICON_SLOT =
+  'inline-flex items-center justify-center shrink-0 size-[24px]';

package/src/components/NavHeaderMenuButton/index.ts

@@ -0,0 +1,2 @@
+export { NavHeaderMenuButton } from './NavHeaderMenuButton';
+export type { NavHeaderMenuButtonProps } from './NavHeaderMenuButton.types';

package/src/components/NavHeaderMenuCard/NavHeaderMenuCard.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { PlayIcon } from '../../icons/IconFactory';
+import type { NavHeaderMenuCardProps } from './NavHeaderMenuCard.types';
+import {
+  ROOT_BY_LAYOUT,
+  ACTIVE_BG,
+  IMAGE_WRAPPER_BY_LAYOUT,
+  PLAY_OVERLAY_BASE,
+  PLAY_ICON_SLOT,
+  CONTENT_BY_LAYOUT,
+  TEXT_BLOCK,
+  TITLE_TEXT,
+  DESCRIPTION_TEXT,
+  ACTIONS_ROW_BY_TYPE,
+} from './NavHeaderMenuCard.variants';
+
+/**
+ * NavHeaderMenuCard — the content card rendered inside the mobile
+ * nav-header expanded drawer / desktop mega-menu. Supports three
+ * visual types (image / video / featured) and two layouts
+ * (inline / stacked), plus an `active` state for "currently selected".
+ *
+ * Structure:
+ *   ┌────────────────────────────────────────────┐
+ *   │  [image]  ┐  Title              (inline)   │
+ *   │           │  Description                   │
+ *   │           └  [ actions … ]                 │
+ *   └────────────────────────────────────────────┘
+ *
+ * Composition:
+ *   - `image`   → consumer-supplied ReactNode (no hardcoded asset path).
+ *   - `actions` → consumer-supplied ReactNode — typically pre-configured
+ *                 `<Button>`s from sdaia-ui.
+ *
+ * States:
+ *   - `active` (prop) → background-body fill
+ *   - hover / focus / press of inner buttons are handled by `<Button>`
+ *   - the video play overlay is itself a focusable `<button>`
+ *
+ * RTL: ambient `dir="rtl"` is fully supported — the card uses logical
+ * flex direction so the image swaps sides automatically.
+ */
+export const NavHeaderMenuCard = forwardRef<
+  HTMLDivElement,
+  NavHeaderMenuCardProps
+>(function NavHeaderMenuCard(
+  {
+    type = 'image',
+    layout = 'inline',
+    active = false,
+    title,
+    description,
+    image,
+    onPlayClick,
+    playAriaLabel = 'Play video',
+    actions,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const isVideo = type === 'video';
+
+  /* ── Image wrapper content (image + optional play overlay) ───── */
+  const imageContent = image ? (
+    <div
+      data-slot="image-wrapper"
+      className={IMAGE_WRAPPER_BY_LAYOUT[layout]}
+    >
+      {image}
+      {isVideo ? (
+        <button
+          type="button"
+          data-slot="play-overlay"
+          onClick={onPlayClick}
+          aria-label={playAriaLabel}
+          className={PLAY_OVERLAY_BASE}
+        >
+          <span className={PLAY_ICON_SLOT}>
+            <PlayIcon />
+          </span>
+        </button>
+      ) : null}
+    </div>
+  ) : null;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="nav-header-menu-card"
+      data-type={type}
+      data-layout={layout}
+      data-active={active || undefined}
+      className={cn(
+        ROOT_BY_LAYOUT[layout],
+        active && ACTIVE_BG,
+        className,
+      )}
+      {...rest}
+    >
+      {imageContent}
+
+      <div data-slot="content" className={CONTENT_BY_LAYOUT[layout]}>
+        <div data-slot="text-block" className={TEXT_BLOCK}>
+          <p data-slot="title" className={TITLE_TEXT}>
+            {title}
+          </p>
+          {description ? (
+            <p data-slot="description" className={DESCRIPTION_TEXT}>
+              {description}
+            </p>
+          ) : null}
+        </div>
+
+        {actions ? (
+          <div data-slot="actions" className={ACTIONS_ROW_BY_TYPE[type]}>
+            {actions}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+});

package/src/components/NavHeaderMenuCard/NavHeaderMenuCard.types.ts

@@ -0,0 +1,74 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/** Visual type — drives which action pattern and image treatment is used. */
+export type NavHeaderMenuCardType = 'image' | 'video' | 'featured';
+
+/** Layout orientation of image relative to content. */
+export type NavHeaderMenuCardLayout = 'inline' | 'stacked';
+
+export interface NavHeaderMenuCardProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+  /**
+   * Visual type:
+   *  - `image`    → image on the side (inline) or on top (stacked)
+   *  - `video`    → same layout as image + a play-button overlay on the image
+   *  - `featured` → image + two text-only action buttons under the content
+   * @default 'image'
+   */
+  type?: NavHeaderMenuCardType;
+
+  /**
+   * Layout orientation:
+   *  - `inline`  → image next to content, card is a 420 px row
+   *  - `stacked` → image on top, card is a 320 px column
+   * @default 'inline'
+   */
+  layout?: NavHeaderMenuCardLayout;
+
+  /**
+   * Marks the card as active (e.g. the currently selected item in the nav
+   * header menu). Applies a subtle background-body fill.
+   * @default false
+   */
+  active?: boolean;
+
+  /** Card title — rendered as a `<p>` with Text md/Semibold styling. */
+  title: ReactNode;
+
+  /** Helper / description text below the title. Omit to hide. */
+  description?: ReactNode;
+
+  /**
+   * The image element shown in the image wrapper. Usually an `<img />` or
+   * a `<div>` with a background image. Consumer-supplied so the component
+   * ships with no hardcoded asset path — this keeps the card fully usable
+   * on a fresh project install where local `public/` assets don't exist.
+   */
+  image?: ReactNode;
+
+  /**
+   * When `type='video'`, fires when the play-button overlay is clicked
+   * or activated via keyboard. Ignored for other types.
+   */
+  onPlayClick?: () => void;
+
+  /**
+   * When `type='video'`, the accessible label for the play-button overlay.
+   * @default 'Play video'
+   */
+  playAriaLabel?: string;
+
+  /**
+   * The action row under the content. Consumer passes pre-configured
+   * `<Button />`s. Recommended patterns per type:
+   *  - image    → 1× `<Button variant="secondary-outline" trailingIcon={<ArrowRightIcon />}>Read Post</Button>`
+   *  - video    → 1× `<Button variant="secondary-outline" leadingIcon={<PlayIcon />}>Watch Video</Button>`
+   *  - featured → 2× `<Button variant="subtle">…</Button>`
+   * The component does not inject buttons so consumers keep full control
+   * over labels, hrefs, destructive variants, localisation, etc.
+   */
+  actions?: ReactNode;
+
+  /** Extra classes merged onto the root `<div>`. */
+  className?: string;
+}

package/src/components/NavHeaderMenuCard/NavHeaderMenuCard.variants.ts

@@ -0,0 +1,169 @@
+import type {
+  NavHeaderMenuCardLayout,
+  NavHeaderMenuCardType,
+} from './NavHeaderMenuCard.types';
+
+/*
+ * NavHeaderMenuCard — class constants
+ *
+ * Figma: node 5098:59841 "_Nav Header Menu Card". Matrix:
+ *   type    × layout  × state   × rtl
+ *   3       × 2       × 2       × 2  → 24 visual permutations
+ *
+ * State model:
+ *   active (prop)  → background-body fill on the root
+ *   RTL            → ambient `dir` attribute, no code change required
+ *                    (logical properties handle flip)
+ *   hover/press/focus of the inner action buttons → handled by <Button>
+ */
+
+/* ── Root container (per layout) ───────────────────────────────── */
+/**
+ * Token mapping:
+ *   p-spacing-lg   → 12 px padding
+ *   gap-spacing-lg → 12 px gap (inline: horizontal; stacked: vertical)
+ *   rounded-[8px]  → Radius/radius-8 (no responsive alias)
+ *   w-[420px]      → Figma inline card width
+ *   w-[320px]      → Figma stacked card width
+ *
+ * `overflow-clip` mirrors the Figma frame so the image radius clips.
+ * Transition is tokenised via `--motion-duration-fast` so the active-bg
+ * change is animated consistently with the rest of the design system.
+ */
+export const ROOT_BY_LAYOUT: Record<NavHeaderMenuCardLayout, string> = {
+  inline: [
+    'content-stretch flex gap-spacing-lg items-center',
+    'p-spacing-lg rounded-[8px] overflow-clip',
+    'w-[420px] max-w-full',
+    'motion-feedback',
+  ].join(' '),
+  stacked: [
+    'content-stretch flex flex-col gap-spacing-lg items-start',
+    'p-spacing-lg rounded-[8px] overflow-clip',
+    'w-[320px] max-w-full',
+    'motion-feedback',
+  ].join(' '),
+};
+
+/* ── Active-state background ───────────────────────────────────── */
+/**
+ * Light: Background/background-body (#f9fafb)
+ * Dark:  low-alpha white overlay matching the rest of the package
+ *        (see MenuButtonItem, Chip, etc. for the same convention).
+ */
+export const ACTIVE_BG =
+  'bg-[rgba(249,250,251,1)] dark:bg-[rgba(255,255,255,0.06)]';
+
+/* ── Image wrapper ─────────────────────────────────────────────── */
+/**
+ * Inline  → fixed 120×120 square (matches Figma exactly across breakpoints)
+ * Stacked → full-width, aspect ratio preserved per Figma (356:250).
+ *
+ * `relative` is required for the video play-overlay to absolute-center.
+ * `overflow-hidden` ensures the image's `object-cover` respects the
+ * rounded corners.
+ */
+export const IMAGE_WRAPPER_BY_LAYOUT: Record<NavHeaderMenuCardLayout, string> =
+  {
+    inline:
+      'relative shrink-0 size-[120px] rounded-[8px] overflow-hidden ' +
+      'flex items-center justify-center',
+    stacked:
+      'relative w-full aspect-[356/250] rounded-[8px] overflow-hidden ' +
+      'flex items-center justify-center',
+  };
+
+/**
+ * Applied to user-supplied `<img>` children implicitly via a wrapping
+ * div + explicit Tailwind classes on the child when it is an `<img>`.
+ * Here exposed as a constant so the component and any future variants
+ * agree on the exact image fitting behaviour.
+ */
+export const IMAGE_FIT_CLASSES =
+  'block size-full object-cover';
+
+/* ── Video play overlay ────────────────────────────────────────── */
+/**
+ * Absolutely centered pill on top of the image.
+ * Token mapping:
+ *   p-spacing-xs  → 4 px padding
+ *   rounded-[8px] → Radius/radius-8
+ *   bg            → Button/button-background-transparent-selected (rgba 255,255,255,0.3)
+ *
+ * Focus ring matches Button's ring token family so it feels consistent
+ * when a user tabs onto the overlay.
+ */
+export const PLAY_OVERLAY_BASE = [
+  'absolute inset-0 m-auto',
+  'inline-flex items-center justify-center',
+  'size-fit p-spacing-xs rounded-[8px]',
+  'bg-[rgba(255,255,255,0.3)]',
+  'text-white',
+  'cursor-pointer',
+  'motion-feedback',
+  'hover:bg-[rgba(255,255,255,0.4)]',
+  'active:bg-[rgba(255,255,255,0.5)]',
+  'focus-visible:outline-none',
+  'focus-visible:ring-2 focus-visible:ring-[rgba(255,255,255,0.8)]',
+  'focus-visible:ring-offset-2 focus-visible:ring-offset-black/20',
+].join(' ');
+
+/** Fixed 24 px glyph — Figma-specific size, no responsive token matches. */
+export const PLAY_ICON_SLOT =
+  'inline-flex items-center justify-center shrink-0 size-[24px]';
+
+/* ── Content column ────────────────────────────────────────────── */
+/**
+ * Inline  → grows to fill remaining row width, `min-w-0` enables
+ *           child text truncation / wrapping.
+ * Stacked → full-width column.
+ *
+ * `gap-spacing-lg` is the 12 px vertical gap between the title/helper
+ * block and the actions row.
+ */
+export const CONTENT_BY_LAYOUT: Record<NavHeaderMenuCardLayout, string> = {
+  inline:
+    'content-stretch flex flex-1 min-w-0 flex-col gap-spacing-lg items-start',
+  stacked:
+    'content-stretch flex w-full flex-col gap-spacing-lg items-start',
+};
+
+/* ── Text block ────────────────────────────────────────────────── */
+/** Gap between title and description: 4 px (Global/spacing-xs). */
+export const TEXT_BLOCK =
+  'flex w-full flex-col items-start gap-spacing-xs';
+
+/**
+ * Title — Text md/Semibold.
+ *   Font size uses responsive `text-text-md` token.
+ *   Line height is baked into the `@utility` in globals.css.
+ *   Color: Text/text-display.
+ */
+export const TITLE_TEXT = [
+  'text-text-md font-[600]',
+  'text-[rgba(31,42,55,1)] dark:text-[rgba(229,231,235,1)]',
+  'w-full',
+].join(' ');
+
+/**
+ * Description — Text sm/Regular.
+ *   Color: Text/text-primary-paragraph.
+ */
+export const DESCRIPTION_TEXT = [
+  'text-text-sm font-[400]',
+  'text-[rgba(56,66,80,1)] dark:text-[rgba(156,163,175,1)]',
+  'w-full',
+].join(' ');
+
+/* ── Actions row ───────────────────────────────────────────────── */
+/**
+ * Featured card uses 8 px gap between its two text-only buttons.
+ * Image / Video cards typically render a single button so the gap is
+ * inert there — kept the same for simplicity and so that a consumer
+ * choosing to render two buttons on those types still gets spacing.
+ */
+export const ACTIONS_ROW_BY_TYPE: Record<NavHeaderMenuCardType, string> = {
+  image: 'flex w-full items-center gap-spacing-md',
+  video: 'flex w-full items-center gap-spacing-md',
+  featured: 'flex w-full items-center gap-spacing-md',
+};

package/src/components/NavHeaderMenuCard/index.ts

@@ -0,0 +1,6 @@
+export { NavHeaderMenuCard } from './NavHeaderMenuCard';
+export type {
+  NavHeaderMenuCardProps,
+  NavHeaderMenuCardType,
+  NavHeaderMenuCardLayout,
+} from './NavHeaderMenuCard.types';

package/src/components/NavHeaderMenuItem/NavHeaderMenuItem.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import type { NavHeaderMenuItemProps } from './NavHeaderMenuItem.types';
+import {
+  CONTAINER_BASE,
+  CONTAINER_DESKTOP,
+  CONTAINER_MOBILE,
+  HOVER_BG,
+  FOCUS_CLOSED,
+  FOCUS_OPEN,
+  LABEL_BASE,
+  LABEL_CLOSED,
+  LABEL_OPEN,
+  LABEL_MOBILE,
+  LABEL_DESKTOP,
+  LEADING_ICON_WRAPPER,
+  LEADING_ICON_SIZE,
+  LEADING_ICON_CLOSED,
+  LEADING_ICON_OPEN,
+  TRAILING_ICON_WRAPPER,
+  TRAILING_ICON_SIZE,
+  TRAILING_ICON_CLOSED,
+  TRAILING_ICON_OPEN,
+} from './NavHeaderMenuItem.variants';
+import { PlayIconTwotone, ArrowUpIcon, ArrowDownIcon } from '../../icons/IconFactory';
+
+/**
+ * NavHeaderMenuItem — a navigation top-bar menu trigger item.
+ *
+ * Combines a leading play icon, a text label, and a trailing chevron into a
+ * single focusable, hoverable, clickable button. Intended to sit inside a
+ * horizontal navigation header and act as the trigger for a dropdown panel.
+ *
+ * Pixel-perfect match to Figma node 5069-58559 ("_Nav Header Menu Item") across
+ * all 20 variants (2 RTL × 3 states × 2 open × 2 mobile combinations).
+ *
+ * ── States ────────────────────────────────────────────────────────────────────
+ *   Default  → transparent background, neutral colour palette
+ *   Hovered  → `background-body` (#f9fafb) fill, darker icon/text
+ *   Focused  → 2 px border + 3 px white outer ring (desktop only)
+ *
+ * ── Open vs closed ────────────────────────────────────────────────────────────
+ *   open=false → grey play icon, regular-weight label, arrow-down, black focus border
+ *   open=true  → brand-green play icon, medium-weight label, arrow-up, green focus border
+ *
+ * ── Layout ────────────────────────────────────────────────────────────────────
+ *   mobile=false (default) → 40 px high, compact padding, content-width
+ *   mobile=true            → 48 px high, larger padding, full-width flex label
+ *
+ * ── RTL ───────────────────────────────────────────────────────────────────────
+ *   Fully automatic via `dir="rtl"` on an ancestor element.
+ *   Flex `row` direction respects the inline start/end direction: play icon
+ *   moves to the trailing (right) edge and the arrow to the leading (left) edge
+ *   without any extra code.
+ *
+ * @example
+ * // Controlled open/close toggle
+ * const [open, setOpen] = useState(false);
+ * <NavHeaderMenuItem
+ *   open={open}
+ *   label="Products"
+ *   onClick={() => setOpen(o => !o)}
+ * />
+ *
+ * // Mobile layout
+ * <NavHeaderMenuItem mobile open label="Solutions" />
+ *
+ * // RTL — wrap in a dir="rtl" ancestor
+ * <div dir="rtl">
+ *   <NavHeaderMenuItem label="المنتجات" />
+ * </div>
+ */
+export const NavHeaderMenuItem = forwardRef<HTMLButtonElement, NavHeaderMenuItemProps>(
+  function NavHeaderMenuItem(
+    {
+      open = false,
+      selected = false,
+      mobile = false,
+      label = 'Header Item',
+      showLeadingIcon = true,
+      showTrailingIcon = true,
+      leadingIcon,
+      className,
+      ...rest
+    },
+    ref,
+  ) {
+    /* Either `open` (transient — dropdown showing) or `selected`
+     * (persistent — current page) gets the brand-green colour treatment.
+     * `open` continues to own the chevron direction. */
+    const isHighlighted = open || selected;
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        data-slot="nav-header-menu-item"
+        data-state={open ? 'open' : 'closed'}
+        data-selected={selected || undefined}
+        aria-expanded={open}
+        aria-current={selected ? 'page' : undefined}
+        className={cn(
+          CONTAINER_BASE,
+          mobile ? CONTAINER_MOBILE : CONTAINER_DESKTOP,
+          HOVER_BG,
+          /* Focus ring: color depends on highlight; suppressed on mobile (Figma) */
+          !mobile && (isHighlighted ? FOCUS_OPEN : FOCUS_CLOSED),
+          className,
+        )}
+        {...rest}
+      >
+        {/* ── Leading play icon ──────────────────────────────────────────── */}
+        {showLeadingIcon && (
+          <span
+            data-slot="nav-header-menu-item-leading-icon"
+            className={cn(
+              LEADING_ICON_WRAPPER,
+              LEADING_ICON_SIZE,
+              isHighlighted ? LEADING_ICON_OPEN : LEADING_ICON_CLOSED,
+            )}
+          >
+            {leadingIcon ?? (
+              <PlayIconTwotone aria-hidden="true" />
+            )}
+          </span>
+        )}
+
+        {/* ── Label ─────────────────────────────────────────────────────── */}
+        <span
+          data-slot="nav-header-menu-item-label"
+          className={cn(
+            LABEL_BASE,
+            mobile ? LABEL_MOBILE : LABEL_DESKTOP,
+            isHighlighted ? LABEL_OPEN : LABEL_CLOSED,
+          )}
+        >
+          {label}
+        </span>
+
+        {/* ── Trailing chevron arrow ─────────────────────────────────────── */}
+        {showTrailingIcon && (
+          <span
+            data-slot="nav-header-menu-item-trailing-icon"
+            className={cn(
+              TRAILING_ICON_WRAPPER,
+              TRAILING_ICON_SIZE,
+              isHighlighted ? TRAILING_ICON_OPEN : TRAILING_ICON_CLOSED,
+            )}
+          >
+            {open ? (
+              <ArrowUpIcon aria-hidden="true" width="100%" height="100%" />
+            ) : (
+              <ArrowDownIcon aria-hidden="true" width="100%" height="100%" />
+            )}
+          </span>
+        )}
+      </button>
+    );
+  },
+);
+
+NavHeaderMenuItem.displayName = 'NavHeaderMenuItem';