tabler/shared/components/modals/ModalInline.astro

---
// the page body (not drained to the end of <body> like Modal.astro). Used by the
// modals gallery page where each modal is shown inline with `inline show`.
interface Props {
  modalId?: string
  /** core/scss/bootstrap/_modal.scss + ui/_modals.scss `.modal-{size}` modifier classes */
  size?: 'sm' | 'lg' | 'xl' | 'fullscreen' | 'full-width' | undefined
  scrollable?: boolean
  class?: string
  show?: boolean
  style?: string
}

const { modalId = 'simple', size, scrollable, class: className, show, style } = Astro.props
const titleId = `modal-${modalId}-title`

const modalClass = ['modal modal-blur fade', className, show && 'show'].filter(Boolean).join(' ')
const dialogClass = ['modal-dialog', size && `modal-${size}`, 'modal-dialog-centered', scrollable && 'modal-dialog-scrollable'].filter(Boolean).join(' ')
---

<!-- BEGIN MODAL -->
<div class={modalClass} style={style} id={`modal-${modalId}`} tabindex="-1" role="dialog" aria-modal="true" aria-labelledby={titleId} aria-hidden={show ? undefined : 'true'}>
  <div class={dialogClass}>
    <div class="modal-content">
      <slot />
    </div>
  </div>
</div>
<!-- END MODAL -->