@bridge-ui/vue 0.0.6 → 0.0.8

package/docs/components/FormField.md

@@ -0,0 +1,71 @@
+# FormField
+
+> Building block for field chrome. Prefer public fields (`TextField`, `Select`, …) in apps; FormField remains exported for advanced composition. Not a `BridgeUIComponentsConfig` key — theme via the public parent (`components.TextField`, `components.Select`, …).
+
+Form field chrome (label, adornments, error) used by TextField, Select, and other inputs.
+
+## Import
+
+```ts
+import { FormField } from "@bridge-ui/vue";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<FormField label="Email" description="We never share your email.">
+  <input type="email" class="w-full rounded border px-3 py-2" />
+</FormField>
+```
+
+### customProps
+
+```vue
+<FormField
+  label="Email"
+  description="We never share your email."
+  :custom-props="{
+    root: { id: 'email-field' },
+    description: { id: 'email-desc' },
+    label: { id: 'email-label', for: 'email-input' },
+    input: { id: 'email-input', autocomplete: 'email', name: 'email' },
+  }"
+>
+  <input type="email" class="w-full rounded border px-3 py-2" />
+</FormField>
+```
+
+## Props
+
+| Prop               | Type                   | Default     | Description                                                                                                                                             |
+| ------------------ | ---------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `classes`          | `FormFieldClasses`     | —           | Classes for the field chrome and the control (includes label, container, adornments).                                                                   |
+| `color`            | `FormFieldColor`       | "primary"   | The color to apply to the field control.                                                                                                                |
+| `controlId`        | `string`               | —           | Associates labels and helper text with a form control. When omitted, an id is generated automatically.                                                  |
+| `corner`           | `string`               | —           | Secondary label text at the inline end of the header row.                                                                                               |
+| `customProps`      | `FormFieldCustomProps` | —           | Extra props for internal parts (`header`, `label`, `input`, `container`, …).                                                                            |
+| `description`      | `string`               | —           | Helper text below the control (hidden when the field is invalid).                                                                                       |
+| `disabled`         | `boolean`              | `false`     | Whether the control is disabled.                                                                                                                        |
+| `end`              | `string`               | —           | Inline-end text inside the field (suffix), e.g. `@mail.com`.                                                                                            |
+| `endIcon`          | `LucideIcon`           | —           | Icon at the **inline end** (physical right in `ltr`, physical left in `rtl`).                                                                           |
+| `error`            | `boolean`              | `false`     | When `true`, applies invalid styling on the label and hides description.                                                                                |
+| `errorIcon`        | `LucideIcon`           | CircleAlert | Icon used when `showErrorIcon` is enabled and the field is invalid.                                                                                     |
+| `errorMessage`     | `string`               | —           | Error message below the control. Shown only when set (or via `#errorMessage` slot).                                                                     |
+| `field`            | `UseFormFieldReturn`   | —           | Pre-composed field API from a parent composable (e.g. `useTextField`). Used by `<FormField :field="…" />`; not set on field wrappers such as TextField. |
+| `hideErrorMessage` | `boolean`              | `false`     | When `true`, does not reserve space below the control for error messages.                                                                               |
+| `label`            | `string`               | —           | The primary label text above the control.                                                                                                               |
+| `readonly`         | `boolean`              | `false`     | Whether the control is read-only.                                                                                                                       |
+| `required`         | `boolean`              | `false`     | Shows a red asterisk on the label.                                                                                                                      |
+| `rounded`          | `FormFieldRounded`     | "md"        | The roundedness of the field control.                                                                                                                   |
+| `showErrorIcon`    | `boolean`              | `true`      | When `true` and the field is invalid, shows an error icon at the inline end when no `endIcon` or `end` slot is present.                                 |
+| `size`             | `FormFieldSize`        | "md"        | Typography scale for label, corner, description, and error message, and control sizing (input, container, icons).                                       |
+| `slots`            | `FormFieldSlots`       | —           | Chrome slots (`label`, `description`, `errorMessage`, …) via `#slot` or prop; inline adornments use `#start` / `#end`.                                  |
+| `start`            | `string`               | —           | Inline-start text inside the field (prefix), e.g. `https://`.                                                                                           |
+| `startIcon`        | `LucideIcon`           | —           | Icon at the **inline start** (physical left in `ltr`, physical right in `rtl`).                                                                         |
+| `variant`          | `FormFieldVariant`     | "outline"   | The visual variant of the field shell and control.                                                                                                      |
+
+## Related components
+
+TextField, Select, NumberField, Textarea, PasswordField

