@bearmenu/ui 0.8.50 → 0.8.52

package/src/components/kitchen-dossier.tsx

@@ -96,6 +96,12 @@ export type KitchenDossierProps = {
   partDurationMs?: number;
   /** The foot's action — pass a rendered link or button. */
   action?: ReactNode;
+  /**
+   * Drawn in place of the open-until pill's dot, in the dot's slot (roughly
+   * 16-22px square). Decorative and `aria-hidden`; only rendered with
+   * `labels.openUntil`.
+   */
+  openIndicator?: ReactNode;
   linkComponent?: MenuLinkComponent;
   className?: string;
 };
@@ -128,6 +134,7 @@ export function KitchenDossier({
   formatScore,
   partDurationMs,
   action,
+  openIndicator,
   linkComponent: LinkComponent = DefaultLink,
   className,
 }: KitchenDossierProps) {
@@ -249,7 +256,13 @@ export function KitchenDossier({
         <div className="relative min-h-[184px] flex-1">
           {labels.openUntil && (
             <span className="absolute left-0 top-3 inline-flex h-[30px] items-center gap-[7px] rounded-full bg-[oklch(0.16_0.012_55_/_0.78)] px-3 text-[11.5px] font-bold text-white">
-              <i className="h-[7px] w-[7px] rounded-full bg-success" aria-hidden />
+              {openIndicator ? (
+                <span className="flex shrink-0 items-center justify-center" aria-hidden>
+                  {openIndicator}
+                </span>
+              ) : (
+                <i className="h-[7px] w-[7px] rounded-full bg-success" aria-hidden />
+              )}
               {labels.openUntil}
             </span>
           )}

package/src/components/menu-hub-hero.tsx

@@ -66,6 +66,12 @@ export type MenuHubHeroProps = {
    * `h2` so the document has one h1, not two.
    */
   headingLevel?: "h1" | "h2";
+  /**
+   * A decorative layer over the photographs and their scrim, under the text:
+   * fill the banner with `absolute inset-0`. Clipped by the banner's rounded
+   * edge. Decorative and `aria-hidden`.
+   */
+  sceneOverlay?: React.ReactNode;
   className?: string;
 };
 
@@ -91,6 +97,7 @@ export function MenuHubHero({
   backgroundUrl,
   tileUrls,
   headingLevel: Heading = "h1",
+  sceneOverlay,
   className,
 }: MenuHubHeroProps) {
   return (
@@ -157,6 +164,12 @@ export function MenuHubHero({
         )}
       />
 
+      {sceneOverlay && (
+        <div aria-hidden className="pointer-events-none absolute inset-0">
+          {sceneOverlay}
+        </div>
+      )}
+
       <div className="relative z-[1] flex w-full flex-col justify-center gap-3 p-5 text-white lg:gap-4 lg:px-12 lg:py-11">
         {kicker && (
           <span className="inline-flex w-max items-center gap-[7px] rounded-full bg-white/15 px-3 py-1.5 text-[11px] font-extrabold tracking-[0.11em]">

package/src/components/place-card.stories.tsx

@@ -97,6 +97,16 @@ export const WithPhotoOverlay: Story = {
   },
 };
 
+/** A caller's glyph in the open-now dot's slot (16-20px); the closed badge is unchanged. */
+export const WithOpenIndicator: Story = {
+  args: {
+    place: { ...basePlace, open_now: true },
+    openIndicator: (
+      <span className="block h-[18px] w-[18px] rounded-full bg-amber-500 ring-2 ring-white/70" />
+    ),
+  },
+};
+
 export const WithFooter: Story = {
   args: {
     footer: <span className="text-xs text-muted-foreground">Served as Margherita · 45 RON · 350g</span>,

package/src/components/place-card.test.tsx

@@ -291,6 +291,37 @@ describe("PlaceCard", () => {
   });
 });
 
+describe("PlaceCard openIndicator", () => {
+  it("replaces the green dot when the place is open", () => {
+    const { container } = render(
+      <PlaceCard
+        place={makePlace({ open_now: true })}
+        labels={LABELS}
+        openIndicator={<i data-testid="indicator" />}
+      />
+    );
+    expect(screen.getByTestId("indicator")).toBeInTheDocument();
+    expect(container.querySelector(".bg-green-500")).not.toBeInTheDocument();
+  });
+
+  it("keeps the default dot without an indicator", () => {
+    const { container } = render(<PlaceCard place={makePlace({ open_now: true })} labels={LABELS} />);
+    expect(container.querySelector(".bg-green-500")).toBeInTheDocument();
+  });
+
+  it("does not render the indicator when closed, and keeps the badge", () => {
+    render(
+      <PlaceCard
+        place={makePlace({ open_now: false })}
+        labels={LABELS}
+        openIndicator={<i data-testid="indicator" />}
+      />
+    );
+    expect(screen.queryByTestId("indicator")).not.toBeInTheDocument();
+    expect(screen.getByText("Closed")).toBeInTheDocument();
+  });
+});
+
 describe("PlaceCardSkeleton", () => {
   it("is hidden from assistive tech and reserves the footer when asked", () => {
     const { container, rerender } = render(<PlaceCardSkeleton />);

package/src/components/place-card.tsx

@@ -134,6 +134,13 @@ export type PlaceCardProps = {
    * trending badge on the API's `trending` flag).
    */
   photoOverlay?: ReactNode;
+  /**
+   * Drawn in place of the green open-now dot, in the dot's top-right slot
+   * (roughly 16-20px square). Decorative: it is only rendered when
+   * `place.open_now === true` and should be `aria-hidden`. The closed badge is
+   * untouched.
+   */
+  openIndicator?: ReactNode;
   className?: string;
 };
 
@@ -191,6 +198,7 @@ export const PlaceCard = memo(function PlaceCard({
   onOpen,
   footer,
   photoOverlay,
+  openIndicator,
   className,
 }: PlaceCardProps) {
   const [imgError, setImgError] = useState(false);
@@ -258,12 +266,20 @@ export const PlaceCard = memo(function PlaceCard({
           </div>
         )}
 
-        {place.open_now === true && (
-          <span
-            className="absolute right-2.5 top-2.5 h-2 w-2 rounded-full bg-green-500 ring-2 ring-white/70"
-            aria-hidden
-          />
-        )}
+        {place.open_now === true &&
+          (openIndicator ? (
+            <span
+              className="pointer-events-none absolute right-2 top-2 flex items-center justify-center"
+              aria-hidden
+            >
+              {openIndicator}
+            </span>
+          ) : (
+            <span
+              className="absolute right-2.5 top-2.5 h-2 w-2 rounded-full bg-green-500 ring-2 ring-white/70"
+              aria-hidden
+            />
+          ))}
         {place.open_now === false && (
           /* `Badge variant="overlay"` + the shared cover geometry: this pill and
              the caller's `photoOverlay` sit on the same photo and must match. */

package/src/components/poster-stack.tsx

@@ -60,6 +60,8 @@ export type PosterStackPoster = {
   caption?: string;
   /** Rendered when `src` is absent or fails. Defaults to `<EventPosterFallback />`. */
   fallback?: React.ReactNode;
+  /** Decorative overlay on the poster face (it tilts and floats with the poster): an absolutely positioned, `aria-hidden` ornament. */
+  overlay?: React.ReactNode;
   /** Load now at high priority instead of lazily. For the poster that is the
    *  page's LCP element; every other poster stays lazy. */
   eager?: boolean;
@@ -207,6 +209,7 @@ export function PosterStack({
                 </span>
               </span>
             )}
+            {poster.overlay}
           </>
         );
 

package/src/components/section-header.tsx

@@ -66,6 +66,11 @@ export type SectionHeaderProps = {
    * behaviour; it only holds the slot.
    */
   trailing?: React.ReactNode;
+  /**
+   * Absolute decoration anchored to the title group's own box. Takes no
+   * layout; the group is `relative` for it. Decorative and `aria-hidden`.
+   */
+  titleAdornment?: React.ReactNode;
   className?: string;
 };
 
@@ -98,6 +103,7 @@ export function SectionHeader({
   onAction,
   as: Heading = "h2",
   trailing,
+  titleAdornment,
   className,
 }: SectionHeaderProps) {
   const actionIcon = <ChevronRight className="h-3.5 w-3.5" aria-hidden />;
@@ -106,7 +112,7 @@ export function SectionHeader({
   return (
     <div className={cn("flex flex-col mb-3.5", className)}>
       <div className="flex items-center justify-between gap-2">
-        <div className="flex min-w-0 items-baseline">
+        <div className="relative flex min-w-0 items-baseline">
           <Heading className="truncate text-[17px] font-bold tracking-[-0.01em] text-foreground md:text-[18px]">
             {title}
           </Heading>
@@ -115,6 +121,7 @@ export function SectionHeader({
               {count}
             </span>
           )}
+          {titleAdornment}
         </div>
 
         {/* The action and the trailing controls share the row's end, so the

package/src/components/sliding-panels.test.tsx

@@ -18,10 +18,7 @@ const basePanels: Panel[] = [
 const panelWrappers = () =>
   Array.from(document.querySelectorAll<HTMLElement>('[data-slot="sliding-panel"]'));
 
-// The back button is icon-only, so it is the one button in the active panel
-// with no text content.
-const backButton = () =>
-  screen.getAllByRole("button").filter((button) => button.textContent === "")[0];
+const backButton = () => screen.getByRole("button", { name: "Back" });
 
 function Controlled({ initial = "one" }: { initial?: string }) {
   const [current, setCurrent] = useState(initial);
@@ -113,4 +110,29 @@ describe("SlidingPanels", () => {
     await user.click(backButton());
     expect(onPanelChange).toHaveBeenCalledWith("root");
   });
+
+  it("names the icon-only back button with backAriaLabel", () => {
+    const panels: Panel[] = [
+      { id: "root", content: <button type="button">Root</button> },
+      {
+        id: "child",
+        showBackButton: true,
+        backButtonLabel: "Categorii",
+        backAriaLabel: "Înapoi",
+        content: <button type="button">Child</button>,
+      },
+    ];
+    render(<SlidingPanels panels={panels} currentPanel="child" onPanelChange={vi.fn()} />);
+    // The heading beside it is the panel title, not the button's name
+    expect(screen.getByRole("button", { name: "Înapoi" })).toBeInTheDocument();
+  });
+
+  it("drops the slide and height transitions under reduced motion", () => {
+    render(<Controlled initial="two" />);
+    const container = document.querySelector<HTMLElement>('[data-slot="sliding-panels"]');
+    expect(container?.className).toContain("motion-reduce:transition-none");
+    for (const panel of panelWrappers()) {
+      expect(panel.className).toContain("motion-reduce:transition-none");
+    }
+  });
 });

package/src/components/sliding-panels.tsx

@@ -10,7 +10,13 @@ export interface Panel {
   id: string;
   content: React.ReactNode;
   showBackButton?: boolean;
+  /** Heading shown next to the back button (the panel's title, not the button's name). */
   backButtonLabel?: string;
+  /**
+   * Accessible name of the icon-only back button, localized by the caller.
+   * Falls back to "Back"; without a name screen readers announce only "button".
+   */
+  backAriaLabel?: string;
   onBack?: () => void;
   // When set, the panel is treated as a child of `parentId`. Siblings (panels
   // sharing the same parent) stay off-screen on the right when not active —
@@ -84,7 +90,7 @@ export const SlidingPanels = ({
     <div
       data-slot="sliding-panels"
       className={cn(
-        "relative overflow-clip transition-[height] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
+        "relative overflow-clip transition-[height] duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
         className
       )}
       style={{ height: containerHeight, overflowClipMargin: "8px" }}
@@ -105,7 +111,7 @@ export const SlidingPanels = ({
             data-slot="sliding-panel"
             data-state={isActive ? "active" : "inactive"}
             className={cn(
-              "absolute top-0 left-0 w-full transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)]",
+              "absolute top-0 left-0 w-full transition-transform duration-500 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none",
               isActive && "translate-x-0",
               isLeft && "-translate-x-[calc(100%+8px)]",
               isRight && "translate-x-[calc(100%+8px)]"
@@ -125,8 +131,13 @@ export const SlidingPanels = ({
           >
             {panel.showBackButton && (
               <div className="flex items-center gap-2 mb-4">
-                <Button variant="ghost" size="icon" onClick={handleBack}>
-                  <ChevronLeft className="h-4 w-4" />
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={handleBack}
+                  aria-label={panel.backAriaLabel ?? "Back"}
+                >
+                  <ChevronLeft className="h-4 w-4" aria-hidden />
                 </Button>
                 {panel.backButtonLabel && (
                   <h3 className="font-semibold">{panel.backButtonLabel}</h3>

package/src/components/timeline-day.stories.tsx

@@ -135,6 +135,36 @@ export const FullDay: Story = {
   ),
 };
 
+/**
+ * 02:00 on a Friday: last night's set is still on and leads the day in a live
+ * off-axis group (`tone="live"`) — on now, but with no slot on today's axis.
+ * Its cards keep the phone gutter, so they line up with tonight's hour below.
+ */
+export const StillOnFromLastNight: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3 py-6">
+      <EventDayHeader
+        dayNumber="09"
+        weekday="Friday"
+        meta="October · 2 events · 1 live"
+        size="responsive"
+      />
+      <TimelineDay rows={2}>
+        <TimelineHour time="Since last night" role="unscheduled" tone="live" countLabel="1 event" layout="rows">
+          <Card
+            ev={event("a", "Techno: Berlin calling", "Mansion", "23:00", 40)}
+            density="row-lg"
+            liveStatus="Live now · ends around 05:00"
+          />
+        </TimelineHour>
+        <TimelineHour time="21:00" countLabel="1 event">
+          <Card ev={event("b", "Comedy open mic", "Flying Circus", "21:00", 25)} />
+        </TimelineHour>
+      </TimelineDay>
+    </div>
+  ),
+};
+
 /** A quiet Tuesday: one hour, one event, no hero — no lane on desktop either. */
 export const OneHour: Story = {
   render: () => (

package/src/components/timeline-day.test.tsx

@@ -58,6 +58,30 @@ describe("TimelineDay", () => {
     expect(container.querySelector(".font-mono.tabular-nums.whitespace-nowrap")).toBeNull();
   });
 
+  it("gives a live unscheduled group a live heading and the hours' phone gutter", () => {
+    const { container } = render(
+      <TimelineHour time="Since last night" role="unscheduled" tone="live" countLabel="1 event">
+        <p>set</p>
+      </TimelineHour>
+    );
+    const section = container.querySelector("section");
+    expect(section).toHaveAttribute("data-tone", "live");
+    expect(section).toHaveClass("pl-[70px]", "lg:pl-0");
+    expect(screen.getByText("Since last night")).toHaveClass("text-success", "font-semibold");
+    expect(screen.getByText("Since last night")).not.toHaveClass("font-mono");
+    // Still off the axis: no station.
+    expect(container.querySelector(".font-mono.tabular-nums.whitespace-nowrap")).toBeNull();
+  });
+
+  it("ignores tone on a stationed hour", () => {
+    const { container } = render(
+      <TimelineHour time="21:00" tone="live">
+        <p>a</p>
+      </TimelineHour>
+    );
+    expect(container.querySelector("section")).not.toHaveAttribute("data-tone");
+  });
+
   it("rules between rows but not between cards", () => {
     const { container: rows } = render(
       <TimelineHour time="21:00" layout="rows">

package/src/components/timeline-hour.tsx

@@ -51,6 +51,15 @@ import { TIMELINE_MOBILE_GUTTER_CLASS, TimelineHourPuck } from "./timeline-hour-
  *                 label, a rule, the count) at both widths, after the day's
  *                 real programme.
  *
+ * `tone="live"` (with `unscheduled` only) is the same off-axis group for
+ * events that are ON NOW but have no slot on today's axis — last night's set
+ * still running at 02:00, day three of a festival. It leads the day, so the
+ * quiet mono heading ("time to be confirmed") would dress "on right now" as
+ * "we don't know when": the label goes sans, semibold and success-tinted
+ * behind a pulsing dot, the rule takes the live hairline's tint, and the
+ * phone keeps the hours' gutter inset so its cards line up with the cards
+ * below instead of running 70px wider and reading as the day's feature.
+ *
  * `layout`: `cards` stacks posters with a gap (a card is its own frame, a
  * hairline between two posters reads as a third object) and from `lg` lays
  * them on a two/three-up grid; `rows` is the same gapped stack on the phone
@@ -67,6 +76,9 @@ export type TimelineHourProps = {
    *  the caller's label for the group ("Time to be confirmed"). */
   time: string;
   role?: TimelineHourRole;
+  /** `live`: an `unscheduled` group whose events are on now. Ignored on
+   *  other roles, which say "live" through `isLive`. */
+  tone?: "default" | "live";
   /** Marks this as the hour currently in progress. */
   isLive?: boolean;
   /** Under the station when live, e.g. "NOW ON"; screen-reader-only in the chip. */
@@ -109,6 +121,7 @@ function ruleFromLg(items: React.ReactNode[]) {
 export function TimelineHour({
   time,
   role = "hour",
+  tone = "default",
   isLive,
   liveLabel,
   countLabel,
@@ -121,6 +134,7 @@ export function TimelineHour({
   const isHero = role === "hero";
   const isContinuation = role === "continuation";
   const isUnscheduled = role === "unscheduled";
+  const isLiveGroup = isUnscheduled && tone === "live";
   const hasStation = !isUnscheduled;
   const isCards = layout === "cards";
   const items = React.Children.toArray(children);
@@ -129,10 +143,12 @@ export function TimelineHour({
   return (
     <section
       data-timeline-hour={role}
+      data-tone={isLiveGroup ? "live" : undefined}
       className={cn(
         "relative flex flex-col pt-2.5",
         // The phone gutter: the puck's column plus the 12px gap `HourBand` had.
-        hasStation && "pl-[70px] lg:pl-0",
+        // A live group keeps it so its cards align with the hours' cards.
+        (hasStation || isLiveGroup) && "pl-[70px] lg:pl-0",
         "lg:pt-[22px]",
         isHero
           ? cn(
@@ -183,17 +199,35 @@ export function TimelineHour({
         className={cn(
           "items-center gap-2.5",
           isUnscheduled ? "flex h-4" : "hidden lg:flex lg:h-4",
-          isHero && "lg:hidden"
+          isHero && "lg:hidden",
+          // The heading spans the gutter; only the cards sit inset.
+          isLiveGroup && "-ml-[70px] lg:ml-0"
         )}
       >
-        {isUnscheduled && (
-          <span className="font-mono text-[11.5px] text-muted-foreground tabular-nums lg:text-xs">
+        {isLiveGroup ? (
+          <span className="flex items-center gap-1.5 text-xs font-semibold text-success">
+            <span
+              aria-hidden="true"
+              className="size-1.5 shrink-0 animate-pulse rounded-full bg-success motion-reduce:animate-none"
+            />
             {time}
           </span>
+        ) : (
+          isUnscheduled && (
+            <span className="font-mono text-[11.5px] text-muted-foreground tabular-nums lg:text-xs">
+              {time}
+            </span>
+          )
         )}
-        <Separator className="flex-1" />
+        <Separator className={cn("flex-1", isLiveGroup && "bg-success/30")} />
         {countLabel && (
-          <span className="text-[10.5px] text-muted-foreground/70 lg:text-[11px]">
+          <span
+            className={cn(
+              isLiveGroup
+                ? "text-xs text-muted-foreground"
+                : "text-[10.5px] text-muted-foreground/70 lg:text-[11px]"
+            )}
+          >
             {countLabel}
           </span>
         )}

package/src/lib/poster-overlay-frame.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+
+/**
+ * A row's poster with a caller's decoration laid over its box, unclipped (the
+ * poster itself clips). Without an overlay it is the poster alone, with no
+ * extra element, so a row without one renders exactly as before. The frame
+ * is the poster's flex slot (`shrink-0`) and the poster's size, so the row's
+ * layout is identical with or without it.
+ */
+export function PosterOverlayFrame({
+  overlay,
+  children,
+}: {
+  overlay?: ReactNode;
+  children: ReactNode;
+}) {
+  if (!overlay) return <>{children}</>;
+  return (
+    <div className="relative shrink-0">
+      {children}
+      <div className="pointer-events-none absolute inset-0 z-[1]" aria-hidden="true">
+        {overlay}
+      </div>
+    </div>
+  );
+}