@estiva-app/ui 0.12.7 → 0.12.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.12.7",
+  "version": "0.12.9",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",
@@ -33,6 +33,7 @@
     "test:a11y": "vitest run --project storybook-signal --project storybook-ship",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
+    "gates:status": "node scripts/gates-status.mjs",
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {

package/src/ChipInput.mdx

@@ -55,6 +55,15 @@ import { ChipInput } from '@estiva-app/ui'
   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.
+- **The field's name.** Inside a `Field`, the label names it — pass nothing.
+  Anywhere else, pass `aria-label`, or `aria-labelledby` pointing at a
+  visible label such as a "To:". With neither, the placeholder is the name,
+  and it stays the name after the first chip stops it being drawn.
+
+```tsx
+<span id="to-label">To:</span>
+<ChipInput aria-labelledby="to-label" value={chosen} onChange={setChosen} options={directory} />
+```
 
 ## Keys
 

package/src/ChipInput.stories.tsx

@@ -29,10 +29,6 @@ const meta = {
   title: 'Inputs/ChipInput',
   component: ChipInput,
   parameters: {
-    // axe label is off here: once a chip is in the field the input drops its placeholder
-    // and has no name of its own, and no prop lets the caller give it one. Settled at the
-    // Combobox port (PLAN.md stage 5).
-    a11y: { config: { rules: [{ id: 'label', enabled: false }] } },
     // The suggestion list portals to document.body at fixed coordinates —
     // render docs usage in an iframe so it lands where the field is.
     docs: { story: { inline: false, height: '320px' } },

package/src/ChipInput.test.tsx

@@ -13,7 +13,8 @@ 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'
+import { ChipInput, InputChip, type ChipInputOption } from './ChipInput'
+import { Field } from './Field'
 
 afterEach(cleanup)
 
@@ -23,7 +24,17 @@ const PEOPLE: ChipInputOption[] = [
   { id: 'alan', label: 'Alan Turing', description: 'Mathematician' },
 ]
 
-function Harness({ initial = [], excludeIds, onChange }: { initial?: ChipInputOption[]; excludeIds?: string[]; onChange?: (v: ChipInputOption[]) => void }) {
+function Harness({
+  initial = [],
+  excludeIds,
+  onChange,
+  naming,
+}: {
+  initial?: ChipInputOption[]
+  excludeIds?: string[]
+  onChange?: (v: ChipInputOption[]) => void
+  naming?: { 'aria-label'?: string; 'aria-labelledby'?: string }
+}) {
   const [value, setValue] = useState(initial)
   return (
     <ChipInput
@@ -35,6 +46,7 @@ function Harness({ initial = [], excludeIds, onChange }: { initial?: ChipInputOp
       options={PEOPLE}
       excludeIds={excludeIds}
       placeholder="Search people"
+      {...naming}
     />
   )
 }
@@ -139,4 +151,68 @@ describe('ChipInput', () => {
     await user.keyboard('{Escape}')
     expect(reachedOutside).toHaveBeenCalledTimes(1)
   })
+
+  describe('the field’s name (PLAN Finding 6)', () => {
+    /* Chrome names an empty field by its placeholder, and the first chip takes
+       the placeholder away. Measured in Chrome's accessibility tree before this
+       was fixed: with a chip in, the name was "". */
+    it('keeps the placeholder as its name once a chip takes the placeholder away', () => {
+      render(<Harness initial={[PEOPLE[0]]} />)
+      const input = screen.getByRole('combobox', { name: 'Search people' })
+      expect(input.getAttribute('placeholder')).toBe('')
+    })
+
+    it('adds no name of its own while the placeholder is still drawn', () => {
+      render(<Harness />)
+      expect(screen.getByRole('combobox').getAttribute('aria-label')).toBeNull()
+    })
+
+    it('takes a caller’s aria-label over the placeholder', () => {
+      render(<Harness initial={[PEOPLE[0]]} naming={{ 'aria-label': 'To' }} />)
+      expect(screen.getByRole('combobox', { name: 'To' })).toBeTruthy()
+    })
+
+    it('takes a caller’s aria-labelledby — a visible “To:”', () => {
+      render(
+        <div>
+          <span id="to">To:</span>
+          <Harness initial={[PEOPLE[0]]} naming={{ 'aria-labelledby': 'to' }} />
+        </div>,
+      )
+      expect(screen.getByRole('combobox', { name: 'To:' })).toBeTruthy()
+    })
+
+    /* The trap this pins: Base UI copies a caller's prop over its own even when
+       it is `undefined`, so an `aria-labelledby` passed through empty would wipe
+       the `Field`'s and the placeholder would name the field instead. */
+    it('inside a Field, is named by the Field’s label, chip or no chip', () => {
+      render(
+        <>
+          <Field label="Invite people">
+            <Harness />
+          </Field>
+          <Field label="Reviewers">
+            <Harness initial={[PEOPLE[0]]} />
+          </Field>
+        </>,
+      )
+      expect(screen.getByRole('combobox', { name: 'Invite people' })).toBeTruthy()
+      expect(screen.getByRole('combobox', { name: 'Reviewers' })).toBeTruthy()
+    })
+  })
+})
+
+describe('InputChip', () => {
+  it('its ✕ is a button named for the chip, and removes it', async () => {
+    const user = userEvent.setup()
+    const onRemove = vi.fn()
+    render(<InputChip label="Label" onRemove={onRemove} />)
+    await user.click(screen.getByRole('button', { name: 'Remove Label' }))
+    expect(onRemove).toHaveBeenCalledTimes(1)
+  })
+
+  it('draws no ✕ without onRemove', () => {
+    render(<InputChip label="Label" />)
+    expect(screen.queryByRole('button')).toBeNull()
+  })
 })

package/src/ChipInput.tsx

@@ -1,4 +1,5 @@
 import { useMemo, useState, type KeyboardEvent, type ReactNode } from 'react'
+import { Button as BaseButton } from '@base-ui/react/button'
 import { Combobox } from '@base-ui/react/combobox'
 import { IconX } from '@tabler/icons-react'
 import { cn } from './cn'
@@ -45,8 +46,12 @@ export function InputChip({ label, leading, onRemove, className }: InputChipProp
     <div className={cn(CHIP_BOX, chipPadding(!!leading, !!onRemove), className)}>
       {leading && <span className="flex shrink-0 items-center">{leading}</span>}
       <span className={CHIP_LABEL}>{label}</span>
+      {/* Base UI's `Button`, as every button in the package is (D6). Base UI
+          has no chip of its own — its only chips are `Combobox.Chip` and
+          `ChipRemove`, which throw outside a combobox — so the ✕ is the one
+          part of a chip standing alone that it has a counterpart for. */}
       {onRemove && (
-        <button
+        <BaseButton
           type="button"
           onClick={(e) => {
             e.stopPropagation()
@@ -56,7 +61,7 @@ export function InputChip({ label, leading, onRemove, className }: InputChipProp
           aria-label={`Remove ${label}`}
         >
           <IconX size={10} stroke={1.5} />
-        </button>
+        </BaseButton>
       )}
     </div>
   )
@@ -112,6 +117,14 @@ export interface ChipInputProps<T extends ChipInputOption = ChipInputOption> {
   rowLeading?: (option: T) => ReactNode
   /** Set by a `Field` with `required`; a caller inside one owes nothing. */
   'aria-required'?: boolean | 'true' | 'false'
+  /**
+   * The field's name, for a caller that is not inside a `Field` — a `Field`'s
+   * label names it already. With neither this nor `aria-labelledby`, the
+   * placeholder is the name, and it stays the name once a chip is in.
+   */
+  'aria-label'?: string
+  /** The id of what names the field on the page — a visible "To:", say. */
+  'aria-labelledby'?: string
 }
 
 export function ChipInput<T extends ChipInputOption = ChipInputOption>({
@@ -158,6 +171,21 @@ export function ChipInput<T extends ChipInputOption = ChipInputOption>({
      the open state is this component's and not the part's. */
   const open = query.trim().length > 0
 
+  /* The field's name (PLAN Finding 6). With no chip, Chrome names the field
+     by its placeholder; the first chip takes the placeholder away, and the
+     field was left with no name at all (measured: ""). So the placeholder
+     stays on as the name once it is no longer drawn. A caller's own name
+     wins, and so does a `Field`'s label: Base UI points `aria-labelledby` at
+     it, and a label by reference outranks `aria-label`.
+     Only a name that exists is passed. Base UI copies a caller's prop over its
+     own even when the value is `undefined`, so an `aria-labelledby` written
+     out empty would wipe the `Field`'s. */
+  const ariaLabel = aria['aria-label'] ?? (value.length > 0 ? placeholder : undefined)
+  const naming = {
+    ...(ariaLabel !== undefined && { 'aria-label': ariaLabel }),
+    ...(aria['aria-labelledby'] !== undefined && { 'aria-labelledby': aria['aria-labelledby'] }),
+  }
+
   function removeLast() {
     if (value.length > 0) onChange(value.slice(0, -1))
   }
@@ -213,6 +241,7 @@ export function ChipInput<T extends ChipInputOption = ChipInputOption>({
           autoFocus={autoFocus}
           placeholder={value.length === 0 ? placeholder : ''}
           aria-required={aria['aria-required']}
+          {...naming}
           onKeyDown={onInputKeyDown}
           className="flex-1 min-w-[120px] bg-transparent text-body-2 text-text-primary placeholder:text-text-muted outline-none border-none"
         />

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" />}