@cahyo-dimas/freeday 3.12.1 → 3.13.0

package/CHANGELOG.md

@@ -9,19 +9,80 @@ 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.13.0] - 2026-10-29
+
+**Kit berhenti memutuskan hal yang bukan urusannya, dan markup yang tak pernah dihidrasi kini
+bersuara.** Lima butir dari `CATATAN-FREEDAY.md` app ronda (§9 sampai §13), dikerjakan dalam satu
+rilis. Tiga di antaranya gagal tanpa galat apa pun: chip yang hilang sesudah Batal, tombol simpan
+yang mati, dan kelas yang tak cocok dengan aturan mana pun.
+
+### Changed
+- **`fdy-chip-remove` dan `fdy-upload-remove` kini dapat dibatalkan** (`#098`). Begitu
+  `.fdy-chip__remove` ditekan, enhancer chip langsung menghapus chip-nya, padahal kit tak tahu
+  apakah penghapusan itu perlu ditanyakan dulu. Matriks pola rotasi di app ronda memakai chip
+  sebagai tampilan dan punya dialog konfirmasi sendiri. Chip-nya hilang ketika dialog masih
+  terbuka, dan tetap hilang sesudah **Batal** ditekan. Datanya utuh, layarnya yang salah. Sekarang
+  event-nya `cancelable`, dan elemennya baru dihapus kalau tak ada listener yang memanggil
+  `preventDefault()`. Perubahan ini aditif: app yang tidak membatalkan mendapat perilaku yang persis
+  sama. Baris upload ikut diubah karena bentuknya sama, dan berkas yang sudah dipegang server
+  memang layak ditanyakan dulu sebelum dibuang.
+
+### Added
+- **Peringatan konsol untuk hook yang tak pernah dihidrasi** (`#099`): `src/freeday-unhydrated.js`,
+  sudah termasuk di import akar. Klik, fokus atau submit pertama di dalam elemen ber-hook yang tak
+  punya penanda siap mencetak satu `console.warn` per elemen. Pesannya menyebut hook-nya, dan
+  elemennya ikut sebagai argumen kedua supaya devtools menautkannya. Pemicunya §10: `useFreeday()`
+  yang dipasang di pembungkus yang salah membuat `data-fdy-validate` di luar pembungkus itu diam
+  total, tanpa kalimat validasi dan tanpa `fdy-form-valid`. Yang memberi tahu cuma dua uji e2e yang
+  merah. Catatannya meminta peringatan ini untuk form, tetapi kegagalannya berlaku untuk setiap
+  hook, jadi tabelnya memuat 29 hook dari 24 enhancer. Peringatan dipicu interaksi, bukan saat
+  halaman dimuat, karena framework me-mount dan menghidrasi di antara keduanya.
+- **`fdy-help--danger`** (`#100`), alias `fdy-help--error` di dalam aturan yang sama. Kit memakai
+  `--danger` sebagai kata nada di mana-mana (tombol, alert, lencana, toast), sehingga app menebak
+  `fdy-help--danger`. Kelas itu tak cocok dengan aturan apa pun, dan kalimat peringatannya tampil
+  abu-abu. Kontrol form sengaja tidak diberi alias. Keadaannya digerakkan `aria-invalid`, jadi
+  `--error` di sana jarang ditulis tangan. Aturan penamaannya kini tertulis di COMPONENTS.md.
+
+### Fixed
+- **`FreedayCfl` dan `FreedayBreakpoint` tak punya `initAll`** (`#099`), padahal hanya nama itu
+  yang dicari ketiga helper stack (`useFreeday` di Vue dan React, `FreedayBlazor.initAll`). Markup
+  CFL mentah di dalam subtree framework dilewati ketiganya dan dialognya tak pernah terbuka. Label
+  breakpoint yang di-mount belakangan tetap kosong sampai breakpoint berganti. Tak ada yang
+  melaporkan ini; keduanya ketemu saat mengaudit kelas cacat §10.
+
+### Docs
+- **`<ul>` polos adalah daftar berbutir yang didukung** (`#101`). `base.css` memang tak pernah
+  mereset daftar. Sekarang COMPONENTS.md menjanjikannya, dan sebuah uji menjaga janji itu.
+- §13 (`required` di `FdyCombo`) sudah terkirim di 3.12.0 (`#096`). Tak ada kode baru; app tinggal
+  memakainya.
+
+### Gerbang
+- `docs.test.mjs`: setiap penanda siap yang dicap enhancer wajib ada di tabel peringatan, dicap di
+  berkas milik namespace yang disebut tabel, dan berkas itu wajib benar-benar meng-query selektor
+  pasangannya. Setiap enhancer yang menghidrasi markup wajib mengekspos `initAll`. Penjaga string
+  kini melewati teks `console.warn` (untuk devtools, tak pernah masuk DOM) dan identifier
+  PascalCase.
+- `css.test.mjs`: `fdy-help--danger` harus satu aturan dengan `--error`, dan tak boleh ada aturan
+  tanpa cakupan yang mereset `ul`/`ol`/`li`.
+- `browser/app-owned.mjs`, dengan mouse asli: chip dan baris upload yang dibatalkan tetap di
+  tempatnya, form yatim memperingatkan sekali sementara form yang terhidrasi diam, dan CFL serta
+  label breakpoint yang di-mount belakangan terhidrasi lewat `FreedayBlazor.initAll`.
+- Tiga belas mutasi diverifikasi merah sebelum dipulihkan: enam pada perilaku, lima pada tabel dan
+  ekspor, dua pada CSS.
+
 ## [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
