GrDropdown

The component does not know what exactly the consumer will put into the #trigger slot, so it gives the click, the keyboard and the ARIA away as an object that has to be bound to a real focusable element:

<GrDropdown>
  <template #trigger="{ triggerProps }">
    <GrButton variant="outline" v-bind="triggerProps">Actions</GrButton>
  </template>

  <template #content>
    <button type="button" role="menuitem">Duplicate</button>
  </template>
</GrDropdown>

The wrapper of the slot deliberately does not catch clicks: otherwise the panel would be toggled by any click inside it — nested buttons and links included. A forgotten v-bind prints a warning in a dev build: a silently non-working trigger would be looked for in someone else’s code.

The slot also gives away open, toggle and close — for markup of your own for the state.

• placement — any floating-ui value (bottom-end by default). Flipping when there is not enough room (flip) always works: placement is a preference rather than an order, and the transform-origin of the panel follows the actual side;
• offset — the gap between the trigger and the panel, in px;
• width — a CSS length: a number is treated as pixels, a string goes as it is, and auto gives the width to the content. The Tailwind scales (width="48" → w-48) are gone; a string without units is treated as pixels and complains in a dev build.

trigger="click" (the default) or "hover". In the hover mode the delays are set by openDelay/closeDelay: without the first the panel jumps out on any crossing of the cursor, without the second it cannot be kept while moving from the trigger to the panel — there is an offset gap between them.

The click and the keyboard work in both modes: a menu available only with the mouse is not available from the keyboard at all.

disabled closes the panel and does not let it be opened by a click, by the keyboard or by hovering. The trigger stays focusable in the process and gets aria-disabled — the native disabled would throw it out of the tab order together with the explanation of what is going on.

open(), close() and toggle() through a ref on the component — the same set as in the other overlays. Unlike the modal ones, a menu keeps its state itself: it has no model, and the methods change it directly. The imperative path does not bypass disabled — otherwise it would open what is closed to the click and to the keyboard.

The same three methods arrive in the #trigger slot (:open, :toggle, :close) — a ref is needed when the menu has to be opened from outside the markup of the trigger.

Enter/Space/↓ open the panel with the focus on the first item, ↑ on the last. Inside: ↓/↑ across the items, Home/End to the edges, Tab closes, Esc closes and returns the focus to the trigger (that is disposed of by the shared layer stack rather than by the component itself).

A printable character is a typeahead by the first letter: the buffer accumulates while the pauses between presses are shorter than 600 ms, and repeating the same letter means “the next item starting with it” rather than a search for “aa”. The search runs over the visible text of the item.

Space is not intercepted while the buffer is empty: menu items are buttons, and the space is their native activation key. It enters the query only when a search is already running (the typeahead rule from the WAI-ARIA APG).

Controls inside the panel

With closeOnContentClick={false} it is not a menu that lives in the panel but content — fields, checkboxes, switches. The keys the focused control can handle itself are left to it: printable characters and Home/End do not go into the navigation across the items while the focus is in an input, a textarea, a select or a contenteditable.

The arrows are a deliberate exception: they stay with the panel even inside a field. Tab closes the panel, and without the arrows there would be no way out of a field inside it. They are also how the field is reached in the first place: everything focusable enters the navigation ring, not only the menu items.

Besides the imperative API the panel is controllable declaratively: without the open prop the previous uncontrolled behaviour holds, with it the parent owns the state and update:open accompanies every change (the shared contract of panel overlays, as in GrPopover). The hover delays in the controlled mode are the same: the component emits, the parent applies.