{
  "$schema": "../manifest.schema.json",
  "schemaVersion": "1.0.0",
  "name": "ds-header",
  "description": "Page or section header component",
  "docUrl": "https://design.soracom.io/design-system/elements/header/",
  "category": "elements",
  "htmlElements": [
    "header",
    "div"
  ],
  "isWebComponent": false,
  "modifiers": {
    "color": {
      "support": "all"
    },
    "layout": {
      "support": "custom",
      "values": [
        "--sticky",
        "--sticky-0",
        "--sticky-20",
        "--sticky-40",
        "--sticky-60",
        "--sticky-80",
        "--sticky-100",
        "--sticky-120",
        "--sticky-140",
        "--sticky-160",
        "--sticky-180",
        "--sticky-200"
      ]
    },
    "variant": {
      "support": "custom",
      "values": [
        "--dark"
      ]
    }
  },
  "structure": {
    "parts": {
      "logo": {
        "element": "div",
        "alternativeElements": [
          "span"
        ],
        "selector": ".ds-logo",
        "optional": true,
        "position": [
          "first"
        ]
      },
      "title": {
        "element": "span",
        "alternativeElements": [
          "div",
          "h1",
          "h2"
        ],
        "selector": ".ds-text, .ds-heading",
        "optional": true
      },
      "link": {
        "element": "a",
        "selector": ":is(.ds-header, [class*=\"ds-header--\"]) > a",
        "optional": true
      },
      "controls": {
        "element": "aside",
        "alternativeElements": [
          "div"
        ],
        "selector": ".__controls",
        "optional": true,
        "position": [
          "last"
        ]
      }
    },
    "patterns": {
      "basic": "<header class=\"ds-header\"><div class=\"ds-logo\"></div><span class=\"ds-text\">{title}</span></header>",
      "with-controls": "<header class=\"ds-header\"><div class=\"ds-logo\"></div><span class=\"ds-text\">{title}</span><aside class=\"__controls\">{controls}</aside></header>",
      "linked": "<header class=\"ds-header\"><a href=\"{href}\"><div class=\"ds-logo\"></div><span class=\"ds-text\">{title}</span></a></header>"
    }
  },
  "attributes": {
    "href": {
      "description": "Navigation target for the direct header link that wraps the logo and title.",
      "appliesTo": [
        {
          "part": "link",
          "elements": [
            "a"
          ]
        }
      ]
    }
  },
  "dataAttributes": [
    {
      "name": "data-coverage",
      "description": "Selects the Global or Japan coverage theme when set on the header root.",
      "valueType": "token",
      "values": [
        "g",
        "jp"
      ]
    }
  ],
  "examples": [
    {
      "name": "basic",
      "html": "<header class=\"ds-header\"><div class=\"ds-logo\"></div><span class=\"ds-text\">App Title</span></header>"
    },
    {
      "name": "with-controls",
      "html": "<header class=\"ds-header\"><div class=\"ds-logo\"></div><span class=\"ds-text\">App Title</span><aside class=\"__controls\"><button class=\"ds-button --plain --icon-settings\"><span>Settings</span></button></aside></header>"
    },
    {
      "name": "dark",
      "html": "<header class=\"ds-header --dark\"><div class=\"ds-logo\"></div><span class=\"ds-text\">Dark Header</span></header>"
    },
    {
      "name": "color",
      "html": "<header class=\"ds-header --color-blue\"><div class=\"ds-logo\"></div><span class=\"ds-text\">Blue Header</span></header>"
    },
    {
      "name": "sticky",
      "html": "<header class=\"ds-header --sticky\"><div class=\"ds-logo\"></div><span class=\"ds-text\">Sticky Header</span></header>"
    },
    {
      "name": "global-coverage",
      "html": "<header class=\"ds-header\" data-coverage=\"g\"><a href=\"/\"><div class=\"ds-logo\"></div><span class=\"ds-text\">Global Console</span></a></header>"
    }
  ]
}