{
  "name": "alert",
  "displayName": "Alert",
  "type": "custom",
  "isCustomElement": true,
  "tag": "l-alert",
  "nativeTag": null,
  "selector": "l-alert",
  "subItemOf": null,
  "summary": "A callout box that highlights contextual information with a semantic color and a leading icon.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/alert",
    "js": "luxen-ui/alert"
  },
  "properties": [
    {
      "name": "variant",
      "attribute": "variant",
      "type": "AlertVariant | undefined",
      "default": null,
      "reflects": true,
      "description": "Semantic variant: `info`, `success`, `warning`, or `danger`. Default is neutral."
    },
    {
      "name": "icon",
      "attribute": "icon",
      "type": "string | undefined",
      "default": null,
      "reflects": false,
      "description": "Iconify icon name (e.g. `lucide:bell`) overriding the variant's default icon."
    },
    {
      "name": "withoutIcon",
      "attribute": "without-icon",
      "type": "boolean",
      "default": "false",
      "reflects": false,
      "description": "Hide the leading icon entirely."
    },
    {
      "name": "dismissible",
      "attribute": "dismissible",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Show a close button that dismisses the alert when clicked."
    }
  ],
  "attributes": [],
  "events": [
    {
      "name": "hide",
      "description": "Emitted when a dismissible alert is about to close. Cancelable — call `event.preventDefault()` to keep it open.",
      "cancelable": true
    },
    {
      "name": "after-hide",
      "description": "Emitted after the dismiss animation completes and the alert is removed from the DOM. Not cancelable.",
      "cancelable": false
    }
  ],
  "methods": [],
  "slots": [],
  "cssClasses": [
    {
      "name": ".l-alert-icon",
      "description": "The leading icon, colored by variant (auto-injected)."
    },
    {
      "name": ".l-alert-content",
      "description": "Wrapper the authored children are moved into; stacks them vertically (auto-injected)."
    },
    {
      "name": ".l-alert-title",
      "description": "Optional bold heading placed above the body content. Use a real heading element (e.g. `<h3 class=\"l-alert-title\">`) when the alert is a section callout so it is reachable by heading navigation."
    }
  ],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--gap",
      "default": "0.75rem",
      "description": "Gap between the icon, content, and close button."
    },
    {
      "name": "--padding",
      "default": "1rem",
      "description": "Inner padding."
    },
    {
      "name": "--border-radius",
      "default": "8px",
      "description": "Corner radius."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": null,
      "language": "html",
      "code": "<l-alert variant=\"warning\" dismissible>\n  <span class=\"l-alert-title\">Heads up</span>\n  This action cannot be undone.\n</l-alert>"
    }
  ]
}