+  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
+  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`,
@@ -94,7 +155,7 @@ perbaikan ini terdengar jauh lebih mahal daripada yang ternyata.
 
 **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
+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
@@ -106,7 +167,7 @@ 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">`
+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
@@ -116,8 +177,8 @@ 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
+  Vue dan React mengimplementasikan listbox-nya secara native sebab ia kontrol form. Alasannya sama
+  dengan `FdyCombo`, dan `FdyChart` menyatakannya 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
@@ -126,7 +187,7 @@ lokal, dan kini diuji, adalah perilaku penggantinya.
 - **`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.
+  mengaktifkannya, dan itu kini didokumentasikan.
 - **`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
@@ -136,7 +197,7 @@ lokal, dan kini diuji, adalah perilaku penggantinya.
 - **`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
+  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.

package/COMPONENTS.md

@@ -32,6 +32,10 @@ live docs.
    state *and* the screen-reader state. Pair it with `aria-describedby` → the `id` of a
    `.fdy-help.fdy-help--error`. The `--error` class modifiers exist only for the case where the
    invalid state does not belong to the control itself.
+   **`--error` names a field's validation state, `--danger` names a tone** (button, alert, badge,
+   toast, menu item). `.fdy-help` is the one block that takes both, `--danger` being the same
+   colour, because help text is where either reading is natural: a sentence that warns without
+   any field being invalid.
 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, thirteen components have a typed wrapper. Use it.** `FdyCombo` ·
@@ -44,6 +48,10 @@ live docs.
    breaks quietly: later-rendered DOM is never hydrated and the widget's state sits in the DOM
    instead of your framework's. Everything else is the same markup everywhere; hydrate the other
    interactive components with `useFreeday` (Vue/React) or `FreedayBlazor.initAll` (Blazor).
+   **Markup no `initAll` reached says so.** The first click, focus or submit inside a hook the kit
+   never enhanced logs one `console.warn` naming it, with the element attached. The usual cause is
+   a `useFreeday()` ref on a wrapper that does not contain it. `freeday-unhydrated.js` does this,
+   and it ships in the root import.
 
 ### Containment — why the kit's containers are `position:relative`
 
@@ -562,7 +570,7 @@ native control, otherwise a `<div>` + explicitly associated label.
   `.fdy-field--full` on the fields — **not** a `max-width` override on the container. Both of this
   kit's own consoles wrote that override, once per form, before this modifier reached outside the
   grid.
-- `.fdy-label` (+`--required`) · `.fdy-input` (+`--error`) · `.fdy-textarea` · `.fdy-help` (+`--error`)
+- `.fdy-label` (+`--required`) · `.fdy-input` (+`--error`) · `.fdy-textarea` · `.fdy-help` (+`--error`, or its alias `--danger`)
 
 **Grouped controls are a `<fieldset>`, not a new block.** Put `.fdy-field` on the fieldset and
 `.fdy-label` on the legend. The kit already resets the UA border/padding and supplies the spacing:
@@ -1214,6 +1222,9 @@ zone.addEventListener('fdy-upload-add', (e) => {
 zone.addEventListener('fdy-upload-remove', (e) => forget(e.detail.file));   // same element
 ```
 
+`fdy-upload-remove` is **cancelable** too: `preventDefault()` keeps the row, for a file the server
+already holds and the user should confirm losing. Remove it yourself afterwards with `row.el.remove()`.
+
 **Bring your own row:** omit the file list entirely (no `data-filelist`, and no `.fdy-filelist`
 sibling) and the enhancer renders nothing while still dispatching `fdy-upload-add`, where `detail.row`
 still works, its element simply isn't attached. Note the fallback when `data-filelist` is absent is
