@bearmenu/ui 0.8.57 → 0.8.59

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.57",
-  "packageManager": "pnpm@10.28.1",
-  "description": "BearMenu design system \u2014 shared UI tokens, primitives, and components",
+  "version": "0.8.59",
+  "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -17,226 +16,20 @@
     "src"
   ],
   "exports": {
-    "./components/accordion": "./src/components/accordion.tsx",
-    "./components/action-bar": "./src/components/action-bar.tsx",
-    "./components/activity-row": "./src/components/activity-row.tsx",
-    "./components/alert": "./src/components/alert.tsx",
-    "./components/alert-dialog": "./src/components/alert-dialog.tsx",
-    "./components/aspect-ratio": "./src/components/aspect-ratio.tsx",
-    "./components/avatar": "./src/components/avatar.tsx",
-    "./components/badge": "./src/components/badge.tsx",
-    "./components/banner": "./src/components/banner.tsx",
-    "./components/booking-row": "./src/components/booking-row.tsx",
-    "./components/booking-summary-card": "./src/components/booking-summary-card.tsx",
-    "./components/breadcrumb": "./src/components/breadcrumb.tsx",
-    "./components/button": "./src/components/button.tsx",
-    "./components/button-group": "./src/components/button-group.tsx",
-    "./components/calendar": "./src/components/calendar.tsx",
-    "./components/card": "./src/components/card.tsx",
-    "./components/carousel": "./src/components/carousel.tsx",
-    "./components/category-deck": "./src/components/category-deck.tsx",
-    "./components/checkbox": "./src/components/checkbox.tsx",
-    "./components/circular-progress": "./src/components/circular-progress.tsx",
-    "./components/coach-marks": "./src/components/coach-marks.tsx",
-    "./components/collapsible": "./src/components/collapsible.tsx",
-    "./components/combobox": "./src/components/combobox.tsx",
-    "./components/command": "./src/components/command.tsx",
-    "./components/concept-card": "./src/components/concept-card.tsx",
-    "./components/concept-compare": "./src/components/concept-compare.tsx",
-    "./components/concept-compare-rail": "./src/components/concept-compare-rail.tsx",
-    "./components/concept-convergence": "./src/components/concept-convergence.tsx",
-    "./components/convergence": "./src/components/convergence.tsx",
-    "./components/coverflow": "./src/components/coverflow.tsx",
-    "./components/currency-input": "./src/components/currency-input.tsx",
-    "./components/date-input": "./src/components/date-input.tsx",
-    "./components/day-rail-chip": "./src/components/day-rail-chip.tsx",
-    "./components/description-list": "./src/components/description-list.tsx",
-    "./components/dialog": "./src/components/dialog.tsx",
-    "./components/doorway-tiles": "./src/components/doorway-tiles.tsx",
-    "./components/drawer": "./src/components/drawer.tsx",
-    "./components/drift-rail": "./src/components/drift-rail.tsx",
-    "./components/dropdown-menu": "./src/components/dropdown-menu.tsx",
-    "./components/empty-state": "./src/components/empty-state.tsx",
-    "./components/event-card": "./src/components/event-card.tsx",
-    "./components/event-compact-row": "./src/components/event-compact-row.tsx",
-    "./components/event-day-header": "./src/components/event-day-header.tsx",
-    "./components/event-day-separator": "./src/components/event-day-separator.tsx",
-    "./components/event-detail-panel": "./src/components/event-detail-panel.tsx",
-    "./components/event-hub-hero": "./src/components/event-hub-hero.tsx",
-    "./components/event-index-row": "./src/components/event-index-row.tsx",
-    "./components/event-list-row": "./src/components/event-list-row.tsx",
-    "./components/event-list-row-wide": "./src/components/event-list-row-wide.tsx",
-    "./components/event-poster-fallback": "./src/components/event-poster-fallback.tsx",
-    "./components/event-tonight-strip": "./src/components/event-tonight-strip.tsx",
-    "./components/event-types": "./src/components/event-types.ts",
-    "./components/events-empty-state": "./src/components/events-empty-state.tsx",
-    "./components/explainer-steps": "./src/components/explainer-steps.tsx",
-    "./components/facet-group": "./src/components/facet-group.tsx",
-    "./components/featured-rail-item": "./src/components/featured-rail-item.tsx",
-    "./components/field": "./src/components/field.tsx",
-    "./components/filter-category-row": "./src/components/filter-category-row.tsx",
-    "./components/form": "./src/components/form.tsx",
-    "./components/glass-ground": "./src/components/glass-ground.tsx",
-    "./components/grade-atom": "./src/components/grade-atom.tsx",
-    "./components/haptic-switch": "./src/components/haptic-switch.tsx",
-    "./components/hold-countdown": "./src/components/hold-countdown.tsx",
-    "./components/hub-surface": "./src/components/hub-surface.tsx",
-    "./components/hue-chip": "./src/components/hue-chip.tsx",
-    "./components/icon": "./src/components/icon.tsx",
-    "./components/input": "./src/components/input.tsx",
-    "./components/input-group": "./src/components/input-group.tsx",
-    "./components/input-otp": "./src/components/input-otp.tsx",
-    "./components/item": "./src/components/item.tsx",
-    "./components/kbd": "./src/components/kbd.tsx",
-    "./components/label": "./src/components/label.tsx",
-    "./components/kitchen-dossier": "./src/components/kitchen-dossier.tsx",
-    "./components/lazy-markdown": "./src/components/lazy-markdown.tsx",
-    "./components/link-button": "./src/components/link-button.tsx",
-    "./components/markdown-renderer": "./src/components/markdown-renderer.tsx",
-    "./components/menu-dead-end": "./src/components/menu-dead-end.tsx",
-    "./components/menu-family-block": "./src/components/menu-family-block.tsx",
-    "./components/menu-family-card": "./src/components/menu-family-card.tsx",
-    "./components/menu-field": "./src/components/menu-field.tsx",
-    "./components/menu-filter-chips": "./src/components/menu-filter-chips.tsx",
-    "./components/menu-group-rows": "./src/components/menu-group-rows.tsx",
-    "./components/menu-hub-hero": "./src/components/menu-hub-hero.tsx",
-    "./components/menu-index-header": "./src/components/menu-index-header.tsx",
-    "./components/menu-index-list": "./src/components/menu-index-list.tsx",
-    "./components/menu-intent-hero": "./src/components/menu-intent-hero.tsx",
-    "./components/menu-item": "./src/components/menu-item.tsx",
-    "./components/menu-pick-row": "./src/components/menu-pick-row.tsx",
-    "./components/menu-kitchen-list": "./src/components/menu-kitchen-list.tsx",
-    "./components/menu-mocks": "./src/components/menu-mocks.ts",
-    "./components/menu-types": "./src/components/menu-types.ts",
-    "./components/motion-icon": "./src/components/motion-icon.tsx",
-    "./components/motion-icon-actions": "./src/components/motion-icon-actions.tsx",
-    "./components/motion-icon-controls": "./src/components/motion-icon-controls.tsx",
-    "./components/motion-icon-set": "./src/components/motion-icon-set.tsx",
-    "./components/multi-select-combobox": "./src/components/multi-select-combobox.tsx",
-    "./components/multi-select-menu": "./src/components/multi-select-menu.tsx",
-    "./components/native-select": "./src/components/native-select.tsx",
-    "./components/open-now-list": "./src/components/open-now-list.tsx",
-    "./components/pagination": "./src/components/pagination.tsx",
-    "./components/pan-zoom-viewport": "./src/components/pan-zoom-viewport.tsx",
-    "./components/party-counter": "./src/components/party-counter.tsx",
-    "./components/phone-frame": "./src/components/phone-frame.tsx",
-    "./components/photo-ground": "./src/components/photo-ground.tsx",
-    "./components/place-about-tab": "./src/components/place-about-tab.tsx",
-    "./components/place-card": "./src/components/place-card.tsx",
-    "./components/place-details-mobile": "./src/components/place-details-mobile.tsx",
-    "./components/place-schedule-week": "./src/components/place-schedule-week.tsx",
-    "./components/place-types": "./src/components/place-types.ts",
-    "./components/popover": "./src/components/popover.tsx",
-    "./components/poster-stack": "./src/components/poster-stack.tsx",
-    "./components/poster-tape": "./src/components/poster-tape.tsx",
-    "./components/poster-wall": "./src/components/poster-wall.tsx",
-    "./components/progress": "./src/components/progress.tsx",
-    "./components/qa-block": "./src/components/qa-block.tsx",
-    "./components/qr-panel": "./src/components/qr-panel.tsx",
-    "./components/quiet-stretch": "./src/components/quiet-stretch.tsx",
-    "./components/radio-group": "./src/components/radio-group.tsx",
-    "./components/reconcile-bar": "./src/components/reconcile-bar.tsx",
-    "./components/responsive-overlay": "./src/components/responsive-overlay.tsx",
-    "./components/rating": "./src/components/rating.tsx",
-    "./components/scroll-area": "./src/components/scroll-area.tsx",
-    "./components/scroll-fade": "./src/components/scroll-fade.tsx",
-    "./components/search-bar": "./src/components/search-bar.tsx",
-    "./components/searchable-select": "./src/components/searchable-select.tsx",
-    "./components/section-header": "./src/components/section-header.tsx",
-    "./components/segmented-nav": "./src/components/segmented-nav.tsx",
-    "./components/select": "./src/components/select.tsx",
-    "./components/selection-bar": "./src/components/selection-bar.tsx",
-    "./components/separator": "./src/components/separator.tsx",
-    "./components/sheet": "./src/components/sheet.tsx",
-    "./components/signature-chip": "./src/components/signature-chip.tsx",
-    "./components/skeleton": "./src/components/skeleton.tsx",
-    "./components/skeleton-card": "./src/components/skeleton-card.tsx",
-    "./components/slider": "./src/components/slider.tsx",
-    "./components/sliding-panels": "./src/components/sliding-panels.tsx",
-    "./components/sonner": "./src/components/sonner.tsx",
-    "./components/sort-option-list": "./src/components/sort-option-list.tsx",
-    "./components/spinner": "./src/components/spinner.tsx",
-    "./components/split-share-row": "./src/components/split-share-row.tsx",
-    "./components/stat-banner": "./src/components/stat-banner.tsx",
-    "./components/stepper": "./src/components/stepper.tsx",
-    "./components/sticky-container": "./src/components/sticky-container.tsx",
-    "./components/story": "./src/components/story.tsx",
-    "./components/switch": "./src/components/switch.tsx",
-    "./components/table": "./src/components/table.tsx",
-    "./components/table-ledger-card": "./src/components/table-ledger-card.tsx",
-    "./components/table-trigger-band": "./src/components/table-trigger-band.tsx",
-    "./components/tabs": "./src/components/tabs.tsx",
-    "./components/tag": "./src/components/tag.tsx",
-    "./components/tag-group": "./src/components/tag-group.tsx",
-    "./components/text": "./src/components/text.tsx",
-    "./components/textarea": "./src/components/textarea.tsx",
-    "./components/time-slot": "./src/components/time-slot.tsx",
-    "./components/timeline-day": "./src/components/timeline-day.tsx",
-    "./components/timeline-hour": "./src/components/timeline-hour.tsx",
-    "./components/timeline-hour-puck": "./src/components/timeline-hour-puck.tsx",
-    "./components/toggle": "./src/components/toggle.tsx",
-    "./components/toggle-group": "./src/components/toggle-group.tsx",
-    "./components/tooltip": "./src/components/tooltip.tsx",
-    "./components/top-comparison": "./src/components/top-comparison.tsx",
-    "./components/top-cross-link": "./src/components/top-cross-link.tsx",
-    "./components/top-ranking-entry": "./src/components/top-ranking-entry.tsx",
-    "./components/top-ranking-hero": "./src/components/top-ranking-hero.tsx",
-    "./components/top-ranking-legend": "./src/components/top-ranking-legend.tsx",
-    "./components/top-types": "./src/components/top-types.ts",
-    "./components/use-mobile": "./src/components/use-mobile.tsx",
-    "./components/venue-events-block": "./src/components/venue-events-block.tsx",
-    "./components/venue-grade-dimensions": "./src/components/venue-grade-dimensions.tsx",
-    "./components/venue-quotes": "./src/components/venue-quotes.tsx",
-    "./components/venue-wall": "./src/components/venue-wall.tsx",
-    "./components/weekday-chip": "./src/components/weekday-chip.tsx",
-    "./components/weekday-theme-banner": "./src/components/weekday-theme-banner.tsx",
-    "./components/weekend-panel": "./src/components/weekend-panel.tsx",
     "./globals.css": "./src/globals.css",
-    "./hooks/use-drag-swipe": "./src/hooks/use-drag-swipe.ts",
-    "./hooks/use-haptic": "./src/hooks/use-haptic.ts",
-    "./hooks/use-media-query": "./src/hooks/use-media-query.ts",
-    "./hooks/use-mobile": "./src/hooks/use-mobile.ts",
-    "./hooks/use-mounted-theme": "./src/hooks/use-mounted-theme.ts",
-    "./hooks/use-sticky": "./src/hooks/use-sticky.ts",
-    "./lib/card-hover": "./src/lib/card-hover.ts",
-    "./lib/grade": "./src/lib/grade.ts",
-    "./lib/icon-depth": "./src/lib/icon-depth.ts",
-    "./lib/icon-registry": "./src/lib/icon-registry.ts",
-    "./lib/motion": "./src/lib/motion.ts",
-    "./lib/overlay-pill": "./src/lib/overlay-pill.ts",
-    "./lib/utils": "./src/lib/utils.ts",
-    "./components/filter-option-chip": "./src/components/filter-option-chip.tsx",
-    "./components/filter-option-group": "./src/components/filter-option-group.tsx",
-    "./components/filter-panel-footer": "./src/components/filter-panel-footer.tsx"
-  },
-  "publishConfig": {
-    "exports": {
-      "./globals.css": "./src/globals.css",
-      "./components/*": {
-        "types": "./dist/components/*.d.ts",
-        "import": "./dist/components/*.js"
-      },
-      "./hooks/*": {
-        "types": "./dist/hooks/*.d.ts",
-        "import": "./dist/hooks/*.js"
-      },
-      "./lib/*": {
-        "types": "./dist/lib/*.d.ts",
-        "import": "./dist/lib/*.js"
-      }
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./hooks/*": {
+      "types": "./dist/hooks/*.d.ts",
+      "import": "./dist/hooks/*.js"
+    },
+    "./lib/*": {
+      "types": "./dist/lib/*.d.ts",
+      "import": "./dist/lib/*.js"
     }
   },
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "clean": "rm -rf dist",
-    "prepublishOnly": "pnpm run build"
-  },
   "peerDependencies": {
     "@hookform/resolvers": "^3.0.0 || ^5.0.0",
     "@radix-ui/react-accordion": "*",
@@ -345,5 +138,15 @@
     "vaul": "^1.1.2",
     "vitest": "^4.1.5",
     "zod": "^3.25.67"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist"
   }
-}
+}

package/src/components/time-slot-rail.stories.tsx

@@ -0,0 +1,166 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import { TimeSlot, type TimeSlotFit } from "./time-slot";
+import { TimeSlotRail } from "./time-slot-rail";
+
+const meta: Meta<typeof TimeSlotRail> = {
+  title: "Booking/TimeSlotRail",
+  component: TimeSlotRail,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A single row of touch-size TimeSlots that scrolls sideways. Arrow keys move focus, Enter or Space picks, the selected chip is centred on mount. Every string is a prop.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TimeSlotRail>;
+
+type Slot = { time: string; fit: TimeSlotFit; meta: string };
+
+const SLOTS: Slot[] = [
+  { time: "17:00", fit: "fits", meta: "R1" },
+  { time: "17:30", fit: "fits", meta: "R1" },
+  { time: "18:00", fit: "fits", meta: "R1+R2" },
+  { time: "18:30", fit: "tight", meta: "Join R3+R4" },
+  { time: "19:00", fit: "fits", meta: "R1+R2" },
+  { time: "19:30", fit: "fits", meta: "R1+R2" },
+  { time: "20:00", fit: "tight", meta: "Join R3+R4" },
+  { time: "20:30", fit: "none", meta: "Full" },
+  { time: "21:00", fit: "none", meta: "Full" },
+  { time: "21:30", fit: "tight", meta: "Join R5+R6" },
+  { time: "22:00", fit: "fits", meta: "R2" },
+  { time: "22:30", fit: "fits", meta: "R2" },
+];
+
+const SCROLL_LABELS = { previous: "Earlier times", next: "Later times" };
+
+function Chips({
+  selected,
+  onSelect,
+  disabled,
+  fit,
+}: {
+  selected: string;
+  onSelect: (time: string) => void;
+  disabled?: boolean;
+  fit?: TimeSlotFit;
+}) {
+  return (
+    <>
+      {SLOTS.map((slot) => (
+        <TimeSlot
+          key={slot.time}
+          size="touch"
+          time={slot.time}
+          fit={fit ?? slot.fit}
+          meta={fit === "none" ? "Full" : slot.meta}
+          selected={selected === slot.time}
+          disabled={disabled}
+          onSelect={() => onSelect(slot.time)}
+          aria-label={`${slot.time}, ${slot.meta}`}
+          className="w-[84px] shrink-0 snap-center"
+        />
+      ))}
+    </>
+  );
+}
+
+function Inset({ children, dark }: { children: React.ReactNode; dark?: boolean }) {
+  return (
+    <div
+      className={`${dark ? "dark " : ""}w-[343px] rounded-xl bg-background p-1.5 text-foreground`}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Interactive({ dark, disabled }: { dark?: boolean; disabled?: boolean }) {
+  const [selected, setSelected] = React.useState("19:30");
+  return (
+    <Inset dark={dark}>
+      <TimeSlotRail aria-label="Start time on Wed 18 Nov" scrollLabels={SCROLL_LABELS}>
+        <Chips selected={selected} onSelect={setSelected} disabled={disabled} />
+      </TimeSlotRail>
+    </Inset>
+  );
+}
+
+/** The pick bar's inset at 375px: 3.7 chips show, the partial one says "scroll". */
+export const Default: Story = { render: () => <Interactive /> };
+
+export const Dark: Story = { render: () => <Interactive dark /> };
+
+/** The whole rail locks while the write is out. */
+export const Locked: Story = { render: () => <Interactive disabled /> };
+
+/** Every chip in one fit state, to compare the three side by side. */
+export const FitStates: Story = {
+  render: () => (
+    <div className="flex flex-col gap-3">
+      {(["fits", "tight", "none"] as const).map((fit) => (
+        <Inset key={fit}>
+          <TimeSlotRail aria-label={`All ${fit}`}>
+            <Chips selected="19:30" onSelect={() => {}} fit={fit} />
+          </TimeSlotRail>
+        </Inset>
+      ))}
+    </div>
+  ),
+};
+
+/** Two service periods split by a separator, each its own labelled group. */
+export const Periods: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState("20:00");
+    const lunch = SLOTS.slice(0, 4);
+    const dinner = SLOTS.slice(4);
+    const chips = (slots: Slot[]) =>
+      slots.map((slot) => (
+        <TimeSlot
+          key={slot.time}
+          size="touch"
+          time={slot.time}
+          fit={slot.fit}
+          meta={slot.meta}
+          selected={selected === slot.time}
+          onSelect={() => setSelected(slot.time)}
+          className="w-[84px] shrink-0 snap-center"
+        />
+      ));
+    return (
+      <Inset>
+        <TimeSlotRail aria-label="Start time on Wed 18 Nov" scrollLabels={SCROLL_LABELS}>
+          <div role="group" aria-label="Lunch" className="flex gap-2">
+            {chips(lunch)}
+          </div>
+          <Separator orientation="vertical" className="mx-1 h-8 self-center" />
+          <div role="group" aria-label="Dinner" className="flex gap-2">
+            {chips(dinner)}
+          </div>
+        </TimeSlotRail>
+      </Inset>
+    );
+  },
+};
+
+/** Loading is the caller's: skeletons of the same footprint, so the inset does not jump. */
+export const Loading: Story = {
+  render: () => (
+    <Inset>
+      <div role="status" className="flex gap-2 overflow-hidden">
+        <span className="sr-only">Checking tables for 12…</span>
+        {Array.from({ length: 5 }, (_, i) => (
+          <Skeleton key={i} aria-hidden className="h-[52px] w-[84px] shrink-0 rounded-xl" />
+        ))}
+      </div>
+    </Inset>
+  ),
+};

