HEL-373: 主题化 combobox 覆盖夜间下拉全状态，日期面板支持年月直选

原生 select 弹层无法可靠套黑金 token，改为可访问 listbox；日期标题增加年份/月份下拉，越月不提交非法日。 Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
2026-09-02 11:07:16 +08:00
parent 1061f125a8
commit 6eccbe9765
12 changed files with 1150 additions and 28 deletions
@@ -11,7 +11,7 @@
        document.documentElement.classList.add("v-fusion");
      })();
    </script>
-    <link rel="stylesheet" href="design-system.css?v=13" />
+    <link rel="stylesheet" href="design-system.css?v=14" />
  </head>
  <body class="is-app" data-portal="admin">
    <a class="skip-link" href="#main-content">跳到主要内容</a>
@@ -1255,7 +1255,8 @@
    </div>
    <div class="toast-region" id="toastRegion" aria-live="polite"></div>
    <script src="theme.js?v=1"></script>
-    <script src="datepicker.js?v=1"></script>
+    <script src="select.js?v=1"></script>
+    <script src="datepicker.js?v=2"></script>
    <script src="app.js?v=18"></script>
  </body>
 </html>
@@ -11,7 +11,7 @@
        document.documentElement.classList.add("v-fusion");
      })();
    </script>
-    <link rel="stylesheet" href="design-system.css?v=13" />
+    <link rel="stylesheet" href="design-system.css?v=14" />
  </head>
  <body class="is-app" data-portal="company">
    <a class="skip-link" href="#main-content">跳到主要内容</a>
@@ -1044,7 +1044,8 @@

    <div class="toast-region" id="toastRegion" aria-live="polite"></div>
    <script src="theme.js?v=1"></script>
-    <script src="datepicker.js?v=1"></script>
+    <script src="select.js?v=1"></script>
+    <script src="datepicker.js?v=2"></script>
    <script src="app.js?v=18"></script>
  </body>
 </html>
@@ -4,10 +4,14 @@
  var panel = null;
  var grid = null;
  var titleEl = null;
+  var yearSelect = null;
+  var monthSelect = null;
  var activeInput = null;
  var viewYear = 0;
  var viewMonth = 0;
  var bound = false;