@@ -1757,6 +1768,10 @@ responsive `.fdy-datatable` should become below `md`, rather than a stack of `.f
   control in the kit. Do not hand-roll it: an undimmed row that still lights up under the pointer
   reads as clickable while it is refusing input.
 - Not `.fdy-list-reset`, which only strips UA bullets/indent from a semantic list.
+- Not for three bullet points in a dialog either. **A plain bulleted list is a plain `<ul>`/`<ol>`,
+  no class**, and that is supported: `base.css` deliberately leaves lists alone, so native bullets
+  and indent survive (a test keeps it that way). The exception is a utility framework run with its
+  preflight on, which strips them.
 
 ```html
 <ul class="fdy-list">
@@ -2335,6 +2350,21 @@ Three roles inside a `.fdy-chips` row:
 
 Interactive chips are managed by `freeday-chip.js`: wrap the row in `data-fdy-chips` (+
 `data-single` for pick-one, `data-label` for the group name), give each `data-value`.
+
+**Removal is cancelable.** Pressing `.fdy-chip__remove` fires `fdy-chip-remove` (`detail.value`) on
+the chip, then removes the chip only if no listener called `preventDefault()`. Cancel it whenever
+the removal is the app's call: a confirm step, or chips rendered from framework state, which
+should leave the DOM when the state changes and not before. Without that, Cancel in your own
+confirm dialog leaves the data intact and the chip gone.
+
+```js
+row.addEventListener('fdy-chip-remove', async (e) => {
+  e.preventDefault();                                   // the kit leaves the chip alone
+  if (await Freeday.confirm({ title: `Remove ${e.detail.value}?`, tone: 'danger' })) {
+    removeFromState(e.detail.value);                    // your render takes it out
+  }
+});
+```
 `--tone-1`…`--tone-8` for non-semantic category colours.
 
 ## Timeline — `.fdy-timeline`

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

package/README.md

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

package/dist/freeday-breakpoint.js

@@ -26,10 +26,19 @@
     if (bp === last) return;
     last = bp;
     root.setAttribute('data-breakpoint', bp);
-    Array.prototype.forEach.call(document.querySelectorAll('[data-fdy-breakpoint-label]'), function (el) {
+    fillLabels(document);
+    root.dispatchEvent(new CustomEvent('fdy-breakpoint-change', { bubbles: true, detail: { breakpoint: bp } }));
+  }
+
+  /* Also run over late-mounted markup by the stack helpers, which find it through initAll: a label
+     rendered after load otherwise stayed empty until the next breakpoint change. */
+  function fillLabels(context) {
+    var ctx = context || document;
+    var bp = last || current();
+    if (ctx.matches && ctx.matches('[data-fdy-breakpoint-label]')) ctx.textContent = bp;
+    Array.prototype.forEach.call(ctx.querySelectorAll('[data-fdy-breakpoint-label]'), function (el) {
       el.textContent = bp;
     });
-    root.dispatchEvent(new CustomEvent('fdy-breakpoint-change', { bubbles: true, detail: { breakpoint: bp } }));
   }
 
   window.addEventListener('resize', update, { passive: true });
@@ -40,6 +49,7 @@
   }
 
   window.FreedayBreakpoint = {
+    initAll: fillLabels,
     get: function () { return last || current(); },
     current: current,
     // true if the current breakpoint is `name` or wider (e.g. is('md') → md, lg, or xl)

package/dist/freeday-cfl.js

@@ -240,5 +240,7 @@
     initTriggers();
   }
 
-  window.FreedayCfl = { init: initTriggers };
+  /* initAll is what every stack helper looks for (useFreeday in Vue and React, FreedayBlazor.initAll):
+     without it they skipped this enhancer, and raw CFL markup rendered by a framework never opened. */
+  window.FreedayCfl = { init: initTriggers, initAll: initTriggers };
 })();

package/dist/freeday-chip.js

