@adia-ai/web-components 0.0.1

package/components/calendar-picker/calendar-picker.css

@@ -0,0 +1,321 @@
+@scope (calendar-picker-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+
+    /* Host / label */
+    --calendar-picker-gap:                    var(--a-space-2);
+    --calendar-picker-font-size:              var(--a-ui-size);
+    --calendar-picker-label-size:             var(--a-label-size);
+    --calendar-picker-label-fg:               var(--a-label-color);
+    --calendar-picker-label-fg-focus:         var(--a-fg-subtle);
+
+    /* Trigger */
+    --calendar-picker-trigger-height:         var(--a-size);
+    --calendar-picker-trigger-px:             var(--a-ui-px);
+    --calendar-picker-trigger-gap:            var(--a-space-1);
+    --calendar-picker-trigger-radius:         var(--a-radius);
+    --calendar-picker-trigger-bg:             var(--a-ui-bg);
+    --calendar-picker-trigger-bg-hover:       var(--a-ui-bg-hover);
+    --calendar-picker-trigger-fg:             var(--a-ui-text-subtle);
+    --calendar-picker-trigger-border:         var(--a-ui-border);
+    --calendar-picker-trigger-border-hover:   var(--a-ui-border-hover);
+    --calendar-picker-trigger-border-focus:   var(--a-ui-border-active);
+    --calendar-picker-trigger-placeholder-fg: var(--a-ui-text-placeholder);
+    --calendar-picker-trigger-fg-disabled:    var(--a-ui-text-disabled);
+
+    /* Popover */
+    --calendar-picker-popover-bg:             var(--a-bg-subtle);
+    --calendar-picker-popover-border:         var(--a-border-subtle);
+    --calendar-picker-popover-radius:         var(--a-radius-lg);
+    --calendar-picker-popover-shadow:         var(--a-shadow-lg);
+    --calendar-picker-popover-padding:        var(--a-space-2);
+    --calendar-picker-popover-width:          16rem;
+    --calendar-picker-popover-fg:             var(--a-fg);
+
+    /* Header */
+    --calendar-picker-header-gap:             var(--a-space-1);
+    --calendar-picker-header-mb:              var(--a-space-2);
+    --calendar-picker-title-fg:               var(--a-fg);
+    --calendar-picker-title-size:             var(--a-ui-size);
+    --calendar-picker-title-weight:           var(--a-weight-medium);
+
+    /* Nav buttons (prev/next) */
+    --calendar-picker-nav-size:               1.5rem;
+    --calendar-picker-nav-radius:             var(--a-radius-sm);
+    --calendar-picker-nav-bg:                 transparent;
+    --calendar-picker-nav-bg-hover:           var(--a-bg-muted);
+    --calendar-picker-nav-fg:                 var(--a-fg-muted);
+    --calendar-picker-nav-fg-hover:           var(--a-fg);
+    --calendar-picker-nav-icon-size:          0.75rem;
+
+    /* Weekday header */
+    --calendar-picker-weekday-fg:             var(--a-fg-muted);
+    --calendar-picker-weekday-size:           var(--a-ui-sm);
+    --calendar-picker-weekday-weight:         var(--a-weight-medium);
+    --calendar-picker-weekday-height:         1.5rem;
+    --calendar-picker-weekday-mb:             var(--a-space-1);
+
+    /* Day cells */
+    --calendar-picker-day-size:               2rem;
+    --calendar-picker-day-radius:             var(--a-radius);
+    --calendar-picker-day-font-size:          var(--a-ui-sm);
+    --calendar-picker-day-bg:                 transparent;
+    --calendar-picker-day-fg:                 var(--a-fg-subtle);
+    --calendar-picker-day-bg-hover:           var(--a-bg-hover);
+    --calendar-picker-day-fg-hover:           var(--a-fg);
+    --calendar-picker-day-bg-selected-hover:  var(--a-accent-bg-hover);
+    --calendar-picker-day-bg-selected:        var(--a-accent);
+    --calendar-picker-day-fg-selected:        var(--a-accent-fg);
+    --calendar-picker-day-fg-outside:         var(--a-fg-muted);
+    --calendar-picker-day-fg-disabled:        var(--a-fg-muted);
+    --calendar-picker-day-today-border:       var(--a-accent);
+    --calendar-picker-day-today-dot-size:     var(--a-space-0-5);
+    --calendar-picker-day-today-dot-offset:   var(--a-space-1);
+    --calendar-picker-day-focus-ring:         var(--a-focus-ring);
+
+    /* Transitions */
+    --calendar-picker-duration:               var(--a-duration-fast);
+    --calendar-picker-easing:                 var(--a-easing);
+
+    /* Typography */
+    --calendar-picker-selected-weight:        var(--a-weight-medium);
+    --calendar-picker-today-weight:           var(--a-weight-medium);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: var(--calendar-picker-gap);
+    min-width: 0;
+    font-size: var(--calendar-picker-font-size);
+  }
+
+  /* ── State: disabled ── */
+  :scope[disabled] {
+    pointer-events: none;
+    color: var(--calendar-picker-trigger-fg-disabled);
+  }
+
+  /* ── Label (via ::before) ── */
+  :scope::before {
+    content: attr(label);
+    font-size: var(--calendar-picker-label-size);
+    color: var(--calendar-picker-label-fg);
+  }
+  :scope:not([label])::before,
+  :scope[label=""]::before {
+    display: none;
+  }
+  :scope:focus-visible::before {
+    color: var(--calendar-picker-label-fg-focus);
+  }
+
+  /* ── Trigger ── */
+  [slot="trigger"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--calendar-picker-trigger-gap);
+    min-width: 0;
+    min-height: var(--calendar-picker-trigger-height);
+    padding: 0 var(--calendar-picker-trigger-px);
+    border: 1px solid var(--calendar-picker-trigger-border);
+    border-radius: var(--calendar-picker-trigger-radius);
+    background: var(--calendar-picker-trigger-bg);
+    color: var(--calendar-picker-trigger-fg);
+    line-height: 1;
+    cursor: pointer;
+    transition:
+      border-color var(--calendar-picker-duration) var(--calendar-picker-easing),
+      background   var(--calendar-picker-duration) var(--calendar-picker-easing);
+  }
+  [slot="trigger"]:hover {
+    border-color: var(--calendar-picker-trigger-border-hover);
+    background: var(--calendar-picker-trigger-bg-hover);
+  }
+
+  :scope:focus-visible { outline: none; }
+  :scope:focus-visible [slot="trigger"] {
+    border-color: var(--calendar-picker-trigger-border-focus);
+  }
+
+  [slot="display"] {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--calendar-picker-trigger-fg);
+  }
+  :scope:not([value]) [slot="display"],
+  :scope[value=""] [slot="display"] {
+    color: var(--calendar-picker-trigger-placeholder-fg);
+  }
+
+  [slot="caret"] {
+    flex-shrink: 0;
+    --a-icon-size: var(--calendar-picker-font-size);
+  }
+}
+
+/* ── Calendar popover (outside @scope — popover lives in top layer) ── */
+/* Custom properties inherit from the host, so --calendar-picker-* tokens are available here. */
+
+calendar-picker-ui [slot="popover"] {
+  margin: 0;
+  padding: var(--calendar-picker-popover-padding);
+  border: 1px solid var(--calendar-picker-popover-border);
+  border-radius: var(--calendar-picker-popover-radius);
+  background: var(--calendar-picker-popover-bg);
+  box-shadow: var(--calendar-picker-popover-shadow);
+  width: var(--calendar-picker-popover-width);
+  font-family: inherit;
+  font-size: var(--calendar-picker-font-size);
+  color: var(--calendar-picker-popover-fg);
+}
+
+/* Header row */
+calendar-picker-ui [data-cal-header] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--calendar-picker-header-gap);
+  margin-block-end: var(--calendar-picker-header-mb);
+}
+
+calendar-picker-ui [data-cal-title] {
+  flex: 1;
+  text-align: center;
+  font-size: var(--calendar-picker-title-size);
+  font-weight: var(--calendar-picker-title-weight);
+  color: var(--calendar-picker-title-fg);
+}
+
+calendar-picker-ui [data-cal-prev],
+calendar-picker-ui [data-cal-next] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--calendar-picker-nav-size);
+  height: var(--calendar-picker-nav-size);
+  padding: 0;
+  border: none;
+  border-radius: var(--calendar-picker-nav-radius);
+  background: var(--calendar-picker-nav-bg);
+  color: var(--calendar-picker-nav-fg);
+  cursor: pointer;
+  transition:
+    background var(--calendar-picker-duration) var(--calendar-picker-easing),
+    color var(--calendar-picker-duration) var(--calendar-picker-easing);
+  --a-icon-size: var(--calendar-picker-nav-icon-size);
+}
+calendar-picker-ui [data-cal-prev]:hover,
+calendar-picker-ui [data-cal-next]:hover {
+  background: var(--calendar-picker-nav-bg-hover);
+  color: var(--calendar-picker-nav-fg-hover);
+}
+
+/* Day-of-week header */
+calendar-picker-ui [data-cal-weekdays] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  text-align: center;
+  font-size: var(--calendar-picker-weekday-size);
+  font-weight: var(--calendar-picker-weekday-weight);
+  color: var(--calendar-picker-weekday-fg);
+  margin-block-end: var(--calendar-picker-weekday-mb);
+}
+
+calendar-picker-ui [data-cal-weekdays] span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--calendar-picker-weekday-height);
+}
+
+/* Day grid */
+calendar-picker-ui [data-cal-grid] {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1px;
+}
+
+/* Day buttons */
+calendar-picker-ui [data-cal-day] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--calendar-picker-day-size);
+  height: var(--calendar-picker-day-size);
+  margin: 0 auto;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: var(--calendar-picker-day-radius);
+  background: var(--calendar-picker-day-bg);
+  color: var(--calendar-picker-day-fg);
+  font: inherit;
+  font-size: var(--calendar-picker-day-font-size);
+  cursor: pointer;
+  transition:
+    background var(--calendar-picker-duration) var(--calendar-picker-easing),
+    color var(--calendar-picker-duration) var(--calendar-picker-easing),
+    border-color var(--calendar-picker-duration) var(--calendar-picker-easing);
+}
+
+/* ── State: hover ── */
+calendar-picker-ui [data-cal-day]:not([disabled]):not([data-outside]):hover {
+  background: var(--calendar-picker-day-bg-hover);
+  color: var(--calendar-picker-day-fg-hover);
+}
+
+/* ── State: focus ── */
+calendar-picker-ui [data-cal-day]:not([disabled]):not([data-outside]):focus-visible,
+calendar-picker-ui [data-cal-day][data-focused] {
+  outline: none;
+  box-shadow: var(--calendar-picker-day-focus-ring);
+}
+
+/* ── State: selected ── */
+calendar-picker-ui [data-cal-day][data-selected] {
+  background: var(--calendar-picker-day-bg-selected);
+  color: var(--calendar-picker-day-fg-selected);
+  font-weight: var(--calendar-picker-selected-weight);
+}
+calendar-picker-ui [data-cal-day][data-selected]:not([disabled]):hover {
+  background: var(--calendar-picker-day-bg-selected-hover);
+  color: var(--calendar-picker-day-fg-selected);
+}
+
+/* ── State: today (unselected) ──
+   Use a small bottom dot so it does not compete with the rounded
+   focus-ring box-shadow (that looked like a double outline). */
+calendar-picker-ui [data-cal-day][data-today]:not([data-selected]) {
+  position: relative;
+  color: var(--calendar-picker-day-today-border);
+  font-weight: var(--calendar-picker-today-weight);
+}
+calendar-picker-ui [data-cal-day][data-today]:not([data-selected])::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: var(--calendar-picker-day-today-dot-offset);
+  width: var(--calendar-picker-day-today-dot-size);
+  height: var(--calendar-picker-day-today-dot-size);
+  border-radius: 50%;
+  background: var(--calendar-picker-day-today-border);
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+/* ── State: outside month ── */
+calendar-picker-ui [data-cal-day][data-outside] {
+  color: var(--calendar-picker-day-fg-outside);
+  cursor: default;
+}
+
+/* ── State: disabled ── */
+calendar-picker-ui [data-cal-day]:disabled:not([data-outside]) {
+  color: var(--calendar-picker-day-fg-disabled);
+  cursor: not-allowed;
+}

