---
// Offcanvas container (.offcanvas). Renders inline at the call site (unlike Modal, which drains to the end of body).
import type { Breakpoint } from '@shared/lib/tokens'

interface Props {
  /** core/scss/bootstrap/_offcanvas.scss `.offcanvas-{direction}` modifier classes */
  direction?: 'start' | 'end' | 'top' | 'bottom' | undefined
  /** responsive variant offcanvas-{responsive} ($grid-breakpoints minus xs) — replaces the base .offcanvas class */
  responsive?: Exclude<Breakpoint, 'xs'> | undefined
  /** core/scss/ui/_offcanvas.scss `.offcanvas-floating` — keeps a gap between the panel and the viewport edges */
  floating?: 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, responsive, floating, show, class: className, tabindex, role, ...rest } = Astro.props
---

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