@bearmenu/ui 0.8.57 → 0.8.58

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

@@ -0,0 +1,222 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { ScrollFade } from "./scroll-fade";
+
+/**
+ * TimeSlotRail — one row of `TimeSlot size="touch"` chips that scrolls
+ * sideways instead of wrapping. Built for the pick bar's "accept at …" rail:
+ * 21 slots would wrap to three rows over the floor plan.
+ *
+ * The rail owns scrolling and keyboard; the chips stay the caller's. Children
+ * are whatever the caller renders (period groups, separators and all), and the
+ * rail finds the chips in the DOM by `data-slot="time-slot"`. It therefore
+ * never needs to know a chip's value, and holds no selection state: the chip
+ * that is `aria-pressed` is the selected one.
+ *
+ * Semantics: `role="group"` with a label, chips are `aria-pressed` buttons.
+ * Not a radiogroup: radios select on arrow, and here a selection rewrites the
+ * plan and may start a write, so arrows move FOCUS only and Enter / Space
+ * picks. One tab stop (roving tabindex): the pressed chip, else the first.
+ *
+ * - On mount the selected chip is centred without animation; afterwards it
+ *   scrolls smoothly, or instantly under `prefers-reduced-motion`.
+ * - Edge chevrons show on fine pointers only, and only while that edge has
+ *   more to reveal. Labels come in via `scrollLabels`; without it no chevrons.
+ * - Every string is a prop: the package has none of its own.
+ */
+
+const CHIP = '[data-slot="time-slot"]';
+
+export type TimeSlotRailScrollLabels = {
+  /** "Earlier times" — the chevron at the start edge. */
+  previous: string;
+  /** "Later times" — the chevron at the end edge. */
+  next: string;
+};
+
+export type TimeSlotRailProps = {
+  /** Names the group for assistive tech — "Start time on Wed 18 Nov". */
+  "aria-label": string;
+  /** Labels for the fine-pointer chevrons. Omit to render none. */
+  scrollLabels?: TimeSlotRailScrollLabels;
+  /** `TimeSlot`s, optionally wrapped in period groups and separators. */
+  children: React.ReactNode;
+  className?: string;
+};
+
+function chipsOf(scroller: HTMLElement): HTMLButtonElement[] {
+  return Array.from(scroller.querySelectorAll<HTMLButtonElement>(CHIP)).filter((chip) => !chip.disabled);
+}
+
+function prefersReducedMotion(): boolean {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+
+function centreChip(scroller: HTMLElement, chip: HTMLElement, behavior: ScrollBehavior) {
+  if (typeof scroller.scrollTo !== "function") return;
+  const s = scroller.getBoundingClientRect();
+  const c = chip.getBoundingClientRect();
+  const left = scroller.scrollLeft + (c.left - s.left) - (scroller.clientWidth - c.width) / 2;
+  scroller.scrollTo({ left: Math.max(0, left), behavior });
+}
+
+export function TimeSlotRail({
+  "aria-label": ariaLabel,
+  scrollLabels,
+  children,
+  className,
+}: TimeSlotRailProps) {
+  const scrollerRef = React.useRef<HTMLDivElement>(null);
+  const centredRef = React.useRef<Element | null>(null);
+  const [canScrollBack, setCanScrollBack] = React.useState(false);
+  const [canScrollForward, setCanScrollForward] = React.useState(false);
+
+  // One tab stop: the pressed chip, else the first. Runs after every render
+  // and on DOM changes, because the chips are the caller's and re-render alone.
+  const syncTabStops = React.useCallback(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const chips = chipsOf(scroller);
+    const stop = chips.find((chip) => chip.getAttribute("aria-pressed") === "true") ?? chips[0];
+    for (const chip of chips) chip.tabIndex = chip === stop ? 0 : -1;
+  }, []);
+
+  const syncEdges = React.useCallback(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const overflow = el.scrollWidth - el.clientWidth;
+    setCanScrollBack(el.scrollLeft > 1);
+    setCanScrollForward(overflow > 1 && el.scrollLeft < overflow - 1);
+  }, []);
+
+  React.useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    syncTabStops();
+    syncEdges();
+    scroller.addEventListener("scroll", syncEdges, { passive: true });
+    const resize = new ResizeObserver(syncEdges);
+    resize.observe(scroller);
+    const mutation = new MutationObserver(() => {
+      syncTabStops();
+      syncEdges();
+    });
+    mutation.observe(scroller, { childList: true, subtree: true, attributes: true, attributeFilter: ["aria-pressed", "disabled"] });
+    return () => {
+      scroller.removeEventListener("scroll", syncEdges);
+      resize.disconnect();
+      mutation.disconnect();
+    };
+  }, [syncTabStops, syncEdges]);
+
+  // Bring a newly selected chip to the middle. The first time is the mount:
+  // no animation. Later picks glide, unless the user asked for less motion.
+  React.useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const selected = scroller.querySelector(`${CHIP}[aria-pressed="true"]`);
+    if (!selected || selected === centredRef.current) return;
+    const first = centredRef.current === null;
+    centredRef.current = selected;
+    if (!(selected instanceof HTMLElement)) return;
+    centreChip(scroller, selected, first || prefersReducedMotion() ? "auto" : "smooth");
+  });
+
+  const onKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const scroller = scrollerRef.current;
+    const target: EventTarget = event.target;
+    if (!scroller || !(target instanceof HTMLButtonElement) || !target.matches(CHIP)) return;
+    const chips = chipsOf(scroller);
+    const index = chips.indexOf(target);
+    if (index === -1) return;
+    const rtl = getComputedStyle(scroller).direction === "rtl";
+    let next: number;
+    switch (event.key) {
+      case "ArrowRight":
+        next = index + (rtl ? -1 : 1);
+        break;
+      case "ArrowLeft":
+        next = index + (rtl ? 1 : -1);
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = chips.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const chip = chips[Math.min(Math.max(next, 0), chips.length - 1)];
+    if (!chip) return;
+    for (const other of chips) other.tabIndex = other === chip ? 0 : -1;
+    chip.focus();
+    // Focus alone may leave the chip under the edge fade or a chevron.
+    if (typeof chip.scrollIntoView === "function") chip.scrollIntoView({ inline: "nearest", block: "nearest" });
+  };
+
+  // Moving focus by mouse or tap also moves the tab stop, so Shift+Tab out
+  // and back in lands where the user was.
+  const onFocus = (event: React.FocusEvent<HTMLDivElement>) => {
+    const scroller = scrollerRef.current;
+    const target: EventTarget = event.target;
+    if (!scroller || !(target instanceof HTMLButtonElement) || !target.matches(CHIP)) return;
+    for (const chip of chipsOf(scroller)) chip.tabIndex = chip === target ? 0 : -1;
+  };
+
+  const page = (direction: 1 | -1) => {
+    const el = scrollerRef.current;
+    if (!el || typeof el.scrollBy !== "function") return;
+    el.scrollBy({ left: direction * el.clientWidth * 0.8, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+  };
+
+  return (
+    <div data-slot="time-slot-rail" className="relative">
+      <ScrollFade
+        ref={scrollerRef}
+        orientation="horizontal"
+        fadeColor="background"
+        size="sm"
+        role="group"
+        aria-label={ariaLabel}
+        onKeyDown={onKeyDown}
+        onFocus={onFocus}
+        className={className}
+        scrollClassName="flex snap-x snap-proximity scroll-px-10 gap-1.5 px-1.5 py-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_[data-slot=time-slot]]:shrink-0"
+      >
+        {children}
+      </ScrollFade>
+      {scrollLabels && canScrollBack && (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          tabIndex={-1}
+          aria-label={scrollLabels.previous}
+          onClick={() => page(-1)}
+          className={cn("absolute top-1/2 left-0 z-20 hidden -translate-y-1/2 bg-background/90 [@media(pointer:fine)]:inline-flex")}
+        >
+          <ChevronLeft aria-hidden />
+        </Button>
+      )}
+      {scrollLabels && canScrollForward && (
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon-sm"
+          tabIndex={-1}
+          aria-label={scrollLabels.next}
+          onClick={() => page(1)}
+          className={cn("absolute top-1/2 right-0 z-20 hidden -translate-y-1/2 bg-background/90 [@media(pointer:fine)]:inline-flex")}
+        >
+          <ChevronRight aria-hidden />
+        </Button>
+      )}
+    </div>
+  );
+}

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

@@ -34,6 +34,43 @@ export const Selected: Story = { args: { time: "19:30", meta: "Popular", selecte
 export const SelectedPlain: Story = { args: { time: "20:30", selected: true } };
 export const Unavailable: Story = { args: { time: "18:00", unavailable: true } };
 
+const touchArgs = { size: "touch", className: "w-[84px]" } as const;
+
+/** Touch size: 44px floor, 16px time, 12px meta. */
+export const TouchPlain: Story = { args: { ...touchArgs, time: "19:30" } };
+export const TouchFits: Story = { args: { ...touchArgs, time: "19:30", meta: "R1+R2", fit: "fits" } };
+export const TouchTight: Story = { args: { ...touchArgs, time: "20:00", meta: "Join R3+R4", fit: "tight" } };
+export const TouchNone: Story = { args: { ...touchArgs, time: "21:00", meta: "Full", fit: "none" } };
+export const TouchSelected: Story = { args: { ...touchArgs, time: "19:30", meta: "R1+R2", fit: "fits", selected: true } };
+export const TouchSelectedNone: Story = { args: { ...touchArgs, time: "21:00", meta: "Full", fit: "none", selected: true } };
+/** Locked, not taken: dimmed with no strike-through. */
+export const TouchDisabled: Story = { args: { ...touchArgs, time: "19:30", meta: "R1+R2", fit: "fits", disabled: true } };
+export const Disabled: Story = { args: { time: "19:30", meta: "Popular", disabled: true } };
+
+/** Every touch state side by side, light and dark. */
+export const TouchStates: StoryObj<typeof TimeSlot> = {
+  render: () => {
+    const states = (
+      <div className="flex flex-wrap gap-1.5">
+        <TimeSlot {...touchArgs} time="19:30" meta="R1+R2" fit="fits" />
+        <TimeSlot {...touchArgs} time="20:00" meta="Join R3+R4" fit="tight" />
+        <TimeSlot {...touchArgs} time="21:00" meta="Full" fit="none" />
+        <TimeSlot {...touchArgs} time="19:30" meta="R1+R2" fit="fits" selected />
+        <TimeSlot {...touchArgs} time="20:00" meta="Join R3+R4" fit="tight" selected />
+        <TimeSlot {...touchArgs} time="21:00" meta="Full" fit="none" selected />
+        <TimeSlot {...touchArgs} time="19:30" meta="R1+R2" fit="fits" disabled />
+        <TimeSlot {...touchArgs} time="18:00" meta="R2" fit="fits" unavailable />
+      </div>
+    );
+    return (
+      <div className="flex w-[640px] flex-col gap-4">
+        <div className="rounded-xl bg-background p-3 text-foreground">{states}</div>
+        <div className="dark rounded-xl bg-background p-3 text-foreground">{states}</div>
+      </div>
+    );
+  },
+};
+
 function groupsFor(selected: string, onSelect: (time: string) => void): TimeSlotGroup[] {
   const slot = (time: string, meta?: string, tone?: "waitlist") => ({
     key: time,

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

@@ -0,0 +1,113 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { TimeSlot } from "./time-slot";
+
+describe("TimeSlot size=touch", () => {
+  it("clears the 44px floor and the 12px type floor", () => {
+    render(<TimeSlot size="touch" time="19:30" meta="R1+R2" />);
+    const slot = screen.getByRole("button");
+    expect(slot).toHaveClass("min-h-11", "rounded-xl");
+    expect(screen.getByText("R1+R2").parentElement).toHaveClass("text-xs");
+  });
+
+  it("selects with the accent fill, not the gradient, so dark mode keeps its contrast", () => {
+    render(<TimeSlot size="touch" time="19:30" meta="R1" fit="fits" selected />);
+    const slot = screen.getByRole("button");
+    expect(slot).toHaveAttribute("aria-pressed", "true");
+    expect(slot).toHaveClass("border-accent", "bg-accent", "text-accent-foreground");
+    expect(slot.className).not.toContain("gradient-primary");
+    expect(slot.querySelector('[data-slot="time-slot-fit-dot"]')).toHaveClass("bg-accent-foreground");
+  });
+
+  it("applies the caller's className, which wins over the default width", () => {
+    render(<TimeSlot size="touch" time="19:30" className="w-[84px] shrink-0" />);
+    const slot = screen.getByRole("button");
+    expect(slot).toHaveClass("w-[84px]", "shrink-0");
+    expect(slot).not.toHaveClass("w-full");
+  });
+});
+
+describe("TimeSlot fit", () => {
+  it("fits: a success dot and success ink", () => {
+    render(<TimeSlot size="touch" time="19:30" meta="R1+R2" fit="fits" />);
+    expect(screen.getByRole("button")).toHaveAttribute("data-fit", "fits");
+    expect(screen.getByText("R1+R2").parentElement).toHaveClass("text-success-ink");
+    expect(document.querySelector('[data-slot="time-slot-fit-dot"]')).toHaveClass("bg-success");
+  });
+
+  it("tight: a warning dot and warning ink", () => {
+    render(<TimeSlot size="touch" time="20:00" meta="Join R3+R4" fit="tight" />);
+    expect(screen.getByText("Join R3+R4").parentElement).toHaveClass("text-warning-ink");
+    expect(document.querySelector('[data-slot="time-slot-fit-dot"]')).toHaveClass("bg-warning-deep");
+  });
+
+  it("none: dashed and muted, with no dot, no strike-through and no fade, and still pickable", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(<TimeSlot size="touch" time="21:00" meta="Full" fit="none" onSelect={onSelect} />);
+    const slot = screen.getByRole("button");
+    expect(slot).toHaveClass("border-dashed", "bg-transparent", "text-muted-foreground");
+    expect(slot.className).not.toContain("opacity-");
+    expect(screen.getByText("21:00")).not.toHaveClass("line-through");
+    expect(document.querySelector('[data-slot="time-slot-fit-dot"]')).toBeNull();
+    await user.click(slot);
+    expect(onSelect).toHaveBeenCalledOnce();
+  });
+
+  it("selected none is solid, not dashed", () => {
+    render(<TimeSlot size="touch" time="21:00" meta="Full" fit="none" selected />);
+    expect(screen.getByRole("button")).not.toHaveClass("border-dashed");
+  });
+
+  it("does not type-check a fit without a meta", () => {
+    // @ts-expect-error fit requires meta: the dot is aria-hidden, so the meta is what says the fit
+    const slot = <TimeSlot size="touch" time="19:30" fit="fits" />;
+    expect(slot).toBeTruthy();
+  });
+
+  it("wraps a long meta on two lines instead of truncating it", () => {
+    render(<TimeSlot size="touch" time="20:00" meta="Join R3+R4+R5" fit="tight" />);
+    expect(screen.getByText("Join R3+R4+R5")).toHaveClass("line-clamp-2", "break-words");
+    expect(screen.getByText("Join R3+R4+R5")).not.toHaveClass("truncate");
+  });
+
+  it("is ignored at the default size", () => {
+    render(<TimeSlot time="19:30" meta="Popular" fit="fits" />);
+    const slot = screen.getByRole("button");
+    expect(slot).not.toHaveAttribute("data-fit");
+    expect(document.querySelector('[data-slot="time-slot-fit-dot"]')).toBeNull();
+    expect(screen.getByText("Popular")).toHaveClass("text-accent");
+  });
+});
+
+describe("TimeSlot disabled", () => {
+  it("locks without striking through, and does not report picks", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(<TimeSlot time="19:30" disabled onSelect={onSelect} />);
+    const slot = screen.getByRole("button");
+    expect(slot).toHaveAttribute("aria-disabled", "true");
+    expect(slot).toHaveClass("opacity-50", "cursor-not-allowed");
+    expect(screen.getByText("19:30")).not.toHaveClass("line-through");
+    await user.click(slot);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("stays focusable, unlike unavailable", () => {
+    render(
+      <>
+        <TimeSlot time="19:30" disabled />
+        <TimeSlot time="18:00" unavailable />
+      </>
+    );
+    expect(screen.getByRole("button", { name: "19:30" })).not.toBeDisabled();
+    expect(screen.getByRole("button", { name: "18:00" })).toBeDisabled();
+  });
+
+  it("unavailable still strikes the time through and fades", () => {
+    render(<TimeSlot time="18:00" unavailable disabled />);
+    expect(screen.getByText("18:00")).toHaveClass("line-through");
+    expect(screen.getByRole("button")).toHaveClass("opacity-[0.32]");
+  });
+});

package/src/components/time-slot.tsx

@@ -21,62 +21,158 @@ import { Skeleton } from "./skeleton";
  *     7px gaps.
  *
  * A slot is a button with `aria-pressed`: one of many times, picked once.
+ *
+ * ── size="touch" ──────────────────────────────────────────────────────────
+ * The default slot is 35px tall with a 9.5px meta line: under both the 44px
+ * touch floor and the 12px type floor, so a staff tool on a phone cannot use
+ * it. `touch` is `min-h-11`, 16px mono time, 12px meta, 12px radius. Selected
+ * is a FILL of `--accent` with `accent-foreground` type (the reasoning is
+ * DayRailChip's: the gradient's primary-foreground flips dark-on-gradient in
+ * dark mode), and the meta stays at full opacity.
+ *
+ * `fit` (touch only) says how well the slot suits the party, in words AND a
+ * dot, so nothing hangs on colour: `fits` (success), `tight` (warning, a join
+ * or a squeeze), `none` (dashed, muted — still tappable, the manager can
+ * override, so no strike-through and no fading).
+ *
+ * `disabled` means LOCKED, not taken: half opacity, not-allowed, no strike.
+ * It uses `aria-disabled` rather than the `disabled` attribute so a locked
+ * rail keeps focus where it was. `unavailable` is still the taken/past state.
  */
 
 export type TimeSlotTone = "default" | "waitlist";
+export type TimeSlotSize = "default" | "touch";
+export type TimeSlotFit = "fits" | "tight" | "none";
 
-export type TimeSlotProps = {
+/**
+ * `fit` needs a `meta`: the meta text says the fit in words, and the dot is
+ * aria-hidden, so a fit without one would hang on colour alone.
+ */
+export type TimeSlotFitProps =
+  | {
+      /** "Popular", "2 left", "Waitlist" — already localised. */
+      meta?: string;
+      fit?: undefined;
+    }
+  | {
+      /** Says the fit in words — "R1+R2", "Join R3+R4", "Full". */
+      meta: string;
+      /** Touch only. How well the slot suits the party. Requires `meta`. */
+      fit: TimeSlotFit;
+    };
+
+export type TimeSlotProps = TimeSlotFitProps & {
   /** The time as displayed, already formatted in the venue's timezone — "19:30". */
   time: string;
-  /** "Popular", "2 left", "Waitlist" — already localised. */
-  meta?: string;
   /** `waitlist` renders the meta muted: the slot books onto the list, not a table. */
   tone?: TimeSlotTone;
   selected?: boolean;
   /** Taken or past: faded and struck through, not clickable. */
   unavailable?: boolean;
+  /** `default` is the booking flow's 35px slot; `touch` meets the 44px / 12px floors. */
+  size?: TimeSlotSize;
+  /** Locked, not taken: dimmed, not-allowed, no strike-through, still focusable. */
+  disabled?: boolean;
   onSelect?: () => void;
-  /** Full accessible name, when the visible text is not enough ("19:30, popular"). */
+  /**
+   * Full accessible name, when the visible text is not enough ("19:30, popular").
+   * It REPLACES the visible text, so with `fit` it must say the fit in words
+   * ("19:30, fits at R1 and R2"): the dot is aria-hidden.
+   */
   "aria-label"?: string;
   className?: string;
 };
 
+const FIT_DOT = {
+  fits: "bg-success",
+  tight: "bg-warning-deep",
+} as const;
+
+const FIT_META = {
+  fits: "text-success-ink",
+  tight: "text-warning-ink",
+  none: "text-muted-foreground",
+} as const;
+
 export function TimeSlot({
   time,
   meta,
   tone = "default",
   selected,
   unavailable,
+  size = "default",
+  fit,
+  disabled,
   onSelect,
   "aria-label": ariaLabel,
   className,
 }: TimeSlotProps) {
+  const touch = size === "touch";
+  // `fit` is a touch-only vocabulary; the default slot ignores it.
+  const activeFit = touch ? fit : undefined;
+  const locked = disabled && !unavailable;
+  const interactive = !unavailable && !locked;
+  const dashed = activeFit === "none" && !selected;
+
+  const fitDot =
+    activeFit && activeFit !== "none" ? (
+      <span
+        aria-hidden
+        data-slot="time-slot-fit-dot"
+        className={cn(
+          "size-1.5 shrink-0 rounded-full",
+          selected ? "bg-accent-foreground" : FIT_DOT[activeFit]
+        )}
+      />
+    ) : null;
+
   return (
     <button
       type="button"
       data-slot="time-slot"
+      data-size={size}
+      data-fit={activeFit}
       aria-pressed={selected ? true : false}
       aria-label={ariaLabel}
+      aria-disabled={locked ? true : undefined}
       disabled={unavailable}
-      onClick={onSelect}
+      onClick={locked ? undefined : onSelect}
       className={cn(
+        "flex w-full flex-col items-center border text-center",
         // Content sits at the top: a slot without a meta line in a row with
         // one is stretched by the grid, and the time must not drop to the middle.
-        "flex w-full cursor-pointer flex-col items-center justify-start rounded-[11px] border px-1 py-2 text-center leading-[1.2]",
+        touch
+          ? "min-h-11 justify-center gap-1 rounded-xl px-2 py-2 leading-[1.2]"
+          : "justify-start rounded-[11px] px-1 py-2 leading-[1.2]",
+        interactive ? "cursor-pointer" : "cursor-not-allowed",
         // A press state, not just hover: this is the most-tapped control in
         // the flow and the primary device has no hover at all, so without it
         // a tap gives nothing back until the fill repaints.
-        "transition-[border-color,filter,transform] duration-150 not-disabled:active:scale-[0.98] motion-reduce:transition-none",
+        touch
+          ? "transition-[background-color,border-color,color,transform] duration-150 motion-reduce:transition-none"
+          : "transition-[border-color,filter,transform] duration-150 motion-reduce:transition-none",
+        interactive && "active:scale-[0.98]",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
         selected
-          ? "border-transparent bg-[image:var(--gradient-primary)] text-primary-foreground hover:brightness-[0.94]"
-          : "border-border bg-card text-foreground hover:border-accent/50",
-        unavailable && "cursor-not-allowed opacity-[0.32] hover:border-border"
+          ? touch
+            ? "border-accent bg-accent text-accent-foreground"
+            : cn(
+                "border-transparent bg-[image:var(--gradient-primary)] text-primary-foreground",
+                interactive && "hover:brightness-[0.94]"
+              )
+          : dashed
+            ? "border-dashed border-border bg-transparent text-muted-foreground"
+            : "border-border bg-card text-foreground",
+        !selected && interactive && "hover:border-accent/50",
+        unavailable && "opacity-[0.32]",
+        locked && "opacity-50",
+        className
       )}
     >
       <b
         className={cn(
-          "block font-mono text-[14.5px] leading-none font-bold tabular-nums",
+          "block font-mono leading-none font-bold tabular-nums",
+          touch ? "text-base" : "text-[14.5px]",
           unavailable && "line-through"
         )}
       >
@@ -85,15 +181,22 @@ export function TimeSlot({
       {meta && (
         <span
           className={cn(
-            "mt-[3px] block text-[9.5px] leading-[1.2]",
+            touch
+              ? "flex max-w-full items-center justify-center gap-1 text-xs leading-4"
+              : "mt-[3px] block text-[9.5px] leading-[1.2]",
             selected
-              ? "text-primary-foreground/80"
-              : tone === "waitlist"
-                ? "text-muted-foreground"
-                : "text-accent"
+              ? touch
+                ? "text-accent-foreground"
+                : "text-primary-foreground/80"
+              : activeFit
+                ? FIT_META[activeFit]
+                : tone === "waitlist"
+                  ? "text-muted-foreground"
+                  : "text-accent"
           )}
         >
-          {meta}
+          {fitDot}
+          {touch ? <span className="line-clamp-2 break-words">{meta}</span> : meta}
         </span>
       )}
     </button>