@bearmenu/ui 0.8.23 → 0.8.24

package/dist/{chunk-AHL45DD2.js → chunk-I4RUOAU7.js}

@@ -1,6 +1,7 @@
+import { MotionPlayPause } from './chunk-4OF4T4AI.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { useRef, useState, useEffect } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var DRIFT_RAIL_DEFAULT_DURATION_SECONDS = 42;
 var DRIFT_RAIL_RESUME_DELAY_MS = 3e3;
@@ -9,6 +10,7 @@ function DriftRail({
   reverse = false,
   durationSeconds = DRIFT_RAIL_DEFAULT_DURATION_SECONDS,
   pauseOnHover = true,
+  labels,
   className
 }) {
   const scrollerRef = useRef(null);
@@ -16,6 +18,8 @@ function DriftRail({
   const [isHovered, setIsHovered] = useState(false);
   const [inView, setInView] = useState(true);
   const [reducedMotion, setReducedMotion] = useState(false);
+  const [isManuallyPaused, setIsManuallyPaused] = useState(false);
+  const [playPauseReplayToken, setPlayPauseReplayToken] = useState(0);
   const heldUntil = useRef(0);
   const mouseDrag = useRef(null);
   const position = useRef(0);
@@ -37,14 +41,14 @@ function DriftRail({
     return () => observer.disconnect();
   }, []);
   useEffect(() => {
-    const scroller = scrollerRef.current;
+    const scroller2 = scrollerRef.current;
     const track = trackRef.current;
-    if (!scroller || !track) return void 0;
+    if (!scroller2 || !track) return void 0;
     let frame = 0;
     let last = performance.now();
-    const drifting = !reducedMotion && inView && !(pauseOnHover && isHovered);
-    if (reverse && scroller.scrollLeft === 0) scroller.scrollLeft = track.scrollWidth / 2;
-    position.current = scroller.scrollLeft;
+    const drifting = !reducedMotion && !isManuallyPaused && inView && !(pauseOnHover && isHovered);
+    if (reverse && scroller2.scrollLeft === 0) scroller2.scrollLeft = track.scrollWidth / 2;
+    position.current = scroller2.scrollLeft;
     const tick = (now) => {
       const half = track.scrollWidth / 2;
       if (half > 0) {
@@ -54,7 +58,7 @@ function DriftRail({
           const delta = perSecond * (now - last) / 1e3;
           position.current += reverse ? -delta : delta;
         } else {
-          position.current = scroller.scrollLeft;
+          position.current = scroller2.scrollLeft;
         }
         let wrapped = false;
         if (position.current >= half) {
@@ -64,14 +68,14 @@ function DriftRail({
           position.current += half;
           wrapped = true;
         }
-        if (driftingNow || wrapped) scroller.scrollLeft = position.current;
+        if (driftingNow || wrapped) scroller2.scrollLeft = position.current;
       }
       last = now;
       frame = requestAnimationFrame(tick);
     };
     frame = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(frame);
-  }, [durationSeconds, inView, isHovered, pauseOnHover, reducedMotion, reverse]);
+  }, [durationSeconds, inView, isHovered, isManuallyPaused, pauseOnHover, reducedMotion, reverse]);
   const hold = () => {
     heldUntil.current = Number.POSITIVE_INFINITY;
   };
@@ -114,7 +118,7 @@ function DriftRail({
       event.stopPropagation();
     }
   };
-  return /* @__PURE__ */ jsx(
+  const scroller = /* @__PURE__ */ jsx(
     "div",
     {
       ref: scrollerRef,
@@ -136,10 +140,33 @@ function DriftRail({
       ),
       children: /* @__PURE__ */ jsxs("div", { ref: trackRef, className: "flex w-max items-stretch gap-3.5", children: [
         children,
-        /* @__PURE__ */ jsx("div", { className: "contents", "aria-hidden": "true", children })
+        /* @__PURE__ */ jsx("div", { className: "contents", "aria-hidden": "true", inert: true, children })
       ] })
     }
   );
+  if (!labels || reducedMotion) return scroller;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    scroller,
+    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsManuallyPaused((current) => !current),
+        onPointerDown: () => setPlayPauseReplayToken((n) => n + 1),
+        "aria-label": isManuallyPaused ? labels.play : labels.pause,
+        "aria-pressed": isManuallyPaused,
+        className: "flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none",
+        children: /* @__PURE__ */ jsx(
+          MotionPlayPause,
+          {
+            active: !isManuallyPaused,
+            replayToken: playPauseReplayToken,
+            className: "size-4"
+          }
+        )
+      }
+    ) })
+  ] });
 }
 
 export { DriftRail };

