@cahyo-dimas/freeday 3.7.0 → 3.9.0

package/CHANGELOG.md

@@ -9,6 +9,203 @@ benar. Perubahan seperti itu ditulis di bawah `### Changed: BREAKING (types)`
 lama → tipe baru, dan cara menyempitkannya — bukan di bawah `### Added`, betapapun aditifnya dari
 sisi kit.
 
+## [3.9.0] - 2026-10-23
+
+**Rilis ini dimulai sebagai tiga penambahan dan berakhir dengan lima cacat, dan yang menemukan
+kelimanya adalah penambahan itu sendiri.** Pemiliknya memutuskan batas antara kit dan app yang
+memakainya ditentukan oleh satu pertanyaan: apakah sesuatu bisa diadaptasi universal. Di bawah
+ukuran itu beberapa hal yang sebelumnya dicatat sebagai "selera pemakai" atau diparkir menunggu
+pemanggil kedua ternyata pekerjaan kit, dan menutupnya membuka apa yang ada di belakangnya.
+
+Satu algoritma hidup di **empat salinan**. `#079` di 3.8.0 memperbaiki posisi panel popover di satu
+di antaranya, dan tiga butir rilis ini adalah akibat langsungnya: salinan bertipe membawa cacat yang
+sama untuk delapan komponen, salinan keempat di enhancer tabel memecah paritas begitu salinan
+bertipe dibetulkan, dan memindahkan panel filter ke tempat yang benar membuka dua hal lagi. Satu di
+antaranya sudah terkirim ke pengguna sejak lama tanpa ada yang melaporkannya: panel filter pada
+tabel di dalam modal terbuka, tergambar, lalu menolak segala masukan.
+
+### Fixed
+- **Cacat urutan `#079` ada di salinan bertipe juga** (`#081`), dan di sana ia kena delapan
+  komponen: `FdyDatepicker`, `FdyAutocomplete`, `FdyCascade` dan `FdyCombo`, masing-masing di Vue
+  dan React. `adapters/vue/usePopover.ts` dan padanannya di React membaca rect pemicu sebagai hal
+  pertama, sama seperti jalur mentah sebelum 3.8.0. Terukur: panel mendarat 741 lawan pemicu 756,
+  selisih tepat satu lebar scrollbar klasik. `FdyTableFilter` lolos, dan sebabnya menarik:
+  `.fdy-filter` satu-satunya panel kit yang `position:fixed`, jadi dokumen tidak pernah tumbuh dan
+  pemicunya tidak pernah bergeser.
+- **Panel filter pada tabel di dalam modal tidak bisa diisi** (`#082`). `showModal()` membuat
+  segalanya di luar subtree dialog `inert`, dan panel jalur mentah menempel ke `document.body`,
+  yaitu di luar itu. Panelnya terbuka, tergambar, lalu menolak fokus dan klik: `focus()` milik
+  enhancer sendiri jadi no-op dan `elementFromPoint` di tengah panel mengembalikan sel tabel di
+  belakangnya. Rect tidak bisa melihat ini, jadi yang menemukannya hit test. Panelnya kini anak
+  `<th>`-nya sendiri seperti `FdyTableFilter` bertipe, dan salinan keempat logika posisi yang
+  memosisikannya ikut terhapus.
+- **Panel filter mewarisi tipografi sel header** (`#083`). Dari sepuluh deklarasi `.fdy-table th`,
+  tujuh diwariskan, dan empat sudah ditimpa sejak terbit. Yang lolos: `white-space:nowrap`, yang
+  membuat nilai enum panjang melebar sampai `max-width` alih-alih membungkus, plus `font-size` dan
+  `text-align`. Sumber kedua dari sel yang sama: `.fdy-table__num` menambahkan
+  `font-family:var(--font-mono)`, jadi judul panel tercetak dengan huruf data.
+- **Panel filter jalur merosot terkurung konteks penumpukan sel header** (`#084`).
+  `.fdy-table--sticky-head thead th` adalah `position:sticky;z-index:2`, yang membuat konteks
+  penumpukan, jadi `z-index:130` milik panel diurutkan di dalam angka 2 itu. Jalur popover lolos
+  sebab top layer tidak peduli konteks penumpukan, tetapi Popover API baru ada di Chrome 114,
+  Safari 17 dan Firefox 125 sementara lantai dukungan kit Chrome 105, Safari 15.4 dan Firefox 121.
+  Terukur di jalur merosot: panel tumpang tindih 224x49px dengan `.fdy-bottomnav`, dan 49px itu
+  persis tombol Reset dan Close. Panelnya kini dipasang di akar tabel dan diposisikan lewat
+  `place()`. Menaikkan angkanya tidak akan menolong, sebab angka 2 itu yang menahan header beku di
+  atas sel badan beku dan menaikkannya di atas 50 akan mencetak seluruh baris header di atas pita
+  bawah.
+
+### Added
+- **`FdyTable` meneruskan keenam prop teks pita kakinya** (`#080`), di ketiga adapter. 3.8.0 memberi
+  `FdyTableFooter` prop itu, tetapi tabel merender pita kakinya sendiri tanpa meneruskannya, jadi
+  app non-Inggris yang memakai pita kaki bawaan tetap Inggris dan jalan keluarnya satu-satunya
+  `pager={false}` plus merender pita kakinya sendiri. Prop datar, bukan objek, sebab penjaga
+  dokumentasi membaca nama prop satu per satu dan sebuah objek akan menyembunyikan isinya dari
+  penjaga itu.
+- **Perataan untuk popover bertipe** (`#081`). `align: 'start' | 'end'`, nama yang sama dengan jalur
+  mentah, sebagai argumen posisi keempat `usePopover`. Objek opsi ditolak sebab literal objek di
+  `useEffect` React punya identitas baru setiap render sementara primitif masuk ke deps tanpa
+  menuntut `useMemo` dari pemanggil. Yang memilih perataan komponennya sendiri, jadi `FdyTable`
+  tidak bertambah prop: `FdyTableFilter` menulis `'end'` karena ia memang selalu duduk di header
+  kolom.
+- **`matchWidth` di jalur bertipe** (`#082`). Adapter selalu menulis `minWidth` selebar pemicu, dan
+  untuk corong filter 24px nilai inline itu mengalahkan `min-width:14rem` di stylesheet: panel
+  terukur 206px alih-alih 224. Yang lebarnya bergerak hanya `FdyTableFilter`, jadi hanya filter yang
+  mengirim `matchWidth:false`. Keempat panel lain memang harus tetap memakai bawaannya, dan
+  alasannya mekanisme yang sama dengan `#079`: ketiga listbox `min-width:100%`, dan di top layer
+  `100%` itu lebar viewport.
+- **`loadingText` di `FdyTable` Vue dan React** (`#085`). Blazor punya `LoadingText` sejak awal,
+  kedua adapter lain menulis `Loading…` sebagai literal di templat. Sapuan yang menemukannya juga
+  mencatat dua belas string di panel filter kolom dan satu nama aksesibel di `FdyCfl` yang masih
+  tertutup di ketiga adapter sekaligus; keduanya tercatat dengan nomor baris untuk rilis berikutnya.
+- **`FdyMonthpicker`** (`#086`), di ketiga adapter. 3.8.0 menambahkan `mode="month"` di
+  `FdyDatepicker`, dan bentuk itu membuat satu prop membawa dua format dengan prop lain yang memilih
+  format mana. Komponen tersendiri menutupnya dengan hitungan prop, bukan dengan alias tipe: tidak
+  ada `mode` yang bisa mengubah arti `modelValue`. Gridnya diangkat ke `adapters/core/month-grid.js`
+  dan dipakai balik oleh `FdyDatepicker`, jadi implementasi grid bulan di kit tetap dua, bukan tiga;
+  kedua datepicker menyusut 87 dan 82 baris. Jalur mentah tidak diubah dan `data-mode="month"` tidak
+  ditandai usang, sebab atribut string tidak punya tipe yang bisa berbohong soal isi `data-value`.
+
+### Deprecated
+- **`mode` di `FdyDatepicker`** (`#086`), bersama `FdyDatepickerMode.Month` dan parameter `Mode` di
+  Blazor. Tetap bekerja persis seperti di 3.8.0, dan ada uji paritas sel demi sel yang menjaga janji
+  itu. Dihapus di 4.0. Penandaannya lewat tipe dan bukan prosa, satu mekanisme per stack
+  (`@deprecated` di Vue dan React, `[Obsolete]` di Blazor), masing-masing menyebut penggantinya, dan
+  ada uji yang menuntut nama pengganti itu tetap ada di sana. Repo ini belum pernah memensiunkan apa
+  pun, jadi ini presedennya.
+
+### Catatan: lencana netral sudah ada
+Catatan app yang jadi sumber 3.8.0 dan 3.9.0 meminta `fdy-badge--neutral` untuk status yang tidak
+boleh terbaca seperti aksi. Kelas itu tidak dibuat, sebab `.fdy-badge--outline` sudah menjawabnya:
+tintanya 7.46:1 di tema terang dan 7.28:1 di gelap terhadap permukaan, jadi ia sudah lewat gerbang
+kontras pada ambang teks untuk ketiga permukaan. Yang ditambahkan dokumentasi yang mengatakannya,
+plus penjaga yang mengikat dokumen itu ke deklarasinya. Separuh usul yang lain, menjadikan netral
+sebagai **bawaan** `.fdy-badge`, tetap milik 4.0 sebab ia mengubah tampilan setiap lencana yang
+sudah terkirim.
+
+### Catatan: dokumen yang menjelaskan varian yang tidak bekerja
+`COMPONENTS.md` menulis bahwa `.fdy-table__num` meratakan ke kanan dan memasangnya di `<th>` pada
+dua contoh. Kelas itu berspesifisitas `(0,1,0)` sementara `.fdy-table th` `(0,2,0)`, jadi di sel
+header huruf data dan angka tabularnya sampai tetapi `text-align:left` dari aturan header yang
+menang. Keduanya lahir di commit yang sama pada Juli dan kalimat dokumennya baru datang pada
+Agustus, tidak ada uji yang pernah menegaskan perataan header lewat kelas itu, dan docs hidup kit
+mengirim bentuk itu di delapan tempat dengan header rata kiri sejak saat itu. Jadi yang dibetulkan
+dokumennya: perilakunya dibiarkan, sebab mengubahnya menggeser setiap header kolom angka yang sudah
+terkirim.
+
+## [3.8.0] - 2026-10-23
+
+**Empat penambahan dari catatan yang sama, dan tiga di antaranya ternyata sudah separuh ada di
+kit.** App ronda yang menemukan Safari 15 di 3.7.0 menulis delapan butir; dua di antaranya cacat,
+dan keduanya sudah terbit. Empat dari yang tersisa penambahan, dan keempatnya lebih murah daripada
+tampaknya: satu kelas yang sudah ada sejak lama tetapi kehilangan pengaruhnya, satu jalan keluar
+teks yang cuma dipasang di satu jalur, satu grid yang terpasang sejak 1.32.0 tanpa pernah bisa jadi
+tujuan, dan satu varian sumbu yang papan tombolnya kurang dua literal.
+
+Yang terakhir membuka cacat yang digambarkan catatan itu tanpa pelapornya tahu ia sedang
+menggambarkan kit. Ia menulis bahwa `<input type="month">` menamai bulan menurut bahasa peramban,
+bukan `<html lang>`. Kalimat itu berlaku kata per kata untuk `FdyDatepicker` Vue dan React: dokumen
+sudah menjanjikan `<html lang>` sejak lama, cuma enhancer vanilla yang betul melakukannya, dan
+kedua adapter menyerahkan `props.locale` yang `undefined` langsung ke `Intl`.
+
+### Fixed
+- **Popover memposisikan panelnya dari tata letak yang ia batalkan tiga baris kemudian** (`#079`),
+  ada sejak 1.4.1 dan kena keenam enhancer yang memakai `attach()`: autocomplete, cascade, combo,
+  datepicker, menu dan timepicker. Keenam panel itu `position:absolute` dengan
+  `top:calc(100% + var(--space-1))` di stylesheet komponennya, dan aturan author mengalahkan gaya
+  UA popover, jadi panel yang baru di-`show()` sudah di top layer sambil masih memakai aturan itu.
+  Di top layer `100%` adalah tinggi viewport. Selama satu fungsi sinkron panelnya duduk satu
+  viewport di bawah halaman dan overflow dokumen tumbuh mengikutinya, terukur `scrollHeight` 1023
+  lawan viewport 900. Di tempat scrollbar memakan ruang tata letak, yakni setiap peramban Windows
+  dan Linux, dokumen mendapat scrollbar untuk sesaat, `clientWidth` menyusut selebar scrollbar itu,
+  halaman relayout, dan pemicunya bergeser bersamanya. `place()` membaca rect pemicu sebagai hal
+  pertama yang ia lakukan, jadi yang ia ukur adalah tata letak sementara itu. Pengukurannya
+  sekarang terjadi sesudah panel keluar dari flow.
+
+  macOS memakai scrollbar overlay yang tidak memakan ruang, jadi mesin tempat kit ini ditulis
+  secara struktural tidak bisa melihat cacat ini, dan 1.4.1 sampai 3.7.0 mengirimnya tanpa ada yang
+  tahu. Yang melihatnya runner Linux di CI, lewat uji perataan `#074` yang kebetulan mengukur
+  koordinat di sisi kanan layar. Reproduksinya sekarang ada di suite dan berjalan di macOS juga,
+  dengan menata `::-webkit-scrollbar` ke lebar tetap, plus assertion yang menolak lulus kalau
+  enginenya ternyata tidak memberi scrollbar ruang tata letak.
+
+### Added
+- **`align` di popover, dibacakan dari `.fdy-menu--end`** (`#074`). Kelasnya sudah ada sejak lama
+  dan stylesheet selalu menghormatinya lewat `left:auto;right:0`. Jalur popover menggantinya dengan
+  koordinat `fixed` inline, jadi kelas itu kehilangan pengaruh persis pada saat menu masuk top
+  layer: menu akun di talang kanan melewati avatarnya dan berhenti 4px dari tepi layar. Nol kelas
+  baru. `freeday-menu.js` yang membaca kelasnya, sebab popover dipakai enam enhancer dan tidak
+  boleh tahu nama kelas satu pun. Jepitan viewport sekarang dua sisi: lantai `GAP` yang lama duduk
+  di dalam cabang jepitan kanan dan tak pernah berjalan untuk panel rata-kanan, jadi rata-kanan di
+  layar sempit cuma akan menukar luber kanan dengan luber kiri.
+- **Enam prop teks di `FdyTableFooter`** (`#075`), di ketiga adapter. `data-fdy-text-<key>` sudah
+  lama membuka jalur mentah dan jalur bertipe tidak punya padanannya, jadi app yang tidak berbahasa
+  Inggris hanya bisa menulis ulang seluruh pita kakinya. Satu app mengirim 81 baris markup sendiri
+  untuk mengganti lima kata. Namanya mengikuti kunci `TEXT` enhancer di mana kuncinya ada (`info`,
+  `prev`, `next`), supaya satu teks tidak punya dua nama di dua jalur; tiga sisanya tanpa kembaran
+  sebab di jalur mentah markup itu milik app sendiri. Bawaan tetap Inggris di setiap jalur.
+  `FdyTable` masih merender pita kakinya sendiri tanpa meneruskan keenamnya; jalan keluarnya
+  `pager={false}` lalu render `<FdyTableFooter>` sendiri, dan COMPONENTS.md menuliskannya.
+- **`mode="month"` di `FdyDatepicker`** (`#076`), di ketiga adapter dan jalur mentah. Grid bulannya
+  sudah dipasang 1.32.0, hanya tak pernah bisa jadi tujuan. Menjawab `YYYY-MM`, menerima `min` dan
+  `max` dalam bentuk yang sama, dan berhenti di grid itu alih-alih turun ke hari. Nama acara dan
+  `detail.date` tidak berubah.
+- **`.fdy-tabs--vertical`, dan sumbu papan tombol dari `aria-orientation`** (`#077`). Kelasnya
+  memutuskan tampilan, atributnya memutuskan panah, dan satu penanda cukup: enhancer mengisi
+  atribut dari kelas kalau markup belum menulisnya, sementara atribut yang sudah ditulis selalu
+  menang. Panah kiri dan kanan tidak dipetakan di tegak, mengikuti APG satu sumbu per tablist, dan
+  tombol di luar sumbu jatuh tanpa `preventDefault` sehingga tetap milik halaman. Lebar kolom lewat
+  `--fdy-tabs-list-w`, bawaan `auto`. Tabs tidak punya wrapper bertipe di stack mana pun, jadi tidak
+  ada prop `orientation` yang bisa ditambahkan dan tidak ada wrapper baru yang dibuat demi punya
+  tempat menaruhnya.
+
+### Changed
+- **`FdyDatepicker` Vue dan React membaca `<html lang>` kalau `locale` tidak dikirim** (`#078`).
+  Ini satu-satunya perubahan perilaku di rilis ini, dan ia kena mode hari juga, bukan cuma mode
+  bulan. Sebelumnya `undefined` sampai ke `Intl` apa adanya, yang berarti bahasa peramban: halaman
+  Indonesia yang dibuka di peramban Inggris menulis nama bulan Inggris, dan halaman Inggris di
+  peramban Indonesia menulis nama bulan Indonesia. Kontrak yang tertulis selalu `<html lang>`, dan
+  aturan "Inggris di semua jalur" tidak bisa ditegakkan oleh nilai yang datang dari preferensi
+  pembaca. App yang memang menginginkan bahasa peramban mengirim `locale` sendiri. Halaman tanpa
+  `lang` jatuh ke `en`, dan `lang=""` ikut ke sana sebab `Intl` melempar `RangeError` atas string
+  kosong.
+
+### Catatan dukungan peramban
+Floor-nya tetap Chrome 105, Safari 15.4 dan Firefox 121. Tab tegak sengaja tidak memakai `:has()`
+walau itu akan memendekkan CSS-nya, sebab `:has()` baru ada di Safari 15.4 sementara lantai yang
+pernah dilaporkan dari perangkat nyata adalah iOS 15.0.
+
+### Yang perlu dibuang app saat upgrade
+- Tambalan `translate` apa pun yang menggeser menu rata-kanan ke dalam talangnya. Menu itu sekarang
+  diposisikan benar, jadi tambalannya menggeser sejauh satu talang ke arah yang salah.
+- Markup pita kaki tabel yang ditulis tangan cuma karena teksnya tak bisa diganti, berikut CSS
+  lokal yang menemaninya.
+
+### Belum masuk
+Butir keempat catatan itu, bawaan `.fdy-badge` yang berwarna primer sehingga status netral terbaca
+seperti aksi, menunggu 4.0: mengubah bawaannya mengubah tampilan setiap lencana yang sudah terkirim.
+Pilihan yang tidak mematahkan apa pun, `fdy-badge--neutral` sebagai opt-in, masih terbuka lebih awal.
+
 ## [3.7.0] - 2026-10-23
 
 **Kit ini tidak bisa dipakai di Safari 15, dan yang menemukannya adalah sebuah HP.** Pemilik sebuah

