@cahyo-dimas/freeday 3.13.0 → 3.14.1

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'));

package/dist/freeday-table.js

@@ -77,6 +77,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;

package/dist/freeday-tabs.js

@@ -16,6 +16,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';

package/dist/freeday-timepicker.js

@@ -43,6 +43,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');
 

package/dist/freeday-tree.js

@@ -66,6 +66,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.

package/dist/freeday-unhydrated.js

@@ -15,6 +15,11 @@
  * 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';
@@ -43,6 +48,7 @@
     ['[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'],
@@ -59,12 +65,13 @@
       var hook = HOOKS[i];
       if (!window[hook[2]]) continue;
       var el = e.target.closest(hook[0]);
-      if (!el || el.dataset[hook[1]] === '1' || warned.has(el)) continue;
+      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).', el);
+        + '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);
     }
   }
 

package/dist/freeday-upload.js

@@ -228,6 +228,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/dist/freeday.bundle.css

@@ -1285,7 +1285,8 @@ a { color: var(--color-primary-strong); }
  * > (.fdy-app__topbar, .fdy-app__main)). The __content wrapper gives the sticky
  * topbar a tall containing block so it can travel, a bare grid cell can't. */
 .fdy-app{display:flex;align-items:stretch;min-height:100vh;background:var(--color-surface-2);}
-.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:var(--fdy-app-sidebar-w,15.5rem);box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
+/* 100vh then 100dvh: on iOS Safari 100vh is the LARGE viewport, as if the toolbar were gone, so a box sized by it runs under the toolbar. An engine without dvh keeps the first value. */
+.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;height:100dvh;overflow:hidden;flex:none;width:var(--fdy-app-sidebar-w,15.5rem);box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
 /* `min-height:0` is the height-axis twin of `min-width:0`, and its absence was invisible for as long
  * as the shell scrolled the PAGE (#055 §2). A consumer that pins the shell to the viewport and
  * scrolls .fdy-app__main instead hits it immediately: a column flex item's automatic minimum size is
@@ -2472,7 +2473,8 @@ a { color: var(--color-primary-strong); }
 /* display is gated behind [open] so the native <dialog> stays hidden until opened.
  * An unconditional display here would beat the UA `dialog:not([open]){display:none}`
  * rule (author origin wins over user-agent) and leave the drawer visible on load. */
-.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-4),var(--surface-inset);overflow:hidden;transform:translateX(-100%);transition-property:transform,overlay,display;transition-duration:var(--dur-slow);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
+/* 100vh then 100dvh: on iOS Safari 100vh is the LARGE viewport, as if the toolbar were gone, so a box sized by it runs under the toolbar. An engine without dvh keeps the first value. */
+.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;height:100dvh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-4),var(--surface-inset);overflow:hidden;transform:translateX(-100%);transition-property:transform,overlay,display;transition-duration:var(--dur-slow);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
 .fdy-drawer[open]{display:flex;transform:none;}
 .fdy-drawer--right{inset:0 0 0 auto;transform:translateX(100%);}
 .fdy-drawer::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition-property:opacity,overlay,display;transition-duration:var(--dur-slow);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
@@ -2779,7 +2781,8 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-btn-split__toggle svg{display:block;width:1rem;height:1rem;}
 
 /* Freeday. Modal (native <dialog>) */
-.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-lift-hover),var(--surface-inset);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);/* Longhands, not the `transition` shorthand. A shorthand carrying one keyword the engine does not know is INVALID AT PARSE, so the whole declaration is thrown away -- and `allow-discrete` is unknown below Safari 17.4, which is under this kit's floor. The result was a modal and a drawer that opened and closed with no animation at all on an iPhone 7. Split this way only `transition-behavior` is dropped there, and the opacity/transform half survives. The lists align BY INDEX and reproduce the shorthand exactly, including `ease` for the discrete pair and `normal` for the continuous one -- verified by comparing computed styles before and after (#097). */transition-property:opacity,transform,overlay,display;transition-duration:var(--dur-base);transition-timing-function:var(--ease-spring),var(--ease-spring),ease,ease;transition-behavior:normal,normal,allow-discrete,allow-discrete;}
+/* 100vh then 100dvh: on iOS Safari 100vh is the LARGE viewport, as if the toolbar were gone, so a box sized by it runs under the toolbar. An engine without dvh keeps the first value. */
+.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));max-height:calc(100dvh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-lift-hover),var(--surface-inset);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);/* Longhands, not the `transition` shorthand. A shorthand carrying one keyword the engine does not know is INVALID AT PARSE, so the whole declaration is thrown away -- and `allow-discrete` is unknown below Safari 17.4, which is under this kit's floor. The result was a modal and a drawer that opened and closed with no animation at all on an iPhone 7. Split this way only `transition-behavior` is dropped there, and the opacity/transform half survives. The lists align BY INDEX and reproduce the shorthand exactly, including `ease` for the discrete pair and `normal` for the continuous one -- verified by comparing computed styles before and after (#097). */transition-property:opacity,transform,overlay,display;transition-duration:var(--dur-base);transition-timing-function:var(--ease-spring),var(--ease-spring),ease,ease;transition-behavior:normal,normal,allow-discrete,allow-discrete;}
 .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
 .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}
 .fdy-modal--lg{width:min(48rem,calc(100vw - var(--space-8)));}
