Izohlar ipi

1. root.fx-commentsşart
2. list.fx-comments__listixtiyoriy
3. comment.fx-commentşart
4. main.fx-comment__mainixtiyoriy
5. head.fx-comment__headixtiyoriy
6. author.fx-comment__authorşart
7. badge.fx-comment__badgeixtiyoriy
8. body.fx-comment__bodyşart
9. actions.fx-comment__actionsixtiyoriy
10. action.fx-comment__actionixtiyoriy
11. form.fx-comment__formixtiyoriy
12. replies.fx-comment__repliesixtiyoriy

Röyxat ol/li; vaqt <time datetime>; hal qiliş aria-pressed + «Hal qilingan» yozuvi (rangga tayanmaydi); forma maydonida aria-label, Esc yopadi.

npx foxui add comments

<section class="fx-comments" data-fx-comments data-me="Siz" aria-label="Izohlar" style="max-inline-size: 36rem">
  <ol class="fx-comments__list">
    <li class="fx-comment" id="c1">
      <span class="fx-avatar" data-size="sm" data-color="coral" role="img" aria-label="Dilnoza Karimova">DK</span>
      <div class="fx-comment__main">
        <header class="fx-comment__head"><b class="fx-comment__author">Dilnoza Karimova</b><time class="fx-comment__time" datetime="2026-10-17T09:12">2 soat oldin</time><span class="fx-comment__badge" hidden>Hal qilingan</span></header>
        <div class="fx-comment__body"><p>Narxlar jadvalidagi çegirma ustuni 3-qatorda körinmayapti, tekşirib körsangiz.</p></div>
        <div class="fx-comment__actions">
          <button class="fx-comment__action" type="button" data-action="reply">Javob</button>
          <button class="fx-comment__action" type="button" data-action="resolve" aria-pressed="false">Hal qiliş</button>
        </div>
      </div>
      <ol class="fx-comment__replies">
        <li class="fx-comment" id="c1-r1" data-reply data-own>
          <span class="fx-avatar" data-size="sm" data-color="green" role="img" aria-label="Siz">SI</span>
          <div class="fx-comment__main">
            <header class="fx-comment__head"><b class="fx-comment__author">Siz</b><time class="fx-comment__time" datetime="2026-10-17T09:40">1 soat oldin</time></header>
            <div class="fx-comment__body"><p>Ha, ustun yaşirin edi. Hozir tuzataman.</p></div>
            <div class="fx-comment__actions">
              <button class="fx-comment__action" type="button" data-action="reply">Javob</button>
              <button class="fx-comment__action" type="button" data-action="edit">Tahrirlaş</button>
            </div>
          </div>
        </li>
      </ol>
    </li>
    <li class="fx-comment" id="c2">
      <span class="fx-avatar" data-size="sm" data-color="purple" role="img" aria-label="Jasur Aliyev">JA</span>
      <div class="fx-comment__main">
        <header class="fx-comment__head"><b class="fx-comment__author">Jasur Aliyev</b><time class="fx-comment__time" datetime="2026-10-16T17:05">keça</time><span class="fx-comment__badge" hidden>Hal qilingan</span></header>
        <div class="fx-comment__body"><p>Logotip yuqori çapda biroz kiçik.</p></div>
        <div class="fx-comment__actions">
          <button class="fx-comment__action" type="button" data-action="reply">Javob</button>
          <button class="fx-comment__action" type="button" data-action="resolve" aria-pressed="false">Hal qiliş</button>
        </div>
      </div>
    </li>
  </ol>
</section>

Tokenlar: --fx-bg-muted --fx-bg-pressed --fx-bg-success-subtle --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-fg-success --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-fast --fx-radius-badge --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-6 --fx-text-primary --fx-text-secondary --fx-text-tertiary