package/src/components/time-slot-rail.test.tsx

@@ -0,0 +1,177 @@
+import * as React from "react";
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TimeSlot } from "./time-slot";
+import { TimeSlotRail } from "./time-slot-rail";
+
+const TIMES = ["18:00", "18:30", "19:00", "19:30"];
+
+function Rail({
+  initial = "19:00",
+  disabled,
+  unavailable = [],
+  scrollLabels,
+}: {
+  initial?: string;
+  disabled?: boolean;
+  unavailable?: string[];
+  scrollLabels?: { previous: string; next: string };
+}) {
+  const [selected, setSelected] = React.useState(initial);
+  return (
+    <TimeSlotRail aria-label="Start time" scrollLabels={scrollLabels}>
+      {TIMES.map((time) => (
+        <TimeSlot
+          key={time}
+          size="touch"
+          time={time}
+          fit="fits"
+          meta="R1"
+          selected={selected === time}
+          disabled={disabled}
+          unavailable={unavailable.includes(time)}
+          onSelect={() => setSelected(time)}
+        />
+      ))}
+    </TimeSlotRail>
+  );
+}
+
+const chip = (time: string) => screen.getByRole("button", { name: new RegExp(time) });
+
+// jsdom has no scrollTo; the rail guards for that, so install a spy per test.
+function spyOnScrollTo() {
+  const scrollTo = vi.fn();
+  Object.defineProperty(HTMLElement.prototype, "scrollTo", { configurable: true, value: scrollTo });
+  return scrollTo;
+}
+
+afterEach(() => {
+  Reflect.deleteProperty(HTMLElement.prototype, "scrollTo");
+});
+
+describe("TimeSlotRail", () => {
+  it("is a labelled group of pressed-state buttons", () => {
+    render(<Rail />);
+    expect(screen.getByRole("group", { name: "Start time" })).toBeInTheDocument();
+    expect(chip("19:00")).toHaveAttribute("aria-pressed", "true");
+    expect(chip("18:00")).toHaveAttribute("aria-pressed", "false");
+  });
+
+  it("has one tab stop: the selected chip", () => {
+    render(<Rail />);
+    expect(chip("19:00")).toHaveAttribute("tabindex", "0");
+    expect(chip("18:00")).toHaveAttribute("tabindex", "-1");
+    expect(chip("19:30")).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("falls back to the first chip when nothing is selected", () => {
+    render(<Rail initial="" />);
+    expect(chip("18:00")).toHaveAttribute("tabindex", "0");
+  });
+
+  it("moves focus with the arrows but only picks on Enter", async () => {
+    const user = userEvent.setup();
+    render(<Rail />);
+    await user.tab();
+    expect(chip("19:00")).toHaveFocus();
+    await user.keyboard("{ArrowRight}");
+    expect(chip("19:30")).toHaveFocus();
+    expect(chip("19:00")).toHaveAttribute("aria-pressed", "true");
+    await user.keyboard("{Enter}");
+    expect(chip("19:30")).toHaveAttribute("aria-pressed", "true");
+    await user.keyboard("{ArrowLeft}{ArrowLeft}");
+    expect(chip("18:30")).toHaveFocus();
+  });
+
+  it("stops at the ends and jumps with Home and End", async () => {
+    const user = userEvent.setup();
+    render(<Rail initial="18:00" />);
+    await user.tab();
+    await user.keyboard("{ArrowLeft}");
+    expect(chip("18:00")).toHaveFocus();
+    await user.keyboard("{End}");
+    expect(chip("19:30")).toHaveFocus();
+    await user.keyboard("{ArrowRight}");
+    expect(chip("19:30")).toHaveFocus();
+    await user.keyboard("{Home}");
+    expect(chip("18:00")).toHaveFocus();
+  });
+
+  it("scrolls a keyboard-focused chip into view", async () => {
+    const user = userEvent.setup();
+    const scrollIntoView = vi.fn();
+    Object.defineProperty(HTMLElement.prototype, "scrollIntoView", { configurable: true, value: scrollIntoView });
+    render(<Rail />);
+    await user.tab();
+    await user.keyboard("{ArrowRight}");
+    expect(scrollIntoView).toHaveBeenCalledWith({ inline: "nearest", block: "nearest" });
+    Reflect.deleteProperty(HTMLElement.prototype, "scrollIntoView");
+  });
+
+  it("pads the scroller so a focus ring is not clipped, and keeps chips at their width", () => {
+    render(<Rail />);
+    const scroller = screen.getByRole("group", { name: "Start time" });
+    expect(scroller).toHaveClass("px-1.5", "py-1.5", "scroll-px-10");
+    expect(scroller.className).toContain("[&_[data-slot=time-slot]]:shrink-0");
+  });
+
+  it("skips unavailable chips", async () => {
+    const user = userEvent.setup();
+    render(<Rail unavailable={["19:30"]} />);
+    await user.tab();
+    await user.keyboard("{ArrowRight}");
+    expect(chip("19:00")).toHaveFocus();
+  });
+
+  it("keeps focus where it was while the rail is locked", async () => {
+    const user = userEvent.setup();
+    render(<Rail disabled />);
+    await user.tab();
+    expect(chip("19:00")).toHaveFocus();
+    await user.keyboard("{ArrowRight}");
+    expect(chip("19:30")).toHaveFocus();
+  });
+
+  it("the focused chip becomes the tab stop", async () => {
+    const user = userEvent.setup();
+    render(<Rail />);
+    await user.click(chip("18:30"));
+    expect(chip("18:30")).toHaveAttribute("tabindex", "0");
+  });
+
+  it("centres the selected chip on mount without animation, then glides on a pick", async () => {
+    const user = userEvent.setup();
+    const scrollTo = spyOnScrollTo();
+    render(<Rail />);
+    expect(scrollTo).toHaveBeenCalledTimes(1);
+    expect(scrollTo).toHaveBeenLastCalledWith(expect.objectContaining({ behavior: "auto" }));
+    await user.click(chip("19:30"));
+    expect(scrollTo).toHaveBeenCalledTimes(2);
+    expect(scrollTo).toHaveBeenLastCalledWith(expect.objectContaining({ behavior: "smooth" }));
+  });
+
+  it("does not glide under prefers-reduced-motion", async () => {
+    const user = userEvent.setup();
+    const scrollTo = spyOnScrollTo();
+    vi.stubGlobal("matchMedia", (query: string) => ({
+      matches: query.includes("reduce"),
+      media: query,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+    }));
+    render(<Rail />);
+    await user.click(chip("19:30"));
+    expect(scrollTo).toHaveBeenLastCalledWith(expect.objectContaining({ behavior: "auto" }));
+    vi.unstubAllGlobals();
+  });
+
+  it("renders no chevrons without labels, and none while nothing overflows", () => {
+    const { rerender } = render(<Rail />);
+    expect(screen.queryByRole("button", { name: /times/ })).toBeNull();
+    rerender(<Rail scrollLabels={{ previous: "Earlier times", next: "Later times" }} />);
+    expect(screen.queryByRole("button", { name: "Earlier times" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Later times" })).toBeNull();
+  });
+});