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

原生 select 弹层无法可靠套黑金 token，改为可访问 listbox；日期标题增加年份/月份下拉，越月不提交非法日。

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>

tests/test_company_transfers_page.py

@@ -31,7 +31,7 @@ class TransfersPageSourceContractTests(unittest.TestCase):
         self.assertIn('id="transferEvidenceDrawer"', html)
         self.assertIn("期间净变动", html)
         self.assertNotIn("本公司往来合计", html)
-        self.assertIn("design-system.css?v=13", html)
+        self.assertIn("design-system.css?v=14", html)
         self.assertIn("app.js?v=18", html)
         # 侧栏顺序：流水管理 → 转账往来 → 往来确认
         flows = html.index('data-view="flows"')

tests/test_hel351_controls.py

@@ -75,7 +75,8 @@ class Hel351SourceContractTests(unittest.TestCase):
         self.assertIn('id="credentialDialog"', html)
         self.assertIn('id="cred-pass"', html)
         self.assertIn('id="cred-copy-pass"', html)
-        self.assertIn("datepicker.js?v=1", html)
+        self.assertIn("select.js?v=1", html)
+        self.assertIn("datepicker.js?v=2", html)
         self.assertNotIn("初始密码由管理员统一发放", html)
         js = (WEB / "app.js").read_text(encoding="utf-8")
         self.assertIn("function showOnceCredentials(", js)
@@ -135,15 +136,18 @@ class Hel351BrowserProbeTests(unittest.TestCase):
     <button>重开审批</button>
   </div>
   <select class="select" id="probe-select">
+    <option value="">请选择公司</option>
     <option>河南金牛农业科技发展有限公司</option>
     <option>河南金牛煤业有限公司</option>
+    <option disabled>停用账户（不可选）</option>
   </select>
   <input class="input" id="probe-date" type="date" value="2026-09-01" />
