{
  "tag": "ed-tab-group",
  "kind": "component",
  "summary": "Tab groups organize content into a container that shows one section at a time.",
  "status": "experimental",
  "level": "molecule",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tab-group/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/tab-group/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [
    "ed-button",
    "ed-icon",
    "ed-tab",
    "ed-tab-panel"
  ],
  "use": [
    "A single context that holds several parallel, independent sections, where only one needs to be visible at a time",
    "Switching between related sub-views of the same record or section — for example \"Overview\", \"History\", and \"Documents\" within a client record",
    "Sections with no required order, so users can move between them freely and repeatedly",
    "Panels of roughly equal importance, or less-important detail that can sit behind a non-default tab to reduce clutter",
    "Saving space when showing every section at once would overwhelm the page"
  ],
  "notFor": [
    {
      "when": "A task that must be completed in a fixed order of steps",
      "instead": "a [Wizard](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/wizard)"
    },
    {
      "when": "A mutually exclusive quick toggle that filters or reshapes one view — Table/Chart, Week/Month/Year",
      "instead": "[Radio Group](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/radio-group)'s button appearance (segmented control)"
    },
    {
      "when": "Users need to see or compare several sections at the same time",
      "instead": "[Details](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/details) (grouped for accordion-style behavior) or a plain scrolling page"
    },
    {
      "when": "Top-level movement between product areas or modules",
      "instead": "the [Side Menu](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/side-menu)"
    }
  ],
  "rules": [
    {
      "id": "tab-group/in-page-navigation",
      "rule": "Use tabs for secondary, in-page navigation within a single context only — switching between related views of the same record or section. They are never a substitute for top-level product navigation.",
      "why": "Using tabs to move between fundamentally different areas of the product creates a confusing hybrid structure."
    },
    {
      "id": "tab-group/must-see-in-default",
      "rule": "Never hide critical or must-see information inside a non-default tab — out of sight is out of mind."
    },
    {
      "id": "tab-group/labels",
      "rule": "Keep every tab label short (one or two words), in plain language, and predictive of what its panel contains — never vague, branded, or marketing labels that fail to signal what the panel holds, and never in ALL CAPS.",
      "check": "error"
    },
    {
      "id": "tab-group/few-tabs",
      "rule": "Keep the number of tabs small enough that the whole set stays visible rather than falling back to the built-in overflow scrolling. Never create so many tabs that they routinely overflow into the scroll controls — reconsider the structure first.",
      "check": "error"
    },
    {
      "id": "tab-group/stable-height",
      "rule": "Give the tab group a stable, height-managed home, so the surrounding layout does not jump as panels of different heights swap in.",
      "check": "warning"
    },
    {
      "id": "tab-group/placement",
      "rule": "Place the tabs (top, bottom, left, or right) to suit the layout and the length of the labels."
    },
    {
      "id": "tab-group/automatic-activation",
      "rule": "Keep the default automatic activation, so keyboard users see each panel as they arrow through the tabs. Never force manual activation when panels appear instantly.",
      "why": "Manual activation then adds a needless keypress.",
      "check": "warning"
    }
  ],
  "api": {
    "attributes": [
      {
        "name": "active",
        "property": "active",
        "type": "string",
        "default": "''",
        "description": "Sets the active tab."
      },
      {
        "name": "placement",
        "property": "placement",
        "type": "'left' | 'right' | 'top' | 'bottom'",
        "default": "'top'",
        "description": "The placement of the tabs."
      },
      {
        "name": "appearance",
        "property": "appearance",
        "type": "'filled' | 'outlined' | 'plain'",
        "default": "'plain'",
        "description": "The visual appearance of the tab group."
      },
      {
        "name": "activation",
        "property": "activation",
        "type": "'auto' | 'manual'",
        "default": "'auto'",
        "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter."
      },
      {
        "name": "stretch",
        "property": "stretch",
        "type": "boolean",
        "default": "false",
        "description": "Makes all tabs equal width, stretching to fill the available space."
      },
      {
        "name": "without-scroll-controls",
        "property": "withoutScrollControls",
        "type": "boolean",
        "default": "false",
        "description": "Disables the scroll arrows that appear when tabs overflow."
      },
      {
        "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-show",
        "react": "onEdTabShow",
        "type": "{ name: String }",
        "description": "Emitted when a tab is shown."
      },
      {
        "name": "ed-tab-hide",
        "react": "onEdTabHide",
        "type": "{ name: String }",
        "description": "Emitted when a tab is hidden."
      },
      {
        "name": "ed-tab-close",
        "react": "onEdTabClose",
        "type": "{ panel: String }",
        "description": "Emitted after a closable tab and its panel have been removed. The tab's own event is not re-dispatched, so this is the one to listen for on the group."
      }
    ],
    "slots": [
      {
        "name": "",
        "description": "Used for grouping tab panels in the tab group. Must be `<ed-tab-panel>` elements, or a `<slot>` of your own that they are assigned to."
      },
      {
        "name": "nav",
        "description": "Used for grouping tabs in the tab group. Must be `<ed-tab>` elements, or a `<slot>` of your own that they are assigned to. Note that `<ed-tab>` will set this slot on itself automatically."
      }
    ],
    "cssProperties": [],
    "parts": [
      {
        "name": "base",
        "description": "The component's base wrapper."
      },
      {
        "name": "nav",
        "description": "The tab group's navigation container where tabs are slotted in."
      },
      {
        "name": "tabs",
        "description": "The container that wraps the tabs."
      },
      {
        "name": "body",
        "description": "The tab group's body where tab panels are slotted in."
      },
      {
        "name": "scroll-button",
        "description": "The previous/next scroll buttons that show when tabs are scrollable, a `<ed-button>`."
      },
      {
        "name": "scroll-button-start",
        "description": "The starting scroll button."
      },
      {
        "name": "scroll-button-end",
        "description": "The ending scroll button."
      }
    ],
    "states": [
      {
        "name": "has-scroll-controls",
        "description": "Applied when the tab list overflows and the scroll buttons are shown."
      }
    ]
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/tab-group/tab-group.js';",
  "react": {
    "component": "EdTabGroup",
    "import": "import EdTabGroup from '@eurodata/eurodata-ui/dist/react/tab-group/index.js';"
  }
}