@cahyo-dimas/freeday 3.10.0 → 3.11.0

package/CHANGELOG.md

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

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

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

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>
   );

package/adapters/react/components/FdyTimepicker.tsx

@@ -0,0 +1,212 @@
+import type { JSX } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import { usePopover } from '../usePopover';
+
+// React twin of adapters/vue/components/FdyTimepicker.vue over freeday's `.fdy-timepicker`
+// classes (src/components/timepicker.css). See that file's header for why a form control is
+// re-implemented natively instead of wrapping freeday-timepicker.js, and why this replaces
+// `<input type="time">`: the native picker is drawn by the OS, so iOS shows a scroll wheel,
+// Android a clock dial and desktop a stepper, each with its own width and format, and no CSS
+// reaches any of them (#094).
+
+export interface FdyTimepickerProps {
+  /** `HH:MM`, 24-hour. `''`/`null` for empty. A loose `H:MM` is normalised for matching. */
+  value: string | null;
+  onChange: (value: string) => void;
+  /** Minutes between options. Default 30. */
+  step?: number;
+  /** `HH:MM` bounds, inclusive. Default `00:00` to `23:59`. */
+  min?: string;
+  max?: string;
+  id?: string;
+  ariaLabel?: string;
+  ariaLabelledby?: string;
+  /** Shown when there is no value. Default `--:--`, the same as the raw path. */
+  placeholder?: string;
+  disabled?: boolean;
+  /** Locked/view mode: stays focusable and shows its time, but can't be opened or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+}
+
+const SHAPE: RegExp = /^\d{1,2}:\d{2}$/;
+
+function toMinutes(time: string): number {
+  const [h, m] = time.split(':');
+  return Number(h) * 60 + Number(m);
+}
+function pad(n: number): string {
+  return n < 10 ? `0${n}` : String(n);
+}
+function fromMinutes(total: number): string {
+  return `${pad(Math.floor(total / 60))}:${pad(total % 60)}`;
+}
+/** `7:0` is not a time; `7:00` is the same time as `07:00`. Anything else answers `''`. */
+function normalise(time: string | null): string {
+  if (time === null || !SHAPE.test(time)) return '';
+  const total: number = toMinutes(time);
+  return total >= 0 && total <= 23 * 60 + 59 ? fromMinutes(total) : '';
+}
+function bound(time: string | undefined, fallback: number): number {
+  return time !== undefined && SHAPE.test(time) ? toMinutes(time) : fallback;
+}
+
+export function FdyTimepicker(props: FdyTimepickerProps): JSX.Element {
+  const baseId: string = useId();
+  const triggerId: string = props.id ?? `${baseId}-trigger`;
+  const panelId: string = `${baseId}-panel`;
+  const optionId = (index: number): string => `${baseId}-opt-${index}`;
+
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const panelRef = useRef<HTMLUListElement>(null);
+  const [open, setOpen] = useState<boolean>(false);
+  const [highlighted, setHighlighted] = useState<number>(-1);
+
+  // Lift the panel into the top layer so it escapes an ancestor overflow clip. A shift form is a
+  // modal, and a time list long enough to scroll is exactly the panel a card would cut off.
+  usePopover(panelRef, triggerRef, open);
+
+  // Popover attr for React 18 (JSX may not type it): set once on mount.
+  useEffect((): void => {
+    panelRef.current?.setAttribute('popover', 'manual');
+  }, []);
+
+  const isDisabled: boolean = props.disabled === true;
+  const isReadonly: boolean = props.readonly === true;
+  const isInvalid: boolean = props.invalid === true;
+
+  const times: ReadonlyArray<string> = useMemo((): ReadonlyArray<string> => {
+    const stride: number = Math.max(1, Math.trunc(props.step ?? 30));
+    const from: number = bound(props.min, 0);
+    const to: number = bound(props.max, 23 * 60 + 59);
+    const out: string[] = [];
+    for (let m = from; m <= to; m += stride) out.push(fromMinutes(m));
+    return out;
+  }, [props.step, props.min, props.max]);
+
+  const value: string = normalise(props.value);
+  const selectedIndex: number = times.indexOf(value);
+  const shown: string = value !== '' ? value : (props.placeholder ?? '--:--');
+  const isPlaceholder: boolean = value === '';
+  const activeDescendant: string | undefined = open && highlighted >= 0 ? optionId(highlighted) : undefined;
+
+  /* The panel is `max-height:15rem` and scrolls: a highlight the reader cannot see is no highlight,
+     and with 48 half-hour options most of the list is out of view. */
+  useEffect((): void => {
+    const list: HTMLUListElement | null = panelRef.current;
+    if (list === null || highlighted < 0) return;
+    const opt: Element | undefined = list.children[highlighted];
+    if (opt instanceof HTMLElement) opt.scrollIntoView({ block: 'nearest' });
+  }, [highlighted, open]);
+
+  /* Clamped, not cyclic: FdyCombo wraps because its lists are short. Here ArrowUp at 00:00 landing
+     on 23:30 reads as a glitch. Matches the raw path. */
+  const setHighlight = (index: number): void => {
+    const last: number = times.length - 1;
+    setHighlighted(last < 0 ? -1 : Math.min(last, Math.max(0, index)));
+  };
+  const openList = (): void => {
+    if (isDisabled || isReadonly || open) return;
+    setOpen(true);
+    setHighlight(selectedIndex >= 0 ? selectedIndex : 0);
+  };
+  const closeList = (focusTrigger: boolean): void => {
+    setOpen(false);
+    setHighlighted(-1);
+    if (focusTrigger) triggerRef.current?.focus();
+  };
+  const toggle = (): void => { if (open) closeList(false); else openList(); };
+  const choose = (index: number): void => {
+    const next: string | undefined = times[index];
+    if (next === undefined) return;
+    if (next !== value) props.onChange(next);
+    closeList(true);
+  };
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {
+    if (isDisabled || isReadonly) return;
+    switch (e.key) {
+      case 'ArrowDown': e.preventDefault(); if (open) setHighlight(highlighted + 1); else openList(); break;
+      case 'ArrowUp': e.preventDefault(); if (open) setHighlight(highlighted - 1); else openList(); break;
+      case 'Home': if (open) { e.preventDefault(); setHighlight(0); } break;
+      case 'End': if (open) { e.preventDefault(); setHighlight(times.length - 1); } break;
+      case 'Enter':
+      case ' ': e.preventDefault(); if (open && highlighted >= 0) choose(highlighted); else openList(); break;
+      case 'Escape': if (open) { e.preventDefault(); closeList(true); } break;
+      case 'Tab': if (open) closeList(false); break;
+      default: break;
+    }
+  };
+
+  const onFocusout = (e: React.FocusEvent<HTMLDivElement>): void => {
+    const next: EventTarget | null = e.relatedTarget;
+    if (rootRef.current !== null && !(next instanceof Node && rootRef.current.contains(next))) closeList(false);
+  };
+
+  useEffect((): void | (() => void) => {
+    if (!open) return;
+    const onDocPointerDown = (e: MouseEvent): void => {
+      const t: EventTarget | null = e.target;
+      if (rootRef.current !== null && t instanceof Node && !rootRef.current.contains(t)) closeList(false);
+    };
+    document.addEventListener('mousedown', onDocPointerDown);
+    return (): void => document.removeEventListener('mousedown', onDocPointerDown);
+  }, [open]);
+
+  return (
+    <div
+      ref={rootRef}
+      className={isInvalid ? 'fdy-timepicker fdy-timepicker--error' : 'fdy-timepicker'}
+      data-value={value}
+      onKeyDown={onKeyDown}
+      onBlur={onFocusout}
+    >
+      <button
+        id={triggerId}
+        ref={triggerRef}
+        type="button"
+        className={open ? 'fdy-timepicker__trigger is-open' : 'fdy-timepicker__trigger'}
+        aria-haspopup="listbox"
+        aria-controls={panelId}
+        aria-expanded={open}
+        aria-activedescendant={activeDescendant}
+        aria-label={props.ariaLabel}
+        aria-labelledby={props.ariaLabelledby}
+        aria-invalid={isInvalid ? 'true' : undefined}
+        aria-readonly={isReadonly ? 'true' : undefined}
+        aria-describedby={props.describedby}
+        disabled={isDisabled}
+        onClick={toggle}
+      >
+        <span className={isPlaceholder ? 'fdy-timepicker__value fdy-timepicker__value--placeholder' : 'fdy-timepicker__value'}>{shown}</span>
+        <span className="fdy-timepicker__icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
+               strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+            <circle cx="12" cy="12" r="9" />
+            <path d="M12 7v5l3 2" />
+          </svg>
+        </span>
+      </button>
+      <ul id={panelId} ref={panelRef} className="fdy-timepicker__panel" role="listbox"
+          aria-label={props.ariaLabel} hidden={!open}>
+        {times.map((t: string, i: number): JSX.Element => (
+          // onMouseDown preventDefault keeps focus on the trigger: an <li> isn't focusable, so a
+          // plain mousedown moves focus out of the control, fires onBlur and closes the panel
+          // before the click lands. Same pattern as FdyCombo.
+          <li
+            id={optionId(i)}
+            key={t}
+            className={i === highlighted ? 'fdy-timepicker__opt is-active' : 'fdy-timepicker__opt'}
+            role="option"
+            aria-selected={t === value}
+            onMouseDown={(e: React.MouseEvent): void => e.preventDefault()}
+            onClick={(): void => choose(i)}
+            onMouseMove={(): void => setHighlight(i)}
+          >{t}</li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/adapters/react/index.d.ts

@@ -35,6 +35,7 @@ export { FdyDatepicker, type FdyDatepickerProps, type FdyDatepickerMode } from '
 export { FdyMonthpicker, type FdyMonthpickerProps } from './components/FdyMonthpicker';
 export type { FdyMonth } from '../core/month-grid';
 export { FdyDateRange, type FdyDateRangeProps, type DateRangeValue } from './components/FdyDateRange';
+export { FdyTimepicker, type FdyTimepickerProps } from './components/FdyTimepicker';
 export { FdyAutocomplete, type FdyAutocompleteProps } from './components/FdyAutocomplete';
 export { FdyCascade, type FdyCascadeProps, type CascadeNode } from './components/FdyCascade';
 export { FdyCfl, type FdyCflProps, type FdyCflHandle, type CflColumn, type CflPage } from './components/FdyCfl';

package/adapters/react/index.js

@@ -4,6 +4,7 @@ export { FdyCombo } from './components/FdyCombo.tsx';
 export { FdyDatepicker } from './components/FdyDatepicker.tsx';
 export { FdyMonthpicker } from './components/FdyMonthpicker.tsx';
 export { FdyDateRange } from './components/FdyDateRange.tsx';
+export { FdyTimepicker } from './components/FdyTimepicker.tsx';
 export { FdyAutocomplete } from './components/FdyAutocomplete.tsx';
 export { FdyCascade } from './components/FdyCascade.tsx';
 export { FdyCfl } from './components/FdyCfl.tsx';

package/adapters/vue/components/FdyDateRange.vue

@@ -29,6 +29,19 @@ const props = defineProps<{
   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;
 }>();
 
 const emit = defineEmits<{
@@ -69,6 +82,14 @@ function setEnd(end: string): void {
       :invalid="invalid"
       :describedby="describedby"
       :placeholder="startPlaceholder ?? 'Dari'"
+      :prev-month-label="prevMonthLabel"
+      :next-month-label="nextMonthLabel"
+      :prev-year-label="prevYearLabel"
+      :next-year-label="nextYearLabel"
+      :prev-years-label="prevYearsLabel"
+      :next-years-label="nextYearsLabel"
+      :choose-month-label="chooseMonthLabel"
+      :choose-year-label="chooseYearLabel"
       @update:model-value="setStart"
     />
     <span class="fdy-daterange__sep" aria-hidden="true">–</span>
@@ -82,6 +103,14 @@ function setEnd(end: string): void {
       :invalid="invalid"
       :describedby="describedby"
       :placeholder="endPlaceholder ?? 'Sampai'"
+      :prev-month-label="prevMonthLabel"
+      :next-month-label="nextMonthLabel"
+      :prev-year-label="prevYearLabel"
+      :next-year-label="nextYearLabel"
+      :prev-years-label="prevYearsLabel"
+      :next-years-label="nextYearsLabel"
+      :choose-month-label="chooseMonthLabel"
+      :choose-year-label="chooseYearLabel"
       @update:model-value="setEnd"
     />
   </div>

package/adapters/vue/components/FdyTimepicker.vue

@@ -0,0 +1,276 @@
+<script setup lang="ts">
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, type ComputedRef, type Ref } from 'vue';
+import { usePopover } from '../usePopover';
+
+// A Vue-native binding over freeday's `.fdy-timepicker` classes (src/components/timepicker.css).
+// The kit also ships a framework-agnostic enhancer (freeday-timepicker.js), but letting it own the
+// DOM would fight Vue's rendering and leave no `v-model` — the same reason FdyCombo re-implements
+// the listbox rather than wrapping freeday-select.js. Charts delegate to their renderer; form
+// controls do not.
+//
+// `<input type="time">` is what this replaces, and the reason is not 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. Raised from keamanan-cluster, whose shift form was audited on an iPhone 7 (#094).
+//
+// Deliberate difference from the enhancer: focus stays on the TRIGGER with `aria-activedescendant`
+// on it, which is what FdyCombo, FdyDatepicker and FdyAutocomplete do, rather than moving focus
+// into the panel as the raw path does. Both are valid APG listbox patterns; one family, one model.
+
+const props = defineProps<{
+  /** `HH:MM`, 24-hour. `''`/`null` for empty. A loose `H:MM` is normalised for matching. */
+  modelValue: string | null;
+  /** Minutes between options. Default 30. */
+  step?: number;
+  /** `HH:MM` bounds, inclusive. Default `00:00` to `23:59`. */
+  min?: string;
+  max?: string;
+  id?: string;
+  ariaLabel?: string;
+  ariaLabelledby?: string;
+  /** Shown when there is no value. Default `--:--`, the same as the raw path. */
+  placeholder?: string;
+  disabled?: boolean;
+  /** Locked/view mode: stays focusable and shows its time, but can't be opened or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
+  readonly?: boolean;
+  invalid?: boolean;
+  describedby?: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  change: [value: string];
+}>();
+
+const SHAPE: RegExp = /^\d{1,2}:\d{2}$/;
+
+function toMinutes(time: string): number {
+  const [h, m] = time.split(':');
+  return Number(h) * 60 + Number(m);
+}
+function pad(n: number): string {
+  return n < 10 ? `0${n}` : String(n);
+}
+function fromMinutes(total: number): string {
+  return `${pad(Math.floor(total / 60))}:${pad(total % 60)}`;
+}
+/** `7:0` is not a time; `7:00` is the same time as `07:00`. Anything else answers `''`. */
+function normalise(time: string | null): string {
+  if (time === null || !SHAPE.test(time)) return '';
+  const total: number = toMinutes(time);
+  return total >= 0 && total <= 23 * 60 + 59 ? fromMinutes(total) : '';
+}
+function bound(time: string | undefined, fallback: number): number {
+  return time !== undefined && SHAPE.test(time) ? toMinutes(time) : fallback;
+}
+
+const baseId: string = useId();
+const triggerId: ComputedRef<string> = computed((): string => props.id ?? `${baseId}-trigger`);
+const panelId: string = `${baseId}-panel`;
+function optionId(index: number): string {
+  return `${baseId}-opt-${index}`;
+}
+
+const rootEl: Ref<HTMLDivElement | null> = ref(null);
+const triggerEl: Ref<HTMLButtonElement | null> = ref(null);
+const panelEl: Ref<HTMLUListElement | null> = ref(null);
+const open: Ref<boolean> = ref(false);
+
+// Lift the panel into the top layer so it escapes an ancestor overflow clip. A shift form is a
+// modal, and a time list long enough to scroll is exactly the panel a card would cut off.
+usePopover(panelEl, triggerEl, open);
+const highlighted: Ref<number> = ref(-1);
+
+const times: ComputedRef<ReadonlyArray<string>> = computed((): ReadonlyArray<string> => {
+  const stride: number = Math.max(1, Math.trunc(props.step ?? 30));
+  const from: number = bound(props.min, 0);
+  const to: number = bound(props.max, 23 * 60 + 59);
+  const out: string[] = [];
+  for (let m = from; m <= to; m += stride) out.push(fromMinutes(m));
+  return out;
+});
+
+const value: ComputedRef<string> = computed((): string => normalise(props.modelValue));
+const selectedIndex: ComputedRef<number> = computed((): number => times.value.indexOf(value.value));
+const shown: ComputedRef<string> = computed((): string =>
+  value.value !== '' ? value.value : (props.placeholder ?? '--:--'),
+);
+const isPlaceholder: ComputedRef<boolean> = computed((): boolean => value.value === '');
+const isDisabled: ComputedRef<boolean> = computed((): boolean => props.disabled === true);
+const isReadonly: ComputedRef<boolean> = computed((): boolean => props.readonly === true);
+const isInvalid: ComputedRef<boolean> = computed((): boolean => props.invalid === true);
+const activeDescendant: ComputedRef<string | undefined> = computed((): string | undefined =>
+  open.value && highlighted.value >= 0 ? optionId(highlighted.value) : undefined,
+);
+
+/* The panel is `max-height:15rem` and scrolls: a highlight the reader cannot see is no highlight,
+   and with 48 half-hour options most of the list is out of view. */
+function revealHighlight(): void {
+  void nextTick((): void => {
+    const list: HTMLUListElement | null = panelEl.value;
+    if (list === null || highlighted.value < 0) return;
+    const opt: Element | undefined = list.children[highlighted.value];
+    if (opt instanceof HTMLElement) opt.scrollIntoView({ block: 'nearest' });
+  });
+}
+
+/* Clamped, not cyclic: FdyCombo wraps because its lists are short and a wrap is a quick way back
+   to the top. Here ArrowUp at 00:00 landing on 23:30 reads as a glitch. Matches the raw path. */
+function setHighlight(index: number): void {
+  const last: number = times.value.length - 1;
+  highlighted.value = last < 0 ? -1 : Math.min(last, Math.max(0, index));
+  revealHighlight();
+}
+
+function openList(): void {
+  if (isDisabled.value || isReadonly.value || open.value) return;
+  open.value = true;
+  setHighlight(selectedIndex.value >= 0 ? selectedIndex.value : 0);
+}
+
+function closeList(focusTrigger: boolean): void {
+  if (!open.value) return;
+  open.value = false;
+  highlighted.value = -1;
+  if (focusTrigger) triggerEl.value?.focus();
+}
+
+function toggle(): void {
+  if (open.value) closeList(false);
+  else openList();
+}
+
+function choose(index: number): void {
+  const next: string | undefined = times.value[index];
+  if (next === undefined) return;
+  if (next !== value.value) {
+    emit('update:modelValue', next);
+    emit('change', next);
+  }
+  closeList(true);
+}
+
+function onKeydown(e: KeyboardEvent): void {
+  if (isDisabled.value || isReadonly.value) return;
+  switch (e.key) {
+    case 'ArrowDown':
+      e.preventDefault();
+      if (open.value) setHighlight(highlighted.value + 1);
+      else openList();
+      break;
+    case 'ArrowUp':
+      e.preventDefault();
+      if (open.value) setHighlight(highlighted.value - 1);
+      else openList();
+      break;
+    case 'Home':
+      if (open.value) {
+        e.preventDefault();
+        setHighlight(0);
+      }
+      break;
+    case 'End':
+      if (open.value) {
+        e.preventDefault();
+        setHighlight(times.value.length - 1);
+      }
+      break;
+    case 'Enter':
+    case ' ':
+      e.preventDefault();
+      if (open.value && highlighted.value >= 0) choose(highlighted.value);
+      else openList();
+      break;
+    case 'Escape':
+      if (open.value) {
+        e.preventDefault();
+        closeList(true);
+      }
+      break;
+    case 'Tab':
+      if (open.value) closeList(false);
+      break;
+    default:
+      break;
+  }
+}
+
+function onDocPointerDown(e: MouseEvent): void {
+  const target: EventTarget | null = e.target;
+  if (rootEl.value !== null && target instanceof Node && !rootEl.value.contains(target)) {
+    closeList(false);
+  }
+}
+
+function onFocusout(e: FocusEvent): void {
+  const next: EventTarget | null = e.relatedTarget;
+  if (rootEl.value !== null && !(next instanceof Node && rootEl.value.contains(next))) {
+    closeList(false);
+  }
+}
+
+onMounted((): void => {
+  document.addEventListener('mousedown', onDocPointerDown);
+});
+onBeforeUnmount((): void => {
+  document.removeEventListener('mousedown', onDocPointerDown);
+});
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="fdy-timepicker"
+    :class="{ 'fdy-timepicker--error': isInvalid }"
+    :data-value="value"
+    @keydown="onKeydown"
+    @focusout="onFocusout"
+  >
+    <button
+      :id="triggerId"
+      ref="triggerEl"
+      type="button"
+      class="fdy-timepicker__trigger"
+      :class="{ 'is-open': open }"
+      aria-haspopup="listbox"
+      :aria-controls="panelId"
+      :aria-expanded="open"
+      :aria-activedescendant="activeDescendant"
+      :aria-label="ariaLabel"
+      :aria-labelledby="ariaLabelledby"
+      :aria-invalid="isInvalid ? 'true' : undefined"
+      :aria-readonly="isReadonly ? 'true' : undefined"
+      :aria-describedby="describedby"
+      :disabled="isDisabled"
+      @click="toggle"
+    >
+      <span class="fdy-timepicker__value" :class="{ 'fdy-timepicker__value--placeholder': isPlaceholder }">{{ shown }}</span>
+      <span class="fdy-timepicker__icon">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+             stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="12" cy="12" r="9"></circle>
+          <path d="M12 7v5l3 2"></path>
+        </svg>
+      </span>
+    </button>
+    <ul :id="panelId" ref="panelEl" class="fdy-timepicker__panel" role="listbox"
+        :aria-label="ariaLabel" popover="manual" :hidden="!open">
+      <!-- @mousedown.prevent keeps focus on the trigger: an <li> isn't focusable, so a plain
+           mousedown moves focus out of the control, fires @focusout and closes the panel before
+           the click lands — mouse-select would silently do nothing. Same as FdyCombo. -->
+      <li
+        v-for="(t, i) in times"
+        :id="optionId(i)"
+        :key="t"
+        class="fdy-timepicker__opt"
+        :class="{ 'is-active': i === highlighted }"
+        role="option"
+        :aria-selected="t === value"
+        @mousedown.prevent
+        @click="choose(i)"
+        @mousemove="setHighlight(i)"
+      >{{ t }}</li>
+    </ul>
+  </div>
+</template>

package/adapters/vue/index.d.ts

@@ -44,6 +44,7 @@ export { default as FdyDatepicker } from './components/FdyDatepicker.vue';
 export { default as FdyMonthpicker } from './components/FdyMonthpicker.vue';
 export type { FdyMonth } from '../core/month-grid';
 export { default as FdyDateRange } from './components/FdyDateRange.vue';
+export { default as FdyTimepicker } from './components/FdyTimepicker.vue';
 export type { DateRangeValue } from './components/FdyDateRange.vue';
 export { default as FdyAutocomplete } from './components/FdyAutocomplete.vue';
 export { default as FdyCascade } from './components/FdyCascade.vue';

package/adapters/vue/index.js

@@ -4,6 +4,7 @@ export { default as FdyCombo } from './components/FdyCombo.vue';
 export { default as FdyDatepicker } from './components/FdyDatepicker.vue';
 export { default as FdyMonthpicker } from './components/FdyMonthpicker.vue';
 export { default as FdyDateRange } from './components/FdyDateRange.vue';
+export { default as FdyTimepicker } from './components/FdyTimepicker.vue';
 export { default as FdyAutocomplete } from './components/FdyAutocomplete.vue';
 export { default as FdyCascade } from './components/FdyCascade.vue';
 export { default as FdyCfl } from './components/FdyCfl.vue';

package/dist/freeday-timepicker.js

@@ -59,6 +59,14 @@
     trigger.setAttribute('aria-haspopup', 'listbox');
     trigger.setAttribute('aria-expanded', 'false');
     trigger.setAttribute('aria-label', label);
+    /* The trigger is a <button>, which is NOT a labelable element, so a form's own `<label for>`
+       can never activate it -- but an id is still what `aria-describedby` targets and what a host
+       needs to point at this control. Both were unreadable from the seed until now, so a Blazor
+       host could not name its own error text. Mirrors the datepicker's seed. */
+    var seedId = wrap.getAttribute('data-id');
+    if (seedId) trigger.id = seedId;
+    var describedby = wrap.getAttribute('data-describedby');
+    if (describedby) trigger.setAttribute('aria-describedby', describedby);
     var valueSpan = document.createElement('span');
     valueSpan.className = 'fdy-timepicker__value';
     trigger.appendChild(valueSpan);
@@ -96,6 +104,30 @@
     wrap.appendChild(panel);
 
     var active = -1;
+    /* A host that renders its seed ONCE and then never re-renders it (Blazor: ShouldRender is
+       false after hydration) still has to be able to disable, lock or invalidate the field
+       afterwards. Without this the parameter was there and nothing read it. Mirrors
+       FreedayDatepicker.setState so the two controls of one family answer the same call. */
+    var stateDisabled = wrap.hasAttribute('data-disabled');
+    var stateReadonly = wrap.hasAttribute('data-readonly');
+    var stateInvalid = wrap.hasAttribute('data-invalid');
+
+    function applyState() {
+      trigger.disabled = stateDisabled;
+      if (stateReadonly) trigger.setAttribute('aria-readonly', 'true');
+      else trigger.removeAttribute('aria-readonly');
+      if (stateInvalid) trigger.setAttribute('aria-invalid', 'true');
+      else trigger.removeAttribute('aria-invalid');
+      wrap.classList.toggle('fdy-timepicker--error', stateInvalid);
+      if ((stateDisabled || stateReadonly) && !panel.hidden) close(false);
+    }
+    function setState(next) {
+      if (!next) return;
+      if (next.disabled != null) stateDisabled = !!next.disabled;
+      if (next.readonly != null) stateReadonly = !!next.readonly;
+      if (next.invalid != null) stateInvalid = !!next.invalid;
+      applyState();
+    }
 
     function updateDisplay() {
       if (value) {
@@ -124,6 +156,7 @@
     var _pop = null;
     function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(panel, trigger); return _pop; }
     function open() {
+      if (stateDisabled || stateReadonly) return;
       if (!panel.hidden) return;
       var p = popCtl(); if (p) p.show(); else panel.hidden = false;
       trigger.setAttribute('aria-expanded', 'true');
@@ -174,10 +207,12 @@
     });
 
     updateDisplay();
+    applyState();
 
     var api = {
       wrap: wrap,
       getValue: function () { return value; },
+      setState: setState,
       clear: function () { value = ''; for (var i = 0; i < opts.length; i++) opts[i].setAttribute('aria-selected', 'false'); updateDisplay(); }
     };
     wrap._fdyTp = api;
@@ -197,5 +232,13 @@
     initAll();
   }
 
-  window.FreedayTimepicker = { init: initTime, initAll: initAll };
+  window.FreedayTimepicker = {
+    init: initTime,
+    initAll: initAll,
+    /* See api.setState above: the one call a render-once host needs. */
+    setState: function (root, state) {
+      var api = root && root._fdyTp ? root._fdyTp : null;
+      if (api && api.setState) api.setState(state);
+    }
+  };
 })();

package/dist/freeday.js

@@ -4945,6 +4945,14 @@
     trigger.setAttribute('aria-haspopup', 'listbox');
     trigger.setAttribute('aria-expanded', 'false');
     trigger.setAttribute('aria-label', label);
+    /* The trigger is a <button>, which is NOT a labelable element, so a form's own `<label for>`
+       can never activate it -- but an id is still what `aria-describedby` targets and what a host
+       needs to point at this control. Both were unreadable from the seed until now, so a Blazor
+       host could not name its own error text. Mirrors the datepicker's seed. */
+    var seedId = wrap.getAttribute('data-id');
+    if (seedId) trigger.id = seedId;
+    var describedby = wrap.getAttribute('data-describedby');
+    if (describedby) trigger.setAttribute('aria-describedby', describedby);
     var valueSpan = document.createElement('span');
     valueSpan.className = 'fdy-timepicker__value';
     trigger.appendChild(valueSpan);
@@ -4982,6 +4990,30 @@
     wrap.appendChild(panel);
 
     var active = -1;
+    /* A host that renders its seed ONCE and then never re-renders it (Blazor: ShouldRender is
+       false after hydration) still has to be able to disable, lock or invalidate the field
+       afterwards. Without this the parameter was there and nothing read it. Mirrors
+       FreedayDatepicker.setState so the two controls of one family answer the same call. */
+    var stateDisabled = wrap.hasAttribute('data-disabled');
+    var stateReadonly = wrap.hasAttribute('data-readonly');
+    var stateInvalid = wrap.hasAttribute('data-invalid');
+
+    function applyState() {
+      trigger.disabled = stateDisabled;
+      if (stateReadonly) trigger.setAttribute('aria-readonly', 'true');
+      else trigger.removeAttribute('aria-readonly');
+      if (stateInvalid) trigger.setAttribute('aria-invalid', 'true');
+      else trigger.removeAttribute('aria-invalid');
+      wrap.classList.toggle('fdy-timepicker--error', stateInvalid);
+      if ((stateDisabled || stateReadonly) && !panel.hidden) close(false);
+    }
+    function setState(next) {
+      if (!next) return;
+      if (next.disabled != null) stateDisabled = !!next.disabled;
+      if (next.readonly != null) stateReadonly = !!next.readonly;
+      if (next.invalid != null) stateInvalid = !!next.invalid;
+      applyState();
+    }
 
     function updateDisplay() {
       if (value) {
@@ -5010,6 +5042,7 @@
     var _pop = null;
     function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(panel, trigger); return _pop; }
     function open() {
+      if (stateDisabled || stateReadonly) return;
       if (!panel.hidden) return;
       var p = popCtl(); if (p) p.show(); else panel.hidden = false;
       trigger.setAttribute('aria-expanded', 'true');
@@ -5060,10 +5093,12 @@
     });
 
     updateDisplay();
+    applyState();
 
     var api = {
       wrap: wrap,
       getValue: function () { return value; },
+      setState: setState,
       clear: function () { value = ''; for (var i = 0; i < opts.length; i++) opts[i].setAttribute('aria-selected', 'false'); updateDisplay(); }
     };
     wrap._fdyTp = api;
@@ -5083,7 +5118,15 @@
     initAll();
   }
 
-  window.FreedayTimepicker = { init: initTime, initAll: initAll };
+  window.FreedayTimepicker = {
+    init: initTime,
+    initAll: initAll,
+    /* See api.setState above: the one call a render-once host needs. */
+    setState: function (root, state) {
+      var api = root && root._fdyTp ? root._fdyTp : null;
+      if (api && api.setState) api.setState(state);
+    }
+  };
 })();
 
 /* Freeday, toast API (optional, zero-dependency).

package/docs/agent-onboarding.md

@@ -33,9 +33,9 @@ and the code looks correct and fails later.**
 | Blazor (net8.0) | `@using Freeday.Blazor` (RCL) | `@bind-Value` |
 | Static HTML, Svelte, server-rendered templates… | no wrapper: raw markup + the enhancer script | `fdy-*` DOM events |
 
-The twelve: **FdyCombo · FdyDatepicker · FdyMonthpicker · FdyDateRange · FdyAutocomplete ·
-FdyCascade · FdyCfl · FdyChart · FdyTable · FdyModal · FdyDrawer · FdyAppShell**. In
-Vue/React/Blazor, **never hand-write the raw markup + enhancer for these twelve.** The raw path *appears* to work: the enhancer auto-initialises
+The thirteen: **FdyCombo · FdyDatepicker · FdyMonthpicker · FdyDateRange · FdyTimepicker ·
+FdyAutocomplete · FdyCascade · FdyCfl · FdyChart · FdyTable · FdyModal · FdyDrawer · FdyAppShell**. In
+Vue/React/Blazor, **never hand-write the raw markup + enhancer for these thirteen.** The raw path *appears* to work: the enhancer auto-initialises
 once on `DOMContentLoaded` and the first render is correct. Then it fails quietly: DOM your framework
 renders later is never hydrated, and the widget's state lives in the DOM instead of in your
 framework's state.

package/docs/getting-started.md

@@ -21,8 +21,8 @@ Freeday = **CSS** (semantic tokens + `fdy-*` classes) + **zero-dependency JS enh
    the enhancer owns the widget's DOM. You **listen for `fdy-*` events** (all bubbling
    `CustomEvent`s, data in `event.detail`) → store them in your framework state. Event/API contract
    table: [`integrations.md` §Event & API contract](integrations.md).
-   **On Vue, React or Blazor this is not the path to take for twelve of the components.** `FdyCombo`,
-   `FdyDatepicker`, `FdyMonthpicker`, `FdyDateRange`, `FdyAutocomplete`, `FdyCascade`, `FdyCfl`,
+   **On Vue, React or Blazor this is not the path to take for thirteen of the components.** `FdyCombo`,
+   `FdyDatepicker`, `FdyMonthpicker`, `FdyDateRange`, `FdyTimepicker`, `FdyAutocomplete`, `FdyCascade`, `FdyCfl`,
    `FdyChart`, `FdyTable`, `FdyModal`, `FdyDrawer`, `FdyAppShell` ship typed wrappers that own the state properly (Vue and
    React re-implement the interaction natively; Blazor wraps the enhancer over interop). Use them;
    the raw path is for the components without a wrapper, and for stacks without an adapter.
@@ -198,7 +198,7 @@ live docs also have a copy button per component.
 ```bash
 npm i @cahyo-dimas/freeday
 ```
-Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.10.0"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.11.0"` (public npm package). `dist/` is
 committed and published → no build step; `npm ci` runs without auth.
 
 ### 2. Import the CSS + enhancers **once** in your entry (`src/main.ts`)
@@ -451,9 +451,9 @@ kit's CSS/enhancers), then bind:
 <FdyChart Type="donut" Values="_byCity" Labels="_cityLabels" AriaLabel="Revenue by city" />
 <FdyDrawer @bind-Open="_drawerOpen" Title="Detail" Side="right">…</FdyDrawer>
 ```
-Twelve components at parity with the Vue/React adapters: **`FdyModal`** · **`FdyDrawer`** (`@bind-Open`,
+Thirteen components at parity with the Vue/React adapters: **`FdyModal`** · **`FdyDrawer`** (`@bind-Open`,
 `Title`, `Size`/`Side`, `Dismissible`) · **`FdyCombo<TValue>`** · **`FdyDatepicker`** ·
-**`FdyMonthpicker`** (`@bind-Value` as `yyyy-MM`) · **`FdyAutocomplete`** · **`FdyCascade`** · **`FdyDateRange`** (`@bind-From`/`@bind-To`) ·
+**`FdyMonthpicker`** (`@bind-Value` as `yyyy-MM`) · **`FdyTimepicker`** (`@bind-Value` as `HH:MM`) · **`FdyAutocomplete`** · **`FdyCascade`** · **`FdyDateRange`** (`@bind-From`/`@bind-To`) ·
 **`FdyCfl<TRow>`** (async `LoadPage`) · **`FdyChart`** · **`FdyTable<TRow>`** (client sort/filter/page,
 or controlled `Sort`/`Filters`/`Page` for a server-paged table; `RowActivatable`, `RowDetail`) ·
 **`FdyAppShell`** (`@bind-NavOpen`). Each

package/docs/integrations.md

@@ -154,7 +154,7 @@ function Panel(): JSX.Element {
 ```
 > **Controlled alternative (parity with Vue's `v-model`):** `@cahyo-dimas/freeday/react` also exports
 > the typed components `FdyCombo` / `FdyDatepicker` / `FdyMonthpicker` / `FdyDateRange` /
-> `FdyAutocomplete` / `FdyCascade` / `FdyCfl` / `FdyChart` / `FdyTable` / `FdyModal` / `FdyDrawer` /
+> `FdyTimepicker` / `FdyAutocomplete` / `FdyCascade` / `FdyCfl` / `FdyChart` / `FdyTable` / `FdyModal` / `FdyDrawer` /
 > `FdyAppShell`, with plain
 > `value`/`onChange` (props in, events out), no `data-fdy-*` + manual event listener:
 > ```tsx
@@ -200,7 +200,7 @@ document.addEventListener('fdy-form-invalid', (e) =>
 
 > **Native components (parity with Vue's `v-model` / React's `value`/`onChange`):** the
 > **`Freeday.Blazor`** RCL (net8.0, `adapters/blazor/`) ships the typed components `FdyCombo<TValue>` /
-> `FdyDatepicker` / `FdyMonthpicker` / `FdyDateRange` / `FdyAutocomplete` / `FdyCascade` /
+> `FdyDatepicker` / `FdyMonthpicker` / `FdyDateRange` / `FdyTimepicker` / `FdyAutocomplete` / `FdyCascade` /
 > `FdyCfl<TRow>` / `FdyChart` / `FdyTable<TRow>` / `FdyModal` / `FdyDrawer` / `FdyAppShell` with `@bind`, no `@ref` / manual `initAll` / `[JSInvokable]`:
 > ```razor
 > @using Freeday.Blazor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "3.10.0",
+  "version": "3.11.0",
   "description": "Freeday: token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",
@@ -96,7 +96,7 @@
   "scripts": {
     "build": "node tokens/build.mjs",
     "test": "node --test",
-    "test:browser": "node --test --test-concurrency=3 browser/color-mix.mjs browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/field-width.mjs browser/cfl-multi.mjs browser/cfl-dialog-only.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs browser/app-shell.mjs browser/bottom-nav.mjs browser/picker-states.mjs browser/tabs-strip.mjs browser/tabs-vertical.mjs browser/menu-align.mjs browser/cfl-narrow.mjs browser/form-reveal.mjs browser/confirm-search-copy.mjs browser/daterange-settled.mjs browser/display-parts.mjs browser/table-empty.mjs browser/table-footer-text.mjs browser/month-mode.mjs browser/monthpicker.mjs browser/page-columns.mjs browser/table-hover.mjs browser/typed-popover.mjs browser/filter-parity.mjs browser/filter-wrap.mjs browser/filter-stack.mjs browser/harness-contract.mjs",
+    "test:browser": "node --test --test-concurrency=3 browser/color-mix.mjs browser/vanilla.mjs browser/adapter.mjs browser/layout.mjs browser/theme.mjs browser/state.mjs browser/root-init.mjs browser/upload-states.mjs browser/number.mjs browser/card-stretch.mjs browser/text-override.mjs browser/control-heights.mjs browser/field-width.mjs browser/cfl-multi.mjs browser/cfl-dialog-only.mjs browser/crowding.mjs browser/over-dialog.mjs browser/chart-scale.mjs browser/overlay-stack.mjs browser/chart-a11y.mjs browser/app-shell.mjs browser/bottom-nav.mjs browser/picker-states.mjs browser/tabs-strip.mjs browser/tabs-vertical.mjs browser/menu-align.mjs browser/cfl-narrow.mjs browser/form-reveal.mjs browser/confirm-search-copy.mjs browser/daterange-settled.mjs browser/display-parts.mjs browser/table-empty.mjs browser/table-footer-text.mjs browser/month-mode.mjs browser/monthpicker.mjs browser/page-columns.mjs browser/table-hover.mjs browser/typed-popover.mjs browser/filter-parity.mjs browser/filter-wrap.mjs browser/filter-stack.mjs browser/timepicker.mjs browser/harness-contract.mjs",
     "prepack": "node tokens/build.mjs",
     "version": "node tokens/build.mjs && git add dist",
     "typecheck:react": "tsc -p adapters/react/tsconfig.json --noEmit",