@kdcloudjs/shoelace 1.0.20 → 1.0.22

package/dist/chunks/chunk.UKM7FUXP.js

@@ -1,1064 +0,0 @@
-import {
-  daterange_styles_default
-} from "./chunk.PZXGZKZX.js";
-import {
-  SlPopup
-} from "./chunk.NLNIFQB7.js";
-import {
-  defaultValue
-} from "./chunk.GI7VDIWX.js";
-import {
-  form_control_styles_default
-} from "./chunk.SI4ACBFK.js";
-import {
-  SlCalendar,
-  formatDatetime,
-  parseDatetime
-} from "./chunk.TMW55T5C.js";
-import {
-  FormControlController
-} from "./chunk.WBWPWG4N.js";
-import {
-  LocalizeController
-} from "./chunk.6CTB5ZDJ.js";
-import {
-  HasSlotController
-} from "./chunk.NYIIDP5N.js";
-import {
-  SlIcon
-} from "./chunk.KJRYOAIQ.js";
-import {
-  watch
-} from "./chunk.55S3OOTM.js";
-import {
-  component_styles_default
-} from "./chunk.TUVJKY7S.js";
-import {
-  ShoelaceElement
-} from "./chunk.I5YU6K4U.js";
-import {
-  __decorateClass
-} from "./chunk.W5KB6T3Z.js";
-
-// src/components/daterange/daterange.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 SlDaterange = 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.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.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.startPlaceholder = "\u5F00\u59CB\u65E5\u671F";
-    this.endPlaceholder = "\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";
-  }
-  /** Gets the validity state object */
-  get validity() {
-    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() {
-    return this.startInput.validationMessage || this.endInput.validationMessage;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
-    document.addEventListener("mousedown", this.handleDocumentMouseDown);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("mousedown", this.handleDocumentMouseDown);
-  }
-  handleDocumentMouseDown(event) {
-    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() {
-    return this.startInput.checkValidity() && this.endInput.checkValidity();
-  }
-  /** 获取表单引用 */
-  getForm() {
-    return this.formControlController.getForm();
-  }
-  /** 检查有效性并显示浏览器原生的有效性提示 */
-  reportValidity() {
-    return this.startInput.reportValidity() && this.endInput.reportValidity();
-  }
-  /** 设置自定义有效性消息 */
-  setCustomValidity(message) {
-    this.startInput.setCustomValidity(message);
-    this.endInput.setCustomValidity(message);
-    this.formControlController.updateValidity();
-  }
-  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) {
-      this.enableHoverRange = false;
-      this.rangeEditTwoStep = !!(this.startDate && this.endDate);
-      this.rangeEditFirstSide = null;
-      this.rangeEditExpectedSide = null;
-      if (this.startDate || this.endDate) {
-        this.syncCalendarsToValue();
-      } 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);
-      }
-    } else {
-      this.rangeEditTwoStep = false;
-      this.rangeEditFirstSide = null;
-      this.rangeEditExpectedSide = null;
-      this.calendarView = "days";
-      this.enableHoverRange = false;
-      this.commitOrRevertInputValue();
-      if (this.type === "datetime") {
-        await this.updateComplete;
-        const calendars = Array.from(this.calendars);
-        calendars.forEach((calendar) => calendar.resetView());
-      }
-    }
-  }
-  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;
-    this.activeInput = target.classList.contains("daterange__control--start") ? "start" : "end";
-    if (this.type === "datetime" && this.startDate && this.endDate) {
-      this.enableHoverRange = true;
-    }
-    if (!this.disabled && !this.readonly) {
-      this.open = true;
-    }
-    this.emit("sl-focus");
-  }
-  handleInput(event) {
-    const target = event.target;
-    let parsed;
-    if (!this.open) {
-      this.open = !this.open;
-    }
-    if (target.classList.contains("daterange__control--start")) {
-      this.startValue = target.value;
-      parsed = this.parseDateInput(target.value);
-      this.startDate = parsed;
-    } else {
-      this.endValue = target.value;
-      parsed = this.parseDateInput(target.value);
-      this.endDate = parsed;
-    }
-    if (parsed) {
-      this.syncCalendarsToValue();
-    }
-    this.formControlController.updateValidity();
-    this.emit("sl-input");
-    this.updateValueTuple();
-  }
-  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;
-      if (this.isDateDisabled(parsedDate)) return;
-      event.preventDefault();
-      event.stopPropagation();
-      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("daterange__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;
-        }
-        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();
-      }
-      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;
-      }
-    }
-    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.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;
-  }
-  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;
-    }
-    if (this.activeInput === "start" && this.endDate) {
-      return date > this.endDate;
-    }
-    if (this.activeInput === "end" && this.startDate) {
-      return date < this.startDate;
-    }
-    return false;
-  }
-  getCalendarRange() {
-    const start = this.startDate;
-    const end = this.endDate;
-    if (start && end && start.getTime() > end.getTime()) {
-      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;
-  }
-  render() {
-    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;
-    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.endValue : this.startValue : 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="daterange__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({
-      daterange: true,
-      "daterange--standard": !this.filled,
-      "daterange--filled": this.filled,
-      "daterange--pill": this.pill,
-      "daterange--disabled": this.disabled,
-      "daterange--focused": this.hasFocus,
-      "daterange--empty": !this.startValue && !this.endValue,
-      "daterange--small": this.size === "small",
-      "daterange--medium": this.size === "medium",
-      "daterange--large": this.size === "large"
-    })}
-              @click=${this.handleBaseClick}
-            >
-              <span
-                class=${classMap({
-      "daterange__control-wrapper": true,
-      "daterange__control-wrapper--active": this.activeInput === "start" && this.open
-    })}
-              >
-                <input
-                  id="start-input"
-                  part="start-input"
-                  class=${classMap({
-      daterange__control: true,
-      "daterange__control--start": true
-    })}
-                  type="text"
-                  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>
-
-              <div part="separator" class="daterange__separator">~</div>
-
-              <span
-                class=${classMap({
-      "daterange__control-wrapper": true,
-      "daterange__control-wrapper--active": this.activeInput === "end" && this.open
-    })}
-              >
-                <input
-                  id="end-input"
-                  part="end-input"
-                  class=${classMap({
-      daterange__control: true,
-      "daterange__control--end": true
-    })}
-                  type="text"
-                  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>
-
-              <button
-                part="clear-button"
-                class=${classMap({
-      daterange__clear: true,
-      "daterange__clear--hidden": !isClearable
-    })}
-                type="button"
-                @mousedown=${(event) => event.preventDefault()}
-                @click=${this.handleClearClick}
-                aria-label=${this.localize.term("clearEntry")}
-                tabindex="-1"
-              >
-                <sl-icon name="x-circle-fill" library="system"></sl-icon>
-              </button>
-
-              <div part="suffix" class="daterange__suffix">
-                <slot name="suffix">
-                  <sl-icon name="calendar4"></sl-icon>
-                </slot>
-              </div>
-            </div>
-
-            <div
-              part="calendars"
-              class=${classMap({
-      daterange__calendars: true,
-      "daterange__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
-                 "
-                .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
-                      "
-                      .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>
-    `;
-  }
-};
-SlDaterange.styles = [component_styles_default, form_control_styles_default, daterange_styles_default];
-SlDaterange.dependencies = {
-  "sl-icon": SlIcon,
-  "sl-popup": SlPopup,
-  "sl-calendar": SlCalendar
-};
-__decorateClass([
-  query(".daterange__control--start")
-], SlDaterange.prototype, "startInput", 2);
-__decorateClass([
-  query(".daterange__control--end")
-], SlDaterange.prototype, "endInput", 2);
-__decorateClass([
-  query("sl-popup")
-], SlDaterange.prototype, "popup", 2);
-__decorateClass([
-  query(".form-control__input")
-], SlDaterange.prototype, "inputContainer", 2);
-__decorateClass([
-  queryAll("sl-calendar")
-], SlDaterange.prototype, "calendars", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "hasFocus", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "open", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "activeInput", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "leftDate", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "rightDate", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "startValue", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "endValue", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "calendarView", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "calendarViewAnchor", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "syncingValue", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "hoverDate", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "enableHoverRange", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "rangeEditTwoStep", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "rangeEditFirstSide", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "rangeEditExpectedSide", 2);
-__decorateClass([
-  state()
-], SlDaterange.prototype, "hasFocusSwitched", 2);
-__decorateClass([
-  property()
-], SlDaterange.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 "";
-      }
-    }
-  })
-], SlDaterange.prototype, "value", 2);
-__decorateClass([
-  defaultValue()
-], SlDaterange.prototype, "defaultValue", 2);
-__decorateClass([
-  property({ reflect: true })
-], SlDaterange.prototype, "size", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SlDaterange.prototype, "filled", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SlDaterange.prototype, "pill", 2);
-__decorateClass([
-  property()
-], SlDaterange.prototype, "label", 2);
-__decorateClass([
-  property({ attribute: "help-text" })
-], SlDaterange.prototype, "helpText", 2);
-__decorateClass([
-  property({ type: Boolean })
-], SlDaterange.prototype, "clearable", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SlDaterange.prototype, "disabled", 2);
-__decorateClass([
-  property({ attribute: "start-placeholder" })
-], SlDaterange.prototype, "startPlaceholder", 2);
-__decorateClass([
-  property({ attribute: "end-placeholder" })
-], SlDaterange.prototype, "endPlaceholder", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SlDaterange.prototype, "readonly", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], SlDaterange.prototype, "required", 2);
-__decorateClass([
-  property({ attribute: false })
-], SlDaterange.prototype, "startDate", 2);
-__decorateClass([
-  property({ attribute: false })
-], SlDaterange.prototype, "endDate", 2);
-__decorateClass([
-  property({ reflect: true })
-], SlDaterange.prototype, "type", 2);
-__decorateClass([
-  property()
-], SlDaterange.prototype, "min", 2);
-__decorateClass([
-  property()
-], SlDaterange.prototype, "max", 2);
-__decorateClass([
-  property()
-], SlDaterange.prototype, "format", 2);
-__decorateClass([
-  watch("open", { waitUntilFirstUpdate: true })
-], SlDaterange.prototype, "handleOpenChange", 1);
-__decorateClass([
-  watch("value")
-], SlDaterange.prototype, "handleValueUpdate", 1);
-__decorateClass([
-  watch("readonly", { waitUntilFirstUpdate: true })
-], SlDaterange.prototype, "handleReadonlyChange", 1);
-
-export {
-  SlDaterange
-};