BbSmoothHeight

Props

Name	Description
`disabled` Type: `boolean`Default`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` Type: `MutationObserverInit`Default`{ 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` Type: `PtMap<"root", never>`	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>`. Parts: `root`. See example
`resizeOptions` Type: `ResizeObserverOptions`	Options to pass to the ResizeObserver. The counterpart to `mutationOptions` on the default path, forwarded to the `ResizeObserver` (for example `box`). Rarely needed.
`strategy` Type: `"resize" \| "mutation"`Default`"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` Type: `LayoutTag`Default`"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` Type: `number`Default`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 Description

Name	Description
`default` Type: `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