schema: ai-cjm-component-contract/v1
id: site-header
version: 2.0.0
status: stable
owner: AI CJM Design
purpose: Даёт единый брендовый вход, основной маршрут и CTA на страницах /edu/.
use_when:
- Нужна верхняя навигация публичной страницы AI CJM.
evidence:
- id: production-style
  url: https://aicjm.ru/edu/shared/site-header.css?v=20260811-home-section-links
  locator: .site-header-shell, .site-header__nav, .site-header__menu, aicjm-site-header[data-open="true"] .site-header__nav
  supports:
  - anatomy
  - variant:desktop
  - variant:compact
  - size:default
  - state:default
  - state:open
- id: production-dom
  url: https://aicjm.ru/edu/
  locator: aicjm-site-header > .site-header-shell
  supports:
  - approved-example
  - content
anatomy:
- id: brand
  required: true
  role: Ссылка AI CJM на корневую страницу.
- id: navigation
  required: true
  role: Контейнер primary-nav.
- id: action
  required: false
  role: Главный CTA страницы.
- id: menu-toggle
  required: false
  role: Мобильное раскрытие навигации.
variants:
- id: desktop
  status: stable
  description: Brand, nav и CTA в одной строке.
  evidence_refs:
  - production-style
- id: compact
  status: stable
  description: Brand и доступный menu toggle.
  evidence_refs:
  - production-style
sizes:
- id: default
  status: stable
  description: Размер определяется содержимым и перечисленными semantic/component tokens; raw dimensions запрещены.
  evidence_refs:
  - production-style
states:
  default:
    status: stable
    basis: observed
    description: default is observed at the exact production locator in evidence_refs.
    evidence_refs:
    - production-style
  hover:
    status: not-applicable
    basis: not-applicable
    description: Hover is owned by primary-nav links and button children.
  focus-visible:
    status: not-applicable
    basis: not-applicable
    description: Focus-visible is owned by primary-nav links, CTA and menu button.
  active:
    status: not-applicable
    basis: not-applicable
    description: active is not owned by site-header.
  selected:
    status: not-applicable
    basis: not-applicable
    description: selected is not owned by site-header.
  open:
    status: stable
    basis: observed
    description: open is observed at the exact production locator in evidence_refs.
    evidence_refs:
    - production-style
  disabled:
    status: not-applicable
    basis: not-applicable
    description: disabled is not owned by site-header.
  loading:
    status: not-applicable
    basis: not-applicable
    description: loading is not owned by site-header.
  success:
    status: not-applicable
    basis: not-applicable
    description: success is not owned by site-header.
  error:
    status: not-applicable
    basis: not-applicable
    description: error is not owned by site-header.
  empty:
    status: not-applicable
    basis: not-applicable
    description: empty is not owned by site-header.
responsive:
  mode: desktop-to-compact-navigation
  breakpoint: size.breakpoint.site-shell
  reading_order: DOM order remains authoritative in every mode.
  rules:
  - Keep brand first and CTA before the compact menu in DOM order.
  - At compact mode hide desktop nav, expose menu button, and render the opened nav as one vertical list below the header.
  - Close the compact menu after route activation without changing DOM reading order.
accessibility:
  pattern: disclosure-navigation
  semantics:
  - Use header, a named nav, a button with aria-expanded and aria-controls, and ordinary links.
  keyboard:
  - Tab follows DOM order; Enter/Space toggles the compact menu; Escape closes it.
  focus:
  - Opening moves focus to the first nav link; closing or Escape returns focus to the menu button.
  motion:
  - Menu opens without required animation; reduced motion removes any transition.
tokens:
- component.header.background
- component.header.text
- component.header.border
- component.header.border-width
- component.header.brand-weight
- layout.container-max
- layout.gutter-mobile
content:
  required:
  - Знак AI CJM.
  - Ссылки текущего раздела.
  constraints:
  - Не добавлять неподтверждённые разделы.
  - Один главный CTA.
do:
- Сохранять логичный DOM-order brand → nav → action.
- Использовать один global header на всех публичных web pages; локальную документационную навигацию размещать внутри main.
- Оставлять геометрию и состояния global header в shared site-header stylesheet.
dont:
- Не превращать header в самостоятельную цветную промо-панель.
- Не переопределять `.site-header*` в CSS страницы-потребителя.
examples:
  approved:
    status: stable
    description: Компонент site-header в указанном scoped production locator.
    evidence: https://aicjm.ru/edu/
  prohibited:
    description: Не превращать header в самостоятельную цветную промо-панель.
acceptance:
- id: site-header-1
  criterion: Brand ведёт на /.
  method: manual
- id: site-header-2
  criterion: Compact nav управляется кнопкой с accessible name.
  method: manual
- id: site-header-3
  criterion: Consumer page не содержит локальных `.site-header*` selectors; header совпадает с production shared component.
  method: automated