@@ -1,8 +1,10 @@
 /* Freeday, chip enhancer (optional, zero-dependency).
  * Two behaviours, both progressive enhancement:
  *
- * 1. Removable chips, any .fdy-chip__remove button removes its chip and emits a
- *    bubbling "fdy-chip-remove" (detail {value}).
+ * 1. Removable chips, any .fdy-chip__remove button emits a bubbling, CANCELABLE
+ *    "fdy-chip-remove" (detail {value}) and then removes its chip, unless a listener called
+ *    preventDefault(). Cancel it whenever the app owns the removal: a confirm step, or a chip
+ *    rendered from framework state, which should leave the DOM when the state does.
  * 2. Choice / filter groups, a [data-fdy-chips] container of interactive chips
  *    (.fdy-chip--choice / .fdy-chip--filter, each a <button>) toggles aria-pressed
  *    on click. Add data-single for one-at-a-time (radio-like) selection; filter
@@ -28,8 +30,12 @@
         if (rm) rm.remove();
         value = (clone.textContent || '').trim();
       }
-      chip.dispatchEvent(new CustomEvent('fdy-chip-remove', { bubbles: true, detail: { value: value } }));
-      chip.remove();
+      /* Cancelable, because the kit cannot know whether this removal needs asking first. Removing
+         unconditionally made a chip vanish while the app's own confirm dialog was still open, and
+         stay gone after Cancel, with the data intact and the screen wrong (CATATAN-FREEDAY §9). */
+      var ev = new CustomEvent('fdy-chip-remove', { bubbles: true, cancelable: true, detail: { value: value } });
+      chip.dispatchEvent(ev);
+      if (!ev.defaultPrevented) chip.remove();
     });
   }
 

package/dist/freeday-unhydrated.js

@@ -0,0 +1,76 @@
+/* Freeday, un-hydrated hook warning (optional, zero-dependency, no markup of its own).
+ * Every enhancer marks the element it took over (`data-fdy-*-ready`). Markup that no initAll()
+ * ever reached carries the hook and not the mark, and it fails in the worst way available: it
+ * renders, looks finished, and does nothing, with no error anywhere. A `data-fdy-validate` form
+ * outside the subtree handed to useFreeday() neither paints a message nor fires fdy-form-valid,
+ * so its save button reads as dead (CATATAN-FREEDAY §10). The enhancer knows the attribute is
+ * there; the person who wrote it does not.
+ *
+ * So on the first click, focus or submit inside such an element this logs ONE console.warn per
+ * element, naming the hook, with the element itself as the second argument so devtools links it.
+ * Interaction, not load, is the trigger on purpose: a framework mounts and hydrates in between,
+ * and only once a person is touching the widget is "not enhanced yet" the same as "never".
+ *
+ * HOOKS pairs each hook selector with the ready flag its enhancer stamps on THAT element and the
+ * namespace that owns it. A hook whose enhancer is not loaded is skipped: that is a different
+ * mistake, and this message would misname it. test/docs.test.mjs fails if an enhancer gains a
+ * ready flag this table does not list.
+ */
+(function () {
+  'use strict';
+
+  var HOOKS = [
+    ['[data-fdy-app]', 'fdyAppShellReady', 'FreedayAppShell'],
+    ['[data-fdy-autocomplete]', 'fdyAcReady', 'FreedayAutocomplete'],
+    ['[data-fdy-carousel]', 'fdyCarouselReady', 'FreedayCarousel'],
+    ['[data-fdy-cascade]', 'fdyCascadeReady', 'FreedayCascade'],
+    ['[data-fdy-cfl]', 'fdyCflBound', 'FreedayCfl'],
+    ['[data-fdy-cfl-open]', 'fdyCflBound', 'FreedayCfl'],
+    ['[data-fdy-chart]', 'fdyChartReady', 'FreedayChart'],
+    ['[data-fdy-chips]', 'fdyChipsReady', 'FreedayChip'],
+    ['.fdy-chip__remove', 'fdyChipRmReady', 'FreedayChip'],
+    ['[data-fdy-datepicker]', 'fdyDpReady', 'FreedayDatepicker'],
+    ['[data-fdy-daterange]', 'fdyDrReady', 'FreedayDatepicker'],
+    ['[data-fdy-datetimepicker]', 'fdyDtReady', 'FreedayDatetime'],
+    ['[data-fdy-drawer]', 'fdyDrawerBound', 'FreedayDrawer'],
+    ['.fdy-drawer', 'fdyDrawerReady', 'FreedayDrawer'],
+    ['[data-fdy-validate]', 'fdyFormReady', 'FreedayForm'],
+    ['[data-fdy-mask]', 'fdyMaskReady', 'FreedayMask'],
+    ['[data-fdy-password]', 'fdyPwReady', 'FreedayMask'],
+    ['[data-fdy-menu]', 'fdyMenuReady', 'FreedayMenu'],
+    ['[data-fdy-number]', 'fdyNumberReady', 'FreedayNumber'],
+    ['[data-fdy-rating]', 'fdyRatingReady', 'FreedayRating'],
+    ['[data-fdy-search]', 'fdySearchReady', 'FreedaySearch'],
+    ['[data-fdy-combo]', 'fdyComboReady', 'FreedayCombo'],
+    ['[data-fdy-slider]', 'fdySliderReady', 'FreedaySlider'],
+    ['[data-fdy-stepper]', 'fdyStepperReady', 'FreedayStepper'],
+    ['[data-fdy-table]', 'fdyTableReady', 'FreedayTable'],
+    ['[data-fdy-tabs]', 'fdyTabsReady', 'FreedayTabs'],
+    ['[data-fdy-timepicker]', 'fdyTpReady', 'FreedayTimepicker'],
+    ['[data-fdy-tree]', 'fdyTreeReady', 'FreedayTree'],
+    ['[data-fdy-dropzone]', 'fdyUploadReady', 'FreedayUpload']
+  ];
+
+  var warned = typeof WeakSet === 'function' ? new WeakSet() : null;
+
+  function check(e) {
+    if (!warned || !e.target || !e.target.closest) return;
+    for (var i = 0; i < HOOKS.length; i++) {
+      var hook = HOOKS[i];
+      if (!window[hook[2]]) continue;
+      var el = e.target.closest(hook[0]);
+      if (!el || el.dataset[hook[1]] === '1' || warned.has(el)) continue;
+      warned.add(el);
+      console.warn('Freeday: this ' + hook[0] + ' was never enhanced, so it does nothing. Either it is '
+        + 'outside every initAll() scope (Vue/React: inside the element given to useFreeday(); Blazor: '
+        + 'FreedayBlazor.initAll after render; anything else: ' + hook[2] + '.initAll(el) once it is in '
+        + 'the DOM), or its markup lacks a part the enhancer needs (see COMPONENTS.md).', el);
+    }
+  }
+
+  ['click', 'focusin', 'submit'].forEach(function (type) {
+    document.addEventListener(type, check, true);
+  });
+
+  window.FreedayUnhydrated = { hooks: HOOKS };
+})();

