dialog
v1.0.0Native <dialog> element wrapped as a design-system custom element — showModal() delivers the modal state machine (focus trap, Escape to close, inert background, return-focus) via the browser platform, not scratch-built ARIA. Props: open, label|labelledBy, describedBy. Events: dsOpen, dsClose.
Install
Preview
Usage
react
django-template
Spec details
Raw registry entry
{
"name": "dialog",
"type": "ui-component",
"metadata": {
"ring": "1a",
"description": "Native <dialog> element wrapped as a design-system custom element — showModal() delivers the modal state machine (focus trap, Escape to close, inert background, return-focus) via the browser platform, not scratch-built ARIA. Props: open, label|labelledBy, describedBy. Events: dsOpen, dsClose.",
"author": "neo",
"version": "1.0.0",
"created_at": "2026-08-26",
"dependencies": [],
"translations": {
"es": {
"description": "Elemento <dialog> nativo envuelto como custom element del design system — showModal() entrega la máquina de estado modal (focus trap, Escape para cerrar, background inerte, return-focus) vía la plataforma del navegador, sin ARIA scratch. Props: open, label|labelledBy, describedBy. Eventos: dsOpen, dsClose."
},
"zh": {
"description": "原生 <dialog> 元素,封装为设计系统的自定义元素——showModal() 借助浏览器平台提供模态状态机(焦点陷阱、按 Escape 关闭、背景 inert、焦点归还),而非从零构建的 ARIA。Props:open、label|labelledBy、describedBy。事件:dsOpen、dsClose。"
},
"la": {
"description": "Elementum <dialog> nativum ut custom element design system involutum — showModal() machinam statuum modalem (focus trap, Escape ad claudendum, fundum inertem, return-focus) per suggestum browser praebet, non ARIA ab integro aedificatam. Props: open, label|labelledBy, describedBy. Eventus: dsOpen, dsClose."
}
}
},
"spec": {
"tech": "stencil",
"tag": "ds-dialog",
"tokens_used": [
"primitive.radius.md",
"primitive.spacing.xl"
]
}
}