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
  size?: string
  top?: boolean
  scrollable?: boolean
  class?: string
  show?: boolean
  style?: string
  /** id of the title element the root references via aria-labelledby; defaults to `modal-${modalId}-title` */
  titleId?: string
}

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

const modalClass = ['modal modal-blur fade', className, show && 'show'].filter(Boolean).join(' ')
const dialogClass = ['modal-dialog', size && `modal-${size}`, !top && '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 -->