{"component":{"aria":"dialog.showModal() creates a native focus trap; all content outside the dialog is unreachable. aria-labelledby points to visible <h2> title. aria-describedby points to body div. Close button: aria-label='Close dialog', positioned first in DOM for Tab-first focus or autofocus attr. Escape key: native <dialog> handles Escape → 'cancel' event → call dialog.close().","category":"wiki","css":".ps-wiki-dialog { border: 1px solid var(--pds-border-subtle); border-radius: var(--pds-radius-md); padding: 0; background: var(--pds-surface-layer); color: var(--pds-text-primary); max-width: min(90vw, 40rem); width: 100%; }\n.ps-wiki-dialog::backdrop { background: rgba(0,0,0,0.5); }\n.ps-wiki-dialog[open] { animation: dialog-in var(--pds-duration-base) var(--pds-easing-decelerate) both; }\n@keyframes dialog-in { from { opacity: 0; transform: translateY(-0.5rem); } to { opacity: 1; transform: none; } }\n.ps-wiki-dialog__content { display: flex; flex-direction: column; }\n.ps-wiki-dialog__header { display: flex; align-items: center; justify-content: space-between; padding: var(--pds-space-2) var(--pds-space-4); border-block-end: 1px solid var(--pds-border-subtle); }\n.ps-wiki-dialog__title { font-size: 1.125rem; font-weight: 600; margin: 0; }\n.ps-wiki-dialog__close { background: transparent; border: none; cursor: pointer; font-size: 1.25rem; color: var(--pds-text-secondary); padding: var(--pds-space-05); }\n.ps-wiki-dialog__body { padding: var(--pds-space-4); overflow-y: auto; }\n.ps-wiki-dialog__footer { padding: var(--pds-space-2) var(--pds-space-4); border-block-start: 1px solid var(--pds-border-subtle); display: flex; justify-content: flex-end; gap: var(--pds-space-1); }","description":"Native <dialog> element modal with showModal() focus trap. Used for image lightbox, search overlay, and confirmation prompts. Dismisses on Escape or backdrop click.","display_name":"Wiki Modal Dialog","html":"<dialog class=\"ps-wiki-dialog\" aria-labelledby=\"dialog-title-{{id}}\" aria-describedby=\"dialog-body-{{id}}\">\n  <div class=\"ps-wiki-dialog__content\">\n    <header class=\"ps-wiki-dialog__header\">\n      <h2 class=\"ps-wiki-dialog__title\" id=\"dialog-title-{{id}}\">{{title}}</h2>\n      <button class=\"ps-wiki-dialog__close\" aria-label=\"Close dialog\" autofocus>×</button>\n    </header>\n    <div class=\"ps-wiki-dialog__body\" id=\"dialog-body-{{id}}\">\n      {{content}}\n    </div>\n    <footer class=\"ps-wiki-dialog__footer\">\n      <slot name=\"actions\"></slot>\n    </footer>\n  </div>\n</dialog>","name":"wiki-modal-dialog","registry_type":"component","research_links":[],"tabs_available":[],"variants":[{"css_class":"","description":"Title + body + optional footer actions.","html":"","name":"default","tokens":[]},{"css_class":"","description":"Full-width <figure> as content; no footer.","html":"","name":"image-lightbox","tokens":[]},{"css_class":"","description":"Search input + live results as content.","html":"","name":"search-overlay","tokens":[]}],"wcag":{"target":"2.2 AA"}},"tenant":"pointsav","theme":"pointsav-brand"}