# `lr-resize-observer` - **Import** `import '@aceshooting/lyra-ui/components/lr-resize-observer.js';` (stable tag alias; registers the tag) - **Class** `LyraResizeObserver`, also available unregistered from `@aceshooting/lyra-ui/components/utility/resize-observer/resize-observer.class.js` - **Family** `components/utility/` — see `llms/index.md` for its siblings - **Status** `stable` since `4.0.0` — see the maturity and deprecation policy in `llms/shared.md` - **Release history** [CHANGELOG.md](../../CHANGELOG.md); family-wide breaking-change summaries: [llms-full.txt](../../llms-full.txt) - **Deprecations** none - **Optional peers** none - **Themeable via** 1 part, 0 custom properties — see this component's own `@csspart`/`@cssprop` list below - **Library-wide behavior** (events, form association, `locale`/`strings`, tokens, TS types): `llms/shared.md` --- ## `lr-resize-observer` Lifecycle-managed wrapper around the native `ResizeObserver`. It observes all element children in the default slot and emits a composed event, while adding no layout of its own. **Properties:** `disabled: boolean = false` (reflected) and `box: 'content-box' | 'border-box' | 'device-pixel-content-box' = 'content-box'` (reflected). **Events:** `lr-resize` with a frozen `Readonly<{ entries: readonly ResizeObserverEntry[] }>` detail. The sequence is detached and bounded while each native observer entry retains identity. **Slots:** default observed elements. **CSS parts:** `base`. ---