@acecss/core 0.0.0-stage → 1.0.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kosowwwa LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,79 @@
-# Temporary Holding Version
+# AceCSS
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**Buttons, inputs, dropdowns and a date range picker in one CSS file.** No framework, no build step, ~12 KB gzipped. Dark mode built in. MIT licensed.
+
+**Guide and live demo: https://acecss.dev**
+
+![AceCSS components](https://acecss.dev/og.png)
+
+## Install
+
+```bash
+npm i @acecss/core
+```
+
+```js
+// Vite, Webpack, Next.js, Nuxt… (load it after any CSS reset / Tailwind)
+import '@acecss/core'                 // the stylesheet (dist/ace.css)
+
+// Optional, browser-side behaviour:
+import '@acecss/core/datepicker'      // date picker + pick-up → return range
+import '@acecss/core/select'          // dropdown for <select data-ace-select>
+```
+
+Nuxt: `css: ['@acecss/core']` in `nuxt.config.ts`.
+Plain CSS: `@import '@acecss/core/ace.css';`
+
+### Or straight from a CDN
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@acecss/core@1/dist/ace.min.css">
+<script src="https://cdn.jsdelivr.net/npm/@acecss/core@1/dist/ace-datepicker.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@acecss/core@1/dist/ace-select.min.js" defer></script>
+```
+
+Pinned links with SRI hashes: https://acecss.dev/#install
+
+## Use it
+
+```html
+<button class="ace-btn ace-btn--primary">Save</button>
+<button class="ace-btn ace-btn--secondary">Cancel</button>
+
+<div class="ace-field">
+  <label class="ace-label" for="email">Email</label>
+  <input id="email" type="email" class="ace-input">
+</div>
+
+<select name="plan" class="ace-select" data-ace-select>
+  <option value="basic">Basic</option>
+  <option value="full">Full cover</option>
+</select>
+
+<div class="ace-datepicker" data-ace-daterange
+     data-start-name="pickup_date" data-end-name="return_date" data-min="today"></div>
+
+<span class="ace-badge ace-badge--success">Paid</span>
+```
+
+Every component, with copy-paste code and usage rules: **https://acecss.dev**
+
+- **Dark mode:** add `class="dark"` (or `data-theme="dark"`) to `<html>`, or `class="ace-auto-dark"` to follow the OS.
+- **Re-brand:** override the tokens, e.g. `:root { --ace-primary: #2563eb; --ace-radius: 12px; }`
+- **Button colours:** `ace-btn--blue`, `--green`, `--purple`, `--pink`, `--black`, or any colour with
+  `style="--ace-tone:#FF0022"` on a primary button (or a whole section). Light colour? Add `--ace-tone-fg:#111`.
+  Tailwind: `class="ace-btn ace-btn--primary [--ace-tone:#FF0022]"`
+- **Markup added later** (Vue, React, HTMX): call `AceDatePicker.init(el)` / `AceSelect.init(el)`.
+
+## Files
+
+| File | |
+|---|---|
+| `dist/ace.css`, `dist/ace.min.css` | All components (required) |
+| `dist/ace-datepicker.js`, `.min.js` | Date picker and range picker (optional) |
+| `dist/ace-select.js`, `.min.js` | Dropdown (optional) |
+
+## Credits & license
+
+AceCSS started as the component set of [PRC.rent](https://prc.rent), built by Kosowwwa LLC.
+MIT License © 2026 Kosowwwa LLC. Source: https://gitlab.com/erblin.kosowwwa/acecss

package/dist/ace-datepicker.js

@@ -0,0 +1,518 @@
+/* GENERATED by build.py from the PRC kit — do not edit by hand. */
+/* ═══════════════════════════════════════════════════════════════════
+   ACECSS DATE PICKER — v1.0.4 · MIT License · (c) 2026 Kosowwwa LLC
+   Dependency-free single-date and range picker. Styles live in ace.css (section 8).
+
+   SINGLE DATE
+     <label class="ace-label" for="pickup">Pick-up date</label>
+     <div class="ace-datepicker" data-ace-datepicker
+          data-id="pickup" data-name="pickup_date" data-min="today"></div>
+
+   RANGE (pick-up → return, with times)
+     <div class="ace-datepicker" data-ace-daterange
+          data-start-name="pickup_date" data-end-name="return_date"
+          data-start-time-name="pickup_time" data-end-time-name="return_time"
+          data-min="today"></div>
+
+   Options (data-*):  value | start / end | start-time / end-time
+     min / max (YYYY-MM-DD or "today") · placeholder · locale (BCP 47,
+     default = page language) · disabled · invalid · time="false"
+     start-label / end-label (time labels) · clear-label / close-label
+
+   Values are submitted with the form as hidden inputs in ISO format
+   (YYYY-MM-DD, times HH:MM). Every change fires a `ace:change` event on
+   the .ace-datepicker element; event.detail holds the current values.
+
+   Auto-initialises on DOMContentLoaded. For markup added later (Vue,
+   React, HTMX…) call  AceDatePicker.init(containerElement).
+   ═══════════════════════════════════════════════════════════════════ */
+(function () {
+  'use strict';
+
+  // Server-side rendering (Nuxt, Next.js, …) imports this too: there is
+  // no DOM there, so do nothing and let the browser bundle initialise.
+  if (typeof window === 'undefined' || typeof document === 'undefined') return;
+
+  var SVG = {
+    cal: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>',
+    prev: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>',
+    next: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="9 18 15 12 9 6"/></svg>',
+    down: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>',
+    check: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>',
+    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="10"/><polyline points="12 6 12 12 16 14"/></svg>'
+  };
+
+  /* ── date helpers (local dates, never UTC) ── */
+  function pad(n) { return String(n).padStart(2, '0'); }
+  function toISO(d) { return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); }
+  function parseISO(s) {
+    var m = /^(\d{4})-(\d{2})-(\d{2})/.exec(s || '');
+    return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null;
+  }
+  function isoToDisplay(iso) {
+    var m = /^(\d{4})-(\d{2})-(\d{2})/.exec(iso || '');
+    return m ? m[3] + '/' + m[2] + '/' + m[1] : '';
+  }
+  function resolveBound(v) { return v === 'today' ? toISO(new Date()) : (v || ''); }
+  function esc(s) {
+    return String(s).replace(/[&<>"']/g, function (c) {
+      return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+    });
+  }
+
+  /* 24h HH:MM masking */
+  function maskTime(raw) {
+    var v = raw.replace(/[^\d]/g, '');
+    // A first digit of 3-9 can only be a single-digit hour: "930" → 09:30
+    if (/^[3-9]/.test(v)) v = '0' + v;
+    v = v.slice(0, 4);
+    if (v.length >= 2) { var h = Math.min(parseInt(v.slice(0, 2), 10), 23); v = pad(h) + v.slice(2); }
+    if (v.length >= 4) { var mi = Math.min(parseInt(v.slice(2, 4), 10), 59); v = v.slice(0, 2) + pad(mi); }
+    if (v.length >= 3) v = v.slice(0, 2) + ':' + v.slice(2);
+    return v;
+  }
+  function padTime(raw) {
+    if (!raw) return '';
+    var d = raw.replace(/[^\d]/g, ''), v = raw;
+    if (d.length === 1) v = '0' + d + ':00';
+    else if (d.length === 2) v = d + ':00';
+    else if (d.length === 3) v = '0' + d.slice(0, 1) + ':' + d.slice(1);
+    else if (d.length === 4) v = d.slice(0, 2) + ':' + d.slice(2);
+    return maskTime(v);
+  }
+
+  function weekdays(locale) {
+    var out = [];
+    for (var i = 0; i < 7; i++) {
+      out.push(new Date(2024, 0, 7 + i).toLocaleDateString(locale, { weekday: 'short' }).slice(0, 2));
+    }
+    return out;
+  }
+
+  /* Month grid: Sunday-first, trailing rows trimmed */
+  function monthCells(year, month) {
+    var start = new Date(year, month, 1).getDay();
+    var dim = new Date(year, month + 1, 0).getDate();
+    var cells = [];
+    for (var i = 0; i < 42; i++) {
+      var dt = new Date(year, month, 1 - start + i);
+      cells.push({ date: dt.getDate(), month: dt.getMonth(), year: dt.getFullYear(), iso: toISO(dt), current: dt.getMonth() === month });
+      if (i >= start + dim - 1 && (i + 1) % 7 === 0) break;
+    }
+    return cells;
+  }
+
+  function hidden(el, name, value) {
+    var h = document.createElement('input');
+    h.type = 'hidden';
+    if (name) h.name = name;
+    h.value = value || '';
+    el.appendChild(h);
+    return h;
+  }
+
+  function emit(el, detail) {
+    el.dispatchEvent(new CustomEvent('ace:change', { bubbles: true, detail: detail }));
+  }
+
+  /* Shared calendar header + grid markup */
+  function calendarHTML(st, opts) {
+    var label = new Date(st.viewYear, st.viewMonth, 1).toLocaleDateString(st.locale, { month: 'long', year: 'numeric' });
+    var html = '';
+    if (opts.yearPicker) {
+      var monthName = new Date(st.viewYear, st.viewMonth, 1).toLocaleDateString(st.locale, { month: 'long' });
+      html += '<div class="ace-dp-head"><span class="ace-dp-title">' + esc(monthName) + '</span>' +
+        '<div class="ace-dp-year"><button type="button" class="ace-btn ace-btn--secondary ace-dp-yearbtn" data-act="years" aria-haspopup="listbox" aria-expanded="' + !!st.yearsOpen + '">' +
+        st.viewYear + SVG.down + '</button>';
+      if (st.yearsOpen) {
+        html += '<div class="ace-dp-years" role="listbox">';
+        for (var y = st.minYear; y <= st.maxYear; y++) {
+          var on = y === st.viewYear;
+          html += '<button type="button" role="option" data-year="' + y + '" aria-selected="' + on + '">' +
+            (on ? SVG.check : '<span class="ace-dp-check"></span>') + y + '</button>';
+        }
+        html += '</div>';
+      }
+      html += '</div></div>';
+    }
+    html += '<div class="ace-dp-nav">' +
+      '<button type="button" class="ace-btn ace-btn--secondary ace-btn--icon ace-dp-navbtn" data-act="prev" aria-label="Previous month">' + SVG.prev + '</button>' +
+      '<span class="ace-dp-month" aria-live="polite">' + esc(label) + '</span>' +
+      '<button type="button" class="ace-btn ace-btn--secondary ace-btn--icon ace-dp-navbtn" data-act="next" aria-label="Next month">' + SVG.next + '</button></div>';
+    html += '<div class="ace-dp-weekdays">' + weekdays(st.locale).map(function (w) { return '<div>' + esc(w) + '</div>'; }).join('') + '</div>';
+    html += '<div class="ace-dp-grid" role="grid">' + opts.cells.map(opts.cellHTML).join('') + '</div>';
+    return html;
+  }
+
+  function dayHTML(c, attrs, cellAttrs) {
+    var full = parseISO(c.iso).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' });
+    return '<div class="ace-dp-cell"' + (cellAttrs || '') + '><button type="button" class="ace-dp-day" data-iso="' + c.iso + '"' +
+      ' aria-label="' + esc(full) + '"' + attrs + '>' + c.date + '</button></div>';
+  }
+
+  function stepMonth(st, delta) {
+    var d = new Date(st.viewYear, st.viewMonth + delta, 1);
+    st.viewYear = d.getFullYear();
+    st.viewMonth = d.getMonth();
+  }
+
+  /* ════════════════════════ single date ════════════════════════ */
+  function initSingle(el) {
+    var ds = el.dataset;
+    var today = toISO(new Date());
+    var st = {
+      value: ds.value || '',
+      min: resolveBound(ds.min), max: resolveBound(ds.max),
+      locale: ds.locale || document.documentElement.lang || undefined,
+      open: false, yearsOpen: false
+    };
+    var cur = new Date().getFullYear();
+    st.minYear = st.min ? +st.min.slice(0, 4) : cur - 20;
+    st.maxYear = st.max ? +st.max.slice(0, 4) : cur + 10;
+
+    el.innerHTML = '';
+    var field = document.createElement('div');
+    field.className = 'ace-input-group ace-date-field' + (ds.invalid != null ? ' is-invalid' : '') + (ds.disabled != null ? ' is-disabled' : '');
+    field.innerHTML = '<input type="text" inputmode="numeric" autocomplete="off"' +
+      (ds.id ? ' id="' + esc(ds.id) + '"' : '') +
+      ' placeholder="' + esc(ds.placeholder || 'DD/MM/YYYY') + '"' +
+      (ds.invalid != null ? ' aria-invalid="true"' : '') +
+      (ds.disabled != null ? ' disabled' : '') + '>' +
+      '<button type="button" class="ace-date-toggle" aria-label="Choose date" aria-haspopup="dialog" aria-expanded="false"' +
+      (ds.disabled != null ? ' disabled' : '') + '>' + SVG.cal + '</button>';
+    el.appendChild(field);
+    var input = field.querySelector('input');
+    var toggleBtn = field.querySelector('.ace-date-toggle');
+    var out = hidden(el, ds.name, st.value);
+    input.value = isoToDisplay(st.value);
+    var pop = null;
+
+    function setValue(iso, silent) {
+      st.value = iso || '';
+      out.value = st.value;
+      input.value = isoToDisplay(st.value);
+      if (!silent) {
+        emit(el, { value: st.value });
+        out.dispatchEvent(new Event('change', { bubbles: true }));
+      }
+    }
+
+    function commitTyped() {
+      var s = input.value.trim();
+      if (!s) { if (st.value) setValue(''); return; }
+      var m = /^(\d{1,2})[./-](\d{1,2})[./-](\d{4})$/.exec(s) || /^(\d{4})-(\d{1,2})-(\d{1,2})$/.exec(s);
+      if (!m) { input.value = isoToDisplay(st.value); return; }
+      var y, mo, d;
+      if (m[1].length === 4) { y = +m[1]; mo = +m[2]; d = +m[3]; } else { d = +m[1]; mo = +m[2]; y = +m[3]; }
+      var dt = new Date(y, mo - 1, d);
+      if (mo < 1 || mo > 12 || dt.getDate() !== d) { input.value = isoToDisplay(st.value); return; }
+      var iso = toISO(dt);
+      if ((st.min && iso < st.min) || (st.max && iso > st.max)) { input.value = isoToDisplay(st.value); return; }
+      if (iso !== st.value) setValue(iso); else input.value = isoToDisplay(iso);
+    }
+
+    function render() {
+      if (!pop) return;
+      var cells = monthCells(st.viewYear, st.viewMonth);
+      pop.innerHTML = calendarHTML(st, {
+        yearPicker: true,
+        cells: cells,
+        cellHTML: function (c) {
+          var dis = (st.min && c.iso < st.min) || (st.max && c.iso > st.max);
+          var sel = c.iso === st.value;
+          return dayHTML(c,
+            (sel ? ' data-selected aria-pressed="true"' : ' aria-pressed="false"') +
+            (c.iso === today ? ' data-today aria-current="date"' : '') +
+            (!c.current ? ' data-outside' : '') +
+            (dis ? ' disabled' : ''));
+        }
+      });
+    }
+
+    function position() {
+      if (!pop) return;
+      var r = field.getBoundingClientRect();
+      var w = pop.offsetWidth, h = pop.offsetHeight;
+      var top = r.bottom + 8;
+      if (top + h > window.innerHeight - 8) top = Math.max(8, r.top - h - 8);
+      var left = r.left;
+      if (left + w > window.innerWidth - 8) left = Math.max(8, window.innerWidth - w - 8);
+      pop.style.top = top + 'px';
+      pop.style.left = left + 'px';
+    }
+
+    function open() {
+      if (st.open || ds.disabled != null) return;
+      var d = parseISO(st.value) || new Date();
+      st.viewYear = d.getFullYear(); st.viewMonth = d.getMonth();
+      st.open = true; st.yearsOpen = false;
+      pop = document.createElement('div');
+      pop.className = 'ace-dp';
+      pop.setAttribute('role', 'dialog');
+      pop.setAttribute('aria-label', 'Choose date');
+      document.body.appendChild(pop);
+      render();
+      position();
+      toggleBtn.setAttribute('aria-expanded', 'true');
+      var focusEl = pop.querySelector('.ace-dp-day[data-selected]') || pop.querySelector('.ace-dp-day[data-today]');
+      if (focusEl && !focusEl.disabled) focusEl.focus({ preventScroll: true });
+      pop.addEventListener('click', onPopClick);
+      pop.addEventListener('keydown', onKey);
+      document.addEventListener('mousedown', onDocDown);
+      window.addEventListener('scroll', position, true);
+      window.addEventListener('resize', position);
+    }
+    function close(refocus) {
+      if (!st.open) return;
+      st.open = false;
+      pop.remove(); pop = null;
+      toggleBtn.setAttribute('aria-expanded', 'false');
+      document.removeEventListener('mousedown', onDocDown);
+      window.removeEventListener('scroll', position, true);
+      window.removeEventListener('resize', position);
+      if (refocus) toggleBtn.focus();
+    }
+    function onPopClick(e) {
+      var t = e.target.closest('button');
+      if (!t) return;
+      if (t.dataset.act === 'prev' || t.dataset.act === 'next') {
+        stepMonth(st, t.dataset.act === 'prev' ? -1 : 1); render();
+        pop.querySelector('[data-act="' + t.dataset.act + '"]').focus();
+      }
+      else if (t.dataset.act === 'years') {
+        st.yearsOpen = !st.yearsOpen; render();
+        var sel = pop.querySelector('.ace-dp-years [aria-selected="true"]');
+        if (sel) sel.scrollIntoView({ block: 'center' });
+      }
+      else if (t.dataset.year) { st.viewYear = +t.dataset.year; st.yearsOpen = false; render(); }
+      else if (t.dataset.iso && !t.disabled) { setValue(t.dataset.iso); close(true); }
+    }
+    function onKey(e) { if (e.key === 'Escape') { e.preventDefault(); close(true); } }
+    function onDocDown(e) { if (!el.contains(e.target) && pop && !pop.contains(e.target)) close(false); }
+
+    toggleBtn.addEventListener('click', function () { st.open ? close(false) : open(); });
+    input.addEventListener('blur', commitTyped);
+    input.addEventListener('keydown', function (e) {
+      if (e.key === 'Enter') { e.preventDefault(); commitTyped(); }
+      if (e.key === 'ArrowDown' && e.altKey) { e.preventDefault(); open(); }
+    });
+
+    el.aceDatepicker = {
+      getValue: function () { return st.value; },
+      setValue: function (iso) { setValue(iso, true); },
+      open: open, close: close
+    };
+  }
+
+  /* ════════════════════════ date range ════════════════════════ */
+  function initRange(el) {
+    var ds = el.dataset;
+    var today = toISO(new Date());
+    var withTime = ds.time !== 'false';
+    var st = {
+      start: ds.start || '', end: ds.end || '',
+      startTime: ds.startTime || '', endTime: ds.endTime || '',
+      min: resolveBound(ds.min), max: resolveBound(ds.max),
+      locale: ds.locale || document.documentElement.lang || undefined,
+      hover: '', open: false
+    };
+
+    el.innerHTML = '';
+    var trigger = document.createElement('button');
+    trigger.type = 'button';
+    trigger.className = 'ace-input-group ace-date-trigger' + (ds.invalid != null ? ' is-invalid' : '');
+    if (ds.id) trigger.id = ds.id;
+    if (ds.invalid != null) trigger.setAttribute('aria-invalid', 'true');
+    if (ds.disabled != null) trigger.disabled = true;
+    trigger.setAttribute('aria-haspopup', 'dialog');
+    trigger.setAttribute('aria-expanded', 'false');
+    el.appendChild(trigger);
+    var outStart = hidden(el, ds.startName, st.start);
+    var outEnd = hidden(el, ds.endName, st.end);
+    var outST = withTime ? hidden(el, ds.startTimeName, st.startTime) : null;
+    var outET = withTime ? hidden(el, ds.endTimeName, st.endTime) : null;
+    var pop = null, backdrop = null;
+
+    function triggerLabel() {
+      var s = parseISO(st.start), e = parseISO(st.end);
+      var short = { day: 'numeric', month: 'short' }, full = { day: 'numeric', month: 'short', year: 'numeric' };
+      var txt = '';
+      if (s && e) txt = s.toLocaleDateString(st.locale, short) + (st.startTime ? ' ' + st.startTime : '') +
+        ' → ' + e.toLocaleDateString(st.locale, full) + (st.endTime ? ' ' + st.endTime : '');
+      else if (s) txt = s.toLocaleDateString(st.locale, full) + (st.startTime ? ' ' + st.startTime : '');
+      return txt;
+    }
+    function paintTrigger() {
+      var txt = triggerLabel();
+      trigger.innerHTML = SVG.cal + '<span class="ace-date-label' + (txt ? '' : ' is-empty') + '">' +
+        esc(txt || ds.placeholder || 'Pick-up → return') + '</span>';
+    }
+    function sync() {
+      outStart.value = st.start; outEnd.value = st.end;
+      if (outST) outST.value = st.startTime;
+      if (outET) outET.value = st.endTime;
+      paintTrigger();
+      emit(el, { start: st.start, end: st.end, startTime: st.startTime, endTime: st.endTime });
+      outEnd.dispatchEvent(new Event('change', { bubbles: true }));
+    }
+
+    function previewEnd() {
+      var h = st.hover;
+      if (!st.start || st.end || !h || h <= st.start) return '';
+      if ((st.min && h < st.min) || (st.max && h > st.max)) return '';
+      return h;
+    }
+
+    function renderGrid() {
+      var pe = previewEnd();
+      var cells = monthCells(st.viewYear, st.viewMonth);
+      var html = calendarHTML(st, {
+        yearPicker: false,
+        cells: cells,
+        cellHTML: function (c) {
+          var iso = c.iso;
+          var isStart = !!st.start && iso === st.start;
+          var isEnd = !!st.end && iso === st.end;
+          var inRange = !!st.start && !!st.end && iso >= st.start && iso <= st.end;
+          var inPreview = !!pe && iso >= st.start && iso <= pe;
+          var band = inRange ? 'range' : inPreview ? 'preview' : '';
+          var bStart = iso === st.start;
+          var bEnd = inRange ? isEnd : iso === pe;
+          var edge = !band ? '' : bStart && bEnd ? 'both' : bStart ? 'start' : bEnd ? 'end' : '';
+          var dis = (st.min && iso < st.min) || (st.max && iso > st.max);
+          return dayHTML(c,
+            (isStart || isEnd ? ' data-selected' : '') +
+            (band === 'range' && !isStart && !isEnd ? ' data-in-range' : '') +
+            (pe && iso === pe && pe !== st.start ? ' data-preview-end' : '') +
+            (iso === today ? ' data-today aria-current="date"' : '') +
+            (!c.current ? ' data-outside' : '') +
+            ' aria-pressed="' + (isStart || isEnd || band === 'range') + '"' +
+            (dis ? ' disabled' : ''),
+            (band ? ' data-band="' + band + '"' : '') + (edge ? ' data-band-edge="' + edge + '"' : ''));
+        }
+      });
+      pop.querySelector('.ace-dp-cal').innerHTML = html;
+    }
+
+    function timeField(which, label) {
+      var id = 'ace-dp-' + which + '-' + Math.random().toString(36).slice(2, 8);
+      return '<div><label for="' + id + '">' + esc(label) + '</label>' +
+        '<div class="ace-input-group">' + SVG.clock +
+        '<input id="' + id + '" type="text" inputmode="numeric" placeholder="00:00" maxlength="5" data-time="' + which + '" value="' +
+        esc(which === 'start' ? st.startTime : st.endTime) + '"></div></div>';
+    }
+
+    function open() {
+      if (st.open || trigger.disabled) return;
+      var d = parseISO(st.start) || new Date();
+      st.viewYear = d.getFullYear(); st.viewMonth = d.getMonth();
+      st.open = true; st.hover = '';
+      backdrop = document.createElement('div');
+      backdrop.className = 'ace-dp-backdrop';
+      pop = document.createElement('div');
+      pop.className = 'ace-dp ace-dp--range';
+      pop.setAttribute('role', 'dialog');
+      pop.setAttribute('aria-modal', 'true');
+      pop.setAttribute('aria-label', 'Choose pick-up and return dates');
+      pop.innerHTML = '<div class="ace-dp-cal"></div><div class="ace-dp-foot">' +
+        (withTime ? '<div class="ace-dp-times">' + timeField('start', ds.startLabel || 'Pick-up time') + timeField('end', ds.endLabel || 'Return time') + '</div>' : '') +
+        '<div class="ace-dp-actions"><button type="button" class="ace-btn ace-btn--secondary ace-btn--sm" data-act="clear">' + esc(ds.clearLabel || 'Clear') + '</button>' +
+        '<button type="button" class="ace-btn ace-btn--primary ace-btn--sm" data-act="close">' + esc(ds.closeLabel || 'Close') + '</button></div></div>';
+      document.body.appendChild(backdrop);
+      document.body.appendChild(pop);
+      renderGrid();
+      trigger.setAttribute('aria-expanded', 'true');
+      var f = pop.querySelector('.ace-dp-day[data-selected]') || pop.querySelector('.ace-dp-day[data-today]') || pop.querySelector('.ace-dp-navbtn');
+      if (f && !f.disabled) f.focus({ preventScroll: true });
+      backdrop.addEventListener('click', function () { close(true); });
+      pop.addEventListener('click', onPopClick);
+      pop.addEventListener('keydown', onKey);
+      pop.addEventListener('mouseover', onHover);
+      pop.addEventListener('mouseleave', function () { if (st.hover) { st.hover = ''; renderGrid(); } });
+      pop.addEventListener('input', onTimeInput);
+      pop.addEventListener('focusout', onTimeBlur);
+    }
+    function close(refocus) {
+      if (!st.open) return;
+      st.open = false;
+      pop.remove(); backdrop.remove(); pop = backdrop = null;
+      trigger.setAttribute('aria-expanded', 'false');
+      if (refocus) trigger.focus();
+    }
+    function onPopClick(e) {
+      var t = e.target.closest('button');
+      if (!t) return;
+      if (t.dataset.act === 'prev' || t.dataset.act === 'next') {
+        stepMonth(st, t.dataset.act === 'prev' ? -1 : 1); renderGrid();
+        pop.querySelector('[data-act="' + t.dataset.act + '"]').focus();
+      }
+      else if (t.dataset.act === 'close') close(true);
+      else if (t.dataset.act === 'clear') {
+        st.start = st.end = ''; st.hover = '';
+        renderGrid(); sync();
+      }
+      else if (t.dataset.iso && !t.disabled) {
+        var iso = t.dataset.iso;
+        // No start yet, or a full range already → start a new range.
+        // Clicking before the start moves the start instead.
+        if (!st.start || st.end || iso < st.start) { st.start = iso; st.end = ''; }
+        else st.end = iso;
+        renderGrid(); sync();
+        var again = pop.querySelector('.ace-dp-day[data-iso="' + iso + '"]');
+        if (again) again.focus({ preventScroll: true });
+      }
+    }
+    function onHover(e) {
+      var t = e.target.closest('.ace-dp-day');
+      var iso = t && !t.disabled ? t.dataset.iso : '';
+      if (iso && iso !== st.hover && st.start && !st.end) { st.hover = iso; renderGrid(); }
+    }
+    function onKey(e) {
+      if (e.key === 'Escape') { e.preventDefault(); close(true); return; }
+      if (e.key === 'Tab') { // keep focus inside the modal
+        var f = pop.querySelectorAll('button:not(:disabled), input');
+        var first = f[0], last = f[f.length - 1];
+        if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
+        else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
+      }
+    }
+    function onTimeInput(e) {
+      var w = e.target.dataset && e.target.dataset.time;
+      if (!w) return;
+      e.target.value = maskTime(e.target.value);
+    }
+    function onTimeBlur(e) {
+      var w = e.target.dataset && e.target.dataset.time;
+      if (!w) return;
+      var v = padTime(e.target.value);
+      e.target.value = v;
+      if (w === 'start') st.startTime = v; else st.endTime = v;
+      sync();
+    }
+
+    trigger.addEventListener('click', open);
+    paintTrigger();
+
+    el.aceDatepicker = {
+      getValue: function () { return { start: st.start, end: st.end, startTime: st.startTime, endTime: st.endTime }; },
+      setValue: function (v) {
+        ['start', 'end', 'startTime', 'endTime'].forEach(function (k) { if (v && k in v) st[k] = v[k] || ''; });
+        outStart.value = st.start; outEnd.value = st.end;
+        if (outST) outST.value = st.startTime;
+        if (outET) outET.value = st.endTime;
+        paintTrigger();
+      },
+      open: open, close: close
+    };
+  }
+
+  function init(root) {
+    root = root || document;
+    root.querySelectorAll('[data-ace-datepicker]').forEach(function (el) { if (!el.aceDatepicker) initSingle(el); });
+    root.querySelectorAll('[data-ace-daterange]').forEach(function (el) { if (!el.aceDatepicker) initRange(el); });
+  }
+
+  window.AceDatePicker = { init: init };
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', function () { init(); });
+  else init();
+})();