@cahyo-dimas/freeday 2.1.0 → 3.0.0

package/dist/freeday.js

@@ -62,7 +62,13 @@
 
     function isOverlayOpen() { return app.classList.contains('fdy-app--nav-open'); }
     function isCollapsed() { return app.classList.contains('fdy-app--nav-collapsed'); }
-    function navVisible() { return mqWide.matches ? !isCollapsed() : isOverlayOpen(); }
+    /* Whether the nav FLOATS. Two ways to be true, and only one of them is the viewport: below the
+       breakpoint it is off-canvas by definition, and above it `--nav-overlay` says the app chose to
+       float a nav that could have been a column. Everything downstream — which class means visible,
+       what the toggle does, whether the content goes inert — asks this instead of the media query,
+       so overlay mode reuses the drawer's whole code path rather than growing a second one. */
+    function isOverlayMode() { return !mqWide.matches || app.classList.contains('fdy-app--nav-overlay'); }
+    function navVisible() { return isOverlayMode() ? isOverlayOpen() : !isCollapsed(); }
 
     /* aria-expanded answers "is the nav showing?" in BOTH modes, the two state classes are the
        kit's business, not the reader's. */
@@ -70,7 +76,7 @@
       var visible = navVisible();
       toggle.setAttribute('aria-expanded', String(visible));
       setInert(sidebar, !visible);
