@cahyo-dimas/freeday 3.8.0 → 3.9.0

package/CHANGELOG.md

@@ -9,6 +9,110 @@ 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

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
@@ -955,7 +955,7 @@ a new class.
 |---|---|---|
 | `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 `''`. |
-| `mode?` | `'day' \| 'month'` | `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`; the raw path takes `data-mode="month"`. |
+| `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` | |
@@ -981,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 |
@@ -1025,23 +1052,36 @@ 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.
 
-**Picking a month, not a day.** `mode="month"` (`data-mode="month"` on the raw path,
-`Mode="FdyDatepickerMode.Month"` in Blazor) makes the month grid the destination instead of a
-waypoint: the panel opens on it, a click or `Enter` commits from it, the day grid is never built,
-and the value is `YYYY-MM`. The title still steps up to the year grid and back, because that is
-navigation and not an answer.
+**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 is unchanged: arrows move one and three months, `Home`/`End`
-jump to January and December, `PageUp`/`PageDown` step a year, and `Enter`/`Space` now answers
-rather than drilling. The cell keeps its name when it becomes selected and carries the state in
-`aria-selected`, as the day cells do.
-
-Nothing changes without the prop. A picker with no `mode` is the day picker it has always been,
-down to the `YYYY-MM-DD` it reports.
+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`
@@ -1054,6 +1094,7 @@ down to the `YYYY-MM-DD` it reports.
 
 <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>
 
@@ -1235,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,
@@ -1256,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>
@@ -1288,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>
@@ -1317,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`. |
@@ -1358,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. |
@@ -1371,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
@@ -1444,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;
@@ -1494,10 +1561,14 @@ that markup is the app's own: the word beside the rows-per-page control, the pag
 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` draws its
-own footer and does not pass these through, so a table that owns its footer still reads English; a
-screen that needs its own wording takes the footer over with `pager={false}` and renders
-`<FdyTableFooter>` beside it, which is the same route a responsive list already takes.
+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:
@@ -2157,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.8.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.8.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.8.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.8.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.cs

@@ -14,12 +14,21 @@ public partial class FdyDatepicker
     /// <summary>What the picker answers with. <see cref="FdyDatepickerMode.Day"/> (default) is the
     /// calendar as it always was. <see cref="FdyDatepickerMode.Month"/> opens on the month grid,
     /// stops there, and reports <c>yyyy-MM</c>.</summary>
+    [Obsolete("Use FdyMonthpicker for a month. This parameter makes Value, Min and Max carry " +
+              "yyyy-MM-dd or yyyy-MM while a different parameter decides which, so the binding " +
+              "cannot state what to store in it. Still works, unchanged, and removed in 4.0.")]
     [Parameter] public FdyDatepickerMode Mode { get; set; } = FdyDatepickerMode.Day;
 
     /* null rather than "day" for the default: an attribute the enhancer does not need is an
        attribute no reader of the seed has to interpret, and the enhancer's own check is
-       `=== 'month'`, so the day path is the absence of this. */
+       `=== 'month'`, so the day path is the absence of this.
+
+       The pragma is the kit reading its OWN deprecated member, which is the one place that has to
+       keep doing so: the promise is that `Mode` keeps working until 4.0, and it cannot work if the
+       seed stops looking at it. Scoped to these two lines so every other use still warns. */
+#pragma warning disable CS0618
     private string? ModeAttribute => Mode == FdyDatepickerMode.Month ? "month" : null;
+#pragma warning restore CS0618
 
     /// <summary>Accessible label for the trigger.</summary>
     [Parameter] public string? Label { get; set; }
@@ -96,11 +105,16 @@ public partial class FdyDatepicker
 }
 
 /// <summary>What <see cref="FdyDatepicker"/> answers with.</summary>
+/// <remarks>The enum goes with <see cref="FdyDatepicker.Mode"/> in 4.0, so only
+/// <see cref="Day"/> is left unmarked: it names the behaviour a picker with no
+/// <c>Mode</c> already has, and writing it changes nothing.</remarks>
 public enum FdyDatepickerMode
 {
     /// <summary>A single day, reported as <c>yyyy-MM-dd</c>.</summary>
     Day,
 
     /// <summary>A whole month, reported as <c>yyyy-MM</c>.</summary>
+    [Obsolete("Use FdyMonthpicker, whose Value is yyyy-MM and has no Mode to read. " +
+              "Still works, unchanged, and removed in 4.0.")]
     Month,
 }

