@kdcloudjs/shoelace 1.0.31 → 1.0.32

package/dist/chunks/chunk.LVUUWAFL.js

@@ -1,1667 +0,0 @@
-import {
-  daterangepicker_styles_default
-} from "./chunk.KFT7NHGH.js";
-import {
-  SlPopup
-} from "./chunk.YPHENAEZ.js";
-import {
-  SlDrawer
-} from "./chunk.5XQT43Z6.js";
-import {
-  defaultValue
-} from "./chunk.GI7VDIWX.js";
-import {
-  form_control_styles_default
-} from "./chunk.SI4ACBFK.js";
-import {
-  LOCALE,
-  SlCalendar,
-  formatDatetime,
-  parseDatetime
-} from "./chunk.D7XNHHL2.js";
-import {
-  SlButton
-} from "./chunk.4V3MCNCG.js";
-import {
-  FormControlController
-} from "./chunk.WBWPWG4N.js";
-import {
-  HasSlotController
-} from "./chunk.NYIIDP5N.js";
-import {
-  LocalizeController
-} from "./chunk.6CTB5ZDJ.js";
-import {
-  SlIcon
-} from "./chunk.XRCLRCVM.js";
-import {
-  watch
-} from "./chunk.55S3OOTM.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.JRE3XEGV.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 formatRangeValue = (date) => {
-  const hasTime = date.getHours() !== 0 || date.getMinutes() !== 0 || date.getSeconds() !== 0;
-  return formatDatetime(date, hasTime ? "datetime" : "date");
-};
-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.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";
-    this.format = "YYYY-MM-DD";
-  }
-  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;
-  }
-  updateValueTuple() {
-    this.syncingValue = true;
-    this.value = [this.startDate, this.endDate];
-  }
-  parseDateInput(value) {
-    const raw = value.trim();
-    if (!raw) return null;
-    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;
-    this.startValue = nextStart ? formatDatetime(nextStart, this.type) : "";
-    this.endValue = nextEnd ? formatDatetime(nextEnd, this.type) : "";
-    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.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;
-    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;
-    if (this.activeInput === "start" && this.endDate) {
-      return date > this.endDate;
-    }
-    if (this.activeInput === "end" && this.startDate) {
-      return date < this.startDate;
-    }
-    return false;
-  }
-  handleMobileCancel() {
-    this.open = false;
-    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.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.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"
-        );
-        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 * 40;
-      }
-      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 * 40;
-        this.yearColumn.scrollTop = scrollTop;
-        this.yearScrollTop = scrollTop;
-      }
-    }
-    if (this.monthColumn) {
-      const monthIndex = this.wheelDate.getMonth();
-      this.monthColumn.scrollTop = (108 + monthIndex) * 40;
-    }
-  }
-  handleWheelScroll(event, type) {
-    const target = event.target;
-    const itemHeight = 40;
-    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) > 80) {
-        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");
-    if (cal) cal.setCurrentDate(newDate);
-  }
-  handleWheelCancel() {
-    this.mobilePickerView = "calendar";
-  }
-  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 startText = this.startDate ? formatDatetime(this.startDate, "date") : this.startPlaceholder;
-    const endText = this.endDate ? formatDatetime(this.endDate, "date") : 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 = 40;
-    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="padding: 0 var(--sl-spacing-x-small); display: flex; align-items: center; 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="padding: 0 var(--sl-spacing-x-small); display: flex; align-items: center; 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.mobilePickerView === "wheel" ? this.renderMobileWheelPicker() : html`
-                  ${this.renderMobileHeader()}
-                  <div class="daterangepicker-mobile__calendar">
-                    <sl-calendar
-                      .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>
-                  </div>
-                  ${this.renderMobileFooter()}
-                `}
-          </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 calendarValue = this.type === "datetime" ? this.activeInput === "end" ? this.endDate ? formatDatetime(this.endDate, this.type) : "" : this.startDate ? formatDatetime(this.startDate, this.type) : "" : 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
-                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>
-              ${showDualCalendars ? html`
-                    <sl-calendar
-                      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>
-                  ` : 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": SlCalendar,
-  "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")
-], 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([
-  query(".daterangepicker-mobile__wheel-column--year")
-], SlDaterangepicker.prototype, "yearColumn", 2);
-__decorateClass([
-  query(".daterangepicker-mobile__wheel-column--month")
-], SlDaterangepicker.prototype, "monthColumn", 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) => {
-        const [start, end] = val || [null, null];
-        if (start && end) {
-          return `${formatRangeValue(start)} ~ ${formatRangeValue(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()
-], 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
-};