@latty-ds/web 0.2.0

package/dist/components/date-input/index.js

@@ -0,0 +1,2863 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/components/date-input/date-input.ts
+import { html as html3, nothing } from "lit";
+import { customElement as customElement3, property as property4, state as state2 } from "lit/decorators.js";
+
+// src/base/themeable-element.ts
+import { LitElement } from "lit";
+import { property } from "lit/decorators.js";
+var ThemeableElement = class extends LitElement {
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("theme")) {
+      this._syncThemeAttribute();
+    }
+  }
+  _syncThemeAttribute() {
+    if (this.theme === "dark" || this.theme === "light") {
+      this.setAttribute("data-theme", this.theme);
+    } else {
+      this.removeAttribute("data-theme");
+    }
+  }
+};
+__decorateClass([
+  property({ reflect: true })
+], ThemeableElement.prototype, "theme", 2);
+
+// src/components/date-input/date-input.ts
+import "@latty-ds/icons";
+
+// src/components/calendar/calendar.ts
+import { html } from "lit";
+import { customElement, property as property2, state } from "lit/decorators.js";
+import "@latty-ds/icons";
+
+// src/components/calendar/calendar.styles.ts
+import { css } from "lit";
+var calendarStyles = css`
+  :host {
+    display: inline-block;
+    font-family: 'Hanken Grotesk', sans-serif;
+  }
+
+  .calendar {
+    background: var(--lt-bg-default);
+    border-radius: var(--lt-border-radius);
+    border: 1px solid var(--lt-border-default);
+    display: flex;
+    flex-direction: column;
+    gap: var(--lt-spacing-2);
+    padding: var(--lt-spacing-3);
+    width: 17.25rem;
+  }
+
+  /* ── Header ── */
+
+  .header {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .month-label-btn {
+    align-items: center;
+    background: transparent;
+    border-radius: var(--lt-border-radius);
+    border: 1px solid transparent;
+    color: var(--lt-text-default);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: inherit;
+    font-size: 0.9375rem;
+    font-weight: 600;
+    gap: var(--lt-spacing-1);
+    letter-spacing: 0.01em;
+    padding: var(--lt-spacing-1) var(--lt-spacing-2);
+    transition:
+      background 120ms ease,
+      border-color 120ms ease;
+  }
+
+  .month-label-btn:hover:not(:disabled) {
+    background: var(--lt-bg-neutral-subtle);
+    border-color: var(--lt-border-default);
+  }
+
+  .month-label-btn--open {
+    background: var(--lt-bg-neutral-subtle);
+    border-color: var(--lt-border-default);
+  }
+
+  .month-label-btn:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  .picker-chevron {
+    color: var(--lt-text-subtle);
+    transition: transform 150ms ease;
+  }
+
+  .month-label-btn--open .picker-chevron {
+    transform: rotate(180deg);
+  }
+
+  .nav-btn {
+    align-items: center;
+    background: transparent;
+    border-radius: var(--lt-border-radius);
+    border: 1px solid transparent;
+    color: var(--lt-text-subtle);
+    cursor: pointer;
+    display: inline-flex;
+    height: 2rem;
+    justify-content: center;
+    padding: 0;
+    transition:
+      background 120ms ease,
+      border-color 120ms ease,
+      color 120ms ease;
+    width: 2rem;
+  }
+
+  .nav-btn:hover:not(:disabled) {
+    background: var(--lt-bg-neutral-subtle);
+    border-color: var(--lt-border-default);
+    color: var(--lt-text-default);
+  }
+
+  .nav-btn:disabled {
+    color: var(--lt-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* ── Weekday headers ── */
+
+  .weekdays {
+    column-gap: 0;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+  }
+
+  .weekday {
+    color: var(--lt-text-muted);
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-align: center;
+  }
+
+  /* ── Day grid ── */
+
+  .grid {
+    column-gap: 0;
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    row-gap: var(--lt-spacing-1);
+  }
+
+  [role='row'] {
+    display: contents;
+  }
+
+  /* Day button — strip layer in range mode */
+  .day {
+    align-items: center;
+    background: transparent;
+    border: none;
+    color: var(--lt-text-default);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    height: 2.25rem;
+    justify-content: center;
+    outline: none;
+    padding: 0;
+    transition: background 100ms ease;
+    width: 100%;
+  }
+
+  .day:disabled {
+    cursor: not-allowed;
+  }
+
+  /* Day inner — the visible circle */
+  .day__inner {
+    align-items: center;
+    background: transparent;
+    border: 2px solid transparent;
+    border-radius: 50%;
+    color: inherit;
+    display: inline-flex;
+    font-size: inherit;
+    font-weight: inherit;
+    height: 2.25rem;
+    justify-content: center;
+    transition:
+      background 100ms ease,
+      border-color 100ms ease,
+      color 100ms ease;
+    width: 2.25rem;
+  }
+
+  .day:hover:not(:disabled) .day__inner {
+    background: var(--lt-bg-neutral-subtle);
+  }
+
+  .day:focus-visible .day__inner {
+    outline: 2px solid var(--lt-border-focus);
+    outline-offset: 1px;
+  }
+
+  /* Today ring */
+  .day--today .day__inner {
+    border-color: var(--lt-border-primary);
+    font-weight: 600;
+  }
+
+  /* Single-mode selected */
+  .day--selected .day__inner {
+    background: var(--lt-interactive-primary-bg);
+    border-color: transparent;
+    color: var(--lt-text-on-primary);
+    font-weight: 600;
+  }
+
+  .day--selected:hover:not(:disabled) .day__inner {
+    background: var(--lt-interactive-primary-bg-hover);
+  }
+
+  /* Outside days */
+  .day--outside {
+    color: var(--lt-text-muted);
+    opacity: 0.5;
+  }
+
+  /* Empty filler cell */
+  .day--empty {
+    background: transparent;
+    border: none;
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .day:disabled .day__inner {
+    color: var(--lt-text-disabled);
+    opacity: 0.4;
+  }
+
+  /* ── Range strips (on .day button = strip layer) ── */
+
+  /* Start: transparent on left, strip on right */
+  .day--range-left {
+    background: linear-gradient(to right, transparent 50%, var(--lt-bg-primary-subtle) 50%);
+  }
+
+  /* End: strip on left, transparent on right */
+  .day--range-right {
+    background: linear-gradient(to right, var(--lt-bg-primary-subtle) 50%, transparent 50%);
+  }
+
+  /* Same-day start+end — no strip needed */
+  .day--range-left.day--range-right {
+    background: transparent;
+  }
+
+  /* Days between confirmed endpoints */
+  .day--in-range {
+    background: var(--lt-bg-primary-subtle);
+  }
+
+  .day--in-range:hover:not(:disabled) .day__inner {
+    background: var(--lt-bg-neutral-subtle);
+  }
+
+  /* Days between hover preview endpoints */
+  .day--in-hover-range {
+    background: var(--lt-bg-primary-subtle);
+    opacity: 0.45;
+  }
+
+  /* Confirmed range endpoint circle */
+  .day--range-confirmed .day__inner {
+    background: var(--lt-interactive-primary-bg);
+    border-color: transparent;
+    color: var(--lt-text-on-primary);
+    font-weight: 600;
+  }
+
+  .day--range-confirmed:hover:not(:disabled) .day__inner {
+    background: var(--lt-interactive-primary-bg-hover);
+  }
+
+  /* Hover preview endpoint circle (semi-transparent) */
+  .day--range-hover .day__inner {
+    background: var(--lt-interactive-primary-bg);
+    border-color: transparent;
+    color: var(--lt-text-on-primary);
+    opacity: 0.5;
+  }
+
+  /* ── Multi-month layout ── */
+
+  .calendar--multi {
+    width: auto;
+  }
+
+  .month-label-row {
+    display: flex;
+    flex: 1;
+    justify-content: space-around;
+  }
+
+  .month-label {
+    color: var(--lt-text-default);
+    font-size: 0.9375rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+    text-align: center;
+  }
+
+  .month-panels {
+    display: flex;
+    gap: var(--lt-spacing-4);
+  }
+
+  .month-col {
+    width: 17.25rem;
+  }
+
+  /* ── Month/year picker ── */
+
+  .picker-months {
+    display: grid;
+    gap: var(--lt-spacing-1);
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .picker-month-btn {
+    background: transparent;
+    border-radius: var(--lt-border-radius);
+    border: 1px solid transparent;
+    color: var(--lt-text-default);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.8125rem;
+    font-weight: 400;
+    padding: var(--lt-spacing-2) 0;
+    text-align: center;
+    transition:
+      background 100ms ease,
+      border-color 100ms ease;
+  }
+
+  .picker-month-btn:hover:not(:disabled) {
+    background: var(--lt-bg-neutral-subtle);
+    border-color: var(--lt-border-default);
+  }
+
+  .picker-month-btn--current {
+    background: var(--lt-interactive-primary-bg);
+    border-color: transparent;
+    color: var(--lt-text-on-primary);
+    font-weight: 600;
+  }
+
+  .picker-month-btn--current:hover:not(:disabled) {
+    background: var(--lt-interactive-primary-bg-hover);
+  }
+
+  .picker-month-btn:disabled {
+    color: var(--lt-text-disabled);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  /* ── Footer ── */
+
+  .footer {
+    border-top: 1px solid var(--lt-border-subtle);
+    display: flex;
+    justify-content: flex-end;
+    padding-top: var(--lt-spacing-1);
+  }
+
+  .today-btn {
+    background: transparent;
+    border-radius: var(--lt-border-radius);
+    border: 1px solid var(--lt-border-default);
+    color: var(--lt-text-subtle);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 0.75rem;
+    font-weight: 500;
+    padding: var(--lt-spacing-1) var(--lt-spacing-2);
+    transition:
+      background 120ms ease,
+      border-color 120ms ease,
+      color 120ms ease;
+  }
+
+  .today-btn:hover:not(:disabled) {
+    background: var(--lt-bg-neutral-subtle);
+    border-color: var(--lt-border-strong);
+    color: var(--lt-text-default);
+  }
+
+  .today-btn:disabled {
+    color: var(--lt-text-disabled);
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+`;
+
+// src/utils/dispatch.ts
+var dispatch = (host, name, detail, init) => host.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true, ...init }));
+
+// src/utils/click-outside.ts
+var createClickOutsideHandler = (host, onOutside, options) => {
+  const eventName = options?.event ?? "pointerdown";
+  const capture = options?.capture ?? false;
+  const handler = (e) => {
+    if (!e.composedPath().includes(host)) onOutside();
+  };
+  document.addEventListener(eventName, handler, capture ? { capture: true } : void 0);
+  return () => document.removeEventListener(eventName, handler, capture ? { capture: true } : void 0);
+};
+
+// src/components/calendar/calendar.ts
+var Calendar = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.mode = "single";
+    this.value = "";
+    this.valueStart = "";
+    this.valueEnd = "";
+    this.min = "";
+    this.max = "";
+    this.locale = "en-US";
+    this.weekStart = "0";
+    this.showOutsideDays = true;
+    this.disabled = false;
+    this.months = 1;
+    /** Specific dates to disable, as an array of Date objects. Not reflected as an attribute. */
+    this.disabledDates = [];
+    this._viewYear = (/* @__PURE__ */ new Date()).getFullYear();
+    this._viewMonth = (/* @__PURE__ */ new Date()).getMonth();
+    this._focusedDate = null;
+    this._hoverDate = null;
+    this._pickingMonthYear = false;
+    this._pickerYear = (/* @__PURE__ */ new Date()).getFullYear();
+    this._handleCalendarKeyDown = (e) => {
+      if (e.key === "Escape" && this._pickingMonthYear) {
+        e.stopPropagation();
+        this._closePicker();
+      }
+    };
+    this._handleGridMouseOver = (e) => {
+      if (this.mode !== "range" || this.valueEnd) return;
+      const btn = e.target.closest("[data-date]");
+      if (btn?.dataset.date) {
+        const d = this._parseDate(btn.dataset.date);
+        if (d && (!this._hoverDate || !this._isSameDay(d, this._hoverDate))) {
+          this._hoverDate = d;
+        }
+      }
+    };
+    this._handleGridMouseLeave = () => {
+      if (this.mode === "range") this._hoverDate = null;
+    };
+    this._handleKeyDown = (e) => {
+      const today = /* @__PURE__ */ new Date();
+      const focusedDate = this._focusedDate ?? this._parseDate(this.value) ?? new Date(this._viewYear, this._viewMonth, today.getDate() || 1);
+      const next = new Date(focusedDate);
+      const weekStart = Number(this.weekStart);
+      switch (e.key) {
+        case "ArrowRight":
+          next.setDate(next.getDate() + 1);
+          break;
+        case "ArrowLeft":
+          next.setDate(next.getDate() - 1);
+          break;
+        case "ArrowDown":
+          next.setDate(next.getDate() + 7);
+          break;
+        case "ArrowUp":
+          next.setDate(next.getDate() - 7);
+          break;
+        case "Home": {
+          const offset3 = (next.getDay() - weekStart + 7) % 7;
+          next.setDate(next.getDate() - offset3);
+          break;
+        }
+        case "End": {
+          const offset3 = (next.getDay() - weekStart + 7) % 7;
+          next.setDate(next.getDate() + (6 - offset3));
+          break;
+        }
+        case "PageUp":
+          e.preventDefault();
+          this._navigate(-1);
+          return;
+        case "PageDown":
+          e.preventDefault();
+          this._navigate(1);
+          return;
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          const days = this._buildDays();
+          const day = days.find((d) => this._isSameDay(d.date, focusedDate));
+          if (day && !day.isDisabled) this._selectDay(day);
+          return;
+        }
+        default:
+          return;
+      }
+      e.preventDefault();
+      if (next.getFullYear() !== this._viewYear || next.getMonth() !== this._viewMonth) {
+        this._viewYear = next.getFullYear();
+        this._viewMonth = next.getMonth();
+      }
+      this._focusedDate = next;
+      this._focusCell(this._toIso(next));
+    };
+  }
+  willUpdate(changed) {
+    super.willUpdate(changed);
+    if (changed.has("value") && this.value) {
+      const d = this._parseDate(this.value);
+      if (d) {
+        this._viewYear = d.getFullYear();
+        this._viewMonth = d.getMonth();
+      }
+    }
+    if (changed.has("valueStart") && this.valueStart) {
+      const d = this._parseDate(this.valueStart);
+      if (d) {
+        this._viewYear = d.getFullYear();
+        this._viewMonth = d.getMonth();
+      }
+    }
+    if (changed.has("months") && this.months > 1 && this._pickingMonthYear) {
+      this._pickingMonthYear = false;
+    }
+  }
+  _monthAtOffset(offset3) {
+    let m = this._viewMonth + offset3;
+    let y = this._viewYear;
+    while (m > 11) {
+      m -= 12;
+      y++;
+    }
+    return { year: y, month: m };
+  }
+  _parseDate(iso) {
+    if (!iso) return null;
+    const d = /* @__PURE__ */ new Date(`${iso}T00:00:00`);
+    return isNaN(d.getTime()) ? null : d;
+  }
+  _toIso(date) {
+    const y = date.getFullYear();
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    const d = String(date.getDate()).padStart(2, "0");
+    return `${y}-${m}-${d}`;
+  }
+  _isSameDay(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  }
+  _isDisabled(date) {
+    if (this.disabled) return true;
+    if (this.min) {
+      const min2 = this._parseDate(this.min);
+      if (min2 && date < min2) return true;
+    }
+    if (this.max) {
+      const max2 = this._parseDate(this.max);
+      if (max2 && date > max2) return true;
+    }
+    return this.disabledDates.some((d) => this._isSameDay(d, date));
+  }
+  _buildDays(year = this._viewYear, month = this._viewMonth) {
+    const today = /* @__PURE__ */ new Date();
+    const selected = this._parseDate(this.value);
+    const weekStart = Number(this.weekStart);
+    const rangeStart = this.mode === "range" ? this._parseDate(this.valueStart) : null;
+    const rangeEnd = this.mode === "range" ? this._parseDate(this.valueEnd) : null;
+    let visHoverStart = null;
+    let visHoverEnd = null;
+    if (rangeStart && !rangeEnd && this._hoverDate) {
+      if (this._hoverDate >= rangeStart) {
+        visHoverStart = rangeStart;
+        visHoverEnd = this._hoverDate;
+      } else {
+        visHoverStart = this._hoverDate;
+        visHoverEnd = rangeStart;
+      }
+    }
+    const firstOfMonth = new Date(year, month, 1);
+    const lastOfMonth = new Date(year, month + 1, 0);
+    const startOffset = (firstOfMonth.getDay() - weekStart + 7) % 7;
+    const totalCurrent = startOffset + lastOfMonth.getDate();
+    const endOffset = totalCurrent % 7 === 0 ? 0 : 7 - totalCurrent % 7;
+    const days = [];
+    const buildDay = (date, isCurrentMonth) => {
+      const isRangeStart = !!rangeStart && this._isSameDay(date, rangeStart);
+      const isRangeEnd = !!rangeEnd && this._isSameDay(date, rangeEnd);
+      const isInRange = !!rangeStart && !!rangeEnd && date > rangeStart && date < rangeEnd && !this._isSameDay(date, rangeStart) && !this._isSameDay(date, rangeEnd);
+      const isRangeHoverStart = !!visHoverStart && this._isSameDay(date, visHoverStart);
+      const isRangeHoverEnd = !!visHoverEnd && !this._isSameDay(visHoverStart, visHoverEnd) && this._isSameDay(date, visHoverEnd);
+      const isInHoverRange = !!visHoverStart && !!visHoverEnd && date > visHoverStart && date < visHoverEnd;
+      return {
+        date,
+        isCurrentMonth,
+        isToday: this._isSameDay(date, today),
+        isSelected: this.mode === "single" && selected ? this._isSameDay(date, selected) : false,
+        isDisabled: this._isDisabled(date),
+        isRangeStart,
+        isRangeEnd,
+        isInRange,
+        isRangeHoverStart,
+        isRangeHoverEnd,
+        isInHoverRange
+      };
+    };
+    for (let i = startOffset; i > 0; i--) {
+      days.push(buildDay(new Date(year, month, 1 - i), false));
+    }
+    for (let d = 1; d <= lastOfMonth.getDate(); d++) {
+      days.push(buildDay(new Date(year, month, d), true));
+    }
+    for (let d = 1; d <= endOffset; d++) {
+      days.push(buildDay(new Date(year, month + 1, d), false));
+    }
+    return days;
+  }
+  _getWeekdayLabels() {
+    const weekStart = Number(this.weekStart);
+    const fmt = new Intl.DateTimeFormat(this.locale, { weekday: "narrow" });
+    const refSunday = new Date(2026, 0, 4);
+    return Array.from({ length: 7 }, (_, i) => {
+      const date = new Date(refSunday);
+      date.setDate(refSunday.getDate() + weekStart + i);
+      return fmt.format(date);
+    });
+  }
+  _navigate(delta) {
+    if (this._pickingMonthYear) {
+      this._pickerYear += delta;
+      return;
+    }
+    let month = this._viewMonth + delta;
+    let year = this._viewYear;
+    while (month < 0) {
+      month += 12;
+      year--;
+    }
+    while (month > 11) {
+      month -= 12;
+      year++;
+    }
+    this._viewMonth = month;
+    this._viewYear = year;
+    this._focusedDate = null;
+    dispatch(this, "month-change", { year: this._viewYear, month: this._viewMonth });
+  }
+  _openPicker() {
+    this._pickerYear = this._viewYear;
+    this._pickingMonthYear = true;
+  }
+  _closePicker() {
+    this._pickingMonthYear = false;
+  }
+  _selectPickerMonth(month) {
+    this._viewYear = this._pickerYear;
+    this._viewMonth = month;
+    this._pickingMonthYear = false;
+    this._focusedDate = null;
+    dispatch(this, "month-change", { year: this._viewYear, month: this._viewMonth });
+  }
+  _selectDay(day) {
+    if (day.isDisabled || this.disabled) return;
+    if (!day.isCurrentMonth) {
+      this._viewMonth = day.date.getMonth();
+      this._viewYear = day.date.getFullYear();
+    }
+    if (this.mode === "range") {
+      const iso2 = this._toIso(day.date);
+      const hasStart = !!this.valueStart;
+      const hasEnd = !!this.valueEnd;
+      if (!hasStart || hasEnd) {
+        this.valueStart = iso2;
+        this.valueEnd = "";
+        this._hoverDate = null;
+      } else {
+        const startDate = this._parseDate(this.valueStart);
+        if (this._isSameDay(day.date, startDate)) {
+          this.valueStart = "";
+        } else if (day.date < startDate) {
+          this.valueEnd = this.valueStart;
+          this.valueStart = iso2;
+        } else {
+          this.valueEnd = iso2;
+        }
+        if (this.valueStart && this.valueEnd) {
+          dispatch(this, "change", { valueStart: this.valueStart, valueEnd: this.valueEnd });
+        }
+      }
+      this._focusedDate = day.date;
+      return;
+    }
+    const iso = this._toIso(day.date);
+    this.value = iso;
+    this._focusedDate = day.date;
+    dispatch(this, "change", { value: iso });
+  }
+  _goToToday() {
+    const today = /* @__PURE__ */ new Date();
+    this._viewYear = today.getFullYear();
+    this._viewMonth = today.getMonth();
+    this._focusedDate = null;
+    this._pickingMonthYear = false;
+  }
+  _dayAriaLabel(date) {
+    return new Intl.DateTimeFormat(this.locale, {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    }).format(date);
+  }
+  _focusCell(iso) {
+    this.updateComplete.then(() => {
+      const target = this.shadowRoot?.querySelector(`[data-date="${iso}"]`);
+      target?.focus();
+    });
+  }
+  _renderDay(day, rovingDate) {
+    if (!day.isCurrentMonth && !this.showOutsideDays) {
+      return html`<div role="gridcell" aria-hidden="true" class="day day--empty"></div>`;
+    }
+    const isRangeLeft = day.isRangeStart || day.isRangeHoverStart;
+    const isRangeRight = day.isRangeEnd || day.isRangeHoverEnd;
+    const isRangeConfirmed = day.isRangeStart || day.isRangeEnd;
+    const isRangeHoverPoint = !isRangeConfirmed && (day.isRangeHoverStart || day.isRangeHoverEnd);
+    const classes = [
+      "day",
+      !day.isCurrentMonth ? "day--outside" : "",
+      day.isToday ? "day--today" : "",
+      day.isSelected ? "day--selected" : "",
+      isRangeLeft ? "day--range-left" : "",
+      isRangeRight ? "day--range-right" : "",
+      isRangeConfirmed ? "day--range-confirmed" : "",
+      isRangeHoverPoint ? "day--range-hover" : "",
+      day.isInRange ? "day--in-range" : "",
+      day.isInHoverRange ? "day--in-hover-range" : ""
+    ].filter(Boolean).join(" ");
+    const iso = this._toIso(day.date);
+    const isSelected = day.isSelected || day.isRangeStart || day.isRangeEnd;
+    return html`
+      <button
+        role="gridcell"
+        class=${classes}
+        data-date=${iso}
+        ?disabled=${day.isDisabled}
+        aria-selected=${isSelected ? "true" : "false"}
+        aria-label=${this._dayAriaLabel(day.date)}
+        tabindex=${this._isSameDay(day.date, rovingDate) ? 0 : -1}
+        @click=${() => this._selectDay(day)}
+        @keydown=${this._handleKeyDown}
+      >
+        <span class="day__inner">${day.date.getDate()}</span>
+      </button>
+    `;
+  }
+  _renderMonthGrid(year, month, gridLabel, rovingDate) {
+    const days = this._buildDays(year, month);
+    const weekdayLabels = this._getWeekdayLabels();
+    const weeks = [];
+    for (let i = 0; i < days.length; i += 7) weeks.push(days.slice(i, i + 7));
+    return html`
+      <div class="weekdays" aria-hidden="true">
+        ${weekdayLabels.map((label) => html`<div class="weekday">${label}</div>`)}
+      </div>
+      <div
+        class="grid"
+        role="grid"
+        aria-label="${gridLabel}"
+        @mouseover=${this._handleGridMouseOver}
+        @mouseleave=${this._handleGridMouseLeave}
+      >
+        ${weeks.map((week) => html` <div role="row">${week.map((day) => this._renderDay(day, rovingDate))}</div> `)}
+      </div>
+    `;
+  }
+  render() {
+    const today = /* @__PURE__ */ new Date();
+    const isMulti = this.months > 1;
+    const rovingAnchor = this._parseDate(this.mode === "range" ? this.valueStart : this.value);
+    const rovingDate = this._focusedDate ?? rovingAnchor ?? (today.getFullYear() === this._viewYear && today.getMonth() === this._viewMonth ? today : null) ?? new Date(this._viewYear, this._viewMonth, 1);
+    const footer = html`
+      <div class="footer">
+        <button class="today-btn" ?disabled=${this.disabled} @click=${this._goToToday}>Today</button>
+      </div>
+    `;
+    if (isMulti) {
+      const panelLabels = Array.from({ length: this.months }, (_, i) => {
+        const { year, month } = this._monthAtOffset(i);
+        return new Intl.DateTimeFormat(this.locale, { month: "long", year: "numeric" }).format(new Date(year, month));
+      });
+      return html`
+        <div class="calendar calendar--multi" part="base" @keydown=${this._handleCalendarKeyDown}>
+          <div class="header">
+            <button
+              class="nav-btn"
+              aria-label="Previous month"
+              ?disabled=${this.disabled}
+              @click=${() => this._navigate(-1)}
+            >
+              <lt-icon name="arrow-left" size="sm"></lt-icon>
+            </button>
+            <div class="month-label-row">
+              ${panelLabels.map(
+        (label, i) => html`<span class="month-label" aria-live=${i === 0 ? "polite" : "off"} aria-atomic="true"
+                    >${label}</span
+                  >`
+      )}
+            </div>
+            <button
+              class="nav-btn"
+              aria-label="Next month"
+              ?disabled=${this.disabled}
+              @click=${() => this._navigate(1)}
+            >
+              <lt-icon name="arrow-right" size="sm"></lt-icon>
+            </button>
+          </div>
+          <div class="month-panels">
+            ${Array.from(
+        { length: this.months },
+        (_, i) => html`
+                <div class="month-col">
+                  ${this._renderMonthGrid(
+          this._monthAtOffset(i).year,
+          this._monthAtOffset(i).month,
+          panelLabels[i],
+          rovingDate
+        )}
+                </div>
+              `
+      )}
+          </div>
+          ${footer}
+        </div>
+      `;
+    }
+    const monthLabel = new Intl.DateTimeFormat(this.locale, { month: "long", year: "numeric" }).format(
+      new Date(this._viewYear, this._viewMonth)
+    );
+    const prevLabel = this._pickingMonthYear ? "Previous year" : "Previous month";
+    const nextLabel = this._pickingMonthYear ? "Next year" : "Next month";
+    const header = html`
+      <div class="header">
+        <button class="nav-btn" aria-label=${prevLabel} ?disabled=${this.disabled} @click=${() => this._navigate(-1)}>
+          <lt-icon name="arrow-left" size="sm"></lt-icon>
+        </button>
+        <button
+          class="month-label-btn ${this._pickingMonthYear ? "month-label-btn--open" : ""}"
+          aria-expanded=${this._pickingMonthYear ? "true" : "false"}
+          aria-label="Choose month and year"
+          ?disabled=${this.disabled}
+          @click=${() => this._pickingMonthYear ? this._closePicker() : this._openPicker()}
+        >
+          <span aria-live="polite" aria-atomic="true">${this._pickingMonthYear ? this._pickerYear : monthLabel}</span>
+          <lt-icon name="arrow-down" size="sm" class="picker-chevron"></lt-icon>
+        </button>
+        <button class="nav-btn" aria-label=${nextLabel} ?disabled=${this.disabled} @click=${() => this._navigate(1)}>
+          <lt-icon name="arrow-right" size="sm"></lt-icon>
+        </button>
+      </div>
+    `;
+    const pickerBody = this._pickingMonthYear ? html`
+          <div class="picker-months">
+            ${Array.from({ length: 12 }, (_, i) => {
+      const label = new Intl.DateTimeFormat(this.locale, { month: "short" }).format(
+        new Date(this._pickerYear, i)
+      );
+      const isCurrent = i === this._viewMonth && this._pickerYear === this._viewYear;
+      return html`
+                <button
+                  class="picker-month-btn ${isCurrent ? "picker-month-btn--current" : ""}"
+                  ?disabled=${this.disabled}
+                  @click=${() => this._selectPickerMonth(i)}
+                >
+                  ${label}
+                </button>
+              `;
+    })}
+          </div>
+        ` : this._renderMonthGrid(this._viewYear, this._viewMonth, monthLabel, rovingDate);
+    return html`
+      <div class="calendar" part="base" @keydown=${this._handleCalendarKeyDown}>${header} ${pickerBody} ${footer}</div>
+    `;
+  }
+};
+Calendar.styles = calendarStyles;
+__decorateClass([
+  property2({ reflect: true })
+], Calendar.prototype, "mode", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Calendar.prototype, "value", 2);
+__decorateClass([
+  property2({ reflect: true, attribute: "value-start" })
+], Calendar.prototype, "valueStart", 2);
+__decorateClass([
+  property2({ reflect: true, attribute: "value-end" })
+], Calendar.prototype, "valueEnd", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Calendar.prototype, "min", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Calendar.prototype, "max", 2);
+__decorateClass([
+  property2({ reflect: true })
+], Calendar.prototype, "locale", 2);
+__decorateClass([
+  property2({ attribute: "week-start", reflect: true })
+], Calendar.prototype, "weekStart", 2);
+__decorateClass([
+  property2({ type: Boolean, attribute: "show-outside-days", reflect: true })
+], Calendar.prototype, "showOutsideDays", 2);
+__decorateClass([
+  property2({ type: Boolean, reflect: true })
+], Calendar.prototype, "disabled", 2);
+__decorateClass([
+  property2({ type: Number, reflect: true })
+], Calendar.prototype, "months", 2);
+__decorateClass([
+  state()
+], Calendar.prototype, "_viewYear", 2);
+__decorateClass([
+  state()
+], Calendar.prototype, "_viewMonth", 2);
+__decorateClass([
+  state()
+], Calendar.prototype, "_focusedDate", 2);
+__decorateClass([
+  state()
+], Calendar.prototype, "_hoverDate", 2);
+__decorateClass([
+  state()
+], Calendar.prototype, "_pickingMonthYear", 2);
+__decorateClass([
+  state()
+], Calendar.prototype, "_pickerYear", 2);
+Calendar = __decorateClass([
+  customElement("lt-calendar")
+], Calendar);
+
+// src/components/text/text.ts
+import { customElement as customElement2, property as property3 } from "lit/decorators.js";
+import { html as html2, unsafeStatic } from "lit/static-html.js";
+
+// src/components/text/text.styles.ts
+import { css as css2 } from "lit";
+var textStyles = css2`
+  :host {
+    display: block;
+    color: inherit;
+  }
+
+  /* Inline variants sit in text flow */
+  :host([variant='caption']),
+  :host([variant='overline']),
+  :host([variant='label']) {
+    display: inline;
+  }
+
+  [part='base'] {
+    margin: 0;
+    color: inherit;
+    font-family: var(--lt-typography-fontfamily);
+  }
+
+  /* ── Display ─────────────────────────────────────────────────────────── */
+
+  :host([variant='display-2xl']) [part='base'] {
+    font-size: clamp(2.5rem, 6vw, 4.5rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='display-xl']) [part='base'] {
+    font-size: clamp(2rem, 5vw, 3.75rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='display-lg']) [part='base'] {
+    font-size: clamp(2rem, 4vw, 3rem);
+    font-weight: var(--lt-text-weight, 200);
+    line-height: 1.15;
+    letter-spacing: -0.01em;
+  }
+
+  /* ── Headings ─────────────────────────────────────────────────────────── */
+
+  :host([variant='h1']) [part='base'] {
+    font-size: clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.2;
+    letter-spacing: -0.02em;
+  }
+
+  :host([variant='h2']) [part='base'] {
+    font-size: clamp(1.5rem, 2vw + 0.5rem, 2rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.25;
+    letter-spacing: -0.01em;
+  }
+
+  :host([variant='h3']) [part='base'] {
+    font-size: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem);
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.3;
+  }
+
+  :host([variant='h4']) [part='base'] {
+    font-size: 1.25rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.35;
+  }
+
+  :host([variant='h5']) [part='base'] {
+    font-size: 1.125rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+
+  :host([variant='h6']) [part='base'] {
+    font-size: 1rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+
+  /* ── Body ─────────────────────────────────────────────────────────────── */
+
+  :host([variant='lead']) [part='base'] {
+    font-size: 1.25rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  :host([variant='body']) [part='base'],
+  :host(:not([variant])) [part='base'] {
+    font-size: 1rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  :host([variant='body-sm']) [part='base'] {
+    font-size: 0.875rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.6;
+  }
+
+  /* ── Inline ───────────────────────────────────────────────────────────── */
+
+  :host([variant='caption']) [part='base'] {
+    font-size: 0.75rem;
+    font-weight: var(--lt-text-weight, 400);
+    line-height: 1.5;
+  }
+
+  :host([variant='overline']) [part='base'] {
+    font-size: 0.6875rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.2;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  :host([variant='label']) [part='base'] {
+    font-size: 0.875rem;
+    font-weight: var(--lt-text-weight, 600);
+    line-height: 1.4;
+  }
+`;
+
+// src/components/text/text.ts
+var VARIANT_TAG = {
+  "display-2xl": "p",
+  "display-xl": "p",
+  "display-lg": "p",
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  lead: "p",
+  body: "p",
+  "body-sm": "p",
+  caption: "span",
+  overline: "span",
+  label: "span"
+};
+var Text = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "body";
+    this.as = "";
+  }
+  render() {
+    const tag = unsafeStatic(this.as || VARIANT_TAG[this.variant] || "p");
+    return html2`<${tag} part="base"><slot></slot></${tag}>`;
+  }
+};
+Text.styles = textStyles;
+__decorateClass([
+  property3({ reflect: true })
+], Text.prototype, "variant", 2);
+__decorateClass([
+  property3({ reflect: true })
+], Text.prototype, "as", 2);
+Text = __decorateClass([
+  customElement2("lt-text")
+], Text);
+
+// src/components/date-input/date-input.styles.ts
+import { css as css4 } from "lit";
+
+// ../../node_modules/.pnpm/@floating-ui+utils@0.2.11/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+var min = Math.min;
+var max = Math.max;
+var round = Math.round;
+var floor = Math.floor;
+var createCoords = (v) => ({
+  x: v,
+  y: v
+});
+var oppositeSideMap = {
+  left: "right",
+  right: "left",
+  bottom: "top",
+  top: "bottom"
+};
+function clamp(start, value, end) {
+  return max(start, min(value, end));
+}
+function evaluate(value, param) {
+  return typeof value === "function" ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split("-")[0];
+}
+function getAlignment(placement) {
+  return placement.split("-")[1];
+}
+function getOppositeAxis(axis) {
+  return axis === "x" ? "y" : "x";
+}
+function getAxisLength(axis) {
+  return axis === "y" ? "height" : "width";
+}
+function getSideAxis(placement) {
+  const firstChar = placement[0];
+  return firstChar === "t" || firstChar === "b" ? "y" : "x";
+}
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+function getOppositeAlignmentPlacement(placement) {
+  return placement.includes("start") ? placement.replace("start", "end") : placement.replace("end", "start");
+}
+var lrPlacement = ["left", "right"];
+var rlPlacement = ["right", "left"];
+var tbPlacement = ["top", "bottom"];
+var btPlacement = ["bottom", "top"];
+function getSideList(side, isStart, rtl) {
+  switch (side) {
+    case "top":
+    case "bottom":
+      if (rtl) return isStart ? rlPlacement : lrPlacement;
+      return isStart ? lrPlacement : rlPlacement;
+    case "left":
+    case "right":
+      return isStart ? tbPlacement : btPlacement;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === "start", rtl);
+  if (alignment) {
+    list = list.map((side) => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+function getOppositePlacement(placement) {
+  const side = getSide(placement);
+  return oppositeSideMap[side] + placement.slice(side.length);
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== "number" ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
+  return {
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
+  };
+}
+
+// ../../node_modules/.pnpm/@floating-ui+core@1.7.5/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === "y";
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+  let coords;
+  switch (side) {
+    case "top":
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
+      break;
+    case "bottom":
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+    case "right":
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+    case "left":
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
+      break;
+    default:
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+  switch (getAlignment(placement)) {
+    case "start":
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+    case "end":
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+  }
+  return coords;
+}
+async function detectOverflow(state3, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform: platform2,
+    rects,
+    elements,
+    strategy
+  } = state3;
+  const {
+    boundary = "clippingAncestors",
+    rootBoundary = "viewport",
+    elementContext = "floating",
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state3);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === "floating" ? "reference" : "floating";
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
+    element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === "floating" ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
+  const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+var MAX_RESET_COUNT = 50;
+var computePosition = async (reference, floating, config) => {
+  const {
+    placement = "bottom",
+    strategy = "absolute",
+    middleware = [],
+    platform: platform2
+  } = config;
+  const platformWithDetectOverflow = platform2.detectOverflow ? platform2 : {
+    ...platform2,
+    detectOverflow
+  };
+  const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
+  let rects = await platform2.getElementRects({
+    reference,
+    floating,
+    strategy
+  });
+  let {
+    x,
+    y
+  } = computeCoordsFromPlacement(rects, placement, rtl);
+  let statefulPlacement = placement;
+  let resetCount = 0;
+  const middlewareData = {};
+  for (let i = 0; i < middleware.length; i++) {
+    const currentMiddleware = middleware[i];
+    if (!currentMiddleware) {
+      continue;
+    }
+    const {
+      name,
+      fn
+    } = currentMiddleware;
+    const {
+      x: nextX,
+      y: nextY,
+      data,
+      reset
+    } = await fn({
+      x,
+      y,
+      initialPlacement: placement,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData,
+      rects,
+      platform: platformWithDetectOverflow,
+      elements: {
+        reference,
+        floating
+      }
+    });
+    x = nextX != null ? nextX : x;
+    y = nextY != null ? nextY : y;
+    middlewareData[name] = {
+      ...middlewareData[name],
+      ...data
+    };
+    if (reset && resetCount < MAX_RESET_COUNT) {
+      resetCount++;
+      if (typeof reset === "object") {
+        if (reset.placement) {
+          statefulPlacement = reset.placement;
+        }
+        if (reset.rects) {
+          rects = reset.rects === true ? await platform2.getElementRects({
+            reference,
+            floating,
+            strategy
+          }) : reset.rects;
+        }
+        ({
+          x,
+          y
+        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+      }
+      i = -1;
+    }
+  }
+  return {
+    x,
+    y,
+    placement: statefulPlacement,
+    strategy,
+    middlewareData
+  };
+};
+var flip = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "flip",
+    options,
+    async fn(state3) {
+      var _middlewareData$arrow, _middlewareData$flip;
+      const {
+        placement,
+        middlewareData,
+        rects,
+        initialPlacement,
+        platform: platform2,
+        elements
+      } = state3;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true,
+        fallbackPlacements: specifiedFallbackPlacements,
+        fallbackStrategy = "bestFit",
+        fallbackAxisSideDirection = "none",
+        flipAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state3);
+      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      const side = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
+      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+      const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
+        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+      }
+      const placements2 = [initialPlacement, ...fallbackPlacements];
+      const overflow = await platform2.detectOverflow(state3, detectOverflowOptions);
+      const overflows = [];
+      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+      if (checkMainAxis) {
+        overflows.push(overflow[side]);
+      }
+      if (checkCrossAxis) {
+        const sides2 = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides2[0]], overflow[sides2[1]]);
+      }
+      overflowsData = [...overflowsData, {
+        placement,
+        overflows
+      }];
+      if (!overflows.every((side2) => side2 <= 0)) {
+        var _middlewareData$flip2, _overflowsData$filter;
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+        const nextPlacement = placements2[nextIndex];
+        if (nextPlacement) {
+          const ignoreCrossAxisOverflow = checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+          if (!ignoreCrossAxisOverflow || // We leave the current main axis only if every placement on that axis
+          // overflows the main axis.
+          overflowsData.every((d) => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
+            return {
+              data: {
+                index: nextIndex,
+                overflows: overflowsData
+              },
+              reset: {
+                placement: nextPlacement
+              }
+            };
+          }
+        }
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+        if (!resetPlacement) {
+          switch (fallbackStrategy) {
+            case "bestFit": {
+              var _overflowsData$filter2;
+              const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
+                if (hasFallbackAxisSideDirection) {
+                  const currentSideAxis = getSideAxis(d.placement);
+                  return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
+                  // reading directions favoring greater width.
+                  currentSideAxis === "y";
+                }
+                return true;
+              }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
+              if (placement2) {
+                resetPlacement = placement2;
+              }
+              break;
+            }
+            case "initialPlacement":
+              resetPlacement = initialPlacement;
+              break;
+          }
+        }
+        if (placement !== resetPlacement) {
+          return {
+            reset: {
+              placement: resetPlacement
+            }
+          };
+        }
+      }
+      return {};
+    }
+  };
+};
+var originSides = /* @__PURE__ */ new Set(["left", "top"]);
+async function convertValueToCoords(state3, options) {
+  const {
+    placement,
+    platform: platform2,
+    elements
+  } = state3;
+  const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === "y";
+  const mainAxisMulti = originSides.has(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state3);
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === "number" ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: rawValue.mainAxis || 0,
+    crossAxis: rawValue.crossAxis || 0,
+    alignmentAxis: rawValue.alignmentAxis
+  };
+  if (alignment && typeof alignmentAxis === "number") {
+    crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
+  }
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+var offset = function(options) {
+  if (options === void 0) {
+    options = 0;
+  }
+  return {
+    name: "offset",
+    options,
+    async fn(state3) {
+      var _middlewareData$offse, _middlewareData$arrow;
+      const {
+        x,
+        y,
+        placement,
+        middlewareData
+      } = state3;
+      const diffCoords = await convertValueToCoords(state3, options);
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: {
+          ...diffCoords,
+          placement
+        }
+      };
+    }
+  };
+};
+var shift = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "shift",
+    options,
+    async fn(state3) {
+      const {
+        x,
+        y,
+        placement,
+        platform: platform2
+      } = state3;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = false,
+        limiter = {
+          fn: (_ref) => {
+            let {
+              x: x2,
+              y: y2
+            } = _ref;
+            return {
+              x: x2,
+              y: y2
+            };
+          }
+        },
+        ...detectOverflowOptions
+      } = evaluate(options, state3);
+      const coords = {
+        x,
+        y
+      };
+      const overflow = await platform2.detectOverflow(state3, detectOverflowOptions);
+      const crossAxis = getSideAxis(getSide(placement));
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+      if (checkMainAxis) {
+        const minSide = mainAxis === "y" ? "top" : "left";
+        const maxSide = mainAxis === "y" ? "bottom" : "right";
+        const min2 = mainAxisCoord + overflow[minSide];
+        const max2 = mainAxisCoord - overflow[maxSide];
+        mainAxisCoord = clamp(min2, mainAxisCoord, max2);
+      }
+      if (checkCrossAxis) {
+        const minSide = crossAxis === "y" ? "top" : "left";
+        const maxSide = crossAxis === "y" ? "bottom" : "right";
+        const min2 = crossAxisCoord + overflow[minSide];
+        const max2 = crossAxisCoord - overflow[maxSide];
+        crossAxisCoord = clamp(min2, crossAxisCoord, max2);
+      }
+      const limitedCoords = limiter.fn({
+        ...state3,
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      });
+      return {
+        ...limitedCoords,
+        data: {
+          x: limitedCoords.x - x,
+          y: limitedCoords.y - y,
+          enabled: {
+            [mainAxis]: checkMainAxis,
+            [crossAxis]: checkCrossAxis
+          }
+        }
+      };
+    }
+  };
+};
+
+// ../../node_modules/.pnpm/@floating-ui+utils@0.2.11/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+function hasWindow() {
+  return typeof window !== "undefined";
+}
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || "").toLowerCase();
+  }
+  return "#document";
+}
+function getWindow(node) {
+  var _node$ownerDocument;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Node || value instanceof getWindow(value).Node;
+}
+function isElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Element || value instanceof getWindow(value).Element;
+}
+function isHTMLElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  if (!hasWindow() || typeof ShadowRoot === "undefined") {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+}
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle2(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== "inline" && display !== "contents";
+}
+function isTableElement(element) {
+  return /^(table|td|th)$/.test(getNodeName(element));
+}
+function isTopLayer(element) {
+  try {
+    if (element.matches(":popover-open")) {
+      return true;
+    }
+  } catch (_e) {
+  }
+  try {
+    return element.matches(":modal");
+  } catch (_e) {
+    return false;
+  }
+}
+var willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
+var containRe = /paint|layout|strict|content/;
+var isNotNone = (value) => !!value && value !== "none";
+var isWebKitValue;
+function isContainingBlock(elementOrCss) {
+  const css5 = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
+  return isNotNone(css5.transform) || isNotNone(css5.translate) || isNotNone(css5.scale) || isNotNone(css5.rotate) || isNotNone(css5.perspective) || !isWebKit() && (isNotNone(css5.backdropFilter) || isNotNone(css5.filter)) || willChangeRe.test(css5.willChange || "") || containRe.test(css5.contain || "");
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else if (isTopLayer(currentNode)) {
+      return null;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  return null;
+}
+function isWebKit() {
+  if (isWebKitValue == null) {
+    isWebKitValue = typeof CSS !== "undefined" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none");
+  }
+  return isWebKitValue;
+}
+function isLastTraversableNode(node) {
+  return /^(html|body|#document)$/.test(getNodeName(node));
+}
+function getComputedStyle2(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === "html") {
+    return node;
+  }
+  const result = (
+    // Step into the shadow DOM of the parent of a slotted node.
+    node.assignedSlot || // DOM Element detected.
+    node.parentNode || // ShadowRoot detected.
+    isShadowRoot(node) && node.host || // Fallback.
+    getDocumentElement(node)
+  );
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list, traverseIframes) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow(scrollableAncestor);
+  if (isBody) {
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  } else {
+    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+  }
+}
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+
+// ../../node_modules/.pnpm/@floating-ui+dom@1.7.6/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
+function getCssDimensions(element) {
+  const css5 = getComputedStyle2(element);
+  let width = parseFloat(css5.width) || 0;
+  let height = parseFloat(css5.height) || 0;
+  const hasOffset = isHTMLElement(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    $: shouldFallback
+  };
+}
+function unwrapElement(element) {
+  return !isElement(element) ? element.contextElement : element;
+}
+function getScale(element) {
+  const domElement = unwrapElement(element);
+  if (!isHTMLElement(domElement)) {
+    return createCoords(1);
+  }
+  const rect = domElement.getBoundingClientRect();
+  const {
+    width,
+    height,
+    $
+  } = getCssDimensions(domElement);
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+  return {
+    x,
+    y
+  };
+}
+var noOffsets = /* @__PURE__ */ createCoords(0);
+function getVisualOffsets(element) {
+  const win = getWindow(element);
+  if (!isWebKit() || !win.visualViewport) {
+    return noOffsets;
+  }
+  return {
+    x: win.visualViewport.offsetLeft,
+    y: win.visualViewport.offsetTop
+  };
+}
+function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+    return false;
+  }
+  return isFixed;
+}
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  const clientRect = element.getBoundingClientRect();
+  const domElement = unwrapElement(element);
+  let scale = createCoords(1);
+  if (includeScale) {
+    if (offsetParent) {
+      if (isElement(offsetParent)) {
+        scale = getScale(offsetParent);
+      }
+    } else {
+      scale = getScale(element);
+    }
+  }
+  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
+  let width = clientRect.width / scale.x;
+  let height = clientRect.height / scale.y;
+  if (domElement) {
+    const win = getWindow(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+    let currentWin = win;
+    let currentIFrame = getFrameElement(currentWin);
+    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+      const iframeScale = getScale(currentIFrame);
+      const iframeRect = currentIFrame.getBoundingClientRect();
+      const css5 = getComputedStyle2(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css5.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css5.paddingTop)) * iframeScale.y;
+      x *= iframeScale.x;
+      y *= iframeScale.y;
+      width *= iframeScale.x;
+      height *= iframeScale.y;
+      x += left;
+      y += top;
+      currentWin = getWindow(currentIFrame);
+      currentIFrame = getFrameElement(currentWin);
+    }
+  }
+  return rectToClientRect({
+    width,
+    height,
+    x,
+    y
+  });
+}
+function getWindowScrollBarX(element, rect) {
+  const leftScroll = getNodeScroll(element).scrollLeft;
+  if (!rect) {
+    return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+  }
+  return rect.left + leftScroll;
+}
+function getHTMLOffset(documentElement, scroll) {
+  const htmlRect = documentElement.getBoundingClientRect();
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
+  const y = htmlRect.top + scroll.scrollTop;
+  return {
+    x,
+    y
+  };
+}
+function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+  let {
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  } = _ref;
+  const isFixed = strategy === "fixed";
+  const documentElement = getDocumentElement(offsetParent);
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
+  if (offsetParent === documentElement || topLayer && isFixed) {
+    return rect;
+  }
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  let scale = createCoords(1);
+  const offsets = createCoords(0);
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent);
+      scale = getScale(offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    }
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+  return {
+    width: rect.width * scale.x,
+    height: rect.height * scale.y,
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
+  };
+}
+function getClientRects(element) {
+  return Array.from(element.getClientRects());
+}
+function getDocumentRect(element) {
+  const html4 = getDocumentElement(element);
+  const scroll = getNodeScroll(element);
+  const body = element.ownerDocument.body;
+  const width = max(html4.scrollWidth, html4.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html4.scrollHeight, html4.clientHeight, body.scrollHeight, body.clientHeight);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  const y = -scroll.scrollTop;
+  if (getComputedStyle2(body).direction === "rtl") {
+    x += max(html4.clientWidth, body.clientWidth) - width;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+var SCROLLBAR_MAX = 25;
+function getViewportRect(element, strategy) {
+  const win = getWindow(element);
+  const html4 = getDocumentElement(element);
+  const visualViewport = win.visualViewport;
+  let width = html4.clientWidth;
+  let height = html4.clientHeight;
+  let x = 0;
+  let y = 0;
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    const visualViewportBased = isWebKit();
+    if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+  const windowScrollbarX = getWindowScrollBarX(html4);
+  if (windowScrollbarX <= 0) {
+    const doc = html4.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html4.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    width += windowScrollbarX;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
+  const top = clientRect.top + element.clientTop;
+  const left = clientRect.left + element.clientLeft;
+  const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+  const width = element.clientWidth * scale.x;
+  const height = element.clientHeight * scale.y;
+  const x = left * scale.x;
+  const y = top * scale.y;
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+  let rect;
+  if (clippingAncestor === "viewport") {
+    rect = getViewportRect(element, strategy);
+  } else if (clippingAncestor === "document") {
+    rect = getDocumentRect(getDocumentElement(element));
+  } else if (isElement(clippingAncestor)) {
+    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+  } else {
+    const visualOffsets = getVisualOffsets(element);
+    rect = {
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y,
+      width: clippingAncestor.width,
+      height: clippingAncestor.height
+    };
+  }
+  return rectToClientRect(rect);
+}
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle2(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
+}
+function getClippingElementAncestors(element, cache) {
+  const cachedResult = cache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
+  let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
+  let currentContainingBlockComputedStyle = null;
+  const elementIsFixed = getComputedStyle2(element).position === "fixed";
+  let currentNode = elementIsFixed ? getParentNode(element) : element;
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    const computedStyle = getComputedStyle2(currentNode);
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === "fixed") {
+      currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === "absolute" || currentContainingBlockComputedStyle.position === "fixed") || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      result = result.filter((ancestor) => ancestor !== currentNode);
+    } else {
+      currentContainingBlockComputedStyle = computedStyle;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  cache.set(element, result);
+  return result;
+}
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+  const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
+  let top = firstRect.top;
+  let right = firstRect.right;
+  let bottom = firstRect.bottom;
+  let left = firstRect.left;
+  for (let i = 1; i < clippingAncestors.length; i++) {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
+    top = max(rect.top, top);
+    right = min(rect.right, right);
+    bottom = min(rect.bottom, bottom);
+    left = max(rect.left, left);
+  }
+  return {
+    width: right - left,
+    height: bottom - top,
+    x: left,
+    y: top
+  };
+}
+function getDimensions(element) {
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
+}
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+  const isOffsetParentAnElement = isHTMLElement(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  const isFixed = strategy === "fixed";
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const offsets = createCoords(0);
+  function setLeftRTLScrollbarOffset() {
+    offsets.x = getWindowScrollBarX(documentElement);
+  }
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } else if (documentElement) {
+      setLeftRTLScrollbarOffset();
+    }
+  }
+  if (isFixed && !isOffsetParentAnElement && documentElement) {
+    setLeftRTLScrollbarOffset();
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
+  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
+  return {
+    x,
+    y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function isStaticPositioned(element) {
+  return getComputedStyle2(element).position === "static";
+}
+function getTrueOffsetParent(element, polyfill) {
+  if (!isHTMLElement(element) || getComputedStyle2(element).position === "fixed") {
+    return null;
+  }
+  if (polyfill) {
+    return polyfill(element);
+  }
+  let rawOffsetParent = element.offsetParent;
+  if (getDocumentElement(element) === rawOffsetParent) {
+    rawOffsetParent = rawOffsetParent.ownerDocument.body;
+  }
+  return rawOffsetParent;
+}
+function getOffsetParent(element, polyfill) {
+  const win = getWindow(element);
+  if (isTopLayer(element)) {
+    return win;
+  }
+  if (!isHTMLElement(element)) {
+    let svgOffsetParent = getParentNode(element);
+    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+        return svgOffsetParent;
+      }
+      svgOffsetParent = getParentNode(svgOffsetParent);
+    }
+    return win;
+  }
+  let offsetParent = getTrueOffsetParent(element, polyfill);
+  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
+    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+  }
+  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+    return win;
+  }
+  return offsetParent || getContainingBlock(element) || win;
+}
+var getElementRects = async function(data) {
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
+  return {
+    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      width: floatingDimensions.width,
+      height: floatingDimensions.height
+    }
+  };
+};
+function isRTL(element) {
+  return getComputedStyle2(element).direction === "rtl";
+}
+var platform = {
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
+  getScale,
+  isElement,
+  isRTL
+};
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    var _io;
+    clearTimeout(timeoutId);
+    (_io = io) == null || _io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = elementRectForRootMargin;
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 1e3);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        refresh();
+      }
+      isFirstUpdate = false;
+    }
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        // Handle <iframe>s
+        root: root.ownerDocument
+      });
+    } catch (_e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = typeof ResizeObserver === "function",
+    layoutShift = typeof IntersectionObserver === "function",
+    animationFrame = false
+  } = options;
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...floating ? getOverflowAncestors(floating) : []] : [];
+  ancestors.forEach((ancestor) => {
+    ancestorScroll && ancestor.addEventListener("scroll", update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener("resize", update);
+  });
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
+  if (elementResize) {
+    resizeObserver = new ResizeObserver((_ref) => {
+      let [firstEntry] = _ref;
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
+        });
+      }
+      update();
+    });
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
+    }
+    if (floating) {
+      resizeObserver.observe(floating);
+    }
+  }
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+  if (animationFrame) {
+    frameLoop();
+  }
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference);
+    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
+      update();
+    }
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+  update();
+  return () => {
+    var _resizeObserver2;
+    ancestors.forEach((ancestor) => {
+      ancestorScroll && ancestor.removeEventListener("scroll", update);
+      ancestorResize && ancestor.removeEventListener("resize", update);
+    });
+    cleanupIo == null || cleanupIo();
+    (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
+    resizeObserver = null;
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+var offset2 = offset;
+var shift2 = shift;
+var flip2 = flip;
+var computePosition2 = (reference, floating, options) => {
+  const cache = /* @__PURE__ */ new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = {
+    ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition(reference, floating, {
+    ...mergedOptions,
+    platform: platformWithCache
+  });
+};
+
+// src/components/shared/floating.ts
+import { css as css3 } from "lit";
+async function openFloating(reference, floating, opts) {
+  const { placement = "bottom-start", offsetPx = 4, matchWidth = false } = opts ?? {};
+  floating.style.display = "block";
+  floating.style.visibility = "hidden";
+  floating.showPopover?.();
+  const reposition = async () => {
+    if (matchWidth) {
+      floating.style.width = `${reference.getBoundingClientRect().width}px`;
+    }
+    const { x, y } = await computePosition2(reference, floating, {
+      strategy: "fixed",
+      placement,
+      middleware: [offset2(offsetPx), flip2(), shift2({ padding: 8 })]
+    });
+    floating.style.left = `${x}px`;
+    floating.style.top = `${y}px`;
+  };
+  await reposition();
+  floating.style.visibility = "";
+  const cleanup = autoUpdate(reference, floating, reposition);
+  return cleanup;
+}
+function closeFloating(floating, cleanup) {
+  cleanup?.();
+  floating.hidePopover?.();
+  floating.style.display = "";
+}
+var floatingPanelReset = css3`
+  [popover] {
+    border: 0;
+    inset: unset;
+    margin: 0;
+    overflow: visible;
+    padding: 0;
+    position: fixed;
+  }
+`;
+
+// src/components/date-input/date-input.styles.ts
+var dateInputStyles = [
+  floatingPanelReset,
+  css4`
+    :host {
+      display: block;
+      font-family: 'Hanken Grotesk', sans-serif;
+    }
+
+    .wrapper {
+      display: flex;
+      flex-direction: column;
+      gap: var(--lt-spacing-1);
+    }
+
+    label {
+      color: var(--lt-text-default);
+      cursor: default;
+    }
+
+    .required-indicator {
+      color: var(--lt-color-error-500);
+      margin-left: 2px;
+    }
+
+    /* ── Field ── */
+
+    .field {
+      position: relative;
+    }
+
+    .field-btn {
+      align-items: center;
+      background: var(--lt-bg-surface);
+      border-radius: var(--lt-border-radius);
+      border: 1px solid var(--lt-border-default);
+      color: var(--lt-text-default);
+      cursor: pointer;
+      display: flex;
+      font-family: inherit;
+      justify-content: space-between;
+      outline: none;
+      text-align: left;
+      transition:
+        border-color 150ms ease,
+        box-shadow 150ms ease;
+      width: 100%;
+    }
+
+    .field-btn:focus-visible {
+      border-color: var(--lt-border-primary);
+      box-shadow: 0 0 0 3px var(--lt-bg-primary-subtle);
+    }
+
+    .field-btn:disabled {
+      background: var(--lt-bg-neutral-subtle);
+      color: var(--lt-text-subtle);
+      cursor: not-allowed;
+    }
+
+    .display-value {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .display-value--placeholder {
+      color: var(--lt-text-muted);
+    }
+
+    .calendar-icon {
+      color: var(--lt-text-subtle);
+      flex-shrink: 0;
+      line-height: 0;
+      margin-left: var(--lt-spacing-2);
+    }
+
+    /* ── Sizes ── */
+
+    :host([size='sm']) .field-btn {
+      font-size: 0.8125rem;
+      height: 32px;
+      padding: 0 var(--lt-spacing-2);
+    }
+
+    :host([size='md']) .field-btn,
+    :host(:not([size])) .field-btn {
+      font-size: 0.9375rem;
+      height: 40px;
+      padding: 0 var(--lt-spacing-3);
+    }
+
+    :host([size='lg']) .field-btn {
+      font-size: 1rem;
+      height: 48px;
+      padding: 0 var(--lt-spacing-4);
+    }
+
+    /* ── Variants ── */
+
+    :host([variant='success']) .field-btn {
+      border-color: var(--lt-color-success-500);
+    }
+
+    :host([variant='success']) .field-btn:focus-visible {
+      box-shadow: 0 0 0 3px var(--lt-bg-success-subtle);
+    }
+
+    :host([variant='warning']) .field-btn {
+      border-color: var(--lt-color-warning-500);
+    }
+
+    :host([variant='warning']) .field-btn:focus-visible {
+      box-shadow: 0 0 0 3px var(--lt-bg-warning-subtle);
+    }
+
+    :host([variant='error']) .field-btn {
+      border-color: var(--lt-color-error-500);
+    }
+
+    :host([variant='error']) .field-btn:focus-visible {
+      box-shadow: 0 0 0 3px var(--lt-bg-error-subtle);
+    }
+
+    /* ── Dropdown ── */
+
+    .dropdown {
+      display: none;
+      filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.08));
+      z-index: 9999;
+    }
+
+    /* ── Helper text ── */
+
+    .helper-text {
+      color: var(--lt-text-subtle);
+      font-size: 0.8125rem;
+    }
+
+    :host([variant='error']) .helper-text {
+      color: var(--lt-color-error-600);
+    }
+
+    :host([variant='success']) .helper-text {
+      color: var(--lt-color-success-600);
+    }
+
+    :host([variant='warning']) .helper-text {
+      color: var(--lt-color-warning-700);
+    }
+  `
+];
+
+// src/components/date-input/date-input.ts
+var DateInput = class extends ThemeableElement {
+  constructor() {
+    super(...arguments);
+    this.value = "";
+    this.min = "";
+    this.max = "";
+    this.locale = "en-US";
+    this.format = "medium";
+    this.weekStart = "0";
+    this.label = "";
+    this.placeholder = "Select a date";
+    this.helperText = "";
+    this.variant = "default";
+    this.size = "md";
+    this.disabled = false;
+    this.required = false;
+    this.name = "";
+    /** Individual dates to disable in the calendar, as Date objects. */
+    this.disabledDates = [];
+    this._open = false;
+    this._cleanupClickOutside = null;
+    this._floatingCleanup = null;
+  }
+  get _displayValue() {
+    if (!this.value) return "";
+    const [y, m, d] = this.value.split("-").map(Number);
+    const date = new Date(y, m - 1, d);
+    return new Intl.DateTimeFormat(this.locale, { dateStyle: this.format }).format(date);
+  }
+  async _openDropdown() {
+    if (this.disabled || this._open) return;
+    this._open = true;
+    await this.updateComplete;
+    const btn = this.shadowRoot?.querySelector("#field-btn");
+    const dropdown = this.shadowRoot?.querySelector(".dropdown");
+    if (btn && dropdown) {
+      this._floatingCleanup = await openFloating(btn, dropdown);
+    }
+    this._cleanupClickOutside = createClickOutsideHandler(this, () => this._closeDropdown());
+  }
+  _closeDropdown() {
+    const dropdown = this.shadowRoot?.querySelector(".dropdown");
+    if (dropdown) closeFloating(dropdown, this._floatingCleanup);
+    this._floatingCleanup = null;
+    this._open = false;
+    this._cleanupClickOutside?.();
+    this._cleanupClickOutside = null;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._floatingCleanup?.();
+    this._floatingCleanup = null;
+    this._cleanupClickOutside?.();
+    this._cleanupClickOutside = null;
+  }
+  _handleCalendarChange(e) {
+    e.stopPropagation();
+    this.value = e.detail.value;
+    dispatch(this, "change", { value: this.value });
+    this._closeDropdown();
+    this.shadowRoot?.querySelector(".field-btn")?.focus();
+  }
+  _handleDropdownKeyDown(e) {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      this._closeDropdown();
+      this.shadowRoot?.querySelector(".field-btn")?.focus();
+    }
+  }
+  render() {
+    const displayText = this._displayValue || this.placeholder;
+    const isPlaceholder = !this._displayValue;
+    return html3`
+      <div class="wrapper">
+        ${this.label ? html3`<label for="field-btn">
+              <lt-text variant="label" as="span">${this.label}</lt-text>
+              ${this.required ? html3`<span class="required-indicator" aria-hidden="true">*</span>` : nothing}
+            </label>` : nothing}
+
+        <div class="field">
+          <button
+            id="field-btn"
+            type="button"
+            class="field-btn"
+            aria-haspopup="dialog"
+            aria-expanded=${this._open ? "true" : "false"}
+            ?disabled=${this.disabled}
+            ?required=${this.required}
+            @click=${this._openDropdown}
+          >
+            <span class=${isPlaceholder ? "display-value display-value--placeholder" : "display-value"}>
+              ${displayText}
+            </span>
+            <span class="calendar-icon" aria-hidden="true">
+              <lt-icon name="calendar" size="sm"></lt-icon>
+            </span>
+          </button>
+
+          <div
+            class="dropdown"
+            popover="manual"
+            role="dialog"
+            aria-label="Date picker"
+            @keydown=${this._handleDropdownKeyDown}
+          >
+            ${this._open ? html3`<lt-calendar
+                  value=${this.value}
+                  min=${this.min}
+                  max=${this.max}
+                  locale=${this.locale}
+                  week-start=${this.weekStart}
+                  .disabledDates=${this.disabledDates}
+                  @change=${this._handleCalendarChange}
+                ></lt-calendar>` : nothing}
+          </div>
+        </div>
+
+        ${this.name ? html3`<input type="hidden" name=${this.name} .value=${this.value} />` : nothing}
+        ${this.helperText ? html3`<span class="helper-text">${this.helperText}</span>` : nothing}
+      </div>
+    `;
+  }
+};
+DateInput.styles = dateInputStyles;
+__decorateClass([
+  property4({ reflect: true })
+], DateInput.prototype, "value", 2);
+__decorateClass([
+  property4({ reflect: true })
+], DateInput.prototype, "min", 2);
+__decorateClass([
+  property4({ reflect: true })
+], DateInput.prototype, "max", 2);
+__decorateClass([
+  property4({ reflect: true })
+], DateInput.prototype, "locale", 2);
+__decorateClass([
+  property4({ reflect: true })
+], DateInput.prototype, "format", 2);
+__decorateClass([
+  property4({ attribute: "week-start", reflect: true })
+], DateInput.prototype, "weekStart", 2);
+__decorateClass([
+  property4()
+], DateInput.prototype, "label", 2);
+__decorateClass([
+  property4()
+], DateInput.prototype, "placeholder", 2);
+__decorateClass([
+  property4({ attribute: "helper-text" })
+], DateInput.prototype, "helperText", 2);
+__decorateClass([
+  property4({ reflect: true })
+], DateInput.prototype, "variant", 2);
+__decorateClass([
+  property4({ reflect: true })
+], DateInput.prototype, "size", 2);
+__decorateClass([
+  property4({ type: Boolean, reflect: true })
+], DateInput.prototype, "disabled", 2);
+__decorateClass([
+  property4({ type: Boolean, reflect: true })
+], DateInput.prototype, "required", 2);
+__decorateClass([
+  property4()
+], DateInput.prototype, "name", 2);
+__decorateClass([
+  state2()
+], DateInput.prototype, "_open", 2);
+DateInput = __decorateClass([
+  customElement3("lt-date-input")
+], DateInput);
+export {
+  DateInput
+};