@bearmenu/ui 0.8.12 → 0.8.13

package/dist/{chunk-24RFI4RQ.js → chunk-3NMG3KNA.js}

@@ -72,7 +72,7 @@ function KitchenRow({
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 lg:w-[226px] lg:flex-none", children: [
-      /* @__PURE__ */ jsx("span", { className: "truncate text-[14.5px] font-bold tracking-[-0.01em] lg:text-[15.5px]", children: place.name }),
+      /* @__PURE__ */ jsx("span", { className: "truncate text-[14.5px] font-bold tracking-[-0.01em] lg:line-clamp-2 lg:whitespace-normal lg:text-[15.5px] lg:leading-tight", children: place.name }),
       /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 truncate text-xs text-muted-foreground", children: [
         place.rating && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Star, { className: "h-[11px] w-[11px] shrink-0", "aria-hidden": true }),

package/dist/{chunk-DTXNDLSE.js → chunk-FKNBZF5T.js}

@@ -105,11 +105,26 @@ var SnapRail = React.forwardRef(
   }
 );
 SnapRail.displayName = "SnapRail";
+var MAX_DOTS = 12;
 function SnapRailDots({
   count,
   active,
   className
 }) {
+  if (count > MAX_DOTS) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-hidden": true,
+        className: cn("flex justify-center text-[11px] tabular-nums text-muted-foreground", className),
+        children: [
+          active + 1,
+          " / ",
+          count
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("flex justify-center gap-1.5", className), children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(
     "span",
     {

package/dist/{chunk-7A42J73Q.js → chunk-P7XTW2CG.js}

@@ -1,4 +1,4 @@
-import { SnapRail, SnapRailDots } from './chunk-DTXNDLSE.js';
+import { SnapRail, SnapRailDots } from './chunk-FKNBZF5T.js';
 import { PhotoGround } from './chunk-CNJQUHCU.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import * as React from 'react';

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" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "success" | "warning" | null | undefined;
+    variant?: "default" | "destructive" | "warning" | "success" | "outline" | "secondary" | "glass" | "overlay" | "brown" | 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?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "antagonist" | null | undefined;
+    variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "antagonist" | 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/card.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const cardVariants: (props?: ({
-    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "muted" | "outline" | "glass" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "muted" | "outline" | "glass" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/command.d.ts

@@ -4,11 +4,11 @@ import { DialogProps } from '@radix-ui/react-dialog';
 
 declare const Command: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -28,61 +28,61 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 declare const CommandList: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & 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>> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
     progress?: number;
     label?: string;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
     alwaysRender?: boolean;
 } & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/concept-compare-rail.js

@@ -1,5 +1,5 @@
-export { ConceptCompareRail } from '../chunk-7A42J73Q.js';
-import '../chunk-DTXNDLSE.js';
+export { ConceptCompareRail } from '../chunk-P7XTW2CG.js';
+import '../chunk-FKNBZF5T.js';
 import '../chunk-CNJQUHCU.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/concept-compare.js

@@ -1,6 +1,6 @@
 import { Separator } from '../chunk-WSRWFA6K.js';
-import { ConceptCompareRail } from '../chunk-7A42J73Q.js';
-import '../chunk-DTXNDLSE.js';
+import { ConceptCompareRail } from '../chunk-P7XTW2CG.js';
+import '../chunk-FKNBZF5T.js';
 import { PhotoGround, PHOTO_GROUND } from '../chunk-CNJQUHCU.js';
 import { Skeleton } from '../chunk-QXHMPJ35.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/date-input.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & {
+declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type"> & {
     /** Native input type. Defaults to "date". */
     type?: "date" | "datetime-local" | "time" | "month" | "week";
     size?: "sm" | "default" | "lg";

package/dist/components/item.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const itemVariants: (props?: ({
-    variant?: "default" | "outline" | "muted" | null | undefined;
+    variant?: "default" | "muted" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Item: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "default" | "outline" | "muted" | null | undefined;
+    variant?: "default" | "muted" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {

package/dist/components/menu-family-block.js

@@ -1,4 +1,4 @@
-import { MenuKitchenList } from '../chunk-24RFI4RQ.js';
+import { MenuKitchenList } from '../chunk-3NMG3KNA.js';
 import { HueChip } from '../chunk-CLLY6XB3.js';
 import { Separator } from '../chunk-WSRWFA6K.js';
 import { PhotoGround, PHOTO_GROUND } from '../chunk-CNJQUHCU.js';

package/dist/components/menu-index-list.d.ts

@@ -9,19 +9,19 @@ import './place-types.js';
  * ## This block is why the page can afford to be progressive
  *
  * It carries a crawlable link to EVERY destination the city has — all
- * thirty-eight cuisines, not the eight the page draws in full above. That
- * makes it the page's entire link-equity job, which in turn means the rich
- * blocks are free to load eight at a time behind a "show more": nothing a
- * crawler needs is hidden behind that control, because it is all here.
+ * thirty-eight cuisines, in the markup at every width. That makes it the
+ * page's entire link-equity job, which in turn means the rich cards above
+ * are free to be a swipe rail on a phone: nothing a crawler needs waits on a
+ * swipe, because it is all here.
  *
  * The phone's own "show all" is CSS, not markup: every row is in the DOM and
  * the ones past `collapsedCount` are hidden below `lg` until the button is
  * pressed. A list that mounted its tail on tap would have taken twenty-six
  * links out of the page for the crawler that never taps.
  *
- * Get this backwards — put the whole set behind the disclosure and only eight
- * links in the markup — and the page silently stops linking to thirty pages
- * it is supposed to be the index for.
+ * Get this backwards — mount the rows behind the expander on tap — and the
+ * page silently stops linking to twenty-six pages it is supposed to be the
+ * index for.
  *
  * ## Ordered by count, and the counts overlap
  *

package/dist/components/menu-kitchen-list.js

@@ -1,4 +1,4 @@
-export { MenuKitchenList, MenuKitchenListSkeleton } from '../chunk-24RFI4RQ.js';
+export { MenuKitchenList, MenuKitchenListSkeleton } from '../chunk-3NMG3KNA.js';
 import '../chunk-WSRWFA6K.js';
 import '../chunk-QXHMPJ35.js';
 import '../chunk-FEK5XGZW.js';

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

@@ -63,11 +63,6 @@ declare const SnapRail: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      */
     onActiveChange?: (index: number) => void;
 } & React.RefAttributes<HTMLDivElement>>;
-/**
- * The page dots on their own, for a caller that tracks the rail through
- * `onActiveChange` and wants the dots somewhere other than directly under it —
- * inside a foot band, say. Decorative, as on the rail: the rail is the control.
- */
 declare function SnapRailDots({ count, active, className, }: {
     count: number;
     active: number;

package/dist/components/snap-rail.js

@@ -1,3 +1,3 @@
-export { SnapRail, SnapRailDots } from '../chunk-DTXNDLSE.js';
+export { SnapRail, SnapRailDots } from '../chunk-FKNBZF5T.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

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?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "default" | "destructive" | "inherit" | "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?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
+    tone?: "default" | "destructive" | "inherit" | "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" | "warning" | "success" | "primary" | "outline" | "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" | "warning" | "success" | "primary" | "outline" | "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?: "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;
+    variant?: "small" | "display" | "h1" | "h2" | "h3" | "h4" | "body-lg" | "body" | "body-sm" | "caption" | "label" | "overline" | null | undefined;
+    color?: "default" | "destructive" | "inherit" | "muted" | "primary" | "primary-foreground" | null | undefined;
+    weight?: "bold" | "normal" | "medium" | "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.12",
+  "version": "0.8.13",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/menu-index-list.tsx

@@ -14,19 +14,19 @@ import type { MenuIndexEntry, MenuLinkComponent, MenuLinkProps } from "./menu-ty
  * ## This block is why the page can afford to be progressive
  *
  * It carries a crawlable link to EVERY destination the city has — all
- * thirty-eight cuisines, not the eight the page draws in full above. That
- * makes it the page's entire link-equity job, which in turn means the rich
- * blocks are free to load eight at a time behind a "show more": nothing a
- * crawler needs is hidden behind that control, because it is all here.
+ * thirty-eight cuisines, in the markup at every width. That makes it the
+ * page's entire link-equity job, which in turn means the rich cards above
+ * are free to be a swipe rail on a phone: nothing a crawler needs waits on a
+ * swipe, because it is all here.
  *
  * The phone's own "show all" is CSS, not markup: every row is in the DOM and
  * the ones past `collapsedCount` are hidden below `lg` until the button is
  * pressed. A list that mounted its tail on tap would have taken twenty-six
  * links out of the page for the crawler that never taps.
  *
- * Get this backwards — put the whole set behind the disclosure and only eight
- * links in the markup — and the page silently stops linking to thirty pages
- * it is supposed to be the index for.
+ * Get this backwards — mount the rows behind the expander on tap — and the
+ * page silently stops linking to twenty-six pages it is supposed to be the
+ * index for.
  *
  * ## Ordered by count, and the counts overlap
  *

package/src/components/menu-kitchen-list.tsx

@@ -150,7 +150,10 @@ function KitchenRow({
       </span>
 
       <div className="flex min-w-0 flex-1 flex-col gap-0.5 lg:w-[226px] lg:flex-none">
-        <span className="truncate text-[14.5px] font-bold tracking-[-0.01em] lg:text-[15.5px]">
+        {/* One line with an ellipsis on a phone, where the row is the whole
+            width; two lines from `lg`, where the column is 226px and
+            "ADRIATICA GELATERIA ITALIANA" would otherwise lose its half. */}
+        <span className="truncate text-[14.5px] font-bold tracking-[-0.01em] lg:line-clamp-2 lg:whitespace-normal lg:text-[15.5px] lg:leading-tight">
           {place.name}
         </span>
         <span className="flex items-center gap-1 truncate text-xs text-muted-foreground">

package/src/components/snap-rail.tsx

@@ -166,6 +166,14 @@ SnapRail.displayName = "SnapRail";
  * `onActiveChange` and wants the dots somewhere other than directly under it —
  * inside a foot band, say. Decorative, as on the rail: the rail is the control.
  */
+/**
+ * Past this many pages the dots stop being a picture of the rail — twelve
+ * 6px dots with their gaps already run 138px, and a cuisines index has
+ * thirty-six — so the row becomes a counter, "7 / 36", which says the same
+ * two things (where, and how far) at any length.
+ */
+const MAX_DOTS = 12;
+
 export function SnapRailDots({
   count,
   active,
@@ -175,6 +183,17 @@ export function SnapRailDots({
   active: number;
   className?: string;
 }) {
+  if (count > MAX_DOTS) {
+    return (
+      <div
+        aria-hidden
+        className={cn("flex justify-center text-[11px] tabular-nums text-muted-foreground", className)}
+      >
+        {active + 1} / {count}
+      </div>
+    );
+  }
+
   return (
     <div aria-hidden className={cn("flex justify-center gap-1.5", className)}>
       {Array.from({ length: count }, (_, index) => (