package/docs/components/I18n.md

@@ -0,0 +1,125 @@
+# i18n
+
+Bridge chrome strings (aria-labels, empty/loading copy) resolve through an optional i18n adapter on `BridgeUIProvider` / `createBridgeUI` (`global.i18n`). Without an adapter, the English source string is returned as-is.
+
+Lookup is **gettext-style**: the source English text is the key. Multi-locale
+adapters can keep the active locale internally via optional `setLocale`.
+
+```ts
+const resolveMessage = useResolveMessage();
+
+resolveMessage("Hide password");
+```
+
+`useResolveMessage` reads the active adapter from context. **Interpolation and
+pluralization are the adapter’s job** (vue-i18n, i18next, or a custom `t`).
+Bridge `setLocale` updates `global.locale` and calls optional `adapter.setLocale`
+— persistence (localStorage, backend) stays in the app.
+
+Implement `I18nAdapter` as a plain object — Bridge only defines the interface.
+
+## Import
+
+```ts
+import { useResolveMessage, type I18nAdapter } from "@bridge-ui/vue";
+```
+
+## Examples
+
+### Resolve in a component
+
+```vue
+<script setup lang="ts">
+import { useResolveMessage } from "@bridge-ui/vue";
+
+const resolveMessage = useResolveMessage();
+</script>
+
+<template>
+  <button type="button" :aria-label="resolveMessage('Clear selection')">
+    Clear
+  </button>
+</template>
+```
+
+### Dictionary adapter
+
+Locale-keyed source→string map (no replace/plural). Optional `setLocale`
+updates the active locale used by `t`.
+
+```ts
+import { createBridgeUI } from "@bridge-ui/vue";
+import { createDictionaryI18nAdapter } from "@examples/i18n-dictionary";
+
+const i18n = createDictionaryI18nAdapter();
+
+const bridge = createBridgeUI({
+  global: { i18n, locale: "pt-BR" },
+});
+```
+
+### Custom adapter
+
+```ts
+import { get } from "es-toolkit/compat";
+import type { I18nAdapter } from "@bridge-ui/vue";
+
+const messages: Record<string, Record<string, string>> = {
+  "pt-BR": {
+    Close: "Fechar",
+    "Hide password": "Ocultar senha",
+    "Clear selection": "Limpar seleção",
+  },
+};
+
+let locale = "en-US";
+
+const i18n: I18nAdapter = {
+  setLocale(next) {
+    locale = next;
+  },
+  t(message) {
+    return get(messages, [locale, message], message);
+  },
+};
+```
+
+### vue-i18n (replace & plural)
+
+```ts
+import { createI18n } from "vue-i18n";
+import { createVueI18nAdapter } from "@examples/i18n-vue-i18n";
+
+const vueI18n = createI18n({ legacy: false, locale: "en-US", messages: {} });
+const i18n = createVueI18nAdapter(vueI18n.global);
+
+const resolveMessage = useResolveMessage();
+resolveMessage("{count} item", { count: 3 });
+// → vue-i18n handles interpolation / plural rules
+
+setLocale("pt-BR"); // Bridge locale + i18n.locale via adapter.setLocale
+```
+
+Other ready examples:
+
+| File                 | Library              | Replace / plural |
+| -------------------- | -------------------- | ---------------- |
+| `i18n-dictionary.ts` | In-memory dictionary | No (static map)  |
+| `i18n-vue-i18n.ts`   | vue-i18n             | Yes (via lib)    |
+
+## Chrome strings
+
+| Source (key)      |
+| ----------------- |
+| `Close`           |
+| `Loading...`      |
+| `No options`      |
+| `Show password`   |
+| `Hide password`   |
+| `Clear selection` |
+| `Increment value` |
+| `Decrement value` |
+
+## Related components
+
+BridgeUIProvider, PasswordField, NumberField, Select, Listbox, Snackbar

package/docs/components/Icon.md