@@ -2789,7 +2792,15 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-modal__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;}
 .fdy-modal__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}
 .fdy-modal__close:hover{background:var(--color-surface-2);color:var(--color-text);}
-.fdy-modal__body{flex:1;min-height:0;padding:var(--space-5);overflow:auto;}
+/* `1 1 auto`, NOT `flex:1`. The shorthand's basis is 0%, and `.fdy-modal` has only a max-height, so
+ * the percentage resolves against an indefinite height. Current engines read that as `content`;
+ * older WebKit read it as 0, sized the dialog to header + footer, and left the body its 40px of
+ * padding, with the form overflowing inside it. That was every modal on an iPhone 7 (iOS 15),
+ * reported from a real device (CATATAN-FREEDAY §16). A 0px basis reproduces it in Chrome to the
+ * pixel. `auto` lays out identically in current engines (measured: 498.7px dialog, 355.7px body,
+ * both readings) and leaves no indefinite percentage for any engine to read. min-height:0 is
+ * still what lets a long body shrink and scroll once the dialog reaches its max-height. */
+.fdy-modal__body{flex:1 1 auto;min-height:0;padding:var(--space-5);overflow:auto;}
 .fdy-modal__footer{flex:none;display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:var(--color-surface-2);}
 /* Symmetric enter AND exit (fade + rise + subtle scale) on the native <dialog>. @starting-style
  * animates the entry; overlay/display allow-discrete keep it painted through the exit so it
@@ -2900,6 +2911,24 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-slider__value{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-primary-strong);font-variant-numeric:tabular-nums;}
 .fdy-slider__scale{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums;}
 
+/* Freeday. Sortable list (freeday-sortable.js). The kit styles the handle and the drag states only;
+ * the list itself is whatever it already was: .fdy-list, a table body, plain rows.
+ *
+ * The handle is a control-height square so a thumb can hold it on a phone, and `touch-action:none`
+ * keeps that drag from scrolling the page. Its glyph is the only thing marking it as a control, so
+ * it takes --color-text-muted, not --color-text-subtle: a non-text control still owes 3:1. */
+.fdy-sortable__handle{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--control-h);height:var(--control-h);padding:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);cursor:grab;touch-action:none;}
+.fdy-sortable__handle:hover{background:var(--color-surface-2);color:var(--color-text);}
+.fdy-sortable__handle:active{cursor:grabbing;}
+.fdy-sortable__handle[aria-disabled="true"]{cursor:not-allowed;opacity:.4;}
+.fdy-sortable__handle[aria-disabled="true"]:hover{background:transparent;color:var(--color-text-muted);}
+.fdy-sortable.is-sorting{-webkit-user-select:none;user-select:none;}
+.fdy-sortable > .is-dragging{opacity:.45;}
+/* The landing line. On a table row it is drawn on the cells: a box-shadow on a <tr> is not painted
+ * by every engine the kit supports. */
+.fdy-sortable > :not(tr).is-drop-before,.fdy-sortable > tr.is-drop-before > *{box-shadow:inset 0 var(--focus-ring-width) 0 var(--color-primary);}
+.fdy-sortable > :not(tr).is-drop-after,.fdy-sortable > tr.is-drop-after > *{box-shadow:inset 0 calc(var(--focus-ring-width) * -1) 0 var(--color-primary);}
+
 /* Freeday. Spinner */
 .fdy-spinner{display:inline-block;width:1.5rem;height:1.5rem;border:2.5px solid var(--color-border-strong);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:fdy-spin .7s linear infinite;}
 .fdy-spinner--sm{width:1rem;height:1rem;border-width:2px;}

package/dist/freeday.css

@@ -108,7 +108,8 @@ a { color: var(--color-primary-strong); }
  * > (.fdy-app__topbar, .fdy-app__main)). The __content wrapper gives the sticky
  * topbar a tall containing block so it can travel, a bare grid cell can't. */
 .fdy-app{display:flex;align-items:stretch;min-height:100vh;background:var(--color-surface-2);}
