# Accordeon

Level: molecule.

## Purpose and use

Reveal supporting details beneath a summary without leaving the current screen.
Use one clear topic per header; use tabs when the user is switching peer views.

## Anatomy, behavior, and accessibility

- A native header button contains the title, optional description and two
  independently controlled decorative icons. The default slot contains details.
- Clicking or activating the button with the keyboard toggles internal expansion
  and emits `expandedChange`. Subsequent `expanded` input changes synchronize it.
- The button exposes `aria-expanded` and `aria-controls`. Collapsed content stays
  mounted, with `aria-hidden` and `inert`; its controls cannot receive focus.
- Sizes L/M/S and the separator change presentation. Keep actionable controls
  inside the content slot, not inside the clickable summary.

## Open Questions

There is no disabled state, group-level single-open policy or arrow-key
navigation between multiple accordions. A composition requiring those behaviors
must define them separately.

## Local component contract

This is the active owned contract for `component.accordeon`. The API below
is verified against the current local implementation, focused test and story.
The Source commit `0112cba0779a2d2a4b6c7a17243201694344d70a` remains
migration provenance, not the runtime owner.

### Classes and selectors

- `WblAccordeonComponent` — `wbl-accordeon` (src/app/design-system/patterns/accordeon/accordeon.component.ts).

### Inputs

- `WblAccordeonComponent.size = input<WblAccordeonSize>('L')`
- `WblAccordeonComponent.expanded = input(false)`
- `WblAccordeonComponent.leftIcon = input(false)`
- `WblAccordeonComponent.chevron = input(true)`
- `WblAccordeonComponent.titleText = input('Title')`
- `WblAccordeonComponent.description = input(true)`
- `WblAccordeonComponent.descriptionText = input('Description')`
- `WblAccordeonComponent.separator = input(true)`

### Public types and allowed values

```ts
type WblAccordeonSize = 'L' | 'M' | 'S';
```

### Models

- None.

### Outputs

- `WblAccordeonComponent.expandedChange = output<boolean>()`

### Slots and projection markers

- `WblAccordeonComponent: <ng-content>`

### Local evidence

- Code: `src/app/design-system/patterns/accordeon/accordeon.component.ts`.
- Focused test: `src/app/design-system/patterns/accordeon/accordeon.component.spec.ts`.
- Public export: `export * from './patterns/accordeon/accordeon.component';` in `src/app/design-system/index.ts`.
- Storybook: `storybook/stories/accordeon.stories.ts` (`Design System/Patterns/wbl-accordeon`).

## Figma status

This runtime contract does not infer a Figma owner. Assembly evidence, when
verified, is maintained separately through the inventory-linked sidecar.

## Provenance

The archived source-document copy is historical evidence only. The active
resolver is local code/test/export and the exact Storybook story above.