Dialog

<div class="aura-overlay" data-state="open">
  <div class="aura-card aura-popup aura-dialog" data-state="open" role="dialog" aria-modal="true" aria-label="Delete space">
    <div class="aura-text aura-text--h3 aura-dialog__title">Delete space</div>
    <p class="aura-text aura-text--body">This cannot be undone.</p>
  </div>
</div>

import { Dialog, Typography } from '@ilomee/aura-react';

/**
 * Открыт с самого начала и не забирает фокус. Закрытый диалог не рендерит ничего, а панель каждого
 * стека обязана показать на этой странице одно и то же — пустая панель Vue рядом с живым React
 * читалась бы как отсутствие порта. `autoFocus` выключен по смежной причине: читатель этого не
 * открывал, поэтому диалог не вправе забирать фокус и утаскивать страницу из-под него. И то и
 * другое — решения про *демо*; собственный DOM компонента не тронут.
 */
export default function Demo() {
  return (
    <Dialog open autoFocus={false} onClose={() => {}} title="Delete space">
      <Typography variant="body">This cannot be undone.</Typography>
    </Dialog>
  );
}

<script setup lang="ts">
import { Dialog } from '@ilomee/aura-vue';
</script>

<template>
  <Dialog :open="open" title="Delete space" @close="open = false">
    <p>This cannot be undone.</p>
  </Dialog>
</template>

<script lang="ts">
  import { Dialog } from '@ilomee/aura-svelte';
  let open = $state(true);
</script>

<Dialog {open} title="Delete space" onclose={() => (open = false)}>
  <p>This cannot be undone.</p>
</Dialog>

<aura-dialog [open]="open" title="Delete space" (closed)="open = false">
  <p auraText>This cannot be undone.</p>
</aura-dialog>