@estiva-app/ui 0.50.3 → 0.51.0

package/dist/looks.d.ts

@@ -36,4 +36,11 @@ 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-md 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
+ * the panel is 0 high on its opening and closing frames. None under
+ * prefers-reduced-motion. CollapsibleSection's rows, and the rows under a NavItem.
+ */
+export declare const COLLAPSIBLE_PANEL_CLASSES = "h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0";
 //# sourceMappingURL=looks.d.ts.map

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;AAC5I,eAAO,MAAM,mBAAmB,iCAAiC,CAAA;AACjE,eAAO,MAAM,wBAAwB,gDAAgD,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;AAC5I,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.50.3",
+  "version": "0.51.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,9 +4,9 @@
     "kind": "package",
     "repo": "estiva-ui",
     "package": "@estiva-app/ui",
-    "packageVersion": "0.50.3",
-    "exports": 104,
-    "typeExports": 113,
+    "packageVersion": "0.51.0",
+    "exports": 105,
+    "typeExports": 116,
     "files": null
   },
   "storybook": {
@@ -1089,6 +1089,12 @@
           "required": false,
           "note": "`heading` (default): the title is a section heading."
         },
+        {
+          "name": "indent",
+          "takes": "true/false",
+          "required": false,
+          "note": "With the `heading` look: the rows start under the title, past the chevron — a folder in a sidebar, its files lightly indented under its name (Katerina, 2 October)."
+        },
         {
           "name": "children",
           "takes": "anything",
@@ -3512,6 +3518,36 @@
           "required": false,
           "note": "The ⋮'s accessible name and tooltip. Default \"More options for {label}\"."
         },
+        {
+          "name": "hint",
+          "takes": "anything",
+          "required": false,
+          "note": "Shown only while the row is pointed at or focused, left of the count: a neutral `Chip`, typically."
+        },
+        {
+          "name": "children",
+          "takes": "anything",
+          "required": false,
+          "note": "Rows under this one, folding under it: `NavItem`s."
+        },
+        {
+          "name": "defaultOpen",
+          "takes": "true/false",
+          "required": false,
+          "note": "With `children`: open unless told otherwise."
+        },
+        {
+          "name": "open",
+          "takes": "true/false",
+          "required": false,
+          "note": "With `children`: the caller owns the state."
+        },
+        {
+          "name": "onOpenChange",
+          "takes": "a handler",
+          "required": false,
+          "note": null
+        },
         {
           "name": "className",
           "takes": "text",
@@ -3520,7 +3556,12 @@
         }
       ],
       "variants": [],
-      "ownsBehaviours": [],
+      "ownsBehaviours": [
+        {
+          "id": "base-ui",
+          "behaviour": "Is built on Base UI"
+        }
+      ],
       "status": "stable",
       "migrationStage": null,
       "docsId": "frame-navitem--docs",
@@ -3531,9 +3572,66 @@
         "text-body-2 rounded-md transition-colors bg-bg-active text-text-primary",
         "text-body-2 rounded-md 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",
+        "overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none"
       ]
     },
+    {
+      "name": "NavTree",
+      "repo": "estiva-ui",
+      "kind": "component",
+      "importPath": "@estiva-app/ui",
+      "sourceFile": "src/NavTree.tsx",
+      "purpose": "A sidebar's tree from one nested list: a quiet label, groups that fold under the standard heading with their rows lightly indented, and rows under rows to any depth.",
+      "purposeFrom": "page",
+      "props": [
+        {
+          "name": "title",
+          "takes": "text",
+          "required": false,
+          "note": "The quiet label over the groups. Absent, none is drawn."
+        },
+        {
+          "name": "groups",
+          "takes": "NavTreeGroup[] | null",
+          "required": true,
+          "note": "`null` while the first read is on its way: a skeleton in the rows' place."
+        },
+        {
+          "name": "selected",
+          "takes": "text",
+          "required": false,
+          "note": "The row that is current: `active`, and its group starts open."
+        },
+        {
+          "name": "onSelect",
+          "takes": "a handler",
+          "required": false,
+          "note": "A row was clicked. A router app prevents the default and navigates."
+        },
+        {
+          "name": "emptyMessage",
+          "takes": "text",
+          "required": true,
+          "note": "What to say when there are no groups. The words are the caller's."
+        },
+        {
+          "name": "storageKey",
+          "takes": "text",
+          "required": false,
+          "note": "Remember each group open or closed in this browser, under this key and the group's id."
+        }
+      ],
+      "variants": [],
+      "ownsBehaviours": [],
+      "status": "stable",
+      "migrationStage": null,
+      "docsId": "frame-navtree--docs",
+      "storyId": "frame-navtree--default",
+      "docPage": "src/NavTree.mdx",
+      "app": null,
+      "looks": []
+    },
     {
       "name": "normalizeHref",
       "repo": "estiva-ui",
@@ -4686,6 +4784,12 @@
           "required": false,
           "note": "Cut a long label short with an ellipsis instead of letting it wrap or spill."
         },