package/dist/freeday-upload.js

@@ -18,7 +18,8 @@
  * Emits bubbling CustomEvents. BOTH on the dropzone element, which is the one target a consumer
  * needs to listen on:
  *   "fdy-upload-add"    {file, rejected, reason, row}
- *   "fdy-upload-remove" {file}
+ *   "fdy-upload-remove" {file}, cancelable: preventDefault() keeps the row (e.g. to confirm
+ *                       removing a file the server already holds, then call row.el.remove())
  * `row` is the state machine over the rendered .fdy-file:
  *   .ready() (rest, where a dropped file starts) / .uploading() / .setProgress(pct) /
  *   .waiting(label) (sent, awaiting the server) / .done() / .fail(msg) / .el
@@ -111,8 +112,9 @@
          Firing on both would look safer, but it makes the pair asymmetric, one `add` and, for
          anyone delegating on a common ancestor, two `remove`s, which is its own silent bug. It
          also fixes the listless case: a row that was never attached bubbles to nothing at all. */
-      zone.dispatchEvent(new CustomEvent('fdy-upload-remove', { bubbles: true, detail: { file: file } }));
-      el.remove();
+      var ev = new CustomEvent('fdy-upload-remove', { bubbles: true, cancelable: true, detail: { file: file } });
+      zone.dispatchEvent(ev);
+      if (!ev.defaultPrevented) el.remove();
     });
     el.appendChild(icon);
     el.appendChild(meta);

package/dist/freeday.bundle.css

@@ -2696,7 +2696,8 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    remember to mark aria-hidden, and it cannot be forgotten. */
 .fdy-label--required::after{content:"*" / "";margin-left:var(--space-1);color:var(--color-danger);}
 .fdy-help{font-size:var(--text-xs);color:var(--color-text-muted);}
-.fdy-help--error{color:var(--color-danger);}
+/* --danger is the tone word everywhere else in the kit; help text takes either (CATATAN-FREEDAY §11). */
+.fdy-help--error,.fdy-help--danger{color:var(--color-danger);}
 
 /* Freeday. Keyboard key */
 .fdy-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text);background:var(--color-surface-2);border:var(--bw) solid var(--color-border-strong);border-bottom-width:2px;border-radius:var(--radius-sm);}

package/dist/freeday.css

@@ -1519,7 +1519,8 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    remember to mark aria-hidden, and it cannot be forgotten. */
 .fdy-label--required::after{content:"*" / "";margin-left:var(--space-1);color:var(--color-danger);}
 .fdy-help{font-size:var(--text-xs);color:var(--color-text-muted);}