package/adapters/blazor/FdyMonthpicker.razor

@@ -0,0 +1,29 @@
+@namespace Freeday.Blazor
+@inherits FreedayComponentBase<FdyMonthpicker>
+
+@* Seed-based wrapper over freeday-datepicker.js in its month mode: the enhancer builds the
+   input-styled trigger + calendar popover from this empty div, opens on the month grid, and emits
+   fdy-datepicker-change. The enhancer owns that DOM, so we render the seed once
+   (ShouldRender => false) and read the picked month back through @bind-Value.
+
+   data-mode="month" is written here rather than taken as a parameter. That is the difference
+   between this component and FdyDatepicker: Value has one format, yyyy-MM, because nothing the
+   caller passes can change it. *@
+<div @ref="Root" data-fdy-datepicker
+     data-mode="month"
+     data-value="@Value"
+     data-label="@Label"
+     data-placeholder="@Placeholder"
+     data-min="@Min"
+     data-max="@Max"
+     data-id="@Id"
+     data-describedby="@Describedby"
+     data-disabled="@(Disabled ? "true" : null)"
+     data-readonly="@(Readonly ? "true" : null)"
+     data-invalid="@(Invalid ? "true" : null)"
+     data-fdy-text-prev-year="@PrevYearLabel"
+     data-fdy-text-next-year="@NextYearLabel"
+     data-fdy-text-prev-years="@PrevYearsLabel"
+     data-fdy-text-next-years="@NextYearsLabel"
+     data-fdy-text-choose-year="@ChooseYearLabel"
+     data-fdy-text-back-to-months="@BackToMonthsLabel"></div>

package/adapters/blazor/FdyMonthpicker.razor.cs

