Foundation
Counter
Proxy state, native button ve polite output.
<dv-counter data-start="2"></dv-counter>Küçük yapı taşları. Açık davranışlar.
Aşağıdaki demolar gerçek DevinimJS custom element’leridir. Davranışı dene, event’leri incele ve başlangıç markup’ını kopyala.
Light DOM + CKCSS
Davranış DevinimJS’de, sunum CKCSS’de, veri ve persistence sayfada kalır.
Öne çıkan canlı showcase
DeneNavigation
Tabs
Birinci Light DOM paneli.
İkinci semantic panel.
<dv-tabs data-label="Ürün detayları">...</dv-tabs>Feedback
Modal
Escape ile kapanan, focus-aware dialog.
<dv-modal data-label="Detaylar">...</dv-modal>Forms
Field + confirm
Discovery
Autocomplete
Data
Table + pagination
Commerce
Product card + cart
Feedback/state
Toast stack + state
Tam manifest
16 componentin tamamı aynı attribute/event sözleşmesini izler. Makine okunabilir manifest tooling ve AI ajanları için hazırdır.
| Tag | Kategori | Temel davranış |
|---|---|---|
dv-counter | Foundation | Sayı state’i |
dv-tabs | Navigation | ARIA tabs ve keyboard navigation |
dv-disclosure | Navigation | Accessible show/hide |
dv-modal | Feedback | Dialog ve focus restore |
dv-toast | Feedback | Durum bildirimi |
dv-pagination | Data | Sayfa navigasyonu |
dv-dropdown | Navigation | Context menu |
dv-search | Discovery | Query event |
dv-product-card | Commerce | Sepete ekleme event’i |
dv-field | Forms | Native control/validation |
dv-confirm | Forms | Onay gerektiren action |
dv-autocomplete | Discovery | Local combobox |
dv-data-table | Data | Sortable JSON table |
dv-cart | Commerce | Cart presentation |
dv-toast-stack | Feedback | Notification queue |
dv-state | Async | Loading/empty/error/retry |