@cahyo-dimas/freeday 1.7.0

package/dist/freeday.js

@@ -0,0 +1,3632 @@
+/* Freeday enhancers — GENERATED by tokens/build.mjs. Do not edit by hand.
+ * Concatenation of every src/*.js enhancer (each a self-contained IIFE). */
+/* Freeday — autocomplete enhancer (optional, zero-dependency).
+ * Editable combobox (WAI-ARIA APG): a text input filters a role="listbox" of role="option"
+ * items as you type; select fills the input. Auto-inits [data-fdy-autocomplete]. Options are
+ * static markup filtered client-side — in an app, fetch/filter server-side and re-render options.
+ *
+ * Markup: <div data-fdy-autocomplete class="fdy-autocomplete">
+ *   <input class="fdy-input" role="combobox" aria-expanded="false" aria-autocomplete="list"
+ *          aria-controls="listId" autocomplete="off">
+ *   <ul class="fdy-autocomplete__listbox" id="listId" role="listbox" hidden>
+ *     <li class="fdy-autocomplete__option" role="option">…</li>…
+ *     <li class="fdy-autocomplete__empty" hidden>Tak ada hasil</li></ul></div>
+ * Emits a bubbling "fdy-autocomplete-select" CustomEvent (detail {value, option}).
+ */
+(function () {
+  'use strict';
+
+  var seq = 0;
+
+  function initAutocomplete(root) {
+    if (root.dataset.fdyAcReady === '1') return;
+    root.dataset.fdyAcReady = '1';
+
+    var input = root.querySelector('input[role="combobox"]') || root.querySelector('input');
+    var listbox = root.querySelector('[role="listbox"]');
+    if (!input || !listbox) return;
+    var options = Array.prototype.slice.call(listbox.querySelectorAll('[role="option"]'));
+    var emptyEl = listbox.querySelector('.fdy-autocomplete__empty');
+    var active = -1;
+
+    options.forEach(function (o) {
+      if (!o.id) { seq += 1; o.id = 'fdy-ac-opt-' + seq; }
+      o.dataset.label = o.textContent.trim();
+    });
+    listbox.hidden = true;
+    input.setAttribute('aria-expanded', 'false');
+
+    function visible() { return options.filter(function (o) { return !o.hidden; }); }
+    function clearHighlight() { options.forEach(function (o) { o.classList.remove('is-highlighted'); }); }
+
+    var _pop = null;
+    function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(listbox, input); return _pop; }
+    function open() {
+      if (!listbox.hidden) return;
+      var p = popCtl(); if (p) p.show(); else listbox.hidden = false;
+      input.setAttribute('aria-expanded', 'true');
+      document.addEventListener('click', onDocClick, true);
+    }
+    function close() {
+      if (listbox.hidden) return;
+      var p = popCtl(); if (p) p.hide(); else listbox.hidden = true;
+      input.setAttribute('aria-expanded', 'false');
+      input.removeAttribute('aria-activedescendant');
+      active = -1;
+      clearHighlight();
+      document.removeEventListener('click', onDocClick, true);
+    }
+    function onDocClick(e) { if (!root.contains(e.target)) close(); }
+
+    function highlight(i) {
+      var vis = visible();
+      clearHighlight();
+      if (!vis.length || i < 0 || i >= vis.length) { active = -1; input.removeAttribute('aria-activedescendant'); return; }
+      active = i;
+      vis[i].classList.add('is-highlighted');
+      input.setAttribute('aria-activedescendant', vis[i].id);
+      vis[i].scrollIntoView({ block: 'nearest' });
+    }
+
+    function applyFilter() {
+      var q = input.value.trim().toLowerCase();
+      var shown = 0;
+      options.forEach(function (o) {
+        var match = !q || o.dataset.label.toLowerCase().indexOf(q) !== -1;
+        o.hidden = !match;
+        if (match) shown++;
+      });
+      if (emptyEl) emptyEl.hidden = shown !== 0;
+      active = -1;
+      input.removeAttribute('aria-activedescendant');
+      clearHighlight();
+      open();
+    }
+
+    function choose(opt) {
+      input.value = opt.dataset.label;
+      options.forEach(function (o) { o.setAttribute('aria-selected', o === opt ? 'true' : 'false'); });
+      close();
+      root.dispatchEvent(new CustomEvent('fdy-autocomplete-select', { bubbles: true, detail: { value: opt.dataset.label, option: opt } }));
+    }
+
+    input.addEventListener('input', applyFilter);
+    input.addEventListener('focus', function () { applyFilter(); });
+    input.addEventListener('keydown', function (e) {
+      var vis = visible();
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          if (listbox.hidden) open();
+          highlight(active + 1 < vis.length ? active + 1 : 0);
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          if (listbox.hidden) open();
+          highlight(active - 1 >= 0 ? active - 1 : vis.length - 1);
+          break;
+        case 'Enter':
+          if (!listbox.hidden && active >= 0) { e.preventDefault(); choose(vis[active]); }
+          break;
+        case 'Escape':
+          if (!listbox.hidden) { e.preventDefault(); close(); }
+          break;
+        case 'Tab':
+          close();
+          break;
+        default: break;
+      }
+    });
+    listbox.addEventListener('click', function (e) {
+      var opt = e.target.closest('[role="option"]');
+      if (opt && !opt.hidden) choose(opt);
+    });
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-autocomplete]'), initAutocomplete);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayAutocomplete = { init: initAutocomplete, initAll: initAll };
+})();
+
+/* Freeday — breakpoint provider (optional, zero-dependency).
+ * The MudBreakpointProvider equivalent for JS consumers: stamps the current breakpoint on
+ * <html data-breakpoint="xs|sm|md|lg|xl"> and emits a bubbling "fdy-breakpoint-change"
+ * CustomEvent (detail {breakpoint}) whenever it changes. Also fills any element with
+ * [data-fdy-breakpoint-label] with the current name. Read it live via FreedayBreakpoint.get().
+ * Scale (min-width, px): sm 600 · md 960 · lg 1280 · xl 1920 (matches breakpoints.css).
+ */
+(function () {
+  'use strict';
+
+  var STEPS = [['xl', 1920], ['lg', 1280], ['md', 960], ['sm', 600], ['xs', 0]];
+
+  function current() {
+    var w = window.innerWidth;
+    for (var i = 0; i < STEPS.length; i++) {
+      if (w >= STEPS[i][1]) return STEPS[i][0];
+    }
+    return 'xs';
+  }
+
+  var root = document.documentElement;
+  var last = null;
+
+  function update() {
+    var bp = current();
+    if (bp === last) return;
+    last = bp;
+    root.setAttribute('data-breakpoint', bp);
+    Array.prototype.forEach.call(document.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 });
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', update);
+  } else {
+    update();
+  }
+
+  window.FreedayBreakpoint = {
+    get: function () { return last || current(); },
+    current: current,
+    // true if the current breakpoint is `name` or wider (e.g. is('md') → md, lg, or xl)
+    isUp: function (name) {
+      var order = ['xs', 'sm', 'md', 'lg', 'xl'];
+      return order.indexOf(this.get()) >= order.indexOf(name);
+    }
+  };
+})();
+
+/* Freeday — carousel enhancer (optional, zero-dependency).
+ * Scroll-snap slider with prev/next arrows, generated dot indicators, keyboard (←/→),
+ * and optional autoplay (data-fdy-autoplay="4000", pauses on hover/focus). Auto-inits
+ * [data-fdy-carousel].
+ *
+ * Markup: <div class="fdy-carousel" data-fdy-carousel role="region"
+ *            aria-roledescription="carousel" aria-label="…" tabindex="0">
+ *   <button class="fdy-carousel__arrow fdy-carousel__arrow--prev" aria-label="Sebelumnya">…</button>
+ *   <div class="fdy-carousel__viewport">
+ *     <div class="fdy-carousel__slide" role="group" aria-roledescription="slide">…</div>…
+ *   </div>
+ *   <button class="fdy-carousel__arrow fdy-carousel__arrow--next" aria-label="Berikutnya">…</button>
+ *   <div class="fdy-carousel__dots"></div>   <!-- dots generated here -->
+ * </div>
+ * Emits a bubbling "fdy-carousel-change" CustomEvent (detail {index}).
+ */
+(function () {
+  'use strict';
+
+  function initCarousel(root) {
+    if (root.dataset.fdyCarouselReady === '1') return;
+    root.dataset.fdyCarouselReady = '1';
+
+    var viewport = root.querySelector('.fdy-carousel__viewport');
+    var slides = Array.prototype.slice.call(root.querySelectorAll('.fdy-carousel__slide'));
+    if (!viewport || !slides.length) return;
+    var prev = root.querySelector('.fdy-carousel__arrow--prev');
+    var next = root.querySelector('.fdy-carousel__arrow--next');
+    var dotsWrap = root.querySelector('.fdy-carousel__dots');
+    var index = 0;
+
+    slides.forEach(function (s, i) {
+      if (!s.hasAttribute('aria-label')) s.setAttribute('aria-label', (i + 1) + ' dari ' + slides.length);
+    });
+
+    var dots = [];
+    if (dotsWrap) {
+      slides.forEach(function (s, i) {
+        var b = document.createElement('button');
+        b.type = 'button';
+        b.className = 'fdy-carousel__dot';
+        b.setAttribute('aria-label', 'Slide ' + (i + 1));
+        b.addEventListener('click', function () { goTo(i); });
+        dotsWrap.appendChild(b);
+        dots.push(b);
+      });
+    }
+
+    function clamp(i) { return Math.max(0, Math.min(slides.length - 1, i)); }
+
+    function sync() {
+      dots.forEach(function (d, i) { d.setAttribute('aria-current', i === index ? 'true' : 'false'); });
+      if (prev) prev.disabled = index === 0;
+      if (next) next.disabled = index === slides.length - 1;
+    }
+
+    function goTo(i) {
+      index = clamp(i);
+      viewport.scrollTo({ left: index * viewport.clientWidth, behavior: 'smooth' });
+      sync();
+      root.dispatchEvent(new CustomEvent('fdy-carousel-change', { bubbles: true, detail: { index: index } }));
+    }
+
+    if (prev) prev.addEventListener('click', function () { goTo(index - 1); });
+    if (next) next.addEventListener('click', function () { goTo(index + 1); });
+    root.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowLeft') { e.preventDefault(); goTo(index - 1); }
+      else if (e.key === 'ArrowRight') { e.preventDefault(); goTo(index + 1); }
+    });
+
+    // Keep index in sync when the user swipes/scrolls the viewport directly.
+    var ticking = false;
+    viewport.addEventListener('scroll', function () {
+      if (ticking) return;
+      ticking = true;
+      requestAnimationFrame(function () {
+        ticking = false;
+        var w = viewport.clientWidth || 1;
+        var i = clamp(Math.round(viewport.scrollLeft / w));
+        if (i !== index) { index = i; sync(); }
+      });
+    }, { passive: true });
+
+    var autoplay = parseInt(root.getAttribute('data-fdy-autoplay'), 10);
+    if (autoplay > 0) {
+      var timer = null;
+      var start = function () { if (!timer) timer = setInterval(function () { goTo(index >= slides.length - 1 ? 0 : index + 1); }, autoplay); };
+      var stop = function () { if (timer) { clearInterval(timer); timer = null; } };
+      root.addEventListener('mouseenter', stop);
+      root.addEventListener('mouseleave', start);
+      root.addEventListener('focusin', stop);
+      root.addEventListener('focusout', start);
+      var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      if (!reduce) start();
+    }
+
+    sync();
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-carousel]'), initCarousel);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayCarousel = { init: initCarousel, initAll: initAll };
+})();
+
+/* Freeday — cascade select enhancer (optional, zero-dependency).
+ * Turns a [data-fdy-cascade] wrapper into a hierarchical drill-down picker. The
+ * data model is a hidden nested <ul> inside the wrapper: a <li> with a child <ul>
+ * is a branch (drills in), a <li> without is a leaf (selects). Each <li> carries
+ * its value in data-value; its own text (before any nested <ul>) is the label.
+ *
+ * The popover shows one level at a time (a listbox); a branch drills in, the back
+ * control ascends, a leaf selects and stores the full path as the value.
+ * Attributes: data-label, data-placeholder, data-value (pre-select a leaf value),
+ * data-separator (path separator in the display, default " / ").
+ *
+ * Keyboard: trigger opens on click / Enter / Space / ArrowDown. In the list:
+ * Up/Down move, Home/End jump, ArrowRight/Enter/Space drill into a branch or
+ * select a leaf, ArrowLeft/Backspace go up a level, Esc closes (focus returns to
+ * the trigger). Emits a bubbling "fdy-cascade-change" (detail {value, path, labels}).
+ */
+(function () {
+  'use strict';
+
+  var seq = 0;
+  var BACK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg>';
+
+  // Own text of an <li>, excluding any nested <ul>.
+  function ownLabel(li) {
+    var s = '';
+    Array.prototype.forEach.call(li.childNodes, function (n) {
+      if (n.nodeType === 3) s += n.textContent;
+      else if (n.nodeType === 1 && n.tagName !== 'UL') s += n.textContent;
+    });
+    return s.trim();
+  }
+  function parse(ul) {
+    var nodes = [];
+    Array.prototype.forEach.call(ul.children, function (li) {
+      if (li.tagName !== 'LI') return;
+      var childUl = li.querySelector(':scope > ul');
+      nodes.push({
+        label: ownLabel(li),
+        value: li.getAttribute('data-value') || ownLabel(li),
+        children: childUl ? parse(childUl) : null
+      });
+    });
+    return nodes;
+  }
+  // Depth-first search for the stack of labels leading to a leaf value.
+  function pathTo(nodes, value, trail) {
+    for (var i = 0; i < nodes.length; i++) {
+      var n = nodes[i];
+      var here = trail.concat([n]);
+      if (!n.children && n.value === value) return here;
+      if (n.children) { var found = pathTo(n.children, value, here); if (found) return found; }
+    }
+    return null;
+  }
+
+  function initCascade(wrap) {
+    if (wrap.dataset.fdyCascadeReady === '1') return;
+    wrap.dataset.fdyCascadeReady = '1';
+    wrap.classList.add('fdy-cascade');
+
+    var sourceUl = wrap.querySelector('ul');
+    var root = sourceUl ? parse(sourceUl) : [];
+    if (sourceUl) sourceUl.remove();
+
+    var label = wrap.getAttribute('data-label') || 'Pilih';
+    var placeholder = wrap.getAttribute('data-placeholder') || 'Pilih…';
+    var sep = wrap.getAttribute('data-separator') || ' / ';
+
+    var trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'fdy-cascade__trigger';
+    trigger.setAttribute('aria-haspopup', 'true');
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.setAttribute('aria-label', label);
+    var valueSpan = document.createElement('span');
+    valueSpan.className = 'fdy-cascade__value';
+    trigger.appendChild(valueSpan);
+
+    var panel = document.createElement('div');
+    panel.className = 'fdy-cascade__panel';
+    panel.hidden = true;
+    var head = document.createElement('div');
+    head.className = 'fdy-cascade__head';
+    var back = document.createElement('button');
+    back.type = 'button';
+    back.className = 'fdy-cascade__back';
+    back.setAttribute('aria-label', 'Kembali satu tingkat');
+    back.innerHTML = BACK;
+    back.hidden = true;
+    var crumb = document.createElement('span');
+    crumb.className = 'fdy-cascade__crumb';
+    crumb.setAttribute('aria-live', 'polite');
+    head.appendChild(back);
+    head.appendChild(crumb);
+    var list = document.createElement('ul');
+    seq += 1;
+    list.className = 'fdy-cascade__list';
+    list.id = 'fdy-cascade-list-' + seq;
+    list.setAttribute('role', 'listbox');
+    list.setAttribute('aria-label', label);
+    list.tabIndex = -1;
+    panel.appendChild(head);
+    panel.appendChild(list);
+
+    wrap.appendChild(trigger);
+    wrap.appendChild(panel);
+
+    var stack = [];        // branch nodes drilled through (context)
+    var current = root;    // nodes at the visible level
+    var opts = [];         // rendered <li> elements
+    var active = -1;
+    var selectedValue = wrap.getAttribute('data-value') || '';
+
+    function render() {
+      list.innerHTML = '';
+      opts = [];
+      back.hidden = stack.length === 0;
+      crumb.textContent = stack.length ? stack.map(function (n) { return n.label; }).join(sep) : label;
+      current.forEach(function (node, i) {
+        var li = document.createElement('li');
+        seq += 1; li.id = 'fdy-cascade-opt-' + seq;
+        li.className = 'fdy-cascade__opt';
+        li.setAttribute('role', 'option');
+        li.setAttribute('data-index', String(i));
+        var isBranch = !!node.children;
+        li.setAttribute('aria-selected', (!isBranch && node.value === selectedValue) ? 'true' : 'false');
+        if (isBranch) li.setAttribute('aria-label', node.label + ', submenu');
+        var lbl = document.createElement('span');
+        lbl.className = 'fdy-cascade__opt-label';
+        lbl.textContent = node.label;
+        li.appendChild(lbl);
+        if (isBranch) {
+          var arrow = document.createElement('span');
+          arrow.className = 'fdy-cascade__opt-arrow';
+          arrow.setAttribute('aria-hidden', 'true');
+          li.appendChild(arrow);
+        }
+        list.appendChild(li);
+        opts.push(li);
+      });
+      setActive(0);
+    }
+    function setActive(i) {
+      if (active >= 0 && opts[active]) opts[active].classList.remove('is-active');
+      active = Math.max(-1, Math.min(opts.length - 1, i));
+      if (active >= 0) {
+        opts[active].classList.add('is-active');
+        list.setAttribute('aria-activedescendant', opts[active].id);
+        opts[active].scrollIntoView({ block: 'nearest' });
+      } else {
+        list.removeAttribute('aria-activedescendant');
+      }
+    }
+    function drill(i) {
+      var node = current[i];
+      if (!node || !node.children) return;
+      stack.push(node);
+      current = node.children;
+      render();
+    }
+    function ascend() {
+      if (!stack.length) return;
+      stack.pop();
+      current = stack.length ? stack[stack.length - 1].children : root;
+      render();
+    }
+    function activate(i) {
+      var node = current[i];
+      if (!node) return;
+      if (node.children) { drill(i); return; }
+      selectedValue = node.value;
+      var labels = stack.map(function (n) { return n.label; }).concat([node.label]);
+      valueSpan.textContent = labels.join(sep);
+      valueSpan.classList.remove('fdy-cascade__value--placeholder');
+      wrap.dispatchEvent(new CustomEvent('fdy-cascade-change', { bubbles: true, detail: { value: node.value, path: labels.join(sep), labels: labels } }));
+      close(true);
+    }
+
+    var _pop = null;
+    function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(panel, trigger); return _pop; }
+    function open() {
+      if (!panel.hidden) return;
+      // Re-open at the selected leaf's level for quick re-selection.
+      var trail = selectedValue ? pathTo(root, selectedValue, []) : null;
+      if (trail && trail.length > 1) { stack = trail.slice(0, -1); current = stack[stack.length - 1].children; }
+      else { stack = []; current = root; }
+      var p = popCtl(); if (p) p.show(); else panel.hidden = false;
+      trigger.setAttribute('aria-expanded', 'true');
+      trigger.classList.add('is-open');
+      render();
+      list.focus();
+      document.addEventListener('click', onDoc, true);
+    }
+    function close(returnFocus) {
+      if (panel.hidden) return;
+      var p = popCtl(); if (p) p.hide(); else panel.hidden = true;
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.classList.remove('is-open');
+      document.removeEventListener('click', onDoc, true);
+      if (returnFocus === true) trigger.focus();
+    }
+    function onDoc(e) { if (!wrap.contains(e.target)) close(false); }
+
+    trigger.addEventListener('click', function () { panel.hidden ? open() : close(true); });
+    trigger.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); }
+    });
+    back.addEventListener('click', function () { ascend(); list.focus(); });
+    list.addEventListener('keydown', function (e) {
+      switch (e.key) {
+        case 'ArrowDown': e.preventDefault(); setActive(active + 1); break;
+        case 'ArrowUp': e.preventDefault(); setActive(active - 1); break;
+        case 'Home': e.preventDefault(); setActive(0); break;
+        case 'End': e.preventDefault(); setActive(opts.length - 1); break;
+        case 'ArrowRight': case 'Enter': case ' ': e.preventDefault(); if (active >= 0) activate(active); break;
+        case 'ArrowLeft': case 'Backspace': e.preventDefault(); ascend(); break;
+        case 'Escape': e.preventDefault(); close(true); break;
+        case 'Tab': close(false); break;
+        default: break;
+      }
+    });
+    list.addEventListener('click', function (e) {
+      var li = e.target.closest('[role="option"]');
+      if (li) activate(opts.indexOf(li));
+    });
+
+    // Initial display: pre-selected leaf shows its full path, else placeholder.
+    var initTrail = selectedValue ? pathTo(root, selectedValue, []) : null;
+    if (initTrail) {
+      valueSpan.textContent = initTrail.map(function (n) { return n.label; }).join(sep);
+    } else {
+      valueSpan.textContent = placeholder;
+      valueSpan.classList.add('fdy-cascade__value--placeholder');
+    }
+
+    var api = {
+      wrap: wrap,
+      getValue: function () { return selectedValue; },
+      clear: function () { selectedValue = ''; valueSpan.textContent = placeholder; valueSpan.classList.add('fdy-cascade__value--placeholder'); }
+    };
+    wrap._fdyCascade = api;
+    return api;
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-cascade]'), initCascade);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayCascade = { init: initCascade, initAll: initAll };
+})();
+
+/* Freeday — choose-from-list enhancer (optional, zero-dependency).
+ * Wires a searchable master-data picker dialog to read-only fields.
+ * Progressive enhancement over a native <dialog>; in a framework app, drive the
+ * dialog as a controlled component (fetchPage callback + server cache), not a store.
+ *
+ * Markup contract (see docs):
+ *  - Field group:  [data-fdy-cfl="<dialogId>"] — usually a `.fdy-input-group` holding a
+ *      read-only `.fdy-input` and a trigger `<button class="fdy-input-group__btn">`.
+ *      Optional `data-fdy-cfl-display="<key>"` picks which row dataset key fills the input
+ *      (default "value"); optional `data-fdy-cfl-summary="{n} dipilih"` formats the multi label.
+ *  - Standalone opener:  [data-fdy-cfl-open="<dialogId>"] — opens the dialog with no bound field.
+ *  - Dialog:  <dialog id="<dialogId>" class="fdy-modal fdy-modal--cfl"> containing
+ *      a `[data-fdy-cfl-search]` input, `.fdy-cfl__row` <tr> rows carrying `data-*` fields,
+ *      a `[data-fdy-cfl-empty]` element, and (multi only) `[data-fdy-cfl-multiple]` on the
+ *      dialog plus `[data-fdy-cfl-count]` and `[data-fdy-cfl-confirm]` in the footer.
+ *
+ * Emits a bubbling "fdy-cfl-select" CustomEvent on the field group (or the dialog when
+ * opened standalone): detail {row} for single-select, {rows} for multi-select — each a plain
+ * object copy of the row's dataset. Consumers fill sibling fields (code → name) from it.
+ */
+(function () {
+  'use strict';
+
+  function rowData(row) {
+    var out = {};
+    var ds = row.dataset;
+    for (var key in ds) { if (Object.prototype.hasOwnProperty.call(ds, key)) out[key] = ds[key]; }
+    return out;
+  }
+
+  function rowSearchText(row) {
+    return (row.getAttribute('data-search') != null ? row.getAttribute('data-search') : row.textContent)
+      .toLowerCase();
+  }
+
+  function initDialog(dialog) {
+    if (dialog.dataset.fdyCflReady === '1') return;
+    dialog.dataset.fdyCflReady = '1';
+
+    var search = dialog.querySelector('[data-fdy-cfl-search]');
+    var emptyEl = dialog.querySelector('[data-fdy-cfl-empty]');
+    var countEl = dialog.querySelector('[data-fdy-cfl-count]');
+    var confirmBtn = dialog.querySelector('[data-fdy-cfl-confirm]');
+    var multiple = dialog.hasAttribute('data-fdy-cfl-multiple');
+    var rows = Array.prototype.slice.call(dialog.querySelectorAll('.fdy-cfl__row'));
+
+    var activeGroup = null;   // field group that opened the dialog (null = standalone)
+    var trigger = null;       // control to restore focus to on close
+
+    rows.forEach(function (row) {
+      row.setAttribute('tabindex', '-1');
+      if (multiple && !row.hasAttribute('aria-selected')) row.setAttribute('aria-selected', 'false');
+    });
+
+    function visibleRows() {
+      return rows.filter(function (r) { return !r.hidden; });
+    }
+
+    function applyFilter() {
+      var q = (search ? search.value : '').trim().toLowerCase();
+      var shown = 0;
+      rows.forEach(function (row) {
+        var match = !q || rowSearchText(row).indexOf(q) !== -1;
+        row.hidden = !match;
+        if (match) shown++;
+      });
+      if (emptyEl) emptyEl.hidden = shown !== 0;
+    }
+
+    function updateCount() {
+      if (!countEl) return;
+      var n = rows.filter(function (r) { return r.getAttribute('aria-selected') === 'true'; }).length;
+      countEl.textContent = n + ' dipilih';
+    }
+
+    function fillGroup(detail) {
+      if (!activeGroup) return;
+      var input = activeGroup.querySelector('.fdy-input');
+      if (input) {
+        if (detail.rows) {
+          var tpl = activeGroup.getAttribute('data-fdy-cfl-summary') || '{n} dipilih';
+          input.value = detail.rows.length ? tpl.replace('{n}', String(detail.rows.length)) : '';
+        } else {
+          var key = activeGroup.getAttribute('data-fdy-cfl-display') || 'value';
+          input.value = detail.row[key] != null ? detail.row[key] : (detail.row.value || '');
+        }
+      }
+    }
+
+    function emit(detail) {
+      (activeGroup || dialog).dispatchEvent(new CustomEvent('fdy-cfl-select', {
+        bubbles: true, detail: detail
+      }));
+    }
+
+    function commitSingle(row) {
+      var detail = { row: rowData(row) };
+      fillGroup(detail);
+      emit(detail);
+      dialog.close();
+    }
+
+    function toggleSelect(row) {
+      var next = row.getAttribute('aria-selected') !== 'true';
+      row.setAttribute('aria-selected', String(next));
+      var box = row.querySelector('input[type="checkbox"]');
+      if (box) box.checked = next;
+      updateCount();
+    }
+
+    function confirmMulti() {
+      var picked = rows.filter(function (r) { return r.getAttribute('aria-selected') === 'true'; });
+      var detail = { rows: picked.map(rowData) };
+      fillGroup(detail);
+      emit(detail);
+      dialog.close();
+    }
+
+    function focusRow(row) { if (row) row.focus(); }
+
+    function moveFrom(current, delta) {
+      var vis = visibleRows();
+      var i = vis.indexOf(current);
+      if (i === -1) { focusRow(vis[0]); return; }
+      var target = i + delta;
+      if (target < 0) { if (search) search.focus(); return; }
+      if (target >= vis.length) return;
+      focusRow(vis[target]);
+    }
+
+    if (search) {
+      search.addEventListener('input', applyFilter);
+      search.addEventListener('keydown', function (e) {
+        if (e.key === 'ArrowDown') { e.preventDefault(); focusRow(visibleRows()[0]); }
+      });
+    }
+
+    dialog.addEventListener('click', function (e) {
+      var row = e.target.closest('.fdy-cfl__row');
+      if (!row || row.hidden) return;
+      if (multiple) toggleSelect(row); else commitSingle(row);
+    });
+
+    dialog.addEventListener('keydown', function (e) {
+      var row = e.target.closest('.fdy-cfl__row');
+      if (!row) return;
+      var vis = visibleRows();
+      switch (e.key) {
+        case 'ArrowDown': e.preventDefault(); moveFrom(row, 1); break;
+        case 'ArrowUp': e.preventDefault(); moveFrom(row, -1); break;
+        case 'Home': e.preventDefault(); focusRow(vis[0]); break;
+        case 'End': e.preventDefault(); focusRow(vis[vis.length - 1]); break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          if (multiple) toggleSelect(row); else commitSingle(row);
+          break;
+        default: break;
+      }
+    });
+
+    if (confirmBtn) confirmBtn.addEventListener('click', confirmMulti);
+
+    dialog.addEventListener('close', function () {
+      if (trigger && typeof trigger.focus === 'function') trigger.focus();
+      activeGroup = null;
+      trigger = null;
+    });
+
+    // Opening API used by triggers below.
+    dialog.fdyCflOpen = function (group, opener) {
+      activeGroup = group || null;
+      trigger = opener || null;
+      if (search) search.value = '';
+      applyFilter();
+      updateCount();
+      if (typeof dialog.showModal === 'function') dialog.showModal(); else dialog.setAttribute('open', '');
+      if (search) search.focus();
+    };
+  }
+
+  function initTriggers(context) {
+    var ctx = context || document;
+
+    Array.prototype.forEach.call(ctx.querySelectorAll('[data-fdy-cfl]'), function (group) {
+      if (group.dataset.fdyCflBound === '1') return;
+      var dialog = document.getElementById(group.getAttribute('data-fdy-cfl'));
+      if (!dialog) return;
+      initDialog(dialog);
+      var opener = group.querySelector('[data-fdy-cfl-trigger], .fdy-input-group__btn');
+      if (!opener) return;
+      group.dataset.fdyCflBound = '1';
+      opener.addEventListener('click', function () { dialog.fdyCflOpen(group, opener); });
+    });
+
+    Array.prototype.forEach.call(ctx.querySelectorAll('[data-fdy-cfl-open]'), function (opener) {
+      if (opener.dataset.fdyCflBound === '1') return;
+      var dialog = document.getElementById(opener.getAttribute('data-fdy-cfl-open'));
+      if (!dialog) return;
+      initDialog(dialog);
+      opener.dataset.fdyCflBound = '1';
+      opener.addEventListener('click', function () { dialog.fdyCflOpen(null, opener); });
+    });
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initTriggers(); });
+  } else {
+    initTriggers();
+  }
+
+  window.FreedayCfl = { init: initTriggers };
+})();
+
+/* Freeday — chart renderer (optional, zero-dependency, no external chart lib).
+ * Renders sparkline / bar / line / area / donut into an element from data attributes.
+ * Auto-inits [data-fdy-chart] once; call FreedayChart.update(el) to re-render after the
+ * data attributes change (used by the freeday/vue <FdyChart> wrapper for reactive data).
+ *
+ * Single-series colour (sparkline / simple bar / single line) via data-fdy-color references a
+ * semantic token by name (primary, accent, success, warning, danger, info). Multi-series
+ * defaults draw from the validated categorical --chart-1..8 palette in fixed order (never
+ * cycled, 8-series cap); pass data-fdy-colors to override with semantic names instead.
+ * Cartesian charts (line/area, multi-series/stacked bar) draw themed axes from --chart-grid /
+ * --chart-tick and format ticks + tooltips via data-fdy-format (number|percent|currency).
+ * Charts are an enhancement — put a table/text fallback inside the element and it will be
+ * replaced on render; give the element role="img" + aria-label.
+ *
+ *  Sparkline: <span data-fdy-chart="sparkline" data-values="4,6,5,8,7,10" data-fdy-color="primary">
+ *  Bar:       <div  data-fdy-chart="bar" data-values="12,19,8,15" data-labels="Sen,Sel,Rab,Kam">
+ *  Donut:     <div  data-fdy-chart="donut" data-values="45,30,25" data-labels="Lunas,Tertunda,Batal">
+ *  Line/area/multi bar (axes + legend + formatting):
+ *    <div data-fdy-chart="line" data-labels="Jan,Feb,Mar,Apr" data-fdy-format="percent"
+ *         data-series='[{"label":"Posted","values":[12,19,8,15]},{"label":"Draft","values":[4,6,5,8]}]'>
+ *    <div data-fdy-chart="bar" data-fdy-stacked data-labels="..." data-series='[...]'>
+ */
+(function () {
+  'use strict';
+
+  var NS = 'http://www.w3.org/2000/svg';
+
+  // Categorical chart palette: 8 validated fixed-order slots (--chart-1..8). Series index i
+  // (0-based) -> slot i+1; series beyond the 8-slot cap reuse --chart-8 (never cycled).
+  function chartSlotVar(i) { return 'var(--chart-' + (i < 8 ? i + 1 : 8) + ')'; }
+  function colorVar(name) { return 'var(--color-' + (name || 'primary') + ')'; }
+
+  function nums(el, attr) {
+    var v = el.getAttribute(attr);
+    return v ? v.split(',').map(function (s) { return parseFloat(s.trim()); }).filter(function (n) { return !isNaN(n); }) : [];
+  }
+  function strs(el, attr) {
+    var v = el.getAttribute(attr);
+    return v ? v.split(',').map(function (s) { return s.trim(); }) : [];
+  }
+  function ensureImg(el) { if (!el.hasAttribute('role')) el.setAttribute('role', 'img'); }
+  function svgEl(name) { return document.createElementNS(NS, name); }
+
+  // Multi-series model: data-series (JSON) wins; else the data-values single-series shortcut.
+  function getSeries(el) {
+    var raw = el.getAttribute('data-series');
+    if (raw) {
+      try {
+        var arr = JSON.parse(raw);
+        if (Array.isArray(arr)) return arr.map(function (s) {
+          return { label: s && s.label != null ? String(s.label) : '', values: ((s && s.values) || []).map(Number) };
+        });
+      } catch (e) { /* fall through to data-values */ }
+    }
+    var vals = nums(el, 'data-values');
+    return vals.length ? [{ label: el.getAttribute('data-fdy-label') || '', values: vals }] : [];
+  }
+
+  // Value formatter for ticks + tooltips.
+  function makeFormat(kind) {
+    if (kind === 'percent') return function (v) { return (Math.round(v * 10) / 10) + '%'; };
+    if (kind === 'currency' || kind === 'usd') return function (v) { return '$' + Math.round(v).toLocaleString('en-US'); };
+    return function (v) { return (Math.round(v * 100) / 100).toLocaleString(); };
+  }
+  // Round a positive number up to a "nice" axis maximum (1/2/2.5/5/10 * 10^n).
+  function niceCeil(x) {
+    if (x <= 0) return 1;
+    var exp = Math.floor(Math.log10(x)), base = Math.pow(10, exp), f = x / base;
+    var nf = f <= 1 ? 1 : f <= 2 ? 2 : f <= 2.5 ? 2.5 : f <= 5 ? 5 : 10;
+    return nf * base;
+  }
+
+  // ---- Interactive tooltip (Chart.js-style hover readout; purely visual) ----
+  function makeTip(container) {
+    if (getComputedStyle(container).position === 'static') container.style.position = 'relative';
+    var tip = document.createElement('div');
+    tip.className = 'fdy-chart__tip';
+    tip.setAttribute('aria-hidden', 'true');
+    container.appendChild(tip);
+    return tip;
+  }
+  function showTip(tip, container, clientX, clientY, text) {
+    var r = container.getBoundingClientRect();
+    tip.textContent = text;
+    tip.style.left = (clientX - r.left) + 'px';
+    tip.style.top = (clientY - r.top) + 'px';
+    tip.classList.add('is-visible');
+  }
+  function hideTip(tip) { tip.classList.remove('is-visible'); }
+
+  // Donut sector geometry (SVG path for a ring slice between two radii/angles).
+  function polar(cx, cy, r, deg) { var a = (deg - 90) * Math.PI / 180; return [cx + r * Math.cos(a), cy + r * Math.sin(a)]; }
+  function sectorPath(cx, cy, R, r, a0, a1) {
+    var large = (a1 - a0) > 180 ? 1 : 0;
+    var p0 = polar(cx, cy, R, a0), p1 = polar(cx, cy, R, a1), p2 = polar(cx, cy, r, a1), p3 = polar(cx, cy, r, a0);
+    return 'M' + p0[0].toFixed(2) + ' ' + p0[1].toFixed(2)
+      + ' A' + R + ' ' + R + ' 0 ' + large + ' 1 ' + p1[0].toFixed(2) + ' ' + p1[1].toFixed(2)
+      + ' L' + p2[0].toFixed(2) + ' ' + p2[1].toFixed(2)
+      + ' A' + r + ' ' + r + ' 0 ' + large + ' 0 ' + p3[0].toFixed(2) + ' ' + p3[1].toFixed(2) + ' Z';
+  }
+
+  function renderSparkline(el) {
+    var vals = nums(el, 'data-values');
+    if (vals.length < 2) return;
+    el.style.setProperty('--fdy-chart', colorVar(el.getAttribute('data-fdy-color')));
+    var W = 128, H = 36, P = 3;
+    var min = Math.min.apply(null, vals), max = Math.max.apply(null, vals), span = (max - min) || 1;
+    var pts = vals.map(function (v, i) {
+      var x = P + (i / (vals.length - 1)) * (W - 2 * P);
+      var y = H - P - ((v - min) / span) * (H - 2 * P);
+      return [x, y];
+    });
+    var line = pts.map(function (p) { return p[0].toFixed(1) + ',' + p[1].toFixed(1); }).join(' ');
+    var area = P + ',' + H + ' ' + line + ' ' + (W - P) + ',' + H;
+    var last = pts[pts.length - 1];
+    el.innerHTML = '<svg viewBox="0 0 ' + W + ' ' + H + '" aria-hidden="true">'
+      + '<polygon class="fdy-sparkline__area" points="' + area + '"/>'
+      + '<polyline class="fdy-sparkline__line" points="' + line + '" vector-effect="non-scaling-stroke"/>'
+      + '<circle class="fdy-sparkline__dot" cx="' + last[0].toFixed(1) + '" cy="' + last[1].toFixed(1) + '" r="2.5"/>'
+      + '</svg>';
+    ensureImg(el);
+  }
+
+  // Simple single-series flex bar (legacy, unchanged look). Rich/multi-series/stacked bars
+  // with axes go through renderCartesian instead.
+  function renderBars(el) {
+    var vals = nums(el, 'data-values');
+    if (!vals.length) return;
+    var labels = strs(el, 'data-labels');
+    el.style.setProperty('--fdy-chart', colorVar(el.getAttribute('data-fdy-color')));
+    var max = Math.max.apply(null, vals) || 1;
+    el.innerHTML = '';
+    var tip = makeTip(el);
+    vals.forEach(function (v, i) {
+      var col = document.createElement('div'); col.className = 'fdy-bars__col';
+      var track = document.createElement('div'); track.className = 'fdy-bars__track';
+      var val = document.createElement('span'); val.className = 'fdy-bars__val'; val.textContent = v;
+      var bar = document.createElement('div'); bar.className = 'fdy-bars__bar';
+      bar.style.height = Math.max(2, (v / max) * 100) + '%';
+      var text = (labels[i] || ('#' + (i + 1))) + ': ' + v;
+      track.appendChild(val); track.appendChild(bar);
+      col.appendChild(track);
+      if (labels[i]) {
+        var lab = document.createElement('div'); lab.className = 'fdy-bars__label'; lab.textContent = labels[i];
+        col.appendChild(lab);
+      }
+      // Per-column hover so re-render (update) never stacks document/element listeners.
+      col.addEventListener('mousemove', function (e) { showTip(tip, el, e.clientX, e.clientY, text); });
+      col.addEventListener('mouseleave', function () { hideTip(tip); });
+      el.appendChild(col);
+    });
+    ensureImg(el);
+  }
+
+  // ---- Cartesian engine: line / area / grouped+stacked bar with themed axes + legend ----
+  function renderCartesian(el, type) {
+    var series = getSeries(el);
+    if (!series.length) return;
+    var labels = strs(el, 'data-labels');
+    var fmt = makeFormat(el.getAttribute('data-fdy-format'));
+    var stacked = type === 'bar' && el.hasAttribute('data-fdy-stacked');
+    var overrides = strs(el, 'data-fdy-colors');
+    var singleColor = el.getAttribute('data-fdy-color');
+    function colorFor(i) {
+      if (overrides[i]) return colorVar(overrides[i]);
+      if (series.length === 1 && singleColor) return colorVar(singleColor);
+      return chartSlotVar(i);
+    }
+
+    var n = series.reduce(function (m, s) { return Math.max(m, s.values.length); }, 0);
+    if (!n) return;
+
+    // y-domain (baseline at 0 unless data dips below).
+    var dataMax = -Infinity, dataMin = Infinity;
+    if (stacked) {
+      for (var c = 0; c < n; c++) {
+        var sum = 0; series.forEach(function (s) { sum += (s.values[c] || 0); });
+        if (sum > dataMax) dataMax = sum; if (sum < dataMin) dataMin = sum;
+      }
+    } else {
+      series.forEach(function (s) { s.values.forEach(function (v) { if (v > dataMax) dataMax = v; if (v < dataMin) dataMin = v; }); });
+    }
+    if (dataMax === -Infinity) dataMax = 1;
+    var base = Math.min(0, dataMin);
+    var top = niceCeil(dataMax > base ? dataMax : base + 1);
+    if (top <= base) top = base + 1;
+
+    var W = 320, H = 180, PL = 38, PR = 10, PT = 10, PB = 22;
+    var plotW = W - PL - PR, plotH = H - PT - PB;
+    function mapY(v) { return PT + plotH * (1 - (v - base) / (top - base)); }
+    var slot = plotW / n;
+    function xCenter(i) { return PL + slot * (i + 0.5); }             // bar / band centre
+    function xLine(i) { return PL + (n === 1 ? plotW / 2 : (i / (n - 1)) * plotW); }
+
+    var svg = svgEl('svg');
+    svg.setAttribute('viewBox', '0 0 ' + W + ' ' + H);
+    svg.setAttribute('aria-hidden', 'true');
+
+    // y gridlines + formatted ticks (bottom line at `base` doubles as the zero baseline).
+    var TICKS = 4;
+    for (var k = 0; k <= TICKS; k++) {
+      var val = base + (top - base) * k / TICKS;
+      var gy = mapY(val);
+      var gl = svgEl('line');
+      gl.setAttribute('x1', PL); gl.setAttribute('x2', PL + plotW);
+      gl.setAttribute('y1', gy.toFixed(1)); gl.setAttribute('y2', gy.toFixed(1));
+      gl.setAttribute('class', 'fdy-chart-xy__grid');
+      svg.appendChild(gl);
+      var tk = svgEl('text');
+      tk.setAttribute('x', PL - 5); tk.setAttribute('y', (gy + 3).toFixed(1));
+      tk.setAttribute('text-anchor', 'end'); tk.setAttribute('class', 'fdy-chart-xy__tick');
+      tk.textContent = fmt(val);
+      svg.appendChild(tk);
+    }
+
+    // x category labels with autoskip.
+    var maxTicks = Math.max(2, Math.floor(plotW / 40)), step = Math.ceil(n / maxTicks);
+    for (var xi = 0; xi < n; xi++) {
+      if (xi % step !== 0 && xi !== n - 1) continue;
+      var lx = (type === 'bar') ? xCenter(xi) : xLine(xi);
+      var xt = svgEl('text');
+      xt.setAttribute('x', lx.toFixed(1)); xt.setAttribute('y', H - 6);
+      xt.setAttribute('text-anchor', 'middle'); xt.setAttribute('class', 'fdy-chart-xy__xlabel');
+      xt.textContent = labels[xi] || ('#' + (xi + 1));
+      svg.appendChild(xt);
+    }
+
+    if (type === 'bar') {
+      var S = series.length;
+      var groupW = slot * 0.72;
+      var barW = stacked ? slot * 0.55 : groupW / S;
+      var acc = [];                                   // running top per category (stacked)
+      for (var ci = 0; ci < n; ci++) acc[ci] = base;
+      series.forEach(function (s, si) {
+        s.values.forEach(function (v, ci2) {
+          if (v == null || isNaN(v)) return;
+          var x, y0, y1;
+          if (stacked) {
+            x = xCenter(ci2) - barW / 2;
+            y0 = mapY(acc[ci2]); y1 = mapY(acc[ci2] + v); acc[ci2] += v;
+          } else {
+            x = PL + slot * ci2 + (slot - groupW) / 2 + barW * si;
+            y0 = mapY(base); y1 = mapY(v);
+          }
+          var rect = svgEl('rect');
+          rect.setAttribute('x', x.toFixed(1)); rect.setAttribute('width', Math.max(1, barW - 1).toFixed(1));
+          rect.setAttribute('y', Math.min(y0, y1).toFixed(1)); rect.setAttribute('height', Math.max(0.5, Math.abs(y1 - y0)).toFixed(1));
+          rect.setAttribute('rx', '1.5'); rect.setAttribute('class', 'fdy-chart-xy__bar');
+          rect.style.fill = colorFor(si);
+          svg.appendChild(rect);
+        });
+      });
+    } else {
+      // line / area: fill (area) beneath the stroke, then a small dot per vertex.
+      series.forEach(function (s, si) {
+        var pts = [];
+        for (var i = 0; i < n; i++) { var v = s.values[i]; if (v == null || isNaN(v)) continue; pts.push([xLine(i), mapY(v)]); }
+        if (!pts.length) return;
+        var d = pts.map(function (p) { return p[0].toFixed(1) + ',' + p[1].toFixed(1); }).join(' ');
+        if (type === 'area') {
+          var y0 = mapY(base).toFixed(1);
+          var poly = svgEl('polygon');
+          poly.setAttribute('points', pts[0][0].toFixed(1) + ',' + y0 + ' ' + d + ' ' + pts[pts.length - 1][0].toFixed(1) + ',' + y0);
+          poly.setAttribute('class', 'fdy-chart-xy__area');
+          poly.style.fill = colorFor(si);
+          svg.appendChild(poly);
+        }
+        if (pts.length >= 2) {
+          var pl = svgEl('polyline');
+          pl.setAttribute('points', d); pl.setAttribute('class', 'fdy-chart-xy__line');
+          pl.style.stroke = colorFor(si);
+          svg.appendChild(pl);
+        }
+        pts.forEach(function (p) {
+          var dot = svgEl('circle');
+          dot.setAttribute('cx', p[0].toFixed(1)); dot.setAttribute('cy', p[1].toFixed(1)); dot.setAttribute('r', '2.2');
+          dot.setAttribute('class', 'fdy-chart-xy__dot'); dot.style.fill = colorFor(si);
+          svg.appendChild(dot);
+        });
+      });
+    }
+
+    // Assemble: optional legend on top, plot below, tooltip layer last.
+    var legendMode = el.getAttribute('data-fdy-legend') || 'auto';
+    var showLegend = legendMode !== 'none' && (series.length >= 2 || legendMode === 'always');
+    el.classList.add('fdy-chart-xy');
+    el.innerHTML = '';
+    if (showLegend) {
+      var legend = document.createElement('ul');
+      legend.className = 'fdy-chart__legend fdy-chart__legend--row';
+      series.forEach(function (s, si) {
+        var li = document.createElement('li');
+        var sw = document.createElement('span'); sw.className = 'fdy-chart__swatch'; sw.style.background = colorFor(si);
+        li.appendChild(sw);
+        li.appendChild(document.createTextNode(s.label || ('Seri ' + (si + 1))));
+        legend.appendChild(li);
+      });
+      el.appendChild(legend);
+    }
+    var plot = document.createElement('div'); plot.className = 'fdy-chart-xy__plot';
+    plot.appendChild(svg);
+    el.appendChild(plot);
+
+    // Hover: one transparent band per category → readout of every series at that x.
+    var tip = makeTip(el);
+    var bandW = (type === 'bar') ? slot : (n > 1 ? plotW / (n - 1) : plotW);
+    for (var b = 0; b < n; b++) {
+      var bx = (type === 'bar') ? (PL + slot * b) : (xLine(b) - bandW / 2);
+      var band = svgEl('rect');
+      band.setAttribute('x', Math.max(0, bx).toFixed(1)); band.setAttribute('y', PT);
+      band.setAttribute('width', bandW.toFixed(1)); band.setAttribute('height', plotH);
+      band.setAttribute('class', 'fdy-chart-xy__band');
+      var parts = series.map(function (s) {
+        var v = s.values[b];
+        return (v == null || isNaN(v)) ? null : (series.length > 1 ? s.label + ' ' : '') + fmt(v);
+      }).filter(Boolean);
+      var text = (labels[b] || ('#' + (b + 1))) + (parts.length ? ' · ' + parts.join(', ') : '');
+      band.addEventListener('mousemove', (function (t) { return function (e) { showTip(tip, el, e.clientX, e.clientY, t); }; })(text));
+      band.addEventListener('mouseleave', function () { hideTip(tip); });
+      svg.appendChild(band);
+    }
+    ensureImg(el);
+  }
+
+  function renderDonut(el) {
+    var vals = nums(el, 'data-values');
+    if (!vals.length) return;
+    var labels = strs(el, 'data-labels');
+    var colors = strs(el, 'data-fdy-colors');
+    var total = vals.reduce(function (a, b) { return a + b; }, 0) || 1;
+    var stops = [], acc = 0;
+    var colorAt = function (i) { return colors[i] ? colorVar(colors[i]) : chartSlotVar(i); };
+    vals.forEach(function (v, i) {
+      var from = (acc / total) * 360, to = ((acc + v) / total) * 360;
+      acc += v;
+      stops.push(colorAt(i) + ' ' + from.toFixed(1) + 'deg ' + to.toFixed(1) + 'deg');
+    });
+    el.innerHTML = '';
+    var ring = document.createElement('div'); ring.className = 'fdy-donut__ring';
+    ring.style.background = 'conic-gradient(' + stops.join(',') + ')';
+    var center = document.createElement('div'); center.className = 'fdy-donut__center';
+    var centerLabel = el.getAttribute('data-fdy-center');
+    center.innerHTML = centerLabel ? '<b></b>' : '<b></b><span>Total</span>';
+    center.querySelector('b').textContent = centerLabel != null ? centerLabel : String(total);
+    ring.appendChild(center);
+    var svg = svgEl('svg');
+    svg.setAttribute('class', 'fdy-donut__hit');
+    svg.setAttribute('viewBox', '0 0 128 128');
+    var ringTip = makeTip(ring), acc2 = 0;
+    vals.forEach(function (v, i) {
+      var a0 = (acc2 / total) * 360, a1 = ((acc2 + v) / total) * 360; acc2 += v;
+      var path = svgEl('path');
+      path.setAttribute('class', 'fdy-donut__seg');
+      path.setAttribute('d', sectorPath(64, 64, 64, 33, a0, a1));
+      var text = (labels[i] || ('#' + (i + 1))) + ': ' + v + ' (' + Math.round((v / total) * 100) + '%)';
+      path.addEventListener('mousemove', function (e) { showTip(ringTip, ring, e.clientX, e.clientY, text); });
+      path.addEventListener('mouseleave', function () { hideTip(ringTip); });
+      svg.appendChild(path);
+    });
+    ring.appendChild(svg);
+    var legend = document.createElement('ul'); legend.className = 'fdy-chart__legend';
+    vals.forEach(function (v, i) {
+      var li = document.createElement('li');
+      var sw = document.createElement('span'); sw.className = 'fdy-chart__swatch'; sw.style.background = colorAt(i);
+      li.appendChild(sw);
+      li.appendChild(document.createTextNode((labels[i] || ('#' + (i + 1))) + ' — ' + Math.round((v / total) * 100) + '%'));
+      legend.appendChild(li);
+    });
+    el.appendChild(ring); el.appendChild(legend);
+    ensureImg(el);
+  }
+
+  // Full (re-)render from current data attributes. Idempotent — safe to call repeatedly.
+  function renderChart(el) {
+    var type = el.getAttribute('data-fdy-chart');
+    if (type === 'sparkline') renderSparkline(el);
+    else if (type === 'donut') renderDonut(el);
+    else if (type === 'line' || type === 'area') renderCartesian(el, type);
+    else if (type === 'bar') {
+      if (el.getAttribute('data-series') || el.hasAttribute('data-fdy-stacked') || el.hasAttribute('data-fdy-axes')) renderCartesian(el, 'bar');
+      else renderBars(el);
+    }
+  }
+
+  // Auto-init renders once; explicit update() re-renders after data changes.
+  function initChart(el) {
+    if (el.dataset.fdyChartReady === '1') return;
+    el.dataset.fdyChartReady = '1';
+    renderChart(el);
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-chart]'), initChart);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayChart = { init: initChart, initAll: initAll, update: renderChart };
+})();
+
+/* 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}).
+ * 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
+ *    chips get a leading check when pressed. Emits "fdy-chip-change" on the group
+ *    (detail {value, pressed, selected}).
+ */
+(function () {
+  'use strict';
+
+  var CHECK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>';
+
+  function initRemove(btn) {
+    if (btn.dataset.fdyChipRmReady === '1') return;
+    btn.dataset.fdyChipRmReady = '1';
+    btn.addEventListener('click', function () {
+      var chip = btn.closest('.fdy-chip');
+      if (!chip) return;
+      var value = chip.getAttribute('data-value');
+      if (!value) {
+        // Derive the label from the chip text, minus the remove button glyph.
+        var clone = chip.cloneNode(true);
+        var rm = clone.querySelector('.fdy-chip__remove');
+        if (rm) rm.remove();
+        value = (clone.textContent || '').trim();
+      }
+      chip.dispatchEvent(new CustomEvent('fdy-chip-remove', { bubbles: true, detail: { value: value } }));
+      chip.remove();
+    });
+  }
+
+  function initGroup(group) {
+    if (group.dataset.fdyChipsReady === '1') return;
+    group.dataset.fdyChipsReady = '1';
+    var single = group.hasAttribute('data-single');
+    if (!group.getAttribute('role')) group.setAttribute('role', 'group');
+    var groupLabel = group.getAttribute('data-label');
+    if (groupLabel && !group.getAttribute('aria-label')) group.setAttribute('aria-label', groupLabel);
+
+    var chips = Array.prototype.slice.call(group.querySelectorAll('.fdy-chip--choice, .fdy-chip--filter'));
+    function valueOf(chip) { return chip.getAttribute('data-value') || (chip.textContent || '').trim(); }
+    function selected() {
+      return chips.filter(function (c) { return c.getAttribute('aria-pressed') === 'true'; }).map(valueOf);
+    }
+
+    chips.forEach(function (chip) {
+      if (!chip.hasAttribute('aria-pressed')) chip.setAttribute('aria-pressed', 'false');
+      if (chip.classList.contains('fdy-chip--filter') && !chip.querySelector('.fdy-chip__check')) {
+        var check = document.createElement('span');
+        check.className = 'fdy-chip__check';
+        check.innerHTML = CHECK;
+        chip.insertBefore(check, chip.firstChild);
+      }
+      chip.addEventListener('click', function () {
+        var wasPressed = chip.getAttribute('aria-pressed') === 'true';
+        if (single) chips.forEach(function (c) { c.setAttribute('aria-pressed', 'false'); });
+        chip.setAttribute('aria-pressed', wasPressed ? 'false' : 'true');
+        group.dispatchEvent(new CustomEvent('fdy-chip-change', {
+          bubbles: true,
+          detail: { value: valueOf(chip), pressed: !wasPressed, selected: selected() }
+        }));
+      });
+    });
+  }
+
+  function initAll(context) {
+    var root = context || document;
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-chips]'), initGroup);
+    Array.prototype.forEach.call(root.querySelectorAll('.fdy-chip__remove'), initRemove);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayChip = { initGroup: initGroup, initRemove: initRemove, initAll: initAll };
+})();
+
+/* Freeday — date picker enhancer (optional, zero-dependency).
+ * Builds an input-styled trigger + calendar popover from an empty wrapper.
+ * Locale comes from <html lang> (via Intl) — month/weekday/value formatting is not hardcoded.
+ *
+ * Markup contract:
+ *  - Single:  <div data-fdy-datepicker data-value="2026-07-21" data-label="Tanggal unggah"
+ *               data-placeholder="Pilih tanggal" data-min="2026-01-01" data-max="2026-12-31"></div>
+ *  - Range:   <div data-fdy-daterange role="group" aria-label="Rentang tanggal">
+ *               <div data-fdy-datepicker data-role="from" data-placeholder="Dari"></div>
+ *               <span class="fdy-daterange__sep">–</span>
+ *               <div data-fdy-datepicker data-role="to" data-placeholder="Sampai"></div>
+ *             </div>
+ *    The range links the two: the end can never precede the start (out-of-range days disable).
+ *
+ * Emits a bubbling "fdy-datepicker-change" CustomEvent on the wrapper: detail {value, date}.
+ * Keyboard in the grid: ←/→ ±1 day, ↑/↓ ±1 week, Home/End week edge, PageUp/Down ±month,
+ * Shift+PageUp/Down ±year, Enter/Space select, Esc close (focus returns to the trigger).
+ */
+(function () {
+  'use strict';
+
+  var LOCALE = document.documentElement.getAttribute('lang') || 'id';
+  var uidSeq = 0;
+  function uid(p) { uidSeq += 1; return p + '-' + uidSeq; }
+  function pad(n) { return n < 10 ? '0' + n : '' + n; }
+  function toISO(d) { return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); }
+  function parseISO(s) {
+    if (!s) return null;
+    var p = String(s).split('-');
+    if (p.length !== 3) return null;
+    var d = new Date(Number(p[0]), Number(p[1]) - 1, Number(p[2]));
+    return isNaN(d.getTime()) ? null : d;
+  }
+  function startOfDay(d) { return new Date(d.getFullYear(), d.getMonth(), d.getDate()); }
+  function sameDay(a, b) { return !!a && !!b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }
+  function addDays(d, n) { var x = new Date(d); x.setDate(x.getDate() + n); return x; }
+  function addMonths(d, n) { var x = new Date(d); x.setMonth(x.getMonth() + n); return x; }
+
+  var monthFmt = new Intl.DateTimeFormat(LOCALE, { month: 'long', year: 'numeric' });
+  var valueFmt = new Intl.DateTimeFormat(LOCALE, { day: '2-digit', month: 'short', year: 'numeric' });
+  var dayLabelFmt = new Intl.DateTimeFormat(LOCALE, { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' });
+
+  function weekdayHeaders() {
+    var monday = new Date(2024, 0, 1); // a known Monday
+    var fmt = new Intl.DateTimeFormat(LOCALE, { weekday: 'short' });
+    var out = [];
+    for (var i = 0; i < 7; i++) out.push(fmt.format(addDays(monday, i)));
+    return out;
+  }
+
+  var CAL_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2"></rect><path d="M16 2v4M8 2v4M3 10h18"></path></svg>';
+
+  function initPicker(wrap) {
+    if (wrap.dataset.fdyDpReady === '1') return wrap._fdyDp || null;
+    wrap.dataset.fdyDpReady = '1';
+    wrap.classList.add('fdy-datepicker');
+
+    var placeholder = wrap.getAttribute('data-placeholder') || 'Pilih tanggal';
+    var label = wrap.getAttribute('data-label') || 'Tanggal';
+    var selected = parseISO(wrap.getAttribute('data-value'));
+    var minDate = parseISO(wrap.getAttribute('data-min'));
+    var maxDate = parseISO(wrap.getAttribute('data-max'));
+    var rangeStart = null, rangeEnd = null; // for in-range shading
+    var view = startOfDay(selected || new Date());
+    view = new Date(view.getFullYear(), view.getMonth(), 1);
+    var focusDate = null;
+
+    var trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'fdy-datepicker__trigger';
+    trigger.setAttribute('aria-haspopup', 'dialog');
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.setAttribute('aria-label', label);
+    var valueSpan = document.createElement('span');
+    valueSpan.className = 'fdy-datepicker__value';
+    trigger.appendChild(valueSpan);
+    // Icon variants (Freeday convention for JS-built controls): [data-fdy-no-icon] omits the
+    // icon; a [data-fdy-icon] child supplies a custom SVG; otherwise the default calendar.
+    if (!wrap.hasAttribute('data-fdy-no-icon')) {
+      var customIcon = wrap.querySelector('[data-fdy-icon]');
+      var icon = document.createElement('span');
+      icon.className = 'fdy-datepicker__icon';
+      icon.innerHTML = customIcon ? customIcon.innerHTML : CAL_ICON;
+      if (customIcon) customIcon.remove();
+      trigger.appendChild(icon);
+    }
+
+    var panel = document.createElement('div');
+    panel.className = 'fdy-datepicker__panel';
+    panel.setAttribute('role', 'dialog');
+    panel.setAttribute('aria-modal', 'false');
+    panel.setAttribute('aria-label', label);
+    panel.hidden = true;
+
+    wrap.appendChild(trigger);
+    wrap.appendChild(panel);
+
+    function updateDisplay() {
+      if (selected) {
+        valueSpan.textContent = valueFmt.format(selected);
+        valueSpan.classList.remove('fdy-datepicker__value--placeholder');
+      } else {
+        valueSpan.textContent = placeholder;
+        valueSpan.classList.add('fdy-datepicker__value--placeholder');
+      }
+    }
+
+    function isDisabled(d) {
+      if (minDate && startOfDay(d).getTime() < startOfDay(minDate).getTime()) return true;
+      if (maxDate && startOfDay(d).getTime() > startOfDay(maxDate).getTime()) return true;
+      return false;
+    }
+
+    function navButton(glyph, aria, onClick) {
+      var b = document.createElement('button');
+      b.type = 'button';
+      b.className = 'fdy-cal__nav';
+      b.textContent = glyph;
+      b.setAttribute('aria-label', aria);
+      b.addEventListener('click', onClick);
+      return b;
+    }
+
+    function render() {
+      panel.innerHTML = '';
+      var head = document.createElement('div');
+      head.className = 'fdy-cal__head';
+      var title = document.createElement('div');
+      title.className = 'fdy-cal__title';
+      title.id = uid('fdy-cal-title');
+      title.textContent = monthFmt.format(view);
+      panel.setAttribute('aria-labelledby', title.id);
+      head.appendChild(navButton('‹', 'Bulan sebelumnya', function () { view = addMonths(view, -1); render(); }));
+      head.appendChild(title);
+      head.appendChild(navButton('›', 'Bulan berikutnya', function () { view = addMonths(view, 1); render(); }));
+      panel.appendChild(head);
+
+      var grid = document.createElement('div');
+      grid.className = 'fdy-cal__grid';
+      grid.setAttribute('role', 'grid');
+      grid.setAttribute('aria-labelledby', title.id);
+      weekdayHeaders().forEach(function (w) {
+        var c = document.createElement('div');
+        c.className = 'fdy-cal__dow';
+        c.setAttribute('role', 'columnheader');
+        c.setAttribute('aria-label', w);
+        c.textContent = w;
+        grid.appendChild(c);
+      });
+
+      var first = new Date(view.getFullYear(), view.getMonth(), 1);
+      var offset = (first.getDay() + 6) % 7; // Monday-first
+      var startCell = addDays(first, -offset);
+      var today = new Date();
+      if (!focusDate) focusDate = selected || today;
+      // Keep the roving cell inside the visible month so the grid is always keyboard-reachable.
+      if (focusDate.getMonth() !== view.getMonth() || focusDate.getFullYear() !== view.getFullYear()) {
+        var dim = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
+        focusDate = new Date(view.getFullYear(), view.getMonth(), Math.min(focusDate.getDate(), dim));
+      }
+
+      for (var i = 0; i < 42; i++) {
+        var d = addDays(startCell, i);
+        var btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'fdy-cal__day';
+        btn.setAttribute('role', 'gridcell');
+        btn.setAttribute('aria-label', dayLabelFmt.format(d));
+        btn.textContent = d.getDate();
+        if (d.getMonth() !== view.getMonth()) btn.classList.add('is-outside');
+        if (sameDay(d, today)) btn.classList.add('is-today');
+        if (selected && sameDay(d, selected)) { btn.classList.add('is-selected'); btn.setAttribute('aria-selected', 'true'); }
+        if (rangeStart && rangeEnd) {
+          var t = startOfDay(d).getTime();
+          if (t > startOfDay(rangeStart).getTime() && t < startOfDay(rangeEnd).getTime()) btn.classList.add('in-range');
+        }
+        if (isDisabled(d)) btn.disabled = true;
+        btn.tabIndex = sameDay(d, focusDate) ? 0 : -1;
+        btn._date = d;
+        btn.addEventListener('click', (function (dd) { return function () { pick(dd); }; })(d));
+        grid.appendChild(btn);
+      }
+      grid.addEventListener('keydown', onGridKey);
+      panel.appendChild(grid);
+    }
+
+    function focusFocusDate() {
+      var cell = panel.querySelector('.fdy-cal__day[tabindex="0"]');
+      if (cell) cell.focus();
+    }
+
+    function moveFocus(next) {
+      focusDate = next;
+      if (next.getMonth() !== view.getMonth() || next.getFullYear() !== view.getFullYear()) {
+        view = new Date(next.getFullYear(), next.getMonth(), 1);
+      }
+      render();
+      focusFocusDate();
+    }
+
+    function onGridKey(e) {
+      var handled = true;
+      switch (e.key) {
+        case 'ArrowLeft': moveFocus(addDays(focusDate, -1)); break;
+        case 'ArrowRight': moveFocus(addDays(focusDate, 1)); break;
+        case 'ArrowUp': moveFocus(addDays(focusDate, -7)); break;
+        case 'ArrowDown': moveFocus(addDays(focusDate, 7)); break;
+        case 'Home': moveFocus(addDays(focusDate, -((focusDate.getDay() + 6) % 7))); break;
+        case 'End': moveFocus(addDays(focusDate, 6 - ((focusDate.getDay() + 6) % 7))); break;
+        case 'PageUp': moveFocus(addMonths(focusDate, e.shiftKey ? -12 : -1)); break;
+        case 'PageDown': moveFocus(addMonths(focusDate, e.shiftKey ? 12 : 1)); break;
+        case 'Enter':
+        case ' ': pick(focusDate); break;
+        case 'Escape': close(true); break;
+        default: handled = false;
+      }
+      if (handled) e.preventDefault();
+    }
+
+    function pick(d) {
+      if (isDisabled(d)) return;
+      selected = startOfDay(d);
+      focusDate = selected;
+      updateDisplay();
+      wrap.dispatchEvent(new CustomEvent('fdy-datepicker-change', {
+        bubbles: true, detail: { value: toISO(selected), date: new Date(selected) }
+      }));
+      close(true);
+    }
+
+    var _pop = null;
+    function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(panel, trigger); return _pop; }
+    function open() {
+      if (!panel.hidden) return;
+      focusDate = selected || focusDate || new Date();
+      view = new Date(focusDate.getFullYear(), focusDate.getMonth(), 1);
+      var p = popCtl(); if (p) p.show(); else panel.hidden = false;
+      trigger.setAttribute('aria-expanded', 'true');
+      trigger.classList.add('is-open');
+      render();
+      focusFocusDate();
+      document.addEventListener('click', onDocClick, true);
+    }
+
+    function close(returnFocus) {
+      if (panel.hidden) return;
+      var p = popCtl(); if (p) p.hide(); else panel.hidden = true;
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.classList.remove('is-open');
+      document.removeEventListener('click', onDocClick, true);
+      if (returnFocus === true) trigger.focus();
+    }
+
+    function onDocClick(e) {
+      if (!wrap.contains(e.target)) close(false);
+    }
+
+    trigger.addEventListener('click', function () { panel.hidden ? open() : close(true); });
+
+    updateDisplay();
+
+    var api = {
+      wrap: wrap,
+      getValue: function () { return selected ? toISO(selected) : ''; },
+      clear: function () { selected = null; updateDisplay(); if (!panel.hidden) render(); },
+      setMin: function (iso) { minDate = parseISO(iso); if (!panel.hidden) render(); },
+      setMax: function (iso) { maxDate = parseISO(iso); if (!panel.hidden) render(); },
+      setRange: function (fromIso, toIso) {
+        rangeStart = parseISO(fromIso);
+        rangeEnd = parseISO(toIso);
+        if (!panel.hidden) render();
+      }
+    };
+    wrap._fdyDp = api;
+    return api;
+  }
+
+  function initRange(root) {
+    if (root.dataset.fdyDrReady === '1') 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"]');
+    if (!fromEl || !toEl) return;
+    var fromApi = initPicker(fromEl);
+    var toApi = initPicker(toEl);
+    if (!fromApi || !toApi) return;
+
+    function sync() {
+      var f = fromApi.getValue();
+      var t = toApi.getValue();
+      toApi.setMin(f || null);   // end can't precede start (one-directional, per Foundation)
+      fromApi.setRange(f, t);     // start stays free — picking a later start clears the end below
+      toApi.setRange(f, t);
+    }
+    fromEl.addEventListener('fdy-datepicker-change', function () {
+      var f = fromApi.getValue(), t = toApi.getValue();
+      if (f && t && t < f) toApi.clear();
+      sync();
+    });
+    toEl.addEventListener('fdy-datepicker-change', function () {
+      var f = fromApi.getValue(), t = toApi.getValue();
+      if (f && t && t < f) fromApi.clear();
+      sync();
+    });
+    sync();
+  }
+
+  function initAll(context) {
+    var ctx = context || document;
+    Array.prototype.forEach.call(ctx.querySelectorAll('[data-fdy-daterange]'), initRange);
+    Array.prototype.forEach.call(ctx.querySelectorAll('[data-fdy-datepicker]'), initPicker);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayDatepicker = { init: initPicker, initAll: initAll };
+})();
+
+/* Freeday — datetime picker composer (optional, zero-dependency).
+ * Combines a child date picker and time picker into one value. It does not build
+ * anything itself — freeday-datepicker.js and freeday-timepicker.js enhance the
+ * children; this only listens for their change events and emits a single combined
+ * "fdy-datetime-change" (detail {date, time, value}). value is "YYYY-MM-DDTHH:MM"
+ * when both parts are set, else "". Icon variants are controlled per child picker
+ * (data-fdy-no-icon / <template data-fdy-icon>), so a datetime picker inherits them.
+ *
+ * Markup: <div data-fdy-datetimepicker>
+ *   <div data-fdy-datepicker data-value="2026-07-21"></div>
+ *   <div data-fdy-timepicker data-value="14:30"></div></div>
+ */
+(function () {
+  'use strict';
+
+  function initDatetime(wrap) {
+    if (wrap.dataset.fdyDtReady === '1') return;
+    wrap.dataset.fdyDtReady = '1';
+    wrap.classList.add('fdy-datetimepicker');
+
+    var dp = wrap.querySelector('[data-fdy-datepicker]');
+    var tp = wrap.querySelector('[data-fdy-timepicker]');
+    if (!dp || !tp) return;
+
+    var date = dp.getAttribute('data-value') || '';
+    var time = tp.getAttribute('data-value') || '';
+
+    function emit() {
+      var value = (date && time) ? (date + 'T' + time) : '';
+      wrap.dispatchEvent(new CustomEvent('fdy-datetime-change', {
+        bubbles: true, detail: { date: date, time: time, value: value }
+      }));
+    }
+
+    // Listen for the children's bubbling change events (order-independent — no need
+    // for the child enhancers to have run before this composer).
+    wrap.addEventListener('fdy-datepicker-change', function (e) { date = e.detail.value; emit(); });
+    wrap.addEventListener('fdy-time-select', function (e) { time = e.detail.value; emit(); });
+
+    var api = {
+      wrap: wrap,
+      getValue: function () { return (date && time) ? (date + 'T' + time) : ''; }
+    };
+    wrap._fdyDt = api;
+    return api;
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-datetimepicker]'), initDatetime);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayDatetime = { init: initDatetime, initAll: initAll };
+})();
+
+/* Freeday — drawer enhancer (optional, zero-dependency).
+ * A trigger [data-fdy-drawer="drawerId"] opens the <dialog class="fdy-drawer" id="drawerId">
+ * as a modal side panel (native showModal gives focus-trap, Esc, and return-focus). Clicking
+ * the backdrop or any [data-close] inside closes it.
+ */
+(function () {
+  'use strict';
+
+  function initDrawer(dialog) {
+    if (dialog.dataset.fdyDrawerReady === '1') 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(); });
+    Array.prototype.forEach.call(dialog.querySelectorAll('[data-close]'), function (b) {
+      b.addEventListener('click', function () { dialog.close(); });
+    });
+  }
+
+  function initTriggers(context) {
+    var ctx = context || document;
+    Array.prototype.forEach.call(ctx.querySelectorAll('[data-fdy-drawer]'), function (btn) {
+      if (btn.dataset.fdyDrawerBound === '1') return;
+      var dialog = document.getElementById(btn.getAttribute('data-fdy-drawer'));
+      if (!dialog) return;
+      initDrawer(dialog);
+      btn.dataset.fdyDrawerBound = '1';
+      btn.addEventListener('click', function () {
+        if (typeof dialog.showModal === 'function') dialog.showModal();
+        else dialog.setAttribute('open', '');
+      });
+    });
+    // Init any drawer dialogs even without a wired trigger (backdrop/close still work).
+    Array.prototype.forEach.call(ctx.querySelectorAll('.fdy-drawer'), initDrawer);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initTriggers(); });
+  } else {
+    initTriggers();
+  }
+
+  window.FreedayDrawer = { init: initTriggers, initAll: initTriggers };
+})();
+
+/* Freeday — form validation enhancer (optional, zero-dependency).
+ * Wires the native Constraint Validation API to accessible inline errors on any
+ * [data-fdy-validate] <form>. Native-first: constraints come from the standard
+ * markup attributes (required, type, pattern, min/max, minlength/maxlength, step);
+ * this only handles presentation + the accessible plumbing.
+ *
+ * Per control it toggles aria-invalid (which the CSS mirrors to the --error border)
+ * and shows the message in a linked [data-fdy-error] element (auto-created inside
+ * the .fdy-field if absent, and wired via aria-describedby).
+ *
+ * Custom messages via data attributes on the control (first match wins):
+ *   data-fdy-msg-required | -type | -pattern | -minlength | -maxlength |
+ *   data-fdy-msg-min | -max | -step | -mismatch, then generic data-fdy-msg.
+ * Cross-field match (e.g. confirm password): data-fdy-match="#otherId".
+ *
+ * Timing: validates on submit (blocks + focuses the first invalid control); after
+ * the first submit attempt each field re-validates on input/blur so errors clear
+ * live. Add data-fdy-eager to validate on blur from the start.
+ *
+ * Emits bubbling CustomEvents on the form: "fdy-form-invalid" (detail {invalid:[]})
+ * and "fdy-form-valid". Exposes window.FreedayForm.
+ */
+(function () {
+  'use strict';
+
+  var seq = 0;
+
+  // ValidityState key -> friendly data-attribute alias.
+  var ALIAS = {
+    valueMissing: 'required',
+    typeMismatch: 'type',
+    patternMismatch: 'pattern',
+    tooShort: 'minlength',
+    tooLong: 'maxlength',
+    rangeUnderflow: 'min',
+    rangeOverflow: 'max',
+    stepMismatch: 'step',
+    badInput: 'type',
+    customError: 'mismatch'
+  };
+  var DEFAULTS = {
+    required: 'Wajib diisi.',
+    type: 'Format tidak valid.',
+    pattern: 'Format tidak sesuai.',
+    minlength: 'Terlalu pendek.',
+    maxlength: 'Terlalu panjang.',
+    min: 'Nilai terlalu kecil.',
+    max: 'Nilai terlalu besar.',
+    step: 'Nilai tidak sesuai kelipatan.',
+    mismatch: 'Nilai tidak cocok.'
+  };
+  var VALIDITY_KEYS = ['valueMissing', 'typeMismatch', 'patternMismatch', 'tooShort', 'tooLong', 'rangeUnderflow', 'rangeOverflow', 'stepMismatch', 'badInput'];
+
+  function isCandidate(el) {
+    if (el.disabled || el.type === 'hidden' || el.type === 'submit' || el.type === 'button' || el.type === 'reset') return false;
+    return typeof el.checkValidity === 'function' && el.willValidate;
+  }
+
+  function fieldOf(el) { return el.closest('.fdy-field') || el.parentElement; }
+
+  function ensureErrorEl(el) {
+    var field = fieldOf(el);
+    var errEl = field ? field.querySelector('[data-fdy-error]') : null;
+    if (!errEl) {
+      errEl = document.createElement('p');
+      errEl.className = 'fdy-help fdy-help--error';
+      errEl.setAttribute('data-fdy-error', '');
+      errEl.hidden = true;
+      (field || el.parentElement).appendChild(errEl);
+    }
+    if (!errEl.id) { seq += 1; errEl.id = 'fdy-err-' + seq; }
+    // Link the control to its message without clobbering existing describedby.
+    var described = (el.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+    if (described.indexOf(errEl.id) === -1) { described.push(errEl.id); el.setAttribute('aria-describedby', described.join(' ')); }
+    return errEl;
+  }
+
+  function messageFor(el) {
+    // Cross-field match runs first (drives customError via setCustomValidity).
+    el.setCustomValidity('');
+    var matchSel = el.getAttribute('data-fdy-match');
+    if (matchSel) {
+      var other = document.querySelector(matchSel);
+      if (other && el.value !== other.value) {
+        el.setCustomValidity(el.getAttribute('data-fdy-msg-mismatch') || el.getAttribute('data-fdy-msg') || DEFAULTS.mismatch);
+      }
+    }
+    if (el.validity.valid) return '';
+    var alias = el.validity.customError ? 'mismatch' : null;
+    if (!alias) {
+      for (var i = 0; i < VALIDITY_KEYS.length; i++) {
+        if (el.validity[VALIDITY_KEYS[i]]) { alias = ALIAS[VALIDITY_KEYS[i]]; break; }
+      }
+    }
+    var custom = alias ? el.getAttribute('data-fdy-msg-' + alias) : null;
+    return custom || el.getAttribute('data-fdy-msg') || (alias && DEFAULTS[alias]) || el.validationMessage || 'Tidak valid.';
+  }
+
+  function paint(el, message) {
+    var errEl = ensureErrorEl(el);
+    if (message) {
+      el.setAttribute('aria-invalid', 'true');
+      errEl.textContent = message;
+      errEl.hidden = false;
+    } else {
+      el.removeAttribute('aria-invalid');
+      errEl.textContent = '';
+      errEl.hidden = true;
+    }
+  }
+
+  function initForm(form) {
+    if (form.dataset.fdyFormReady === '1') return;
+    form.dataset.fdyFormReady = '1';
+    form.setAttribute('novalidate', '');
+    var eager = form.hasAttribute('data-fdy-eager');
+    var submitted = false;
+
+    function controls() {
+      return Array.prototype.filter.call(form.elements, isCandidate);
+    }
+    function validateOne(el) {
+      var msg = messageFor(el);
+      paint(el, msg);
+      return !msg;
+    }
+    function liveBind(el) {
+      if (el.dataset.fdyFieldBound === '1') return;
+      el.dataset.fdyFieldBound = '1';
+      var live = function () { if (submitted || eager) validateOne(el); };
+      el.addEventListener('blur', live, true);
+      el.addEventListener('input', function () { if ((submitted || eager) && el.getAttribute('aria-invalid') === 'true') validateOne(el); });
+    }
+
+    Array.prototype.forEach.call(controls(), liveBind);
+
+    form.addEventListener('submit', function (e) {
+      submitted = true;
+      var invalid = [];
+      Array.prototype.forEach.call(controls(), function (el) {
+        liveBind(el);
+        if (!validateOne(el)) invalid.push(el);
+      });
+      if (invalid.length) {
+        e.preventDefault();
+        invalid[0].focus();
+        form.dispatchEvent(new CustomEvent('fdy-form-invalid', { bubbles: true, detail: { invalid: invalid } }));
+      } else {
+        form.dispatchEvent(new CustomEvent('fdy-form-valid', { bubbles: true }));
+      }
+    });
+
+    var api = {
+      form: form,
+      validate: function () {
+        submitted = true;
+        var invalid = [];
+        Array.prototype.forEach.call(controls(), function (el) { if (!validateOne(el)) invalid.push(el); });
+        return invalid;
+      },
+      reset: function () {
+        submitted = false;
+        Array.prototype.forEach.call(controls(), function (el) { paint(el, ''); });
+      }
+    };
+    form._fdyForm = api;
+    return api;
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-validate]'), initForm);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayForm = { init: initForm, initAll: initAll };
+})();
+
+/* Freeday — input mask + password reveal enhancer (optional, zero-dependency).
+ *
+ * [data-fdy-mask]="pattern" formats a text input as you type. Placeholders:
+ *   #  a digit (0-9)      A  a letter (a-z/A-Z)      *  a letter or digit
+ * Any other pattern char is a literal, inserted automatically
+ *   (e.g. "####-####-####", "(###) ###-####", "##/##/####").
+ * The raw (unmasked) value is mirrored to el.dataset.fdyRaw and the bubbling
+ * "fdy-mask" CustomEvent (detail {value, raw}). A native input event is
+ * re-dispatched so validation / framework bindings observe the change.
+ *
+ * [data-fdy-password] on a password <input class="fdy-input"> wraps it in the
+ * input-group chrome and adds a show/hide toggle (type swap + aria-pressed).
+ */
+(function () {
+  'use strict';
+
+  var EYE = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"></path><circle cx="12" cy="12" r="3"></circle></svg>';
+  var EYE_OFF = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.9 5.2A9.8 9.8 0 0 1 12 5c6.5 0 10 7 10 7a17 17 0 0 1-3.2 4M6.1 6.1A17 17 0 0 0 2 12s3.5 7 10 7a9.7 9.7 0 0 0 4-.85"></path><path d="m3 3 18 18"></path></svg>';
+
+  function matches(placeholder, ch) {
+    if (placeholder === '#') return /\d/.test(ch);
+    if (placeholder === 'A') return /[a-zA-Z]/.test(ch);
+    if (placeholder === '*') return /[a-zA-Z0-9]/.test(ch);
+    return false;
+  }
+  function isPlaceholder(ch) { return ch === '#' || ch === 'A' || ch === '*'; }
+
+  // Keep only characters the pattern's placeholders could accept.
+  function rawOf(pattern, value) {
+    var allowDigit = pattern.indexOf('#') !== -1 || pattern.indexOf('*') !== -1;
+    var allowAlpha = pattern.indexOf('A') !== -1 || pattern.indexOf('*') !== -1;
+    var out = '';
+    for (var i = 0; i < value.length; i++) {
+      var c = value[i];
+      if ((allowDigit && /\d/.test(c)) || (allowAlpha && /[a-zA-Z]/.test(c))) out += c;
+    }
+    return out;
+  }
+  function format(pattern, raw) {
+    var out = '', ri = 0;
+    for (var pi = 0; pi < pattern.length && ri < raw.length; pi++) {
+      var p = pattern[pi];
+      if (isPlaceholder(p)) {
+        while (ri < raw.length && !matches(p, raw[ri])) ri++;
+        if (ri < raw.length) { out += raw[ri]; ri++; }
+      } else {
+        out += p;
+      }
+    }
+    return out;
+  }
+
+  function initMask(el) {
+    if (el.dataset.fdyMaskReady === '1') return;
+    el.dataset.fdyMaskReady = '1';
+    var pattern = el.getAttribute('data-fdy-mask') || '';
+    if (!pattern) return;
+    el.setAttribute('inputmode', pattern.indexOf('A') === -1 ? 'numeric' : 'text');
+
+    function apply() {
+      var raw = rawOf(pattern, el.value);
+      var formatted = format(pattern, raw);
+      if (formatted !== el.value) {
+        el.value = formatted;
+        // Masked entry is left-to-right; park the caret at the end.
+        try { el.setSelectionRange(formatted.length, formatted.length); } catch (err) { /* number/date inputs */ }
+      }
+      el.dataset.fdyRaw = raw;
+      el.dispatchEvent(new CustomEvent('fdy-mask', { bubbles: true, detail: { value: formatted, raw: raw } }));
+    }
+    el.addEventListener('input', apply);
+    if (el.value) apply();
+  }
+
+  function initReveal(input) {
+    if (input.dataset.fdyPwReady === '1') return;
+    input.dataset.fdyPwReady = '1';
+
+    var group = document.createElement('span');
+    group.className = 'fdy-input-group';
+    input.parentNode.insertBefore(group, input);
+    group.appendChild(input);
+
+    var btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'fdy-input-group__btn';
+    btn.setAttribute('aria-pressed', 'false');
+    btn.setAttribute('aria-label', 'Tampilkan kata sandi');
+    btn.innerHTML = EYE;
+    btn.addEventListener('click', function () {
+      var reveal = input.type === 'password';
+      input.type = reveal ? 'text' : 'password';
+      btn.setAttribute('aria-pressed', reveal ? 'true' : 'false');
+      btn.setAttribute('aria-label', reveal ? 'Sembunyikan kata sandi' : 'Tampilkan kata sandi');
+      btn.innerHTML = reveal ? EYE_OFF : EYE;
+      input.focus();
+    });
+    group.appendChild(btn);
+  }
+
+  function initAll(context) {
+    var root = context || document;
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-mask]'), initMask);
+    Array.prototype.forEach.call(root.querySelectorAll('[data-fdy-password]'), initReveal);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayMask = { initMask: initMask, initReveal: initReveal, initAll: initAll };
+})();
+
+/* Freeday — menu enhancer (optional, zero-dependency).
+ * Menu-button pattern (WAI-ARIA APG): a trigger with aria-haspopup="menu" toggles a
+ * role="menu" popup of role="menuitem" buttons. Also powers the split button
+ * (main action + attached caret toggle). Auto-inits [data-fdy-menu].
+ *
+ * Markup: <div data-fdy-menu><button aria-haspopup="menu" aria-expanded="false">…</button>
+ *   <ul class="fdy-menu" role="menu" hidden><li role="none">
+ *     <button class="fdy-menu__item" role="menuitem">…</button></li>…</ul></div>
+ * Keyboard: trigger ↓/Enter/Space opens to first item, ↑ opens to last; in the menu
+ * ↑/↓/Home/End move, Esc closes (focus → trigger), Tab closes; activating an item closes.
+ */
+(function () {
+  'use strict';
+
+  function menuItems(menu) {
+    return Array.prototype.slice.call(menu.querySelectorAll('[role="menuitem"]'))
+      .filter(function (i) { return !i.disabled && !i.hidden; });
+  }
+
+  function initMenu(wrap) {
+    if (wrap.dataset.fdyMenuReady === '1') return;
+    wrap.dataset.fdyMenuReady = '1';
+    var trigger = wrap.querySelector('[aria-haspopup="menu"]');
+    var menu = wrap.querySelector('.fdy-menu, [role="menu"]');
+    if (!trigger || !menu) return;
+
+    Array.prototype.forEach.call(menu.querySelectorAll('[role="menuitem"]'), function (i) {
+      i.setAttribute('tabindex', '-1');
+    });
+    menu.hidden = true;
+    trigger.setAttribute('aria-expanded', 'false');
+
+    function focusAt(index) {
+      var its = menuItems(menu);
+      if (!its.length) return;
+      its[(index + its.length) % its.length].focus();
+    }
+    var _pop = null;
+    function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(menu, trigger, { matchWidth: false }); return _pop; }
+    function open(index) {
+      var p = popCtl(); if (p) p.show(); else menu.hidden = false;
+      trigger.setAttribute('aria-expanded', 'true');
+      document.addEventListener('click', onDocClick, true);
+      focusAt(index);
+    }
+    function close(returnFocus) {
+      if (menu.hidden) return;
+      var p = popCtl(); if (p) p.hide(); else menu.hidden = true;
+      trigger.setAttribute('aria-expanded', 'false');
+      document.removeEventListener('click', onDocClick, true);
+      if (returnFocus === true) trigger.focus();
+    }
+    function onDocClick(e) { if (!wrap.contains(e.target)) close(false); }
+
+    trigger.addEventListener('click', function (e) {
+      e.stopPropagation();
+      if (menu.hidden) open(0); else close(false);
+    });
+    trigger.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(0); }
+      else if (e.key === 'ArrowUp') { e.preventDefault(); open(-1); }
+    });
+    menu.addEventListener('keydown', function (e) {
+      var its = menuItems(menu);
+      var cur = its.indexOf(document.activeElement);
+      switch (e.key) {
+        case 'ArrowDown': e.preventDefault(); focusAt(cur + 1); break;
+        case 'ArrowUp': e.preventDefault(); focusAt(cur - 1); break;
+        case 'Home': e.preventDefault(); focusAt(0); break;
+        case 'End': e.preventDefault(); focusAt(its.length - 1); break;
+        case 'Escape': e.preventDefault(); close(true); break;
+        case 'Tab': close(false); break;
+        default: break;
+      }
+    });
+    menu.addEventListener('click', function (e) {
+      var item = e.target.closest('[role="menuitem"]');
+      if (item && !item.disabled) close(true);
+    });
+  }
+
+  function initAll(ctx) {
+    Array.prototype.forEach.call((ctx || document).querySelectorAll('[data-fdy-menu]'), initMenu);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayMenu = { init: initMenu, initAll: initAll };
+})();
+
+/* Freeday — popover positioning helper (optional, zero-dependency).
+ * Lifts a dropdown panel into the top layer via the native Popover API so it escapes ANY
+ * ancestor overflow clip (a .fdy-card with overflow:hidden, an app-shell main with
+ * overflow:auto, …), then positions it `fixed` against its trigger — flipping above when
+ * there is no room below, and matching the trigger width. The panel stays a DOM child of its
+ * component, so focus, outside-click (.closest), and ARIA relationships keep working unchanged.
+ *
+ * Used by the select/combo, datepicker, timepicker, cascade, autocomplete and menu enhancers;
+ * the freeday/vue adapter ships an equivalent `usePopover` composable.
+ *
+ * attach(panel, trigger) -> { show(), hide() }. show()/hide() also toggle the panel's [hidden]
+ * attribute so callers keep using `!panel.hidden` for open-state and the `:not([hidden])`
+ * entrance animation still fires. On browsers without the Popover API it degrades to that
+ * [hidden] toggle over the panel's existing absolute-positioned CSS (clipped, but functional).
+ */
+(function () {
+  'use strict';
+
+  var GAP = 4; // ~ --space-1, breathing room between trigger and panel
+  var supported = typeof HTMLElement !== 'undefined'
+    && typeof HTMLElement.prototype.showPopover === 'function';
+
+  // Position `panel` (already shown, so it has a measurable box) against `trigger`'s rect.
+  // matchWidth (default true) floors the panel to the trigger width — right for input-shaped
+  // dropdowns (combo/cascade/date/time), skipped for menus that keep their own min-width.
+  function place(panel, trigger, matchWidth) {
+    var r = trigger.getBoundingClientRect();
+    panel.style.position = 'fixed';
+    panel.style.margin = '0';
+    panel.style.inset = 'auto';                 // clear the UA popover centering
+    if (matchWidth !== false) panel.style.minWidth = r.width + 'px'; // at least as wide as the trigger
+    var ph = panel.offsetHeight, pw = panel.offsetWidth;
+    var vw = document.documentElement.clientWidth, vh = document.documentElement.clientHeight;
+    var below = vh - r.bottom - GAP, above = r.top - GAP;
+    // Prefer below; flip above only when it doesn't fit below and above has more room.
+    var top = (ph <= below || below >= above) ? (r.bottom + GAP) : Math.max(GAP, r.top - GAP - ph);
+    var left = r.left;
+    if (left + pw > vw - GAP) left = Math.max(GAP, vw - GAP - pw); // keep within the viewport
+    panel.style.top = Math.round(top) + 'px';
+    panel.style.left = Math.round(left) + 'px';
+  }
+
+  function attach(panel, trigger, opts) {
+    var matchWidth = !(opts && opts.matchWidth === false);
+    if (supported) panel.setAttribute('popover', 'manual');
+    function reposition() { if (supported && panel.matches(':popover-open')) place(panel, trigger, matchWidth); }
+    return {
+      show: function () {
+        panel.hidden = false;
+        if (supported) {
+          if (!panel.matches(':popover-open')) panel.showPopover();
+          place(panel, trigger, matchWidth);
+          window.addEventListener('scroll', reposition, true); // capture: any scrolling ancestor
+          window.addEventListener('resize', reposition);
+        }
+      },
+      hide: function () {
+        if (supported) {
+          window.removeEventListener('scroll', reposition, true);
+          window.removeEventListener('resize', reposition);
+          if (panel.matches(':popover-open')) panel.hidePopover();
+        }
+        panel.hidden = true;
+      }
+    };
+  }
+
+  window.FreedayPopover = { attach: attach, place: place, supported: supported };
+})();
+
+/* Freeday — rating enhancer (optional, zero-dependency).
+ * Fills stars up to the checked radio (and previews on hover) for an interactive
+ * [data-fdy-rating] radio group; for [data-fdy-readonly] it fills from data-value.
+ * The radios are native — arrow-key selection and form association come for free.
+ */
+(function () {
+  'use strict';
+
+  function initRating(root) {
+    if (root.dataset.fdyRatingReady === '1') return;
+    root.dataset.fdyRatingReady = '1';
+
+    var stars = Array.prototype.slice.call(root.querySelectorAll('.fdy-rating__star'));
+    if (!stars.length) return;
+
+    function fill(n) {
+      stars.forEach(function (s, i) { s.classList.toggle('is-filled', i < n); });
+    }
+
+    if (root.hasAttribute('data-fdy-readonly')) {
+      fill(parseInt(root.getAttribute('data-value'), 10) || 0);
+      return;
+    }
+
+    var inputs = stars.map(function (s) { return s.querySelector('input'); });
+    function current() {
+      for (var i = 0; i < inputs.length; i++) { if (inputs[i] && inputs[i].checked) return i + 1; }
+      return 0;
+    }
+
+    fill(current());
+    root.addEventListener('change', function () { fill(current()); });
+    stars.forEach(function (s, i) {
+      s.addEventListener('mouseenter', function () { fill(i + 1); });
+    });
+    root.addEventListener('mouseleave', function () { fill(current()); });
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-rating]'), initRating);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayRating = { init: initRating, initAll: initAll };
+})();
+
+/* Freeday — combobox enhancer (optional, zero-dependency).
+ * Implements the WAI-ARIA APG "select-only combobox" pattern for every
+ * [data-fdy-combo] on the page. Progressive enhancement: the markup is the
+ * component, this script wires behavior. In a Vue/React/Blazor app you would
+ * bind your own state instead — this is the framework-agnostic reference.
+ *
+ * Expected markup:
+ *   <div class="fdy-combo" data-fdy-combo data-value="x">
+ *     <button type="button" class="fdy-combo__button" role="combobox"
+ *             aria-haspopup="listbox" aria-expanded="false"
+ *             aria-labelledby="LBL VAL">
+ *       <span class="fdy-combo__value" id="VAL">Label</span>
+ *     </button>
+ *     <ul class="fdy-combo__listbox" role="listbox" hidden>
+ *       <li class="fdy-combo__option" role="option" data-value="x"
+ *           aria-selected="true"><span class="fdy-combo__check">✓</span>Label</li>
+ *     </ul>
+ *   </div>
+ *
+ * Emits a bubbling "fdy-change" CustomEvent on the root with detail.value.
+ */
+(function () {
+  'use strict';
+
+  var seq = 0;
+  var openClose = null; // close() of the currently-open combo, or null
+
+  function optionLabel(opt) {
+    var check = opt.querySelector('.fdy-combo__check');
+    var node = check && check.nextSibling ? check.nextSibling.textContent : opt.textContent;
+    return (node || '').trim();
+  }
+
+  function initCombo(root) {
+    if (root.dataset.fdyComboReady === '1') return; // idempotent
+    var button = root.querySelector('.fdy-combo__button');
+    var listbox = root.querySelector('.fdy-combo__listbox');
+    var valueEl = root.querySelector('.fdy-combo__value');
+    var options = Array.prototype.slice.call(root.querySelectorAll('.fdy-combo__option'));
+    if (!button || !listbox || !valueEl || options.length === 0) return;
+    root.dataset.fdyComboReady = '1';
+
+    seq += 1;
+    if (!listbox.id) listbox.id = 'fdy-combo-list-' + seq;
+    button.setAttribute('aria-controls', listbox.id);
+    options.forEach(function (opt, i) {
+      if (!opt.id) opt.id = listbox.id + '-opt-' + i;
+    });
+
+    var typed = '';
+    var typedTimer = null;
+
+    function highlightedIndex() {
+      for (var i = 0; i < options.length; i++) {
+        if (options[i].classList.contains('is-highlighted')) return i;
+      }
+      return -1;
+    }
+    function setHighlight(i) {
+      options.forEach(function (opt, idx) {
+        opt.classList.toggle('is-highlighted', idx === i);
+      });
+      if (i >= 0) {
+        button.setAttribute('aria-activedescendant', options[i].id);
+        options[i].scrollIntoView({ block: 'nearest' });
+      } else {
+        button.removeAttribute('aria-activedescendant');
+      }
+    }
+    function isOpen() {
+      return !listbox.hidden;
+    }
+    var _pop = null;
+    function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(listbox, button); return _pop; }
+    function open() {
+      if (openClose && openClose !== close) openClose();
+      var p = popCtl(); if (p) p.show(); else listbox.hidden = false;
+      button.classList.add('is-open');
+      button.setAttribute('aria-expanded', 'true');
+      var selected = options.findIndex(function (opt) {
+        return opt.getAttribute('aria-selected') === 'true';
+      });
+      setHighlight(selected < 0 ? 0 : selected);
+      openClose = close;
+    }
+    function close() {
+      var p = popCtl(); if (p) p.hide(); else listbox.hidden = true;
+      button.classList.remove('is-open');
+      button.setAttribute('aria-expanded', 'false');
+      button.removeAttribute('aria-activedescendant');
+      setHighlight(-1);
+      if (openClose === close) openClose = null;
+    }
+    function choose(opt) {
+      options.forEach(function (other) {
+        var on = other === opt;
+        other.setAttribute('aria-selected', on ? 'true' : 'false');
+        var check = other.querySelector('.fdy-combo__check');
+        if (check) check.textContent = on ? '✓' : '';
+      });
+      root.setAttribute('data-value', opt.getAttribute('data-value') || '');
+      valueEl.textContent = optionLabel(opt);
+      valueEl.classList.remove('fdy-combo__value--placeholder');
+      root.dispatchEvent(new CustomEvent('fdy-change', {
+        bubbles: true,
+        detail: { value: opt.getAttribute('data-value') }
+      }));
+      close();
+      button.focus();
+    }
+
+    button.addEventListener('click', function () {
+      isOpen() ? close() : open();
+    });
+    // Pressing an option must not blur the button: a blur fires the focusout
+    // handler below, which closes the listbox before the option's click lands —
+    // so the pick is lost (real mouse only; synthetic .click() never blurs).
+    // preventDefault on mousedown keeps focus on the button without blocking click.
+    listbox.addEventListener('mousedown', function (e) { e.preventDefault(); });
+    options.forEach(function (opt, i) {
+      opt.addEventListener('click', function () { choose(opt); });
+      opt.addEventListener('mousemove', function () { setHighlight(i); });
+    });
+
+    root.addEventListener('keydown', function (e) {
+      var hi = highlightedIndex();
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          isOpen() ? setHighlight((hi + 1) % options.length) : open();
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          isOpen() ? setHighlight((hi - 1 + options.length) % options.length) : open();
+          break;
+        case 'Home':
+          if (isOpen()) { e.preventDefault(); setHighlight(0); }
+          break;
+        case 'End':
+          if (isOpen()) { e.preventDefault(); setHighlight(options.length - 1); }
+          break;
+        case 'Enter':
+        case ' ':
+          e.preventDefault();
+          if (isOpen() && hi >= 0) choose(options[hi]); else open();
+          break;
+        case 'Escape':
+          if (isOpen()) { e.preventDefault(); close(); button.focus(); }
+          break;
+        case 'Tab':
+          if (isOpen()) close();
+          break;
+        default:
+          if (e.key.length === 1 && /\S/.test(e.key) && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            typed += e.key.toLowerCase();
+            clearTimeout(typedTimer);
+            typedTimer = setTimeout(function () { typed = ''; }, 500);
+            var match = options.findIndex(function (opt) {
+              return optionLabel(opt).toLowerCase().indexOf(typed) === 0;
+            });
+            if (match >= 0) { if (!isOpen()) open(); setHighlight(match); }
+          }
+      }
+    });
+
+    // Close when focus leaves the whole combo (e.g. Shift+Tab off the button).
+    root.addEventListener('focusout', function (e) {
+      if (!root.contains(e.relatedTarget)) close();
+    });
+  }
+
+  function initAll(context) {
+    var scope = context || document;
+    Array.prototype.forEach.call(
+      scope.querySelectorAll('[data-fdy-combo]'),
+      initCombo
+    );
+  }
+
+  // One global handler closes the open combo on an outside click.
+  document.addEventListener('click', function (e) {
+    if (openClose && !(e.target.closest && e.target.closest('.fdy-combo'))) {
+      openClose();
+    }
+  });
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayCombo = { init: initCombo, initAll: initAll };
+})();
+
+/* Freeday — slider value binding (optional, zero-dependency).
+ * Mirrors a [data-fdy-slider] range input's value into <output for="inputId">, with an
+ * optional prefix/suffix on the output (data-fdy-prefix / data-fdy-suffix). The range itself
+ * is a native input — keyboard and ARIA are built in; this only updates the visible readout.
+ */
+(function () {
+  'use strict';
+
+  function formatted(out, value) {
+    return (out.getAttribute('data-fdy-prefix') || '') + value + (out.getAttribute('data-fdy-suffix') || '');
+  }
+
+  function initSlider(input) {
+    if (input.dataset.fdySliderReady === '1') return;
+    input.dataset.fdySliderReady = '1';
+    var out = input.id ? document.querySelector('output[for="' + input.id + '"]') : null;
+    if (!out) return;
+    function sync() { out.textContent = formatted(out, input.value); }
+    input.addEventListener('input', sync);
+    sync();
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-slider]'), initSlider);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedaySlider = { init: initSlider, 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
+ * [data-fdy-stepper].
+ *
+ * Markup: <div data-fdy-stepper>
+ *   <ol class="fdy-stepper">
+ *     <li class="fdy-step"><button class="fdy-step__btn"><span class="fdy-step__marker">1</span>
+ *       <span class="fdy-step__label">…</span></button></li>… </ol>
+ *   <div class="fdy-step-panels">
+ *     <div class="fdy-step-panel">…</div>… </div>
+ *   <div class="fdy-step-nav"><button data-fdy-step-prev>…</button>
+ *     <button data-fdy-step-next>…</button></div></div>
+ * Emits bubbling "fdy-step-change" {index} and "fdy-step-finish" (Next on the last step).
+ */
+(function () {
+  'use strict';
+
+  var CHECK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"></path></svg>';
+
+  function initStepper(root) {
+    if (root.dataset.fdyStepperReady === '1') return;
+    root.dataset.fdyStepperReady = '1';
+
+    var steps = Array.prototype.slice.call(root.querySelectorAll('.fdy-step'));
+    var panels = Array.prototype.slice.call(root.querySelectorAll('.fdy-step-panel'));
+    var prevBtn = root.querySelector('[data-fdy-step-prev]');
+    var nextBtn = root.querySelector('[data-fdy-step-next]');
+    if (!steps.length) return;
+
+    var active = 0;
+    for (var i = 0; i < steps.length; i++) {
+      if (steps[i].classList.contains('is-active')) { active = i; break; }
+    }
+    var maxReached = active;
+    var nextLabel = nextBtn ? nextBtn.textContent : '';
+
+    steps.forEach(function (s) {
+      var marker = s.querySelector('.fdy-step__marker');
+      if (marker && marker.dataset.num == null) marker.dataset.num = marker.textContent.trim();
+    });
+
+    function render() {
+      steps.forEach(function (s, i) {
+        s.classList.toggle('is-active', i === active);
+        s.classList.toggle('is-complete', i < active);
+        if (i === active) s.setAttribute('aria-current', 'step'); else s.removeAttribute('aria-current');
+        var marker = s.querySelector('.fdy-step__marker');
+        if (marker) marker.innerHTML = i < active ? CHECK : (marker.dataset.num || String(i + 1));
+        var btn = s.querySelector('.fdy-step__btn');
+        if (btn) btn.disabled = i > maxReached;
+      });
+      panels.forEach(function (p, i) { p.hidden = i !== active; });
+      if (prevBtn) prevBtn.disabled = active === 0;
+      if (nextBtn) nextBtn.textContent = active === steps.length - 1 ? 'Selesai' : (nextLabel || 'Lanjut');
+      root.dispatchEvent(new CustomEvent('fdy-step-change', { bubbles: true, detail: { index: active } }));
+    }
+
+    function go(i) {
+      if (i < 0 || i >= steps.length) return;
+      active = i;
+      if (active > maxReached) maxReached = active;
+      render();
+    }
+
+    if (prevBtn) prevBtn.addEventListener('click', function () { go(active - 1); });
+    if (nextBtn) nextBtn.addEventListener('click', function () {
+      if (active < steps.length - 1) go(active + 1);
+      else root.dispatchEvent(new CustomEvent('fdy-step-finish', { bubbles: true }));
+    });
+    steps.forEach(function (s, i) {
+      var btn = s.querySelector('.fdy-step__btn');
+      if (btn) btn.addEventListener('click', function () { if (i <= maxReached) go(i); });
+    });
+
+    render();
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-stepper]'), initStepper);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayStepper = { init: initStepper, initAll: initAll };
+})();
+
+/* Freeday — data-table enhancer (optional, zero-dependency).
+ * Adds client-side search, column sort, pagination and row selection to any
+ * [data-fdy-table]. Progressive enhancement over a plain semantic <table>;
+ * in a framework app, do this server- or store-side instead.
+ *
+ * Markup contract (see docs): a `.fdy-datatable[data-fdy-table]` containing a
+ * `.fdy-table-toolbar` (with `[data-fdy-table-search]`, `[data-fdy-table-count]`),
+ * a `<table class="fdy-table">` whose sortable headers hold
+ * `<button class="fdy-table__sortbtn" data-fdy-sort[="number"]>`, optional
+ * selection checkboxes (`[data-fdy-select-all]`, `[data-fdy-row-select]`), and a
+ * `.fdy-table-footer` (with `[data-fdy-table-info]`, `[data-fdy-table-pagination]`).
+ * Numeric columns should give each cell a `data-sort-value`.
+ *
+ * Column filters: mark a header `<th data-fdy-filter="text|enum|number">` and a funnel
+ * button is injected; text filters by contains, enum by a value checklist, number by a
+ * min/max range. All active column filters AND the global search must pass (logical AND).
+ *
+ * Bulk actions: an optional `[data-fdy-table-bulk]` bar (hidden by default) with a
+ * `[data-fdy-table-bulk-count]` label and a `[data-fdy-table-bulk-clear]` button shows
+ * while any row is selected.
+ *
+ * Emits a bubbling "fdy-table-change" CustomEvent (detail: {shown, total, page}).
+ */
+(function () {
+  'use strict';
+
+  function cellText(row, index) {
+    var cell = row.cells[index];
+    if (!cell) return '';
+    return (cell.getAttribute('data-sort-value') != null
+      ? cell.getAttribute('data-sort-value')
+      : cell.textContent).trim();
+  }
+
+  function initTable(root) {
+    if (root.dataset.fdyTableReady === '1') return;
+    var table = root.querySelector('table.fdy-table');
+    var tbody = table && table.querySelector('tbody');
+    if (!table || !tbody) return;
+    root.dataset.fdyTableReady = '1';
+
+    var allRows = Array.prototype.slice.call(tbody.querySelectorAll(':scope > tr'));
+    var searchInput = root.querySelector('[data-fdy-table-search]');
+    var countEl = root.querySelector('[data-fdy-table-count]');
+    var infoEl = root.querySelector('[data-fdy-table-info]');
+    var pagerEl = root.querySelector('[data-fdy-table-pagination]');
+    var selectAll = root.querySelector('[data-fdy-select-all]');
+    var pageSize = parseInt(root.getAttribute('data-page-size'), 10) || 0; // 0 = no pagination
+
+    var sortButtons = Array.prototype.slice.call(root.querySelectorAll('.fdy-table__sortbtn[data-fdy-sort]'));
+    var sortCol = -1;   // column index currently sorted
+    var sortDir = 0;    // 1 asc, -1 desc
+    var sortType = 'text';
+    var filter = '';
+    var page = 1;
+
+    var colFilters = {};   // colIndex -> {type, text, set, min, max}
+    var openPopover = null;
+    var bulkBar = root.querySelector('[data-fdy-table-bulk]');
+    var bulkCount = root.querySelector('[data-fdy-table-bulk-count]');
+    var bulkClear = root.querySelector('[data-fdy-table-bulk-clear]');
+
+    function colIndexOf(button) {
+      var th = button.closest('th');
+      return th ? th.cellIndex : -1;
+    }
+
+    function parseNum(s) {
+      var n = parseFloat(String(s).replace(/[^\d.-]/g, ''));
+      return isNaN(n) ? null : n;
+    }
+
+    function passesColumnFilters(row) {
+      for (var idx in colFilters) {
+        if (!Object.prototype.hasOwnProperty.call(colFilters, idx)) continue;
+        var f = colFilters[idx];
+        var raw = cellText(row, Number(idx));
+        if (f.type === 'text') {
+          if (f.text && raw.toLowerCase().indexOf(f.text.toLowerCase()) === -1) return false;
+        } else if (f.type === 'enum') {
+          if (f.set && f.set.size && !f.set.has(raw)) return false;
+        } else if (f.type === 'number') {
+          var v = parseNum(raw);
+          if (f.min != null && (v == null || v < f.min)) return false;
+          if (f.max != null && (v == null || v > f.max)) return false;
+        }
+      }
+      return true;
+    }
+
+    function filtered() {
+      var q = filter.toLowerCase();
+      return allRows.filter(function (row) {
+        if (q && row.textContent.toLowerCase().indexOf(q) === -1) return false;
+        return passesColumnFilters(row);
+      });
+    }
+
+    function sorted(rows) {
+      if (sortCol < 0 || sortDir === 0) return rows;
+      var copy = rows.slice();
+      copy.sort(function (a, b) {
+        var av = cellText(a, sortCol);
+        var bv = cellText(b, sortCol);
+        var cmp;
+        if (sortType === 'number') {
+          cmp = (parseFloat(av.replace(/[^\d.-]/g, '')) || 0) - (parseFloat(bv.replace(/[^\d.-]/g, '')) || 0);
+        } else {
+          cmp = av.localeCompare(bv, undefined, { numeric: true, sensitivity: 'base' });
+        }
+        return cmp * sortDir;
+      });
+      return copy;
+    }
+
+    function syncSelectAll(visibleRows) {
+      if (!selectAll) return;
+      var boxes = visibleRows
+        .map(function (r) { return r.querySelector('[data-fdy-row-select]'); })
+        .filter(Boolean);
+      var checked = boxes.filter(function (b) { return b.checked; }).length;
+      selectAll.checked = boxes.length > 0 && checked === boxes.length;
+      selectAll.indeterminate = checked > 0 && checked < boxes.length;
+    }
+
+    function buildPager(totalPages) {
+      if (!pagerEl) return;
+      pagerEl.innerHTML = '';
+      if (totalPages <= 1) return;
+      var ul = document.createElement('ul');
+      ul.className = 'fdy-pagination__list';
+
+      function addBtn(label, targetPage, opts) {
+        opts = opts || {};
+        var li = document.createElement('li');
+        var el = document.createElement(opts.disabled || opts.current ? 'span' : 'button');
+        el.className = 'fdy-pagination__link';
+        el.textContent = label;
+        if (opts.disabled) el.setAttribute('aria-disabled', 'true');
+        if (opts.current) el.setAttribute('aria-current', 'page');
+        if (opts.label) el.setAttribute('aria-label', opts.label);
+        if (!opts.disabled && !opts.current) {
+          el.type = 'button';
+          el.addEventListener('click', function () { page = targetPage; render(); });
+        }
+        li.appendChild(el);
+        ul.appendChild(li);
+      }
+      function addEllipsis() {
+        var li = document.createElement('li');
+        var sp = document.createElement('span');
+        sp.className = 'fdy-pagination__ellipsis';
+        sp.textContent = '…';
+        li.appendChild(sp);
+        ul.appendChild(li);
+      }
+
+      addBtn('‹', page - 1, { disabled: page === 1, label: 'Sebelumnya' });
+      var pages = [];
+      for (var p = 1; p <= totalPages; p++) {
+        if (p === 1 || p === totalPages || (p >= page - 1 && p <= page + 1)) pages.push(p);
+        else if (pages[pages.length - 1] !== '…') pages.push('…');
+      }
+      pages.forEach(function (p) {
+        if (p === '…') addEllipsis();
+        else addBtn(String(p), p, { current: p === page });
+      });
+      addBtn('›', page + 1, { disabled: page === totalPages, label: 'Berikutnya' });
+      pagerEl.appendChild(ul);
+    }
+
+    // --- Bulk-action bar ---------------------------------------------------
+    function selectedRows() {
+      return allRows.filter(function (r) {
+        var b = r.querySelector('[data-fdy-row-select]');
+        return b && b.checked;
+      });
+    }
+    function updateBulk() {
+      if (!bulkBar) return;
+      var n = selectedRows().length;
+      bulkBar.hidden = n === 0;
+      if (bulkCount) bulkCount.textContent = n + ' dipilih';
+    }
+    function clearSelection() {
+      allRows.forEach(function (r) {
+        var b = r.querySelector('[data-fdy-row-select]');
+        if (b) b.checked = false;
+        r.setAttribute('aria-selected', 'false');
+      });
+      if (selectAll) { selectAll.checked = false; selectAll.indeterminate = false; }
+      updateBulk();
+    }
+
+    // --- Column filters ----------------------------------------------------
+    function closePopover(returnFocus) {
+      if (!openPopover) return;
+      var btn = openPopover._trigger;
+      openPopover.remove();
+      openPopover = null;
+      window.removeEventListener('scroll', closeOnScroll, true);
+      window.removeEventListener('resize', closeOnScroll);
+      if (returnFocus === true && btn) btn.focus();  // only on keyboard/button dismissal
+    }
+    function closeOnScroll() { closePopover(false); }
+    function markActive(button, active) {
+      button.classList.toggle('is-active', active);
+      button.setAttribute('aria-pressed', String(active));
+    }
+    function filterTitle(text) {
+      var t = document.createElement('div');
+      t.className = 'fdy-filter__title';
+      t.textContent = text;
+      return t;
+    }
+    function numberInput(placeholder, value) {
+      var i = document.createElement('input');
+      i.className = 'fdy-input';
+      i.type = 'text';
+      i.inputMode = 'numeric';
+      i.placeholder = placeholder;
+      i.value = value != null ? value : '';
+      return i;
+    }
+    function distinctValues(idx) {
+      var seen = {};
+      var out = [];
+      allRows.forEach(function (r) {
+        var v = cellText(r, idx);
+        if (v && !seen[v]) { seen[v] = 1; out.push(v); }
+      });
+      out.sort(function (a, b) { return a.localeCompare(b, undefined, { numeric: true }); });
+      return out;
+    }
+    function openFilterPopover(type, idx, btn) {
+      var pop = document.createElement('div');
+      pop.className = 'fdy-filter';
+      pop.setAttribute('role', 'dialog');
+      pop.setAttribute('aria-label', 'Filter kolom');
+      var f = colFilters[idx] || { type: type };
+
+      if (type === 'text') {
+        pop.appendChild(filterTitle('Berisi teks'));
+        var inp = document.createElement('input');
+        inp.className = 'fdy-input';
+        inp.type = 'search';
+        inp.placeholder = 'Berisi…';
+        inp.value = f.text || '';
+        inp.addEventListener('input', function () {
+          f.text = inp.value.trim();
+          colFilters[idx] = f;
+          markActive(btn, !!f.text);
+          page = 1; render();
+        });
+        pop.appendChild(inp);
+      } else if (type === 'enum') {
+        pop.appendChild(filterTitle('Tampilkan nilai'));
+        var list = document.createElement('div');
+        list.className = 'fdy-filter__list';
+        var set = f.set || new Set();
+        distinctValues(idx).forEach(function (val) {
+          var lab = document.createElement('label');
+          lab.className = 'fdy-filter__check';
+          var cb = document.createElement('input');
+          cb.type = 'checkbox';
+          cb.className = 'fdy-checkbox';
+          cb.checked = set.has(val);
+          cb.addEventListener('change', function () {
+            if (cb.checked) set.add(val); else set.delete(val);
+            f.set = set; colFilters[idx] = f;
+            markActive(btn, set.size > 0);
+            page = 1; render();
+          });
+          lab.appendChild(cb);
+          lab.appendChild(document.createTextNode(val));
+          list.appendChild(lab);
+        });
+        pop.appendChild(list);
+      } else if (type === 'number') {
+        pop.appendChild(filterTitle('Rentang nilai'));
+        var range = document.createElement('div');
+        range.className = 'fdy-filter__range';
+        var minI = numberInput('Min', f.min);
+        var maxI = numberInput('Maks', f.max);
+        var applyRange = function () {
+          f.min = minI.value !== '' ? parseNum(minI.value) : null;
+          f.max = maxI.value !== '' ? parseNum(maxI.value) : null;
+          colFilters[idx] = f;
+          markActive(btn, f.min != null || f.max != null);
+          page = 1; render();
+        };
+        minI.addEventListener('input', applyRange);
+        maxI.addEventListener('input', applyRange);
+        var sep = document.createElement('span');
+        sep.textContent = '–';
+        range.appendChild(minI); range.appendChild(sep); range.appendChild(maxI);
+        pop.appendChild(range);
+      }
+
+      var foot = document.createElement('div');
+      foot.className = 'fdy-filter__foot';
+      var reset = document.createElement('button');
+      reset.type = 'button';
+      reset.className = 'fdy-btn fdy-btn--ghost fdy-btn--sm';
+      reset.textContent = 'Reset';
+      reset.addEventListener('click', function () {
+        delete colFilters[idx];
+        markActive(btn, false);
+        page = 1; render();
+        closePopover(true);
+      });
+      var done = document.createElement('button');
+      done.type = 'button';
+      done.className = 'fdy-btn fdy-btn--sm';
+      done.textContent = 'Tutup';
+      done.addEventListener('click', function () { closePopover(true); });
+      foot.appendChild(reset); foot.appendChild(done);
+      pop.appendChild(foot);
+
+      document.body.appendChild(pop);
+      pop._trigger = btn;
+      var rect = btn.getBoundingClientRect();
+      pop.style.top = (rect.bottom + 4) + 'px';
+      pop.style.left = Math.max(8, Math.min(rect.left, window.innerWidth - pop.offsetWidth - 8)) + 'px';
+      openPopover = pop;
+      window.addEventListener('scroll', closeOnScroll, true);
+      window.addEventListener('resize', closeOnScroll);
+      var firstControl = pop.querySelector('input, button');
+      if (firstControl) firstControl.focus();
+    }
+    function buildColumnFilters() {
+      Array.prototype.forEach.call(table.querySelectorAll('thead th[data-fdy-filter]'), function (th) {
+        var type = th.getAttribute('data-fdy-filter');
+        var idx = th.cellIndex;
+        var btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'fdy-table__filterbtn';
+        btn.setAttribute('aria-haspopup', 'dialog');
+        btn.setAttribute('aria-pressed', 'false');
+        btn.setAttribute('aria-label', 'Filter kolom');
+        btn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 5h18l-7 8v5l-4 2v-7z"></path></svg>';
+        btn.addEventListener('click', function (e) {
+          e.stopPropagation();
+          var wasOpen = openPopover && openPopover._trigger === btn;
+          closePopover();
+          if (!wasOpen) openFilterPopover(type, idx, btn);
+        });
+        th.appendChild(btn);
+      });
+    }
+
+    function render() {
+      var view = sorted(filtered());
+      var total = view.length;
+      var totalPages = pageSize ? Math.max(1, Math.ceil(total / pageSize)) : 1;
+      if (page > totalPages) page = totalPages;
+      if (page < 1) page = 1;
+
+      var start = pageSize ? (page - 1) * pageSize : 0;
+      var slice = pageSize ? view.slice(start, start + pageSize) : view;
+
+      // Hide every row, then append the visible slice in order (reorders DOM).
+      allRows.forEach(function (row) { row.style.display = 'none'; });
+      slice.forEach(function (row) {
+        row.style.display = '';
+        tbody.appendChild(row);
+      });
+
+      var shownFrom = total === 0 ? 0 : start + 1;
+      var shownTo = start + slice.length;
+      if (countEl) countEl.textContent = total + ' baris';
+      if (infoEl) infoEl.textContent = 'Menampilkan ' + shownFrom + '–' + shownTo + ' dari ' + total;
+      buildPager(totalPages);
+      syncSelectAll(slice);
+      updateBulk();
+
+      root.dispatchEvent(new CustomEvent('fdy-table-change', {
+        bubbles: true,
+        detail: { shown: slice.length, total: total, page: page }
+      }));
+    }
+
+    sortButtons.forEach(function (button) {
+      button.addEventListener('click', function () {
+        var index = colIndexOf(button);
+        if (index < 0) return;
+        var th = button.closest('th');
+        if (sortCol === index) {
+          sortDir = sortDir === 1 ? -1 : 1;
+        } else {
+          sortCol = index;
+          sortDir = 1;
+          sortType = button.getAttribute('data-fdy-sort') === 'number' ? 'number' : 'text';
+        }
+        // Reset all header sort indicators, set the active one.
+        sortButtons.forEach(function (b) {
+          var h = b.closest('th');
+          if (h) h.removeAttribute('aria-sort');
+        });
+        if (th) th.setAttribute('aria-sort', sortDir === 1 ? 'ascending' : 'descending');
+        page = 1;
+        render();
+      });
+    });
+
+    if (searchInput) {
+      searchInput.addEventListener('input', function () {
+        filter = searchInput.value.trim();
+        page = 1;
+        render();
+      });
+    }
+
+    if (selectAll) {
+      selectAll.addEventListener('change', function () {
+        var start = pageSize ? (page - 1) * pageSize : 0;
+        var view = sorted(filtered());
+        var slice = pageSize ? view.slice(start, start + pageSize) : view;
+        slice.forEach(function (row) {
+          var box = row.querySelector('[data-fdy-row-select]');
+          if (box) {
+            box.checked = selectAll.checked;
+            row.setAttribute('aria-selected', selectAll.checked ? 'true' : 'false');
+          }
+        });
+        selectAll.indeterminate = false;
+        updateBulk();
+      });
+    }
+
+    tbody.addEventListener('change', function (e) {
+      var box = e.target.closest('[data-fdy-row-select]');
+      if (!box) return;
+      var row = box.closest('tr');
+      if (row) row.setAttribute('aria-selected', box.checked ? 'true' : 'false');
+      var view = sorted(filtered());
+      var start = pageSize ? (page - 1) * pageSize : 0;
+      var slice = pageSize ? view.slice(start, start + pageSize) : view;
+      syncSelectAll(slice);
+      updateBulk();
+    });
+
+    if (bulkClear) bulkClear.addEventListener('click', clearSelection);
+
+    // Dismiss an open filter popover on outside click or Escape.
+    document.addEventListener('click', function (e) {
+      if (!openPopover) return;
+      var t = openPopover._trigger;
+      if (!openPopover.contains(e.target) && e.target !== t && (!t || !t.contains(e.target))) {
+        closePopover();
+      }
+    });
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape' && openPopover) closePopover(true);
+    });
+
+    buildColumnFilters();
+    render();
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call(
+      (context || document).querySelectorAll('[data-fdy-table]'),
+      initTable
+    );
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayTable = { init: initTable, initAll: initAll };
+})();
+
+/* Freeday — tabs enhancer (optional, zero-dependency, WAI-ARIA APG tabs).
+ * Auto-inits every [data-fdy-tabs]. Roving tabindex + arrow/Home/End nav.
+ *
+ * Markup: a [data-fdy-tabs] with a [role="tablist"] of
+ * <button role="tab" aria-controls="PANEL" aria-selected> and matching
+ * <div role="tabpanel" id="PANEL" aria-labelledby="TAB" [hidden]>.
+ */
+(function () {
+  'use strict';
+
+  function initTabs(root) {
+    if (root.dataset.fdyTabsReady === '1') return;
+    var tabs = Array.prototype.slice.call(root.querySelectorAll('[role="tab"]'));
+    if (tabs.length === 0) return;
+    root.dataset.fdyTabsReady = '1';
+
+    function panelFor(tab) {
+      var id = tab.getAttribute('aria-controls');
+      return id ? document.getElementById(id) : null;
+    }
+    function select(tab, focus) {
+      tabs.forEach(function (t) {
+        var on = t === tab;
+        t.setAttribute('aria-selected', on ? 'true' : 'false');
+        t.tabIndex = on ? 0 : -1;
+        var panel = panelFor(t);
+        if (panel) panel.hidden = !on;
+      });
+      if (focus) tab.focus();
+    }
+
+    tabs.forEach(function (tab, i) {
+      tab.addEventListener('click', function () { select(tab, false); });
+      tab.addEventListener('keydown', function (e) {
+        switch (e.key) {
+          case 'ArrowRight':
+            e.preventDefault(); select(tabs[(i + 1) % tabs.length], true); break;
+          case 'ArrowLeft':
+            e.preventDefault(); select(tabs[(i - 1 + tabs.length) % tabs.length], true); break;
+          case 'Home':
+            e.preventDefault(); select(tabs[0], true); break;
+          case 'End':
+            e.preventDefault(); select(tabs[tabs.length - 1], true); break;
+        }
+      });
+    });
+
+    var current = tabs.filter(function (t) {
+      return t.getAttribute('aria-selected') === 'true';
+    })[0] || tabs[0];
+    select(current, false);
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call(
+      (context || document).querySelectorAll('[data-fdy-tabs]'),
+      initTabs
+    );
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayTabs = { init: initTabs, initAll: initAll };
+})();
+
+/* Freeday — time picker enhancer (optional, zero-dependency).
+ * Builds an input-styled trigger + scrollable time-list popover (WAI-ARIA listbox)
+ * from an empty [data-fdy-timepicker] wrapper. 24h HH:MM. Options run from
+ * data-min (default 00:00) to data-max (default 23:59) every data-step minutes
+ * (default 30). Attributes: data-value, data-label, data-placeholder.
+ *
+ * Icon variants (Freeday convention, same as the date picker): [data-fdy-no-icon]
+ * omits the icon; a [data-fdy-icon] child supplies a custom SVG; otherwise a clock.
+ *
+ * Keyboard: trigger opens on click / Enter / Space / ArrowDown; in the list,
+ * Up/Down move, Home/End jump, Enter/Space select, Esc closes (focus returns to
+ * the trigger). Emits a bubbling "fdy-time-select" CustomEvent (detail {value}).
+ */
+(function () {
+  'use strict';
+
+  var seq = 0;
+  var CLOCK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>';
+
+  function pad(n) { return (n < 10 ? '0' : '') + n; }
+  function valid(s) { return /^\d{1,2}:\d{2}$/.test(s || ''); }
+  function toMin(s) { var p = s.split(':'); return (+p[0]) * 60 + (+p[1]); }
+  function fromMin(m) { return pad(Math.floor(m / 60)) + ':' + pad(m % 60); }
+  function norm(s) { return valid(s) ? fromMin(toMin(s)) : ''; }
+
+  function initTime(wrap) {
+    if (wrap.dataset.fdyTpReady === '1') return;
+    wrap.dataset.fdyTpReady = '1';
+    wrap.classList.add('fdy-timepicker');
+
+    var label = wrap.getAttribute('data-label') || 'Pilih waktu';
+    var placeholder = wrap.getAttribute('data-placeholder') || '--:--';
+    var step = Math.max(1, parseInt(wrap.getAttribute('data-step') || '30', 10));
+    var minM = valid(wrap.getAttribute('data-min')) ? toMin(wrap.getAttribute('data-min')) : 0;
+    var maxM = valid(wrap.getAttribute('data-max')) ? toMin(wrap.getAttribute('data-max')) : 23 * 60 + 59;
+    var value = norm(wrap.getAttribute('data-value'));
+
+    var trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'fdy-timepicker__trigger';
+    trigger.setAttribute('aria-haspopup', 'listbox');
+    trigger.setAttribute('aria-expanded', 'false');
+    trigger.setAttribute('aria-label', label);
+    var valueSpan = document.createElement('span');
+    valueSpan.className = 'fdy-timepicker__value';
+    trigger.appendChild(valueSpan);
+    if (!wrap.hasAttribute('data-fdy-no-icon')) {
+      var customIcon = wrap.querySelector('[data-fdy-icon]');
+      var icon = document.createElement('span');
+      icon.className = 'fdy-timepicker__icon';
+      icon.innerHTML = customIcon ? customIcon.innerHTML : CLOCK;
+      if (customIcon) customIcon.remove();
+      trigger.appendChild(icon);
+    }
+
+    var panel = document.createElement('ul');
+    panel.className = 'fdy-timepicker__panel';
+    panel.setAttribute('role', 'listbox');
+    panel.setAttribute('aria-label', label);
+    panel.tabIndex = -1;
+    panel.hidden = true;
+
+    var opts = [];
+    for (var m = minM; m <= maxM; m += step) {
+      var t = fromMin(m);
+      var li = document.createElement('li');
+      seq += 1; li.id = 'fdy-tp-opt-' + seq;
+      li.className = 'fdy-timepicker__opt';
+      li.setAttribute('role', 'option');
+      li.setAttribute('data-value', t);
+      li.setAttribute('aria-selected', t === value ? 'true' : 'false');
+      li.textContent = t;
+      panel.appendChild(li);
+      opts.push(li);
+    }
+
+    wrap.appendChild(trigger);
+    wrap.appendChild(panel);
+
+    var active = -1;
+
+    function updateDisplay() {
+      if (value) {
+        valueSpan.textContent = value;
+        valueSpan.classList.remove('fdy-timepicker__value--placeholder');
+      } else {
+        valueSpan.textContent = placeholder;
+        valueSpan.classList.add('fdy-timepicker__value--placeholder');
+      }
+    }
+    function indexOfValue() {
+      for (var i = 0; i < opts.length; i++) { if (opts[i].getAttribute('data-value') === value) return i; }
+      return -1;
+    }
+    function setActive(i) {
+      if (active >= 0 && opts[active]) opts[active].classList.remove('is-active');
+      active = i;
+      if (i >= 0 && opts[i]) {
+        opts[i].classList.add('is-active');
+        panel.setAttribute('aria-activedescendant', opts[i].id);
+        opts[i].scrollIntoView({ block: 'nearest' });
+      } else {
+        panel.removeAttribute('aria-activedescendant');
+      }
+    }
+    var _pop = null;
+    function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(panel, trigger); return _pop; }
+    function open() {
+      if (!panel.hidden) return;
+      var p = popCtl(); if (p) p.show(); else panel.hidden = false;
+      trigger.setAttribute('aria-expanded', 'true');
+      trigger.classList.add('is-open');
+      var i = indexOfValue();
+      setActive(i >= 0 ? i : 0);
+      panel.focus();
+      document.addEventListener('click', onDoc, true);
+    }
+    function close(returnFocus) {
+      if (panel.hidden) return;
+      var p = popCtl(); if (p) p.hide(); else panel.hidden = true;
+      trigger.setAttribute('aria-expanded', 'false');
+      trigger.classList.remove('is-open');
+      panel.removeAttribute('aria-activedescendant');
+      document.removeEventListener('click', onDoc, true);
+      if (returnFocus === true) trigger.focus();
+    }
+    function onDoc(e) { if (!wrap.contains(e.target)) close(false); }
+    function choose(i) {
+      if (i < 0 || i >= opts.length) return;
+      value = opts[i].getAttribute('data-value');
+      for (var j = 0; j < opts.length; j++) opts[j].setAttribute('aria-selected', j === i ? 'true' : 'false');
+      updateDisplay();
+      wrap.dispatchEvent(new CustomEvent('fdy-time-select', { bubbles: true, detail: { value: value } }));
+      close(true);
+    }
+
+    trigger.addEventListener('click', function () { panel.hidden ? open() : close(true); });
+    trigger.addEventListener('keydown', function (e) {
+      if (e.key === 'ArrowDown') { e.preventDefault(); open(); }
+    });
+    panel.addEventListener('keydown', function (e) {
+      switch (e.key) {
+        case 'ArrowDown': e.preventDefault(); setActive(Math.min(opts.length - 1, active + 1)); break;
+        case 'ArrowUp': e.preventDefault(); setActive(Math.max(0, active - 1)); break;
+        case 'Home': e.preventDefault(); setActive(0); break;
+        case 'End': e.preventDefault(); setActive(opts.length - 1); break;
+        case 'Enter': case ' ': e.preventDefault(); choose(active); break;
+        case 'Escape': e.preventDefault(); close(true); break;
+        case 'Tab': close(false); break;
+        default: break;
+      }
+    });
+    panel.addEventListener('click', function (e) {
+      var li = e.target.closest('[role="option"]');
+      if (li) choose(opts.indexOf(li));
+    });
+
+    updateDisplay();
+
+    var api = {
+      wrap: wrap,
+      getValue: function () { return value; },
+      clear: function () { value = ''; for (var i = 0; i < opts.length; i++) opts[i].setAttribute('aria-selected', 'false'); updateDisplay(); }
+    };
+    wrap._fdyTp = api;
+    return api;
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-timepicker]'), initTime);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayTimepicker = { init: initTime, initAll: initAll };
+})();
+
+/* Freeday — toast API (optional, zero-dependency).
+ * Freeday.toast({ variant, title, message, timeout }) shows a transient
+ * notification in a live region (created on first use). Returns the element.
+ *   variant: 'success' | 'warning' | 'danger' | 'info' (default: neutral)
+ *   timeout: ms before auto-dismiss (default 4000; 0 = sticky)
+ * Danger toasts use role="alert"; others role="status".
+ */
+(function () {
+  'use strict';
+
+  var region = null;
+
+  function ensureRegion() {
+    if (region && document.body.contains(region)) return region;
+    region = document.querySelector('.fdy-toast-region');
+    if (!region) {
+      region = document.createElement('div');
+      region.className = 'fdy-toast-region';
+      region.setAttribute('aria-live', 'polite');
+      region.setAttribute('aria-atomic', 'false');
+      document.body.appendChild(region);
+    }
+    return region;
+  }
+
+  function dismiss(toast) {
+    if (!toast || toast.dataset.leaving === '1') return;
+    toast.dataset.leaving = '1';
+    toast.classList.add('is-leaving');
+    var remove = function () { if (toast.parentNode) toast.parentNode.removeChild(toast); };
+    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduce) { remove(); return; }
+    var done = false;
+    var finish = function () { if (!done) { done = true; remove(); } };
+    toast.addEventListener('transitionend', finish);
+    setTimeout(finish, 400); // fallback if transitionend never fires
+  }
+
+  function el(tag, className, text) {
+    var node = document.createElement(tag);
+    if (className) node.className = className;
+    if (text != null) node.textContent = text;
+    return node;
+  }
+
+  function toast(opts) {
+    opts = opts || {};
+    var region = ensureRegion();
+    var node = el('div', 'fdy-toast' + (opts.variant ? ' fdy-toast--' + opts.variant : ''));
+    node.setAttribute('role', opts.variant === 'danger' ? 'alert' : 'status');
+
+    var accent = el('span', 'fdy-toast__accent');
+    accent.setAttribute('aria-hidden', 'true');
+    var body = el('div', 'fdy-toast__body');
+    if (opts.title) body.appendChild(el('div', 'fdy-toast__title', opts.title));
+    if (opts.message) body.appendChild(el('div', 'fdy-toast__text', opts.message));
+
+    var close = el('button', 'fdy-toast__close');
+    close.type = 'button';
+    close.setAttribute('aria-label', 'Tutup');
+    close.innerHTML = '&times;';
+    close.addEventListener('click', function () { dismiss(node); });
+
+    node.appendChild(accent);
+    node.appendChild(body);
+    node.appendChild(close);
+    region.appendChild(node);
+
+    var timeout = opts.timeout == null ? 4000 : opts.timeout;
+    if (timeout > 0) setTimeout(function () { dismiss(node); }, timeout);
+    return node;
+  }
+
+  // Pre-create the live region so the FIRST status toast is reliably announced
+  // (some screen readers ignore a live region created in the same tick as its content).
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', ensureRegion);
+  } else {
+    ensureRegion();
+  }
+
+  window.Freeday = window.Freeday || {};
+  window.Freeday.toast = toast;
+})();
+
+/* Freeday — tree checkbox cascade (optional, zero-dependency).
+ * Turns a [data-fdy-tree] checkbox tree into a selectable one: checking a branch checks
+ * every descendant; a partially-selected branch shows the native :indeterminate state.
+ * Rows are native <input class="fdy-checkbox">, labelled via aria-label — Space toggles.
+ * Selection never toggles the <details> (the checkbox stops click propagation).
+ *
+ * Markup contract:
+ *  <ul class="fdy-tree fdy-tree--checkbox" data-fdy-tree>
+ *    <li>
+ *      <details class="fdy-tree__branch">
+ *        <summary>…chevron… <input class="fdy-checkbox fdy-tree__check" type="checkbox" aria-label="…"> …icon… Label</summary>
+ *        <ul> …child <li>s (branches or .fdy-tree__leaf leaves)… </ul>
+ *      </details>
+ *    </li>
+ *    <li class="fdy-tree__leaf"><input class="fdy-checkbox fdy-tree__check" type="checkbox" aria-label="…"> …icon… Label</li>
+ *  </ul>
+ */
+(function () {
+  'use strict';
+
+  // The <li>s directly under a branch's own child list (skip text nodes).
+  function childItems(li) {
+    var ul = li.querySelector(':scope > details > ul');
+    if (!ul) return [];
+    return Array.prototype.filter.call(ul.children, function (n) { return n.tagName === 'LI'; });
+  }
+
+  // The checkbox belonging to a row's own <li> — branch summary or leaf, never a child's.
+  function ownBox(li) {
+    return li.querySelector(':scope > details > summary input[type="checkbox"]')
+      || li.querySelector(':scope > input[type="checkbox"]');
+  }
+
+  function setSubtree(li, checked) {
+    childItems(li).forEach(function (child) {
+      var box = ownBox(child);
+      if (box) { box.checked = checked; box.indeterminate = false; }
+      setSubtree(child, checked);
+    });
+  }
+
+  // Recompute one branch's box from the state of its direct children.
+  function recompute(li) {
+    var box = ownBox(li);
+    var kids = childItems(li).map(ownBox).filter(Boolean);
+    if (!box || !kids.length) return;
+    var allOn = kids.every(function (b) { return b.checked && !b.indeterminate; });
+    var anyOn = kids.some(function (b) { return b.checked || b.indeterminate; });
+    box.checked = allOn;
+    box.indeterminate = anyOn && !allOn;
+  }
+
+  function refreshAncestors(li) {
+    var parent = li.parentElement ? li.parentElement.closest('li') : null;
+    while (parent) {
+      recompute(parent);
+      parent = parent.parentElement ? parent.parentElement.closest('li') : null;
+    }
+  }
+
+  // Post-order pass so pre-checked leaves resolve their branches on load.
+  function initState(li) {
+    childItems(li).forEach(initState);
+    recompute(li);
+  }
+
+  function initTree(tree) {
+    if (tree.dataset.fdyTreeReady === '1') 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.
+      box.addEventListener('click', function (e) { e.stopPropagation(); });
+      box.addEventListener('change', function () {
+        var li = box.closest('li');
+        setSubtree(li, box.checked);
+        box.indeterminate = false;
+        refreshAncestors(li);
+      });
+    });
+    Array.prototype.filter.call(tree.children, function (n) { return n.tagName === 'LI'; }).forEach(initState);
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-tree]'), initTree);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayTree = { init: initTree, initAll: initAll };
+})();
+
+/* 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
+ * consumer's job — this is a controlled reference: wire the emitted event's row API to your
+ * upload call, or set data-fdy-upload-simulate for a demo progress animation.
+ *
+ * Markup contract:
+ *  <div class="fdy-dropzone" data-fdy-dropzone role="button" tabindex="0"
+ *       data-max-size="10485760" data-filelist="#dz-list" [data-fdy-upload-simulate]
+ *       aria-label="Unggah berkas — seret ke sini atau tekan Enter">
+ *    <span class="fdy-dropzone__icon">…svg…</span>
+ *    <span class="fdy-dropzone__title">…</span>
+ *    <span class="fdy-dropzone__hint">…</span>
+ *    <input type="file" accept=".pdf,application/pdf" multiple hidden>
+ *  </div>
+ *  <div class="fdy-filelist" id="dz-list"></div>
+ *
+ * Emits bubbling CustomEvents on the dropzone: "fdy-upload-add" {file, rejected, reason, row}
+ * (row exposes .uploading()/.setProgress(pct)/.done()/.fail(msg)) and "fdy-upload-remove" {file}.
+ */
+(function () {
+  'use strict';
+
+  function fmtSize(bytes) {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1048576) return (bytes / 1024).toFixed(0) + ' KB';
+    return (bytes / 1048576).toFixed(1) + ' MB';
+  }
+
+  var FILE_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M14 2v6h6"></path></svg>';
+  var OK_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="m8 12 3 3 5-6"></path></svg>';
+  var ERR_ICON = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"></circle><path d="M12 8v4"></path><path d="M12 16h.01"></path></svg>';
+
+  function accepts(file, acceptAttr) {
+    if (!acceptAttr) return true;
+    var name = file.name.toLowerCase();
+    var type = (file.type || '').toLowerCase();
+    return acceptAttr.split(',').map(function (s) { return s.trim().toLowerCase(); }).some(function (a) {
+      if (!a) return false;
+      if (a.charAt(0) === '.') return name.slice(-a.length) === a;
+      if (a.slice(-2) === '/*') return type.indexOf(a.slice(0, -1)) === 0;
+      return type === a;
+    });
+  }
+
+  function makeRow(file) {
+    var el = document.createElement('div');
+    el.className = 'fdy-file';
+    var icon = document.createElement('span');
+    icon.className = 'fdy-file__icon';
+    icon.innerHTML = FILE_ICON;
+    var meta = document.createElement('div');
+    meta.className = 'fdy-file__meta';
+    var name = document.createElement('div');
+    name.className = 'fdy-file__name';
+    name.textContent = file.name;
+    var sub = document.createElement('div');
+    sub.className = 'fdy-file__sub';
+    sub.textContent = fmtSize(file.size);
+    meta.appendChild(name);
+    meta.appendChild(sub);
+    var remove = document.createElement('button');
+    remove.type = 'button';
+    remove.className = 'fdy-file__remove';
+    remove.setAttribute('aria-label', 'Hapus ' + file.name);
+    remove.innerHTML = '&times;';
+    remove.addEventListener('click', function () {
+      el.dispatchEvent(new CustomEvent('fdy-upload-remove', { bubbles: true, detail: { file: file } }));
+      el.remove();
+    });
+    el.appendChild(icon);
+    el.appendChild(meta);
+    el.appendChild(remove);
+
+    var progressWrap = null, bar = null, progressEl = null;
+    function ensureProgress() {
+      if (progressWrap) return;
+      progressWrap = document.createElement('div');
+      progressWrap.className = 'fdy-file__progress';
+      progressEl = document.createElement('div');
+      progressEl.className = 'fdy-progress';
+      progressEl.setAttribute('role', 'progressbar');
+      progressEl.setAttribute('aria-valuemin', '0');
+      progressEl.setAttribute('aria-valuemax', '100');
+      progressEl.setAttribute('aria-label', 'Progres unggah ' + file.name);
+      bar = document.createElement('div');
+      bar.className = 'fdy-progress__bar';
+      bar.style.width = '0%';
+      progressEl.appendChild(bar);
+      progressWrap.appendChild(progressEl);
+      meta.appendChild(progressWrap);
+    }
+    function dropProgress() {
+      if (progressWrap) { progressWrap.remove(); progressWrap = null; bar = null; progressEl = null; }
+    }
+    return {
+      el: el,
+      uploading: function () {
+        el.classList.remove('fdy-file--error', 'fdy-file--success');
+        icon.innerHTML = FILE_ICON;
+        sub.textContent = fmtSize(file.size) + ' · Mengunggah…';
+        ensureProgress();
+      },
+      setProgress: function (pct) {
+        ensureProgress();
+        var v = Math.max(0, Math.min(100, pct));
+        bar.style.width = v + '%';
+        progressEl.setAttribute('aria-valuenow', String(Math.round(v)));
+      },
+      done: function () {
+        el.classList.add('fdy-file--success');
+        el.classList.remove('fdy-file--error');
+        icon.innerHTML = OK_ICON;
+        sub.textContent = fmtSize(file.size) + ' · Terunggah';
+        dropProgress();
+      },
+      fail: function (msg) {
+        el.classList.add('fdy-file--error');
+        el.classList.remove('fdy-file--success');
+        icon.innerHTML = ERR_ICON;
+        sub.textContent = msg;
+        dropProgress();
+      }
+    };
+  }
+
+  function simulateUpload(row) {
+    var reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    if (reduce) { row.setProgress(100); row.done(); return; }
+    var pct = 0;
+    var id = setInterval(function () {
+      pct += 12 + Math.random() * 18;
+      if (pct >= 100) {
+        row.setProgress(100);
+        clearInterval(id);
+        setTimeout(function () { row.done(); }, 200);
+      } else {
+        row.setProgress(pct);
+      }
+    }, 180);
+  }
+
+  function initDropzone(zone) {
+    if (zone.dataset.fdyUploadReady === '1') return;
+    zone.dataset.fdyUploadReady = '1';
+
+    var input = zone.querySelector('input[type="file"]');
+    var listSel = zone.getAttribute('data-filelist');
+    var list = listSel ? document.querySelector(listSel)
+      : (zone.parentNode ? zone.parentNode.querySelector('.fdy-filelist') : null);
+    var maxSize = parseInt(zone.getAttribute('data-max-size'), 10) || 0;
+    var simulate = zone.hasAttribute('data-fdy-upload-simulate');
+    var acceptAttr = input ? input.getAttribute('accept') : '';
+
+    function openDialog() { if (input) input.click(); }
+
+    zone.addEventListener('click', function (e) { if (e.target !== input) openDialog(); });
+    zone.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openDialog(); }
+    });
+    ['dragenter', 'dragover'].forEach(function (ev) {
+      zone.addEventListener(ev, function (e) { e.preventDefault(); zone.classList.add('is-dragover'); });
+    });
+    ['dragleave', 'dragend'].forEach(function (ev) {
+      zone.addEventListener(ev, function (e) { if (e.target === zone) zone.classList.remove('is-dragover'); });
+    });
+    zone.addEventListener('drop', function (e) {
+      e.preventDefault();
+      zone.classList.remove('is-dragover');
+      handleFiles(e.dataTransfer ? e.dataTransfer.files : null);
+    });
+    if (input) input.addEventListener('change', function () { handleFiles(input.files); input.value = ''; });
+
+    function handleFiles(fileList) {
+      if (!list || !fileList) return;
+      Array.prototype.slice.call(fileList).forEach(function (file) {
+        var reason = null;
+        if (!accepts(file, acceptAttr)) reason = 'Tipe berkas tidak didukung.';
+        else if (maxSize && file.size > maxSize) reason = 'Ukuran melebihi batas (' + fmtSize(maxSize) + ').';
+        var row = makeRow(file);
+        list.appendChild(row.el);
+        if (reason) {
+          row.fail(reason);
+        } else {
+          row.uploading();
+          if (simulate) simulateUpload(row);
+        }
+        zone.dispatchEvent(new CustomEvent('fdy-upload-add', {
+          bubbles: true, detail: { file: file, rejected: !!reason, reason: reason, row: row }
+        }));
+      });
+    }
+  }
+
+  function initAll(context) {
+    Array.prototype.forEach.call((context || document).querySelectorAll('[data-fdy-dropzone]'), initDropzone);
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { initAll(); });
+  } else {
+    initAll();
+  }
+
+  window.FreedayUpload = { init: initDropzone, initAll: initAll };
+})();