{
    "$schema": "https://ui.shadcn.com/schema/registry-item.json",
    "name": "menu",
    "type": "registry:component",
    "title": "Menu",
    "description": "Dropdown menu with items, a label, a separator and a danger action. Opens on focus within, or toggle data-open from JS.",
    "registryDependencies": [
        "tokens",
        "button"
    ],
    "meta": {
        "category": "Navigation",
        "layout": "menu"
    },
    "files": [
        {
            "path": "components/menu.html",
            "type": "registry:file",
            "target": "components/menu.html",
            "content": "<!-- Menu\n     A dropdown. The list opens on focus within the menu. For pointer users,\n     toggle data-open on .dp-menu from JS when the trigger is clicked. This\n     example sets data-open so the list shows. -->\n\n<div class=\"dp-menu\" data-open>\n  <button class=\"dp-btn\" type=\"button\" data-variant=\"outline\" aria-haspopup=\"true\" aria-expanded=\"true\">\n    Actions\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n         stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n      <path d=\"m6 9 6 6 6-6\"></path>\n    </svg>\n  </button>\n  <ul class=\"dp-menu-list\" role=\"menu\">\n    <li class=\"dp-menu-label\">Dataset</li>\n    <li role=\"none\">\n      <a class=\"dp-menu-item\" role=\"menuitem\" href=\"#\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"></path><path d=\"M7 10l5 5 5-5\"></path><path d=\"M12 15V3\"></path>\n        </svg>\n        Export\n      </a>\n    </li>\n    <li role=\"none\">\n      <a class=\"dp-menu-item\" role=\"menuitem\" href=\"#\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M12 20h9\"></path><path d=\"M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z\"></path>\n        </svg>\n        Rename\n      </a>\n    </li>\n    <li class=\"dp-menu-separator\" role=\"separator\"></li>\n    <li role=\"none\">\n      <button class=\"dp-menu-item\" role=\"menuitem\" type=\"button\" data-tone=\"danger\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\n             stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n          <path d=\"M3 6h18\"></path><path d=\"M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6\"></path><path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\"></path>\n        </svg>\n        Delete\n      </button>\n    </li>\n  </ul>\n</div>\n"
        },
        {
            "path": "components/menu.css",
            "type": "registry:file",
            "target": "components/menu.css",
            "content": "/* Menu\n   A dropdown menu. The list opens on keyboard focus within the menu, or when\n   data-open is set (toggle data-open from JS on click for pointer users). Wrap\n   a trigger and .dp-menu-list in .dp-menu. Colour and type from tokens.css. */\n\n.dp-menu {\n  position: relative;\n  display: inline-block;\n}\n\n.dp-menu-list {\n  position: absolute;\n  top: calc(100% + 6px);\n  left: 0;\n  z-index: 30;\n  min-width: 12rem;\n  padding: var(--dp-space-2);\n  margin: 0;\n  list-style: none;\n  background: var(--dp-surface);\n  border: 1px solid var(--dp-border);\n  border-radius: var(--dp-radius-md);\n  box-shadow: var(--dp-shadow-lg);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(-4px);\n  transition: opacity var(--dp-transition), transform var(--dp-transition),\n    visibility var(--dp-transition);\n}\n\n.dp-menu:focus-within .dp-menu-list,\n.dp-menu[data-open] .dp-menu-list {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n.dp-menu-item {\n  display: flex;\n  align-items: center;\n  gap: var(--dp-space-3);\n  width: 100%;\n  padding: var(--dp-space-2) var(--dp-space-3);\n  font-family: var(--dp-font-sans);\n  font-size: var(--dp-text-sm);\n  font-weight: var(--dp-weight-semibold);\n  color: var(--dp-navy);\n  text-align: left;\n  text-decoration: none;\n  background: transparent;\n  border: 0;\n  border-radius: var(--dp-radius-xs);\n  cursor: pointer;\n}\n\n.dp-menu-item svg {\n  width: 1.1em;\n  height: 1.1em;\n  color: var(--dp-text-muted);\n  flex: none;\n}\n\n.dp-menu-item:hover,\n.dp-menu-item:focus-visible {\n  outline: none;\n  background: var(--dp-surface-soft);\n}\n\n.dp-menu-item[data-tone=\"danger\"] {\n  color: var(--dp-danger);\n}\n\n.dp-menu-item[data-tone=\"danger\"] svg {\n  color: var(--dp-danger);\n}\n\n.dp-menu-separator {\n  height: 1px;\n  margin: var(--dp-space-2) calc(var(--dp-space-2) * -1);\n  background: var(--dp-border);\n}\n\n.dp-menu-label {\n  padding: var(--dp-space-2) var(--dp-space-3);\n  font-size: var(--dp-text-xs);\n  font-weight: var(--dp-weight-bold);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: var(--dp-text-subtle);\n}\n"
        }
    ]
}