@estiva-app/ui 0.55.0 → 0.57.0

package/dist/looks.d.ts

@@ -36,6 +36,10 @@ export declare const BARE_INPUT_CLASSES = "bg-transparent text-text-primary plac
 /** A sidebar row's shape and its words at rest, brightening under the pointer: NavItem, and SectionHeader's `row` (a folder among rows). */
 export declare const SIDEBAR_ROW_CLASSES = "rounded-lg transition-colors";
 export declare const SIDEBAR_ROW_TEXT_CLASSES = "text-text-secondary hover:text-text-primary";
+/** A quiet icon control: secondary, brightening on a hover fill — IconButton's `muted`. */
+export declare const MUTED_CONTROL_CLASSES = "text-text-secondary hover:bg-bg-hover hover:text-text-primary";
+/** A control that opens a menu: a hover fill, held while its menu is up — PersonTrigger's row, and a ContainerHeader title with a menu. */
+export declare const MENU_TRIGGER_CLASSES = "cursor-pointer rounded-md transition-colors hover:bg-bg-hover data-[popup-open]:bg-bg-hover";
 /**
  * A panel that slides open and shut on Base UI's Collapsible: Base UI measures
  * it and writes its height to a variable, `auto` again once the slide ends, and

package/dist/looks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"looks.d.ts","sourceRoot":"","sources":["../src/looks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;GAEG;AACH,eAAO,MAAM,iBAAiB,2MAA2M,CAAA;AAEzO,wFAAwF;AACxF,eAAO,MAAM,kBAAkB,kDAAkD,CAAA;AAEjF,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,iKAAiK,CAAA;AAEpM,wEAAwE;AACxE,eAAO,MAAM,wBAAwB,4DAA4D,CAAA;AAEjG,kJAAkJ;AAClJ,eAAO,MAAM,kBAAkB;;;CAGrB,CAAA;AAEV,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,uJAAuJ,CAAA;AAEvL,mEAAmE;AACnE,eAAO,MAAM,wBAAwB,qEAAqE,CAAA;AAE1G,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,0FAA0F,CAAA;AAExH,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,8EAA8E,CAAA;AAE7G,4IAA4I;AAE5I,eAAO,MAAM,mBAAmB,iCAAiC,CAAA;AACjE,eAAO,MAAM,wBAAwB,gDAAgD,CAAA;AAErF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,kLAAkL,CAAA"}
+{"version":3,"file":"looks.d.ts","sourceRoot":"","sources":["../src/looks.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH;;GAEG;AACH,eAAO,MAAM,iBAAiB,2MAA2M,CAAA;AAEzO,wFAAwF;AACxF,eAAO,MAAM,kBAAkB,kDAAkD,CAAA;AAEjF,mEAAmE;AACnE,eAAO,MAAM,sBAAsB,iKAAiK,CAAA;AAEpM,wEAAwE;AACxE,eAAO,MAAM,wBAAwB,4DAA4D,CAAA;AAEjG,kJAAkJ;AAClJ,eAAO,MAAM,kBAAkB;;;CAGrB,CAAA;AAEV,qGAAqG;AACrG,eAAO,MAAM,mBAAmB,uJAAuJ,CAAA;AAEvL,mEAAmE;AACnE,eAAO,MAAM,wBAAwB,qEAAqE,CAAA;AAE1G,yDAAyD;AACzD,eAAO,MAAM,iBAAiB,0FAA0F,CAAA;AAExH,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,8EAA8E,CAAA;AAE7G,4IAA4I;AAE5I,eAAO,MAAM,mBAAmB,iCAAiC,CAAA;AACjE,eAAO,MAAM,wBAAwB,gDAAgD,CAAA;AAErF,2FAA2F;AAC3F,eAAO,MAAM,qBAAqB,kEAAkE,CAAA;AAEpG,2IAA2I;AAC3I,eAAO,MAAM,oBAAoB,gGAAgG,CAAA;AAEjI;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,kLAAkL,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.55.0",
+  "version": "0.57.0",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/registry.json

@@ -4,7 +4,7 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.55.0",
+    "packageVersion": "0.57.0",
     "exports": 130,
     "typeExports": 134,
     "files": null
@@ -1185,6 +1185,12 @@
           "required": false,
           "note": "Remember open or closed in this browser, under this key."
         },
+        {
+          "name": "icon",
+          "takes": "anything",
+          "required": false,
+          "note": "16px, before the title; the arrow takes its place on hover — `SectionHeader`'s."
+        },
         {
           "name": "trailing",
           "takes": "anything",
@@ -1195,7 +1201,19 @@
           "name": "actions",
           "takes": "SectionAction[]",
           "required": false,
-          "note": "Beside the title, revealed on hover or focus — `SectionHeader`'s."
+          "note": "Beside the title, revealed while the row is hovered or keyboard-focused — `SectionHeader`'s."
+        },
+        {
+          "name": "menu",
+          "takes": "anything",
+          "required": false,
+          "note": "Beside the actions, revealed with them: the section's \"More options\" menu, `MenuItem`s — `SectionHeader`'s."
+        },
+        {
+          "name": "menuLabel",
+          "takes": "text",
+          "required": false,
+          "note": "The ⋮'s accessible name — `SectionHeader`'s."
         },
         {
           "name": "showActions",
@@ -1750,6 +1768,12 @@
           "required": false,
           "note": "A chevron after the title, for a title that opens something."
         },
+        {
+          "name": "titleMenu",
+          "takes": "anything",
+          "required": false,
+          "note": "The menu the title opens: `MenuItem`s — the column's views (Katerina, 5 October: Peek's Topics column, Topics or Folders)."
+        },
         {
           "name": "actions",
           "takes": "anything",
@@ -1764,14 +1788,29 @@
         }
       ],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        },
+        {
+          "id": "role",
+          "behaviour": "Says what it is to assistive technology"
+        },
+        {
+          "id": "tab-stop",
+          "behaviour": "Is reachable with Tab"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "navigation-containerheader--docs",
-      "storyId": "navigation-containerheader--default",
+      "storyId": "navigation-containerheader--with-title-menu",
       "docPage": "src/ContainerHeader.mdx",
       "app": null,
-      "looks": []
+      "looks": [
+        "cursor-pointer rounded-md transition-colors hover:bg-bg-hover"
+      ]
     },
     {
       "name": "deleteBlock",
@@ -3320,6 +3359,12 @@
           "required": false,
           "note": "A chevron after the title, as `ContainerHeader` draws it."
         },
+        {
+          "name": "titleMenu",
+          "takes": "anything",
+          "required": false,
+          "note": "The menu the title opens — `ContainerHeader`'s: the column's views."
+        },
         {
           "name": "actions",
           "takes": "anything",
@@ -3907,7 +3952,7 @@
         "text-body-2 rounded-lg transition-colors text-text-primary hover:bg-bg-hover",
         "text-body-2 rounded-lg transition-colors text-text-secondary hover:text-text-primary hover:bg-bg-hover",
         "text-center font-mono text-caption tabular-nums text-text-muted",
-        "text-center font-mono text-caption tabular-nums text-text-muted transition-opacity",
+        "text-center font-mono text-caption tabular-nums text-text-muted transition-opacity [@media(hover:none)]:opacity-0",
         "overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none"
       ]
     },
@@ -4016,7 +4061,19 @@
           "name": "actions",
           "takes": "SectionAction[]",
           "required": false,
-          "note": "Beside the title, shown on hover or focus: \"Open\", typically."
+          "note": "Beside the title, shown while the row is hovered or keyboard-focused: \"Open\", typically."
+        },
+        {
+          "name": "menu",
+          "takes": "anything",
+          "required": false,
+          "note": "The group's \"More options\" menu, after its actions: `MenuItem`s."
+        },
+        {
+          "name": "icon",
+          "takes": "anything",
+          "required": false,
+          "note": "16px, before the title; the arrow takes its place on hover."
         },
         {
           "name": "defaultOpen",
@@ -4320,8 +4377,8 @@
       "docPage": "src/PersonTrigger.mdx",
       "app": null,
       "looks": [
-        "cursor-pointer rounded-md text-body-2 text-text-primary transition-colors hover:bg-bg-hover",
-        "cursor-pointer rounded-md text-body-2 text-text-primary transition-colors hover:bg-bg-hover bg-bg-hover"
+        "text-body-2 text-text-primary cursor-pointer rounded-md transition-colors hover:bg-bg-hover",
+        "text-body-2 text-text-primary cursor-pointer rounded-md transition-colors hover:bg-bg-hover bg-bg-hover"
       ]
     },
     {
@@ -5182,7 +5239,7 @@
       "kind": "component",
       "importPath": "@estiva-app/ui",
       "sourceFile": "src/SectionHeader.tsx",
-      "purpose": "The 32px row a section starts with: a SectionLabel, and actions that appear on hover or focus as IconButtons with tooltips.",
+      "purpose": "The 32px row a section starts with: a SectionLabel, and actions that appear while the row is hovered or keyboard-focused, as IconButtons with tooltips — always, on a screen with no hover.",
       "purposeFrom": "page",
       "props": [
         {
@@ -5197,6 +5254,12 @@
           "required": false,
           "note": "Collapsible: draws the chevron and makes the title a button that toggles."
         },
+        {
+          "name": "icon",
+          "takes": "anything",
+          "required": false,
+          "note": "16px, stroke 1.5, before the title — a folder's (Katerina, 5 October: Peek's Folders, the standard heading with a folder icon)."
+        },
         {
           "name": "isExpanded",
           "takes": "true/false",
@@ -5221,11 +5284,23 @@
           "required": false,
           "note": "Right-aligned, in the order given."
         },
+        {
+          "name": "menu",
+          "takes": "anything",
+          "required": false,
+          "note": "The heading's \"More options\" menu: `MenuItem`s — what acts on the whole section, a folder's Rename or Archive (Katerina, 5 October: Peek's Folders page goes, and its folder actions move onto the folder's heading)."
+        },
+        {
+          "name": "menuLabel",
+          "takes": "text",
+          "required": false,
+          "note": "The ⋮'s accessible name. Default \"More options for\" the title."
+        },
         {
           "name": "showActions",
           "takes": "hover | always",
           "required": false,
-          "note": "`hover` reveals the actions while the row is hovered or focused; `always` keeps them."
+          "note": "`hover` reveals the actions while the row is hovered or keyboard-focused (always on a screen with no hover); `always` keeps them."
         },
         {
           "name": "hover",
@@ -5284,11 +5359,12 @@
       "docPage": "src/SectionHeader.mdx",
       "app": null,
       "looks": [
+        "opacity-0 transition-[opacity,transform] duration-150 group-hover:opacity-100",
+        "opacity-0 transition-[opacity,transform] duration-150 group-hover:opacity-100 rotate-90",
         "transition-transform duration-150 text-text-secondary rotate-90",
         "rounded-lg transition-colors text-text-secondary hover:text-text-primary",
         "rounded-lg transition-colors text-text-secondary hover:text-text-primary hover:bg-bg-hover",
-        "-mr-1 opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100",
-        "opacity-0 transition-opacity focus-within:opacity-100 group-hover:opacity-100"
+        "opacity-0 transition-opacity group-hover:opacity-100 [@media(hover:none)]:opacity-100"
       ]
     },
     {
@@ -5349,19 +5425,15 @@
       "docPage": "src/SectionLabel.mdx",
       "app": null,
       "looks": [
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-secondary",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-secondary truncate",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-muted",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-muted truncate",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-primary",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest text-text-primary truncate",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-secondary",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-secondary truncate",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-muted",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-muted truncate",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-primary",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-primary truncate",
-        "text-h5 leading-3 signal:font-mono signal:text-small signal:uppercase signal:tracking-widest",
+        "text-h5 leading-3 text-text-secondary truncate",
+        "text-h5 leading-3 text-text-muted truncate",
+        "text-h5 leading-3 text-text-primary truncate",
+        "text-h5 leading-3 leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-secondary",
+        "text-h5 leading-3 leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-secondary truncate",
+        "text-h5 leading-3 leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-muted",
+        "text-h5 leading-3 leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-muted truncate",
+        "text-h5 leading-3 leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-primary",
+        "text-h5 leading-3 leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest text-text-primary truncate",
         "leaf:font-mono leaf:text-small leaf:uppercase leaf:tracking-widest"
       ]
     },

package/src/ChipInput.test.tsx

@@ -70,6 +70,14 @@ describe('ChipInput', () => {
     expect(input.getAttribute('aria-expanded')).toBe('true')
   })
 
+  it('puts 2px between its rows, as a menu does', async () => {
+    const user = userEvent.setup()
+    render(<Harness />)
+    await user.type(screen.getByRole('combobox'), 'a')
+    const [first] = await screen.findAllByRole('option')
+    expect(first.parentElement!.className.split(' ')).toContain('gap-0.5')
+  })
+
   it('names the highlighted row through aria-activedescendant', async () => {
     const user = userEvent.setup()
     render(<Harness />)

package/src/ChipInput.tsx

@@ -277,10 +277,12 @@ export function ChipInput<T extends ChipInputOption = ChipInputOption>({
               for; `--anchor-width` is the positioner's own answer, and the
               anchor is the box (see `box` above), not the input. The padding
               is on the scrolling content so the bar hugs the panel (D63), and
-              240px is the cap this list has always had. */}
+              240px is the cap this list has always had. The rows are the
+              list's own children, so the 2px between them, a menu's, is on
+              the list. */}
           <Combobox.Popup className="w-[var(--anchor-width)] p-0" render={<MenuPanel />}>
             <ScrollArea viewportClassName="max-h-[240px]" contentClassName="flex flex-col p-2">
