@cahyo-dimas/freeday 3.12.1 → 3.14.0

package/CHANGELOG.md

@@ -9,19 +9,143 @@ 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.14.0] - 2026-10-29
+
+**Daftar terurut lewat seret dan papan ketik, dan satu atribut untuk berkata "ini bukan urusan
+kit".** Dua butir dari `CATATAN-FREEDAY.md` app ronda (§14 dan §15). Mengaudit §14 menemukan satu
+cacat yang tak dilaporkan: `FdyDrawer` Vue dan React bisa ditutup lewat backdrop walau
+`dismissible=false`.
+
+### Added
+- **`data-fdy-sortable`, enhancer ke-32** (`#103`), `src/freeday-sortable.js` plus
+  `.fdy-sortable__handle`. Baris diseret lewat pegangannya, atau dipindah satu langkah dengan ↑ / ↓
+  saat pegangannya terfokus. Lima layar di app ronda menyuruh orang mengetik nomor urut di kotak
+  angka, dan app itu akhirnya menulis sendiri SortableJS plus jalur papan ketiknya. Selama diseret,
+  garis menunjukkan tempat baris akan mendarat dan tak ada elemen yang berpindah sebelum tombol
+  dilepas; Escape membatalkan. `fdy-sort-change` (`{key, from, to, order}`) dapat dibatalkan,
+  dengan pola yang sama seperti chip di 3.13.0: halaman statis membiarkannya dan kit memindah
+  elemennya, sedangkan framework membatalkannya lalu mengurutkan state-nya sendiri, sebab DOM-nya
+  milik framework. Sesudah langkah papan ketik, fokus kembali ke pegangan baris yang sama, dicari
+  lewat `data-key` supaya tetap ketemu walau render ulang mengganti elemennya. Perpindahan
+  diumumkan di live region. `data-fdy-sort-fixed` menandai baris yang tak bisa dilewati, dan
+  `data-disabled` mematikan pengurutan selama daftar dicari atau disaring. Yang sengaja tidak
+  dibuat: gulir otomatis saat seretan mendekati tepi halaman, dan memindah baris antar-daftar.
+- **`data-fdy-ignore`** (`#102`). Di elemen atau leluhur mana pun, setiap enhancer melewati
+  subtree itu, termasuk di bawah `initAll(document)` yang eksplisit, dan peringatan hook dari 3.13.0
+  ikut diam. Pesan peringatannya kini menyebut atribut ini sebagai jalan keluar yang sah. Pemicunya
+  matriks chip di layar Pola rotasi, yang perilakunya dikelola app sendiri, sehingga setiap klik di
+  situ mencetak peringatan untuk sesuatu yang memang disengaja. Nama yang diusulkan catatannya,
+  `data-fdy-raw`, tidak dipakai: di dokumen kit "raw" berarti jalur markup + enhancer, kebalikan
+  dari maksud atribut ini.
+
+### Fixed
+- **`FdyDrawer` Vue dan React tertutup lewat backdrop walau `dismissible=false`** (`#102`), begitu
+  `useFreeday()` dipasang di seluruh halaman. Wrapper itu merender `.fdy-drawer`, yang merupakan hook
+  enhancer drawer, sehingga enhancer memasang handler backdrop kedua yang memanggil `close()`
+  langsung. Dialognya tertutup, `open` di state app tetap `true`, dan tak ada event `close`. Di luar
+  cakupan pemindai, wrapper yang sama memicu peringatan 3.13.0 setiap kali diklik. Keduanya kini
+  membawa `data-fdy-ignore`. `FdyChart` juga merender hook, tetapi sejak awal sudah mencap penanda
+  siapnya sendiri; ia kini dijaga uji supaya tetap begitu.
+
+### Catatan
+- **Angka 9 menit di §14 bukan ongkos pemindaian.** Catatannya mengukur `useFreeday()` di seluruh
+  halaman pada 9 menit 6 detik untuk sepuluh uji e2e, dibanding 19,1 detik untuk cakupan modal saja,
+  dan mempersempit cakupannya karena itu. Pada bentuk matriks yang sama (38 baris × 4 shift, dua chip
+  per sel, 304 tombol), satu `rehydrate()` di seluruh halaman memakan 1,1 ms dan satu update reaktif
+  end-to-end 2,1 ms. Sekitar 55 detik per uji lebih mirip uji yang menunggu sampai timeout. Kalau
+  angka itu diambil sebelum 3.13.0, waktu itu kit masih menghapus chip yang diklik, dan itu cukup
+  menjelaskannya. Ini dugaan; pengukuran ulangnya ada di sisi app.
+
+### Gerbang
+- `docs.test.mjs`: setiap fungsi init yang mencap penanda hook wajib memeriksa `data-fdy-ignore`
+  sebelum mencap, dan setiap wrapper Vue/React yang merender hook enhancer wajib menandainya
+  `data-fdy-ignore` atau mencap penanda siapnya sendiri. Snapshot string enhancer mendapat dua
+  string sortable.
+- `browser/app-owned.mjs`: `useFreeday()` di seluruh halaman atas matriks itu, dengan ambang longgar
+  (25 ms per rehydrate, 50 ms per update) yang menangkap pemindaian yang meledak, bukan runner yang
+  lambat. Drawer `dismissible=false` bertahan dari klik backdrop, chart ter-render sekali, subtree
+  yang diabaikan tetap tak tersentuh, dan tak ada satu pun peringatan.
+- `browser/sortable.mjs`, dengan mouse dan papan ketik asli: tanda pendaratan di tengah seretan,
+  Escape, klik yang bukan seretan, baris tetap, keadaan nonaktif, perubahan yang dibatalkan tak
+  menyentuh DOM, dan list Vue ber-key yang mengurutkan state-nya sendiri.
+- `browser/harness.mjs` mendapat `dragFromTo` dan mengekspos `clickAt`.
+- Dua belas mutasi diverifikasi merah. Satu mutasi yang tetap hijau membuang ambang jarak seret dari
+  enhancer: tekanan yang tak meninggalkan barisnya sendiri sudah ditolak `allowed()`.
+
+## [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 +218,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 +230,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 +240,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 +250,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 +260,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,15 @@ 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.
+   **`data-fdy-ignore` says "not yours".** On an element or any ancestor, every enhancer skips that
+   subtree, even under an explicit `initAll(document)`, and the warning above stays quiet. Use it
+   where the app drives kit-styled markup itself, such as a chip matrix with its own removal flow.
+   The Vue and React `FdyDrawer` carry it already, so a page-wide `useFreeday()` cannot hand the
+   drawer enhancer a second backdrop handler.
 
 ### Containment — why the kit's containers are `position:relative`
 
