@ryanhelsing/ry-ui/docs/components/dropdown.md

Framework-agnostic, Light DOM web components. CSS is the source of truth.

# Dropdown

## `<ry-dropdown>`

The first child element is the trigger. Menu items go inside `<ry-menu>`.

Events: `ry:select` — `e.detail.value`
API: `.open()`, `.close()`

```html
<ry-dropdown>
  <ry-button>Options</ry-button>
  <ry-menu>
    <ry-menu-item>Edit</ry-menu-item>
    <ry-menu-item>Duplicate</ry-menu-item>
    <ry-divider></ry-divider>
    <ry-menu-item>Delete</ry-menu-item>
  </ry-menu>
</ry-dropdown>
```

JS:
```js
const dropdown = document.querySelector('ry-dropdown');

dropdown.addEventListener('ry:select', (e) => {
  console.log(e.detail.value); // "Edit", "Delete", etc.
});

// Programmatic
dropdown.open();
dropdown.close();
```