package/dist/components/alert.d.ts

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "success" | "warning" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "overlay" | "glass" | "success" | "warning" | "brown" | "onPrimary" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "warning" | "success" | "onPrimary" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {

package/dist/components/button.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "secondary" | "destructive" | "outline" | "overlay" | "glass" | "warning" | "brown" | "link" | "ghost" | "ink" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "warning" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "pill" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/command.d.ts

@@ -8,7 +8,7 @@ declare const Command: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -38,7 +38,7 @@ declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
@@ -47,14 +47,14 @@ declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandLoading: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
 } & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     progress?: number;
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -64,7 +64,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "heading" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -73,7 +73,7 @@ declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<R
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
@@ -82,7 +82,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.HTMLAttributes<HTMLDivElement>>, "onSelect" | "disabled" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/drift-rail.d.ts

@@ -26,7 +26,28 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
  * work nobody can see. `prefers-reduced-motion` removes the drift entirely;
  * the rail stays scrollable by hand, which is more than the static strip it
  * used to collapse to.
+ *
+ * THE READER CAN STOP IT FOR GOOD. Hover and touch are holds; a rail that
+ * drifts for longer than five seconds also needs a control the reader can
+ * press (WCAG 2.2.2), and a low-vision reader who cannot follow the motion
+ * needs it to stay stopped. Pass `labels` and the rail renders a pause/play
+ * toggle under its right edge — the same latch, glyph and 44px target as
+ * `WeekendPanel`'s, so the hub's rails all answer to one control. It is not
+ * rendered under `prefers-reduced-motion`, where there is nothing to stop.
+ *
+ * THE DUPLICATE IS INERT. The second copy is what makes the loop seamless,
+ * but its links are the same links again: `aria-hidden` kept them out of the
+ * accessibility tree and left them in the tab order, so a keyboard reader
+ * tabbed through every item twice. `inert` removes them from focus and
+ * hit-testing as well.
  */
