@vanduo-oss/framework 1.3.4 → 1.3.7

package/dist/vanduo.esm.js

@@ -1,4 +1,4 @@
-/*! Vanduo v1.3.4 | Built: 2026-04-14T21:21:55.517Z | git:73e3db5 | development */
+/*! Vanduo v1.3.7 | Built: 2026-04-18T12:05:32.603Z | git:20b2d08 | development */
 
 // js/utils/lifecycle.js
 (function() {
@@ -107,7 +107,7 @@
 // js/vanduo.js
 (function() {
   "use strict";
-  const VANDUO_VERSION = true ? "1.3.4" : "0.0.0-dev";
+  const VANDUO_VERSION = true ? "1.3.7" : "0.0.0-dev";
   const Vanduo2 = {
     version: VANDUO_VERSION,
     components: {},
@@ -6572,6 +6572,410 @@
   window.VanduoGlassScroll = GlassScroll;
 })();
 
+// js/components/morph.js
+(function() {
+  "use strict";
+  const MORPH_DURATION_MS = 750;
+  const Morph = {
+    instances: /* @__PURE__ */ new Map(),
+    init: function() {
+      const elements = document.querySelectorAll(".vd-morph, [data-vd-morph]");
+      elements.forEach(function(el) {
+        if (Morph.instances.has(el)) return;
+        if (el.getAttribute("data-vd-morph") === "manual") return;
+        Morph.initInstance(el);
+      });
+    },
+    initInstance: function(el) {
+      Morph._ensureLayers(el);
+      const cleanup = [];
+      let morphing = false;
+      const handleClick = function(e) {
+        if (morphing) return;
+        Morph._runMorph(el, e, function() {
+          morphing = false;
+        });
+        morphing = true;
+      };
+      el.addEventListener("click", handleClick);
+      cleanup.push(function() {
+        el.removeEventListener("click", handleClick);
+      });
+      this.instances.set(el, { cleanup });
+    },
+    morph: function(el) {
+      if (!el) return;
+      if (!this.instances.has(el)) this.initInstance(el);
+      this._runMorph(el, null, null);
+    },
+    destroy: function(el) {
+      const instance = this.instances.get(el);
+      if (!instance) return;
+      instance.cleanup.forEach(function(fn) {
+        fn();
+      });
+      this.instances.delete(el);
+    },
+    destroyAll: function() {
+      this.instances.forEach(function(_, el) {
+        Morph.destroy(el);
+      });
+    },
+    /* ── Internal helpers ── */
+    _ensureLayers: function(el) {
+      if (!el.querySelector(".vd-morph-wave")) {
+        const wave = document.createElement("span");
+        wave.className = "vd-morph-wave";
+        wave.setAttribute("aria-hidden", "true");
+        el.insertBefore(wave, el.firstChild);
+      }
+      if (!el.querySelector(".vd-morph-shine")) {
+        const shine = document.createElement("span");
+        shine.className = "vd-morph-shine";
+        shine.setAttribute("aria-hidden", "true");
+        const waveEl = el.querySelector(".vd-morph-wave");
+        if (waveEl && waveEl.nextSibling) {
+          el.insertBefore(shine, waveEl.nextSibling);
+        } else {
+          el.insertBefore(shine, el.firstChild);
+        }
+      }
+    },
+    _runMorph: function(el, pointerEvent, onComplete) {
+      const wave = el.querySelector(".vd-morph-wave");
+      if (wave) {
+        const rect = el.getBoundingClientRect();
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        const px = pointerEvent ? pointerEvent.clientX || cx : cx;
+        const py = pointerEvent ? pointerEvent.clientY || cy : cy;
+        wave.style.left = px - rect.left + "px";
+        wave.style.top = py - rect.top + "px";
+      }
+      el.classList.add("is-morphing");
+      let duration = MORPH_DURATION_MS;
+      const custom = getComputedStyle(el).getPropertyValue("--morph-duration");
+      if (custom) {
+        const parsed = parseFloat(custom);
+        if (!isNaN(parsed)) duration = parsed * (custom.indexOf("ms") !== -1 ? 1 : 1e3);
+      }
+      setTimeout(function() {
+        el.classList.remove("is-morphing");
+        const current = el.querySelector(".vd-morph-current");
+        const next = el.querySelector(".vd-morph-next");
+        if (current && next) {
+          current.classList.remove("vd-morph-current");
+          current.classList.add("vd-morph-next");
+          next.classList.remove("vd-morph-next");
+          next.classList.add("vd-morph-current");
+        }
+        if (typeof onComplete === "function") onComplete();
+      }, duration);
+    }
+  };
+  if (typeof window.Vanduo !== "undefined") {
+    window.Vanduo.register("morph", Morph);
+  }
+  window.VanduoMorph = Morph;
+})();
+
+// js/components/expanding-cards.js
+(function() {
+  "use strict";
+  const ExpandingCards = {
+    instances: /* @__PURE__ */ new Map(),
+    init: function() {
+      document.querySelectorAll(".vd-expanding-cards").forEach(function(el) {
+        if (el.getAttribute("data-vd-expanding-cards") === "manual") return;
+        if (ExpandingCards.instances.has(el)) return;
+        ExpandingCards.initContainer(el);
+      });
+    },
+    initContainer: function(container) {
+      const cleanup = [];
+      const getCards = function() {
+        return Array.prototype.slice.call(container.querySelectorAll(".vd-expanding-card"));
+      };
+      const setActive = function(card) {
+        const cards = getCards();
+        if (!card || cards.indexOf(card) === -1) return;
+        cards.forEach(function(c) {
+          c.classList.toggle("is-active", c === card);
+        });
+        card.focus({ preventScroll: true });
+      };
+      const onClick = function(e) {
+        const t = e.target;
+        const card = t.closest ? t.closest(".vd-expanding-card") : null;
+        if (!card || !container.contains(card)) return;
+        setActive(card);
+      };
+      const onKeydown = function(e) {
+        if (e.key !== "ArrowLeft" && e.key !== "ArrowRight" && e.key !== "Home" && e.key !== "End") {
+          return;
+        }
+        const cards = getCards().filter(function(c) {
+          return c.offsetParent !== null || c.getClientRects().length > 0;
+        });
+        if (!cards.length) return;
+        const activeEl = document.activeElement;
+        let idx = cards.indexOf(activeEl);
+        if (idx < 0) {
+          idx = cards.findIndex(function(c) {
+            return c.classList.contains("is-active");
+          });
+        }
+        if (idx < 0) idx = 0;
+        if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          setActive(cards[Math.max(0, idx - 1)]);
+        } else if (e.key === "ArrowRight") {
+          e.preventDefault();
+          setActive(cards[Math.min(cards.length - 1, idx + 1)]);
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          setActive(cards[0]);
+        } else if (e.key === "End") {
+          e.preventDefault();
+          setActive(cards[cards.length - 1]);
+        }
+      };
+      container.addEventListener("click", onClick);
+      cleanup.push(function() {
+        container.removeEventListener("click", onClick);
+      });
+      container.addEventListener("keydown", onKeydown);
+      cleanup.push(function() {
+        container.removeEventListener("keydown", onKeydown);
+      });
+      getCards().forEach(function(card) {
+        if (!card.hasAttribute("tabindex")) {
+          card.setAttribute("tabindex", "0");
+        }
+        card.setAttribute("role", "button");
+        if (!card.hasAttribute("aria-pressed")) {
+          card.setAttribute("aria-pressed", card.classList.contains("is-active") ? "true" : "false");
+        }
+      });
+      const syncAria = function() {
+        getCards().forEach(function(card) {
+          card.setAttribute("aria-pressed", card.classList.contains("is-active") ? "true" : "false");
+        });
+      };
+      const mo = new MutationObserver(syncAria);
+      mo.observe(container, { attributes: true, subtree: true, attributeFilter: ["class"] });
+      cleanup.push(function() {
+        mo.disconnect();
+      });
+      syncAria();
+      ExpandingCards.instances.set(container, { cleanup });
+    },
+    destroy: function(container) {
+      const inst = this.instances.get(container);
+      if (!inst) return;
+      inst.cleanup.forEach(function(fn) {
+        fn();
+      });
+      this.instances.delete(container);
+    },
+    destroyAll: function() {
+      this.instances.forEach(function(_, el) {
+        ExpandingCards.destroy(el);
+      });
+    }
+  };
+  if (typeof window.Vanduo !== "undefined") {
+    window.Vanduo.register("expandingCards", ExpandingCards);
+  }
+  window.VanduoExpandingCards = ExpandingCards;
+})();
+
+// js/components/timeline.js
+(function() {
+  "use strict";
+  const STAGGER_MS = 140;
+  const MAX_STAGGER_INDEX = 7;
+  const PLAY_INTERVAL_MS = 800;
+  function countRevealedPrefix(items) {
+    let count = 0;
+    for (let i = 0; i < items.length; i++) {
+      if (!items[i].classList.contains("is-revealed")) break;
+      count++;
+    }
+    return count;
+  }
+  function findPlaybackControls(container) {
+    return container.parentElement || document.body;
+  }
+  function initPlayback(container, items, cleanup) {
+    items.forEach(function(item) {
+      item.classList.remove("is-revealed");
+    });
+    const scope = findPlaybackControls(container);
+    const prevBtn = scope.querySelector("[data-vd-timeline-prev]");
+    const nextBtn = scope.querySelector("[data-vd-timeline-next]");
+    const playBtn = scope.querySelector("[data-vd-timeline-play]");
+    const pauseBtn = scope.querySelector("[data-vd-timeline-pause]");
+    let playTimer = null;
+    function updateNavButtons() {
+      const k = countRevealedPrefix(items);
+      const n = items.length;
+      if (prevBtn) {
+        const atStart = k === 0;
+        prevBtn.disabled = atStart;
+        prevBtn.setAttribute("aria-disabled", atStart ? "true" : "false");
+      }
+      if (nextBtn) {
+        const atEnd = k >= n;
+        nextBtn.disabled = atEnd;
+        nextBtn.setAttribute("aria-disabled", atEnd ? "true" : "false");
+      }
+      if (playBtn) {
+        playBtn.setAttribute("aria-pressed", playTimer ? "true" : "false");
+      }
+      if (pauseBtn) {
+        pauseBtn.disabled = !playTimer;
+      }
+    }
+    function stepNext() {
+      const k = countRevealedPrefix(items);
+      if (k < items.length) {
+        items[k].classList.add("is-revealed");
+      }
+      updateNavButtons();
+    }
+    function stepPrev() {
+      const k = countRevealedPrefix(items);
+      if (k > 0) {
+        items[k - 1].classList.remove("is-revealed");
+      }
+      updateNavButtons();
+    }
+    function play() {
+      if (playTimer) return;
+      playTimer = setInterval(function() {
+        if (countRevealedPrefix(items) >= items.length) {
+          pause();
+          return;
+        }
+        stepNext();
+      }, PLAY_INTERVAL_MS);
+      updateNavButtons();
+    }
+    function pause() {
+      if (playTimer) {
+        clearInterval(playTimer);
+        playTimer = null;
+      }
+      updateNavButtons();
+    }
+    function addClick(el, fn) {
+      if (!el) return;
+      const handler = function(e) {
+        e.preventDefault();
+        fn();
+      };
+      el.addEventListener("click", handler);
+      cleanup.push(function() {
+        el.removeEventListener("click", handler);
+      });
+    }
+    addClick(prevBtn, stepPrev);
+    addClick(nextBtn, stepNext);
+    addClick(playBtn, play);
+    addClick(pauseBtn, pause);
+    cleanup.push(function() {
+      pause();
+    });
+    updateNavButtons();
+    return {
+      stepNext,
+      stepPrev,
+      play,
+      pause
+    };
+  }
+  const Timeline = {
+    instances: /* @__PURE__ */ new Map(),
+    init: function() {
+      document.querySelectorAll(".vd-timeline.vd-timeline-animated").forEach(function(el) {
+        if (Timeline.instances.has(el)) return;
+        Timeline.initInstance(el);
+      });
+    },
+    reinit: function() {
+      Timeline.destroyAll();
+      Timeline.init();
+    },
+    initInstance: function(container) {
+      const cleanup = [];
+      const items = Array.prototype.filter.call(container.children, function(child) {
+        return child.classList && child.classList.contains("vd-timeline-item");
+      });
+      items.forEach(function(item, i) {
+        const idx = Math.min(i, MAX_STAGGER_INDEX);
+        item.style.setProperty("--vd-timeline-reveal-delay", idx * STAGGER_MS + "ms");
+      });
+      const reducedMotion = typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      if (reducedMotion) {
+        items.forEach(function(item) {
+          item.classList.add("is-revealed");
+        });
+        Timeline.instances.set(container, { cleanup });
+        return;
+      }
+      const playback = container.classList && container.classList.contains("vd-timeline-playback");
+      if (playback) {
+        const playbackApi = initPlayback(container, items, cleanup);
+        Timeline.instances.set(container, { cleanup, playback: playbackApi });
+        return;
+      }
+      if (typeof IntersectionObserver === "undefined") {
+        items.forEach(function(item) {
+          item.classList.add("is-revealed");
+        });
+        Timeline.instances.set(container, { cleanup });
+        return;
+      }
+      const observer = new IntersectionObserver(function(entries) {
+        entries.forEach(function(entry) {
+          if (!entry.isIntersecting) return;
+          entry.target.classList.add("is-revealed");
+          observer.unobserve(entry.target);
+        });
+      }, {
+        root: null,
+        rootMargin: "0px 0px -10% 0px",
+        threshold: 0.15
+      });
+      items.forEach(function(item) {
+        observer.observe(item);
+      });
+      cleanup.push(function() {
+        observer.disconnect();
+      });
+      Timeline.instances.set(container, { cleanup });
+    },
+    destroy: function(container) {
+      const inst = this.instances.get(container);
+      if (!inst) return;
+      inst.cleanup.forEach(function(fn) {
+        fn();
+      });
+      this.instances.delete(container);
+    },
+    destroyAll: function() {
+      this.instances.forEach(function(_, el) {
+        Timeline.destroy(el);
+      });
+    }
+  };
+  if (typeof window.Vanduo !== "undefined") {
+    window.Vanduo.register("timeline", Timeline);
+  }
+  window.VanduoTimeline = Timeline;
+})();
+
 // js/components/flow.js
 (function() {
   "use strict";
@@ -7588,6 +7992,115 @@
   "use strict";
   const DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
   const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+  function escapeRegexChar(c) {
+    return c.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+  function buildParseFormat(format) {
+    let regex = "^";
+    const order = [];
+    let i = 0;
+    while (i < format.length) {
+      const slice = format.slice(i);
+      if (slice.toLowerCase().startsWith("yyyy")) {
+        regex += "(\\d{4})";
+        order.push("y");
+        i += 4;
+      } else if (slice.toLowerCase().startsWith("mm")) {
+        regex += "(\\d{2})";
+        order.push("m");
+        i += 2;
+      } else if (slice.toLowerCase().startsWith("dd")) {
+        regex += "(\\d{2})";
+        order.push("d");
+        i += 2;
+      } else {
+        regex += escapeRegexChar(format[i]);
+        i++;
+      }
+    }
+    regex += "$";
+    return { regex: new RegExp(regex), order };
+  }
+  function parseDateFromFormat(value, format) {
+    if (!value || !format) return null;
+    const { regex, order } = buildParseFormat(format);
+    const m = value.trim().match(regex);
+    if (!m) return null;
+    let y;
+    let mo;
+    let d;
+    let ci = 1;
+    for (let k = 0; k < order.length; k++) {
+      const part = order[k];
+      const v = parseInt(m[ci++], 10);
+      if (Number.isNaN(v)) return null;
+      if (part === "y") y = v;
+      else if (part === "m") mo = v - 1;
+      else if (part === "d") d = v;
+    }
+    if (y === void 0 || mo === void 0 || d === void 0) return null;
+    const dt = new Date(y, mo, d);
+    if (dt.getFullYear() !== y || dt.getMonth() !== mo || dt.getDate() !== d) return null;
+    return dt;
+  }
+  function formatDate(d, format) {
+    const yyyy = String(d.getFullYear());
+    const mm = String(d.getMonth() + 1).padStart(2, "0");
+    const dd = String(d.getDate()).padStart(2, "0");
+    let out = "";
+    let i = 0;
+    while (i < format.length) {
+      const slice = format.slice(i);
+      if (slice.toLowerCase().startsWith("yyyy")) {
+        out += yyyy;
+        i += 4;
+      } else if (slice.toLowerCase().startsWith("mm")) {
+        out += mm;
+        i += 2;
+      } else if (slice.toLowerCase().startsWith("dd")) {
+        out += dd;
+        i += 2;
+      } else {
+        out += format[i];
+        i++;
+      }
+    }
+    return out;
+  }
+  function dateKey(d) {
+    return d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
+  }
+  function addDays(d, n) {
+    const x = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    x.setDate(x.getDate() + n);
+    return x;
+  }
+  function addMonthsClamped(d, n) {
+    return new Date(d.getFullYear(), d.getMonth() + n, d.getDate());
+  }
+  function parseYmdLocal(ymd) {
+    if (!ymd || typeof ymd !== "string") return null;
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(ymd.trim());
+    if (!m) return null;
+    const y = +m[1];
+    const mo = +m[2] - 1;
+    const day = +m[3];
+    const dt = new Date(y, mo, day);
+    if (dt.getFullYear() !== y || dt.getMonth() !== mo || dt.getDate() !== day) return null;
+    return dt;
+  }
+  function startOfWeekSunday(d) {
+    const x = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    const day = x.getDay();
+    x.setDate(x.getDate() - day);
+    return x;
+  }
+  function endOfWeekSunday(d) {
+    const x = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+    const day = x.getDay();
+    x.setDate(x.getDate() + (6 - day));
+    return x;
+  }
   const Datepicker = {
     instances: /* @__PURE__ */ new Map(),
     init: function() {
@@ -7599,28 +8112,70 @@
     },
     initInstance: function(input) {
       const cleanup = [];
-      const format = input.getAttribute("data-vd-datepicker-format") || "yyyy-mm-dd";
+      const format = input.getAttribute("data-vd-datepicker-format") || "YYYY-MM-DD";
       const minStr = input.getAttribute("data-vd-datepicker-min");
       const maxStr = input.getAttribute("data-vd-datepicker-max");
-      const minDate = minStr ? new Date(minStr) : null;
-      const maxDate = maxStr ? new Date(maxStr) : null;
+      const minDate = minStr ? parseYmdLocal(minStr) : null;
+      const maxDate = maxStr ? parseYmdLocal(maxStr) : null;
       const today = /* @__PURE__ */ new Date();
       let viewYear = today.getFullYear();
       let viewMonth = today.getMonth();
       let selectedDate = null;
       let viewMode = "days";
+      let focusedDate = null;
+      let skipNextFocusOpen = false;
+      const isDisabled = (d) => {
+        if (minDate) {
+          const t = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+          if (t < minDate.getTime()) return true;
+        }
+        if (maxDate) {
+          const t = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
+          if (t > maxDate.getTime()) return true;
+        }
+        return false;
+      };
+      const ensureMonthInRange = (y, m) => {
+        if (!minDate && !maxDate) return { y, m };
+        const first = new Date(y, m, 1);
+        const last = new Date(y, m + 1, 0);
+        if (minDate && last.getTime() < minDate.getTime()) {
+          return { y: minDate.getFullYear(), m: minDate.getMonth() };
+        }
+        if (maxDate && first.getTime() > maxDate.getTime()) {
+          return { y: maxDate.getFullYear(), m: maxDate.getMonth() };
+        }
+        return { y, m };
+      };
+      const firstSelectableInMonth = (y, m) => {
+        const last = new Date(y, m + 1, 0).getDate();
+        for (let day = 1; day <= last; day++) {
+          const dt = new Date(y, m, day);
+          if (!isDisabled(dt)) return dt;
+        }
+        return new Date(y, m, 1);
+      };
       if (input.value) {
-        const parsed = new Date(input.value);
-        if (!isNaN(parsed.getTime())) {
+        const trimmed = input.value.trim();
+        let parsed = parseDateFromFormat(trimmed, format);
+        if (!parsed) {
+          const fallback = new Date(trimmed);
+          if (!isNaN(fallback.getTime())) parsed = fallback;
+        }
+        if (parsed) {
           selectedDate = parsed;
           viewYear = parsed.getFullYear();
           viewMonth = parsed.getMonth();
         }
       }
+      const clampedInit = ensureMonthInRange(viewYear, viewMonth);
+      viewYear = clampedInit.y;
+      viewMonth = clampedInit.m;
       const popup = document.createElement("div");
       popup.className = "vd-datepicker-popup";
       popup.setAttribute("role", "dialog");
       popup.setAttribute("aria-label", "Choose date");
+      popup.tabIndex = -1;
       const wrapper = document.createElement("div");
       wrapper.className = "vd-suggest-wrapper";
       wrapper.style.position = "relative";
@@ -7628,18 +8183,80 @@
       input.parentNode.insertBefore(wrapper, input);
       wrapper.appendChild(input);
       wrapper.appendChild(popup);
-      const formatDate = (d) => {
-        const yyyy = d.getFullYear();
-        const mm = String(d.getMonth() + 1).padStart(2, "0");
-        const dd = String(d.getDate()).padStart(2, "0");
-        return format.replace("yyyy", yyyy).replace("mm", mm).replace("dd", dd);
+      const isSameDay = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+      const selectDate = (date) => {
+        selectedDate = date;
+        viewYear = date.getFullYear();
+        viewMonth = date.getMonth();
+        input.value = formatDate(date, format);
+        skipNextFocusOpen = true;
+        close();
+        input.dispatchEvent(new CustomEvent("datepicker:select", {
+          detail: { date, formatted: input.value },
+          bubbles: true
+        }));
+        input.dispatchEvent(new Event("change", { bubbles: true }));
+        input.focus();
       };
-      const isDisabled = (d) => {
-        if (minDate && d < minDate) return true;
-        if (maxDate && d > maxDate) return true;
-        return false;
+      const focusFocusedDay = () => {
+        if (viewMode !== "days" || !focusedDate) return;
+        const key = dateKey(focusedDate);
+        const btn = popup.querySelector('[data-vd-date="' + key + '"]');
+        if (btn && !btn.classList.contains("is-outside") && btn.getAttribute("aria-disabled") !== "true") {
+          btn.focus();
+        }
+      };
+      const skipDisabled = (d, stepDir, maxSteps) => {
+        let x = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+        const step = stepDir > 0 ? 1 : -1;
+        for (let i = 0; i < maxSteps; i++) {
+          if (!isDisabled(x)) return x;
+          x = addDays(x, step);
+        }
+        return d;
+      };
+      const createDayBtn = (day, outside, date) => {
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "vd-datepicker-day";
+        btn.textContent = day;
+        btn.setAttribute("role", "gridcell");
+        if (outside) {
+          btn.classList.add("is-outside");
+          btn.tabIndex = -1;
+          btn.setAttribute("aria-disabled", "true");
+          return btn;
+        }
+        btn.setAttribute("data-vd-date", dateKey(date));
+        if (date && isSameDay(date, today)) btn.classList.add("is-today");
+        if (date && isSameDay(date, selectedDate)) btn.classList.add("is-selected");
+        if (date && isDisabled(date)) {
+          btn.classList.add("is-disabled");
+          btn.setAttribute("aria-disabled", "true");
+          btn.tabIndex = -1;
+          return btn;
+        }
+        if (date) {
+          const isFocused = focusedDate && isSameDay(date, focusedDate);
+          btn.tabIndex = isFocused ? 0 : -1;
+          btn.addEventListener("click", () => {
+            selectedDate = date;
+            viewYear = date.getFullYear();
+            viewMonth = date.getMonth();
+            focusedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+            input.value = formatDate(date, format);
+            skipNextFocusOpen = true;
+            close();
+            input.dispatchEvent(new CustomEvent("datepicker:select", {
+              detail: { date, formatted: input.value },
+              bubbles: true
+            }));
+            input.dispatchEvent(new Event("change", { bubbles: true }));
+            input.focus();
+          });
+        }
+        return btn;
       };
-      const isSameDay = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
       const render = () => {
         popup.innerHTML = "";
         const header = document.createElement("div");
@@ -7709,35 +8326,53 @@
         header.appendChild(nextBtn);
         popup.appendChild(header);
         if (viewMode === "days") {
+          const gridWrap = document.createElement("div");
+          gridWrap.className = "vd-datepicker-grid";
+          gridWrap.setAttribute("role", "grid");
+          gridWrap.setAttribute("aria-label", "Calendar");
           const weekdays = document.createElement("div");
           weekdays.className = "vd-datepicker-weekdays";
-          DAYS.forEach((d) => {
+          weekdays.setAttribute("role", "row");
+          DAYS.forEach(function(d) {
             const span = document.createElement("span");
+            span.setAttribute("role", "columnheader");
+            span.setAttribute("aria-label", d);
             span.textContent = d;
             weekdays.appendChild(span);
           });
-          popup.appendChild(weekdays);
-          const grid = document.createElement("div");
-          grid.className = "vd-datepicker-days";
+          gridWrap.appendChild(weekdays);
           const firstDay = new Date(viewYear, viewMonth, 1).getDay();
           const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
           const daysInPrev = new Date(viewYear, viewMonth, 0).getDate();
+          const cells = [];
           for (let i = firstDay - 1; i >= 0; i--) {
-            const btn = createDayBtn(daysInPrev - i, true);
-            grid.appendChild(btn);
+            const dayNum = daysInPrev - i;
+            const prevMonth = viewMonth === 0 ? 11 : viewMonth - 1;
+            const prevYear = viewMonth === 0 ? viewYear - 1 : viewYear;
+            const date = new Date(prevYear, prevMonth, dayNum);
+            cells.push({ day: dayNum, outside: true, date });
           }
           for (let d = 1; d <= daysInMonth; d++) {
             const date = new Date(viewYear, viewMonth, d);
-            const btn = createDayBtn(d, false, date);
-            grid.appendChild(btn);
+            cells.push({ day: d, outside: false, date });
           }
           const totalCells = firstDay + daysInMonth;
           const remaining = totalCells % 7 === 0 ? 0 : 7 - totalCells % 7;
           for (let i = 1; i <= remaining; i++) {
-            const btn = createDayBtn(i, true);
-            grid.appendChild(btn);
+            const date = new Date(viewYear, viewMonth + 1, i);
+            cells.push({ day: i, outside: true, date });
           }
-          popup.appendChild(grid);
+          for (let r = 0; r < cells.length; r += 7) {
+            const row = document.createElement("div");
+            row.className = "vd-datepicker-row";
+            row.setAttribute("role", "row");
+            for (let c = 0; c < 7; c++) {
+              const cell = cells[r + c];
+              row.appendChild(createDayBtn(cell.day, cell.outside, cell.date));
+            }
+            gridWrap.appendChild(row);
+          }
+          popup.appendChild(gridWrap);
         } else if (viewMode === "months") {
           const grid = document.createElement("div");
           grid.className = "vd-datepicker-months";
@@ -7778,65 +8413,125 @@
           popup.appendChild(grid);
         }
       };
-      const createDayBtn = (day, outside, date) => {
-        const btn = document.createElement("button");
-        btn.type = "button";
-        btn.className = "vd-datepicker-day";
-        btn.textContent = day;
-        if (outside) {
-          btn.classList.add("is-outside");
-          btn.tabIndex = -1;
-          return btn;
+      const handleGridKeydown = (e) => {
+        if (!popup.classList.contains("is-open") || viewMode !== "days") return;
+        const grid = popup.querySelector(".vd-datepicker-grid");
+        if (!grid || !grid.contains(e.target)) return;
+        const key = e.key;
+        if (key !== "ArrowLeft" && key !== "ArrowRight" && key !== "ArrowUp" && key !== "ArrowDown" && key !== "Home" && key !== "End" && key !== "PageUp" && key !== "PageDown" && key !== "Enter" && key !== " " && key !== "Escape") {
+          return;
         }
-        if (date && isSameDay(date, today)) btn.classList.add("is-today");
-        if (date && isSameDay(date, selectedDate)) btn.classList.add("is-selected");
-        if (date && isDisabled(date)) {
-          btn.classList.add("is-disabled");
-          return btn;
+        if (key === "Escape") {
+          e.preventDefault();
+          e.stopPropagation();
+          skipNextFocusOpen = true;
+          close();
+          input.focus();
+          return;
         }
-        if (date) {
-          btn.addEventListener("click", () => {
-            selectedDate = date;
-            viewYear = date.getFullYear();
-            viewMonth = date.getMonth();
-            input.value = formatDate(date);
-            close();
-            input.dispatchEvent(new CustomEvent("datepicker:select", {
-              detail: { date, formatted: input.value },
-              bubbles: true
-            }));
-            input.dispatchEvent(new Event("change", { bubbles: true }));
-          });
+        if (!focusedDate) {
+          focusedDate = firstSelectableInMonth(viewYear, viewMonth);
         }
-        return btn;
+        if (key === "Enter" || key === " ") {
+          e.preventDefault();
+          if (focusedDate && !isDisabled(focusedDate)) {
+            selectDate(new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate()));
+          }
+          return;
+        }
+        e.preventDefault();
+        let next = new Date(focusedDate.getFullYear(), focusedDate.getMonth(), focusedDate.getDate());
+        let skipDir = 1;
+        if (key === "ArrowLeft") {
+          next = addDays(next, -1);
+          skipDir = -1;
+        } else if (key === "ArrowRight") {
+          next = addDays(next, 1);
+          skipDir = 1;
+        } else if (key === "ArrowUp") {
+          next = addDays(next, -7);
+          skipDir = -1;
+        } else if (key === "ArrowDown") {
+          next = addDays(next, 7);
+          skipDir = 1;
+        } else if (key === "Home") {
+          next = startOfWeekSunday(next);
+          skipDir = 1;
+        } else if (key === "End") {
+          next = endOfWeekSunday(next);
+          skipDir = -1;
+        } else if (key === "PageUp") {
+          next = addMonthsClamped(next, -1);
+          skipDir = -1;
+        } else if (key === "PageDown") {
+          next = addMonthsClamped(next, 1);
+          skipDir = 1;
+        }
+        next = skipDisabled(next, skipDir, 400);
+        if (next.getMonth() !== viewMonth || next.getFullYear() !== viewYear) {
+          viewYear = next.getFullYear();
+          viewMonth = next.getMonth();
+          const cl = ensureMonthInRange(viewYear, viewMonth);
+          viewYear = cl.y;
+          viewMonth = cl.m;
+        }
+        focusedDate = next;
+        render();
+        requestAnimationFrame(focusFocusedDay);
       };
       const open = () => {
+        viewMode = "days";
+        if (selectedDate) {
+          viewYear = selectedDate.getFullYear();
+          viewMonth = selectedDate.getMonth();
+        }
+        const cl = ensureMonthInRange(viewYear, viewMonth);
+        viewYear = cl.y;
+        viewMonth = cl.m;
+        if (selectedDate) {
+          focusedDate = new Date(selectedDate.getFullYear(), selectedDate.getMonth(), selectedDate.getDate());
+        } else {
+          focusedDate = firstSelectableInMonth(viewYear, viewMonth);
+        }
         render();
         popup.classList.add("is-open");
         input.setAttribute("aria-expanded", "true");
+        requestAnimationFrame(focusFocusedDay);
       };
       const close = () => {
         popup.classList.remove("is-open");
         input.setAttribute("aria-expanded", "false");
         viewMode = "days";
       };
-      const focusHandler = () => open();
+      const focusHandler = () => {
+        if (skipNextFocusOpen) {
+          skipNextFocusOpen = false;
+          return;
+        }
+        open();
+      };
       const outsideHandler = (e) => {
         if (!wrapper.contains(e.target)) close();
       };
       const escHandler = (e) => {
-        if (e.key === "Escape") close();
+        if (e.key === "Escape" && popup.classList.contains("is-open")) {
+          skipNextFocusOpen = true;
+          close();
+          input.focus();
+        }
       };
       input.addEventListener("focus", focusHandler);
       document.addEventListener("click", outsideHandler, true);
       document.addEventListener("keydown", escHandler);
+      popup.addEventListener("keydown", handleGridKeydown);
       input.setAttribute("aria-haspopup", "dialog");
       input.setAttribute("aria-expanded", "false");
       input.setAttribute("autocomplete", "off");
       cleanup.push(
         () => input.removeEventListener("focus", focusHandler),
         () => document.removeEventListener("click", outsideHandler, true),
-        () => document.removeEventListener("keydown", escHandler)
+        () => document.removeEventListener("keydown", escHandler),
+        () => popup.removeEventListener("keydown", handleGridKeydown)
       );
       this.instances.set(input, { cleanup, open, close, popup });
     },