-      setInert(content, !mqWide.matches && visible);
+      setInert(content, isOverlayMode() && visible);
       /* Announce only real changes. The first sync() runs at init to describe the state the markup
          arrived in, which is not something a host asked for and must not look like one. */
       if (lastVisible !== null && visible !== lastVisible) {
@@ -108,7 +114,7 @@
     }
 
     toggle.addEventListener('click', function () {
-      if (mqWide.matches) {
+      if (!isOverlayMode()) {
         app.classList.toggle('fdy-app--nav-collapsed');
         sync();
       } else if (isOverlayOpen()) {
@@ -156,7 +162,10 @@
        content inert forever: the panel becomes a static column again, and the page it is covering
        can no longer be clicked or read. */
     mqWide.addEventListener('change', function () {
-      if (mqWide.matches && isOverlayOpen()) close(false);
+      /* Only when the panel stops floating. In overlay MODE it floats at every width, so widening
+         must leave an open panel exactly as it is — closing it there would be the shell overruling
+         a reader who never asked for anything. */
+      if (mqWide.matches && !isOverlayMode() && isOverlayOpen()) close(false);
       else sync();
     });
 
@@ -166,9 +175,14 @@
        own state needs to drive this without reaching for the class names the kit reserves. */
     app._fdyAppShell = {
       isVisible: navVisible,
+      /* Re-read the DOM and reconcile `inert` + `aria-expanded`. Needed when something OUTSIDE the
+         enhancer changes what the state classes mean — switching `--nav-overlay` on or off does
+         exactly that, because it moves the answer to "is the nav visible?" from `--nav-collapsed`
+         to `--nav-open`. Without this a mode switch leaves a visible sidebar marked inert. */
+      refresh: sync,
       setVisible: function (visible) {
         if (visible === navVisible()) return;
-        if (mqWide.matches) {
+        if (!isOverlayMode()) {
           app.classList.toggle('fdy-app--nav-collapsed', !visible);
           sync();
         } else if (visible) {
@@ -205,6 +219,10 @@
     isVisible: function (root) {
       return !!(root && root._fdyAppShell && root._fdyAppShell.isVisible());
     },
+    /* Call after changing `--nav-overlay` from outside; see the note on the handle above. */
+    refresh: function (root) {
+      if (root && root._fdyAppShell) root._fdyAppShell.refresh();
+    },
   };
 })();
 
@@ -250,6 +268,9 @@
     var _pop = null;
     function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(listbox, input); return _pop; }
     function open() {
+      /* The input carries these natively; a disabled one fires nothing, but a READONLY one still
+         takes focus and clicks, and the list used to open over a field nobody can edit. */
+      if (input.readOnly || input.disabled) return;
       if (!listbox.hidden) return;
       var p = popCtl(); if (p) p.show(); else listbox.hidden = false;
       input.setAttribute('aria-expanded', 'true');
@@ -344,7 +365,20 @@
     initAll();
   }
 
-  window.FreedayAutocomplete = { init: initAutocomplete, initAll: initAll };
+  /* Same contract as the combo's: the states live on the input natively, and a host that stops
+     re-rendering after hydration needs a way to change them afterwards. */
+  function setState(root, state) {
+    var input = root ? root.querySelector('input') : null;
+    if (!input || !state) return;
+    if (state.disabled != null) input.disabled = !!state.disabled;
+    if (state.readonly != null) input.readOnly = !!state.readonly;
+    if (state.invalid != null) {
+      if (state.invalid) input.setAttribute('aria-invalid', 'true');
+      else input.removeAttribute('aria-invalid');
+    }
+  }
+
+  window.FreedayAutocomplete = { init: initAutocomplete, initAll: initAll, setState: setState };
 })();
 
 /* Freeday, breakpoint provider (optional, zero-dependency).
@@ -399,6 +433,175 @@
   };
 })();
 
+/* Freeday, busy overlay (optional, zero-dependency).
+ *
+ * Freeday.busy({ caption, delay, mark })  block the screen while an operation runs
+ * Freeday.idle()                          release it
+ *
+ * Imperative on purpose, like Freeday.toast(): a component API invites two instances, and two
+ * blocking overlays with two captions is the failure this exists to prevent. A second busy() while
+ * one is up REPLACES the caption rather than stacking.
+ *
+ *   caption  what is happening. Announced politely, so make it a sentence a reader would want read
+ *            out, not a spinner label. Omitted, it falls back to the kit default, which a page
+ *            overrides once with `data-fdy-text-caption` on <html>.
+ *   delay    ms to wait before it appears (default 120; 0 shows immediately). An operation that
+ *            finishes in 80ms should never flash a scrim — that reads as a glitch, not as progress.
+ *   mark     an Element to use instead of the default spinner. Element only, never an HTML string:
+ *            a string here would be an injection point in every app that passed user text through.
+ *
+ * Not a dialog. Interaction is removed with `inert` on everything else, so there is nothing to trap
+ * focus against and nothing to dismiss. Focus is parked on the panel and given back on idle(),
+ * because the element it was on is inert by then and the browser would otherwise drop it to <body>.
+ */
+(function () {
+  'use strict';
+
+  var DEFAULT_DELAY = 120;
+
+  var TEXT = {
+    caption: 'Working…'
+  };
+  /* The overlay has no root of its own to carry an override — it is created, not hydrated — so the
+     lookup goes to <html>, the one element every page has before this runs. Kebab-cased for the
+     same reason as everywhere else: HTML lowercases attribute names, so a camelCase key could only
+     ever be written run-together and the override would fail silently. */
+  function textOf(key) {
+    var root = document.documentElement;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    var custom = kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+    return custom != null && custom !== '' ? custom : TEXT[key];
+  }
+
+  var node = null;
+  var showTimer = null;
+  var inerted = [];
+  var returnFocusTo = null;
+
+  function build() {
+    var el = document.createElement('div');
+    el.className = 'fdy-busy';
+    el.setAttribute('popover', 'manual');
+    el.setAttribute('aria-busy', 'true');
+    el.tabIndex = -1;
+
+    var panel = document.createElement('div');
+    panel.className = 'fdy-busy__panel';
+
+    var mark = document.createElement('div');
+    mark.className = 'fdy-busy__mark';
+    // aria-hidden: the caption below is the message. A second announcement from the spinner's own
+    // role="status" would say "busy" twice and name nothing.
+    mark.setAttribute('aria-hidden', 'true');
+    mark.appendChild(defaultMark());
+
+    var caption = document.createElement('p');
+    caption.className = 'fdy-busy__caption';
+    // role="status" rather than a dialog role: this reports a state, it does not ask a question.
+    caption.setAttribute('role', 'status');
+
+    panel.appendChild(mark);
+    panel.appendChild(caption);
+    el.appendChild(panel);
+    return el;
+  }
+
+  function defaultMark() {
+    var spinner = document.createElement('span');
+    spinner.className = 'fdy-spinner fdy-spinner--lg';
+    return spinner;
+  }
+
+  /** inert everything else, remembering ONLY what we set so an app's own inert is never cleared. */
+  function block(on) {
+    var i;
+    if (on) {
+      var kids = document.body.children;
+      for (i = 0; i < kids.length; i++) {
+        var child = kids[i];
+        if (child === node || child.hasAttribute('inert')) continue;
+        child.setAttribute('inert', '');
+        inerted.push(child);
+      }
+      return;
+    }
+    for (i = 0; i < inerted.length; i++) inerted[i].removeAttribute('inert');
+    inerted = [];
+  }
+
+  function isOpen() {
+    return node !== null && node.classList.contains('is-open');
+  }
+
+  function setCaption(text) {
+    node.querySelector('.fdy-busy__caption').textContent = text;
+  }
+
+  function setMark(el) {
+    var slot = node.querySelector('.fdy-busy__mark');
+    while (slot.firstChild) slot.removeChild(slot.firstChild);
+    slot.appendChild(el instanceof Element ? el : defaultMark());
+  }
+
+  function show(opts) {
+    showTimer = null;
+    setCaption(opts.caption == null ? textOf('caption') : String(opts.caption));
+    if (opts.mark !== undefined) setMark(opts.mark);
+
+    returnFocusTo = document.activeElement;
+    document.body.appendChild(node);
+    node.classList.add('is-open');
+    // Top layer, so it also covers an open <dialog>. Where the API is missing the z-index in
+    // busy.css is the fallback; it cannot clear a modal, and that is stated in COMPONENTS.md.
+    if (typeof node.showPopover === 'function') {
+      try { node.showPopover(); } catch (e) { /* already open, or not connected yet */ }
+    }
+    block(true);
+    node.focus();
+  }
+
+  function busy(options) {
+    var opts = options || {};
+    if (node === null) node = build();
+
+    // Already up: this is a second owner talking. Update what it says, do not stack.
+    if (isOpen()) {
+      if (opts.caption != null) setCaption(String(opts.caption));
+      if (opts.mark !== undefined) setMark(opts.mark);
+      return node;
+    }
+
+    var delay = opts.delay == null ? DEFAULT_DELAY : Number(opts.delay);
+    if (showTimer !== null) clearTimeout(showTimer);
+    if (delay > 0) showTimer = setTimeout(function () { show(opts); }, delay);
+    else show(opts);
+    return node;
+  }
+
+  function idle() {
+    // Cancels a pending show too: an operation that beat the delay must leave nothing behind.
+    if (showTimer !== null) { clearTimeout(showTimer); showTimer = null; }
+    if (node === null || !isOpen()) return;
+
+    block(false);
+    if (typeof node.hidePopover === 'function') {
+      try { node.hidePopover(); } catch (e) { /* was never in the top layer */ }
+    }
+    node.classList.remove('is-open');
+    if (node.parentNode !== null) node.parentNode.removeChild(node);
+
+    // Give focus back to whatever had it, now that its ancestor is no longer inert.
+    if (returnFocusTo !== null && typeof returnFocusTo.focus === 'function' && returnFocusTo.isConnected) {
+      returnFocusTo.focus();
+    }
+    returnFocusTo = null;
+  }
+
+  window.Freeday = window.Freeday || {};
+  window.Freeday.busy = busy;
+  window.Freeday.idle = idle;
+})();
+
 /* 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
@@ -603,6 +806,8 @@
    * forking this file. Keeping them in ONE table is also what lets a guard prove none is
    * hard-coded further down. */
   var TEXT = {
+    label: 'Select',
+    placeholder: 'Select…',
     back: 'Back one level',
     submenu: '{label}, submenu'
   };
@@ -632,8 +837,8 @@
     var root = sourceUl ? parse(sourceUl) : [];
     if (sourceUl) sourceUl.remove();
 
-    var label = wrap.getAttribute('data-label') || 'Select';
-    var placeholder = wrap.getAttribute('data-placeholder') || 'Select…';
+    var label = wrap.getAttribute('data-label') || textOf(wrap, 'label');
+    var placeholder = wrap.getAttribute('data-placeholder') || textOf(wrap, 'placeholder');
     var sep = wrap.getAttribute('data-separator') || ' / ';
 
     var trigger = document.createElement('button');
@@ -748,7 +953,44 @@
 
     var _pop = null;
     function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(panel, trigger); return _pop; }
+
+    /* The three field states the CSS has always styled (`:disabled`, `[aria-readonly="true"]`,
+       `[aria-invalid="true"]`) and this enhancer never set, so only the stacks that re-implement
+       the control natively had them. Read from the seed at init and settable afterwards, because
+       a host that renders once — every Blazor wrapper does, `ShouldRender => false` — cannot
+       express a later change any other way. */
+    function flagOf(name) {
+      var v = wrap.getAttribute('data-' + name);
+      return v != null && v !== 'false';
+    }
+    /* Named `state*` to match the datepicker, where `is*` collided with an older function. */
+    var stateDisabled = flagOf('disabled');
+    var stateReadonly = flagOf('readonly');
+    var stateInvalid = flagOf('invalid');
+    /* `data-id` and `data-describedby`: the trigger this enhancer BUILDS is the element a form
+       has to point its label and its error text at, and the raw path had no way to say so. */
+    if (wrap.getAttribute('data-id')) trigger.id = wrap.getAttribute('data-id');
+    if (wrap.getAttribute('data-describedby')) trigger.setAttribute('aria-describedby', wrap.getAttribute('data-describedby'));
+
+    function applyState() {
+      trigger.disabled = stateDisabled;
+      if (stateReadonly) trigger.setAttribute('aria-readonly', 'true');
+      else trigger.removeAttribute('aria-readonly');
+      if (stateInvalid) trigger.setAttribute('aria-invalid', 'true');
+      else trigger.removeAttribute('aria-invalid');
+      wrap.classList.toggle('fdy-cascade--error', stateInvalid);
+      if ((stateDisabled || stateReadonly) && !panel.hidden) close(false);
+    }
+    function setState(next) {
+      if (!next) return;
+      if (next.disabled != null) stateDisabled = !!next.disabled;
+      if (next.readonly != null) stateReadonly = !!next.readonly;
+      if (next.invalid != null) stateInvalid = !!next.invalid;
+      applyState();
+    }
+
     function open() {
+      if (stateDisabled || stateReadonly) return;
       if (!panel.hidden) return;
       // Re-open at the selected leaf's level for quick re-selection.
       var trail = selectedValue ? pathTo(root, selectedValue, []) : null;
@@ -803,8 +1045,11 @@
       valueSpan.classList.add('fdy-cascade__value--placeholder');
     }
 
+    applyState();
+
     var api = {
       wrap: wrap,
+      setState: setState,
       getValue: function () { return selectedValue; },
       clear: function () { selectedValue = ''; valueSpan.textContent = placeholder; valueSpan.classList.add('fdy-cascade__value--placeholder'); }
     };
@@ -825,7 +1070,15 @@
     initAll();
   }
 
