@cahyo-dimas/freeday 3.6.0 → 3.8.0

package/CHANGELOG.md

@@ -9,6 +9,145 @@ 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
+app ronda membuka aplikasinya di iPhone 7 dan menulis tiga kata: tampilannya ancur banget. Sebabnya
+`color-mix()`, 94 kemunculan tanpa satu pun cadangan, dipakai untuk `box-shadow` (26),
+`border-color` (17), `color` (11) dan `background` (5). Safari baru mendukungnya di 16.2; iPhone 7
+mentok di iOS 15.
+
+Perbaikan pertama yang dicoba justru membuktikan sebabnya. Pola cadangan yang biasa dipakai orang,
+nilai statis dulu lalu `color-mix()` sesudahnya, tidak bekerja ketika deklarasinya memuat `var()`:
+deklarasi itu sah saat parse dan baru gagal saat computed-value, dan di jalur itu properti jatuh ke
+nilai initial, bukan ke baris sebelumnya. Untuk `border-color` nilai initial itu `currentColor`,
+yaitu hitam. Keluhan tentang garis hitam tebal di mana-mana itulah bukti mekanismenya. Jadi
+`color-mix()`-nya yang dibuang.
+
+### Fixed
+- **Nol `color-mix()` di seluruh CSS yang dikirim** (`#072`). `rgba(var(--x-rgb), .p)` identik
+  dengan `color-mix(in srgb, X p%, transparent)` menurut definisi, jadi 10 token semantik baru
+  menutup 84 dari 94 kemunculan; `--color-primary-rgb` sendirian menutup 45. Sisanya yang mencampur
+  terhadap permukaan dipipihkan di `tokens/build.mjs`, yang kini menghitung nilai bertulis
+  `color-mix(in srgb, {a} p%, {b})` sekali per tema sambil menelusuri rantai `$dark ?? $value`,
+  sehingga nilai gelapnya diturunkan alih-alih diketik dua kali.
+- **Modifier tone bekerja di Safari 15** (`#072`). Delapan tone kali latar, tinta dan dua garis kini
+  33 token terhitung, dan properti privat `--_fdy-{avatar,badge,chip}-tone` hilang seluruhnya.
+  Tampilan di peramban modern terbukti tidak berubah: byte yang benar-benar dicat dibandingkan lewat
+  tangkapan layar satu piksel, nol selisih di 48 warna kali dua tema.
+- **Lima tempat yang mencetak teks dengan `--color-primary` pindah ke `--color-primary-strong`**
+  (`#073`). Kontrak kontras hanya pernah menjanjikan peran itu terhadap permukaan pada ambang 3:1,
+  yakni ambang WCAG untuk komponen UI, bukan untuk teks. Jadi suite-nya lulus sambil kit mencetak
+  tinta di bawah AA pada teal 3.74, cyan 3.68, emerald 3.77 dan lime 3.09. Azure lulus di 6.56, dan
+  itu sebabnya tidak ada yang menyadarinya. Yang pindah: tautan, centang combo, ikon dropzone saat
+  seret, dan dua panah urut tabel. Sembilan belas tempat lain yang polanya ikut tertangkap sengaja
+  tidak disentuh, sebab semuanya batas kontrol dan objek grafis yang memang sah di 3:1.
+
+### Added
+- **Penjaga yang membuat ketiganya tidak bisa kembali diam-diam.** Satu uji menegaskan nol
+  `color-mix()` di CSS yang dikirim. Satu lagi menegaskan nol properti `color` yang menyebut
+  `--color-primary` gundul, membaca nama properti alih-alih substring supaya kesembilan belas isian
+  tetap sah. Dan kontrak kontras kini mengukur `--color-primary-strong` terhadap permukaan pada
+  ambang teks untuk setiap palet, bukan hanya azure.
+
+### Catatan dukungan peramban
+Floor-nya kini Chrome 105, Safari 15.4 dan Firefox 121, ditentukan `:has()`. Angka itu diaudit dari
+fitur yang dipakai, bukan dari sesi di perangkat sungguhan. Belum ada yang menjalankan kit ini di
+Safari 15.4 nyata.
+
 ## [3.6.0] - 2026-10-22
 
 **Tiga belas hal yang dibangun ulang sebuah app back-office karena kit belum punya.** App-nya tidak

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.6.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.6.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`.
@@ -255,11 +255,24 @@ terlihat, HTML native dulu sebelum ARIA, komponen interaktif ikut pola WAI-ARIA
 `docs/index.html`.
 
 ## Dukungan browser
-Butuh browser evergreen, kira-kira 2023+: **Chrome 111 · Safari 16.4 · Firefox 113** (floor
-ditentukan `color-mix()`). Fitur lain: native `<dialog>`/`::backdrop`, `accent-color`, `100dvh`,
-`conic-gradient`, `scroll-snap`, semuanya ≥ Safari 15.4. Blur backdrop pakai
-`-webkit-backdrop-filter` + `backdrop-filter` (Safari lama tetap jalan, hanya tanpa blur). Belum ada
-CSS build/autoprefixer, jadi dukungan browser lama jadi tanggung jawab konsumen.
+**Chrome 105 · Safari 15.4 · Firefox 121.** Floor-nya ditentukan `:has()`, dan oleh generasi Safari
+15.4 untuk native `<dialog>`/`::backdrop`, `accent-color`, dan `100dvh`. `conic-gradient` dan
+`scroll-snap` lebih tua lagi.
+
+Dulu floor itu ditentukan `color-mix()` di Safari 16.4, dan sekarang tidak lagi. Harganya memang tak
+pernah pantas: deklarasi yang mencampur sebuah token membawa `var()`, jadi ia dianggap sah saat
+parse dan baru gagal saat computed-value, dan di jalur itu properti jatuh ke nilai *initial*-nya,
+bukan ke baris cadangan di atasnya. Di iPhone yang mentok di iOS 15, 17 deklarasi `border-color`
+berubah jadi `currentColor`, yaitu garis hitam tebal di hampir segalanya. Semua alpha di kit ini
+sekarang ditulis `rgba(var(--color-primary-rgb), .26)`, warnanya sama dan sudah bisa diparse sejak
+Safari 9; empat aturan yang memang tak bisa dijawab secara statis membawa pasangan `@supports` yang
+sungguhan. `test/color-mix.test.mjs` menjaga agar yang berikutnya tetap jujur.
+
+Yang paling baru dipakai kit ini (`@container`, `@starting-style`, `text-wrap`) sifatnya peningkatan:
+browser yang belum punya akan melewati bloknya dan tetap memakai aturan tanpa syarat di bawahnya.
+Blur backdrop pakai `-webkit-backdrop-filter` + `backdrop-filter` (Safari lama tetap jalan, hanya
+tanpa blur). Belum ada CSS build/autoprefixer, jadi dukungan di bawah floor itu jadi tanggung jawab
+konsumen.
 
 ## Lisensi
 [MIT](LICENSE) © 2026 Cahyo D. Kurnianto. Bebas dipakai, diubah, dan didistribusikan asal

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.6.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.6.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`.
@@ -264,11 +264,23 @@ patterns, and `prefers-reduced-motion` is respected. Status is never conveyed by
 the "Accessibility" section in `docs/index.html`.
 
 ## Browser support
