@bearmenu/ui 0.8.55 → 0.8.57

package/dist/components/open-now-list.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuVenuePreview, MenuLinkComponent, MenuLinkProps } from './menu-types.js';
 import 'react';
-import '../place-types-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/place-about-tab.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PlacePreview, c as PlaceAboutTabLabels, d as PlaceLinkKind } from '../place-types-Dzy6FH67.js';
+import { P as PlacePreview, c as PlaceAboutTabLabels, d as PlaceLinkKind } from '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 interface PlaceAboutTabProps {

package/dist/components/place-card.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
 import { ReactNode, MouseEvent } from 'react';
-import { P as PlacePreview, e as PlaceCardLabels } from '../place-types-Dzy6FH67.js';
+import { P as PlacePreview, e as PlaceCardLabels } from '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/place-card.js

@@ -1,8 +1,8 @@
 import { HOVER_IMAGE_MOTION, HOVER_IMAGE_WRAPPER, HOVER_MOTION, HOVER_LIFT_GRID_GROUP } from '../chunk-XCB3F6SF.js';
 import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
 import { OVERLAY_PILL } from '../chunk-EZG2NELX.js';
-import { GradeAtom } from '../chunk-YE4ZQUTI.js';
-import { showsGradeAtom } from '../chunk-I5V446BX.js';
+import { GradeAtom } from '../chunk-QOXXIYDG.js';
+import { showsGradeAtom } from '../chunk-TDTLEDX6.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { springSnappy } from '../chunk-OIV7B44M.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';

package/dist/components/place-details-mobile.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PlacePreview, f as PlaceDetailsMobileLabels } from '../place-types-Dzy6FH67.js';
+import { P as PlacePreview, f as PlaceDetailsMobileLabels } from '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 interface PlaceDetailsMobileProps {

package/dist/components/place-schedule-week.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { g as PlaceSchedule, h as PlaceScheduleWeekLabels } from '../place-types-Dzy6FH67.js';
+import { g as PlaceSchedule, h as PlaceScheduleWeekLabels } from '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 interface PlaceScheduleWeekProps {

package/dist/components/place-types.d.ts

@@ -1,3 +1,3 @@
-export { C as CitedText, l as CitedValue, M as MenuSizeAndPrice, c as PlaceAboutTabLabels, e as PlaceCardLabels, f as PlaceDetailsMobileLabels, a as PlaceGrade, b as PlaceGradeDimensions, m as PlaceHourBlock, d as PlaceLinkKind, n as PlaceMustTry, P as PlacePreview, o as PlacePriceRange, p as PlaceReviewsDigest, g as PlaceSchedule, h as PlaceScheduleWeekLabels, W as WeekdayKey } from '../place-types-Dzy6FH67.js';
+export { C as CitedText, l as CitedValue, M as MenuSizeAndPrice, c as PlaceAboutTabLabels, e as PlaceCardLabels, f as PlaceDetailsMobileLabels, a as PlaceGrade, b as PlaceGradeDimensions, m as PlaceHourBlock, d as PlaceLinkKind, n as PlaceMustTry, P as PlacePreview, o as PlacePriceRange, p as PlaceReviewsDigest, g as PlaceSchedule, h as PlaceScheduleWeekLabels, W as WeekdayKey } from '../place-types-CjB4JlH0.js';
 import 'react/jsx-runtime';
 import '../lib/grade.js';

package/dist/components/qa-block.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { QaItem } from './menu-types.js';
 import 'react';
-import '../place-types-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "primary" | "inherit" | "default" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "primary" | "inherit" | "default" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "warning" | "primary" | "success" | "quiet" | null | undefined;
+    variant?: "primary" | "success" | "warning" | "default" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "outline" | "warning" | "primary" | "success" | "quiet" | null | undefined;
+    variant?: "primary" | "success" | "warning" | "default" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -22,8 +22,8 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "inherit" | "default" | "destructive" | "primary" | "muted" | "primary-foreground" | null | undefined;
+    variant?: "small" | "body" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "primary" | "inherit" | "default" | "destructive" | "muted" | "primary-foreground" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;

