@xmesh/system-design 0.0.1 → 0.0.3

package/dist/lit/components/date-range/index.js

@@ -0,0 +1,702 @@
+/*
+  date-range/index.ts — <xm-date-range>
+
+  A field-styled trigger that opens an anchored popover holding a vertical preset
+  rail + an accessible calendar grid for selecting a date range. Emits ISO
+  yyyy-mm-dd strings.
+
+  Composes the xm-overlay foundation (Story 1.4) for anchored positioning,
+  top-layer stacking, Esc dismissal, and focus-restore — it does NOT hand-roll
+  z-index, anchoring math, or the close-on-Esc path. The overlay runs in the
+  `menu` tier and is driven through its PUBLIC API only (mode / tier / placement /
+  .anchor / .opener / show / hide / xm-overlay-close); we never reach into its
+  shadow root (AD-12). Because the overlay's non-modal popover is
+  `popover="manual"` (no native light-dismiss), outside-click dismissal is owned
+  here, and the panel keeps its own Tab focus-cycle (role="dialog").
+
+  Properties:
+    from         string | null   ISO yyyy-mm-dd start (controlled)
+    to           string | null   ISO yyyy-mm-dd end (controlled)
+    placeholder  string          trigger placeholder (default "Date range")
+    open         boolean         reflected open state (also a preview hook)
+
+  Events (AD-8 / AD-8a, tier (b)):
+    xm-date-range-change  detail { from, to }  — ISO yyyy-mm-dd strings.
+      Presets emit IMMEDIATELY and close; the calendar emits only on explicit
+      Apply; Clear emits { null, null }. bubbles:true, composed:true.
+
+  Behaviour:
+    - Presets (Today / Last 7 days / Last 30 days / This month) apply on click,
+      emit, and close. "Custom" just reveals the calendar (no emit).
+    - Calendar: click an endpoint, then a second to complete the range; Apply
+      commits. Clear resets.
+
+  A11y (critical):
+    - panel role="dialog" + aria-labelledby; initial focus = current start
+      endpoint (or today if unset); on close focus → trigger (via overlay.opener).
+    - calendar role="grid", roving tabindex (one day tabindex=0, rest -1),
+      aria-current="date" on today, aria-selected on chosen days, each day's
+      accessible name is the FULL date (e.g. "Tuesday, April 14, 2026").
+    - PageUp/PageDown change month and announce the new month/year via a polite
+      live region inside the component.
+    - preset rail role="radiogroup" with aria-checked.
+    - invalid range (from>to): role="alert" message + Apply aria-disabled
+      (still focusable, NOT hard-disabled).
+
+  Shadow DOM. Depends on xm-overlay + tokens (AD-12). Lit is a bare `import`.
+*/
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, svg, nothing } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+const DR_CSS = new URL("../date-range/index.css", import.meta.url).href;
+let drSeq = 0;
+const PRESETS = [
+    { id: "today", label: "Today" },
+    { id: "last7", label: "Last 7 days" },
+    { id: "last30", label: "Last 30 days" },
+    { id: "month", label: "This month" },
+    { id: "custom", label: "Custom" },
+];
+const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+const CAL_ICON = () => svg `
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
+       stroke-linejoin="round" aria-hidden="true">
+    <rect x="3" y="4" width="18" height="18" rx="2" />
+    <path d="M16 2v4M8 2v4M3 10h18" />
+  </svg>
+`;
+const CHEVRON_LEFT = () => svg `
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
+       stroke-linejoin="round" aria-hidden="true">
+    <polyline points="15 18 9 12 15 6" />
+  </svg>
+`;
+const CHEVRON_RIGHT = () => svg `
+  <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
+       stroke-linejoin="round" aria-hidden="true">
+    <polyline points="9 18 15 12 9 6" />
+  </svg>
+`;
+const ALERT_ICON = () => svg `
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="1.8" stroke-linecap="round"
+       stroke-linejoin="round" aria-hidden="true">
+    <path d="M12 9v4M12 17h.01" />
+    <path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+  </svg>
+`;
+/* ---------- date utilities (all local, no Intl-day-arithmetic) ---------- */
+function pad(n) {
+    return n < 10 ? `0${n}` : `${n}`;
+}
+function toISO(d) {
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+function fromISO(s) {
+    if (!s)
+        return null;
+    const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);
+    if (!m)
+        return null;
+    const y = Number(m[1]);
+    const mo = Number(m[2]) - 1;
+    const da = Number(m[3]);
+    const d = new Date(y, mo, da);
+    if (Number.isNaN(d.getTime()))
+        return null;
+    // new Date normalizes overflow (Feb 30 → Mar 2), so a structurally-valid but
+    // non-existent date would silently round-trip out as a different ISO string.
+    // Reject it by checking the components survived the round-trip.
+    if (d.getFullYear() !== y || d.getMonth() !== mo || d.getDate() !== da) {
+        return null;
+    }
+    return d;
+}
+function sameDay(a, b) {
+    return (a.getFullYear() === b.getFullYear() &&
+        a.getMonth() === b.getMonth() &&
+        a.getDate() === b.getDate());
+}
+function startOfDay(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+function addDays(d, n) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+}
+const MONTH_FMT = new Intl.DateTimeFormat(undefined, {
+    month: "long",
+    year: "numeric",
+});
+const FULL_FMT = new Intl.DateTimeFormat(undefined, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+    year: "numeric",
+});
+const SHORT_FMT = new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+});
+let XmDateRange = class XmDateRange extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.from = null;
+        this.to = null;
+        this.placeholder = "Date range";
+        this.open = false;
+        this._id = `xm-date-range-${++drSeq}`;
+        // Draft selection inside the calendar (not committed until Apply).
+        this._draftFrom = null;
+        this._draftTo = null;
+        // The month currently displayed in the calendar (first of month).
+        this._view = startOfDay(new Date());
+        // The day that owns roving tabindex=0.
+        this._focusDay = startOfDay(new Date());
+        this._liveMsg = "";
+        this._activePreset = null;
+        // Guards re-entrancy between our hide() and the overlay's xm-overlay-close.
+        this._closing = false;
+        this._onDocPointer = (e) => {
+            if (!this.open)
+                return;
+            if (!e.composedPath().includes(this))
+                this._close(false);
+        };
+        this._onOverlayClose = () => {
+            // Overlay self-dismissed (Esc). It already restored focus to the trigger
+            // via .opener; just sync our state.
+            if (this.open && !this._closing) {
+                this.open = false;
+            }
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener("pointerdown", this._onDocPointer, true);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener("pointerdown", this._onDocPointer, true);
+    }
+    /* ---------- open / close ---------- */
+    _initDraft() {
+        const start = fromISO(this.from);
+        const end = fromISO(this.to);
+        this._draftFrom = start;
+        this._draftTo = end;
+        const anchor = start ?? startOfDay(new Date());
+        this._view = new Date(anchor.getFullYear(), anchor.getMonth(), 1);
+        this._focusDay = anchor;
+        this._activePreset = null;
+        this._liveMsg = "";
+    }
+    _toggle() {
+        if (this.open)
+            this._close(false);
+        else
+            this.open = true;
+    }
+    _close(restoreFocus) {
+        if (!this.open)
+            return;
+        this._closing = true;
+        this.open = false;
+        const ov = this._overlay;
+        if (ov?.open)
+            ov.hide("api");
+        this._closing = false;
+        if (restoreFocus)
+            requestAnimationFrame(() => this._trigger?.focus());
+    }
+    _focusRovingDay() {
+        const el = this._panel?.querySelector('.date-range__day[tabindex="0"]');
+        el?.focus();
+    }
+    /* ---------- presets ---------- */
+    _applyPreset(id) {
+        if (id === "custom") {
+            this._activePreset = "custom";
+            return;
+        }
+        const today = startOfDay(new Date());
+        let from;
+        let to;
+        switch (id) {
+            case "today":
+                from = today;
+                to = today;
+                break;
+            case "last7":
+                from = addDays(today, -6);
+                to = today;
+                break;
+            case "last30":
+                from = addDays(today, -29);
+                to = today;
+                break;
+            case "month":
+                from = new Date(today.getFullYear(), today.getMonth(), 1);
+                to = today;
+                break;
+            default:
+                return;
+        }
+        this._emit(from, to);
+        this._close(true);
+    }
+    /* ---------- calendar selection ---------- */
+    _pickDay(day) {
+        this._activePreset = "custom";
+        if (!this._draftFrom || (this._draftFrom && this._draftTo)) {
+            // start a fresh range
+            this._draftFrom = day;
+            this._draftTo = null;
+            this._liveMsg = `Start date ${FULL_FMT.format(day)} selected, choose end date`;
+        }
+        else {
+            // completing the range; order them
+            if (day < this._draftFrom) {
+                this._draftTo = this._draftFrom;
+                this._draftFrom = day;
+            }
+            else {
+                this._draftTo = day;
+            }
+            this._liveMsg = `Range ${FULL_FMT.format(this._draftFrom)} to ${FULL_FMT.format(this._draftTo)} selected`;
+        }
+        this._focusDay = day;
+        // Picking a muted leading/trailing cell scrolls the calendar to that month
+        // so the header + roving tabindex don't strand on an out-of-month day.
+        if (day.getMonth() !== this._view.getMonth() ||
+            day.getFullYear() !== this._view.getFullYear()) {
+            this._view = new Date(day.getFullYear(), day.getMonth(), 1);
+        }
+    }
+    get _invalid() {
+        return !!(this._draftFrom &&
+            this._draftTo &&
+            this._draftFrom > this._draftTo);
+    }
+    _apply() {
+        if (!this._draftFrom || !this._draftTo || this._invalid)
+            return;
+        this._emit(this._draftFrom, this._draftTo);
+        this._close(true);
+    }
+    _clear() {
+        this._draftFrom = null;
+        this._draftTo = null;
+        this._activePreset = null;
+        // Only emit when there was actually a committed range to clear, so a Clear
+        // on an already-empty picker doesn't fire a no-op change.
+        if (this.from !== null || this.to !== null) {
+            this._emit(null, null);
+        }
+        this._close(true);
+    }
+    _emit(from, to) {
+        const detail = {
+            from: from ? toISO(from) : null,
+            to: to ? toISO(to) : null,
+        };
+        this.from = detail.from;
+        this.to = detail.to;
+        this.dispatchEvent(new CustomEvent("xm-date-range-change", {
+            detail,
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /* ---------- month nav ---------- */
+    _shiftMonth(delta) {
+        this._view = new Date(this._view.getFullYear(), this._view.getMonth() + delta, 1);
+        this._liveMsg = MONTH_FMT.format(this._view);
+    }
+    /* ---------- keyboard (roving grid + Tab-cycle + PageUp/Down) ---------- */
+    _onGridKey(e) {
+        let next = null;
+        switch (e.key) {
+            case "ArrowRight":
+                next = addDays(this._focusDay, 1);
+                break;
+            case "ArrowLeft":
+                next = addDays(this._focusDay, -1);
+                break;
+            case "ArrowDown":
+                next = addDays(this._focusDay, 7);
+                break;
+            case "ArrowUp":
+                next = addDays(this._focusDay, -7);
+                break;
+            case "Home":
+                next = addDays(this._focusDay, -((this._focusDay.getDay() + 6) % 7));
+                break;
+            case "End":
+                next = addDays(this._focusDay, 6 - ((this._focusDay.getDay() + 6) % 7));
+                break;
+            case "PageUp":
+                e.preventDefault();
+                this._shiftMonth(-1);
+                next = new Date(this._view.getFullYear(), this._view.getMonth(), Math.min(this._focusDay.getDate(), this._daysInMonth(this._view)));
+                break;
+            case "PageDown":
+                e.preventDefault();
+                this._shiftMonth(1);
+                next = new Date(this._view.getFullYear(), this._view.getMonth(), Math.min(this._focusDay.getDate(), this._daysInMonth(this._view)));
+                break;
+            // Enter / Space are handled by the focused day's native <button>
+            // (activation → @click → _pickDay). Intercepting them here too would
+            // double-fire on Space (button activates on keyup, after this keydown).
+            default:
+                return;
+        }
+        if (next) {
+            e.preventDefault();
+            this._focusDay = next;
+            if (next.getMonth() !== this._view.getMonth() ||
+                next.getFullYear() !== this._view.getFullYear()) {
+                this._view = new Date(next.getFullYear(), next.getMonth(), 1);
+            }
+            requestAnimationFrame(() => this._focusRovingDay());
+        }
+    }
+    _panelFocusables() {
+        if (!this._panel)
+            return [];
+        const sel = 'button:not([disabled]),[role="radio"],[tabindex]:not([tabindex="-1"])';
+        return Array.from(this._panel.querySelectorAll(sel)).filter((el) => el.getClientRects().length > 0);
+    }
+    // Esc is owned by the overlay (innermost-only). Here we only keep Tab inside
+    // the role="dialog" panel — the non-modal popover does not trap natively.
+    _onPanelKey(e) {
+        if (e.key !== "Tab")
+            return;
+        const items = this._panelFocusables();
+        if (items.length === 0) {
+            e.preventDefault();
+            return;
+        }
+        const first = items[0];
+        const last = items[items.length - 1];
+        const active = this.shadowRoot?.activeElement;
+        if (e.shiftKey && (active === first || active === this._panel)) {
+            e.preventDefault();
+            last.focus();
+        }
+        else if (!e.shiftKey && active === last) {
+            e.preventDefault();
+            first.focus();
+        }
+    }
+    _daysInMonth(view) {
+        return new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
+    }
+    /* ---------- overlay reconcile ---------- */
+    willUpdate(changed) {
+        // Initialise the draft from the committed from/to whenever we open — covers
+        // both trigger-open and an externally set `open` (stories / preview hook).
+        if (changed.has("open") && this.open)
+            this._initDraft();
+    }
+    updated(changed) {
+        if (changed.has("open")) {
+            const ov = this._overlay;
+            const trigger = this._trigger;
+            if (this.open && ov && trigger) {
+                ov.anchor = trigger;
+                ov.opener = trigger;
+                ov.show();
+                requestAnimationFrame(() => {
+                    if (this.open)
+                        this._focusRovingDay();
+                });
+            }
+            else if (!this.open && ov?.open) {
+                ov.hide("api");
+            }
+        }
+    }
+    /* ---------- render ---------- */
+    render() {
+        const labelId = `${this._id}-title`;
+        const triggerCls = `date-range__trigger${this.open ? " date-range__trigger--open" : ""}`;
+        return html `
+      <link rel="stylesheet" href="${DR_CSS}" />
+      <style>
+        :host { display: inline-block; }
+        :host([hidden]) { display: none; }
+      </style>
+      <button
+        type="button"
+        class="${triggerCls}"
+        aria-haspopup="dialog"
+        aria-expanded="${this.open ? "true" : "false"}"
+        @click=${() => this._toggle()}
+      >
+        <span class="date-range__icon">${CAL_ICON()}</span>
+        ${this._renderTriggerValue()}
+      </button>
+
+      <xm-overlay
+        mode="non-modal"
+        tier="menu"
+        placement="bottom-start"
+        label="Date range"
+        @xm-overlay-close=${this._onOverlayClose}
+      >
+        ${this.open ? this._renderPanel(labelId) : nothing}
+      </xm-overlay>
+    `;
+    }
+    _renderTriggerValue() {
+        const start = fromISO(this.from);
+        const end = fromISO(this.to);
+        if (start && end) {
+            const label = `${SHORT_FMT.format(start)} – ${SHORT_FMT.format(end)}`;
+            return html `<span class="date-range__value">${label}</span>`;
+        }
+        return html `<span class="date-range__value date-range__value--placeholder"
+      >${this.placeholder}</span
+    >`;
+    }
+    _renderPanel(labelId) {
+        return html `
+      <div
+        class="date-range__panel"
+        role="dialog"
+        aria-labelledby="${labelId}"
+        @keydown=${(e) => this._onPanelKey(e)}
+      >
+        <span id="${labelId}" class="date-range__sr-only">Select a date range</span>
+        <div class="date-range__layout">
+          ${this._renderRail()} ${this._renderCalendar()}
+        </div>
+        ${this._invalid
+            ? html `<div
+              class="date-range__alert"
+              role="alert"
+              id="${labelId}-alert"
+            >
+              <span class="date-range__alert-icon">${ALERT_ICON()}</span>
+              <span>End date is before start date</span>
+            </div>`
+            : nothing}
+        ${this._renderFooter(labelId)}
+        <span class="date-range__sr-only" aria-live="polite"
+          >${this._liveMsg}</span
+        >
+      </div>
+    `;
+    }
+    _renderRail() {
+        return html `
+      <div
+        class="date-range__rail"
+        role="radiogroup"
+        aria-label="Date range presets"
+      >
+        ${PRESETS.map((p) => {
+            const active = this._activePreset === p.id;
+            const cls = `date-range__preset${active ? " date-range__preset--active" : ""}`;
+            return html `<button
+            type="button"
+            class="${cls}"
+            role="radio"
+            aria-checked="${active ? "true" : "false"}"
+            @click=${() => this._applyPreset(p.id)}
+          >
+            ${p.label}
+          </button>`;
+        })}
+      </div>
+    `;
+    }
+    _renderCalendar() {
+        return html `
+      <div class="date-range__calendar">
+        <div class="date-range__cal-head">
+          <button
+            type="button"
+            class="date-range__nav"
+            aria-label="Previous month"
+            @click=${() => this._shiftMonth(-1)}
+          >
+            ${CHEVRON_LEFT()}
+          </button>
+          <span class="date-range__month" aria-hidden="true"
+            >${MONTH_FMT.format(this._view)}</span
+          >
+          <button
+            type="button"
+            class="date-range__nav"
+            aria-label="Next month"
+            @click=${() => this._shiftMonth(1)}
+          >
+            ${CHEVRON_RIGHT()}
+          </button>
+        </div>
+        <div
+          class="date-range__grid"
+          role="grid"
+          aria-label="${MONTH_FMT.format(this._view)}"
+          @keydown=${(e) => this._onGridKey(e)}
+        >
+          <div class="date-range__weekdays" role="row">
+            ${WEEKDAYS.map((w) => html `<span
+                  class="date-range__weekday"
+                  role="columnheader"
+                  aria-hidden="true"
+                  >${w}</span
+                >`)}
+          </div>
+          ${this._renderWeeks()}
+        </div>
+      </div>
+    `;
+    }
+    _renderWeeks() {
+        const year = this._view.getFullYear();
+        const month = this._view.getMonth();
+        const first = new Date(year, month, 1);
+        // Monday-first offset (JS getDay: 0=Sun).
+        const lead = (first.getDay() + 6) % 7;
+        const gridStart = addDays(first, -lead);
+        const today = startOfDay(new Date());
+        const weeks = [];
+        // Six role="row" weeks of seven gridcells — the ARIA grid requires rows
+        // between the grid and its cells (the row wrappers are display:contents so
+        // the 7-column CSS grid is unaffected).
+        for (let w = 0; w < 6; w++) {
+            const cells = [];
+            for (let d = 0; d < 7; d++) {
+                const day = addDays(gridStart, w * 7 + d);
+                cells.push(this._renderDay(day, month, today));
+            }
+            weeks.push(html `<div class="date-range__week" role="row">${cells}</div>`);
+        }
+        return weeks;
+    }
+    _renderDay(day, viewMonth, today) {
+        const inMonth = day.getMonth() === viewMonth;
+        const isToday = sameDay(day, today);
+        const isFocus = sameDay(day, this._focusDay);
+        const start = this._draftFrom;
+        const end = this._draftTo;
+        const isStart = start && sameDay(day, start);
+        const isEnd = end && sameDay(day, end);
+        const selected = !!(isStart || isEnd);
+        const inRange = !!(start && end && day > start && day < end);
+        const cellCls = [
+            "date-range__cell",
+            inRange && "date-range__cell--in-range",
+            isStart && end && "date-range__cell--start",
+            isEnd && start && "date-range__cell--end",
+        ]
+            .filter(Boolean)
+            .join(" ");
+        const dayCls = [
+            "date-range__day",
+            !inMonth && "date-range__day--muted",
+            isToday && "date-range__day--today",
+            selected && "date-range__day--selected",
+        ]
+            .filter(Boolean)
+            .join(" ");
+        return html `
+      <div
+        class="${cellCls}"
+        role="gridcell"
+        aria-selected="${selected ? "true" : "false"}"
+      >
+        <button
+          type="button"
+          class="${dayCls}"
+          tabindex="${isFocus ? "0" : "-1"}"
+          aria-label="${FULL_FMT.format(day)}"
+          aria-current="${isToday ? "date" : nothing}"
+          @click=${() => this._pickDay(day)}
+        >
+          ${day.getDate()}
+        </button>
+      </div>
+    `;
+    }
+    _renderFooter(labelId) {
+        const canApply = !!(this._draftFrom && this._draftTo) && !this._invalid;
+        return html `
+      <div class="date-range__footer">
+        <button
+          type="button"
+          class="date-range__btn"
+          @click=${() => this._clear()}
+        >
+          Clear
+        </button>
+        <button
+          type="button"
+          class="date-range__btn date-range__btn--apply"
+          aria-disabled="${canApply ? "false" : "true"}"
+          aria-describedby="${this._invalid ? `${labelId}-alert` : nothing}"
+          @click=${() => this._apply()}
+        >
+          Apply
+        </button>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], XmDateRange.prototype, "from", void 0);
+__decorate([
+    property({ type: String })
+], XmDateRange.prototype, "to", void 0);
+__decorate([
+    property({ type: String })
+], XmDateRange.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], XmDateRange.prototype, "open", void 0);
+__decorate([
+    state()
+], XmDateRange.prototype, "_id", void 0);
+__decorate([
+    state()
+], XmDateRange.prototype, "_draftFrom", void 0);
+__decorate([
+    state()
+], XmDateRange.prototype, "_draftTo", void 0);
+__decorate([
+    state()
+], XmDateRange.prototype, "_view", void 0);
+__decorate([
+    state()
+], XmDateRange.prototype, "_focusDay", void 0);
+__decorate([
+    state()
+], XmDateRange.prototype, "_liveMsg", void 0);
+__decorate([
+    state()
+], XmDateRange.prototype, "_activePreset", void 0);
+__decorate([
+    query("xm-overlay")
+], XmDateRange.prototype, "_overlay", void 0);
+__decorate([
+    query(".date-range__trigger")
+], XmDateRange.prototype, "_trigger", void 0);
+__decorate([
+    query(".date-range__panel")
+], XmDateRange.prototype, "_panel", void 0);
+XmDateRange = __decorate([
+    customElement("xm-date-range")
+], XmDateRange);
+export { XmDateRange };