package/COMPONENTS.md

@@ -34,9 +34,9 @@ live docs.
    invalid state does not belong to the control itself.
 6. **Interactive components need their enhancer script.** Static ones (button, card, badge, table,
    alert, breadcrumb, timeline, accordion, tree-without-cascade…) are CSS-only.
-7. **On Vue, React or Blazor, eleven components have a typed wrapper. Use it.** `FdyCombo` ·
-   `FdyDatepicker` · `FdyDateRange` · `FdyAutocomplete` · `FdyCascade` · `FdyCfl` · `FdyChart` ·
-   `FdyTable` · `FdyModal` · `FdyDrawer` · `FdyAppShell`, from `@cahyo-dimas/freeday/vue`, `/react`, or the
+7. **On Vue, React or Blazor, twelve components have a typed wrapper. Use it.** `FdyCombo` ·
+   `FdyDatepicker` · `FdyMonthpicker` · `FdyDateRange` · `FdyAutocomplete` · `FdyCascade` · `FdyCfl` ·
+   `FdyChart` · `FdyTable` · `FdyModal` · `FdyDrawer` · `FdyAppShell`, from `@cahyo-dimas/freeday/vue`, `/react`, or the
    `Freeday.Blazor` RCL. Each is flagged at its own section below. Hand-writing their raw markup in
    those stacks *looks* right at first, because the enhancer initialises once and the first render is
     correct. Then
