{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "site-header",
  "type": "registry:ui",
  "title": "Site header (MIAN)",
  "description": "A website header: brand, navigation, actions, and a menu that works without JavaScript on small screens.",
  "categories": [
    "sections",
    "header",
    "site header",
    "navigation bar",
    "nav"
  ],
  "registryDependencies": [
    "https://mian.ro/r/mian-base.json"
  ],
  "files": [
    {
      "path": "mian/components/site-header.css",
      "type": "registry:file",
      "target": "mian/components/site-header.css",
      "content": ".mn-header {\n  container: mn-header / inline-size; position: relative; z-index: 30;\n  border-bottom: var(--mn-border-w) solid var(--mn-border);\n  background: color-mix(in srgb, var(--mn-bg) 86%, transparent);\n  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);\n}\n.mn-header-sticky { position: sticky; top: 0; }\n.mn-header-plain { border-bottom-color: transparent; }\n.mn-header-plain:not(.mn-header-sticky) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }\n.mn-header-in { display: flex; align-items: center; gap: 1.25rem; min-height: 4rem; }\n.mn-header-brand { display: inline-flex; align-items: center; gap: .55rem; flex: none; color: var(--mn-fg); text-decoration: none; font: 650 1.0625rem/1 var(--mn-font-heading); letter-spacing: -.015em; white-space: nowrap; }\n.mn-header-brand svg { width: 1.6rem; height: 1.6rem; }\n.mn-header-brand:focus-visible { outline: none; box-shadow: var(--mn-focus); border-radius: var(--mn-radius-field); }\n.mn-header-nav { display: none; align-items: center; gap: .15rem; }\n.mn-header-nav a, .mn-header-panel a { color: var(--mn-muted); text-decoration: none; font-weight: 500; }\n.mn-header-nav a { padding: .45rem .7rem; border-radius: var(--mn-radius-field); font-size: .9375rem; transition: color var(--mn-duration) var(--mn-ease); }\n.mn-header-nav a:hover, .mn-header-nav a[aria-current=\"page\"] { color: var(--mn-fg); }\n.mn-header-nav a:focus-visible, .mn-header-panel a:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-header-center .mn-header-nav { margin-inline: auto; }\n.mn-header-actions { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }\n.mn-header-center .mn-header-actions { margin-inline-start: 0; }\n.mn-header-menu { flex: none; }\n.mn-header-menu > summary {\n  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; list-style: none; cursor: pointer;\n  border-radius: var(--mn-radius-field); color: var(--mn-fg);\n}\n.mn-header-menu > summary::-webkit-details-marker { display: none; }\n.mn-header-menu > summary:hover { background: var(--mn-hover); }\n.mn-header-menu > summary:focus-visible { outline: none; box-shadow: var(--mn-focus); }\n.mn-header-menu > summary svg { width: 1.25rem; height: 1.25rem; }\n.mn-header-menu > summary .mn-header-close, .mn-header-menu[open] > summary .mn-header-open { display: none; }\n.mn-header-menu[open] > summary .mn-header-close { display: contents; }\n.mn-header-panel {\n  position: absolute; left: 0; right: 0; top: 100%; display: grid; gap: 0;\n  padding: .5rem var(--mn-gutter) 1.5rem; max-height: calc(100dvh - 4rem); overflow: auto;\n  border-bottom: var(--mn-border-w) solid var(--mn-border); background: var(--mn-bg); box-shadow: var(--mn-shadow-lg);\n  animation: var(--mn-enter) var(--mn-enter-duration) var(--mn-ease-enter);\n}\n.mn-header-menu:not([open]) > .mn-header-panel { display: none; }\n.mn-header-panel a { padding: .9rem .25rem; border-bottom: var(--mn-border-w) solid var(--mn-border); font-size: 1.0625rem; color: var(--mn-fg); }\n.mn-header-panel .mn-btn { margin-top: 1rem; }\n@container mn-header (min-width: 54rem) {\n  .mn-header-nav { display: flex; }\n  .mn-header-menu { display: none; }\n  .mn-header-in { gap: 2rem; }\n}\n@container mn-header (max-width: 34rem) { .mn-header-actions .mn-header-wide { display: none; } }\n@container mn-header (max-width: 24rem) {\n  .mn-header-in { gap: .5rem; }\n  .mn-header-brand { gap: .4rem; font-size: .9688rem; }\n  .mn-header-brand svg { width: 1.35rem; height: 1.35rem; }\n  .mn-header-actions { gap: .25rem; }\n  .mn-header-actions .mn-btn:not(.mn-btn-icon) { padding-inline: .75em; }\n  .mn-header-menu > summary { width: 2.25rem; }\n}\n@container mn-header (max-width: 18rem) {\n  .mn-header-in { gap: .35rem; }\n  .mn-header-menu > summary { width: 2rem; }\n  .mn-header-actions .mn-btn:not(.mn-btn-icon) { padding-inline: .6em; }"
    },
    {
      "path": "mian/examples/site-header.html",
      "type": "registry:file",
      "target": "mian/examples/site-header.html",
      "content": "<!-- Header -->\n<header class=\"mn-header\">\n  <div class=\"mn-container mn-header-in\">\n    <a class=\"mn-header-brand\" href=\"#\"><svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" fill=\"currentColor\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"5\"/><path d=\"M8 7v10h8\" stroke=\"var(--mn-bg)\" stroke-width=\"2.4\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>Ledger</a>\n    <nav class=\"mn-header-nav\" aria-label=\"Main\"><a href=\"#\" aria-current=\"page\">Product</a><a href=\"#\">Customers</a><a href=\"#\">Pricing</a><a href=\"#\">Changelog</a></nav>\n    <div class=\"mn-header-actions\"><a class=\"mn-btn mn-btn-ghost mn-btn-sm mn-header-wide\" href=\"#\">Sign in</a><a class=\"mn-btn mn-btn-sm\" href=\"#\">Start free</a></div>\n    <details class=\"mn-header-menu\"><summary aria-label=\"Menu\"><span class=\"mn-header-open\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M4 7h16M4 12h16M4 17h16\"/></svg></span><span class=\"mn-header-close\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 6 6 18M6 6l12 12\"/></svg></span></summary>\n      <nav class=\"mn-header-panel\" aria-label=\"Menu\"><a href=\"#\">Product</a><a href=\"#\">Customers</a><a href=\"#\">Pricing</a><a href=\"#\">Changelog</a><a href=\"#\">Sign in</a></nav>\n    </details>\n  </div>\n</header>"
    }
  ],
  "docs": "MIAN components are HTML + CSS classes, not React components. The styles are already included in mian-base; this item adds the component's CSS section and example markup for reference. Docs: https://mian.ro/components/site-header",
  "meta": {
    "mian": {
      "license": "LicenseRef-MIAN-1.0",
      "requiresJs": false,
      "classes": [
        "mn-header",
        "mn-header-in",
        "mn-header-brand",
        "mn-header-nav",
        "mn-header-actions",
        "mn-header-menu",
        "mn-header-open · mn-header-close"
      ],
      "accessibility": [
        "Both navs need aria-label (e.g. “Main” and “Menu”). The summary needs an aria-label such as “Menu”.",
        "<details> is a native disclosure: Enter and Space open it, and screen readers announce expanded/collapsed.",
        "Keep the brand link’s accessible name (the visible name or aria-label).",
        "Layout answers to the section’s own width (container queries), so it works the same in a page, a sidebar or a preview."
      ],
      "intents": [
        "website navigation",
        "top menu",
        "logo and links",
        "mobile menu",
        "header with call to action"
      ]
    }
  }
}