-  window.FreedayCascade = { init: initCascade, initAll: initAll };
+  window.FreedayCascade = {
+    init: initCascade,
+    initAll: initAll,
+    /* Same reason as the datepicker's: a seed rendered once still has to be lockable later. */
+    setState: function (root, state) {
+      var api = root && root._fdyCascade ? root._fdyCascade : null;
+      if (api && api.setState) api.setState(state);
+    }
+  };
 })();
 
 /* Freeday, choose-from-list enhancer (optional, zero-dependency).
@@ -1104,6 +1357,28 @@
 
   var NS = 'http://www.w3.org/2000/svg';
 
+  /* User-facing strings. Two of them, and both shipped wrong until 2.2.0: the legend's fallback
+   * label read `Seri 1` — Indonesian, three months after 2.0.0 turned every enhancer English —
+   * and the donut's centre caption was hard-coded, so no host could rename it. Neither was
+   * reachable by the guards: one goes into the DOM through `createTextNode`, the other through
+   * `innerHTML`, and both guards look for `textContent` / `setAttribute`. Overridable per element
+   * with `data-fdy-text-<key>`, like every other enhancer. */
+  var TEXT = {
+    series: 'Series {n}',
+    total: 'Total'
+  };
+  function textAttr(root, key) {
+    if (!root || !root.getAttribute) return null;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    return kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+  }
+  function textOf(root, key, vars) {
+    var custom = textAttr(root, key);
+    var s = custom != null && custom !== '' ? custom : TEXT[key];
+    if (vars) for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) s = s.split('{' + k + '}').join(vars[k]);
+    return s;
+  }
+
   // 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) + ')'; }
