@cahyo-dimas/freeday 3.13.0 → 3.14.0

package/CHANGELOG.md

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

package/COMPONENTS.md

@@ -52,6 +52,11 @@ live docs.
    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`
 
@@ -101,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` |
@@ -2367,6 +2373,45 @@ row.addEventListener('fdy-chip-remove', async (e) => {
 ```
 `--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.13.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.13.0)
+[![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.13.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v3.13.0)
+[![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-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);

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

@@ -18,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');
@@ -41,6 +42,7 @@
 
   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'));

package/dist/freeday-search.js

@@ -24,6 +24,7 @@
 
   function initSearch(root) {
     if (root.dataset.fdySearchReady === '1') return;
+    if (root.closest('[data-fdy-ignore]')) return;
     var input = root.querySelector('input');
     if (!input) return;
     root.dataset.fdySearchReady = '1';

package/dist/freeday-select.js

@@ -32,6 +32,7 @@
 
   function initCombo(root) {
     if (root.dataset.fdyComboReady === '1') return; // idempotent
+    if (root.closest('[data-fdy-ignore]')) return;
     var button = root.querySelector('.fdy-combo__button');
     var listbox = root.querySelector('.fdy-combo__listbox');
     var valueEl = root.querySelector('.fdy-combo__value');

package/dist/freeday-slider.js

@@ -12,6 +12,7 @@
 
   function initSlider(input) {
     if (input.dataset.fdySliderReady === '1') return;
+    if (input.closest('[data-fdy-ignore]')) return;
     input.dataset.fdySliderReady = '1';
     var out = input.id ? document.querySelector('output[for="' + input.id + '"]') : null;
     if (!out) return;

package/dist/freeday-sortable.js

@@ -0,0 +1,222 @@
+/* Freeday, sortable list enhancer (optional, zero-dependency).
+ * Reorder the children of a list by dragging a handle, or by focusing it and pressing ↑ / ↓. The
+ * keyboard path is not an extra: drag-only reordering locks out every keyboard and screen-reader
+ * user from a settings screen, and that path is the part each app used to write for itself
+ * (CATATAN-FREEDAY §15).
+ *
+ * Markup contract:
+ *  <ul class="fdy-sortable" data-fdy-sortable>            (or a <tbody>, or a <div>)
+ *    <li data-key="ketua" data-label="Ketua">
+ *      <button class="fdy-sortable__handle" type="button">…icon…</button> Ketua
+ *    </li>
+ *    <li data-key="sistem" data-fdy-sort-fixed>…</li>     (never moves, and nothing passes it)
+ *  </ul>
+ * The items are the container's element children. `data-key` names each in the event; `data-label`
+ * is what the handle's default aria-label and the announcement call it (the item text otherwise).
+ * `data-disabled` on the container switches reordering off, e.g. while the list is filtered, and
+ * the handles follow it through aria-disabled.
+ *
+ * Emits a bubbling, CANCELABLE "fdy-sort-change" on the container, detail {key, from, to, order},
+ * `order` being every item's key in the new order. Not cancelled, the kit moves the element, which
+ * is the whole job on a static page. A framework that renders the list from state cancels it and
+ * reorders the state instead, because the DOM is the framework's and an element moved behind its
+ * back leaves the two disagreeing about where each row is. Either way the kit announces the move
+ * and, after a keyboard step, puts focus back on the moved item's handle (looked up by data-key,
+ * since a framework re-render may have replaced the element).
+ *
+ * The drag shows where the item will land (is-drop-before / is-drop-after on the item it lands
+ * against) and moves nothing until the pointer is released; Escape cancels it. Exposes
+ * window.FreedaySortable.
+ */
+(function () {
+  'use strict';
+
+  var TEXT = {
+    handle: 'Move {label}. Drag, or press the up and down arrow keys.',
+    moved: '{label} moved to position {position} of {total}.'
+  };
+  /* Kebab-cased for the lookup, see the note in freeday-upload.js. */
+  function textAttr(root, key) {
+    if (!root || !root.getAttribute) return null;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    return kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+  }
+  function textOf(root, key, vars) {
+    var custom = textAttr(root, key);
+    var s = custom != null && custom !== '' ? custom : TEXT[key];
+    for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) s = s.split('{' + k + '}').join(vars[k]);
+    return s;
+  }
+
+  var HANDLE = '.fdy-sortable__handle';
+
+  var live = null;
+  function announce(message) {
+    if (live === null) {
+      live = document.createElement('div');
+      live.className = 'fdy-visually-hidden';
+      live.setAttribute('aria-live', 'polite');
+      document.body.appendChild(live);
+    }
+    /* The same sentence twice in a row is no change, and a live region announces changes. */
+    live.textContent = live.textContent === message ? message + ' ' : message;
+  }
+
+  function items(root) {
+    return Array.prototype.slice.call(root.children);
+  }
+  function keyOf(item, index) {
+    var key = item.getAttribute('data-key');
+    return key !== null ? key : String(index);
+  }
+  function labelOf(item) {
+    var label = item.getAttribute('data-label');
+    return label !== null ? label : (item.textContent || '').replace(/\s+/g, ' ').trim();
+  }
+  function disabled(root) {
+    return root.hasAttribute('data-disabled');
+  }
+  function itemOf(root, node) {
+    for (var n = node; n && n !== root; n = n.parentElement) {
+      if (n.parentElement === root) return n;
+    }
+    return null;
+  }
+
+  /* A move is allowed only if it shifts no fixed item, which is the same as saying the item does
+     not start fixed and does not cross one on its way. */
+  function allowed(list, from, to) {
+    if (from === to || to < 0 || to >= list.length) return false;
+    var lo = Math.min(from, to), hi = Math.max(from, to);
+    for (var i = lo; i <= hi; i++) if (list[i].hasAttribute('data-fdy-sort-fixed')) return false;
+    return true;
+  }
+
+  function syncHandles(root) {
+    var off = disabled(root) ? 'true' : 'false';
+    items(root).forEach(function (item) {
+      var handle = item.querySelector(HANDLE);
+      if (!handle) return;
+      if (handle.getAttribute('aria-disabled') !== off) handle.setAttribute('aria-disabled', off);
+      if (!handle.hasAttribute('aria-label')) handle.setAttribute('aria-label', textOf(root, 'handle', { label: labelOf(item) }));
+    });
+  }
+
+  function commit(root, from, to, refocus) {
+    var list = items(root);
+    var item = list[from];
+    var key = keyOf(item, from);
+    var keys = list.map(keyOf);
+    keys.splice(to, 0, keys.splice(from, 1)[0]);
+    var ev = new CustomEvent('fdy-sort-change', {
+      bubbles: true,
+      cancelable: true,
+      detail: { key: key, from: from, to: to, order: keys }
+    });
+    root.dispatchEvent(ev);
+    if (!ev.defaultPrevented) root.insertBefore(item, to > from ? list[to].nextSibling : list[to]);
+    announce(textOf(root, 'moved', { label: labelOf(item), position: String(to + 1), total: String(list.length) }));
+    if (!refocus) return;
+    /* After the app's own render, which a framework runs after this handler returns. Moving a focused
+       element drops its focus, and a keyed re-render may have replaced the element outright. */
+    setTimeout(function () {
+      var now = items(root);
+      var moved = item.parentElement === root ? item : now.filter(function (el, i) { return keyOf(el, i) === key; })[0];
+      var handle = moved ? moved.querySelector(HANDLE) : null;
+      if (handle && document.activeElement !== handle) handle.focus();
+    }, 0);
+  }
+
+  function initSortable(root) {
+    if (root.dataset.fdySortableReady === '1') return;
+    if (root.closest('[data-fdy-ignore]')) return;
+    root.dataset.fdySortableReady = '1';
+    syncHandles(root);
+    /* Rows a framework adds later get their aria-label, and data-disabled reaches every handle. */
+    new MutationObserver(function () { syncHandles(root); })
+      .observe(root, { childList: true, attributes: true, attributeFilter: ['data-disabled'] });
+
+    root.addEventListener('keydown', function (e) {
+      var handle = e.target.closest ? e.target.closest(HANDLE) : null;
+      if (!handle || !root.contains(handle) || disabled(root)) return;
+      if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') return;
+      e.preventDefault();
+      var list = items(root);
+      var from = list.indexOf(itemOf(root, handle));
+      var to = from + (e.key === 'ArrowUp' ? -1 : 1);
+      if (from !== -1 && allowed(list, from, to)) commit(root, from, to, true);
+    });
+
+    var drag = null;
+
+    function clearMarks() {
+      items(root).forEach(function (el) { el.classList.remove('is-drop-before', 'is-drop-after'); });
+    }
+    function end(apply) {
+      if (drag === null) return;
+      var d = drag;
+      drag = null;
+      document.removeEventListener('keydown', onEscape, true);
+      clearMarks();
+      d.item.classList.remove('is-dragging');
+      root.classList.remove('is-sorting');
+      if (apply && d.started && d.to !== null) commit(root, d.from, d.to, false);
+    }
+    function onEscape(e) {
+      if (e.key === 'Escape') { e.preventDefault(); end(false); }
+    }
+
+    root.addEventListener('pointerdown', function (e) {
+      var handle = e.target.closest ? e.target.closest(HANDLE) : null;
+      if (!handle || !root.contains(handle) || disabled(root) || e.button !== 0) return;
+      var item = itemOf(root, handle);
+      if (!item) return;
+      e.preventDefault();
+      handle.focus();
+      handle.setPointerCapture(e.pointerId);
+      drag = { item: item, from: items(root).indexOf(item), started: false, to: null };
+      document.addEventListener('keydown', onEscape, true);
+    });
+
+    root.addEventListener('pointermove', function (e) {
+      if (drag === null) return;
+      /* No travel threshold: a press that never leaves its own row resolves to to === from, which
+         allowed() refuses, so a click on the handle cannot reorder anything. */
+      if (!drag.started) {
+        drag.started = true;
+        drag.item.classList.add('is-dragging');
+        root.classList.add('is-sorting');
+      }
+      clearMarks();
+      drag.to = null;
+      var list = items(root);
+      var over = itemOf(root, document.elementFromPoint(e.clientX, e.clientY));
+      if (!over) return;
+      var rect = over.getBoundingClientRect();
+      var after = e.clientY > rect.top + rect.height / 2;
+      var slot = list.indexOf(over) + (after ? 1 : 0);
+      var to = slot > drag.from ? slot - 1 : slot;
+      if (!allowed(list, drag.from, to)) return;
+      drag.to = to;
+      over.classList.add(after ? 'is-drop-after' : 'is-drop-before');
+    });
+
+    root.addEventListener('pointerup', function () { end(true); });
+    root.addEventListener('pointercancel', function () { end(false); });
+  }
+
+  function initAll(context) {
+    var root = context || document;
+    /* root included: querySelectorAll never matches its own root, and a framework ref often sits ON the widget. */
+    if (root.matches && root.matches('[data-fdy-sortable]')) initSortable(root);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-sortable]'), initSortable);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedaySortable = { init: initSortable, initAll: initAll };
+})();

package/dist/freeday-stepper.js

@@ -49,6 +49,7 @@
 
   function initStepper(root) {
     if (root.dataset.fdyStepperReady === '1') return;
+    if (root.closest('[data-fdy-ignore]')) return;
     root.dataset.fdyStepperReady = '1';
 
     var steps = Array.prototype.slice.call(root.querySelectorAll('.fdy-step'));