-.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;overflow:hidden;flex:none;width:var(--fdy-app-sidebar-w,15.5rem);box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
+/* 100vh then 100dvh: on iOS Safari 100vh is the LARGE viewport, as if the toolbar were gone, so a box sized by it runs under the toolbar. An engine without dvh keeps the first value. */
+.fdy-app__sidebar{position:sticky;top:0;align-self:flex-start;height:100vh;height:100dvh;overflow:hidden;flex:none;width:var(--fdy-app-sidebar-w,15.5rem);box-sizing:border-box;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);border-right:var(--bw) solid var(--color-border);display:flex;flex-direction:column;transition:width var(--dur-slow) var(--ease-standard),border-right-width var(--dur-slow) var(--ease-standard);}
 /* `min-height:0` is the height-axis twin of `min-width:0`, and its absence was invisible for as long
  * as the shell scrolled the PAGE (#055 §2). A consumer that pins the shell to the viewport and
  * scrolls .fdy-app__main instead hits it immediately: a column flex item's automatic minimum size is
@@ -1295,7 +1296,8 @@ a { color: var(--color-primary-strong); }
 /* display is gated behind [open] so the native <dialog> stays hidden until opened.
  * An unconditional display here would beat the UA `dialog:not([open]){display:none}`
  * rule (author origin wins over user-agent) and leave the drawer visible on load. */
-.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-4),var(--surface-inset);overflow:hidden;transform:translateX(-100%);transition-property:transform,overlay,display;transition-duration:var(--dur-slow);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
+/* 100vh then 100dvh: on iOS Safari 100vh is the LARGE viewport, as if the toolbar were gone, so a box sized by it runs under the toolbar. An engine without dvh keeps the first value. */
+.fdy-drawer{position:fixed;inset:0 auto 0 0;margin:0;padding:0;height:100vh;height:100dvh;max-height:none;width:min(20rem,82vw);flex-direction:column;border:0;background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-4),var(--surface-inset);overflow:hidden;transform:translateX(-100%);transition-property:transform,overlay,display;transition-duration:var(--dur-slow);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
 .fdy-drawer[open]{display:flex;transform:none;}
 .fdy-drawer--right{inset:0 0 0 auto;transform:translateX(100%);}
 .fdy-drawer::backdrop{background:rgba(10,12,25,.5);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;transition-property:opacity,overlay,display;transition-duration:var(--dur-slow);transition-timing-function:var(--ease-standard),ease,ease;transition-behavior:normal,allow-discrete,allow-discrete;}
@@ -1602,7 +1604,8 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-btn-split__toggle svg{display:block;width:1rem;height:1rem;}
 
 /* Freeday. Modal (native <dialog>) */
-.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-lift-hover),var(--surface-inset);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);/* Longhands, not the `transition` shorthand. A shorthand carrying one keyword the engine does not know is INVALID AT PARSE, so the whole declaration is thrown away -- and `allow-discrete` is unknown below Safari 17.4, which is under this kit's floor. The result was a modal and a drawer that opened and closed with no animation at all on an iPhone 7. Split this way only `transition-behavior` is dropped there, and the opacity/transform half survives. The lists align BY INDEX and reproduce the shorthand exactly, including `ease` for the discrete pair and `normal` for the continuous one -- verified by comparing computed styles before and after (#097). */transition-property:opacity,transform,overlay,display;transition-duration:var(--dur-base);transition-timing-function:var(--ease-spring),var(--ease-spring),ease,ease;transition-behavior:normal,normal,allow-discrete,allow-discrete;}
+/* 100vh then 100dvh: on iOS Safari 100vh is the LARGE viewport, as if the toolbar were gone, so a box sized by it runs under the toolbar. An engine without dvh keeps the first value. */
+.fdy-modal{width:min(32rem,calc(100vw - var(--space-8)));max-height:calc(100vh - var(--space-16));max-height:calc(100dvh - var(--space-16));padding:0;border:var(--bw) solid var(--color-border);border-radius:var(--radius-xl);background:var(--color-surface-raised);backdrop-filter:var(--surface-filter);-webkit-backdrop-filter:var(--surface-filter);color:var(--color-text);box-shadow:var(--shadow-lift-hover),var(--surface-inset);overflow:hidden;flex-direction:column;opacity:0;transform:translateY(8px) scale(.98);/* Longhands, not the `transition` shorthand. A shorthand carrying one keyword the engine does not know is INVALID AT PARSE, so the whole declaration is thrown away -- and `allow-discrete` is unknown below Safari 17.4, which is under this kit's floor. The result was a modal and a drawer that opened and closed with no animation at all on an iPhone 7. Split this way only `transition-behavior` is dropped there, and the opacity/transform half survives. The lists align BY INDEX and reproduce the shorthand exactly, including `ease` for the discrete pair and `normal` for the continuous one -- verified by comparing computed styles before and after (#097). */transition-property:opacity,transform,overlay,display;transition-duration:var(--dur-base);transition-timing-function:var(--ease-spring),var(--ease-spring),ease,ease;transition-behavior:normal,normal,allow-discrete,allow-discrete;}
 .fdy-modal--sm{width:min(24rem,calc(100vw - var(--space-8)));}
 .fdy-modal--md{width:min(32rem,calc(100vw - var(--space-8)));}
 .fdy-modal--lg{width:min(48rem,calc(100vw - var(--space-8)));}
