style={`width: ${initialWidth}; min-width: ${minWidth};`}
>
<Fragment set:html={previewMarkup} />
- {
- showBreakpoint && (
- <output class="bd-resizable-badge" data-resizable-badge aria-live="polite" />
- )
- }
+ {showBreakpoint && <output class="bd-resizable-badge" data-resizable-badge aria-live="polite" />}
</div>
</div>
{showMarkup && <Code code={simplifiedMarkup} lang="html" nestedInExample={true} />}
// Measure the actual query container (e.g. `.grid`) when present so the badge
// matches what `@container` evaluates; otherwise fall back to the container.
- const target =
- container.querySelector<HTMLElement>(':scope > *:not(.bd-resizable-badge)') ?? container
+ const target = container.querySelector<HTMLElement>(':scope > *:not(.bd-resizable-badge)') ?? container
const update = (width: number) => {
const bp = activeBreakpoint(width)