-.fdy-help--error{color:var(--color-danger);}
+/* --danger is the tone word everywhere else in the kit; help text takes either (CATATAN-FREEDAY §11). */
+.fdy-help--error,.fdy-help--danger{color:var(--color-danger);}
 
 /* Freeday. Keyboard key */
 .fdy-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:1.5rem;height:1.5rem;padding:0 var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);color:var(--color-text);background:var(--color-surface-2);border:var(--bw) solid var(--color-border-strong);border-bottom-width:2px;border-radius:var(--radius-sm);}

package/dist/freeday.js

@@ -409,10 +409,19 @@
     if (bp === last) return;
     last = bp;
     root.setAttribute('data-breakpoint', bp);
-    Array.prototype.forEach.call(document.querySelectorAll('[data-fdy-breakpoint-label]'), function (el) {
+    fillLabels(document);
+    root.dispatchEvent(new CustomEvent('fdy-breakpoint-change', { bubbles: true, detail: { breakpoint: bp } }));
+  }
+
+  /* Also run over late-mounted markup by the stack helpers, which find it through initAll: a label
+     rendered after load otherwise stayed empty until the next breakpoint change. */
+  function fillLabels(context) {
+    var ctx = context || document;
+    var bp = last || current();
+    if (ctx.matches && ctx.matches('[data-fdy-breakpoint-label]')) ctx.textContent = bp;
+    Array.prototype.forEach.call(ctx.querySelectorAll('[data-fdy-breakpoint-label]'), function (el) {
       el.textContent = bp;
     });
-    root.dispatchEvent(new CustomEvent('fdy-breakpoint-change', { bubbles: true, detail: { breakpoint: bp } }));
   }
 
   window.addEventListener('resize', update, { passive: true });
@@ -423,6 +432,7 @@
   }
 
   window.FreedayBreakpoint = {
+    initAll: fillLabels,
     get: function () { return last || current(); },
     current: current,
     // true if the current breakpoint is `name` or wider (e.g. is('md') → md, lg, or xl)
@@ -1328,7 +1338,9 @@
     initTriggers();
   }
 
-  window.FreedayCfl = { init: initTriggers };
+  /* initAll is what every stack helper looks for (useFreeday in Vue and React, FreedayBlazor.initAll):
+     without it they skipped this enhancer, and raw CFL markup rendered by a framework never opened. */
+  window.FreedayCfl = { init: initTriggers, initAll: initTriggers };
 })();
 
 /* Freeday, chart renderer (optional, zero-dependency, no external chart lib).
@@ -1845,8 +1857,10 @@
 /* Freeday, chip enhancer (optional, zero-dependency).
  * Two behaviours, both progressive enhancement:
  *
- * 1. Removable chips, any .fdy-chip__remove button removes its chip and emits a
- *    bubbling "fdy-chip-remove" (detail {value}).
+ * 1. Removable chips, any .fdy-chip__remove button emits a bubbling, CANCELABLE
+ *    "fdy-chip-remove" (detail {value}) and then removes its chip, unless a listener called
+ *    preventDefault(). Cancel it whenever the app owns the removal: a confirm step, or a chip
+ *    rendered from framework state, which should leave the DOM when the state does.
  * 2. Choice / filter groups, a [data-fdy-chips] container of interactive chips
  *    (.fdy-chip--choice / .fdy-chip--filter, each a <button>) toggles aria-pressed
  *    on click. Add data-single for one-at-a-time (radio-like) selection; filter
@@ -1872,8 +1886,12 @@
         if (rm) rm.remove();
         value = (clone.textContent || '').trim();
       }
-      chip.dispatchEvent(new CustomEvent('fdy-chip-remove', { bubbles: true, detail: { value: value } }));
-      chip.remove();
+      /* Cancelable, because the kit cannot know whether this removal needs asking first. Removing
+         unconditionally made a chip vanish while the app's own confirm dialog was still open, and
+         stay gone after Cancel, with the data intact and the screen wrong (CATATAN-FREEDAY §9). */
+      var ev = new CustomEvent('fdy-chip-remove', { bubbles: true, cancelable: true, detail: { value: value } });
+      chip.dispatchEvent(ev);
+      if (!ev.defaultPrevented) chip.remove();
     });
   }
 
@@ -5465,6 +5483,83 @@
   window.FreedayTree = { init: initTree, initAll: initAll };
 })();
 
