{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "popover",
  "type": "registry:ui",
  "title": "Popover (MIAN)",
  "description": "Rich, non-modal content anchored to a trigger, on the native Popover API.",
  "categories": [
    "overlays",
    "popover",
    "popup",
    "hover card",
    "flyout"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/popover.css",
      "type": "registry:file",
      "target": "mian/components/popover.css",
      "content": ".mn-popover {\n  position: fixed; inset: auto; margin: 0;\n  width: max-content; max-width: min(20rem, calc(100vw - 16px));\n  padding: 1rem;\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: 400 var(--mn-text-sm)/1.55 var(--mn-font);\n}\n.mn-popover:popover-open { animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter); }\n.mn-popover-title { margin: 0 0 .3rem; font-weight: 600; }"
    },
    {
      "path": "mian/examples/popover.html",
      "type": "registry:file",
      "target": "mian/examples/popover.html",
      "content": "<!-- Dimensions -->\n<button class=\"mn-btn mn-btn-outline\" popovertarget=\"pop-dim\">Dimensions</button>\n<div class=\"mn-popover\" popover id=\"pop-dim\" data-placement=\"bottom\">\n  <p class=\"mn-popover-title\">Dimensions</p>\n  <p class=\"mn-muted\" style=\"margin:0 0 .75rem\">Set the layer size.</p>\n  <div class=\"mn-form-row\" style=\"grid-template-columns:1fr 1fr\">\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"pw\">Width</label><input class=\"mn-input mn-input-sm\" id=\"pw\" value=\"100%\"></div>\n    <div class=\"mn-field\"><label class=\"mn-label\" for=\"ph\">Height</label><input class=\"mn-input mn-input-sm\" id=\"ph\" value=\"25px\"></div>\n  </div>\n</div>"
    }
  ],
  "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/popover",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-popover + popover",
        "data-placement",
        "mn-popover-title"
      ],
      "accessibility": [
        "The browser handles Escape, light dismiss and aria-expanded on the invoker. Use a Modal instead if the content must be completed."
      ],
      "intents": [
        "popover",
        "floating panel",
        "date picker popup",
        "info bubble"
      ]
    }
  }
}