1. root.fx-recordpageşart
2. head.fx-recordpage__headşart
3. top.fx-recordpage__topixtiyoriy
4. icon.fx-recordpage__iconixtiyoriy
5. titles.fx-recordpage__titlesixtiyoriy
6. type.fx-recordpage__typeixtiyoriy
7. title.fx-recordpage__titleşart
8. actions.fx-recordpage__actionsixtiyoriy
9. highlights.fx-recordpage__highlightsixtiyoriy
10. body.fx-recordpage__bodyixtiyoriy
11. main.fx-recordpage__mainixtiyoriy
12. side.fx-recordpage__sideixtiyoriy
13. panel.fx-recordpage__panelixtiyoriy
14. panel-title.fx-recordpage__panel-titleixtiyoriy

Ildiz <article aria-labelledby> sarlavhaga; tasma — <dl>; öng ustun <aside aria-label>. Içki komponentlar öz klaviaturasi bilan (fx-path — APG Tabs, fx-tabs).

Naqş: WAI-ARIA APG landmarks · rol article

npx foxui add recordpage

<article class="fx-recordpage" aria-labelledby="rp-t">
  <header class="fx-recordpage__head">
    <div class="fx-recordpage__top">
      <span class="fx-avatar fx-recordpage__icon" data-size="lg" data-color="green" role="img" aria-label="Bitim">BT</span>
      <div class="fx-recordpage__titles"><span class="fx-recordpage__type">Bitim · №214</span><h1 class="fx-recordpage__title" id="rp-t">Örikzor savdo — 40 ta kassa apparati</h1></div>
      <div class="fx-recordpage__actions"><button class="fx-btn" data-size="sm" type="button">Tahrirlaş</button><button class="fx-btn" data-size="sm" type="button">Şartnoma yuboriş</button></div>
    </div>
    <dl class="fx-recordpage__highlights">
      <div><dt>Summa</dt><dd>84 000 000 söm</dd></div>
      <div><dt>Mijoz</dt><dd>«Örikzor savdo» MChJ</dd></div>
      <div><dt>Mas'ul</dt><dd>Aziz Karimov</dd></div>
      <div><dt>Yopiliş sanasi</dt><dd>30-oktabr</dd></div>
      <div><dt>Ehtimollik</dt><dd>60 %</dd></div>
    </dl>
    <div class="fx-path" data-fx-path>
      <div class="fx-path__stages" role="tablist" aria-label="Bitim bosqiçlari">
        <button class="fx-path__stage" type="button"><span class="fx-path__label">Yangi</span></button>
        <button class="fx-path__stage" type="button"><span class="fx-path__label">Aloqa</span></button>
        <button class="fx-path__stage" type="button" aria-current="step"><span class="fx-path__label">Taklif</span></button>
        <button class="fx-path__stage" type="button"><span class="fx-path__label">Muzokara</span></button>
        <button class="fx-path__stage" type="button"><span class="fx-path__label">Yopildi</span></button>
      </div>
      <button class="fx-btn fx-path__action" data-variant="primary" data-size="sm" type="button">Bosqiçni yakunlaş</button>
    </div>
  </header>
  <div class="fx-recordpage__body">
    <div class="fx-recordpage__main">
      <section class="fx-recordpage__panel">
        <div class="fx-tabs" role="tablist" aria-label="Bitim" data-fx-tabs>
          <button class="fx-tabs__tab" role="tab" id="rp-t1" aria-controls="rp-p1" aria-selected="true">Tafsilot</button>
          <button class="fx-tabs__tab" role="tab" id="rp-t2" aria-controls="rp-p2" aria-selected="false">Mahsulotlar <span class="fx-badge" data-type="count">2</span></button>
          <button class="fx-tabs__tab" role="tab" id="rp-t3" aria-controls="rp-p3" aria-selected="false">Fayllar</button>
        </div>
        <div class="fx-tabs__panel" role="tabpanel" id="rp-p1" aria-labelledby="rp-t1" tabindex="0"><dl class="fx-dl" data-columns="2"><dt>Manba</dt><dd>Sayt formasi</dd><dt>Telefon</dt><dd>+998 90 123 45 67</dd><dt>Yaratilgan</dt><dd>02.10.2026</dd><dt>Izoh</dt><dd>Tölov 2 bosqiçda</dd></dl></div>
        <div class="fx-tabs__panel" role="tabpanel" id="rp-p2" aria-labelledby="rp-t2" tabindex="0" hidden>Kassa apparati — 40 dona; örnatiş xizmati.</div>
        <div class="fx-tabs__panel" role="tabpanel" id="rp-p3" aria-labelledby="rp-t3" tabindex="0" hidden>Tijoriy taklif.pdf</div>
      </section>
    </div>
    <aside class="fx-recordpage__side" aria-label="Faoliyat">
      <section class="fx-recordpage__panel">
        <h2 class="fx-recordpage__panel-title">Faoliyat</h2>
        <ol class="fx-timeline">
          <li class="fx-timeline__item" data-state="pending"><span class="fx-timeline__marker"></span><div class="fx-timeline__content"><p class="fx-timeline__title">Qönğiroq: narxni kelişiş</p><span class="fx-timeline__time">bugun, 15:00</span></div></li>
          <li class="fx-timeline__item"><span class="fx-timeline__marker"></span><div class="fx-timeline__content"><p class="fx-timeline__title">Taklif yuborildi</p><span class="fx-timeline__time">keça, 11:20</span></div></li>
        </ol>
      </section>
    </aside>
  </div>
</article>

Tokenlar: --fx-bg-surface --fx-border-color-default --fx-border-color-surface --fx-border-width-default --fx-font-adjust-display --fx-font-family-display --fx-font-size-md --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-popover-width --fx-radius-surface --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-text-primary --fx-text-tertiary