Dialog 1.2.0

<velin-dialog> wraps the native <dialog> element with a promise-based alert() / confirm() / prompt() API. In 1.2.0 it dispatches canonical velin-close (and keeps deprecated velin-dialog-close as an alias). English: Dialog

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Grundlage wo entsprechend angegeben.

Wann verwenden

Imperative confirmations, alerts, and short text prompts from JavaScript.
Flows where you await a boolean / string result instead of building custom modal markup.

Wann nicht verwenden

Custom layouts, forms, or footer actions — use <velin-modal>.
Non-modal feedback — use Toasts or Alerts.
Do not expect Fokus-manager inert stacking here; native showModal() owns modality.

Einfaches Beispiel

<velin-dialog id="myDialog" aria-label="App dialog"></velin-dialog>

<script>
  const dlg = document.getElementById('myDialog');

  // Alert — resolves to true
  await dlg.alert('Hello!');

  // Confirm — resolves to boolean
  const ok = await dlg.confirm('Delete this item?', {
    title: 'Confirm delete',
    danger: true
  });

  // Prompt — resolves to string or null if cancelled
  const name = await dlg.prompt('What is your name?', {
    placeholder: 'Enter name…',
    defaultValue: 'World'
  });

  dlg.addEventListener('velin-close', (e) => {
    console.log('closed with', e.detail.value);
  });
</script>

Barrierefreiheit

Uses native <dialog>.showModal() — browser Fokus trap and ::backdrop.
While open: aria-modal="true" and aria-labelledby pointing at the generated title.
Host may set an initial aria-label; it is replaced by aria-labelledby when a dialog is shown.
Schließen control has aria-label="Schließen". Escape is handled via the dialog cancel event (preventDefault + dismiss).
Prompt focuses the input; Enter confirms. Non-prompt types Fokus the first action Button.
Zurück Fokus is restored after dismiss. Message and labels are HTML-escaped before render.

Dark Mode, Responsivität, Bewegung, RTL

Dark Mode / Themes: dialog chrome uses surface, border, primary, danger, and Fokus tokens.
Responsiv: max-inline-size: min(28rem, 90vw).
Bewegung: no enter/exit animation beyond the browser dialog behavior.
RTL: footer and header use logical flex alignment.

API

Methoden

Methode	R?ckgabe	Beschreibung
`alert(message, options?)`	`Promise<true>`	Alert-Dialog
`confirm(message, options?)`	`Promise<boolean>`	Confirm-Dialog
`prompt(message, options?)`	`Promise<string\|null>`	Prompt (null if cancelled)

Optionen

Option	Standard	Beschreibung
`title`	varies by method	Titeltext
`confirmText`	`"OK"` / `"Confirm"` / `"Submit"`	Best?tigungslabel
`cancelText`	`"Cancel"`	Abbruchlabel (confirm/prompt)
`danger`	`false`	Danger-styled confirm (confirm)
`placeholder`	`""`	Prompt-Platzhalter
`defaultValue`	`""`	Prompt-Standardwert

Ereignisse

Ereignis	Detail	Beschreibung
`velin-close`	`{ value }`	Canonical close event (ADR 0012) — prefer this
`velin-dialog-close`	`{ value }`	Deprecated alias; still dispatched for one deprecation window

CSS parts & variables

Name	Beschreibung
`part="dialog"`	Natives Dialog-Element
`part="input"`	Prompt-Eingabefeld
`--velin-radius-lg`, `--velin-shadow-xl`, `--velin-color-surface-bright`, `--velin-color-border`, `--velin-color-primary`, `--velin-color-danger`, `--velin-color-Fokus`	Theming-Tokens in Shadow-Styles

Best practices & pitfalls

Keep one <velin-dialog> on the Seite and reuse it; concurrent alert/confirm/prompt calls share a single resolve slot.
Listen for velin-close; migrate off velin-dialog-close.
Unlike modal/drawer/sheet/lightbox, this Komponente does not call setBackgroundInert — rely on native modal dialog behavior.
Do not put arbitrary HTML in message/title; content is escaped as text.

Modal — custom dialog UI with Fokus-manager lifecycle
Toasts — non-blocking notifications
Sheet — bottom sheet overlay