package/dist/components/top-comparison.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent } from './menu-types.js';
 import { TopComparisonRow } from './top-types.js';
 import 'react';
-import '../place-types-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 type TopComparisonLabels = {

package/dist/components/top-cross-link.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent } from './menu-types.js';
 import 'react';
-import '../place-types-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 type TopCrossLinkProps = {

package/dist/components/top-ranking-entry.d.ts

@@ -3,7 +3,7 @@ import { MenuItemLabels } from './menu-item.js';
 import { MenuItemPreview, MenuLinkComponent } from './menu-types.js';
 import { TopRankEntry } from './top-types.js';
 import 'react';
-import '../place-types-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 type TopRankingEntryLabels = {

package/dist/components/top-ranking-entry.js

@@ -1,5 +1,7 @@
-import { MenuItem } from '../chunk-CBBECMBD.js';
+import { MenuItem } from '../chunk-WBTSOARU.js';
 import '../chunk-6PQINSAA.js';
+import '../chunk-QOXXIYDG.js';
+import '../chunk-TDTLEDX6.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
 import '../chunk-RYPPN2GZ.js';

package/dist/components/top-ranking-hero.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent } from './menu-types.js';
 import { TopExit } from './top-types.js';
 import 'react';
-import '../place-types-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 type TopRankingHeroProps = {

package/dist/components/top-types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { MenuItemPreview } from './menu-types.js';
-import '../place-types-Dzy6FH67.js';
+import '../place-types-CjB4JlH0.js';
 import 'react/jsx-runtime';
 import '../lib/grade.js';
 

