transition(name='modal-fade')
  .fixed.inset-0.overflow-y-auto.z-50(
    v-if='isVisible'
    role='dialog'
    :aria-labelledby='titleId'
    aria-modal='true'
  )
    .flex.items-end.justify-center.min-h-screen.pt-4.px-4.pb-20.text-center(class='sm:block sm:p-0')
      //- Оверлей :cite[8]
      .fixed.inset-0.bg-gray-600.bg-opacity-75.transition-opacity(
        @click='closeModal'
        :class='{ "cursor-pointer": closeOnOverlay }'
        aria-hidden='true'
      )

      //- Вертикальное выравнивание
      span.hidden(class='sm:inline-block sm:align-middle sm:h-screen' aria-hidden='true') ​

      //- Контент модального окна
      .inline-block.align-bottom.bg-white.rounded-lg.text-left.overflow-hidden.shadow-xl.transform.transition-all(
        class='dark:bg-gray-800 sm:my-8 sm:align-middle sm:max-w-lg sm:w-full'
        :class='contentClass'
        role='document'
      )
        .modal-content
          //- Заголовок
          .modal-header.bg-primary.p-6(class='sm:px-6')
            .flex.items-center.justify-between
              h3.text-lg.leading-6.font-medium.text-white(:id='titleId')
                slot(name='title') {{ title }}
              button.modal-close.p-2.rounded-full.transition-colors(
                @click='closeModal'
                class='hover:bg-white hover:bg-opacity-10 focus:outline-none focus:ring-2 focus:ring-white'
                aria-label='Закрыть окно'
              )
                svg.w-5.h-5.text-white(fill='none' stroke='currentColor' viewBox='0 0 24 24')
                  path(stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18L18 6M6 6l12 12')

          //- Тело модального окна
          .modal-body.p-6(class='sm:px-6')
            slot(name='body')
              .prose.max-w-none(v-if='content' v-html='content' class="class-dark:prose-invert")

          //- Футер (опционально)
          .modal-footer.bg-gray-50.p-6.flex.justify-end.space-x-3(
            class='dark:bg-gray-700 sm:px-6'
            v-if='showFooter'
          )
            slot(name='footer')
              button.secondary-btn.px-4.py-2.text-sm.font-medium.rounded-lg.transition-colors(
                @click='closeModal'
                class='bg-gray-300 text-gray-700 hover:bg-gray-400 dark:bg-gray-600 dark:text-gray-200 dark:hover:bg-gray-500'
              ) Отмена
              button.primary-btn.px-4.py-2.text-sm.font-medium.rounded-lg.transition-colors(
                @click='handleConfirm'
                class='bg-accent text-white hover:bg-yellow-600'
              ) Подтвердить