{
  "$schema": "../schemas/component-contract.schema.json",
  "id": "header",
  "version": "0.3.0",
  "name": "Header",
  "category": "layout",
  "appStatus": "implemented",
  "appNote": "melta-app に実装済みなのは default / actions のみ。centered / navigation は契約だけが先行している。melta-app の型は melta-app 内に生成済みの契約型（header 0.2.0）から取るため、melta-app が新しい契約で型を再生成して公開するまでは型エラーになる。再生成後も実装が入るまでは default と同じ描画になる。使う前に melta-app 側の実装を待つこと",
  "intent": "画面ヘッダー。defaultは左寄せ見出し、actionsは可視タイトルなしの操作バー、centered/navigationは中央タイトル。配置・寸法・文字組みはHeaderが所有し、画面の操作内容とnavigationは利用側が渡す。",
  "docPath": "components/header.md",
  "appFirst": true,
  "webStatus": "pending",
  "anatomy": [
    "container",
    "title",
    "leading?",
    "trailing?"
  ],
  "variants": {
    "default": {
      "description": "標準ヘッダー（bg-page・下 border・横 padding 4 / 縦 padding 3。title は Text xl bold text-heading 相当）",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-page",
        "border": "color.semantic.light.border-default",
        "paddingX": "spacing.4",
        "paddingY": "spacing.3",
        "titleColor": "color.semantic.light.text-heading"
      },
      "tailwind": ""
    },
    "actions": {
      "description": "可視タイトルなしの操作バー。titleはheadingとして読み上げ可能なまま視覚的に隠す。defaultと同じ外側余白・下線を持ち、中央spacer前後のgapはspacing.1に抑える。",
      "tokenRefs": {
        "bg": "color.semantic.light.bg-page",
        "border": "color.semantic.light.border-default",
        "paddingX": "spacing.4",
        "paddingY": "spacing.3",
        "titleColor": "color.semantic.light.text-heading",
        "gap": "spacing.1"
      },
      "tailwind": ""
    },
    "centered": {
      "description": "中央タイトル、下線・内側横余白なし。親のページ余白内に置く。 最小内容高44、左右は等幅かつ44以上を予約し、titleは1行省略。左右には44幅以下の単独アイコン操作を渡し、広い文字操作はdefault/actionsを使う。titleはText lg bold相当（長い動的タイトルはbaseへ切替可能）。タイトルのfadeは利用側が提供するwrapperで行い、文字組みと領域は置換しない。",
      "tokenRefs": {
        "titleColor": "color.semantic.light.text-heading"
      },
      "tailwind": ""
    },
    "navigation": {
      "description": "中央タイトル、左右spacing.4、下に端末のhairline。戻る／閉じる等を左右slotへ置く。 最小内容高44、左右は等幅かつ44以上を予約し、titleは1行省略。左右には44幅以下の単独アイコン操作を渡し、広い文字操作はdefault/actionsを使う。titleはText lg bold相当（長い動的タイトルはbaseへ切替可能）。タイトルのfadeは利用側が提供するwrapperで行い、文字組みと領域は置換しない。",
      "tokenRefs": {
        "titleColor": "color.semantic.light.text-heading",
        "border": "color.semantic.light.border-default",
        "paddingX": "spacing.4"
      },
      "tailwind": ""
    }
  },
  "sizes": {},
  "states": [
    "default"
  ],
  "a11y": {
    "role": "banner",
    "required": [
      "titleは空でない画面名。default/centered/navigationでは可視heading、actionsでは視覚的に隠したheading（RN: accessibilityRole=\"header\"）として読み上げる。スクロールによるタイトル切替で見えない場合は、利用側wrapperで読み上げ対象からも外す",
      "container全体を単一のaccessible要素にまとめない。leading/trailingの操作は独立してフォーカス・読み上げ・操作できる",
      "centered/navigationの左右slotに入れる操作は44pt以上の標的を持たせる。固定高でフォント拡大を切らず、最小高で確保する"
    ],
    "keyboard": [],
    "focusRing": "N/A"
  },
  "rules": []
}