@estiva-app/ui 0.9.0 → 0.10.0

package/src/ReactionPicker.stories.tsx

@@ -0,0 +1,120 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { IconMessage2, IconMoodPlus } from '@tabler/icons-react'
+import { useState } from 'react'
+import { Popover } from './Popover'
+import { Reaction } from './Reaction'
+import { ReactionPicker, type ReactionOption } from './ReactionPicker'
+import { Toolbar, ToolbarButton } from './Toolbar'
+
+/**
+ * The reactions on offer, to choose one from. **A `Reaction` is the answer;
+ * this is the question.**
+ *
+ * Icon buttons holding emoji, on a `Toolbar` — so the strip carries the
+ * elevated box a floating control needs, and the whole row is one Tab stop.
+ *
+ * The vocabulary is the app's: which emoji it offers and what each one means.
+ * These canvases use a neutral set.
+ */
+const OPTIONS: ReactionOption[] = [
+  { emoji: '👍', label: 'Agree' },
+  { emoji: '🎉', label: 'Celebrate' },
+  { emoji: '🙏', label: 'Thank you' },
+  { emoji: '🚀', label: 'Ship it' },
+  { emoji: '👀', label: 'Looking' },
+]
+
+const meta = {
+  title: 'Primitives/ReactionPicker',
+  component: ReactionPicker,
+  args: { options: OPTIONS, onSelect: () => {} },
+  argTypes: { options: { control: false }, onSelect: { control: false } },
+} satisfies Meta<typeof ReactionPicker>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+/** The picker, as it floats: the strip and its box. */
+export const Default: Story = {}
+
+/**
+ * **Where it comes from.** A card carries a `Toolbar` of actions; one of them
+ * opens the picker, and it opens **above** that control — what is being
+ * reacted to is underneath.
+ *
+ * The box here is the `Popover`'s, so the picker passes `surface={false}`:
+ * two boxes inside each other is the tell.
+ */
+export const FromATrigger: Story = {
+  parameters: { controls: { disable: true }, layout: 'centered' },
+  render: function FromTrigger() {
+    const [chosen, setChosen] = useState<string | null>(null)
+    return (
+      <div className="flex w-[420px] flex-col items-end gap-3">
+        <div className="w-full rounded-lg border border-border-default bg-bg-surface p-3 text-body-2 text-text-primary">
+          A card. Its actions sit at the corner, and the picker opens above them.
+        </div>
+        <Toolbar aria-label="Card actions">
+          <ToolbarButton aria-label="Reply" tooltip="Reply">
+            <IconMessage2 size={16} stroke={1.5} />
+          </ToolbarButton>
+          <Popover
+            side="top"
+            align="right"
+            ariaLabel="Reactions"
+            className="w-auto min-w-0 p-1"
+            trigger={
+              <ToolbarButton aria-label="React" tooltip="React">
+                <IconMoodPlus size={16} stroke={1.5} />
+              </ToolbarButton>
+            }
+          >
+            <ReactionPicker options={OPTIONS} surface={false} onSelect={setChosen} />
+          </Popover>
+        </Toolbar>
+        <span className="text-caption text-text-secondary">
+          {chosen ? `Chose ${chosen}` : 'Nothing chosen yet.'}
+        </span>
+      </div>
+    )
+  },
+}
+
+/**
+ * **What it produces.** Picking puts a `Reaction` in the row on the card —
+ * the pill with the count and, when it is yours, the accent fill. That state
+ * belongs to `Reaction`; the picker only asks.
+ */
+export const AndWhatItProduces: Story = {
+  parameters: { controls: { disable: true } },
+  render: function Produces() {
+    const [mine, setMine] = useState<string[]>(['👍'])
+    return (
+      <div className="flex w-[420px] flex-col gap-4">
+        <ReactionPicker
+          options={OPTIONS}
+          onSelect={(emoji) => setMine((prev) => (prev.includes(emoji) ? prev.filter((e) => e !== emoji) : [...prev, emoji]))}
+        />
+        <div className="flex flex-wrap items-center gap-1.5">
+          {mine.length === 0 ? (
+            <span className="text-caption text-text-muted">Nothing here yet.</span>
+          ) : (
+            mine.map((emoji) => {
+              const option = OPTIONS.find((o) => o.emoji === emoji)!
+              return (
+                <Reaction
+                  key={emoji}
+                  emoji={emoji}
+                  count={1}
+                  pressed
+                  aria-label={`${option.label}, 1`}
+                  onClick={() => setMine((prev) => prev.filter((e) => e !== emoji))}
+                />
+              )
+            })
+          )}
+        </div>
+      </div>
+    )
+  },
+}

