Içkaridan köriş paneli

1. root.fx-peekşart
2. panel.fx-peek__panelşart
3. head.fx-peek__headixtiyoriy
4. count.fx-peek__countixtiyoriy
5. body.fx-peek__bodyixtiyoriy
6. item.fx-peek__itemşart
7. title.fx-peek__titleixtiyoriy

Panel — <aside aria-label>; oçilganda fokus sarlavhaga, yopilganda oçgan qatorga qaytadi; yopiqda inert. Oçiq qator aria-current="true". Hisoblagiç aria-live=polite.

npx foxui add peek

<div class="fx-peek" data-fx-peek style="block-size: 16rem">
  <ul class="fx-list" style="padding-inline: var(--fx-space-4)">
    <li class="fx-list__item"><button class="fx-list__link" type="button" data-peek-open="a1" style="border:0;background:none;font:inherit;text-align:start;cursor:pointer"><div class="fx-list__body"><span class="fx-list__title">Aziz Karimov</span><span class="fx-list__meta">Sayt buyurtmasi · yangi</span></div></button></li>
    <li class="fx-list__item"><button class="fx-list__link" type="button" data-peek-open="a2" style="border:0;background:none;font:inherit;text-align:start;cursor:pointer"><div class="fx-list__body"><span class="fx-list__title">Madina Yusupova</span><span class="fx-list__meta">Mobil ilova · muzokarada</span></div></button></li>
    <li class="fx-list__item"><button class="fx-list__link" type="button" data-peek-open="a3" style="border:0;background:none;font:inherit;text-align:start;cursor:pointer"><div class="fx-list__body"><span class="fx-list__title">Bobur Toş</span><span class="fx-list__meta">Dizayn tizimi · kutilmoqda</span></div></button></li>
  </ul>
  <aside class="fx-peek__panel" aria-label="Ariza tafsiloti">
    <div class="fx-peek__head">
      <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-peek="prev" aria-label="Oldingi (K)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 10l4-4 4 4" 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-peek="next" aria-label="Keyingi (J)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
      <span class="fx-peek__count" aria-live="polite"></span>
      <button class="fx-btn" data-variant="ghost" data-size="sm" data-shape="icon" data-peek="close" aria-label="Yopiş (Esc)"><svg viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
    </div>
    <div class="fx-peek__body">
      <div class="fx-peek__item" data-id="a1" hidden><h3 class="fx-peek__title" tabindex="-1">Aziz Karimov</h3><p>Korporativ sayt kerak: 8 ta sahifa, ariza formasi, CRM bilan ulaniş. Byudjet muhokamada.</p></div>
      <div class="fx-peek__item" data-id="a2" hidden><h3 class="fx-peek__title" tabindex="-1">Madina Yusupova</h3><p>iOS va Android ilova, buyurtmalarni kuzatiş. Texnik topşiriq tayyorlanmoqda.</p></div>
      <div class="fx-peek__item" data-id="a3" hidden><h3 class="fx-peek__title" tabindex="-1">Bobur Toş</h3><p>Içki dizayn tizimi: tokenlar, 30 komponent, hujjat sayti.</p></div>
    </div>
  </aside>
</div>

Tokenlar: --fx-bg-brand-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-surface --fx-border-width-default --fx-border-width-focus --fx-dialog-width --fx-ease-exit --fx-ease-sheet --fx-font-size-lg --fx-font-size-xs --fx-font-weight-semibold --fx-motion-exit-slow --fx-motion-instant --fx-motion-slower --fx-shadow-lg --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-5 --fx-text-tertiary