{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-menu",
  "description": "Menu component for navigation",
  "docUrl": "https://design.soracom.io/design-system/elements/menu/",
  "category": "elements",
  "htmlElements": [
    "div",
    "nav"
  ],
  "isWebComponent": false,
  "modifiers": {
    "variant": {
      "support": "custom",
      "values": [
        "--simple",
        "--toc",
        "--dropdown",
        "--select-menu"
      ]
    },
    "size": {
      "support": "custom",
      "values": [
        "--compact"
      ]
    },
    "width": {
      "support": "subset",
      "values": [
        "--narrow",
        "--mid",
        "--wide",
        "--full"
      ]
    },
    "layout": {
      "support": "custom",
      "values": [
        "--viewport",
        "--max-viewport"
      ]
    },
    "icon": {
      "support": "all"
    },
    "indent": {
      "support": "all"
    },
    "gap": {
      "support": "all"
    }
  },
  "cssCustomProperties": [
    {
      "name": "--ds-menu-width",
      "default": "auto",
      "description": "Fixed menu width"
    },
    {
      "name": "--ds-menu-height",
      "default": "auto",
      "description": "Fixed menu height before overflow scrolling"
    },
    {
      "name": "--ds-menu-max-height",
      "default": "var(--ds-menu-height)",
      "description": "Maximum menu height before overflow scrolling"
    },
    {
      "name": "--ds-menu-border-radius",
      "default": "0",
      "description": "Menu border radius"
    }
  ],
  "structure": {
    "parts": {
      "label": {
        "element": "div",
        "alternativeElements": [
          "span"
        ],
        "selector": ".ds-text.--label",
        "optional": true,
        "repeatable": true
      },
      "group": {
        "element": "ul",
        "optional": true,
        "repeatable": true
      },
      "item": {
        "element": "li",
        "optional": true,
        "repeatable": true
      },
      "action": {
        "element": "a",
        "alternativeElements": [
          "button"
        ],
        "optional": true,
        "repeatable": true
      }
    },
    "patterns": {
      "links": "<nav class=\"ds-menu\"><ul><li><a href=\"{href}\">{label}</a></li></ul></nav>",
      "actions": "<div class=\"ds-menu\"><ul><li><button type=\"button\">{label}</button></li></ul></div>",
      "groups": "<div class=\"ds-menu\"><div class=\"ds-text --label\">{group}</div><ul><li><a href=\"{href}\">{label}</a></li></ul></div>"
    }
  },
  "attributes": {},
  "dataAttributes": [
    {
      "name": "data-notification-counter",
      "description": "Displays a numeric counter badge when set on a descendant .__item element with a --notification modifier.",
      "valueType": "number"
    }
  ],
  "examples": [
    {
      "name": "basic",
      "html": "<div class=\"ds-menu\"><ul><li><a href=\"#\">Menu Item 1</a></li><li><a href=\"#\">Menu Item 2</a></li><li><a href=\"#\">Menu Item 3</a></li></ul></div>"
    },
    {
      "name": "with-buttons",
      "html": "<div class=\"ds-menu\"><ul><li><button>Action 1</button></li><li><button>Action 2</button></li><li><button>Action 3</button></li></ul></div>"
    },
    {
      "name": "dropdown",
      "html": "<div class=\"ds-menu --dropdown\"><ul><li><button>Edit</button></li><li><button>Duplicate</button></li><li><button>Delete</button></li></ul></div>"
    },
    {
      "name": "simple",
      "html": "<div class=\"ds-menu --simple\"><ul><li><a href=\"#\">Overview</a></li><li><a href=\"#\">Settings</a></li><li><a href=\"#\">Help</a></li></ul></div>"
    },
    {
      "name": "with-icons",
      "html": "<div class=\"ds-menu\"><ul><li><button class=\"ds-text --icon-settings\">Settings</button></li><li><button class=\"ds-text --icon-user\">Account</button></li><li><button class=\"ds-text --icon-support\">Help</button></li></ul></div>"
    },
    {
      "name": "with-groups",
      "html": "<div class=\"ds-menu\"><div class=\"ds-text --label\">Account</div><ul><li><a href=\"#\">Account settings</a></li><li><a href=\"#\">Change email</a></li></ul><div class=\"ds-text --label\">Payment</div><ul><li><button>Billing</button></li><li><button>Payment settings</button></li></ul></div>"
    },
    {
      "name": "compact",
      "html": "<div class=\"ds-menu --compact\"><ul><li><a href=\"#\">Compact Item 1</a></li><li><a href=\"#\">Compact Item 2</a></li><li><a href=\"#\">Compact Item 3</a></li></ul></div>"
    },
    {
      "name": "select-menu",
      "html": "<div class=\"ds-menu --select-menu\"><ul><li><button aria-selected=\"true\">Selected Option</button></li><li><button>Option 2</button></li><li><button>Option 3</button></li></ul></div>"
    },
    {
      "name": "narrow",
      "html": "<div class=\"ds-menu --narrow\"><ul><li><button>Short</button></li><li><button>Items</button></li></ul></div>"
    },
    {
      "name": "wide",
      "html": "<div class=\"ds-menu --wide\"><ul><li><button>Wide menu item 1</button></li><li><button>Wide menu item 2</button></li></ul></div>"
    },
    {
      "name": "toc",
      "html": "<nav class=\"ds-menu --toc\"><ul><li><a href=\"#section-1\">Section 1</a></li><li><a href=\"#section-2\">Section 2</a></li><li><a href=\"#section-3\">Section 3</a></li></ul></nav>"
    }
  ]
}