@bearmenu/ui 0.8.56 → 0.8.58

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.56",
-  "packageManager": "pnpm@10.28.1",
-  "description": "BearMenu design system \u2014 shared UI tokens, primitives, and components",
+  "version": "0.8.58",
+  "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/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/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-1.5">
+            {chips(lunch)}
+          </div>
+          <Separator orientation="vertical" className="mx-1 h-8 self-center" />
+          <div role="group" aria-label="Dinner" className="flex gap-1.5">
+            {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-1.5 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>
+  ),
+};