@estiva-app/ui 0.12.5 → 0.12.7

package/package.json

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

package/src/ChipInput.mdx

@@ -51,6 +51,10 @@ import { ChipInput } from '@estiva-app/ui'
   edge, a bare label gets 8px.
 - Suggestions appear **only once the user types** — focusing must not drop
   the whole directory over the surface below.
+- It is a **combobox over a listbox**: focus stays in the text while the
+  arrow keys move through the suggestions, and a screen reader is told which
+  one is highlighted. The list is as wide as the field and hangs below it,
+  or above when there is no room.
 
 ## Keys
 
@@ -59,6 +63,8 @@ import { ChipInput } from '@estiva-app/ui'
 | typing | filters; suggestions appear |
 | ↑ / ↓ | move the highlight |
 | Enter | adds the highlighted entry |
+| click a suggestion | adds it; focus stays in the text |
+| ✕ on a chip | removes that chip |
 | Backspace, empty query | removes the last chip — consumed, never the surface's "back" |
 | Escape, with a query | clears the query — consumed |
 | Escape, idle | bubbles, so the dialog or launcher around it can act |

package/src/ChipInput.test.tsx

@@ -0,0 +1,142 @@
+// @vitest-environment jsdom
+/**
+ * What the ChipInput page claims, pinned. It had no test file before stage 5
+ * (2026-09-13), so every promise below was held only by reading the code —
+ * and moving it onto Base UI's `Combobox` is exactly the change that could
+ * have broken one quietly.
+ *
+ * jsdom computes no layout, so where the list hangs and how wide it is were
+ * measured in Chrome instead (the list 384px against a 384px field, below it,
+ * its bar 1px from the edge). What is here is behaviour and roles.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { ChipInput, type ChipInputOption } from './ChipInput'
+
+afterEach(cleanup)
+
+const PEOPLE: ChipInputOption[] = [
+  { id: 'ada', label: 'Ada Lovelace', description: 'Engineer' },
+  { id: 'grace', label: 'Grace Hopper', description: 'Admiral' },
+  { id: 'alan', label: 'Alan Turing', description: 'Mathematician' },
+]
+
+function Harness({ initial = [], excludeIds, onChange }: { initial?: ChipInputOption[]; excludeIds?: string[]; onChange?: (v: ChipInputOption[]) => void }) {
+  const [value, setValue] = useState(initial)
+  return (
+    <ChipInput
+      value={value}
+      onChange={(next) => {
+        setValue(next)
+        onChange?.(next)
+      }}
+      options={PEOPLE}
+      excludeIds={excludeIds}
+      placeholder="Search people"
+    />
+  )
+}
+
+describe('ChipInput', () => {
+  it('shows nothing until you type — focus alone must not drop the directory', async () => {
+    const user = userEvent.setup()
+    render(<Harness />)
+    await user.click(screen.getByRole('combobox'))
+    expect(screen.queryByRole('listbox')).toBeNull()
+  })
+
+  it('is a combobox over a listbox, and focus stays in the text', async () => {
+    const user = userEvent.setup()
+    render(<Harness />)
+    const input = screen.getByRole('combobox')
+    await user.type(input, 'a')
+    expect(await screen.findByRole('listbox')).toBeTruthy()
+    expect(screen.getAllByRole('option').length).toBeGreaterThan(0)
+    expect(document.activeElement).toBe(input)
+    expect(input.getAttribute('aria-expanded')).toBe('true')
+  })
+
+  it('names the highlighted row through aria-activedescendant', async () => {
+    const user = userEvent.setup()
+    render(<Harness />)
+    const input = screen.getByRole('combobox')
+    await user.type(input, 'a')
+    await screen.findByRole('listbox')
+    await user.keyboard('{ArrowDown}')
+    const id = input.getAttribute('aria-activedescendant')
+    expect(id).toBeTruthy()
+    expect(document.getElementById(id!)?.getAttribute('role')).toBe('option')
+  })
+
+  it('Enter picks the highlighted row, clears the query and closes the list', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness onChange={onChange} />)
+    const input = screen.getByRole('combobox') as HTMLInputElement
+    await user.type(input, 'grace')
+    await screen.findByRole('listbox')
+    await user.keyboard('{ArrowDown}{Enter}')
+    expect(onChange).toHaveBeenLastCalledWith([PEOPLE[1]])
+    expect(input.value).toBe('')
+    expect(screen.queryByRole('listbox')).toBeNull()
+    expect(screen.getByRole('button', { name: 'Remove Grace Hopper' })).toBeTruthy()
+  })
+
+  it('matches on the description as well as the label', async () => {
+    const user = userEvent.setup()
+    render(<Harness />)
+    await user.type(screen.getByRole('combobox'), 'admiral')
+    const options = await screen.findAllByRole('option')
+    expect(options.map((o) => o.textContent)).toEqual([expect.stringContaining('Grace Hopper')])
+  })
+
+  it('never offers what is already chosen, or what the caller excluded', async () => {
+    const user = userEvent.setup()
+    render(<Harness initial={[PEOPLE[0]]} excludeIds={['alan']} />)
+    await user.type(screen.getByRole('combobox'), 'a')
+    const options = await screen.findAllByRole('option')
+    const labels = options.map((o) => o.textContent ?? '')
+    expect(labels.some((l) => l.includes('Ada'))).toBe(false)
+    expect(labels.some((l) => l.includes('Alan'))).toBe(false)
+    expect(labels.some((l) => l.includes('Grace'))).toBe(true)
+  })
+
+  it('Backspace on an empty query takes the last chip', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness initial={[PEOPLE[0], PEOPLE[1]]} onChange={onChange} />)
+    await user.click(screen.getByRole('combobox'))
+    await user.keyboard('{Backspace}')
+    expect(onChange).toHaveBeenLastCalledWith([PEOPLE[0]])
+  })
+
+  it('a chip’s ✕ removes that chip', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Harness initial={[PEOPLE[0], PEOPLE[1]]} onChange={onChange} />)
+    await user.click(screen.getByRole('button', { name: 'Remove Ada Lovelace' }))
+    expect(onChange).toHaveBeenLastCalledWith([PEOPLE[1]])
+  })
+
+  it('Escape clears a query and keeps the key; with nothing typed it lets the key through', async () => {
+    const user = userEvent.setup()
+    const reachedOutside = vi.fn()
+    render(
+      <div onKeyDown={(e) => e.key === 'Escape' && reachedOutside()}>
+        <Harness />
+      </div>,
+    )
+    const input = screen.getByRole('combobox') as HTMLInputElement
+    await user.type(input, 'a')
+    await screen.findByRole('listbox')
+    await user.keyboard('{Escape}')
+    expect(input.value).toBe('')
+    expect(reachedOutside).not.toHaveBeenCalled()
+    // Now there is nothing to clear, so the surface around the field — a
+    // dialog, the launcher — must hear it.
+    await user.keyboard('{Escape}')
+    expect(reachedOutside).toHaveBeenCalledTimes(1)
+  })
+})

package/src/ChipInput.tsx

@@ -1,9 +1,24 @@
-import { useState, useRef, useMemo, useEffect, useLayoutEffect, type KeyboardEvent, type ReactNode } from 'react'
-import { createPortal } from 'react-dom'
+import { useMemo, useState, type KeyboardEvent, type ReactNode } from 'react'
+import { Combobox } from '@base-ui/react/combobox'
 import { IconX } from '@tabler/icons-react'
 import { cn } from './cn'
-import { fitMenu } from './fit'
-import { MenuItem } from './Menu'
+import { MenuItem, MenuPanel } from './Menu'
+import { ScrollArea } from './ScrollArea'
+
+/* The chip's own look, written once: `InputChip` draws it for a caller who
+   wants a chip on its own, and `ChipInput` gives the same classes to Base UI's
+   `Combobox.Chip`, which is the one that joins the input's keyboard. */
+const CHIP_BOX =
+  // Curved, not a pill (Katerina, 2026-09-01): the Avatar keeps its own
+  // rounded-sm corners — never a forced circle — and the chip's corner
+  // follows concentrically: 4px face + 2px inset = rounded-md.
+  'inline-flex items-center gap-1.5 bg-bg-elevated border border-border-subtle rounded-md py-0.5 max-h-[24px]'
+const CHIP_LABEL = 'text-caption font-medium text-text-primary'
+const CHIP_REMOVE = 'size-4 flex items-center justify-center rounded-full hover:bg-bg-hover text-text-secondary'
+// The padding follows the contents (Katerina, 2026-09-01): a face sits 2px
+// from the edge, a bare label needs 8px of air; the ✕ brings its own box, so
+// 4px behind it — 8px when there isn't one.
+const chipPadding = (leading: boolean, removable: boolean) => cn(leading ? 'pl-[2px]' : 'pl-2', removable ? 'pr-1' : 'pr-2')
 
 /**
  * The chip a `ChipInput` is made of: a 24px pill with an optional 16px
@@ -11,6 +26,10 @@ import { MenuItem } from './Menu'
  * Exported on its own (Katerina, 2026-09-01) under a name that promises
  * nothing about people — a chip like this may one day hold a label, a file,
  * a filter.
+ *
+ * Inside a `ChipInput` the chip is Base UI's `Combobox.Chip` wearing these
+ * same classes, because there it has to answer the arrow keys and Backspace
+ * along with the input. This component is for a chip standing alone.
  */
 export interface InputChipProps {
   label: string
@@ -23,22 +42,9 @@ export interface InputChipProps {
 
 export function InputChip({ label, leading, onRemove, className }: InputChipProps) {
   return (
-    <div
-      className={cn(
-        // Curved, not a pill (Katerina, 2026-09-01): the Avatar keeps its own
-        // rounded-sm corners — never a forced circle — and the chip's corner
-        // follows concentrically: 4px face + 2px inset = rounded-md.
-        'inline-flex items-center gap-1.5 bg-bg-elevated border border-border-subtle rounded-md py-0.5 max-h-[24px]',
-        // The padding follows the contents (Katerina, 2026-09-01): a face
-        // sits 2px from the edge, a bare label needs 8px of air; the ✕
-        // brings its own box, so 4px behind it — 8px when there isn't one.
-        leading ? 'pl-[2px]' : 'pl-2',
-        onRemove ? 'pr-1' : 'pr-2',
-        className,
-      )}
-    >
+    <div className={cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className)}>
       {leading && <span className="flex shrink-0 items-center">{leading}</span>}
-      <span className="text-caption font-medium text-text-primary">{label}</span>
+      <span className={CHIP_LABEL}>{label}</span>
       {onRemove && (
         <button
           type="button"
@@ -46,7 +52,7 @@ export function InputChip({ label, leading, onRemove, className }: InputChipProp
             e.stopPropagation()
             onRemove()
           }}
-          className="size-4 flex items-center justify-center rounded-full hover:bg-bg-hover text-text-secondary"
+          className={CHIP_REMOVE}
           aria-label={`Remove ${label}`}
         >
           <IconX size={10} stroke={1.5} />
@@ -58,18 +64,28 @@ export function InputChip({ label, leading, onRemove, className }: InputChipProp
 
 /**
  * A multi-select input: chips for the chosen, a typeahead for the rest —
- * Peek's PersonChipInput (2026-09-01), generalised on the way in. Peek's
- * version knew it was picking people: it read the directory from Peek's own
- * data layer and drew every face itself. Here the caller hands in `options`,
- * and — when the entries have faces or icons — the two leading slots: 16px
- * in a chip, 32px in a suggestion row. Nothing in this file knows what is
- * being picked.
+ * Peek's PersonChipInput (2026-09-01), generalised on the way in, and on Base
+ * UI's `Combobox` since stage 5 of the migration (2026-09-13).
  *
- * Suggestions appear only once the user types — focusing (or auto-focus on
- * dialog open) must not drop the full directory over the surface below.
- * Backspace on an empty query removes the last chip; Escape clears the query
- * when there is one and bubbles when there is not, so the surface around it
- * (dialog, launcher) can act.
+ * **What the part brought, and what it took away from this file.** The list is
+ * a real listbox now: the input keeps focus and says which row is highlighted
+ * through `aria-activedescendant`, where before the rows were plain buttons in
+ * a `<div>` and nothing was announced. With it went the highlight index, the
+ * arrow keys, Enter, the filter loop, the blur timeout that kept a click on a
+ * row from closing the list under the pointer, the `createPortal`, the
+ * measured anchor rect, the resize and scroll listeners that re-measured it,
+ * and `fit.ts` — the flip-up-when-low arithmetic this package carried for one
+ * caller (PLAN Finding 22). Base UI's positioner does the flipping, and it
+ * does it against the element rather than against a rect read a frame ago.
+ *
+ * **What this file still decides**, because none of it is the part's business:
+ * which options are on offer (the chosen and the excluded are not), that a
+ * match is on the label *or* the description, that suggestions appear only
+ * once you type — focusing must not drop the whole directory over the surface
+ * below — and that Backspace on an empty query takes the last chip.
+ *
+ * Escape clears the query when there is one and bubbles when there is not, so
+ * the surface around it (dialog, launcher) can act.
  *
  * Generic over the option type: the objects handed back through `onChange`
  * are the caller's own, extra fields and all — no re-mapping on the way out.
@@ -110,154 +126,136 @@ export function ChipInput<T extends ChipInputOption = ChipInputOption>({
   ...aria
 }: ChipInputProps<T>) {
   const [query, setQuery] = useState('')
-  const [highlight, setHighlight] = useState(0)
-  const [isFocused, setIsFocused] = useState(false)
-  const [anchorRect, setAnchorRect] = useState<DOMRect | null>(null)
-  const wrapperRef = useRef<HTMLDivElement>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  const matches = useMemo(() => {
-    const selectedIds = new Set(value.map((o) => o.id))
-    const excludedIds = new Set(excludeIds)
-    const q = query.trim().toLowerCase()
-    return options.filter((o) => {
-      if (selectedIds.has(o.id)) return false
-      if (excludedIds.has(o.id)) return false
-      if (!q) return true
-      return o.label.toLowerCase().includes(q) || (o.description ?? '').toLowerCase().includes(q)
-    })
-  }, [query, value, excludeIds, options])
+  /* The box the list hangs from. Base UI hangs a combobox's list from its
+     input by default, and the input sits inside this box's 12px of padding
+     and its border, so the list came out 26px narrower than the field it
+     belongs to (measured: 358 against 384) and started inside it. Held as an
+     element, not a measured rect, so the positioner re-measures it. */
+  const [box, setBox] = useState<HTMLDivElement | null>(null)
 
-  useEffect(() => {
-    setHighlight(0)
-  }, [query, matches.length])
+  /* What is on offer: never what is already chosen, never what the caller
+     excluded. The part filters by the query; which options exist at all is
+     this component's question. */
+  const available = useMemo(() => {
+    const chosen = new Set(value.map((o) => o.id))
+    const excluded = new Set(excludeIds)
+    return options.filter((o) => !chosen.has(o.id) && !excluded.has(o.id))
+  }, [options, value, excludeIds])
 
-  const showDropdown = isFocused && query.trim().length > 0 && matches.length > 0
+  /* A match is on the label or the description — "who is the engineer" finds
+     the person by their role. Base UI's own filter reads one string per item. */
+  const filter = useMemo(
+    () => (item: T, q: string) => {
+      const needle = q.trim().toLowerCase()
+      if (!needle) return true
+      return item.label.toLowerCase().includes(needle) || (item.description ?? '').toLowerCase().includes(needle)
+    },
+    [],
+  )
 
-  useLayoutEffect(() => {
-    if (!showDropdown) return
-    const update = () => {
-      if (wrapperRef.current) setAnchorRect(wrapperRef.current.getBoundingClientRect())
-    }
-    update()
-    window.addEventListener('resize', update)
-    window.addEventListener('scroll', update, true)
-    return () => {
-      window.removeEventListener('resize', update)
-      window.removeEventListener('scroll', update, true)
-    }
-  }, [showDropdown, value.length])
+  /* Suggestions appear only once you type. Focus — or a dialog's autoFocus —
+     must not drop the whole directory over the surface below, which is why
+     the open state is this component's and not the part's. */
+  const open = query.trim().length > 0
 
-  function addOption(option: T) {
-    onChange([...value, option])
-    setQuery('')
-    inputRef.current?.focus()
+  function removeLast() {
+    if (value.length > 0) onChange(value.slice(0, -1))
   }
 
-  function removeOption(id: string) {
-    onChange(value.filter((o) => o.id !== id))
-  }
-
-  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
-    if (e.key === 'Backspace' && query === '' && value.length > 0) {
-      // Consumed: removing a chip must not double as the surface's "back".
-      e.preventDefault()
-      removeOption(value[value.length - 1].id)
-      return
-    }
-    if (e.key === 'ArrowDown') {
-      e.preventDefault()
-      setHighlight((h) => Math.min(h + 1, Math.max(0, matches.length - 1)))
+  function onInputKeyDown(event: KeyboardEvent<HTMLInputElement>) {
+    if (event.key === 'Backspace' && query === '' && value.length > 0) {
+      // Consumed: removing a chip must not double as the surface's "back",
+      // and Base UI would otherwise walk focus into the chips first.
+      event.preventDefault()
+      event.stopPropagation()
+      removeLast()
       return
     }
-    if (e.key === 'ArrowUp') {
-      e.preventDefault()
-      setHighlight((h) => Math.max(h - 1, 0))
-      return
-    }
-    if (e.key === 'Enter') {
-      e.preventDefault()
-      const target = matches[highlight]
-      if (target) addOption(target)
-      return
-    }
-    if (e.key === 'Escape') {
+    if (event.key === 'Escape' && query !== '') {
       // Consume it only when there is something to clear; an idle input lets
       // Escape bubble so the surface around it (dialog, launcher) can act.
-      if (query !== '') {
-        e.preventDefault()
-        setQuery('')
-      }
+      event.preventDefault()
+      event.stopPropagation()
+      setQuery('')
     }
   }
 
   return (
-    <div className="relative">
-      <div
-        ref={wrapperRef}
-        className="bg-bg-inset border border-border-default hover:border-border-strong focus-within:border-border-focus focus-within:hover:border-border-focus rounded-lg px-3 py-1.5 flex flex-wrap items-center gap-1.5 transition-colors min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring"
-        onClick={() => inputRef.current?.focus()}
-      >
-        {value.map((o) => (
-          <InputChip key={o.id} label={o.label} leading={chipLeading?.(o)} onRemove={() => removeOption(o.id)} />
+    <Combobox.Root
+      multiple
+      items={available}
+      value={value}
+      onValueChange={(next) => {
+        onChange(next as T[])
+        setQuery('')
+      }}
+      inputValue={query}
+      onInputValueChange={setQuery}
+      open={open}
+      /* The list is the query's, not the click's — see `open` above. */
+      openOnInputClick={false}
+      filter={filter}
+      itemToStringLabel={(option) => (option as T).label}
+    >
+      {/* The box the chips and the input share. `Combobox.Chips` is what makes
+          the two one control for the keyboard; the look is what it always was. */}
+      <Combobox.Chips ref={setBox} className="bg-bg-inset border border-border-default hover:border-border-strong focus-within:border-border-focus focus-within:hover:border-border-focus rounded-lg px-3 py-1.5 flex flex-wrap items-center gap-1.5 transition-colors min-h-[38px] cursor-text signal:transition-shadow signal:focus-within:shadow-focus-ring">
+        {value.map((option) => (
+          <Combobox.Chip key={option.id} className={cn(CHIP_BOX, chipPadding(!!chipLeading, true))}>
+            {chipLeading && <span className="flex shrink-0 items-center">{chipLeading(option)}</span>}
+            <span className={CHIP_LABEL}>{option.label}</span>
+            <Combobox.ChipRemove className={CHIP_REMOVE} aria-label={`Remove ${option.label}`}>
+              <IconX size={10} stroke={1.5} />
+            </Combobox.ChipRemove>
+          </Combobox.Chip>
         ))}
-
-        <input
-          ref={inputRef}
+        <Combobox.Input
           autoFocus={autoFocus}
-          type="text"
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          onKeyDown={handleKeyDown}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => {
-            setTimeout(() => setIsFocused(false), 150)
-          }}
           placeholder={value.length === 0 ? placeholder : ''}
           aria-required={aria['aria-required']}
+          onKeyDown={onInputKeyDown}
           className="flex-1 min-w-[120px] bg-transparent text-body-2 text-text-primary placeholder:text-text-muted outline-none border-none"
         />
-      </div>
+      </Combobox.Chips>
 
-      {showDropdown && anchorRect && createPortal(
-        <div
-          className="fixed z-[60] overflow-y-auto bg-bg-elevated border border-border-default rounded-lg shadow-lg"
-          /*
-            Placed by fitMenu (2026-09-03), not hung blindly below: an input
-            low on the screen flips its list upward instead of running the
-            tail past the bottom edge. The rows are a fixed 48px, so the
-            content height is arithmetic and needs no second render pass;
-            the 240px cap is the old max-h-[240px].
-          */
-          style={{
-            ...fitMenu({
-              anchor: { left: anchorRect.left, top: anchorRect.top, bottom: anchorRect.bottom },
-              menu: { width: anchorRect.width, contentHeight: matches.length * 48 },
-              viewport: { width: window.innerWidth, height: window.innerHeight },
-              cap: 240,
-            }),
-            width: anchorRect.width,
-          }}
+      <Combobox.Portal>
+        <Combobox.Positioner
+          anchor={box}
+          sideOffset={GAP}
+          collisionPadding={VIEWPORT_PAD}
+          className="z-50 data-[anchor-hidden]:hidden"
         >
-          {matches.map((o, i) => (
-            <MenuItem
-              key={o.id}
-              size="tall"
-              className="h-12 rounded-none"
-              leading={rowLeading?.(o)}
-              label={o.label}
-              description={o.description}
-              selected={i === highlight}
-              onMouseEnter={() => setHighlight(i)}
-              onMouseDown={(e) => {
-                e.preventDefault()
-                addOption(o)
-              }}
-            />
-          ))}
-        </div>,
-        document.body
-      )}
-    </div>
+          {/* As wide as the box, which is what the hand-measured rect was
+              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. */}
+          <Combobox.Popup className="w-[var(--anchor-width)] p-0" render={<MenuPanel />}>
+            <ScrollArea viewportClassName="max-h-[240px]" contentClassName="flex flex-col p-2">
+              <Combobox.List>
+                {(option: T) => (
+                  <Combobox.Item
+                    key={option.id}
+                    value={option}
+                    render={
+                      <MenuItem
+                        size="tall"
+                        leading={rowLeading?.(option)}
+                        label={option.label}
+                        description={option.description}
+                      />
+                    }
+                  />
+                )}
+              </Combobox.List>
+            </ScrollArea>
+          </Combobox.Popup>
+        </Combobox.Positioner>
+      </Combobox.Portal>
+    </Combobox.Root>
   )
 }
+
+/** `Menu`'s numbers, because the list hangs the same way a menu does. */
+const GAP = 4
+const VIEWPORT_PAD = 8

package/src/Menu.tsx

@@ -208,16 +208,28 @@ export function Menu({ trigger, align = 'left', openOnHover = false, open, onOpe
                room. Select's 288 was never this component's — the identity
                panel got it by accident once and grew a scrollbar at full
                height. */
-            className={cn('min-w-[180px] outline-none', className)}
+            className={cn('min-w-[180px] outline-none p-0', className)}
             render={<MenuPanel />}
           >
             {/* The height cap sits on the box that scrolls — on the panel it
                 let the box grow to its content and nothing scrolled (measured,
-                2026-09-08) — less the panel's own padding, so the panel still
-                stops where Floating UI said. The padding stays on the panel,
-                where a caller's `className` can change it; the divider rule
-                moves with the rows. A menu that fits draws exactly as before. */}
-            <ScrollArea viewportClassName="max-h-[calc(var(--available-height)_-_1rem)]" contentClassName="flex flex-col [&>[role=separator]]:mx-0">
+                2026-09-08).
+             *
+             * And **the padding is on the content, not on the panel** (D63,
+             * 2026-09-13). With it on the panel the scrolling box was inset by
+             * it, so the bar floated 9px in from the panel's edge where every
+             * other scrolling surface in the suite draws it at 1px —
+             * `DialogShell` had it right and said so in its own comment, and
+             * this is the same arrangement. The rows do not move: the padding
+             * that used to be the panel's is now the content's, at the same
+             * 8px. The cap loses its `- 1rem` for the same reason — the
+             * padding is inside the scrolling box now, so the panel is exactly
+             * as tall as Floating UI allowed.
+             *
+             * A caller's `className` still lands on the panel, so a caller
+             * asking for different padding needs `contentClassName` — which is
+             * what `MenuPanel` is for when one is used on its own. */}
+            <ScrollArea viewportClassName="max-h-[var(--available-height)]" contentClassName="flex flex-col p-2 [&>[role=separator]]:mx-0">
               <MenuContext.Provider value={{ openOnHover }}>{children}</MenuContext.Provider>
             </ScrollArea>
           </BaseMenu.Popup>

package/src/Popover.tsx

@@ -175,14 +175,16 @@ export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open
              */
             initialFocus={trigger ? undefined : false}
             finalFocus={finalFocus}
-            className={cn('min-w-[180px] outline-none', className)}
+            className={cn('min-w-[180px] outline-none p-0', className)}
             render={<MenuPanel />}
           >
-            {/* As in Menu: the cap on the scrolling box, less the panel's padding; the padding stays on the panel.
-                A caller's `maxHeight` replaces it — see the prop. */}
+            {/* As in Menu: the cap on the scrolling box, and the padding on the
+                content rather than the panel, so the bar is drawn over the
+                padding instead of 9px inside it (D63). A caller's `maxHeight`
+                replaces the cap — see the prop. */}
             <ScrollArea
-              viewportClassName={maxHeight ?? 'max-h-[calc(var(--available-height)_-_1rem)]'}
-              contentClassName="flex flex-col [&>[role=separator]]:mx-0"
+              viewportClassName={maxHeight ?? 'max-h-[var(--available-height)]'}
+              contentClassName="flex flex-col p-2 [&>[role=separator]]:mx-0"
             >
               {children}
             </ScrollArea>

package/dist/fit.d.ts

@@ -1,33 +0,0 @@
-/**
- * Where a list of this size goes, given its anchor and the viewport.
- *
- * Left is clamped inside the viewport with an 8px margin. Height is capped at
- * `cap` — `ChipInput` passes 240, its old `max-h-[240px]` — but never taller
- * than the room there is; when the room below the anchor is smaller than both
- * the content and the room above, the list opens UPWARD (anchored to the
- * trigger's top via `bottom`). The 120px floor keeps it usable even in a
- * cramped corner — scrollable beats invisible.
- */
-export declare function fitMenu({ anchor, menu, viewport, cap, }: {
-    anchor: {
-        left: number;
-        top: number;
-        bottom: number;
-    };
-    menu: {
-        width: number;
-        contentHeight: number;
-    };
-    viewport: {
-        width: number;
-        height: number;
-    };
-    /** Tallest the menu may stand even with room to spare. Absent: the room is the only limit. */
-    cap?: number;
-}): {
-    left: number;
-    top?: number;
-    bottom?: number;
-    maxHeight: number;
-};
-//# sourceMappingURL=fit.d.ts.map

package/dist/fit.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"fit.d.ts","sourceRoot":"","sources":["../src/fit.ts"],"names":[],"mappings":"AAmBA;;;;;;;;;GASG;AACH,wBAAgB,OAAO,CAAC,EACtB,MAAM,EACN,IAAI,EACJ,QAAQ,EACR,GAA8B,GAC/B,EAAE;IACD,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IACrD,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,aAAa,EAAE,MAAM,CAAA;KAAE,CAAA;IAC9C,QAAQ,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAA;IAC3C,8FAA8F;IAC9F,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,CASrE"}