{
  "name": "segmented-control",
  "displayName": "Segmented control",
  "type": "progressive",
  "isCustomElement": true,
  "tag": "l-segmented-control",
  "nativeTag": null,
  "selector": "l-segmented-control",
  "subItemOf": null,
  "summary": "A single-select segmented control: a compact, mutually-exclusive\nswitch between a few options (radio-group semantics with a sliding pill).\nProgressively enhances light-DOM `<button>`s so it works before JS runs.\nForm-associated: give it a `name` and its selected `value` is submitted with\nthe form (and restored on reset), like a native radio group.",
  "status": "stable",
  "appearances": [],
  "import": {
    "css": "luxen-ui/css/segmented-control",
    "js": "luxen-ui/segmented-control"
  },
  "properties": [
    {
      "name": "value",
      "attribute": "value",
      "type": "string",
      "default": "''",
      "reflects": true,
      "description": "Value of the selected segment (its `value` attribute, else its index)."
    },
    {
      "name": "size",
      "attribute": "size",
      "type": "SegmentedControlSize",
      "default": "'md'",
      "reflects": true,
      "description": "Control height, aligned with buttons and form controls at the same size."
    },
    {
      "name": "label",
      "attribute": "label",
      "type": "string | undefined",
      "default": null,
      "reflects": true,
      "description": "Accessible label announced for the group. Not displayed on screen."
    },
    {
      "name": "fullWidth",
      "attribute": "full-width",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Stretch segments to fill the container width."
    }
  ],
  "attributes": [],
  "events": [
    {
      "name": "change",
      "description": "Fired when the selected segment changes. Not cancelable. Bubbles. Properties: `value: string`, `index: number`.",
      "cancelable": false
    }
  ],
  "methods": [
    {
      "name": "formResetCallback",
      "params": [],
      "returns": null,
      "description": ""
    },
    {
      "name": "formStateRestoreCallback",
      "params": [
        {
          "name": "state",
          "type": "string"
        },
        {
          "name": "mode",
          "type": "'restore' | 'autocomplete'"
        }
      ],
      "returns": null,
      "description": ""
    }
  ],
  "slots": [],
  "cssClasses": [],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--indicator-color",
      "default": "var(--l-color-surface)",
      "description": "Background of the sliding pill behind the selected segment."
    },
    {
      "name": "--border-radius",
      "default": "var(--l-radius-lg)",
      "description": "Corner radius of the track."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": "Mark the initially-selected segment with `aria-checked=\"true\"` (or set",
      "language": "html",
      "code": "`value` to its `value` attribute) so it is styled before the script upgrades\nthe element.\n```html\n<l-segmented-control label=\"Metric\" value=\"cost\">\n  <button value=\"volume\">Volume</button>\n  <button value=\"cost\" aria-checked=\"true\">Cost</button>\n</l-segmented-control>\n```"
    }
  ]
}