{
  "name": "drawer",
  "displayName": "Drawer",
  "type": "shadow",
  "isCustomElement": true,
  "tag": "l-drawer",
  "nativeTag": null,
  "selector": "l-drawer",
  "subItemOf": null,
  "summary": "A drawer that slides in from a screen edge. Extends `<l-dialog>`.\n\nOpen and close by toggling the `open` property (or the `--show` / `--hide`\nInvoker commands). Always opens as modal.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": null,
    "js": "luxen-ui/drawer"
  },
  "properties": [
    {
      "name": "placement",
      "attribute": "placement",
      "type": "'start' | 'end' | 'top' | 'bottom' | undefined",
      "default": null,
      "reflects": true,
      "description": "Edge the drawer slides in from. Defaults to the start (inline-start) edge."
    },
    {
      "name": "inset",
      "attribute": "inset",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Detach the drawer from the viewport edges, floating it with a uniform gap and rounded corners."
    },
    {
      "name": "title",
      "attribute": "title",
      "type": "string",
      "default": "''",
      "reflects": false,
      "description": "Dialog title rendered in the header and used as the dialog's accessible name."
    },
    {
      "name": "open",
      "attribute": "open",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Whether the dialog is open."
    },
    {
      "name": "lightDismiss",
      "attribute": "light-dismiss",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Close when the backdrop is clicked."
    },
    {
      "name": "withoutHeader",
      "attribute": "without-header",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Hide the header entirely (title and close slot)."
    }
  ],
  "attributes": [],
  "events": [
    {
      "name": "show",
      "description": "Fired when the drawer is about to open. Cancelable — call `event.preventDefault()` to keep it closed.",
      "cancelable": true
    },
    {
      "name": "after-show",
      "description": "Fired after the open animation completes. Not cancelable.",
      "cancelable": false
    },
    {
      "name": "hide",
      "description": "Fired when the drawer is about to close. Cancelable — call `event.preventDefault()` to keep it open.",
      "cancelable": true
    },
    {
      "name": "after-hide",
      "description": "Fired after the close animation completes. Not cancelable.",
      "cancelable": false
    }
  ],
  "methods": [],
  "slots": [
    {
      "name": "",
      "description": "Body content."
    },
    {
      "name": "title",
      "description": "Custom heading element. Overrides the default `<h2>` rendered from the `title` property. Also provides the dialog's accessible name."
    },
    {
      "name": "close",
      "description": "Close button (typically `<button class=\"l-close\">`)."
    },
    {
      "name": "footer",
      "description": "Footer actions."
    }
  ],
  "cssClasses": [],
  "cssParts": [
    {
      "name": "dialog",
      "description": "The native `<dialog>` element."
    },
    {
      "name": "header",
      "description": "The header wrapper containing the title and close slot."
    },
    {
      "name": "title",
      "description": "The drawer title heading."
    },
    {
      "name": "body",
      "description": "The body wrapper around the default slot."
    },
    {
      "name": "footer",
      "description": "The footer wrapper around the footer slot."
    }
  ],
  "cssProperties": [
    {
      "name": "--size",
      "default": "320px",
      "description": "Drawer size on the axis perpendicular to its edge (width for `start`/`end`, height for `top`/`bottom`)."
    },
    {
      "name": "--border-radius",
      "default": "6px",
      "description": "Drawer border radius on the inner edges (all corners when `inset`)."
    },
    {
      "name": "--inset-gap",
      "default": "1rem",
      "description": "Gap between the drawer and the viewport edges when `inset` is set."
    },
    {
      "name": "--shadow",
      "default": null,
      "description": "Drop shadow applied to the floating panel when `inset` is set. Set to `none` to remove it."
    },
    {
      "name": "--show-duration",
      "default": "200ms",
      "description": "Open transition duration."
    },
    {
      "name": "--hide-duration",
      "default": "200ms",
      "description": "Close transition duration."
    },
    {
      "name": "--backdrop",
      "default": null,
      "description": "Backdrop color."
    },
    {
      "name": "--width",
      "default": "31rem",
      "description": "Dialog width."
    },
    {
      "name": "--padding",
      "default": "1.5rem",
      "description": "Padding applied to the header, footer, and inline-padding of the body. Set to `0` to remove all internal spacing (e.g. for edge-to-edge media)."
    },
    {
      "name": "--backdrop-blur",
      "default": "0",
      "description": "Backdrop blur amount (any CSS length). `0` means no blur; set e.g. `4px` for a subtle frost."
    }
  ],
  "commands": [
    {
      "name": "--show",
      "description": "Sets `open = true`."
    },
    {
      "name": "--hide",
      "description": "Sets `open = false`."
    }
  ],
  "examples": []
}