+/** Accessible names for the pause/play toggle, injected so the DS owns no copy. */
+type DriftRailLabels = {
+    /** Name announced while the rail drifts (the button pauses it). */
+    pause: string;
+    /** Name announced while the rail is paused (the button resumes it). */
+    play: string;
+};
 type DriftRailProps = {
     children: React.ReactNode;
     /** Runs the loop right-to-left instead of left-to-right. */
@@ -35,8 +56,14 @@ type DriftRailProps = {
     durationSeconds?: number;
     /** Pauses the loop while the pointer hovers the rail. */
     pauseOnHover?: boolean;
+    /**
+     * Accessible names for the pause/play toggle. When given, the toggle
+     * renders whenever the rail drifts (never under `prefers-reduced-motion`);
+     * without it there is no control, as before.
+     */
+    labels?: DriftRailLabels;
     className?: string;
 };
-declare function DriftRail({ children, reverse, durationSeconds, pauseOnHover, className, }: DriftRailProps): react_jsx_runtime.JSX.Element;
+declare function DriftRail({ children, reverse, durationSeconds, pauseOnHover, labels, className, }: DriftRailProps): react_jsx_runtime.JSX.Element;
 
-export { DriftRail, type DriftRailProps };
+export { DriftRail, type DriftRailLabels, type DriftRailProps };

package/dist/components/drift-rail.js

@@ -1,3 +1,5 @@
-export { DriftRail } from '../chunk-AHL45DD2.js';
+export { DriftRail } from '../chunk-I4RUOAU7.js';
+import '../chunk-4OF4T4AI.js';
+import '../chunk-L3VEMP5A.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/poster-tape.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
+import { DriftRailLabels } from './drift-rail.js';
 
 /**
  * PosterTape — the closing marquee: small 4:5 posters drifting past at a
@@ -12,8 +13,18 @@ import { ReactNode } from 'react';
 type PosterTapeItem = {
     id: string;
     title: string;
-    /** Caller-composed, e.g. "Sat 5 · 20:00". Rendered as mono, small. */
+    /**
+     * Caller-composed, e.g. "Sat 5" — or "Sat 5 · 20:00" when `time` is not
+     * given. Rendered as mono, small, and truncated at the tape's width.
+     */
     meta: string;
+    /**
+     * The time, e.g. "20:00", rendered after `meta` and never truncated. The
+     * tape is 132px wide and a long localised date ("sâm., 5 sept. · 17:00")
+     * used to clip to "17:…" — the one figure the reader came for. Split it out
+     * and the date is what gives way.
+     */
+    time?: string;
     posterUrl?: string;
     href?: string;
     /** Rendered instead of the poster when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
@@ -29,8 +40,10 @@ type PosterTapeProps = {
     /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
     linkComponent?: React.ComponentType<PosterTapeLinkProps>;
     durationSeconds?: number;
+    /** Forwarded to `<DriftRail>`: names for its pause/play toggle, which renders only when given. */
+    labels?: DriftRailLabels;
     className?: string;
 };
-declare function PosterTape({ items, linkComponent: LinkComponent, durationSeconds, className, }: PosterTapeProps): react_jsx_runtime.JSX.Element;
+declare function PosterTape({ items, linkComponent: LinkComponent, durationSeconds, labels, className, }: PosterTapeProps): react_jsx_runtime.JSX.Element;
 
 export { PosterTape, type PosterTapeItem, type PosterTapeLinkProps, type PosterTapeProps };

package/dist/components/poster-tape.js

@@ -1,4 +1,6 @@
-import { DriftRail } from '../chunk-AHL45DD2.js';
+import { DriftRail } from '../chunk-I4RUOAU7.js';
+import '../chunk-4OF4T4AI.js';
+import '../chunk-L3VEMP5A.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
@@ -34,7 +36,13 @@ function PosterTapeItemCard({
       )
     ) : (_a = item.fallback) != null ? _a : /* @__PURE__ */ jsx(EventPosterFallback, {}) }),
     /* @__PURE__ */ jsx("div", { className: "mt-1.5 text-[11px] font-semibold leading-[1.3] sm:mt-[7px] sm:text-[11.5px]", children: item.title }),
