BbSmoothHeight

Props

Name	Type	Default	Description
`disabled`	`boolean \| undefined`	`false`	Disable smooth-height behavior and allow natural content height. Removes the inline height, returns overflow to visible and makes layout instant. It is reactive, so it can be flipped per instance when a parent already animates height. You do not need it for reduced motion — `prefers-reduced-motion` is handled in CSS. See example
`mutationOptions`	`MutationObserverInit \| undefined`	`{ childList: true }`	Options to pass to the MutationObserver. The default scope is direct children only. Widen it with `{ childList: true, subtree: true }` for nested inserts — and keep the wrapped region small when you do, because every descendant is then observed. See example
`pt`	`PtMap<"root", never> \| undefined`	-	Passthrough, object form: the same keys as the `pt:*` attributes without the prefix. See the `pt:<part>` row.
`pt:root`	`PtValue \| undefined`	-
`resizeOptions`	`ResizeObserverOptions \| undefined`	-	Options to pass to the ResizeObserver. The counterpart to `mutationOptions` on the default path, forwarded to the `ResizeObserver` (for example `box`). Rarely needed.
`strategy`	`"resize" \| "mutation" \| undefined`	`"resize"`	Define which strategy to use. By default `'resize'` is used, which means the component will update on resizing. You can also define `'mutation'` to use a MutationObserver. Stay on `resize` unless the height moves because DOM nodes are added or removed: it sees anything that changes the measured box, structural or not. See example
`tag`	`LayoutTag \| undefined`	`"div"`	Element rendered as the component's wrapper. Narrowed to `div` and `span` in v3, and the inner measuring element now mirrors it instead of always being a `<div>`. Both are forced to `display: block`, so the choice is only about what the surrounding markup accepts — wrap any other element around the component instead of asking for it here. See example
`transitionDuration`	`number \| undefined`	`250`	How long the transition has to last in milliseconds Milliseconds; the default is 250. The easing is not a prop — it comes from the `--bb-ease` token, so a project retunes it globally rather than per instance. See example

Slots

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

Name Type Description

Name	Type	Description
`default`	`object`	Content whose height changes are animated with a smooth transition. Always mounted, always focusable: this component animates height and hides nothing. When the content must genuinely be hidden and inert, the component you want is `BbCollapsible` or `BbAccordion`. See example

default

object

Content whose height changes are animated with a smooth transition.

Always mounted, always focusable: this component animates height and hides nothing. When the content must genuinely be hidden and inert, the component you want is BbCollapsible or BbAccordion.

See example