@estiva-app/ui 0.55.0 → 0.56.0

package/dist/looks.d.ts

@@ -34,6 +34,10 @@ export declare const CHIP_TEXT_CLASSES = "text-chip signal:font-mono signal:text
 /** Words typed straight into an input with no box of its own: SearchInput and ChipInput. */
 export declare const BARE_INPUT_CLASSES = "bg-transparent text-text-primary placeholder:text-text-muted outline-none";
 /** A sidebar row's shape and its words at rest, brightening under the pointer: NavItem, and SectionHeader's `row` (a folder among rows). */
+/** 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";
 export declare const SIDEBAR_ROW_CLASSES = "rounded-lg transition-colors";
 export declare const SIDEBAR_ROW_TEXT_CLASSES = "text-text-secondary hover:text-text-primary";
 /**

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,2FAA2F;AAC3F,eAAO,MAAM,qBAAqB,kEAAkE,CAAA;AAEpG,2IAA2I;AAC3I,eAAO,MAAM,oBAAoB,gGAAgG,CAAA;AAEjI,eAAO,MAAM,mBAAmB,iCAAiC,CAAA;AACjE,eAAO,MAAM,wBAAwB,gDAAgD,CAAA;AAErF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,kLAAkL,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.55.0",
+  "version": "0.56.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.56.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",
@@ -1197,6 +1203,18 @@
           "required": false,
           "note": "Beside the title, revealed on hover or focus — `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",
           "takes": "hover | always",
@@ -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",
@@ -4018,6 +4063,18 @@
           "required": false,
           "note": "Beside the title, shown on hover or focus: \"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",
           "takes": "true/false",
@@ -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"
       ]
     },
     {
@@ -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,6 +5284,18 @@
           "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",
@@ -5284,11 +5359,11 @@
       "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"
+        "rounded-lg transition-colors text-text-secondary hover:text-text-primary hover:bg-bg-hover"
       ]
     },
     {
@@ -5349,19 +5424,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/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.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. */
   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/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.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).

package/src/Menu.tsx

