@cahyo-dimas/freeday 1.53.0 → 2.0.0

package/README.id.md

@@ -2,14 +2,14 @@
 
 [English](README.md) · **Bahasa Indonesia**
 
-> **Lebih banyak _free day_ buat dev — UI kit-nya sudah siap pakai.**
+> **Lebih banyak _free day_ buat dev. UI kit-nya sudah siap pakai.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.53.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.53.0)
+[![Release](https://img.shields.io/badge/release-v2.0.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v2.0.0)
 
-UI KIT yang token-driven & framework-agnostic — satu sumber kebenaran untuk warna, tipografi,
+UI KIT yang token-driven & framework-agnostic. Satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.
-**Referensi hidup:** **[cahyo-dimas.github.io/freeday-ui-kit](https://cahyo-dimas.github.io/freeday-ui-kit/)** — atau buka `docs/index.html` langsung di browser.
+**Referensi hidup:** **[cahyo-dimas.github.io/freeday-ui-kit](https://cahyo-dimas.github.io/freeday-ui-kit/)**, atau buka `docs/index.html` langsung di browser.
 
 > 🚀 **Baru mau pakai di project?** Langkah demi langkah per stack (HTML · Vue · React · Blazor): **[`docs/getting-started.md`](docs/getting-started.md)**.
 >
@@ -17,7 +17,7 @@ spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-ki
 > **[`COMPONENTS.md`](COMPONENTS.md)**. **Kapan pakai yang mana:** **[`USAGE.md`](USAGE.md)**.
 > Satu layar utuh yang sudah dirakit: **[`docs/reference-screen.html`](docs/reference-screen.html)**.
 >
-> 🤖 **Ngoding pakai AI agent (atau vibe code)?** Tak ada model yang tahu Freeday dari training —
+> 🤖 **Ngoding pakai AI agent (atau vibe code)?** Tak ada model yang tahu Freeday dari training, jadi
 > berikan **[`docs/agent-onboarding.md`](docs/agent-onboarding.md)** (blok instruksi siap-tempel +
 > tabel mapping migrasi).
 
@@ -27,33 +27,33 @@ node tokens/build.mjs   # tokens.json -> dist/freeday.tokens.css; bundel dist/fr
                         #   dist/freeday.bundle.css (token+komponen); salin dist/*.js + dist/freeday.js
 npm test                # tes transformasi build + kontras WCAG (node:test)
 ```
-`dist/` di-commit — konsumen tak perlu build sendiri.
+`dist/` di-commit, jadi konsumen tak perlu build sendiri.
 
 ## Pakai di project
 
 ### Pertama: pintu masuk mana yang kamu pakai?
 
-Sebagian besar Freeday itu markup + kelas `fdy-*` dan sama di mana pun. **Sepuluh komponen
-interaktif juga punya wrapper typed** — di stack berikut, pakai wrapper-nya, bukan markup mentah +
+Sebagian besar Freeday itu markup + kelas `fdy-*` dan sama di mana pun. **Sebelas komponen
+interaktif juga punya wrapper typed.** Di stack berikut, pakai wrapper-nya, bukan markup mentah +
 enhancer:
 
-| Stack-mu | Impor kesepuluhnya dari | Binding |
+| Stack-mu | Impor kesebelasnya dari | Binding |
 |---|---|---|
 | **Vue 3** | `@cahyo-dimas/freeday/vue` | `v-model` |
 | **React 18/19** | `@cahyo-dimas/freeday/react` | `value` + `onChange` |
 | **Blazor (net8.0)** | RCL `Freeday.Blazor` | `@bind-Value` |
 | HTML statis · Svelte · template server-rendered | *(tanpa wrapper)* markup mentah + enhancer, di bawah | event `fdy-*` |
 
-Kesepuluhnya: `FdyCombo` · `FdyDatepicker` · `FdyDateRange` · `FdyAutocomplete` · `FdyCascade` ·
-`FdyCfl` · `FdyChart` · `FdyTable` · `FdyModal` · `FdyDrawer`. Menulis markup mentah untuk
-kesepuluh ini di dalam Vue/React/Blazor *kelihatan* baik-baik saja — render pertama benar — lalu
-rusak diam-diam: DOM yang di-render framework belakangan tak pernah ter-hydrate, dan state widget
+Kesebelasnya: `FdyCombo` · `FdyDatepicker` · `FdyDateRange` · `FdyAutocomplete` · `FdyCascade` ·
+`FdyCfl` · `FdyChart` · `FdyTable` · `FdyModal` · `FdyDrawer` · `FdyAppShell`. Menulis markup mentah
+untuk kesebelas ini di dalam Vue/React/Blazor *kelihatan* baik-baik saja pada mulanya, karena render
+pertamanya memang benar. Setelah itu ia rusak diam-diam: DOM yang di-render framework belakangan tak pernah ter-hydrate, dan state widget
 berakhir di DOM alih-alih di state framework-mu. Selebihnya (button, card, badge, alert, markup
-tabel, layout, dan komponen interaktif yang tak punya wrapper) sama persis di semua stack — untuk
+tabel, layout, dan komponen interaktif yang tak punya wrapper) sama persis di semua stack. Untuk
 yang terakhir, hydrate dengan `useFreeday` (Vue/React) atau `FreedayBlazor.initAll` (Blazor).
 Panduan lengkap per stack: [`docs/getting-started.md`](docs/getting-started.md).
 
-**Sebagai paket (project dengan bundler — Vue/React/Blazor/Vite):**
+**Sebagai paket (Vue/React/Blazor/Vite, atau project apa pun yang punya bundler):**
 ```bash
 npm i @cahyo-dimas/freeday
 ```
@@ -77,27 +77,27 @@ ter-publish → install tanpa build step; minify diserahkan ke bundler konsumen.
 <link rel="stylesheet" href="dist/freeday.css">          <!-- komponen fdy-* -->
 ```
 Kelas komponen berprefix `fdy-` (mis. `fdy-btn`, `fdy-card`, `fdy-badge`). Pakai langsung di
-markup framework apa pun — Vue, React, Blazor, atau HTML polos.
+markup framework apa pun: Vue, React, Blazor, atau HTML polos.
 
-> **⚠️ Muat font-nya sendiri — paket ini tidak.** Token tipe menamai **Sora** / **IBM Plex Sans** /
+> **⚠️ Muat font-nya sendiri. Paket ini tidak.** Token tipe menamai **Sora** / **IBM Plex Sans** /
 > **JetBrains Mono** tapi Freeday tak membundel file font. Muat (mis. `@import '@fontsource/sora/700.css'`
-> …) atau override `--font-display`/`--font-body`/`--font-mono` — kalau tidak, kit jatuh ke fallback
+> …) atau override `--font-display`/`--font-body`/`--font-mono`. Kalau tidak, kit jatuh ke fallback
 > sistem dan terlihat "belum jadi". Detail: [`docs/getting-started.md`](docs/getting-started.md).
 
 > **Token/role mana dipakai kapan → [`USAGE.md`](USAGE.md).** Freeday menjaga konsistensi *nilai*;
-> `USAGE.md` = doktrin yang menjaga konsistensi *keputusan* — role tipe (`.fdy-title-page/-section/-card`),
+> `USAGE.md` = doktrin yang menjaga konsistensi *keputusan*: role tipe (`.fdy-title-page/-section/-card`),
 > ritme spasi, elevasi, satu-primary-per-layar, palet kategorikal `--tone-1…8`, dan primitif komposisi
 > halaman (`.fdy-page`, `.fdy-page-section`, `.fdy-stats`). Tiap app mulai di `.fdy-app`.
 
 > **Scope: komponen + token, bukan layout.** Freeday punya komponen & design token; helper layout
-> cuma `.fdy-hidden` / `.fdy-visually-hidden` plus primitif komposisi di atas. Layout grid dari layer-mu sendiri —
-> pasangkan dengan utility framework (Tailwind, UnoCSS…) mode **utilities-only, preflight OFF**
-> (`base.css` Freeday = reset-nya). `base.css` itu reset *ringan* (tak me-reset margin `ul`/`ol`/`p` —
-> pakai `.fdy-list-reset` atau komponen list Freeday), dan skala spacing/radius/durasi adalah custom
+> cuma `.fdy-hidden` / `.fdy-visually-hidden` plus primitif komposisi di atas. Layout grid dari layer-mu sendiri.
+> Pasangkan dengan utility framework (Tailwind, UnoCSS…) mode **utilities-only, preflight OFF**
+> (`base.css` Freeday = reset-nya). `base.css` itu reset *ringan* (tak me-reset margin `ul`/`ol`/`p`,
+> jadi pakai `.fdy-list-reset` atau komponen list Freeday), dan skala spacing/radius/durasi adalah custom
 > property publik (`--space-0`…`--space-24`, …) yang bisa jadi dasar theme utility-mu. Detail:
 > [`docs/getting-started.md` §Core concepts](docs/getting-started.md).
 
-> `.fdy-btn` **sudah** tombol primary — tak ada modifier `.fdy-btn--primary` terpisah.
+> `.fdy-btn` **sudah** tombol primary. Tak ada modifier `.fdy-btn--primary` terpisah.
 > Modifier untuk varian lain: `--ghost`, `--danger`, `--text`, `--sm`, `--lg`, `--icon`
 > (lihat `docs/index.html`).
 
@@ -117,7 +117,8 @@ JS. Dua cara:
 <script src="dist/freeday-upload.js"     defer></script>  <!-- [data-fdy-dropzone] -->
 <script src="dist/freeday-toast.js"      defer></script>  <!-- Freeday.toast({...}) -->
 ```
-Semua auto-init `[data-fdy-*]` saat `DOMContentLoaded` — idempotent, progressive enhancement.
+Semua auto-init `[data-fdy-*]` saat `DOMContentLoaded`. Semuanya idempotent, dan tetap jadi markup
+biasa kalau script-nya tak pernah dimuat.
 
 | Enhancer | Hook markup | Event / API |
 |---|---|---|
@@ -138,47 +139,47 @@ Semua auto-init `[data-fdy-*]` saat `DOMContentLoaded` — idempotent, progressi
 
 Tabel lebar (banyak kolom) butuh wrapper untuk scroll horizontal: bungkus `.fdy-table` dengan
 `.fdy-table-wrap` (tabel biasa, sudah termasuk shell border + shadow) atau `.fdy-table-scroll`
-(scroll polos tanpa shell — jalan standalone maupun di dalam `.fdy-datatable` yang shell
+(scroll polos tanpa shell, jadi jalan standalone maupun di dalam `.fdy-datatable` yang shell
 border/shadow-nya sudah ada sendiri). Tanpa salah satu wrapper ini, tabel lebar akan overflow
 container-nya, bukan scroll sendiri.
 
-### 3. Theming — 3 sumbu lewat `data-*` di root
-- `data-theme="light|dark"` — redefinisi token semantic (bind ke state tema app-mu).
+### 3. Theming: 3 sumbu lewat `data-*` di root
+- `data-theme="light|dark"` me-redefinisi token semantic (bind ke state tema app-mu).
   Berlaku di **ancestor mana pun**, tak harus root: `<section data-theme="dark">` membalik region itu
   dan semua komponen di dalamnya ikut (lihat [`USAGE.md`](USAGE.md) §5b).
-- `data-density="comfortable|compact"` — tinggi kontrol (`--control-h`) untuk layar padat data.
+- `data-density="comfortable|compact"` mengatur tinggi kontrol (`--control-h`) untuk layar padat data.
   Ini auto-apply hanya ke kontrol bawaan Freeday (button, input, combo, dst); komponen
   custom/hand-built harus baca `--control-h` sendiri (mis. `height: var(--control-h)`) supaya ikut
   menyusut/melebar saat `data-density` berubah.
-- (roadmap) `data-style` — varian visual lain.
+- (roadmap) `data-style` untuk varian visual lain.
 - Skala breakpoint (`sm`/`md`/`lg`/`xl` = 600/960/1280/1920px, sama dengan utilitas
   `src/components/breakpoints.css`) juga tersedia di JS: `import { breakpoints } from
-  '@cahyo-dimas/freeday/breakpoints'` — dipakai untuk menyamakan `matchMedia`/`@media` app-mu ke
-  skala Freeday.
+  '@cahyo-dimas/freeday/breakpoints'`. Pakai itu untuk menyamakan `matchMedia`/`@media` app-mu
+  dengan skala Freeday.
 
 ## Integrasi framework (SPA)
-> **Peta library lengkap:** [`docs/integrations.md`](docs/integrations.md) — tiap area
+> **Peta library lengkap:** [`docs/integrations.md`](docs/integrations.md). Tiap area
 > (form/validasi, chart, tabel, tanggal, overlay, dst) dipetakan ke library ekosistem yang biasa
 > dipasang (Zod/Yup, Chart.js, TanStack Table, date-fns, Floating UI, …), plus cara
 > menjembataninya + binding Vue/React/Blazor. Buka saat mulai project baru.
 
-**Adapter siap pakai — Vue · React · Blazor.** Semua tipis: enhancer tetap sumber kebenaran,
+**Adapter siap pakai untuk Vue, React, dan Blazor.** Semua tipis: enhancer tetap sumber kebenaran,
 adapter hanya hydrate + jembatani event. Tiap punya contoh layar **faktur** yang jalan:
 
 ```ts
-// Vue 3 — @cahyo-dimas/freeday/vue
+// Vue 3: @cahyo-dimas/freeday/vue
 import { useFreeday } from '@cahyo-dimas/freeday/vue';
 const root = ref<HTMLElement | null>(null);
 useFreeday(root);                     // @fdy-cascade-change="…" (detail bertipe)
 ```
 ```tsx
-// React — @cahyo-dimas/freeday/react
+// React: @cahyo-dimas/freeday/react
 import { useFreeday } from '@cahyo-dimas/freeday/react';
 const root = useRef<HTMLDivElement>(null);
 useFreeday(root);                     // event fdy-* bubbling → listen di root
 ```
 ```razor
-@* Blazor — RCL Freeday.Blazor (net8.0): komponen native typed <FdyX> dengan @bind, 10/10 parity *@
+@* Blazor: RCL Freeday.Blazor (net8.0), komponen native typed <FdyX> dengan @bind, 11/11 parity *@
 @using Freeday.Blazor
 <FdyCombo TValue="string" @bind-Value="_status" Options="_statusOptions" AriaLabelledby="lbl" />
 <FdyTable TRow="Invoice" Columns="_cols" Rows="_rows" RowKey="@(i => i.Code)" PageSize="10" />
@@ -195,18 +196,18 @@ Peta library & pola lengkap: [`docs/integrations.md`](docs/integrations.md).
 
 Enhancer auto-init sekali saat load. Untuk DOM yang dirender dinamis (Vue/React/Blazor):
 - **Reuse enhancer:** setelah mount/route change, panggil `window.FreedayTable.initAll(el)` (atau
-  `initAll()` global). Aman diulang — tiap init dijaga flag idempotent. Jembatani ke state framework
+  `initAll()` global). Aman diulang, karena tiap init dijaga flag idempotent. Jembatani ke state framework
   lewat event yang dipancarkan (mis. dengarkan `fdy-cfl-select`, `fdy-datepicker-change`).
 - **Atau re-implement:** tulis komponen framework sendiri, pertahankan **markup + kontrak ARIA +
   kelas `fdy-*`** yang sama (lihat `docs/index.html`). Enhancer adalah implementasi rujukan, bukan
   keharusan. Untuk choose-from-list, jadikan komponen terkontrol (`fetchPage` callback + server
   cache), jangan mirror ke store global.
 
-## Aturan token — 3 lapis (jangan dilanggar)
+## Aturan token: 3 lapis (jangan dilanggar)
 ```
-Tier 1 PRIMITIVE  ramp mentah (--azure-600…) — TAK PERNAH dipakai di komponen
-Tier 2 SEMANTIC   peran (--color-primary, --color-surface…) — berubah saat theme & re-brand
-Tier 3 COMPONENT  --fdy-<komponen>-<prop> — opsional, override lokal
+Tier 1 PRIMITIVE  ramp mentah (--azure-600…), TAK PERNAH dipakai di komponen
+Tier 2 SEMANTIC   peran (--color-primary, --color-surface…), berubah saat theme & re-brand
+Tier 3 COMPONENT  --fdy-<komponen>-<prop>, opsional, override lokal
 ```
 Komponen hanya menyentuh Tier 2/3. Butuh nilai baru → compose → extend modifier → baru create.
 
@@ -252,10 +253,10 @@ terlihat, HTML native dulu sebelum ARIA, komponen interaktif ikut pola WAI-ARIA
 ## Dukungan browser
 Butuh browser evergreen, kira-kira 2023+: **Chrome 111 · Safari 16.4 · Firefox 113** (floor
 ditentukan `color-mix()`). Fitur lain: native `<dialog>`/`::backdrop`, `accent-color`, `100dvh`,
-`conic-gradient`, `scroll-snap` — semua ≥ Safari 15.4. Blur backdrop pakai
+`conic-gradient`, `scroll-snap`, semuanya ≥ Safari 15.4. Blur backdrop pakai
 `-webkit-backdrop-filter` + `backdrop-filter` (Safari lama tetap jalan, hanya tanpa blur). Belum ada
-CSS build/autoprefixer — dukungan browser lama = tanggung jawab konsumen.
+CSS build/autoprefixer, jadi dukungan browser lama jadi tanggung jawab konsumen.
 
 ## Lisensi
-[MIT](LICENSE) © 2026 Cahyo D. Kurnianto — bebas dipakai, diubah, dan didistribusikan asal
+[MIT](LICENSE) © 2026 Cahyo D. Kurnianto. Bebas dipakai, diubah, dan didistribusikan asal
 menyertakan baris copyright + teks lisensi.

package/README.md

@@ -2,14 +2,14 @@
 
 **English** · [Bahasa Indonesia](README.id.md)
 
-> **More free days for devs — the UI kit is ready to use.**
+> **More free days for devs. The UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.53.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.53.0)
+[![Release](https://img.shields.io/badge/release-v2.0.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v2.0.0)
 
-A token-driven, framework-agnostic UI kit — one source of truth for color, typography,
+A token-driven, framework-agnostic UI kit. One source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.
-**Living reference:** **[cahyo-dimas.github.io/freeday-ui-kit](https://cahyo-dimas.github.io/freeday-ui-kit/)** — or open `docs/index.html` directly in a browser.
+**Living reference:** **[cahyo-dimas.github.io/freeday-ui-kit](https://cahyo-dimas.github.io/freeday-ui-kit/)**, or open `docs/index.html` directly in a browser.
 
 > 🚀 **Starting a project?** Step-by-step per stack (HTML · Vue · React · Blazor): **[`docs/getting-started.md`](docs/getting-started.md)**.
 >
@@ -17,7 +17,7 @@ spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-u
 > **[`COMPONENTS.md`](COMPONENTS.md)**. **Which one to reach for, and when:** **[`USAGE.md`](USAGE.md)**.
 > A full screen assembled: **[`docs/reference-screen.html`](docs/reference-screen.html)**.
 >
-> 🤖 **Building with an AI agent (or vibe-coding)?** No model knows Freeday from training — give it
+> 🤖 **Building with an AI agent (or vibe-coding)?** No model knows Freeday from training, so give it
 > **[`docs/agent-onboarding.md`](docs/agent-onboarding.md)** (paste-ready project instructions +
 > a migration mapping table).
 
@@ -27,32 +27,34 @@ node tokens/build.mjs   # tokens.json -> dist/freeday.tokens.css; bundles dist/f
                         #   dist/freeday.bundle.css (tokens+components); copies dist/*.js + dist/freeday.js
 npm test                # build-transform tests + WCAG contrast (node:test)
 ```
-`dist/` is committed — consumers don't have to build it themselves.
+`dist/` is committed, so consumers don't have to build it themselves.
 
 ## Use in a project
 
 ### First: which entry point is yours?
 
-Most of Freeday is markup + `fdy-*` classes and is identical everywhere. **Ten interactive
-components also ship a typed wrapper** — in these stacks, use the wrapper, not raw markup + enhancer:
+Most of Freeday is markup + `fdy-*` classes and is identical everywhere. **Eleven interactive
+components also ship a typed wrapper.** In those stacks, use the wrapper rather than raw markup +
+enhancer:
 
-| Your stack | Import the ten from | Binding |
+| Your stack | Import the eleven from | Binding |
 |---|---|---|
 | **Vue 3** | `@cahyo-dimas/freeday/vue` | `v-model` |
 | **React 18/19** | `@cahyo-dimas/freeday/react` | `value` + `onChange` |
 | **Blazor (net8.0)** | `Freeday.Blazor` RCL | `@bind-Value` |
 | Static HTML · Svelte · server-rendered templates | *(no wrapper)* raw markup + enhancers, below | `fdy-*` events |
 
-The ten: `FdyCombo` · `FdyDatepicker` · `FdyDateRange` · `FdyAutocomplete` · `FdyCascade` ·
-`FdyCfl` · `FdyChart` · `FdyTable` · `FdyModal` · `FdyDrawer`. Hand-writing the raw markup for
-these inside Vue/React/Blazor *looks* fine — the first render is correct — and then breaks quietly:
+The eleven: `FdyCombo` · `FdyDatepicker` · `FdyDateRange` · `FdyAutocomplete` · `FdyCascade` ·
+`FdyCfl` · `FdyChart` · `FdyTable` · `FdyModal` · `FdyDrawer` · `FdyAppShell`. Hand-writing the raw
+markup for these inside Vue/React/Blazor *looks* fine at first, because the first render is correct.
+Then it breaks quietly:
 DOM the framework renders later is never hydrated, and the widget's state ends up in the DOM instead
 of your framework's. Everything else (button, card, badge, alert, table markup, layout, and the
-interactive components with no wrapper) is the same plain markup in every stack — hydrate the latter
+interactive components with no wrapper) is the same plain markup in every stack. Hydrate the latter
 with `useFreeday` (Vue/React) or `FreedayBlazor.initAll` (Blazor). Full walkthrough per stack:
 [`docs/getting-started.md`](docs/getting-started.md).
 
-**As a package (projects with a bundler — Vue/React/Blazor/Vite):**
+**As a package (Vue/React/Blazor/Vite, or any project with a bundler):**
 ```bash
 npm i @cahyo-dimas/freeday
 ```
@@ -76,27 +78,27 @@ bundler. Because it's on **public npm**, `npm ci` runs in CI without auth or an
 <link rel="stylesheet" href="dist/freeday.css">          <!-- fdy-* components -->
 ```
 Component classes are prefixed `fdy-` (e.g. `fdy-btn`, `fdy-card`, `fdy-badge`). Use them directly
-in any framework's markup — Vue, React, Blazor, or plain HTML.
+in any framework's markup: Vue, React, Blazor, or plain HTML.
 
-> **⚠️ Load the fonts — the package doesn't.** The type tokens name **Sora** / **IBM Plex Sans** /
+> **⚠️ Load the fonts yourself. The package doesn't.** The type tokens name **Sora** / **IBM Plex Sans** /
 > **JetBrains Mono** but Freeday bundles no font files. Load them (e.g. `@import '@fontsource/sora/700.css'`
-> …) or override `--font-display`/`--font-body`/`--font-mono` — otherwise the kit renders in the system
+> …) or override `--font-display`/`--font-body`/`--font-mono`. Otherwise the kit renders in the system
 > fallback and looks unfinished. See [`docs/getting-started.md` §Core concepts](docs/getting-started.md).
 
 > **Which token/role to use when → [`USAGE.md`](USAGE.md).** Freeday enforces consistent *values*;
-> `USAGE.md` is the doctrine that also makes *decisions* consistent — type roles (`.fdy-title-page/-section/-card`),
+> `USAGE.md` is the doctrine that also makes *decisions* consistent: type roles (`.fdy-title-page/-section/-card`),
 > spacing rhythm, elevation, one-primary-per-screen, the `--tone-1…8` categorical palette, and the page-
 > composition primitives (`.fdy-page`, `.fdy-page-section`, `.fdy-stats`). Every app starts in `.fdy-app`.
 
 > **Scope: components + tokens, not layout.** Freeday owns components and design tokens; the only
 > layout helpers are `.fdy-hidden` / `.fdy-visually-hidden` plus the page-composition primitives above.
-> Bring your own grid layer — pair it with a utility framework (Tailwind, UnoCSS…) run **utilities-only
+> Bring your own grid layer. Pair it with a utility framework (Tailwind, UnoCSS…) run **utilities-only
 > with preflight OFF** (Freeday's `base.css` is the reset). `base.css` is a *light* reset (it doesn't
-> strip `ul`/`ol`/`p` margins — use `.fdy-list-reset` or a Freeday list component), and the
+> strip `ul`/`ol`/`p` margins, so use `.fdy-list-reset` or a Freeday list component), and the
 > spacing/radius/duration scales are public custom properties (`--space-0`…`--space-24`, …) you can
 > build your utility theme on. Full notes: [`docs/getting-started.md` §Core concepts](docs/getting-started.md).
 
-> `.fdy-btn` is **already** the primary button — there's no separate `.fdy-btn--primary` modifier.
+> `.fdy-btn` is **already** the primary button. There's no separate `.fdy-btn--primary` modifier.
 > Modifiers for other variants: `--ghost`, `--danger`, `--text`, `--sm`, `--lg`, `--icon`
 > (see `docs/index.html`).
 
@@ -116,7 +118,8 @@ JS. Two ways:
 <script src="dist/freeday-upload.js"     defer></script>  <!-- [data-fdy-dropzone] -->
 <script src="dist/freeday-toast.js"      defer></script>  <!-- Freeday.toast({...}) -->
 ```
-Each one auto-inits `[data-fdy-*]` on `DOMContentLoaded` — idempotent, progressive enhancement.
+Each one auto-inits `[data-fdy-*]` on `DOMContentLoaded`. They're idempotent, and they degrade to
+plain markup when the script never loads.
 
 | Enhancer | Markup hook | Event / API |
 |---|---|---|
@@ -137,47 +140,47 @@ Each one auto-inits `[data-fdy-*]` on `DOMContentLoaded` — idempotent, progres
 
 Wide tables (many columns) need a wrapper for horizontal scroll: wrap `.fdy-table` in
 `.fdy-table-wrap` (a standard table, includes the border + shadow shell) or `.fdy-table-scroll`
-(plain scroll, no shell — works standalone or inside `.fdy-datatable`, which already has its own
+(plain scroll, no shell, so it works standalone or inside `.fdy-datatable`, which already has its own
 border/shadow shell). Without one of these wrappers, a wide table overflows its container instead
 of scrolling.
 
-### 3. Theming — 3 axes via `data-*` on the root
-- `data-theme="light|dark"` — redefines the semantic tokens (bind it to your app's theme state).
+### 3. Theming: 3 axes via `data-*` on the root
+- `data-theme="light|dark"` redefines the semantic tokens (bind it to your app's theme state).
   Works on **any ancestor**, not just the root: `<section data-theme="dark">` inverts that region
   and every component inside it follows (see [`USAGE.md`](USAGE.md) §5b).
-- `data-density="comfortable|compact"` — control height (`--control-h`) for data-dense screens.
+- `data-density="comfortable|compact"` sets control height (`--control-h`) for data-dense screens.
   This auto-applies only to Freeday's built-in controls (button, input, combo, etc.);
   custom/hand-built components must read `--control-h` themselves (e.g. `height: var(--control-h)`)
   to shrink or grow when `data-density` changes.
-- (roadmap) `data-style` — alternative visual variants.
+- (roadmap) `data-style` for alternative visual variants.
 - The breakpoint scale (`sm`/`md`/`lg`/`xl` = 600/960/1280/1920px, matching the
   `src/components/breakpoints.css` utilities) is also available in JS: `import { breakpoints } from
-  '@cahyo-dimas/freeday/breakpoints'` — use it to align your app's `matchMedia`/`@media` with
-  Freeday's scale.
+  '@cahyo-dimas/freeday/breakpoints'`. Use it to keep your app's `matchMedia`/`@media` on the same
+  scale as Freeday's.
 
 ## Framework integration (SPA)
-> **Full library map:** [`docs/integrations.md`](docs/integrations.md) — each area (forms/validation,
+> **Full library map:** [`docs/integrations.md`](docs/integrations.md). Each area (forms/validation,
 > charts, tables, dates, overlays, etc.) mapped to the ecosystem library you'd normally reach for
 > (Zod/Yup, Chart.js, TanStack Table, date-fns, Floating UI, …), plus how to bridge it and the
 > Vue/React/Blazor bindings. Read it when starting a new project.
 
-**Ready-made adapters — Vue · React · Blazor.** All thin: the enhancer stays the source of truth;
+**Ready-made adapters for Vue, React and Blazor.** All thin: the enhancer stays the source of truth;
 the adapter only hydrates and bridges events. Each ships a working **invoice** screen:
 
 ```ts
-// Vue 3 — @cahyo-dimas/freeday/vue
+// Vue 3: @cahyo-dimas/freeday/vue
 import { useFreeday } from '@cahyo-dimas/freeday/vue';
 const root = ref<HTMLElement | null>(null);
 useFreeday(root);                     // @fdy-cascade-change="…" (typed detail)
 ```
 ```tsx
-// React — @cahyo-dimas/freeday/react
+// React: @cahyo-dimas/freeday/react
 import { useFreeday } from '@cahyo-dimas/freeday/react';
 const root = useRef<HTMLDivElement>(null);
 useFreeday(root);                     // fdy-* events bubble → listen at the root
 ```
 ```razor
-@* Blazor — Freeday.Blazor RCL (net8.0): native typed <FdyX> with @bind, 10/10 parity *@
+@* Blazor: Freeday.Blazor RCL (net8.0), native typed <FdyX> with @bind, 11/11 parity *@
 @using Freeday.Blazor
 <FdyCombo TValue="string" @bind-Value="_status" Options="_statusOptions" AriaLabelledby="lbl" />
 <FdyTable TRow="Invoice" Columns="_cols" Rows="_rows" RowKey="@(i => i.Code)" PageSize="10" />
@@ -194,7 +197,7 @@ Full library map and patterns: [`docs/integrations.md`](docs/integrations.md).
 
 Enhancers auto-init once on load. For DOM rendered dynamically (Vue/React/Blazor):
 - **Reuse the enhancer:** after a mount or route change, call `window.FreedayTable.initAll(el)`
-  (or the global `initAll()`). Safe to repeat — each init is guarded by an idempotent flag. Bridge
+  (or the global `initAll()`). Safe to repeat, since each init is guarded by an idempotent flag. Bridge
   to framework state through the events it emits (e.g. listen for `fdy-cfl-select`,
   `fdy-datepicker-change`).
 - **Or re-implement:** write your own framework component, keeping the same **markup + ARIA
@@ -202,11 +205,11 @@ Enhancers auto-init once on load. For DOM rendered dynamically (Vue/React/Blazor
   implementation, not a requirement. For choose-from-list, make it a controlled component
   (`fetchPage` callback + server cache) rather than mirroring into a global store.
 
-## Token rules — 3 tiers (don't break them)
+## Token rules: 3 tiers (don't break them)
 ```
-Tier 1 PRIMITIVE  raw ramp (--azure-600…) — NEVER used in components
-Tier 2 SEMANTIC   roles (--color-primary, --color-surface…) — change on theme & re-brand
-Tier 3 COMPONENT  --fdy-<component>-<prop> — optional, local override
+Tier 1 PRIMITIVE  raw ramp (--azure-600…), NEVER used in components
+Tier 2 SEMANTIC   roles (--color-primary, --color-surface…), change on theme & re-brand
+Tier 3 COMPONENT  --fdy-<component>-<prop>, optional local override
 ```
 Components only touch Tier 2/3. Need a new value → compose → extend a modifier → only then create.
 
@@ -220,7 +223,7 @@ src/*.js               optional JS enhancers (reference, vanilla)
 dist/                  build output (COMMITTED):
   freeday.tokens.css   semantic tokens (light/dark/compact)
   freeday.css          every component (NO tokens)
-  freeday.bundle.css   tokens + components — link this one
+  freeday.bundle.css   tokens + components, link this one
   freeday.js           bundle of every enhancer (single <script>)
   freeday-*.js         per-file enhancers
 COMPONENTS.md          every class + markup skeleton + a11y contract
@@ -259,11 +262,11 @@ the "Accessibility" section in `docs/index.html`.
 ## Browser support
 Needs an evergreen browser, roughly 2023+: **Chrome 111 · Safari 16.4 · Firefox 113** (the floor is
 set by `color-mix()`). Other features used: native `<dialog>`/`::backdrop`, `accent-color`,
-`100dvh`, `conic-gradient`, `scroll-snap` — all ≥ Safari 15.4. Backdrop blur uses
+`100dvh`, `conic-gradient`, `scroll-snap`, all of them ≥ Safari 15.4. Backdrop blur uses
 `-webkit-backdrop-filter` + `backdrop-filter` (older Safari still works, just without the blur).
-There's no CSS build or autoprefixer step — supporting older browsers is the consumer's
+There's no CSS build or autoprefixer step, so supporting older browsers is the consumer's
 responsibility.
 
 ## License
-[MIT](LICENSE) © 2026 Cahyo D. Kurnianto — free to use, modify, and distribute, as long as the
+[MIT](LICENSE) © 2026 Cahyo D. Kurnianto. Free to use, modify, and distribute, as long as the
 copyright line and license text are included.