@@ -0,0 +1,88 @@
+# Icon
+
+Renders an icon from a semantic name (via the icon adapter) or a concrete icon component, with design-system sizing.
+
+Semantic names require an icon adapter on `BridgeUIProvider` / `createBridgeUI` (`global.icons`). Bridge only defines the `IconAdapter` interface — copy an example from `packages/vue/docs/examples/`.
+
+## Import
+
+```ts
+import { Icon } from "@bridge-ui/vue/Components/Icon";
+```
+
+## Examples
+
+### Icon component
+
+```ts
+import { Info } from "@lucide/vue";
+```
+
+```vue
+<Icon size="md" :icon="Info" />
+```
+
+### Semantic name + adapter
+
+```ts
+import { createBridgeUI } from "@bridge-ui/vue";
+import { createLucideIconAdapter } from "@examples/icon-lucide";
+
+const icons = createLucideIconAdapter();
+
+app.use(
+  createBridgeUI({
+    global: { icons },
+  }),
+);
+```
+
+```vue
+<Icon size="md" icon="info" />
+```
+
+Other ready examples (same `create*IconAdapter()` shape):
+
+| File                  | Library                     |
+| --------------------- | --------------------------- |
+| `icon-lucide.ts`      | Lucide                      |
+| `icon-heroicons.ts`   | Heroicons (24 outline)      |
+| `icon-tabler.ts`      | Tabler Icons                |
+| `icon-phosphor.ts`    | Phosphor Icons              |
+| `icon-fontawesome.ts` | Font Awesome 6 (free solid) |
+
+### Font Awesome definitions
+
+With the Font Awesome adapter, pass definitions directly — `normalize` wraps them:
+
+```ts
+import { createBridgeUI } from "@bridge-ui/vue";
+import { faCoffee } from "@fortawesome/free-solid-svg-icons";
+import { createFontAwesomeIconAdapter } from "@examples/icon-fontawesome";
+
+const icons = createFontAwesomeIconAdapter();
+
+app.use(
+  createBridgeUI({
+    global: { icons },
+  }),
+);
+```
+
+```vue
+<Icon :icon="faCoffee" />
+<Icon icon="info" />
+```
+
+The example also exports `wrapFaIcon` if you need a component outside `<Icon />`.
+
+## Props
+
+| Prop   | Type         | Default | Description                                                                  |
+| ------ | ------------ | ------- | ---------------------------------------------------------------------------- |
+| `icon` | `IconSource` | —       | Semantic name, icon component, or adapter-normalized native value (e.g. FA). |
+| `size` | `IconSize`   | "md"    | The size of the icon.                                                        |
+
+## Related components
+
+Button, Alert, TextField, BridgeUIProvider

package/docs/components/Label.md

@@ -0,0 +1,31 @@
+# Label
+
+Accessible label element with required and error styling.
+
+## Import
+
+```ts
+import { Label } from "@bridge-ui/vue/Components/Label";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Label required for="email">Email</Label>
+```
+
+## Props
+
+| Prop       | Type           | Default | Description                                         |
+| ---------- | -------------- | ------- | --------------------------------------------------- |
+| `classes`  | `LabelClasses` | —       | The classes to apply to the label.                  |
+| `error`    | `boolean`      | `false` | Applies error label colors.                         |
+| `for`      | `string`       | —       | Associates the label with a form control.           |
+| `required` | `boolean`      | `false` | Shows a red required asterisk after the label text. |
+| `size`     | `LabelSize`    | "md"    | Typography scale aligned with TextField sizes.      |
+
+## Related components
+
+FormField, FormControl

package/docs/components/Link.md

