@kdcloudjs/shoelace 1.0.29 → 1.0.31

package/dist/chunks/{chunk.LDKADK5S.js → chunk.LVUUWAFL.js}

@@ -1,9 +1,12 @@
 import {
   daterangepicker_styles_default
-} from "./chunk.4TUTWGUS.js";
+} from "./chunk.KFT7NHGH.js";
 import {
   SlPopup
 } from "./chunk.YPHENAEZ.js";
+import {
+  SlDrawer
+} from "./chunk.5XQT43Z6.js";
 import {
   defaultValue
 } from "./chunk.GI7VDIWX.js";
@@ -11,22 +14,26 @@ import {
   form_control_styles_default
 } from "./chunk.SI4ACBFK.js";
 import {
+  LOCALE,
   SlCalendar,
   formatDatetime,
   parseDatetime
-} from "./chunk.MDNVBBZH.js";
+} from "./chunk.D7XNHHL2.js";
+import {
+  SlButton
+} from "./chunk.4V3MCNCG.js";
 import {
   FormControlController
 } from "./chunk.WBWPWG4N.js";
-import {
-  LocalizeController
-} from "./chunk.6CTB5ZDJ.js";
 import {
   HasSlotController
 } from "./chunk.NYIIDP5N.js";
+import {
+  LocalizeController
+} from "./chunk.6CTB5ZDJ.js";
 import {
   SlIcon
-} from "./chunk.TJTYBIR7.js";
+} from "./chunk.XRCLRCVM.js";
 import {
   watch
 } from "./chunk.55S3OOTM.js";
@@ -76,6 +83,12 @@ var SlDaterangepicker = class extends ShoelaceElement {
     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];
@@ -104,22 +117,35 @@ var SlDaterangepicker = class extends ShoelaceElement {
   }
   /** 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;
@@ -129,6 +155,7 @@ var SlDaterangepicker = class extends ShoelaceElement {
   }
   /** 检查有效性并触发 sl-invalid 事件（如果无效） */
   checkValidity() {
+    if (!this.startInput || !this.endInput) return true;
     return this.startInput.checkValidity() && this.endInput.checkValidity();
   }
   /** 获取表单引用 */
@@ -137,21 +164,29 @@ var SlDaterangepicker = class extends ShoelaceElement {
   }
   /** 检查有效性并显示浏览器原生的有效性提示 */
   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();
@@ -293,6 +328,11 @@ var SlDaterangepicker = class extends ShoelaceElement {
   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;
@@ -328,7 +368,9 @@ var SlDaterangepicker = class extends ShoelaceElement {
       this.rangeEditExpectedSide = null;
       this.calendarView = "days";
       this.enableHoverRange = false;
-      this.commitOrRevertInputValue();
+      if (!this.isMobile) {
+        this.commitOrRevertInputValue();
+      }
     }
   }
   handleValueUpdate() {
@@ -763,7 +805,417 @@ var SlDaterangepicker = class extends ShoelaceElement {
     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);
@@ -1022,7 +1474,9 @@ SlDaterangepicker.styles = [component_styles_default, form_control_styles_defaul
 SlDaterangepicker.dependencies = {
   "sl-icon": SlIcon,
   "sl-popup": SlPopup,
-  "sl-calendar": SlCalendar
+  "sl-calendar": SlCalendar,
+  "sl-drawer": SlDrawer,
+  "sl-button": SlButton
 };
 __decorateClass([
   query(".daterangepicker__control--start")
@@ -1090,6 +1544,24 @@ __decorateClass([
 __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);

package/{cdn/chunks/chunk.RN2Q4HOE.js → dist/chunks/chunk.M4PMEYE2.js}

@@ -1,6 +1,6 @@
 import {
   SlAnimatedImage
-} from "./chunk.OHEL4NP5.js";
+} from "./chunk.PGTN7J4V.js";
 
 // src/react/animated-image/index.ts
 import * as React from "react";

package/{cdn/chunks/chunk.HH7XVAMC.js → dist/chunks/chunk.MAWNPWPF.js}

@@ -1,17 +1,25 @@
 import {
   SlDaterangepicker
-} from "./chunk.HNN73HJU.js";
+} from "./chunk.LVUUWAFL.js";
 
 // src/react/daterangepicker/index.ts
 import * as React from "react";
 import { createComponent } from "@lit/react";
+import "@lit/react";
 var tagName = "sl-daterangepicker";
 SlDaterangepicker.define("sl-daterangepicker");
 var reactWrapper = createComponent({
   tagName,
   elementClass: SlDaterangepicker,
   react: React,
-  events: {},
+  events: {
+    onSlBlur: "sl-blur",
+    onSlChange: "sl-change",
+    onSlFocus: "sl-focus",
+    onSlInput: "sl-input",
+    onSlInvalid: "sl-invalid",
+    onSlClear: "sl-clear"
+  },
   displayName: "SlDaterangepicker"
 });
 var daterangepicker_default = reactWrapper;

package/dist/chunks/{chunk.6D337CRO.js → chunk.MHCVVLCT.js}

@@ -1,6 +1,6 @@
 import {
   SlRadioGroup
-} from "./chunk.2XVFEHSO.js";
+} from "./chunk.PHBT3MJN.js";
 
 // src/components/radio-group/radio-group.ts
 var radio_group_default = SlRadioGroup;

package/dist/chunks/{chunk.QJTW7WJF.js → chunk.MHMUDAVA.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk.F2BIKL72.js";
 import {
   SlIcon
-} from "./chunk.TJTYBIR7.js";
+} from "./chunk.XRCLRCVM.js";
 import {
   component_styles_default
 } from "./chunk.TUVJKY7S.js";

package/{cdn/chunks/chunk.7X5AEKPB.js → dist/chunks/chunk.MZLRGXPI.js}

@@ -1,6 +1,6 @@
 import {
   SlBreadcrumb
-} from "./chunk.E3KU5ZUQ.js";
+} from "./chunk.ACYS3462.js";
 
 // src/react/breadcrumb/index.ts
 import * as React from "react";

package/{cdn/chunks/chunk.4N2I2AUC.js → dist/chunks/chunk.N46JKT2J.js}

@@ -1,6 +1,6 @@
 import {
   SlIconButton
-} from "./chunk.ZNIGUQLJ.js";
+} from "./chunk.QQVS2P2C.js";
 
 // src/react/icon-button/index.ts
 import * as React from "react";

package/dist/chunks/chunk.N5D2F64K.js

@@ -0,0 +1,11 @@
+import {
+  SlSenderHeader
+} from "./chunk.AZTRAFIF.js";
+
+// src/components/sender-header/sender-header.ts
+var sender_header_default = SlSenderHeader;
+SlSenderHeader.define("sl-sender-header");
+
+export {
+  sender_header_default
+};