{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-menubutton",
  "description": "Button that opens a menu",
  "docUrl": "https://design.soracom.io/design-system/elements/menubutton/",
  "category": "elements",
  "htmlElements": [
    "div",
    "details"
  ],
  "isWebComponent": false,
  "modifiers": {
    "variant": {
      "support": "custom",
      "values": [
        "--inline",
        "--addon",
        "--no-background",
        "--force-background",
        "--no-dismiss",
        "--constrain-vh",
        "--dropdown"
      ]
    },
    "size": {
      "support": "custom",
      "values": [
        "--compact"
      ]
    },
    "width": {
      "support": "subset",
      "values": [
        "--narrow",
        "--mid",
        "--wide",
        "--full"
      ]
    },
    "state": {
      "support": "custom",
      "values": [
        "--open"
      ]
    },
    "layout": {
      "support": "custom",
      "values": [
        "--viewport",
        "--max-viewport"
      ]
    },
    "position": {
      "support": "custom",
      "values": [
        "--top",
        "--top-left",
        "--bottom",
        "--right",
        "--fixed-left",
        "--fixed-right",
        "--fixed-top-left",
        "--fixed-top-right"
      ]
    },
    "color": {
      "support": "all"
    }
  },
  "cssCustomProperties": [
    {
      "name": "--ds-menubutton-text-color",
      "default": "var(--color-contrast, var(--color-default))",
      "description": "Menu text color"
    },
    {
      "name": "--ds-menubutton-background-color",
      "default": "var(--color, var(--color-background))",
      "description": "Menu background color"
    },
    {
      "name": "--ds-menubutton-menu-position",
      "default": "calc(100% + 10px) auto auto auto",
      "description": "Menu inset position"
    }
  ],
  "structure": {
    "parts": {
      "trigger": {
        "element": "summary",
        "alternativeElements": [
          "button"
        ],
        "selector": "summary, button, [aria-expanded]",
        "required": true,
        "position": [
          "first"
        ]
      },
      "content": {
        "element": "div",
        "selector": ".ds-menu, .__content",
        "required": true,
        "position": [
          "after trigger"
        ]
      }
    },
    "patterns": {
      "details": "<details class=\"ds-menubutton\"><summary><span class=\"ds-button\"><span>{label}</span></span></summary><div class=\"ds-menu\"><ul><li><button type=\"button\">{action}</button></li></ul></div></details>",
      "scripted": "<div class=\"ds-menubutton\"><button class=\"ds-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"menu\" aria-controls=\"{id}\"><span>{label}</span></button><div id=\"{id}\" class=\"ds-menu\"><ul><li><button type=\"button\">{action}</button></li></ul></div></div>",
      "popover": "<div class=\"ds-menubutton\"><button class=\"ds-button\" type=\"button\" aria-haspopup=\"menu\" popovertarget=\"{id}\"><span>{label}</span></button><div id=\"{id}\" class=\"ds-menu\" popover><ul><li><button type=\"button\">{action}</button></li></ul></div></div>"
    }
  },
  "attributes": {
    "open": {
      "description": "Controls the expanded state when ds-menubutton is applied to a details element.",
      "appliesTo": [
        {
          "elements": [
            "details"
          ]
        }
      ]
    },
    "popovertarget": {
      "description": "References the id of the menu content controlled by a native popover trigger.",
      "appliesTo": [
        {
          "part": "trigger",
          "elements": [
            "button"
          ]
        }
      ]
    },
    "popover": {
      "description": "Enables native popover behavior on the menu content.",
      "default": "auto",
      "appliesTo": [
        {
          "part": "content",
          "elements": [
            "div"
          ]
        }
      ]
    }
  },
  "dataAttributes": [
    {
      "name": "data-ds-viewport",
      "description": "Set to true on the component root after measuring its trigger to constrain menu content to the remaining viewport height.",
      "valueType": "boolean",
      "values": [
        "true"
      ]
    }
  ],
  "accessibility": {
    "ariaAttributeContracts": [
      {
        "name": "aria-expanded",
        "description": "Reports the current menu state for a scripted button trigger.",
        "values": [
          "true",
          "false"
        ],
        "appliesTo": [
          {
            "part": "trigger",
            "elements": [
              "button"
            ]
          }
        ]
      },
      {
        "name": "aria-haspopup",
        "description": "Identifies that the button trigger opens a menu.",
        "values": [
          "menu"
        ],
        "appliesTo": [
          {
            "part": "trigger",
            "elements": [
              "button"
            ]
          }
        ]
      },
      {
        "name": "aria-controls",
        "description": "References the menu content controlled by a scripted button trigger.",
        "appliesTo": [
          {
            "part": "trigger",
            "elements": [
              "button"
            ]
          }
        ]
      }
    ],
    "notes": [
      "Application code must keep aria-expanded synchronized with the visible state of a scripted menu.",
      "A popovertarget trigger uses the browser-managed expanded state and does not need a duplicated aria-expanded attribute."
    ]
  },
  "examples": [
    {
      "name": "basic",
      "html": "<details class=\"ds-menubutton\"><summary><span class=\"ds-button\"><span>Menu</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li><li><a href=\"#\">Action 3</a></li></ul></div></details>"
    },
    {
      "name": "with-icon",
      "html": "<details class=\"ds-menubutton\"><summary><span class=\"ds-button --icon-settings\"><span>Settings</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Preferences</a></li><li><a href=\"#\">Account</a></li><li><button>Logout</button></li></ul></div></details>"
    },
    {
      "name": "top",
      "html": "<details class=\"ds-menubutton --top\"><summary><span class=\"ds-button\"><span>Menu Above</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li></ul></div></details>"
    },
    {
      "name": "right",
      "html": "<details class=\"ds-menubutton --right\"><summary><span class=\"ds-button\"><span>Menu Right</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li></ul></div></details>"
    },
    {
      "name": "inline",
      "html": "<details class=\"ds-menubutton --inline\"><summary><span class=\"ds-button\"><span>Inline Menu</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li></ul></div></details>"
    },
    {
      "name": "no-background",
      "html": "<details class=\"ds-menubutton --no-background\"><summary><span class=\"ds-button --label\"><span>No Overlay</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li></ul></div></details>"
    },
    {
      "name": "text-trigger",
      "html": "<details class=\"ds-menubutton\"><summary class=\"ds-text\">Text content</summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li></ul></div></details>"
    },
    {
      "name": "primary",
      "html": "<details class=\"ds-menubutton\"><summary><span class=\"ds-button --primary --icon-settings\"><span>Button label</span></span></summary><div class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li></ul></div></details>"
    },
    {
      "name": "with-sections",
      "html": "<details class=\"ds-menubutton\"><summary><span class=\"ds-button --icon-settings\"><span>Settings</span></span></summary><div class=\"ds-menu\"><div class=\"ds-text --label\">Account</div><ul><li><a href=\"#\" class=\"ds-text --icon-settings\">Account settings</a></li><li><a href=\"#\" class=\"ds-text --icon-signin\">Change email</a></li></ul><div class=\"ds-text --label\">Payment</div><ul><li><a href=\"#\">Billing</a></li><li><a href=\"#\">Payment settings</a></li></ul></div></details>"
    },
    {
      "name": "popover",
      "html": "<div class=\"ds-menubutton\"><button class=\"ds-button\" type=\"button\" aria-haspopup=\"menu\" popovertarget=\"example-menubutton-popover\"><span>Menu</span></button><div id=\"example-menubutton-popover\" class=\"ds-menu\" popover><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li><li><a href=\"#\">Action 3</a></li></ul></div></div>"
    },
    {
      "name": "div-button",
      "html": "<div class=\"ds-menubutton\"><button class=\"ds-button\" type=\"button\" aria-expanded=\"false\" aria-haspopup=\"menu\" aria-controls=\"example-menubutton-menu\"><span>Menu</span></button><div id=\"example-menubutton-menu\" class=\"ds-menu\"><ul><li><a href=\"#\">Action 1</a></li><li><a href=\"#\">Action 2</a></li><li><a href=\"#\">Action 3</a></li></ul></div></div>"
    }
  ]
}