BbCollapsible

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. Renders the slot before the first open. Needed when the content must exist up front: a form field that registers and validates, text a prerendered page has to carry, anything measured on mount. It does not weaken the hidden state: closed content stays `aria-hidden` and `inert` either way. See example
`modelValue` Type: `boolean`Default`false`	Used by v-model to open or close the collapsible. Optional: omitted, it renders closed. One-way. The component renders this value and never writes it back: there is no event and no model row on this page, because it cannot open or close itself. `v-model` compiles but acts purely as a prop binding, so put side effects on your trigger. Optional and `false` by default, so an omitted binding renders closed without a warning. See example
`pt` Type: `PtMap<BbCollapsiblePtPart, "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: `content`, `root`. States: `open`. See example
`tag` Type: `LayoutTag`Default`"div"`	Element rendered as the root, and mirrored by the inner animating element — so the pair is div-in-div or span-in-span, both valid. The default `'div'` holds block content (paragraphs, lists, forms); use `'span'` inside phrasing content (a `<p>`), with inline content only. See example
`transitionDuration` Type: `number`Default`250`	How long the transition has to last in milliseconds Milliseconds; the manifest default resolves to 250. One value drives both the height animation and the opacity fade. Under `prefers-reduced-motion: reduce` both drop to near-instant regardless of what you pass. See example

Slots

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

Name Description

Name	Description
`default` Type: `any`	The collapsible body content that is shown or hidden based on `modelValue`. When `eager` is false, the content is not rendered until the first open. Deferred until the first open, then mounted for good, so state inside survives close and reopen. Put padding and borders on what you slot in here, not on the collapsible: padding on the root stays when it closes, and the inner `.bb-collapsible__content` (`pt:content`) loses its vertical padding, border and gap only while closed. See example

default any

The collapsible body content that is shown or hidden based on modelValue. When eager is false, the content is not rendered until the first open.

Deferred until the first open, then mounted for good, so state inside survives close and reopen. Put padding and borders on what you slot in here, not on the collapsible: padding on the root stays when it closes, and the inner .bb-collapsible__content (pt:content) loses its vertical padding, border and gap only while closed.

See example