@@ -1312,7 +1587,7 @@
         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))));
+        li.appendChild(document.createTextNode(s.label || textOf(el, 'series', { n: si + 1 })));
         legend.appendChild(li);
       });
       el.appendChild(legend);
@@ -1486,8 +1761,16 @@
     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);
+    var centerValue = document.createElement('b');
+    centerValue.textContent = centerLabel != null ? centerLabel : String(total);
+    center.appendChild(centerValue);
+    /* Built rather than assigned as innerHTML: the caption is overridable now, and an author's
+       string is not markup. */
+    if (!centerLabel) {
+      var centerCaption = document.createElement('span');
+      centerCaption.textContent = textOf(el, 'total');
+      center.appendChild(centerCaption);
+    }
     ring.appendChild(center);
     var svg = svgEl('svg');
     svg.setAttribute('class', 'fdy-donut__hit');
@@ -1646,12 +1929,12 @@
  * 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>
+ *  - Single:  <div data-fdy-datepicker data-value="2026-07-21" data-label="Upload date"
+ *               data-placeholder="Choose a date" data-min="2026-01-01" data-max="2026-12-31"></div>
+ *  - Range:   <div data-fdy-daterange role="group" aria-label="Date range">
+ *               <div data-fdy-datepicker data-role="from" data-placeholder="From"></div>
  *               <span class="fdy-daterange__sep">–</span>
