@cahyo-dimas/freeday 1.7.0

package/src/freeday-mask.js

@@ -0,0 +1,114 @@
+/* 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 };
+})();

package/src/freeday-menu.js

@@ -0,0 +1,93 @@
+/* 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 };
+})();

package/src/freeday-popover.js

@@ -0,0 +1,69 @@
+/* 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 };
+})();

package/src/freeday-rating.js

@@ -0,0 +1,50 @@
+/* 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 };
+})();

package/src/freeday-select.js

@@ -0,0 +1,194 @@
+/* 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 };
+})();

package/src/freeday-slider.js

@@ -0,0 +1,34 @@
+/* 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 };
+})();

package/src/freeday-stepper.js

@@ -0,0 +1,90 @@
+/* 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 };
+})();