{
  "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. Not cancelable. 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."
    },
    {
      "name": "--hover-color",
      "default": "var(--l-color-bg-state-hover)",
      "description": "`line` variant: fill of the pill that appears behind a hovered tab label."
    },
    {
      "name": "--hover-inset",
      "default": "4px",
      "description": "`line` variant: block-axis gap between the hover pill and the tab edges, keeping it detached from the bottom border."
    }
  ],
  "commands": [],
  "examples": [
    {
      "title": "Mark the initially-active tab with `aria-selected=\"true\"` so it is styled as",
      "language": "html",
      "code": "selected before the script upgrades the element (progressive enhancement).\n```html\n<l-tabs variant=\"enclosed\">\n  <div>\n    <button aria-selected=\"true\">Tab 1</button>\n    <button>Tab 2</button>\n  </div>\n  <div>Content 1</div>\n  <div>Content 2</div>\n</l-tabs>\n```"
    },
    {
      "title": "A tab button marked `disabled` (or `aria-disabled=\"true\"`) is skipped by",
      "language": "html",
      "code": "arrow keys, `Home` and `End`, and cannot be selected by a click or by\n`value` — it still owns its panel, so the tab/panel order is unchanged.\n```html\n<button disabled>Billing</button>\n```"
    }
  ]
}