@@ -0,0 +1,71 @@
+# Link
+
+Styled anchor for in-app and external navigation.
+
+## Import
+
+```ts
+import { Link } from "@bridge-ui/vue/Components/Link";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Link href="/dashboard">Dashboard</Link>
+
+<Link color="primary" underline="hover" href="https://example.com">
+  External link
+</Link>
+
+<Link href="#" :left-icon="Info">
+  With icon
+</Link>
+```
+
+### States
+
+```vue
+<Link disabled href="/button">
+  Disabled
+</Link>
+
+<Link external href="https://example.com">
+  External
+</Link>
+```
+
+### customProps
+
+```vue
+<Link
+  href="#"
+  :left-icon="ExternalLink"
+  :custom-props="{
+    leftIcon: { 'aria-hidden': true },
+    root: { id: 'docs-link', target: '_blank', rel: 'noopener noreferrer' },
+  }"
+>
+  Open documentation
+</Link>
+```
+
+## Props
+
+| Prop          | Type              | Default   | Description                                                                                                           |
+| ------------- | ----------------- | --------- | --------------------------------------------------------------------------------------------------------------------- |
+| `classes`     | `LinkClasses`     | —         | The classes to apply to the link.                                                                                     |
+| `color`       | `LinkColor`       | "primary" | The color to apply to the link.                                                                                       |
+| `customProps` | `LinkCustomProps` | —         | Extra props for internal parts (`leftIcon`, `rightIcon`, etc.). Root HTML attributes stay on the component top level. |
+| `disabled`    | `boolean`         | `false`   | Whether the link is disabled.                                                                                         |
+| `external`    | `boolean`         | `false`   | Whether the link opens in a new tab.                                                                                  |
+| `href`        | `string`          | —         | The URL the link points to.                                                                                           |
+| `leftIcon`    | `LucideIcon`      | —         | The icon to display before the link text.                                                                             |
+| `rightIcon`   | `LucideIcon`      | —         | The icon to display after the link text.                                                                              |
+| `size`        | `LinkSize`        | "md"      | The size of the link.                                                                                                 |
+| `underline`   | `LinkUnderline`   | "hover"   | The underline behavior of the link.                                                                                   |
+
+## Related components
+
+Button

package/docs/components/List.md

