{
  "name": "dropdown",
  "displayName": "Dropdown",
  "type": "shadow",
  "isCustomElement": true,
  "tag": "l-dropdown",
  "nativeTag": null,
  "selector": "l-dropdown",
  "subItemOf": null,
  "summary": "A dropdown menu anchored to a trigger element.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": null,
    "js": "luxen-ui/dropdown"
  },
  "properties": [
    {
      "name": "open",
      "attribute": "open",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Whether the dropdown is open."
    },
    {
      "name": "placement",
      "attribute": "placement",
      "type": "Placement",
      "default": "'bottom-start'",
      "reflects": false,
      "description": "Preferred placement of the panel."
    },
    {
      "name": "distance",
      "attribute": "distance",
      "type": "number",
      "default": "4",
      "reflects": false,
      "description": "Distance in pixels from the trigger."
    },
    {
      "name": "disabled",
      "attribute": "disabled",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Disables the dropdown trigger."
    },
    {
      "name": "minWidth",
      "attribute": "min-width",
      "type": "'trigger' | undefined",
      "default": null,
      "reflects": false,
      "description": "Floor the panel's width at the trigger's width. Set to `trigger` so the\npanel is never narrower than the trigger; it still grows with its content.\nUseful for select-like triggers (a date-range or filter button) where the\npanel should line up with the control. Re-applies if the trigger resizes\nwhile open."
    }
  ],
  "attributes": [],
  "events": [
    {
      "name": "show",
      "description": "Fired before the dropdown opens. Cancelable.",
      "cancelable": true
    },
    {
      "name": "after-show",
      "description": "Fired after the open animation completes.",
      "cancelable": false
    },
    {
      "name": "hide",
      "description": "Fired before the dropdown closes. Cancelable.",
      "cancelable": true
    },
    {
      "name": "after-hide",
      "description": "Fired after the close animation completes.",
      "cancelable": false
    },
    {
      "name": "select",
      "description": "Fired when an item is selected, including items nested in submenus. Bubbles. Properties: `item: DropdownItem`.",
      "cancelable": false
    }
  ],
  "methods": [
    {
      "name": "show",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "hide",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "toggle",
      "params": [],
      "returns": null,
      "description": ""
    }
  ],
  "slots": [
    {
      "name": "trigger",
      "description": "The element that triggers the dropdown."
    },
    {
      "name": "header",
      "description": "Optional content rendered above the menu items (e.g. a user profile row). Use an `<l-divider>` (or `<hr>`) after it to separate from items."
    },
    {
      "name": "",
      "description": "Menu content (`l-dropdown-item` elements). Drop an `<l-divider>` (or `<hr>`) between items to render a section separator, or an `<l-dropdown-label>` to caption a group of items. Nest items with `slot=\"submenu\"` inside an item to create a submenu."
    },
    {
      "name": "footer",
      "description": "Optional content rendered below the menu items (e.g. a version label or shortcut row). Use an `<l-divider>` (or `<hr>`) before it to separate from items."
    }
  ],
  "cssClasses": [],
  "cssParts": [
    {
      "name": "panel",
      "description": "The floating menu container."
    }
  ],
  "cssProperties": [
    {
      "name": "--background",
      "default": null,
      "description": "Panel background color."
    },
    {
      "name": "--border-radius",
      "default": "8px",
      "description": "Panel border radius."
    },
    {
      "name": "--padding",
      "default": "0.25rem",
      "description": "Panel inner padding. Slotted `<l-divider>` elements bleed by this amount on each side to span the panel edges."
    },
    {
      "name": "--shadow",
      "default": null,
      "description": "Panel box shadow."
    },
    {
      "name": "--show-duration",
      "default": "150",
      "description": "Show animation duration in ms."
    },
    {
      "name": "--hide-duration",
      "default": "150",
      "description": "Hide animation duration in ms."
    }
  ],
  "commands": [],
  "examples": []
}