package/src/ReactionPicker.test.tsx

@@ -0,0 +1,118 @@
+// @vitest-environment jsdom
+/**
+ * What the ReactionPicker page claims, pinned.
+ *
+ * The two that matter are the two Peek's version got wrong: the row is one Tab
+ * stop rather than one per emoji, and every control is named by what the
+ * reaction *means* rather than by the glyph.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ReactionPicker, type ReactionOption } from './ReactionPicker'
+
+afterEach(cleanup)
+
+const OPTIONS: ReactionOption[] = [
+  { emoji: '👍', label: 'Agree' },
+  { emoji: '🎉', label: 'Celebrate' },
+  { emoji: '🙏', label: 'Thank you' },
+]
+
+const focused = () => document.activeElement?.getAttribute('aria-label')
+
+describe('ReactionPicker', () => {
+  it('is a named toolbar of the options it was given', () => {
+    render(<ReactionPicker options={OPTIONS} onSelect={() => {}} />)
+    expect(screen.getByRole('toolbar', { name: 'Reactions' })).toBeTruthy()
+    expect(screen.getAllByRole('button')).toHaveLength(3)
+  })
+
+  /**
+   * Named by the meaning, not the glyph — the same rule `Reaction` enforces,
+   * for the same reason: a glyph read aloud is noise and its spoken name
+   * differs per screen reader.
+   */
+  it('names every control by what the reaction means', () => {
+    render(<ReactionPicker options={OPTIONS} onSelect={() => {}} />)
+    for (const option of OPTIONS) expect(screen.getByRole('button', { name: option.label })).toBeTruthy()
+  })
+
+  it('the emoji itself is hidden from assistive tech', () => {
+    const { container } = render(<ReactionPicker options={OPTIONS} onSelect={() => {}} />)
+    const glyphs = [...container.querySelectorAll('span')].filter((s) => s.textContent === '👍')
+    expect(glyphs.length).toBeGreaterThan(0)
+    expect(glyphs.every((s) => s.getAttribute('aria-hidden') === 'true')).toBe(true)
+  })
+
+  /** The reason it is a Toolbar. Peek's five emoji were five Tab stops. */
+  it('is one Tab stop, not one per emoji', async () => {
+    const user = userEvent.setup()
+    render(
+      <>
+        <button type="button">Before</button>
+        <ReactionPicker options={OPTIONS} onSelect={() => {}} />
+        <button type="button">After</button>
+      </>,
+    )
+    screen.getByRole('button', { name: 'Before' }).focus()
+    await user.tab()
+    expect(focused()).toBe('Agree')
+    await user.tab()
+    expect(document.activeElement?.textContent).toBe('After')
+  })
+
+  it('the arrow keys walk it', async () => {
+    const user = userEvent.setup()
+    render(<ReactionPicker options={OPTIONS} onSelect={() => {}} />)
+    screen.getByRole('button', { name: 'Agree' }).focus()
+    await user.keyboard('{ArrowRight}')
+    expect(focused()).toBe('Celebrate')
+  })
+
+  it('choosing one reports the emoji, which is what the app stores', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    render(<ReactionPicker options={OPTIONS} onSelect={onSelect} />)
+    await user.click(screen.getByRole('button', { name: 'Celebrate' }))
+    expect(onSelect).toHaveBeenCalledWith('🎉')
+  })
+
+  it('and from the keyboard too', async () => {
+    const user = userEvent.setup()
+    const onSelect = vi.fn()
+    render(<ReactionPicker options={OPTIONS} onSelect={onSelect} />)
+    screen.getByRole('button', { name: 'Agree' }).focus()
+    await user.keyboard('{Enter}')
+    expect(onSelect).toHaveBeenCalledWith('👍')
+  })
+
+  /**
+   * It asks; it does not report. Which reactions are yours is `Reaction`'s
+   * state, in the row on the card — a picker that also carried it would be
+   * two components wearing one name (Katerina, 2026-09-08).
+   */
+  it('says nothing about which are already yours', () => {
+    render(<ReactionPicker options={OPTIONS} onSelect={() => {}} />)
+    expect(screen.getAllByRole('button').every((b) => !b.hasAttribute('aria-pressed'))).toBe(true)
+  })
+
+  it('takes a name of its own, for a page with more than one', () => {
+    render(<ReactionPicker options={OPTIONS} onSelect={() => {}} aria-label="React to this reply" />)
+    expect(screen.getByRole('toolbar', { name: 'React to this reply' })).toBeTruthy()
+  })
+
+  /** It floats, so it carries the elevated box — the one `MenuPanel` draws. */
+  it('draws the box, and drops it on request', () => {
+    const withBox = render(<ReactionPicker options={OPTIONS} onSelect={() => {}} />)
+    const panel = withBox.container.firstElementChild as HTMLElement
+    expect(panel.className).toContain('bg-bg-elevated')
+    expect(panel.querySelector('[role="toolbar"]')).toBeTruthy()
+    withBox.unmount()
+
+    // Inside a Popover, which draws that box already: two boxes inside each
+    // other is the tell.
+    const bare = render(<ReactionPicker options={OPTIONS} onSelect={() => {}} surface={false} />)
+    expect((bare.container.firstElementChild as HTMLElement).getAttribute('role')).toBe('toolbar')
+  })
+})