package/components/calendar-picker/calendar-picker.js

@@ -0,0 +1,324 @@
+/**
+ * <calendar-picker-ui label="Date" placeholder="Select date..." format="short"></calendar-picker-ui>
+ *
+ * Date picker with trigger button and popover calendar grid.
+ * Form-associated via AdiaFormElement + ElementInternals.
+ *
+ * Properties:
+ *   label       — field label (rendered via CSS ::before)
+ *   placeholder — trigger text when no date selected
+ *   format      — display format: short | long | iso
+ *   min         — minimum selectable date (ISO string)
+ *   max         — maximum selectable date (ISO string)
+ *   open        — popover visibility
+ *
+ * Keyboard: Arrow keys navigate days, Enter selects, Escape closes.
+ */
+
+import { AdiaFormElement } from '@core/form.js';
+import { anchorPopover } from '@core/anchor.js';
+
+const DAYS = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
+const MONTHS_SHORT = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const MONTHS_LONG = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+function toISO(y, m, d) {
+  return `${y}-${String(m + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
+}
+
+function parseISO(str) {
+  if (!str) return null;
+  const [y, m, d] = str.split('-').map(Number);
+  if (isNaN(y) || isNaN(m) || isNaN(d)) return null;
+  return new Date(y, m - 1, d);
+}
+
+function sameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate();
+}
+
+class AdiaCalendarPicker extends AdiaFormElement {
+  static properties = {
+    ...AdiaFormElement.properties,
+    label:       { type: String,  default: '', reflect: true },
+    placeholder: { type: String,  default: 'Select date...', reflect: true },
+    format:      { type: String,  default: 'short', reflect: true },
+    min:         { type: String,  default: '', reflect: true },
+    max:         { type: String,  default: '', reflect: true },
+    open:        { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #popover = null;
+  #trigger = null;
+  #anchorCleanup = null;
+  #viewYear = new Date().getFullYear();
+  #viewMonth = new Date().getMonth();
+  #focusedDay = null;
+
+  connected() {
+    super.connected();
+    this.setAttribute('role', 'group');
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('keydown', this.#onKey);
+
+    // Initialize view to selected date or today
+    const sel = parseISO(this.value);
+    if (sel) {
+      this.#viewYear = sel.getFullYear();
+      this.#viewMonth = sel.getMonth();
+    }
+  }
+
+  render() {
+    // Stamp trigger + popover if not present
+    if (!this.querySelector('[slot="trigger"]')) {
+      this.innerHTML = `
+        <span slot="trigger">
+          <span slot="display">${this.#displayText()}</span>
+          <icon-ui name="calendar" slot="caret"></icon-ui>
+        </span>
+      `;
+      this.#trigger = this.querySelector('[slot="trigger"]');
+
+      this.#popover = document.createElement('div');
+      this.#popover.setAttribute('slot', 'popover');
+      this.#popover.setAttribute('popover', 'manual');
+      this.appendChild(this.#popover);
+    } else {
+      const display = this.querySelector('[slot="display"]');
+      if (display) display.textContent = this.#displayText();
+    }
+
+    if (!this.#popover) this.#popover = this.querySelector('[slot="popover"]');
+    if (!this.#trigger) this.#trigger = this.querySelector('[slot="trigger"]');
+
+    // Toggle popover
+    if (this.open) {
+      this.#renderCalendar();
+      this.#popover?.showPopover?.();
+      this.#anchorCleanup = anchorPopover(this.#trigger, this.#popover, {
+        placement: 'bottom-start', gap: 4,
+      });
+      requestAnimationFrame(() => {
+        document.addEventListener('pointerdown', this.#onOutside, { once: true });
+      });
+    } else {
+      this.#anchorCleanup?.();
+      this.#anchorCleanup = null;
+      this.#popover?.hidePopover?.();
+      document.removeEventListener('pointerdown', this.#onOutside);
+    }
+  }
+
+  #displayText() {
+    if (!this.value) return this.placeholder;
+    const d = parseISO(this.value);
+    if (!d) return this.value;
+    switch (this.format) {
+      case 'long':
+        return `${MONTHS_LONG[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+      case 'iso':
+        return this.value;
+      case 'short':
+      default:
+        return `${MONTHS_SHORT[d.getMonth()]} ${d.getDate()}, ${d.getFullYear()}`;
+    }
+  }
+
+  #renderCalendar() {
+    if (!this.#popover) return;
+
+    const year = this.#viewYear;
+    const month = this.#viewMonth;
+    const today = new Date();
+    const selected = parseISO(this.value);
+    const minDate = parseISO(this.min);
+    const maxDate = parseISO(this.max);
+
+    // Header
+    let h = `<div data-cal-header>
+      <button data-cal-prev type="button" aria-label="Previous month"><icon-ui name="caret-left"></icon-ui></button>
+      <span data-cal-title>${MONTHS_LONG[month]} ${year}</span>
+      <button data-cal-next type="button" aria-label="Next month"><icon-ui name="caret-right"></icon-ui></button>
+    </div>`;
+
+    // Day-of-week header
+    h += `<div data-cal-weekdays>${DAYS.map(d => `<span>${d}</span>`).join('')}</div>`;
+
+    // Calendar grid
+    const firstDay = new Date(year, month, 1).getDay();
+    const daysInMonth = new Date(year, month + 1, 0).getDate();
+    const daysInPrev = new Date(year, month, 0).getDate();
+
+    h += '<div data-cal-grid>';
+
+    // Previous month trailing days
+    for (let i = firstDay - 1; i >= 0; i--) {
+      const day = daysInPrev - i;
+      h += `<button type="button" data-cal-day data-outside disabled tabindex="-1">${day}</button>`;
+    }
+
+    // Current month days
+    for (let d = 1; d <= daysInMonth; d++) {
+      const date = new Date(year, month, d);
+      const iso = toISO(year, month, d);
+      const isToday = sameDay(date, today);
+      const isSelected = selected && sameDay(date, selected);
+      const isDisabled = (minDate && date < minDate) || (maxDate && date > maxDate);
+      const isFocused = this.#focusedDay === d;
+
+      const attrs = [
+        'type="button"',
+        'data-cal-day',
+        `data-date="${iso}"`,
+        isToday ? 'data-today' : '',
+        isSelected ? 'data-selected' : '',
+        isDisabled ? 'disabled' : '',
+        isFocused ? 'data-focused' : '',
+        `tabindex="${isFocused ? '0' : '-1'}"`,
+      ].filter(Boolean).join(' ');
+
+      h += `<button ${attrs}>${d}</button>`;
+    }
+
+    // Next month leading days
+    const totalCells = firstDay + daysInMonth;
+    const remaining = (7 - (totalCells % 7)) % 7;
+    for (let d = 1; d <= remaining; d++) {
+      h += `<button type="button" data-cal-day data-outside disabled tabindex="-1">${d}</button>`;
+    }
+
+    h += '</div>';
+
+    this.#popover.innerHTML = h;
+
+    // Wire events
+    this.#popover.querySelector('[data-cal-prev]')?.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.#navigate(-1);
+    });
+    this.#popover.querySelector('[data-cal-next]')?.addEventListener('click', (e) => {
+      e.stopPropagation();
+      this.#navigate(1);
+    });
+
+    for (const btn of this.#popover.querySelectorAll('[data-cal-day][data-date]:not([disabled])')) {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.#selectDate(btn.dataset.date);
+      });
+    }
+  }
+
+  #navigate(delta) {
+    this.#viewMonth += delta;
+    if (this.#viewMonth > 11) { this.#viewMonth = 0; this.#viewYear++; }
+    if (this.#viewMonth < 0) { this.#viewMonth = 11; this.#viewYear--; }
+    this.#focusedDay = null;
+    this.#renderCalendar();
+  }
+
+  #selectDate(iso) {
+    this.value = iso;
+    this.syncValue(iso);
+    this.dispatchEvent(new Event('change', { bubbles: true }));
+    // Re-render grid to reflect new selection; keep popover open until user clicks outside.
+    if (this.open) this.#renderCalendar();
+  }
+
+  #onClick = (e) => {
+    if (this.disabled) return;
+    if (this.#popover && e.composedPath().includes(this.#popover)) return;
+    this.open = !this.open;
+    if (this.open) {
+      const sel = parseISO(this.value);
+      if (sel) {
+        this.#viewYear = sel.getFullYear();
+        this.#viewMonth = sel.getMonth();
+        this.#focusedDay = sel.getDate();
+      } else {
+        const today = new Date();
+        this.#viewYear = today.getFullYear();
+        this.#viewMonth = today.getMonth();
+        this.#focusedDay = today.getDate();
+      }
+    }
+  };
+
+  #onOutside = (e) => {
+    if (!this.contains(e.target) && !(this.#popover && e.composedPath().includes(this.#popover))) {
+      this.open = false;
+    }
+  };
+
+  #onKey = (e) => {
+    if (!this.open) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        this.open = true;
+      }
+      return;
+    }
+
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      this.open = false;
+      return;
+    }
+
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      if (this.#focusedDay) {
+        const iso = toISO(this.#viewYear, this.#viewMonth, this.#focusedDay);
+        const date = new Date(this.#viewYear, this.#viewMonth, this.#focusedDay);
+        const minDate = parseISO(this.min);
+        const maxDate = parseISO(this.max);
+        if ((!minDate || date >= minDate) && (!maxDate || date <= maxDate)) {
+          this.#selectDate(iso);
+        }
+      }
+      return;
+    }
+
+    const arrows = { ArrowUp: -7, ArrowDown: 7, ArrowLeft: -1, ArrowRight: 1 };
+    if (arrows[e.key] !== undefined) {
+      e.preventDefault();
+      const daysInMonth = new Date(this.#viewYear, this.#viewMonth + 1, 0).getDate();
+      let day = (this.#focusedDay || 1) + arrows[e.key];
+
+      if (day < 1) {
+        this.#navigate(-1);
+        const prevDays = new Date(this.#viewYear, this.#viewMonth + 1, 0).getDate();
+        this.#focusedDay = prevDays + day;
+      } else if (day > daysInMonth) {
+        this.#navigate(1);
+        this.#focusedDay = day - daysInMonth;
+      } else {
+        this.#focusedDay = day;
+      }
+
+      this.#renderCalendar();
+      const focused = this.#popover?.querySelector('[data-focused]');
+      focused?.focus();
+    }
+  };
+
+  disconnected() {
+    super.disconnected();
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+    document.removeEventListener('pointerdown', this.#onOutside);
+    this.#anchorCleanup?.();
+    this.#anchorCleanup = null;
+    this.#popover?.hidePopover?.();
+    this.#popover = null;
+    this.#trigger = null;
+  }
+}
+customElements.define('calendar-picker-ui', AdiaCalendarPicker);
+
+export { AdiaCalendarPicker };