+/* Freeday, un-hydrated hook warning (optional, zero-dependency, no markup of its own).
+ * Every enhancer marks the element it took over (`data-fdy-*-ready`). Markup that no initAll()
+ * ever reached carries the hook and not the mark, and it fails in the worst way available: it
+ * renders, looks finished, and does nothing, with no error anywhere. A `data-fdy-validate` form
+ * outside the subtree handed to useFreeday() neither paints a message nor fires fdy-form-valid,
+ * so its save button reads as dead (CATATAN-FREEDAY §10). The enhancer knows the attribute is
+ * there; the person who wrote it does not.
+ *
+ * So on the first click, focus or submit inside such an element this logs ONE console.warn per
+ * element, naming the hook, with the element itself as the second argument so devtools links it.
+ * Interaction, not load, is the trigger on purpose: a framework mounts and hydrates in between,
+ * and only once a person is touching the widget is "not enhanced yet" the same as "never".
+ *
+ * HOOKS pairs each hook selector with the ready flag its enhancer stamps on THAT element and the
+ * namespace that owns it. A hook whose enhancer is not loaded is skipped: that is a different
+ * mistake, and this message would misname it. test/docs.test.mjs fails if an enhancer gains a
+ * ready flag this table does not list.
+ */
+(function () {
+  'use strict';
+
+  var HOOKS = [
+    ['[data-fdy-app]', 'fdyAppShellReady', 'FreedayAppShell'],
+    ['[data-fdy-autocomplete]', 'fdyAcReady', 'FreedayAutocomplete'],
+    ['[data-fdy-carousel]', 'fdyCarouselReady', 'FreedayCarousel'],
+    ['[data-fdy-cascade]', 'fdyCascadeReady', 'FreedayCascade'],
+    ['[data-fdy-cfl]', 'fdyCflBound', 'FreedayCfl'],
+    ['[data-fdy-cfl-open]', 'fdyCflBound', 'FreedayCfl'],
+    ['[data-fdy-chart]', 'fdyChartReady', 'FreedayChart'],
+    ['[data-fdy-chips]', 'fdyChipsReady', 'FreedayChip'],
+    ['.fdy-chip__remove', 'fdyChipRmReady', 'FreedayChip'],
+    ['[data-fdy-datepicker]', 'fdyDpReady', 'FreedayDatepicker'],
+    ['[data-fdy-daterange]', 'fdyDrReady', 'FreedayDatepicker'],
+    ['[data-fdy-datetimepicker]', 'fdyDtReady', 'FreedayDatetime'],
+    ['[data-fdy-drawer]', 'fdyDrawerBound', 'FreedayDrawer'],
+    ['.fdy-drawer', 'fdyDrawerReady', 'FreedayDrawer'],
+    ['[data-fdy-validate]', 'fdyFormReady', 'FreedayForm'],
+    ['[data-fdy-mask]', 'fdyMaskReady', 'FreedayMask'],
+    ['[data-fdy-password]', 'fdyPwReady', 'FreedayMask'],
+    ['[data-fdy-menu]', 'fdyMenuReady', 'FreedayMenu'],
+    ['[data-fdy-number]', 'fdyNumberReady', 'FreedayNumber'],
+    ['[data-fdy-rating]', 'fdyRatingReady', 'FreedayRating'],
+    ['[data-fdy-search]', 'fdySearchReady', 'FreedaySearch'],
+    ['[data-fdy-combo]', 'fdyComboReady', 'FreedayCombo'],
+    ['[data-fdy-slider]', 'fdySliderReady', 'FreedaySlider'],
+    ['[data-fdy-stepper]', 'fdyStepperReady', 'FreedayStepper'],
+    ['[data-fdy-table]', 'fdyTableReady', 'FreedayTable'],
+    ['[data-fdy-tabs]', 'fdyTabsReady', 'FreedayTabs'],
+    ['[data-fdy-timepicker]', 'fdyTpReady', 'FreedayTimepicker'],
+    ['[data-fdy-tree]', 'fdyTreeReady', 'FreedayTree'],
+    ['[data-fdy-dropzone]', 'fdyUploadReady', 'FreedayUpload']
+  ];
+
+  var warned = typeof WeakSet === 'function' ? new WeakSet() : null;
+
+  function check(e) {
+    if (!warned || !e.target || !e.target.closest) return;
+    for (var i = 0; i < HOOKS.length; i++) {
+      var hook = HOOKS[i];
+      if (!window[hook[2]]) continue;
+      var el = e.target.closest(hook[0]);
+      if (!el || el.dataset[hook[1]] === '1' || warned.has(el)) continue;
+      warned.add(el);
+      console.warn('Freeday: this ' + hook[0] + ' was never enhanced, so it does nothing. Either it is '
+        + 'outside every initAll() scope (Vue/React: inside the element given to useFreeday(); Blazor: '
+        + 'FreedayBlazor.initAll after render; anything else: ' + hook[2] + '.initAll(el) once it is in '
+        + 'the DOM), or its markup lacks a part the enhancer needs (see COMPONENTS.md).', el);
+    }
+  }
+
+  ['click', 'focusin', 'submit'].forEach(function (type) {
+    document.addEventListener(type, check, true);
+  });
+
+  window.FreedayUnhydrated = { hooks: HOOKS };
+})();
+
 /* Freeday, file-upload enhancer (optional, zero-dependency).
  * A drop target that also opens the file dialog on click / Enter / Space, validates each file
  * (accept + max size), and renders a per-file row with explicit state. Actual upload is the
@@ -5485,7 +5580,8 @@
  * Emits bubbling CustomEvents. BOTH on the dropzone element, which is the one target a consumer
  * needs to listen on:
  *   "fdy-upload-add"    {file, rejected, reason, row}
- *   "fdy-upload-remove" {file}
+ *   "fdy-upload-remove" {file}, cancelable: preventDefault() keeps the row (e.g. to confirm
+ *                       removing a file the server already holds, then call row.el.remove())
  * `row` is the state machine over the rendered .fdy-file:
  *   .ready() (rest, where a dropped file starts) / .uploading() / .setProgress(pct) /
  *   .waiting(label) (sent, awaiting the server) / .done() / .fail(msg) / .el
@@ -5578,8 +5674,9 @@
          Firing on both would look safer, but it makes the pair asymmetric, one `add` and, for
          anyone delegating on a common ancestor, two `remove`s, which is its own silent bug. It
          also fixes the listless case: a row that was never attached bubbles to nothing at all. */
