@bearmenu/ui 0.8.13 → 0.8.15

package/src/components/poster-wall.stories.tsx

@@ -80,6 +80,90 @@ export const NoTiles: Story = {
   args: { children: <h1 className="text-3xl font-black">No poster data yet</h1> },
 };
 
+function StripFrame({
+  width,
+  height,
+  children,
+}: {
+  width: number;
+  height: number;
+  children: React.ReactNode;
+}) {
+  return (
+    <div
+      className="relative mx-auto overflow-hidden rounded-2xl"
+      style={{ width, height }}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * The banner backdrop: fills the caller's box, two rows of 4:5 tiles filled
+ * from the right edge (soonest-first), full-opacity posters under a veil that
+ * is dense on the left and clears on the right.
+ */
+export const Strip: Story = {
+  render: () => (
+    <StripFrame width={343} height={150}>
+      <PosterWall variant="strip" tiles={tiles(12)} />
+      <div className="relative flex h-full flex-col justify-between p-4 text-white">
+        <h2 className="max-w-[62%] font-serif text-2xl font-semibold leading-[1.05]">
+          Today in Cluj-Napoca
+        </h2>
+        <span className="text-xs font-semibold uppercase tracking-[0.14em] text-white/70">
+          4 events today
+        </span>
+      </div>
+    </StripFrame>
+  ),
+};
+
+/** The desktop hero box: thirteen columns of 111px posters. */
+export const StripHero: Story = {
+  render: () => (
+    <StripFrame width={1408} height={280}>
+      <PosterWall variant="strip" tiles={tiles(26)} />
+      <div className="relative flex h-full max-w-[46%] flex-col justify-center gap-3 px-10 text-white">
+        <span className="text-xs font-semibold uppercase tracking-[0.16em] text-white/70">
+          33 upcoming events
+        </span>
+        <h2 className="font-serif text-[44px] leading-[1.06] tracking-[-0.01em]">
+          Up next in Cluj-Napoca
+        </h2>
+      </div>
+    </StripFrame>
+  ),
+};
+
+/** A sparse city: three posters, lit at the right edge; the rest is wall. */
+export const StripSparse: Story = {
+  render: () => (
+    <StripFrame width={343} height={150}>
+      <PosterWall variant="strip" tiles={tiles(3)} />
+    </StripFrame>
+  ),
+};
+
+/** No events at all: every slot is the placeholder and the sweep is off. */
+export const StripEmpty: Story = {
+  render: () => (
+    <StripFrame width={343} height={150}>
+      <PosterWall variant="strip" tiles={[]} sweep={false} />
+    </StripFrame>
+  ),
+};
+
+/** The strip's loading state, at rest. */
+export const StripSkeleton: Story = {
+  render: () => (
+    <StripFrame width={343} height={150}>
+      <PosterWallSkeleton variant="strip" />
+    </StripFrame>
+  ),
+};
+
 /** The tile grid at rest — no sweeping light in the loading state. */
 export const Skeleton: Story = {
   render: () => <PosterWallSkeleton />,

package/src/components/poster-wall.test.tsx

@@ -1,10 +1,101 @@
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
-import { PosterWall } from "./poster-wall";
+import { describe, it, expect, afterEach } from "vitest";
+import { act, render } from "@testing-library/react";
+import { PosterWall, stripGeometry } from "./poster-wall";
 
 const grid = (container: HTMLElement) =>
   container.querySelector<HTMLElement>("[aria-hidden].grid")!;
 
+/**
+ * The setup's ResizeObserver never fires; the strip needs one measurement.
+ * Returns a `measure` that delivers it to every observed node, and a `restore`.
+ */
+function observeBox(width: number, height: number) {
+  const Original = globalThis.ResizeObserver;
+  const observers: { callback: ResizeObserverCallback; target: Element }[] =
+    [];
+  globalThis.ResizeObserver = class {
+    constructor(private callback: ResizeObserverCallback) {}
+    observe(target: Element) {
+      observers.push({ callback: this.callback, target });
+    }
+    unobserve() {}
+    disconnect() {}
+  };
+  return {
+    measure: () =>
+      act(() => {
+        for (const { callback, target } of observers) {
+          const entry = {
+            target,
+            contentRect: { width, height },
+          } as unknown as ResizeObserverEntry;
+          callback([entry], {} as ResizeObserver);
+        }
+      }),
+    restore: () => {
+      globalThis.ResizeObserver = Original;
+    },
+  };
+}
+
+describe("stripGeometry", () => {
+  it("cuts 4:5 tiles in two rows and covers the width", () => {
+    // 343×150 phone strip: (150 − 2) / 2 = 74 tall → 59 wide → 6 columns
+    expect(stripGeometry(343, 150)).toEqual({
+      tileWidth: 59,
+      cols: 6,
+      slotCount: 12,
+    });
+    // 1408×280 desktop hero: 139 tall → 111 wide → 13 columns
+    expect(stripGeometry(1408, 280)).toEqual({
+      tileWidth: 111,
+      cols: 13,
+      slotCount: 26,
+    });
+  });
+
+  it("caps the slot count", () => {
+    expect(stripGeometry(4000, 120).slotCount).toBe(32);
+  });
+});
+
+describe("PosterWall strip", () => {
+  let restore: (() => void) | undefined;
+  afterEach(() => restore?.());
+
+  it("paints no tiles before the box is measured", () => {
+    const { container } = render(
+      <PosterWall variant="strip" tiles={[{ src: "p0.jpg" }]} />,
+    );
+    expect(container.querySelector("[aria-hidden].grid")).toBeNull();
+  });
+
+  it("fills from the right, never cycles, and pads with placeholders", () => {
+    const box = observeBox(343, 150);
+    restore = box.restore;
+    const tiles = Array.from({ length: 3 }, (_, i) => ({ src: `p${i}.jpg` }));
+    const { container } = render(<PosterWall variant="strip" tiles={tiles} />);
+    box.measure();
+    const g = grid(container);
+    expect(g.style.gridAutoColumns).toBe("59px");
+    expect(g.children).toHaveLength(12);
+    expect(g.querySelectorAll("img")).toHaveLength(3);
+    // DOM order is fill order; `direction: rtl` puts index 0 at the top-right.
+    expect(g.children[0].getAttribute("src")).toBe("p0.jpg");
+    expect(g.children[3].tagName).toBe("DIV");
+  });
+
+  it("keeps the sweep paused when the caller turns it off", () => {
+    const { container } = render(
+      <PosterWall variant="strip" tiles={[]} sweep={false} />,
+    );
+    const sweep = container.querySelector<HTMLElement>(
+      "[style*='animation-name']",
+    )!;
+    expect(sweep.style.animationPlayState).toBe("paused");
+  });
+});
+
 describe("PosterWall grid", () => {
   it("sizes the grid to the tiles and completes the last row by cycling them", () => {
     const tiles = Array.from({ length: 5 }, (_, i) => ({ src: `p${i}.jpg` }));

package/src/components/poster-wall.tsx

@@ -30,11 +30,65 @@ import { Skeleton } from "./skeleton";
  * indefinitely at zero React cost — the keyframes are scoped to this file via
  * a `<style>` tag since editing the DS's global stylesheet is out of scope
  * for this component.
+ *
+ * ## `strip` — the wall as a banner backdrop
+ *
+ * The third variant is the one that does NOT own its box: it fills the
+ * caller's (`absolute inset-0`, no height, no radius) so a 16:7 banner or a
+ * 280px hero can put the wall behind its own type. Everything about it
+ * follows from the tiles having to be legible at ~75px tall:
+ *
+ * - Tiles are 4:5 portrait in two fixed rows — the shape says "posters", and
+ *   a portrait crop keeps a poster's headline word visible at 60px wide.
+ * - The grid fills column-major FROM THE RIGHT EDGE (`direction: rtl`), so
+ *   `tiles[0]` is the lit top-right poster and the caller passes them
+ *   soonest-first. The veil is dense on the left, where the type lives, and
+ *   clears on the right, where the posters show.
+ * - Tiles render at full opacity and the veil does all the darkening: the only
+ *   way one grid can be wall texture on the left and real artwork on the right.
+ * - No cycling. Legible repetition reads as a data bug ("the same poster four
+ *   times"); slots past the last picture take the striped placeholder, and
+ *   because the fill starts at the right they land under the dense veil where
+ *   they read as wall. A sparse city is the common case, not a fallback.
+ * - The grid mounts after the first measurement (base and veil paint at once),
+ *   with `motion-image-enter`, so the tile count never reflows on screen.
  */
 
 const POSTER_WALL_DESKTOP_TILE_COUNT = 48;
 const POSTER_WALL_COMPACT_TILE_COUNT = 36;
+const POSTER_WALL_STRIP_TILE_COUNT = 32;
+const POSTER_WALL_STRIP_ROWS = 2;
+const POSTER_WALL_STRIP_TILE_ASPECT = 4 / 5;
+const POSTER_WALL_STRIP_GAP_PX = 2;
 const POSTER_WALL_SWEEP_KEYFRAMES_ID = "ds-poster-wall-sweep-keyframes";
+const POSTER_WALL_BASE = "oklch(0.22 0.012 60)";
+const POSTER_WALL_VEIL = "oklch(0.2 0.01 60";
+
+const STRIP_VEIL = `linear-gradient(90deg, ${POSTER_WALL_VEIL} / 0.92) 0%, ${POSTER_WALL_VEIL} / 0.78) 50%, ${POSTER_WALL_VEIL} / 0.4) 75%, ${POSTER_WALL_VEIL} / 0.25) 100%)`;
+const STRIP_VEIL_WIDE = `linear-gradient(90deg, ${POSTER_WALL_VEIL} / 0.92) 0%, ${POSTER_WALL_VEIL} / 0.8) 40%, ${POSTER_WALL_VEIL} / 0.45) 62%, ${POSTER_WALL_VEIL} / 0.22) 100%)`;
+
+const PLACEHOLDER_TILE_CLASS =
+  "h-full w-full bg-[repeating-linear-gradient(45deg,color-mix(in_oklch,white_10%,transparent)_0px,color-mix(in_oklch,white_10%,transparent)_2px,transparent_2px,transparent_8px)]";
+
+/** Tile geometry for a measured strip box: 4:5 tiles in two rows, as many columns as cover the width. */
+export function stripGeometry(width: number, height: number) {
+  const rowHeight =
+    (height - POSTER_WALL_STRIP_GAP_PX * (POSTER_WALL_STRIP_ROWS - 1)) /
+    POSTER_WALL_STRIP_ROWS;
+  const tileWidth = Math.max(
+    1,
+    Math.round(rowHeight * POSTER_WALL_STRIP_TILE_ASPECT),
+  );
+  const cols = Math.max(
+    1,
+    Math.ceil(width / (tileWidth + POSTER_WALL_STRIP_GAP_PX)),
+  );
+  const slotCount = Math.min(
+    cols * POSTER_WALL_STRIP_ROWS,
+    POSTER_WALL_STRIP_TILE_COUNT,
+  );
+  return { tileWidth, cols, slotCount };
+}
 
 function usePrefersReducedMotion(): boolean {
   const [reduced, setReduced] = React.useState(false);
@@ -78,11 +132,22 @@ export type PosterWallTile = {
   src?: string;
 };
 
+export type PosterWallVariant = "default" | "compact" | "strip";
+
 export type PosterWallProps = {
   /** Background tiles. The grid sizes itself to how many there are (see above); with none, a placeholder grid renders. */
   tiles?: PosterWallTile[];
-  /** `compact` is the bottom-aligned mobile treatment (fewer, larger tiles, a top-fading veil). */
-  variant?: "default" | "compact";
+  /**
+   * `compact` is the bottom-aligned mobile treatment (fewer, larger tiles, a
+   * top-fading veil). `strip` fills the caller's box as a banner backdrop —
+   * two rows of portrait tiles filled from the right edge, soonest-first.
+   */
+  variant?: PosterWallVariant;
+  /**
+   * Whether the light sweeps. Defaults on; a caller turns it off for a wall
+   * with nothing on it (an empty strip is a status surface, not a stage).
+   */
+  sweep?: boolean;
   /** The overlay content — fully caller-composed. */
   children?: React.ReactNode;
   className?: string;
@@ -91,9 +156,162 @@ export type PosterWallProps = {
 export function PosterWall({
   tiles,
   variant = "default",
+  sweep = true,
   children,
   className,
 }: PosterWallProps) {
+  if (variant === "strip") {
+    return (
+      <PosterStrip tiles={tiles} sweep={sweep} className={className}>
+        {children}
+      </PosterStrip>
+    );
+  }
+  return (
+    <PosterWallMasthead
+      tiles={tiles}
+      variant={variant}
+      sweep={sweep}
+      className={className}
+    >
+      {children}
+    </PosterWallMasthead>
+  );
+}
+
+function PosterStrip({
+  tiles,
+  sweep,
+  children,
+  className,
+}: {
+  tiles?: PosterWallTile[];
+  sweep: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  const pictures = React.useMemo(
+    () => (tiles ?? []).filter((tile) => !!tile.src),
+    [tiles],
+  );
+
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [wallRef, inView] = useInViewport<HTMLDivElement>();
+  const isSweepPaused = !sweep || prefersReducedMotion || !inView;
+
+  // Nothing is assumed about the box: the grid waits for the first
+  // measurement, so the server and the hydrating client paint base + veil only
+  // and the tiles arrive once, at their final count.
+  const [box, setBox] = React.useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+  React.useEffect(() => {
+    const node = wallRef.current;
+    if (!node || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(([entry]) =>
+      setBox({
+        width: entry.contentRect.width,
+        height: entry.contentRect.height,
+      }),
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [wallRef]);
+
+  const geometry = box ? stripGeometry(box.width, box.height) : null;
+  const slots: PosterWallTile[] = geometry
+    ? Array.from(
+        { length: geometry.slotCount },
+        (_, index) => pictures[index] ?? {},
+      )
+    : [];
+
+  return (
+    <div
+      ref={wallRef}
+      className={cn("absolute inset-0 overflow-hidden", className)}
+      style={{ backgroundColor: POSTER_WALL_BASE }}
+    >
+      <style>{`
+        @keyframes ${POSTER_WALL_SWEEP_KEYFRAMES_ID} {
+          0% { transform: translateX(-30%); }
+          100% { transform: translateX(30%); }
+        }
+      `}</style>
+
+      {geometry ? (
+        <div
+          className="motion-image-enter absolute inset-0 grid grid-flow-col grid-rows-2 gap-[2px] [direction:rtl]"
+          style={{ gridAutoColumns: `${geometry.tileWidth}px` }}
+          aria-hidden
+        >
+          {slots.map((tile, index) =>
+            tile.src ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img
+                key={index}
+                src={tile.src}
+                alt=""
+                loading="lazy"
+                decoding="async"
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <div key={index} className={PLACEHOLDER_TILE_CLASS} />
+            ),
+          )}
+        </div>
+      ) : null}
+
+      {/* Peak 0.22, not the masthead's 0.34: that was tuned for a half-opacity
+          wall and would wash out posters shown at full clarity. */}
+      <div
+        className="absolute -inset-[20%]"
+        style={{
+          background:
+            "radial-gradient(circle at 30% 50%, oklch(1 0 0 / 0.22) 0%, transparent 42%)",
+          animationName: POSTER_WALL_SWEEP_KEYFRAMES_ID,
+          animationDuration: "18s",
+          animationTimingFunction: "linear",
+          animationIterationCount: "infinite",
+          animationPlayState: isSweepPaused ? "paused" : "running",
+        }}
+        aria-hidden
+      />
+
+      {/* Two veils, one per breakpoint — a gradient swap, not DOM weight. */}
+      <div
+        className="absolute inset-0 lg:hidden"
+        style={{ background: STRIP_VEIL }}
+        aria-hidden
+      />
+      <div
+        className="absolute inset-0 hidden lg:block"
+        style={{ background: STRIP_VEIL_WIDE }}
+        aria-hidden
+      />
+
+      {children ? (
+        <div className="relative h-full min-w-0 text-white">{children}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function PosterWallMasthead({
+  tiles,
+  variant,
+  sweep,
+  children,
+  className,
+}: {
+  tiles?: PosterWallTile[];
+  variant: "default" | "compact";
+  sweep: boolean;
+  children?: React.ReactNode;
+  className?: string;
+}) {
   const isCompact = variant === "compact";
   const maxCols = isCompact ? 6 : 12;
   const maxSlots = isCompact
@@ -107,7 +325,7 @@ export function PosterWall({
 
   const prefersReducedMotion = usePrefersReducedMotion();
   const [wallRef, inView] = useInViewport<HTMLDivElement>();
-  const isSweepPaused = prefersReducedMotion || !inView;
+  const isSweepPaused = !sweep || prefersReducedMotion || !inView;
 
   // Measured on the client; the server assumes a phone or a wide desktop
   // column, which is what those two variants are for.
@@ -172,10 +390,7 @@ export function PosterWall({
               className="h-full w-full object-cover"
             />
           ) : (
-            <div
-              key={index}
-              className="h-full w-full bg-[repeating-linear-gradient(45deg,color-mix(in_oklch,white_10%,transparent)_0px,color-mix(in_oklch,white_10%,transparent)_2px,transparent_2px,transparent_8px)]"
-            />
+            <div key={index} className={PLACEHOLDER_TILE_CLASS} />
           ),
         )}
       </div>
@@ -223,16 +438,49 @@ export function PosterWall({
 }
 
 export type PosterWallSkeletonProps = {
-  /** `compact` is the bottom-aligned mobile treatment (fewer, larger tiles, a top-fading veil). */
-  variant?: "default" | "compact";
+  /** Same meaning as on `PosterWall`; `strip` fills the caller's box. */
+  variant?: PosterWallVariant;
   className?: string;
 };
 
+/** Twelve tiles: a 343×150 strip at rest. The count is cosmetic — the box is the caller's. */
+const POSTER_WALL_STRIP_SKELETON_TILE_COUNT = 12;
+
 /** The tile grid at rest — the sweeping light never renders in the loading state. */
 export function PosterWallSkeleton({
   variant = "default",
   className,
 }: PosterWallSkeletonProps) {
+  if (variant === "strip") {
+    return (
+      <div
+        aria-hidden="true"
+        className={cn("absolute inset-0 overflow-hidden", className)}
+        style={{ backgroundColor: POSTER_WALL_BASE }}
+      >
+        <div className="absolute inset-0 grid auto-cols-fr grid-flow-col grid-rows-2 gap-[2px] [direction:rtl]">
+          {Array.from(
+            { length: POSTER_WALL_STRIP_SKELETON_TILE_COUNT },
+            (_, index) => (
+              <Skeleton
+                key={index}
+                className="h-full w-full rounded-none bg-white/10"
+              />
+            ),
+          )}
+        </div>
+        <div
+          className="absolute inset-0 lg:hidden"
+          style={{ background: STRIP_VEIL }}
+        />
+        <div
+          className="absolute inset-0 hidden lg:block"
+          style={{ background: STRIP_VEIL_WIDE }}
+        />
+      </div>
+    );
+  }
+
   const isCompact = variant === "compact";
   const tileCount = isCompact
     ? POSTER_WALL_COMPACT_TILE_COUNT

package/src/components/segmented-nav.stories.tsx

@@ -1,6 +1,28 @@
+import * as React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { CalendarClock, LayoutGrid, List, SlidersHorizontal } from "lucide-react";
-import { SegmentedNav } from "./segmented-nav";
+import { SegmentedNav, type SegmentedNavLinkProps } from "./segmented-nav";
+import { MotionUtensils, MotionWine } from "./motion-icon-set";
+
+/**
+ * Module-scoped on purpose: a `linkComponent` created inside `render` is a new
+ * element type on every story re-render, and React would remount every
+ * segment — killing the pointer-down gesture the story exists to show.
+ */
+function PreventNavLink({ href, children, onClick, ...props }: SegmentedNavLinkProps) {
+  return (
+    <a
+      href={href}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick?.();
+      }}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}
 
 const meta = {
   title: "Components/SegmentedNav",
@@ -86,6 +108,55 @@ export const InAControlRow: Story = {
   ),
 };
 
+/**
+ * CHARACTER-ANIMATED SEGMENTS — the menu hub's Food / Drinks toggle.
+ *
+ * `icon` as a function receives the segment's `active` state and a
+ * `replayToken` that bumps on pointer down, so the utensils uncross and the
+ * glass pours on the finger, before the route changes. Both glyphs HOLD their
+ * pose while selected, so the active side is readable from the silhouette and
+ * not only from the tint. The story swaps `activeId` on click to stand in for
+ * navigation.
+ */
+export const WithMotionIcons: Story = {
+  args: {
+    items: [],
+    activeId: "food",
+    label: "Menu views",
+  },
+  render: (args) => {
+    const [activeId, setActiveId] = React.useState(args.activeId);
+    return (
+      <div className="w-[358px]">
+        <SegmentedNav
+          {...args}
+          activeId={activeId}
+          onSelect={setActiveId}
+          linkComponent={PreventNavLink}
+          items={[
+            {
+              id: "food",
+              href: "/menu",
+              label: "Food",
+              icon: ({ active, replayToken }) => (
+                <MotionUtensils active={active} replayToken={replayToken} className={ICON} />
+              ),
+            },
+            {
+              id: "drinks",
+              href: "/menu/drinks",
+              label: "Drinks",
+              icon: ({ active, replayToken }) => (
+                <MotionWine active={active} replayToken={replayToken} className={ICON} />
+              ),
+            },
+          ]}
+        />
+      </div>
+    );
+  },
+};
+
 /** Labels alone, no icons. */
 export const WithoutIcons: Story = {
   args: {

package/src/components/segmented-nav.test.tsx

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import {
+  SegmentedNav,
+  type SegmentedNavIconState,
+  type SegmentedNavLinkProps,
+} from "./segmented-nav";
+
+const items = [
+  { id: "food", href: "/menu", label: "Food" },
+  { id: "drinks", href: "/menu/drinks", label: "Drinks" },
+];
+
+/** A real `<a href>` click makes jsdom log "Not implemented: navigation"; this one stays put. */
+function StubLink({ href, children, onClick, ...props }: SegmentedNavLinkProps) {
+  return (
+    <a
+      href={href}
+      onClick={(e) => {
+        e.preventDefault();
+        onClick?.();
+      }}
+      {...props}
+    >
+      {children}
+    </a>
+  );
+}
+
+describe("SegmentedNav", () => {
+  it("marks the active segment as the current page", () => {
+    render(<SegmentedNav items={items} activeId="drinks" label="Menu views" />);
+    expect(screen.getByRole("link", { name: "Drinks" })).toHaveAttribute("aria-current", "page");
+    expect(screen.getByRole("link", { name: "Food" })).not.toHaveAttribute("aria-current");
+  });
+
+  it("renders a static icon as given", () => {
+    render(
+      <SegmentedNav
+        items={[{ ...items[0], icon: <span data-testid="static-icon" /> }]}
+        activeId="food"
+        label="Menu views"
+      />
+    );
+    expect(screen.getByTestId("static-icon")).toBeInTheDocument();
+  });
+
+  it("hands a function icon its segment's state and bumps the token on pointer down, not on click", () => {
+    const foodIcon = vi.fn((state: SegmentedNavIconState) => (
+      <span data-testid="food-icon" data-active={state.active} data-token={state.replayToken} />
+    ));
+    const drinksIcon = vi.fn((state: SegmentedNavIconState) => (
+      <span data-testid="drinks-icon" data-token={state.replayToken} />
+    ));
+    render(
+      <SegmentedNav
+        items={[
+          { ...items[0], icon: foodIcon },
+          { ...items[1], icon: drinksIcon },
+        ]}
+        activeId="food"
+        label="Menu views"
+        linkComponent={StubLink}
+      />
+    );
+
+    expect(screen.getByTestId("food-icon")).toHaveAttribute("data-active", "true");
+    expect(screen.getByTestId("food-icon")).toHaveAttribute("data-token", "0");
+
+    // The finger lands on Drinks: its glyph performs before any navigation.
+    const drinks = screen.getByRole("link", { name: "Drinks" });
+    fireEvent.pointerDown(drinks);
+    expect(screen.getByTestId("drinks-icon")).toHaveAttribute("data-token", "1");
+    // The neighbour is untouched.
+    expect(screen.getByTestId("food-icon")).toHaveAttribute("data-token", "0");
+
+    // A click alone is not a performance — the token answers the pointer only.
+    fireEvent.click(drinks);
+    expect(screen.getByTestId("drinks-icon")).toHaveAttribute("data-token", "1");
+  });
+
+  it("fires onSelect with the segment id on click", () => {
+    const onSelect = vi.fn();
+    render(
+      <SegmentedNav
+        items={items}
+        activeId="food"
+        label="Menu views"
+        onSelect={onSelect}
+        linkComponent={StubLink}
+      />
+    );
+    fireEvent.click(screen.getByRole("link", { name: "Drinks" }));
+    expect(onSelect).toHaveBeenCalledWith("drinks");
+  });
+});