@estiva-app/ui 0.56.0 → 0.57.0

package/dist/looks.d.ts

@@ -34,12 +34,12 @@ 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). */
+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";
-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 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,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"}
+{"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.56.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.56.0",
+    "packageVersion": "0.57.0",
     "exports": 130,
     "typeExports": 134,
     "files": null
@@ -1201,7 +1201,7 @@
           "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",
@@ -3952,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"
       ]
     },
@@ -4061,7 +4061,7 @@
           "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",
@@ -5239,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": [
         {
@@ -5300,7 +5300,7 @@
           "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",
@@ -5363,7 +5363,8 @@
         "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"
+        "rounded-lg transition-colors text-text-secondary hover:text-text-primary hover:bg-bg-hover",
+        "opacity-0 transition-opacity group-hover:opacity-100 [@media(hover:none)]:opacity-100"
       ]
     },
     {

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.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

@@ -36,7 +36,7 @@ export interface CollapsibleSectionProps {
   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

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/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/NavItem.mdx

@@ -24,7 +24,9 @@ count — a muted mono number whose tooltip says what it counts.
 
 - A row with things to do to it — move it, rename it — takes them as
   `menu`: pass `MenuItem`s, and the row draws the ⋮, shows it while the row
-  is pointed at or focused, and moves the count aside for it.
+  is pointed at or keyboard-focused, and moves the count aside for it. On a
+  screen with no hover the ⋮ always shows, and the count or dot under it
+  stays aside: the row reads as it does under a pointer.
 
 <Canvas of={NavItemStories.WithMenu} />
 

package/src/NavItem.test.tsx

@@ -94,6 +94,17 @@ describe('NavItem unread', () => {
     expect(container.querySelector('[data-unread]')).toBeNull()
   })
 
+  it('the dot and the badge are pulled 4px right (-mr-1), onto the axis of a count and of the ⋮', () => {
+    const { container } = render(
+      <>
+        <NavItem href="#" label="Item one" unread />
+        <NavItem href="#" label="Item two" unread urgent />
+      </>,
+    )
+    expect(container.querySelector('[data-unread]')!.parentElement!.className.split(' ')).toContain('-mr-1')
+    expect(container.querySelector('[data-urgent]')!.parentElement!.className.split(' ')).toContain('-mr-1')
+  })
+
   it('urgent without unread draws nothing', () => {
     const { container } = render(<NavItem href="#" label="Item one" urgent />)
     expect(container.querySelector('[data-urgent], [data-unread]')).toBeNull()
@@ -105,6 +116,25 @@ describe('NavItem unread', () => {
     expect(menu?.className).toContain('right-1')
   })
 
+  it('on a screen with no hover the ⋮ always shows, and the count steps aside for it', () => {
+    render(<NavItem href="#" label="Item one" count={3} menu={<span>Action</span>} />)
+    const menu = screen.getByRole('button', { name: 'More options for Item one' }).closest('[data-nav-menu]')!
+    expect(menu.className.split(' ')).toContain('[@media(hover:none)]:opacity-100')
+    expect(screen.getByText('3').className.split(' ')).toContain('[@media(hover:none)]:opacity-0')
+  })
+
+  it('on a screen with no hover, with nothing at the right, the ⋮’s place is kept so the label stops before it', () => {
+    const { container } = render(<NavItem href="#" label="Item one" menu={<span>Action</span>} />)
+    expect(container.querySelector('a > [aria-hidden="true"]')!.className.split(' ')).toContain('[@media(hover:none)]:block')
+  })
+
+  it('with nothing at the right, the ⋮’s kept place is the ⋮’s own, at right-1, so the label loses no more than it covers', () => {
+    const { container } = render(<NavItem href="#" label="Item one" menu={<span>Action</span>} />)
+    // The slot is pulled 4px into the padding, as the ⋮ is (`right-1`): measured, the label then stops 8px before the button, not 12.
+    expect(container.querySelector('a > [aria-hidden="true"]')!.className.split(' ')).toEqual(expect.arrayContaining(['-mr-1', 'w-6']))
+    expect(screen.getByRole('button', { name: 'More options for Item one' }).closest('[data-nav-menu]')!.className).toContain('right-1')
+  })
+
   it('with a count and a menu, the ⋮ lands on the count', () => {
     render(<NavItem href="#" label="Item one" count={3} menu={<span>Action</span>} />)
     const menu = screen.getByRole('button', { name: 'More options for Item one' }).closest('[data-nav-menu]')

package/src/NavItem.tsx

@@ -112,7 +112,9 @@ export function NavItem({
   // (`: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'
+  // A screen with no hover shows the ⋮ always (below), so what it lands on
+  // steps aside always: the row reads as it does under a pointer.
+  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 [@media(hover:none)]:opacity-0'
 
   const row = (
     <a
@@ -176,7 +178,10 @@ export function NavItem({
         // 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-has-[:focus-visible]/nav:block group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:block" />
+        // `-mr-1`: the ⋮ sits at `right-1`, 4px into the row's padding, so the
+        // slot does too — at the padding's edge it kept 4px the ⋮ never
+        // covers, and the label stopped 12px short of the button, not 8.
+        <span aria-hidden="true" className="-mr-1 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 [@media(hover:none)]:block" />
       ) : null}
     </a>
   )
@@ -207,7 +212,9 @@ export function NavItem({
         // (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')}>
+        // On a screen with no hover it always shows: nothing there can point
+        // at the row, and the menu has no other way in.
+        <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 [@media(hover:none)]:opacity-100')}>
           <Menu
             align="right"
             trigger={

package/src/NavTree.test.tsx

@@ -130,6 +130,27 @@ describe('NavTree marks its groups', () => {
   })
 })
 
+/**
+ * 4px between groups and none above the first, title or no title. The margin
+ * was `mt-1 first:mt-0`, and the quiet title is drawn before the groups, so
+ * the first group under a title was never the first child and took the 4px
+ * (measured in Chrome: 6px under the title, 2px after).
+ */
+describe('NavTree spaces its groups', () => {
+  it('only a group after a group takes the 4px, so the first sits at the column’s 2px under the title', () => {
+    const { container } = render(<NavTree title="Groups" groups={GROUPS} emptyMessage="Nothing here yet." />)
+    const boxes = [...container.querySelectorAll<HTMLElement>('[data-nav-group]')]
+    for (const box of boxes) {
+      const classes = box.className.split(' ')
+      expect(classes).toContain('[&+&]:mt-1')
+      expect(classes).not.toContain('mt-1')
+    }
+    // The selector's own terms: the first group follows the title, which is no group.
+    expect(boxes[0].previousElementSibling!.className.split(' ')).not.toContain('[&+&]:mt-1')
+    expect(boxes[1].previousElementSibling).toBe(boxes[0])
+  })
+})
+
 describe('NavTree with no groups and no words', () => {
   it('draws no line at all', () => {
     const { container } = render(<NavTree groups={[]} />)

package/src/NavTree.tsx

@@ -50,7 +50,7 @@ export interface NavTreeGroup {
   message?: string
   /** Beside the title, always shown: an `UnreadDot`, typically. */
   trailing?: ReactNode
-  /** Beside the title, shown on hover or focus: "Open", typically. */
+  /** Beside the title, shown while the row is hovered or keyboard-focused: "Open", typically. */
   actions?: SectionAction[]
   /** The group's "More options" menu, after its actions: `MenuItem`s — a folder's Rename, Archive. */
   menu?: ReactNode
@@ -171,7 +171,7 @@ export interface NavTreeSectionProps {
   message?: string
   /** Beside the title, always shown: an `UnreadDot`, typically. */
   trailing?: ReactNode
-  /** Beside the title, shown on hover or focus: "Open", typically. */
+  /** Beside the title, shown while the row is hovered or keyboard-focused: "Open", typically. */
   actions?: SectionAction[]
   /** The group's "More options" menu, after its actions: `MenuItem`s. */
   menu?: ReactNode
@@ -209,7 +209,11 @@ export function NavTreeSection({ id, title, message, loading = false, trailing,
       // sits 38px from the next (Katerina, 5 October: 42 was too far from rows
       // 33 apart; halved), and the list starts 16px under its header, as every
       // list column does (on the first group it read 20, Topics against People).
-      className="mt-1 shrink-0 first:mt-0"
+      // The margin is on a group that follows a group (`[&+&]`), not "all but
+      // the first child": NavTree draws its quiet title before the groups, so
+      // with `first:mt-0` the first group under a title still took the 4px
+      // (measured 6px under the title, 2px once the margin went).
+      className="shrink-0 [&+&]:mt-1"
       data-nav-group={id}
       onPointerEnter={intent ? () => { clearTimeout(timer.current); timer.current = setTimeout(intent, NAV_TREE_INTENT_MS) } : undefined}
       onPointerLeave={intent ? () => clearTimeout(timer.current) : undefined}

package/src/SectionHeader.mdx

@@ -6,7 +6,8 @@ import * as SectionHeaderStories from './SectionHeader.stories'
 # SectionHeader
 
 The 32px row a section starts with: a SectionLabel, and actions that
-appear on hover or focus as IconButtons with tooltips. It is also the
+appear while the row is hovered or keyboard-focused, as IconButtons with
+tooltips — always, on a screen with no hover. It is also the
 header of a **CollapsibleSection**, which draws the chevron and makes the
 title the toggle — that is where a section folds.
 
@@ -86,7 +87,7 @@ It does these by itself. Write none of them around it.
 | It does | So you never write | Refused when written by hand |
 |---|---|---|
 | With `chevron`, its title is a button that calls `onToggle` on a click, Enter or Space, and says whether it is open | a button of your own, or `aria-expanded` |  |
-| Shows its actions while one of them has focus | a focus style of your own |  |
+| Shows its actions while the keyboard is in the row — on the title or on one of them — and always on a screen with no hover | a focus style of your own |  |
 | Keeps its 32px in a scrolling column | `shrink-0` |  |
 
 ## Keys
@@ -94,7 +95,7 @@ It does these by itself. Write none of them around it.
 | Key | Does |
 |---|---|
 | Enter, Space | on the title, with `chevron`: calls `onToggle` |
-| Tab | the title, then each action — the actions show while one has focus |
+| Tab | the title, then each action — the actions show from the title on |
 
 ## Props
 

package/src/SectionHeader.test.tsx

@@ -8,6 +8,7 @@ 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 { NavItem } from './NavItem'
 import { SectionHeader } from './SectionHeader'
 import { UnreadDot } from './UnreadDot'
 
@@ -50,6 +51,55 @@ describe('SectionHeader', () => {
   })
 })
 
+/**
+ * When the buttons show. The pointer and the menu are Chrome's to prove (the
+ * stories); what is pinned here is which element each reveal asks.
+ */
+describe('SectionHeader, the reveal', () => {
+  const menu = <MenuItem label="Rename" />
+  const actions = [{ icon: <span />, tooltip: 'Add', onClick: () => {} }]
+
+  it('shows the buttons once the title’s toggle has keyboard focus, as a NavItem shows its ⋮ for its link', () => {
+    const { container } = render(<SectionHeader title="Section" chevron onToggle={() => {}} actions={actions} menu={menu} />)
+    const row = container.firstElementChild as HTMLElement
+    const toggle = screen.getByRole('button', { name: 'Section' })
+    const buttons = screen.getByRole('button', { name: 'Add' }).parentElement!
+    // The row is the group, and it holds the toggle: the reveal asks the row, not the buttons' own box.
+    expect(row.className.split(' ')).toContain('group')
+    expect(row.contains(toggle)).toBe(true)
+    expect(buttons.className.split(' ')).toContain('group-has-[:focus-visible]:opacity-100')
+    expect(buttons.className.split(' ')).not.toContain('has-[:focus-visible]:opacity-100')
+    // An open menu holds them, asked of their own box: the toggle's aria-expanded must not.
+    expect(buttons.className.split(' ')).toContain('has-[[aria-expanded=true]]:opacity-100')
+  })
+
+  it('on a screen with no hover the buttons always show, and a dot under them steps aside', () => {
+    const { container } = render(<SectionHeader title="Section" trailing={<UnreadDot />} actions={actions} menu={menu} />)
+    expect(screen.getByRole('button', { name: 'Add' }).parentElement!.className.split(' ')).toContain('[@media(hover:none)]:opacity-100')
+    expect(container.querySelector('[data-unread]')!.parentElement!.className.split(' ')).toContain('[@media(hover:none)]:has-[[data-unread]]:opacity-0')
+  })
+
+  it('no reveal answers to any focus (`focus-within`): a clicked row kept its focus and lost its icon and dot (0.56.0)', () => {
+    const { container } = render(
+      <>
+        <SectionHeader title="Section" chevron icon={<span />} onToggle={() => {}} trailing={<UnreadDot />} actions={actions} menu={menu} />
+        <NavItem href="#" label="Item one" icon={<span />} count={2} hint={<span>Label</span>} menu={menu}>
+          <NavItem href="#" label="Item two" unread menu={menu} />
+        </NavItem>
+      </>,
+    )
+    const classes = [...container.querySelectorAll('*')].map((e) => e.getAttribute('class') ?? '').join(' ')
+    expect(classes).not.toContain('focus-within')
+    // The keyboard's reveal is what replaced it.
+    expect(classes).toContain('group-has-[:focus-visible]')
+  })
+
+  it('with showActions="always" there is nothing to reveal', () => {
+    render(<SectionHeader title="Section" actions={actions} showActions="always" />)
+    expect(screen.getByRole('button', { name: 'Add' }).parentElement!.className).not.toContain('opacity-0')
+  })
+})
+
 /**
  * The trailing slot (0.12.2, ADOPTION B23). Peek's Screener header carries its
  * count as a Chip there, and was the last hand-drawn folding header in the app
@@ -78,13 +128,26 @@ describe('SectionHeader, the trailing slot', () => {
     const { container } = render(
       <SectionHeader title="Section" trailing={<UnreadDot />} actions={[{ icon: <span />, tooltip: 'Open', onClick: () => {} }]} menu={<MenuItem label="Rename" />} />,
     )
-    const dot = container.querySelector('[data-unread]')!
-    // Inside the buttons' box, over the last one — not a slot of its own before them.
-    expect(dot.closest('[class~="group/acts"]')).not.toBe(null)
-    expect(dot.parentElement!.className).toContain('group-hover:opacity-0')
+    const slot = container.querySelector('[data-unread]')!.parentElement!
+    // Over the last button, out of the row's flow — not a slot of its own before them — and gone while they show.
+    expect(slot.className.split(' ')).toEqual(expect.arrayContaining(['has-[[data-unread]]:absolute', 'has-[[data-unread]]:right-1', 'has-[[data-unread]]:w-6', 'group-hover:has-[[data-unread]]:opacity-0']))
+    expect(slot.matches(':has([data-unread])')).toBe(true)
     expect(screen.getByRole('button', { name: 'More options for Section' })).not.toBeNull()
   })
 
+  it('a dot is found by what it draws, not by its element: one in a wrapper of the app’s own steps aside too', () => {
+    render(
+      <SectionHeader title="Section" trailing={<span data-testid="wrapped"><UnreadDot /></span>} menu={<MenuItem label="Rename" />} />,
+    )
+    const slot = screen.getByTestId('wrapped').parentElement!
+    expect(slot.matches(':has([data-unread])')).toBe(true)
+    expect(slot.className.split(' ')).toContain('has-[[data-unread]]:absolute')
+    // A count holds no dot, so the same slot keeps it beside the buttons.
+    cleanup()
+    render(<SectionHeader title="Section" trailing={<span data-testid="count">2</span>} menu={<MenuItem label="Rename" />} />)
+    expect(screen.getByTestId('count').parentElement!.matches(':has([data-unread])')).toBe(false)
+  })
+
   it('an icon shows at rest, and folding, the arrow is in its place', () => {
     const { container } = render(<SectionHeader title="Section" chevron icon={<span data-icon />} onToggle={() => {}} />)
     const icon = container.querySelector('[data-icon]')!
@@ -95,6 +158,6 @@ describe('SectionHeader, the trailing slot', () => {
 
   it('a dot with no buttons sits on their axis all the same', () => {
     const { container } = render(<SectionHeader title="Section" trailing={<UnreadDot />} />)
-    expect(container.querySelector('[data-unread]')!.parentElement!.className).toContain('-mr-1')
+    expect(container.querySelector('[data-unread]')!.parentElement!.className.split(' ')).toContain('has-[[data-unread]]:-mr-1')
   })
 })