@cahyo-dimas/freeday 3.9.4 → 3.11.0

package/CHANGELOG.md

@@ -9,6 +9,106 @@ 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.11.0] - 2026-10-26
+
+**Audit kontrol native di seluruh layar sebuah aplikasi konsumen, bukan di satu layar yang
+mengeluh.** Pemiliknya melaporkan tampilan HP aslinya tak cocok dengan peramban di lebar yang sama,
+dan dugaan pertama -- termasuk dugaan saya -- adalah CSS. Pengukuran menyangkalnya: dengan
+stylesheet aplikasi yang sebenarnya, pada 375x667, Chromium dan WebKit menata `date`, `time`,
+`number`, `search` dan `text` **identik**, 293x44 keenamnya, selisih satu piksel pada `y` yang
+cuma pembulatan. Jadi yang berbeda bukan tata letaknya, melainkan **widget native-nya**: `date` dan
+`time` digambar sistem operasi, sehingga iOS memberi roda gulir, Android piringan jam dan desktop
+sebuah stepper, masing-masing dengan lebar dan format nilainya sendiri, dan tak ada CSS yang
+menjangkaunya. Itu sebabnya satu HP dan satu peramban di lebar yang sama bisa tidak sepakat soal
+layar yang selebihnya sama.
+
+Kit sudah mengatakan ini di tabelnya sendiri ("Use `.fdy-datepicker` / `.fdy-timepicker` /
+`.fdy-datetimepicker` instead") dan sudah mengirim CSS plus enhancer-nya. Yang belum ada adalah
+wrapper bertipe untuk timepicker, jadi aplikasi Vue/React/Blazor harus merakit sendiri
+plumbing custom-event-nya -- dan merakit sendiri adalah yang membuat empat `<input type="time">`
+bertahan di satu formulir shift.
+
+Catatan kejujuran: perbedaan iOS itu **tidak** direproduksi di sini. WebKit desktop bukan Mobile
+Safari, dan penampilan kontrol native memang bersifat platform; buktinya adalah tangkapan layar
+perangkat nyata plus fakta terukur bahwa tata letak per lebar sudah identik. Yang dapat diuji
+lokal, dan kini diuji, adalah perilaku penggantinya.
+
+### Added
+- **`FdyTimepicker`** (`#094`), wrapper bertipe di **ketiga** stack, menjadikannya tiga belas.
+  Vue dan React mengimplementasikan listbox-nya secara native sebab ia kontrol form -- alasan yang
+  sama dengan `FdyCombo`, dan alasan yang `FdyChart` nyatakan dari sisi sebaliknya: enhancer yang
+  menguasai DOM berkelahi dengan render framework dan tak menyisakan `v-model`. Blazor
+  menjembatani enhancer lewat seed, seperti `FdyDatepicker`. Sorotannya **dijepit, bukan
+  berputar**: pada daftar 48 opsi, ArrowUp di `00:00` yang melompat ke `23:30` terbaca sebagai
+  kerusakan. Sorotan juga digulirkan ke dalam pandangan, sebab panelnya `max-height:15rem` dan
+  sorotan yang tak terlihat bukan sorotan.
+- **`data-id` dan `data-describedby` pada seed timepicker** (`#094`). Keduanya tak terbaca
+  sebelumnya, jadi host yang menampilkan teks galat tak punya cara menautkannya. Pemicunya
+  `<button>`, yang **bukan** elemen labelable, sehingga `<label for>` memang tak akan pernah
+  mengaktifkannya -- itu didokumentasikan sekarang, bukan dibiarkan jadi kejutan.
+- **`FreedayTimepicker.setState(root, { disabled, readonly, invalid })`** (`#094`), bentuknya sama
+  dengan `FreedayDatepicker.setState`. Tanpa ini, host yang merender seed-nya sekali lalu tidak
+  pernah lagi (Blazor, `ShouldRender => false`) memiliki tiga parameter keadaan yang tak ada yang
+  membacanya setelah render pertama.
+
+### Fixed
+- **`FdyDateRange` membuang kedelapan prop label navigasi kalender** (`#095`), di ketiga stack.
+  `FdyDatepicker` menerimanya sejak 2.1.1; rentangnya tidak meneruskannya, sehingga rentang tanggal
+  adalah **satu-satunya** kontrol tanggal di kit yang navigasinya tak bisa dinamai dalam bahasa
+  halamannya sendiri -- aplikasi berbahasa Indonesia mendapat "Previous month" tepat di tempat yang
+  tak dapat ia jangkau. Diteruskan apa adanya ke kedua pemilih. Prop datar `xxxLabel`, bukan objek
+  `labels`, sebab bentuk itulah yang sudah dipakai setiap komponen lain di kit. Blazor menambah
+  `BackToMonthsLabel`, karena seed yang kedua pemilihnya dibangun dari situ punya tombol itu.
+
+## [3.10.0] - 2026-10-26
+
+**Lima rilis dalam satu hari, empat di antaranya menambal satu kelas yang sama, dan pemiliknya
+menghentikan polanya.** Setiap cacat Safari hari ini ditemukan oleh sebuah iPhone 7 sesudah
+terkirim, satu per satu, karena suite kit berjalan di Chrome saja: `browser/harness.mjs` berbicara
+CDP ke `chrome-headless-shell` dan tak ada WebKit di ujung kabel itu. Lantai dukungan di README
+adalah prosa yang tak ada yang membacanya. Rilis ini memperbaiki keduanya.
+
+### Added
+- **Gerbang lantai fitur** (`#091`), `test/baseline.test.mjs`. Ia **membaca ketiga angka lantai
+  dari README** alih-alih mengetiknya ulang, mengenumerasi 41 fitur CSS di kedua stylesheet yang
+  dikirim, dan gagal ketika satu di antaranya menuntut rilis yang lantainya tak capai. Pengecualian
+  boleh ada tetapi wajib membawa alasan tertulis minimal 160 karakter, DAN fiturnya harus benar-benar
+  masih melampaui lantai; kalau tidak gerbangnya menyuruh menghapus entrinya. Daftar pemaafan yang
+  tumbuh tanpa alasan adalah penjaga yang berhenti menjaga, dan itu persis kegagalan yang sudah
+  terjadi dua kali di hari yang sama.
+- **Suite WebKit di gerbang** (`#092`), job CI tersendiri dengan Playwright, terpisah penuh dari
+  harness CDP yang menjalankan 206 uji dan tidak menyentuhnya. Sebelas uji menutup apa yang hanya
+  WebKit dapat perlihatkan: backdrop dan centang checkbox dan thumb switch harus MENCAPAI keadaan
+  akhirnya di bawah Reduce Motion, tap pada backdrop menutup drawer (sintesis klik `#057`), dan
+  asap tata letak telepon. Ia menolak lulus diam-diam lewat lima jalur yang semuanya diuji terhadap
+  laporan JSON nyata: laporan hilang, nol uji, ada yang dilewati, ada yang goyah, atau uji identitas
+  mesin hilang.
+
+### Fixed
+- **Tiga fitur melampaui lantai yang kit nyatakan sendiri** (`#091`). `@container` di CFL dipagari
+  `@supports` dengan cadangan `@media (max-width:32rem)`, dan angka itu diturunkan dari lebar
+  dialognya sendiri bukan dipilih; absennya bukan kosmetik, sebab di Safari 15.4 sampai 15.8 seluruh
+  bloknya dibuang dan dialog 372px memakai tabel tiga kolom yang digulir dua arah.
+  `overscroll-behavior` dan `text-wrap:balance` jadi pengecualian beralasan. **Lantainya tidak
+  dinaikkan:** iPhone 7 yang menemukan empat cacat hari ini berhenti di iOS 15.
+- **`user-select` dikirim tanpa pasangan `-webkit-`** di `.fdy-avatar` dan `.fdy-breadcrumb__sep`
+  (`#091`). WebKit menuntut prefiks itu sampai Safari 17.
+- **Blok durasi-mungil lama di `src/base.css` mengalahkan perlakuan reduced-motion kit sendiri**
+  (`#093`). `*,*::before,*::after{animation-duration:.001ms !important}` sebagai `!important` pada
+  `*` menang atas `.fdy-spinner{animation-duration:2s}`, `.fdy-skeleton{animation:none}` dan
+  `.fdy-progress{animation:none}`, jadi ketiga perlakuan yang ditulis khusus untuk setelan itu tidak
+  pernah bekerja. Ketiganya satu-satunya animasi di luar pagar `no-preference`, jadi membuang blok
+  lama memulihkan semuanya tanpa membuka apa pun. Penjaga 3.9.4 melewatkannya karena regexnya
+  menuntut `0.001ms` berawalan nol sementara berkasnya menulis `.001ms`; sekarang ia menerima
+  keduanya dan ikut memeriksa `animation-duration`.
+
+### Docs
+- **Meta viewport dinyatakan sebagai syarat**, bukan ditampilkan di contoh. Tanpanya mesin mobile
+  menata halaman di lebar bawaan sekitar 980px, `(max-width:720px)` tak pernah cocok, dan seluruh
+  lapisan responsif kit absen: shell berdiri dalam bentuk desktopnya di telepon. Itu bukan
+  hipotetis. Fixture tanpa tag itu melaporkan `window.innerWidth` 981 pada deskriptor iPhone 7 di
+  jalanan pertama suite WebKit, bentuk yang sama persis dengan laporan yang memulai suite itu.
+
 ## [3.9.4] - 2026-10-26
 
 **Sembilan dari lima puluh enam, dan empat puluh delapan sisanya ranjau.** Tiga rilis berturut-turut

package/COMPONENTS.md

@@ -34,8 +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, twelve components have a typed wrapper. Use it.** `FdyCombo` ·
-   `FdyDatepicker` · `FdyMonthpicker` · `FdyDateRange` · `FdyAutocomplete` · `FdyCascade` · `FdyCfl` ·
+7. **On Vue, React or Blazor, thirteen components have a typed wrapper. Use it.** `FdyCombo` ·
+   `FdyDatepicker` · `FdyMonthpicker` · `FdyDateRange` · `FdyTimepicker` · `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
@@ -1020,6 +1021,7 @@ grid's own title.
 | `startPlaceholder?` · `endPlaceholder?` | `string` | One per field. |
 | `ariaLabel?` · `ariaLabelledby?` · `describedby?` | `string` | Names the group (`role="group"`), or points at the text that does. |
 | `disabled?` · `readonly?` · `invalid?` | `boolean` | Applied to both pickers together. |
+| `prevMonthLabel?` · `nextMonthLabel?` · `prevYearLabel?` · `nextYearLabel?` · `prevYearsLabel?` · `nextYearsLabel?` · `chooseMonthLabel?` · `chooseYearLabel?` | `string` | Forwarded verbatim to **both** pickers. Until 3.11.0 this was the one picker in the kit whose calendar nav could not be named in the page's own language: the single picker took these, the range dropped them. Blazor adds `BackToMonthsLabel`, since the raw seed both pickers are built from has that button. |
 
 Blazor splits the value into two scalars, `From` / `FromChanged` and `To` / `ToChanged`, because a
 C# binding cannot express one object bound in two places, and it adds `Separator`.
@@ -1106,10 +1108,52 @@ it has always been, down to the `YYYY-MM-DD` it reports.
 ```
 
 ## Time picker — `data-fdy-timepicker`
-24-hour `HH:MM` listbox. `data-step` (minutes, default 30), `data-min`, `data-max`. Needs
+> **Typed wrapper: `<FdyTimepicker>`**. Vue (`v-model`) · React (`value`/`onChange`) · Blazor (`@bind-Value`). In those stacks use the wrapper; the markup below is for stacks without an adapter (and is what the wrapper renders).
+
+24-hour `HH:MM` listbox. **Author an empty `<div>`** — the enhancer builds everything. Needs
 `freeday-timepicker.js`. Classes: `.fdy-timepicker` (+`--error`) · `__trigger` `__value`
 (+`--placeholder`) `__icon` `__panel` `__opt`.
 
+Seed attributes: `data-step` (minutes, default 30), `data-min` (default `00:00`), `data-max`
+(default `23:59`), `data-value`, `data-label`, `data-placeholder` (default `--:--`), `data-id`,
+`data-describedby`, `data-disabled`, `data-readonly`, `data-invalid`. Emits a bubbling
+`fdy-time-select` (`detail {value}`). `FreedayTimepicker.setState(root, { disabled, readonly,
+invalid })` changes the three states afterwards, which is what a host that renders its seed once
+and never again (Blazor) needs.
+
+**Use this instead of `<input type="time">`**, and not for theming alone: the native picker is
+drawn by the *operating system*, so iOS shows a scroll wheel, Android a clock dial and desktop a
+stepper, each with its own width and value format, and no CSS reaches any of them. A phone and a
+browser at the same width therefore disagree about a screen that is otherwise identical.
+
+```html
+<div data-fdy-timepicker data-step="15" data-min="06:00" data-max="22:00"
+     data-value="07:00" data-label="Jam mulai"></div>
+```
+
+### Props — `<FdyTimepicker>`
+
+| Prop | Type | What it does |
+|---|---|---|
+| `modelValue` · `value` | `string \| null` | `HH:MM`, 24-hour. `''`/`null` for empty. A loose `H:MM` is normalised for matching. Blazor: `Value` / `@bind-Value`. |
+| `onChange` | `(value: string) => void` | React. Vue emits `update:modelValue` and `change`, Blazor `ValueChanged`. |
+| `step?` | `number` | Minutes between options. Default 30. |
+| `min?` · `max?` | `string` | `HH:MM` bounds, inclusive. Default `00:00` to `23:59`. |
+| `placeholder?` | `string` | Shown when there is no value. Default `--:--`. |
+| `ariaLabel?` · `ariaLabelledby?` · `describedby?` | `string` | Names the trigger, or points at the text that does. Blazor: `Label` / `Describedby`. |
+| `id?` | `string` | Id for the trigger. It is a `<button>`, which is **not** a labelable element, so a `<label for>` will not activate it — name it with `ariaLabel`/`ariaLabelledby`. |
+| `disabled?` · `readonly?` · `invalid?` | `boolean` | `readonly` keeps tab order and shows the time but will not open. |
+
+Keyboard: `ArrowDown`/`ArrowUp` move one option, `Home`/`End` jump to the ends, `Enter`/`Space`
+pick, `Escape` closes. The highlight is **clamped, not cyclic** — `ArrowUp` at `00:00` stays there,
+because wrapping to `23:30` reads as a glitch in a list this long — and it is scrolled into view,
+since the panel is `max-height:15rem` and a highlight nobody can see is no highlight.
+
+**Deliberate difference between the two paths.** The wrappers keep focus on the **trigger** with
+`aria-activedescendant` on it, which is what `FdyCombo`, `FdyDatepicker` and `FdyAutocomplete` do;
+the raw enhancer moves focus **into the panel**. Both are valid APG listbox patterns, and the Vue
+and React adapters follow their own family rather than the enhancer.
+
 ## Datetime picker — `data-fdy-datetimepicker`
 A **composition** of the two above, not a monolith: nest one datepicker and one timepicker inside
 the wrapper. `freeday-datetime.js` joins them and emits one `fdy-datetime-change` with

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.9.4-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.9.4)
+[![Release](https://img.shields.io/badge/release-v3.11.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.11.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-*` |
 
-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
+Ketiga belasnya: `FdyCombo` · `FdyDatepicker` · `FdyMonthpicker` · `FdyDateRange` ·
+`FdyTimepicker` · `FdyAutocomplete` · `FdyCascade` · `FdyCfl` · `FdyChart` · `FdyTable` · `FdyModal` · `FdyDrawer` ·
+`FdyAppShell`. Menulis markup mentah untuk ketiga 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
@@ -256,8 +256,14 @@ terlihat, HTML native dulu sebelum ARIA, komponen interaktif ikut pola WAI-ARIA
 
 ## Dukungan browser
 **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.
+15.4 untuk native `<dialog>`/`::backdrop` dan `accent-color`. `conic-gradient` dan `scroll-snap`
+lebih tua lagi.
+
+`test/baseline.test.mjs` membaca tiga angka itu dari baris di atas, mengenumerasi fitur CSS yang
+dipakai kedua stylesheet yang dikirim, dan gagal kalau salah satunya butuh rilis yang tak dijangkau
+floor itu. Sebelum uji itu ada, floor-nya cuma kalimat yang tak bisa ditegakkan siapa pun, dan di
+hari uji ini ditulis sudah ada lima rilis keluar dalam satu hari, empat di antaranya menambal cacat
+Safari yang ketemu di iPhone 7 sesudah terkirim.
 
 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
@@ -268,11 +274,33 @@ sekarang ditulis `rgba(var(--color-primary-rgb), .26)`, warnanya sama dan sudah
 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.
+Yang paling baru dipakai kit ini memang melewati floor itu, dengan sengaja, dan tiap satunya
+terdaftar di `test/baseline.test.mjs` beserta apa yang hilang di browser di bawah floor:
+
+- `@container` di dialog choose-from-list dipagari `@supports`, dan satu media query lebar viewport
+  menumpuk barisnya di bawahnya. Yang tak bisa dilihat cadangan itu adalah dialog sempit di dalam
+  viewport lebar, yaitu panel yang didok di desktop, dan di situ dialognya tetap memakai tabel yang
+  digulir seperti selama ini.
+- `@starting-style` dan transisi `allow-discrete` menganimasikan modal dan drawer. Di bawah floor
+  at-rule-nya dilewati dan shorthand-nya dibuang saat parse, jadi keduanya buka dan tutup tanpa
+  animasi, selalu di keadaan akhirnya dan tak pernah separuh jalan.
+- `text-wrap: balance` menyeimbangkan dua kelas judul. Tanpa itu judulnya patah di tempat ia patah
+  sebelumnya.
+- `overscroll-behavior: contain` menghentikan gulir di ujung nav dan di dua rail halaman yang
+  sticky. Tanpa itu gulirnya lanjut ke halaman di belakangnya, seperti sebelum properti ini ada.
+  Tidak ada gantinya di CSS di bawah Safari 16; pilihan lainnya scroll lock di JS, dan shell ini
+  sengaja tidak melakukannya.
+- `scrollbar-width: none` menyembunyikan scrollbar carousel, dengan `::-webkit-scrollbar` di
+  sebelahnya yang mengerjakan hal sama untuk setiap WebKit di dalam floor.
+- `100dvh` membatasi tinggi rail sticky di layar dari 960px. Safari sudah punya unit itu sejak rilis
+  floor-nya sendiri, jadi satu-satunya mesin di dalam floor yang belum punya adalah tiga rilis
+  Chrome sebelum unit itu mendarat di sana, dan di situ batasnya hilang dan aside yang panjang
+  tumbuh melewati viewport alih-alih digulir di dalam dirinya.
+
+Blur backdrop pakai `-webkit-backdrop-filter` + `backdrop-filter`, dan `user-select` membawa kembar
+`-webkit-`-nya dengan cara yang sama. Uji yang sama menegaskan kedua pasangan itu aturan per aturan,
+jadi properti standarnya tak pernah dikirim sendirian. 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.9.4-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.9.4)
+[![Release](https://img.shields.io/badge/release-v3.11.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.11.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,8 @@ enhancer:
 | **Blazor (net8.0)** | `Freeday.Blazor` RCL | `@bind-Value` |
 | Static HTML · Svelte · server-rendered templates | *(no wrapper)* raw markup + enhancers, below | `fdy-*` events |
 
-The twelve: `FdyCombo` · `FdyDatepicker` · `FdyMonthpicker` · `FdyDateRange` · `FdyAutocomplete` ·
-`FdyCascade` · `FdyCfl` · `FdyChart` · `FdyTable` · `FdyModal` · `FdyDrawer` · `FdyAppShell`.
+The thirteen: `FdyCombo` · `FdyDatepicker` · `FdyMonthpicker` · `FdyDateRange` · `FdyTimepicker` ·
+`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:
@@ -266,8 +266,14 @@ the "Accessibility" section in `docs/index.html`.
 
 ## Browser support
 **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.
+generation of native `<dialog>`/`::backdrop` and `accent-color`. `conic-gradient` and `scroll-snap`
+are older still.
+
+`test/baseline.test.mjs` reads those three numbers out of the line above, enumerates the CSS
+features both shipped stylesheets use, and fails when one of them needs a release the floor does not
+reach. Until that test existed the floor was a sentence nobody could enforce, and the day it was
+written five releases had gone out in one day, four of them fixing Safari defects found on an
+iPhone 7 after shipping.
 
 `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
@@ -278,11 +284,32 @@ written `rgba(var(--color-primary-rgb), .26)`, which is the same colour and pars
 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 anything below the floor is the consumer's
-responsibility.
+The newest things the kit touches reach past that floor on purpose, and each one is listed in
+`test/baseline.test.mjs` with what a browser below the floor loses:
+
+- `@container` in the choose-from-list dialog is fenced with `@supports`, and a viewport-width media
+  query stacks the rows underneath it. The case the fallback cannot see is a narrow dialog inside a
+  wide viewport, which is a docked panel on a desktop, and there the dialog keeps the scrolling
+  table it always had.
+- `@starting-style` and the `allow-discrete` transitions animate the modal and the drawer. Below the
+  floor the at-rule is skipped and the shorthand is dropped at parse time, so both open and close
+  with no animation, always at their end state and never halfway.
+- `text-wrap: balance` balances two heading classes. Without it a heading wraps where it used to.
+- `overscroll-behavior: contain` stops a scroll at the end of the nav and of the sticky page rails.
+  Without it that scroll carries on into the page behind, the way it did before the property
+  existed. There is no CSS substitute below Safari 16; the alternative is a scroll lock in JS, which
+  this shell deliberately does not do.
+- `scrollbar-width: none` hides the carousel scrollbar, with `::-webkit-scrollbar` beside it doing
+  the same job for every WebKit inside the floor.
+- `100dvh` caps the sticky rails on screens from 960px. Safari has had the unit since the floor
+  release itself, so the only engines inside the floor without it are the three Chrome releases
+  before it landed there, and on those the cap goes away and a long aside grows past the viewport
+  instead of scrolling inside itself.
+
+Backdrop blur uses `-webkit-backdrop-filter` + `backdrop-filter`, and `user-select` carries its
+`-webkit-` twin the same way. The same test asserts both pairings rule by rule, so the standard
+property never ships alone. There's no CSS build or autoprefixer step, so supporting anything below
+the floor is the consumer's responsibility.
 
 ## License
 [MIT](LICENSE) © 2026 Cahyo D. Kurnianto. Free to use, modify, and distribute, as long as the

package/adapters/blazor/FdyDateRange.razor

@@ -8,9 +8,27 @@
 <div @ref="Root">
     <div data-fdy-daterange role="group" aria-label="@AriaLabel">
         <div data-fdy-datepicker data-role="from"
-             data-value="@From" data-placeholder="@FromPlaceholder" data-min="@Min" data-max="@Max"></div>
+             data-value="@From" data-placeholder="@FromPlaceholder" data-min="@Min" data-max="@Max"
+             data-fdy-text-prev-month="@PrevMonthLabel"
+             data-fdy-text-next-month="@NextMonthLabel"
+             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-month="@ChooseMonthLabel"
+             data-fdy-text-choose-year="@ChooseYearLabel"
+             data-fdy-text-back-to-months="@BackToMonthsLabel"></div>
         <span class="fdy-daterange__sep">@Separator</span>
         <div data-fdy-datepicker data-role="to"
-             data-value="@To" data-placeholder="@ToPlaceholder" data-min="@Min" data-max="@Max"></div>
+             data-value="@To" data-placeholder="@ToPlaceholder" data-min="@Min" data-max="@Max"
+             data-fdy-text-prev-month="@PrevMonthLabel"
+             data-fdy-text-next-month="@NextMonthLabel"
+             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-month="@ChooseMonthLabel"
+             data-fdy-text-choose-year="@ChooseYearLabel"
+             data-fdy-text-back-to-months="@BackToMonthsLabel"></div>
     </div>
 </div>

package/adapters/blazor/FdyDateRange.razor.cs

@@ -23,6 +23,26 @@ public partial class FdyDateRange
     [Parameter] public string? Max { get; set; }
     [Parameter] public string Separator { get; set; } = "–";
 
+    /* The calendars' own navigation labels, forwarded verbatim to BOTH pickers. Month and weekday
+       NAMES follow the page's `lang` through Intl and need nothing here; these are the buttons
+       around them. Until now the range was the one picker in the kit whose nav could not be named
+       in the page's own language -- FdyDatepicker took these, FdyDateRange dropped them, so an
+       Indonesian app got "Previous month" on the only date control it could not reach. Raised
+       from keamanan-cluster (#095). */
+    [Parameter] public string? PrevMonthLabel { get; set; }
+    [Parameter] public string? NextMonthLabel { get; set; }
+    [Parameter] public string? PrevYearLabel { get; set; }
+    [Parameter] public string? NextYearLabel { get; set; }
+    [Parameter] public string? PrevYearsLabel { get; set; }
+    [Parameter] public string? NextYearsLabel { get; set; }
+    [Parameter] public string? ChooseMonthLabel { get; set; }
+    [Parameter] public string? ChooseYearLabel { get; set; }
+
+    /// <summary>The year grid's title, back to months. Blazor only, because the raw seed both
+    /// pickers are built from supports it and <see cref="FdyDatepicker"/> already exposes it;
+    /// the Vue and React adapters build no such button.</summary>
+    [Parameter] public string? BackToMonthsLabel { get; set; }
+
     private int _token;
 
     // initAll(Root) links the daterange (descendant) and inits both child pickers.

package/adapters/blazor/FdyTimepicker.razor

@@ -0,0 +1,23 @@
+@namespace Freeday.Blazor
+@inherits FreedayComponentBase<FdyTimepicker>
+
+@* Seed-based wrapper over freeday-timepicker.js: the enhancer builds the input-styled trigger
+   + time listbox from this empty div and emits fdy-time-select. The enhancer owns that DOM, so
+   the seed renders once (ShouldRender => false) and the picked time is read back through
+   @bind-Value. Value is "HH:MM" (24-hour) or "".
+
+   This is what replaces <input type="time">, and not for theming alone: the native picker is
+   drawn by the OPERATING SYSTEM, so iOS shows a scroll wheel, Android a clock dial and desktop a
+   stepper, each with its own width and value format, and no CSS reaches any of them (#094). *@
+<div @ref="Root" data-fdy-timepicker
+     data-value="@Value"
+     data-label="@Label"
+     data-placeholder="@Placeholder"
+     data-step="@StepAttribute"
+     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)"></div>

package/adapters/blazor/FdyTimepicker.razor.cs

@@ -0,0 +1,79 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace Freeday.Blazor;
+
+public partial class FdyTimepicker
+{
+    /// <summary>Selected time as <c>HH:MM</c> (24-hour), 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>Accessible label for the trigger.</summary>
+    [Parameter] public string? Label { get; set; }
+
+    /// <summary>Shown when there is no value. The enhancer's own default is <c>--:--</c>.</summary>
+    [Parameter] public string? Placeholder { get; set; }
+
+    /// <summary>Minutes between options. The enhancer's own default is 30.</summary>
+    [Parameter] public int? Step { get; set; }
+
+    /* null, not "30", for the default: an attribute the enhancer does not need is one no reader
+       of the seed has to interpret, and the enhancer already falls back to 30. */
+    private string? StepAttribute => Step is null ? null : Step.Value.ToString();
+
+    /// <summary>Earliest selectable time (<c>HH:MM</c>). Default <c>00:00</c>.</summary>
+    [Parameter] public string? Min { get; set; }
+
+    /// <summary>Latest selectable time (<c>HH:MM</c>). Default <c>23:59</c>.</summary>
+    [Parameter] public string? Max { get; set; }
+
+    /// <summary>Id for the trigger the enhancer builds, so <c>aria-describedby</c> targets and
+    /// other references can point at it. Note the trigger is a <c>&lt;button&gt;</c>, which is not
+    /// a labelable element, so a <c>&lt;label for&gt;</c> will not activate it — use
+    /// <see cref="Label"/>.</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 time, but the list 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 enhancer owns this control's DOM; init it directly (initAll would skip Root itself).
+    protected override ValueTask HydrateAsync() => JS.InvokeVoidAsync("FreedayTimepicker.init", Root);
+
+    protected override async ValueTask OnHydratedAsync()
+        => await SubscribeAsync("fdy-time-select", nameof(OnSelect));
+
+    // The enhancer owns the built trigger + listbox; never let Blazor re-render the seed.
+    protected override bool ShouldRender() => !Hydrated;
+
+    /* Which is exactly why the three states are pushed rather than re-rendered: the seed above is
+       written once, so a page that disables this field later would otherwise be ignored. */
+    protected override async Task OnParametersSetAsync()
+    {
+        if (!Hydrated) return;
+        await JS.InvokeVoidAsync("FreedayTimepicker.setState", Root,
+            new { disabled = Disabled, @readonly = Readonly, invalid = Invalid });
+    }
+
+    /// <summary>Invoked by the bridge when the reader picks a time (enhancer's fdy-time-select).</summary>
+    [JSInvokable]
+    public async Task OnSelect(SelectDetail detail)
+    {
+        Value = detail.Value;
+        await ValueChanged.InvokeAsync(detail.Value);
+    }
+
+    /// <summary>The detail shape of the enhancer's <c>fdy-time-select</c> event.</summary>
+    public sealed record SelectDetail(string Value);
+}

package/adapters/react/components/FdyDateRange.tsx

@@ -29,6 +29,19 @@ export interface FdyDateRangeProps {
   endPlaceholder?: string;
   ariaLabel?: string;
   ariaLabelledby?: string;
+  /* Forwarded verbatim to BOTH pickers. Without these the range was the one picker in the kit
+     whose calendar nav could not be named in the page's own language: FdyDatepicker takes them,
+     FdyDateRange dropped them, so an Indonesian app got "Previous month" on the only date control
+     it could not reach. Flat `xxxLabel` props, not a `labels` object, because that is the shape
+     every other component in the kit already uses. Raised from keamanan-cluster (#095). */
+  prevMonthLabel?: string;
+  nextMonthLabel?: string;
+  prevYearLabel?: string;
+  nextYearLabel?: string;
+  prevYearsLabel?: string;
+  nextYearsLabel?: string;
+  chooseMonthLabel?: string;
+  chooseYearLabel?: string;
 }
 
 export function FdyDateRange(props: FdyDateRangeProps): JSX.Element {
@@ -57,6 +70,14 @@ export function FdyDateRange(props: FdyDateRangeProps): JSX.Element {
         invalid={props.invalid}
         describedby={props.describedby}
         placeholder={props.startPlaceholder ?? 'Dari'}
+        prevMonthLabel={props.prevMonthLabel}
+        nextMonthLabel={props.nextMonthLabel}
+        prevYearLabel={props.prevYearLabel}
+        nextYearLabel={props.nextYearLabel}
+        prevYearsLabel={props.prevYearsLabel}
+        nextYearsLabel={props.nextYearsLabel}
+        chooseMonthLabel={props.chooseMonthLabel}
+        chooseYearLabel={props.chooseYearLabel}
       />
       <span className="fdy-daterange__sep" aria-hidden="true">–</span>
       <FdyDatepicker
@@ -70,6 +91,14 @@ export function FdyDateRange(props: FdyDateRangeProps): JSX.Element {
         invalid={props.invalid}
         describedby={props.describedby}
         placeholder={props.endPlaceholder ?? 'Sampai'}
+        prevMonthLabel={props.prevMonthLabel}
+        nextMonthLabel={props.nextMonthLabel}
+        prevYearLabel={props.prevYearLabel}
+        nextYearLabel={props.nextYearLabel}
+        prevYearsLabel={props.prevYearsLabel}
+        nextYearsLabel={props.nextYearsLabel}
+        chooseMonthLabel={props.chooseMonthLabel}
+        chooseYearLabel={props.chooseYearLabel}
       />
     </div>
   );