+  <script src="{self.base}/select.js"></script>
   <script src="{self.base}/datepicker.js"></script>
 </body></html>""",
             wait_until="domcontentloaded",
         )
-        page.wait_for_function("() => window.JinniuDatePicker")
+        page.wait_for_function("() => window.JinniuDatePicker && window.JinniuSelect")
         if zoom != 1:
             page.evaluate(f"() => {{ document.body.style.zoom = '{zoom}'; }}")
 
@@ -152,25 +156,44 @@ class Hel351BrowserProbeTests(unittest.TestCase):
             browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
             page = browser.new_page(viewport={"width": 1440, "height": 900})
             self._open(page, night=True)
+            page.locator("#probe-select").locator("xpath=ancestor::div[contains(@class,'ds-combo')]").locator(".ds-combo-trigger").click()
+            page.wait_for_selector("#ds-listbox:not([hidden])")
             colors = page.evaluate(
                 """() => {
-                  const sel = document.getElementById('probe-select');
+                  const trigger = document.querySelector('#probe-select').closest('.ds-combo').querySelector('.ds-combo-trigger');
-                  const cs = getComputedStyle(sel);
+                  const box = document.getElementById('ds-listbox');
-                  const opt = getComputedStyle(sel.options[0]);
+                  const placeholder = box.querySelector('.is-placeholder');
+                  const plain = [...box.querySelectorAll('.ds-listbox-option')].find((el) => !el.classList.contains('is-placeholder') && !el.classList.contains('is-disabled') && !el.classList.contains('is-selected'));
+                  const disabled = box.querySelector('.is-disabled');
+                  const tcs = getComputedStyle(trigger);
+                  const bcs = getComputedStyle(box);
+                  const pcs = placeholder && getComputedStyle(placeholder);
+                  const ncs = plain && getComputedStyle(plain);
+                  const dcs = disabled && getComputedStyle(disabled);
                   return {
-                    scheme: getComputedStyle(document.documentElement).colorScheme,
+                    triggerBg: tcs.backgroundColor,
-                    bg: cs.backgroundColor,
+                    triggerColor: tcs.color,
-                    color: cs.color,
+                    boxBg: bcs.backgroundColor,
-                    optionBg: opt.backgroundColor,
+                    boxColor: bcs.color,
-                    optionColor: opt.color,
+                    placeholderColor: pcs && pcs.color,
+                    placeholderBg: pcs && pcs.backgroundColor,
+                    plainColor: ncs && ncs.color,
+                    plainBg: ncs && ncs.backgroundColor,
+                    disabledColor: dcs && dcs.color,
                   };
                 }"""
             )
             browser.close()
-        self.assertEqual("dark", colors["scheme"])
+        white = "rgb(255, 255, 255)"
-        self.assertNotEqual("rgb(255, 255, 255)", colors["bg"])
+        self.assertNotEqual(white, colors["triggerBg"])
-        self.assertNotEqual("rgb(255, 255, 255)", colors["color"])
+        self.assertNotEqual(white, colors["triggerColor"])
-        self.assertNotEqual("rgb(255, 255, 255)", colors["optionBg"])
+        self.assertNotEqual(white, colors["boxBg"])
+        self.assertNotEqual(white, colors["boxColor"])
+        self.assertNotEqual(white, colors["placeholderBg"])
+        self.assertNotEqual(white, colors["placeholderColor"])
+        self.assertNotEqual(white, colors["plainBg"])
+        self.assertNotEqual(white, colors["plainColor"])
+        self.assertNotEqual(white, colors["disabledColor"])
 
     def test_tabs_have_no_vertical_scrollbar_at_zoom(self) -> None:
         with sync_playwright() as p:

tests/test_hel373_select_datepicker.py

@@ -0,0 +1,425 @@
+"""HEL-373: 黑金下拉全状态 + 日期年月直选。"""
+
+from __future__ import annotations
+
+import os
+import threading
+import unittest
+from functools import partial
+from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
+from pathlib import Path
+
+ROOT = Path(__file__).resolve().parents[1]
+WEB = ROOT / "web"
+SHOT_DIR = ROOT.parent / "hel373-shots"
+
+try:
+    from playwright.sync_api import sync_playwright
+except ImportError:  # pragma: no cover
+    sync_playwright = None
+
+
+def _prepare_chrome_libs() -> Path | None:
+    candidates = [ROOT / ".chrome-libs" / "lib"]
+    for lib_dir in candidates:
+        if (lib_dir / "libatk-1.0.so.0").exists():
+            current = os.environ.get("LD_LIBRARY_PATH", "")
+            prefix = str(lib_dir)
+            if prefix not in current.split(":"):
+                os.environ["LD_LIBRARY_PATH"] = (
+                    f"{prefix}:{current}" if current else prefix
+                )
+            return lib_dir
+    return None
+
+
+def _chromium_available() -> bool:
+    if not sync_playwright:
+        return False
+    _prepare_chrome_libs()
+    try:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
+            browser.close()
+        return True
+    except Exception:
+        return False
+
+
+PROBE_HTML = """<!doctype html>
+<html lang="zh-CN" class="v-fusion" {theme_attr}>
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<link rel="stylesheet" href="{base}/design-system.css"/>
+</head>
+<body class="is-app" {theme_attr} style="padding:24px">
+  <div class="filters" style="max-width:720px">
+    <div class="field" style="flex:1 1 220px">
+      <label for="probe-empty">对方公司</label>
+      <select class="select" id="probe-empty">
+        <option value="">请选择集团内公司</option>
+        <option value="a">河南金牛农业科技发展有限公司</option>
+        <option value="b">河南金牛煤业有限公司</option>
+        <option value="c" disabled>停用账户</option>
+      </select>
+    </div>
+    <div class="field" style="flex:1 1 220px">
+      <label for="probe-filled">本方公司</label>
+      <select class="select" id="probe-filled">
+        <option value="a">河南金牛农业科技发展有限公司</option>
+        <option value="b" selected>河南金牛煤业有限公司</option>
+        <option value="c">河南金牛物流有限公司</option>
+      </select>
+    </div>
+  </div>
+  <div class="field" style="max-width:220px;margin-top:16px">
+    <label for="probe-date">起算日</label>
+    <input class="input" id="probe-date" type="date" value="2026-01-31" min="2020-03-15" max="2028-11-30" />
+  </div>
+  <div class="field" style="max-width:220px;margin-top:16px">
+    <label for="probe-free-date">无上下限日期</label>
+    <input class="input" id="probe-free-date" type="date" value="2026-09-01" />
+  </div>
+  <script src="{base}/select.js"></script>
+  <script src="{base}/datepicker.js"></script>
+</body></html>
+"""
+
+
+class Hel373SourceContractTests(unittest.TestCase):
+    def test_custom_listbox_and_year_month_exist(self) -> None:
+        css = (WEB / "design-system.css").read_text(encoding="utf-8")
+        js_select = (WEB / "select.js").read_text(encoding="utf-8")
+        js_date = (WEB / "datepicker.js").read_text(encoding="utf-8")
+        admin = (WEB / "admin.html").read_text(encoding="utf-8")
+        company = (WEB / "company.html").read_text(encoding="utf-8")
+        self.assertIn("select.select", js_select)
+        self.assertIn('setAttribute("role", "combobox")', js_select)
+        self.assertIn('setAttribute("role", "listbox")', js_select)
+        self.assertIn("JinniuSelect", js_select)
+        self.assertIn("data-dp-year", js_date)
+        self.assertIn("data-dp-month", js_date)
+        self.assertIn("YEAR_PAD", js_date)
+        self.assertIn(".ds-listbox", css)
+        self.assertIn(".ds-combo-trigger", css)
+        self.assertIn(".ds-listbox-option.is-placeholder", css)
+        self.assertIn("html[data-theme=\"night\"] .ds-listbox", css)
+        self.assertIn("var(--gold-line)", css[css.index("html[data-theme=\"night\"] .ds-listbox") :])
+        self.assertIn("html[data-theme=\"night\"] .ds-listbox-option.is-selected", css)
+        self.assertIn("select.js?v=1", admin)
+        self.assertIn("select.js?v=1", company)
+        self.assertIn("datepicker.js?v=2", admin)
+        self.assertIn("datepicker.js?v=2", company)
+        self.assertIn("design-system.css?v=14", admin)
+        self.assertIn("design-system.css?v=14", company)
+
+    def test_listbox_uses_tokens_not_hardcoded_night_hex(self) -> None:
+        css = (WEB / "design-system.css").read_text(encoding="utf-8")
+        start = css.index("/* ─── 主题化 combobox")
+        end = css.index("@media (prefers-reduced-motion: reduce)", start)
+        block = css[start:end]
+        self.assertNotIn("#fff", block)
+        self.assertNotIn("#ffffff", block.lower())
+        self.assertNotIn("#000", block)
+        self.assertIn("var(--surface)", block)
+        self.assertIn("var(--text)", block)
+        self.assertIn("var(--gold)", block)
+        self.assertIn("var(--fill)", block)
+
+
+@unittest.skipUnless(sync_playwright, "playwright 未安装，跳过浏览器探针")
+@unittest.skipUnless(_chromium_available(), "chromium 无法启动，跳过浏览器探针")
+class Hel373BrowserProbeTests(unittest.TestCase):
+    @classmethod
+    def setUpClass(cls) -> None:
+        handler = partial(SimpleHTTPRequestHandler, directory=str(WEB))
+        cls.httpd = ThreadingHTTPServer(("127.0.0.1", 0), handler)
+        cls.port = cls.httpd.server_address[1]
+        cls.thread = threading.Thread(target=cls.httpd.serve_forever, daemon=True)
+        cls.thread.start()
+        cls.base = f"http://127.0.0.1:{cls.port}"
+
+    @classmethod
+    def tearDownClass(cls) -> None:
+        cls.httpd.shutdown()
+        cls.httpd.server_close()
+
+    def _open(self, page, *, night: bool, width: int = 1440, height: int = 900) -> None:
+        page.set_viewport_size({"width": width, "height": height})
+        theme_attr = 'data-theme="night"' if night else 'data-theme="day"'
+        page.set_content(
+            PROBE_HTML.format(theme_attr=theme_attr, base=self.base),
+            wait_until="domcontentloaded",
+        )
+        page.wait_for_function("() => window.JinniuDatePicker && window.JinniuSelect")
+        page.wait_for_selector("#probe-empty + .ds-combo-trigger, .ds-combo #probe-empty")
+        page.wait_for_function(
+            "() => document.querySelectorAll('.ds-combo-trigger').length >= 2"
+        )
+
+    def _trigger(self, page, select_id: str):
+        return page.locator(f"#{select_id}").locator(
+            "xpath=ancestor::div[contains(@class,'ds-combo')]"
+        ).locator(".ds-combo-trigger")
+
+    def test_night_placeholder_unselected_selected_disabled(self) -> None:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
+            page = browser.new_page(viewport={"width": 1440, "height": 900})
+            self._open(page, night=True)
+            empty_btn = self._trigger(page, "probe-empty")
+            self.assertTrue(empty_btn.evaluate("el => el.classList.contains('is-placeholder')"))
+            empty_btn.click()
+            page.wait_for_selector("#ds-listbox:not([hidden])")
+            snapshot = page.evaluate(
+                """() => {
+                  const box = document.getElementById('ds-listbox');
+                  const opts = [...box.querySelectorAll('.ds-listbox-option')].map((el) => {
+                    const cs = getComputedStyle(el);
+                    return {
+                      text: el.textContent,
+                      color: cs.color,
+                      bg: cs.backgroundColor,
+                      selected: el.classList.contains('is-selected'),
+                      placeholder: el.classList.contains('is-placeholder'),
+                      disabled: el.classList.contains('is-disabled'),
+                    };
+                  });
+                  const bcs = getComputedStyle(box);
+                  const tcs = getComputedStyle(document.querySelector('#probe-empty').closest('.ds-combo').querySelector('.ds-combo-trigger'));
+                  return {
+                    boxBg: bcs.backgroundColor,
+                    boxColor: bcs.color,
+                    boxBorder: bcs.borderTopColor,
+                    triggerBg: tcs.backgroundColor,
+                    triggerColor: tcs.color,
+                    opts,
+                  };
+                }"""
+            )
+            page.keyboard.press("Escape")
+            filled = self._trigger(page, "probe-filled")
+            filled.click()
+            page.wait_for_selector("#ds-listbox:not([hidden])")
+            selected = page.evaluate(
+                """() => {
+                  const el = document.querySelector('#ds-listbox .is-selected');
+                  const cs = getComputedStyle(el);
+                  return { color: cs.color, bg: cs.backgroundColor, text: el.textContent };
+                }"""
+            )
+            native = page.evaluate("() => document.getElementById('probe-filled').value")
+            browser.close()
+        white = "rgb(255, 255, 255)"
+        self.assertNotEqual(white, snapshot["boxBg"])
+        self.assertNotEqual(white, snapshot["boxColor"])
+        self.assertNotEqual(white, snapshot["triggerBg"])
+        self.assertNotEqual(white, snapshot["triggerColor"])
+        placeholder = next(o for o in snapshot["opts"] if o["placeholder"])
+        plain = next(o for o in snapshot["opts"] if not o["placeholder"] and not o["disabled"] and not o["selected"])
+        disabled = next(o for o in snapshot["opts"] if o["disabled"])
+        self.assertNotEqual(white, placeholder["color"])
+        self.assertNotEqual(white, placeholder["bg"])
+        self.assertNotEqual(white, plain["color"])
+        self.assertNotEqual(white, plain["bg"])
+        self.assertNotEqual(white, disabled["color"])
+        self.assertIn("217", selected["color"])
+        self.assertEqual("河南金牛煤业有限公司", selected["text"])
+        self.assertEqual("b", native)
+
+    def test_keyboard_and_form_value(self) -> None:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
+            page = browser.new_page(viewport={"width": 1440, "height": 900})
+            self._open(page, night=True)
+            btn = self._trigger(page, "probe-empty")
+            btn.focus()
+            page.keyboard.press("ArrowDown")
+            page.wait_for_selector("#ds-listbox:not([hidden])")
+            page.keyboard.press("ArrowDown")
+            page.keyboard.press("Enter")
+            value = page.evaluate("() => document.getElementById('probe-empty').value")
+            label = btn.inner_text()
+            btn.focus()
+            page.keyboard.press("Enter")
+            page.wait_for_selector("#ds-listbox:not([hidden])")
+            page.keyboard.press("Escape")
+            hidden = page.evaluate("() => document.getElementById('ds-listbox').hidden")
+            browser.close()
+        self.assertEqual("a", value)
+        self.assertIn("农业", label)
+        self.assertTrue(hidden)
+
+    def test_year_month_jump_keeps_selected_and_skips_invalid_day(self) -> None:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
+            page = browser.new_page(viewport={"width": 1440, "height": 900})
+            self._open(page, night=True)
+            page.click("#probe-date")
+            page.wait_for_selector("#ds-datepicker:not([hidden])")
+            before = page.evaluate("() => document.getElementById('probe-date').value")
+            year_btn = page.locator("#ds-datepicker [data-dp-year]").locator(
+                "xpath=ancestor::div[contains(@class,'ds-combo')]"
+            ).locator(".ds-combo-trigger")
+            year_btn.click()
+            page.wait_for_selector("#ds-listbox:not([hidden])")
+            page.locator("#ds-listbox .ds-listbox-option", has_text="2024年").click()
+            page.wait_for_function(
+                "() => document.querySelector('[data-dp-year]').value === '2024'"
+            )
+            month_btn = page.locator("#ds-datepicker [data-dp-month]").locator(
+                "xpath=ancestor::div[contains(@class,'ds-combo')]"
+            ).locator(".ds-combo-trigger")
+            month_btn.click()
+            page.wait_for_selector("#ds-listbox:not([hidden])")
+            page.locator("#ds-listbox .ds-listbox-option", has_text="02月").click()
+            after = page.evaluate(
+                """() => {
+                  const input = document.getElementById('probe-date');
+                  const panel = document.getElementById('ds-datepicker');
+                  const selected = panel.querySelector('.ds-dp-day.is-selected');
+                  const days = [...panel.querySelectorAll('.ds-dp-day:not(.is-other)')].map((el) => el.textContent);
+                  const year = document.querySelector('[data-dp-year]').value;
+                  const month = document.querySelector('[data-dp-month]').value;
+                  return {
+                    value: input.value,
+                    selected: selected && selected.getAttribute('data-iso'),
+                    has31: days.includes('31'),
+                    year,
+                    month,
+                    titleYear: document.querySelector('#ds-datepicker .ds-combo-trigger').textContent,
+                  };
+                }"""
+            )
+            browser.close()
+        self.assertEqual("2026-01-31", before)
+        self.assertEqual("2026-01-31", after["value"])
+        self.assertIsNone(after["selected"])
+        self.assertFalse(after["has31"])
+        self.assertEqual("2024", after["year"])
+        self.assertEqual("1", after["month"])
+
+    def test_leap_year_feb29_and_minmax_year_range(self) -> None:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
+            page = browser.new_page(viewport={"width": 1440, "height": 900})
+            self._open(page, night=False)
+            page.click("#probe-date")
+            page.wait_for_selector("#ds-datepicker:not([hidden])")
+            page.locator("#ds-datepicker [data-dp-year]").locator(
+                "xpath=ancestor::div[contains(@class,'ds-combo')]"
+            ).locator(".ds-combo-trigger").click()
+            years = page.evaluate(
+                """() => [...document.querySelectorAll('#ds-listbox .ds-listbox-option')].map((el) => el.textContent)"""
+            )
+            page.locator("#ds-listbox .ds-listbox-option", has_text="2024年").click()
+            page.locator("#ds-datepicker [data-dp-month]").locator(
+                "xpath=ancestor::div[contains(@class,'ds-combo')]"
+            ).locator(".ds-combo-trigger").click()
+            page.locator("#ds-listbox .ds-listbox-option", has_text="02月").click()
+            days = page.evaluate(
+                """() => [...document.querySelectorAll('#ds-datepicker .ds-dp-day:not(.is-other)')].map((el) => el.textContent)"""
+            )
+            page.click('#ds-datepicker [data-iso="2024-02-29"]')
+            value = page.evaluate("() => document.getElementById('probe-date').value")
+            page.click("#probe-free-date")
+            page.wait_for_selector("#ds-datepicker:not([hidden])")
+            page.locator("#ds-datepicker [data-dp-year]").locator(
+                "xpath=ancestor::div[contains(@class,'ds-combo')]"
+            ).locator(".ds-combo-trigger").click()
+            free_years = page.evaluate(
+                """() => [...document.querySelectorAll('#ds-listbox .ds-listbox-option')].map((el) => el.textContent)"""
+            )
+            browser.close()
+        from datetime import date
+        year = date.today().year
+        self.assertIn("2020年", years)
+        self.assertIn("2028年", years)
+        self.assertNotIn("2019年", years)
+        self.assertIn("29", days)
+        self.assertEqual("2024-02-29", value)
+        self.assertIn(f"{year - 80}年", free_years)
+        self.assertIn(f"{year + 20}年", free_years)
+
+    def test_prev_next_month_still_works(self) -> None:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
+            page = browser.new_page(viewport={"width": 1440, "height": 900})
+            self._open(page, night=True)
+            page.click("#probe-date")
+            page.wait_for_selector("#ds-datepicker:not([hidden])")
+            page.click('#ds-datepicker [data-dp-nav="1"]')
+            state = page.evaluate(
+                """() => ({
+                  month: document.querySelector('[data-dp-month]').value,
+                  year: document.querySelector('[data-dp-year]').value,
+                  value: document.getElementById('probe-date').value,
+                })"""
+            )
+            browser.close()
+        self.assertEqual("1", state["month"])
+        self.assertEqual("2026", state["year"])
+        self.assertEqual("2026-01-31", state["value"])
+
+    def test_day_theme_trigger_stays_light(self) -> None:
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
+            page = browser.new_page(viewport={"width": 1440, "height": 900})
+            self._open(page, night=False)
+            colors = page.evaluate(
+                """() => {
+                  const btn = document.querySelector('#probe-filled').closest('.ds-combo').querySelector('.ds-combo-trigger');
+                  const cs = getComputedStyle(btn);
+                  return { bg: cs.backgroundColor, color: cs.color };
+                }"""
+            )
+            browser.close()
+        self.assertNotEqual("rgb(16, 15, 13)", colors["bg"])
+
+    def test_viewports_and_shots(self) -> None:
+        SHOT_DIR.mkdir(parents=True, exist_ok=True)
+        viewports = [360, 390, 820, 1440]
+        with sync_playwright() as p:
+            browser = p.chromium.launch(headless=True, args=["--no-sandbox"])
+            for width in viewports:
+                for night in (False, True):
+                    page = browser.new_page(viewport={"width": width, "height": 800})
+                    self._open(page, night=night, width=width, height=800)
+                    theme = "night" if night else "day"
+                    self._trigger(page, "probe-empty").click()
+                    page.wait_for_selector("#ds-listbox:not([hidden])")
+                    page.screenshot(
+                        path=str(SHOT_DIR / f"select-empty-{theme}-{width}.png"),
+                        full_page=True,
+                    )
+                    page.keyboard.press("Escape")
+                    self._trigger(page, "probe-filled").click()
+                    page.wait_for_selector("#ds-listbox:not([hidden])")
+                    page.screenshot(
+                        path=str(SHOT_DIR / f"select-filled-{theme}-{width}.png"),
+                        full_page=True,
+                    )
+                    page.keyboard.press("Escape")
+                    page.click("#probe-date")
+                    page.wait_for_selector("#ds-datepicker:not([hidden])")
+                    page.screenshot(
+                        path=str(SHOT_DIR / f"datepicker-{theme}-{width}.png"),
+                        full_page=True,
+                    )
+                    page.locator("#ds-datepicker [data-dp-year]").locator(
+                        "xpath=ancestor::div[contains(@class,'ds-combo')]"
+                    ).locator(".ds-combo-trigger").click()
+                    page.wait_for_selector("#ds-listbox:not([hidden])")
+                    page.screenshot(
+                        path=str(SHOT_DIR / f"datepicker-year-{theme}-{width}.png"),
+                        full_page=True,
+                    )
+                    page.close()
+            browser.close()
+        self.assertTrue((SHOT_DIR / "select-empty-night-1440.png").exists())
+        self.assertTrue((SHOT_DIR / "datepicker-year-night-360.png").exists())
+
+
+if __name__ == "__main__":
+    unittest.main()

tests/test_reminders_page.py

@@ -37,7 +37,7 @@ class RemindersPageSourceContractTests(unittest.TestCase):
         self.assertIn('id="reminder-tbody"', html)
         self.assertIn('id="reminder-tabs"', html)
         self.assertIn('id="reminder-detail-drawer"', html)
-        self.assertIn("design-system.css?v=13", html)
+        self.assertIn("design-system.css?v=14", html)
         self.assertIn("app.js?v=18", html)
         pending = html.index('id="pending-reminders-card"')
         history = html.index('id="reminder-history-card"')
@@ -73,7 +73,8 @@ class RemindersPageSourceContractTests(unittest.TestCase):
         self.assertIn(".pick", css)
         self.assertIn("minmax(0, 1.5fr)", css)
         block_start = css.index("提醒管理：三步发送流")
-        block = css[block_start:]
+        block_end = css.index("月结 / 重开 / 审计")
+        block = css[block_start:block_end]
         self.assertIn("var(--border)", block)
         self.assertIn("var(--accent-soft)", block)
         self.assertIn("var(--accent)", block)

web/admin.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="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>

web/company.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>

web/datepicker.js

@@ -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) {

web/design-system.css

@@ -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;

web/index.html

@@ -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">

web/login-admin.html

@@ -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">

web/login-company.html

@@ -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">

web/select.js

@@ -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);