{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "modal",
  "type": "registry:ui",
  "title": "Modal (MIAN)",
  "description": "A dialog on the native <dialog> element: focus trap, Escape, inert background and focus return from the platform.",
  "categories": [
    "overlays",
    "modal",
    "dialog",
    "popup",
    "confirm"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/modal.css",
      "type": "registry:file",
      "target": "mian/components/modal.css",
      "content": ".mn-modal {\n  width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);\n  margin: auto; padding: 0;\n  border: var(--mn-border-w) solid var(--mn-border); border-radius: var(--mn-radius-box);\n  background: var(--mn-popover); color: var(--mn-fg);\n  box-shadow: var(--mn-shadow-lg);\n  font-family: var(--mn-font);\n  overflow: auto; overscroll-behavior: contain;\n}\n.mn-modal[open] { display: flex; flex-direction: column; animation: var(--mn-enter) calc(var(--mn-enter-duration) + 40ms) var(--mn-ease-enter); }\n.mn-modal::backdrop { background: var(--mn-overlay); backdrop-filter: blur(2px); animation: mn-fade 200ms var(--mn-ease); }\n.mn-modal-sm { width: min(24rem, calc(100vw - 2rem)); }\n.mn-modal-lg { width: min(48rem, calc(100vw - 2rem)); }\n.mn-modal-full { width: calc(100vw - 2rem); height: calc(100dvh - 2rem); }\n.mn-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.25rem 0; }\n.mn-modal-title { margin: 0; font: var(--mn-heading-weight) 1.125rem/1.3 var(--mn-font-heading); letter-spacing: -.01em; }\n.mn-modal-description { margin: .35rem 0 0; font-size: var(--mn-text-sm); color: var(--mn-muted); line-height: 1.5; }\n.mn-modal-body { padding: 1rem 1.25rem; font-size: var(--mn-text-sm); line-height: 1.6; overflow: auto; }\n.mn-modal-footer { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; padding: 0 1.25rem 1.25rem; }\n.mn-close {\n  display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; margin: -.35rem -.5rem 0 0;\n  border: 0; border-radius: var(--mn-radius-field); background: none; color: var(--mn-muted); cursor: pointer;\n}\n.mn-close:hover { background: var(--mn-hover); color: var(--mn-fg); }\n.mn-close:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-close svg { width: 1rem; height: 1rem; }\n@keyframes mn-modal-in { from { opacity: 0; transform: translateY(8px) scale(.97); } }\n@media (max-width: 40rem) {\n  .mn-modal.mn-modal-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--mn-radius-box) var(--mn-radius-box) 0 0; border-bottom: 0; }\n  .mn-modal.mn-modal-sheet[open] { animation: mn-sheet-in 240ms var(--mn-ease); }\n}\n@keyframes mn-sheet-in { from { transform: translateY(100%); } }\nhtml:has(dialog[open].mn-modal, dialog[open].mn-drawer) { overflow: hidden; scrollbar-gutter: stable; }"
    },
    {
      "path": "mian/examples/modal.html",
      "type": "registry:file",
      "target": "mian/examples/modal.html",
      "content": "<!-- Edit profile -->\n<button class=\"mn-btn mn-btn-outline\" data-mn-open=\"dlg-profile\">Edit profile</button>\n<dialog class=\"mn-modal mn-modal-sheet\" id=\"dlg-profile\">\n  <div class=\"mn-modal-header\">\n    <div><h2 class=\"mn-modal-title\">Edit profile</h2><p class=\"mn-modal-description\">Make changes to your profile here. Click save when you're done.</p></div>\n    <button class=\"mn-close\" data-mn-close aria-label=\"Close\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg></button>\n  </div>\n  <form class=\"mn-modal-body mn-form\" method=\"dialog\" id=\"dlg-profile-form\">\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"dp-n\">Name</label><input class=\"mn-input\" id=\"dp-n\" value=\"Ana Popescu\"></div>\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"dp-u\">Username</label><input class=\"mn-input\" id=\"dp-u\" value=\"@ana\"></div>\n  </form>\n  <div class=\"mn-modal-footer\"><button class=\"mn-btn mn-btn-outline\" data-mn-close>Cancel</button><button class=\"mn-btn\" form=\"dlg-profile-form\" value=\"save\">Save changes</button></div>\n</dialog>\n\n<!-- Confirmation -->\n<button class=\"mn-btn mn-danger\" data-mn-open=\"dlg-del\">Delete account</button>\n<dialog class=\"mn-modal mn-modal-sm\" id=\"dlg-del\" role=\"alertdialog\" aria-describedby=\"dlg-del-d\">\n  <div class=\"mn-modal-header\"><h2 class=\"mn-modal-title\">Delete account?</h2></div>\n  <div class=\"mn-modal-body\" id=\"dlg-del-d\">This permanently deletes your account and all of its data. This cannot be undone.</div>\n  <div class=\"mn-modal-footer\"><button class=\"mn-btn mn-btn-outline\" data-mn-close autofocus>Cancel</button><button class=\"mn-btn mn-danger\" data-mn-close=\"delete\">Delete</button></div>\n</dialog>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/modal",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "dialog.mn-modal",
        "mn-modal-header · mn-modal-title · mn-modal-description · mn-modal-body · mn-modal-footer",
        "mn-modal-sm · mn-modal-lg · mn-modal-full",
        "mn-modal-sheet",
        "data-mn-open=\"id\" · data-mn-close",
        "data-mn-static",
        "mn-close"
      ],
      "accessibility": [
        "showModal() makes everything else inert and traps focus. mian.js sets aria-labelledby from the title.",
        "For destructive confirmations add role=\"alertdialog\" and put focus on the least destructive button with autofocus."
      ],
      "intents": [
        "dialog",
        "popup",
        "confirm dialog",
        "modal form",
        "lightbox"
      ]
    }
  }
}