BbAccordion

Props

Name	Description
`eager` Type: `boolean`Default`false`	Renders the content at mount, while closed, instead of on the first open. Closed content is `inert` and `aria-hidden` either way. The body is otherwise deferred to the first open. Reach for `eager` when something inside has to exist before then, most often a form field, which does not join its `BbForm` until it is mounted. If a collapsed panel can hold an invalid field, open it from the `invalid` event of `BbForm`. See example
`headingLevel` Type: `1 \| 2 \| 3 \| 4 \| 5 \| 6`	Wraps the header button in a heading of this level (`<h1>`–`<h6>`, the APG accordion shape) so it joins the page outline: under an `<h2>`, pass `3`. Its margins and font are reset. Omitted, no heading.
`id` Type: `string`	The root's `id`; the header button's id (`<id>_header`) derives from it. Generated when omitted. Makes the markup predictable: the body takes your id and the header button takes `<id>_header`, already cross-wired through `aria-controls` and `aria-labelledby`. Omitted, both are generated. See example
`modelValue` Type: `boolean`Default`false`	Used by v-model to trigger opening / closing the collapsible. An accordion with no `v-model` starts closed. One panel, one boolean. There is no group component: compose several accordions, and for single-open behaviour derive every panel from one active key rather than watching siblings. See example
`pt` Type: `PtMap<BbAccordionPtPart, "open">`	Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:<part>` row.
`pt:<part>` Type: `PtValue`	Passthrough, attribute form: one attribute per part, `pt:<part>`, and per part and state, `pt:<part>:<state>`. Parts: `header`, `icon`, `panel`, `root`, `title`. States: `open`. See example
`title` Type: `string`	The trigger's text, with a chevron at its end that turns when open, in the default look (padding, a hairline under the item). `#title` replaces the text only; `#header` replaces the whole trigger (no chevron, no default look).
`transitionDuration` Type: `number`Default`250`	How long the transition has to last in milliseconds Milliseconds; the manifest default resolves to 250. One value drives the height and the fade together, and `prefers-reduced-motion: reduce` collapses both to near-instant on its own. See example

v-model

Values kept in sync through v-model.

Name	Description
`modelValue` Type: `boolean`	See example

Events

Name Description

Name	Description
`update:modelValue` Type: `(value: boolean): void`	Emitted with the new value whenever `v-model` changes. Emitted on every toggle (a header click or a `toggle()` call) with the new open state. Listen to it for side effects such as analytics or a fetch on first open, and for single-open groups, where a `false` payload is what resets the active key. See example

update:modelValue (value: boolean): void

Emitted with the new value whenever v-model changes.

Emitted on every toggle (a header click or a toggle() call) with the new open state. Listen to it for side effects such as analytics or a fetch on first open, and for single-open groups, where a false payload is what resets the active key.

See example

Slots

The listed properties are the ones exposed to the slot scope.

Name Description

Name	Description
`default` Type: `BbAccordionToggleSlotProps`	The collapsible body content shown when the accordion is open. Receives the same `{ open, toggle }` scope as the header. `toggle()` earns its keep here rather than in the header: it is how a long panel offers a Show less control without sending the reader back up to a header they can no longer see. See example
`header` Type: `BbAccordionToggleSlotProps`	Replaces the whole trigger content: the text and the chevron, and the default look with them. The button, its ARIA and its focus ring stay. Rendered inside the header button, which the component owns. Never put a `<button>` or an `<a>` in here: nesting interactive elements is invalid and splits the click target. Everything non-interactive is made click-transparent, which is what lets badges and icons ride along, and also why a `:hover` rule on them never fires. See example
`title` Type: `BbAccordionToggleSlotProps`	Replaces the trigger's text only (the `title` prop); the chevron and the default look stay.

default BbAccordionToggleSlotProps

The collapsible body content shown when the accordion is open.

Receives the same { open, toggle } scope as the header. toggle() earns its keep here rather than in the header: it is how a long panel offers a Show less control without sending the reader back up to a header they can no longer see.

See example

header BbAccordionToggleSlotProps

Replaces the whole trigger content: the text and the chevron, and the default look with them. The button, its ARIA and its focus ring stay.

Rendered inside the header button, which the component owns. Never put a <button> or an <a> in here: nesting interactive elements is invalid and splits the click target. Everything non-interactive is made click-transparent, which is what lets badges and icons ride along, and also why a :hover rule on them never fires.

See example

title BbAccordionToggleSlotProps

Replaces the trigger's text only (the title prop); the chevron and the default look stay.