+  var YEAR_PAD = 80;
+  var YEAR_AHEAD = 20;

  function pad(n) {
    return n < 10 ? "0" + n : String(n);
@@ -46,7 +50,10 @@
    panel.innerHTML =
      '<div class="ds-dp-head">' +
        '<button type="button" class="ds-dp-nav" data-dp-nav="-1" aria-label="上一月">‹</button>' +
-        '<div class="ds-dp-title"></div>' +
+        '<div class="ds-dp-title">' +
+          '<select class="select ds-dp-ym" data-dp-year aria-label="年份"></select>' +
+          '<select class="select ds-dp-ym" data-dp-month aria-label="月份"></select>' +
+        "</div>" +
        '<button type="button" class="ds-dp-nav" data-dp-nav="1" aria-label="下一月">›</button>' +
      "</div>" +
      '<div class="ds-dp-week">' + WEEK.map(function (d) { return "<span>" + d + "</span>"; }).join("") + "</div>" +
@@ -57,11 +64,27 @@
      "</div>";
    document.body.appendChild(panel);
    titleEl = panel.querySelector(".ds-dp-title");
+    yearSelect = panel.querySelector("[data-dp-year]");
+    monthSelect = panel.querySelector("[data-dp-month]");
    grid = panel.querySelector(".ds-dp-grid");
+    yearSelect.addEventListener("change", function () {
+      var next = Number(yearSelect.value);
+      if (!next) return;
+      viewYear = next;
+      render();
+    });
+    monthSelect.addEventListener("change", function () {
+      var next = Number(monthSelect.value);
+      if (Number.isNaN(next)) return;
+      viewMonth = next;
+      render();
+    });
    panel.addEventListener("mousedown", function (event) {
+      if (event.target.closest(".ds-combo, select, input, textarea")) return;
      event.preventDefault();
    });
    panel.addEventListener("click", function (event) {
+      if (event.target.closest(".ds-combo, .ds-listbox, select")) return;
      var nav = event.target.closest("[data-dp-nav]");
      if (nav) {
        shiftMonth(Number(nav.getAttribute("data-dp-nav")));
@@ -105,9 +128,75 @@
    document.querySelectorAll('input[type="date"]').forEach(enhance);
  }

+  function boundYears() {
+    var now = new Date().getFullYear();
+    var minY = now - YEAR_PAD;
+    var maxY = now + YEAR_AHEAD;
+    var hasMin = false;
+    var hasMax = false;
+    if (activeInput && activeInput.min) {
+      var minDate = parseISO(activeInput.min);
+      if (minDate) {
+        minY = minDate.getFullYear();
+        hasMin = true;
+      }
+    }
+    if (activeInput && activeInput.max) {
+      var maxDate = parseISO(activeInput.max);
+      if (maxDate) {
+        maxY = maxDate.getFullYear();
+        hasMax = true;
+      }
+    }
+    if (!hasMin && viewYear < minY) minY = viewYear;
+    if (!hasMax && viewYear > maxY) maxY = viewYear;
+    if (hasMin && viewYear < minY) minY = viewYear;
+    if (hasMax && viewYear > maxY) maxY = viewYear;
+    return { minY: minY, maxY: maxY };
+  }
+
+  function lastDayOfMonth(year, month) {
+    return new Date(year, month + 1, 0).getDate();
+  }
+
+  function monthHasValidDay(year, month) {
+    var min = activeInput && activeInput.min ? activeInput.min : "";
+    var max = activeInput && activeInput.max ? activeInput.max : "";
+    var start = toISO(year, month, 1);
+    var end = toISO(year, month, lastDayOfMonth(year, month));
+    if (min && end < min) return false;
+    if (max && start > max) return false;
+    return true;
+  }
+
+  function syncYearMonthSelects() {
+    if (!yearSelect || !monthSelect) return;
+    var years = boundYears();
+    var yearHtml = "";
+    for (var year = years.minY; year <= years.maxY; year += 1) {
+      yearHtml += '<option value="' + year + '"' + (year === viewYear ? " selected" : "") + ">" + year + "年</option>";
+    }
+    yearSelect.innerHTML = yearHtml;
+    yearSelect.value = String(viewYear);
+    var monthHtml = "";
+    for (var month = 0; month < 12; month += 1) {
+      var disabled = !monthHasValidDay(viewYear, month);
+      monthHtml +=
+        '<option value="' + month + '"' +
+        (month === viewMonth ? " selected" : "") +
+        (disabled ? " disabled" : "") +
+        ">" + pad(month + 1) + "月</option>";
+    }
+    monthSelect.innerHTML = monthHtml;
+    monthSelect.value = String(viewMonth);
+    if (global.JinniuSelect && typeof global.JinniuSelect.scan === "function") {
+      global.JinniuSelect.scan(panel);
+    }
+  }
+
  function render() {
    if (!grid || !titleEl) return;
-    titleEl.textContent = viewYear + "年" + pad(viewMonth + 1) + "月";
+    syncYearMonthSelects();
    var first = new Date(viewYear, viewMonth, 1);
    var start = first.getDay();
    var selected = activeInput ? parseISO(activeInput.value) : null;
@@ -186,6 +275,9 @@

  function closePicker() {
    if (!panel || panel.hidden) return;
+    if (global.JinniuSelect && typeof global.JinniuSelect.close === "function") {
+      global.JinniuSelect.close();
+    }
    panel.hidden = true;
    if (activeInput) activeInput.setAttribute("aria-expanded", "false");
    activeInput = null;
@@ -221,7 +313,14 @@
      openPicker(input);
      return;
    }
-    if (panel && !panel.hidden && !panel.contains(event.target)) closePicker();
+    if (
+      panel &&
+      !panel.hidden &&
+      !panel.contains(event.target) &&
+      !(event.target.closest && event.target.closest(".ds-listbox"))
+    ) {
+      closePicker();
+    }
  }

  function onKey(event) {
@@ -1793,11 +1793,23 @@ html[data-theme="night"] .ds-datepicker {
  margin-bottom: 10px;
 }
 .ds-dp-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
  font-size: 13.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
 }
-html[data-theme="night"] .ds-dp-title { color: var(--gold); }
+.ds-dp-ym {
+  min-height: 26px;
+  padding: 2px 8px;
+  font-size: 12.5px;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+}
 .ds-dp-nav {
  width: 28px;
  height: 28px;
@@ -1875,6 +1887,167 @@ html[data-theme="night"] .ds-dp-day.is-selected {
 }
 .ds-dp-foot button:hover { background: var(--hover); color: var(--text); }

+/* ─── 主题化 combobox（替代原生 select 弹层） ───────────────── */
+.ds-combo {
+  position: relative;
+  display: inline-grid;
+  vertical-align: top;
+  max-width: 100%;
+  min-width: 0;
+}
+.field > .ds-combo {
+  display: grid;
+  width: 100%;
+}
+.ds-combo-native {
+  grid-area: 1 / 1;
+  opacity: 0;
+  pointer-events: none;
+  min-width: 0;
+}
+.ds-combo-trigger {
+  grid-area: 1 / 1;
+  position: relative;
+  appearance: none;
+  -webkit-appearance: none;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+  min-width: 0;
+  min-height: 34px;
+  margin: 0;
+  padding: 7px 28px 7px 11px;
+  border: 1px solid var(--hairline);
+  border-radius: 9px;
+  background: var(--fill);
+  color: var(--fg);
+  font: inherit;
+  font-size: 13.5px;
+  line-height: 1.3;
+  text-align: left;
+  cursor: pointer;
+  color-scheme: inherit;
+}
+.ds-combo-trigger::after {
+  content: "";
+  position: absolute;
+  right: 11px;
+  top: 50%;
+  width: 0;
+  height: 0;
+  margin-top: -2px;
+  border: 4px solid transparent;
+  border-top-color: var(--text-3);
+  pointer-events: none;
+}
+.ds-combo-trigger.is-placeholder {
+  color: var(--text-3);
+}
+.ds-combo.is-open .ds-combo-trigger {
+  border-color: var(--focus-ring);
+  box-shadow: 0 0 0 3px var(--focus-glow);
+}
+.ds-combo-trigger:focus {
+  outline: none;
+  border-color: var(--focus-ring);
+  box-shadow: 0 0 0 3px var(--focus-glow);
+}
+.ds-combo-trigger:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+.ds-combo.is-disabled .ds-combo-trigger,
+.ds-combo-trigger:disabled {
+  color: var(--text-3);
+  background: var(--fill);
+  opacity: 0.72;
+  cursor: not-allowed;
+}
+.ds-combo--compact .ds-combo-trigger {
+  min-height: 26px;
+  padding: 2px 22px 2px 8px;
+  font-size: 12.5px;
+  font-weight: 650;
+  font-variant-numeric: tabular-nums;
+}
+html[data-theme="night"] .ds-combo.is-open .ds-combo-trigger,
+html[data-theme="night"] .ds-combo-trigger:focus {
+  border-color: var(--gold-line);
+}
+html[data-theme="night"] .ds-combo.is-open .ds-combo-trigger::after,
+html[data-theme="night"] .ds-combo-trigger:focus::after {
+  border-top-color: var(--gold);
+}
+
+.ds-listbox {
+  position: fixed;
+  z-index: var(--z-tooltip);
+  max-height: min(280px, 50vh);
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 4px;
+  background: var(--surface);
+  color: var(--text);
+  border: 1px solid var(--hairline);
+  border-radius: 9px;
+  box-shadow: var(--shadow-modal);
+}
+html[data-theme="night"] .ds-listbox {
+  background: var(--surface);
+  border-color: var(--gold-line);
+}
+.ds-listbox[hidden] { display: none !important; }
+.ds-listbox-option {
+  display: block;
+  width: 100%;
+  padding: 7px 10px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 13.5px;
+  text-align: left;
+  cursor: pointer;
+}
+.ds-listbox-option.is-placeholder {
+  color: var(--text-3);
+}
+.ds-listbox-option:hover,
+.ds-listbox-option.is-active {
+  background: var(--hover);
+}
+.ds-listbox-option.is-selected,
+.ds-listbox-option[aria-selected="true"] {
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 650;
+}
+html[data-theme="night"] .ds-listbox-option.is-selected,
+html[data-theme="night"] .ds-listbox-option[aria-selected="true"] {
+  background: var(--gold-soft);
+  color: var(--gold);
+}
+html[data-theme="night"] .ds-listbox-option.is-active {
+  box-shadow: inset 0 0 0 1px var(--gold-line);
+}
+.ds-listbox-option.is-disabled,
+.ds-listbox-option[aria-disabled="true"] {
+  color: var(--text-3);
+  opacity: 0.45;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-combo-trigger,
+  .ds-listbox-option {
+    transition: none;
+  }
+}
+
 /* ─── 一次性初始密码领取 ─────────────────────────────────────── */
 .cred-box {
  display: grid;
@@ -10,7 +10,7 @@
      document.documentElement.classList.add("v-fusion");
    })();
  </script>
-  <link rel="stylesheet" href="design-system.css?v=13" />
+  <link rel="stylesheet" href="design-system.css?v=14" />
 </head>
 <body class="login-page">
  <div class="portal-wrap">
@@ -10,7 +10,7 @@
      document.documentElement.classList.add("v-fusion");
    })();
  </script>
-  <link rel="stylesheet" href="design-system.css?v=13" />
+  <link rel="stylesheet" href="design-system.css?v=14" />
 </head>
 <body class="login-page" data-role="admin">
  <div class="login-wrap">
@@ -10,7 +10,7 @@
      document.documentElement.classList.add("v-fusion");
    })();
  </script>