@@ -1612,7 +1615,15 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-modal__title{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--color-text);margin:0 auto 0 0;}
 .fdy-modal__close{border:0;background:transparent;color:var(--color-text-muted);font-size:var(--text-xl);line-height:1;cursor:pointer;padding:var(--space-1);border-radius:var(--radius-sm);}
 .fdy-modal__close:hover{background:var(--color-surface-2);color:var(--color-text);}
-.fdy-modal__body{flex:1;min-height:0;padding:var(--space-5);overflow:auto;}
+/* `1 1 auto`, NOT `flex:1`. The shorthand's basis is 0%, and `.fdy-modal` has only a max-height, so
+ * the percentage resolves against an indefinite height. Current engines read that as `content`;
+ * older WebKit read it as 0, sized the dialog to header + footer, and left the body its 40px of
+ * padding, with the form overflowing inside it. That was every modal on an iPhone 7 (iOS 15),
+ * reported from a real device (CATATAN-FREEDAY §16). A 0px basis reproduces it in Chrome to the
+ * pixel. `auto` lays out identically in current engines (measured: 498.7px dialog, 355.7px body,
+ * both readings) and leaves no indefinite percentage for any engine to read. min-height:0 is
+ * still what lets a long body shrink and scroll once the dialog reaches its max-height. */
+.fdy-modal__body{flex:1 1 auto;min-height:0;padding:var(--space-5);overflow:auto;}
 .fdy-modal__footer{flex:none;display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4) var(--space-5);border-top:var(--bw) solid var(--color-border-muted);background:var(--color-surface-2);}
 /* Symmetric enter AND exit (fade + rise + subtle scale) on the native <dialog>. @starting-style
  * animates the entry; overlay/display allow-discrete keep it painted through the exit so it
@@ -1723,6 +1734,24 @@ fieldset.fdy-field>legend{padding:0;float:none;margin-bottom:var(--space-2);}
 .fdy-slider__value{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--color-primary-strong);font-variant-numeric:tabular-nums;}
 .fdy-slider__scale{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--color-text-muted);font-variant-numeric:tabular-nums;}
 
+/* Freeday. Sortable list (freeday-sortable.js). The kit styles the handle and the drag states only;
+ * the list itself is whatever it already was: .fdy-list, a table body, plain rows.
+ *
+ * The handle is a control-height square so a thumb can hold it on a phone, and `touch-action:none`
+ * keeps that drag from scrolling the page. Its glyph is the only thing marking it as a control, so
+ * it takes --color-text-muted, not --color-text-subtle: a non-text control still owes 3:1. */
+.fdy-sortable__handle{display:inline-flex;flex:none;align-items:center;justify-content:center;width:var(--control-h);height:var(--control-h);padding:0;border:0;border-radius:var(--radius-md);background:transparent;color:var(--color-text-muted);cursor:grab;touch-action:none;}
+.fdy-sortable__handle:hover{background:var(--color-surface-2);color:var(--color-text);}
+.fdy-sortable__handle:active{cursor:grabbing;}
+.fdy-sortable__handle[aria-disabled="true"]{cursor:not-allowed;opacity:.4;}
+.fdy-sortable__handle[aria-disabled="true"]:hover{background:transparent;color:var(--color-text-muted);}
+.fdy-sortable.is-sorting{-webkit-user-select:none;user-select:none;}
+.fdy-sortable > .is-dragging{opacity:.45;}
+/* The landing line. On a table row it is drawn on the cells: a box-shadow on a <tr> is not painted
+ * by every engine the kit supports. */
+.fdy-sortable > :not(tr).is-drop-before,.fdy-sortable > tr.is-drop-before > *{box-shadow:inset 0 var(--focus-ring-width) 0 var(--color-primary);}
+.fdy-sortable > :not(tr).is-drop-after,.fdy-sortable > tr.is-drop-after > *{box-shadow:inset 0 calc(var(--focus-ring-width) * -1) 0 var(--color-primary);}
+
 /* Freeday. Spinner */
 .fdy-spinner{display:inline-block;width:1.5rem;height:1.5rem;border:2.5px solid var(--color-border-strong);border-top-color:var(--color-primary);border-radius:var(--radius-full);animation:fdy-spin .7s linear infinite;}
 .fdy-spinner--sm{width:1rem;height:1rem;border-width:2px;}