@estiva-app/ui 0.12.6 → 0.12.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.12.6",
+  "version": "0.12.8",
   "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

@@ -363,7 +363,11 @@ export interface MenuItemProps extends Omit<ComponentPropsWithRef<'button'>, 'ch
  * consequence of the port: the fill that followed the pointer now also
  * follows the arrow keys, because Base UI sets one attribute for both.
  */
-function menuItemClassName({ size, selected, className }: { size: 'default' | 'tall'; selected?: boolean; className?: string }) {
+/** The row's look, shared inside the package: `MenuItem` draws it, and
+ *  `Select` puts it on Base UI's `Select.Item`, whose parts (`ItemText`,
+ *  `ItemIndicator`) have to stay the element's own. One row, two parts. Not
+ *  exported from the package's index. */
+export function menuItemClassName({ size, selected, className }: { size: 'default' | 'tall'; selected?: boolean; className?: string }) {
   return cn(
     // shrink-0: a menu is a flex column that scrolls at its max height,
     // and a flex child shrinks before its container does — so every row

package/src/Select.tsx

@@ -3,6 +3,7 @@ import { Select as BaseSelect } from '@base-ui/react/select'
 import type { ReactNode } from 'react'
 import { cn } from './cn'
 import { ScrollArea } from './ScrollArea'
+import { MenuPanel, menuItemClassName } from './Menu'
 
 /**
  * Peek's Select (2026-08-28), verbatim, plus what Ship added: an option may
@@ -126,13 +127,28 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
                clamped it — the two numbers `fitMenu` used to compute here. The
                288px is the old `max-h-72`, now a ceiling on that room rather
                than a height applied blind. */
-            className="min-w-[var(--anchor-width)] rounded-lg border border-border-default bg-bg-elevated p-1 shadow-lg"
+            /* The list is the package's one list (Katerina, 2026-09-13: "i
+               thought the type to search menu would be from estiva-ui and be
+               the one used in select component"). The box is `MenuPanel` —
+               the same border, fill, radius and shadow this used to spell out
+               — with its padding moved onto the scrolling content (D63). */
+            render={<MenuPanel />}
+            className="min-w-[var(--anchor-width)] p-0"
           >
             {/* The list scrolls in a ScrollArea: the bar takes no width, so a
                 long list is exactly as wide as a short one (Katerina,
-                2026-09-08). The cap sits on the box that scrolls, less the
-                panel's padding, so 288px stays 288px. */}
-            <ScrollArea viewportClassName="max-h-[calc(min(288px,var(--available-height))_-_0.5rem)]" contentClassName="flex flex-col">
+                2026-09-08).
+             *
+             * **The padding is on the scrolling content, not on the panel**
+             * (D63, applied here 2026-09-13). On the panel it inset the
+             * scrolling box, so the thumb sat 7px from the panel's edge where
+             * DialogShell, Popover, Menu and ChipInput all draw it at 3px —
+             * Katerina: "the position of the scrollbar in select … not closer
+             * to the right side". The rows keep their 4px inset, because the
+             * padding that was the panel's is the content's; and the cap loses
+             * its `- 0.5rem`, because that padding is inside the box that
+             * scrolls now, so 288px stays 288px. */}
+            <ScrollArea viewportClassName="max-h-[min(288px,var(--available-height))]" contentClassName="flex flex-col p-2">
             {options.map((option) => (
               <BaseSelect.Item
                 key={option.value}
@@ -141,11 +157,17 @@ export function Select({ value, onChange, options, size = 'default', ariaLabel,
                    keyboard set the same attribute, so what the DOM says and
                    what the row looks like cannot disagree. It used to be an
                    index this component counted. */
-                className="flex h-9 cursor-pointer items-center justify-between gap-2 rounded-lg px-3 text-[14px] font-normal leading-[1.4] text-text-primary transition-colors data-[highlighted]:bg-bg-hover data-[selected]:font-medium"
+                /* A menu row, exactly (`menuItemClassName`): 36px floor, 8px
+                   in from a panel padded 8px, so the label lands 17px from the
+                   panel's edge — the same pixel as the old 4px + 12px. What
+                   Select adds is its own: the ✓ at the end, and the chosen
+                   row in medium weight. No fade on the highlight, as in every
+                   menu (Katerina, 2026-09-05). */
+                className={cn(menuItemClassName({ size: 'default' }), 'justify-between data-[selected]:font-medium')}
               >
                 <span className="flex min-w-0 items-center gap-2">
                   {option.leading && <span className="flex shrink-0 items-center">{option.leading}</span>}
-                  <BaseSelect.ItemText className="truncate">{option.label}</BaseSelect.ItemText>
+                  <BaseSelect.ItemText className="truncate text-[14px] leading-[140%] text-text-primary">{option.label}</BaseSelect.ItemText>
                 </span>
                 <BaseSelect.ItemIndicator
                   render={<IconCheck size={16} stroke={1.5} className="shrink-0 text-text-secondary" />}