+        {
+          "name": "folds",
+          "takes": "true/false",
+          "required": false,
+          "note": "The title of a group that opens and closes."
+        },
         {
           "name": "className",
           "takes": "text",
@@ -4711,6 +4815,12 @@
       "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",

package/src/BlockNodes.test.tsx

@@ -374,6 +374,49 @@ describe('a commented paragraph turned into a quote or a list — MAN-12', () =>
     })
   }
 
+  // Ship's `/` menu at the start of the text: type the command, then delete it and wrap in one change.
+  for (const [name, typed, run, type] of [
+    ['quote', '/quo', (c: Chain) => c.setBlockquote(), 'blockquote'],
+    ['bullet list', '/bul', (c: Chain) => c.toggleBulletList(), 'bulletList'],
+    ['numbered list', '/num', (c: Chain) => c.toggleOrderedList(), 'orderedList'],
+  ] as const) {
+    it(`keeps the id when the / menu at the start of the text makes a ${name}`, () => {
+      editor = new Editor({ extensions: EXTENSIONS, content: TWO })
+      editor.chain().setTextSelection(1).insertContent(typed).run()
+      run(editor.chain().focus().deleteRange({ from: 1, to: 1 + typed.length })).run()
+      const [turned, outer, item] = first()
+      expect(turned).toBe(type)
+      expect(type === 'blockquote' ? outer : item).toBe('p0')
+    })
+  }
+
+  // Peek's and Ship's typed shortcuts: the input rule deletes what was typed and wraps.
+  for (const [typed, type] of [['> ', 'blockquote'], ['- ', 'bulletList'], ['1. ', 'orderedList']] as const) {
+    it(`keeps the id when "${typed}" is typed at the start of the text`, () => {
+      editor = new Editor({ extensions: EXTENSIONS, content: TWO })
+      const { view } = editor
+      editor.commands.setTextSelection(1)
+      for (const ch of typed) {
+        const { from, to } = view.state.selection
+        const handled = view.someProp('handleTextInput', (f) => f(view, from, to, ch, () => view.state.tr.insertText(ch, from, to)))
+        if (!handled) view.dispatch(view.state.tr.insertText(ch, from, to))
+      }
+      const [turned, outer, item] = first()
+      expect(turned).toBe(type)
+      expect(type === 'blockquote' ? outer : item).toBe('p0')
+      expect(editor.state.doc.textContent.startsWith('intro')).toBe(true)
+    })
+  }
+
+  it('gives a block pasted over a whole paragraph its own id, not the paragraph’s', () => {
+    editor = new Editor({ extensions: EXTENSIONS, content: TWO })
+    editor.commands.setNodeSelection(0)
+    editor.view.pasteHTML('<blockquote><p>new</p></blockquote>')
+    const ids = JSON.stringify(editor.getJSON())
+    expect(editor.state.doc.child(0).type.name).toBe('blockquote')
+    expect(ids).not.toContain('"p0"')
+  })
+
   it('hands the id back to the paragraph when the quote or the list is turned off', () => {
     for (const run of [(c: Chain) => c.toggleBlockquote(), (c: Chain) => c.toggleBulletList(), (c: Chain) => c.toggleOrderedList()]) {
       editor = new Editor({ extensions: EXTENSIONS, content: TWO })

package/src/BlockNodes.tsx

@@ -192,7 +192,10 @@ function hiddenIds(doc: ProseMirrorNode): number[] {
  * {@link BlockId}. An id the save addressed before the change and does not
  * now goes to the innermost new block its text was carried into: the quote or
  * the list item around a paragraph, or the paragraph lifted out of one.
- * Text the change deleted hands nothing on.
+ * A block the change deleted hands nothing on. What it asks is whether the
+ * block's own opening survived, the token left of its text, not its first
+ * character: the `/` menu and a typed `> ` or `- ` delete what was typed at
+ * the very start of the text in the same change as the wrap.
  */
 function handedOver(doc: ProseMirrorNode, before: ProseMirrorNode, mapping: Mapping, unnamed: number[]): Map<number, string> {
   const out = new Map<number, string>()
@@ -205,7 +208,7 @@ function handedOver(doc: ProseMirrorNode, before: ProseMirrorNode, mapping: Mapp
     .sort((a, b) => a.start - b.start || b.pos - a.pos)
   for (const old of gone) {
     const id = idOf(old.node)!
-    const { pos: at, deleted } = mapping.mapResult(old.start, 1)
+    const { pos: at, deleted } = mapping.mapResult(old.start, -1)
     if (deleted) continue
     let inner: number | undefined
     for (const pos of unnamed) {

package/src/CollapsibleSection.mdx

@@ -28,6 +28,12 @@ toggle, and the rows under it, sliding shut and open.
 
 <Canvas of={CollapsibleSectionStories.AsARow} />
 
+- `indent` with the standard heading: its rows start under its title, past
+  the chevron — a group in a sidebar whose rows read as inside it. **NavTree**
+  draws its groups this way.
+
+<Canvas of={CollapsibleSectionStories.Indented} />
+
 In a sidebar — the Sidebar's own Composed canvas, which is where that
 composition lives:
 

package/src/CollapsibleSection.stories.tsx

@@ -47,3 +47,8 @@ export const Remembered: Story = { args: { storageKey: 'estiva-ui.stories.collap
 export const AsARow: Story = {
   args: { title: 'Folder', look: 'row' },
 }
+
+/** `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

@@ -2,6 +2,7 @@ import { useState, type ReactNode } from 'react'
 import { Collapsible } from '@base-ui/react/collapsible'
 import { cn } from './cn'
 import { SectionHeader, type SectionAction } from './SectionHeader'
+import { COLLAPSIBLE_PANEL_CLASSES } from './looks'
 
 /**
  * A section that opens and closes: a `SectionHeader` whose title is the
@@ -42,6 +43,12 @@ export interface CollapsibleSectionProps {
    * its title, past the chevron (`SectionHeader`'s `look`).
    */
   look?: 'heading' | 'row'
+  /**
+   * With the `heading` look: the rows start under the title, past the
+   * chevron — a folder in a sidebar, its files lightly indented under its
+   * name (Katerina, 2 October). The `row` look always indents.
+   */
+  indent?: boolean
   /** The rows. */
   children: ReactNode
   /** On the section's box: `mt-2` between groups, `shrink-0` in a scrolling column. */
@@ -72,7 +79,7 @@ function writeStored(key: string | undefined, open: boolean) {
   }
 }
 
-export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, look = 'heading', children, className, contentClassName }: CollapsibleSectionProps) {
+export function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenChange, storageKey, trailing, actions, showActions, look = 'heading', indent = false, children, className, contentClassName }: CollapsibleSectionProps) {
   const [openState, setOpenState] = useState(() => readStored(storageKey) ?? defaultOpen)
   const open = openProp ?? openState
   const setOpen = (next: boolean) => {
@@ -91,10 +98,11 @@ export function CollapsibleSection({ title, defaultOpen = true, open: openProp,
           prefers-reduced-motion. */}
       <Collapsible.Panel
         hiddenUntilFound
-        className="h-[var(--collapsible-panel-height)] overflow-hidden transition-[height] duration-150 ease-out motion-reduce:transition-none data-[starting-style]:h-0 data-[ending-style]:h-0"
+        className={COLLAPSIBLE_PANEL_CLASSES}
       >
-        {/* A row's rows start under its title: the 16px chevron and its 8px gap (pl-6). */}
-        <div className={cn('flex flex-col', look === 'row' && 'pl-6', contentClassName)}>{children}</div>
+        {/* 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>
       </Collapsible.Panel>
     </Collapsible.Root>
   )

package/src/NavItem.mdx

@@ -28,6 +28,19 @@ count — a muted mono number whose tooltip says what it counts.
 
 <Canvas of={NavItemStories.WithMenu} />
 
+- A row with rows under it takes them as `children`: more `NavItem`s. The
+  row stays a link; while it is pointed at or focused, its icon becomes the
+  arrow that folds them, in the icon's own place, and they slide shut. For a
+  whole tree from one list, use **NavTree**.
+
+<Canvas of={NavItemStories.WithRowsUnder} />
+
+- A word that helps only while the row is pointed at — where the item comes
+  from — is `hint`: pass a neutral **Chip**. It shows left of the count, and
+  the label ends with "…" before it instead of running under it.
+
+<Canvas of={NavItemStories.WithHintLongLabel} />
+
 ## When not
 
 - An icon rail's tile → **RailItem**.
@@ -55,6 +68,11 @@ import { NavItem } from '@estiva-app/ui'
 - The label truncates; the count never gives up its width.
 - `menu` is the items only: `menu={<MenuItem label="Move to Folder…" onClick={move} />}`.
   The ⋮'s name is `More options for {label}` unless `menuLabel` says otherwise.
+- `children` start open; `defaultOpen={false}` starts them folded, and
+  `open` with `onOpenChange` hands the state to the app. The arrow's name is
+  `Hide what is under {label}` or `Show what is under {label}`.
+- `hint` takes room only while it shows, so a label at rest keeps its full
+  width.
 
 - A row is 32px tall, 8px in on each side, 8px between the icon and the label,
   the label 14px regular, 6px corners.
@@ -68,6 +86,18 @@ It does these by itself. Write none of them around it.
 | Marks the current place for assistive technology when `active` | `aria-current` |  |
 | Keeps its 32px in a scrolling column | `shrink-0` |  |
 | Shows a ⋮ over the count while pointed at, focused or open, and keeps the row's hover look under it | a positioned `IconButton` + `Menu` over the row, `group-hover` reveals |  |
+| Turns its icon into the arrow that folds `children` while pointed at or focused, and slides them | a positioned `IconButton` over the icon, open state, `group-hover` reveals, an indented box |  |
+| Tells assistive technology whether its rows are open | `aria-expanded`, `aria-controls` |  |
+| Shows `hint` only while pointed at or focused, and makes the label give way | a positioned chip over the row, `group-hover` reveals |  |
+
+## Keys
+
+| Key | Does |
+|---|---|
+| Tab | the link, then its arrow (with `children`), then its ⋮ (with `menu`) |
+| Enter, Space | on the arrow: folds or unfolds the rows under it |
+
+The rows are not an ARIA tree: there are no arrow keys between rows yet.
 
 ## Props
 

package/src/NavItem.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { IconSquareRounded } from '@tabler/icons-react'
+import { Chip } from './Chip'
 import { MenuItem } from './Menu'
 import { NavItem } from './NavItem'
 
@@ -60,3 +61,36 @@ export const WithMenuActive: Story = {
 export const WithMenuNoCount: Story = {
   args: { label: 'An item whose label runs much longer than the column has room for', icon: placeholder, menu: MENU },
 }
+
+/** A hint shows only while the row is pointed at or focused, left of the count: here a neutral Chip. */
+export const WithHint: Story = {
+  args: { icon: placeholder, count: 3, countLabel: '3 open', hint: <Chip type="neutral" label="Label" /> },
+}
+
+/** A long label gives way to the hint while it shows: it ends with "…" before the chip instead of running under it. */
+export const WithHintLongLabel: Story = {
+  args: { label: 'An item whose label runs much longer than the column has room for', icon: placeholder, count: 12, countLabel: '12 open', hint: <Chip type="neutral" label="Label" /> },
+}
+
+/** Rows under a row: point at it and its icon becomes the arrow that folds them. The row itself stays a link. */
+export const WithRowsUnder: Story = {
+  args: { icon: placeholder },
+  render: (args) => (
+    <NavItem {...args}>
+      <NavItem href="#" label="Item two" icon={placeholder} />
+      <NavItem href="#" label="Item three" icon={placeholder}>
+        <NavItem href="#" label="Item four" icon={placeholder} />
+      </NavItem>
+    </NavItem>
+  ),
+}
+
+/** Starts folded: point at it, or Tab to its arrow, to open it. */
+export const WithRowsUnderClosed: Story = {
+  args: { icon: placeholder, defaultOpen: false },
+  render: (args) => (
+    <NavItem {...args}>
+      <NavItem href="#" label="Item two" icon={placeholder} />
+    </NavItem>
+  ),
+}

package/src/NavItem.test.tsx

@@ -0,0 +1,82 @@
+// @vitest-environment jsdom
+/**
+ * What the page claims for the rows under a row and the hint: the arrow folds
+ * the rows and says so, the rows are hidden rather than gone, the row itself
+ * stays a link a click does not fold, and the hint is there to be revealed.
+ * The reveal on hover and the slide are Chrome's to show.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { NavItem } from './NavItem'
+
+afterEach(cleanup)
+
+const arrow = (name: RegExp) => screen.getByRole('button', { name })
+
+describe('NavItem with rows under it', () => {
+  const tree = (props: Partial<Parameters<typeof NavItem>[0]> = {}) => (
+    <NavItem href="#one" label="Item one" {...props}>
+      <NavItem href="#two" label="Item two" />
+    </NavItem>
+  )
+
+  it('starts open: the arrow says so and names what it folds, and the rows are there', () => {
+    render(tree())
+    const button = arrow(/Hide what is under Item one/)
+    expect(button.getAttribute('aria-expanded')).toBe('true')
+    expect(document.getElementById(button.getAttribute('aria-controls') ?? '')).not.toBeNull()
+    expect(screen.getByText('Item two').closest('[hidden]')).toBeNull()
+  })
+
+  it('the arrow folds the rows, hidden rather than gone, and unfolds them', async () => {
+    render(tree())
+    await userEvent.click(arrow(/Hide what is under Item one/))
+    expect(arrow(/Show what is under Item one/).getAttribute('aria-expanded')).toBe('false')
+    expect(screen.getByText('Item two').closest('[hidden]')).not.toBeNull()
+    await userEvent.click(arrow(/Show what is under Item one/))
+    expect(screen.getByText('Item two').closest('[hidden]')).toBeNull()
+  })
+
+  it('a click on the row is the link’s, and does not fold it', async () => {
+    const onClick = vi.fn((event: { preventDefault: () => void }) => event.preventDefault())
+    render(tree({ onClick }))
+    await userEvent.click(screen.getByRole('link', { name: 'Item one' }))
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(arrow(/Hide what is under Item one/).getAttribute('aria-expanded')).toBe('true')
+  })
+
+  it('starts folded with defaultOpen false, and reports a change through onOpenChange', async () => {
+    const onOpenChange = vi.fn()
+    render(tree({ defaultOpen: false, onOpenChange }))
+    expect(screen.getByText('Item two').closest('[hidden]')).not.toBeNull()
+    await userEvent.click(arrow(/Show what is under Item one/))
+    expect(onOpenChange).toHaveBeenCalledWith(true)
+  })
+
+  it('Enter on the arrow folds the rows', async () => {
+    render(tree())
+    arrow(/Hide what is under Item one/).focus()
+    await userEvent.keyboard('{Enter}')
+    expect(arrow(/Show what is under Item one/).getAttribute('aria-expanded')).toBe('false')
+  })
+
+  it('a row with a menu and rows under it: the open rows do not hold the ⋮ open', () => {
+    render(tree({ menu: <span>Action</span> }))
+    const menu = screen.getByRole('button', { name: 'More options for Item one' }).closest('[data-nav-menu]')
+    expect(menu).not.toBeNull()
+    expect(menu?.querySelector('[aria-expanded=true]')).toBeNull()
+  })
+})
+
+describe('NavItem with a hint', () => {
+  it('draws the hint inside the row, beside the label', () => {
+    render(<NavItem href="#" label="Item one" hint={<span>Label</span>} />)
+    expect(screen.getByRole('link', { name: /Item one/ }).textContent).toContain('Label')
+  })
+
+  it('without children, a menu or a hint, the row is the bare link', () => {
+    const { container } = render(<NavItem href="#" label="Item one" />)
+    expect(container.firstElementChild?.tagName).toBe('A')
+  })
+})