@cahyo-dimas/freeday 1.17.0 → 1.20.0

package/src/components/list.css

@@ -0,0 +1,29 @@
+/* Freeday — List: the FLAT row container.
+ *
+ * USAGE.md §3 puts list rows among the surfaces that should be flat, but until now the only
+ * container the kit shipped was .fdy-card — which carries --shadow-lift (a real 34px lift). A
+ * responsive table that becomes a list below `md` therefore had to choose between a stack of
+ * shadowed cards (against the doctrine) or a hand-built box, which needs a colour and so escapes
+ * the token system. This is that missing container: one flat surface, hairline dividers, no shadow.
+ *
+ * Not to be confused with .fdy-list-reset (base.css), which only strips UA bullets/indent.
+ * Works on <ul>/<ol> (list-style is reset here) or on plain <div>s. */
+.fdy-list{list-style:none;margin:0;padding:0;background:var(--color-surface);border:var(--bw) solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;}
+.fdy-list__row{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);min-width:0;}
+/* Divider between rows. Two shapes are supported and both are load-bearing: rows as direct children
+ * of the list, and rows wrapped in <li> (the semantic shape, where the ADJACENT siblings are the
+ * <li>s — a bare `.fdy-list__row + .fdy-list__row` silently matches nothing there). */
+.fdy-list__row + .fdy-list__row,
+.fdy-list > * + * > .fdy-list__row{border-top:var(--bw) solid var(--color-border-muted);}
+/* A row that is itself the control: render it as <button>/<a> and the UA box is reset without
+ * touching the list surface (same contract as .fdy-card--button). */
+.fdy-list__row--button{width:100%;text-align:inherit;color:inherit;font:inherit;background:none;border:0;appearance:none;-webkit-appearance:none;cursor:pointer;}
+.fdy-list__row--button:hover,.fdy-list__row--interactive:hover{background:var(--color-surface-2);}
+.fdy-list__row--button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--color-primary);}
+.fdy-list__row--interactive{cursor:pointer;}
+/* Row internals: a title/meta stack that truncates, and a trailing slot pinned right. */
+.fdy-list__main{display:flex;flex-direction:column;gap:var(--space-1);min-width:0;flex:1;}
+.fdy-list__title{font-weight:var(--weight-medium);color:var(--color-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.fdy-list__meta{font-size:var(--text-sm);color:var(--color-text-muted);display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;}
+.fdy-list__aside{flex:none;display:flex;align-items:center;gap:var(--space-2);}
+/* Density: rows tighten with the rest of the kit (--space-* mid-range steps under compact). */

package/tokens/breakpoints.d.ts

@@ -1,6 +1,9 @@
 // Types for tokens/breakpoints.mjs — the JS-side breakpoint scale in px
 // (mirrors the sm/md/lg/xl utilities in src/components/breakpoints.css).
 export declare const breakpoints: {
+  /** Width at which .fdy-app's sidebar turns from off-canvas drawer into a static column.
+   *  Not part of the sm/md/lg/xl ramp — it mirrors app-shell.css and nothing else. */
+  nav: number;
   sm: number;
   md: number;
   lg: number;

package/tokens/breakpoints.mjs

@@ -1,4 +1,11 @@
 // Freeday breakpoint scale in px — mirrors src/components/breakpoints.css utilities
 // (sm/md/lg/xl). CSS @media can't read custom properties, so this is the JS-side
 // source of the scale for matchMedia / app @media alignment.
-export const breakpoints = { sm: 600, md: 960, lg: 1280, xl: 1920 };
+//
+// `nav` is not part of the sm/md/lg/xl ramp: it is the width at which .fdy-app switches the
+// sidebar from an off-canvas drawer (below) to a static column (at and above), hard-wired in
+// src/components/app-shell.css. Anything that has to agree with the shell — a matchMedia guard
+// deciding whether the nav toggle sets --nav-open or --nav-collapsed, a utility-framework
+// variant — must use THIS number, not md. Aligning such code to md (960) leaves 721–959px
+// broken: the sidebar is already static while the script still thinks it is an overlay.
+export const breakpoints = { nav: 721, sm: 600, md: 960, lg: 1280, xl: 1920 };

package/tokens/tokens.json

@@ -42,8 +42,8 @@
   "weight": { "regular": { "$value": "400" }, "medium": { "$value": "500" }, "semibold": { "$value": "600" }, "bold": { "$value": "700" } },
 
   "space": {
-    "0": { "$value": "0" }, "1": { "$value": "0.25rem" }, "2": { "$value": "0.5rem" }, "3": { "$value": "0.75rem" },
-    "4": { "$value": "1rem" }, "5": { "$value": "1.25rem" }, "6": { "$value": "1.5rem" }, "8": { "$value": "2rem" },
+    "0": { "$value": "0" }, "1": { "$value": "0.25rem" }, "2": { "$value": "0.5rem" }, "3": { "$value": "0.75rem", "$compact": "0.625rem" },
+    "4": { "$value": "1rem", "$compact": "0.75rem" }, "5": { "$value": "1.25rem", "$compact": "1rem" }, "6": { "$value": "1.5rem", "$compact": "1.25rem" }, "8": { "$value": "2rem" },
     "10": { "$value": "2.5rem" }, "12": { "$value": "3rem" }, "16": { "$value": "4rem" }, "20": { "$value": "5rem" }, "24": { "$value": "6rem" }
   },
   "radius": { "xs": { "$value": "3px" }, "sm": { "$value": "4px" }, "md": { "$value": "6px" }, "lg": { "$value": "10px" }, "xl": { "$value": "14px" }, "full": { "$value": "999px" } },
@@ -118,6 +118,18 @@
     "tick": { "$value": "{slate.400}", "$dark": "{slate.600}" }
   },
 
+  "_comment_tone": "General categorical palette — the same 8 validated hues as chart, aliased under a chart-neutral name for avatars, chips, tags, legend swatches (theme-follows via chart's own $dark).",
+  "tone": {
+    "1": { "$value": "{chart.1}" },
+    "2": { "$value": "{chart.2}" },
+    "3": { "$value": "{chart.3}" },
+    "4": { "$value": "{chart.4}" },
+    "5": { "$value": "{chart.5}" },
+    "6": { "$value": "{chart.6}" },
+    "7": { "$value": "{chart.7}" },
+    "8": { "$value": "{chart.8}" }
+  },
+
   "focus-ring": { "$value": "{azure.600}", "$dark": "{azure.400}" },
   "focus-ring-width": { "$value": "2px" }
 }

package/src/freeday-autocomplete.js

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

package/src/freeday-breakpoint.js

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

package/src/freeday-carousel.js

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

package/src/freeday-cascade.js

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