@@ -0,0 +1,102 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace Freeday.Blazor;
+
+/// <summary>
+/// A picker that answers with a whole month (<c>yyyy-MM</c>).
+/// </summary>
+/// <remarks>
+/// <para>This is the replacement for <c>FdyDatepicker</c> with <c>Mode="FdyDatepickerMode.Month"</c>,
+/// which shipped in 3.8.0 and is deprecated. There, <c>Value</c> is one <c>string?</c> holding
+/// <c>yyyy-MM-dd</c> or <c>yyyy-MM</c> and a different parameter decides which, so nothing about
+/// the binding tells a caller what to store in it. Here it has one format and there is no
+/// <c>Mode</c>. The deprecated spelling keeps working until 4.0.</para>
+/// <para>It is a separate seed rather than a wrapper around <c>FdyDatepicker</c>: that component
+/// renders once and then hands its DOM to the enhancer (<c>ShouldRender =&gt; !Hydrated</c>), so
+/// nesting it would mean forwarding an <c>ElementReference</c> and an event subscription through a
+/// component that owns neither. The logic the two share is the enhancer itself, which both reach
+/// through <c>FreedayDatepicker.init</c>, and that is already one copy.</para>
+/// <para>Month names come from the page's <c>&lt;html lang&gt;</c> through <c>Intl</c>, which is
+/// what <c>&lt;input type="month"&gt;</c> cannot do: it names the month in the browser's language.
+/// So an Indonesian page reads <c>Oktober 2026</c> with nothing configured.</para>
+/// </remarks>
+public partial class FdyMonthpicker
+{
+    /// <summary>The chosen month as an ISO string (<c>yyyy-MM</c>), or "" when unset. One format,
+    /// always. Two-way bindable via <c>@bind-Value</c>.</summary>
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public EventCallback<string?> ValueChanged { get; set; }
+
+    /// <summary>Accessible label for the trigger. Defaults to the enhancer's <c>Month</c>.</summary>
+    [Parameter] public string? Label { get; set; }
+
+    /// <summary>Shown while nothing is picked. Defaults to the enhancer's <c>Choose a month</c>.</summary>
+    [Parameter] public string? Placeholder { get; set; }
+
+    /// <summary>Earliest selectable month (ISO <c>yyyy-MM</c>; a full <c>yyyy-MM-dd</c> is read too,
+    /// as its own month). A bound that falls inside a month leaves that month pickable.</summary>
+    [Parameter] public string? Min { get; set; }
+
+    /// <summary>Latest selectable month.</summary>
+    [Parameter] public string? Max { get; set; }
+
+    /// <summary>Id for the trigger the enhancer builds, so a form's own label can point at it.</summary>
+    [Parameter] public string? Id { get; set; }
+
+    /// <summary>Id of the help or error text the trigger describes itself with.</summary>
+    [Parameter] public string? Describedby { get; set; }
+
+    /// <summary>Greyed and out of the tab order.</summary>
+    [Parameter] public bool Disabled { get; set; }
+
+    /// <summary>Locked/view mode: focusable and showing its month, but the calendar will not open.
+    /// Unlike <see cref="Disabled"/> it keeps tab order and is not greyed.</summary>
+    [Parameter] public bool Readonly { get; set; }
+
+    /// <summary>Marks the field invalid (<c>aria-invalid</c> + the error styling).</summary>
+    [Parameter] public bool Invalid { get; set; }
+
+    /* The calendar's navigation labels, and only the ones this picker shows. Month NAMES follow the
+       page's `lang` through Intl and need nothing here. The day grid's own arrows are absent along
+       with the day grid, so there is no PrevMonthLabel to pass: the arrows beside a month grid step
+       a YEAR. Leave one null and the enhancer's English default stands. */
+    [Parameter] public string? PrevYearLabel { get; set; }
+    [Parameter] public string? NextYearLabel { get; set; }
+    [Parameter] public string? PrevYearsLabel { get; set; }
+    [Parameter] public string? NextYearsLabel { get; set; }
+
+    /// <summary>The title button that drills into the year grid. <c>{label}</c> is the year shown.</summary>
+    [Parameter] public string? ChooseYearLabel { get; set; }
+
+    /// <summary>The year grid's title, back to months. <c>{start}</c> and <c>{end}</c> are the page range.</summary>
+    [Parameter] public string? BackToMonthsLabel { get; set; }
+
+    protected override ValueTask HydrateAsync() => JS.InvokeVoidAsync("FreedayDatepicker.init", Root);
+
+    protected override async ValueTask OnHydratedAsync()
+        => await SubscribeAsync("fdy-datepicker-change", nameof(OnChange));
+
+    // The enhancer owns the built trigger + calendar; never let Blazor re-render the seed.
+    protected override bool ShouldRender() => !Hydrated;
+
+    /* Which is why the three states are pushed rather than re-rendered: the seed is written once,
+       so a page that disables this field later would otherwise be ignored in silence. */
+    protected override async Task OnParametersSetAsync()
+    {
+        if (!Hydrated) return;
+        await JS.InvokeVoidAsync("FreedayDatepicker.setState", Root,
+            new { disabled = Disabled, @readonly = Readonly, invalid = Invalid });
+    }
+
+    /// <summary>Invoked by the bridge when the user picks (or clears) a month.</summary>
+    [JSInvokable]
+    public async Task OnChange(ChangeDetail detail)
+    {
+        Value = detail.Value;
+        await ValueChanged.InvokeAsync(detail.Value);
+    }
+
+    /// <summary>The detail shape of the enhancer's <c>fdy-datepicker-change</c> event.</summary>
+    public sealed record ChangeDetail(string? Value, string? Date);
+}

package/adapters/blazor/FdyTable.razor

@@ -146,6 +146,11 @@
 
     @if (Pager)
     {
-        <FdyTableFooter Page="FooterPage" PageSizes="PageSizes" PageChanged="OnFooterPage" />
+        @* The six strings go through as given, null included: every default lives in the footer, so
+           a parameter left unset here is the footer's English and not a second copy of it. *@
+        <FdyTableFooter Page="FooterPage" PageSizes="PageSizes" PageChanged="OnFooterPage"
+                        InfoText="@InfoText" PageSizeLabel="@PageSizeLabel"
+                        PaginationLabel="@PaginationLabel" PrevLabel="@PrevLabel"
+                        NextLabel="@NextLabel" PageLabel="@PageLabel" />
     }
 </div>