{
  "tag": "ed-tab",
  "kind": "component",
  "summary": "Tabs are used inside [tab groups](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tab-group) to represent and activate [tab panels](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tab-panel).",
  "status": "experimental",
  "level": "atom",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tab/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tab/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-icon",
    "ed-button"
  ],
  "use": [
    "The clickable label of one section inside a tab group, such as \"Overview\" or \"Documents\" in a client record",
    "A section label the user can close again, such as an opened document or comparison that is no longer needed",
    "A tab with an icon or counter next to its label, so a user sees at a glance which section has new items"
  ],
  "notFor": [
    {
      "when": "Used on its own as a button that triggers an action",
      "instead": "a [Button](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/button)"
    },
    {
      "when": "Choosing one of two modes that reshape one view",
      "instead": "a [Radio Group](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/radio-group) in its button appearance"
    }
  ],
  "rules": [],
  "api": {
    "attributes": [
      {
        "name": "panel",
        "property": "panel",
        "type": "string",
        "default": "''",
        "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group."
      },
      {
        "name": "disabled",
        "property": "disabled",
        "type": "boolean",
        "default": "false",
        "description": "Disables the tab and prevents selection."
      },
      {
        "name": "closable",
        "property": "closable",
        "type": "boolean",
        "default": "false",
        "description": "Make the tab closable"
      },
      {
        "name": "dir",
        "property": "dir",
        "type": "string"
      },
      {
        "name": "lang",
        "property": "lang",
        "type": "string"
      }
    ],
    "properties": [],
    "methods": [
      {
        "name": "getPropertyDescriptor",
        "static": true,
        "parameters": [
          {
            "name": "name",
            "type": "PropertyKey"
          },
          {
            "name": "key",
            "type": "string | symbol"
          },
          {
            "name": "options",
            "type": "PropertyDeclaration"
          }
        ],
        "returns": "PropertyDescriptor | undefined",
        "description": "Wraps the accessor of reflected properties so they always hold a valid value, as a native\nreflected IDL attribute does (`button.type = undefined` reads `submit`):\n\n- A property that declares `useDefault` takes the first value set on an element for its\n  default. That value is its field initializer's: the constructor has finished before markup,\n  a framework or any other code can set anything. Every later `null` or `undefined` means what\n  a dropped prop means on a native element — the attribute is removed: with the attribute\n  there, it is removed and Lit's `useDefault` restores the default without writing it; without\n  one, the property is set to the default. A value set and cleared again before the element\n  updates still writes the default once, from the pending reflection.\n- A Boolean is coerced with `Boolean()`, so `undefined` is `false`.\n\nLit's `useDefault` keeps the initial default out of the DOM. Setting the default explicitly\nwrites it, as `button.type = 'submit'` writes `type`."
      }
    ],
    "events": [
      {
        "name": "ed-tab-close",
        "react": "onEdTabClose",
        "type": "{ panel: string }",
        "description": "Emitted when the tab's close button is activated, or when Delete is pressed while the tab has focus."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "The tab's label."
      },
      {
        "name": "start",
        "description": "An element, such as `<ed-icon>`, placed before the label."
      },
      {
        "name": "end",
        "description": "An element, such as `<ed-icon>`, placed after the label."
      }
    ],
    "cssProperties": [],
    "parts": [
      {
        "name": "base",
        "description": "The component's base wrapper."
      },
      {
        "name": "content",
        "description": "The container that wraps the start slot, label and end slot."
      },
      {
        "name": "start",
        "description": "The container that wraps the `start` slot."
      },
      {
        "name": "end",
        "description": "The container that wraps the `end` slot."
      },
      {
        "name": "label",
        "description": "The label wrapper."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/tab/tab.js';",
  "react": {
    "component": "EdTab",
    "import": "import EdTab from '@eurodata/eurodata-ui/dist/react/tab/index.js';"
  }
}