-Needs an evergreen browser, roughly 2023+: **Chrome 111 · Safari 16.4 · Firefox 113** (the floor is
-set by `color-mix()`). Other features used: native `<dialog>`/`::backdrop`, `accent-color`,
-`100dvh`, `conic-gradient`, `scroll-snap`, all of them ≥ Safari 15.4. Backdrop blur uses
+**Chrome 105 · Safari 15.4 · Firefox 121.** The floor is set by `:has()`, and by the Safari 15.4
+generation of native `<dialog>`/`::backdrop`, `accent-color` and `100dvh`. `conic-gradient` and
+`scroll-snap` are older still.
+
+`color-mix()` used to set that floor at Safari 16.4, and it no longer does. It was never worth it:
+a declaration that mixes a token carries `var()`, so it is assumed valid at parse time and only
+fails at computed-value time, where the property drops to its *initial* value instead of to a
+fallback line. On an iPhone that stopped at iOS 15 that turned 17 `border-color` declarations into
+`currentColor`, which is a thick black outline on roughly everything. Every alpha in the kit is now
+written `rgba(var(--color-primary-rgb), .26)`, which is the same colour and parses back to Safari 9;
+the four rules that cannot be answered statically carry a real `@supports` counterpart.
+`test/color-mix.test.mjs` keeps the next one honest.
+
+The newest things the kit touches (`@container`, `@starting-style`, `text-wrap`) are enhancements: a
+browser without them skips the block and keeps the unconditional rule underneath. Backdrop blur uses
 `-webkit-backdrop-filter` + `backdrop-filter` (older Safari still works, just without the blur).
