{
  "name": "tabs",
  "displayName": "Tabs",
  "type": "progressive",
  "isCustomElement": true,
  "tag": "l-tabs",
  "nativeTag": null,
  "selector": "l-tabs",
  "subItemOf": null,
  "summary": "A tabs component that progressively enhances light DOM markup\nwith ARIA roles, keyboard navigation, and animated indicators.",
  "status": "stable",
  "appearances": [
    "line",
    "enclosed"
  ],
  "import": {
    "css": "luxen-ui/css/tabs/line",
    "js": "luxen-ui/tabs"
  },
  "properties": [
    {
      "name": "variant",
      "attribute": "variant",
      "type": "TabsVariant",
      "default": "'line'",
      "reflects": true,
      "description": "Visual variant."
    },
    {
      "name": "value",
      "attribute": "value",
      "type": "string",
      "default": "'0'",
      "reflects": true,
      "description": "Index of the active tab (0-based)."
    },
    {
      "name": "fullWidth",
      "attribute": "full-width",
      "type": "boolean",
      "default": "false",
      "reflects": true,
      "description": "Stretch tabs to fill container width."
    },
    {
      "name": "orientation",
      "attribute": "orientation",
      "type": "TabsOrientation",
      "default": "'horizontal'",
      "reflects": true,
      "description": "Tab orientation."
    }
  ],
  "attributes": [],
  "events": [
    {
      "name": "change",
      "description": "Fired when the active tab changes. Bubbles. Properties: `index: number`, `name: string | null`.",
      "cancelable": false
    }
  ],
  "methods": [],
  "slots": [],
  "cssClasses": [],
  "cssParts": [],
  "cssProperties": [
    {
      "name": "--indicator-color",
      "default": "var(--l-color-text-primary)",
      "description": "`line` variant: color of the active underline that slides under the selected tab."
    },
    {
      "name": "--indicator-thickness",
      "default": "2px",
      "description": "`line` variant: thickness of the active underline."
    },
    {
      "name": "--track-color",
      "default": "var(--l-color-border)",
      "description": "`line` variant: color of the static bottom border the tabs sit on."
    },
    {
      "name": "--track-thickness",
      "default": "1px",
      "description": "`line` variant: thickness of the static bottom border."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": null,
      "language": "html",
      "code": "<l-tabs variant=\"enclosed\">\n  <div>\n    <button>Tab 1</button>\n    <button>Tab 2</button>\n  </div>\n  <div>Content 1</div>\n  <div>Content 2</div>\n</l-tabs>"
    }
  ]
}