tabler/shared/ui/Offcanvas.astro

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

interface Props {
  /** core/scss/bootstrap/_offcanvas.scss `.offcanvas-{direction}` modifier classes */
  direction?: 'start' | 'end' | 'top' | 'bottom' | undefined
  /** responsive variant offcanvas-{size} ($grid-breakpoints minus xs) — replaces the base .offcanvas class */
  size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | undefined
  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, show, class: className, tabindex, role, ...rest } = Astro.props
---

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