- *               <div data-fdy-datepicker data-role="to" data-placeholder="Sampai"></div>
+ *               <div data-fdy-datepicker data-role="to" data-placeholder="To"></div>
  *             </div>
  *    The range links the two: the end can never precede the start (out-of-range days disable).
  *
@@ -1667,6 +1950,47 @@
      weekday names back automatically. The FALLBACK follows the kit's default language, or a
      page without `lang` would read English labels around Indonesian month names. */
   var LOCALE = document.documentElement.getAttribute('lang') || 'en';
+
+  /* User-facing strings. English by default, and every one overridable per element with
+   * `data-fdy-text-<key>`, so a host that speaks another language (an Indonesian app on the raw
+   * path, and every Blazor app, whose picker IS this enhancer) supplies its own without forking
+   * this file.
+   *
+   * This table arrived late, in 2.2.0: the ten labels below were written as literals passed to
+   * `navButton()` / `titleButton()`, so the guard that proves no enhancer string is hard-coded
+   * never saw them — it looks for the line that writes to the DOM, and here that line only ever
+   * sees a variable. Month and weekday names are NOT here on purpose: they come from `Intl`
+   * through the page's `lang`, which is a better hatch than anything the kit could invent.
+   * The `{label}` in the three title strings is the period the button drills into. */
+  var TEXT = {
+    label: 'Date',
+    placeholder: 'Choose a date',
+    prevMonth: 'Previous month',
+    nextMonth: 'Next month',
+    prevYear: 'Previous year',
+    nextYear: 'Next year',
+    prevYears: 'Previous years',
+    nextYears: 'Next years',
+    chooseMonth: '{label}, choose month',
+    chooseYear: '{label}, choose year',
+    backToMonths: '{start} to {end}, back to months'
+  };
+  /* HTML lowercases attribute names, so a camelCase key like `prevMonth` can only ever be written
+     as `data-fdy-text-prevmonth`, while the kebab form anybody would reach for,
+     `data-fdy-text-prev-month`, becomes a DIFFERENT attribute the enhancer never reads, and the
+     override fails silently. So the key is kebab-cased for the lookup; the run-together spelling
+     still resolves. */
+  function textAttr(root, key) {
+    if (!root || !root.getAttribute) return null;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    return kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+  }
+  function textOf(root, key, vars) {
+    var custom = textAttr(root, key);
+    var s = custom != null && custom !== '' ? custom : TEXT[key];
+    if (vars) for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) s = s.split('{' + k + '}').join(vars[k]);
+    return s;
+  }
   var uidSeq = 0;
   function uid(p) { uidSeq += 1; return p + '-' + uidSeq; }
   function pad(n) { return n < 10 ? '0' + n : '' + n; }
@@ -1704,8 +2028,8 @@
     wrap.dataset.fdyDpReady = '1';
     wrap.classList.add('fdy-datepicker');
 
-    var placeholder = wrap.getAttribute('data-placeholder') || 'Choose a date';
-    var label = wrap.getAttribute('data-label') || 'Date';
+    var placeholder = wrap.getAttribute('data-placeholder') || textOf(wrap, 'placeholder');
+    var label = wrap.getAttribute('data-label') || textOf(wrap, 'label');
     var selected = parseISO(wrap.getAttribute('data-value'));
     var minDate = parseISO(wrap.getAttribute('data-min'));
     var maxDate = parseISO(wrap.getAttribute('data-max'));
