Accordeon · WB Design Wiki

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

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.