-There's no CSS build or autoprefixer step, so supporting older browsers is the consumer's
+There's no CSS build or autoprefixer step, so supporting anything below the floor is the consumer's
 responsibility.
 
 ## License

package/USAGE.md

@@ -107,6 +107,48 @@ point, everything around it quiet.
 - **Surfaces:** most backgrounds are `--color-surface`; `--color-surface-2`/`-3` for a recessed area;
   `--color-primary-soft` only when you want a tinted callout, not as a default panel colour.
 
+### Putting an alpha on a role: use the channel triple, not `color-mix()`
+
+Every role you are likely to fade has a companion triple, so a 26% primary wash is:
+
+```css
+background: rgba(var(--color-primary-rgb), .26);
+```
+
+Reach for `color-mix(in srgb, var(--color-primary) 26%, transparent)` instead and you get the same
+colour on your machine and a missing one on an older iPhone, with **no way to put a fallback under
+it.** A declaration that mentions a custom property is assumed valid when the stylesheet is parsed
+and is only checked later, when the variable is substituted; if `color-mix()` is unknown at that
+point the declaration is thrown away *there*, and the browser does not go back to the static line
+you wrote above it. The property takes its initial value instead, which for `border-color` means
+`currentColor`: a thick black outline. Safari learned `color-mix()` in 16.2, so every phone that
+stopped at iOS 15 sees that.
+
+The triples are generated from the tokens they are named after, in all 18 palettes and both themes,
+so they follow a re-brand on their own. The ones that ship: `--color-primary-rgb`,
+`--color-on-primary-rgb`, `--color-danger-rgb`, `--color-danger-btn-rgb`, `--color-success-rgb`,
+`--color-warning-rgb`, `--color-info-rgb`, `--color-surface-rgb` and `--color-inverse-text-rgb`.
+If you need one the kit does not publish, ask for it rather than hard-coding channels.
+
+### Tinting one role over another: the colour is already a token
+
+A triple puts an alpha on **one** role. It cannot say "18% of this tone over the surface", because
+the result depends on two roles and on the theme. Those blends are computed when the kit is built
+and published as flat tokens, so you never write the mix at all:
+
+```css
+background: var(--tone-3-bg);      /* 18% of --tone-3 over --color-surface  */
+color: var(--tone-3-ink);          /* 50% of --tone-3 toward --color-text    */
+border-color: var(--tone-3-border);/* 30% of --tone-3 over --color-border    */
+```
+
+`--tone-N-bg` / `-ink` / `-border` / `-border-soft` exist for all eight tones in both themes, and are
+exactly what `.fdy-avatar--tone-N`, `.fdy-badge--tone-N` and `.fdy-chip--tone-N` paint — the
+`-ink` on the `-bg` is the pair the WCAG gate measures, so a custom element built from the same two
+tokens inherits that guarantee. `--color-danger-border` (40% of danger over the border) is the same
+idea for a row that failed. If you need a blend the kit does not publish, ask for it: it belongs in
+`tokens/tokens.json`, where the build can resolve it down both themes, not in a component.
+
 ## 5b. Theme: global by default, per-subtree when a region is inverted
 
 `data-theme="light|dark"` redefines the semantic tokens. Set it on `<html>` and it themes the app;

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;