@bearmenu/ui 0.8.20 → 0.8.21

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" | "warning" | "success" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "onPrimary" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "warning" | "success" | "onPrimary" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {

package/dist/components/button.d.ts

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

package/dist/components/card.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const cardVariants: (props?: ({
-    variant?: "muted" | "outline" | "glass" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "outline" | "glass" | "muted" | "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?: "muted" | "outline" | "glass" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "outline" | "glass" | "muted" | "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>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     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;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+}, "key" | "asChild" | 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>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     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>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const CommandLoading: React.ForwardRefExoticComponent<Omit<{
     children?: React.ReactNode;
-} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     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>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "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>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
     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>, keyof React.HTMLAttributes<HTMLDivElement> | "key"> & {
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "disabled" | "value"> & {
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

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" | "muted" | "outline" | null | undefined;
+    variant?: "default" | "outline" | "muted" | 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" | "muted" | "outline" | null | undefined;
+    variant?: "default" | "outline" | "muted" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {

package/dist/components/menu-filter-chips.d.ts

@@ -39,22 +39,25 @@ type MenuFilterChipsProps = {
     onToggle: (key: string) => void;
     /** The unit and the current total, composed by the caller, e.g. "KITCHENS · 247". */
     unitLabel?: string;
-    /** Opens the full filter sheet. Omit for a row where every facet is a chip. */
+    /** Opens the full filter panel. Omit for a row where every facet is a chip. */
     onMore?: () => void;
     moreLabel?: string;
     /**
-     * A glyph for the phone's icon-only "more filters" button.
+     * The glyph on the "more filters" pill.
      *
-     * The label is the widest fixed element in the row — "More filters" is ~80px
-     * of a 358px viewport, and it is the one thing that never scrolls, so it eats
-     * the chips' runway on every phone. Given an icon, the button collapses to a
-     * square below `lg` and keeps `moreLabel` as its accessible name.
+     * The pill is a chip like the others in the row — same border, same height —
+     * so the way out of the row reads as part of the row, not as a link beside
+     * it. The label is the widest fixed element in the row ("More filters" is
+     * ~80px of a 358px viewport) and the one thing that never scrolls, so below
+     * `lg` the pill collapses to a square carrying only the glyph, with
+     * `moreLabel` as its accessible name; from `lg` it shows both.
      *
      * A node rather than a name because the app owns its iconography, and this
      * one is animated on press — the DS neither knows the glyph nor drives it.
+     * Without a glyph the pill shows the label at every width.
      */
     moreIcon?: React.ReactNode;
-    /** Press handler for the icon button, e.g. to replay the glyph's animation. */
+    /** Press handler for the pill, e.g. to replay the glyph's animation. */
     onMorePointerDown?: () => void;
     /** Locale-aware integer formatter for the counts. Defaults to `String`. */
     formatCount?: (value: number) => string;

package/dist/components/menu-filter-chips.js

@@ -3,7 +3,7 @@ import { Skeleton } from '../chunk-XBBEX4SF.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { X } from 'lucide-react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 function MenuFilterChips({
   chips,
@@ -39,36 +39,28 @@ function MenuFilterChips({
         )) })
       }
     ),
-    onMore && /* @__PURE__ */ jsxs(Fragment, { children: [
-      moreIcon && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onMore,
-          onPointerDown: onMorePointerDown,
-          "aria-label": moreLabel,
-          "aria-haspopup": "dialog",
-          className: cn(
-            "inline-flex shrink-0 items-center justify-center rounded-full border border-border text-accent transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:hidden",
-            // The one control that never scrolls keeps the chips' height.
-            chipSize === "lg" ? "size-11" : "size-10"
-          ),
-          children: moreIcon
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onMore,
-          className: cn(
-            "shrink-0 rounded-md pl-2 text-[12.5px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
-            moreIcon && "hidden lg:inline"
-          ),
-          children: moreLabel
-        }
-      )
-    ] })
+    onMore && /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onMore,
+        onPointerDown: onMorePointerDown,
+        "aria-label": moreLabel,
+        "aria-haspopup": "dialog",
+        className: cn(
+          // The chip's own chrome, so the pinned control and the scrolling
+          // chips read as one row. `shrink-0` against the scrolling chips.
+          "inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-full border border-border bg-card text-sm text-foreground transition-colors hover:border-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+          chipSize === "lg" ? "h-11" : "h-9",
+          // With a glyph: a square below `lg`, the glyph and the label from it.
+          moreIcon ? chipSize === "lg" ? "w-11 lg:w-auto lg:px-4" : "w-9 lg:w-auto lg:px-4" : "px-4"
+        ),
+        children: [
+          moreIcon,
+          /* @__PURE__ */ jsx("span", { className: cn(moreIcon && "hidden lg:inline"), children: moreLabel })
+        ]
+      }
+    )
   ] });
 }
 function Chip({

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
+    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "destructive" | "inherit" | "primary" | null | undefined;
+    tone?: "inherit" | "default" | "destructive" | "primary" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | "primary" | "outline" | "quiet" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "warning" | "success" | "primary" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "warning" | "success" | "primary" | "outline" | "quiet" | null | undefined;
+    variant?: "default" | "destructive" | "outline" | "warning" | "success" | "primary" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

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

package/package.json

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

package/src/components/menu-filter-chips.stories.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import { Clock, Leaf, MapPin, Moon, Sun, Wallet } from "lucide-react";
 import { MenuFilterChips, MenuFilterSummary } from "./menu-filter-chips";
+import { MotionSliders } from "./motion-icon-controls";
 import { mockFilterChips } from "./menu-mocks";
 
 const icons: Record<string, React.ReactNode> = {
@@ -30,7 +31,7 @@ const meta: Meta<typeof MenuFilterChips> = {
     docs: {
       description: {
         component:
-          "Every chip counts KITCHENS, whatever facet is behind it — a dietary chip reads *has a vegetarian dish* and counts venues, not dishes. The unit is stated once at the head of the row and never again; the earlier version mixed venue counts and item counts and you could not tell what a number meant without re-reading the label that produced it. One line in every state: the chips scroll under a `ScrollFade`, and *More filters* is pinned opposite the unit label rather than wrapping.",
+          "Every chip counts KITCHENS, whatever facet is behind it — a dietary chip reads *has a vegetarian dish* and counts venues, not dishes. The unit is stated once at the head of the row and never again; the earlier version mixed venue counts and item counts and you could not tell what a number meant without re-reading the label that produced it. One line in every state: the chips scroll under a `ScrollFade`, and *More filters* is a chip-shaped pill pinned opposite the unit label rather than wrapping — a square carrying only its glyph below `lg`, glyph and label from it.",
       },
     },
   },
@@ -41,6 +42,7 @@ type Story = StoryObj<typeof MenuFilterChips>;
 
 function Interactive({ initial }: { initial: typeof chips }) {
   const [state, setState] = useState(initial);
+  const [replayToken, setReplayToken] = useState(0);
   const active = state.filter((chip) => chip.active).length;
 
   return (
@@ -49,6 +51,8 @@ function Interactive({ initial }: { initial: typeof chips }) {
         chips={state}
         unitLabel="KITCHENS · 247"
         moreLabel="More filters"
+        moreIcon={<MotionSliders replayToken={replayToken} className="size-4" />}
+        onMorePointerDown={() => setReplayToken((n) => n + 1)}
         onMore={() => {}}
         ariaLabel="Filter kitchens"
         onToggle={(key) =>

package/src/components/menu-filter-chips.test.tsx

@@ -0,0 +1,63 @@
+import { describe, it, expect, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MenuFilterChips } from "./menu-filter-chips";
+import { mockFilterChips } from "./menu-mocks";
+
+describe("MenuFilterChips", () => {
+  /**
+   * The "more filters" control is ONE button at every width, shaped like the
+   * chips beside it. It used to be two elements — an icon square below `lg`
+   * and a bare text link from it — and the link read as a footnote rather
+   * than as the row's last chip.
+   */
+  it("renders the more control as a single chip-shaped pill carrying the glyph and the label", () => {
+    const onMore = vi.fn();
+    const onMorePointerDown = vi.fn();
+    render(
+      <MenuFilterChips
+        chips={mockFilterChips}
+        onToggle={() => {}}
+        moreLabel="More filters"
+        moreIcon={<svg data-testid="glyph" />}
+        onMore={onMore}
+        onMorePointerDown={onMorePointerDown}
+      />
+    );
+
+    const pills = screen.getAllByRole("button", { name: "More filters" });
+    expect(pills).toHaveLength(1);
+    const [pill] = pills;
+    expect(pill).toHaveAttribute("aria-haspopup", "dialog");
+    expect(pill.className).toContain("rounded-full");
+    expect(pill.className).toContain("border-border");
+    expect(pill.className).toContain("h-9");
+    expect(pill.className).toContain("lg:px-4");
+    expect(pill.querySelector("[data-testid='glyph']")).not.toBeNull();
+    expect(pill.querySelector("span")?.className).toContain("hidden lg:inline");
+
+    fireEvent.pointerDown(pill);
+    fireEvent.click(pill);
+    expect(onMorePointerDown).toHaveBeenCalledTimes(1);
+    expect(onMore).toHaveBeenCalledTimes(1);
+  });
+
+  it("shows the label at every width when no glyph is given", () => {
+    render(
+      <MenuFilterChips
+        chips={mockFilterChips}
+        onToggle={() => {}}
+        moreLabel="More filters"
+        onMore={() => {}}
+      />
+    );
+
+    const pill = screen.getByRole("button", { name: "More filters" });
+    expect(pill.className).toContain("px-4");
+    expect(pill.querySelector("span")?.className ?? "").not.toContain("hidden");
+  });
+
+  it("renders no more control without a handler", () => {
+    render(<MenuFilterChips chips={mockFilterChips} onToggle={() => {}} moreLabel="More filters" />);
+    expect(screen.queryByRole("button", { name: "More filters" })).toBeNull();
+  });
+});

package/src/components/menu-filter-chips.tsx

@@ -40,22 +40,25 @@ export type MenuFilterChipsProps = {
   onToggle: (key: string) => void;
   /** The unit and the current total, composed by the caller, e.g. "KITCHENS · 247". */
   unitLabel?: string;
-  /** Opens the full filter sheet. Omit for a row where every facet is a chip. */
+  /** Opens the full filter panel. Omit for a row where every facet is a chip. */
   onMore?: () => void;
   moreLabel?: string;
   /**
-   * A glyph for the phone's icon-only "more filters" button.
+   * The glyph on the "more filters" pill.
    *
-   * The label is the widest fixed element in the row — "More filters" is ~80px
-   * of a 358px viewport, and it is the one thing that never scrolls, so it eats
-   * the chips' runway on every phone. Given an icon, the button collapses to a
-   * square below `lg` and keeps `moreLabel` as its accessible name.
+   * The pill is a chip like the others in the row — same border, same height —
+   * so the way out of the row reads as part of the row, not as a link beside
+   * it. The label is the widest fixed element in the row ("More filters" is
+   * ~80px of a 358px viewport) and the one thing that never scrolls, so below
+   * `lg` the pill collapses to a square carrying only the glyph, with
+   * `moreLabel` as its accessible name; from `lg` it shows both.
    *
    * A node rather than a name because the app owns its iconography, and this
    * one is animated on press — the DS neither knows the glyph nor drives it.
+   * Without a glyph the pill shows the label at every width.
    */
   moreIcon?: React.ReactNode;
-  /** Press handler for the icon button, e.g. to replay the glyph's animation. */
+  /** Press handler for the pill, e.g. to replay the glyph's animation. */
   onMorePointerDown?: () => void;
   /** Locale-aware integer formatter for the counts. Defaults to `String`. */
   formatCount?: (value: number) => string;
@@ -117,39 +120,24 @@ export function MenuFilterChips({
       </ScrollFade>
 
       {onMore && (
-        <>
-          {/* One control, two shapes. On a phone it is a 40px square carrying
-              the caller's glyph, with `moreLabel` as its accessible name; from
-              `lg` it is the text link it has always been. Two elements rather
-              than one so neither has to carry the other's padding, and both
-              stay `shrink-0` against the scrolling chips. */}
-          {moreIcon && (
-            <button
-              type="button"
-              onClick={onMore}
-              onPointerDown={onMorePointerDown}
-              aria-label={moreLabel}
-              aria-haspopup="dialog"
-              className={cn(
-                "inline-flex shrink-0 items-center justify-center rounded-full border border-border text-accent transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none lg:hidden",
-                // The one control that never scrolls keeps the chips' height.
-                chipSize === "lg" ? "size-11" : "size-10"
-              )}
-            >
-              {moreIcon}
-            </button>
+        <button
+          type="button"
+          onClick={onMore}
+          onPointerDown={onMorePointerDown}
+          aria-label={moreLabel}
+          aria-haspopup="dialog"
+          className={cn(
+            // The chip's own chrome, so the pinned control and the scrolling
+            // chips read as one row. `shrink-0` against the scrolling chips.
+            "inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-full border border-border bg-card text-sm text-foreground transition-colors hover:border-accent/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
+            chipSize === "lg" ? "h-11" : "h-9",
+            // With a glyph: a square below `lg`, the glyph and the label from it.
+            moreIcon ? (chipSize === "lg" ? "w-11 lg:w-auto lg:px-4" : "w-9 lg:w-auto lg:px-4") : "px-4"
           )}
-          <button
-            type="button"
-            onClick={onMore}
-            className={cn(
-              "shrink-0 rounded-md pl-2 text-[12.5px] font-bold text-accent transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring motion-reduce:transition-none",
-              moreIcon && "hidden lg:inline"
-            )}
-          >
-            {moreLabel}
-          </button>
-        </>
+        >
+          {moreIcon}
+          <span className={cn(moreIcon && "hidden lg:inline")}>{moreLabel}</span>
+        </button>
       )}
     </div>
   );