Kiruvçilar

1. root.fx-inboxşart
2. group.fx-inbox__groupixtiyoriy
3. day.fx-inbox__dayixtiyoriy
4. item.fx-inbox__itemşart
5. dot.fx-inbox__dotixtiyoriy
6. body.fx-inbox__bodyşart
7. text.fx-inbox__textixtiyoriy
8. sub.fx-inbox__subixtiyoriy
9. time.fx-inbox__timeixtiyoriy
10. actions.fx-inbox__actionsixtiyoriy
11. empty.fx-inbox__emptyixtiyoriy

Har qator <li>; öqilmagan nuqtada .fx-sr-only «Yangi»; amal tugmalarida aria-label, «öqildi» tugmasi aria-pressed; kun sarlavhasi <h3>, guruh aria-labelledby. Qator yöqolganda fokus qöşni qatorga ötadi.

npx foxui add inbox

<div class="fx-inbox" data-fx-inbox>
  <section class="fx-inbox__group" aria-labelledby="ib-d1"><h3 class="fx-inbox__day" id="ib-d1">Bugun</h3>
    <ul class="fx-inbox__list">
      <li class="fx-inbox__item" data-unread data-kind="mention">
        <span class="fx-inbox__dot"><span class="fx-sr-only">Yangi</span></span>
        <span class="fx-avatar" data-size="sm" data-color="purple" role="img" aria-label="Aziz">AZ</span>
        <a class="fx-inbox__body" href="#"><span class="fx-inbox__text"><strong>Aziz</strong> sizni «Tarif narxlari» vazifasida eslatdi</span><span class="fx-inbox__sub">Savdo · 12 daqiqa oldin</span></a>
        <div class="fx-inbox__aside"><time class="fx-inbox__time">12 daq</time><div class="fx-inbox__actions">
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="read" aria-label="Öqilgan deb belgilaş" aria-pressed="false" title="Öqildi (U)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="snooze" aria-label="Keyinga qoldiriş" title="Keyinga (H)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5V8l3 2M8 14a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="archive" aria-label="Arxivlaş" title="Arxiv (E)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 4.5h11v2h-11zM3.5 6.5v6h9v-6M6.5 9h3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
        </div></div>
      </li>
      <li class="fx-inbox__item" data-unread data-kind="all">
        <span class="fx-inbox__dot"><span class="fx-sr-only">Yangi</span></span>
        <span class="fx-avatar" data-size="sm" data-color="green" role="img" aria-label="Madina">MA</span>
        <a class="fx-inbox__body" href="#"><span class="fx-inbox__text"><strong>Madina</strong> arizani «Qabul qilindi»ga ötkazdi</span><span class="fx-inbox__sub">Arizalar · #1042</span></a>
        <div class="fx-inbox__aside"><time class="fx-inbox__time">1 soat</time><div class="fx-inbox__actions">
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="read" aria-label="Öqilgan deb belgilaş" aria-pressed="false" title="Öqildi (U)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="snooze" aria-label="Keyinga qoldiriş" title="Keyinga (H)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5V8l3 2M8 14a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="archive" aria-label="Arxivlaş" title="Arxiv (E)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 4.5h11v2h-11zM3.5 6.5v6h9v-6M6.5 9h3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
        </div></div>
      </li>
    </ul></section>
  <section class="fx-inbox__group" aria-labelledby="ib-d2"><h3 class="fx-inbox__day" id="ib-d2">Keça</h3>
    <ul class="fx-inbox__list">
      <li class="fx-inbox__item" data-kind="all">
        <span class="fx-inbox__dot"></span>
        <span class="fx-avatar" data-size="sm" data-color="coral" role="img" aria-label="Bobur">BO</span>
        <a class="fx-inbox__body" href="#"><span class="fx-inbox__text"><strong>Bobur</strong> tölov hisobini yubordi</span><span class="fx-inbox__sub">Moliya · hisob #318</span></a>
        <div class="fx-inbox__aside"><time class="fx-inbox__time">Keça</time><div class="fx-inbox__actions">
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="read" aria-label="Öqilgan deb belgilaş" aria-pressed="false" title="Öqildi (U)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8.5 6.5 12 13 4.5" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="snooze" aria-label="Keyinga qoldiriş" title="Keyinga (H)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3.5V8l3 2M8 14a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
          <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-inbox="archive" aria-label="Arxivlaş" title="Arxiv (E)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 4.5h11v2h-11zM3.5 6.5v6h9v-6M6.5 9h3" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
        </div></div>
      </li>
    </ul></section>
  <p class="fx-inbox__empty" hidden>Hammasi körib çiqildi — yangi narsa yöq.</p>
</div>

Tokenlar: --fx-bg-brand-solid --fx-bg-muted --fx-bg-subtle --fx-border-color-default --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-control-h-sm --fx-ease-exit --fx-ease-standard --fx-font-size-sm --fx-font-size-xs --fx-font-weight-medium --fx-font-weight-semibold --fx-motion-exit-fast --fx-motion-fast --fx-motion-shift-md --fx-radius-badge --fx-radius-circle --fx-radius-nav --fx-size-status-dot --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-8 --fx-text-primary --fx-text-secondary --fx-text-tertiary