@kdcloudjs/shoelace 1.0.15 → 1.0.17

package/dist/chunks/chunk.HOUQTUQJ.js

@@ -0,0 +1,1064 @@
+import {
+  daterange_styles_default
+} from "./chunk.PZXGZKZX.js";
+import {
+  SlPopup
+} from "./chunk.KB3ECV3D.js";
+import {
+  defaultValue
+} from "./chunk.GI7VDIWX.js";
+import {
+  form_control_styles_default
+} from "./chunk.SI4ACBFK.js";
+import {
+  SlCalendar,
+  formatDatetime,
+  parseDatetime
+} from "./chunk.EVIOVHZN.js";
+import {
+  FormControlController
+} from "./chunk.WBWPWG4N.js";
+import {
+  HasSlotController
+} from "./chunk.NYIIDP5N.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
+import {
+  SlIcon
+} from "./chunk.JXWQZVRS.js";
+import {
+  watch
+} from "./chunk.55S3OOTM.js";
+import {
+  component_styles_default
+} from "./chunk.TUVJKY7S.js";
+import {
+  ShoelaceElement
+} from "./chunk.44DOAU2E.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
+};