@@ -510,8 +510,10 @@ WAI-ARIA APG menu-button. Keyboard ↑/↓/Home/End/Esc handled by the enhancer.
 
 - Wrapper: `.fdy-menu-wrap` (or `.fdy-btn-split` for a split button, with
   `.fdy-btn-split__toggle` as the second button) + `data-fdy-menu`
-- List: `.fdy-menu` (`--end` aligns right), items `.fdy-menu__item` (`--danger`), separator
-  `<hr class="fdy-menu__sep">`
+- List: `.fdy-menu` (`--end` puts the panel's **right edge on the trigger's right edge**, which is
+  what a control parked in a page gutter needs; on a screen too narrow for that the panel slides
+  back inside the viewport instead of hanging off the left edge), items `.fdy-menu__item`
+  (`--danger`), separator `<hr class="fdy-menu__sep">`
 - A11y: trigger gets `aria-haspopup="menu"` + `aria-expanded="false"`; `<ul role="menu" hidden>`;
   each `<li role="none">` wraps a `<button role="menuitem">`.
 
@@ -526,6 +528,15 @@ WAI-ARIA APG menu-button. Keyboard ↑/↓/Home/End/Esc handled by the enhancer.
 </div>
 ```
 
+`.fdy-menu--end` is honoured on both of the paths an open menu can take. The stylesheet handles the
+one where the panel stays in the flow, and the enhancer handles the other: it lifts the panel into
+the top layer so it escapes any ancestor overflow clip, and positions it there with coordinates of
+its own, so the modifier has to be read by `freeday-popover.js` too. An app reported what happens
+when it is not. An account menu beside its avatar in a 24px gutter opened 20px further right than
+the avatar and stopped 4px off the screen edge, and the app's own `translate` patch for it was keyed
+to a constant inside the kit. For a control the kit does not ship, the same option is
+`FreedayPopover.attach(panel, trigger, { align: 'end' })`.
+
 ---
 
 # Forms
@@ -942,9 +953,10 @@ a new class.
 
 | Prop | Type | What it does |
 |---|---|---|
-| `modelValue` · `value` | `string \| null` | ISO `YYYY-MM-DD`, or `''`/`null` for empty. |
+| `modelValue` · `value` | `string \| null` | ISO `YYYY-MM-DD`, or `YYYY-MM` under `mode="month"`. `''`/`null` for empty. |
 | `onChange` | `(value: string) => void` | React. Vue emits `update:modelValue` and `change`. Clearing sends `''`. |
-| `min?` · `max?` | `string` | ISO bounds; days outside them cannot be picked. |
+| `mode?` | `'day' \| 'month'` | **Deprecated, use `<FdyMonthpicker>`.** `day` is the calendar as it always was. `month` opens on the month grid, stops there, and answers with `YYYY-MM`. Blazor takes the enum `FdyDatepickerMode`. Still works, unchanged; removed in 4.0. See below for why, and for the raw path, which keeps `data-mode="month"`. |
+| `min?` · `max?` | `string` | ISO bounds; days outside them cannot be picked. Month mode also accepts `YYYY-MM`, and a bound inside a month leaves that month pickable. |
 | `locale?` | `string` | BCP-47 tag deciding month and weekday names. Defaults to the page's `<html lang>`, then `en`. |
 | `placeholder?` | `string` | |
 | `id?` · `ariaLabelledby?` · `describedby?` | `string` | Trigger id; the element that labels it; the help/error text it points at. |
@@ -969,6 +981,33 @@ Blazor carries the same surface bar four: `locale` (the enhancer formats through
 page's `<html lang>`), `clearable` and `clearLabel` (this path builds no clear button), and
 `ariaLabelledby` (the trigger it builds is named by `Label`).
 
+### Props — `<FdyMonthpicker>`
+
+> Vue (`v-model`) · React (`value`/`onChange`) · Blazor (`@bind-Value`). It renders the same trigger
+> and panel as the date picker, over the same classes, and shares its month and year grids.
+
+| Prop | Type | What it does |
+|---|---|---|
+| `modelValue` · `value` | `string \| null` | The chosen month, ISO `YYYY-MM`. `''`/`null` for empty. One format, always: nothing on this component can change it. |
+| `onChange` | `(value: string) => void` | React. Vue emits `update:modelValue` and `change`. Clearing sends `''`. |
+| `min?` · `max?` | `string` | ISO `YYYY-MM` bounds (a full `YYYY-MM-DD` is read too, as its own month). A bound that falls inside a month leaves that month pickable. |
+| `locale?` | `string` | BCP-47 tag deciding the month names. Defaults to the page's `<html lang>`, then `en`. |
+| `placeholder?` | `string` | Shown while nothing is picked. Default `Select month`. |
+| `id?` · `ariaLabelledby?` · `describedby?` | `string` | Trigger id; the element that labels it; the help/error text it points at. |
+| `disabled?` · `readonly?` · `invalid?` | `boolean` | `readonly` keeps focus and tab order and shows its month, but it cannot be opened, cleared or changed. |
+| `clearable?` | `boolean` | Show a × in the trigger once a month is set, so an optional month can be unset. Sends `''`. Off by default. |
+| `clearLabel?` | `string` | Accessible name for that ×. Default `Clear month`. |
+| `prevYearLabel?` · `nextYearLabel?` | `string` | The arrows beside the month grid, which step a year. Defaults `Previous year` / `Next year`. |
+| `chooseYearLabel?` | `string` | The title button that drills into the year grid. Default `Choose year`. |
+| `prevYearsLabel?` · `nextYearsLabel?` | `string` | Page arrows, shown in the year grid. Defaults `Previous years` / `Next years`. |
+
+There is no `prevMonthLabel` or `nextMonthLabel` here. The arrows sit beside a month grid, so they
+step a year, and the day grid they would have belonged to does not exist on this component. Blazor
+carries the same surface bar three: `locale` (the enhancer formats through `Intl` from the page's
+`<html lang>`), `clearable` and `clearLabel` (that path builds no clear button) and
+`ariaLabelledby` (the trigger it builds is named by `Label`). It adds `BackToMonthsLabel`, the year
+grid's own title.
+
 ### Props — `<FdyDateRange>`
 
 | Prop | Type | What it does |
@@ -1013,7 +1052,39 @@ months, `Home`/`End` January/December, `PageUp`/`PageDown` a year, `Enter`/`Spac
 year grid likewise: arrows ±1/±3 years, `Home`/`End` the ends of the page, `PageUp`/`PageDown` a
 page of twelve.
 
