@cahyo-dimas/freeday 3.12.1 → 3.14.0

package/dist/freeday.js

@@ -48,6 +48,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');
@@ -246,6 +247,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');
@@ -409,10 +411,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 +434,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)
@@ -650,6 +662,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');
@@ -830,6 +843,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');
 
@@ -1295,6 +1309,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);
@@ -1306,6 +1321,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);
@@ -1328,7 +1344,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).
@@ -1822,6 +1840,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);
   }
@@ -1845,8 +1864,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
@@ -1860,6 +1881,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');
@@ -1872,13 +1894,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');
@@ -2210,6 +2237,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');
 
@@ -2739,6 +2767,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"]');
@@ -2828,6 +2857,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');
 
@@ -2906,6 +2936,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(); });
@@ -2916,6 +2947,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);
@@ -3133,6 +3165,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');
@@ -3317,6 +3350,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;
@@ -3339,6 +3373,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');
@@ -3402,6 +3437,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"]');
@@ -3521,6 +3557,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]'));
@@ -3699,6 +3736,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'));
@@ -3769,6 +3807,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';
@@ -3855,6 +3894,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');
@@ -4067,6 +4107,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;
@@ -4091,6 +4132,229 @@
   window.FreedaySlider = { init: initSlider, initAll: initAll };
 })();
 
+/* 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 };
+})();
+
 /* Freeday, stepper/wizard enhancer (optional, zero-dependency).
  * Drives a step header + panels: prev/next navigation, completed/active state, and
  * clicking a reached step to revisit it (linear, can't skip ahead). Auto-inits
@@ -4142,6 +4406,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'));
@@ -4341,6 +4606,7 @@
 
   function initTable(root) {
     if (root.dataset.fdyTableReady === '1') return;
+    if (root.closest('[data-fdy-ignore]')) return;
     var table = root.querySelector('table.fdy-table');
     var tbody = table && table.querySelector('tbody');
     if (!table || !tbody) return;
@@ -4884,6 +5150,7 @@
 
   function initTabs(root) {
     if (root.dataset.fdyTabsReady === '1') return;
+    if (root.closest('[data-fdy-ignore]')) return;
     var tabs = Array.prototype.slice.call(root.querySelectorAll('[role="tab"]'));
     if (tabs.length === 0) return;
     root.dataset.fdyTabsReady = '1';
@@ -4999,6 +5266,7 @@
 
   function initTime(wrap) {
     if (wrap.dataset.fdyTpReady === '1') return;
+    if (wrap.closest('[data-fdy-ignore]')) return;
     wrap.dataset.fdyTpReady = '1';
     wrap.classList.add('fdy-timepicker');
 
@@ -5435,6 +5703,7 @@
 
   function initTree(tree) {
     if (tree.dataset.fdyTreeReady === '1') return;
+    if (tree.closest('[data-fdy-ignore]')) return;
     tree.dataset.fdyTreeReady = '1';
     Array.prototype.forEach.call(tree.querySelectorAll('input[type="checkbox"]'), function (box) {
       // A branch checkbox lives inside <summary>; keep its click from toggling the branch.
@@ -5465,6 +5734,90 @@
   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.
+ *
+ * `data-fdy-ignore` on an element or any ancestor is the sanctioned way out: every enhancer skips
+ * that subtree, and this stays quiet about it. It is for markup whose behaviour something else
+ * owns: the kit's own Vue/React FdyDrawer, and kit classes an app uses for their look
+ * alone (CATATAN-FREEDAY §14: a chip matrix the app drives itself).
+ */
+(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-sortable]', 'fdySortableReady', 'FreedaySortable'],
+    ['[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) || el.closest('[data-fdy-ignore]')) 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). If the app '
+        + 'drives this element itself on purpose, mark it or an ancestor data-fdy-ignore.', 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 +5838,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 +5932,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);
@@ -5693,6 +6048,7 @@
 
   function initDropzone(zone) {
     if (zone.dataset.fdyUploadReady === '1') return;
+    if (zone.closest('[data-fdy-ignore]')) return;
     zone.dataset.fdyUploadReady = '1';
 
     var input = zone.querySelector('input[type="file"]');

package/docs/agent-onboarding.md

@@ -118,6 +118,8 @@ Recent additions most likely to replace something an app hand-rolled (all detail
 
 | Reach for | Instead of |
 |---|---|
+| `data-fdy-sortable` + `.fdy-sortable__handle` | SortableJS plus a hand-written arrow-key path, or a number box for an `order` column |
+| `data-fdy-ignore` | narrowing `useFreeday()` to dodge kit markup the app drives itself, which leaves every form outside the scope dead |
 | `.fdy-btn--stretch` | a hand-rolled overlay to make a card or list row clickable |
 | `[data-fdy-number]` | a bare `<input type="number">` with the browser's own spin buttons |
 | `clearable` on `FdyCfl` / `FdyDatepicker` | a value that can be set but never unset |
@@ -229,4 +231,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.14.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,9 @@ 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-sortable` | `fdy-sort-change` `{key,from,to,order}`, cancelable | `FreedaySortable` |
 | `freeday-stepper` | `fdy-step-change` | `FreedayStepper` |
 | `freeday-carousel` | `fdy-carousel-change` | `FreedayCarousel` |
 | `freeday-breakpoint` | `fdy-breakpoint-change` | `FreedayBreakpoint` |