schema: ai-cjm-component-contract/v1
id: contact-panel
version: 2.0.0
status: stable
owner: AI CJM Design
purpose: Завершает смысловой маршрут страницы ясным следующим шагом и рабочим способом связи.
use_when:
- Страница должна завершиться обращением, заявкой или согласованием.
evidence:
- id: production-style
  url: https://aicjm.ru/edu/styles.css?v=20260811-edu-canon
  locator: .contact, .contact__copy, .lead-form
  supports:
  - anatomy
  - variant:default
  - size:default
  - state:default
- id: production-dom
  url: https://aicjm.ru/edu/
  locator: '#contact.contact'
  supports:
  - approved-example
  - content
anatomy:
- id: heading
  required: true
  role: Следующий результат для посетителя.
- id: context
  required: true
  role: Что произойдёт после обращения.
- id: form-or-link
  required: true
  role: Каноническая форма или контактный маршрут.
- id: consent
  required: true
  role: Правовое основание обработки данных.
- id: response-expectation
  required: true
  role: Срок и формат ответа.
variants:
- id: default
  status: stable
  description: Каноническая композиция v2.
  evidence_refs:
  - production-style
sizes:
- id: default
  status: stable
  description: Размер следует токенам и содержимому без локальных чисел.
  evidence_refs:
  - production-style
states:
  default:
    status: stable
    basis: observed
    description: contact-panel default is observed at the exact production locator.
    evidence_refs:
    - production-style
  hover:
    status: not-applicable
    basis: not-applicable
    description: hover is not owned by contact-panel.
  focus-visible:
    status: not-applicable
    basis: not-applicable
    description: focus-visible is not owned by contact-panel.
  active:
    status: not-applicable
    basis: not-applicable
    description: active is not owned by contact-panel.
  selected:
    status: not-applicable
    basis: not-applicable
    description: selected is not owned by contact-panel.
  open:
    status: not-applicable
    basis: not-applicable
    description: open is not owned by contact-panel.
  disabled:
    status: not-applicable
    basis: not-applicable
    description: disabled is not owned by contact-panel.
  loading:
    status: not-applicable
    basis: not-applicable
    description: loading is not owned by contact-panel.
  success:
    status: not-applicable
    basis: not-applicable
    description: success is not owned by contact-panel.
  error:
    status: not-applicable
    basis: not-applicable
    description: error is not owned by contact-panel.
  empty:
    status: not-applicable
    basis: not-applicable
    description: empty is not owned by contact-panel.
responsive:
  mode: contact-copy-and-form-to-single-column
  reading_order: 'contact-panel: DOM order remains authoritative at every viewport.'
  rules:
  - Preserve contact-panel anatomy and primary action in one reading sequence.
  - Wrap text without horizontal page overflow and preserve evidence labels.
accessibility:
  pattern: contact-conversion-region
  semantics:
  - Expose contact-panel as the nearest correct native landmark, article or control.
  keyboard:
  - Tab reaches real actions in DOM order; Enter or Space follows the native control contract.
  focus:
  - Interactive descendants use focus.ring and preserve a visible label.
  motion:
  - Reduced motion removes nonessential transitions without hiding state or evidence.
tokens:
- surface.deep
- text.on-deep
- text.on-deep-muted
- component.button.secondary.background
- component.input.background
- border.on-deep
content:
  required:
  - Следующий результат для посетителя.
  - Что произойдёт после обращения.
  - Каноническая форма или контактный маршрут.
  - Правовое основание обработки данных.
  - Срок и формат ответа.
  constraints:
  - Использовать единый рабочий lead route и точное ожидание ответа.
  - Каждый факт и asset сохраняет provenance.
do:
- Использовать единый рабочий lead route и точное ожидание ответа.
dont:
- Не создавать локальную форму без endpoint, consent и outcome.
examples:
  approved:
    status: stable
    description: Live contact-panel at the scoped production locator.
    evidence: https://aicjm.ru/edu/
  prohibited:
    description: Не создавать локальную форму без endpoint, consent и outcome.
acceptance:
- id: contact-panel-1
  criterion: Все обязательные anatomy parts присутствуют в DOM и видимы.
  method: automated-and-manual
- id: contact-panel-2
  criterion: На mobile сохраняются reading order, target size и отсутствие overflow.
  method: browser