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

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

# Accordion

## `<ry-accordion>`

| Attribute (on accordion-item) | Values | Description |
|-------------------------------|--------|-------------|
| `title` | string | Header text |
| `open` | boolean | Initially expanded |

Events: `ry:toggle` on item — `e.detail.open` (boolean)

```html
<ry-accordion>
  <ry-accordion-item title="Section 1" open>Content here.</ry-accordion-item>
  <ry-accordion-item title="Section 2">More content.</ry-accordion-item>
</ry-accordion>
```

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

item.addEventListener('ry:toggle', (e) => {
  console.log(e.detail.open); // true or false
});

// Programmatic
item.open = true;
item.open = false;
item.toggle();
```