package/src/ReactionPicker.tsx

@@ -0,0 +1,88 @@
+import { cn } from './cn'
+import { Toolbar, ToolbarButton } from './Toolbar'
+
+/**
+ * The reactions on offer, to choose one from — Peek's `ReactionPicker`
+ * (2026-09-03), moved in at Katerina's request (2026-09-08).
+ *
+ * **`Reaction` is the answer; this is the question.** A `Reaction` is a pill
+ * that says an emoji, a count and whether it is yours. This is the row you
+ * pick from before any of that exists, and both apps need it: Peek draws one
+ * from a card's action strip (`ConversationQuickMenu`), and Ship draws the
+ * same row in `Reactions.tsx` from its own vocabulary.
+ *
+ * **It is a `Toolbar`** — icon buttons holding emoji, on the strip's own
+ * elevated box — so the whole row is one Tab stop and the arrow keys walk it.
+ * Peek's was five separate stops.
+ *
+ * ## What stays with the app
+ *
+ * **Which emoji, and what each one means.** Peek offers five and names them
+ * ("Makes sense", "Agree", "Thank you", "Let's go!", "Congrats"); Ship will
+ * offer its own. A vocabulary is product knowledge, so it arrives as
+ * `options` — and the name is not optional, because the emoji is decorative
+ * here for the same reason it is on `Reaction`: a glyph read aloud is noise,
+ * and its spoken name differs per screen reader.
+ *
+ * ## Picking, and nothing else
+ *
+ * **It does not show which reactions are yours.** That is `Reaction`'s job —
+ * the pill with the count and the accent fill — and the two live in different
+ * places: the reactions *made* sit in a row on the card, and this row is what
+ * opens over it when you go to add one. A picker that also reported state
+ * would be two components wearing one name (Katerina, 2026-09-08).
+ */
+export interface ReactionOption {
+  /** The emoji itself. Drawn decoratively — `label` names the control. */
+  emoji: string
+  /** What this reaction *means*: "Makes sense", "Congrats". Required, and it
+   *  is what a screen reader and the tooltip both say. */
+  label: string
+}
+
+export interface ReactionPickerProps {
+  /** What is on offer, in the order it is drawn. The app's vocabulary. */
+  options: ReactionOption[]
+  onSelect: (emoji: string) => void
+  /** Names the row. Default "Reactions". */
+  'aria-label'?: string
+  /**
+   * The elevated box around the row, from `Toolbar`. **On by default**, which
+   * is how a picker floats over a card. Off inside a `Popover`, which draws
+   * that box already.
+   */
+  surface?: boolean
+  /** The row's layout — its gap, its padding. */
+  className?: string
+}
+
+export function ReactionPicker({ options, onSelect, 'aria-label': ariaLabel = 'Reactions', surface = true, className }: ReactionPickerProps) {
+  return (
+    <Toolbar aria-label={ariaLabel} surface={surface} className={cn('gap-0.5', className)}>
+      {options.map((option) => (
+        /*
+          A `ToolbarButton`, not a button in a tooltip wrapper. The wrapper
+          would become the toolbar's item and the button inside it would never
+          join the walk — and it is unnecessary since stage 4, because an
+          `IconButton` with a `tooltip` IS the trigger.
+
+          The tooltip names it for a pointer, `aria-label` for everything else,
+          and both say the meaning rather than the glyph.
+        */
+        <ToolbarButton
+          key={option.emoji}
+          aria-label={option.label}
+          tooltip={option.label}
+          onClick={() => onSelect(option.emoji)}
+          /* Peek's geometry, verbatim: a 28px square rather than the
+             IconButton's 24, and the emoji at 18px — larger than a `Reaction`
+             pill's 16, because here the emoji is the whole control. */
+          className="size-7 text-[18px] leading-none"
+        >
+          {/* Decorative, as on `Reaction`: the control is named above. */}
+          <span aria-hidden="true">{option.emoji}</span>
+        </ToolbarButton>
+      ))}
+    </Toolbar>
+  )
+}

