{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown",
  "type": "registry:ui",
  "title": "Dropdown menu (MIAN)",
  "description": "A menu of actions anchored to a trigger. Built on the native Popover API: top layer, light dismiss and Escape are free.",
  "categories": [
    "actions",
    "dropdown",
    "menu",
    "context menu",
    "actions"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/dropdown.css",
      "type": "registry:file",
      "target": "mian/components/dropdown.css",
      "content": ".mn-menu {\n  min-width: 12rem; max-width: min(22rem, calc(100vw - 16px));\n  margin: 0; padding: 4px;\n  border: var(--mn-border-w) solid var(--mn-border);\n  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.4 var(--mn-font);\n}\n.mn-menu[popover] { position: fixed; inset: auto; overflow: auto; max-height: min(24rem, calc(100vh - 24px)); }\n.mn-menu[popover]:popover-open { animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter); transform-origin: top left; }\n.mn-menu-item {\n  display: flex; align-items: center; gap: .6rem;\n  width: 100%; min-height: calc(var(--mn-size-md) - 6px); padding: .35rem .6rem;\n  border: 0; border-radius: calc(var(--mn-radius-box) - 4px);\n  background: none; color: inherit; font: inherit; text-align: start; text-decoration: none;\n  cursor: pointer; outline: none;\n}\n.mn-menu-item:hover, .mn-menu-item:focus-visible { background: var(--mn-hover); }\n.mn-menu-item:focus-visible { box-shadow: inset 0 0 0 2px var(--mn-ring); }\n.mn-menu-item svg { width: 1rem; height: 1rem; color: var(--mn-muted); flex: none; }\n.mn-menu-item[aria-disabled=\"true\"], .mn-menu-item:disabled { opacity: .5; pointer-events: none; }\n.mn-menu-item.mn-danger { color: var(--mn-danger-text); }\n.mn-menu-item.mn-danger svg { color: currentColor; }\n.mn-menu-item[aria-checked=\"true\"]::after { content: \"✓\"; margin-inline-start: auto; font-weight: 600; }\n.mn-menu-label { padding: .5rem .6rem .25rem; font-size: .75rem; font-weight: 600; color: var(--mn-muted); }\n.mn-menu-sep { height: 1px; margin: 4px -4px; border: 0; background: var(--mn-border); }\n.mn-menu-shortcut { margin-inline-start: auto; padding-inline-start: 1rem; font-size: .75rem; color: var(--mn-muted); letter-spacing: .04em; }\n\n@keyframes mn-spin { to { transform: rotate(360deg); } }\n@keyframes mn-pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }\n@keyframes mn-fade { from { opacity: 0; } }"
    },
    {
      "path": "mian/examples/dropdown.html",
      "type": "registry:file",
      "target": "mian/examples/dropdown.html",
      "content": "<!-- Basic -->\n<button class=\"mn-btn mn-btn-outline\" popovertarget=\"dd-account\">My account <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg></button>\n<div class=\"mn-menu\" popover id=\"dd-account\">\n  <div class=\"mn-menu-label\">Signed in as ana@mian.ro</div>\n  <button class=\"mn-menu-item\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"8\" r=\"4\"/><path d=\"M4 21a8 8 0 0 1 16 0\"/></svg> Profile <span class=\"mn-menu-shortcut\">⌘P</span></button>\n  <button class=\"mn-menu-item\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\"/><path d=\"M3 10h18M7 15h3\"/></svg> Billing</button>\n  <button class=\"mn-menu-item\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"3\"/><path d=\"M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1Z\"/></svg> Settings <span class=\"mn-menu-shortcut\">⌘,</span></button>\n  <hr class=\"mn-menu-sep\">\n  <button class=\"mn-menu-item mn-danger\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M15 4h3a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3M10 16l4-4-4-4M14 12H4\"/></svg> Log out</button>\n</div>\n\n<!-- Checkable items -->\n<button class=\"mn-btn mn-btn-outline\" popovertarget=\"dd-cols\">Columns <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"m6 9 6 6 6-6\"/></svg></button>\n<div class=\"mn-menu\" popover id=\"dd-cols\">\n  <div class=\"mn-menu-label\">Visible columns</div>\n  <button class=\"mn-menu-item\" aria-checked=\"true\">Name</button>\n  <button class=\"mn-menu-item\" aria-checked=\"true\">Email</button>\n  <button class=\"mn-menu-item\" aria-checked=\"false\">Phone</button>\n  <button class=\"mn-menu-item\" aria-checked=\"false\" aria-disabled=\"true\">ID (always shown)</button>\n</div>\n\n<!-- Icon trigger, aligned to the end -->\n<button class=\"mn-btn mn-btn-icon mn-btn-ghost\" aria-label=\"Row actions\" popovertarget=\"dd-row\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"5\" cy=\"12\" r=\"1.2\"/><circle cx=\"12\" cy=\"12\" r=\"1.2\"/><circle cx=\"19\" cy=\"12\" r=\"1.2\"/></svg></button>\n<div class=\"mn-menu\" popover id=\"dd-row\" data-placement=\"bottom-end\">\n  <button class=\"mn-menu-item\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 20h4L19 9l-4-4L4 16v4Z\"/><path d=\"m14 6 4 4\"/></svg> Edit</button>\n  <button class=\"mn-menu-item\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"9\" width=\"12\" height=\"12\" rx=\"2\"/><path d=\"M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1\"/></svg> Duplicate</button>\n  <hr class=\"mn-menu-sep\">\n  <button class=\"mn-menu-item mn-danger\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14\"/></svg> Delete</button>\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/dropdown",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": true,
      "classes": [
        "mn-menu + popover",
        "mn-menu-item",
        "mn-menu-label · mn-menu-sep · mn-menu-shortcut",
        "data-placement",
        "aria-checked"
      ],
      "accessibility": [
        "mian.js adds role=\"menu\" and role=\"menuitem\", wires aria-expanded and aria-haspopup on the trigger.",
        "Focus moves to the first item on open. Arrow keys, Home, End and type-ahead navigate. Escape and Tab close.",
        "Focus returns to the trigger after choosing an item.",
        "The menu emits mn:select with the chosen item."
      ],
      "intents": [
        "dropdown menu",
        "more actions menu",
        "kebab menu",
        "user menu",
        "overflow menu"
      ]
    }
  }
}