-- Attributes: `data-value="YYYY-MM-DD"`, `data-placeholder`, `data-label`, `data-fdy-no-icon`
+**Picking a month, not a day.** `<FdyMonthpicker>` answers with `YYYY-MM`. The panel opens on the
+12-cell month grid, a click or `Enter` commits from it, and there is no day grid to fall into. The
+title still steps up to the year grid and back down, because a year is navigation and never an
+answer. On the raw path the same thing is `data-mode="month"` on a `data-fdy-datepicker` div.
+
+This exists because `<input type="month">` names the month in the **browser's** language, which an
+Indonesian page read on an English phone cannot override. The month cells, the cell's accessible
+name and the value in the trigger all go through `Intl` with the page's `<html lang>`, the same
+route the day grid's month names have always taken, so `lang="id"` reads `Oktober 2026` with nothing
+configured. Keyboard in the month grid: arrows move one and three months, `Home`/`End` jump to
+January and December, `PageUp`/`PageDown` step a year, and `Enter`/`Space` commits. The cell keeps
+its name when it becomes selected and carries the state in `aria-selected`, as the day cells do.
+
+**`mode="month"` on `<FdyDatepicker>` is deprecated, and still works.** It shipped in 3.8.0 and
+behaves exactly as it did, so nothing has to move today; it goes in 4.0. The type was the defect.
+That prop left `modelValue` / `value`, `min` and `max` each carrying `YYYY-MM-DD` or `YYYY-MM` while
+a *different* prop decided which, and a union discriminated by a sibling prop is a shape neither
+`defineProps<{...}>` nor an exported `FdyDatepickerProps` can hold. A separate component states it
+in one line per prop. A consumer's editor says so as well: `mode` is marked `@deprecated` in both
+adapters, and `Mode` together with `FdyDatepickerMode.Month` carries `[Obsolete]` in Blazor, each
+naming `FdyMonthpicker`.
+
+**The raw path keeps `data-mode="month"`, and it is not deprecated.** `data-mode` is a string
+attribute with no type to be wrong about: a reader of the markup sees `data-mode` and `data-value`
+side by side and can tell what the value holds. The typed signatures were what could not say it, so
+the retirement is theirs. Shipping a second attribute would leave two spellings of one feature on
+the one path that never had the problem.
+
+Nothing changes without either of them. A picker with no `mode` and no `data-mode` is the day picker
+it has always been, down to the `YYYY-MM-DD` it reports.
+
+- Attributes: `data-value="YYYY-MM-DD"`, `data-mode="month"`, `data-placeholder`, `data-label`,
+  `data-fdy-no-icon`
 
 ```html
 <div class="fdy-field">
@@ -1021,6 +1092,12 @@ page of twelve.
   <div data-fdy-datepicker data-value="2026-07-21" data-label="Invoice date"></div>
 </div>
 
+<div class="fdy-field">
+  <span class="fdy-label">Reporting month</span>
+  <!-- Typed stacks: <FdyMonthpicker>, see its props above. -->
+  <div data-fdy-datepicker data-mode="month" data-value="2026-10"></div>
+</div>
+
 <div class="fdy-daterange" data-fdy-daterange role="group" aria-label="Reporting period">
   <div data-fdy-datepicker data-role="from" data-placeholder="From" data-label="Start date"></div>
   <span class="fdy-daterange__sep" aria-hidden="true">–</span>
@@ -1199,7 +1276,16 @@ over the connector line, so omitting `__btn` cannot make the connector draw thro
 ## Table — `.fdy-table`
 Semantic static table. Wrap in `.fdy-table-wrap` (bordered surface) or `.fdy-table-scroll`
 (horizontal scroll). Always a `<caption>` (use `.fdy-visually-hidden` if it shouldn't show) and
-`<th scope="col">`. Numeric cells get `.fdy-table__num` (right-aligned, tabular).
+`<th scope="col">`. Numeric body cells get `.fdy-table__num` (right-aligned, tabular figures, data
+font).
+
+**`.fdy-table__num` aligns a `<td>`, not a `<th>`.** The class is specificity `(0,1,0)` and
+`.fdy-table th` is `(0,2,0)`, so on a header cell the data font and the tabular figures arrive but
+`text-align:left` from the header rule wins: the label stays left while the numbers under it go
+right. Put the class on the header anyway for the font, then add `style="text-align:right"` to move
+the label with them. That inline value is exactly what the typed `FdyTable` writes for a column with
+`align: 'right'`, and it is the only thing no ancestor rule can outrank. The class is deliberately
+left at its own weight: raising it would shift every numeric heading already shipped.
 
 **`--striped`** zebras the even body rows. The tint is deliberately *half* a surface step, not the
 full one hover uses, so hover still reads on a striped row instead of matching it — and stripe,
@@ -1220,7 +1306,7 @@ for 4.0.
 <div class="fdy-table-wrap">
   <table class="fdy-table">
     <caption>Recent invoices</caption>
-    <thead><tr><th scope="col">Invoice</th><th scope="col" class="fdy-table__num">Amount</th></tr></thead>
+    <thead><tr><th scope="col">Invoice</th><th scope="col" class="fdy-table__num" style="text-align:right">Amount</th></tr></thead>
     <tbody>
       <tr><td>INV-1042</td><td class="fdy-table__num">1,240,000</td></tr>
     </tbody>
@@ -1252,7 +1338,7 @@ sum, so measure them once after render (and on resize) and set the variable.
     <caption class="fdy-visually-hidden">Exchange rates, August 2026</caption>
     <thead><tr>
       <th scope="col" class="fdy-table__freeze fdy-table__freeze--edge">Date</th>
-      <th scope="col" class="fdy-table__num">USD</th>
+      <th scope="col" class="fdy-table__num" style="text-align:right">USD</th>
     </tr></thead>
     <tbody>
       <tr>
@@ -1281,7 +1367,7 @@ the two ever disagree.
 | `label` | `string` | Header label. |
 | `labelHidden` | `boolean` | Render the label for assistive tech only; the header cell looks empty. |
 | `sortable` | `boolean` | Show a sort toggle in the header. |
-| `filter` | `'text' \| 'enum' \| 'number' \| 'date'` | Offer a column filter of this type (the funnel popover). |
+| `filter` | `'text' \| 'enum' \| 'number' \| 'date'` | Offer a column filter of this type (the funnel popover). The panel is several times wider than the funnel, so it hangs from the funnel's RIGHT edge and the rightmost column keeps the page's gutter; near the left edge of a narrow screen it slides right instead of off it. |
 | `align` | `'left' \| 'right' \| 'center'` | Cell alignment. Default `left`. |
 | `mono` | `boolean` | Render cells in the monospace data font (`.fdy-mono`). |
 | `sortType` | `'text' \| 'number' \| 'date'` | Override the comparator; defaults to one derived from `filter`, else `text`. |
@@ -1322,7 +1408,7 @@ provide the state prop for a concern and you own that concern instead. React nam
 | `pageIndex?` · `onPageIndexChange?` | `number` · `(index) => void` | Client mode: own the 0-based index while the table keeps filtering, sorting and paginating — this is what lets one external pager drive both a table and a card list. |
 | `pageSizes?` · `onPageSizeChange?` | `readonly number[]` · `(size) => void` | Offer a rows-per-page control. Server mode reports the pick through the page event (read its `size`); client mode applies it itself and reports it too, so it works with nothing wired. |
 | `pager?` | `boolean` | Default true. Turn it off to withhold the table's own footer when the screen renders one. |
-| `loading?` | `boolean` | Show the in-table loading state. |
+| `loading?` · `loadingText?` | `boolean` · `string` | Show the in-table loading row, and the word in it. Default `Loading…`, the same name and the same default as Blazor's `LoadingText`, so a screen in another language translates the loading row the way it already translates the empty one instead of finding that only one of the two neighbouring states has a prop. |
 | `emptyText?` · `empty?` | `string` · `ReactNode \| (ctx) => ReactNode` | The empty state as text, or as markup (React `empty`, Vue's `empty` slot). As a React function or through the Vue slot's props it receives `{ filtered, clearFilters }`: whether an active column filter is what emptied the table, and how to clear every filter (through `onFiltersChange` / `update:filters` when they are controlled). "No rows match" wants a Clear button, "nothing here yet" a Create one. |
 | `ariaLabel?` | `string` | Names the table for assistive tech. |
 | `rowActivatable?` · `onRowActivate?` | `boolean` · `(row) => void` | Rows become focusable and activate on click, Enter or Space. |
@@ -1335,14 +1421,16 @@ provide the state prop for a concern and you own that concern instead. React nam
 | `bulkActions?` | `ReactNode` | React. Content in the bulk bar beside the count; Vue uses the `bulk-actions` slot (scoped: `keys`, `clear`), Blazor `BulkContent`. |
 | `selectedText?` · `clearSelectionText?` | `string` | Bulk-bar copy. Defaults `{n} selected` (with `{n}` substituted) and `Clear`. |
 | `selectAllLabel?` · `selectRowLabel?` · `bulkLabel?` | `string` | Accessible names for the header checkbox, each row checkbox, and the bulk-bar region. Defaults `Select all rows on this page`, `Select row`, `Bulk actions`. |
+| `infoText?` · `pageSizeLabel?` | `string` | The footer this table draws itself: its range line (`{from}`, `{to}`, `{total}` substituted, every occurrence) and the visible word beside its rows-per-page control. Same names, same substitution and the same English defaults as `<FdyTableFooter>` below, `Showing {from}–{to} of {total}` and `Rows`, so a screen that moves between the table's footer and its own moves a prop instead of rewriting it. |
+| `paginationLabel?` · `prevLabel?` · `nextLabel?` · `pageLabel?` | `string` | The accessible names inside that footer: the pager landmark, both arrows, and a numbered page button (`{n}` substituted). Defaults `Pagination`, `Previous page`, `Next page`, `Go to page {n}`. |
 | `renderCell?` | `(column, row, value) => ReactNode` | React. Custom cell rendering; Vue uses the `cell` slot. |
 | `toolbar?` | `ReactNode` | React. Content above the table; Vue uses the `toolbar` slot. |
 | `onProcess?` | `(result: { rows, total }) => void` | React. The processed page after filter/sort/paginate, in **both** modes. Vue emits `process`, Blazor calls it `Process`. Render the same set elsewhere — a card list, a summary, a CSV export — without re-deriving the pipeline. |
 
-Blazor matches this surface (`LoadingText` and `EmptyContent` in place of `emptyText`/`empty`,
-`Toolbar` and `RowDetail` as `RenderFragment`s) and is the one adapter that also exposes
-`FiltersChanged`. Its filter-aware empty state is `EmptyTemplate`, a
-`RenderFragment<FdyTableEmptyContext>` (`Filtered`, `ClearFilters`) that wins over `EmptyContent`.
+Blazor matches this surface (`EmptyContent` in place of `empty`, `Toolbar` and `RowDetail` as
+`RenderFragment`s) and is the one adapter that also exposes `FiltersChanged`. Its filter-aware
+empty state is `EmptyTemplate`, a `RenderFragment<FdyTableEmptyContext>` (`Filtered`,
+`ClearFilters`) that wins over `EmptyContent`.
 
 **Select-all ticks the current page, not the whole result set.** A header checkbox that silently
 selects rows the reader cannot see is how a bulk delete goes wrong, so it acts on the rows on
@@ -1408,6 +1496,21 @@ pagination. Needs `freeday-table.js`. Wrap the whole thing in `.fdy-datatable` +
   labels, the timepicker's, the cascade's two defaults, the table's `Min`/`Maks` filter
   placeholders and the chart's `Seri 1` all sat outside it.
 
+**Where a filter panel opens, on both paths.** `.fdy-filter` is lifted into the top layer and
+anchored to its funnel by `freeday-popover.js` on the raw path and by `usePopover` on the typed one,
+so the raw path needs that file loaded beside `freeday-table.js` (`dist/freeday.js` has both). Four
+things follow, and the raw path moved to meet the typed one in 3.9.0 rather than the other way
+round. The panel's RIGHT edge lines up with the funnel's, because a 24px icon in a column header is
+no guide to where a 14rem form should hang, and the rightmost column is where that used to push the
+panel off the page; it is clamped to stay on screen either way, so the leftmost column slides right
+instead of hanging off. It sits 4px below the funnel, the kit's one gap, where the raw path used to
+keep 4px below and 8px from the viewport edge. It flips above the funnel when there is no room
+below, which the raw path never did. And it keeps the `min-width:14rem` the stylesheet asks for,
+which the typed path used to lose to an inline floor taken from the funnel's own 24px. The panel is
+a child of its own `<th>` on both paths: the top layer is what escapes a card's `overflow:hidden`
+now, and a panel parked on `<body>` is outside any open modal `<dialog>`, which makes it inert, so a
+filter in a table inside a modal painted a form that refused every click.
+
 **Testing note:** a column's filter button and the dialog it opens deliberately share one
 accessible name (`Filter <column>`), since a dialog named after its trigger is the normal pattern. In a
 Playwright/Testing-Library suite that means `getByLabel('Filter Name')` resolves to two elements;
@@ -1440,6 +1543,32 @@ render it once, outside both, with `pager={false}` on the table.
 | `page` | `FdyPageState` = `{ index, size, total }` | The page being shown. `size` drives both the range text and the rows-per-page control's value. |
 | `onPageChange?` | `(page: FdyPageState) => void` | React. A page click or a size change. Vue emits `update:page`; Blazor `PageChanged`. |
 | `pageSizes?` | `readonly number[]` | Offer a rows-per-page control. Omit it and the footer is range + pager only. Picking a size reports the new `size` together with the index that still holds the row the reader was looking at. |
+| `infoText?` | `string` | The range line, with `{from}`, `{to}` and `{total}` substituted. Default `Showing {from}–{to} of {total}`, the enhancer's `info` string. |
+| `pageSizeLabel?` | `string` | The word beside the rows-per-page control, which also names that control for a screen reader. Default `Rows`. |
+| `paginationLabel?` | `string` | Accessible name of the pager landmark. Default `Pagination`. |
+| `prevLabel?` | `string` | Accessible name of the previous-page arrow. Default `Previous page`. |
+| `nextLabel?` | `string` | Accessible name of the next-page arrow. Default `Next page`. |
+| `pageLabel?` | `string` | Accessible name of a numbered page button, with `{n}` substituted. Default `Go to page {n}`. |
+
+**Saying it in another language.** The raw path has had `data-fdy-text-<key>` since 1.39.0 and this
+one had nothing, so a Vue, React or Blazor app that does not speak English could only rewrite the
+band by hand. One did: eighty one lines of its own markup, to change five words. The six string
+props above are the hatch that was missing. Where the enhancer already keys a string the prop
+carries that key's name, `infoText` for `info`, `prevLabel` for `prev`, `nextLabel` for `next`,
+and the same `{from}` `{to}` `{total}` `{n}` substitution, every occurrence replaced, so an app on
+both paths writes one wording once. The other three have no enhancer twin because on the raw path
+that markup is the app's own: the word beside the rows-per-page control, the pager landmark's name,
+and the name of a numbered page button. It is `pageSizeLabel` and not `rows`, since the enhancer's
+`rows` key is the table's `{n} rows` count, a different string.
+
+Omit a prop and you get the English above, so nothing already shipped moves. `FdyTable` takes all
+six under the same names and hands them to the footer it draws itself, so a table keeps its own
+footer and still speaks the app's language. For one version it did not, and the only way out was to
+switch the footer off: a hatch that opened only if you stopped using the table.
+
+`pager={false}` plus your own `<FdyTableFooter>` is still the route for a **responsive** list, where
+one band has to serve a table at `lg` and a card list below it, and that is now the only reason to
+reach for it. Wording alone is not one.
 
 **Who draws the pager.** The table renders its own footer (range + pager) whenever there is more
 than one page. Two ways to take it over:
@@ -1832,10 +1961,15 @@ record. A crumb for a menu group that has no page of its own is plain text in th
 to nowhere.
 
 ## Tabs — `.fdy-tabs`
-APG tabs: ←/→, Home/End, roving tabindex. Needs `freeday-tabs.js`.
+APG tabs: arrows, Home/End, roving tabindex. Needs `freeday-tabs.js`.
 `.fdy-tabs__tab` marks its active state from **`aria-selected="true"` or `aria-current="page"`**,
 so the same look serves routed sub-navigation built from plain links. See the note under Nav.
 
+**Which arrows move the selection** comes from the tablist's `aria-orientation`: Left and Right by
+default, Up and Down when it says `vertical`. One axis per tablist, the way APG maps it. The other
+pair stays unmapped, so Left and Right over a column of tabs still reach whatever else on the page
+wants them. Home and End answer either way.
+
 > **The strip's line is an inset `box-shadow`, not a `border-bottom`** (`#052`; through 3.1.0 it
 > was a border, so an app upgrading past that release changes the override with it). To
 > remove it — a strip inside a header that draws its own rule — override `box-shadow:none`;
