@cahyo-dimas/freeday 3.11.0 → 3.12.1

package/CHANGELOG.md

@@ -9,6 +9,87 @@ 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.12.1] - 2026-10-27
+
+**Modal dan drawer kembali beranimasi di bawah Safari 17.4, termasuk di iPhone 7 pemiliknya.**
+
+### Fixed
+- **Empat shorthand `transition` dipecah jadi longhand** (`#097`), di `modal.css` dan `drawer.css`.
+  Shorthand yang membawa satu keyword yang tak dikenal mesin **tidak sah saat parse**, jadi SELURUH
+  deklarasinya dibuang -- dan `allow-discrete` tak dikenal di bawah Safari 17.4, yang ada di bawah
+  lantai dukungan kit. Akibatnya modal dan drawer buka-tutup tanpa animasi apa pun. Dipecah begini,
+  yang hilang di bawah lantai hanya `transition-behavior`, dan paruh opacity/transform-nya bertahan.
+  `overlay` dan `display` tetap terdaftar di `transition-property`, tempat nama yang tak cocok tetap
+  sah secara sintaks dan sekadar tak pernah cocok, jadi tak ada lagi yang ikut jatuh. Keluarnya
+  tetap seketika di sana sebab `display` memang tak dapat ditransisikan di bawah lantai -- sama
+  seperti sebelumnya, jadi pemecahan ini tidak mengambil apa pun.
+
+  Ekuivalensinya di atas lantai **diukur, bukan dinalar**: `transition-property`,
+  `transition-timing-function` dan `transition-behavior` identik byte-per-byte sebelum dan sesudah,
+  dan satu-satunya beda adalah satu nilai `transition-duration` yang terserialisasi sebagai satu
+  nilai alih-alih tiga. Bahwa satu nilai itu tetap berlaku untuk SETIAP properti juga diukur: 280ms
+  masing-masing, dan easing tetap per-indeks.
+
+  Harganya empat deklarasi yang harus tetap sejalan, dan itu kini dijaga uji: `baseline.test.mjs`
+  menolak `allow-discrete` di dalam shorthand `transition` mana pun, dan menolak
+  `transition-behavior` yang berdiri tanpa ketiga longhand lainnya. Regresi yang paling mungkin
+  adalah seseorang merapikan empat longhand kembali menjadi satu shorthand, yang terbaca lebih
+  bersih dan diam-diam mengambil animasinya dari setiap peramban di bawah Safari 17.4.
+
+## [3.12.0] - 2026-10-27
+
+**Sebuah form kini dapat menuntut kontrol kit terisi.** `data-fdy-validate` mewirekan Constraint
+Validation **native**: `isCandidate` menuntut `willValidate` dan menolak `type === 'button'`, dan
+pemicu kontrol kit memang `<button>`. Jadi `form.elements` tak pernah menawarkannya, `required` di
+atasnya tak berarti apa pun, dan form tak bisa menuntut combo, datepicker, monthpicker, timepicker
+atau cascade diisi.
+
+Ini yang menahan audit 3.11.0 di 3 dari 7 pemilih. Empat `<input type="time">` di formulir shift
+keamanan-cluster tetap native **hanya** karena menukarnya ke `FdyTimepicker` akan memperbaiki
+penampilannya dan diam-diam membuang penegakan wajib-isinya.
+
+Koreksi atas catatan rilis sebelumnya, yang layak dibawa: ia menulis "tiga belas wrapper bertipe
+merender `<button>`". Salah. Hanya **lima** yang berpemicu tombol; `FdyAutocomplete` dan `FdyCfl`
+merender `<input>` asli, dan tujuh sisanya bukan kontrol bernilai. Angka yang dibesarkan membuat
+perbaikan ini terdengar jauh lebih mahal daripada yang ternyata.
+
+### Added
+- **`data-fdy-required` pada akar kontrol** (`#096`), dan prop `required` / `Required` di
+  `FdyCombo`, `FdyDatepicker`, `FdyMonthpicker`, `FdyTimepicker` dan `FdyCascade` di ketiga stack.
+  Submit ditolak, pesannya dilukis di slot `.fdy-field` yang sudah ada, dan fokusnya ke pemicu.
+  Aturannya **tidak menyebut satu pun nama komponen**: nilainya dibaca dari `data-value`, elemen
+  yang menerima `aria-invalid` dan fokus ditemukan lewat `aria-haspopup` yang sudah dipasang setiap
+  pemicu, dan re-validasinya memakai `MutationObserver` pada atribut itu — supaya enhancer tak
+  perlu mengenal lima nama event (`fdy-change`, `fdy-datepicker-change`, `fdy-time-select`,
+  `fdy-cascade-change`).
+- **Kontrol yang ditolak diurut menurut urutan DOM** (`#096`). Mengumpulkan kontrol native lebih
+  dulu lalu akar kit akan memfokuskan field KEDUA sementara yang pertama juga merah, dan pembaca
+  yang dikirim melewati field merah pertamanya belajar hal yang salah.
+
+### Changed
+- **`data-value` di akar kontrol kini cermin hidup, bukan seed.** Di jalur mentah, datepicker,
+  timepicker dan cascade hanya MEMBACANYA saat init; `freeday-select.js` sudah menulisnya kembali
+  sejak lama, jadi ini membuat keluarganya sepakat alih-alih memperkenalkan atribut kedua. Aditif:
+  tak ada yang membaca atribut itu sesudah init, sebab sebelum ini nilainya basi. Cerminnya
+  dipasang di `updateDisplay()`, satu titik sempit yang dilalui pick, clear, pilih-bulan dan
+  setRange, bukan di tiap tempat event dikirim.
+
+### Fixed
+- **`FdyDatepicker`, `FdyMonthpicker` dan `FdyCascade` tak pernah mencerminkan nilainya ke akar**
+  di adapter Vue dan React (`#096`), padahal `FdyCombo` dan `FdyTimepicker` melakukannya. Tanpa itu
+  aturan di atas mustahil, dan atributnya juga pegangan yang dapat dibaca uji atau aturan CSS
+  keadaan-kosong.
+
+### Catatan
+- `FdyAutocomplete` dan `FdyCfl` **di luar** aturan ini: keduanya merender `<input>` asli, jadi
+  `required` native yang cocok. Belum ada prop yang mengeksposnya, dan atribut tak dikenal jatuh ke
+  AKAR wrapper bukan ke input di dalamnya, jadi hari ini keduanya tak bisa dijadikan wajib di stack
+  mana pun. Dicatat terbuka di `NEXT-UP.md` alih-alih ditutup separuh: mengalirkannya lewat jalur
+  kit akan memberi satu field dua sumber kebenaran.
+- Penimpaan pesan per-kontrol (`data-fdy-msg-required` di akar) bekerja di mana atribut mencapai
+  akar: jalur mentah, dan Vue, yang meneruskan atribut tak dikenal. React dan Blazor tidak, jadi
+  jalur yang terbaca sama di semua stack adalah `data-fdy-text-required` di elemen `<form>`.
+
 ## [3.11.0] - 2026-10-26
 
 **Audit kontrol native di seluruh layar sebuah aplikasi konsumen, bukan di satu layar yang

