Accordion

Vertically stacked collapsible sections. Composed from four elements: and-accordion (the root), and-accordion-item (one trigger/content pair), and-accordion-trigger, and and-accordion-content. The root injects the shared expand/collapse logic into each item automatically — you don’t wire anything yourself.

Example

Is it accessible?Yes — it uses aria-expanded, aria-controls, and a role="region" panel, all driven by the headless core.Can multiple items be open?Only if you set allow-multiple="true" on the root — by default opening one item closes the others.

<and-accordion allow-multiple="false">
  <and-accordion-item value="item-1">
    <and-accordion-trigger>Is it accessible?</and-accordion-trigger>
    <and-accordion-content
      >Yes — it uses aria-expanded, aria-controls, and a role="region"
      panel.</and-accordion-content
    >
  </and-accordion-item>
  <and-accordion-item value="item-2">
    <and-accordion-trigger>Can multiple items be open?</and-accordion-trigger>
    <and-accordion-content
      >Only if you set allow-multiple="true" on the root.</and-accordion-content
    >
  </and-accordion-item>
</and-accordion>

Properties

and-accordion (root)

Property	Attribute	Description	Type	Default
allowMultiple	allow-multiple	Allow multiple items to be expanded simultaneously.	boolean	false
defaultValue	—	Default expanded item values (JS property only).	string[]	undefined
orientation	orientation	Orientation of the accordion.	"horizontal" | "vertical"	'vertical'
disabled	disabled	Whether the accordion is disabled.	boolean	false

and-accordion-item

Property	Attribute	Description	Type	Default
value	value	Unique value identifying this item. Auto-generated if omitted.	string	undefined
disabled	disabled	Whether this item is disabled (non-interactive, visually dimmed).	boolean	false

This is a compound component — several @Component tags share the packages/web-components/src/components/and-accordion/ directory, and Stencil's docs-readme output writes all of them to the same readme.md, so only the last-processed one survives. The tables above are hand-written from the source instead; keep them in sync manually.