@@ -1857,6 +1991,56 @@ so the same look serves routed sub-navigation built from plain links. See the no
 </div>
 ```
 
+### Vertical — `.fdy-tabs--vertical`
+
+The same tabs turned down the page: the list on the leading side, the panel beside it. For a
+settings screen whose sections are a list, not a strip.
+
+```html
+<div class="fdy-tabs fdy-tabs--vertical" data-fdy-tabs style="--fdy-tabs-list-w:16rem">
+  <div class="fdy-tabs__list" role="tablist" aria-orientation="vertical" aria-label="Settings">
+    <button class="fdy-tabs__tab" role="tab" id="s-1" aria-controls="sp-1" aria-selected="true">Identity</button>
+    <button class="fdy-tabs__tab" role="tab" id="s-2" aria-controls="sp-2" aria-selected="false" tabindex="-1">Posts</button>
+  </div>
+  <div class="fdy-tabs__panel" role="tabpanel" id="sp-1" aria-labelledby="s-1" tabindex="0">…</div>
+  <div class="fdy-tabs__panel" role="tabpanel" id="sp-2" aria-labelledby="s-2" tabindex="0" hidden>…</div>
+</div>
+```
+
+- **Two markers, and they are not the same marker.** `.fdy-tabs--vertical` decides the look,
+  because the two-column box belongs to `.fdy-tabs` and a stylesheet cannot reach a parent from a
+  child. `aria-orientation="vertical"` on the tablist decides the keyboard, because that is what an
+  assistive technology announces and APG asks for it on a vertical tablist regardless. Write
+  **either** one: `freeday-tabs.js` fills in the attribute when it finds the class without it, so
+  the ARIA can never drift from the layout. An `aria-orientation` you wrote always wins, including
+  when you write `horizontal` on a widget that carries the class.
+- **Selection is a soft fill.** A bar down the leading edge would be the wrong translation:
+  sideways the marker is an underline beneath the tab it belongs to, and turned ninety degrees that
+  line lands between two tabs and points at the wrong one. So the vertical variant spends
+  `--color-primary-soft` behind `--color-primary-strong`, the same pair
+  `.fdy-nav__item[aria-current="page"]` and the picker options already use for “this is where you
+  are” in a vertical list. The strip's own line (`box-shadow`) is dropped with the underline.
+- **Column width:** `--fdy-tabs-list-w` on `.fdy-tabs` (default `auto`, so the column hugs the
+  longest label). Set the token rather than a `width` on `.fdy-tabs__list`: the list is a flex item
+  at `flex:none`, so a width arriving from outside has no effect and no error to show for it.
+- **It does not collapse on a narrow screen**, and the breakpoint is yours because the kit cannot
+  know whether these tabs span the viewport or sit in a 20rem drawer. Going back to a strip takes
+  three declarations, not one, since the variant turns both boxes:
+
+  ```css
+  @media (max-width: 63.9375rem) {
+    .settings-tabs.fdy-tabs--vertical { display: block; }
+    .settings-tabs .fdy-tabs__list { flex-direction: row; width: auto; overflow-x: auto; }
+    .settings-tabs .fdy-tabs__panel { padding: var(--space-4) 0 0; }
+  }
+  ```
+
+  The keyboard stays on Up and Down across that switch, because `aria-orientation` is an attribute
+  and a media query cannot reach it. A list of sections is still a list of sections at 320px, which
+  is why the axis is read from the attribute and never from the painted layout.
+- Measured in `browser/tabs-vertical.mjs`, which also holds the line that a strip with no
+  `aria-orientation` behaves and paints exactly as it did before the variant existed.
+
 ---
 
 # Overlays
@@ -2044,6 +2228,18 @@ the rest, so two states a workflow distinguishes never share a look. Map each st
 tone, never to a hash of the string: a status is a closed set, and a hash reassigns colours the
 moment the set grows.
 
+**Neutral status takes `--outline`.** A badge with no modifier is the page's accent: primary ink
+on a primary tint, the same pair the primary button wears, so a status that means nothing in
+particular ("Not scheduled", "Holiday", "Read 0 of 3") ends up looking like something to click.
+`--outline` is the neutral one: no fill, a `--color-border-strong` edge, and `--color-text-muted`
+ink at 7.46:1 on the light surface, 7.28:1 on the dark one.
+
+There is no filled neutral on purpose. The only neutral fill the token set offers is one surface
+step, `--color-surface-2`, and a status pill sits either on `--color-surface` or on the app ground,
+which is `--color-surface-2` itself, so the pill's body would land between 1.00:1 and 1.10:1
+against what is behind it: a badge whose shape you cannot see. The semantic fills live at 1.03:1 to
+1.44:1 and read clearly anyway because they carry hue, and a neutral has no hue to carry.
+
 **Notification badge is the overlay variant**, not a separate component: wrap anything in
 `.fdy-badge-wrap` and add `.fdy-badge-ov` (`--primary` `--danger` `--accent` `--info` `--success`
 `--warning`, `--dot` for a bare dot, `--top-left` / `--bottom-right` / `--bottom-left` to move it).

package/README.id.md

@@ -5,7 +5,7 @@
 > **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-v3.7.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.7.0)
+[![Release](https://img.shields.io/badge/release-v3.9.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.9.0)
 
 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`.