package/src/SearchInput.mdx

@@ -31,8 +31,12 @@ import { SearchInput } from '@estiva-app/ui'
 ```
 
 - The default placeholder is "Search…" — override it with your own.
-- Every native input prop passes through; give it an `aria-label`
-  ("Search") since the placeholder is not a name.
+- Every native input prop passes through. The field inside is Base UI's
+  `Input` since stage 3; the border, the focus-within rule and the `Kbd`
+  hint are this component's.
+- **Give it an `aria-label` ("Search")** — the placeholder is not a name,
+  and this usually stands alone in a top bar rather than in a `Field`.
+  Inside one, the label names it and you add nothing.
 
 ## Props
 

package/src/SearchInput.tsx

@@ -1,4 +1,5 @@
 import { type InputHTMLAttributes } from 'react'
+import { Input } from '@base-ui/react/input'
 import { cn } from './cn'
 import { Kbd } from './Kbd'
 
@@ -14,6 +15,11 @@ import { Kbd } from './Kbd'
  * In Peek's top bar this is a launcher affordance rather than a live field:
  * the input is `pointer-events-none` and clicking the surround opens the
  * command launcher. The component is the same either way.
+ *
+ * On Base UI's `Input` since stage 3 of the migration (2026-09-07), so a
+ * search field inside a `Field` is labelled by it without the caller wiring
+ * an id. The surround stays ours: the border, the focus-within rule and the
+ * `Kbd` hint are this component's, not the input's.
  */
 export interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className'> {
   /** A keyboard hint drawn at the right edge, e.g. "Ctrl+K". */
@@ -31,7 +37,7 @@ export function SearchInput({ shortcut, className, placeholder = 'Search…', ..
         className,
       )}
     >
-      <input
+      <Input
         className="flex-1 min-w-0 bg-transparent text-input-value text-text-primary placeholder:text-text-muted outline-none"
         placeholder={placeholder}
         {...props}

package/src/Select.mdx

@@ -50,21 +50,32 @@ import { Select } from '@estiva-app/ui'
 
 - The trigger truncates long labels instead of stretching its row — give
   it room with your layout, not with `white-space` tricks.
-- Its geometry is pure and tested (`fitMenu`): 288px cap, 120px floor —
-  scrollable beats invisible.
+- **The list hangs under the trigger**, 4px below it, and flips above when
+  the room below is worse. Base UI would rather lay it *over* the trigger
+  with the chosen option covering the trigger's own text, the way macOS
+  does; that is off (Katerina, D24) because every Select in both apps opens
+  below one today.
+- It caps at 288px, or at the room the screen actually has, whichever is
+  smaller — and scrolls inside that. Measured in a bottom-right corner:
+  the list flips above the trigger, slides left to stay on screen, and
+  stands at its full 288.
+- **The trigger is a `combobox`, not a `button`.** That is the ARIA pattern
+  for this control and Base UI's doing; a test looking for it by role has
+  to ask for `combobox`.
 
 ## Keys
 
 | Input | What happens |
 |---|---|
 | Enter / Space / click, closed | opens the list |
-| ↑ / ↓ | move the active option, kept scrolled into view |
+| ↑ / ↓ | move the highlight, kept scrolled into view |
 | Home / End | jump to the first / last option |
-| Enter / Space, open | picks the active option |
+| **typing a label's first letters** | **jumps to that option** — new, and nothing here implements it |
+| Enter / Space, open | picks the highlighted option |
 | Escape | closes, returns focus to the trigger |
 | Tab | closes |
 | click outside | closes |
-| page scroll or resize | closes (the list is fixed where the trigger was) — the list's **own** scroll never dismisses it |
+| page scroll or resize | **the list follows its trigger**, and disappears if the trigger scrolls out of sight. It used to close, because a list fixed to where the trigger *had been* had no other way not to be left behind |
 
 ## Props
 

package/src/Select.test.tsx

@@ -0,0 +1,157 @@
+// @vitest-environment jsdom
+/**
+ * What the Select page claims, pinned.
+ *
+ * This component had no component test at all — only `Select.fit.test.ts`,
+ * eight assertions about the pure geometry it grew and then shared with the
+ * Menu shell. That geometry is Floating UI's now, so the file is deleted and
+ * its subject is measured in a browser instead (jsdom lays nothing out, so a
+ * jsdom test that claimed to check placement would be checking nothing).
+ * What is testable here is behaviour, and it never was.
+ *
+ * Ship asserts on this component in `web/src/components/ui/ui.test.tsx`; the
+ * shapes it uses are repeated here deliberately, so a break shows up in this
+ * repository rather than in Ship's adoption PR.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
+import { Select } from './Select'
+
+afterEach(cleanup)
+
+const STATUSES = [
+  { value: 'todo', label: 'Todo' },
+  { value: 'in_progress', label: 'In Progress' },
+  { value: 'done', label: 'Done' },
+]
+
+function Controlled({ initial = 'todo', ...rest }: { initial?: string } & Partial<React.ComponentProps<typeof Select>>) {
+  const [value, setValue] = useState(initial)
+  return <Select value={value} onChange={setValue} options={STATUSES} ariaLabel="Status" {...rest} />
+}
+
+describe('Select', () => {
+  it('is a button naming itself, showing the chosen label', () => {
+    render(<Controlled initial="in_progress" />)
+    const trigger = screen.getByRole('combobox', { name: 'Status' })
+    expect(trigger.textContent).toContain('In Progress')
+    expect(trigger.getAttribute('aria-expanded')).toBe('false')
+  })
+
+  it('shows the placeholder when nothing matches', () => {
+    render(<Controlled initial="" placeholder="Choose" />)
+    expect(screen.getByRole('combobox', { name: 'Status' }).textContent).toContain('Choose')
+  })
+
+  it('opens on click, lists every option, and marks the chosen one', async () => {
+    const user = userEvent.setup()
+    render(<Controlled initial="in_progress" />)
+    await user.click(screen.getByRole('combobox', { name: 'Status' }))
+    expect(await screen.findByRole('listbox')).toBeTruthy()
+    const options = screen.getAllByRole('option')
+    // The tick's icon contributes a fallback glyph to textContent, so read the
+    // labels rather than the whole row.
+    expect(options.map((o) => o.textContent?.slice(0, 11))).toEqual(['Todo', 'In Progress', 'Done'])
+    expect(options[1].getAttribute('data-selected')).not.toBeNull()
+    expect(screen.getByRole('combobox', { name: 'Status' }).getAttribute('aria-expanded')).toBe('true')
+  })
+
+  it('opens from the keyboard, moves with arrows, picks with Enter, and gives focus back', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Select value="todo" onChange={onChange} options={STATUSES} ariaLabel="Status" />)
+    const trigger = screen.getByRole('combobox', { name: 'Status' })
+    trigger.focus()
+    await user.keyboard('{ArrowDown}')
+    expect(await screen.findByRole('listbox')).toBeTruthy()
+    await user.keyboard('{ArrowDown}{Enter}')
+    expect(onChange).toHaveBeenCalledWith('in_progress')
+    expect(document.activeElement).toBe(trigger)
+  })
+
+  /**
+   * The list is unmounted from the page's point of view when it closes: Base UI
+   * leaves the popup element in the DOM but hides the positioner around it with
+   * the `hidden` attribute, so it is out of the accessibility tree and
+   * `queryByRole` cannot see it. Ship asserts exactly this — pinned here so the
+   * assertion is known to hold before Ship ever runs it.
+   */
+  it('closes on Escape, and the listbox is no longer findable', async () => {
+    const user = userEvent.setup()
+    render(<Controlled />)
+    await user.click(screen.getByRole('combobox', { name: 'Status' }))
+    expect(await screen.findByRole('listbox')).toBeTruthy()
+    await user.keyboard('{Escape}')
+    await waitFor(() => expect(screen.queryByRole('listbox')).toBeNull())
+  })
+
+  it('closes on a press outside', async () => {
+    const user = userEvent.setup()
+    render(
+      <>
+        <Controlled />
+        <button type="button">Elsewhere</button>
+      </>,
+    )
+    await user.click(screen.getByRole('combobox', { name: 'Status' }))
+    expect(await screen.findByRole('listbox')).toBeTruthy()
+    await user.click(screen.getByRole('button', { name: 'Elsewhere' }))
+    await waitFor(() => expect(screen.queryByRole('listbox')).toBeNull())
+  })
+
+  it('picking an option reports it and closes', async () => {
+    const user = userEvent.setup()
+    const onChange = vi.fn()
+    render(<Select value="todo" onChange={onChange} options={STATUSES} ariaLabel="Status" />)
+    await user.click(screen.getByRole('combobox', { name: 'Status' }))
+    await user.click(await screen.findByRole('option', { name: /Done/ }))
+    expect(onChange).toHaveBeenCalledWith('done')
+    await waitFor(() => expect(screen.queryByRole('listbox')).toBeNull())
+  })
+
+  /** New at stage 4, and nothing here implements it: type the start of an
+   *  option's label and the list jumps to it. */
+  it('typeahead moves the highlight to a matching option', async () => {
+    const user = userEvent.setup()
+    render(<Controlled />)
+    const trigger = screen.getByRole('combobox', { name: 'Status' })
+    trigger.focus()
+    await user.keyboard('{ArrowDown}')
+    expect(await screen.findByRole('listbox')).toBeTruthy()
+    await user.keyboard('don')
+    const highlighted = screen.getAllByRole('option').find((o) => o.getAttribute('data-highlighted') !== null)
+    expect(highlighted?.textContent).toContain('Done')
+  })
+
+  it('Home and End jump to the first and last option', async () => {
+    const user = userEvent.setup()
+    render(<Controlled initial="in_progress" />)
+    screen.getByRole('combobox', { name: 'Status' }).focus()
+    await user.keyboard('{ArrowDown}')
+    expect(await screen.findByRole('listbox')).toBeTruthy()
+    const highlighted = () => screen.getAllByRole('option').find((o) => o.getAttribute('data-highlighted') !== null)?.textContent
+    await user.keyboard('{End}')
+    expect(highlighted()).toContain('Done')
+    await user.keyboard('{Home}')
+    expect(highlighted()).toContain('Todo')
+  })
+
+  it('Tab closes the list', async () => {
+    const user = userEvent.setup()
+    render(<Controlled />)
+    await user.click(screen.getByRole('combobox', { name: 'Status' }))
+    expect(await screen.findByRole('listbox')).toBeTruthy()
+    await user.tab()
+    await waitFor(() => expect(screen.queryByRole('listbox')).toBeNull())
+  })
+  it('disabled: the trigger cannot be opened', async () => {
+    const user = userEvent.setup()
+    render(<Controlled disabled />)
+    const trigger = screen.getByRole('combobox', { name: 'Status' })
+    expect(trigger.hasAttribute('disabled') || trigger.getAttribute('aria-disabled') === 'true').toBe(true)
+    await user.click(trigger)
+    expect(screen.queryByRole('listbox')).toBeNull()
+  })
+})