-              <Combobox.List>
+              <Combobox.List className="flex flex-col gap-0.5">
                 {(option: T) => (
                   <Combobox.Item
                     key={option.id}

package/src/CollapsibleSection.mdx

@@ -21,7 +21,7 @@ toggle, and the rows under it, sliding shut and open.
   key (`app.sidebar.starred`).
 - `open` + `onOpenChange` when the app owns the state.
 - `actions` for add, sort, filter beside the title — SectionHeader's,
-  revealed on hover or focus.
+  revealed while the row is hovered or keyboard-focused.
 - `look="row"` when the section is a row among rows — a folder in a
   sidebar, under a quiet label: the title at a row's weight, and its rows
   indented under it, past the chevron.

package/src/CollapsibleSection.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite'
 import { IconPlus } from '@tabler/icons-react'
 import { Chip } from './Chip'
 import { CollapsibleSection } from './CollapsibleSection'
+import { MenuItem } from './Menu'
 import { NavItem } from './NavItem'
 
 /** A section that opens and closes: the header's title is the toggle, and the rows slide. */
@@ -9,7 +10,7 @@ const meta = {
   title: 'Navigation/CollapsibleSection',
   component: CollapsibleSection,
   decorators: [(Story) => <div className="w-[280px]"><Story /></div>],
-  args: { title: 'Section', contentClassName: 'gap-px', children: null },
+  args: { title: 'Section', contentClassName: 'gap-0.5', children: null },
   argTypes: { children: { control: false }, actions: { control: false } },
   render: (args) => (
     <CollapsibleSection {...args}>
@@ -48,6 +49,18 @@ export const AsARow: Story = {
   args: { title: 'Folder', look: 'row' },
 }
 
+/** `menu`: the section's "More options" ⋮, after its actions — a folder's Rename, Archive. Hover the title. */
+export const WithMenu: Story = {
+  args: {
+    menu: (
+      <>
+        <MenuItem label="Rename" />
+        <MenuItem label="Delete" destructive />
+      </>
+    ),
+  },
+}
+
 /** `indent`: the heading look, its rows starting under its title, past the chevron — a folder in a sidebar. */
 export const Indented: Story = {
   args: { title: 'Group', indent: true },

package/src/CollapsibleSection.test.tsx

@@ -9,6 +9,7 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { CollapsibleSection } from './CollapsibleSection'
+import { MenuItem } from './Menu'
 
 afterEach(cleanup)
 beforeEach(() => window.localStorage.clear())
@@ -79,3 +80,26 @@ describe('CollapsibleSection', () => {
     expect(title().getAttribute('aria-expanded')).toBe('false')
   })
 })
+
+/** What it hands its header (0.56.0): the folder's ⋮, the ⋮'s name, and the icon before the title. */
+describe('CollapsibleSection, its header', () => {
+  it('passes menu and menuLabel on: the ⋮ is named by menuLabel and opens the menu', async () => {
+    render(<CollapsibleSection title="Section" menu={<MenuItem label="Rename" />} menuLabel="Section options">{rows}</CollapsibleSection>)
+    await userEvent.click(screen.getByRole('button', { name: 'Section options' }))
+    expect(await screen.findByRole('menuitem', { name: 'Rename' })).not.toBeNull()
+    // The ⋮ acts; it does not fold the section.
+    expect(title().getAttribute('aria-expanded')).toBe('true')
+  })
+
+  it('with menu and no menuLabel, the ⋮ is named for the title', () => {
+    render(<CollapsibleSection title="Section" menu={<MenuItem label="Rename" />}>{rows}</CollapsibleSection>)
+    expect(screen.getByRole('button', { name: 'More options for Section' })).not.toBeNull()
+  })
+
+  it('passes icon on: it is drawn inside the title’s toggle, before the words', () => {
+    render(<CollapsibleSection title="Section" icon={<span data-testid="icon" />}>{rows}</CollapsibleSection>)
+    const icon = screen.getByTestId('icon')
+    expect(title().contains(icon)).toBe(true)
+    expect(icon.compareDocumentPosition(screen.getByText('Section')) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy()
+  })
+})

package/src/CollapsibleSection.tsx

@@ -32,10 +32,16 @@ export interface CollapsibleSectionProps {
   onOpenChange?: (open: boolean) => void
   /** Remember open or closed in this browser, under this key. The app prefixes it. */
   storageKey?: string
+  /** 16px, before the title; the arrow takes its place on hover — `SectionHeader`'s. */
+  icon?: ReactNode
   /** Beside the title and always visible, before the actions — a count. `SectionHeader`'s. */
   trailing?: ReactNode
-  /** Beside the title, revealed on hover or focus — `SectionHeader`'s. */
+  /** Beside the title, revealed while the row is hovered or keyboard-focused — `SectionHeader`'s. */
   actions?: SectionAction[]
+  /** Beside the actions, revealed with them: the section's "More options" menu, `MenuItem`s — `SectionHeader`'s. */
+  menu?: ReactNode
+  /** The ⋮'s accessible name — `SectionHeader`'s. */
+  menuLabel?: string
   showActions?: 'hover' | 'always'
   /**
    * `heading` (default): the title is a section heading. `row`: the fold is a
@@ -79,7 +85,7 @@ function writeStored(key: string | undefined, open: boolean) {
   }
 }
 
-export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, look = 'heading', indent = false, children, className, contentClassName }: CollapsibleSectionProps) {
+export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, icon, trailing, actions, menu, menuLabel, showActions, look = 'heading', indent = false, children, className, contentClassName }: CollapsibleSectionProps) {
   const [openState, setOpenState] = useState(() => readStored(storageKey) ?? defaultOpen)
   const open = openProp ?? openState
   const setOpen = (next: boolean) => {
@@ -89,7 +95,7 @@ export function CollapsibleSection({ title, defaultOpen = true, open: openProp,
   }
   return (
     <Collapsible.Root open={open} onOpenChange={setOpen} className={cn('flex flex-col', className)}>
-      <SectionHeader title={title} chevron isExpanded={open} trailing={trailing} actions={actions} showActions={showActions} look={look} className="shrink-0" render={<Collapsible.Trigger />} />
+      <SectionHeader title={title} chevron icon={icon} isExpanded={open} trailing={trailing} actions={actions} menu={menu} menuLabel={menuLabel} showActions={showActions} look={look} className="shrink-0" render={<Collapsible.Trigger />} />
       {/* The slide: Base UI measures the panel and writes its height to a
           variable — `auto` again once the slide ends, so rows that arrive
           later are not clipped — and the panel is 0 high on its opening frame
@@ -101,8 +107,8 @@ export function CollapsibleSection({ title, defaultOpen = true, open: openProp,
         className={COLLAPSIBLE_PANEL_CLASSES}
       >
         {/* A row's rows start under its title: the 16px chevron and its 8px gap
-            (pl-6). An indented heading's: its 12px chevron and 4px gap (pl-4). */}
-        <div className={cn('flex flex-col', look === 'row' ? 'pl-6' : indent && 'pl-4', contentClassName)}>{children}</div>
+            (pl-6). An indented heading's: the same — its arrow is a row's now (5 October). */}
+        <div className={cn('flex flex-col pt-0.5', (look === 'row' || indent) && 'pl-6', contentClassName)}>{children}</div>
       </Collapsible.Panel>
     </Collapsible.Root>
   )

package/src/CommandPalette.test.tsx

@@ -94,6 +94,12 @@ describe('CommandPaletteSearch — rows', () => {
     expect(groups.map((g) => g.firstElementChild?.textContent)).toEqual(['First', 'Second'])
   })
 
+  it('puts 2px between its rows and under each heading, as a menu does', () => {
+    render(<Search groups={[{ label: 'Group', rows: [row('One'), row('Two')] }]} />)
+    const [first] = screen.getAllByRole('option')
+    expect(first.parentElement!.className.split(' ')).toContain('gap-0.5')
+  })
+
   it('lights the first row, and Enter does what it does', async () => {
     const onSelect = vi.fn()
     const user = userEvent.setup()

package/src/CommandPalette.tsx

@@ -397,9 +397,10 @@ export function CommandPaletteSearch({ query, onQueryChange, placeholder, groups
 
         <Autocomplete.List className="flex flex-col">
           {(group: ListGroup) => (
-            <Autocomplete.Group key={group.value} items={group.items} className="flex flex-col">
+            <Autocomplete.Group key={group.value} items={group.items} className="flex flex-col gap-0.5">
               {/* A heading labels the rows, it is not one of them: read
-                  secondary, as in a menu (MenuSection). */}
+                  secondary, as in a menu (MenuSection). 2px under it and
+                  between its rows, as every list has (Katerina, 5 October). */}
               <Autocomplete.GroupLabel className="flex h-7 shrink-0 items-center px-3">
                 <SectionLabel tone="secondary">{group.value}</SectionLabel>
               </Autocomplete.GroupLabel>

package/src/ContainerHeader.mdx

@@ -17,6 +17,10 @@ with a hairline under it.
   thread, a side panel. One per column.
 - The column's own actions — new, sort, close — as IconButtons with tooltips
   in `actions`.
+- `titleMenu`: the title opens a menu of the column's views, its chevron
+  drawn; the title and the chevron are one button.
+
+<Canvas of={ContainerHeaderStories.WithTitleMenu} />
 
 ## When not
 

package/src/ContainerHeader.stories.tsx

@@ -2,6 +2,7 @@ import type { Decorator, Meta, StoryObj } from '@storybook/react-vite'
 import { IconEdit, IconSortDescending, IconX } from '@tabler/icons-react'
 import { ContainerHeader } from './ContainerHeader'
 import { IconButton } from './IconButton'
+import { MenuItem } from './Menu'
 import { Card } from './Card'
 
 // The top of a column: a surface with a hairline, so the bar's own hairline and height can be seen.
@@ -18,6 +19,19 @@ const meta = {
 export default meta
 type Story = StoryObj<typeof meta>
 
+/** A title that opens a menu: the title and its chevron are one button. Click it. */
+export const WithTitleMenu: Story = {
+  args: {
+    title: 'View one',
+    titleMenu: (
+      <>
+        <MenuItem label="View one" selected />
+        <MenuItem label="View two" />
+      </>
+    ),
+  },
+}
+
 /** A string title, one line, alone. */
 export const Default: Story = {}
 

package/src/ContainerHeader.test.tsx

@@ -7,6 +7,8 @@
  */
 import { afterEach, describe, expect, it } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MenuItem } from './Menu'
 import { ContainerHeader } from './ContainerHeader'
 
 afterEach(cleanup)
@@ -44,4 +46,10 @@ describe('ContainerHeader', () => {
     expect(container.firstElementChild!.children).toHaveLength(2)
     expect(screen.getByRole('button', { name: 'New' }).closest('div')!.className).toContain('gap-1')
   })
+
+  it('a title with a menu is one button, and opens it', async () => {
+    render(<ContainerHeader title="View one" titleMenu={<MenuItem label="View two" />} />)
+    await userEvent.click(screen.getByRole('button', { name: 'View one' }))
+    expect(await screen.findByRole('menuitem', { name: 'View two' })).not.toBeNull()
+  })
 })

package/src/ContainerHeader.tsx

@@ -1,6 +1,9 @@
 import type { ReactNode } from 'react'
 import { IconChevronDown } from '@tabler/icons-react'
+import { Button as BaseButton } from '@base-ui/react/button'
 import { cn } from './cn'
+import { MENU_TRIGGER_CLASSES } from './looks'
+import { Menu } from './Menu'
 
 /**
  * The bar across the top of a column — a list, a thread, a side panel: its
@@ -20,20 +23,45 @@ export interface ContainerHeaderProps {
   title: ReactNode
   /** A chevron after the title, for a title that opens something. */
   chevron?: boolean
+  /**
+   * The menu the title opens: `MenuItem`s — the column's views (Katerina,
+   * 5 October: Peek's Topics column, Topics or Folders). The title and its
+   * chevron are then one button, lit under the pointer; the chevron is drawn.
+   */
+  titleMenu?: ReactNode
   /** The column's own buttons, at the right edge: IconButtons with tooltips, 4px apart. */
   actions?: ReactNode
   className?: string
 }
 
-export function ContainerHeader({ title, chevron = false, actions, className }: ContainerHeaderProps) {
+export function ContainerHeader({ title, chevron = false, titleMenu, actions, className }: ContainerHeaderProps) {
   const text = typeof title === 'string'
+  const name = (
+    <div className={cn('flex items-center gap-1', text ? 'shrink-0' : 'min-w-0 flex-1')}>
+      {text ? <span className="whitespace-nowrap text-body-2-strong text-text-primary">{title}</span> : <div className="min-w-0 flex-1">{title}</div>}
+      {(chevron || titleMenu != null) && <IconChevronDown size={12} stroke={1.5} className="shrink-0 text-text-secondary" />}
+    </div>
+  )
   return (
-    <div className={cn('flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4 pl-5', className)}>
+    // With a title menu the bar gives the button 6px of its left padding
+    // (pl-3.5 + the button's px-1.5 = pl-5): the words stay where a title's
+    // are, and the fill is inside the bar — a negative margin had it clipped
+    // (Katerina, 5 October).
+    <div className={cn('flex h-12 shrink-0 items-center justify-between overflow-hidden border-b border-border-subtle py-2 pr-4', titleMenu != null ? 'pl-3.5' : 'pl-5', className)}>
       <div className={cn('flex items-center gap-2 overflow-hidden', text ? 'shrink-0' : 'min-w-0 flex-1')}>
-        <div className={cn('flex items-center gap-1', text ? 'shrink-0' : 'min-w-0 flex-1')}>
-          {text ? <span className="whitespace-nowrap text-body-2-strong text-text-primary">{title}</span> : <div className="min-w-0 flex-1">{title}</div>}
-          {chevron && <IconChevronDown size={12} stroke={1.5} className="shrink-0 text-text-secondary" />}
-        </div>
+        {titleMenu != null ? (
+          <Menu
+            trigger={
+              <BaseButton type="button" className={cn('flex min-w-0 items-center px-1.5 py-1', MENU_TRIGGER_CLASSES)}>
+                {name}
+              </BaseButton>
+            }
+          >
+            {titleMenu}
+          </Menu>
+        ) : (
+          name
+        )}
       </div>
       {actions && (
         <div className="flex shrink-0 items-center justify-end gap-3">

package/src/IconButton.tsx

@@ -1,6 +1,7 @@
 import type { ComponentPropsWithRef, ReactNode } from 'react'
 import { Button as BaseButton } from '@base-ui/react/button'
 import { cn } from './cn'
+import { MUTED_CONTROL_CLASSES } from './looks'
 import { useFormBusy } from './formBusy'
 import { TooltipTrigger } from './Tooltip'
 
@@ -82,7 +83,7 @@ export function IconButton({
       // stretched and carries no `self-center` — see the note there.
       'flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 self-center cursor-pointer',
       !off && variant === 'primary' && 'bg-accent-primary hover:bg-accent-hover text-text-inverse',
-      !off && (variant === 'muted' || variant === 'resolve') && 'text-text-secondary hover:bg-bg-hover hover:text-text-primary',
+      !off && (variant === 'muted' || variant === 'resolve') && MUTED_CONTROL_CLASSES,
       !off && variant === 'outlined' && 'border border-border-default hover:bg-bg-hover text-text-secondary',
       !off && variant === 'current' && 'hover:bg-bg-hover',
       off && variant === 'primary' && 'bg-bg-disabled text-text-disabled',

package/src/ListColumn.test.tsx

@@ -2,6 +2,8 @@
 /** What the ListColumn page claims, pinned. Sizes are measured in the browser; these pin the parts. */
 import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MenuItem } from './Menu'
 import { ListColumn } from './ListColumn'
 
 afterEach(cleanup)
@@ -12,6 +14,12 @@ describe('ListColumn', () => {
     expect(screen.getByText('Items')).toBeTruthy()
   })
 
+  it('titleMenu: the title is the button that opens the column’s views', async () => {
+    render(<ListColumn title="View one" titleMenu={<MenuItem label="View two" />}>{null}</ListColumn>)
+    await userEvent.click(screen.getByRole('button', { name: 'View one' }))
+    expect(await screen.findByRole('menuitem', { name: 'View two' })).not.toBeNull()
+  })
+
   it('is 290px wide with a line on its right, and keeps its width', () => {
     const { container } = render(<ListColumn title="Items">{null}</ListColumn>)
     const classes = (container.firstElementChild as HTMLElement).className.split(' ')

package/src/ListColumn.tsx

@@ -32,6 +32,8 @@ export interface ListColumnProps {
   title: ReactNode
   /** A chevron after the title, as `ContainerHeader` draws it. */
   chevron?: boolean
+  /** The menu the title opens — `ContainerHeader`'s: the column's views. */
+  titleMenu?: ReactNode
   /** The column's own actions, at the header's right — a `Toolbar` of `ToolbarButton`s, or one `IconButton`. */
   actions?: ReactNode
   /** A row between the header and the list that stays put while the list scrolls — a field that adds to the list. */
@@ -44,7 +46,7 @@ export interface ListColumnProps {
   className?: string
 }
 
-function Column({ title, chevron = false, actions, above, collapsed = false, children, className, broken = false }: ListColumnProps & { broken?: boolean }) {
+function Column({ title, chevron = false, titleMenu, actions, above, collapsed = false, children, className, broken = false }: ListColumnProps & { broken?: boolean }) {
   return (
     <div
       className={cn(
@@ -55,7 +57,7 @@ function Column({ title, chevron = false, actions, above, collapsed = false, chi
       )}
       data-collapsed={collapsed || undefined}
     >
-      <ContainerHeader title={title} chevron={chevron} actions={actions} />
+      <ContainerHeader title={title} chevron={chevron} titleMenu={titleMenu} actions={actions} />
       {above}
       {broken ? (
         // The message takes the room the list had and centres itself in it (Katerina, 19 September).