@@ -0,0 +1,167 @@
+# List
+
+Vertical list container. Use with `ListItem` and `ListSection`.
+
+## Import
+
+```ts
+import { List } from "@bridge-ui/vue/Components/List";
+import { ListItem } from "@bridge-ui/vue/Components/ListItem";
+import { ListSection } from "@bridge-ui/vue/Components/ListSection";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<List>
+  <ListItem primary="Inbox" secondary="12 messages" />
+  <ListItem primary="Drafts" secondary="3 items" />
+  <ListItem primary="Sent" />
+</List>
+```
+
+### Sections
+
+```vue
+<List>
+  <ListSection title="Folders" />
+  <ListItem primary="Inbox" />
+  <ListItem primary="Drafts" />
+  <ListSection title="Labels" />
+  <ListItem primary="Important" />
+</List>
+```
+
+### Interactive
+
+```vue
+<List role="menu">
+  <ListItem
+    interactive
+    role="menuitem"
+    primary="Profile"
+    v-on:click="selected = 'profile'"
+    :selected="selected === 'profile'"
+  />
+  <ListItem
+    interactive
+    role="menuitem"
+    primary="Settings"
+    v-on:click="selected = 'settings'"
+    :selected="selected === 'settings'"
+  />
+</List>
+```
+
+### Start and end slots
+
+```vue
+<ListItem interactive primary="Inbox" secondary="12 unread messages">
+  <template #start>
+    <Mail class="text-secondary-500 size-5" />
+  </template>
+
+  <template #end>
+    <span class="text-secondary-400 text-xs">12</span>
+  </template>
+</ListItem>
+```
+
+### Selected icon
+
+Selected rows show a check icon by default. Customize it with `selectedIcon` on `ListItem`, or pass `null` to hide it. Providing the `#end` slot replaces the selected icon.
+
+```vue
+<List>
+  <ListItem selected interactive primary="Inbox" />
+  <ListItem selected interactive primary="Starred" :selected-icon="Star" />
+  <ListItem selected interactive primary="No icon" :selected-icon="null" />
+</List>
+```
+
+### Disabled and divider
+
+```vue
+<ListItem interactive primary="Available action" />
+<ListItem disabled interactive primary="Disabled action" />
+<ListItem divider primary="With divider" />
+```
+
+### Nested
+
+```vue
+<List>
+  <ListItem primary="Documents" />
+  <List nested>
+    <ListItem primary="Reports" />
+    <ListItem primary="Invoices" />
+  </List>
+  <ListItem primary="Settings" />
+</List>
+```
+
+### Sticky section
+
+With the default `as="li"`, sticky styles apply on the section root. The list (or a parent) needs a scroll container with a constrained height.
+
+```vue
+<div class="max-h-48 overflow-y-auto">
+  <List>
+    <ListSection sticky title="Section A" />
+    <ListItem primary="Item A1" />
+    <ListSection sticky title="Section B" />
+    <ListItem primary="Item B1" />
+  </List>
+</div>
+```
+
+### Inset section
+
+```vue
+<ListSection inset title="With icons below" />
+```
+
+## Props (`List`)
+
+| Prop          | Type                    | Default | Description                                                                        |
+| ------------- | ----------------------- | ------- | ---------------------------------------------------------------------------------- |
+| `as`          | `"nav" \| "ol" \| "ul"` | "ul"    | The element to render as.                                                          |
+| `classes`     | `ListClasses`           | —       | The classes to apply to the list.                                                  |
+| `customProps` | `ListCustomProps`       | —       | Props forwarded to each list part.                                                 |
+| `dense`       | `boolean`               | `false` | Compact vertical spacing on items (`ListItem` / `ListSection`), not the list root. |
+| `nested`      | `boolean`               | `false` | When true, indents the list for nested navigation/submenus.                        |
+
+## Props (`ListItem`)
+
+| Prop           | Type                                 | Default  | Description                                                                        |
+| -------------- | ------------------------------------ | -------- | ---------------------------------------------------------------------------------- |
+| `as`           | `"div" \| "li"`                      | "li"     | The element to render as.                                                          |
+| `classes`      | `ListItemClasses`                    | —        | The classes to apply to the item.                                                  |
+| `customProps`  | `ListItemCustomProps`                | —        | Props forwarded to each item part.                                                 |
+| `dense`        | `boolean`                            | —        | Compact vertical padding. Inherits `dense` from parent `List` when omitted.        |
+| `disabled`     | `boolean`                            | `false`  | When true, the item is not interactive and appears muted.                          |
+| `divider`      | `boolean`                            | `false`  | When true, renders a bottom divider on the item.                                   |
+| `interactive`  | `boolean`                            | `false`  | When true, applies hover/focus styles and `tabIndex={0}` on the inner wrapper.     |
+| `primary`      | `string`                             | —        | Primary label text.                                                                |
+| `role`         | `"button" \| "menuitem" \| "option"` | "button" | ARIA role for the interactive wrapper.                                             |
+| `secondary`    | `string`                             | —        | Secondary/description text below the primary line.                                 |
+| `selected`     | `boolean`                            | `false`  | When true, highlights the item as selected.                                        |
+| `selectedIcon` | `null \| LucideIcon`                 | `Check`  | Icon shown when `selected` is true. Use `null` to hide it. Replaced by `#end`.     |
+| `value`        | `ListboxValue`                       | —        | When set inside a `Select` / `Listbox`, registers this row as a selectable option. |
+
+## Props (`ListSection`)
+
+| Prop          | Type                     | Default | Description                                                                                                                                                  |
+| ------------- | ------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `as`          | `"div" \| "li"`          | "li"    | The element to render as.                                                                                                                                    |
+| `classes`     | `ListSectionClasses`     | —       | The classes to apply to the section.                                                                                                                         |
+| `customProps` | `ListSectionCustomProps` | —       | Props forwarded to each section part.                                                                                                                        |
+| `inset`       | `boolean`                | `false` | When true, adds left padding to align with items that have leading icons.                                                                                    |
+| `sticky`      | `boolean`                | `false` | When true, sticks the heading while scrolling. On `as="li"` (default), sticky + opaque background apply to the root; on `as="div"`, they apply to the title. |
+| `title`       | `string`                 | —       | Section label text.                                                                                                                                          |
+
+## Related components
+
+Menu, Select

package/docs/components/Menu.md