@@ -93,6 +106,7 @@ element is fine. Events are bubbling
 | `data-fdy-tree` | `freeday-tree.js` | `FreedayTree` | — |
 | `data-fdy-rating` | `freeday-rating.js` | `FreedayRating` | — (native `change`) |
 | `data-fdy-slider` | `freeday-slider.js` | `FreedaySlider` | — (native `input`) |
+| `data-fdy-sortable` | `freeday-sortable.js` | `FreedaySortable` | `fdy-sort-change` |
 | `data-fdy-number` | `freeday-number.js` | `FreedayNumber` | — (native `input`, `change`) |
 | `data-fdy-search` | `freeday-search.js` | `FreedaySearch` | `fdy-search` (+ native `input` on clear) |
 | `data-fdy-copy="value"` (delegated, no hydration) | `freeday-copy.js` | `FreedayCopy` | `fdy-copy` |
@@ -562,7 +576,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 +1228,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 +1774,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,8 +2356,62 @@ 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.
 
+## Sortable list — `data-fdy-sortable`
+Reorder a list by dragging a handle, or by focusing the handle and pressing ↑ / ↓. Needs
+`freeday-sortable.js`. The kit draws the handle and the drag states; the list keeps whatever look it
+already had (`.fdy-list`, a table body, plain rows).
+
+- Container: `.fdy-sortable` + `data-fdy-sortable` on a `<ul>`/`<ol>`, a `<tbody>` or a `<div>`.
+  Its element children are the items.
+- Item: `data-key` (the id the event reports, **required** when a framework renders the list),
+  `data-label` (the name read out, the item's text otherwise), and `data-fdy-sort-fixed` for an item
+  that never moves and that nothing can pass, such as a system row pinned to one end.
+- Handle: `<button class="fdy-sortable__handle" type="button">` inside the item, icon inside. With no
+  `aria-label` of your own it gets *Move {label}. Drag, or press the up and down arrow keys.*
+- `data-disabled` on the container switches reordering off, and the handles follow through
+  `aria-disabled`. Set it while the list is searched or filtered, where a row's visible position is
+  not its stored one.
+- States, set by the enhancer: `is-sorting` on the container, `is-dragging` on the item, and
+  `is-drop-before` / `is-drop-after` on the item it will land against. Nothing moves until the
+  pointer is released, and Escape cancels.
+- Event: `fdy-sort-change` on the container, `detail {key, from, to, order}`, **cancelable**. Left
+  alone, the kit moves the element. Under Vue, React or Blazor, cancel it and reorder your state,
+  because the DOM is the framework's. Either way the kit announces *{label} moved to position {n} of
+  {total}.* in a polite live region, and after a keyboard step it puts focus back on the moved
+  item's handle, found by `data-key` so a re-render that replaced the element still gets it.
+- Strings: `data-fdy-text-handle`, `data-fdy-text-moved` on the container.
+- Not in the kit: scrolling the page while a drag nears its edge, and moving items between lists.
+  Keep a sortable list short enough to see whole, or paginate it.
+
+```vue
+<ul ref="list" class="fdy-list fdy-sortable" data-fdy-sortable
+    :data-disabled="filtered ? '' : undefined"
+    @fdy-sort-change.prevent="(e) => saveOrder(e.detail.order)">
+  <li v-for="r in rows" :key="r.id" class="fdy-list__row" :data-key="r.id" :data-label="r.name">
+    <button class="fdy-sortable__handle" type="button"><IconGrip class="fdy-icon" aria-hidden="true" /></button>
+    {{ r.name }}
+  </li>
+</ul>
+<!-- useFreeday(list) in <script setup> -->
+```
+
 ## Timeline — `.fdy-timeline`
 Vertical event feed, pure CSS. `<ol class="fdy-timeline">` of `.fdy-timeline__item` (`--muted`
 `--success` `--warning` `--danger`) with `__marker` `__time` `__title` `__text`. Status is carried

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.14.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.14.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.14.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.14.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/adapters/react/components/FdyDrawer.tsx

@@ -7,6 +7,9 @@ import { useEffect, useId, useRef } from 'react';
 // through app state, backdrop-click via `event.target === dialogEl`) applied to a drawer that anchors
 // left (default) or right. Native <dialog> supplies the focus trap, focus restore, top-layer stacking
 // and inert background; `dismissible` (default true) gates Esc + backdrop dismissal.
+// `data-fdy-ignore` on the root: this component owns the behaviour, so a page-wide useFreeday() must
+// not hand `.fdy-drawer` to the enhancer as well. Its backdrop handler calls close() past
+// `dismissible` and leaves `open` true on a dialog that is already closed.
 
 export interface FdyDrawerProps {
   open: boolean;
@@ -37,6 +40,7 @@ export function FdyDrawer(props: FdyDrawerProps): JSX.Element {
     <dialog
       ref={dialogRef}
       className={drawerClass}
+      data-fdy-ignore=""
       aria-labelledby={titleId}
       onCancel={(e): void => {
         e.preventDefault();

package/adapters/react/index.d.ts

@@ -23,6 +23,8 @@ export interface FdyMaskDetail { value: string; raw: string }
 export interface FdyFormInvalidDetail { invalid: HTMLElement[] }
 export interface FdyChipChangeDetail { value: string; pressed: boolean; selected: string[] }
 export interface FdyChipRemoveDetail { value: string }
+/** `fdy-sort-change`, cancelable: `order` is every item's `data-key` in the new order. */
+export interface FdySortChangeDetail { key: string; from: number; to: number; order: string[] }
 export interface FdyCflSelectDetail { row?: unknown; rows?: unknown[] }
 export interface FdyTableChangeDetail { page: number; sort: string | null; query: string }
 

package/adapters/vue/components/FdyDrawer.vue

@@ -7,6 +7,9 @@ import { computed, onMounted, useId, watch, type ComputedRef, type Ref, ref } fr
 // dialogEl`, applied to a drawer that anchors left (default) or right. Native <dialog> supplies the
 // focus trap, focus restore, top-layer stacking and inert background; `dismissible` (default true)
 // gates Esc + backdrop dismissal.
+// `data-fdy-ignore` on the root: this component owns the behaviour, so a page-wide useFreeday() must
+// not hand `.fdy-drawer` to the enhancer as well. Its backdrop handler calls close() past
+// `dismissible` and leaves `open` true on a dialog that is already closed.
 
 // dismissible MUST go through withDefaults: Vue's boolean-cast gives an omitted Boolean prop
 // `false`, not `undefined`, so a bare `props.dismissible !== false` would make an un-annotated
@@ -53,6 +56,7 @@ function onClick(e: MouseEvent): void {
   <dialog
     ref="dialogEl"
     :class="drawerClass"
+    data-fdy-ignore
     :aria-labelledby="titleId"
     @cancel.prevent="onCancel"
     @click="onClick"

package/adapters/vue/index.d.ts

@@ -93,5 +93,7 @@ export interface FdyMaskDetail { value: string; raw: string }
 export interface FdyFormInvalidDetail { invalid: HTMLElement[] }
 export interface FdyChipChangeDetail { value: string; pressed: boolean; selected: string[] }
 export interface FdyChipRemoveDetail { value: string }
+/** `fdy-sort-change`, cancelable: `order` is every item's `data-key` in the new order. */
+export interface FdySortChangeDetail { key: string; from: number; to: number; order: string[] }
 export interface FdyCflSelectDetail { row?: unknown; rows?: unknown[] }
 export interface FdyTableChangeDetail { page: number; sort: string | null; query: string }

package/dist/freeday-app-shell.js

@@ -46,6 +46,7 @@
 
   function initShell(app) {
     if (app.dataset.fdyAppShellReady === '1') return;
+    if (app.closest('[data-fdy-ignore]')) return;
     app.dataset.fdyAppShellReady = '1';
 
     var toggle = app.querySelector('.fdy-app__navtoggle');

package/dist/freeday-autocomplete.js

@@ -18,6 +18,7 @@
 
   function initAutocomplete(root) {
     if (root.dataset.fdyAcReady === '1') return;
+    if (root.closest('[data-fdy-ignore]')) return;
     root.dataset.fdyAcReady = '1';
 
     var input = root.querySelector('input[role="combobox"]') || root.querySelector('input');

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-carousel.js

@@ -46,6 +46,7 @@
 
   function initCarousel(root) {
     if (root.dataset.fdyCarouselReady === '1') return;
+    if (root.closest('[data-fdy-ignore]')) return;
     root.dataset.fdyCarouselReady = '1';
 
     var viewport = root.querySelector('.fdy-carousel__viewport');

package/dist/freeday-cascade.js

@@ -84,6 +84,7 @@
 
   function initCascade(wrap) {
     if (wrap.dataset.fdyCascadeReady === '1') return;
+    if (wrap.closest('[data-fdy-ignore]')) return;
     wrap.dataset.fdyCascadeReady = '1';
     wrap.classList.add('fdy-cascade');
 

package/dist/freeday-cfl.js

@@ -207,6 +207,7 @@
 
   function bindGroup(group) {
     if (group.dataset.fdyCflBound === '1') return;
+    if (group.closest('[data-fdy-ignore]')) return;
     var dialog = document.getElementById(group.getAttribute('data-fdy-cfl'));
     if (!dialog) return;
     initDialog(dialog);
@@ -218,6 +219,7 @@
 
   function bindOpener(opener) {
     if (opener.dataset.fdyCflBound === '1') return;
+    if (opener.closest('[data-fdy-ignore]')) return;
     var dialog = document.getElementById(opener.getAttribute('data-fdy-cfl-open'));
     if (!dialog) return;
     initDialog(dialog);
@@ -240,5 +242,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-chart.js

@@ -489,6 +489,7 @@
   // Auto-init renders once; explicit update() re-renders after data changes.
   function initChart(el) {
     if (el.dataset.fdyChartReady === '1') return;
+    if (el.closest('[data-fdy-ignore]')) return;
     el.dataset.fdyChartReady = '1';
     renderChart(el);
   }

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
@@ -16,6 +18,7 @@
 
   function initRemove(btn) {
     if (btn.dataset.fdyChipRmReady === '1') return;
+    if (btn.closest('[data-fdy-ignore]')) return;
     btn.dataset.fdyChipRmReady = '1';
     btn.addEventListener('click', function () {
       var chip = btn.closest('.fdy-chip');
@@ -28,13 +31,18 @@
         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();
     });
   }
 
   function initGroup(group) {
     if (group.dataset.fdyChipsReady === '1') return;
+    if (group.closest('[data-fdy-ignore]')) return;
     group.dataset.fdyChipsReady = '1';
     var single = group.hasAttribute('data-single');
     if (!group.getAttribute('role')) group.setAttribute('role', 'group');

package/dist/freeday-datepicker.js

@@ -118,6 +118,7 @@
 
   function initPicker(wrap) {
     if (wrap.dataset.fdyDpReady === '1') return wrap._fdyDp || null;
+    if (wrap.closest('[data-fdy-ignore]')) return null;
     wrap.dataset.fdyDpReady = '1';
     wrap.classList.add('fdy-datepicker');
 
@@ -647,6 +648,7 @@
 
   function initRange(root) {
     if (root.dataset.fdyDrReady === '1') return;
+    if (root.closest('[data-fdy-ignore]')) return;
     root.dataset.fdyDrReady = '1';
     var fromEl = root.querySelector('[data-fdy-datepicker][data-role="from"]');
     var toEl = root.querySelector('[data-fdy-datepicker][data-role="to"]');

package/dist/freeday-datetime.js

@@ -17,6 +17,7 @@
 
   function initDatetime(wrap) {
     if (wrap.dataset.fdyDtReady === '1') return;
+    if (wrap.closest('[data-fdy-ignore]')) return;
     wrap.dataset.fdyDtReady = '1';
     wrap.classList.add('fdy-datetimepicker');
 

package/dist/freeday-drawer.js

@@ -8,6 +8,7 @@
 
   function initDrawer(dialog) {
     if (dialog.dataset.fdyDrawerReady === '1') return;
+    if (dialog.closest('[data-fdy-ignore]')) return;
     dialog.dataset.fdyDrawerReady = '1';
     // Click on the backdrop (target is the dialog box itself) closes it.
     dialog.addEventListener('click', function (e) { if (e.target === dialog) dialog.close(); });
@@ -18,6 +19,7 @@
 
   function bindTrigger(btn) {
     if (btn.dataset.fdyDrawerBound === '1') return;
+    if (btn.closest('[data-fdy-ignore]')) return;
     var dialog = document.getElementById(btn.getAttribute('data-fdy-drawer'));
     if (!dialog) return;
     initDrawer(dialog);

package/dist/freeday-form.js

@@ -186,6 +186,7 @@
 
   function initForm(form) {
     if (form.dataset.fdyFormReady === '1') return;
+    if (form.closest('[data-fdy-ignore]')) return;
     form.dataset.fdyFormReady = '1';
     form.setAttribute('novalidate', '');
     var eager = form.hasAttribute('data-fdy-eager');

package/dist/freeday-mask.js

@@ -79,6 +79,7 @@
 
   function initMask(el) {
     if (el.dataset.fdyMaskReady === '1') return;
+    if (el.closest('[data-fdy-ignore]')) return;
     el.dataset.fdyMaskReady = '1';
     var pattern = el.getAttribute('data-fdy-mask') || '';
     if (!pattern) return;
@@ -101,6 +102,7 @@
 
   function initReveal(input) {
     if (input.dataset.fdyPwReady === '1') return;
+    if (input.closest('[data-fdy-ignore]')) return;
     input.dataset.fdyPwReady = '1';
 
     var group = document.createElement('span');

package/dist/freeday-menu.js

@@ -19,6 +19,7 @@
 
   function initMenu(wrap) {
     if (wrap.dataset.fdyMenuReady === '1') return;
+    if (wrap.closest('[data-fdy-ignore]')) return;
     wrap.dataset.fdyMenuReady = '1';
     var trigger = wrap.querySelector('[aria-haspopup="menu"]');
     var menu = wrap.querySelector('.fdy-menu, [role="menu"]');

package/dist/freeday-number.js

@@ -27,6 +27,7 @@
 
   function initNumber(root) {
     if (root.dataset.fdyNumberReady === '1') return;
+    if (root.closest('[data-fdy-ignore]')) return;
 
     var input = root.querySelector('input[type="number"]');
     var buttons = Array.prototype.slice.call(root.querySelectorAll('[data-fdy-number-step]'));

package/dist/freeday-rating.js

@@ -8,6 +8,7 @@
 
   function initRating(root) {
     if (root.dataset.fdyRatingReady === '1') return;
+    if (root.closest('[data-fdy-ignore]')) return;
     root.dataset.fdyRatingReady = '1';
 
     var stars = Array.prototype.slice.call(root.querySelectorAll('.fdy-rating__star'));