@@ -95,7 +95,8 @@ export function MenuPanel({ children, className, ...props }: MenuPanelProps) {
   return (
     <div
       className={cn(
-        'flex flex-col p-2',
+        // 2px between rows, as a list column's and a sidebar's (Katerina, 5 October).
+        'flex flex-col gap-0.5 p-2',
         FLOATING_SURFACE_CLASSES,
         /*
          * A divider in a menu runs the width of the rows it separates.
@@ -248,7 +249,7 @@ export function Menu({ trigger, align = 'left', openOnHover = false, open, onOpe
              * sentence was written at 0.12.6 and the prop was not: a `p-1` on
              * `className` added 4px to these 8px instead of replacing them
              * (PLAN Finding 60). The prop exists now. */}
-            <ScrollArea viewportClassName="max-h-[var(--available-height)]" contentClassName={cn('flex flex-col p-2', contentClassName)}>
+            <ScrollArea viewportClassName="max-h-[var(--available-height)]" contentClassName={cn('flex flex-col gap-0.5 p-2', contentClassName)}>
               <MenuContext.Provider value={{ openOnHover }}>
                 <DividerInPanel.Provider value={true}>{children}</DividerInPanel.Provider>
               </MenuContext.Provider>
@@ -578,14 +579,14 @@ export function MenuSection({ label, children, className }: { label: string; chi
   )
   if (!inMenu) {
     return (
-      <div className="flex flex-col">
+      <div className="flex flex-col gap-0.5">
         {heading}
         {children}
       </div>
     )
   }
   return (
-    <BaseMenu.Group className="flex flex-col">
+    <BaseMenu.Group className="flex flex-col gap-0.5">
       <BaseMenu.GroupLabel render={heading} />
       {children}
     </BaseMenu.Group>

package/src/NavItem.test.tsx

@@ -99,10 +99,10 @@ describe('NavItem unread', () => {
     expect(container.querySelector('[data-urgent], [data-unread]')).toBeNull()
   })
 
-  it('with a menu, the ⋮ sits in the 24px slot over the dot', () => {
+  it('with a menu over the dot, the ⋮ ends where a heading’s ⋮ ends', () => {
     render(<NavItem href="#" label="Item one" unread menu={<span>Action</span>} />)
     const menu = screen.getByRole('button', { name: 'More options for Item one' }).closest('[data-nav-menu]')
-    expect(menu?.className).toContain('right-2')
+    expect(menu?.className).toContain('right-1')
   })
 
   it('with a count and a menu, the ⋮ lands on the count', () => {

package/src/NavItem.tsx

@@ -108,7 +108,11 @@ export function NavItem({
   // What sits at the right at rest, after the count: the dot, or the badge.
   const mark = unread ? (urgent ? <UrgentMark /> : <UnreadDot />) : null
   // Under the ⋮ while it shows: the count and the mark step aside for it.
-  const stepsAside = menu != null && 'transition-opacity group-hover/nav:opacity-0 group-focus-within/nav:opacity-0 group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:opacity-0'
+  // "While it shows" is the pointer on the row or the keyboard in it
+  // (`:focus-visible`), never any focus: a clicked row keeps its focus, and
+  // with `focus-within` its icon and dot went while the arrow and the ⋮ stayed
+  // hidden (Katerina, 5 October).
+  const stepsAside = menu != null && 'transition-opacity group-hover/nav:opacity-0 group-has-[:focus-visible]/nav:opacity-0 group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:opacity-0'
 
   const row = (
     <a
@@ -135,7 +139,7 @@ export function NavItem({
           className={cn(
             // With rows under it the slot is kept even with no icon: the arrow lands in it.
             'flex min-w-4 shrink-0 items-center',
-            hasRows && 'transition-opacity group-hover/nav:opacity-0 group-focus-within/nav:opacity-0',
+            hasRows && 'transition-opacity group-hover/nav:opacity-0 group-has-[:focus-visible]/nav:opacity-0',
           )}
         >
           {icon}
@@ -144,7 +148,7 @@ export function NavItem({
       <span className={cn('flex-1 truncate', unread && 'font-medium')}>{label}</span>
       {hint != null && (
         // Takes room only while it shows, so the label gives way to it.
-        <span className="hidden shrink-0 items-center group-hover/nav:flex group-focus-within/nav:flex">{hint}</span>
+        <span className="hidden shrink-0 items-center group-hover/nav:flex group-has-[:focus-visible]/nav:flex">{hint}</span>
       )}
       {count ? (
         <WithTooltip label={countLabel ?? `${count} open`}>
@@ -164,12 +168,15 @@ export function NavItem({
         </WithTooltip>
       ) : null}
       {mark ? (
-        <span className={cn('flex shrink-0', stepsAside)}>{mark}</span>
+        // `-mr-1`: the 24px slot's dot then sits on the axis of a count and
+        // of the ⋮ (8px from the edge to the 16px box), one column with a
+        // folder heading's dot and ⋮ (Katerina, 5 October).
+        <span className={cn('-mr-1 flex shrink-0', stepsAside)}>{mark}</span>
       ) : menu != null && !count ? (
         // Nothing at the right, but a menu: no room is kept at rest, so the
         // label has the row's whole width; while the ⋮ shows, its 24px slot
         // is kept, so a long label ends before it instead of running under it.
-        <span aria-hidden="true" className="hidden w-6 shrink-0 group-hover/nav:block group-focus-within/nav:block group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:block" />
+        <span aria-hidden="true" className="hidden w-6 shrink-0 group-hover/nav:block group-has-[:focus-visible]/nav:block group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:block" />
       ) : null}
     </a>
   )
@@ -181,7 +188,7 @@ export function NavItem({
       {hasRows && (
         // `left-1`: the 24px button's 16px arrow then sits where the icon
         // sits (the row's px-2), so the icon turns into the arrow in place.
-        <div className="absolute inset-y-0 left-1 flex items-center opacity-0 transition-opacity focus-within:opacity-100 group-hover/nav:opacity-100">
+        <div className="absolute inset-y-0 left-1 flex items-center opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100">
           <IconButton
             tooltip={open ? 'Collapse' : 'Expand'}
             aria-label={open ? `Hide what is under ${label}` : `Show what is under ${label}`}
@@ -194,11 +201,13 @@ export function NavItem({
         </div>
       )}
       {menu != null && (
-        // On a count, `right-1`: the 24px button's 16px icon then ends 8px
-        // from the row's edge, where the count ends (px-2), so the ⋮ lands on
-        // the number. On the mark or the empty slot, `right-2`: the button
-        // sits in the 24px slot itself.
-        <div data-nav-menu className={cn('absolute inset-y-0 flex items-center', count && !mark ? 'right-1' : 'right-2', 'opacity-0 transition-opacity focus-within:opacity-100 group-hover/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100')}>
+        // `right-1`: the 24px button's 16px icon ends 8px from the row's
+        // edge, where a count ends (px-2) — and where a SectionHeader's
+        // actions and ⋮ end, so a folder's ⋮ and its rows' ⋮ are one column
+        // (Katerina, 5 October: the rows move to the heading, not the
+        // heading to the rows). Over a dot or the empty slot it sits 4px
+        // right of the slot's centre.
+        <div data-nav-menu className={cn('absolute inset-y-0 right-1 flex items-center', 'opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100')}>
           <Menu
             align="right"
             trigger={
@@ -225,7 +234,7 @@ export function NavItem({
         className={COLLAPSIBLE_PANEL_CLASSES}
       >
         {/* `pl-6`: past the 16px icon and its 8px gap, so the rows' icons start under this row's label. */}
-        <div className="flex flex-col gap-px pl-6">{children}</div>
+        <div className="flex flex-col gap-0.5 pt-0.5 pl-6">{children}</div>
       </Collapsible.Panel>
     </Collapsible.Root>
   )