-      zone.dispatchEvent(new CustomEvent('fdy-upload-remove', { bubbles: true, detail: { file: file } }));
-      el.remove();
+      var ev = new CustomEvent('fdy-upload-remove', { bubbles: true, cancelable: true, detail: { file: file } });
+      zone.dispatchEvent(ev);
+      if (!ev.defaultPrevented) el.remove();
     });
     el.appendChild(icon);
     el.appendChild(meta);

package/docs/agent-onboarding.md

@@ -229,4 +229,5 @@ Order of work that avoids a half-migrated mess:
 - Keyboard: Tab reaches every control, focus is always visible, Esc closes overlays.
 - Form errors carry `aria-invalid` + a linked message; icon-only buttons have `aria-label`.
 - The interactive components on the screen have their enhancer loaded, and SPA-rendered DOM is
-  re-hydrated.
+  re-hydrated. Click each one once with devtools open: a `Freeday: this [data-fdy-…] was never
+  enhanced` warning means it sits outside every `initAll()` scope.

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

package/docs/integrations.md

@@ -40,8 +40,8 @@ Every integration comes down to one of these:
 | `freeday-mask` | `fdy-mask` `{value,raw}` | `FreedayMask` |
 | `freeday-form` | `fdy-form-invalid` `{invalid}` / `fdy-form-valid` | `FreedayForm` |
 | `freeday-table` | `fdy-table-change` · `fdy-row-select` | `FreedayTable` |
-| `freeday-chip` | `fdy-chip-change` `{value,pressed,selected}` · `fdy-chip-remove` `{value}` | `FreedayChip` |
-| `freeday-upload` | `fdy-upload-add` / `fdy-upload-remove` | `FreedayUpload` |
+| `freeday-chip` | `fdy-chip-change` `{value,pressed,selected}` · `fdy-chip-remove` `{value}`, cancelable | `FreedayChip` |
+| `freeday-upload` | `fdy-upload-add` / `fdy-upload-remove` (cancelable) | `FreedayUpload` |
 | `freeday-stepper` | `fdy-step-change` | `FreedayStepper` |
 | `freeday-carousel` | `fdy-carousel-change` | `FreedayCarousel` |
 | `freeday-breakpoint` | `fdy-breakpoint-change` | `FreedayBreakpoint` |

package/package.json

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

@@ -56,4 +56,5 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
    remember to mark aria-hidden, and it cannot be forgotten. */
 .fdy-label--required::after{content:"*" / "";margin-left:var(--space-1);color:var(--color-danger);}
 .fdy-help{font-size:var(--text-xs);color:var(--color-text-muted);}
-.fdy-help--error{color:var(--color-danger);}
+/* --danger is the tone word everywhere else in the kit; help text takes either (CATATAN-FREEDAY §11). */
+.fdy-help--error,.fdy-help--danger{color:var(--color-danger);}