@@ -0,0 +1,97 @@
+# Menu
+
+Anchored floating panel for actions and dropdowns. Control with `v-model` / `show`.
+
+## Import
+
+```ts
+import { Menu } from "@bridge-ui/vue/Components/Menu";
+```
+
+## Examples
+
+### Usage
+
+```vue
+<Menu v-model="open">
+  <template #trigger>
+    <Button v-on:click="open = true">Open menu</Button>
+  </template>
+
+  <MenuContent v-on:action="open = false" />
+</Menu>
+```
+
+### Placement
+
+```vue
+<Menu v-model="open" placement="bottom-end">
+  <template #trigger>
+    <Button v-on:click="open = true">Open menu</Button>
+  </template>
+
+  <MenuContent />
+</Menu>
+```
+
+### Persistent
+
+```vue
+<Menu persistent v-model="open">
+  <template #trigger>
+    <Button v-on:click="open = true">Open persistent</Button>
+  </template>
+
+  <MenuContent />
+</Menu>
+```
+
+### anchorEl
+
+```vue
+<div ref="anchorRef">
+  <Button v-on:click="open = true">External anchor</Button>
+</div>
+
+<Menu v-model="open" :anchor-el="anchorRef">
+  <MenuContent />
+</Menu>
+```
+
+## Props
+
+| Prop                | Type                      | Default        | Description                                                                                                                                                                                                                                                                          |
+| ------------------- | ------------------------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `anchorEl`          | `HTMLElement \| null`     | —              | Element that anchors the menu panel. When set, it is used for positioning and click-away instead of the `trigger` slot wrapper. Prefer this when the opener lives outside the `Menu` or is controlled manually. Not merged into Bridge defaults (DOM nodes must not be deep-merged). |
+| `classes`           | `MenuClasses`             | —              | The classes to apply to the menu.                                                                                                                                                                                                                                                    |
+| `closeOnClickAway`  | `boolean`                 | `true`         | Whether the menu closes when clicking outside the trigger and panel.                                                                                                                                                                                                                 |
+| `closeOnEscape`     | `boolean`                 | `true`         | Whether the menu closes on escape key press.                                                                                                                                                                                                                                         |
+| `customProps`       | `MenuCustomProps`         | —              | Props forwarded to each menu part.                                                                                                                                                                                                                                                   |
+| `disableAutoFocus`  | `boolean`                 | `false`        | When true, the menu does not auto-focus the first focusable item on open.                                                                                                                                                                                                            |
+| `disableScrollLock` | `boolean`                 | `true`         | When true, body scroll is not locked while the menu is open.                                                                                                                                                                                                                         |
+| `keepMounted`       | `boolean`                 | `false`        | When true, the menu stays mounted in the DOM after closing (hidden).                                                                                                                                                                                                                 |
+| `offset`            | `number`                  | 4              | Gap between the trigger and the menu panel (px).                                                                                                                                                                                                                                     |
+| `onShowChange`      | `(show: boolean) => void` | —              | Called when `show` should change (controlled state without `v-model`).                                                                                                                                                                                                               |
+| `persistent`        | `boolean`                 | `false`        | When true, escape and click-away do not close the menu.                                                                                                                                                                                                                              |
+| `placement`         | `PositionPlacement`       | "bottom-start" | Preferred placement of the menu relative to the anchor (Floating UI).                                                                                                                                                                                                                |
+| `rounded`           | `MenuRounded`             | "md"           | The roundedness of the menu panel.                                                                                                                                                                                                                                                   |
+| `shadow`            | `MenuShadow`              | "md"           | The shadow to apply to the menu panel.                                                                                                                                                                                                                                               |
+| `strategy`          | `PositionStrategy`        | "fixed"        | CSS position strategy for the floating panel.                                                                                                                                                                                                                                        |
+| `teleportTo`        | `string \| false`         | "body"         | Where to portal the menu panel. Pass `false` to render in place.                                                                                                                                                                                                                     |
+
+### v-model
+
+| Prop / Event        | Type                       | Default | Description                                                                  |
+| ------------------- | -------------------------- | ------- | ---------------------------------------------------------------------------- |
+| `modelValue`        | `boolean`                  | `false` | Whether the menu is open. Bound with `v-model`.                              |
+| `update:modelValue` | `(value: boolean) => void` | —       | Emitted when `v-model` should update. Listen with `v-on:update:model-value`. |
+
+## Events
+
+| Event        | Payload | Description                                                                                                                      |
+| ------------ | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `v-on:close` | —       | Emitted when the user dismisses the menu (Escape or click-away). Not emitted when the parent sets `v-model` to `false` directly. |
+
+## Related components
+
+List, ListItem, Select, Button