package/dist/components/venue-grade-dimensions.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as PlaceGradeDimensions } from '../place-types-Dzy6FH67.js';
+import { b as PlaceGradeDimensions } from '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/venue-quotes.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CitedText } from '../place-types-Dzy6FH67.js';
+import { C as CitedText } from '../place-types-CjB4JlH0.js';
 import '../lib/grade.js';
 
 /**

package/dist/components/venue-wall.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { MenuLinkComponent, MenuLinkProps } from './menu-types.js';
-import { P as PlacePreview } from '../place-types-Dzy6FH67.js';
+import { P as PlacePreview } from '../place-types-CjB4JlH0.js';
 import 'react';
 import '../lib/grade.js';
 

package/dist/components/weekday-chip.d.ts

@@ -9,17 +9,28 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * over the date, no count — and the rail shares the width equally.
  *
  * Measured from the booking design (`.dchip`): flexes to an equal share, 1px
- * hairline, 11px radius, 7px vertical inset, centred. The weekday at 10px
+ * hairline, 11px radius, 7px vertical inset, centred. The weekday at 11px
  * uppercase, 0.05em tracking, muted; the date at 15px bold, tabular, 2px
  * below. Selected fills with `--gradient-primary`, white type, the weekday at
  * 75%. A day that cannot be booked (closed, past the window) fades to 40% and
  * is disabled.
+ *
+ * The weekday was 10px, under the HIG's 11pt floor for iPhone text; measured
+ * when the events map took this chip for its week picker (bearmenu-fe,
+ * 2026-11-10). 11px still holds a three-letter weekday in a 46px seventh of a
+ * phone's width.
+ *
+ * `detail` is an optional third line under the date: the events map prints
+ * that day's event count there. A chip without it keeps its booking height.
  */
 type WeekdayChipProps = {
     /** "Mon", "Tue" — already localised; rendered uppercase. */
     weekday: string;
     /** Day of month as displayed — "14". */
     day: string;
+    /** A short line under the date — "12", that day's events. Give the button
+     *  an `aria-label` that says it with its unit; a bare number is unclear. */
+    detail?: string;
     selected?: boolean;
     /** Closed that day or outside the booking window. */
     unavailable?: boolean;
@@ -28,6 +39,6 @@ type WeekdayChipProps = {
     "aria-label"?: string;
     className?: string;
 };
-declare function WeekdayChip({ weekday, day, selected, unavailable, onSelect, "aria-label": ariaLabel, className, }: WeekdayChipProps): react_jsx_runtime.JSX.Element;
+declare function WeekdayChip({ weekday, day, detail, selected, unavailable, onSelect, "aria-label": ariaLabel, className, }: WeekdayChipProps): react_jsx_runtime.JSX.Element;
 
 export { WeekdayChip, type WeekdayChipProps };

package/dist/components/weekday-chip.js

@@ -5,6 +5,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 function WeekdayChip({
   weekday,
   day,
+  detail,
   selected,
   unavailable,
   onSelect,
@@ -33,13 +34,24 @@ function WeekdayChip({
           "span",
           {
             className: cn(
-              "block text-[10px] tracking-[0.05em] uppercase",
+              "block text-[11px] tracking-[0.05em] uppercase",
               selected ? "text-white/75" : "text-muted-foreground"
             ),
             children: weekday
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-[15px] font-bold tabular-nums", children: day })
+        /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-[15px] font-bold tabular-nums", children: day }),
+        detail !== void 0 && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-slot": "weekday-chip-detail",
+            className: cn(
+              "mt-0.5 block font-mono text-[11px] tabular-nums",
+              selected ? "text-white/85" : "text-muted-foreground"
+            ),
+            children: detail
+          }
+        )
       ]
     }
   );

package/dist/lib/grade.d.ts

@@ -44,7 +44,7 @@ declare function shouldShowGradeNumber(grade: {
 declare function showsGradeAtom<T extends {
     overall?: number | null;
     show_number?: boolean;
-}>(grade: T | null | undefined, size: "xs" | "sm" | "md" | "lg"): grade is T;
+}>(grade: T | null | undefined, size: "2xs" | "xs" | "sm" | "md" | "lg"): grade is T;
 /** Tone for a single 0–100 dimension score, driving the page dimension-bar
  *  colour: strong (≥75) = accent, adequate (50–74) = muted, low (<50) = amber
  *  (a soft "fair warning", never error-red). */

package/dist/lib/grade.js

@@ -1,2 +1,2 @@
-export { formatGrade, resolveDimensionTone, resolveGradeBand, shouldShowGradeNumber, showsGradeAtom } from '../chunk-I5V446BX.js';
+export { formatGrade, resolveDimensionTone, resolveGradeBand, shouldShowGradeNumber, showsGradeAtom } from '../chunk-TDTLEDX6.js';
 import '../chunk-MMUBH76A.js';

package/dist/{place-types-Dzy6FH67.d.ts → place-types-CjB4JlH0.d.ts}

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { GradeBand } from './lib/grade.js';
 
-type GradeAtomSize = "xs" | "sm" | "md" | "lg";
+type GradeAtomSize = "2xs" | "xs" | "sm" | "md" | "lg";
 /** Labels passed to `<GradeAtom>`. All translation happens in the caller. */
 type GradeAtomLabels = {
     /** The `show_number=false` state, e.g. "Worth exploring". */
@@ -23,7 +23,7 @@ type GradeAtomLabels = {
 type GradeAtomProps = {
     grade: PlaceGrade;
     labels: GradeAtomLabels;
-    /** xs = card chip · sm = chat/compact · md = drawer · lg = page hero. */
+    /** 2xs = inline in a line of text · xs = card chip · sm = chat/compact · md = drawer · lg = page hero. */
     size?: GradeAtomSize;
     /** Force-hide the descriptor even at sizes that would show it (tight rows). */
     hideDescriptor?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.55",
+  "version": "0.8.57",
   "packageManager": "pnpm@10.28.1",
   "description": "BearMenu design system \u2014 shared UI tokens, primitives, and components",
   "license": "UNLICENSED",

package/src/components/booking-primitives.test.tsx

@@ -82,6 +82,13 @@ describe("WeekdayChip", () => {
     render(<WeekdayChip weekday="Tue" day="11" unavailable />);
     expect(screen.getByRole("button")).toBeDisabled();
   });
+
+  it("prints a detail line under the date only when given one", () => {
+    const { rerender, container } = render(<WeekdayChip weekday="Fri" day="13" detail="12" />);
+    expect(container.querySelector("[data-slot='weekday-chip-detail']")).toHaveTextContent("12");
+    rerender(<WeekdayChip weekday="Fri" day="13" />);
+    expect(container.querySelector("[data-slot='weekday-chip-detail']")).toBeNull();
+  });
 });
 
 describe("HoldCountdown", () => {

package/src/components/day-rail-chip.test.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { DayRailChip } from "./day-rail-chip";
+
+const labels = { noEvents: "no events" };
+
+describe("DayRailChip", () => {
+  // Without a label a screen reader read "Vin 1312": the date and the count
+  // as one number (bearmenu-fe HIG review, 2026-11-10).
+  it("speaks its aria-label instead of its text run together", () => {
+    render(
+      <DayRailChip
+        label="Vin"
+        dayNumber="13"
+        count={12}
+        labels={labels}
+        onClick={() => {}}
+        aria-label="Vineri 13 noiembrie, 12 evenimente"
+      />
+    );
+    expect(
+      screen.getByRole("button", { name: "Vineri 13 noiembrie, 12 evenimente" })
+    ).toBeInTheDocument();
+  });
+
+  it("names a link chip and an inert one the same way", () => {
+    const { rerender } = render(
+      <DayRailChip
+        label="Sâm"
+        dayNumber="14"
+        count={3}
+        labels={labels}
+        href="/ro/cluj-napoca/events?day=2026-11-14"
+        aria-label="Sâmbătă 14 noiembrie, 3 evenimente"
+      />
+    );
+    expect(
+      screen.getByRole("link", { name: "Sâmbătă 14 noiembrie, 3 evenimente" })
+    ).toBeInTheDocument();
+    rerender(
+      <DayRailChip
+        label="Lun"
+        dayNumber="16"
+        count={0}
+        labels={labels}
+        aria-label="Luni 16 noiembrie, niciun eveniment"
+      />
+    );
+    expect(
+      screen.getByRole("group", { name: "Luni 16 noiembrie, niciun eveniment" })
+    ).toBeInTheDocument();
+  });
+
+  it("keeps its text as the name when no label is given", () => {
+    render(<DayRailChip label="Azi" dayNumber="10" count={7} labels={labels} onClick={() => {}} />);
+    expect(screen.getByRole("button")).toHaveTextContent("Azi 107");
+  });
+});

package/src/components/day-rail-chip.tsx

@@ -53,6 +53,7 @@ export type DayRailChipLinkProps = {
   className?: string;
   children: React.ReactNode;
   "aria-current"?: "page";
+  "aria-label"?: string;
   onClick?: () => void;
 };
 
@@ -75,6 +76,12 @@ export type DayRailChipProps = {
   linkComponent?: React.ComponentType<DayRailChipLinkProps>;
   onClick?: () => void;
   className?: string;
+  /**
+   * The day for assistive tech — "Vineri 13 noiembrie, 12 evenimente". Without
+   * it a screen reader reads the chip's text run together: "Vin 1312", the
+   * date and the count as one number (bearmenu-fe HIG review, 2026-11-10).
+   */
+  "aria-label"?: string;
 };
 
 export function DayRailChip({
@@ -88,6 +95,7 @@ export function DayRailChip({
   linkComponent: LinkComponent = DefaultLink,
   onClick,
   className,
+  "aria-label": ariaLabel,
 }: DayRailChipProps) {
   const hasEvents = count > 0;
 
@@ -160,6 +168,7 @@ export function DayRailChip({
         href={href}
         className={rootClasses}
         aria-current={isActive ? "page" : undefined}
+        aria-label={ariaLabel}
         onClick={onClick}
       >
         {body}
@@ -176,6 +185,7 @@ export function DayRailChip({
         // toggle semantic was right; it now navigates, and this is the current
         // day in a set of days.
         aria-current={isActive ? "true" : undefined}
+        aria-label={ariaLabel}
         onClick={onClick}
       >
         {body}
@@ -183,7 +193,13 @@ export function DayRailChip({
     );
   }
 
-  return <div className={rootClasses}>{body}</div>;
+  // An inert day has no role to carry a label; `role="group"` gives the name
+  // somewhere to live without inventing an interaction.
+  return (
+    <div className={rootClasses} role={ariaLabel ? "group" : undefined} aria-label={ariaLabel}>
+      {body}
+    </div>
+  );
 }
 
 export type DayRailChipSkeletonProps = {

package/src/components/grade-atom.test.tsx

@@ -23,6 +23,21 @@ describe("GradeAtom", () => {
     expect(screen.getByLabelText("Nota 8,7 din 10")).toHaveTextContent("8,7");
   });
 
+  // A pill that sits inside a line of text (a menu row's name or venue line)
+  // must not make the line taller: at `xs` (24px) it pushed rows apart
+  // (Adrian, 9 Nov). `2xs` is 18px with an 11px number, and like `xs` it has
+  // no room for the soft "worth exploring" sentence.
+  it("has an inline size that fits a line of text, number only", () => {
+    render(<GradeAtom grade={{ overall: 8.7 }} labels={labels} size="2xs" />);
+    const pill = screen.getByLabelText("Grade 8.7 out of 10");
+    expect(pill.className).toContain("h-[18px]");
+    expect(pill.innerHTML).toContain("text-2xs");
+    const { container } = render(
+      <GradeAtom grade={{ overall: 8.7, show_number: false }} labels={labels} size="2xs" />
+    );
+    expect(container.textContent).toBe("");
+  });
+
   it("hands the formatter the rounded, clamped grade", () => {
     const seen: number[] = [];
     const spy: GradeAtomLabels = { ...labels, value: (n) => (seen.push(n), String(n)) };

package/src/components/grade-atom.tsx

@@ -29,7 +29,7 @@ import {
 } from "../lib/grade";
 import type { PlaceGrade } from "./place-types";
 
-export type GradeAtomSize = "xs" | "sm" | "md" | "lg";
+export type GradeAtomSize = "2xs" | "xs" | "sm" | "md" | "lg";
 
 /** Labels passed to `<GradeAtom>`. All translation happens in the caller. */
 export type GradeAtomLabels = {
@@ -53,7 +53,7 @@ export type GradeAtomLabels = {
 export type GradeAtomProps = {
   grade: PlaceGrade;
   labels: GradeAtomLabels;
-  /** xs = card chip · sm = chat/compact · md = drawer · lg = page hero. */
+  /** 2xs = inline in a line of text · xs = card chip · sm = chat/compact · md = drawer · lg = page hero. */
   size?: GradeAtomSize;
   /** Force-hide the descriptor even at sizes that would show it (tight rows). */
   hideDescriptor?: boolean;
@@ -136,6 +136,18 @@ const SIZE: Record<
     showDesc: boolean;
   }
 > = {
+  // Inline in a line of text (a menu row's name or venue line): 18px fits a
+  // 15px name and a 12px venue line without making either taller, which the
+  // 24px xs did (Adrian, 2026-11-09). Number only, like xs.
+  "2xs": {
+    box: "h-[18px] px-1 rounded",
+    minW: "min-w-7",
+    num: "text-2xs",
+    desc: "text-2xs",
+    gap: "gap-0.5",
+    shield: "h-2.5 w-2.5",
+    showDesc: false,
+  },
   xs: {
     box: "h-6 px-1.5 rounded-md",
     minW: "min-w-9",
@@ -208,7 +220,7 @@ export function GradeAtom({
   // caller falls back to its Google star instead (gate on `showsGradeAtom`, and
   // see its note for why callers can't test `overall != null` any more).
   if (!shouldShowGradeNumber(grade)) {
-    if (size === "xs") return null;
+    if (size === "xs" || size === "2xs") return null;
     return (
       <span
         className={cn(

package/src/components/menu-item.stories.tsx

@@ -80,3 +80,111 @@ export const CountKinds: Story = {
     </div>
   ),
 };
+
+const brisket: MenuItemPreview = {
+  id: "i2",
+  slug: "brisket",
+  name: "Brisket",
+  kind: "dish",
+  category_slug: "meat",
+  mentions: 60,
+  sizes_and_prices: [{ size: 0, price: 375 }],
+};
+
+const gradeLabels = {
+  soft: "Worth exploring",
+  bands: {
+    exceptional: "Exceptional",
+    great: "Great",
+    good: "Good",
+    decent: "Decent",
+    weak: "Weak",
+  },
+  aria: (value: string) => `Grade ${value} out of 10`,
+  capped: "Capped for low confidence",
+};
+
+/**
+ * The venue line on a cross-venue list (the map's Dishes and Drinks): the place
+ * in full ink with its grade, then its neighbourhood and whether it is open,
+ * muted. With `emphasis="praise"` the price steps back and the praise leads.
+ */
+export const VenueLine: Story = {
+  render: (args) => (
+    <div className="divide-y divide-border">
+      <MenuItem
+        {...args}
+        item={brisket}
+        countKind="praise"
+        labels={praiseLabels}
+        emphasis="praise"
+        subtitle="“Carnea a fost foarte fragedă și avea un gust intens de vită.”"
+        venueName="Texas Grill"
+        venueGrade={{
+          grade: { overall: 8.7, show_number: true, capped: false, confidence: "high" },
+          labels: gradeLabels,
+        }}
+        venueDetail="Centru"
+        venueStatus={{ tone: "open", label: "Închide la 23:00" }}
+      />
+      <MenuItem
+        {...args}
+        item={{ ...brisket, id: "i3", name: "Ramen Tori Paitan", mentions: 58 }}
+        countKind="praise"
+        labels={praiseLabels}
+        emphasis="praise"
+        venueName="YUSO"
+        venueGrade={{
+          grade: { overall: 9.2, show_number: true, capped: false, confidence: "high" },
+          labels: gradeLabels,
+        }}
+        venueDetail="Mărăști"
+        venueStatus={{ tone: "closed", label: "Deschide la 12:00" }}
+      />
+      <MenuItem
+        {...args}
+        item={{ ...brisket, id: "i4", name: "Cannoli Siciliani", mentions: 12 }}
+        countKind="praise"
+        labels={praiseLabels}
+        emphasis="praise"
+        venueName="Cannoleria Cluj-Napoca Restaurant & Pasticceria"
+        venueGrade={{
+          grade: { overall: 7.4, show_number: true, capped: false, confidence: "medium" },
+          labels: gradeLabels,
+        }}
+        venueDetail="Zorilor"
+        venueStatus={{ tone: "open", label: "Închide la 22:00" }}
+      />
+      {/* A row whose name is the place (the map's Drinks list): the grade goes
+          with the name, and the venue line says what the place is praised for. */}
+      <MenuItem
+        {...args}
+        item={{ id: "f1", slug: "the-soviet", name: "The Soviet", kind: "drink", mentions: 271 }}
+        countKind="praise"
+        labels={praiseLabels}
+        emphasis="praise"
+        subtitle="“A very nice place to drink very good cocktails with some unusual names.”"
+        nameGrade={{
+          grade: { overall: 9.2, show_number: true, capped: false, confidence: "high" },
+          labels: gradeLabels,
+        }}
+        venueName="Praised for cocktails"
+        venueDetail="Centru"
+        venueStatus={{ tone: "open", label: "Închide la 02:00" }}
+      />
+      <MenuItem
+        {...args}
+        item={{ ...brisket, id: "i5", name: "Papanași Cremoși", mentions: 9 }}
+        countKind="praise"
+        labels={praiseLabels}
+        emphasis="praise"
+        venueName="Madrugada"
+        venueGrade={{
+          grade: { overall: 8.1, show_number: false, capped: false, confidence: "low" },
+          labels: gradeLabels,
+        }}
+        venueDetail="Centru"
+      />
+    </div>
+  ),
+};