Drawer

Side or bottom slide-out panel (modal, dismissible, or permanent) with optional collapse.

HTML tag: c-e184c8b6dd98449a28e9330bac3ddd082

When to use

slide-in panel from left/right/bottom
filters or nav drawer
not centered modal (use ab-dialog)

Props

Prop	Type	Default
`open`	Boolean	`false`
`type`	String	`modal`
`position`	String	`left`
`collapsed`	Boolean	`false`
`header`	String
`content`	String
`footer`	String
`title`	String
`show_close`	Boolean	`true`
`aria_role`	String	`dialog`
`trap_focus`	Boolean	`true`
`close_on_esc`	Boolean	`true`
`close_on_scrim`	Boolean	`true`
`scrim`	Boolean	`true`
`width_sm`	String	`280px`
`width_md`	String	`320px`
`width_lg`	String	`360px`
`height_bottom`	String	`70vh`
`panel_bg`	String	`var(--ab-color-surface-base)`
`panel_fg`	String	`var(--ab-color-text-primary)`
`panel_shadow`	String	`var(--ab-shadow-3)`
`panel_radius`	String	`var(--ab-radius-lg)`
`panel_border`	String	`1px solid var(--ab-color-border-subtle)`
`transition_duration`	String	`var(--ab-motion-duration-3)`
`transition_ease_in`	String	`var(--ab-motion-ease-accel)`
`transition_ease_out`	String	`var(--ab-motion-ease-out)`
`scrim_color`	String	`rgba(0,0,0,0.38)`
`scrim_blur`	String	`0px`
`scrim_transition_duration`	String	`var(--ab-motion-duration-2)`
`z_index`	String	`10000`
`brand_h`	String	`40px`
`header_px`	String	`12px`
`header_py`	String	`0px`
`header_gap`	String	`12px`
`width_collapsed`	String	`80px`
`width_expanded`	String	`var(--drawer-width-md)`

Rules

.open controls visibility; type modal|dismissible|permanent; position left|right|bottom.
Slots/header/content/footer or title prop.
Events ab-drawer:show, hide, collapsed.
Use for filters, nav, or detail — not centered confirmations (ab-dialog).

Events

Event	Detail
`ab-drawer:collapsed`	collapsed: Boolean, previous: Boolean
`ab-drawer:show`
`ab-drawer:hide`

Methods

Signature	Description
`show()`
`hide()`
`toggle()`
`focus_first()`

What to avoid

Do not use ab-dialog for a full-height side filter panel. Do not use ab-page-template details drawer and ab-drawer for the same UX without coordination.

Example

<c-e184c8b6dd98449a28e9330bac3ddd082 .open=${filtersOpen} .position=${'right'} .type=${'modal'} @ab-drawer:hide=${close}>...</c-e184c8b6dd98449a28e9330bac3ddd082>