{
  "tag": "ed-header",
  "kind": "component",
  "summary": "Headers provide a consistent app bar with a logo area and a content area for navigation, search, or actions.",
  "status": "experimental",
  "level": "molecule",
  "since": "1.0",
  "docs": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/header/",
  "usage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/components/header/usage/",
  "playwright": "getByTestId('…')",
  "dependencies": [],
  "use": [
    "The single persistent top bar of an application, holding branding, application-wide navigation, and global actions",
    "A logo that leads back to the start page and global actions such as help, profile or notifications, reachable on every screen",
    "A product-wide search field or user menu that must stay visible while the user scrolls through a long list",
    "Switching the client or company a tax advisor is working in, from the top of every screen"
  ],
  "notFor": [
    {
      "when": "The product's primary section navigation that belongs down the side",
      "instead": "[Side Menu](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/side-menu)"
    },
    {
      "when": "A page-location trail across the top of the header",
      "instead": "[Breadcrumb](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/breadcrumb)"
    }
  ],
  "rules": [
    {
      "id": "header/labeled-global-actions",
      "rule": "In eurodata products, give every global action in the header a visible text label — icon-only buttons are not acceptable. The two exceptions are the hamburger toggle for the side navigation (the default `ed-app` provides) and the help button with the `help_circle` icon: both icons are universally established.",
      "why": "Our usability studies repeatedly show that users, especially less experienced ones, do not reliably recognize or trust unlabeled icons, and features hidden behind them go unused for years.",
      "check": "error"
    },
    {
      "id": "header/navbar-controls",
      "rule": "Give every `ed-button` in the bar `navbar`, unless the product's design asks for another look — also one inside a wrapper such as a `<nav>` or an `.ed-cluster`, and the trigger of a user menu. Never leave a `plain` button in the bar without it. A form control in the bar takes the header's colors by itself and needs no attribute. A control in a popover, a dialog or a dropdown's panel opened from the header is not in the bar and keeps its own appearance.",
      "why": "Only `navbar` gives a button the header's colors and the full height of the bar; without it the button keeps the look it has on a page. A form control needs no switch: the header gives every field in the bar its colors, and leaves the focus ring the theme's.",
      "check": "error"
    },
    {
      "id": "header/search-field",
      "rule": "Give the header's search field no `error`, `warning`, `ai` or hint, and no constraint such as `required`, `pattern`, `minlength` or `maxlength`.",
      "why": "A search in the bar does not validate its input: the state colors are made for a light field, and a message would hang below the bar.",
      "check": "error"
    },
    {
      "id": "header/user-menu",
      "rule": "Build the user menu as an `ed-dropdown` whose trigger is an `ed-button navbar with-caret`, labeled with the user's name and with their `ed-avatar` directly in its `start` slot.",
      "why": "In the `start` slot the button sizes the avatar to the bar.",
      "check": "error"
    },
    {
      "id": "header/caret-opens-menu",
      "rule": "Give a button in the bar `with-caret` only as the trigger of the `ed-dropdown` or the anchor of the `ed-popover` it opens.",
      "why": "The caret promises a menu, and a caret that opens nothing breaks that promise.",
      "check": "error"
    },
    {
      "id": "header/sticky",
      "rule": "Keep the header in place, so branding and global actions stay reachable at every scroll position. Inside [App](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/app) this is already handled; standalone it takes `position: sticky` on the header, in a parent that spans the scrollable content.",
      "check": "error"
    },
    {
      "id": "header/logo-links-home",
      "rule": "Make the branding logo a link back to the application's home or start screen.",
      "check": "error"
    },
    {
      "id": "header/logo-trailing",
      "rule": "Leave the logo at the trailing edge, where the component puts it — never move it with CSS.",
      "why": "That is the eurodata convention, and moving it with CSS separates what users see from the order they tab through.",
      "check": "error"
    },
    {
      "id": "header/logo-size",
      "rule": "Don't force a fixed size on the branding image — the header sizes it to the bar automatically.",
      "check": "error"
    },
    {
      "id": "header/two-groups",
      "rule": "Start navigation at the leading (left) edge of the content area and group global and account actions at its trailing edge, so the two roles read as two groups rather than one long row.",
      "check": "warning"
    },
    {
      "id": "header/overflow",
      "rule": "Decide in the product how the header's actions give way when the width shrinks: the bar keeps one line of fixed height and never collapses, hides or reorders its content. Keep frequently used global actions directly visible while there is room, move only lower-priority actions into a clearly labeled overflow, keeping the most important ones visible longest, and never let the bar clip or silently drop actions. This does not apply to the user menu: grouping account-level items such as settings, logout, or the theme switch behind it is a valid, established pattern.",
      "why": "The header arranges content it does not know, so only the product can tell which actions may give way, and a bar that overflows its inline end puts part of it out of reach.",
      "check": "error"
    },
    {
      "id": "header/consistent-order",
      "rule": "Keep the same actions in the same order across screens — never reorder global actions from one screen to the next.",
      "why": "Users build spatial memory."
    },
    {
      "id": "header/module-switcher",
      "rule": "Place a product or module switcher in the header, so users can move between modules from any screen in one or two steps — never bury module or product switching inside a settings menu."
    },
    {
      "id": "header/navigation-toggle",
      "rule": "Host the control that collapses and expands the side navigation in the header, keeping the side navigation expanded by default in the desktop view — the app starts it collapsed, so set `desktop-nav-open` ([`app/desktop-nav-open`](https://test-apps.eurodata.de/a/eurodata-ui/docs/components/app/usage#rule-app-desktop-nav-open)).",
      "check": "error"
    },
    {
      "id": "header/no-page-actions",
      "rule": "Never overload the header with page-level or record-level actions — they belong to the page body."
    },
    {
      "id": "header/banner-landmark",
      "rule": "Set `role` yourself when the header sits inside an article or a section — never leave the default `banner` landmark in place on a header that is not the page's own.",
      "why": "One page carries one banner, and a second one fails an automated accessibility check.",
      "check": "error"
    }
  ],
  "api": {
    "attributes": [
      {
        "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": [],
    "slots": [
      {
        "name": "",
        "description": "The header's content (navigation, search, actions, etc.). Visually leading; use `margin-inline-start: auto` on a child to push it (and everything after it) to the right of the content row. A form control in it (`ed-input`, `ed-select`, `ed-combobox`, `ed-textarea`, `ed-number-input`, `ed-date-picker`, `ed-tag-input`) takes the header's colors, also inside a wrapper; one in an overlay opened from the header keeps its own."
      },
      {
        "name": "logo",
        "description": "The branding logo, at the trailing edge. Images and inline SVGs are sized to fit the header height automatically, including when wrapped in a link. The region collapses when the slot is empty."
      }
    ],
    "cssProperties": [
      {
        "name": "--ed-header-size",
        "default": "var(--ed-size-13)",
        "description": "The height of the header. An `ed-button[navbar]` inside the header reads it as its own minimum height and width, so those buttons fill the bar also inside a wrapper in the header's own tree, and stay square when this changes. Set it on a common ancestor (or the theme) rather than on the header alone to also reach `ed-app`'s navigation toggle, which is a sibling of the header rather than a child of it."
      }
    ],
    "parts": [
      {
        "name": "content",
        "description": "The wrapper around the default slot."
      },
      {
        "name": "logo",
        "description": "The wrapper around the `logo` slot."
      }
    ],
    "states": []
  },
  "import": "import '@eurodata/eurodata-ui/dist/components/header/header.js';",
  "react": {
    "component": "EdHeader",
    "import": "import EdHeader from '@eurodata/eurodata-ui/dist/react/header/index.js';"
  }
}