package/COMPONENTS.md

@@ -709,6 +709,7 @@ while each line referenced directly would be read even when hidden. Zero JS; wor
 | `ariaLabelledby?` | `string` | Id of the element that labels the combobox. |
 | `placeholder?` | `string` | Shown when no option matches the current value. |
 | `disabled?` | `boolean` | Greyed and out of the tab order, the native `disabled` semantics. |
+| `required?` | `boolean` | Lets a [`data-fdy-validate`](#form-validation--data-fdy-validate) form demand this control be filled. Renders `data-fdy-required` on the root. Needed because the trigger is a `<button>`, whose `willValidate` is false, so a plain `required` on it has never meant anything. Blazor: `Required`. |
 | `readonly?` | `boolean` | Locked/view mode: keeps focus and tab order and shows its value, but cannot be opened or changed. Unlike `disabled` it is not greyed. |
 | `invalid?` | `boolean` | Sets `aria-invalid`; pair it with `describedby` pointing at the error text. |
 | `describedby?` | `string` | Id of the help or error text (`aria-describedby`). |
@@ -786,6 +787,7 @@ Editable combobox that filters as you type. Needs `freeday-autocomplete.js`.
 | `placeholder?` | `string` | |
 | `id?` · `ariaLabelledby?` · `describedby?` | `string` | Trigger id; the element that labels it; the help/error text it points at. |
 | `disabled?` · `readonly?` · `invalid?` | `boolean` | As on `<FdyCombo>`. |
+| `required?` | `boolean` | Lets a [`data-fdy-validate`](#form-validation--data-fdy-validate) form demand this control be filled. Renders `data-fdy-required` on the root. Needed because the trigger is a `<button>`, whose `willValidate` is false, so a plain `required` on it has never meant anything. Blazor: `Required`. |
 
 Raw path: `data-disabled` / `data-readonly` / `data-invalid`, `data-id`, `data-describedby`, and
 `FreedayCascade.setState(root, { disabled, readonly, invalid })` for a host that rendered once.
@@ -962,6 +964,7 @@ a new class.
 | `placeholder?` | `string` | |
 | `id?` · `ariaLabelledby?` · `describedby?` | `string` | Trigger id; the element that labels it; the help/error text it points at. |
 | `disabled?` · `readonly?` · `invalid?` | `boolean` | `readonly` keeps focus and tab order and shows its date, but it cannot be opened, cleared or changed. |
+| `required?` | `boolean` | Lets a [`data-fdy-validate`](#form-validation--data-fdy-validate) form demand this control be filled. Renders `data-fdy-required` on the root. Needed because the trigger is a `<button>`, whose `willValidate` is false, so a plain `required` on it has never meant anything. Blazor: `Required`. |
 | `clearable?` | `boolean` | Show a × in the trigger once a date is set, so an optional date can be unset. Sends `''`. Off by default. |
 | `clearLabel?` | `string` | Accessible name for that ×. Default `Clear date`. |
 | `prevMonthLabel?` · `nextMonthLabel?` | `string` | The month arrows. Defaults `Previous month` / `Next month`. |
@@ -996,6 +999,7 @@ page's `<html lang>`), `clearable` and `clearLabel` (this path builds no clear b
 | `placeholder?` | `string` | Shown while nothing is picked. Default `Select month`. |
 | `id?` · `ariaLabelledby?` · `describedby?` | `string` | Trigger id; the element that labels it; the help/error text it points at. |
 | `disabled?` · `readonly?` · `invalid?` | `boolean` | `readonly` keeps focus and tab order and shows its month, but it cannot be opened, cleared or changed. |
+| `required?` | `boolean` | Lets a [`data-fdy-validate`](#form-validation--data-fdy-validate) form demand this control be filled. Renders `data-fdy-required` on the root. Needed because the trigger is a `<button>`, whose `willValidate` is false, so a plain `required` on it has never meant anything. Blazor: `Required`. |
 | `clearable?` | `boolean` | Show a × in the trigger once a month is set, so an optional month can be unset. Sends `''`. Off by default. |
 | `clearLabel?` | `string` | Accessible name for that ×. Default `Clear month`. |
 | `prevYearLabel?` · `nextYearLabel?` | `string` | The arrows beside the month grid, which step a year. Defaults `Previous year` / `Next year`. |
@@ -1143,6 +1147,7 @@ browser at the same width therefore disagree about a screen that is otherwise id
 | `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. |
+| `required?` | `boolean` | Lets a [`data-fdy-validate`](#form-validation--data-fdy-validate) form demand this control be filled. Renders `data-fdy-required` on the root. Needed because the trigger is a `<button>`, whose `willValidate` is false, so a plain `required` on it has never meant anything. Blazor: `Required`. |
 
 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,
@@ -1223,6 +1228,26 @@ blur/input. Needs `freeday-form.js`.
 - Per-control messages: `data-fdy-msg-required`, `-type`, `-minlength`, `-min`, `-mismatch`, …
 - Cross-field: `data-fdy-match="#otherFieldId"`
 - Emits `fdy-form-valid` / `fdy-form-invalid`.
+- **A kit control can be required too** — `data-fdy-required` on its root. Combo, datepicker,
+  monthpicker, timepicker and cascade build a `<button>` trigger, and a button's `willValidate` is
+  false, so `form.elements` never offered one and `required` on it meant nothing. The enhancer now
+  collects these roots alongside the native controls: empty `data-value` refuses the submit, the
+  message lands in the same `.fdy-field` slot, and the focus goes to the trigger. It names no
+  component — the value is read from `data-value` and the trigger is found by `aria-haspopup`. In
+  the typed stacks pass `required` / `Required` instead of writing the attribute.
+  **`FdyAutocomplete` and `FdyCfl` are outside this rule**: they render a real `<input>`, so the
+  native `required` is the mechanism that fits them — but no prop exposes it yet, and an unknown
+  attribute falls through to a wrapper's ROOT rather than to the input inside it, so today an app
+  cannot require either one. Tracked in `NEXT-UP.md`; the rule above deliberately does not cover
+  them, because painting a native input through the kit path would give it two sources of truth.
+  Re-validation watches the attribute with a `MutationObserver`, so no control has to announce
+  itself. The message override is per-control (`data-fdy-msg-required` on the root) wherever
+  attributes reach the root — the raw path, and Vue, where an unknown attribute falls through. In
+  React and Blazor they do not, so use the form-level `data-fdy-text-required`, which reads the
+  same in every stack.
+- **`data-value` on a control's root is the live value**, not just the seed it used to be on the
+  datepicker, timepicker and cascade (the combo always kept it current). That is what makes the
+  rule above possible, and it is also the handle a test or a CSS empty-state rule can read.
 - **A refused field is revealed before it is focused**, because `focus()` on a control that is not
   rendered does nothing. A closed `<details>` around it (accordion, tree, nav group) is opened, an
   unselected tab is selected by clicking it, and a `.fdy-step-panel` left behind is returned to by

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.11.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.11.0)
+[![Release](https://img.shields.io/badge/release-v3.12.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.12.1)
 
 UI KIT yang token-driven & framework-agnostic. Satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/README.md

@@ -5,7 +5,7 @@
 > **More free days for devs. The UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v3.11.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.11.0)
+[![Release](https://img.shields.io/badge/release-v3.12.1-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.12.1)
 
 A token-driven, framework-agnostic UI kit. One source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/adapters/blazor/FdyCascade.razor

@@ -16,7 +16,8 @@
      data-describedby="@Describedby"
      data-disabled="@(Disabled ? "true" : null)"
      data-readonly="@(Readonly ? "true" : null)"
-     data-invalid="@(Invalid ? "true" : null)">
+     data-invalid="@(Invalid ? "true" : null)"
+     data-fdy-required="@(Required ? "" : null)">
     <ul>
         @foreach (FdyCascadeNode node in Nodes)
         {

package/adapters/blazor/FdyCascade.razor.cs

@@ -46,6 +46,13 @@ public partial class FdyCascade
     /// <summary>Marks the field invalid (<c>aria-invalid</c> + the error styling).</summary>
     [Parameter] public bool Invalid { get; set; }
 
+    /// <summary>Let a <c>data-fdy-validate</c> form demand this control be filled. Renders
+    /// <c>data-fdy-required</c> on the root, and <c>freeday-form.js</c> refuses the submit, paints
+    /// the message in the field and focuses the trigger. Needed because the trigger is a
+    /// <c>&lt;button&gt;</c>: <c>willValidate</c> is false, so a plain <c>required</c> on it has
+    /// never meant anything. Override the message with <c>data-fdy-msg-required</c> on the root.</summary>
+    [Parameter] public bool Required { get; set; }
+
     protected override bool ShouldRender() => !Hydrated;
 
     /* Pushed, not re-rendered: the seed's <ul> is consumed and removed by the enhancer, so this

package/adapters/blazor/FdyCombo.razor

@@ -6,7 +6,8 @@
    markup the freeday-select.js enhancer expects; the enhancer owns the open/keyboard/focus
    behaviour and emits fdy-change, which flows back to @bind-Value. An externally-changed Value
    is pushed onto the enhancer silently (no event echo). *@
-<div @ref="Root" class="@RootClass" data-fdy-combo data-value="@SelectedKey">
+<div @ref="Root" class="@RootClass" data-fdy-combo data-value="@SelectedKey"
+     data-fdy-required="@(Required ? "" : null)">
     <button id="@ButtonId" type="button" class="fdy-combo__button" role="combobox"
             aria-haspopup="listbox" aria-expanded="false"
             aria-labelledby="@AriaLabelledby"

package/adapters/blazor/FdyCombo.razor.cs

@@ -29,6 +29,13 @@ public partial class FdyCombo<TValue>
 
     [Parameter] public bool Invalid { get; set; }
 
+    /// <summary>Let a <c>data-fdy-validate</c> form demand this control be filled. Renders
+    /// <c>data-fdy-required</c> on the root, and <c>freeday-form.js</c> refuses the submit, paints
+    /// the message in the field and focuses the trigger. Needed because the trigger is a
+    /// <c>&lt;button&gt;</c>: <c>willValidate</c> is false, so a plain <c>required</c> on it has
+    /// never meant anything. Override the message with <c>data-fdy-msg-required</c> on the root.</summary>
+    [Parameter] public bool Required { get; set; }
+
     /// <summary>Id of the help or error text the combobox describes itself with. Vue and React
     /// have always had this one; Blazor was the odd stack out.</summary>
     [Parameter] public string? Describedby { get; set; }

package/adapters/blazor/FdyDatepicker.razor

@@ -18,6 +18,7 @@
      data-disabled="@(Disabled ? "true" : null)"
      data-readonly="@(Readonly ? "true" : null)"
      data-invalid="@(Invalid ? "true" : null)"
+     data-fdy-required="@(Required ? "" : null)"
      data-fdy-text-prev-month="@PrevMonthLabel"
      data-fdy-text-next-month="@NextMonthLabel"
      data-fdy-text-prev-year="@PrevYearLabel"

package/adapters/blazor/FdyDatepicker.razor.cs

@@ -54,6 +54,13 @@ public partial class FdyDatepicker
     /// <summary>Marks the field invalid (<c>aria-invalid</c> + the error styling).</summary>
     [Parameter] public bool Invalid { get; set; }
 
+    /// <summary>Let a <c>data-fdy-validate</c> form demand this control be filled. Renders
+    /// <c>data-fdy-required</c> on the root, and <c>freeday-form.js</c> refuses the submit, paints
+    /// the message in the field and focuses the trigger. Needed because the trigger is a
+    /// <c>&lt;button&gt;</c>: <c>willValidate</c> is false, so a plain <c>required</c> on it has
+    /// never meant anything. Override the message with <c>data-fdy-msg-required</c> on the root.</summary>
+    [Parameter] public bool Required { get; set; }
+
     /* The calendar's own navigation labels. Month and weekday NAMES follow the page's `lang`
        through Intl and need nothing here; these are the buttons around them, which until 2.1.1
        were literals inside the enhancer that no host could reach. Leave one null and the

package/adapters/blazor/FdyMonthpicker.razor

@@ -21,6 +21,7 @@
      data-disabled="@(Disabled ? "true" : null)"
      data-readonly="@(Readonly ? "true" : null)"
      data-invalid="@(Invalid ? "true" : null)"
+     data-fdy-required="@(Required ? "" : null)"
      data-fdy-text-prev-year="@PrevYearLabel"
      data-fdy-text-next-year="@NextYearLabel"
      data-fdy-text-prev-years="@PrevYearsLabel"

package/adapters/blazor/FdyMonthpicker.razor.cs

@@ -57,6 +57,13 @@ public partial class FdyMonthpicker
     /// <summary>Marks the field invalid (<c>aria-invalid</c> + the error styling).</summary>
     [Parameter] public bool Invalid { get; set; }
 
+    /// <summary>Let a <c>data-fdy-validate</c> form demand this control be filled. Renders
+    /// <c>data-fdy-required</c> on the root, and <c>freeday-form.js</c> refuses the submit, paints
+    /// the message in the field and focuses the trigger. Needed because the trigger is a
+    /// <c>&lt;button&gt;</c>: <c>willValidate</c> is false, so a plain <c>required</c> on it has
+    /// never meant anything. Override the message with <c>data-fdy-msg-required</c> on the root.</summary>
+    [Parameter] public bool Required { get; set; }
+
     /* The calendar's navigation labels, and only the ones this picker shows. Month NAMES follow the
        page's `lang` through Intl and need nothing here. The day grid's own arrows are absent along
        with the day grid, so there is no PrevMonthLabel to pass: the arrows beside a month grid step

package/adapters/blazor/FdyTimepicker.razor

@@ -20,4 +20,5 @@
      data-describedby="@Describedby"
      data-disabled="@(Disabled ? "true" : null)"
      data-readonly="@(Readonly ? "true" : null)"
-     data-invalid="@(Invalid ? "true" : null)"></div>
+     data-invalid="@(Invalid ? "true" : null)"
+     data-fdy-required="@(Required ? "" : null)"></div>

package/adapters/blazor/FdyTimepicker.razor.cs

@@ -48,6 +48,13 @@ public partial class FdyTimepicker
     /// <summary>Marks the field invalid (<c>aria-invalid</c> + the error styling).</summary>
     [Parameter] public bool Invalid { get; set; }
 
+    /// <summary>Let a <c>data-fdy-validate</c> form demand this control be filled. Renders
+    /// <c>data-fdy-required</c> on the root, and <c>freeday-form.js</c> refuses the submit, paints
+    /// the message in the field and focuses the trigger. Needed because the trigger is a
+    /// <c>&lt;button&gt;</c>: <c>willValidate</c> is false, so a plain <c>required</c> on it has
+    /// never meant anything. Override the message with <c>data-fdy-msg-required</c> on the root.</summary>
+    [Parameter] public bool Required { 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);
 

package/adapters/react/components/FdyCascade.tsx

@@ -33,6 +33,14 @@ export interface FdyCascadeProps {
   disabled?: boolean;
   /** Locked/view mode: stays focusable and shows its value, but can't be opened or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
   readonly?: boolean;
+  /**
+   * Let a `data-fdy-validate` form demand this control be filled. It renders `data-fdy-required`
+   * on the root, and `freeday-form.js` refuses the submit, paints the message in the field and
+   * focuses the trigger. Needed because the trigger is a `<button>`: `willValidate` is false, so
+   * a plain `required` on it has never meant anything (#096). Override the message per control
+   * with `data-fdy-msg-required` on the root.
+   */
+  required?: boolean;
   invalid?: boolean;
   describedby?: string;
 }
@@ -168,7 +176,8 @@ export function FdyCascade(props: FdyCascadeProps): JSX.Element {
   }, [active, open, stack]);
 
   return (
-    <div ref={rootRef} className={isInvalid ? 'fdy-cascade fdy-cascade--error' : 'fdy-cascade'}>
+    <div ref={rootRef} className={isInvalid ? 'fdy-cascade fdy-cascade--error' : 'fdy-cascade'}
+         data-value={props.value} data-fdy-required={props.required === true ? '' : undefined}>
       <button
         ref={triggerRef}
         id={triggerId}

package/adapters/react/components/FdyCombo.tsx

@@ -17,6 +17,14 @@ export interface FdyComboProps<T extends string> {
   disabled?: boolean;
   /** Locked/view mode: stays focusable and shows its value, but can't be opened or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
   readonly?: boolean;
+  /**
+   * Let a `data-fdy-validate` form demand this control be filled. It renders `data-fdy-required`
+   * on the root, and `freeday-form.js` refuses the submit, paints the message in the field and
+   * focuses the trigger. Needed because the trigger is a `<button>`: `willValidate` is false, so
+   * a plain `required` on it has never meant anything (#096). Override the message per control
+   * with `data-fdy-msg-required` on the root.
+   */
+  required?: boolean;
   invalid?: boolean;
   describedby?: string;
 }
@@ -128,6 +136,7 @@ export function FdyCombo<T extends string>(props: FdyComboProps<T>): JSX.Element
       ref={rootRef}
       className={isInvalid ? 'fdy-combo fdy-combo--error' : 'fdy-combo'}
       data-value={props.value}
+      data-fdy-required={props.required === true ? '' : undefined}
       onKeyDown={onKeyDown}
       onBlur={onFocusout}
     >

package/adapters/react/components/FdyDatepicker.tsx

@@ -73,6 +73,14 @@ export interface FdyDatepickerProps {
   disabled?: boolean;
   /** Locked/view mode: stays focusable and shows its date, but can't be opened, cleared, or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
   readonly?: boolean;
+  /**
+   * Let a `data-fdy-validate` form demand this control be filled. It renders `data-fdy-required`
+   * on the root, and `freeday-form.js` refuses the submit, paints the message in the field and
+   * focuses the trigger. Needed because the trigger is a `<button>`: `willValidate` is false, so
+   * a plain `required` on it has never meant anything (#096). Override the message per control
+   * with `data-fdy-msg-required` on the root.
+   */
+  required?: boolean;
   invalid?: boolean;
   describedby?: string;
   id?: string;
@@ -527,7 +535,8 @@ export function FdyDatepicker(props: FdyDatepickerProps): JSX.Element {
   }, [open]);
 
   return (
-    <div ref={rootRef} className={isInvalid ? 'fdy-datepicker fdy-datepicker--error' : 'fdy-datepicker'} onBlur={onFocusout}>
+    <div ref={rootRef} className={isInvalid ? 'fdy-datepicker fdy-datepicker--error' : 'fdy-datepicker'}
+         data-value={props.value ?? ''} data-fdy-required={props.required === true ? '' : undefined} onBlur={onFocusout}>
       <button
         id={triggerId}
         ref={triggerRef}

package/adapters/react/components/FdyMonthpicker.tsx

@@ -50,6 +50,14 @@ export interface FdyMonthpickerProps {
   disabled?: boolean;
   /** Locked/view mode: stays focusable and shows its month, but can't be opened, cleared, or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
   readonly?: boolean;
+  /**
+   * Let a `data-fdy-validate` form demand this control be filled. It renders `data-fdy-required`
+   * on the root, and `freeday-form.js` refuses the submit, paints the message in the field and
+   * focuses the trigger. Needed because the trigger is a `<button>`: `willValidate` is false, so
+   * a plain `required` on it has never meant anything (#096). Override the message per control
+   * with `data-fdy-msg-required` on the root.
+   */
+  required?: boolean;
   invalid?: boolean;
   describedby?: string;
   id?: string;
@@ -277,7 +285,8 @@ export function FdyMonthpicker(props: FdyMonthpickerProps): JSX.Element {
   }, [open]);
 
   return (
-    <div ref={rootRef} className={isInvalid ? 'fdy-datepicker fdy-datepicker--error' : 'fdy-datepicker'} onBlur={onFocusout}>
+    <div ref={rootRef} className={isInvalid ? 'fdy-datepicker fdy-datepicker--error' : 'fdy-datepicker'}
+         data-value={props.value ?? ''} data-fdy-required={props.required === true ? '' : undefined} onBlur={onFocusout}>
       <button
         id={triggerId}
         ref={triggerRef}

package/adapters/react/components/FdyTimepicker.tsx

@@ -26,6 +26,14 @@ export interface FdyTimepickerProps {
   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;
+  /**
+   * Let a `data-fdy-validate` form demand this control be filled. It renders `data-fdy-required`
+   * on the root, and `freeday-form.js` refuses the submit, paints the message in the field and
+   * focuses the trigger. Needed because the trigger is a `<button>`: `willValidate` is false, so
+   * a plain `required` on it has never meant anything (#096). Override the message per control
+   * with `data-fdy-msg-required` on the root.
+   */
+  required?: boolean;
   invalid?: boolean;
   describedby?: string;
 }
@@ -160,6 +168,7 @@ export function FdyTimepicker(props: FdyTimepickerProps): JSX.Element {
       ref={rootRef}
       className={isInvalid ? 'fdy-timepicker fdy-timepicker--error' : 'fdy-timepicker'}
       data-value={value}
+      data-fdy-required={props.required === true ? '' : undefined}
       onKeyDown={onKeyDown}
       onBlur={onFocusout}
     >

package/adapters/vue/components/FdyCascade.vue

@@ -46,6 +46,14 @@ const props = defineProps<{
   disabled?: boolean;
   /** Locked/view mode: stays focusable and shows its value, but can't be opened or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
   readonly?: boolean;
+  /**
+   * Let a `data-fdy-validate` form demand this control be filled. It renders `data-fdy-required`
+   * on the root, and `freeday-form.js` refuses the submit, paints the message in the field and
+   * focuses the trigger. Needed because the trigger is a `<button>`: `willValidate` is false, so
+   * a plain `required` on it has never meant anything (#096). Override the message per control
+   * with `data-fdy-msg-required`, which falls through onto the root.
+   */
+  required?: boolean;
   invalid?: boolean;
   describedby?: string;
 }>();
@@ -184,7 +192,8 @@ onBeforeUnmount((): void => {
 </script>
 
 <template>
-  <div ref="rootEl" :class="isInvalid ? 'fdy-cascade fdy-cascade--error' : 'fdy-cascade'">
+  <div ref="rootEl" :class="isInvalid ? 'fdy-cascade fdy-cascade--error' : 'fdy-cascade'"
+       :data-value="modelValue" :data-fdy-required="required === true ? '' : undefined">
     <button
       :id="triggerId"
       ref="triggerEl"

package/adapters/vue/components/FdyCombo.vue

@@ -24,6 +24,14 @@ const props = defineProps<{
   disabled?: boolean;
   /** Locked/view mode: stays focusable and shows its value, but can't be opened or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
   readonly?: boolean;
+  /**
+   * Let a `data-fdy-validate` form demand this control be filled. It renders `data-fdy-required`
+   * on the root, and `freeday-form.js` refuses the submit, paints the message in the field and
+   * focuses the trigger. Needed because the trigger is a `<button>`: `willValidate` is false, so
+   * a plain `required` on it has never meant anything (#096). Override the message per control
+   * with `data-fdy-msg-required`, which falls through onto the root.
+   */
+  required?: boolean;
   invalid?: boolean;
   describedby?: string;
 }>();
@@ -194,6 +202,7 @@ onBeforeUnmount((): void => {
     class="fdy-combo"
     :class="{ 'fdy-combo--error': isInvalid }"
     :data-value="modelValue"
+    :data-fdy-required="required === true ? '' : undefined"
     @keydown="onKeydown"
     @focusout="onFocusout"
   >

package/adapters/vue/components/FdyDatepicker.vue

@@ -75,6 +75,14 @@ const props = defineProps<{
   disabled?: boolean;
   /** Locked/view mode: stays focusable and shows its date, but can't be opened, cleared, or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
   readonly?: boolean;
+  /**
+   * Let a `data-fdy-validate` form demand this control be filled. It renders `data-fdy-required`
+   * on the root, and `freeday-form.js` refuses the submit, paints the message in the field and
+   * focuses the trigger. Needed because the trigger is a `<button>`: `willValidate` is false, so
+   * a plain `required` on it has never meant anything (#096). Override the message per control
+   * with `data-fdy-msg-required`, which falls through onto the root.
+   */
+  required?: boolean;
   invalid?: boolean;
   describedby?: string;
   id?: string;
@@ -516,7 +524,8 @@ onBeforeUnmount((): void => {
 </script>
 
 <template>
-  <div ref="rootEl" class="fdy-datepicker" :class="{ 'fdy-datepicker--error': isInvalid }" @focusout="onFocusout">
+  <div ref="rootEl" class="fdy-datepicker" :class="{ 'fdy-datepicker--error': isInvalid }"
+       :data-value="modelValue ?? ''" :data-fdy-required="required === true ? '' : undefined" @focusout="onFocusout">
     <button
       :id="triggerId"
       ref="triggerEl"

package/adapters/vue/components/FdyMonthpicker.vue

@@ -57,6 +57,14 @@ const props = defineProps<{
   disabled?: boolean;
   /** Locked/view mode: stays focusable and shows its month, but can't be opened, cleared, or changed. Unlike `disabled`, it keeps tab order and isn't greyed. */
   readonly?: boolean;
+  /**
+   * Let a `data-fdy-validate` form demand this control be filled. It renders `data-fdy-required`
+   * on the root, and `freeday-form.js` refuses the submit, paints the message in the field and
+   * focuses the trigger. Needed because the trigger is a `<button>`: `willValidate` is false, so
+   * a plain `required` on it has never meant anything (#096). Override the message per control
+   * with `data-fdy-msg-required`, which falls through onto the root.
+   */
+  required?: boolean;
   invalid?: boolean;
   describedby?: string;
   id?: string;
@@ -290,7 +298,8 @@ onBeforeUnmount((): void => {
 </script>
 
 <template>
-  <div ref="rootEl" class="fdy-datepicker" :class="{ 'fdy-datepicker--error': isInvalid }" @focusout="onFocusout">
+  <div ref="rootEl" class="fdy-datepicker" :class="{ 'fdy-datepicker--error': isInvalid }"
+       :data-value="modelValue ?? ''" :data-fdy-required="required === true ? '' : undefined" @focusout="onFocusout">
     <button
       :id="triggerId"
       ref="triggerEl"

package/adapters/vue/components/FdyTimepicker.vue

@@ -34,6 +34,14 @@ const props = defineProps<{
   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;
+  /**
+   * Let a `data-fdy-validate` form demand this control be filled. It renders `data-fdy-required`
+   * on the root, and `freeday-form.js` refuses the submit, paints the message in the field and
+   * focuses the trigger. Needed because the trigger is a `<button>`: `willValidate` is false, so
+   * a plain `required` on it has never meant anything (#096). Override the message per control
+   * with `data-fdy-msg-required`, which falls through onto the root.
+   */
+  required?: boolean;
   invalid?: boolean;
   describedby?: string;
 }>();
@@ -224,6 +232,7 @@ onBeforeUnmount((): void => {
     class="fdy-timepicker"
     :class="{ 'fdy-timepicker--error': isInvalid }"
     :data-value="value"
+    :data-fdy-required="required === true ? '' : undefined"
     @keydown="onKeydown"
     @focusout="onFocusout"
   >

package/dist/freeday-cascade.js

@@ -198,6 +198,11 @@
       if (!node) return;
       if (node.children) { drill(i); return; }
       selectedValue = node.value;
+      /* Mirror the value onto the ROOT, which until now only seeded it. `freeday-select.js` has
+         always done this, so this makes the family agree rather than inventing a second idea, and
+         it is what lets `freeday-form.js` require a kit control without knowing which control it
+         is: one attribute instead of five event names (#096). */
+      wrap.setAttribute('data-value', node.value);
       var labels = stack.map(function (n) { return n.label; }).concat([node.label]);
       valueSpan.textContent = labels.join(sep);
       valueSpan.classList.remove('fdy-cascade__value--placeholder');

package/dist/freeday-datepicker.js

@@ -175,6 +175,11 @@
     wrap.appendChild(panel);
 
     function updateDisplay() {
+      /* Mirror the value onto the ROOT, which until now only seeded it. `freeday-select.js` has
+         always done this, so this makes the family agree rather than inventing a second idea, and
+         it is what lets `freeday-form.js` require a kit control without knowing which control it
+         is: one attribute instead of five event names (#096). */
+      wrap.setAttribute('data-value', selected ? (monthOnly ? toISOMonth(selected) : toISO(selected)) : '');
       if (selected) {
         /* Through the same `Intl` formatter the month CELLS and the day grid's title already use,
            which is the whole reason this mode exists: <input type="month"> names the month in the

package/dist/freeday-form.js

@@ -74,6 +74,36 @@
 
   function fieldOf(el) { return el.closest('.fdy-field') || el.parentElement; }
 
+  /* A kit control (combo, datepicker, monthpicker, timepicker, cascade) is NOT a form control.
+   * Its trigger is a <button>, so `willValidate` is false and `form.elements` never offers it --
+   * `required` on one meant nothing, and a form could not demand that it be filled (#096).
+   *
+   * Nothing here names a component. Two attributes carry it:
+   *   data-fdy-required  the app asking for it, on the control's ROOT
+   *   data-value         the live value, which every value-bearing kit control now mirrors
+   * and the element that takes aria-invalid and focus is found by `aria-haspopup`, which every
+   * popup-style kit trigger already sets. `FdyAutocomplete` and `FdyCfl` are absent on purpose:
+   * they render a real <input>, so the NATIVE `required` is what fits them, and routing them
+   * through here would give one field two sources of truth. No prop exposes that yet, which is a
+   * separate gap and is written down in NEXT-UP.md rather than half-closed here. */
+  function kitRoots(form) {
+    return Array.prototype.slice.call(form.querySelectorAll('[data-fdy-required]'));
+  }
+
+  /* The trigger, or the root itself if a control ever ships without one, so a missing trigger
+     degrades to a visible error rather than a thrown TypeError. */
+  function kitAria(root) {
+    return root.querySelector('[aria-haspopup]') || root;
+  }
+
+  function kitMessage(root) {
+    if ((root.getAttribute('data-value') || '') !== '') return '';
+    var form = root.closest('form');
+    return root.getAttribute('data-fdy-msg-required')
+      || root.getAttribute('data-fdy-msg')
+      || textOf(form, 'required');
+  }
+
   function ensureErrorEl(el) {
     var field = fieldOf(el);
     var errEl = field ? field.querySelector('[data-fdy-error]') : null;
@@ -164,6 +194,21 @@
     function controls() {
       return Array.prototype.filter.call(form.elements, isCandidate);
     }
+    function validateKit(root) {
+      var msg = kitMessage(root);
+      paint(kitAria(root), msg);
+      return !msg;
+    }
+    /* The value lives in an attribute, and each control changes it through its own event name
+       (fdy-change, fdy-datepicker-change, fdy-time-select, fdy-cascade-change). Observing the
+       attribute is what keeps this enhancer from having to know any of them. */
+    function kitLiveBind(root) {
+      if (root.dataset.fdyKitBound === '1') return;
+      root.dataset.fdyKitBound = '1';
+      new MutationObserver(function () {
+        if (submitted || eager) validateKit(root);
+      }).observe(root, { attributes: true, attributeFilter: ['data-value'] });
+    }
     function validateOne(el) {
       var msg = messageFor(el);
       paint(el, msg);
@@ -178,6 +223,7 @@
     }
 
     Array.prototype.forEach.call(controls(), liveBind);
+    kitRoots(form).forEach(kitLiveBind);
 
     form.addEventListener('submit', function (e) {
       submitted = true;
@@ -186,6 +232,18 @@
         liveBind(el);
         if (!validateOne(el)) invalid.push(el);
       });
+      kitRoots(form).forEach(function (root) {
+        kitLiveBind(root);
+        if (!validateKit(root)) invalid.push(kitAria(root));
+      });
+      /* DOM order, not native-then-kit: `invalid[0]` is what gets revealed and focused, and a
+         reader sent to the second field while the first is also red learns the wrong thing. */
+      invalid.sort(function (a, b) {
+        var rel = a.compareDocumentPosition(b);
+        if (rel & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+        if (rel & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+        return 0;
+      });
       if (invalid.length) {
         e.preventDefault();
         reveal(invalid[0]);
@@ -202,11 +260,13 @@
         submitted = true;
         var invalid = [];
         Array.prototype.forEach.call(controls(), function (el) { if (!validateOne(el)) invalid.push(el); });
+        kitRoots(form).forEach(function (root) { if (!validateKit(root)) invalid.push(kitAria(root)); });
         return invalid;
       },
       reset: function () {
         submitted = false;
         Array.prototype.forEach.call(controls(), function (el) { paint(el, ''); });
+        kitRoots(form).forEach(function (root) { paint(kitAria(root), ''); });
       }
     };
     form._fdyForm = api;

package/dist/freeday-timepicker.js

@@ -130,6 +130,11 @@
     }
 
     function updateDisplay() {
+      /* Mirror the value onto the ROOT, which until now only seeded it. `freeday-select.js` has
+         always done this, so this makes the family agree rather than inventing a second idea, and
+         it is what lets `freeday-form.js` require a kit control without knowing which control it
+         is: one attribute instead of five event names (#096). */
+      wrap.setAttribute('data-value', value);
       if (value) {
         valueSpan.textContent = value;
         valueSpan.classList.remove('fdy-timepicker__value--placeholder');

package/dist/freeday.bundle.css

@@ -2472,10 +2472,10 @@ a { color: var(--color-primary-strong); }
 /* display is gated behind [open] so the native <dialog> stays hidden until opened.
  * An unconditional display here would beat the UA `dialog:not([open]){display:none}`
  * rule (author origin wins over user-agent) and leave the drawer visible on load. */
-.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-4),var(--surface-inset);overflow:hidden;transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease-standard),overlay var(--dur-slow) allow-discrete,display var(--dur-slow) allow-discrete;}
+.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-4),var(--surface-inset);overflow:hidden;transform:translateX(-100%);transition-property:transform,overlay,display;transition-duration:var(--dur-slow);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
 .fdy-drawer[open]{display:flex;transform:none;}
 .fdy-drawer--right{inset:0 0 0 auto;transform:translateX(100%);}
-.fdy-drawer::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-slow) var(--ease-standard),overlay var(--dur-slow) allow-discrete,display var(--dur-slow) allow-discrete;}
+.fdy-drawer::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition-property:opacity,overlay,display;transition-duration:var(--dur-slow);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
 .fdy-drawer__header{flex:none;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
 .fdy-drawer__title{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-lg);color:var(--color-text);margin:0 auto 0 0;}
 .fdy-drawer__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}
@@ -2778,12 +2778,12 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-btn-split__toggle svg{display:block;width:1rem;height:1rem;}
 
 /* Freeday. Modal (native <dialog>) */
-.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-lift-hover),var(--surface-inset);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
+.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-lift-hover),var(--surface-inset);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);/* Longhands, not the `transition` shorthand. A shorthand carrying one keyword the engine does not know is INVALID AT PARSE, so the whole declaration is thrown away -- and `allow-discrete` is unknown below Safari 17.4, which is under this kit's floor. The result was a modal and a drawer that opened and closed with no animation at all on an iPhone 7. Split this way only `transition-behavior` is dropped there, and the opacity/transform half survives. The lists align BY INDEX and reproduce the shorthand exactly, including `ease` for the discrete pair and `normal` for the continuous one -- verified by comparing computed styles before and after (#097). */transition-property:opacity,transform,overlay,display;transition-duration:var(--dur-base);transition-timing-function:var(--ease-spring),var(--ease-spring),ease,ease;transition-behavior:normal,normal,allow-discrete,allow-discrete;}
 .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
 .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}
 .fdy-modal--lg{width:min(48rem,calc(100vw - var(--space-8)));}
 .fdy-modal--wide{width:min(60rem,calc(100vw - var(--space-8)));}
-.fdy-modal::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-base) var(--ease-standard),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
+.fdy-modal::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition-property:opacity,overlay,display;transition-duration:var(--dur-base);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
 .fdy-modal__header{flex:none;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
 .fdy-modal__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;}
 .fdy-modal__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}

package/dist/freeday.css

@@ -1295,10 +1295,10 @@ a { color: var(--color-primary-strong); }
 /* display is gated behind [open] so the native <dialog> stays hidden until opened.
  * An unconditional display here would beat the UA `dialog:not([open]){display:none}`
  * rule (author origin wins over user-agent) and leave the drawer visible on load. */
-.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-4),var(--surface-inset);overflow:hidden;transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease-standard),overlay var(--dur-slow) allow-discrete,display var(--dur-slow) allow-discrete;}
+.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-4),var(--surface-inset);overflow:hidden;transform:translateX(-100%);transition-property:transform,overlay,display;transition-duration:var(--dur-slow);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
 .fdy-drawer[open]{display:flex;transform:none;}
 .fdy-drawer--right{inset:0 0 0 auto;transform:translateX(100%);}
-.fdy-drawer::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-slow) var(--ease-standard),overlay var(--dur-slow) allow-discrete,display var(--dur-slow) allow-discrete;}
+.fdy-drawer::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition-property:opacity,overlay,display;transition-duration:var(--dur-slow);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
 .fdy-drawer__header{flex:none;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
 .fdy-drawer__title{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-lg);color:var(--color-text);margin:0 auto 0 0;}
 .fdy-drawer__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}
@@ -1601,12 +1601,12 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-btn-split__toggle svg{display:block;width:1rem;height:1rem;}
 
 /* Freeday. Modal (native <dialog>) */
-.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-lift-hover),var(--surface-inset);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
+.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-lift-hover),var(--surface-inset);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);/* Longhands, not the `transition` shorthand. A shorthand carrying one keyword the engine does not know is INVALID AT PARSE, so the whole declaration is thrown away -- and `allow-discrete` is unknown below Safari 17.4, which is under this kit's floor. The result was a modal and a drawer that opened and closed with no animation at all on an iPhone 7. Split this way only `transition-behavior` is dropped there, and the opacity/transform half survives. The lists align BY INDEX and reproduce the shorthand exactly, including `ease` for the discrete pair and `normal` for the continuous one -- verified by comparing computed styles before and after (#097). */transition-property:opacity,transform,overlay,display;transition-duration:var(--dur-base);transition-timing-function:var(--ease-spring),var(--ease-spring),ease,ease;transition-behavior:normal,normal,allow-discrete,allow-discrete;}
 .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
 .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}
 .fdy-modal--lg{width:min(48rem,calc(100vw - var(--space-8)));}
 .fdy-modal--wide{width:min(60rem,calc(100vw - var(--space-8)));}
-.fdy-modal::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-base) var(--ease-standard),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
+.fdy-modal::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition-property:opacity,overlay,display;transition-duration:var(--dur-base);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
 .fdy-modal__header{flex:none;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
 .fdy-modal__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;}
 .fdy-modal__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}

package/dist/freeday.js

@@ -944,6 +944,11 @@
       if (!node) return;
       if (node.children) { drill(i); return; }
       selectedValue = node.value;
+      /* Mirror the value onto the ROOT, which until now only seeded it. `freeday-select.js` has
+         always done this, so this makes the family agree rather than inventing a second idea, and
+         it is what lets `freeday-form.js` require a kit control without knowing which control it
+         is: one attribute instead of five event names (#096). */
+      wrap.setAttribute('data-value', node.value);
       var labels = stack.map(function (n) { return n.label; }).concat([node.label]);
       valueSpan.textContent = labels.join(sep);
       valueSpan.classList.remove('fdy-cascade__value--placeholder');
@@ -2262,6 +2267,11 @@
     wrap.appendChild(panel);
 
     function updateDisplay() {
+      /* Mirror the value onto the ROOT, which until now only seeded it. `freeday-select.js` has
+         always done this, so this makes the family agree rather than inventing a second idea, and
+         it is what lets `freeday-form.js` require a kit control without knowing which control it
+         is: one attribute instead of five event names (#096). */
+      wrap.setAttribute('data-value', selected ? (monthOnly ? toISOMonth(selected) : toISO(selected)) : '');
       if (selected) {
         /* Through the same `Intl` formatter the month CELLS and the day grid's title already use,
            which is the whole reason this mode exists: <input type="month"> names the month in the
@@ -3011,6 +3021,36 @@
 
   function fieldOf(el) { return el.closest('.fdy-field') || el.parentElement; }
 
+  /* A kit control (combo, datepicker, monthpicker, timepicker, cascade) is NOT a form control.
+   * Its trigger is a <button>, so `willValidate` is false and `form.elements` never offers it --
+   * `required` on one meant nothing, and a form could not demand that it be filled (#096).
+   *
+   * Nothing here names a component. Two attributes carry it:
+   *   data-fdy-required  the app asking for it, on the control's ROOT
+   *   data-value         the live value, which every value-bearing kit control now mirrors
+   * and the element that takes aria-invalid and focus is found by `aria-haspopup`, which every
+   * popup-style kit trigger already sets. `FdyAutocomplete` and `FdyCfl` are absent on purpose:
+   * they render a real <input>, so the NATIVE `required` is what fits them, and routing them
+   * through here would give one field two sources of truth. No prop exposes that yet, which is a
+   * separate gap and is written down in NEXT-UP.md rather than half-closed here. */
+  function kitRoots(form) {
+    return Array.prototype.slice.call(form.querySelectorAll('[data-fdy-required]'));
+  }
+
+  /* The trigger, or the root itself if a control ever ships without one, so a missing trigger
+     degrades to a visible error rather than a thrown TypeError. */
+  function kitAria(root) {
+    return root.querySelector('[aria-haspopup]') || root;
+  }
+
+  function kitMessage(root) {
+    if ((root.getAttribute('data-value') || '') !== '') return '';
+    var form = root.closest('form');
+    return root.getAttribute('data-fdy-msg-required')
+      || root.getAttribute('data-fdy-msg')
+      || textOf(form, 'required');
+  }
+
   function ensureErrorEl(el) {
     var field = fieldOf(el);
     var errEl = field ? field.querySelector('[data-fdy-error]') : null;
@@ -3101,6 +3141,21 @@
     function controls() {
       return Array.prototype.filter.call(form.elements, isCandidate);
     }
+    function validateKit(root) {
+      var msg = kitMessage(root);
+      paint(kitAria(root), msg);
+      return !msg;
+    }
+    /* The value lives in an attribute, and each control changes it through its own event name
+       (fdy-change, fdy-datepicker-change, fdy-time-select, fdy-cascade-change). Observing the
+       attribute is what keeps this enhancer from having to know any of them. */
+    function kitLiveBind(root) {
+      if (root.dataset.fdyKitBound === '1') return;
+      root.dataset.fdyKitBound = '1';
+      new MutationObserver(function () {
+        if (submitted || eager) validateKit(root);
+      }).observe(root, { attributes: true, attributeFilter: ['data-value'] });
+    }
     function validateOne(el) {
       var msg = messageFor(el);
       paint(el, msg);
@@ -3115,6 +3170,7 @@
     }
 
     Array.prototype.forEach.call(controls(), liveBind);
+    kitRoots(form).forEach(kitLiveBind);
 
     form.addEventListener('submit', function (e) {
       submitted = true;
@@ -3123,6 +3179,18 @@
         liveBind(el);
         if (!validateOne(el)) invalid.push(el);
       });
+      kitRoots(form).forEach(function (root) {
+        kitLiveBind(root);
+        if (!validateKit(root)) invalid.push(kitAria(root));
+      });
+      /* DOM order, not native-then-kit: `invalid[0]` is what gets revealed and focused, and a
+         reader sent to the second field while the first is also red learns the wrong thing. */
+      invalid.sort(function (a, b) {
+        var rel = a.compareDocumentPosition(b);
+        if (rel & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+        if (rel & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+        return 0;
+      });
       if (invalid.length) {
         e.preventDefault();
         reveal(invalid[0]);
@@ -3139,11 +3207,13 @@
         submitted = true;
         var invalid = [];
         Array.prototype.forEach.call(controls(), function (el) { if (!validateOne(el)) invalid.push(el); });
+        kitRoots(form).forEach(function (root) { if (!validateKit(root)) invalid.push(kitAria(root)); });
         return invalid;
       },
       reset: function () {
         submitted = false;
         Array.prototype.forEach.call(controls(), function (el) { paint(el, ''); });
+        kitRoots(form).forEach(function (root) { paint(kitAria(root), ''); });
       }
     };
     form._fdyForm = api;
@@ -5016,6 +5086,11 @@
     }
 
     function updateDisplay() {
+      /* Mirror the value onto the ROOT, which until now only seeded it. `freeday-select.js` has
+         always done this, so this makes the family agree rather than inventing a second idea, and
+         it is what lets `freeday-form.js` require a kit control without knowing which control it
+         is: one attribute instead of five event names (#096). */
+      wrap.setAttribute('data-value', value);
       if (value) {
         valueSpan.textContent = value;
         valueSpan.classList.remove('fdy-timepicker__value--placeholder');

package/docs/getting-started.md

@@ -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.11.0"` (public npm package). `dist/` is
+Lands in `package.json` as `"@cahyo-dimas/freeday": "^3.12.1"` (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`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "3.11.0",
+  "version": "3.12.1",
   "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/timepicker.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/form-kit-required.mjs browser/picker-in-modal.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",

package/src/components/drawer.css

@@ -4,10 +4,10 @@
 /* display is gated behind [open] so the native <dialog> stays hidden until opened.
  * An unconditional display here would beat the UA `dialog:not([open]){display:none}`
  * rule (author origin wins over user-agent) and leave the drawer visible on load. */
-.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-4),var(--surface-inset);overflow:hidden;transform:translateX(-100%);transition:transform var(--dur-slow) var(--ease-standard),overlay var(--dur-slow) allow-discrete,display var(--dur-slow) allow-discrete;}
+.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-4),var(--surface-inset);overflow:hidden;transform:translateX(-100%);transition-property:transform,overlay,display;transition-duration:var(--dur-slow);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
 .fdy-drawer[open]{display:flex;transform:none;}
 .fdy-drawer--right{inset:0 0 0 auto;transform:translateX(100%);}
-.fdy-drawer::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-slow) var(--ease-standard),overlay var(--dur-slow) allow-discrete,display var(--dur-slow) allow-discrete;}
+.fdy-drawer::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition-property:opacity,overlay,display;transition-duration:var(--dur-slow);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
 .fdy-drawer__header{flex:none;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
 .fdy-drawer__title{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-lg);color:var(--color-text);margin:0 auto 0 0;}
 .fdy-drawer__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}

package/src/components/modal.css

@@ -1,10 +1,10 @@
 /* Freeday. Modal (native <dialog>) */
-.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-lift-hover),var(--surface-inset);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);transition:opacity var(--dur-base) var(--ease-spring),transform var(--dur-base) var(--ease-spring),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
+.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-lift-hover),var(--surface-inset);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);/* Longhands, not the `transition` shorthand. A shorthand carrying one keyword the engine does not know is INVALID AT PARSE, so the whole declaration is thrown away -- and `allow-discrete` is unknown below Safari 17.4, which is under this kit's floor. The result was a modal and a drawer that opened and closed with no animation at all on an iPhone 7. Split this way only `transition-behavior` is dropped there, and the opacity/transform half survives. The lists align BY INDEX and reproduce the shorthand exactly, including `ease` for the discrete pair and `normal` for the continuous one -- verified by comparing computed styles before and after (#097). */transition-property:opacity,transform,overlay,display;transition-duration:var(--dur-base);transition-timing-function:var(--ease-spring),var(--ease-spring),ease,ease;transition-behavior:normal,normal,allow-discrete,allow-discrete;}
 .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
 .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}
 .fdy-modal--lg{width:min(48rem,calc(100vw - var(--space-8)));}
 .fdy-modal--wide{width:min(60rem,calc(100vw - var(--space-8)));}
-.fdy-modal::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition:opacity var(--dur-base) var(--ease-standard),overlay var(--dur-base) allow-discrete,display var(--dur-base) allow-discrete;}
+.fdy-modal::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition-property:opacity,overlay,display;transition-duration:var(--dur-base);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
 .fdy-modal__header{flex:none;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5);border-bottom:var(--bw) solid var(--color-border-muted);}
 .fdy-modal__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;}
 .fdy-modal__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}