-    /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate font-mono text-[10px] text-muted-foreground sm:text-[10.5px]", children: item.meta })
+    /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex gap-1 font-mono text-[10px] text-muted-foreground sm:text-[10.5px]", children: [
+      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.meta }),
+      item.time && /* @__PURE__ */ jsxs("span", { className: "shrink-0", children: [
+        "\xB7 ",
+        item.time
+      ] })
+    ] })
   ] });
   const itemClasses = "block w-[132px] shrink-0";
   if (item.href) {
@@ -56,9 +64,10 @@ function PosterTape({
   items,
   linkComponent: LinkComponent = DefaultLink,
   durationSeconds = POSTER_TAPE_DEFAULT_DURATION_SECONDS,
+  labels,
   className
 }) {
-  return /* @__PURE__ */ jsx(DriftRail, { durationSeconds, className, children: items.map((item) => /* @__PURE__ */ jsx(PosterTapeItemCard, { item, LinkComponent }, item.id)) });
+  return /* @__PURE__ */ jsx(DriftRail, { durationSeconds, labels, className, children: items.map((item) => /* @__PURE__ */ jsx(PosterTapeItemCard, { item, LinkComponent }, item.id)) });
 }
 
 export { PosterTape };

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?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
+    tone?: "inherit" | "default" | "destructive" | "primary" | 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?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
+    tone?: "inherit" | "default" | "destructive" | "primary" | 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" | "success" | "warning" | "primary" | "quiet" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "warning" | "success" | "primary" | "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" | "success" | "warning" | "primary" | "quiet" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "warning" | "success" | "primary" | "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,9 +22,9 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "small" | "display" | "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "default" | "destructive" | "inherit" | "muted" | "primary" | "primary-foreground" | null | undefined;
-    weight?: "medium" | "bold" | "normal" | "semibold" | null | undefined;
+    variant?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "inherit" | "default" | "destructive" | "muted" | "primary" | "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;
     wrap?: "balance" | "pretty" | "nowrap" | null | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.23",
+  "version": "0.8.24",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/drift-rail.stories.tsx

@@ -32,7 +32,7 @@ const meta: Meta<typeof DriftRail> = {
     docs: {
       description: {
         component:
-          "An infinite horizontal marquee. Duplicates its children once so a `translateX(-50%)` loop is seamless — pass a fixed, ordered list. Pauses on hover, pauses when scrolled off-screen (`IntersectionObserver`), and stops outright under `prefers-reduced-motion`.",
+          "An infinite horizontal marquee the reader can take hold of. Duplicates its children once (the copy is `inert`) so the scroll loop is seamless — pass a fixed, ordered list. Pauses on hover, pauses when scrolled off-screen (`IntersectionObserver`), stops outright under `prefers-reduced-motion`, and with `labels` renders a pause/play latch (WCAG 2.2.2).",
       },
     },
   },
@@ -90,3 +90,31 @@ export const WithFeaturedItems: Story = {
     </div>
   ),
 };
+
+/**
+ * With `labels`, a pause/play toggle renders under the rail's right edge —
+ * the same latch, glyph and 44px target as `WeekendPanel`'s (WCAG 2.2.2).
+ * Pressing it holds the rail still until play is pressed; hover and touch
+ * still pause it on their own. The control is not rendered under
+ * `prefers-reduced-motion`, where nothing drifts. The duplicate pass is
+ * `inert`, so Tab visits each item once.
+ */
+export const WithPauseControl: Story = {
+  render: () => (
+    <div className="max-w-[420px]">
+      <DriftRail durationSeconds={30} labels={{ pause: "Pause the rail", play: "Play the rail" }}>
+        {["Warehouse Rave", "Jazz on the Rooftop", "Open Mic Night", "Street Food Market"].map(
+          (title) => (
+            <FeaturedRailItem
+              key={title}
+              title={title}
+              venue="Atelier Café"
+              note="Sat 5 · 20:00"
+              href={`/events/${title.toLowerCase().replace(/\s+/g, "-")}`}
+            />
+          )
+        )}
+      </DriftRail>
+    </div>
+  ),
+};

package/src/components/drift-rail.test.tsx

