{
  "name": "tag",
  "displayName": "Tag",
  "type": "shadow",
  "isCustomElement": true,
  "tag": "l-tag",
  "nativeTag": null,
  "selector": "l-tag",
  "subItemOf": null,
  "summary": "A compact, optionally removable or selectable chip.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": null,
    "js": "luxen-ui/tag"
  },
  "properties": [
    {
      "name": "size",
      "attribute": "size",
      "type": "TagSize",
      "default": "'md'",
      "reflects": true,
      "description": "Tag size: `sm`, `md` (default), or `lg`."
    },
    {
      "name": "removable",
      "attribute": "removable",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Show a remove button (and enable Backspace/Delete removal)."
    },
    {
      "name": "selectable",
      "attribute": "selectable",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Make the tag a filter control the user can toggle on and off."
    },
    {
      "name": "selected",
      "attribute": "selected",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Whether the tag is selected. Reflected, so `[selected]` is styleable."
    },
    {
      "name": "control",
      "attribute": "control",
      "type": "TagControl",
      "default": "'none'",
      "reflects": true,
      "description": "What drives the selection: `none` (default) makes the chip itself a toggle\nbutton; `checkbox` renders a checkbox inside and makes the chip its label —\nthe right choice for a multi-select facet. Implies `selectable`."
    },
    {
      "name": "disabled",
      "attribute": "disabled",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Disable the tag — dims it and blocks selection and removal."
    }
  ],
  "attributes": [],
  "events": [
    {
      "name": "remove",
      "description": "Fired when the user removes the tag (× click or Backspace/Delete). Cancelable; if not prevented the tag removes itself. Not composed, does not bubble.",
      "cancelable": true
    },
    {
      "name": "change",
      "description": "Fired when a `selectable` tag is toggled. Not cancelable — like the platform's own `change`, and like `l-segmented-control`. Bubbles. Properties: `selected: boolean`. The chip is uncontrolled: it applies the new state before dispatching, so a host that vetoes a toggle (a \"max 3 filters\" rule, an async guard) sets `selected` back in the listener — the revert lands in the same render and is never painted.",
      "cancelable": false
    }
  ],
  "methods": [],
  "slots": [
    {
      "name": "",
      "description": "The tag label."
    },
    {
      "name": "prefix",
      "description": "Leading content, e.g. an `<l-icon>` or `<l-avatar>`."
    },
    {
      "name": "suffix",
      "description": "Trailing content, e.g. a result count. Gets the chip's own gutter, so no margin is needed."
    }
  ],
  "cssClasses": [],
  "cssParts": [
    {
      "name": "base",
      "description": "The chip container."
    },
    {
      "name": "content",
      "description": "The label wrapper."
    },
    {
      "name": "toggle",
      "description": "The toggle button rendered by `selectable` (not with `control=\"checkbox\"`)."
    },
    {
      "name": "checkbox",
      "description": "The native checkbox rendered by `control=\"checkbox\"`."
    },
    {
      "name": "remove",
      "description": "The remove button."
    }
  ],
  "cssProperties": [
    {
      "name": "--border-radius",
      "default": null,
      "description": "Corner radius. Defaults to a full pill."
    },
    {
      "name": "--height",
      "default": null,
      "description": "Chip height. Defaults to the `size` step (a selectable chip is taller, to keep a comfortable target)."
    },
    {
      "name": "--font-size",
      "default": null,
      "description": "Label size. Defaults to the `size` step — 12px, or 14px at `size=\"lg\"`. Set it with `--height` to land between the two steps in a dense filter panel."
    },
    {
      "name": "--padding-inline",
      "default": null,
      "description": "Horizontal padding. Defaults to the `size` step."
    },
    {
      "name": "--background",
      "default": null,
      "description": "Chip background."
    },
    {
      "name": "--color",
      "default": null,
      "description": "Text color."
    },
    {
      "name": "--selected-color",
      "default": null,
      "description": "Text, border, and checkbox accent when selected. Defaults to the library's form-control accent, lightened in dark mode."
    },
    {
      "name": "--selected-background",
      "default": null,
      "description": "Chip background when selected. Defaults to a tint of `--selected-color`."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": null,
      "language": "html",
      "code": "<l-tag removable>Design</l-tag>\n<l-tag selectable selected>A3</l-tag>\n<l-tag selectable control=\"checkbox\">Color <span slot=\"suffix\">79</span></l-tag>"
    }
  ]
}