# FoxUI

> Brenddan mustaqil web dizayn tizimi: CSS tokenlari, komponentlar, CLI va MCP server. Versiya 0.99.3.

UI yozişdan oldin: mavjud komponentni oling, öylab topmang. Rang, yoy, oraliq — faqat --fx-* tokenlari. Yozgandan keyin: `npx foxui check` yoki MCP `validate_snippet`.

## Vazifa böyiça

- [Design system (markdown)](https://foxui.dev/design-system/index.md): komponentlar, misollar, qoidalar
- [Nima yangi](https://foxui.dev/whats-new/): versiyalar
- [Katalog](https://foxui.dev/r/index.json): shadcn-mos registry

## Komponentlar

- [Akkordeon](https://foxui.dev/r/accordion.json): Yiğiladigan bölimlar: native <details>; bir xil name bilan bittasi oçiq qoladi. Strelka (chevron) yopiqda −90°, oçiqda 0°. Kengaytma: data-variant=bordered|separated|fluş, data-chevron=start, .fx-accordion__icon/.fx-accordion__meta, içma-iç, data-focus=inset, bosmada hammasi oçiq.
- [Nişon kartasi](https://foxui.dev/r/achievement.json): Yutuq nişoni: belgi (emoji yoki ikon) + nom + sabab. Oçilgan — töliq rang, yaxlit çegara; yopiq (data-state="locked") — belgi kulrang, uzuq çegara, ostida progress çiziği va «3/5» hisob; yangi oçilgan (data-state="new") — brend halqasi va «Yangi» yorliği. Qoida: yopiq nişonlardan faqat eng yaqin 3 tasi körsatiladi — «uyum» emas. Röyxat — .fx-achievements töri. Manbaa'dan (③, Fox MB topşirdi, 20.10): köriniş — FoxUI, hisob va ma'lumot — loyihada.
- [Ogohlantiriş](https://foxui.dev/r/alert.json): Bölim yoki sahifadagi muhim xabar: töla tusli yuza, holat belgisi (şakl), sarlavha, matn, bitta havola, ixtiyoriy yopiş. Ohanglar: neytral, info, success, warning, error, brand. Kengaytma: .fx-alert__icon (ikon slot — şakl-belgi örniga ikon).
- [Sarlavha havolasi](https://foxui.dev/r/anchor-heading.json): Hujjat sarlavhasi yonida «#» havolasi: ustiga kelganda yoki fokusda çiqadi, bosilsa şu bölimga manzil. Sensorli qurilmada doim körinadi. Sarlavhaga scroll-margin beriladi — qotib turgan panel ostida qolmaydi.
- [API kalitlari](https://foxui.dev/r/apikeys.json): API kalitlari boşqaruvi (naqş): «Yangi kalit» dialogi (nom, muddat, ruxsat) → kalit BIR MARTA körsatiladi (nusxalaş tugmasi va ogohlantiriş bilan) → röyxatda faqat prefiks qoladi. Har kalit: ruxsat, yaratilgan sana, oxirgi işlatilgan vaqt, muddat (tugaşiga oz qolsa «!»), «Bekor qiliş» (fxConfirm bilan).
- [Tasdiqlaş sörovi (ruxsat / rad)](https://foxui.dev/r/approval.json): Agent xavfli yoki qaytarib bölmaydigan amaldan oldin ruxsat söraydi: savol, nima özgarişi (tafsilot) va Ruxsat beriş / Rad etiş / Har doim ruxsat. Qaror tugmalarni natija satriga (ikon + söz) almaştiradi va fx-approval hodisasini çiqaradi.
- [Maqola sahifasi](https://foxui.dev/r/article.json): Blog maqolasi sahifasi (4.178): tepada ortga havola va toifa, sarlavha, lid, muallif qatori (avatar, ism, sana, öqiş vaqti) va muqova; ostida uç ustun — çapda yopişqoq ulaşiş tugmalari (Telegram, Facebook, X, havolani nusxalaş — data-fx-copy), markazda matn (fx-prose, 68 belgi kenglik), öngda mundarija (fx-toc — öqilayotgan bölimni belgilaydi). Oxirida teglar, muallif kartasi va «Öxşaş maqolalar» (fx-blog kartalari). Ixtiyoriy tepada öqiş çiziği — fx-scroll-progress. Tor ekranda mundarija matn tepasida yiğiladigan blok, ulaşiş — matn ostida qator; çop etişda faqat matn qoladi.
- [AI yordamçi (widget)](https://foxui.dev/r/assistant.json): Saytlar uçun AI yordamçi: öng pastda dumaloq tugma (çat ikonkasi yoki ixtiyoriy personaj) → suhbat oynasi. Admin, kabinet, login va checkout sahifalarida çiqmaydi (data-exclude bilan özgartiriladi); salom va tayyor savollar til böyiça (data-greeting-ru, data-suggestions-ru). Har sayt faqat sozlama beradi — nom, rang, endpoint, til (uz/ru/en), salom matni, tayyor savollar, menejer kanallari. Javob kelmasa — qayta uriniş; endpoint handoff qaytarsa (byudjet tugagan yoki odam kerak) — «menejer bilan boğlaning» kartasi. Personaj: tinç «nafas», bir martalik qöl silkitiş; jonli inline SVG personaj bölsa, unga holat sinfi qöyiladi: salom, oylayapti, gapiryapti, uzatyapti (Lottie şart emas). Telefonda suhbat pastdan çiqadigan varaq (72 % balandlik, yozişda 92 %), uzun javob ~7 qatordan keyin yiğiladi («Davomi»), salom pufakçasi 2 qatordan oşmaydi va 10 s da özi yöqoladi. Personaj berilmasa yuz — ovoz şari (fx-orb); eski çat ikonkasi — data-face="icon". Panel foni va matni saytnikidan olinadi: CSS'da --assistant-surface / --assistant-text yoki data-surface / data-text (masalan var(--c-bg)); bölmasa saytdagi --surface/--bg, söng FoxUI. Mustaqil widget'da panel uslubi (assistant-panel.css) birinçi oçilişda yuklanadi. Panel (19.10 redizayni): yoziş maydoni va yuboriş — bitta karta; javob — pufaksiz toza matn (qalin, röyxat, havola), ostida nusxa; boşida tanişuv (şar, salom, savol namunalari röyxati); kutiş — «Öylayapman» ustida yoruğlik; «Yangi suhbat».
- [Biriktirma](https://foxui.dev/r/attachment.json): Fayl yoki rasm kartoçkasi: belgi (tur) yoki rasm, nom, hajm, olib taşlaş ×, yuklaniş çiziği. Composer içida ixçam (chip), xabar içida katta (card). Holatlar: yuklanmoqda, tayyor, xato (söz bilan).
- [Audio pleyer](https://foxui.dev/r/audioplayer.json): Ixçam audio pleyer: ijro tugmasi, sarlavha, tölqinsimon progress (bosib yoki ← → bilan suriladi), vaqt va tezlik (1× · 1,5× · 2×). Çiziqlar balandligi `data-peaks` dan yoki sarlavhadan hosil böladi. Bir vaqtda faqat bitta pleyer yangraydi. Ovozli xabar, podkast qismi, qönğiroq yozuvi uçun.
- [Audit jurnali](https://foxui.dev/r/auditlog.json): Xavfsizlik va boşqaruv jurnali (4.191): «kim · nima · qaçon · qayerdan». Tepada sarlavha, saqlaş muddati va «Eksport (CSV)»; filtr qatori (qidiruv, foydalanuvçi, amal turi, davr); fx-table asosidagi jadval kunlar böyiça guruhlangan (.fx-auditlog__day). Har qator: vaqt (mono, aniq soniyagaça), aktor (fx-persona yoki «Tizim»), amal (fe'l + obyekt havolasi), IP va joy, muhimlik — data-severity: info, warning (▲ Diqqat), critical (■ Xavfli — qator foni ham). Tafsilot <details> içida: maydon özgarişlari farqi (− oldin, + keyin). Yozuvlar faqat öqiladi — tahrirlaş/öçiriş yöq. Tor ekranda IP ustuni yaşirinadi.
- [Kiriş sahifasi](https://foxui.dev/r/auth.json): Kiriş / röyxatdan ötiş sahifasi qolipi: markazda karta yoki çapda forma + öngda brend paneli (split). Tayyor «havola yuborildi» (magic link) holati — email körsatiladi, «Qayta yuboriş» 30 soniya sanaladi. Ijtimoiy kiriş va «yoki» ajratgiçi bor. Bosqiçlar (4.109): data-step="verify|forgot|reset|done" — SMS/email kodini kiritiş (fx-otp, tölsa özi yuboradi), parolni tiklaş havolasi, yangi parol (talablar röyxati ✓ bilan, takror tekşiruvi) va «Tayyor» — mavjud markaziy/split qolipda.
- [Avatar](https://foxui.dev/r/avatar.json): Kvadrat avatar: ikki harf yoki surat, 6 toifa rangi, 3 ölçam (sm 22 · md 36 · lg 56), ixtiyoriy holat nuqtasi (active — puls, waiting, stopped, idle). Yoy = ölçam × 0,28. Guruh: .fx-avatar-group (ustma-ust, kesim yuza rangida), oxirida data-more bilan «+N». Kengaytma: xs · xl · 2xl ölçam; guruh hoverda yoyiladi (data-spread), tör (data-layout=grid), data-max; “+N” — <button>; surat zanjiri (img + onerror yaşiriş → .fx-avatar__fallback initsial/ikon); .fx-avatar__badge (✓/logotip); data-editable + .fx-avatar__edit.
- [Orqaga havolasi](https://foxui.dev/r/back-link.json): Ota sahifaga qaytiş havolasi (#89): chevron + qisqa nom. Brauzerning «orqaga»si emas — doim aniq ota sahifaga. RTL'da chevron oğadi.
- [Yuqoriga qaytiş](https://foxui.dev/r/backtotop.json): Uzun sahifa yoki panelda bir ekrandan köp aylantirilgaç pastki burçakda çiqadigan tugma (4.151). Bosilsa boşiga qaytaradi (harakat kamaytirilsa — darhol) va fokusni sahifa boşidagi nişonga ötkazadi — klaviatura foydalanuvçisi pastda qolib ketmaydi. Yaşirin holatda inert. Variantlar: faqat ikon (standart) yoki yozuvli; joylaşuv end · start · center · inline · sticky (içki panel); data-progress — atrofida öqilgan qism halqasi.
- [Belgi (badge)](https://foxui.dev/r/badge.json): Holat yoki toifa yorliği. Ohanglar: standart, info, brand, success, warning, error; köriniş: yengil (standart), solid, outline; ölçam sm/lg; ikonli; nuqtali (data-marker="dot") va son (data-type="count").
- [Banner](https://foxui.dev/r/banner.json): Butun kenglikdagi sayt e'loni (texnik işlar, obuna tugadi): holat belgisi (şakl), qisqa matn, bitta havola, yopiş. Yopilgani eslab qolinadi (data-fx-banner="kalit"). Tonlar: neytral, info, warning, error, brand.
- [Ustunli röyxat](https://foxui.dev/r/barlist.json): Har satrda nom, uluş çiziği va qiymat: eng köp trafik manbalari, şaharlar, mahsulotlar. Çiziq nom ortida (standart) yoki nom ostida ingiçka (track). Qiymat har doim matn bilan; uluş CSS özgaruvçisida (--fx-barlist-value) (#60).
- [Boğlovçi nur](https://foxui.dev/r/beam.json): Integratsiya va ma'lumot oqimi sxemasi (4.70): tugunlar (logo yoki ikon) orasida yumşoq egri çiziq, ustidan yuguruvçi nur yönalişni körsatadi. Boğlanişlar bitta atributda: data-links="sayt>crm, bot>crm, crm>1c" (`<` — teskari yönaliş). Çiziqlarni foxui.js çizadi va ölçam özgarsa qayta hisoblaydi; oxirida kiçik strelka — harakatsiz rejimda ham yönaliş körinadi. Joylaşuv: 3 ustun (manbalar · markaz · natija) yoki data-layout="row".
- [Bento tör](https://foxui.dev/r/bento.json): Landing xususiyatlarini turli ölçamdagi kataklar mozaikasida körsatiş (4.72): data-span bilan 2×1, 1×2, 2×2 va 3×1 kataklar, böş joylar avtomatik töldiriladi (dense). Har katak — ixtiyoriy ikon, sarlavha, qisqa matn va çetigaça çiqadigan media (illyustratsiya yoki mini UI). Butun katak havola bölişi mumkin (.fx-bento__link) — hover'da media biroz kattalaşadi. Telefonda bitta ustun. Effektlar qatlami bilan (data-fx="spotlight") kursor ortidan nur.
- [Fon: naqş va effektlar](https://foxui.dev/r/bg.json): Hero, böş holat va CTA bloklari orqasidagi bezak fon (4.61): nuqtalar, katak yoki qiya çiziqlar — faqat CSS gradient va mask, rasm faylisiz. Çetga qarab yumşoq sönadi (data-fade: markaz — standart, tepa, past, yöq), data-glow bilan tepadan mavzu rangidagi yumşoq nur qöşiladi. Rang matn rangidan aralaştiriladi — yoruğ va qoronği rejimda, har mavzuda özi moslaşadi. Ota blok position: relative boʻlishi kifoya: fon butun maydonni egallaydi, bosilmaydi va matn ostida qoladi. 5-toʻlqin — fon effektlari: don teksturasi (data-texture="noise", 4.62), avrora — mavzu ranglaridan sekin oqadigan doğlar (data-fx="aurora", 4.63), retro perspektiv tör (data-fx="retro-grid", 4.64), meteorlar (data-fx="meteors", 4.65), tepadan tuşuvçi nur (data-fx="rays", 4.67), miltillovçi tör — canvas, data-interactive bilan kursor yonida yonadi (data-fx="flicker", 4.68) va markazdan tarqaluvçi halqalar (data-fx="ripple", 4.69). Harakatli effektlar foxui.js (data-fx-bg) bilan faqat körinişda harakatlanadi; JS yöq, harakat kamaytirilgan yoki data-fx-motion="calm|none" — statik kadr.
- [Tarif va hisob-kitob](https://foxui.dev/r/billing.json): Tarif va hisob-kitob sahifasi (naqş): joriy reja (narx sömda, keyingi tölov sanasi, avtomatik uzaytiriş), foydalaniş meter'lari (çegara yaqin — ogohlantiriş), tölov usuli (karta turi, •••• 4417, muddat) va hisob-fakturalar jadvali (PDF). SaaS sozlamalari uçun — FoxUI obunasining özi ham şu naqşda.
- [Bleed (manfiy çet)](https://foxui.dev/r/bleed.json): Içki elementni ota konteyner içki çetidan (padding) çiqarib, töliq enga yoyadi (4.19): karta içidagi jadval, rasm, ajratuvçi. .fx-card va .fx-container içida çet miqdori özi aniqlanadi; boşqa joyda data-space (ota içki çeti) bilan. Tomon: inline (standart) · top / bottom (rasm karta tepasida yoki pastida, yoyi kartaga mos) · all · start · end · viewport (ekran enigaça).
- [Blog röyxati](https://foxui.dev/r/blog.json): Blog boş sahifasi yoki bölimi (4.178): sarlavha, toifa filtri (fx-chip), ixtiyoriy «Tanlangan» katta maqola (data-featured — töliq kenglikda, rasm yonida), kartalar töri va sahifalaş (fx-pagination). Har karta: muqova (rasm yoki pastel fon), toifa havolasi, sarlavha (havola butun kartani bosiladigan qiladi — toifa havolasi ustida qoladi), 3 qatorgaça qisqartirilgan matn, muallif, sana va öqiş vaqti. data-layout: grid (standart) yoki list (rasm çapda — arxiv va qidiruv sahifasi). Maqolaning özi — fx-article.
- [Doska (kanban)](https://foxui.dev/r/board.json): Holat ustunlari va kartalar. Karta siçqonça bilan yoki klaviaturada sudraladi (Space — kötariş, strelkalar — suriş, Space — qöyiş, Esc — bekor). WIP çegarasi oşsa — ogohlantiriş; ustun yiğiladi (tor vertikal). Har köçişda fx-board-move hodisasi.
- [Yöl satri](https://foxui.dev/r/breadcrumbs.json): Breadcrumbs: ota bölimlar xira havola, joriy sahifa asosiy rangda (aria-current), ajratgiç «/». Uzun oxirgi nom «…» bilan. Ortiqça bölimlar «…» tugmasi ostidagi menyuda (2.100); ota bölimni almaştirgiç — tugma + menyu (2.101).
- [Ommaviy panel](https://foxui.dev/r/bulkbar.json): Tanlov bölsa pastda markazda suzib çiqadigan panel: son, summa (ixtiyoriy), amallar, ×. Esc tanlovni bekor qiladi.
- [Portlaş va konfetti](https://foxui.dev/r/burst.json): Yoqtiriş va muvaffaqiyat uçun qisqa, bir martalik quvonç effektlari (Magic UI Confetti, Twitter «yoqdi»). data-fx-burst — tugma yoqilganda (aria-pressed="true") ikon atrofida halqa va 8 ta rangli nuqta tarqaladi, ikon prujina bilan sakraydi; öçirilganda — jim. data-toggle — tugma holatni özi almaştiradi va içidagi [data-count] ni ±1 qiladi; reactbar kabi guruhga qöyilsa — guruh xulqi holatni almaştiradi, portlaş natijaga qaraydi. data-fx-burst="confetti" — bosilganda tugmadan konfetti otiladi. Global: fxConfetti({ origin, count }) — masalan tölov muvaffaqiyatli bölganda. Ranglar — toifa ranglaridan. Harakat kamaytirilsa, calm yoki none rejimda heç narsa uçmaydi — holat baribir aria-pressed'da.
- [Tugma](https://foxui.dev/r/button.json): Amal tugmasi. Variantlar: primary (bölimda bitta), secondary, ghost, danger, link. Faqat ikonka (data-shape="icon" + aria-label), töliq en, bosilgan holat (aria-pressed), yuklaniş (aria-busy — matn joyida qoladi, ustida aylana). Qöşimça: xs/xl ölçam, tonal, outline, danger-ghost/outline variantlari; guruh (fx-btn-group) va split; menyu chevron (fx-btn__chev); ikon almaşinuvi (fx-btn__on/off); matn bilan yuklaniş (data-loading="text"); içki halqa (data-focus="inset"). Holatli tugma (data-state="success|error"): yuklanişdan keyin qisqa ✓ yoki ✕ belgisi (data-state-label bilan söz ham), ~1,6 s dan keyin özi asl körinişga qaytadi; xatoda yengil silkiniş.
- [Kalendar](https://foxui.dev/r/calendar.json): Oy töri: kun tanlaş, oraliq (2 oy yonma-yon), oy va yil körinişi. Hafta Duşanbadan, oy va kun nomlari özbekça. Bugun — halqa, tanlangan — töldirilgan, öçirilgan kun — çizilgan, oraliq — tasma. APG sana töri klaviaturasi; xulq foxui.js'da çizadi. Içida fx-datepicker va fx-daterange işlatiladi. Bir neçta sana (4.99): data-mode="multiple" — dam oliş kunlari, smenalar: har kun bosilganda qöşiladi yoki olinadi, pastda «N kun tanlandi». Hafta raqamlari (4.98): data-weeknums — çapda ISO hafta raqami (sprint, iş rejasi). Yil va ön yillik (4.100): data-mode="year" — faqat yil tanlanadi (qiymat «2026»); data-level="decade|year|month" — boşlanğiç köriniş: tuğilgan sanani ön yilliklardan (1990–1999) → yil → oy → kun tez tanlaş. Yillar sarlavhasi bosilsa — ön yilliklar (120 yil).
- [Callout](https://foxui.dev/r/callout.json): Hujjat içidagi eslatma: alert'dan yengilroq — yengil tus, çap çiziq, sarlavha sözi + şakl. Turlar: note, tip, important, warning, caution.
- [AI artefakt paneli](https://foxui.dev/r/canvas.json): Suhbat yonidagi AI yaratgan hujjat, kod yoki sahifa paneli (4.203, Vercel AI Elements «Artifact», Claude Artifacts, ChatGPT Canvas). Sarlavha qatori: tur belgisi, nom va meta («2 daqiqa oldin»), versiyalar («‹ v2 / 2 ›» — har tahrir yangi versiya), Köriniş ↔ Kod yorliqlari (role="tab"), nusxalaş, töliq ekran va yopiş. Tana: har versiya .fx-canvas__version — içida natija (.fx-canvas__preview) va manba (.fx-canvas__code). data-state="streaming" — AI hali yozmoqda: tepada yuguruvçi çiziq va «Yozilmoqda…». Xulq (data-fx-canvas): yorliqlar ← → bilan, versiyalar va natija jonli hududda aytiladi, töliq ekrandan Esc bilan çiqiladi, yopilsa fokus oçuvçi tugmaga ([data-canvas-open="id"], aria-expanded) qaytadi. Hodisalar: fx-canvas-view, fx-canvas-version, fx-canvas-close; API: el.fxCanvas.add(versiya), .open(), .close(). Suhbat bilan yonma-yon — fx-split yoki ikki ustunli grid.
- [Captcha ramkasi](https://foxui.dev/r/captcha.json): «Men robot emasman» (4.110, #27): uçinçi tomon captcha'si (Cloudflare Turnstile, reCAPTCHA, hCaptcha yoki öz serveringiz) uçun FoxUI ramkasi — forma içida begona körinmaydi, holatlar hamma provayderda bir xil: böş → «Tekşirilmoqda…» (halqa) → ✓ «Tasdiqlandi» / ! xato / ⟳ «Muddati tugadi». Belgi bosilganda «fx-captcha-verify» hodisasi çiqadi — integratsiya vidjetni .fx-captcha__slot'ga çaqiradi va natijani done(token) yoki fail(matn) bilan qaytaradi. Token yaşirin inputda; tasdiqsiz forma yuborilmaydi. data-expires — tokenning amal muddati (soniya). data-mode="invisible" — körinmas tekşiruv uçun faqat xabar qatori.
- [Karta](https://foxui.dev/r/card.json): Yuza: içki çet 20, içidagi oraliq 16. Bir qatordagi kartalar böyi teng (WDS r181). Anatomiya: sarlavha qatori (+amal), media, tana, pastki qator, amallar. Variantlar: gorizontal, ixçam, tanlanadigan (içida belgilaş katagi). Kengaytma: data-stretched + .fx-card__link (butun karta havola), aria-pressed (tanlanadigan), data-variant=outline|filled|ghost, <details class=fx-card> + .fx-card__summary, aria-busy, data-flush (jadval kartasi), .fx-card__well.
- [Kartalar dastasi](https://foxui.dev/r/cardstack.json): Ustma-ust turgan kartalar (4.80): oldingisi töliq, orqadagilari biroz yuqorida va kiçikroq — «yana bor» hissi. Avtomatik (data-autoplay, ms) yoki tugmalar va ← → bilan almaşadi; oldingi karta pastga sirpanib ketadi. Mijozlar fikri, yangilik va e'lonlar uçun. Avtomatik almaşiş faqat körinişda, siçqonça yoki fokus ustida töxtaydi, harakat kamaytirilganda öçadi.
- [Karyera sahifasi](https://foxui.dev/r/careers.json): Marketing saytining «Karyera / Vakansiyalar» sahifasi (4.177): sarlavha, afzalliklar töri (nega biz bilan işlaş), bölim filtri (fx-chip, aria-pressed — saralaşni ilova qiladi) va bölimlar böyiça guruhlangan vakansiyalar röyxati. Har qator — lavozim (havola butun qatorni bosiladigan qiladi), şahar, iş turi, tajriba va maoş oraliği; yangi vakansiya data-new bilan «Yangi» belgisini oladi. Oçiq vakansiya yöq bölsa — .fx-careers__empty (rezyume yuboriş taklifi). data-variant: list (standart) yoki cards.
- [Karusel](https://foxui.dev/r/carousel.json): Slaydlar karuseli (APG carousel): scroll-snap — barmoq bilan suriş brauzerning özida; oldingi/keyingi tugmalar, nuqtalar (tab), ixtiyoriy avto-öynatiş (data-autoplay, siçqonça/fokus ustida pauza, «Pauza» tugmasi). Kamaytirilgan harakatda avto-öynatiş yöq. Kiçik rasmlar navigatsiyasi (4.159): .fx-carousel__thumbs — nuqtalar örnida pastdagi rasmlar qatori (mahsulot sahifasi), joriysi çegara bilan. M3 turlari (4.160, data-layout): multi — bir vaqtda bir neçta slayd (katta + kiçik), hero — bitta katta slayd va yonida tor köriniş, full — çetdan çetga (ekran eni); çekkaga yaqinlaşgan slayd torayadi (scroll-driven, harakat kamaytirilsa — öçadi).
- [Kaskad tanlov](https://foxui.dev/r/cascader.json): Içma-iç tanlov (viloyat → tuman → mahalla): tugma bosilsa ustunlar ketma-ket yonma-yon oçiladi, oxirgi bandni tanlaş butun yölni (“Samarqand / Urgut”) yozadi. Menyu naqşi: ↓ ↑ band, → içkariga, ← orqaga, Esc yopadi. Hodisa `fx-cascader-change`.
- [Changelog lentasi](https://foxui.dev/r/changelogfeed.json): «Nima yangi» sahifasi (4.179) — har mijoz saytiga: versiyalar lentasi. Har yozuv — çapda versiya va sana (keng ekranda scroll'da yopişib turadi), öngda sarlavha (doimiy havola — #id), qisqa xulosa, ixtiyoriy rasm va özgarişlar röyxati. Har özgariş turi söz va belgi bilan, faqat rang emas: data-type="new" (Yangi, +), "improved" (Yaxşilandi, ↑), "fixed" (Tuzatildi, ✓), "breaking" (Muhim — yangilaşda e'tibor, !). Yozuvlar vaqt öqi bilan boğlanadi, eng sönggisi data-latest bilan brend nuqtasini oladi. Tepada obuna havolalari (RSS, Telegram). data-density="compact" — rasmlarsiz, ziçroq (ilova içidagi panel uçun). Bitta changelog manbasidan (JSON) çiziladi.
- [Grafik](https://foxui.dev/r/chart.json): Grafik oilasi: ustun (guruh, ustma-ust), gorizontal ustun, çiziq (yakka seriyada sönuvçi maydon), mini-çiziq, donut (≤ 4 bölak), uluş çiziği, çiziqli ölçagiç va issiqlik xaritasi. Faqat ma'lumot API'si: mahsulot içiga jadval qöyadi, çiziş, öqlar, tooltip, klaviatura va «Jadval» körinişi — komponentda. Ranglar rol bilan: siyoh, brend, aksent, xavf, kontekst (60/30/10). Donut markazida — jami yoki data-center matni. 4-tölqin: köp seriyali va ustma-ust maydon (data-type="area", data-stacked, data-stacked="percent"), voronka (data-type="funnel" — ötiş foizi va eng katta yöqotiş), maqsad/çegara çiziği (data-ref="100:Reja") va bitta izoh (<td data-note>), interaktiv legenda (data-legend="interactive") hamda taşqaridan seriyani yaşiriş (data-hidden — fx-legend, fx-stat tanlovi). 5-tölqin: radar — köp mezonli profil (data-type="radar"), nuqtali va pufakli (data-type="scatter": X, Y va ixtiyoriy hajm ustunlari), kombinatsiya — ikki panel, umumiy X (data-type="combo", yuqorida çiziq data-unit2, pastda ustun; ikki Y öqi bitta panelda yöq), treemap (≤ 8 katak + «Boşqa»), şarşara (data-type="waterfall", <tr data-total> — jami), sankey (manba → maqsad → qiymat), bullet (fakt, reja tayoqçasi va kulrang zonalar) hamda zoom/brush — line, area va bar ostida mini-grafik va ikki tutqiçli oraliq (data-brush, data-brush="12" — oxirgi 12 nuqta).
- [Grafik kartasi](https://foxui.dev/r/chartcard.json): Grafikni örab turuvçi karta: sarlavha + izoh + amallar (davr segmenti, menyu), grafik, pastda legenda va manba. Grafik öz tuzilmasini saqlaydi (fx-chart), karta faqat qobiq va joylaşuv. Holatlar: yuklanmoqda, böş (#66).
- [Checkbox, radio, switch](https://foxui.dev/r/check.json): Checkbox, radio, switch — native input + körinadigan quti. Qisman tanlangan (indeterminate), öçiq holat. Tanlov kartasi (.fx-choice) — katta bosiş maydoni, sarlavha va izoh bilan. Kengaytma: ölçam (sm/lg), yorliq tomoni, sarlavha+tavsif, switch içida ikon yoki söz, switch yuklanmoqda, tanlov kartasi (rasm/ikon, narx, belgi öng çetda, nofaol), «hammasini belgilaş» guruhi (xulq data-fx-checkall), şartli oçiliş va raqamli şkala (0–10). Kengaytma: data-appearance=button (radio/checkbox tugma körinişida), forced-colors.
- [Boşlaş röyxati](https://foxui.dev/r/checklist.json): Yangi foydalanuvçi uçun onboarding kartasi: jarayon çiziği va «2 / 5», qadamlar röyxati. Joriy qadam kengayib, izoh va amal tugmasini körsatadi; belgi bosilsa qadam bajariladi. Hammasi tugasa tabrik matni çiqadi; röyxatni yopiş eslab qolinadi.
- [Checkout](https://foxui.dev/r/checkout.json): Tölov / checkout formasi (naqş): raqamlangan bölimlar — aloqa (telefon +998), yetkazib beriş usuli va manzil, tölov usuli (bank kartasi — raqam va muddat niqobi bilan, naqd, bölib tölaş); öngda yopişqoq buyurtma xulosasi — mahsulotlar, promo-kod, jami va «… söm tölaş». Yuborilayotganda forma öçadi, tugmada yuklaniş.
- [AI checkpoint](https://foxui.dev/r/checkpoint.json): AI suhbati yoki agent lentasidagi «şu nuqtaga qaytiş» belgisi (4.204, Vercel AI Elements «Checkpoint»; Cursor va Claude Code'dagi rewind). Ajratuvçi çiziq ustida tabletka: bayroq, nom va vaqt, qisqa meta («3 fayl, 12 qator») va «Şu nuqtaga qaytiş» tugmasi. Bosilganda bekor qilinadigan «fx-checkpoint-restore» hodisasi {id, after} çiqadi — ilova fayl va ma'lumotlarni şu holatga qaytaradi; töxtatilmasa belgidan keyingi yozuvlar [data-reverted] (xira, kulrang, inert — bosilmaydi) böladi, belgi data-state="restored" va tugma «Qaytarişni bekor qiliş»ga aylanadi (fx-checkpoint-undo). Lentada bir vaqtda bitta belgi qaytarilgan böladi. Natija jonli hududda aytiladi. data-variant: line (standart) yoki compact (çiziqsiz tabletka).
- [Chip](https://foxui.dev/r/chip.json): Filtr çipi (bosiladi, tanlangani teskari rangda, içida son — alohida belgi) yoki teg (× bilan olib taşlanadi). Kengaytma: avatarli chip, aria-haspopup chevron (filtr-dropdown), data-type=assist|suggestion, .fx-chip-group (öraş / scroll / data-max + data-more), sm ölçamda ≥24px bosiş maydoni.
- [Yopiş tugmasi](https://foxui.dev/r/close.json): Dialog, sheet, alert va chip uçun bir xil ✕ tugmasi. Bosiş maydoni körinişidan kattaroq; nomi aria-label'da.
- [Kod bloki](https://foxui.dev/r/code.json): Monospace blok: fayl nomi va til sarlavhasi, nusxa tugmasi (fx-copy), qator raqamlari, ajratilgan va farq (+/−) qatorlari. Bir qatorli snippet (`$ npx …`) va matn içidagi kod ham şu yerda.
- [Ikki ustunli kod farqi](https://foxui.dev/r/codediff.json): Eski va yangi kod yonma-yon (4.82): qatorlar tekislangan, har yon öz raqami bilan, öçirilgan qator − va qizil fon, qöşilgani + va yaşil fon (belgi matnda — rang yolğiz emas), qatordagi aniq özgariş <mark> bilan. Qöşilgan yoki öçirilgan qator qarşisida çiziqli böş katak. Tor joyda (konteyner < 40rem) yoki data-view="unified" bilan bir ustunga ötadi. Faqat CSS — farqni server yoki build hisoblaydi.
- [Rang tanlagiç](https://foxui.dev/r/colorpicker.json): Erkin rang tanlaş: töyinganlik/yorqinlik maydoni (siçqonça va klaviatura), ton çiziği, HEX va RGB maydonlari, tayyor ranglar qatori va pipetka (brauzer qöllasa). Qiymat — #rrggbb; hodisa `fx-colorpicker-change`. Faqat 6–12 ta tayyor rang kerak bölsa — `swatch`. Alfa va ğildirak (4.106): data-alpha — şaffoflik çiziği (şaxmat fon ustida), HEX 8 xonali (#1C7ED6CC), hodisada detail.alpha (0–1); data-shape="wheel" — aylana: burçak — ton, markazdan masofa — töyinganlik, ostidagi çiziq — yorqinlik.
- [Combobox](https://foxui.dev/r/combobox.json): Yozib qidiriladigan tanlov: köp variant (şahar, mijoz, mahsulot). Yozilsa röyxat filtrlanadi; ↑ ↓ Enter bilan tanlanadi. Qöşimça: köp tanlov (chiplar maydon içida, avatarli odam tanlagiç), «Yaratiş» varianti, yuklanmoqda holati va taşqi (async) qidiruv. Xulq foxui.js'da.
- [Buyruqlar oynasi](https://foxui.dev/r/command.json): Ctrl/⌘+K: hamma sahifa va amalni bir joydan qidiriş. Native <dialog> tepada, qidiruv maydoni, guruhlangan variantlar, böş holat, pastda maslahat. Xulq foxui.js'da. Içma-iç sahifalar (variant bosilsa içiga kiradi, Backspace/Esc — orqaga) va «Oxirgi» tanlanganlar ham bor.
- [Izohlar ipi](https://foxui.dev/r/comments.json): Izohlar ipi: avatar, muallif, vaqt, matn; amallar — javob, tahrirlaş (özining), hal qiliş. Javoblar bir qavat içida. Hal qilingan izoh xiralaşadi va «Hal qilingan» belgisi çiqadi. Javob/tahrir formasini xulq quradi.
- [Oldin/keyin taqqoslaş](https://foxui.dev/r/compare.json): Ikki holatni ustma-ust qöyib, ajratgiçni sudrab soliştiriş (4.77): eski va yangi dizayn, «kulrang qolip» va tayyor libos, rasm tahriri. Boşqaruv — butun maydon ustidagi körinmas haqiqiy range: siçqonça bilan sudraş, bosiş, barmoq va klaviatura (← → Home End) özidan işlaydi. Tutqiç fokusda halqa oladi, «Oldin» / «Keyin» yorliqlari burçaklarda. Içida rasm, video yoki istalgan HTML (masalan jonli komponentlar) bölişi mumkin.
- [Yoziş paneli (composer)](https://foxui.dev/r/composer.json): AI çat va messenjer uçun BITTA yoziş paneli: biriktiriş tugmasi, avto-ösuvçi maydon, ixtiyoriy emoji, matn bölmasa mikrofon — matn paydo bölsa yuboriş (ikon animatsiyali almaşadi), oqim ketayotganda «Töxtatiş». Tepada javob/tahrir qatori, @eslatma takliflari menyusi, ovoz yoziş holati (brend nuqta, mono taymer) va bloklangan holat (qulf + sabab). Enter yuboradi, Shift+Enter — yangi qator, Esc — javobni bekor qiladi; yuborilganda fx-send hodisasi çiqadi.
- [Cookie roziligi](https://foxui.dev/r/consent.json): Cookie va kuzatuv roziligi naqşi (4.180, GOV.UK Cookie banner; GDPR 2-bosqiç uçun): pastki karta — nima uçun cookie kerakligi bir-ikki gapda, «Qabul qiliş», «Rad etiş» (bir xil vaznli — rad etiş yaşirilmaydi) va «Sozlaş». Sozlaşda toifalar: zarur (doim yoqiq), statistika, marketing — har biri izoh bilan. Tanlovdan keyin karta tasdiq xabariga aylanadi («Siz … qabul qildingiz», «Yaşiriş»), fokus xabarga ötadi. foxui.js tanlovni saqlaydi va "fx-consent" hodisasini yuboradi — skriptlar (analitika) faqat şundan keyin ulanadi. Footer'dagi [data-consent-open] tugmasi sozlamalarni qayta oçadi.
- [Aloqa bölimi](https://foxui.dev/r/contact.json): Marketing saytining «Aloqa» sahifasi (4.177): çapda sarlavha, aloqa kanallari (telefon, email, Telegram, manzil — ikon, nom, izoh va bosiladigan qiymat: tel:, mailto:, https://t.me) va iş vaqti jadvali; öngda ariza formasi. Forma yuborilgaç ilova data-state="sent" qöyadi — maydonlar yaşirinadi, .fx-contact__done (rahmat xabari) körinadi va fokus unga ötadi. Ostida ixtiyoriy filiallar qatori. data-layout: split (standart) yoki stack (forma markazda, kanallar ostida bir qatorda).
- [Kontekst ölçagiçi](https://foxui.dev/r/context-meter.json): AI kontekst oynasi qança işlatilganini körsatuvçi kiçik halqa va «48 %» matni. 80 % dan ogohlantiriş, 95 % dan «töla» holati — rang bilan birga söz va “!” belgisi.
- [Kontekst menyu](https://foxui.dev/r/context.json): Maydon yoki qator ustida öng tugma, sensorda uzoq bosiş yoki klaviaturada Shift+F10 / ☰ bilan menyu kursor örnida oçiladi. Menyuning özi — oddiy fx-menu; ekran çetiga siğmasa suriladi. Kontekst menyuda faqat qöşimça tezkor amallar bölsin — asosiylari sahifada ham körinsin.
- [Kontekst menyu](https://foxui.dev/r/contextmenu.json): Öng tugma, uzoq bosiş (telefon) yoki Shift+F10 / Menu tugmasi bilan kursor joyida oçiladigan menyu (4.147). Menyu — oddiy fx-menu (bandlar, ajratgiç, xavfli amal, klaviatura); bu komponent hudud, nişon qatorni belgilaş, joylaşuv va fokusni qaytarişni beradi. CRM röyxati, fayllar, kanban kartalari uçun.
- [Suhbat oqimi](https://foxui.dev/r/conversation.json): Xabarlar lentasi (role="log"): pastda bölsangiz yangi xabar va oqim matni avtomatik pastga tuşadi; yuqoriga çiqsangiz joyingiz saqlanadi va «↓ Yangi xabar» tugmasi (yangi xabarlar soni bilan) çiqadi. Pastda composer uçun joy. AI (72ch ustun) va messenjer variantlari.
- [Suhbatlar röyxati](https://foxui.dev/r/convo.json): Messenjer çap paneli: avatar (onlayn nuqta), nom, vaqt, oxirgi xabar va belgilar. Holatlar — öqilmagan, eslatma (@), qadalgan, ovozsiz, qoralama, yozmoqda, öqildi, tanlangan — har biri söz yoki ikon bilan ham.
- [Nusxa tugmasi](https://foxui.dev/r/copy.json): Bir bosişda matn clipboard'ga yoziladi: nusxa ikoni ✓ ga yumşoq almaşadi (2 soniya), natija e'lon qilinadi. data-copy-target — element, data-copy — matn.
- [Son belgisi](https://foxui.dev/r/count.json): Ikon yoki tugma ustidagi kiçik son (öqilmagan xabarlar) yoki nuqta. Ota elementga position: relative kerak. Kengaytma: data-inline (ota elementsiz, oqim ichida), data-tone=neutral|brand|success.
- [Teskari sanoq](https://foxui.dev/r/countdown.json): Qolgan vaqtni körsatadi: aksiya tugaşi (kun · soat · daqiqa · soniya), imtihon yoki test vaqti, SMS kodni qayta yuborişgaça («00:59»). Raqamlar tabular — sakramaydi; oz qolganda qizil + «!» va «oz qoldi» sözi, tugaganda matn. Ekran öquvçiga siyrak aytiladi: 5 daqiqa, 1 daqiqa, 10 soniya qolganda va tugaganda. Uzoq muddat uçun yil birligi: data-units="yd" → «1 yil · 354 kun» (soniyasiz birliklarda daqiqada bir yangilanadi) — domen, obuna, litsenziya muddati.
- [Promo-kod](https://foxui.dev/r/coupon.json): Promo-kod yoki kupon: kod kiritiladi → «Qöllaş» → tekşiruv (tugmada yuklaniş) → qöllangan chip (✓ kod, çegirma summasi, × olib taşlaş) yoki xato matni. Forma içida turadi (içki <form> yöq). Yiğilgan variant — «Promo-kodingiz bormi?» havolasi ostida.
- [CTA va obuna bölimi](https://foxui.dev/r/cta.json): Sahifa oxiridagi çaqiriq bölimi (4.174): katta sarlavha, bir gaplik izoh va 1–2 tugma — standart holatda brend rangli panel (içida naqş va yoruğ doğ, tugmalar teskari rangda); data-tone="subtle" — yengil fon. Obuna varianti: email maydoni + tugma, izoh qatori va holat xabari (data-state: loading, success — forma örniga rahmat xabari, error). data-layout="split" — matn çapda, amal öngda (maqola içidagi CTA).
- [Pul maydoni](https://foxui.dev/r/currency.json): Söm miqdori: minglar böş joy bilan ajraladi (1 250 000), faqat raqam, tabular raqamlar; birlik («söm») input-group addon'ida. Formatsiz qiymat — dataset.raw. Kasr kerak bölsa data-decimals. Joylaştirişda «1,000,000», «1.000.000», «1 000 000,50» ni tuşunadi; forma yuborilganda server toza son oladi (1000000.50) — type="number" kerak emas.
- [Maxsus kursor](https://foxui.dev/r/cursor.json): Hudud içida kursorga belgi yoki yorliq ergaşadi (Magic UI Pointer va Smooth Cursor, Aceternity Following Pointer): portfolio kartalari ustida «Loyihani köriş →» pufagi yoki jamoaviy doskadagi kabi ismli strelka. .fx-cursor__pointer içiga istalgan belgi qöyiladi (.fx-cursor__arrow, .fx-cursor__label); data-variant="bubble" — pufak kursor markazida; data-color — toifa rangi. data-native="hide" — tizim kursori yaşiriladi (faqat belgi aniq körinadigan joyda), data-follow="exact" — keçikişsiz ergaşiş. Belgi berilmasa — data-label matni bilan pufak özi yaratiladi. Faqat siçqonçada; barmoq, klaviatura va harakat kamaytirilganda belgi yöq.
- [Jonli hamkorlik kursorlari](https://foxui.dev/r/cursors.json): Umumiy iş maydonida boşqa foydalanuvçilar kursorlari (4.205, Figma, Liveblocks, Magic UI «Pointer»): rangli strelka va ism yorliği, matndagi tanlov (.fx-cursors__selection — yarim şaffof fon, karetka va ism), kursor-çat pufakçasi (.fx-cursors__chat) va tepada kimlar borligi röyxati (.fx-cursors__people). Joylaşuvni ilova realtime orqali yangilaydi: --fx-cursors-x / --fx-cursors-y (% yoki px) — kursor silliq suriladi; uzoq qimirlamasa data-state="idle" — yorliq yaşirinadi, kursor xiralaşadi. Rang data-color (6 pastel) — doim ism bilan birga. Kursorlar faqat bezak (aria-hidden); kim borligi va nima qilayotgani — röyxat va jonli hudud orqali.
- [Dashboard qolipi](https://foxui.dev/r/dashboard.json): Körsatkiçlar sahifasi qolipi (4.185): tepada sarlavha, yangilangan vaqt va davr tanlaş; KPI qatori (≤ 4, bitta hero raqam); 12 ustunli grafik kartalar töri (data-span: 4, 6, 8 yoki 12 — konteyner kengligiga qarab 2 yoki 1 ustunga tuşadi); pastda sönggi faollik. Içi mavjud komponentlardan: fx-stat, fx-chartcard, fx-chart, fx-table, fx-timeline.
- [Ma'lumot töri](https://foxui.dev/r/datagrid.json): Jadvaldan köra ilovaga yaqin tör (APG grid): katakma-katak klaviatura (←↑→↓, Home/End, Ctrl+Home/End, PageUp/PageDown), katakni joyida tahrirlaş (Enter/F2/harf bosiş; Enter saqlaydi, Esc bekor qiladi), ustun kengligi (tutqiçni sudraş yoki sarlavhada Alt+←/→), qotgan sarlavha va birinçi ustun(lar), qator tanlaş (belgi ustuni, Shift+Böş joy, Ctrl+A) va saralaş. Tuzilma div + role, qatorlar aria-rowindex bilan — virtualizatsiyaga tayyor: DOMda faqat körinadigan qatorlar bölsa ham aria-rowcount töliq sonni aytadi. Xulq foxui.js'da (data-fx-datagrid). Guruhlaş va jami (4.130): data-group-by — ustun böyiça yiğiladigan guruh sarlavhalari, data-agg="sum|avg|count" ustunlarida guruh va pastki «Jami» qatori. Ustunlar (4.131): data-reorder — sarlavhani sudrab ustun tartibi (klaviatura: sarlavhada Alt+Shift+←/→); ustunlar paneli [data-fx-datagrid-columns="<id>"] — köriniş belgisi, ↑ ↓ tartib va «Qotiriş» (ustun belgi ustunidan keyin qotadi). Katak oraliği va joylaş (4.132): data-range — Shift+strelka, Shift+bosiş yoki sudraş bilan törtburçak oraliq; Ctrl+C — TSV (Excel/Sheets'ga), Ctrl+V — nusxalangan jadval faol katakdan boşlab tahrirlanadigan kataklarga, bitta qiymat — butun oraliqqa; son kataklari tekşiriladi. Master–detail (4.133): qatordan keyin .fx-datagrid__detail va .fx-datagrid__expand katagi — bosiş yoki Enter/Böşliq oçadi; saralaş va guruhlaşda tafsilot öz qatori bilan yuradi.
- [Sana maydoni](https://foxui.dev/r/dateinput.json): Sanani yozib kiritish: KK.OO.YYYY niqobi nuqtalarni oʻzi qoʻyadi, toʻliq sana tekshiriladi (mavjudligi, eng erta/eng kech sana, oʻchirilgan kunlar). Formaga ISO (YYYY-MM-DD) yashirin input orqali ketadi. Kalendarsiz — tugʻilgan sana kabi uzoq sanalar uchun qulay; kalendar bilan — fx-datepicker.
- [Sana tanlagiç](https://foxui.dev/r/datepicker.json): Sana maydoni + kalendar tugmasi: yozib ham, kalendardan ham tanlanadi. Kalendar popover'da oçiladi (↓ yoki tugma), kun tanlansa maydon töladi va yopiladi, Esc yopadi. Footerda Tozalaş va Bugun. Tayyor sanalar va tabiiy til (4.101): popover çap tomonida «Bugun · Ertaga · Keyingi duşanba» (yonida sana), data-natural bilan maydonga «ertaga 15:00», «3 kundan keyin», «keyingi juma», «25-oktabr» yoziş mumkin — ostida taxmin çiqadi, Enter qabul qiladi.
- [Sana oraliği](https://foxui.dev/r/daterange.json): Boşlaniş–tugaş davri: bitta tugma-maydon, popover'da çapda tayyor oraliqlar (Bugun, Keça, Oxirgi 7 kun, Şu oy, Ötgan oy), öngda 2 oylik kalendar (birinçi bosiş — boşi, ikkinçisi — oxiri, orasi hoverda körinadi). Qöllaş bosilganda qiymat yoziladi, Bekor — özgarişsiz. Nisbiy oraliq va avto yangilaş (4.102): data-relative="15m 1h 24h 7d" — röyxat boşida «Oxirgi 15 daqiqa / 1 soat / 24 soat / 7 kun»; qöllanganda qiymat «now-15m» / «now» (har safar qayta hisoblanadi, hodisada hisoblangan from/to ISO). data-refresh="off|10s|30s|1m|5m" — maydon yonida «Yangilaş» tanlovi; yoqilsa har N soniyada «fx-range-refresh» (sahifa yaşirin bölsa töxtaydi) va «Jonli · har 30 s» yozuvi. Monitoring, loglar, sotuv paneli uçun.
- [Kunlar tasmasi](https://foxui.dev/r/daystrip.json): Gorizontal 7 kunlik mini kalendar (4.104): bron, qabul, yetkazib beriş va jadval sahifalari tepasida — töliq oy törisiz tez kun tanlaş. ‹ › — hafta, hafta Duşanbadan (data-align="today" — bugundan boşlab 7 kun). Bugun «Bugun» yozuvi va qalin halqa, band kun — burçakda nuqta (+ ekran öquvçiga «bron bor»), yopiq kun — çizilgan raqam va «yopiq». Kalendar bilan bir xil yordamçilar (oy nomlari, Du–Ya).
- [Özgariş körsatkiçi](https://foxui.dev/r/delta.json): Strelka + son + davr: «▲ +12,4% ötgan oyga nisbatan». Yönaliş (yuqori/past/özgarişsiz) va yaxşi/yomon ohang alohida beriladi; haqiqiy minus belgisi U+2212. Chip varianti (20.10): data-variant="chip" — ohang fonli pill (yaxşi — yaşil, yomon — qizil, betaraf — kulrang), KPI kartaning yuqori öng çetida.
- [Dialog](https://foxui.dev/r/dialog.json): Tasdiq va qisqa formalar uçun modal oyna. Native <dialog> + showModal(). Tasdiqlaş varianti (alertdialog, closedby=none), «yozib tasdiqlang» (matn mos kelsagina tugma yoqiladi), ölçamlar sm/lg/töliq ekran, uzun mazmunda yopişqoq sarlavha/amallar. Ustma-ust (4.154): data-stack'li dialog ustida ikkinçisi oçilsa, pastdagisi kiçrayib orqaga ketadi, parda ikki qavat qoraymaydi. Sudraladigan (data-draggable): sarlavha qatoridan siçqonça/barmoq bilan yoki .fx-dialog__grip tutqiçi + strelkalar; yopilganda markazga qaytadi.
- [Ajratgiç](https://foxui.dev/r/divider.json): Kontentni ikkiga ajratuvçi nozik çiziq. Böş yoki içida yorliq bilan («yoki»); gorizontal va vertikal; <hr> yoki role="separator".
- [Ta'rif röyxati](https://foxui.dev/r/dl.json): Nom — qiymat juftliklari: tafsilot varaği, profil, buyurtma ma'lumoti. Ikki ustun (standart) yoki ustma-ust (tor joyda). Variantlar: çiziqli qatorlar, ixçam, ustunli guruhlar (<div> içida dt+dd). Kengaytma: qiymat yonida .fx-dl__action yoki .fx-copy, data-columns=2|3.
- [Dock](https://foxui.dev/r/dock.json): Ilovalar yoki bölimlar uçun ikonlar qatori (4.76): kursor ostidagi ikon kattalaşadi, qöşnilari ozroq (macOS Dock kabi), klaviatura fokusida ham. Faqat CSS (:has bilan qöşnilar). Har bandda tepada çiqadigan yorliq, joriy sahifa — pastda nuqta (aria-current). Barmoqli qurilmada, harakat kamaytirilganda va data-magnify="off" da — oddiy tugmalar qatori.
- [Prujinali sudraş](https://foxui.dev/r/drag.json): Elementni barmoq yoki siçqonça bilan suriş: sudralayotganda körsatkiçga yopişadi va biroz kötariladi, qöyib yuborilganda tezligi bilan biroz davom etadi (inersiya) va prujina bilan joyiga qaytadi (HIG, M3 Expressive, Vaul). data-release="dismiss" — eni 40 %idan uzoq yoki tez surilsa, element şu tomonga uçib ketadi va yopiladi (swipe bilan yopiş: bildirişnoma, karta, varaq); çegaradan ötganda element xiralaşib ogohlantiradi. data-axis — x (standart), y yoki both. Hodisalar: fx-drag-dismiss (bekor qilsa böladi), fx-drag-dismissed, fx-drag-return. Qaytariladigan elementda rezina qarşilik bor. Harakat kamaytirilsa — inersiya va prujina yöq.
- [Fayl yuklaş](https://foxui.dev/r/dropzone.json): Fayl tanlaş yoki sudrab taşlaş maydoni: bosilsa oyna oçiladi, ustiga olib kelinganda brend tusi, tanlangan fayllar nomi körinadi. Native input type="file" içida. Kengaytma: data-variant=compact, .fx-dropzone__limit, fayl qatorlari .fx-dropzone__list/__file (progress, data-state=error|done, qayta uriniş, thumbnail). Buferdan joylaş va papka (4.105): data-paste bilan Ctrl+V skrinşotni qöşadi (nomi «skrinshot-sana-vaqt.png»), papka taşlansa içidagi hamma fayl olinadi, «Papka tanlaş» tugmasi ham bor.
- [Effektlar (spotlight, çegara nuri, yaltiraş, yönalişli hover)](https://foxui.dev/r/effects.json): Landing va «wow» sahifalar uçun ixtiyoriy effektlar qatlami: istalgan yuzaga (karta, bento katagi, narx kartasi) data-fx atributi bilan qöşiladi. «spotlight» — kursorni kuzatuvçi yumşoq nur: kartaning çegarasi va foni kursor ostida yonadi; data-fx-effects konteyner içida kursor yaqinidagi qöşni kartalar çegarasi ham yonadi (Linear, Magic UI uslubi). «beam» — çegara böylab aylanib yuruvçi nur, «tavsiya» yoki «yangi» urğusi uçun; data-fx-glow bilan taşqi yumşoq nur. Ranglar mavzudan (brend yoki toifa rangi) — HEX yöq. Çeksiz aylaniş faqat ekranda körinib turganda; harakat kamaytirilsa, calm yoki none rejimda — nur statik turadi. «glare» (4.54) — hover yoki klaviatura fokusida karta ustidan bitta diagonal yaltiraş ötadi (::before işlatadi — beam data-fx-glow bilan birga qöyilmaydi). «direction» (4.55) — içidagi qoplama (.fx-effects__overlay) kursor kirgan tomondan sirpanib çiqadi va çiqqan tomonga ketadi; klaviatura fokusida pastdan çiqadi, hover yöq qurilmada qoplama doim pastda körinadi.
- [Elevation va yuza qatlamlari](https://foxui.dev/r/elevation.json): Yuza qatlamlari poydevori. Elevation 0–5 (4.7): har daraja soya (--fx-elevation-N) + yuza tusi (--fx-elevation-tint-N) juftligi — yoruğda soya, qoronğida yuza yoruğroq bölib ajraladi; soya uslub tugmalariga (blur, depth) va «Çegara» öqiga böysunadi. data-hover="raise" — hover'da bir daraja kötariladi. Şişa material (4.16): fx-material thin/regular/thick — şaffof yuza, orqa fon xiralaşuvi, nozik çegara; qöllanmasa yoki şaffoflik/kontrast sozlamasida tekis yuza. Viz palitralar (4.20): ketma-ket --fx-viz-seq-1…7 (kamdan köpga, brend) va ikki qutbli --fx-viz-div-1…7 (xavf ← kontekst → ösiş), mavzu bilan almaşadi; fx-viz-scale — legenda çiziği, data-viz-step — katakni böyaş.
- [Email şablonlari](https://foxui.dev/r/email.json): Tranzaksion xatlar uçun naqş (4.181): tasdiq kodi, parol tiklaş, hisob-faktura va xabarnoma. Poçta mijozlari (Gmail, Outlook, Apple Mail, Mail.ru) flex/grid'ni bilmaydi — şuning uçun tuzilma JADVALLI: <table role="presentation"> içma-iç, bitta ustun, eni ~600 px, tugma — jadval katagidagi havola. Uslub bu yerda FoxUI tokenlarida (hujjat saytida köriş, mavzu va qoronği rejim bilan almaşiş); yuborişdan oldin build bosqiçida tokenlar qiymatga aylantirilib, uslublar inline qilinadi (masalan juice) — şu sababli faqat inline'ga çidaydigan xossalar işlatilgan. .fx-email__preheader — xatlar röyxatida mavzu yonida çiqadigan yaşirin qisqa matn. data-tone — kartaning tepa çiziği: brand (standart), success (tölov), warning (xavfsizlik), error (muvaffaqiyatsiz tölov).
- [Emoji tanlagiç](https://foxui.dev/r/emojipicker.json): Emoji tanlaş paneli: qidiruv (özbekça va inglizça sözlar), 7 toifa tabi, “Oxirgilar” (brauzerda saqlanadi). Brauzerning öz emojilari — rasm yuklanmaydi. Tanlanganda `fx-emoji-select` hodisasi; `data-target` bilan maydonning kursor örniga yoziladi. Odatda popover içida işlatiladi.
- [Böş holat](https://foxui.dev/r/empty.json): Röyxat yoki jadvalda hali heç narsa yöq, qidiruv topmadi yoki yuklaşda xato: belgi, sarlavha, bitta qator izoh va keyingi qadam. Kengaytma: data-state=first|search|forbidden (xato bilan 4 tayyor holat), .fx-empty__art[data-size=sm|lg|illustration], .fx-empty__link.
- [Xatolar xulosasi](https://foxui.dev/r/error-summary.json): Forma tepasida: «Quyidagilarni tuzating» sarlavhasi va har xatoga havola. Yuborişda fokus şu blokka ketadi, havola bosilsa tegişli maydonga fokus beriladi. Maydon ostidagi xato matni bilan birga işlaydi, uni almaştirmaydi.
- [Xato sahifalari töplami](https://foxui.dev/r/errorpage.json): Töliq xato sahifasi şabloni (4.183): tepada sayt belgisi va kiriş, markazda naqşli fon ustida ulkan kod (404, 500, 503 — tepadan pastga sönuvçi, holat rangida), ostida fx-result (sarlavha, izoh, tugmalar — 500/503/offline holatlari result'da), qidiruv maydoni va foydali havolalar kartalari, pastda ingiçka footer (xato kodi, «xato haqida xabar beriş»). data-status kodning rangini beradi; data-size="block" — hujjat içida namuna sifatida.
- [FAB va speed dial](https://foxui.dev/r/fab.json): Ekran burçagidagi bitta asosiy amal (4.150, M3 FAB): telefonda «Yangi bitim», «Ariza qöşiş». Speed dial — bosilsa 3–5 amal ikon va yozuv bilan yoyiladi, asosiy tugma ✕ ga aylanadi. Kengaytirilgan (data-extended) — ikon + yozuv. Klaviatura: APG «Menu Button».
- [Faset filtr paneli](https://foxui.dev/r/facets.json): Röyxat yonidagi guruhlangan filtrlar (4.167, Algolia/Polaris uslubida): har guruh yiğiladi, har variantda natijalar soni, uzun röyxatda «Yana N ta» va guruh içida qidiruv, guruh sarlavhasida tanlanganlar soni, yuqorida «Tozalaş». Natijasi 0 variant xira. CRM röyxati, katalog, hisobotlar uçun.
- [FAQ bölimi](https://foxui.dev/r/faq.json): Köp beriladigan savollar bölimi (4.173): sarlavha bloki, accordion asosidagi savol-javoblar (bir vaqtda bittasi oçiq — details name) va oxirida «Javob topmadingizmi?» bloki. data-layout: stack (standart — sarlavha tepada, markazda) yoki split (sarlavha çapda, scroll'da yopişib turadi; savollar öngda). Qidiruv natijalarida savollar çiqişi uçun bölim yoniga FAQPage strukturaviy ma'lumoti (application/ld+json) qöyiladi — sahifadagi matn bilan bir xil bölsin.
- [Rangli ikon plitkasi](https://foxui.dev/r/featured.json): Ikon rangli yumşoq plitkada: böş holat, xususiyat röyxati, dialog tepasi. Ohang (brend, neytral, holat), uslub (yoruğ, töq, çiziqli), ölçam sm–xl, şakl kvadrat yoki doira.
- [Xususiyatlar bölimi](https://foxui.dev/r/features.json): Landingdagi xususiyatlar bölimi (4.171): markazlaşgan sarlavha bloki (eyebrow, sarlavha, izoh) va ikonli tör — har bandda rangli ikon (toifa ranglari), nom va qisqa izoh; data-layout="cards" — har band karta içida. Ikkinçi şakl — almaşinuvçi qatorlar (.fx-features__rows): matn va media yonma-yon, har keyingi qatorda örin almaşadi; matn ostida ✓ röyxat. Telefonda bitta ustun.
- [Fayl tugmasi](https://foxui.dev/r/file.json): Oddiy «Fayl tanlaş» maydoni: native input type="file", maydon şaklida — tugma va tanlangan fayl nomi brauzerdan. Bitta yoki köp fayl, accept bilan tur çeklanadi. Sudrab taşlaş kerak bölsa — dropzone. Fayl turi belgisi (4.142): .fx-file__icon[data-type=pdf|doc|xls|ppt|zip|img|txt] — bukilgan burçakli varaq va kengaytma yorliği; .fx-file__item — belgi, nom va hajm qatori.
- [Filtr qatori](https://foxui.dev/r/filterbar.json): Röyxat sahifasining filtr qatori: qidiruv, 2–3 faset chip, «Filtrlar» varaq tugmasi (faol filtrlar soni bilan), öng çetda köriniş menyusi; ostida faol filtrlar teglari va «Hammasini tozalaş». Xulq foxui.js'da: tegni olib taşlaş, tozalaş, son, fokusni saqlaş (#140, PDP listpage__bar). Sörov quruvçi (4.168, data-builder): şart qatorlari (maydon · operator · qiymat) va VA/YOKI guruhlari, pastda sörovning öqiladigan matni.
- [Mamlakat bayroği](https://foxui.dev/r/flag.json): Sodda geometrik bayroqlar (4.145) — telefon kodi (+998), til va valyuta tanlagiçlari, mijoz mamlakati ustuni uçun. Faqat CSS gradientlar: rasm yuklanmaydi, inline SVG va emoji yöq (emoji bayroq Windows'da «UZ» harflari bölib çiqadi). Çizma 4:3; data-shape="circle" — avatar va til tugmasi uçun doira. 12 mamlakat: Özbekiston, Qozoğiston, Rossiya, Turkiya, AQSh, BAA, Xitoy, Koreya, Tojikiston, Qirğiziston, Germaniya, Yaponiya. Mayda detallar (yulduz, gerb) nuqta yoki halqaga soddalaştirilgan — 16–24 px'da baribir körinmaydi.
- [Suzuvçi oyna](https://foxui.dev/r/floatwin.json): Sahifa ustida qoladigan, modal bölmagan panel (4.152): video qönğiroq, AI yordamçi, kalkulyator, tezkor eslatma — foydalanuvçi orqadagi sahifa bilan işlaşda davom etadi. Sarlavha qatoridan sudraladi (siçqonça, barmoq yoki tutqiç + strelkalar), pastki burçakdan ölçami özgaradi (Alt+strelka ham), yiğiladi (sarlavhaga ikki marta bosiş yoki tugma), yopiladi (Esc). Oyna ekrandan çiqib ketmaydi. Joylaşuv: end (standart, öng past) · start · top-end · inline (oqimda).
- [Iş holati](https://foxui.dev/r/flow.json): Vazifa holati doirasi: backlog (punktir), qilinadi (çegara), jarayonda (yarmi), tekşiruvda (¾), bajarildi (töla + ✓), bekor (xira + ×). Şakl va rang birga. Ustuvorlik rangi (Ustoz 21.10): data-priority="urgent|high|normal|low" — şakl holatni, rang ustuvorlikni bildiradi (bajarilgan va bekor — öz rangida). Haqiqiy foiz: --fx-flow-value. Yorliq .fx-flow-tag — doira + söz kapsulada, data-variant="soft" — rangli oç fon.
- [Fokus, holat qatlami va kontrast](https://foxui.dev/r/focus.json): Özaro ta'sir poydevori. Fokus halqasi oilasi (4.10): taşqi (standart), içki (data-ring="inset" — qirqiladigan konteyner, jadval katagi), ikki qavatli halo (rangli/qoronği fonda ham körinadi) va contrast (halqa matn rangida — brend banner, rels ustida); bitta elementga fx-focus-ring yoki butun blokka fx-focus-scope. Holat qatlami (4.17): fx-state — yuzada bitta qoplama, hover 8 % · fokus 10 % · bosiş 10 % · sudraş 16 %, rangi matn rangidan (har mavzu va fonda özi töğri). Yuqori kontrast (4.15): prefers-contrast: more yoki data-fx-contrast="more" — çegaralar va xira matn töqlaşadi, fokus halqasi qalinlaşadi, havolalar tagiga çiziladi.
- [Fokusli kartalar](https://foxui.dev/r/focuscards.json): Portfolio, loyiha yoki jamoa töri: bitta karta ustiga borilganda (yoki klaviatura bilan fokuslanganda) qolgan kartalar xiralaşadi va biroz kiçrayadi — köz bitta kartaga tuşadi (Aceternity Focus Cards). Sarlavha va izoh kartaning pastidan qoronği gradient ustida çiqadi; hover yöq qurilmada (telefon) sarlavha doim körinadi. Faqat CSS (:has). data-caption="always" — sarlavha doim körinadi; data-ratio="wide" — 4:3 kartalar; data-size — ustun kengligi.
- [Formatlaş (fxFormat)](https://foxui.dev/r/format.json): Qiymatni özbekça körinişga keltiradigan yagona funksiya (4.23): son (1 250 000,5), pul («1 250 000 söm», USD/EUR/RUB), foiz («12 %»), bayt («1,2 MB»), birlik («3 dona»), ixçam son («1,3 mln», «12 ming»), sana («17 oktyabr 2026», «17.10.2026»), vaqt va nisbiy vaqt («5 daqiqa oldin», «keça»). Minglar — bölinmas böş joy, kasr — vergul, manfiy — «−». Brauzer ICU'siga tayanmaydi — hamma joyda bir xil. HTML'da data-fx-format (matnni yozadi, value/datetime özgarsa yangilaydi) yoki JS'da window.fxFormat(qiymat, tur, parametrlar).
- [Rasmlar töri](https://foxui.dev/r/gallery.json): Rasmlar töri: avto ustunlar yoki qotirilgan (data-cols 2–4), «mosaic» — birinçi rasm katta, oxirgisida «+N». Elementlar havola yoki tugma; lightbox bilan data-fx-lightbox-target orqali ulanadi (bosilsa katta körinadi).
- [Gantt](https://foxui.dev/r/gantt.json): Loyiha va yöl xaritasini vaqt öqida körsatadi: çapda nomlar ustuni, öngda oy va kun (yoki hafta) sarlavhasi — ikkalasi aylantirilganda qotadi; dam oliş kunlari soyasi, «bugun» çiziği, plaşkalar içida bajarilgan uluş, bosqiç (romb), guruh xulosasi, boğliqlik öqlari (data-after) va keçikkan plaşka («Keçikdi» yozuvi bilan). Plaşkalar tugma: Tab/←→↑↓ bilan yuriladi, fokus va hover'da sana oraliği va uluş maslahati çiqadi. Joylaşuvni xulq sanalardan hisoblaydi (data-start, data-end). Xulq foxui.js'da (data-fx-gantt).
- [Globus va nuqtali xarita](https://foxui.dev/r/globe.json): Nuqtalardan iborat globus yoki tekis xarita (4.79): şaharlar — marker, boğlanişlar — yoy (globusda katta aylana böylab), ustidan yönaliş bölagi yuguradi. Ma'lumot sahifada matn: içidagi röyxat (data-lat, data-lon, data-to="Şahar, …") — canvas faqat köriniş. Globus sekin aylanadi, hover/fokusda töxtaydi, sudrab yoki ← → ↑ ↓ bilan aylantiriladi; data-view="map" — tekis 2:1 xarita. Quruqlik konturi qöpol (bezak darajasida) — aniq geografiya uçun emas. data-label="hover" (20.10): köp markerda nom faqat kursor yaqinlaşganda çiqadi, röyxat körinişdan yaşirinadi (ekran öquvçida qoladi). Sahna JS bilan qöşilgunça joyi oldindan band — sahifa siljimaydi (CLS).
- [Haqiqiy globus](https://foxui.dev/r/globus.json): Haqiqiy Yer xaritasi globus körinişida: nuqtalar (şahar, bekat, filial) va ular orasidagi katta aylana yoylari — yöl, karvon, yetkaziş marşruti. Sekin aylanadi, tegilganda töxtaydi; ⤢ bilan butun ekran, Esc bilan qaytadi; telefonda kvadrat. Okean, yöl va nuqta ranglari tokenlardan — rang mavzusi va qoronği rejim almaşsa xarita ham almaşadi. Xarita kutubxonasi (MapLibre GL, BSD) loyihaning özida: foxui/globus faqat uzatilgan maplibregl bilan işlaydi. Lazy rejim: avval yengil joy egasi, bosilganda yuklanadi — sahifa tezligi saqlanadi. ⤢ tugmasi — fx-btn: npx foxui sync uni özi qöşadi; CSS'ni qölda alohida ulasangiz, button.css ham kerak. Tiplar — globus.d.mts. Jonli namuna (Buyuk ipak yöli): /namuna/globus/.
- [Gradient tanlagiç](https://foxui.dev/r/gradientpicker.json): Gradient yasaş (4.107): banner, kartoçka foni, prezentatsiya sarlavhasi uçun. Töxtaş nuqtalari yölakda — bosib qöşiladi (şu joydagi rang bilan), sudraladi yoki klaviaturada suriladi (← →, Shift — 10 %), Delete öçiradi (kamida 2 ta). Tanlangan nuqta rangi — tizimning rang tanlagiçi, örni — son maydoni. Çiziqli / radial, burçak — knob (data-type="angle"). Natija — tayyor CSS matni (nusxa oliş uçun) va yaşirin input.
- [Graf kanvasi (oqim)](https://foxui.dev/r/graph.json): Tugun va çiziqlardan oqim diagrammasi (Make.com uslubi): har tugun — yumaloq karta, çapda xizmat belgisi pastel doirada, tur, nima va kim; çiziq — egri, strelkali, örtasida holat nuqtasi. Soğ zanjir sokin kulrang, uzilgani qizil; dalilsiz tugun va uzuq çiziq — qizil punktir; zanjir davomi yöq — qizil uzuq oxir va «?». Joylaştiriş ma'lumotdan özi (templates/graf.mjs — qatlamli, taşqi kutubxonasiz), zoom va suriş bor; tor joyda (telefon) tik röyxatga ötadi. Mister Fox va Fox OS sörovi (FoxOS «Oqimlar», 21.10); keyin WBS daraxti va brend arxitekturasi şu yadrodan.
- [Kartalar töri](https://foxui.dev/r/gridlist.json): Kartalar töri (4.138, GridList): fayl menejeri, galereya, şablon tanlaş. Klaviaturada ← ↑ → ↓ joylaşuv böyiça yuradi (ustunlar soni ekran eniga qarab özgarsa ham), Home/End; Böşliq — tanlaş, Shift+strelka — oraliq, Ctrl+A — hammasi, Esc — tozalaş. Enter — karta amallariga kiradi (Oçiş, Yuklab oliş; Tab ular orasida, Esc qaytaradi), amali yöq kartada — «oçiş» hodisasi. data-select="multiple|single|none". Tanlangan karta — brend çegara va ✓ doira; holat yonidagi «N ta tanlandi» qatorida.
- [Sarlavha](https://foxui.dev/r/heading.json): Sarlavha uslubi: display, h1–h4 vizual darajalari. Vizual daraja semantik tegga boğliq emas — <h2 data-size="h4"> mumkin. Ohang, vazn, qisqartiriş.
- [Faollik xaritasi](https://foxui.dev/r/heatmap.json): GitHub uslubidagi faollik xaritasi: har kun — bitta katak, ustunlar haftalar (Duşanbadan), 5 daraja (0–4) viz-brand soyalarida, tepada oy, çapda hafta kunlari, pastda Kam…Köp şkalasi. Boşlaniş sanasi va kunlik qiymatlar (data-start, data-values) berilsa xulq kataklarni quradi; har katak nomi va qiymati matnda (aria-label, title) — daraja rangdan taşqari ham aytiladi. Xulq foxui.js'da (data-fx-heatmap).
- [«Foydali böldimi?» vidjeti](https://foxui.dev/r/helpful.json): Sahifa yoki javob sifatini biliş uçun kiçik fikr vidjeti (4.199): savol va «Ha / Yöq» tugmalari (aria-pressed, ikon + söz). Tanlovdan keyin forma oçiladi — «Yöq» uçun sabab chip'lari (Tuşunarsiz, Eskirgan, Kerakli narsa yöq, Xato bor) va izoh, «Ha» uçun ixtiyoriy izoh («Nima yoqdi?»); «Yuboriş» yoki «Ötkazib yuboriş»dan keyin rahmat holati va «Fikrni özgartiriş». Xulq (data-fx-helpful): hodisa «fx-helpful» {id, value, reasons, comment}; javob localStorage'da «fx-helpful:<data-id>» — qayta kirganda yana söralmaydi (data-demo — saqlamaydi); Esc formani yopib, fokusni tugmaga qaytaradi. data-variant: bar (standart), card, inline (AI javobi ostida ixçam).
- [Hero bölimi](https://foxui.dev/r/hero.json): Landingning birinçi ekrani (4.170): yangilik tabletkasi (eyebrow), katta sarlavha (urğu söz mavzu gradientida yoki aylanuvçi söz — textfx), bir-ikki gaplik izoh, ikki tugma, işonç qatori (✓ belgili qisqa da'volar) va katta media (skrinşot, terminal, jonli UI). data-layout: center (standart) yoki split (matn çapda, media öngda). Orqa fon — içidagi .fx-bg (katak/nuqta + mavzu nuri). Kirişda bloklar poğonali kötariladi; data-tilt bilan media scroll paytida egiklikdan tikka turadi (qöllamaydigan brauzerda — tekis). Sarlavha ölçami ekran eniga qarab silliq ösadi.
- [Gologramma karta](https://foxui.dev/r/holo.json): A'zolik, sodiqlik va sovğa kartasi, çipta yoki kolleksiya uçun «jonli» karta: kursor ortidan 3D egiladi (mavjud xulq data-fx-tilt), yuzasida kamalak folga (pastel tokenlardan) va kursor ortidagi nur, ingiçka içki çegara va naqş (panjara, çiziq, nuqta). Fon — mavzuning brend rangi (standart), töq yoki yoruğ; şakl — bank kartasi (1,586) yoki çipta (data-shape="tall"); rasm bilan — .fx-holo__media. Telefonda va harakat kamaytirilganda egilmaydi, folga sekin suzadi (heroui.pro Holo Card'dan ilhom, kalibr — FoxUI).
- [Hover karta](https://foxui.dev/r/hovercard.json): Ism, havola yoki avatar ustida keçikiş bilan çiqadigan kartoçka (4.149): mijoz profili, bitim qisqaçasi, havola oldindan körinişi. Siçqonça va klaviatura fokusida oçiladi, karta ustida turganda yopilmaydi, Esc yopadi; ekran çetiga qarab nişon ostida yoki tepasida joylaşadi.
- [Ikon](https://foxui.dev/r/icon.json): Sprite ikoni uçun öram: ölçam (sm/md/lg/xl/em), ohang va töldirilgan holat. <svg class="fx-icon"><use href="#id"/></svg>; rang matndan olinadi. Optik sozlamalar (4.21): qalinlik data-weight light/regular/bold (yoki --fx-icon-stroke; ota blokda data-icon-weight) — çiziqli ikonlar uçun, viewBox'dan qat'i nazar bir xil; data-grade high/low — töldirilgan ikonni qalinlaştiradi/ingiçkalaştiradi; kontur/töldirilgan juftligi data-fill="auto" — tanlangan holatda (aria-pressed, aria-selected, aria-current, aria-checked) töldirilgani körinadi.
- [Rasm](https://foxui.dev/r/image.json): Nisbati belgilangan rasm: yuklangunça xira joy (blur yoki kulrang), yuklanmasa zaxira holat («Rasm yuklanmadi»), ixtiyoriy imzo. Nisbat (CLS yöq) — data-ratio. Xulq ildizga data-state="loading|loaded|error" qöyadi. Xira joy rasmi — ildizda --fx-image-blur: url(...).
- [Rasm kesiş](https://foxui.dev/r/imagecrop.json): Avatar yoki muqova uçun rasmni kesiş: rasm ramka içida suriladi (siçqonça, barmoq, strelkalar) va kattalaştiriladi (slider, ğildirak, ikki barmoq, + −). Rasm ramkani doim töliq qoplaydi. Doira (avatar) yoki nisbat (1, 4/3, 3/4, 16/9); natija — canvas'dan JPEG Blob va kesiş törtburçagi.
- [CSV import](https://foxui.dev/r/import.json): CSV import ustasi (naqş, fx-wizard ustiga): 1) fayl — taşlaş yoki tanlaş (vergul yoki nuqtali vergul özi aniqlanadi), 2) ustunlarni maydonlarga moslaş — nomi böyiça avtomatik taxmin, majburiy maydonlar ✓ bilan, 3) tekşiruv — tayyor / xatoli / takror soni va xatolar jadvali (qator, maydon, qiymat, muammo), keyin import va natija (xatolar hisobotini CSV qilib yuklab oliş).
- [Kiruvçilar](https://foxui.dev/r/inbox.json): Kiruvçi xabarlar röyxati (inbox): kun böyiça guruhlangan qatorlar — öqilmagan nuqta, ijroçi avatari, matn, vaqt. Siçqonça ustida vaqt örnini tezkor amallar (öqildi, keyinga qoldiriş, arxiv) egallaydi; sensorli qurilmada amallar doim körinadi. Klaviatura: E arxiv, H keyinga, U öqildi. PDP Task Inbox kalibrida.
- [Indikator](https://foxui.dev/r/indicator.json): Istalgan element (ikon-tugma, avatar) burçagiga nuqta yoki son boğlaydi. Içida mavjud .fx-count yoki .fx-indicator__dot. Jarayon — nuqta atrofida halqa.
- [Joyida tahrir](https://foxui.dev/r/inline-edit.json): Matn oddiy körinadi; bosilsa yoki Enter bosilsa maydonga aylanadi. Enter yoki fokus ketişi — saqlaydi (qisqa yoritiş), Esc — bekor qiladi. Sarlavha, nom, yorliq uçun.
- [Maydon (input, textarea)](https://foxui.dev/r/input.json): Matn maydoni (input, textarea), yorliq, izoh. Majburiy belgisi (data-required), faqat öqiş, xato (data-invalid) va muvaffaqiyat (data-valid) holati. Input guruhi — oldi/orqa qism (birlik, ikon). Fieldset — guruh sarlavhasi bilan. Kengaytma: lg ölçam, maydon eni (data-width), gorizontal forma (data-layout="inline"), parolni körsatiş va Caps Lock ogohlantirişi, parol kuçliligi, tozalaş tugmasi, belgilar hisoblagiçi, textarea avto-ösişi, kod maydoni (xulq: data-fx-field). Kengaytma: data-variant=filled|borderless|underlined, .fx-field[data-float] (floating label), .fx-input-group__status (loading|valid|invalid), guruh içida .fx-btn.
- [Integratsiyalar katalogi](https://foxui.dev/r/integrations.json): Ilovaning «Integratsiyalar» sahifasi (4.189): sarlavha va «N ta ulangan» hisobi, qidiruv, toifa chip'lari (Hammasi, Ulanganlar, Tölov, Yetkaziş, Xabar, Buxgalteriya) va kartalar töri. Har karta: logo (harf + pastel fon yoki rasm), nom, toifa, qisqa izoh, holat (fx-status — nuqta + söz) va amallar. Holatlar data-state: connected (Ulangan → «Uziş», «Sozlaş»), disconnected (Ulanmagan → «Ulaş»), pending (Ulanmoqda…, tugma band), error (Xato + sababi → «Qayta ulaş»). Xulq (data-fx-integrations): filtr va qidiruv (ʻ va katta-kiçik harfsiz), ulaşda bekor qilinadigan «fx-integrations-connect» hodisasi {id, done(ok, xato)} — ilova OAuth oynasini oçib natijani done() bilan qaytaradi; uziş fxConfirm bilan tasdiqlanadi («fx-integrations-disconnect»). Natijalar jonli hududda aytiladi. data-layout: grid (standart) yoki list.
- [Interruption sahifasi](https://foxui.dev/r/interruption.json): Davom etişdan oldin biliş ŞART bölgan bitta muhim xabar sahifasi (4.198, GOV.UK «Interruption pages»): butun ekran (yoki katta blok) rangli panel — sarlavha, qisqa matn yoki 2–4 bandli röyxat, ixtiyoriy «Tuşundim» belgisi (required — forma özi tekşiradi, JS kerak emas) va bitta asosiy harakat: «Davom etiş» + ikkinçi darajali havola («Ortga», «Keyinroq»). Masalan: tölov qaytarilmasligi, tarif özgarişi oqibati, qonuniy talab, ma'lumot öçirilişidan oldin. data-tone: brand (standart — töq rangli panel), warning (ehtiyot — sariq fon, qalin çap çiziq), neutral. data-size: page (ekran balandligida, markazda) yoki block (sahifa içida).
- [Element kartasi](https://foxui.dev/r/item.json): Bitta qator-karta: çapda ikon plitkasi (yoki avatar), örtada sarlavha va izoh, öng çetda amal — tugma, almaştirgiç, tanlov, nişon, summa, menyu yoki strelka. Qurilmalar, ulangan hisoblar, sozlamalar, tölov usullari uçun. Bosiladigan bölsa — <a>/<button class="fx-item">, almaştirgiçli qator — <label class="fx-item">. Guruh (.fx-item-group): sarlavha + izoh + amal; data-layout="list" — bitta yuza, ajratgiçlar bilan (iOS sozlamalari kabi), data-layout="grid" — 2–3 ustunli tör. Variantlar: asosiy, secondary, tertiary, outline, ghost; ölçam sm/lg (heroui.pro Item Card'dan ilhom, kalibr — FoxUI).
- [JSON maydoni](https://foxui.dev/r/jsonfield.json): JSON matni uçun maydon (4.90): webhook tanasi, integratsiya sozlamasi, API sörovi. Çapda qator raqamlari, monoşrift; fokusdan çiqqanda (yoki Ctrl+Shift+F, «Formatlaş» tugmasi) tekşiradi va 2 böşliq bilan formatlaydi. Xato bölsa — xato qatori raqami «!» bilan belgilanadi, qator orqasi ajratiladi, pastda «4-qator, 1-ustun: xususiyat nomi qöştirnoqda bölişi kerak» kabi özbekça matn; textarea aria-invalid va setCustomValidity oladi (forma yuborilmaydi).
- [Tugma belgisi (kbd)](https://foxui.dev/r/kbd.json): Klaviatura tugmasi yoki birikmasi: çiziqsiz kulrang plitka, matn şriftida (mono emas; Ustoz 21.10, PDP namunasi). Kengaytma: .fx-kbd-combo (kombinatsiya, ixtiyoriy .fx-kbd-combo__sep “+”), data-size=sm.
- [Burçak / knob](https://foxui.dev/r/knob.json): Dumaloq tutqiç (4.89): qiymat yoki burçakni aylantirib tanlaş. Standart — min…max 270° yoy böylab (ovoz, harorat, intensivlik), data-type="angle" — 0…359° töliq aylana (gradient yönalişi, soya burçagi). Sudraş markaz atrofida, klaviatura APG slider böyiça. Örtada raqam va birlik (holat söz bilan), yaşirin input formaga.
- [Hududlar navigatsiyasi (F6)](https://foxui.dev/r/landmarks.json): Sahifa hududlari orasida klaviatura bilan sakraş (4.24): F6 — keyingi hudud (sarlavha → navigatsiya → asosiy mazmun → yon panel → pastki qism), Shift+F6 — oldingisi, oxiridan boşiga aylanadi. Hududga qaytilganda fokus u yerda oxirgi turgan elementga tuşadi (CRM'da: jadvaldan filtrga va qaytib aynan öşa qatorga). Pastda qisqa yorliq hudud nomini körsatadi. Hududlar — semantik teglar (header, nav, main, aside, footer, search) va nomli section/form/region.
- [Til almaştirgiç](https://foxui.dev/r/langswitch.json): Sayt tilini tanlaş: pill tugma — globus, joriy til va strelka; bosilganda tillar menyusi (fx-menu) oçiladi. Balandligi va yoyi mavzu almaştirgiç bilan bir xil — footer'da ikkalasi bir qator bölib turadi (Cursor footer namunasi, Ustoz 19.10). Bandlar havola (til boşqa manzilda, hreflang) yoki tugma (til şu sahifada, «fx-lang» hodisasi). Til nomi öz tilida yoziladi (endonim), tanlangani belgi bilan. data-apply="html" — tanlanganda <html lang> ham özgaradi (faqat xulq).
- [Joylaşuv primitivlari](https://foxui.dev/r/layout.json): Oraliq tokeni bilan joylaş: fx-stack (vertikal), fx-cluster (qatorga öraladigan guruh), fx-grid (auto-fit yoki aniq ustun), fx-container (markazlangan eni), fx-ratio (tomonlar nisbati). Oraliq — data-gap="0…12" (space-token).
- [Huquqiy sahifa](https://foxui.dev/r/legal.json): Maxfiylik siyosati, foydalaniş şartlari, ommaviy oferta va cookie siyosati uçun sahifa şabloni (4.177): sarlavha va meta (kuçga kirgan sana, oxirgi yangilaniş, versiya), çapda yopişqoq mundarija (fx-toc — öqilayotgan bölimni belgilaydi), öngda avtomatik raqamlangan bölimlar (1., 1.1. — CSS hisoblagiç) va har bölim boşida «Qisqaça» — oddiy tilda xulosa. FoxUI bergan matn — faqat NAMUNA: .fx-legal__sample ogohlantirişi şablon yuristsiz işlatilmasligini aniq körsatadi (haqiqiy matn qöyilgaç olib taşlanadi). Çop etişda mundarija yaşirinadi.
- [Legenda](https://foxui.dev/r/legend.json): Mustaqil legenda: rang belgisi + nom (+ qiymat). Grafik, uluş çiziği va köp bölakli progress yonida. Rollar 60/30/10 (ink, brend, aksent, xavf, kontekst); belgi şakli — kvadrat, nuqta yoki çiziq. Tugma bölsa (aria-pressed) seriyani yoqib-öçiradi (#62). Interaktiv (4.126): data-interactive + data-fx-legend + aria-controls — bandni bosiş boğlangan grafik seriyasini yaşiradi yoki qaytaradi (aria-pressed, oxirgi seriya öçmaydi).
- [Linza](https://foxui.dev/r/lens.json): Rasm ustida kursor atrofidagi doira kattalaştirib körsatiladi (Magic UI va Aceternity Lens) — mahsulot tafsiloti, xarita, çizma yoki skrinşotdagi mayda yozuv uçun. data-zoom — kattalaştiriş (1,5–5, standart 2), data-size — oyna ölçami, data-shape="square" — törtburçak oyna. Barmoqda bosib uşlab surilsa işlaydi; klaviaturada konteyner fokuslanadi — oyna markazda çiqadi, strelkalar suradi, + / − kattalaştiradi, Esc yopadi. .fx-lens__hint — ixtiyoriy yöl-yöriq yorliği.
- [Xat (asosçiga taklif)](https://foxui.dev/r/letter.json): Bitta odamga — asosçi, muallif, rahbarga — töğridan-töğri xat bloki: çapda kimga (sarlavha, bir gap, avatar va ism), öngda bitta yaxlit xat yuzasi — maydon, içidagi pastki qatorda yuboruvçi, belgilar sanoği va «Yuboriş». Uç holat: kirgan (forma), mehmon (butun yuza — kirişga havola, edge keşga mos), yuborildi (rahmat). Soyasiz, brend tusidagi fon. Fox MB sörovi (Manbaa «Asosçiga taklif», 21.10).
- [Lightbox](https://foxui.dev/r/lightbox.json): Rasm körgiç: töliq ekran native <dialog> — katta rasm, yaqinlaştiriş (bosiş yoki ⊕; siçqonça siljitilsa rasm suriladi), oldingi/keyingi, sanagiç, imzo. Esc yopadi, ← → almaştiradi, gorizontal suriş ham almaştiradi. Içki tuzilmani xulq özi quradi; oçuvçilar data-fx-lightbox-target="<dialog id>".
- [Havola](https://foxui.dev/r/link.json): Boşqa sahifa yoki manzilga ötadigan matn. Brend rangida, tagi çizilgan; ustiga borilganda çiziq yöqoladi. Kengaytma: target=_blank / data-external ↗ ikoni (matnda “yangi oynada” bölsin), data-variant=more (“Hammasi →”), data-visited (ixtiyoriy), bosmada manzil çiqadi. Harakat (4.37): data-underline="grow" — tinç holatda xira çiziq, ustiga borilganda yoki fokusda töliq çiziq boşidan oxiriga çiziladi va çiqişda oxiriga qarab yiğiladi (RTL'da öngdan); data-weight="bold" — qalinroq çiziq. Menyu, footer va maqola içida işlaydi; harakat kamaytirilsa çiziq darhol paydo böladi.
- [Havola oldindan köriş](https://foxui.dev/r/linkpreview.json): Havola ustiga kursor olib borilganda (yoki fokusda) sahifaning kiçik rasmi, sarlavhasi, qisqa tavsifi va domeni çiqadi (4.81) — foydalanuvçi bosmasdan qayerga ketişini köradi. Xulq hover kartaniki (data-fx-hovercard: keçikiş, Esc, karta ustida yopilmaydi); bu komponent faqat körinişni beradi: class="fx-hovercard fx-linkpreview". Rasm — oldindan tayyorlangan OG rasm (1,91:1).
- [Röyxat](https://foxui.dev/r/list.json): Qatorlar röyxati: çapda avatar yoki belgi, örtada sarlavha va meta (bitta qator, «…» bilan), öngda qiymat yoki amal. Butun qator havola bölişi mumkin. Variantlar: belgilanadigan qator (.fx-check), amalli qator, ixçam, kartali. Kengaytma: .fx-list__lead (çap slot), data-divider=none, data-focus=inset.
- [Variantlar röyxati](https://foxui.dev/r/listbox.json): Combobox va buyruqlar oynasining içki röyxati: guruh sarlavhasi, variant (ikonka yoki avatar, nom, izoh, öngda maslahat), faol variant, köp tanlovda ✓ (aria-multiselectable), «Yaratiş» varianti, böş holat. Özi alohida işlatilmaydi.
- [Röyxat sahifasi](https://foxui.dev/r/listpage.json): Röyxat sahifasi qolipi (PDP «Masdar»): sarlavha + son + asosiy amal → xulosa tasmasi → saqlangan körinişlar → filtr qatori → jadval → sahifalaş; ommaviy panel jadval ostida suzadi. Qolip faqat tartib beradi, komponentlar — alohida.
- [Yuklaniş qoplamasi](https://foxui.dev/r/loading.json): Blok ustida xira qatlam + aylana: kontent joyida qoladi, ota aria-busy="true" bölsa körinadi. Variantlar: xira (andoza), blur, butun sahifa.
- [Logolar bulutiga işonç](https://foxui.dev/r/logos.json): Ijtimoiy isbot qatori (4.175): qisqa sarlavha («… jamoalar işonadi») va mijoz yoki hamkor logolari. Logolar kulrang va biroz xira — sahifani bezamaydi, hover yoki fokusda asl rangiga qaytadi. data-layout: row (standart — markazda oqim), grid (çegarali kataklar). Harakatli variant — röyxatni .fx-marquee içiga qöying (.fx-marquee__track fx-logos__list). Logo — currentColor'li SVG yoki rasm.
- [Magnit tugma](https://foxui.dev/r/magnet.json): Kursor yaqinlaşganda tugma unga biroz tortiladi (Aceternity Magnetic Button): tugmaning özi kuç uluşida, içidagi yozuv (.fx-magnet__label) yana biroz köproq siljiydi — qatlamli «tirik» his. Maydon tugma atrofida (data-range, px), kuç data-strength (0–1, standart 0,35), eng köp siljiş çegaralangan — tugma qoçib ketmaydi. Kursor ketsa, prujina bilan joyiga qaytadi. data-shape="orb" — landing uçun katta yumaloq CTA. Faqat siçqonçada; klaviatura, barmoq, harakat kamaytirilgan, calm va none rejimda tugma joyida.
- [Xarita markeri](https://foxui.dev/r/mapmarker.json): Xarita ustidagi marker (4.206, Base Web «Map Marker», Aceternity «3D Pin»): MapLibre, Leaflet yoki Yandex xaritasiga HTML marker sifatida qöyiladigan tugma. data-type: pin (standart — tomçi şaklli, içida ikon yoki harf, uçi aniq nuqtaga tegadi), price (narx tabletkasi dumli — kvartira, e'lon, yetkaziş narxi; körilgani data-seen bilan xira), dot (nuqta — «Siz şu yerdasiz», data-pulse bilan tölqin), cluster (yaqin markerlar soni, data-size sm/md/lg — bosilsa xarita yaqinlaşadi). Tanlangan — aria-pressed="true": kattaroq, brend rangida, biroz kötariladi va nom yorliği oçiq qoladi. Hover/fokusda nom yorliği (.fx-mapmarker__tip) çiqadi. Rang data-color (6 pastel). Namuna uçun .fx-mapmarker__map — haqiqiy xaritasiz katak fon; joy --fx-mapmarker-x / --fx-mapmarker-y.
- [Markdown muharrir](https://foxui.dev/r/markdown.json): Markdown muharrir: «Yoziş / Köriş» tablari, formatlaş paneli (qalin, qiya, sarlavha, havola, kod, iqtibos, röyxatlar, vazifalar, @eslatish), Ctrl+B/I/K, röyxatni Enter bilan davom ettiriş, @ bilan odamni tanlaş (fx-mention), rasm/faylni taşlaş, joylaş yoki biriktiriş. «Köriş» xavfsiz HTML çizadi.
- [Yugurik qator (marquee)](https://foxui.dev/r/marquee.json): Logolar, fikrlar yoki teglar çeksiz suriladigan qator (4.71). Tasma bir marta nusxalanadi (nusxa ekran öquvçidan yaşirin), tezlik uzunlikdan hisoblanadi — har ekranda bir xil (data-speed, px/soniya, standart 40). Hover yoki klaviatura fokusi kelganda töxtaydi, ekrandan çiqsa pauza. Ikki çetda yumşoq söniş. Vertikal variant — fikrlar ustuni uçun; data-direction="reverse" — teskari yönaliş (ikki qatorli «qarama-qarşi» bezak). JS bölmasa yoki harakat kamaytirilsa — oddiy gorizontal scroll.
- [Maskali kiritiş](https://foxui.dev/r/mask.json): Şablon böyiça avtomatik formatlanadigan maydon: telefon +998 (__) ___-__-__, karta ____ ____ ____ ____. «#» — raqam, qolgani doimiy belgi; +998 bilan joylansa ham töğri kesiladi. Formatsiz qiymat — dataset.raw.
- [Masonry](https://foxui.dev/r/masonry.json): Balandligi har xil kartalar (skrinşot, fikr, maqola) ustunlarga ziç joylanadi (4.73). Brauzer CSS masonry'ni qöllasa (display: grid-lanes yoki grid-template-rows: masonry) — kartalar qator tartibida; aks holda zaxira — CSS ustunlar (tartib ustun böylab yuqoridan pastga). Ustun soni kenglikka qarab özi özgaradi (eng tor ~15rem), data-cols — yuqori çegara. JS kerak emas.
- [Material (şişa)](https://foxui.dev/r/material.json): Material öqi (tajriba, 20.10 — DS tadqiqoti: iOS 26, HyperOS 3, One UI 8.5, ColorOS 16, HarmonyOS 6, Telegram «şişa»ga ötdi): data-fx-material="glass-weak | glass | glass-strong" — uç daraja (HarmonyOS kabi). Faqat ustki qatlamlar şişaga aylanadi: popover, menyu, dialog, varaq, buyruqlar oynasi, hover karta, yopişqoq tepa panel va sayt sarlavhasi; kartalar va jadvallar tekis qoladi (öqiliş birinçi). Tizimda «kamroq şaffoflik» yoki Harakat «yöq» bölsa — töliq tekis. Berilmasa — heç narsa özgarmaydi. <html> yoki istalgan blokka qöyiladi.
- [Jamoa a'zolari](https://foxui.dev/r/members.json): Jamoa a'zolari va takliflar sahifasi (naqş): örinlar hisobi (5 / 10), email bilan taklif (rol tanlaş bilan), a'zolar jadvali — rol, holat (Faol / Kutilmoqda), oxirgi faollik, amallar. Taklif darhol «Kutilmoqda» qatori bölib qöşiladi; olib taşlaş va bekor qiliş fxConfirm bilan tasdiqlanadi.
- [Mention](https://foxui.dev/r/mention.json): Matn maydonida «@» yozilsa odamlar röyxati oçiladi: yozgan sari filtrlanadi; ↑ ↓ va Enter/Tab «@nom» ni joylaydi, Esc yopadi. Izoh, topşiriq, xabar maydonlari uçun.
- [Menyu](https://foxui.dev/r/menu.json): Tugma ostida oçiladigan amallar röyxati: bandlar, guruh sarlavhasi, ajratgiç, tugmalar maslahati, xavfli band, belgilanadigan bandlar. Native popover + foxui.js (klaviatura). Içki menyu (→ bilan oçiladi) va menyu içida qidiruv ham bor. Moslaşuvçi (4.26): data-fx-adaptive — telefonda (< 640 px) pastki varaqqa aylanadi.
- [Menubar](https://foxui.dev/r/menubar.json): Ilova menyu qatori (4.148, APG menubar): «Fayl · Tahrir · Köriniş · Yordam» — hisobot konstruktori, hujjat tahrirlovçi, jadval muharriri kabi köp buyruqli ilovalar uçun. Har trigger ostida menyu; içki menyu (Eksport → Excel/PDF), belgilanadigan (menuitemcheckbox) va bittasi tanlanadigan (menuitemradio) bandlar, tugma yorliği (kbd), ajratuvçi, öçiq band. Bitta menyu oçiq bölsa, qöşni triggerga siçqonça yoki ← → bilan ötilganda u ham oçiladi. Tanlov — fx-menubar-select hodisasi.
- [Xabar (AI)](https://foxui.dev/r/message.json): Suhbat xabari: AI agent yoki odam — avatar, ism, vaqt, matn; foydalanuvçi xabari öngda brend tusida. Qöşimça: «yozmoqda» belgisi (.fx-typing) va AI yorliği (.fx-ai-label). Kengaytma: data-group=cont (ketma-ket, avatarsiz), .fx-message__variants (2/3), data-state=editing|error, .fx-message__retry, matn içida kod va jadval.
- [Ölçagiç](https://foxui.dev/r/meter.json): Ma'lum diapazondagi qiymat: siğim, ball, mezon. Progress'dan farqi — jarayon emas, holat: maqsad belgisi (--fx-meter-target), zonalar (past/örta/yuqori, data-zones), şkala yorliqlari. Asosiy şakl — çiziqli (#54, WDS «Grafiklar»); bitta yirik körsatkiç kartasi uçun yarim doira (data-shape="gauge", 4.115): raqam markazda, maqsad çiziği, zonalar. Baholi şkala (data-variant="graded", Manbaa'dan otaga 19.10): 0–100 işonç yoki sifat bali — qizildan yaşilgaça gradient, har 10 ballda kesik, ▼ belgi, katta son va daraja sözi; <details> bölsa oçilganda qismlar röyxati, data-shape="tile" — kvadrat nişon.
- [Pastga qadalgan yoziş oynalari](https://foxui.dev/r/minichat.json): Ekranning pastki öng burçagiga qadalgan kiçik oynalar (4.201, Gmail va Salesforce «Docked composer»): iş sahifasidan çiqmasdan bir neçta çat suhbati yoki yangi xat yonma-yon oçiq turadi. Har oyna: sarlavha tugmasi (avatar, nom, holat, yiğilganda öqilmaganlar soni) — bosilsa yiğiladi/oçiladi; «Kattalaştiriş» (aria-pressed) va «Yopiş»; tana — xabarlar (.fx-minichat__log) yoki xat maydonlari (.fx-minichat__fields) va pastda yoziş qatori. data-state: open, minimized (faqat sarlavha), expanded. Oçiq oynalar data-max dan oşsa eng eskisi özi yiğiladi. Xulq (data-fx-minichat): Esc oynani yiğadi va fokusni sarlavhaga qaytaradi; yopilganda fokus qöşni oynaga ötadi; hodisalar fx-minichat-toggle, fx-minichat-close (bekor qilinadigan — «Qoralama saqlansinmi?» uçun); root.fxMinichat.add(oyna). data-tone="brand" — sarlavha brend rangida. data-size="block" — hujjat namunasi (fixed emas). Telefonda oçiq oyna töliq kenglikda, yiğilganlar ostida qator böladi.
- [Qurilma ramkasi](https://foxui.dev/r/mockup.json): Skrinşot yoki jonli HTML'ni brauzer (manzil qatori va uçta nuqta) yoki telefon (yumaloq ramka, kesik) ramkasida körsatiş (4.75) — landing, hujjat va taqdimot uçun. Ramka faqat CSS: rasm faylisiz, ranglar mavzudan, yoruğ va qoronğida moslaşadi. Ekran içiga img, video yoki FoxUI bloklari qöyiladi; brauzer nisbati 16:10 (data-ratio="auto" — kontent balandligi), telefon 9:19,5.
- [Şakl morfi](https://foxui.dev/r/morph.json): Tugma bosilganda va tanlanganda yoyi prujina bilan özgaradi (M3 Expressive shape morph): standart — yumaloq tugma bosilganda yoki tanlanganda kvadratroq böladi; data-fx-morph="round" — aksinça. Faqat burçak özgaradi, ölçam va joy sakramaydi. .fx-morph — tugma guruhi (oraliq bilan) yoki data-variant="connected" — yopişgan guruh: içki burçaklar kiçik, tanlangan tugma töliq yumaloqlanadi. Tanlangan holat aria-pressed / aria-checked / aria-selected yoki içidagi radio/checkbox orqali — JS şart emas (aria-pressed uçun togglegroup xulqi). Harakat kamaytirilsa şakl darhol almaşadi.
- [Harakat qatlami](https://foxui.dev/r/motion.json): Zamonaviy CSS harakat qatlami. Prujina sxemasi (4.25, M3 Expressive): --fx-spring-spatial-fast|default|slow — joy/ölçam uçun (biroz oşib ketadi), --fx-spring-effects-* — rang/şaffoflik uçun (oşib ketmaydi); qiymat transition'ga tayyor juftlik, calm'da sakramaydi, expressive'da sekin prujina sakraydi; fx-spring data-spring="spatial|effects|both" — tayyor ötiş. Scroll'ga boğliq kiriş (4.31): data-fx-reveal="up|fade|blur|scale" — blok köriniş maydoniga kirganda paydo böladi (animation-timeline: view()), qöllanmasa darhol körinadi. Öqiş progress çiziği (4.32): fx-scroll-progress — sahifa aylantirilgani sari töladi (scroll() timeline). Aylanuvçi raqam (4.35): fx-ticker + data-fx-ticker — qiymat özgarganda raqamlar barabandek aylanadi (özbekça format: 126 400 000), birinçi aylaniş körinişda.
- [Xabar amallari paneli](https://foxui.dev/r/msgactions.json): Javob ostidagi ikonli amallar: nusxa (✓ bilan tasdiqlanadi), qayta yaratiş, yoqdi/yoqmadi, tahrir, variantlar tarmoği ‹ 2/3 ›. Toolbar naqşi: Tab bilan bitta kiriş, içida ← →. data-reveal="hover" — desktop'da faqat xabar ustida körinadi.
- [Köp tanlov](https://foxui.dev/r/multiselect.json): Bir neçta variant tanlanadigan maydon: tanlanganlar maydonda chip, ostida belgili (checkbox şaklli) röyxat. Yozib qidiradi, Enter/Space belgilaydi, Backspace oxirgi chipni olib taşlaydi; «+n» (data-visible), «3 ta tanlandi» (data-mode="count"), eng köpi (data-max), «Hammasini tanlaş», forma uçun yaşirin maydonlar (data-name) (#28).
- [Yon menyu](https://foxui.dev/r/nav.json): Yon menyu (S1): band 40, ikonka + nom (bitta qator «…»), son — xira pill, tanlangan — brend tusi; guruh sarlavhasi, içki bandlar uzuq yöl çiziğida, pastki bandlar tagda. Yiğilgan holat (data-collapsed) — ikonkalar ustuni, karkas xulqi bilan. Kengaytma: data-pinned (sevimlilar guruhi), .fx-nav__new (“Yangi” belgisi) / [data-new] nuqta, .fx-nav__search.
- [Bildirişnoma sozlamalari](https://foxui.dev/r/notifprefs.json): Bildirişnoma sozlamalari matritsasi (naqş): qatorlar — hodisalar (Savdo, Vazifalar, Xavfsizlik guruhlari), ustunlar — kanallar (Email, Telegram, Ilova). Ustun sarlavhasida va qator oxirida «hammasi» (qisman — «–»). Ulanmagan kanal öçiq va «Ulaş» havolasi bilan; xavfsizlik xati — «majburiy».
- [Bildirişnomalar markazi](https://foxui.dev/r/notify.json): Qönğiroq tugmasi (öqilmaganlar soni bilan) bosilsa panel oçiladi: «Hammasi / Eslatmalar» tablari, «hammasini öqilgan deb belgilaş», kun böyiça guruhlangan kiruvçilar (fx-inbox). Son va tugma yorliği özi yangilanadi.
- [«Hozir» paneli](https://foxui.dev/r/now.json): Jonli holat plitkalari (2–4 ta): ikon + katta qiymat (soat, quyoş, harorat, kurs, bayram) + izoh + manba. Soat — data-fx-clock: har soniya yangilanadi, vaqt mintaqasi data-tz (IANA), JS'siz — server vaqti; qolgani serverdan. Manba eskirgan bölsa (data-stale) — manba qatori ogohlantiriş rangida, sana bilan. Tor joyda 2×2, toq oxirgisi butun qator. Manbaa'dan (⑤, Fox MB topşirdi, 20.10).
- [Son maydoni](https://foxui.dev/r/number.json): Butun yoki önli son: − / + tugmalari (çegarada öçadi) va qölda yoziş. Native input type="number", min/max/step brauzerda; tugmalar foxui.js'da. Kengaytma: data-size=sm|lg, .fx-number__affix (valyuta/foiz/birlik), data-align=end. Formatlaş (4.96): data-format="number|percent|compact" — yozilayotganda minglik ajratgiç (1 200 000), kasr vergul bilan, foiz va qisqa köriniş («1,2 mln»); formaga xom son yaşirin inputda ketadi. Sudrab qiymat va ğildirak (4.97): data-scrub — .fx-number__scrub yorliğini çapga-öngga sudraş qiymatni özgartiradi (data-scrub="4" — bir qadam neça pikselda; Shift ×10, Alt ×0,1), data-wheel — maydon fokusda bölganda siçqonça ğildiragi (fokussiz sahifa odatdagidek aylanadi). Maket, rasm va grafik muharrirlari uçun.
- [Ulaniş / oflayn banneri](https://foxui.dev/r/offline.json): Internet uzilganini va qaytganini xotirjam bildiruvçi pastki tabletka (4.163, #74): «Internet yöq — özgarişlar qurilmada saqlanib turibdi» (+ «Qayta uriniş») va qaytganda qisqa «Internet qayta ulandi» (3 soniyadan keyin yaşirinadi). foxui.js navigator.onLine va online/offline hodisalarini kuzatadi — sahifaga bir marta qöyiladi. Teskari rangli (snackbar), belgi + söz bilan; data-position: pastda (standart), tepada yoki hujjat ichida (inline).
- [Onboarding oqimi](https://foxui.dev/r/onboarding.json): Yangi foydalanuvçini kutib oliş oqimi (4.182): Xuş kelibsiz (vazifa tanlaş kartalari) → Profil → Jamoa taklifi → Tayyor. fx-wizard ustiga qurilgan naqş: çap ustunda brend, vertikal qadamlar (holati bilan) va yordam havolasi; öngda joriy qadam paneli va Orqaga / Davom etiş tugmalari. Qadam almaşganda panel yondan suriladi, yakunda ✓ belgisi prujina bilan çiqadi. Tekşiruv, fokus va qadam holatlari — wizard xulqi; telefonda bitta ustun. data-layout="page" — butun ekran (çegarasiz).
- [Şar (orb)](https://foxui.dev/r/orb.json): AI yordamçining abstrakt «yuzi» — Siri şaridan ilhom: yuz, qöl, köz yöq, şuning uçun çizgi xatosi bölmaydi. Bitta rangdan (standart — brend, data-color — 6 toifa rangi, AI yordamçida — saytning brend rangi) töq yadro, uçta suzuvçi rang tölqini va şişasimon yaltiroq yasaladi. Holatlar: tinç (sekin nafas), öylayapti (tölqinlar tezlaşadi va içkariga buraladi), gapiryapti (urib turadi), menejerga ulaş (bir marta çaqnaydi). Içida Siri kabi ovoz tölqinlari — data-fx-orb bilan canvas lentalar (JS ~2 KB; JS bölmasa yoki harakat kamaytirilsa — gradient şar); AI yordamçida data-face="orb" bilan.
- [Orbita](https://foxui.dev/r/orbit.json): Markaz (mahsulot logosi) atrofida bir yoki ikki halqada aylanuvçi ikonlar (4.78) — «qaysi xizmatlar bilan işlaydi» yoki modullar töplamini körsatiş uçun. Töliq CSS: halqa aylanadi, ikon teskari aylanib tik turadi, joyi avtomatik (halqada 8 tagaça). Çeksiz aylaniş faqat körinişda, hover yoki fokusda töxtaydi; harakat kamaytirilganda harakatsiz.
- [Taşkiliy tuzilma](https://foxui.dev/r/orgchart.json): Taşkiliy tuzilma (4.139): rahbar → bölimlar → xodimlar daraxti, tepadan pastga, boğlovçi çiziqlar bilan. Tugunlar yiğiladi (kartoçka ostidagi «−» / «+N» — yaşirin odamlar soni), kenglik siğmasa gorizontal aylanadi; data-layout="list" — tor ekran uçun çekinişli röyxat. Kartoçka: avatar, ism, lavozim; bölim uçun data-kind="unit" (avatarsiz). APG treeview klaviaturasi.
- [OTP / PIN kod](https://foxui.dev/r/otp.json): Bir martalik kod yoki PIN: har belgi alohida katakda. Yozilganda keyingi katakka ötadi, Backspace böş katakda orqaga qaytaradi, qöyiş (paste) va SMS-avto-töldiriş hamma kataklarga taqsimlanadi. Raqam yoki harf-raqam, yaşirin (●), 4/6 katak, ajratgiç, xato (silkiniş) va «Qayta yuboriş» taymeri.
- [Overflow «+n»](https://foxui.dev/r/overflow.json): Bitta qatorga siğmagan teglar, avatarlar yoki amallar yaşiriladi, oxirida «+n» tugmasi çiqadi (aria-label «yana 3 ta»). Bosilsa hammasi qatorlarga öraladi.
- [Sahifa sarlavhasi](https://foxui.dev/r/page-header.json): Sahifa boşi: nom + soni, bitta qator izoh, öngda neytral amallar va bitta asosiy tugma. Sarlavha şrifti va moslaşuvi tokenlardan. Örinlar (2.140): tepada orqaga havola, meta qatori (holat, sana, muallif), ostida tablar, amallarning ortiqçasi «…» menyuda. Scrollda yiğiliş (4.155): data-collapse — yopişqoq, aylantirilganda katta sarlavha kiçik qatorga aylanadi, izoh va meta yaşirinadi (faqat CSS, scroll-driven).
- [Oldingi / keyingi](https://foxui.dev/r/pager.json): Hujjat va maqola oxiridagi ikki katta havola (#88): oldingi (çapda) va keyingi (öngda) sahifa nomi bilan. Bittasi bölmasa ikkinçisi öz joyida qoladi. Raqamli sahifalaş uçun — pagination.
- [Sahifalaş](https://foxui.dev/r/pagination.json): Jadval ostida: «1–20 / 248» va oldingi/keyingi; kerak bölsa sahifa raqamlari (joriysi brend tusi), oraliq «…». Variantlar: minimal (faqat ‹ ›), sahifa hajmi tanlovi (native select), «Yana yuklaş» (cursor/çeksiz röyxat, körsatilgani çiziği bilan).
- [Parallaks qatlamlar](https://foxui.dev/r/parallax.json): Sahifa aylantirilganda qatlamlar turli tezlikda siljiydi (Aceternity Parallax Scroll va Hero Parallax): har [data-fx-parallax] element öz tezligida — slow, standart, fast yoki reverse (teskari). data-axis="x" — gorizontal qatorlar (qöşni qatorlar teskari yönalişda sirpanadi). JS'siz: scroll-driven animatsiya (animation-timeline: view()), şuning uçun asosiy oqimni band qilmaydi. Siljiş masofasi --fx-motion-shift-lg tokenidan; harakat kamaytirilsa, data-fx-motion="none" yoki brauzer qöllamasa — qatlamlar joyida turadi. .fx-parallax — çetidan çiqqanini kesuvçi konteyner.
- [Zarraçalar](https://foxui.dev/r/particles.json): Hero yoki CTA bloki ortidagi canvas qatlam (4.66): sekin suzuvçi nuqtalar, kursor yaqinida itariladi; data-links bilan yaqin nuqtalar ingiçka çiziq bilan boğlanadi («tarmoq», integratsiya mavzusi). Ota blok position: relative boʻlsa, butun maydonni egallaydi, bosilmaydi va matn ostida qoladi. Rang mavzudan (matn yoki brend rangi) — yorugʻ va qorongʻida oʻzi moslashadi. Koʻrinmasa chizmaydi; harakat kamaytirilganda statik kadr.
- [Bosqiç yöli](https://foxui.dev/r/path.json): CRM bitimi yoki ariza bosqiçlari chevronlar qatorida (4.140, SLDS «Path»): ötilgan — ✓ belgisi, joriy — töldirilgan va qalin, keyingilari — xira, yöqotilgan — ✕. Bosqiçni bosib köriş (tafsilot, körsatma) va öngdagi tugma bilan «Bosqiçni yakunlaş» yoki boşqa bosqiçni joriy qiliş. Telefonda faqat joriy bosqiç nomi yoziladi.
- [Içkaridan köriş paneli](https://foxui.dev/r/peek.json): Röyxat qatori bosilsa tafsilot paneli röyxat ustidan öng çetdan çiqadi — röyxat joyida qoladi, kontekst yöqolmaydi. Tepada oldingi/keyingi (J/K), hisoblagiç va yopiş (Esc). Modal emas.
- [Odam qatori](https://foxui.dev/r/persona.json): Avatar + ism + ikkinçi qator (rol, poçta, holat) + ixtiyoriy öng tomonda amal. Jadval, röyxat, izoh, faoliyat lentasida takrorlanadi. Ism — haqiqiy matn.
- [Bosqiç banneri (Alfa / Beta)](https://foxui.dev/r/phase.json): Sayt yoki xizmat tepasidagi ingiçka qator (4.164, GOV.UK Phase banner): «BETA — Bu sayt oçiq quriladi, fikringizni yozing». Mahsulot hali rivojlanayotganini halol aytadi va fikr bildiriş havolasini doim köz oldida tutadi («build in public»). data-phase: alpha, beta (standart), preview; ixtiyoriy öng tomonda versiya yoki sana. data-variant="pill" — hero ustida markazdagi ixçam tabletka.
- [Telefon raqam](https://foxui.dev/r/phone.json): Telefon maydoni mamlakat tanlagiçi bilan: çapda bayroq va kod (standart — Özbekiston +998), öngda raqam mamlakat niqobi bilan («90 123-45-67»). Formaga E.164 qiymat (+998901234567) yaşirin inputda ketadi. Töliq raqam yozilsa yoki joylansa («+7 701 …») mamlakat özi aniqlanadi.
- [Pin tugmasi (☆)](https://foxui.dev/r/pin.json): Sahifa yoki körinişni çap relsga pin qiliş tugmasi (Ustoz 21.10, PDP rels naqşi): ☆ — pin qilinmagan, ★ — pin qilingan (ogohlantiriş rangida). Bosilganda holat almaşadi va «fx-pin» hodisasi çiqadi (detail: href, nom, on) — ilova saqlaydi (har a'zoning özi, serverda). Pinlar relsda ajratuvçi ostida — fx-rail .fx-rail__pins.
- [Reja / vazifalar navbati](https://foxui.dev/r/plan.json): Agent rejasi: sarlavha, progress «3/7» va qadamlar. Holatlar: bajarildi (✓), joriy (halqa pulsatsiyasi, aria-current="step"), kutmoqda (böş halqa), ötkazib yuborildi (çiziq). <details> bölsa yiğiladi.
- [Popover](https://foxui.dev/r/popover.json): Tugma yonida oçiladigan qatlam: qisqa ma'lumot, kiçik forma, amallar röyxati. Native popover atributi + anchor positioning (qöllanmasa — ekran markazida). Eni köpi bilan 320; ixtiyoriy strelka (data-arrow), ölçam sm/lg, amallar qatori (popconfirm). Kod bilan oçilsa langarni bering: el.showPopover({ source: tugma }). Kengaytma: .fx-popover__head / .fx-popover__foot (çiziqli sarlavha va pastki qism). Moslaşuvçi (4.26): data-fx-adaptive — telefonda (< 640 px) pastki varaqqa aylanadi.
- [Hozir kim bor](https://foxui.dev/r/presence.json): Hamkorlik belgilari: sahifada hozir kimlar borligini körsatuvçi ustma-ust avatarlar (hover/fokusda ism va holat), “yozmoqda” indikatori va jonli kursor yorliği. Faqat köriniş — ma'lumotni (kim, qayerda, nima qilyapti) ilova real vaqtda yangilaydi.
- [Narx jadvali](https://foxui.dev/r/pricing.json): Obuna narxlari bölimi (4.169, #56) — FoxUI obunasining özi uçun ham: sarlavha, oylik/yillik almaştirgiç (radio guruh, JS'siz — narxlar [data-period] böyiça almaşadi, plita prujina bilan sirpanadi), tarif kartalari (nom, izoh, narx, CTA, ✓/— imkoniyatlar), tavsiya tarif (data-featured: brend çegarasi, «Eng ommabop» belgisi, data-fx="beam" bilan çegara nuri), şartlar qatori (1 litsenziya = 1 kişi, 3 qurilma; lifetime yöq) va taqqoslaş jadvali (fx-table). Narx hali belgilanmagan bölsa — .fx-pricing__amount[data-soon] («Narx — tez kunda»).
- [Bosma qatlami](https://foxui.dev/r/print.json): Çop etiş (Ctrl+P) uçun global qatlam (4.14): navigatsiya, tugmalar, toast va suzuvçi oynalar yaşirinadi, ilova karkasi bitta ustunga yoyiladi, soyalar öçadi, jadval sarlavhasi har betda takrorlanadi, qator va kartalar betda bölinmaydi. data-print bilan boşqariladi: hide · only (faqat bosmada) · break-before / break-after (yangi bet) · avoid · urls (taşqi havola manzili qavsda). .fx-print — bosmaga tayyor hujjat örami (hisob-faktura, dalolatnoma, hisobot): sarlavha, rekvizitlar, amallar (bosmada yaşirin) va yakun.
- [Ustuvorlik](https://foxui.dev/r/prio.json): Işning ustuvorligi: 3 ta ösib boruvçi ustunça — past, örta, yuqori; şoşilinç — xavf rangida; yöq — xira. Doim söz bilan (aria-label yoki yonida matn). Belgi varianti data-variant="mark" (Ustoz Figma maketi, 21.10): Jira kabi 10 daraja — trivial, lowest/lower/low (moviy chevronlar pastga), minor, high/higher/highest (qizil yuqoriga), critical, blocker. Yorliq .fx-prio-tag: pastel kapsula, oq doirada belgi — urgent ★, high ✦, normal ▲, low ○.
- [Progress](https://foxui.dev/r/progress.json): Çiziqli ölçagiç, balandligi 8. Qiymat CSS özgaruvçisida: style="--fx-progress-value: 40%". Rang: standart (brend), data-tone success/warning/error yoki data-color (toifa rangi). Qiymat noma'lum bölsa (aria-valuenow yöq) — bölak trekda sirpanadi. Ölçamlar xs/sm/lg; yorliq + qiymat qatori (.fx-progress-row); köp bölakli (data-variant="stacked", .fx-progress__seg — rol bilan). Aylana (data-shape="circle"): halqa, markazda foiz yoki ikon; aniq va noaniq holat; uç ölçam. Tölqinli variant (4.42, M3 Expressive): data-variant="wavy" — tölgan qism tölqinsimon çiziq, qolgan yöl tekis trek (oraliğida böşliq); 100 %da tölqin tinçlanadi. Aylana bilan (data-shape="circle") — halqaning özi tölqinsimon. Aniq qiymatda tölqin statik, noaniq holatda bölak sirpanadi. Aniq qiymatda trek tölgan qismdan kiçik böşliq bilan boşlanadi va öng uçida tugaş nuqtasi turadi (M3 stop indicator) — iş qayerda tugaşi körinadi; 100 % da yöqoladi.
- [Uzun matn (prose)](https://foxui.dev/r/prose.json): CMS yoki Markdown'dan kelgan HTML'ga oraliq va uslub beradi: sarlavhalar, abzaslar, röyxatlar, iqtibos, kod, jadval, rasm, çiziq. Öqiş eni ~65 belgi; sm/md/lg.
- [QR kod](https://foxui.dev/r/qr.json): Boğliqliksiz QR kod (4.143): matn yoki havola SVG içida çiziladi — öz kodlovçisi (bayt rejimi, UTF-8, xato tuzatiş M, 213 baytgaça), eng yaxşi niqob avtomatik. Doim yoruğ fonda qoronği modullar; markazda ixtiyoriy logo; holatlar: eskirgan (xira + «Yangilaş»), yuklanmoqda, xato. Tölov havolasi, Telegram bot, ilovaga kiriş uçun.
- [AI savolnoma](https://foxui.dev/r/questionnaire.json): AI agent vazifani aniqlaştiriş uçun variantli savollarni bittadan söraydi: raqamli variantlar (klaviaturada 1–9), köp tanlovli savol, «Boşqa» bilan erkin javob, «Ötkazib yuboriş», jarayon çiziği va «2 / 3». Oxirida javoblar xulosasi çiqadi va agentga hodisa ketadi.
- [Tez çiqiş](https://foxui.dev/r/quickexit.json): Xavfli vaziyatdagi foydalanuvçi uçun «Saytdan tez çiqiş» tugmasi (4.165, GOV.UK «Exit this page»): bir bosiş yoki Shift'ni 3 marta bosiş bilan sahifa darhol neytral saytga almaşadi (location.replace — «Orqaga» bu sahifaga qaytarmaydi), ötiş paytida mazmun parda bilan yopiladi. Shift hisobi nuqtalarda va ekran öquvçiga aytiladi; orada boşqa tugma bosilsa hisob yangidan boşlanadi (katta harf yoziş çiqarib yubormaydi). Joylaşuv: sticky (standart sahifa tepasida yopişqoq) · fixed · inline.
- [Iqtibos](https://foxui.dev/r/quote.json): Iqtibos va muallifi: çap çiziqli (standart) yoki katta fikr-mulohaza körinişi. <figure> içida <blockquote> va <figcaption> (<cite> bilan).
- [Rels](https://foxui.dev/r/rail.json): Ilovaning eng yuqori bölimlari: çap çetdagi qoronği ustun (80), yuqorida belgi, papkalar — ikonka pill'da va yorliq (≤ 2 qator), tanlangani mavzu rangidagi pill va töldirilgan ikonka; pastda dumaloq tugmalar ustma-ust. Telefonda pastki panel. Karkas bilan: data-variant="rail" (S3). Kengaytma: data-tip (hover/fokusda izoh), [data-dot] (bildirişnoma nuqtasi). Telefonda bandlar köp bölsa (Fox OS 21.10): data-fx-rail data-max="5" — tor ekranda köpi bilan 5 band körinadi, data-pin bandlar (masalan oxirgi CRM) doim öz joyida, qolgani «Yana» varağida; joriy sahifa varaqda bölsa «Yana» tanlangan. Material va iOS qoidasi: pastki panelda 5 tadan köp band qöymang.
- [Reyting](https://foxui.dev/r/rating.json): Yulduzli baho: bosiş yoki klaviatura (← → Home End), ixtiyoriy yarim qadam (data-step="0.5"). Faqat öqiş variantida (data-readonly) rasm va matnli baho. Yulduz — maska, rang tokendan. Yurak va emoji (4.108): data-shape="heart" — yulduz örniga yurak; data-shape="emoji" — kayfiyat bahosi 5 ta yuz bilan (jahldor → xursand): töldirilmaydi, bittasi tanlanadi (kattaroq va rangli, qolganlari xira); aria-valuetext «4 / 5 — Yaxşi», yonidagi [data-fx-rating-word] da söz.
- [Reaksiyalar paneli](https://foxui.dev/r/reactbar.json): Emoji + son tugmalari: bosilsa aria-pressed almaşadi va son ±1; bosilgani brend tusi, qalin yozuv va çegara bilan. Post, izoh, hujjat uçun. Xabarlardagi .fx-reaction körinişi, lekin mustaqil.
- [Fikrlaş (chain of thought)](https://foxui.dev/r/reasoning.json): Yiğiladigan fikrlaş bloki: «12 soniya öyladi ▸» — oçilsa mulohaza matni. Öylaş paytida (data-state="thinking") oçiq va sarlavha yaltiraydi; tugagaç özi yopiladi (foydalanuvçi oçgan bölsa — tegilmaydi).
- [Yozuv sahifasi](https://foxui.dev/r/recordpage.json): Bitta yozuv sahifasi qolipi (4.184, SLDS «Record home»): tepada belgi, tur va nom, amallar; asosiy maydonlar tasmasi (4–6 ta); bosqiç yöli; pastda ikki ustun — çapda tablar (tafsilot, boğliq röyxatlar, fayllar), öngda faoliyat va izohlar (yopişqoq). Konteyner kengligiga qarab bitta ustunga tuşadi. CRM bitimi, mijoz kartasi, ariza.
- [Nisbiy vaqt](https://foxui.dev/r/reltime.json): <time datetime> matni «5 daqiqa oldin», «keça», «3 soatdan keyin» körinişida özi yangilanib turadi; hoverda va fokusda töliq sana (title). Intl.RelativeTimeFormat('uz') işlatiladi, bölmasa öz zaxira matnimiz. data-format: relative, absolute, auto (7 kundan keyin sana). Vaqt zonalari kartasi (4.146): data-card — hover yoki fokusda kiçik karta: nisbiy vaqt, mahalliy (brauzer zonasi), UTC va data-zones="Europe/Moscow:Moskva, …" böyiça aniq sana-vaqt va UTC siljişi (UTC+5). Xalqaro mijozlar, server loglari, hamkor bilan uçraşuv vaqti uçun. <time> fokus oladi, karta role="tooltip" (aria-describedby), Esc yopadi.
- [Moslaşuv qatlami](https://foxui.dev/r/responsive.json): Moslaşuv poydevori. Container queries (4.11): örovçiga fx-cq yoki komponentga data-cq — karta, körsatkiç, röyxat, sozlamalar va grafik kartasi oyna eniga emas, öz joyining eniga qarab qayta tuziladi (tor ustunda, yon varaqda, dashboard plitkasida). Oyna sinflari (4.12): --fx-bp-compact · medium (600) · expanded (840) · large (1200) · xl (1600) tokenlari va data-hide-below / data-hide-above yordamçilari. 12 ustunli tör (4.18): fx-grid data-cols="12" — compact 4, medium 8, expanded 12 ustun; bola data-span / data-span-md / data-span-sm va data-offset. RTL (4.13): data-fx-flip-rtl — yönalişli ikon öngdan-çapga yozuvda közgulanadi; --fx-dir (1 / −1) — siljiş yönalişi uçun.
- [Natija sahifasi](https://foxui.dev/r/result.json): Jarayon yoki sahifa natijasi: muvaffaqiyat, xato, ogohlantiriş, 404, 403, server xatosi (500), texnik işlar (503) va internet yöq (offline). Belgi şakli (yoki katta kod) + sarlavha + bitta qator izoh + keyingi qadam; 500/503/offline'da ixtiyoriy meta qator (sörov raqami, taxminiy tugaş vaqti, oxirgi saqlaş). «Böş holat»dan farqi: kattaroq, sahifaning özi. Töliq sahifa şabloni — errorpage.
- [Javoblarni tekşiring](https://foxui.dev/r/review.json): Yuborişdan oldingi xulosa sahifasi (naqş, GOV.UK «Check answers»): bölimlar böyiça «savol — javob — Özgartiriş» qatorlari; töldirilmagan majburiy javob «! Kiritilmagan» va «Kiritiş» havolasi bilan ajraladi; oxirida tasdiq va «Yuboriş». Uzun formalar, arizalar, buyurtmalar uçun.
- [Boy matn tahrirlagiçi](https://foxui.dev/r/richtext.json): Izoh, tavsif, maqola yoziş uçun kiçik tahrirlagiç: vositalar paneli (qalin, qiya, tagiga çiziq, röyxatlar, sarlavha, havola) va contenteditable maydon. Tugma holati aria-pressed bilan, joylaştirilgan matn oddiy matnga aylanadi, HTML hodisa va yaşirin maydon orqali olinadi. Kiçik — native execCommand; murakkab hujjat tahrirlagiçi (jadval, rasm, hamkorlik) uçun taşqi kutubxona ulanadi.
- [Konsentrik halqalar](https://foxui.dev/r/rings.json): 2–3 maqsadning bajarilişi bitta içma-iç halqada (4.116) — Apple Activity halqalari kabi: menejerning kunlik rejasi, öquvçining haftalik maqsadi. Har halqa — bitta körsatkiç (style="--fx-rings-value: 72%"), taşqisi birinçi; raqam, maqsad va foiz legendada doim matn bilan. Ranglar grafik rollaridan (brand · ink · accent). Faqat CSS, JS yöq. WDS qoidasi: bitta foiz uçun halqa emas, çiziqli ölçagiç — halqa faqat bir neçta maqsadni bir qaraşda körsatiş uçun.
- [Ripple (tölqin)](https://foxui.dev/r/ripple.json): Bosilgan nuqtadan tarqaluvçi yumşoq tölqin (M3, HeroUI Ripple). Bezak harakati, şuning uçun faqat expressive rejimda işlaydi (data-fx-motion="expressive" ota yoki tugmaning özida); data-fx-ripple="always" — standart rejimda ham. Klaviaturada (Enter/Space) tölqin markazdan çiqadi. Rang — matn rangi: asosiy tugmada oq, ikkilamçi tugmada qora — har mavzuda özi töğri. data-fx-ripple="soft" — xiraroq. Harakat kamaytirilsa, calm yoki none rejimda tölqin yöq.
- [Iş qatori](https://foxui.dev/r/row.json): Vazifa yoki murojaat qatori: boşida ustuvorlik — hover yoki fokusda örnida checkbox çiqadi (bitta katak, ikki rol); bittasi tanlansa — hamma qatorda checkbox. ID (mono), holat, sarlavha, oxirida yorliq, muddat (keçikkan — qizil), bajaruvçi. Guruhlar yiğiladi.
- [Saqlaş paneli](https://foxui.dev/r/savebar.json): Saqlanmagan özgarişlar qöriqçisi: forma özgarsa pastda «Saqlanmagan özgarişlar · 2 ta — Bekor qiliş / Saqlaş» paneli çiqadi, özgargan maydon yorliği oldida nuqta paydo böladi, qiymat qaytsa belgi yöqoladi. Sahifadan ketişda brauzer ogohlantiradi, Ctrl+S saqlaydi. Sozlamalar, mijoz kartasi, profil sahifalari uçun.
- [Kalendar körinişi](https://foxui.dev/r/schedule.json): Hodisalarni vaqt öqida körsatadi: Oy (kun katagida hodisa chiplari va «+N» — bosilsa hammasi oçiladi), Hafta va Kun (soatlar töri, kun böyi qatori, bugungi ustunda «hozir» çiziği vaqt yozuvi bilan, bir-biriga tuşgan hodisalar yonma-yon). Hodisa — tugma: nomi va vaqti matnda, rang faqat toifa çiziği. Sana tanlaş uçun .fx-calendar işlating — bu komponent hodisalarni körsatadi. Xulq foxui.js'da (data-fx-schedule). Tahrirlaş (data-editable, 20.10 — heroui.pro Agenda'dan): siçqonça bilan suriş (data-step daqiqa qadam, boşqa kunga ham), pastki çetidan çöziş, böş joyda sudrab yangi hodisa (data-draft); klaviatura — Alt+strelkalar; har amal fx-schedule-move/-resize/-create hodisasi {id, day, start, end}, ekran öquvçiga aytiladi. data-readonly — surilmaydi; data-status="unconfirmed" — uzuq çegara (taxminiy); data-weekend — dam oliş kuni foni. Barmoq bilan sudraş yöq (aylantiriş buzilmasin).
- [Aylanuvçi maydon](https://foxui.dev/r/scrollarea.json): Çegaralangan aylanuvçi maydon: kontent davom etayotgan çetda yumşoq söniş (data-fade-start/end xulq tomonidan qöyiladi) — «yana bor» işorasi. Vertikal (standart) yoki gorizontal (data-axis="x"). Ingiçka çiziq; siğsa — söniş çiqmaydi. Progressiv xiralik (data-edge="blur"): çetda söniş örniga kontent xiralaşib ostidan ötadi — vertikal maydonda; qöllanmasa oddiy söniş. Uşlab suriş (data-drag, 20.10 — Manbaa'dan): siçqonça bilan sudrab suriladi (5 px çegara, surilgandan keyingi bosiş bekor), çiziq yaşirin, çetdagi söniş qoladi; barmoq va klaviatura özgarmaydi. Sönişsiz (data-fade="none", 21.10 — Manbaa/Ustoz): çetda kesilgan karta özi «davomi bor» deydi; uşlab suriladigan javon (data-drag) uçun standart. Içki çekinişli (padding) gorizontal qatorda scroll-padding-inline'ni şu padding qiymatiga teng bering — aks holda scroll-snap birinçi elementni surib qöyadi.
- [Yopişqoq scroll hikoyasi](https://foxui.dev/r/scrollstory.json): Mahsulot qanday işlaşini bosqiçma-bosqiç körsatadi (Aceternity Sticky Scroll Reveal): çapda matn qadamlari oddiy oqimda, öngda media yopişib turadi va köriniş markazidagi qadamga mos panel blur-fade bilan almaşadi. Faol qadam töq, çap çiziqda brend bölagi ösadi; qolganlari xira. Qadamlar va panellar tartib böyiça juftlanadi (yoki step[data-panel] = panel id). Tor joyda (telefon) media tepada yopişadi, qadamlar uning ostidan ötadi. data-media="start" — media çapda. Hodisa: fx-scrollstory-change. JS bölmasa — birinçi panel va töliq matn.
- [Qidiruv](https://foxui.dev/r/search.json): Qidiruv maydoni: ikon, input type="search" va ixtiyoriy tugmalar maslahati (⌘K). Fokusda maslahat yaşiriladi. Kengaytma: aria-busy (yuklaniş spinneri), .fx-search__scope (qamrov select). Doira tanlagiçi va mobil töliq ekran (4.111): maydon ostida «Hammasi · Mijozlar · Bitimlar» (son bilan); data-mode="fullscreen" — telefonda fokusda qidiruv tepaga yopişib, natijalar paneli butun ekranni egallaydi, «←» va Esc yopadi. Tepa panel uçun tugma varianti (data-variant="trigger", 21.10): maydon emas, tugma — bosilsa buyruqlar oynasi oçiladi; kengda ~288 px, qisqaradi, tor ekranda özi ikon-tugmaga aylanadi.
- [Qidiruv natijalari sahifasi](https://foxui.dev/r/searchresults.json): Sayt yoki ilova böyiça qidiruv natijalari sahifasi (4.196): katta qidiruv maydoni (sörov saqlangan), xulosa («narx» böyiça 48 ta natija), imlo taklifi («Balki … demoqçimisiz?»), qamrov yorliqlari (soni bilan, aria-current) va saralaş; çapda fx-facets, öngda natijalar. Har natija: joylaşuv yöli, sarlavha havolasi (körilgan havola biroz sönadi), parça — mos sözlar <mark> bilan (fon + qalin). Eng mos natija data-type="best" bilan kartada. Natija yöq bölsa — .fx-searchresults__none: tekşiriş maslahatlari va maşhur sahifalar havolalari. Pastda fx-pagination. Qidiruv mexanizmi ilovada; naqş tuzilma va holatlarni beradi.
- [Bölim sarlavhasi](https://foxui.dev/r/section-head.json): Sahifa içidagi bölim: sarlavha, izoh, öngda amallar, ixtiyoriy pastki çiziq. Sarlavha darajasi (h2/h3) mazmunga qarab tanlanadi.
- [Segment](https://foxui.dev/r/segment.json): Bir xil ma'lumotning 2–4 körinişi orasida tanlaş (Oylik / Yillik, Röyxat / Jadval). Tugmalar guruhi: tanlangani aria-pressed="true"; filtr havolalari bölsa aria-current="page". Panelli tablar — fx-tabs. Kengaytma: data-fill (töliq en), data-icon-only, data-multi (toggle guruhi), sm ölçamda ≥24px bosiş maydoni. Forma varianti: <label class="fx-segment__item"><input type="radio"> — JS'siz yuboriladi, tanlangani :checked.
- [Tanlov (select)](https://foxui.dev/r/select.json): Röyxatdan bitta qiymat: native <select> maydon şaklida. OTA QOIDA (FX-SELECT-01): har fx-select oçilganda tizim uslubidagi röyxatni körsatadi — sirt, yoy, soya, hover'da muted, tanlangani brend tusida ✓ bilan, strelka oçilganda aylanadi (appearance: base-select; qöllamaydigan brauzerda native). Brauzerning standart (kök fonli) röyxati heç qayerda qolmaydi; fx-input bilan select yozilmaydi — qöriqçi uşlaydi. .fx-select-wrap içiga oling. Böş birinçi variant (value="") — xira matn. Kengaytma: optgroup, ikon/avatar va tavsifli boy röyxat (data-rich), telefonda pastki varaq (data-fx-adaptive). Matn içidagi tanlov (data-variant="inline", 20.10 — heroui.pro Inline Select'dan): «Narx <tanlov> böyiça saralangan» — qutisiz, brend rangida, nuqtali tagçiziq, röyxat — öşa tizim ::picker'i.
- [Sessiya tugaşi ogohlantirişi](https://foxui.dev/r/sessionwarn.json): Xavfsizlik uçun sessiya muddati tugaşidan oldingi ogohlantiriş (4.197, GOV.UK/HMRC «Timeout warning»): modal alertdialog (fx-dialog ustida) data-warn soniya (standart 120) qolganda özi oçiladi — soat belgisi, katta teskari sanoq, qolgan vaqt çiziği va ikki tugma: «Davom etiş» (asosiy, autofocus, Esc ham şu) va «Çiqiş». data-timeout — sessiya muddati (soniya); ogohlantirişgaça foydalanuvçi faolligi taymerni qayta boşlaydi (data-activity="off" — faqat server muddati). 30 soniyadan kam qolganda data-state="urgent". Tugaganda .fx-sessionwarn__expired körinadi va «fx-sessionwarn-expired» hodisasi çiqadi. Hodisalar: fx-sessionwarn-extend (ilova sessiyani serverda uzaytiradi), fx-sessionwarn-signout (data-signout-url bölsa — öşa manzilga). Dasturiy: el.fxSession.reset() / .warn(soniya).
- [Sozlamalar sahifasi](https://foxui.dev/r/settings.json): Sozlamalar uçun tayyor qolip: çapda bölimlar menyusi (mobilda gorizontal), öngda bölimlar — sarlavha, izoh va karta içida «yorliq çapda, boşqaruv öngda» qatorlari; xavfli hudud varianti va yopişqoq saqlaş paneli. Faqat CSS.
- [Ulaşiş](https://foxui.dev/r/share.json): Ulaşiş mazmuni (odatda .fx-dialog içida): havola + «Nusxalaş» (holat aria-live bilan), ruxsat berilgan odamlar va rol tanlovi («Olib taşlaş» qatorni öçiradi), umumiy kiriş darajasi (izohi tanlovga qarab özgaradi).
- [Yon varaq](https://foxui.dev/r/sheet.json): Ekran çetidan çiqadigan panel: qator tafsiloti, filtrlar, telefonda menyu. Native <dialog> (showModal) — fokus tuzoği va Esc brauzerda. Öngdan (standart) yoki pastdan. Kengaytma: data-side=start, data-size=sm|lg|xl|full, RTL yönalişga moslaşadi, data-mode=push (modalsiz, .show(), kontent siqiladi), .fx-sheet__grip. Töxtaş nuqtalari (4.153): pastki varaq data-detents="half full" — yarim va töliq balandlikda töxtaydi; tutqiç (button) sudraladi, ↑ ↓ bilan almaşadi, pastga taşlansa yopiladi.
- [Ilova karkasi](https://foxui.dev/r/shell.json): Ilova sahifasi qobiği: çapda yon menyu (256, yiğilganda 60), tepada panel (60) — yiğiş tugmasi, yöl satri, global amallar; iş maydoni. < 840 px: menyu çapdan çiqadigan varaq. Xulq foxui.js'da (data-fx-shell): tugma va Ctrl/⌘+B. Rels varianti (data-variant="rail", WDS S3): çapda rels (.fx-shell__rail içida .fx-rail), yonida bölim paneli — yiğilganda panel yöqoladi, rels qoladi; telefonda rels pastki panel; data-mobile="top" — telefonda faqat tepa panel (rels yaşiriladi, bölimlar butun ekran yon varaq boşida, Cursor kabi). Öng yordamçi panel (2.139): .fx-shell__aside — tafsilot/izoh/faollik, [data-fx-shell-aside-toggle] bilan oçiladi-yopiladi; torda öngdan çiqadigan varaq. Suzuvçi va içki variantlar (4.157, shadcn): data-variant="floating" — yon menyu sahifa çetidan ajralgan karta; data-variant="inset" — yon menyu fonda, tepa panel va iş maydoni bitta yumaloq yuza içida (iş maydoni özi aylanadi). Torda ikkalasi ham oddiy varaqqa qaytadi.
- [Klaviatura yorliqlari oynasi](https://foxui.dev/r/shortcuts.json): «?» bosilganda oçiladigan yorliqlar röyxati: guruhlangan (umumiy, ötiş, röyxat), har qatorda amal va tugmalar (fx-kbd), «G keyin I» ketma-ketligi, qidiruv. Mac'da ⌘ ni ilova özi matnga yozadi.
- [Imzo maydoni](https://foxui.dev/r/signature.json): Qöl imzosi (4.86): siçqonça, barmoq yoki stilus bilan canvas'da çiziladi (stilus bosimi çiziq qalinligiga ta'sir qiladi), «Orqaga» oxirgi çiziqni, «Tozalaş» hammasini öçiradi. Klaviatura muqobili — «Yozib kiritiş»: ism yoziladi va imzo şriftida çiziladi. Qiymat formaga yaşirin inputda ketadi: SVG matni (standart, vektor, hujjatga sifatli tuşadi) yoki data-format="png" — PNG data URL. data-required — böş imzo bilan forma yuborilmaydi (qizil çegara + «Imzo majburiy» matni).
- [Telefon menyusi](https://foxui.dev/r/site-drawer.json): Burger tugma oçadigan çapdan çiquvçi menyu varaği (#86): sarlavha + yopiş, havolalar, oçiladigan guruhlar (details), pastda amallar. Modal <dialog> — fokus içida qoladi, Esc va fonga bosiş yopadi, havola bosilsa yopiladi (foxui.js, data-fx-sitedrawer).
- [Sayt pastki qismi](https://foxui.dev/r/site-footer.json): Footer (#97): tavsif + ijtimoiy havolalar, havola ustunlari, pastki qator (huquqiy matn) va til hamda mavzu almaştirgiç örinlari. Telefonda bir ustunga tuşadi. Tanlanadigan usul — havolasi köp footer uçun: ustun guruhlari <details class="fx-site-footer__group"> bölsa, kengda oddiy ustun, telefonda (< 640 px) yiğiladigan qator «+» bilan, boşida yopiq — Hostinger kabi (xulq data-fx-footer, 20.10). Havolasi kam footer oddiy ustunda qoladi (<div> + sarlavha).
- [Sayt sarlavhasi](https://foxui.dev/r/site-header.json): Marketing/hujjat sayti tepa paneli (#85): belgi, asosiy menyu, mega menyu paneli (ustunlar + tavsiya bloki), amallar; telefonda burger tugma (site-drawer'ni oçadi). Mega panel hover (siçqonça) yoki bosiş bilan oçiladi, Esc yopadi, ← → bandlar orasida, ↓ panelga kiradi (foxui.js, data-fx-siteheader). Scroll xulqi (4.156, data-scroll): «hide» — pastga scroll'da yaşirinadi, tepaga qaytganda çiqadi; «shrink» — pastroq va şişasimon böladi; «float» — markazdagi suzuvçi tabletkaga aylanadi (Linear, Aceternity uslubi).
- [Skelet (karkas)](https://foxui.dev/r/skeleton.json): Yuklanayotgan ma'lumot örnida kulrang şakllar (karkas): qator (standart), sarlavha, doira, blok, kvadrat, rasm, tugma; kompozitlar — .fx-skeleton-group (paragraf), .fx-skeleton-row (avatar+qatorlar; data-type=table, data-cols), .fx-skeleton-card. 24.10: 300 ms qoidasi — kontent şu vaqt içida kelsa skelet umuman körinmaydi (CSS, JS'siz; data-delay="0" — darhol); yaltiraş (data-anim="shimmer") faqat transform bilan, butun guruhga ham beriladi; .fx-skeleton-zone — skelet va kontent bitta katakda, aria-busy almaşganda joy siljimaydi. Jonli namuna: /namuna/karkas/.
- [Slider](https://foxui.dev/r/slider.json): Diapazondan qiymat tanlaş: native input type="range", öz körinişi; tölgan qism brend rangida (foxui.js). Aniq qiymat kerak bölsa yonida son maydoni. Kengaytma: diapazon (ikki tutqiç, kesişmaydi), belgilar va yorliqlar (marks/ticks), tutqiç ustida qiymat pufagi. Tik variant (4.93) — ovoz, ekvalayzer, xarita zoom uçun; gistogrammali diapazon (4.95) — narx filtri ostida taqsimot ustunçalari, tanlangan oraliq yoritiladi. Markazdan (4.94): data-origin="center" — töldiriş noldan (yoki data-zero) qiymatgaça çapga yoki öngga; nol joyida belgi; aria-valuetext va yonidagi <output> işora bilan («+20», «−15%»); ikki marta bosiş yoki Delete — boşlanğiç qiymatga. Odatiy qiymat belgisi: marks içida <li data-value="10" data-typical>odatiy</li> — çiziq örniga brend rangidagi uçburçak va yozuv.
- [Tartiblanadigan röyxat](https://foxui.dev/r/sortable.json): Qatorlarni qayta tartiblaş: uşlagiç tugmasi — siçqonça bilan sudraş yoki klaviatura (Space oladi, ↑ ↓ siljitadi, Space qöyadi, Esc bekor qiladi). Har harakat aria-live bilan e'lon qilinadi («Dilnoza, 2-örin, 4 tadan»). Hodisa fx-sortable-change tartibni beradi.
- [Manbalar va iqtibos](https://foxui.dev/r/sources.json): Matn ichida [1] iqtibos pill'i — ustiga kelinsa yoki fokus tushsa manba kartasi (sayt, sarlavha, parcha) chiqadi; javob oxirida yigʻiladigan manbalar roʻyxati. Pill roʻyxatdagi manbaga havola (:target ajratadi).
- [Davr çiziqlari](https://foxui.dev/r/span.json): Bir neçta davr yoki umrni bitta vaqt öqida taqqoslaş: tepada yil belgilari, har qator — nom va boşlaniş–tugaş çiziği; asosiy qahramon (data-current) — töliq brend rangi; davomi noma'lum (data-open) — oçiq uç; fonda davr soyasi (.fx-span__era). JS'siz: idişda --fx-span-min/--fx-span-max, qatorda --s/--e (yillar) — örni va eni CSS hisoblaydi. Keng bölsa öz içida suriladi (.fx-span-scroll). Manbaa'dan (④ umr çiziqlari, Fox MB topşirdi, 20.10).
- [Spinner](https://foxui.dev/r/spinner.json): Neytral yuklaniş aylanasi, matn rangida (ota element rangini oladi). Ölçam: sm 16 · md 20 · lg 36. Kengaytma: data-variant=dots (uç nuqta), .fx-spinner-text (matn bilan inline). Şakl morfli variant (4.43, M3 Expressive): data-variant="morph" — brend rangidagi şakl navbat bilan boşqasiga oqib ötadi (portlaş → peçenye → beşburçak → kapsula → quyoş → tört barg) va prujina bilan aylanadi; .fx-spinner-shell — yumşoq doira fon içida. Uzoqroq kutiş (hisobot, AI javobi) uçun; harakat kamaytirilsa şakl joyida turadi.
- [Splash ekran](https://foxui.dev/r/splash.json): PWA yoki ilova birinçi oçilayotganda körinadigan ekran (4.200, HIG «Launch screen»): markazda belgi va ilova nomi (kirişda yumşoq paydo böladi, keyin sekin «nafas oladi»), ostida yuklaniş çiziği va holat matni («Ma'lumotlar sinxronlanmoqda…»), pastda versiya. Çiziq role="progressbar": aria-valuenow va --fx-splash-value berilsa — aniq, berilmasa — noaniq. Ilova tayyor bölgaç data-state="done" qöyadi — ekran sönadi va bosilmaydi. data-size: screen (standart — fixed, butun ekran, eng yuqori qatlam) yoki block (hujjat namunasi). data-tone: page yoki brand (brend rangli fon — manifest'dagi background_color bilan bir xil qiling, oq miltillaş bölmasin).
- [Bölinadigan panellar](https://foxui.dev/r/split.json): Ikki panel (röyxat va tafsilot, kod va natija) örtasida tortiladigan ajratgiç. Siçqonça/sensor bilan tortiladi, klaviaturada ← → (ustma-ust bölsa ↑ ↓) qadamlab suradi, Enter yoki ikki marta bosiş birinçi panelni yiğadi. Qiymat foizda, istasangiz localStorage'da saqlanadi.
- [Körsatkiç (stat)](https://foxui.dev/r/stat.json): Yorliq + katta raqam (tabular, --fx-font-family-numeric) + izoh. Neytral karta yoki rangli plitka (data-color, 6 toifa rangi). Ohang: data-tone warning/error raqamni böyaydi. Havola bölsa — <a class="fx-stat">. KPI varianti: özgariş (.fx-delta), mini grafik örni (.fx-stat__viz — içiga fx-chart type="spark"), pastki izoh; ölçam hero/ixçam; qator — .fx-stat-row. Kengaytma: .fx-stat__period (“ötgan oyga nisbatan”), aria-busy (skelet holati), data-tone=success. Tanlanadigan plitkalar (4.128): .fx-stat-row[data-selectable] tablist sifatida — plitka bosilsa boğlangan grafikda şu seriya körinadi; tanlangani tepadagi çiziq va çegara bilan. KPI sarlavhasi (20.10): .fx-stat__head — ikon plitkasi (.fx-stat__icon, data-tone), yorliq va öng çetda trend chip (.fx-delta data-variant="chip") yoki menyu tugmasi; .fx-stat__chart — kartaning pastki çetiga tegib turadigan grafik (fx-chart area yoki spark).
- [Raqamlar bölimi](https://foxui.dev/r/stats.json): Landing va «Biz haqimizda» sahifasi uçun raqamlar bölimi (4.176): ixtiyoriy sarlavha bloki va 3–4 ta katta raqam — har birida izoh va qisqa tuşuntiriş. Raqam fx-ticker bilan köriniş maydoniga kirganda aylanib çiqadi (JS bölmasa — oddiy matn, harakat kamaytirilsa — darhol). Tuzilma — <dl>: ekran öquvçi «izoh — raqam» juftini öqiydi, vizual tartibda raqam tepada. data-layout: row (standart) yoki split (sarlavha çapda, raqamlar 2×2). data-variant: plain, divided (ustunlar orasida çiziq), cards (har raqam kartada). Birlik (+, %, mln) .fx-stats__unit içida — kiçikroq va brend rangida.
- [Xulosa tasmasi](https://foxui.dev/r/statstrip.json): Röyxat sarlavhasi ostidagi bir qatorli xulosa: joriy filtr böyiça 3–4 raqam (jami, muddati ötgan, tanlangan) va ixtiyoriy «eskiriş» çiziği (köp bölakli progress + legenda). Plitka emas — çegarasiz, ajratgiç çiziqlar orasida (PDP listpage__stat).
- [Holat](https://foxui.dev/r/status.json): Holat belgisi: şakl + söz. Bajarildi — doira, ogohlantiriş — uçburçak, xato — romb, kutilmoqda — halqa, neytral — kvadrat. Kengaytma: data-pulse (“jonli” puls; pending — aylanadi), data-size=sm|lg.
- [Qadamlar](https://foxui.dev/r/steps.json): Köp bosqiçli jarayon: bajarilganlar belgi bilan, joriysi halqa va qalin (aria-current="step"), keyingilar xira; orasida çiziq. Xato qadam (data-state="error") — «!» belgisi bilan. Kengaytma: data-orientation=vertical, data-style=dot, .fx-steps__text/.fx-steps__desc (tavsif qatori), bosiladigan qadam (<a>/<button> içida). Bosiladigan navigatsiya (4.141): data-clickable — ötilgan va joriy qadamlar tugmaga aylanadi (foxui.js → steps), bosilsa şu qadamga qaytiladi; erişilgan eng uzoq qadamgaça oldinga ham. Erişilmagan qadam aria-disabled. data-clickable="all" — erkin tartibli forma. Har tugma aria-label: «2-qadam: Yetkaziş manzili, bajarildi». Hodisa fx-steps-change (bekor qiliş mumkin).
- [Takliflar (tayyor savollar)](https://foxui.dev/r/suggestions.json): Boş çatda yoki javobdan keyin tayyor savollar qatori. Bosilsa matn composer'ga yoziladi (data-target) yoki darhol yuboriladi (data-send); har holda fx-suggest hodisasi çiqadi. Joylaşuv: öraş, bir qatorli scroll yoki ustun kartalar.
- [Rang tanlagiç](https://foxui.dev/r/swatch.json): Rang namunalaridan tanlaş: native radio (bitta) yoki checkbox (bir neçta), JS'siz. Rang — --fx-swatch (token); tanlangani ✓ va halqa bilan.
- [Almaştirgiç](https://foxui.dev/r/switcher.json): Workspace, brend yoki korxona almaştirgiçi: yon panel tepasida brend örnida turadi — belgi, nom, ikkinçi qator va chevron; bosilsa menyu oçiladi, tanlangani ✓ bilan belgilanadi va tugmaga köçadi. Şakli PDP almaştirgiçidan, ölçamlari FoxUI kalibridan. Yiğilgan yon menyuda faqat belgi qoladi. Kengaytma: .fx-switcher__logo[data-add] (“+ Yangi” belgisi), .fx-switcher__search (menyu içidagi qidiruv maydoni; filtrlaş ilovada).
- [Jadval](https://foxui.dev/r/table.json): Ma'lumot jadvali: qotgan sarlavha, raqam ustuni öngda, jami — tfoot. Saralaş (th[aria-sort] + .fx-table__sort), qator tanlaş (belgi ustuni, «hammasi» qisman holat bilan), ommaviy amallar paneli, havola orqali kelingan qator (:target) belgilanadi. Xulq foxui.js'da (data-fx-table). Kengaytmalar (0.24): ziçlik (data-density), zebra va çegarali, qotgan birinçi ustun (data-pin-first), qotgan jami qatori (data-sticky-foot), kengaytiriladigan qator (.fx-table__expand + .fx-table__detail), qatordagi amallar (hover/fokusda), skelet qatorlar, ustun körinişi menyusi (data-fx-table-cols) va Shift+bosiş bilan oraliq tanlaş. Telefonda kartalar (4.134): data-stack="sm|md" — tor ekranda har qator «yorliq : qiymat» juftlari bilan kartaga aylanadi. Ustun enini özgartiriş (4.135): data-resizable — sarlavha çetidagi tutqiç (datagrid'dagi kabi): sudraş, klaviaturada fokuslanadi (← → 16 px, Shift — 64, Home — eng tor, Enter yoki ikki marta bosiş — avtomatik en). Birinçi özgarişda jadval table-layout: fixed böladi; uzun matn «…» bilan kesiladi. Hodisa fx-table-resize {col, width}.
- [Tablar](https://foxui.dev/r/tabs.json): Bir sahifa içidagi bölimlar, har tabning öz paneli. Variantlar: tagi çizilgan (standart), pill, enclosed; tik (data-orientation); ikonli va sonli tab; yopiladigan tab; siğmasa siljitiş tugmalari. Klaviatura foxui.js'da (data-fx-tabs). Dangasa panel (24.10): panelda data-src — faqat oçilganda yuklanadi, yuklaş paytida skelet (300 ms qoidasi), siçqonça/fokusda oldindan yuklaş, keş, xatoda «Qayta uriniş»; tablist'da data-url="tab" — holat ?tab= da.
- [Teg kiritiş](https://foxui.dev/r/tags.json): Maydon içida chiplar: yozib Enter yoki vergul bosilsa teg qöşiladi, böş joyda Backspace oxirgisini olib taşlaydi, joylangan matn vergul va qator böyiça bölinadi. Takror teg qöşilmaydi; ixtiyoriy çegara (data-max). Qiymatlar yaşirin maydonda vergul bilan.
- [Jamoa bölimi](https://foxui.dev/r/team.json): Marketing saytining «Jamoa» sahifasi yoki bölimi (4.177): sarlavha bloki, a'zolar töri — rasm (yoki pastel fonda boş harflar), ism, lavozim, qisqa bio va ijtimoiy havolalar — hamda oxirida «Bizga qöşiling» kartasi (karyera sahifasiga). Rasm hover'da biroz kattalaşib rangga kiradi. data-layout: grid (standart — katta kartalar) yoki compact (doira rasm, markazda — 10+ kişilik jamoa yoki maslahat kengaşi uçun).
- [Terminal oynasi](https://foxui.dev/r/terminal.json): CLI va npm buyruqlarini «jonli» körsatiş oynasi (4.74): sarlavha qatori (uçta nuqta, fayl yoki papka nomi, ixtiyoriy nusxalaş tugmasi) va qatorlar — buyruq (cmd, oldida $), natija (out), muvaffaqiyat (ok, ✓), xato (err, ✕), ma'lumot (info). Körinişga kirganda buyruqlar harfma-harf yoziladi, natijalar ketma-ket çiqadi, oxirida kursor miltillaydi. Matn DOM'da doim töliq: nusxalaş va ekran öquvçi buzilmaydi. Harakat kamaytirilsa — hammasi darhol körinadi.
- [Mijozlar fikri](https://foxui.dev/r/testimonials.json): Ijtimoiy isbot bölimi (4.172): sarlavha va iqtibos kartalari — ixtiyoriy yulduzli baho, fikr matni (muhim joyi <mark> bilan ajratiladi), avatar, ism va lavozim. data-layout: grid (standart — ustunli ziç joylaşuv, kartalar balandligi har xil) yoki featured (bitta katta iqtibos markazda, sarlavha şriftida). Harakatli variant — kartalarni .fx-marquee içiga qöying (gorizontal yoki vertikal ustunlar).
- [Matn](https://foxui.dev/r/text.json): Matn uslubi: ölçam (lg/md/sm/caption), ohang, vazn, tabular raqam, balance/pretty, bir qatorga yoki N qatorga qisqartiriş. Yordamçi: fx-muted (ikkinçi darajali), fx-eyebrow (yuqori yorliq).
- [Matn effektlari](https://foxui.dev/r/textfx.json): Hero va bölim sarlavhalari uçun törtta matn effekti (data-effect): «type» — yozuv maşinkasi, harfma-harf yoziladi va kursor miltillaydi (data-words bilan bir neçta ibora navbat bilan yoziladi); «rotate» — sarlavhadagi bitta söz navbat bilan almaşadi (pastdan blur bilan çiqadi, eng uzun söz eni saqlanadi — matn sakramaydi); «split» — sözlar (data-by="çar" — harflar) körinişga kirganda poğonali blur-fade bilan çiqadi; «mark» — söz ostiga marker çizilib boradi (data-variant="underline" — pastki çiziq). Ekran öquvçi töliq matnni darhol oladi; JS bölmasa yoki harakat kamaytirilsa — oddiy töliq matn. 5-tölqin: «shine» — matn ustidan nur ötadi (data-tone="brand" — brend rangida); «gradient» — mavzu ranglaridan gradient bilan böyalgan sarlavha (data-flow — sekin oqadi, data-color="warm" — iliq ranglar); «scramble» — harflar tasodifiy belgilardan asl matnga yeçiladi (körinişga kirganda; data-trigger="hover" — kursor yoki fokusda qayta, data-mono — monoşrift); «morph» — bir söz ikkinçisiga blur orqali eriydi (rotate kabi .fx-textfx__word sözlari, siljişsiz). Shine va oqadigan gradient faqat körinişda harakatlanadi.
- [Mavzu almaştirgiç](https://foxui.dev/r/theme-switcher.json): Yoruğ / Qoronği / Tizim tanlovi (#154): <html data-fx-scheme> ni örnatadi («Tizim» — atribut olib taşlanadi, qurilma sozlamasi işlaydi) va tanlovni eslab qoladi. fx-segment ustiga qurilgan; ixçam ikonli variant. Aylana oçiliş (data-reveal="circle"): yangi mavzu bosilgan tugmadan aylana bölib butun ekranga yoyiladi (View Transitions + clip-path); qöllanmasa, harakat kamaytirilsa yoki data-fx-motion="none"da — darhol almaşadi. Bitta tugma (data-cycle — masalan admin qobiğı rels pastida): bosilsa yoruğ ↔ qoronği, aria-pressed = qoronği. Switch (data-variant="switch", Ustoz 25.10): kun/tun — kapsula ustida quyoş va oy, tutqiç joriy rejim ostiga suriladi; bitta tugma role="switch", aria-checked = qoronği. Boşlanğiç holat SSR'da aria-checked bilan beriladi; data-attr (masalan data-theme) va data-store="none" — saqlaş loyihada, har almaşuvda «fx-themeswitch» hodisasi (detail.scheme). Aylana oçiliş — data-reveal="circle".
- [Öylayapti (shimmer) va oqim kursori](https://foxui.dev/r/thinking.json): Javob hali boşlanmaganda «Öylayapti…» yozuvi (mavjud .fx-shimmer-text yaltiraşi) uçqun ikon bilan; oqim matni oxirida miltillovçi kursor ▍. Yakunda kursor olib taşlanadi.
- [3D egiliş karta](https://foxui.dev/r/tilt.json): Kursorga qarab karta perspektivada egiladi (Aceternity 3D Card Effect, Comet Card): kursor turgan tomon pastga botadi, içidagi [data-depth] qismlar (1, 2, 3) turli masofaga oldinga çiqadi — qatlamli çuqurlik hissi. data-fx-tilt="glare" — kursor ortidan yumşoq yaltiraş; data-max — eng katta burçak (standart 10°). Çiqişda karta prujina bilan tekislanadi. Faqat siçqonçada işlaydi: barmoq va klaviaturada karta tekis, hamma kontent öz joyida. Harakat kamaytirilsa, calm yoki none rejimda egilmaydi.
- [Vaqt maydoni](https://foxui.dev/r/timefield.json): Soat va daqiqa (24 soatli, ixtiyoriy soniya) segmentlari. ↑ ↓ qiymatni özgartiradi (daqiqa data-step qadami bilan), raqam yozilsa keyingi segmentga ötadi, Backspace tozalaydi. Formaga HH:MM yaşirin input orqali ketadi. Siferblat va röyxat (4.103): data-variant="list" — maydon yonidagi soat tugmasi 15 daqiqalik röyxatni oçadi (kompyuter; data-list-step, data-from, data-to), data-variant="dial" — soat siferblati (telefon): avval soat (taşqi halqa 12, 1…11, içki — 00, 13…23), keyin daqiqa (00…55), tanlangaç yopiladi. Segmentlar bilan yoziş ham doim işlaydi.
- [Faoliyat lentasi](https://foxui.dev/r/timeline.json): Vaqt böyiça hodisalar: vertikal çiziq, belgi (nuqta, ikon yoki avatar), kim/nima, vaqt, ilova (izoh, farq). Holatlar: bajarildi, kutilmoqda (halqa aylanadi), xato (romb).
- [Vaqt slotlari](https://foxui.dev/r/timeslots.json): Bron va uçraşuv uçun böş vaqtlar töri: har vaqt — tugmasimon radio, band vaqt — çizilgan va «band» deb yozilgan, oz qolgani — «1 joy». Kunning qismlari böyiça guruhlanadi (Ertalab · Tuşdan keyin). Kalendar bilan yonma-yon: çapda kun, öngda vaqt. JS kerak emas — native radio.
- [Tooltip](https://foxui.dev/r/tip.json): Ikon-tugma yoki qisqartma uçun qisqa nom: öram ustiga borilganda yoki fokusda çiqadi (JS'siz). Teskari yuza; joylaşuv: yuqorida, pastda, yon tomonda (start/end/left/right). Içida tugma yorliği (kbd) bölişi mumkin. Tooltip guruhi (4.166): .fx-tip-group[data-fx-tip] — bitta tooltip oçilgaç qöşni tugmaga ötilganda keyingisi keçikişsiz çiqadi (Radix skipDelay), guruhdan çiqilgaç ~300 ms (data-skip) dan keyin yana odatdagi keçikiş. Esc oçiq tooltipni yopadi.
- [Toast](https://foxui.dev/r/toast.json): Qisqa xabar: teskari yuza, faqat sönadi. Ixtiyoriy bitta amal. Holat — data-tone success/warning/error/loading (nuqta/aylana + matndagi söz). Ikki usul: (1) popover="manual" — bitta toast, showPopover(); (2) toaster hududi + window.fxToast() — andoza bitta toast, ixtiyoriy ustma-ust yiğiş (data-stack), promise (yuklanmoqda → tayyor/xato), hoverda pauza, taymer çiziği (data-timer), siljitib yopiş (data-swipe).
- [Mundarija](https://foxui.dev/r/toc.json): Uzun sahifaning yon mundarijasi (#87): sarlavhalarga havolalar, hozir körinayotgan bölim aria-current="location" bilan belgilanadi (IntersectionObserver). Havola bosilsa tekis siljiydi (reduced-motion'da bir zumda). 2 daraja (h2/h3).
- [Toggle guruhi](https://foxui.dev/r/togglegroup.json): Yonma-yon ikonka yoki matn tugmalari: bittasi (single) yoki bir neçtasi (multi) bosiq — aria-pressed. Matn tekislaş, köriniş kabi tez tanlovlar. JS'siz variant: içida native radio/checkbox (segmentli radio guruhi).
- [Toggletip](https://foxui.dev/r/toggletip.json): ⓘ / ? tugma BOSILGANDA kiçik izoh oçiladi (hover emas): native popover + strelka, içida havola bölişi mumkin. Tooltip'dan farqi: bosiladi, telefonda işlaydi, içida havola mumkin.
- [Vositalar paneli](https://foxui.dev/r/toolbar.json): Bir qatordagi amallar guruhi (tahrir paneli, jadval amallari): butun panel — bitta Tab nuqtasi, içida ← → Home End bilan yuriladi. Guruhlar ajratgiç bilan, toggle tugmalar aria-pressed. Tik variant — aria-orientation="vertical" (#94). Suzuvçi (data-variant="floating", 4.158) — hudud pastida yopişqoq kapsula; tanlov paneli (data-variant="bubble" + data-for) — matn tanlanganda tanlov ustida çiqadigan formatlaş paneli, Alt+F10 bilan fokus.
- [Vosita çaqiruvi kartasi](https://foxui.dev/r/toolcall.json): Agent çaqirgan bitta vosita: nomi (mono), vaqti, holati (şakl + söz) va oçilsa kiriş (JSON) hamda natija. Holatlar: navbatda, bajarilmoqda, ruxsat kutmoqda, bajarildi, xato.
- [Sahifa yuklaniş çiziği](https://foxui.dev/r/toploader.json): Sahifa tepasida ingiçka çiziq: navigatsiya yoki katta yuklaniş ketayotganini körsatadi. Aniqlanmagan (yurib ötadi) yoki aniq (--_value).
- [Tanişuv turi](https://foxui.dev/r/tour.json): Yangi foydalanuvçiga interfeysni qadam-baqadam körsatiş: sahifa xiralaşadi, nişon element yoruğ “teşik”da qoladi, yonida qadam kartasi (oldingi, keyingi, ötkazib yuboriş, nuqtalar). Esc yopadi, ← → qadam almaştiradi. Qadamlar `.fx-tour__steps` röyxatida, nişon — data-target selektor. Puls nuqta — beacon (4.161): yangi funksiya yonida pulslovçi halqa (.fx-tour__beacon); bosilsa tur (data-tour-step — qaysi qadamdan) boşlanadi va nuqta «körildi» böladi. Harakat kamaytirilsa — qözğalmas halqa.
- [Agent izi](https://foxui.dev/r/trace.json): AI agent bajargan qadamlar: holat belgisi (bajarildi — doira, işlayapti — pulsatsiyali halqa, kutyapti — halqa, xato — romb), nom, vaqt, oçiladigan tafsilot. Kengaytma: içma-iç .fx-trace, .fx-trace__io (kiriş/çiqiş), data-state=skipped, yiğilgan guruh .fx-trace-group.
- [Tracker (uptime)](https://foxui.dev/r/tracker.json): Kunlar böyiça holat çiziqçalari (4.129): har kun — bitta tor ustun; işladi, qisman uziliş, töxtadi va ma'lumot yöq — rang bilan birga şakl (yaxlit, kesik, qisqa-çiziqli, xira) bilan farqlanadi. Hover va fokusda tafsilot, tepada umumiy foiz. Server, integratsiya, tölov şlyuzi holati uçun.
- [Ötkazgiç](https://foxui.dev/r/transfer.json): Ikki röyxat: “Mavjud” va “Tanlangan”. Bandlarni belgilab, örtadagi tugma bilan boşqa tomonga ötkazasiz; har panelda hammasini belgilaş, qidiruv va sanagiç. Katta röyxatdan köp band tanlaş (ruxsatlar, ustunlar, a'zolar) uçun. Hodisa `fx-transfer-change`.
- [Daraxt](https://foxui.dev/r/tree.json): Içma-iç röyxat (papkalar, bilim bazasi, bölimlar): papka — <details>, chevron yopiqda −90°; çapda yöl çiziği; joriy band brend tusida. Kengaytma: barg ikoni a[data-kind=file|image|code|folder], aria-busy (lazy yuklaniş spinneri), içida .fx-check, details oçiliş animatsiyasi. Sudrab köçiriş va qayta nomlaş (4.136, foxui.js → tree): data-dnd — bandni papkaga (içiga) yoki faylga (undan keyin) sudraş; klaviatura muqobili — Ctrl+X bilan oliş, boşqa papkada Ctrl+V, Esc — bekor; holat yaşirin jonli hududda söz bilan. data-rename — F2 yoki ikki marta bosiş: joyida maydon, Enter saqlaydi, Esc bekor qiladi, böş nom qabul qilinmaydi. Hodisalar fx-tree-move va fx-tree-rename (bekor qilinadi).
- [Daraxt jadvali](https://foxui.dev/r/treegrid.json): Içma-iç qatorli jadval (APG treegrid): loyiha → bosqiç → vazifa, smeta, fayllar tuzilmasi. Ota qator aria-expanded bilan oçiladi/yopiladi, daraja aria-level bilan çekinadi, ustunlar (holat, mas'ul, summa) hamma darajada tekislanadi. Birinçi katakda → oçadi, ← yopadi (yoki otaga çiqadi); ↑↓ faqat körinadigan qatorlar böylab; belgi bosilsa yoki Enter almaştiradi. Qator va katak uslubi Ma'lumot töridan (.fx-datagrid) olinadi — ikkala sinf birga yoziladi. Xulq foxui.js'da (data-fx-treegrid).
- [Daraxtli tanlov](https://foxui.dev/r/treeselect.json): Çuqur ierarxiyadan bitta qiymat tanlaş: combobox maydoni + oçiladigan daraxt. Yozilsa daraxt filtrlanadi (mos tugunlar ota-onalari bilan oçiladi), ← → tugunni yopadi/oçadi. Fokus doim maydonda (aria-activedescendant). `data-leaf-only` — faqat barglar tanlanadi.
- [Qisqartiriş](https://foxui.dev/r/truncate.json): Matn 1–4 qatordan keyin «…» bilan kesiladi. Kesilgan bölsa «Köproq» tugmasi çiqadi (aria-expanded); bir qatorli holatda töliq matn title'da. Fayl yöli uçun örtadan kesiş.
- [Tipografiya rollari](https://foxui.dev/r/type.json): Tipografiya rol şkalasi (4.1–4.5): display · headline · title · body · label, har biri lg/md/sm. Rol ölçam, qator balandligi (--fx-line-height-*), vazn va harf oraliğini (--fx-tracking-*) birga beradi — komponent alohida font-size tanlamaydi, rolni tanlaydi. Display va headline sarlavha şriftida (data-fx-font) va moslaşuv bilan; data-fluid="on" — ekran eniga silliq moslaşuvçi ölçam (clamp: 20→24, 24→36, 30→48, 36→72 px). Katta display ölçamlari: display-lg 48, display-xl 60, display-2xl 72.
- [Upsell va qulflangan funksiya](https://foxui.dev/r/upsell.json): Pullik funksiyani körsatiş va tarifni yangilaşga çaqiriş (naqş): «Pro» belgisi (qulf + söz), banner, foyda röyxatli karta (popover içida ham) va qulflangan köriniş — ostida xiralaşgan namuna, ustida qulf va taklif. Narx sömda, aniq foyda bilan.
- [Video dialog](https://foxui.dev/r/videodialog.json): Muqova rasm va öynatiş tugmasi (4.83): bosilganda video modal oynada (native dialog) oçiladi va özi boşlanadi, yopilganda töxtaydi. Video manbasi faqat oçilganda yuklanadi (iframe data-src yoki video preload="none") — sahifa yengil qoladi. Esc, fon yoki «Yopiş» bilan yopiladi, fokus muqovaga qaytadi. Landing sahifasidagi «2 daqiqada tanişuv» videosi uçun.
- [Video pleyer](https://foxui.dev/r/videoplayer.json): Brauzer videosi ustida öz boşqaruvi: katta ijro tugmasi, progress (suriş), vaqt, ovoz, taglavha (CC) va töliq ekran. Boşqaruv JS bilan yaratiladi — HTMLda faqat <video> (va <track>). Ijro paytida 2,5 soniyadan keyin yaşirinadi; pleyer fokusda bölganda Space/K, ← →, J L, ↑ ↓, M, C, F işlaydi.
- [Saqlangan körinişlar](https://foxui.dev/r/views.json): Röyxat sahifasi tepasida tayyor filtrlar qatori: «Hammasi 248 · Muddati ötgan 12 · Mening 31» — bosilsa jadval şu körinişga ötadi. Tab emas (panel yöq, jadval bitta): tugmalar, tanlangani aria-pressed; sonlar alohida belgi. «+» — yangi köriniş saqlaş (2.99-adjacent, PDP listpage__views). Havola bölsa (köriniş manzilda saqlanadi) — tanlangani aria-current="page".
- [Virtual röyxat](https://foxui.dev/r/virtuallist.json): Minglab bandli röyxat (4.137): 10 000 mijoz, mahsulot katalogi, mahallalar — DOMda faqat körinadigan qatorlar va kiçik zaxira çiziladi, aylantiriş silliq qoladi (hozirgaça faqat datagrid'da bor edi). APG listbox: fokus röyxatda (aria-activedescendant), ↑ ↓ PgUp PgDn Home End, harf bosib qidiriş, Enter/Böşliq tanlaydi; köp tanlovda Shift+↑↓ va Ctrl+A. Har bandda aria-setsize / aria-posinset. Ma'lumot içidagi <script type="application/json"> yoki element.fxVirtual.setItems(massiv) bilan.
- [Sahifa ötişlari (View Transitions)](https://foxui.dev/r/vt.json): View Transitions presetlari (4.28): <html data-fx-vt="fade|axis|slide"> — sahifalararo (MPA) ötiş: fade — öçib-yoniş (M3 fade-through), axis — gorizontal öq böyiça qisqa siljiş (shared axis), slide — mobil stek kabi suriliş; tarix böyiça orqaga ötişda yönaliş teskari, RTL'da közgulanadi. Bir sahifa içida: fxTransition(() => yangilaş, { type: 'back' }). Umumiy element — container transform (4.29): röyxatdagi karta va tafsilot sahifasida bir xil data-vt-name — rasm va sarlavha «uçib» ötadi; bir sahifa içida fxMorph(karta, panel, oçiş). fx-vt-static — ötişda joyida turadigan header. Hammasi prefers-reduced-motion va data-fx-motion="none"da öçadi; qöllanmasa sahifa oddiy almaşadi.
- [Suv belgisi](https://foxui.dev/r/watermark.json): Maxfiy hujjat, hisobot yoki demo ustida takrorlanuvçi xira yozuv (4.144, #49): kim körayotgani va qaçon — skrinşot tarqalsa manbasi bilinadi. Qatlam aria-hidden, siçqonçani ötkazadi (matnni belgilaş va bosiş işlaydi), bosmada ham çiqadi. Matnni foxui.js törga yoyadi; qatlam DevTools'da öçirilsa yoki yaşirilsa qayta qöyiladi. Ekran öquvçi uçun bitta körinmas izoh «Suv belgisi: …».
- [Vidjet](https://foxui.dev/r/widget.json): Dashboard idişi: taşqi qobiq ikkinçi darajali fonda — sarlavha, izoh, amallar (davr, menyu) va legenda (data-role — grafik seriya rollari: brand, ink, accent; sarlavhada legenda bölsa grafikning öz legendasi yaşiriladi); içida kötarilgan yuza — grafik, jadval, KPI qatori (.fx-widget__kpis) yoki röyxat; pastda izoh va havola. Ikki qavat sarlavhani mazmundan ajratadi — sahifada önlab vidjet tursa ham tartibli. Içki burçak taşqidan qobiq qalinligiça kiçik (konsentrik). data-flush — jadval yuza çetigaça; data-variant="plain" — qobiqsiz; aria-busy — yuklaniş (heroui.pro Widget'dan ilhom, kalibr — FoxUI).
- [Köp bosqiçli forma](https://foxui.dev/r/wizard.json): Murakkab formani qadamlarga böladi: Qadamlar, joriy panel, Orqaga/Keyingi/Yuboriş. «Keyingi» joriy qadamni tekşiradi (xato bölsa töxtaydi, qadam «xato» belgisini oladi), qadam almaşganda fokus sarlavhaga ketadi. Oxirgi panel — javoblar xulosasi, har qatorda «Özgartiriş».
- [Yozuv tanlovi](https://foxui.dev/r/yozuv.json): Öquvçi uçun yozuv tanlovi (Qaror 22.10 #4): Yangi (davlat alifbosi: ş ç ö ğ) · Eski lotin · Кирилл. Sahifa yangi alifboda yoziladi; tanlov brauzerda saqlanadi va matn DOM'da brauzerning özida ögiriladi — server, baza va manzillarga tegilmaydi. code, pre, kbd, input, [translate="no"] va [data-yozuv-skip] ögirilmaydi; eski lotindagi blok — data-yozuv-manba="eski" («Yangi»da yangi alifboga ötadi). Ögiriş yadrosi — foxui/yozuv (serverda ham işlatiladi). fx-segment ustiga qurilgan; ixçam variant data-variant="short".

## Qoidalar

- FX-TOKEN-01: Komponent va loyiha CSS'ida HEX, rgb(), hsl() yozilmaydi — faqat var(--fx-*) tokenlari, transparent va currentColor.
- FX-SHAPE-01: border-radius qölda px bilan yozilmaydi — var(--fx-radius-*) yoki pill formulasi orqali.
- FX-SHAPE-02: Pill şakl 999px yoki 50% bilan emas, komponent qoidasida balandlik / 2 bilan hisoblanadi (--fx-knob-pill orqali).
- FX-SHADOW-01: box-shadow qölda yozilmaydi — var(--fx-shadow-*).
- FX-BP-01: @media eni faqat uç rejim çegaralari bilan yoziladi: telefon < 600px ≤ planşet < 840px ≤ kompyuter (keng ekran — 1200px, 1600px). max-width uçun 599.98px / 839.98px. em, rem va boşqa sonlar — yöq. Komponent öz joyiga moslaşsa — @container.
- FX-SPACE-01: padding, margin, gap — faqat var(--fx-space-*) (4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48) yoki 0.
- FX-A11Y-01: Ziçlik boşqaruv balandligini 24px dan (sensorli ekranda 44px dan) pastga tuşirmaydi; şrift ölçamini özgartirmaydi.
- FX-MOTION-01: Animatsiya davomiyligi va egri çiziği var(--fx-motion-*) (xarakterga boğliq) / var(--fx-ease-*) dan; prefers-reduced-motion doim hurmat qilinadi.
- FX-UZ-01: Mahsulot matni yangi alifboda: ö va ğ. Eski yozuvdagi o va g dan keyin tutuq qöyilgan şakl (', ‘, ’) — qöriqçi xatosi. Qöşimça ajratgiçi (Landing'da, Bio'ni) bundan mustasno.
- FX-THEME-01: Loyiha öz brend ranglarini HEX bilan yozmaydi va komponent yoylarini qayta belgilamaydi: rang <html data-fx-theme> (rang kutubxonasi), şakl <html data-fx-personality> (hard | medium | soft) bilan tanlanadi.
- FX-A11Y-02: Har rang mavzusi yoruğ va qoronği rejimda tokens/contrast-pairs.json dagi juftlar böyiça WCAG AA dan ötadi (matn 4,5, UI 3).
- FX-SELECT-01: Har <select> fx-select klassi bilan (yoki fx-select-wrap içida) yoziladi: oçilganda tizim uslubidagi röyxat — sirt, yoy, soya, tanlangani brend tusida ✓ bilan. Brauzerning standart (kök fonli) röyxati heç qayerda qolmaydi.
- FX-PROSE-01: fx-prose içidagi FoxUI komponenti (fx-card va h.k.) içiga yana fx-prose qöyilmaydi: taşqi matn uslubining çegarasi içki fx-prose'ni ham uşlaydi — içki matn oddiy körinadi. Ogohlantiriş, build'ni töxtatmaydi.
- FX-SYNC-01: npx foxui sync olgan fayllar (foxui.lock'da xeşi bor) loyihada tahrirlanmaydi: özgariş FoxUI'ning özida qilinadi va keyingi reliz bilan hamma loyihaga birdan keladi.

## Narxlar

- [Narxlar va taqqoslaş](https://foxui.dev/narxlar/)
- Bepul: bepul — Tanişiş va kiçik loyiha
- Pro: $10/oy (odatiy $29), yillikda $8/oy — Bitta dasturçi yoki dizayner
- Jamoa: $39/oy (odatiy $99), yillikda $32/oy — Studiya va mahsulot jamoasi (5 kişigaça)
- Founders: Birinçi 100 obunaçi Pro'ni oylik tölovda ham $8 dan oladi va obuna uzilmagunça şu narxda qoladi — keyin narx oşsa ham.
- Yuklab olingan versiyalar obuna tugagaç ham abadiy sizda qoladi — töxtaydi faqat yangilaniş, MCP va yangi bloklar.
- Bir martalik (lifetime) sotuv yöq — tizim tirik, har hafta yangilanadi.
- 1 litsenziya = 1 kişi, 3 qurilma. Jamoada har a'zoga alohida litsenziya.
- Istalgan payt bekor qilasiz — keyingi oydan pul yeçilmaydi.