@@ -44,9 +44,9 @@ enhancer:
 | **Blazor (net8.0)** | RCL `Freeday.Blazor` | `@bind-Value` |
 | HTML statis · Svelte · template server-rendered | *(tanpa wrapper)* markup mentah + enhancer, di bawah | event `fdy-*` |
 
-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
+Kedua belasnya: `FdyCombo` · `FdyDatepicker` · `FdyMonthpicker` · `FdyDateRange` ·
+`FdyAutocomplete` · `FdyCascade` · `FdyCfl` · `FdyChart` · `FdyTable` · `FdyModal` · `FdyDrawer` ·
+`FdyAppShell`. Menulis markup mentah untuk kedua belas 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

package/README.md

@@ -5,7 +5,7 @@
 > **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-v3.7.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.7.0)
+[![Release](https://img.shields.io/badge/release-v3.9.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.9.0)
 
 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`.
@@ -44,8 +44,9 @@ enhancer:
 | **Blazor (net8.0)** | `Freeday.Blazor` RCL | `@bind-Value` |
 | Static HTML · Svelte · server-rendered templates | *(no wrapper)* raw markup + enhancers, below | `fdy-*` events |
 
-The eleven: `FdyCombo` · `FdyDatepicker` · `FdyDateRange` · `FdyAutocomplete` · `FdyCascade` ·
-`FdyCfl` · `FdyChart` · `FdyTable` · `FdyModal` · `FdyDrawer` · `FdyAppShell`. Hand-writing the raw
+The twelve: `FdyCombo` · `FdyDatepicker` · `FdyMonthpicker` · `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

package/adapters/blazor/FdyDatepicker.razor

@@ -4,8 +4,10 @@
 @* Seed-based wrapper over freeday-datepicker.js: the enhancer builds the input-styled
    trigger + calendar popover from this empty div and emits fdy-datepicker-change. The
    enhancer owns that DOM, so we render the seed once (ShouldRender => false) and read the
-   picked value back through @bind-Value. Value is an ISO date string ("yyyy-MM-dd") or "". *@
+   picked value back through @bind-Value. Value is an ISO date string ("yyyy-MM-dd") or "",
+   and "yyyy-MM" when Mode is FdyDatepickerMode.Month. *@
 <div @ref="Root" data-fdy-datepicker
+     data-mode="@ModeAttribute"
      data-value="@Value"
      data-label="@Label"
      data-placeholder="@Placeholder"