@@ -0,0 +1,125 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { act, fireEvent, render, screen } from "@testing-library/react";
+import { DriftRail } from "./drift-rail";
+
+const labels = { pause: "Pause the rail", play: "Play the rail" };
+
+/**
+ * jsdom lays nothing out, so the track's `scrollWidth` is 0 and the loop's
+ * `half > 0` guard skips every frame. The tests give the track a width and
+ * the scroller a writable `scrollLeft`, capture the rAF callbacks, and drive
+ * the frames by hand with a clock that moves in whole seconds.
+ */
+const TRACK_WIDTH = 2000;
+
+let frames = new Map<number, FrameRequestCallback>();
+let nextFrameId = 1;
+let now = 0;
+
+function runFrame(elapsedMs: number) {
+  now += elapsedMs;
+  const pending = [...frames.values()];
+  frames = new Map();
+  act(() => {
+    for (const frame of pending) frame(now);
+  });
+}
+
+function renderRail(props: Partial<React.ComponentProps<typeof DriftRail>> = {}) {
+  const view = render(
+    <DriftRail durationSeconds={10} {...props}>
+      <a href="/a">A</a>
+      <a href="/b">B</a>
+    </DriftRail>
+  );
+  const track = screen.getAllByText("A")[0].parentElement as HTMLElement;
+  const scroller = track.parentElement as HTMLElement;
+  Object.defineProperty(track, "scrollWidth", { value: TRACK_WIDTH, configurable: true });
+  let scrollLeft = 0;
+  Object.defineProperty(scroller, "scrollLeft", {
+    get: () => scrollLeft,
+    set: (value: number) => {
+      scrollLeft = value;
+    },
+    configurable: true,
+  });
+  return { ...view, scroller, track };
+}
+
+beforeEach(() => {
+  frames = new Map();
+  nextFrameId = 1;
+  now = 0;
+  vi.spyOn(window, "requestAnimationFrame").mockImplementation((callback) => {
+    const id = nextFrameId++;
+    frames.set(id, callback);
+    return id;
+  });
+  vi.spyOn(window, "cancelAnimationFrame").mockImplementation((id) => {
+    frames.delete(id);
+  });
+  vi.spyOn(performance, "now").mockImplementation(() => now);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe("DriftRail", () => {
+  it("advances the scroller by width / duration per second", () => {
+    const { scroller } = renderRail();
+    runFrame(0);
+    runFrame(1000);
+    // One copy is half the track; 1000px over 10s is 100px per second.
+    expect(scroller.scrollLeft).toBeCloseTo(100, 5);
+  });
+
+  it("renders no control without labels", () => {
+    renderRail();
+    expect(screen.queryByRole("button")).not.toBeInTheDocument();
+  });
+
+  it("stops advancing when the reader presses pause, and stays stopped until play", () => {
+    const { scroller } = renderRail({ labels });
+    runFrame(0);
+    runFrame(1000);
+    const advanced = scroller.scrollLeft;
+    expect(advanced).toBeGreaterThan(0);
+
+    const toggle = screen.getByRole("button", { name: labels.pause });
+    expect(toggle).toHaveAttribute("aria-pressed", "false");
+    fireEvent.click(toggle);
+
+    expect(toggle).toHaveAttribute("aria-pressed", "true");
+    expect(toggle).toHaveAccessibleName(labels.play);
+
+    runFrame(0);
+    runFrame(1000);
+    runFrame(1000);
+    expect(scroller.scrollLeft).toBe(advanced);
+
+    // The latch survives the hover hold lifting: nothing but play resumes it.
+    fireEvent.mouseEnter(scroller);
+    fireEvent.mouseLeave(scroller);
+    runFrame(0);
+    runFrame(1000);
+    expect(scroller.scrollLeft).toBe(advanced);
+
+    fireEvent.click(toggle);
+    expect(toggle).toHaveAttribute("aria-pressed", "false");
+    runFrame(0);
+    runFrame(1000);
+    expect(scroller.scrollLeft).toBeGreaterThan(advanced);
+  });
+
+  it("makes the duplicate pass inert as well as aria-hidden", () => {
+    const { track } = renderRail();
+    const copies = screen.getAllByText("A");
+    expect(copies).toHaveLength(2);
+    const clone = copies[1].parentElement as HTMLElement;
+    expect(clone.parentElement).toBe(track);
+    expect(clone).toHaveAttribute("aria-hidden", "true");
+    expect(clone).toHaveAttribute("inert");
+    expect(copies[0].parentElement).toBe(track);
+  });
+});

package/src/components/drift-rail.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from "react";
 import type { PointerEvent as ReactPointerEvent } from "react";
 import { cn } from "../lib/utils";
+import { MotionPlayPause } from "./motion-icon-controls";
 
 /**
  * DriftRail — an infinite horizontal marquee for logos, tag chips or small
@@ -30,7 +31,29 @@ import { cn } from "../lib/utils";
  * work nobody can see. `prefers-reduced-motion` removes the drift entirely;
  * the rail stays scrollable by hand, which is more than the static strip it
  * used to collapse to.
+ *
+ * THE READER CAN STOP IT FOR GOOD. Hover and touch are holds; a rail that
+ * drifts for longer than five seconds also needs a control the reader can
+ * press (WCAG 2.2.2), and a low-vision reader who cannot follow the motion
+ * needs it to stay stopped. Pass `labels` and the rail renders a pause/play
+ * toggle under its right edge — the same latch, glyph and 44px target as
+ * `WeekendPanel`'s, so the hub's rails all answer to one control. It is not
+ * rendered under `prefers-reduced-motion`, where there is nothing to stop.
+ *
+ * THE DUPLICATE IS INERT. The second copy is what makes the loop seamless,
+ * but its links are the same links again: `aria-hidden` kept them out of the
+ * accessibility tree and left them in the tab order, so a keyboard reader
+ * tabbed through every item twice. `inert` removes them from focus and
+ * hit-testing as well.
  */
+/** Accessible names for the pause/play toggle, injected so the DS owns no copy. */
+export type DriftRailLabels = {
+  /** Name announced while the rail drifts (the button pauses it). */
+  pause: string;
+  /** Name announced while the rail is paused (the button resumes it). */
+  play: string;
+};
+
 export type DriftRailProps = {
   children: React.ReactNode;
   /** Runs the loop right-to-left instead of left-to-right. */
@@ -39,6 +62,12 @@ export type DriftRailProps = {
   durationSeconds?: number;
   /** Pauses the loop while the pointer hovers the rail. */
   pauseOnHover?: boolean;
+  /**
+   * Accessible names for the pause/play toggle. When given, the toggle
+   * renders whenever the rail drifts (never under `prefers-reduced-motion`);
+   * without it there is no control, as before.
+   */
+  labels?: DriftRailLabels;
   className?: string;
 };
 
@@ -51,6 +80,7 @@ export function DriftRail({
   reverse = false,
   durationSeconds = DRIFT_RAIL_DEFAULT_DURATION_SECONDS,
   pauseOnHover = true,
+  labels,
   className,
 }: DriftRailProps) {
   const scrollerRef = useRef<HTMLDivElement>(null);
@@ -58,6 +88,9 @@ export function DriftRail({
   const [isHovered, setIsHovered] = useState(false);
   const [inView, setInView] = useState(true);
   const [reducedMotion, setReducedMotion] = useState(false);
+  // A latch, not a hold: it only clears when the reader presses play.
+  const [isManuallyPaused, setIsManuallyPaused] = useState(false);
+  const [playPauseReplayToken, setPlayPauseReplayToken] = useState(0);
   // `heldUntil` is a timestamp rather than a boolean so a native touch scroll
   // that keeps going after the finger lifts is not fought by the drift.
   const heldUntil = useRef(0);
@@ -98,7 +131,8 @@ export function DriftRail({
 
     let frame = 0;
     let last = performance.now();
-    const drifting = !reducedMotion && inView && !(pauseOnHover && isHovered);
+    const drifting =
+      !reducedMotion && !isManuallyPaused && inView && !(pauseOnHover && isHovered);
 
     // Start the reverse loop inside the second copy so it has room to travel.
     if (reverse && scroller.scrollLeft === 0) scroller.scrollLeft = track.scrollWidth / 2;
@@ -132,7 +166,7 @@ export function DriftRail({
     };
     frame = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(frame);
-  }, [durationSeconds, inView, isHovered, pauseOnHover, reducedMotion, reverse]);
+  }, [durationSeconds, inView, isHovered, isManuallyPaused, pauseOnHover, reducedMotion, reverse]);
 
   const hold = () => {
     heldUntil.current = Number.POSITIVE_INFINITY;
@@ -178,7 +212,7 @@ export function DriftRail({
     }
   };
 
-  return (
+  const scroller = (
     <div
       ref={scrollerRef}
       onMouseEnter={() => setIsHovered(true)}
@@ -202,10 +236,43 @@ export function DriftRail({
     >
       <div ref={trackRef} className="flex w-max items-stretch gap-3.5">
         {children}
-        <div className="contents" aria-hidden="true">
+        {/* `inert` as well as `aria-hidden`: the copy's links must leave the
+            tab order too, or a keyboard reader tabs every item twice. */}
+        <div className="contents" aria-hidden="true" inert>
           {children}
         </div>
       </div>
     </div>
   );
+
+  // The toggle exists to stop a drift; under reduced motion there is none.
+  // A sibling row, not an overlay: a button floated over the rail's corner
+  // would sit on an item and intercept the grab that starts there.
+  if (!labels || reducedMotion) return scroller;
+
+  return (
+    <>
+      {scroller}
+      <div className="flex justify-end">
+        {/* `MotionPlayPause`, as in `WeekendPanel`: the triangle folding into
+            two bars IS the state change. `active` is the bars, so it is
+            `!isManuallyPaused`; `replayToken` bumps on pointer down so the
+            gesture answers the touch. */}
+        <button
+          type="button"
+          onClick={() => setIsManuallyPaused((current) => !current)}
+          onPointerDown={() => setPlayPauseReplayToken((n) => n + 1)}
+          aria-label={isManuallyPaused ? labels.play : labels.pause}
+          aria-pressed={isManuallyPaused}
+          className="flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none"
+        >
+          <MotionPlayPause
+            active={!isManuallyPaused}
+            replayToken={playPauseReplayToken}
+            className="size-4"
+          />
+        </button>
+      </div>
+    </>
+  );
 }

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

@@ -68,3 +68,32 @@ export const LongTitles: Story = {
     ],
   },
 };
+
+/**
+ * A long localised date with the time split out into `time`. The date
+ * truncates ("sâm., 5 sept." becomes "sâm., 5 se…" if it must); the time is
+ * `shrink-0` outside the truncating span and is always whole. Before this the
+ * whole line was one truncating string and clipped to "17:…".
+ */
+export const LocalisedDateAndTime: Story = {
+  args: {
+    items: [
+      { id: "1", title: "Warehouse Rave", meta: "sâmbătă, 5 septembrie", time: "17:00" },
+      { id: "2", title: "Jazz on the Rooftop", meta: "vineri, 4 septembrie", time: "19:30" },
+      { id: "3", title: "Open Mic Night", meta: "joi, 3 sept.", time: "21:00" },
+      { id: "4", title: "Street Food Market", meta: "duminică, 6 septembrie", time: "12:00" },
+    ],
+  },
+};
+
+/**
+ * With `labels`, a pause/play toggle renders under the tape's right edge —
+ * `<DriftRail>`'s control, forwarded. Pressing it latches the tape still
+ * until play is pressed again. It does not render under
+ * `prefers-reduced-motion`, where nothing drifts.
+ */
+export const WithPauseControl: Story = {
+  args: {
+    labels: { pause: "Pause the tape", play: "Play the tape" },
+  },
+};

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

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { PosterTape } from "./poster-tape";
+
+describe("PosterTape", () => {
+  it("renders meta alone when no time is given", () => {
+    render(<PosterTape items={[{ id: "1", title: "Warehouse Rave", meta: "SAT 20:00" }]} />);
+    const [meta] = screen.getAllByText("SAT 20:00");
+    expect(meta).toHaveClass("truncate");
+    expect(meta.parentElement?.childElementCount).toBe(1);
+  });
+
+  it("renders the time outside the truncating span so it never clips", () => {
+    render(
+      <PosterTape
+        items={[{ id: "1", title: "Warehouse Rave", meta: "sâm., 5 sept.", time: "17:00" }]}
+      />
+    );
+    const [meta] = screen.getAllByText("sâm., 5 sept.");
+    const [time] = screen.getAllByText("· 17:00");
+
+    expect(meta).toHaveClass("truncate");
+    expect(meta.contains(time)).toBe(false);
+    expect(time).toHaveClass("shrink-0");
+    expect(time).not.toHaveClass("truncate");
+    expect(time.parentElement).toBe(meta.parentElement);
+    expect(meta.parentElement).not.toHaveClass("truncate");
+  });
+
+  it("forwards labels to the rail's pause control", () => {
+    render(
+      <PosterTape
+        items={[{ id: "1", title: "Warehouse Rave", meta: "SAT 20:00" }]}
+        labels={{ pause: "Pause the tape", play: "Play the tape" }}
+      />
+    );
+    expect(screen.getByRole("button", { name: "Pause the tape" })).toHaveAttribute(
+      "aria-pressed",
+      "false"
+    );
+  });
+});

package/src/components/poster-tape.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import type { ReactNode } from "react";
 import { cn } from "../lib/utils";
-import { DriftRail } from "./drift-rail";
+import { DriftRail, type DriftRailLabels } from "./drift-rail";
 import { EventPosterFallback } from "./event-poster-fallback";
 
 /**
@@ -17,8 +17,18 @@ import { EventPosterFallback } from "./event-poster-fallback";
 export type PosterTapeItem = {
   id: string;
   title: string;
-  /** Caller-composed, e.g. "Sat 5 · 20:00". Rendered as mono, small. */
+  /**
+   * Caller-composed, e.g. "Sat 5" — or "Sat 5 · 20:00" when `time` is not
+   * given. Rendered as mono, small, and truncated at the tape's width.
+   */
   meta: string;
+  /**
+   * The time, e.g. "20:00", rendered after `meta` and never truncated. The
+   * tape is 132px wide and a long localised date ("sâm., 5 sept. · 17:00")
+   * used to clip to "17:…" — the one figure the reader came for. Split it out
+   * and the date is what gives way.
+   */
+  time?: string;
   posterUrl?: string;
   href?: string;
   /** Rendered instead of the poster when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
@@ -40,6 +50,8 @@ export type PosterTapeProps = {
   /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
   linkComponent?: React.ComponentType<PosterTapeLinkProps>;
   durationSeconds?: number;
+  /** Forwarded to `<DriftRail>`: names for its pause/play toggle, which renders only when given. */
+  labels?: DriftRailLabels;
   className?: string;
 };
 
@@ -81,8 +93,11 @@ function PosterTapeItemCard({
       <div className="mt-1.5 text-[11px] font-semibold leading-[1.3] sm:mt-[7px] sm:text-[11.5px]">
         {item.title}
       </div>
-      <div className="mt-0.5 truncate font-mono text-[10px] text-muted-foreground sm:text-[10.5px]">
-        {item.meta}
+      {/* The date truncates; the time is `shrink-0` outside the truncating
+          span, so it is always whole. */}
+      <div className="mt-0.5 flex gap-1 font-mono text-[10px] text-muted-foreground sm:text-[10.5px]">
+        <span className="min-w-0 truncate">{item.meta}</span>
+        {item.time && <span className="shrink-0">· {item.time}</span>}
       </div>
     </>
   );
@@ -110,10 +125,11 @@ export function PosterTape({
   items,
   linkComponent: LinkComponent = DefaultLink,
   durationSeconds = POSTER_TAPE_DEFAULT_DURATION_SECONDS,
+  labels,
   className,
 }: PosterTapeProps) {
   return (
-    <DriftRail durationSeconds={durationSeconds} className={className}>
+    <DriftRail durationSeconds={durationSeconds} labels={labels} className={className}>
       {items.map((item) => (
         <PosterTapeItemCard key={item.id} item={item} LinkComponent={LinkComponent} />
       ))}