---
// Offcanvas container (.offcanvas). Renders inline at the call site (unlike Modal, which drains to the end of body).

interface Props {
  /** offcanvas-{direction}: start | end | top | bottom */
  direction?: string
  /** responsive variant offcanvas-{size} (lg | xl | xxl) — replaces the base .offcanvas class */
  size?: string
  /** offcanvas-narrow (20rem width) */
  narrow?: boolean
  show?: boolean
  class?: string
  /** defaults to "-1" when not provided */
  tabindex?: string
  /** defaults to "dialog" when not provided */
  role?: astroHTML.JSX.AriaRole
  /** remaining attributes (id, aria-*, data-bs-*, …) are forwarded to the element */
  [key: string]: unknown
}

const { direction, size, narrow, show, class: className, tabindex, role, ...rest } = Astro.props
---

<!-- BEGIN OFFCANVAS -->
<div class:list={[size ? `offcanvas-${size}` : 'offcanvas', direction && `offcanvas-${direction}`, narrow && 'offcanvas-narrow', show && 'show', className]} tabindex={tabindex ?? '-1'} role={role ?? 'dialog'} {...rest}>
  <slot />
</div>
<!-- END OFFCANVAS -->