@kdcloudjs/shoelace 1.0.42 → 1.0.44

package/dist/chunks/chunk.3ICRXEPG.js

@@ -0,0 +1,1949 @@
+import {
+  daterangepicker_styles_default
+} from "./chunk.Q5T7OK3P.js";
+import {
+  SlDrawer
+} from "./chunk.YYJTP5AM.js";
+import {
+  defaultValue
+} from "./chunk.GI7VDIWX.js";
+import {
+  LOCALE,
+  SlCalendarPicker,
+  formatDatetime,
+  getTimeColumnsFromFormat,
+  parseDatetime
+} from "./chunk.VCTZKA47.js";
+import {
+  SlButton
+} from "./chunk.55LZILII.js";
+import {
+  SlPopup
+} from "./chunk.6LVFH7EZ.js";
+import {
+  form_control_styles_default
+} from "./chunk.ITANYM25.js";
+import {
+  FormControlController
+} from "./chunk.WBWPWG4N.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  SlIcon
+} from "./chunk.POLPBXD2.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.T3WRENOY.js";
+import {
+  __decorateClass
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/daterangepicker/daterangepicker.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import { html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import { property, query, queryAll, state } from "lit/decorators.js";
+var getRangeValueFormat = (date, format) => {
+  const hasTime = date.getHours() !== 0 || date.getMinutes() !== 0 || date.getSeconds() !== 0;
+  if (format) {
+    const formats = Array.isArray(format) ? format : [format];
+    return formatDatetime(date, formats[0]);
+  }
+  return formatDatetime(date, hasTime ? "datetime" : "date");
+};
+var WHEEL_ITEM_HEIGHT = 50;
+var SlDaterangepicker = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.formControlController = new FormControlController(this, {
+      assumeInteractionOn: ["sl-blur", "sl-input"]
+    });
+    this.hasSlotController = new HasSlotController(this, "help-text", "label");
+    this.localize = new LocalizeController(this);
+    this.hasFocus = false;
+    this.isHovered = false;
+    this.open = false;
+    this.activeInput = "start";
+    this.leftDate = /* @__PURE__ */ new Date();
+    this.rightDate = new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth() + 1, 1);
+    this.startValue = "";
+    this.endValue = "";
+    this.calendarView = "days";
+    this.calendarViewAnchor = "left";
+    this.syncingValue = false;
+    this.hoverDate = null;
+    this.enableHoverRange = false;
+    this.rangeEditTwoStep = false;
+    this.rangeEditFirstSide = null;
+    this.rangeEditExpectedSide = null;
+    this.hasFocusSwitched = false;
+    this.lastValidValue = [null, null];
+    this.isMobile = false;
+    this.mobilePickerView = "calendar";
+    this.wheelDate = /* @__PURE__ */ new Date();
+    this.yearScrollTop = 0;
+    this.mobileOpenSnapshot = [null, null];
+    this.mobileInteracted = false;
+    this.pendingDate = null;
+    this.pendingSide = null;
+    this.name = "";
+    this.value = [null, null];
+    this.defaultValue = [null, null];
+    this.size = "medium";
+    this.filled = false;
+    this.pill = false;
+    this.label = "";
+    this.helpText = "";
+    this.clearable = true;
+    this.disabled = false;
+    this.placeholder = ["\u5F00\u59CB\u65E5\u671F", "\u7ED3\u675F\u65E5\u671F"];
+    this.readonly = false;
+    this.required = false;
+    this.startDate = null;
+    this.endDate = null;
+    this.type = "date";
+    this.min = "0001-01-01";
+    this.max = "9999-12-31";
+  }
+  get startPlaceholder() {
+    return this.placeholder[0];
+  }
+  get endPlaceholder() {
+    return this.placeholder[1];
+  }
+  /** Gets the validity state object */
+  get validity() {
+    var _a, _b;
+    if (!((_a = this.startInput) == null ? void 0 : _a.validity) || !((_b = this.endInput) == null ? void 0 : _b.validity)) {
+      return { valid: true };
+    }
+    return this.startInput.validity.valid && this.endInput.validity.valid ? this.startInput.validity : this.startInput.validity.valid ? this.endInput.validity : this.startInput.validity;
+  }
+  /** Gets the validation message */
+  get validationMessage() {
+    if (!this.startInput || !this.endInput) return "";
+    return this.startInput.validationMessage || this.endInput.validationMessage;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+    document.addEventListener("mousedown", this.handleDocumentMouseDown);
+    this.handleResize = this.handleResize.bind(this);
+    window.addEventListener("resize", this.handleResize);
+    this.handleResize();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
+    window.removeEventListener("resize", this.handleResize);
+  }
+  handleResize() {
+    this.isMobile = window.matchMedia("(max-width: 500px)").matches;
+  }
+  handleDocumentMouseDown(event) {
+    if (this.isMobile) return;
+    const path = event.composedPath();
+    if (!this.open) return;
+    const isInsideInput = this.inputContainer ? path.includes(this.inputContainer) : false;
+    if (!isInsideInput) {
+      this.open = false;
+    }
+  }
+  /** 检查有效性并触发 sl-invalid 事件（如果无效） */
+  checkValidity() {
+    if (!this.startInput || !this.endInput) return true;
+    return this.startInput.checkValidity() && this.endInput.checkValidity();
+  }
+  /** 获取表单引用 */
+  getForm() {
+    return this.formControlController.getForm();
+  }
+  /** 检查有效性并显示浏览器原生的有效性提示 */
+  reportValidity() {
+    if (!this.startInput || !this.endInput) return true;
+    return this.startInput.reportValidity() && this.endInput.reportValidity();
+  }
+  /** 设置自定义有效性消息 */
+  setCustomValidity(message) {
+    if (!this.startInput || !this.endInput) return;
+    this.startInput.setCustomValidity(message);
+    this.endInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
+  }
+  /** 聚焦到开始日期输入框并打开面板 */
+  focus(options) {
+    if (this.isMobile) {
+      this.activeInput = "start";
+      this.open = true;
+      return;
+    }
+    this.startInput.focus(options);
+  }
+  /** 移除焦点并关闭面板 */
+  blur() {
+    var _a;
+    if (this.isMobile && this.open) return;
+    const active = (_a = this.shadowRoot) == null ? void 0 : _a.activeElement;
+    if (active && typeof active.blur === "function") {
+      active.blur();
+    }
+    this.open = false;
+  }
+  /**
+   * 获取用于显示的格式（第一个格式）
+   */
+  getDisplayFormat() {
+    if (this.format) {
+      const formats = Array.isArray(this.format) ? this.format : [this.format];
+      return formats[0];
+    }
+    return this.type;
+  }
+  /**
+   * 获取所有有效的格式数组
+   */
+  getEffectiveFormats() {
+    if (this.format) {
+      return Array.isArray(this.format) ? this.format : [this.format];
+    }
+    return [this.type];
+  }
+  updateValueTuple() {
+    this.syncingValue = true;
+    this.value = [this.startDate, this.endDate];
+  }
+  parseDateInput(value) {
+    const raw = value.trim();
+    if (!raw) return null;
+    const formats = this.getEffectiveFormats();
+    for (const fmt of formats) {
+      const parsed2 = parseDatetime(raw, fmt);
+      if (parsed2) {
+        if (this.type === "date") {
+          parsed2.setHours(0, 0, 0, 0);
+        }
+        return parsed2;
+      }
+    }
+    if (this.type === "datetime") {
+      if (!/^(\d{4})([-./])(\d{2})\2(\d{2})\s+(\d{2}):(\d{2}):(\d{2})$/.test(raw)) {
+        return null;
+      }
+    } else if (!/^(\d{4})([-./])(\d{2})\2(\d{2})$/.test(raw)) {
+      return null;
+    }
+    const parsed = parseDatetime(raw, this.type);
+    if (!parsed) return null;
+    if (this.type === "date") {
+      parsed.setHours(0, 0, 0, 0);
+    }
+    return parsed;
+  }
+  parseLimit(value) {
+    const parsed = parseDatetime(String(value), this.type);
+    if (!parsed) return null;
+    if (this.type === "date") {
+      parsed.setHours(0, 0, 0, 0);
+    }
+    return parsed;
+  }
+  isWithinMinMax(date) {
+    const minDate = this.parseLimit(this.min);
+    const maxDate = this.parseLimit(this.max);
+    if (minDate && date < minDate) return false;
+    if (maxDate && date > maxDate) return false;
+    return true;
+  }
+  isValidCommittedRange(start, end) {
+    if (!start && !end) return true;
+    if (!start || !end) return false;
+    const s = new Date(start);
+    const e = new Date(end);
+    if (this.type === "date") {
+      s.setHours(0, 0, 0, 0);
+      e.setHours(0, 0, 0, 0);
+    }
+    if (!this.isWithinMinMax(s) || !this.isWithinMinMax(e)) return false;
+    return s.getTime() <= e.getTime();
+  }
+  isSameValue(a, b) {
+    const [as, ae] = a;
+    const [bs, be] = b;
+    const asT = as ? as.getTime() : null;
+    const aeT = ae ? ae.getTime() : null;
+    const bsT = bs ? bs.getTime() : null;
+    const beT = be ? be.getTime() : null;
+    return asT === bsT && aeT === beT;
+  }
+  revertToLastValid() {
+    const current = [this.startDate, this.endDate];
+    if (this.isSameValue(current, this.lastValidValue)) {
+      this.applyRange(this.lastValidValue[0], this.lastValidValue[1], true);
+      return;
+    }
+    this.applyRange(this.lastValidValue[0], this.lastValidValue[1], true);
+    this.emit("sl-input");
+    this.emit("sl-change");
+  }
+  commitOrRevertInputValue() {
+    const startRaw = this.startValue.trim();
+    const endRaw = this.endValue.trim();
+    const start = startRaw ? this.parseDateInput(startRaw) : null;
+    const end = endRaw ? this.parseDateInput(endRaw) : null;
+    if (startRaw && !start || endRaw && !end) {
+      this.revertToLastValid();
+      return;
+    }
+    if (!this.isValidCommittedRange(start, end)) {
+      this.revertToLastValid();
+      return;
+    }
+    this.applyRange(start, end, true);
+    this.lastValidValue = [this.startDate, this.endDate];
+  }
+  applyRange(start, end, updateValue = true) {
+    const nextStart = start;
+    let nextEnd = end;
+    if (nextStart && nextEnd && nextStart > nextEnd) {
+      nextEnd = null;
+    }
+    this.startDate = nextStart;
+    this.endDate = nextEnd;
+    const displayFormat = this.getDisplayFormat();
+    this.startValue = nextStart ? formatDatetime(nextStart, displayFormat) : "";
+    this.endValue = nextEnd ? formatDatetime(nextEnd, displayFormat) : "";
+    const isVisible = (date) => {
+      const month = date.getFullYear() * 12 + date.getMonth();
+      const leftMonth = this.leftDate.getFullYear() * 12 + this.leftDate.getMonth();
+      const rightMonth = this.rightDate.getFullYear() * 12 + this.rightDate.getMonth();
+      return month === leftMonth || month === rightMonth;
+    };
+    if (nextStart && nextEnd) {
+      if (!isVisible(nextStart) || !isVisible(nextEnd)) {
+        this.syncCalendarsToValue();
+      }
+    } else if (nextStart && !isVisible(nextStart)) {
+      this.syncCalendarsToValue();
+    } else if (nextEnd && !isVisible(nextEnd)) {
+      this.syncCalendarsToValue();
+    }
+    if (updateValue) {
+      this.updateValueTuple();
+    }
+  }
+  syncCalendarsToValue() {
+    const nextStart = this.startDate;
+    const nextEnd = this.endDate;
+    if (nextStart && nextEnd) {
+      this.leftDate = new Date(nextStart);
+      const startMonth = nextStart.getFullYear() * 12 + nextStart.getMonth();
+      const endMonth = nextEnd.getFullYear() * 12 + nextEnd.getMonth();
+      if (startMonth === endMonth) {
+        this.rightDate = this.addMonths(nextStart, 1, 1);
+      } else {
+        this.rightDate = new Date(nextEnd);
+      }
+    } else if (nextStart) {
+      this.leftDate = new Date(nextStart);
+      this.rightDate = this.addMonths(nextStart, 1, 1);
+    } else if (nextEnd) {
+      this.rightDate = new Date(nextEnd);
+      this.leftDate = this.addMonths(nextEnd, -1, 1);
+    }
+  }
+  async handleOpenChange() {
+    this.hasFocusSwitched = false;
+    if (this.open) {
+      if (this.isMobile) {
+        this.mobileOpenSnapshot = [this.startDate, this.endDate];
+        this.mobilePickerView = "calendar";
+        this.mobileInteracted = false;
+        this.pendingDate = null;
+        this.pendingSide = null;
+      }
+      this.enableHoverRange = this.type === "datetime" && !!(this.startDate && this.endDate);
+      this.rangeEditTwoStep = !!(this.startDate && this.endDate);
+      this.rangeEditFirstSide = null;
+      this.rangeEditExpectedSide = null;
+      if (this.startDate || this.endDate) {
+        this.syncCalendarsToValue();
+        if (this.type === "datetime") {
+          const targetDate = this.activeInput === "end" ? this.endDate : this.startDate;
+          if (targetDate) {
+            this.leftDate = new Date(targetDate);
+          }
+        }
+      } else {
+        const today = /* @__PURE__ */ new Date();
+        this.leftDate = today;
+        this.rightDate = new Date(today.getFullYear(), today.getMonth() + 1, 1);
+      }
+      await this.updateComplete;
+      const calendars = Array.from(this.calendars);
+      if (calendars.length === 2) {
+        calendars[0].setCurrentDate(this.leftDate);
+        calendars[1].setCurrentDate(this.rightDate);
+      } else if (calendars.length === 1) {
+        const currentDate = this.type === "datetime" ? this.leftDate : this.activeInput === "end" ? this.rightDate : this.leftDate;
+        calendars[0].setCurrentDate(currentDate);
+      }
+      if (this.type === "datetime") {
+        calendars.forEach((calendar) => calendar.resetTimeScroll("instant"));
+      }
+    } else {
+      this.rangeEditTwoStep = false;
+      this.rangeEditFirstSide = null;
+      this.rangeEditExpectedSide = null;
+      this.calendarView = "days";
+      this.enableHoverRange = false;
+      if (!this.isMobile) {
+        this.commitOrRevertInputValue();
+      }
+    }
+  }
+  handleValueUpdate() {
+    if (this.syncingValue) {
+      this.syncingValue = false;
+      return;
+    }
+    const [start, end] = this.value || [null, null];
+    if (!this.isValidCommittedRange(start, end)) {
+      this.applyRange(null, null, false);
+      this.lastValidValue = [null, null];
+      return;
+    }
+    this.applyRange(start != null ? start : null, end != null ? end : null, false);
+    this.lastValidValue = [this.startDate, this.endDate];
+  }
+  handleBlur(event) {
+    this.hasFocus = false;
+    this.emit("sl-blur");
+    if (!this.open) return;
+    setTimeout(() => {
+      var _a;
+      const active = (_a = this.shadowRoot) == null ? void 0 : _a.activeElement;
+      const isOnInput = active === this.startInput || active === this.endInput;
+      if (!isOnInput) {
+        this.open = false;
+      }
+    });
+  }
+  handleFocus(event) {
+    if (!this.hasFocusSwitched) {
+      this.hasFocusSwitched = true;
+    }
+    this.hasFocus = true;
+    const target = event.target;
+    const newActiveInput = target.classList.contains("daterangepicker__control--start") ? "start" : "end";
+    const switched = this.activeInput !== newActiveInput;
+    this.activeInput = newActiveInput;
+    if (this.type === "datetime" && this.startDate && this.endDate) {
+      this.enableHoverRange = true;
+    }
+    if (!this.disabled && !this.readonly) {
+      this.open = true;
+    }
+    if (switched && this.type === "datetime" && this.open) {
+      const targetDate = newActiveInput === "end" ? this.endDate : this.startDate;
+      if (targetDate) {
+        this.leftDate = new Date(targetDate);
+      }
+    }
+    this.emit("sl-focus");
+  }
+  isValidFormat(value) {
+    if (this.type === "date") {
+      return /^\d{4}[-./]\d{2}[-./]\d{2}$/.test(value);
+    }
+    if (this.type === "datetime") {
+      return /^\d{4}[-./]\d{2}[-./]\d{2}\s+\d{2}:\d{2}:\d{2}$/.test(value);
+    }
+    return true;
+  }
+  handleInput(event) {
+    const target = event.target;
+    const selectionSide = target.classList.contains("daterangepicker__control--start") ? "start" : "end";
+    if (!this.open) {
+      this.open = !this.open;
+    }
+    if (selectionSide === "start") {
+      this.startValue = target.value;
+    } else {
+      this.endValue = target.value;
+    }
+    const inputValue = target.value.trim();
+    if (inputValue === "" || this.isValidFormat(inputValue)) {
+      const parsed = this.parseDateInput(target.value);
+      if (selectionSide === "start") {
+        this.startDate = parsed;
+      } else {
+        this.endDate = parsed;
+      }
+      if (parsed) {
+        const isInvalidRange = selectionSide === "start" && this.endDate && parsed > this.endDate || selectionSide === "end" && this.startDate && parsed < this.startDate;
+        if (isInvalidRange) {
+          this.syncCalendarsToInputDate(parsed, selectionSide);
+        } else {
+          this.syncCalendarsToValue();
+          if (this.type === "datetime") {
+            this.leftDate = new Date(parsed);
+          }
+        }
+      }
+      this.updateValueTuple();
+    }
+    this.formControlController.updateValidity();
+    this.emit("sl-input");
+  }
+  handleChange() {
+    this.emit("sl-change");
+  }
+  handleInputKeyDown(event) {
+    if (event.key === "Escape" && this.open) {
+      event.stopPropagation();
+      this.revertToLastValid();
+      this.open = false;
+      return;
+    }
+    if (event.key === "Enter") {
+      if (event.isComposing) return;
+      const target = event.target;
+      const selectionSide = target === this.startInput ? "start" : target === this.endInput ? "end" : null;
+      if (!selectionSide) return;
+      const parsedDate = this.parseDateInput(target.value);
+      if (!parsedDate) return;
+      this.activeInput = selectionSide;
+      event.preventDefault();
+      event.stopPropagation();
+      const isReverseRange = selectionSide === "start" && this.endDate && parsedDate > this.endDate || selectionSide === "end" && this.startDate && parsedDate < this.startDate;
+      if (isReverseRange) {
+        if (selectionSide === "start") {
+          this.applyRange(parsedDate, null);
+          this.activeInput = "end";
+          this.endInput.focus();
+        } else {
+          this.applyRange(null, parsedDate);
+          this.activeInput = "start";
+          this.startInput.focus();
+        }
+        this.syncCalendarsToInputDate(parsedDate, selectionSide);
+        if (this.type === "datetime") {
+          this.enableHoverRange = true;
+        }
+        this.emit("sl-input");
+        return;
+      }
+      if (this.isDateDisabled(parsedDate)) return;
+      this.applySelectedDate(parsedDate);
+    }
+  }
+  handleInvalid(event) {
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
+  }
+  handleClearClick(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.applyRange(null, null);
+    this.lastValidValue = [null, null];
+    this.open = false;
+    this.enableHoverRange = false;
+    this.emit("sl-clear");
+    this.emit("sl-input");
+    this.emit("sl-change");
+  }
+  handleBaseClick(event) {
+    if (this.disabled || this.readonly) return;
+    const path = event.composedPath();
+    const isInput = path.some((el) => el instanceof HTMLInputElement);
+    const isClear = path.some((el) => {
+      var _a;
+      return (_a = el.classList) == null ? void 0 : _a.contains("daterangepicker__clear");
+    });
+    if (isClear) return;
+    this.open = true;
+    if (!isInput) {
+      this.startInput.focus();
+    }
+  }
+  /**
+   * 更新日期范围的通用逻辑
+   * @param date 新选中的日期
+   * @param side 当前操作的是起点还是终点
+   */
+  updateDateRange(date, side) {
+    let nextStart = this.startDate;
+    let nextEnd = this.endDate;
+    let nextActiveInput = side === "start" ? "end" : "start";
+    let shouldClose = false;
+    if (side === "start") {
+      if (nextEnd && date > nextEnd) {
+        nextStart = date;
+        nextEnd = null;
+        nextActiveInput = "end";
+      } else {
+        nextStart = date;
+        if (nextEnd) {
+          shouldClose = true;
+        }
+      }
+    } else {
+      if (nextStart && date < nextStart) {
+        nextStart = null;
+        nextEnd = date;
+        nextActiveInput = "start";
+      } else {
+        nextEnd = date;
+        if (nextStart) {
+          shouldClose = true;
+        }
+      }
+    }
+    this.applyRange(nextStart, nextEnd);
+    return { nextActiveInput, shouldClose };
+  }
+  applySelectedDate(selectedDate) {
+    const selectionSide = this.activeInput;
+    if (this.rangeEditTwoStep) {
+      if (!this.rangeEditFirstSide) {
+        this.rangeEditFirstSide = selectionSide;
+        this.rangeEditExpectedSide = selectionSide === "start" ? "end" : "start";
+        const { shouldClose: shouldClose3 } = this.updateDateRange(selectedDate, selectionSide);
+        if (shouldClose3 && this.hasFocusSwitched) {
+          this.open = false;
+          this.enableHoverRange = false;
+          this.emit("sl-change");
+          this.emit("sl-input");
+          return;
+        }
+        const otherSide = selectionSide === "start" ? "end" : "start";
+        this.activeInput = otherSide;
+        if (otherSide === "start") {
+          this.startInput.focus();
+        } else {
+          this.endInput.focus();
+        }
+        if (this.type === "datetime") {
+          this.enableHoverRange = true;
+          const targetDate = otherSide === "end" ? this.endDate : this.startDate;
+          if (targetDate) {
+            this.leftDate = new Date(targetDate);
+          }
+        }
+        this.emit("sl-input");
+        return;
+      }
+      const { shouldClose: shouldClose2 } = this.updateDateRange(selectedDate, selectionSide);
+      if (shouldClose2) {
+        const isExpectedSide = this.rangeEditExpectedSide && selectionSide === this.rangeEditExpectedSide;
+        if (isExpectedSide || this.hasFocusSwitched) {
+          this.open = false;
+          this.enableHoverRange = false;
+          this.emit("sl-change");
+          this.emit("sl-input");
+          return;
+        }
+      }
+      const nextSide = selectionSide === "start" ? "end" : "start";
+      this.activeInput = nextSide;
+      if (nextSide === "start") {
+        this.startInput.focus();
+      } else {
+        this.endInput.focus();
+      }
+      if (this.type === "datetime") {
+        const targetDate = nextSide === "end" ? this.endDate : this.startDate;
+        if (targetDate) {
+          this.leftDate = new Date(targetDate);
+        }
+      }
+      this.emit("sl-input");
+      return;
+    }
+    if (!this.startDate && !this.endDate) {
+      if (selectionSide === "start") {
+        this.applyRange(selectedDate, null);
+        this.activeInput = "end";
+        this.endInput.focus();
+      } else {
+        this.applyRange(null, selectedDate);
+        this.activeInput = "start";
+        this.startInput.focus();
+      }
+      if (this.type === "datetime") {
+        this.enableHoverRange = true;
+      }
+      this.emit("sl-input");
+      return;
+    }
+    const { nextActiveInput, shouldClose } = this.updateDateRange(selectedDate, selectionSide);
+    if (shouldClose) {
+      this.open = false;
+      this.enableHoverRange = false;
+      this.emit("sl-change");
+    } else {
+      this.activeInput = nextActiveInput;
+      if (nextActiveInput === "start") {
+        this.startInput.focus();
+      } else {
+        this.endInput.focus();
+      }
+      if (this.type === "datetime") {
+        this.enableHoverRange = true;
+        const targetDate = nextActiveInput === "end" ? this.endDate : this.startDate;
+        if (targetDate) {
+          this.leftDate = new Date(targetDate);
+        }
+      }
+    }
+    this.emit("sl-input");
+  }
+  handleDateSelect(event) {
+    if (this.disabled || this.readonly) return;
+    this.applySelectedDate(event.detail.date);
+  }
+  handleDateChange(event) {
+    if (this.disabled || this.readonly) return;
+    if (this.type !== "datetime") return;
+    const selectedDate = event.detail.date;
+    const column = event.detail.column;
+    if (!column) {
+      if (this.activeInput === "end") {
+        const existingEndDate = this.endDate;
+        if (!existingEndDate || existingEndDate.getHours() === 0 && existingEndDate.getMinutes() === 0 && existingEndDate.getSeconds() === 0) {
+          selectedDate.setHours(23, 59, 59, 0);
+        }
+      }
+    }
+    this.updateDateRange(selectedDate, this.activeInput);
+    this.leftDate = new Date(selectedDate);
+    this.emit("sl-input");
+  }
+  handleReadonlyChange() {
+    if (this.readonly) {
+      this.open = false;
+    }
+  }
+  addMonths(date, delta, day = 1) {
+    const d = new Date(date);
+    d.setMonth(d.getMonth() + delta, day);
+    d.setHours(0, 0, 0, 0);
+    return d;
+  }
+  syncCalendarsToInputDate(date, side = "start") {
+    if (this.type === "datetime") {
+      this.leftDate = new Date(date);
+      this.rightDate = new Date(date);
+      return;
+    }
+    if (side === "end") {
+      this.rightDate = new Date(date);
+      this.leftDate = this.addMonths(date, -1, 1);
+    } else {
+      this.leftDate = new Date(date);
+      this.rightDate = this.addMonths(date, 1, 1);
+    }
+  }
+  async handleCalendarViewChange(event) {
+    const view = event.detail.view;
+    const initialCalendars = Array.from(this.calendars);
+    const target = event.currentTarget;
+    let isLeftTarget = false;
+    let isRightTarget = false;
+    if (this.type === "datetime") {
+      isLeftTarget = true;
+    } else if (this.calendarView !== "days") {
+      if (this.calendarViewAnchor === "right") {
+        isRightTarget = true;
+      } else {
+        isLeftTarget = true;
+      }
+    } else {
+      const rightCalendar = initialCalendars[1];
+      if (rightCalendar && target === rightCalendar) {
+        isRightTarget = true;
+      } else {
+        isLeftTarget = true;
+      }
+    }
+    if (view === "days" || view === "months" || view === "years") {
+      this.calendarView = view;
+    }
+    if (view === "months" || view === "years") {
+      this.calendarViewAnchor = isRightTarget ? "right" : "left";
+    }
+    const newDate = event.detail.date;
+    if (!newDate) {
+      await this.updateComplete;
+      const calendars = Array.from(this.calendars);
+      if (view === "months" || view === "years") {
+        if (calendars.length > 0) {
+          calendars[0].setView(view);
+        }
+      } else if (view === "days") {
+        if (calendars.length > 0) calendars[0].setView("days");
+        if (calendars.length > 1) calendars[1].setView("days");
+      }
+      return;
+    }
+    if (isLeftTarget) {
+      this.leftDate = new Date(newDate);
+      const leftMonth = this.leftDate.getFullYear() * 12 + this.leftDate.getMonth();
+      const rightMonth = this.rightDate.getFullYear() * 12 + this.rightDate.getMonth();
+      if (leftMonth >= rightMonth) {
+        this.rightDate = this.addMonths(this.leftDate, 1, 1);
+      }
+    } else {
+      this.rightDate = new Date(newDate);
+      const rightMonth = this.rightDate.getFullYear() * 12 + this.rightDate.getMonth();
+      const leftDate = this.leftDate;
+      const leftMonth = leftDate.getFullYear() * 12 + leftDate.getMonth();
+      if (rightMonth <= leftMonth) {
+        this.leftDate = this.addMonths(this.rightDate, -1, 1);
+      }
+    }
+  }
+  isDateDisabled(date) {
+    const minDate = this.min ? parseDatetime(this.min, this.type) : null;
+    const maxDate = this.max ? parseDatetime(this.max, this.type) : null;
+    if (minDate && date < minDate || maxDate && date > maxDate) {
+      return true;
+    }
+    if (this.startDate && this.endDate && !this.hasFocusSwitched) {
+      return false;
+    }
+    const normalizeToDay = (d) => {
+      const n = new Date(d);
+      n.setHours(0, 0, 0, 0);
+      return n;
+    };
+    if (this.activeInput === "start" && this.endDate) {
+      return date > normalizeToDay(this.endDate);
+    }
+    if (this.activeInput === "end" && this.startDate) {
+      return date < normalizeToDay(this.startDate);
+    }
+    return false;
+  }
+  getCalendarRange() {
+    const start = this.startDate;
+    const end = this.endDate;
+    if (start && end && start.getTime() > end.getTime()) {
+      if (this.activeInput === "end") {
+        return [null, end];
+      }
+      return [start, null];
+    }
+    return [start, end];
+  }
+  normalizeCalendarDate(date) {
+    if (!date) return null;
+    const normalized = new Date(date);
+    normalized.setHours(0, 0, 0, 0);
+    return normalized;
+  }
+  // ─── Mobile-specific methods ───
+  isMobileDateDisabled(date) {
+    const minDate = this.min ? parseDatetime(this.min, this.type) : null;
+    const maxDate = this.max ? parseDatetime(this.max, this.type) : null;
+    if (minDate && date < minDate || maxDate && date > maxDate) return true;
+    if (!this.mobileInteracted) return false;
+    const normalizeToDay = (d) => {
+      const n = new Date(d);
+      n.setHours(0, 0, 0, 0);
+      return n;
+    };
+    if (this.activeInput === "start" && this.endDate) {
+      return date > normalizeToDay(this.endDate);
+    }
+    if (this.activeInput === "end" && this.startDate) {
+      return date < normalizeToDay(this.startDate);
+    }
+    return false;
+  }
+  handleMobileCancel() {
+    this.open = false;
+    this.pendingDate = null;
+    this.pendingSide = null;
+    this.applyRange(this.mobileOpenSnapshot[0], this.mobileOpenSnapshot[1]);
+    this.lastValidValue = [this.mobileOpenSnapshot[0], this.mobileOpenSnapshot[1]];
+  }
+  handleMobileClear() {
+    this.applyRange(null, null);
+    this.lastValidValue = [null, null];
+    this.open = false;
+    this.emit("sl-clear");
+    this.emit("sl-input");
+    this.emit("sl-change");
+  }
+  handleMobileConfirm() {
+    this.open = false;
+    this.lastValidValue = [this.startDate, this.endDate];
+    this.emit("sl-input");
+    this.emit("sl-change");
+  }
+  handleMobileDateSelect(event) {
+    if (this.disabled || this.readonly) return;
+    this.mobileInteracted = true;
+    const selectedDate = event.detail.date;
+    if (this.type === "datetime") {
+      const displayFormat = this.getDisplayFormat();
+      const { showHour, showMinute, showSecond } = getTimeColumnsFromFormat(displayFormat);
+      if (showHour || showMinute || showSecond) {
+        this.pendingDate = selectedDate;
+        this.pendingSide = this.activeInput;
+        const existingDate = this.activeInput === "start" ? this.startDate : this.endDate;
+        const timeDate = new Date(selectedDate);
+        if (existingDate) {
+          timeDate.setHours(existingDate.getHours(), existingDate.getMinutes(), existingDate.getSeconds());
+        } else {
+          if (this.activeInput === "end") {
+            timeDate.setHours(23, 59, 59, 0);
+          } else {
+            timeDate.setHours(0, 0, 0, 0);
+          }
+        }
+        this.wheelDate = timeDate;
+        this.mobilePickerView = "time";
+        this.updateComplete.then(() => this.scrollToTimeWheelDate());
+        return;
+      }
+    }
+    if (this.activeInput === "start") {
+      if (this.endDate && selectedDate > this.endDate) {
+        this.applyRange(selectedDate, null);
+        this.activeInput = "end";
+      } else if (!this.endDate) {
+        this.applyRange(selectedDate, null);
+        this.activeInput = "end";
+      } else {
+        this.applyRange(selectedDate, this.endDate);
+      }
+    } else {
+      if (this.startDate && selectedDate < this.startDate) {
+        this.applyRange(null, selectedDate);
+        this.activeInput = "start";
+      } else if (!this.startDate) {
+        this.applyRange(null, selectedDate);
+        this.activeInput = "start";
+      } else {
+        this.applyRange(this.startDate, selectedDate);
+      }
+    }
+    this.leftDate = new Date(selectedDate);
+    this.emit("sl-input");
+  }
+  syncMobileCalendarToActive() {
+    const targetDate = this.activeInput === "end" ? this.endDate : this.startDate;
+    if (targetDate) {
+      this.leftDate = new Date(targetDate);
+      this.updateComplete.then(() => {
+        var _a;
+        const cal = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+          ".daterangepicker-mobile__calendar sl-calendar-picker"
+        );
+        if (cal) cal.setCurrentDate(this.leftDate);
+      });
+    }
+  }
+  handleMobileFooterClick(side) {
+    if (this.activeInput === side) return;
+    this.mobileInteracted = true;
+    this.activeInput = side;
+    this.syncMobileCalendarToActive();
+  }
+  handleMobileViewChange(event) {
+    const view = event.detail.view;
+    if (view === "years" || view === "months") {
+      event.preventDefault();
+      this.mobilePickerView = "wheel";
+      let currentDate = this.activeInput === "end" ? this.endDate : this.startDate;
+      if (!currentDate) currentDate = /* @__PURE__ */ new Date();
+      this.wheelDate = new Date(currentDate);
+      this.wheelDate.setDate(1);
+      const minDate = parseDatetime(String(this.min)) || new Date(1, 0, 1);
+      const minYear = minDate.getFullYear();
+      const yearIndex = this.wheelDate.getFullYear() - minYear;
+      if (yearIndex >= 0) {
+        this.yearScrollTop = yearIndex * WHEEL_ITEM_HEIGHT;
+      }
+      this.updateComplete.then(() => this.scrollToWheelDate());
+    }
+  }
+  scrollToWheelDate() {
+    if (this.yearColumn) {
+      const minDate = parseDatetime(String(this.min)) || new Date(1, 0, 1);
+      const minYear = minDate.getFullYear();
+      const yearIndex = this.wheelDate.getFullYear() - minYear;
+      if (yearIndex >= 0) {
+        const scrollTop = yearIndex * WHEEL_ITEM_HEIGHT;
+        this.yearColumn.scrollTop = scrollTop;
+        this.yearScrollTop = scrollTop;
+      }
+    }
+    if (this.monthColumn) {
+      const monthIndex = this.wheelDate.getMonth();
+      this.monthColumn.scrollTop = (108 + monthIndex) * WHEEL_ITEM_HEIGHT;
+    }
+  }
+  handleWheelScroll(event, type) {
+    const target = event.target;
+    const itemHeight = WHEEL_ITEM_HEIGHT;
+    const scrollTop = target.scrollTop;
+    const index = Math.round(scrollTop / itemHeight);
+    if (type === "year") {
+      const minDate = parseDatetime(String(this.min)) || new Date(1, 0, 1);
+      const minYear = minDate.getFullYear();
+      const maxDate = parseDatetime(String(this.max)) || new Date(9999, 11, 31);
+      const maxYear = maxDate.getFullYear();
+      const year = Math.max(minYear, Math.min(maxYear, minYear + index));
+      if (year !== this.wheelDate.getFullYear()) {
+        this.wheelDate = new Date(this.wheelDate.setFullYear(year));
+      }
+      if (Math.abs(scrollTop - this.yearScrollTop) > WHEEL_ITEM_HEIGHT * 2) {
+        this.yearScrollTop = scrollTop;
+      }
+    } else {
+      const currentSet = Math.floor(index / 12);
+      const centerSet = 9;
+      if (Math.abs(currentSet - centerSet) > 5) {
+        const relativeMonthIndex = index % 12;
+        target.scrollTop = (centerSet * 12 + relativeMonthIndex) * itemHeight;
+      }
+      const newIndex = Math.round(target.scrollTop / itemHeight);
+      const monthIndex = newIndex % 12;
+      if (monthIndex !== this.wheelDate.getMonth()) {
+        this.wheelDate = new Date(this.wheelDate.setMonth(monthIndex));
+        this.requestUpdate();
+      }
+    }
+  }
+  async handleWheelConfirm() {
+    var _a;
+    const newDate = new Date(this.wheelDate);
+    this.mobilePickerView = "calendar";
+    await this.updateComplete;
+    this.leftDate = newDate;
+    const cal = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector(
+      ".daterangepicker-mobile__calendar sl-calendar-picker"
+    );
+    if (cal) cal.setCurrentDate(newDate);
+  }
+  handleWheelCancel() {
+    this.mobilePickerView = "calendar";
+  }
+  // ─── Mobile Time Wheel Picker (for type='datetime') ───
+  scrollToTimeWheelDate() {
+    const itemHeight = WHEEL_ITEM_HEIGHT;
+    const centerSet = 9;
+    if (this.hourColumn) {
+      this.hourColumn.scrollTop = (centerSet * 24 + this.wheelDate.getHours()) * itemHeight;
+    }
+    if (this.minuteColumn) {
+      this.minuteColumn.scrollTop = (centerSet * 60 + this.wheelDate.getMinutes()) * itemHeight;
+    }
+    if (this.secondColumn) {
+      this.secondColumn.scrollTop = (centerSet * 60 + this.wheelDate.getSeconds()) * itemHeight;
+    }
+  }
+  handleTimeWheelScroll(event, type) {
+    const target = event.target;
+    const itemHeight = WHEEL_ITEM_HEIGHT;
+    const scrollTop = target.scrollTop;
+    const index = Math.round(scrollTop / itemHeight);
+    const range = type === "hour" ? 24 : 60;
+    const centerSet = 9;
+    if (Math.abs(Math.floor(index / range) - centerSet) > 5) {
+      const relativeIndex = index % range;
+      target.scrollTop = (centerSet * range + relativeIndex) * itemHeight;
+    }
+    const newIndex = Math.round(target.scrollTop / itemHeight);
+    const val = newIndex % range;
+    if (type === "hour" && val !== this.wheelDate.getHours()) {
+      this.wheelDate = new Date(this.wheelDate.setHours(val));
+    } else if (type === "minute" && val !== this.wheelDate.getMinutes()) {
+      this.wheelDate = new Date(this.wheelDate.setMinutes(val));
+    } else if (type === "second" && val !== this.wheelDate.getSeconds()) {
+      this.wheelDate = new Date(this.wheelDate.setSeconds(val));
+    }
+    this.requestUpdate();
+  }
+  handleTimeWheelConfirm() {
+    if (!this.pendingDate || !this.pendingSide) return;
+    const finalDate = new Date(this.pendingDate);
+    finalDate.setHours(this.wheelDate.getHours(), this.wheelDate.getMinutes(), this.wheelDate.getSeconds());
+    const side = this.pendingSide;
+    this.pendingDate = null;
+    this.pendingSide = null;
+    this.mobilePickerView = "calendar";
+    if (side === "start") {
+      if (this.endDate && finalDate > this.endDate) {
+        this.applyRange(finalDate, null);
+        this.activeInput = "end";
+      } else if (!this.endDate) {
+        this.applyRange(finalDate, null);
+        this.activeInput = "end";
+      } else {
+        this.applyRange(finalDate, this.endDate);
+      }
+    } else {
+      if (this.startDate && finalDate < this.startDate) {
+        this.applyRange(null, finalDate);
+        this.activeInput = "start";
+      } else if (!this.startDate) {
+        this.applyRange(null, finalDate);
+        this.activeInput = "start";
+      } else {
+        this.applyRange(this.startDate, finalDate);
+      }
+    }
+    this.emit("sl-input");
+    this.updateComplete.then(() => {
+      this.syncMobileCalendarToActive();
+    });
+  }
+  padStart(num, length = 2) {
+    return String(num).padStart(length, "0");
+  }
+  renderMobileTimeWheelPicker() {
+    const displayFormat = this.getDisplayFormat();
+    const { showHour, showMinute, showSecond } = getTimeColumnsFromFormat(displayFormat);
+    const hours = Array.from({ length: 24 }, (_, i) => i);
+    const minutes = Array.from({ length: 60 }, (_, i) => i);
+    const seconds = Array.from({ length: 60 }, (_, i) => i);
+    const displayHours = Array.from({ length: 19 }, () => hours).flat();
+    const displayMinutes = Array.from({ length: 19 }, () => minutes).flat();
+    const displaySeconds = Array.from({ length: 19 }, () => seconds).flat();
+    const currentHour = this.wheelDate.getHours();
+    const currentMinute = this.wheelDate.getMinutes();
+    const currentSecond = this.wheelDate.getSeconds();
+    return html`
+      <div class="daterangepicker-mobile__wheel-picker daterangepicker-mobile__wheel-picker--time">
+        <div class="daterangepicker-mobile__wheel-header flex-justify-end">
+          <sl-button variant="text" @click=${this.handleTimeWheelConfirm}>${LOCALE.confirmText}</sl-button>
+        </div>
+        <div class="daterangepicker-mobile__wheel-labels">
+          ${showHour ? html`<div>${LOCALE.hour}</div>` : null} ${showMinute ? html`<div>${LOCALE.minute}</div>` : null}
+          ${showSecond ? html`<div>${LOCALE.second}</div>` : null}
+        </div>
+        <div class="daterangepicker-mobile__wheel-body">
+          <div class="daterangepicker-mobile__wheel-translate-top"></div>
+          <div class="daterangepicker-mobile__wheel-highlight"></div>
+          <div class="daterangepicker-mobile__wheel-translate-bottom"></div>
+
+          ${showHour ? html`
+                <div
+                  class="daterangepicker-mobile__wheel-column daterangepicker-mobile__wheel-column--hour"
+                  @scroll=${(e) => this.handleTimeWheelScroll(e, "hour")}
+                >
+                  <div class="daterangepicker-mobile__wheel-spacer"></div>
+                  ${displayHours.map(
+      (h, index) => html`
+                      <div
+                        class=${classMap({
+        "daterangepicker-mobile__wheel-item": true,
+        "daterangepicker-mobile__wheel-item--selected": index % 24 === currentHour
+      })}
+                      >
+                        ${this.padStart(h)}
+                      </div>
+                    `
+    )}
+                  <div class="daterangepicker-mobile__wheel-spacer"></div>
+                </div>
+              ` : null}
+          ${showMinute ? html`
+                <div
+                  class="daterangepicker-mobile__wheel-column daterangepicker-mobile__wheel-column--minute"
+                  @scroll=${(e) => this.handleTimeWheelScroll(e, "minute")}
+                >
+                  <div class="daterangepicker-mobile__wheel-spacer"></div>
+                  ${displayMinutes.map(
+      (m, index) => html`
+                      <div
+                        class=${classMap({
+        "daterangepicker-mobile__wheel-item": true,
+        "daterangepicker-mobile__wheel-item--selected": index % 60 === currentMinute
+      })}
+                      >
+                        ${this.padStart(m)}
+                      </div>
+                    `
+    )}
+                  <div class="daterangepicker-mobile__wheel-spacer"></div>
+                </div>
+              ` : null}
+          ${showSecond ? html`
+                <div
+                  class="daterangepicker-mobile__wheel-column daterangepicker-mobile__wheel-column--second"
+                  @scroll=${(e) => this.handleTimeWheelScroll(e, "second")}
+                >
+                  <div class="daterangepicker-mobile__wheel-spacer"></div>
+                  ${displaySeconds.map(
+      (s, index) => html`
+                      <div
+                        class=${classMap({
+        "daterangepicker-mobile__wheel-item": true,
+        "daterangepicker-mobile__wheel-item--selected": index % 60 === currentSecond
+      })}
+                      >
+                        ${this.padStart(s)}
+                      </div>
+                    `
+    )}
+                  <div class="daterangepicker-mobile__wheel-spacer"></div>
+                </div>
+              ` : null}
+        </div>
+        ${this.renderMobileFooter()}
+      </div>
+    `;
+  }
+  renderMobileCalendarContent(displayStartDate, displayEndDate) {
+    return html`
+      ${this.renderMobileHeader()}
+      <div class="daterangepicker-mobile__calendar">
+        <sl-calendar-picker
+          .value=${""}
+          type="date"
+          mode="range"
+          .startDate=${displayStartDate}
+          .endDate=${displayEndDate}
+          .activeInput=${this.activeInput}
+          .min=${ifDefined(this.min)}
+          .max=${ifDefined(this.max)}
+          .currentDate=${this.leftDate}
+          .syncViewWithValue=${false}
+          .disabledDate=${(date) => this.isMobileDateDisabled(date)}
+          @sl-date-select=${this.handleMobileDateSelect}
+          @sl-view-change=${this.handleMobileViewChange}
+          @click=${(event) => event.stopPropagation()}
+        ></sl-calendar-picker>
+      </div>
+      ${this.renderMobileFooter()}
+    `;
+  }
+  renderMobileHeader() {
+    const hasAnyValue = !!(this.startDate || this.endDate);
+    const isConfirmDisabled = !(this.startDate && this.endDate);
+    return html`
+      <div class="daterangepicker-mobile__header">
+        <div class="daterangepicker-mobile__header-left">
+          <sl-button variant="text" @click=${this.handleMobileCancel}>${LOCALE.cancelText}</sl-button>
+          <sl-button variant="text" @click=${this.handleMobileClear} ?disabled=${!hasAnyValue}
+            >${LOCALE.clearText}</sl-button
+          >
+        </div>
+        <sl-button
+          class="daterangepicker-mobile__confirm-btn"
+          variant="text"
+          @click=${this.handleMobileConfirm}
+          ?disabled=${isConfirmDisabled}
+          >${LOCALE.confirmText}</sl-button
+        >
+      </div>
+    `;
+  }
+  renderMobileFooter() {
+    const displayFormat = this.getDisplayFormat();
+    const startText = this.startDate ? formatDatetime(this.startDate, displayFormat) : this.startPlaceholder;
+    const endText = this.endDate ? formatDatetime(this.endDate, displayFormat) : this.endPlaceholder;
+    return html`
+      <div class="daterangepicker-mobile__footer">
+        <div
+          class=${classMap({
+      "daterangepicker-mobile__footer-item": true,
+      "daterangepicker-mobile__footer-item--active": this.activeInput === "start",
+      "daterangepicker-mobile__footer-item--empty": !this.startDate
+    })}
+          @click=${() => this.handleMobileFooterClick("start")}
+        >
+          ${startText}
+        </div>
+        <span class="daterangepicker-mobile__footer-separator">～</span>
+        <div
+          class=${classMap({
+      "daterangepicker-mobile__footer-item": true,
+      "daterangepicker-mobile__footer-item--active": this.activeInput === "end",
+      "daterangepicker-mobile__footer-item--empty": !this.endDate
+    })}
+          @click=${() => this.handleMobileFooterClick("end")}
+        >
+          ${endText}
+        </div>
+      </div>
+    `;
+  }
+  renderMobileWheelPicker() {
+    const minDate = parseDatetime(String(this.min)) || new Date(1, 0, 1);
+    const maxDate = parseDatetime(String(this.max)) || new Date(9999, 11, 31);
+    const minYear = minDate.getFullYear();
+    const maxYear = maxDate.getFullYear();
+    const totalYears = maxYear - minYear + 1;
+    const itemHeight = WHEEL_ITEM_HEIGHT;
+    const buffer = 50;
+    const scrollTop = this.yearScrollTop;
+    const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - buffer);
+    const endIndex = Math.min(totalYears, Math.ceil((scrollTop + 500) / itemHeight) + buffer);
+    const visibleYears = [];
+    for (let i = startIndex; i < endIndex; i++) {
+      visibleYears.push({ year: minYear + i });
+    }
+    const months = Array.from({ length: 12 }, (_, i) => i + 1);
+    const displayMonths = Array(19).fill(months).flat();
+    const currentYear = this.wheelDate.getFullYear();
+    const currentMonth = this.wheelDate.getMonth() + 1;
+    return html`
+      <div class="daterangepicker-mobile__wheel-picker">
+        <div class="daterangepicker-mobile__wheel-header">
+          <sl-button variant="text" @click=${this.handleWheelCancel}>${LOCALE.cancelText}</sl-button>
+          <sl-button variant="text" @click=${this.handleWheelConfirm}>${LOCALE.confirmText}</sl-button>
+        </div>
+        <div class="daterangepicker-mobile__wheel-current">
+          ${currentYear}${LOCALE.year}&nbsp;${currentMonth}${LOCALE.month}
+        </div>
+        <div class="daterangepicker-mobile__wheel-labels">
+          <div>${LOCALE.year}</div>
+          <div>${LOCALE.month}</div>
+        </div>
+        <div class="daterangepicker-mobile__wheel-body">
+          <div class="daterangepicker-mobile__wheel-translate-top"></div>
+          <div class="daterangepicker-mobile__wheel-highlight"></div>
+          <div class="daterangepicker-mobile__wheel-translate-bottom"></div>
+          <div
+            class="daterangepicker-mobile__wheel-column daterangepicker-mobile__wheel-column--year"
+            @scroll=${(e) => this.handleWheelScroll(e, "year")}
+          >
+            <div class="daterangepicker-mobile__wheel-spacer"></div>
+            <div style="height: ${startIndex * itemHeight}px; flex-shrink: 0;"></div>
+            ${visibleYears.map(
+      (item) => html`
+                <div
+                  class="daterangepicker-mobile__wheel-item ${classMap({
+        "daterangepicker-mobile__wheel-item--selected": item.year === currentYear
+      })}"
+                >
+                  ${item.year}
+                </div>
+              `
+    )}
+            <div style="height: ${(totalYears - endIndex) * itemHeight}px; flex-shrink: 0;"></div>
+            <div class="daterangepicker-mobile__wheel-spacer"></div>
+          </div>
+          <div
+            class="daterangepicker-mobile__wheel-column daterangepicker-mobile__wheel-column--month"
+            @scroll=${(e) => this.handleWheelScroll(e, "month")}
+          >
+            <div class="daterangepicker-mobile__wheel-spacer"></div>
+            ${displayMonths.map(
+      (month, index) => html`
+                <div
+                  class="daterangepicker-mobile__wheel-item ${classMap({
+        "daterangepicker-mobile__wheel-item--selected": index % 12 + 1 === currentMonth
+      })}"
+                >
+                  ${month}
+                </div>
+              `
+    )}
+            <div class="daterangepicker-mobile__wheel-spacer"></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  renderMobile() {
+    const hasLabel = this.label ? true : !!this.hasSlotController.test("label");
+    const hasHelpText = this.helpText ? true : !!this.hasSlotController.test("help-text");
+    const [calendarStartDate, calendarEndDate] = this.getCalendarRange();
+    const displayStartDate = this.normalizeCalendarDate(calendarStartDate);
+    const displayEndDate = this.normalizeCalendarDate(calendarEndDate);
+    return html`
+      <div
+        part="form-control"
+        class=${classMap({
+      "form-control": true,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--has-label": hasLabel,
+      "form-control--has-help-text": hasHelpText
+    })}
+      >
+        <label
+          part="form-control-label"
+          class="form-control__label"
+          for="start-input"
+          aria-hidden=${hasLabel ? "false" : "true"}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div part="form-control-input" class="form-control__input">
+          <div
+            slot="anchor"
+            part="base"
+            class=${classMap({
+      daterangepicker: true,
+      "daterangepicker--standard": !this.filled,
+      "daterangepicker--filled": this.filled,
+      "daterangepicker--pill": this.pill,
+      "daterangepicker--disabled": this.disabled,
+      "daterangepicker--focused": this.open,
+      "daterangepicker--empty": !this.startValue && !this.endValue,
+      "daterangepicker--small": this.size === "small",
+      "daterangepicker--medium": this.size === "medium",
+      "daterangepicker--large": this.size === "large"
+    })}
+            @click=${() => {
+      if (!this.disabled && !this.readonly) {
+        this.activeInput = "start";
+        this.open = true;
+      }
+    }}
+          >
+            <span class="daterangepicker__control-wrapper">
+              <span
+                class="daterangepicker__control daterangepicker__control--start"
+                style="color: ${this.startValue ? "var(--sl-input-color)" : "var(--sl-input-placeholder-color)"}"
+                >${this.startValue || this.startPlaceholder}</span
+              >
+            </span>
+
+            <span part="separator" class="daterangepicker__separator">～</span>
+
+            <span class="daterangepicker__control-wrapper">
+              <span
+                class="daterangepicker__control daterangepicker__control--end"
+                style="color: ${this.endValue ? "var(--sl-input-color)" : "var(--sl-input-placeholder-color)"}"
+                >${this.endValue || this.endPlaceholder}</span
+              >
+            </span>
+
+            <div part="suffix" class="daterangepicker__suffix">
+              <slot name="suffix">
+                <sl-icon name="calendar4"></sl-icon>
+              </slot>
+            </div>
+          </div>
+
+          <sl-drawer
+            class="daterangepicker-mobile__drawer"
+            placement="bottom"
+            ?open=${this.open}
+            no-header
+            @sl-request-close=${(event) => {
+      if (event.detail.source === "overlay" || event.detail.source === "keyboard") {
+        event.preventDefault();
+        this.handleMobileCancel();
+      }
+    }}
+          >
+            ${this.renderMobileCalendarContent(displayStartDate, displayEndDate)}
+            ${this.mobilePickerView === "wheel" ? this.renderMobileWheelPicker() : this.mobilePickerView === "time" ? this.renderMobileTimeWheelPicker() : null}
+          </sl-drawer>
+        </div>
+
+        <div
+          part="form-control-help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? "false" : "true"}
+        >
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    if (this.isMobile) {
+      return this.renderMobile();
+    }
+    const hasLabel = this.label ? true : !!this.hasSlotController.test("label");
+    const hasHelpText = this.helpText ? true : !!this.hasSlotController.test("help-text");
+    const isClearable = this.clearable && (this.startValue || this.endValue) && !this.disabled && !this.readonly && (this.hasFocus || this.isHovered);
+    const showDualCalendars = this.calendarView === "days" && this.type !== "datetime";
+    const singleCalendarIsRight = !showDualCalendars && this.calendarViewAnchor === "right";
+    const [calendarStartDate, calendarEndDate] = this.getCalendarRange();
+    const displayStartDate = this.type === "datetime" ? this.normalizeCalendarDate(calendarStartDate) : calendarStartDate;
+    const displayEndDate = this.type === "datetime" ? this.normalizeCalendarDate(calendarEndDate) : calendarEndDate;
+    const effectiveHoverDate = this.type === "datetime" ? this.enableHoverRange ? this.normalizeCalendarDate(this.hoverDate) : null : this.hoverDate;
+    const displayFormat = this.getDisplayFormat();
+    const calendarValue = this.type === "datetime" ? this.activeInput === "end" ? this.endDate ? formatDatetime(this.endDate, displayFormat) : "" : this.startDate ? formatDatetime(this.startDate, displayFormat) : "" : singleCalendarIsRight ? this.endValue : this.startValue;
+    return html`
+      <div
+        part="form-control"
+        class=${classMap({
+      "form-control": true,
+      "form-control--small": this.size === "small",
+      "form-control--medium": this.size === "medium",
+      "form-control--large": this.size === "large",
+      "form-control--has-label": hasLabel,
+      "form-control--has-help-text": hasHelpText
+    })}
+      >
+        <label
+          part="form-control-label"
+          class="form-control__label"
+          for="start-input"
+          aria-hidden=${hasLabel ? "false" : "true"}
+        >
+          <slot name="label">${this.label}</slot>
+        </label>
+
+        <div part="form-control-input" class="form-control__input">
+          <sl-popup
+            part="popup"
+            class="daterangepicker__popup"
+            exportparts="popup"
+            ?active=${this.open}
+            placement="bottom-start"
+            strategy="fixed"
+            flip
+            shift
+            auto-size="vertical"
+            auto-size-padding="10"
+          >
+            <div
+              slot="anchor"
+              part="base"
+              class=${classMap({
+      daterangepicker: true,
+      "daterangepicker--standard": !this.filled,
+      "daterangepicker--filled": this.filled,
+      "daterangepicker--pill": this.pill,
+      "daterangepicker--disabled": this.disabled,
+      "daterangepicker--focused": this.hasFocus,
+      "daterangepicker--empty": !this.startValue && !this.endValue,
+      "daterangepicker--small": this.size === "small",
+      "daterangepicker--medium": this.size === "medium",
+      "daterangepicker--large": this.size === "large"
+    })}
+              @click=${this.handleBaseClick}
+              @mouseenter=${() => this.isHovered = true}
+              @mouseleave=${() => this.isHovered = false}
+            >
+              <span
+                class=${classMap({
+      "daterangepicker__control-wrapper": true,
+      "daterangepicker__control-wrapper--active": this.activeInput === "start" && this.open
+    })}
+              >
+                <input
+                  id="start-input"
+                  part="start-input"
+                  class=${classMap({
+      daterangepicker__control: true,
+      "daterangepicker__control--start": true
+    })}
+                  type="text"
+                  title=${this.startValue}
+                  name=${ifDefined(this.name ? `${this.name}-start` : void 0)}
+                  .value=${live(this.startValue)}
+                  placeholder=${this.startPlaceholder}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  ?required=${this.required}
+                  autocomplete="off"
+                  @input=${this.handleInput}
+                  @change=${this.handleChange}
+                  @keydown=${this.handleInputKeyDown}
+                  @focus=${this.handleFocus}
+                  @blur=${this.handleBlur}
+                  @invalid=${this.handleInvalid}
+                />
+              </span>
+
+              <span part="separator" class="daterangepicker__separator">～</span>
+
+              <span
+                class=${classMap({
+      "daterangepicker__control-wrapper": true,
+      "daterangepicker__control-wrapper--active": this.activeInput === "end" && this.open
+    })}
+              >
+                <input
+                  id="end-input"
+                  part="end-input"
+                  class=${classMap({
+      daterangepicker__control: true,
+      "daterangepicker__control--end": true
+    })}
+                  type="text"
+                  title=${this.endValue}
+                  name=${ifDefined(this.name ? `${this.name}-end` : void 0)}
+                  .value=${live(this.endValue)}
+                  placeholder=${this.endPlaceholder}
+                  ?disabled=${this.disabled}
+                  ?readonly=${this.readonly}
+                  ?required=${this.required}
+                  autocomplete="off"
+                  @input=${this.handleInput}
+                  @change=${this.handleChange}
+                  @keydown=${this.handleInputKeyDown}
+                  @focus=${this.handleFocus}
+                  @blur=${this.handleBlur}
+                  @invalid=${this.handleInvalid}
+                />
+              </span>
+
+              <span
+                part="clear-button"
+                class=${classMap({
+      daterangepicker__clear: true,
+      "daterangepicker__clear--hidden": !isClearable
+    })}
+                @click=${this.handleClearClick}
+                aria-label=${this.localize.term("clearEntry")}
+              >
+                <sl-icon name="x-lg" library="system"></sl-icon>
+              </span>
+
+              <div part="suffix" class="daterangepicker__suffix" ?hidden=${isClearable}>
+                <slot name="suffix">
+                  <sl-icon name="calendar4"></sl-icon>
+                </slot>
+              </div>
+            </div>
+
+            <div
+              part="calendars"
+              class=${classMap({
+      daterangepicker__calendars: true,
+      "daterangepicker__calendars--single": !showDualCalendars
+    })}
+              @mousedown=${(e) => e.preventDefault()}
+              @mouseleave=${() => this.hoverDate = null}
+            >
+              <sl-calendar-picker
+                exportparts="
+                   base:calendar-base,
+                   header:calendar-header,
+                   nav-button:calendar-nav-button,
+                   title:calendar-title,
+                   title-year:calendar-title-year,
+                   title-month:calendar-title-month,
+                   body:calendar-body,
+                   date-panel:calendar-date-panel,
+                   day-header:calendar-day-header,
+                   day:calendar-day,
+                   day-footer:calendar-day-footer,
+                   month-grid:calendar-month-grid,
+                   month-item:calendar-month-item,
+                   year-grid:calendar-year-grid,
+                   year-item:calendar-year-item,
+                   time-footer:calendar-time-footer,
+                   time-panel-base:calendar-time-base,
+                   time-panel-header:calendar-time-header,
+                   time-panel-columns:calendar-time-columns,
+                   time-panel-column:calendar-time-column,
+                   time-panel-item:calendar-time-item
+                 "
+                .value=${calendarValue}
+                type=${this.type}
+                mode="range"
+                .startDate=${displayStartDate}
+                .endDate=${displayEndDate}
+                .hoverDate=${effectiveHoverDate}
+                .activeInput=${this.activeInput}
+                .min=${ifDefined(this.min)}
+                .max=${ifDefined(this.max)}
+                .currentDate=${this.type === "datetime" ? this.leftDate : singleCalendarIsRight ? this.rightDate : this.leftDate}
+                .syncViewWithValue=${false}
+                .disabledDate=${(date) => this.isDateDisabled(date)}
+                @sl-date-select=${this.handleDateSelect}
+                @sl-date-change=${this.handleDateChange}
+                @sl-view-change=${this.handleCalendarViewChange}
+                @sl-date-hover=${(e) => this.hoverDate = e.detail.date}
+              ></sl-calendar-picker>
+              ${showDualCalendars ? html`
+                    <sl-calendar-picker
+                      exportparts="
+                        base:calendar-base,
+                        header:calendar-header,
+                        nav-button:calendar-nav-button,
+                        title:calendar-title,
+                        title-year:calendar-title-year,
+                        title-month:calendar-title-month,
+                        body:calendar-body,
+                        date-panel:calendar-date-panel,
+                        day-header:calendar-day-header,
+                        day:calendar-day,
+                        day-footer:calendar-day-footer,
+                        month-grid:calendar-month-grid,
+                        month-item:calendar-month-item,
+                        year-grid:calendar-year-grid,
+                        year-item:calendar-year-item,
+                        time-footer:calendar-time-footer,
+                        time-panel-base:calendar-time-base,
+                        time-panel-header:calendar-time-header,
+                        time-panel-columns:calendar-time-columns,
+                        time-panel-column:calendar-time-column,
+                        time-panel-item:calendar-time-item
+                      "
+                      .value=${this.endValue}
+                      type=${this.type}
+                      mode="range"
+                      .startDate=${displayStartDate}
+                      .endDate=${displayEndDate}
+                      .hoverDate=${effectiveHoverDate}
+                      .activeInput=${this.activeInput}
+                      .min=${ifDefined(this.min)}
+                      .max=${ifDefined(this.max)}
+                      .currentDate=${this.rightDate}
+                      .syncViewWithValue=${false}
+                      .disabledDate=${(date) => this.isDateDisabled(date)}
+                      @sl-date-select=${this.handleDateSelect}
+                      @sl-date-change=${this.handleDateChange}
+                      @sl-view-change=${this.handleCalendarViewChange}
+                      @sl-date-hover=${(e) => this.hoverDate = e.detail.date}
+                    ></sl-calendar-picker>
+                  ` : null}
+            </div>
+          </sl-popup>
+        </div>
+
+        <div
+          part="form-control-help-text"
+          class="form-control__help-text"
+          aria-hidden=${hasHelpText ? "false" : "true"}
+        >
+          <slot name="help-text">${this.helpText}</slot>
+        </div>
+      </div>
+    `;
+  }
+};
+SlDaterangepicker.styles = [component_styles_default, form_control_styles_default, daterangepicker_styles_default];
+SlDaterangepicker.dependencies = {
+  "sl-icon": SlIcon,
+  "sl-popup": SlPopup,
+  "sl-calendar-picker": SlCalendarPicker,
+  "sl-drawer": SlDrawer,
+  "sl-button": SlButton
+};
+__decorateClass([
+  query(".daterangepicker__control--start")
+], SlDaterangepicker.prototype, "startInput", 2);
+__decorateClass([
+  query(".daterangepicker__control--end")
+], SlDaterangepicker.prototype, "endInput", 2);
+__decorateClass([
+  query("sl-popup")
+], SlDaterangepicker.prototype, "popup", 2);
+__decorateClass([
+  query(".form-control__input")
+], SlDaterangepicker.prototype, "inputContainer", 2);
+__decorateClass([
+  queryAll("sl-calendar-picker")
+], SlDaterangepicker.prototype, "calendars", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "hasFocus", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "isHovered", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "open", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "activeInput", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "leftDate", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "rightDate", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "startValue", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "endValue", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "calendarView", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "calendarViewAnchor", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "syncingValue", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "hoverDate", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "enableHoverRange", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "rangeEditTwoStep", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "rangeEditFirstSide", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "rangeEditExpectedSide", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "hasFocusSwitched", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "isMobile", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "mobilePickerView", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "wheelDate", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "yearScrollTop", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "pendingDate", 2);
+__decorateClass([
+  state()
+], SlDaterangepicker.prototype, "pendingSide", 2);
+__decorateClass([
+  query(".daterangepicker-mobile__wheel-column--year")
+], SlDaterangepicker.prototype, "yearColumn", 2);
+__decorateClass([
+  query(".daterangepicker-mobile__wheel-column--month")
+], SlDaterangepicker.prototype, "monthColumn", 2);
+__decorateClass([
+  query(".daterangepicker-mobile__wheel-column--hour")
+], SlDaterangepicker.prototype, "hourColumn", 2);
+__decorateClass([
+  query(".daterangepicker-mobile__wheel-column--minute")
+], SlDaterangepicker.prototype, "minuteColumn", 2);
+__decorateClass([
+  query(".daterangepicker-mobile__wheel-column--second")
+], SlDaterangepicker.prototype, "secondColumn", 2);
+__decorateClass([
+  property()
+], SlDaterangepicker.prototype, "name", 2);
+__decorateClass([
+  property({
+    reflect: true,
+    converter: {
+      fromAttribute: (raw) => {
+        const str = (raw || "").trim();
+        if (!str) return [null, null];
+        const parts = str.split("~").map((p) => p.trim());
+        const startStr = parts[0] || "";
+        const endStr = parts[1] || "";
+        const start = startStr ? parseDatetime(startStr) : null;
+        const end = endStr ? parseDatetime(endStr) : null;
+        return [start, end];
+      },
+      toAttribute: (val) => {
+        if (!val) return "";
+        const [start, end] = val;
+        if (start && end) {
+          return `${getRangeValueFormat(start)} ~ ${getRangeValueFormat(end)}`;
+        }
+        return "";
+      }
+    }
+  })
+], SlDaterangepicker.prototype, "value", 2);
+__decorateClass([
+  defaultValue()
+], SlDaterangepicker.prototype, "defaultValue", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlDaterangepicker.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlDaterangepicker.prototype, "filled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlDaterangepicker.prototype, "pill", 2);
+__decorateClass([
+  property()
+], SlDaterangepicker.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], SlDaterangepicker.prototype, "helpText", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlDaterangepicker.prototype, "clearable", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlDaterangepicker.prototype, "disabled", 2);
+__decorateClass([
+  property({
+    converter: {
+      fromAttribute: (raw) => {
+        var _a, _b, _c, _d;
+        if (!raw) return ["\u5F00\u59CB\u65E5\u671F", "\u7ED3\u675F\u65E5\u671F"];
+        const parts = raw.split(",");
+        return [(_b = (_a = parts[0]) == null ? void 0 : _a.trim()) != null ? _b : "\u5F00\u59CB\u65E5\u671F", (_d = (_c = parts[1]) == null ? void 0 : _c.trim()) != null ? _d : "\u7ED3\u675F\u65E5\u671F"];
+      },
+      toAttribute: (val) => {
+        return `${val[0]},${val[1]}`;
+      }
+    }
+  })
+], SlDaterangepicker.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlDaterangepicker.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SlDaterangepicker.prototype, "required", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlDaterangepicker.prototype, "startDate", 2);
+__decorateClass([
+  property({ attribute: false })
+], SlDaterangepicker.prototype, "endDate", 2);
+__decorateClass([
+  property({ reflect: true })
+], SlDaterangepicker.prototype, "type", 2);
+__decorateClass([
+  property()
+], SlDaterangepicker.prototype, "min", 2);
+__decorateClass([
+  property()
+], SlDaterangepicker.prototype, "max", 2);
+__decorateClass([
+  property({
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) return void 0;
+        return value.split(",").map((f) => f.trim());
+      },
+      toAttribute: (value) => {
+        if (!value) return null;
+        if (Array.isArray(value)) return value.join(",");
+        return value;
+      }
+    }
+  })
+], SlDaterangepicker.prototype, "format", 2);
+__decorateClass([
+  watch("open", { waitUntilFirstUpdate: true })
+], SlDaterangepicker.prototype, "handleOpenChange", 1);
+__decorateClass([
+  watch("value")
+], SlDaterangepicker.prototype, "handleValueUpdate", 1);
+__decorateClass([
+  watch("readonly", { waitUntilFirstUpdate: true })
+], SlDaterangepicker.prototype, "handleReadonlyChange", 1);
+
+export {
+  SlDaterangepicker
+};