@@ -1803,16 +2127,16 @@
       panel.innerHTML = '';
       var head = document.createElement('div');
       head.className = 'fdy-cal__head';
-      var title = titleButton(monthFmt.format(view), monthFmt.format(view) + ', choose month', function () {
+      var title = titleButton(monthFmt.format(view), textOf(wrap, 'chooseMonth', { label: monthFmt.format(view) }), function () {
         mode = 'months';
         focusMonth = view.getMonth();
         render();
         focusMonthCell();
       });
       panel.setAttribute('aria-labelledby', title.id);
-      head.appendChild(navButton('‹', 'Previous month', function () { view = addMonths(view, -1); render(); }));
+      head.appendChild(navButton('‹', textOf(wrap, 'prevMonth'), function () { view = addMonths(view, -1); render(); }));
       head.appendChild(title);
-      head.appendChild(navButton('›', 'Next month', function () { view = addMonths(view, 1); render(); }));
+      head.appendChild(navButton('›', textOf(wrap, 'nextMonth'), function () { view = addMonths(view, 1); render(); }));
       panel.appendChild(head);
 
       var grid = document.createElement('div');
@@ -1869,16 +2193,16 @@
       var year = view.getFullYear();
       var head = document.createElement('div');
       head.className = 'fdy-cal__head';
-      var title = titleButton(String(year), year + ', choose year', function () {
+      var title = titleButton(String(year), textOf(wrap, 'chooseYear', { label: year }), function () {
         mode = 'years';
         focusYear = year;
         render();
         focusYearCell();
       });
       panel.setAttribute('aria-labelledby', title.id);
-      head.appendChild(navButton('‹', 'Previous year', function () { view = addMonths(view, -12); render(); focusMonthCell(); }));
+      head.appendChild(navButton('‹', textOf(wrap, 'prevYear'), function () { view = addMonths(view, -12); render(); focusMonthCell(); }));
       head.appendChild(title);
-      head.appendChild(navButton('›', 'Next year', function () { view = addMonths(view, 12); render(); focusMonthCell(); }));
+      head.appendChild(navButton('›', textOf(wrap, 'nextYear'), function () { view = addMonths(view, 12); render(); focusMonthCell(); }));
       panel.appendChild(head);
 
       var grid = document.createElement('div');
@@ -1930,16 +2254,16 @@
       var end = start + YEARS_PER_PAGE - 1;
       var head = document.createElement('div');
       head.className = 'fdy-cal__head';
-      var title = titleButton(start + ' – ' + end, start + ' to ' + end + ', back to months', function () {
+      var title = titleButton(start + ' – ' + end, textOf(wrap, 'backToMonths', { start: start, end: end }), function () {
         mode = 'months';
         focusMonth = view.getMonth();
         render();
         focusMonthCell();
       });
       panel.setAttribute('aria-labelledby', title.id);
-      head.appendChild(navButton('‹', 'Previous years', function () { moveYearFocus(focusYear - YEARS_PER_PAGE); }));
+      head.appendChild(navButton('‹', textOf(wrap, 'prevYears'), function () { moveYearFocus(focusYear - YEARS_PER_PAGE); }));
       head.appendChild(title);
-      head.appendChild(navButton('›', 'Next years', function () { moveYearFocus(focusYear + YEARS_PER_PAGE); }));
+      head.appendChild(navButton('›', textOf(wrap, 'nextYears'), function () { moveYearFocus(focusYear + YEARS_PER_PAGE); }));
       panel.appendChild(head);
 
       var grid = document.createElement('div');
@@ -2100,7 +2424,46 @@
 
     var _pop = null;
     function popCtl() { if (_pop === null && window.FreedayPopover) _pop = window.FreedayPopover.attach(panel, trigger); return _pop; }
+
+    /* The three field states the CSS has always styled (`:disabled`, `[aria-readonly="true"]`,
+       `[aria-invalid="true"]`) and this enhancer never set, so only the stacks that re-implement
+       the control natively had them. Read from the seed at init and settable afterwards, because
+       a host that renders once — every Blazor wrapper does, `ShouldRender => false` — cannot
+       express a later change any other way. */
+    function flagOf(name) {
+      var v = wrap.getAttribute('data-' + name);
+      return v != null && v !== 'false';
+    }
+    /* Named `state*`, not `is*`: this file already has an `isDisabled(date)` deciding whether a
+       DAY falls outside min/max, and shadowing it with a boolean made the day grid throw on every
+       render — silently, since the panel still opened and only its cells went missing. */
+    var stateDisabled = flagOf('disabled');
+    var stateReadonly = flagOf('readonly');
+    var stateInvalid = flagOf('invalid');
+    /* `data-id` and `data-describedby`: the trigger this enhancer BUILDS is the element a form
+       has to point its label and its error text at, and the raw path had no way to say so. */
+    if (wrap.getAttribute('data-id')) trigger.id = wrap.getAttribute('data-id');
+    if (wrap.getAttribute('data-describedby')) trigger.setAttribute('aria-describedby', wrap.getAttribute('data-describedby'));
+
+    function applyState() {
+      trigger.disabled = stateDisabled;
+      if (stateReadonly) trigger.setAttribute('aria-readonly', 'true');
+      else trigger.removeAttribute('aria-readonly');
+      if (stateInvalid) trigger.setAttribute('aria-invalid', 'true');
+      else trigger.removeAttribute('aria-invalid');
+      wrap.classList.toggle('fdy-datepicker--error', stateInvalid);
+      if ((stateDisabled || stateReadonly) && !panel.hidden) close(false);
+    }
+    function setState(next) {
+      if (!next) return;
+      if (next.disabled != null) stateDisabled = !!next.disabled;
+      if (next.readonly != null) stateReadonly = !!next.readonly;
+      if (next.invalid != null) stateInvalid = !!next.invalid;
+      applyState();
+    }
+
     function open() {
+      if (stateDisabled || stateReadonly) return;
       if (!panel.hidden) return;
       mode = 'days';
       focusDate = selected || focusDate || new Date();
@@ -2130,8 +2493,11 @@
 
     updateDisplay();
 
+    applyState();
+
     var api = {
       wrap: wrap,
+      setState: setState,
       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(); },
@@ -2191,7 +2557,16 @@
     initAll();
   }
 
-  window.FreedayDatepicker = { init: initPicker, initAll: initAll };
+  window.FreedayDatepicker = {
+    init: initPicker,
+    initAll: initAll,
+    /* A host that rendered its seed once and cannot re-render it (Blazor) still has to be able to
+       disable, lock or invalidate the field later. */
+    setState: function (root, state) {
+      var api = root && root._fdyDp ? root._fdyDp : null;
+      if (api && api.setState) api.setState(state);
+    }
+  };
 })();
 
 /* Freeday, datetime picker composer (optional, zero-dependency).
@@ -3215,7 +3590,24 @@
     if (root && root._fdyCombo) root._fdyCombo.setValue(value);
   }
 
-  window.FreedayCombo = { init: initCombo, initAll: initAll, setValue: setValue };
+  /* Beside setValue for the same reason it exists: a host that renders its markup once (every
+     Blazor wrapper, `ShouldRender => false`) cannot express a later state change any other way,
+     and a parameter that silently stops working after the first render is worse than none. */
+  function setState(root, state) {
+    var button = root ? root.querySelector('.fdy-combo__button') : null;
+    if (!button || !state) return;
+    if (state.disabled != null) button.disabled = !!state.disabled;
+    if (state.readonly != null) {
+      if (state.readonly) button.setAttribute('aria-readonly', 'true');
+      else button.removeAttribute('aria-readonly');
+    }
+    if (state.invalid != null) {
+      if (state.invalid) button.setAttribute('aria-invalid', 'true');
+      else button.removeAttribute('aria-invalid');
+    }
+  }
+
+  window.FreedayCombo = { init: initCombo, initAll: initAll, setValue: setValue, setState: setState };
 })();
 
 /* Freeday, slider value binding (optional, zero-dependency).
@@ -3269,7 +3661,9 @@
  *     <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).
+ * Emits bubbling "fdy-step-change" {index} and "fdy-step-finish" (Next on the last step), and a
+ * cancelable "fdy-step-before-change" {from, to, waitFor} that a guard refuses with
+ * preventDefault() or defers by assigning a promise to detail.waitFor.
  */
 (function () {
   'use strict';
@@ -3348,14 +3742,62 @@
       render();
     }
 
+    /* Leaving a step is REFUSABLE, because a wizard whose Next cannot be stopped is a wizard that
+     * validates nothing. Two ways to refuse, and the second is why an event alone was not enough:
+     *
+     *   sync   handler calls ev.preventDefault()      — the answer is already known
+     *   async  handler sets ev.detail.waitFor = promise — the answer is a server round-trip away
+     *
+     * Resolving to `false` refuses; anything else advances, so a handler that forgets to return is
+     * not read as a rejection. HOW validity is decided stays entirely with the app: the kit has no
+     * opinion about form libraries and this is the line that keeps it that way. */
+    var deciding = false;
+
+    function lock(on) {
+      deciding = on;
+      var list = root.querySelector('.fdy-stepper');
+      if (list) { if (on) list.setAttribute('aria-busy', 'true'); else list.removeAttribute('aria-busy'); }
+      if (prevBtn) prevBtn.disabled = on || active === 0;
+      if (nextBtn) nextBtn.disabled = on;
+    }
+
+    function request(to, onAllowed) {
+      if (deciding) return;
+      var ev = new CustomEvent('fdy-step-before-change', {
+        bubbles: true,
+        cancelable: true,
+        detail: { from: active, to: to, waitFor: null },
+      });
+      root.dispatchEvent(ev);
+      if (ev.defaultPrevented) return;
+
+      var pending = ev.detail.waitFor;
+      if (pending === null || typeof pending.then !== 'function') { onAllowed(); return; }
+
+      lock(true);
+      pending.then(
+        function (ok) { lock(false); if (ok !== false) onAllowed(); },
+        // A guard that THREW decided nothing, so it must not advance. Staying put with the nav
+        // released is the only safe reading; the app's own error handling reports the failure.
+        function () { lock(false); },
+      );
+    }
+
     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 }));