-  <link rel="stylesheet" href="design-system.css?v=13" />
+  <link rel="stylesheet" href="design-system.css?v=14" />
 </head>
 <body class="login-page" data-role="company">
  <div class="login-wrap">
@@ -0,0 +1,399 @@
+/* 主题化 combobox：替代原生 select 弹层，日夜均走设计 token。保留原生字段提交。 */
+(function (global) {
+  var listbox = null;
+  var active = null;
+  var activeIndex = -1;
+  var bound = false;
+  var patched = false;
+  var opening = false;
+
+  function optionList(select) {
+    return Array.prototype.slice.call(select.options);
+  }
+
+  function selectedOption(select) {
+    return select.options[select.selectedIndex] || null;
+  }
+
+  function isPlaceholder(option) {
+    if (!option) return true;
+    return option.value === "" || option.hasAttribute("data-placeholder");
+  }
+
+  function triggerLabel(select) {
+    var option = selectedOption(select);
+    if (!option) return "请选择";
+    return option.textContent || "请选择";
+  }
+
+  function ensureListbox() {
+    if (listbox) return;
+    listbox = document.createElement("div");
+    listbox.id = "ds-listbox";
+    listbox.className = "ds-listbox";
+    listbox.hidden = true;
+    listbox.setAttribute("role", "listbox");
+    listbox.setAttribute("tabindex", "-1");
+    document.body.appendChild(listbox);
+    listbox.addEventListener("mousedown", function (event) {
+      event.preventDefault();
+    });
+    listbox.addEventListener("click", function (event) {
+      var item = event.target.closest("[data-opt-index]");
+      if (!item || item.getAttribute("aria-disabled") === "true") return;
+      commit(Number(item.getAttribute("data-opt-index")));
+    });
+  }
+
+  function escapeId(id) {
+    if (global.CSS && typeof CSS.escape === "function") return CSS.escape(id);
+    return String(id).replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+  }
+
+  function findLabel(select) {
+    if (select.id) {
+      var byFor = document.querySelector('label[for="' + escapeId(select.id) + '"]');
+      if (byFor) return byFor;
+    }
+    return select.closest("label");
+  }
+
+  function labelText(select) {
+    var label = findLabel(select);
+    if (label) return (label.textContent || "").replace(/\s+/g, " ").trim();
+    if (select.getAttribute("aria-label")) return select.getAttribute("aria-label");
+    return "";
+  }
+
+  function syncTrigger(select) {
+    var wrap = select.closest(".ds-combo");
+    if (!wrap) return;
+    var btn = wrap.querySelector(".ds-combo-trigger");
+    if (!btn) return;
+    var option = selectedOption(select);
+    btn.textContent = triggerLabel(select);
+    btn.classList.toggle("is-placeholder", isPlaceholder(option));
+    wrap.classList.toggle("is-disabled", select.disabled);
+    btn.disabled = select.disabled;
+    if (select.disabled) btn.setAttribute("aria-disabled", "true");
+    else btn.removeAttribute("aria-disabled");
+  }
+
+  function enhance(select) {
+    if (!select || select.dataset.dsCombo === "1") return;
+    if (select.multiple || Number(select.size) > 1) return;
+    select.dataset.dsCombo = "1";
+    var wrap = document.createElement("div");
+    wrap.className = "ds-combo";
+    if (select.classList.contains("ds-dp-ym")) wrap.classList.add("ds-combo--compact");
+    select.parentNode.insertBefore(wrap, select);
+    wrap.appendChild(select);
+    select.classList.add("ds-combo-native");
+    select.tabIndex = -1;
+    select.setAttribute("aria-hidden", "true");
+
+    var btn = document.createElement("button");
+    btn.type = "button";
+    btn.className = "ds-combo-trigger";
+    btn.setAttribute("role", "combobox");
+    btn.setAttribute("aria-haspopup", "listbox");
+    btn.setAttribute("aria-expanded", "false");
+    btn.setAttribute("aria-controls", "ds-listbox");
+    var name = labelText(select);
+    if (name) btn.setAttribute("aria-label", name);
+    wrap.appendChild(btn);
+    syncTrigger(select);
+
+    select.addEventListener("focus", function () {
+      if (!opening) btn.focus({ preventScroll: true });
+    });
+    select.addEventListener("invalid", function () {
+      btn.focus({ preventScroll: true });
+    });
+    select.addEventListener("change", function () {
+      syncTrigger(select);
+    });
+
+    wrap._dsSelect = select;
+    wrap._dsTrigger = btn;
+    select._dsComboSync = function () {
+      syncTrigger(select);
+      if (active === wrap) fillListbox();
+    };
+  }
+
+  function scan(root) {
+    var scope = root && root.querySelectorAll ? root : document;
+    scope.querySelectorAll("select.select").forEach(enhance);
+  }
+
+  function enabledIndexes(select) {
+    var out = [];
+    optionList(select).forEach(function (option, index) {
+      if (!option.disabled) out.push(index);
+    });
+    return out;
+  }
+
+  function fillListbox() {
+    if (!active || !listbox) return;
+    var select = active._dsSelect;
+    var html = "";
+    optionList(select).forEach(function (option, index) {
+      var selected = index === select.selectedIndex;
+      var disabled = option.disabled;
+      var cls = "ds-listbox-option";
+      if (isPlaceholder(option)) cls += " is-placeholder";
+      if (selected) cls += " is-selected";
+      if (disabled) cls += " is-disabled";
+      if (index === activeIndex) cls += " is-active";
+      html +=
+        '<div class="' + cls + '" role="option" id="ds-listbox-opt-' + index + '"' +
+        ' data-opt-index="' + index + '"' +
+        ' aria-selected="' + (selected ? "true" : "false") + '"' +
+        (disabled ? ' aria-disabled="true"' : "") +
+        ">" + (option.textContent || "") + "</div>";
+    });
+    listbox.innerHTML = html;
+    var btn = active._dsTrigger;
+    if (activeIndex >= 0) btn.setAttribute("aria-activedescendant", "ds-listbox-opt-" + activeIndex);
+    else btn.removeAttribute("aria-activedescendant");
+    position();
+    var activeEl = listbox.querySelector(".is-active") || listbox.querySelector(".is-selected");
+    if (activeEl && activeEl.scrollIntoView) {
+      activeEl.scrollIntoView({ block: "nearest" });
+    }
+  }
+
+  function viewportBox() {
+    var vv = global.visualViewport;
+    if (vv) {
+      return { left: vv.offsetLeft, top: vv.offsetTop, width: vv.width, height: vv.height };
+    }
+    return { left: 0, top: 0, width: global.innerWidth, height: global.innerHeight };
+  }
+
+  function position() {
+    if (!listbox || listbox.hidden || !active) return;
+    var rect = active.getBoundingClientRect();
+    var view = viewportBox();
+    var gap = 4;
+    var width = Math.max(rect.width, 120);
+    listbox.style.minWidth = Math.round(width) + "px";
+    listbox.style.width = "max-content";
+    listbox.style.maxWidth = Math.round(Math.min(view.width - 16, Math.max(width, 280))) + "px";
+    var height = listbox.offsetHeight || 200;
+    var left = rect.left;
+    var top = rect.bottom + gap;
+    if (top + height > view.top + view.height - 8 && rect.top - gap - height >= view.top + 8) {
+      top = rect.top - gap - height;
+    }
+    if (left + width > view.left + view.width - 8) {
+      left = Math.max(view.left + 8, rect.right - width);
+    }
+    if (left < view.left + 8) left = view.left + 8;
+    if (top < view.top + 8) top = view.top + 8;
+    listbox.style.left = Math.round(left) + "px";
+    listbox.style.top = Math.round(top) + "px";
+  }
+
+  function openCombo(wrap) {
+    if (!wrap || wrap.classList.contains("is-disabled")) return;
+    var select = wrap._dsSelect;
+    if (!select || select.disabled) return;
+    ensureListbox();
+    if (active && active !== wrap) closeCombo();
+    active = wrap;
+    activeIndex = select.selectedIndex >= 0 ? select.selectedIndex : 0;
+    if (select.options[activeIndex] && select.options[activeIndex].disabled) {
+      var enabled = enabledIndexes(select);
+      activeIndex = enabled.length ? enabled[0] : -1;
+    }
+    wrap.classList.add("is-open");
+    wrap._dsTrigger.setAttribute("aria-expanded", "true");
+    document.body.appendChild(listbox);
+    listbox.hidden = false;
+    fillListbox();
+  }
+
+  function closeCombo() {
+    if (!active) {
+      if (listbox) listbox.hidden = true;
+      return;
+    }
+    var wrap = active;
+    wrap.classList.remove("is-open");
+    wrap._dsTrigger.setAttribute("aria-expanded", "false");
+    wrap._dsTrigger.removeAttribute("aria-activedescendant");
+    active = null;
+    activeIndex = -1;
+    if (listbox) {
+      listbox.hidden = true;
+      listbox.innerHTML = "";
+    }
+  }
+
+  function commit(index) {
+    if (!active) return;
+    var select = active._dsSelect;
+    var option = select.options[index];
+    if (!option || option.disabled) return;
+    var wrap = active;
+    opening = true;
+    select.selectedIndex = index;
+    select.dispatchEvent(new Event("input", { bubbles: true }));
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+    syncTrigger(select);
+    closeCombo();
+    wrap._dsTrigger.focus({ preventScroll: true });
+    opening = false;
+  }
+
+  function moveActive(delta) {
+    if (!active) return;
+    var enabled = enabledIndexes(active._dsSelect);
+    if (!enabled.length) return;
+    var pos = enabled.indexOf(activeIndex);
+    if (pos < 0) pos = delta > 0 ? -1 : 0;
+    pos = (pos + delta + enabled.length * 8) % enabled.length;
+    activeIndex = enabled[pos];
+    fillListbox();
+  }
+
+  function onPointer(event) {
+    var wrap = event.target.closest && event.target.closest(".ds-combo");
+    if (wrap && wrap._dsTrigger && (event.target === wrap._dsTrigger || wrap._dsTrigger.contains(event.target))) {
+      if (event.type === "mousedown" && event.button === 0) event.preventDefault();
+      if (wrap.classList.contains("is-open")) closeCombo();
+      else openCombo(wrap);
+      return;
+    }
+    if (listbox && !listbox.hidden && listbox.contains(event.target)) return;
+    if (active) closeCombo();
+  }
+
+  function onKey(event) {
+    var wrap = event.target.closest && event.target.closest(".ds-combo");
+    if (event.key === "Escape") {
+      if (active) {
+        event.preventDefault();
+        var trigger = active._dsTrigger;
+        closeCombo();
+        if (trigger) trigger.focus({ preventScroll: true });
+      }
+      return;
+    }
+    if (!wrap || event.target !== wrap._dsTrigger) return;
+    var open = wrap.classList.contains("is-open");
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (!open) openCombo(wrap);
+      else moveActive(1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!open) openCombo(wrap);
+      else moveActive(-1);
+      return;
+    }
+    if (event.key === "Home" && open) {
+      event.preventDefault();
+      var first = enabledIndexes(wrap._dsSelect);
+      if (first.length) {
+        activeIndex = first[0];
+        fillListbox();
+      }
+      return;
+    }
+    if (event.key === "End" && open) {
+      event.preventDefault();
+      var last = enabledIndexes(wrap._dsSelect);
+      if (last.length) {
+        activeIndex = last[last.length - 1];
+        fillListbox();
+      }
+      return;
+    }
+    if ((event.key === "Enter" || event.key === " ") && open) {
+      event.preventDefault();
+      if (activeIndex >= 0) commit(activeIndex);
+      return;
+    }
+    if ((event.key === "Enter" || event.key === " ") && !open) {
+      event.preventDefault();
+      openCombo(wrap);
+    }
+  }
+
+  function patchSelectValue() {
+    if (patched) return;
+    patched = true;
+    ["value", "selectedIndex"].forEach(function (prop) {
+      var desc = Object.getOwnPropertyDescriptor(HTMLSelectElement.prototype, prop);
+      if (!desc || !desc.set || !desc.get) return;
+      Object.defineProperty(HTMLSelectElement.prototype, prop, {
+        get: desc.get,
+        set: function (value) {
+          desc.set.call(this, value);
+          if (typeof this._dsComboSync === "function") this._dsComboSync();
+        },
+        configurable: true,
+        enumerable: desc.enumerable,
+      });
+    });
+  }
+
+  function bind() {
+    if (bound) return;
+    bound = true;
+    patchSelectValue();
+    document.addEventListener("mousedown", onPointer, true);
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("scroll", position, true);
+    global.addEventListener("resize", position);
+    if (global.visualViewport) {
+      global.visualViewport.addEventListener("resize", position);
+      global.visualViewport.addEventListener("scroll", position);
+    }
+    if (typeof MutationObserver === "function") {
+      new MutationObserver(function (records) {
+        records.forEach(function (record) {
+          if (record.type === "childList") {
+            record.addedNodes.forEach(function (node) {
+              if (node.nodeType !== 1) return;
+              if (node.matches && node.matches("select.select")) enhance(node);
+              if (node.querySelectorAll) scan(node);
+            });
+            if (record.target && record.target.tagName === "SELECT" && record.target._dsComboSync) {
+              record.target._dsComboSync();
+            }
+          }
+          if (record.type === "attributes" && record.target.tagName === "SELECT" && record.target._dsComboSync) {
+            record.target._dsComboSync();
+          }
+        });
+      }).observe(document.documentElement, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["disabled", "value"],
+      });
+    }
+    scan(document);
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", bind);
+  } else {
+    bind();
+  }
+
+  global.JinniuSelect = {
+    scan: scan,
+    open: function (select) {
+      if (select && select.closest) openCombo(select.closest(".ds-combo"));
+    },
+    close: closeCombo,
+  };
+})(window);