1. root.fx-legalşart
2. head.fx-legal__headşart
3. sample (namuna ogohlantirişi).fx-legal__sampleixtiyoriy
4. title (h1).fx-legal__titleşart
5. meta (dl: sana, versiya).fx-legal__metaixtiyoriy
6. nav (fx-toc).fx-legal__navixtiyoriy
7. body.fx-legal__bodyşart
8. section.fx-legal__sectionşart
9. section heading (h2, raqamlanadi).fx-legal__hixtiyoriy
10. summary («Qisqaça»).fx-legal__summaryixtiyoriy
11. paragraph (1.1. raqamlanadi).fx-legal__pixtiyoriy
12. foot.fx-legal__footixtiyoriy

<article aria-labelledby> + h1, bölimlar <section aria-labelledby> + h2 — ekran öquvçi sarlavhalar böyiça yuradi. Mundarija <nav aria-label> (fx-toc: aria-current joriy bölimga). Raqamlar ::before'da — ekran öquvçi ham öqiydi. «Namuna matn» role="note", söz bilan (faqat rang emas). Sanalar <time datetime>.

Naqş: WAI-ARIA APG landmarks · rol article

npx foxui add legal

<article class="fx-legal" aria-labelledby="lg-t">
  <header class="fx-legal__head">
    <p class="fx-legal__sample" role="note"><strong>Namuna matn</strong><span>Bu — FoxUI şablonidagi namuna. Huquqiy kuçga ega emas: öz kompaniyangiz ma'lumotlari bilan töldiring va yurist bilan tekşiring.</span></p>
    <h1 class="fx-legal__title" id="lg-t">Maxfiylik siyosati</h1>
    <dl class="fx-legal__meta"><div><dt>Kuçga kirgan</dt><dd><time datetime="2026-11-01">1-noyabr 2026</time></dd></div><div><dt>Oxirgi yangilaniş</dt><dd><time datetime="2026-10-18">18-oktabr 2026</time></dd></div><div><dt>Versiya</dt><dd>1.2</dd></div></dl>
  </header>
  <nav class="fx-legal__nav fx-toc" aria-label="Siyosat bölimlari" data-fx-toc>
    <p class="fx-toc__title">Mundarija</p>
    <ul class="fx-toc__list">
      <li><a class="fx-toc__link" href="#lg-1">Qanday ma'lumot yiğamiz</a></li>
      <li><a class="fx-toc__link" href="#lg-2">Ma'lumotdan foydalaniş</a></li>
      <li><a class="fx-toc__link" href="#lg-3">Saqlaş muddati</a></li>
      <li><a class="fx-toc__link" href="#lg-4">Sizning huquqlaringiz</a></li>
    </ul>
  </nav>
  <div class="fx-legal__body">
    <section class="fx-legal__section" id="lg-1" aria-labelledby="lg-1h"><h2 class="fx-legal__h" id="lg-1h">Qanday ma'lumot yiğamiz</h2>
      <p class="fx-legal__summary">Faqat ariza va obuna uçun zarur bölgan ism, telefon va email.</p>
      <p class="fx-legal__p">«Namuna Kompaniya» MChJ (keyingi örinlarda — Kompaniya) saytdagi forma orqali yuborilgan ism, telefon raqami va elektron poçta manzilini qabul qiladi.</p>
      <p class="fx-legal__p">Saytdan foydalaniş statistikasi faqat siz cookie'larga rozilik bergan holda, anonim körinişda yiğiladi.</p>
    </section>
    <section class="fx-legal__section" id="lg-2" aria-labelledby="lg-2h"><h2 class="fx-legal__h" id="lg-2h">Ma'lumotdan foydalaniş</h2>
      <p class="fx-legal__summary">Sizga javob beriş va obunani yuritiş uçun. Sotmaymiz.</p>
      <p class="fx-legal__p">Ma'lumotlar arizangizga javob beriş, hisob-faktura yuboriş va xizmat haqida muhim xabarlar uçun işlatiladi.</p>
      <p class="fx-legal__p">Kompaniya şaxsiy ma'lumotlarni uçinçi şaxslarga sotmaydi va qonunda belgilangan hollardan taşqari bermaydi.</p>
    </section>
    <section class="fx-legal__section" id="lg-3" aria-labelledby="lg-3h"><h2 class="fx-legal__h" id="lg-3h">Saqlaş muddati</h2>
      <p class="fx-legal__summary">Obuna davomida va undan keyin 3 yil.</p>
      <p class="fx-legal__p">Ma'lumotlar Özbekiston Respublikasi hududidagi serverlarda saqlanadi.</p>
    </section>
    <section class="fx-legal__section" id="lg-4" aria-labelledby="lg-4h"><h2 class="fx-legal__h" id="lg-4h">Sizning huquqlaringiz</h2>
      <p class="fx-legal__summary">Istalgan vaqtda köriş, tuzatiş yoki öçirişni söraşingiz mumkin.</p>
      <p class="fx-legal__p">Sörovni <a href="mailto:[email protected]">[email protected]</a> manziliga yuboring — 10 iş kuni içida javob beriladi.</p>
    </section>
    <footer class="fx-legal__foot"><span>Savollar: <a href="mailto:[email protected]">[email protected]</a></span><a href="#">Oldingi versiyalar</a></footer>
  </div>
</article>

Tokenlar: --fx-bg-subtle --fx-bg-surface --fx-bg-warning-subtle --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-fg-warning --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-sm --fx-font-size-md --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-semibold --fx-line-height-normal --fx-line-height-relaxed --fx-line-height-snug --fx-line-height-tight --fx-radius-badge --fx-radius-control --fx-size-topbar --fx-space-1 --fx-space-12 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary