@cahyo-dimas/freeday 3.7.0 → 3.8.0

package/CHANGELOG.md

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

@@ -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'` | `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"`. |
+| `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. |
@@ -1013,7 +1025,26 @@ 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.** `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.
+
+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.
+
+- Attributes: `data-value="YYYY-MM-DD"`, `data-mode="month"`, `data-placeholder`, `data-label`,
+  `data-fdy-no-icon`
 
 ```html
 <div class="fdy-field">
@@ -1021,6 +1052,11 @@ 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>
+  <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>
@@ -1440,6 +1476,28 @@ 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` 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.
 
 **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 +1890,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 +1920,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

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.8.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.8.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`.

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.8.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.8.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`.

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"

package/adapters/blazor/FdyDatepicker.razor.cs

@@ -5,11 +5,22 @@ namespace Freeday.Blazor;
 
 public partial class FdyDatepicker
 {
-    /// <summary>Selected date as an ISO string (<c>yyyy-MM-dd</c>), or "" when unset.
+    /// <summary>Selected date as an ISO string (<c>yyyy-MM-dd</c>), or <c>yyyy-MM</c> when
+    /// <see cref="Mode"/> is <see cref="FdyDatepickerMode.Month"/>, or "" when unset.
     /// Two-way bindable via <c>@bind-Value</c>.</summary>
     [Parameter] public string? Value { get; set; }
     [Parameter] public EventCallback<string?> ValueChanged { get; set; }
 
+    /// <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>
+    [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. */
+    private string? ModeAttribute => Mode == FdyDatepickerMode.Month ? "month" : null;
+
     /// <summary>Accessible label for the trigger.</summary>
     [Parameter] public string? Label { get; set; }
     [Parameter] public string? Placeholder { get; set; }
@@ -83,3 +94,13 @@ public partial class FdyDatepicker
     /// <summary>The detail shape of the enhancer's <c>fdy-datepicker-change</c> event.</summary>
     public sealed record ChangeDetail(string? Value, string? Date);
 }
+
+/// <summary>What <see cref="FdyDatepicker"/> answers with.</summary>
+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>
+    Month,
+}

package/adapters/blazor/FdyTableFooter.razor

@@ -9,12 +9,12 @@
 @if (Visible)
 {
     <div class="fdy-table-footer">
-        <span class="fdy-table-footer__info">Showing @RangeFrom–@RangeTo of @Page.Total</span>
+        <span class="fdy-table-footer__info">@InfoLine</span>
 
         @if (Sizes.Count > 0)
         {
             <div class="fdy-table-footer__size">
-                <span id="@SizeLabelId">Rows</span>
+                <span id="@SizeLabelId">@(PageSizeLabel ?? "Rows")</span>
                 @* The kit's own listbox, not a native <select>: an OS menu is unthemeable, and on
                    macOS it drops a dark panel into a light page. FdyCombo's own header says so. *@
                 <FdyCombo TValue="string" Value="@Page.Size.ToString()" Options="SizeOptions"
@@ -24,10 +24,10 @@
 
         @if (HasPager)
         {
-            <nav class="fdy-pagination" aria-label="Pagination">
+            <nav class="fdy-pagination" aria-label="@(PaginationLabel ?? "Pagination")">
                 <ul class="fdy-pagination__list">
                     <li>
-                        <button type="button" class="fdy-pagination__link" aria-label="Previous page"
+                        <button type="button" class="fdy-pagination__link" aria-label="@(PrevLabel ?? "Previous page")"
                                 disabled="@(CurrentPage1 == 1)" @onclick="() => GoTo(CurrentPage1 - 1)">‹</button>
                     </li>
                     @foreach (int? p in Pages)
@@ -44,13 +44,13 @@
                             else
                             {
                                 int page = p.Value;
-                                <button type="button" class="fdy-pagination__link" aria-label="@($"Go to page {page}")"
+                                <button type="button" class="fdy-pagination__link" aria-label="@PageAriaLabel(page)"
                                         @onclick="() => GoTo(page)">@(page)</button>
                             }
                         </li>
                     }
                     <li>
-                        <button type="button" class="fdy-pagination__link" aria-label="Next page"
+                        <button type="button" class="fdy-pagination__link" aria-label="@(NextLabel ?? "Next page")"
                                 disabled="@(CurrentPage1 == TotalPages)" @onclick="() => GoTo(CurrentPage1 + 1)">›</button>
                     </li>
                 </ul>

package/adapters/blazor/FdyTableFooter.razor.cs

@@ -21,6 +21,35 @@ public partial class FdyTableFooter
     /// </summary>
     [Parameter] public IReadOnlyList<int>? PageSizes { get; set; }
 
+    // The strings, six of them, one per thing this band says. The raw path has had a hatch since
+    // 1.39.0 (data-fdy-text-<key> read through textOf()) and this path had none, so an app that
+    // does not speak English could only rewrite the whole band by hand. A Blazor app mixes both
+    // paths by construction, since FreedayBlazor.initAll runs the enhancers, so these names follow
+    // the enhancer's TEXT keys where a key exists. Defaults stay English on every path, which
+    // COMPONENTS.md promises and the suite enforces.
+
+    /// <summary>
+    /// The range line. <c>{from}</c>, <c>{to}</c> and <c>{total}</c> are substituted, every
+    /// occurrence, as the enhancer's <c>textOf()</c> does. Default <c>Showing {from}–{to} of
+    /// {total}</c>, the enhancer's <c>info</c> key.
+    /// </summary>
+    [Parameter] public string? InfoText { get; set; }
+
+    /// <summary>The visible word beside the rows-per-page control, which also names it. Default <c>Rows</c>.</summary>
+    [Parameter] public string? PageSizeLabel { get; set; }
+
+    /// <summary>Accessible name of the pager landmark. Default <c>Pagination</c>.</summary>
+    [Parameter] public string? PaginationLabel { get; set; }
+
+    /// <summary>Accessible name of the previous-page arrow. Default <c>Previous page</c>.</summary>
+    [Parameter] public string? PrevLabel { get; set; }
+
+    /// <summary>Accessible name of the next-page arrow. Default <c>Next page</c>.</summary>
+    [Parameter] public string? NextLabel { get; set; }
+
+    /// <summary>Accessible name of a numbered page button. <c>{n}</c> substituted. Default <c>Go to page {n}</c>.</summary>
+    [Parameter] public string? PageLabel { get; set; }
+
     private IReadOnlyList<int> Sizes => PageSizes ?? Array.Empty<int>();
 
     // Just the number: the control sits beside a label reading "Rows", so "20 per page" states the
@@ -40,6 +69,13 @@ public partial class FdyTableFooter
 
     private bool HasPager => Page.Size > 0 && TotalPages > 1;
 
+    private string InfoLine => (InfoText ?? "Showing {from}–{to} of {total}")
+        .Replace("{from}", RangeFrom.ToString())
+        .Replace("{to}", RangeTo.ToString())
+        .Replace("{total}", Page.Total.ToString());
+
+    private string PageAriaLabel(int page1) => (PageLabel ?? "Go to page {n}").Replace("{n}", page1.ToString());
+
     // One page and no size control means there is nothing here to say, the table has always
     // withheld the whole band in that case, and this is where that decision now lives.
     private bool Visible => HasPager || Sizes.Count > 0;