{
  "name": "input-group",
  "displayName": "Input group",
  "type": "progressive",
  "isCustomElement": true,
  "tag": "l-input-group",
  "nativeTag": null,
  "selector": "l-input-group",
  "subItemOf": "input",
  "summary": "Groups a text input with leading or trailing adornments — icons, units, buttons — inside one bordered field.\n\nLayout is pure CSS: children render in DOM order, so an `<l-icon>` placed\nbefore the `<input>` is a leading adornment and a `<span>` after it is a\ntrailing one. JavaScript only layers behavior on top: `password-toggle`\ninjects a show/hide button at upgrade time (without JS the field stays a\nplain password input — no dead button), and clicking the group's empty area\nfocuses the input.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": null,
    "js": "luxen-ui/input-group"
  },
  "properties": [
    {
      "name": "passwordToggle",
      "attribute": "password-toggle",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Inject a show/hide toggle button after the inner `input[type=\"password\"]`."
    },
    {
      "name": "size",
      "attribute": "size",
      "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | undefined",
      "default": "md",
      "reflects": true,
      "description": "Control size — maps the height to the shared `--l-size-control-*` scale ()."
    }
  ],
  "attributes": [],
  "events": [],
  "methods": [],
  "slots": [],
  "cssClasses": [
    {
      "name": ".l-input-group-toggle",
      "description": "The injected show/hide password button."
    }
  ],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--height",
      "default": "var(--l-form-control-height)",
      "description": "Control height."
    },
    {
      "name": "--border-radius",
      "default": "var(--l-form-control-border-radius)",
      "description": "Corner radius."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": null,
      "language": "html",
      "code": "<l-input-group password-toggle>\n  <input type=\"password\" autocomplete=\"current-password\" />\n</l-input-group>"
    }
  ]
}