# `lr-drawer` - **Import** `import '@aceshooting/lyra-ui/components/lr-drawer.js';` (stable tag alias; registers the tag) - **Class** `LyraDrawer`, also available unregistered from `@aceshooting/lyra-ui/components/overlays/drawer/drawer.class.js` - **Family** `components/overlays/` — 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** 15 parts, 26 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-drawer` A modal panel anchored to one logical edge of the viewport. `LyraDrawer` extends `LyraDialog`, so it inherits the entire dialog contract unchanged: focus trapping, Escape and opt-in backdrop dismissal, document scroll locking, browser **top-layer** promotion, overlay stacking, accessible naming, the `show()`/`hide()`/`close()` methods and the whole `lr-show`/`lr-after-show`/`lr-hide`/`lr-after-hide`/`lr-close` lifecycle. `contained` switches to an absolute, nonmodal panel inside the nearest containing block; only that mode, `placement`, and the slide animation are its own. **Properties:** - `open: boolean = false` (attribute `open`, reflected) — assigning it runs the same lifecycle as `show()`/`hide()`, so the property, the reflected attribute and the two methods can never disagree - `placement: 'start'|'end'|'top'|'bottom' = 'end'` (attribute `placement`, reflected). **Changed in 8.0.0:** the default used to be `start`. `end` is what `wa-drawer` does, so a mechanical `wa-drawer` → `lr-drawer` rename no longer silently slides the panel in from the other edge. - `contained: boolean = false` (attribute `contained`, reflected) — position within the nearest containing block without a backdrop, page inerting, focus trap, scroll lock, top-layer promotion, or global Escape ownership - `heading?: string`, `label: string`, `accessibleLabel: string = ''` (attribute `accessible-label`), `closable: boolean = true`, `noHeader: boolean = false` (attribute `no-header`, Shoelace's spelling, reflected), `withoutHeader: boolean = false` (attribute `without-header`, Web Awesome's spelling, reflected; neither is deprecated), `withFooter: boolean = false` (attribute `with-footer`, reflected; SSR hint), and `lightDismiss: boolean = false` (attribute `light-dismiss`) — inherited dialog naming, chrome and dismissal options. A plain `aria-label` attribute on the host is honored too, inherited unchanged from `lr-dialog`: it is the strongest naming override, by attribute presence including an explicitly empty value, ahead of `accessible-label` and any slotted heading. - `headingLevel: LyraHeadingLevel = '3'` (attribute `heading-level`, reflected) — semantic level of the generated title, from `1` through `6`, or `none` for visual-only title text. A direct slotted heading retains its own native level. - `size: LyraSize = 'm'` (reflected) — inherited unchanged from `lr-dialog`; caps the panel's `max-inline-size` on the same six-step ladder for `start`/`end` placements (`top`/`bottom` are unaffected, since those axes are already unconditionally `100%`). At the `m` default the 32rem cap exceeds the panel's own 24rem default inline size, so it stays a no-op unless set. Distinct from the drawer-specific `--size` CSS custom property below, which maps to this same panel's own `inline-size`/`block-size` for the active axis. **Methods:** `show(): Promise`, `hide(): Promise`, `close(reason?: DialogCloseReason): Promise` — inherited unchanged from `lr-dialog`; each promise settles after the matching `lr-after-*` event. **Events:** `lr-show` (cancelable), `lr-after-show`, `lr-hide` (cancelable), `lr-after-hide`, and `lr-initial-focus` (cancelable), `lr-request-close` (cancelable, detail source), and `lr-close` (`detail: DialogCloseReason`, cancelable) — all inherited unchanged from `lr-dialog`; see that section for details and veto rules. `lr-after-show` / `lr-after-hide` fire once the slide animation has finished, so they are deferred by roughly one animation compared with the state flip. **`lr-close` is not drawer-scoped, same as on `lr-dialog`:** several components nested inside a drawer (`lr-callout`, `lr-tab`/`lr-tab-group`, the tool dialogs, and so on) emit the same bubbling, composed `lr-close` name, so a listener bound on `` also receives a descendant's close. Guard with `if (event.target !== event.currentTarget) return;` before reading `event.detail`, which those descendants either omit or shape differently from `DialogCloseReason`. **Animation registry:** the panel uses placement-specific names: `drawer.showStart`/`drawer.hideStart`, `drawer.showEnd`/`drawer.hideEnd`, `drawer.showTop`/`drawer.hideTop`, and `drawer.showBottom`/`drawer.hideBottom`. The backdrop uses `drawer.overlay.show`/`drawer.overlay.hide`. Per-element overrides are RTL-aware through `rtlKeyframes`; passing `null` disables interpolation while retaining the inherited event/promise lifecycle. **Slots:** default (drawer body), `label` (rich header content), `header-actions` (extra header controls, rendered before the built-in close button), `footer` — all inherited from `lr-dialog`. **CSS parts:** `base`; `backdrop overlay`; `panel dialog`; `header`; `heading title label`; `header-actions`; `close-button close-button__base`; `close-button__control`; `body`; `footer`. Names grouped together are aliases on the same functional node; `close-button__control` is the composed ``'s own native `
``` ---