# `m-accordion-list-item`

An Accordion List is a component that organizes content into collapsible sections, allowing users to show or hide related information within a vertically stacked layout. This structure helps optimize space and improve readability by displaying only relevant content when needed. Accordion Lists are commonly used in FAQs, settings menus, and structured content navigation to enhance user experience and reduce visual clutter.

## Props

| Name | Description | Type | Default |
|------|-------------|------|---------|
| `id*` | A unique identifier for the accordion item.
It links the trigger button (`aria-controls`) to its associated content (`aria-labelledby`),
ensuring accessibility and tracking the open/closed state.
If no ID is provided, a unique one is generated automatically. | `string` |   |
| `title*` | The main heading of the accordion item. This is the primary text visible to users in the collapsed state and acts as the trigger for expanding or collapsing the content. | `string` |   |
| `subtitle` | An optional secondary heading displayed below the title. It provides additional context or detail about the content of the accordion item. | `string` |   |
| `content` | The main content of the accordion item. This is the information revealed when the accordion is expanded, typically containing text, HTML, or other elements. | `string` |   |
| `onUpdateOpen` | Callback fired when the component state changes. | `(detail: { id: string; open: boolean }) => void` |   |

## Slots

| Name | Description |
|------|-------------|
| `icon` | Use this slot to display an icon before the title. |
| `content` | Use this slot to display custom content. |

## Events

| Name | Description | Type |
|------|------|-------------|
| `update:open` | Emits when the component state changes. | `CustomEvent<boolean>` |