+      if (active < steps.length - 1) request(active + 1, function () { go(active + 1); });
+      else request(active + 1, function () { 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); });
+      if (!btn) return;
+      btn.addEventListener('click', function () {
+        if (i > maxReached) return;
+        // Going BACK is always allowed — nothing is being committed. Jumping forward to a step
+        // already reached still leaves the current one behind, so it asks the guard like Next does.
+        if (i <= active) go(i);
+        else request(i, function () { go(i); });
+      });
     });
 
     render();
@@ -3426,6 +3868,8 @@
     filterText: 'Contains text',
     filterTextPlaceholder: 'Contains…',
     filterEnum: 'Show values',
+    filterMin: 'Min',
+    filterMax: 'Max',
     filterRange: 'Value range',
     reset: 'Reset',
     close: 'Close',
@@ -3698,8 +4142,8 @@
         pop.appendChild(filterTitle(textOf(root, 'filterRange')));
         var range = document.createElement('div');
         range.className = 'fdy-filter__range';
-        var minI = numberInput('Min', f.min);
-        var maxI = numberInput('Maks', f.max);
+        var minI = numberInput(textOf(root, 'filterMin'), f.min);
+        var maxI = numberInput(textOf(root, 'filterMax'), f.max);
         var applyRange = function () {
           f.min = minI.value !== '' ? parseNum(minI.value) : null;
           f.max = maxI.value !== '' ? parseNum(maxI.value) : null;
@@ -3998,6 +4442,24 @@
 (function () {
   'use strict';
 
+  /* User-facing strings, overridable per element with `data-fdy-text-<key>`. One entry, and it
+   * still needed the table: it reached the DOM as an argument to a helper, which is how it sat
+   * outside every string guard until 2.2.0. */
+  var TEXT = {
+    label: 'Choose a time'
+  };
+  function textAttr(root, key) {
+    if (!root || !root.getAttribute) return null;
+    var kebab = root.getAttribute('data-fdy-text-' + key.replace(/[A-Z]/g, function (c) { return '-' + c.toLowerCase(); }));
+    return kebab != null && kebab !== '' ? kebab : root.getAttribute('data-fdy-text-' + key);
+  }
+  function textOf(root, key, vars) {
+    var custom = textAttr(root, key);
+    var s = custom != null && custom !== '' ? custom : TEXT[key];
+    if (vars) for (var k in vars) if (Object.prototype.hasOwnProperty.call(vars, k)) s = s.split('{' + k + '}').join(vars[k]);
+    return s;
+  }
+
   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>';
 
@@ -4012,7 +4474,7 @@
     wrap.dataset.fdyTpReady = '1';
     wrap.classList.add('fdy-timepicker');
 
-    var label = wrap.getAttribute('data-label') || 'Choose a time';
+    var label = wrap.getAttribute('data-label') || textOf(wrap, 'label');
     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;