calkit 0.1.0

package/dist/datepicker.es.js

@@ -0,0 +1,1619 @@
+class ne extends HTMLElement {
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this._initialized = !1;
+  }
+  /** Override in subclass — return array of CSSStyleSheet or CSS strings. */
+  static get styles() {
+    return [];
+  }
+  connectedCallback() {
+    this._initialized || (this._adoptStyles(), this._initialized = !0), this.render();
+  }
+  _adoptStyles() {
+    const e = this.constructor.styles;
+    if (e.length)
+      if ("adoptedStyleSheets" in this.shadowRoot)
+        this.shadowRoot.adoptedStyleSheets = e.map((a) => {
+          if (a instanceof CSSStyleSheet) return a;
+          const t = new CSSStyleSheet();
+          return t.replaceSync(a), t;
+        });
+      else
+        for (const a of e) {
+          const t = document.createElement("style");
+          t.textContent = a instanceof CSSStyleSheet ? "" : a, this.shadowRoot.prepend(t);
+        }
+  }
+  /** Subclasses override to update Shadow DOM. */
+  render() {
+  }
+  /** Dispatch a composed, bubbling custom event. */
+  emit(e, a = {}) {
+    this.dispatchEvent(
+      new CustomEvent(e, { detail: a, bubbles: !0, composed: !0 })
+    );
+  }
+  /** Show an inline status banner. */
+  showStatus(e, a, t = {}) {
+    if (!this._store) return;
+    const { autoDismiss: n, dismissible: r = !0 } = t;
+    clearTimeout(this._statusTimer), this._store.set({ statusType: e, statusMessage: a, statusDismissible: r }), this.emit("cal:status", { type: e, message: a }), n && n > 0 && (this._statusTimer = setTimeout(() => this.clearStatus(), n));
+  }
+  /** Clear the status banner. */
+  clearStatus() {
+    this._store && (clearTimeout(this._statusTimer), this._store.set({ statusType: null, statusMessage: null, statusDismissible: !0 }), this.emit("cal:status", { type: null, message: null }));
+  }
+  /** Query within shadow root. */
+  $(e) {
+    return this.shadowRoot.querySelector(e);
+  }
+  $$(e) {
+    return this.shadowRoot.querySelectorAll(e);
+  }
+}
+function se(s) {
+  let e = { ...s };
+  const a = /* @__PURE__ */ new Set();
+  return {
+    get(t) {
+      return e[t];
+    },
+    set(t) {
+      const n = e;
+      e = { ...e, ...t };
+      let r = !1;
+      for (const o of Object.keys(t))
+        if (n[o] !== e[o]) {
+          r = !0;
+          break;
+        }
+      if (r)
+        for (const o of a) o(e, n);
+    },
+    getState() {
+      return e;
+    },
+    subscribe(t) {
+      return a.add(t), () => a.delete(t);
+    }
+  };
+}
+const I = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+], re = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function oe(s = 0) {
+  const e = [];
+  for (let a = 0; a < 7; a++)
+    e.push(re[(s + a) % 7]);
+  return e;
+}
+function W(s, e) {
+  return new Date(s, e + 1, 0).getDate();
+}
+function le(s, e) {
+  return new Date(s, e, 1).getDay();
+}
+function m(s) {
+  if (typeof s == "string") return s;
+  const e = s instanceof Date ? s : new Date(s.year, s.month, s.day), a = e.getFullYear(), t = String(e.getMonth() + 1).padStart(2, "0"), n = String(e.getDate()).padStart(2, "0");
+  return `${a}-${t}-${n}`;
+}
+function L(s) {
+  if (!s) return null;
+  if (s instanceof Date) return s;
+  if (typeof s == "string") {
+    const [e, a, t] = s.split("-").map(Number);
+    return !e || !a || !t ? null : new Date(e, a - 1, t);
+  }
+  return null;
+}
+function M(s, e) {
+  if (!s || !e) return !1;
+  const a = L(s), t = L(e);
+  return !a || !t ? !1 : a.getFullYear() === t.getFullYear() && a.getMonth() === t.getMonth() && a.getDate() === t.getDate();
+}
+function ie(s, e, a) {
+  if (!s || !e || !a) return !1;
+  const t = L(s), n = L(e), r = L(a);
+  if (!t || !n || !r) return !1;
+  const o = t.getTime(), l = Math.min(n.getTime(), r.getTime()), i = Math.max(n.getTime(), r.getTime());
+  return o >= l && o <= i;
+}
+function K() {
+  return m(/* @__PURE__ */ new Date());
+}
+function z(s, e, a) {
+  const t = new Date(s, e + a, 1);
+  return { year: t.getFullYear(), month: t.getMonth() };
+}
+function ce(s, e, a = 0) {
+  const t = W(s, e), r = (le(s, e) - a + 7) % 7, o = [], l = K(), i = z(s, e, -1), g = W(i.year, i.month);
+  for (let d = r - 1; d >= 0; d--) {
+    const b = g - d, p = m({ year: i.year, month: i.month, day: b });
+    o.push({ year: i.year, month: i.month, day: b, dateString: p, isCurrentMonth: !1, isToday: p === l });
+  }
+  for (let d = 1; d <= t; d++) {
+    const b = m({ year: s, month: e, day: d });
+    o.push({ year: s, month: e, day: d, dateString: b, isCurrentMonth: !0, isToday: b === l });
+  }
+  const h = z(s, e, 1);
+  let u = 1;
+  for (; o.length < 42; ) {
+    const d = m({ year: h.year, month: h.month, day: u });
+    o.push({ year: h.year, month: h.month, day: u, dateString: d, isCurrentMonth: !1, isToday: d === l }), u++;
+  }
+  return o;
+}
+const de = `
+  :host {
+    /* Light theme (default) */
+    --cal-bg: 0 0% 100%;
+    --cal-bg-muted: 240 5% 96%;
+    --cal-fg: 240 6% 10%;
+    --cal-fg-muted: 240 4% 46%;
+    --cal-border: 240 6% 90%;
+    --cal-accent: 240 6% 10%;
+    --cal-accent-fg: 0 0% 100%;
+    --cal-accent-subtle: 240 5% 96%;
+    --cal-hover: 240 5% 93%;
+    --cal-ring: 240 6% 10%;
+    --cal-radius: 8px;
+    --cal-radius-sm: 6px;
+    --cal-cell-size: 36px;
+    --cal-transition: 150ms ease;
+
+    /* Booking color palette (softer / less saturated) */
+    --cal-booking-blue-bg: 217 55% 94%;
+    --cal-booking-blue-fg: 217 60% 35%;
+    --cal-booking-green-bg: 152 45% 93%;
+    --cal-booking-green-fg: 152 55% 28%;
+    --cal-booking-red-bg: 4 50% 94%;
+    --cal-booking-red-fg: 4 55% 40%;
+    --cal-booking-orange-bg: 30 55% 93%;
+    --cal-booking-orange-fg: 30 60% 35%;
+    --cal-booking-gray-bg: 240 8% 94%;
+    --cal-booking-gray-fg: 240 8% 38%;
+
+    /* Booking hover tokens */
+    --cal-booking-blue-hover: 217 55% 88%;
+    --cal-booking-green-hover: 152 45% 87%;
+    --cal-booking-red-hover: 4 50% 88%;
+    --cal-booking-orange-hover: 30 55% 87%;
+    --cal-booking-gray-hover: 240 8% 88%;
+
+    /* Scheduler tokens */
+    --cal-sched-grid-line: 240 6% 94%;
+    --cal-sched-now-line: 4 70% 55%;
+    --cal-sched-slot-hover: 240 5% 97%;
+    --cal-sched-header-bg: 240 5% 98%;
+
+    /* Status tokens */
+    --cal-status-error-bg: 4 50% 95%;
+    --cal-status-error-fg: 4 55% 40%;
+    --cal-status-error-border: 4 50% 85%;
+    --cal-status-warning-bg: 40 55% 95%;
+    --cal-status-warning-fg: 40 60% 35%;
+    --cal-status-warning-border: 40 50% 85%;
+    --cal-status-info-bg: 217 55% 95%;
+    --cal-status-info-fg: 217 60% 35%;
+    --cal-status-info-border: 217 50% 85%;
+    --cal-status-success-bg: 152 45% 95%;
+    --cal-status-success-fg: 152 55% 28%;
+    --cal-status-success-border: 152 45% 85%;
+  }
+
+  :host([theme="dark"]) {
+    --cal-bg: 240 6% 10%;
+    --cal-bg-muted: 240 4% 16%;
+    --cal-fg: 0 0% 98%;
+    --cal-fg-muted: 240 4% 54%;
+    --cal-border: 240 4% 20%;
+    --cal-accent: 0 0% 98%;
+    --cal-accent-fg: 240 6% 10%;
+    --cal-accent-subtle: 240 4% 16%;
+    --cal-hover: 240 4% 20%;
+    --cal-ring: 0 0% 98%;
+
+    --cal-booking-blue-bg: 217 50% 25%;
+    --cal-booking-blue-fg: 217 80% 75%;
+    --cal-booking-green-bg: 142 40% 22%;
+    --cal-booking-green-fg: 142 70% 70%;
+    --cal-booking-red-bg: 4 45% 25%;
+    --cal-booking-red-fg: 4 70% 75%;
+    --cal-booking-orange-bg: 30 45% 25%;
+    --cal-booking-orange-fg: 30 80% 75%;
+    --cal-booking-gray-bg: 240 5% 22%;
+    --cal-booking-gray-fg: 240 5% 65%;
+
+    --cal-booking-blue-hover: 217 50% 30%;
+    --cal-booking-green-hover: 142 40% 27%;
+    --cal-booking-red-hover: 4 45% 30%;
+    --cal-booking-orange-hover: 30 45% 30%;
+    --cal-booking-gray-hover: 240 5% 27%;
+
+    --cal-sched-grid-line: 240 4% 18%;
+    --cal-sched-now-line: 4 55% 55%;
+    --cal-sched-slot-hover: 240 4% 14%;
+    --cal-sched-header-bg: 240 5% 12%;
+
+    --cal-status-error-bg: 4 45% 20%;
+    --cal-status-error-fg: 4 70% 75%;
+    --cal-status-error-border: 4 45% 30%;
+    --cal-status-warning-bg: 40 45% 20%;
+    --cal-status-warning-fg: 40 80% 75%;
+    --cal-status-warning-border: 40 45% 30%;
+    --cal-status-info-bg: 217 50% 20%;
+    --cal-status-info-fg: 217 80% 75%;
+    --cal-status-info-border: 217 50% 30%;
+    --cal-status-success-bg: 152 40% 18%;
+    --cal-status-success-fg: 152 70% 70%;
+    --cal-status-success-border: 152 40% 28%;
+  }
+
+  :host([theme="auto"]) {
+    --cal-bg: 0 0% 100%;
+    --cal-bg-muted: 240 5% 96%;
+    --cal-fg: 240 6% 10%;
+    --cal-fg-muted: 240 4% 46%;
+    --cal-border: 240 6% 90%;
+    --cal-accent: 240 6% 10%;
+    --cal-accent-fg: 0 0% 100%;
+    --cal-accent-subtle: 240 5% 96%;
+    --cal-hover: 240 5% 93%;
+    --cal-ring: 240 6% 10%;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :host([theme="auto"]) {
+      --cal-bg: 240 6% 10%;
+      --cal-bg-muted: 240 4% 16%;
+      --cal-fg: 0 0% 98%;
+      --cal-fg-muted: 240 4% 54%;
+      --cal-border: 240 4% 20%;
+      --cal-accent: 0 0% 98%;
+      --cal-accent-fg: 240 6% 10%;
+      --cal-accent-subtle: 240 4% 16%;
+      --cal-hover: 240 4% 20%;
+      --cal-ring: 0 0% 98%;
+
+      --cal-booking-blue-bg: 217 50% 25%;
+      --cal-booking-blue-fg: 217 80% 75%;
+      --cal-booking-green-bg: 142 40% 22%;
+      --cal-booking-green-fg: 142 70% 70%;
+      --cal-booking-red-bg: 4 45% 25%;
+      --cal-booking-red-fg: 4 70% 75%;
+      --cal-booking-orange-bg: 30 45% 25%;
+      --cal-booking-orange-fg: 30 80% 75%;
+      --cal-booking-gray-bg: 240 5% 22%;
+      --cal-booking-gray-fg: 240 5% 65%;
+
+      --cal-booking-blue-hover: 217 50% 30%;
+      --cal-booking-green-hover: 142 40% 27%;
+      --cal-booking-red-hover: 4 45% 30%;
+      --cal-booking-orange-hover: 30 45% 30%;
+      --cal-booking-gray-hover: 240 5% 27%;
+
+      --cal-sched-grid-line: 240 4% 18%;
+      --cal-sched-now-line: 4 55% 55%;
+      --cal-sched-slot-hover: 240 4% 14%;
+      --cal-sched-header-bg: 240 5% 12%;
+
+      --cal-status-error-bg: 4 45% 20%;
+      --cal-status-error-fg: 4 70% 75%;
+      --cal-status-error-border: 4 45% 30%;
+      --cal-status-warning-bg: 40 45% 20%;
+      --cal-status-warning-fg: 40 80% 75%;
+      --cal-status-warning-border: 40 45% 30%;
+      --cal-status-info-bg: 217 50% 20%;
+      --cal-status-info-fg: 217 80% 75%;
+      --cal-status-info-border: 217 50% 30%;
+      --cal-status-success-bg: 152 40% 18%;
+      --cal-status-success-fg: 152 70% 70%;
+      --cal-status-success-border: 152 40% 28%;
+    }
+  }
+`, ge = `
+  :host {
+    display: inline-block;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.5;
+    color: hsl(var(--cal-fg));
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  :host([display="inline"]) {
+    display: inline-block;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  button {
+    font: inherit;
+    color: inherit;
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  button:focus-visible {
+    outline: 2px solid hsl(var(--cal-ring));
+    outline-offset: 2px;
+    border-radius: var(--cal-radius-sm);
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+`, ue = `
+  @keyframes cal-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes cal-slide-up {
+    from {
+      opacity: 0;
+      transform: translateY(4px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes cal-slide-left {
+    from {
+      opacity: 0;
+      transform: translateX(16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  @keyframes cal-slide-right {
+    from {
+      opacity: 0;
+      transform: translateX(-16px);
+    }
+    to {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  .cal-animate-fade { animation: cal-fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1); }
+  .cal-animate-slide-up { animation: cal-slide-up 200ms cubic-bezier(0.16, 1, 0.3, 1); }
+  .cal-animate-slide-left { animation: cal-slide-left 200ms cubic-bezier(0.16, 1, 0.3, 1); }
+  .cal-animate-slide-right { animation: cal-slide-right 200ms cubic-bezier(0.16, 1, 0.3, 1); }
+
+  @keyframes cal-shimmer {
+    0% { background-position: -200% 0; }
+    100% { background-position: 200% 0; }
+  }
+
+  .cal-skeleton {
+    background: linear-gradient(
+      90deg,
+      hsl(var(--cal-bg-muted)) 25%,
+      hsl(var(--cal-hover)) 50%,
+      hsl(var(--cal-bg-muted)) 75%
+    );
+    background-size: 200% 100%;
+    animation: cal-shimmer 1.5s infinite ease-in-out;
+    border-radius: 999px;
+  }
+
+  .cal-skeleton--rect {
+    border-radius: var(--cal-radius-sm);
+  }
+`, X = {
+  blue: { bg: "var(--cal-booking-blue-bg)", fg: "var(--cal-booking-blue-fg)", hover: "var(--cal-booking-blue-hover)" },
+  green: { bg: "var(--cal-booking-green-bg)", fg: "var(--cal-booking-green-fg)", hover: "var(--cal-booking-green-hover)" },
+  red: { bg: "var(--cal-booking-red-bg)", fg: "var(--cal-booking-red-fg)", hover: "var(--cal-booking-red-hover)" },
+  orange: { bg: "var(--cal-booking-orange-bg)", fg: "var(--cal-booking-orange-fg)", hover: "var(--cal-booking-orange-hover)" },
+  gray: { bg: "var(--cal-booking-gray-bg)", fg: "var(--cal-booking-gray-fg)", hover: "var(--cal-booking-gray-hover)" }
+}, T = "blue";
+function B(s) {
+  return X[s] || X[T];
+}
+function he(s, e = [], a = {}, t = null) {
+  const n = e.find((p) => p.end === s), r = e.find((p) => p.start === s), o = e.find(
+    (p) => p.start < s && p.end > s
+  );
+  let l = "available", i = null, g = !1, h = null, u = null, d = null;
+  n && r ? (l = "half-day", g = !0, h = B(n.color || T), u = B(r.color || T)) : o ? (l = "booked", d = B(o.color || T)) : r && !n ? (l = "checkin-only", u = B(r.color || T)) : n && !r && (l = "checkout-only", h = B(n.color || T));
+  const b = a[s];
+  if (b && (b.status && (l = b.status), b.label !== void 0 && (i = b.label)), t) {
+    const p = t(s);
+    p && (p.status && (l = p.status), p.label !== void 0 && (i = p.label));
+  }
+  return { status: l, label: i, checkoutBooking: n, checkinBooking: r, halfDay: g, colorOut: h, colorIn: u, colorFull: d };
+}
+function pe(s, e, a = []) {
+  if (!s || !e) return !0;
+  const t = s < e ? s : e, n = s < e ? e : s;
+  for (const r of a)
+    if (t < r.end && n > r.start)
+      return !1;
+  return !0;
+}
+function be(s, e, a = []) {
+  return !s || !e ? !1 : !pe(s, e, a);
+}
+function fe(s) {
+  const {
+    year: e,
+    month: a,
+    firstDay: t = 0,
+    selectedDates: n = [],
+    rangeStart: r,
+    rangeEnd: o,
+    hoverDate: l,
+    minDate: i,
+    maxDate: g,
+    disabledDates: h = [],
+    mode: u = "single",
+    focusedDate: d,
+    onSelect: b,
+    onHover: p,
+    // Booking-specific params
+    bookings: C = null,
+    dayData: k = null,
+    labelFormula: w = null,
+    showLabelsOnHover: V = !1
+  } = s, S = C !== null, A = document.createElement("div");
+  A.setAttribute("role", "grid"), A.classList.add("cal-grid");
+  const O = document.createElement("div");
+  O.setAttribute("role", "row"), O.classList.add("cal-weekdays");
+  for (const _ of oe(t)) {
+    const E = document.createElement("div");
+    E.setAttribute("role", "columnheader"), E.setAttribute("aria-label", _), E.classList.add("cal-weekday"), E.textContent = _, O.appendChild(E);
+  }
+  A.appendChild(O);
+  const ee = ce(e, a, t), j = u === "range" && r && !o && l || S && r && !o && l ? l : o, te = S ? be(r, l, C) : !1;
+  let Y;
+  return ee.forEach((_, E) => {
+    E % 7 === 0 && (Y = document.createElement("div"), Y.setAttribute("role", "row"), Y.classList.add("cal-row"), A.appendChild(Y));
+    const c = document.createElement("button");
+    c.setAttribute("role", "gridcell"), c.setAttribute("part", "day"), c.classList.add("cal-day");
+    const f = _.dateString;
+    c.dataset.date = f;
+    const ae = new Date(_.year, _.month, _.day);
+    c.setAttribute("aria-label", ae.toLocaleDateString("en-US", {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    })), _.isCurrentMonth || c.classList.add("cal-day--outside"), _.isToday && c.classList.add("cal-day--today");
+    let y = null, $ = !1;
+    if (S) {
+      y = he(f, C, k || {}, w);
+      const { status: v, label: x, halfDay: P, colorOut: F, colorIn: R, colorFull: H } = y;
+      if (v === "booked" && (c.classList.add("cal-day--booked"), H && (c.style.setProperty("--booking-bg", `hsl(${H.bg})`), c.style.setProperty("--booking-fg", `hsl(${H.fg})`), c.style.setProperty("--booking-hover", `hsl(${H.hover})`)), $ = !0), v === "blocked" && (c.classList.add("cal-day--blocked"), $ = !0), P && (c.classList.add("cal-day--half-day"), F && c.style.setProperty("--half-day-color-out", `hsl(${F.bg})`), R && c.style.setProperty("--half-day-color-in", `hsl(${R.bg})`), $ = !0), v === "checkout-only" && (c.classList.add("cal-day--checkout-only"), F && c.style.setProperty("--half-day-color-out", `hsl(${F.bg})`)), v === "checkin-only" && (c.classList.add("cal-day--checkin-only"), R && c.style.setProperty("--half-day-color-in", `hsl(${R.bg})`)), V) {
+        let D = null;
+        if (P && y.checkoutBooking && y.checkinBooking)
+          D = `${y.checkoutBooking.label || ""} / ${y.checkinBooking.label || ""}`;
+        else if (v === "booked") {
+          const N = C.find((J) => J.start <= f && J.end > f);
+          N && (D = N.label);
+        } else v === "checkout-only" && y.checkoutBooking ? D = y.checkoutBooking.label : v === "checkin-only" && y.checkinBooking && (D = y.checkinBooking.label);
+        D && c.setAttribute("data-booking-label", D);
+      }
+      if (te && r && !o && l) {
+        const D = r < l ? r : l, N = r < l ? l : r;
+        f >= D && f <= N && c.classList.add("cal-day--invalid-range");
+      }
+    }
+    if (S ? r && o && (M(f, r) || M(f, o)) ? (c.classList.add("cal-day--selected"), c.setAttribute("aria-selected", "true")) : c.setAttribute("aria-selected", "false") : n.some((x) => M(x, f)) ? (c.classList.add("cal-day--selected"), c.setAttribute("aria-selected", "true")) : c.setAttribute("aria-selected", "false"), (u === "range" || S) && r && j) {
+      const v = M(f, r), x = M(f, j), P = ie(f, r, j);
+      v && c.classList.add("cal-day--range-start"), x && c.classList.add("cal-day--range-end"), P && !v && !x && c.classList.add("cal-day--in-range");
+    }
+    const G = ve(f, i, g, h) || $;
+    if (G && (c.classList.add("cal-day--disabled"), c.disabled = !0, c.setAttribute("aria-disabled", "true")), d && M(f, d) ? c.setAttribute("tabindex", "0") : c.setAttribute("tabindex", "-1"), S && y && y.label != null) {
+      c.classList.add("cal-day--with-label");
+      const v = document.createElement("span");
+      v.classList.add("cal-day__number"), v.textContent = _.day, c.appendChild(v);
+      const x = document.createElement("span");
+      x.classList.add("cal-day__label"), x.textContent = y.label, c.appendChild(x);
+    } else
+      c.textContent = _.day;
+    G ? S && c.addEventListener("mouseenter", () => p == null ? void 0 : p(f)) : (c.addEventListener("click", () => b == null ? void 0 : b(f)), c.addEventListener("mouseenter", () => p == null ? void 0 : p(f))), Y.appendChild(c);
+  }), A.addEventListener("mouseleave", () => p == null ? void 0 : p(null)), A;
+}
+function ve(s, e, a, t) {
+  return !!(t.includes(s) || e && s < e || a && s > a);
+}
+const ye = `
+  .cal-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .cal-weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, var(--cal-cell-size));
+    gap: 0;
+    margin-bottom: 4px;
+  }
+
+  .cal-weekday {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--cal-cell-size);
+    font-size: 12px;
+    font-weight: 500;
+    color: hsl(var(--cal-fg-muted));
+    user-select: none;
+  }
+
+  .cal-row {
+    display: grid;
+    grid-template-columns: repeat(7, var(--cal-cell-size));
+    gap: 0;
+  }
+
+  .cal-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--cal-cell-size);
+    height: var(--cal-cell-size);
+    font-size: 14px;
+    border-radius: var(--cal-radius-sm);
+    transition: background var(--cal-transition), color var(--cal-transition);
+    position: relative;
+    user-select: none;
+  }
+
+  .cal-day:not(.cal-day--disabled):not(.cal-day--selected):not(.cal-day--booked):not(.cal-day--half-day):not(.cal-day--blocked):not(.cal-day--checkout-only):not(.cal-day--checkin-only):hover {
+    background: hsl(var(--cal-hover));
+  }
+
+  .cal-day--outside {
+    color: hsl(var(--cal-fg-muted));
+    opacity: 0.4;
+  }
+
+  .cal-day--today:not(.cal-day--selected):not(.cal-day--booked):not(.cal-day--half-day):not(.cal-day--checkout-only):not(.cal-day--checkin-only) {
+    border: 1px solid hsl(var(--cal-border));
+    font-weight: 600;
+  }
+
+  .cal-day--selected {
+    background: hsl(var(--cal-accent));
+    color: hsl(var(--cal-accent-fg));
+    font-weight: 600;
+  }
+
+  .cal-day--range-start {
+    background: hsl(var(--cal-accent));
+    color: hsl(var(--cal-accent-fg));
+    font-weight: 600;
+    border-radius: var(--cal-radius-sm) 0 0 var(--cal-radius-sm);
+  }
+
+  .cal-day--range-end {
+    background: hsl(var(--cal-accent));
+    color: hsl(var(--cal-accent-fg));
+    font-weight: 600;
+    border-radius: 0 var(--cal-radius-sm) var(--cal-radius-sm) 0;
+  }
+
+  .cal-day--range-start.cal-day--range-end {
+    border-radius: var(--cal-radius-sm);
+  }
+
+  .cal-day--in-range {
+    background: hsl(var(--cal-accent-subtle));
+    border-radius: 0;
+  }
+
+  .cal-day--in-range:hover {
+    background: hsl(var(--cal-accent-subtle)) !important;
+  }
+
+  .cal-day--disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  /* ── Booking-specific styles ── */
+
+  /* Booked (fully occupied) */
+  .cal-day--booked {
+    background: var(--booking-bg, hsl(var(--cal-booking-blue-bg)));
+    color: var(--booking-fg, hsl(var(--cal-booking-blue-fg)));
+    cursor: not-allowed;
+  }
+
+  .cal-day--booked:hover {
+    background: var(--booking-hover, hsl(var(--cal-booking-blue-hover)));
+  }
+
+  /* Blocked */
+  .cal-day--blocked {
+    background: hsl(var(--cal-bg-muted));
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* Half-day diagonal (checkout + checkin on same day) */
+  .cal-day--half-day {
+    background: linear-gradient(135deg,
+      var(--half-day-color-out, hsl(var(--cal-booking-blue-bg))) 49.5%,
+      hsl(var(--cal-bg)) 49.5%, hsl(var(--cal-bg)) 50.5%,
+      var(--half-day-color-in, hsl(var(--cal-booking-green-bg))) 50.5%);
+    cursor: not-allowed;
+  }
+
+  /* Checkout-only (last day of a booking — outgoing triangle) */
+  .cal-day--checkout-only {
+    background: linear-gradient(135deg,
+      var(--half-day-color-out, hsl(var(--cal-booking-blue-bg))) 49.5%,
+      hsl(var(--cal-bg)) 49.5%);
+  }
+
+  /* Checkin-only (first day of a booking — incoming triangle) */
+  .cal-day--checkin-only {
+    background: linear-gradient(135deg,
+      hsl(var(--cal-bg)) 50.5%,
+      var(--half-day-color-in, hsl(var(--cal-booking-blue-bg))) 50.5%);
+  }
+
+  /* Diagonal cells: standard text color for clean contrast */
+  .cal-day--half-day,
+  .cal-day--checkout-only,
+  .cal-day--checkin-only {
+    color: hsl(var(--cal-fg));
+  }
+
+  /* ── Diagonal + selection compounds ── */
+
+  /* Checkout-only — range boundary: accent-subtle fill + refined ring */
+  .cal-day--checkout-only.cal-day--range-start,
+  .cal-day--checkout-only.cal-day--range-end,
+  .cal-day--checkout-only.cal-day--selected {
+    background: linear-gradient(135deg,
+      var(--half-day-color-out, hsl(var(--cal-booking-blue-bg))) 49.5%,
+      hsl(var(--cal-accent-subtle)) 50.5%);
+    color: hsl(var(--cal-fg));
+    box-shadow: inset 0 0 0 1.5px hsl(var(--cal-accent) / 0.3);
+  }
+
+  /* Checkout-only — in range: accent-subtle fill */
+  .cal-day--checkout-only.cal-day--in-range {
+    background: linear-gradient(135deg,
+      var(--half-day-color-out, hsl(var(--cal-booking-blue-bg))) 49.5%,
+      hsl(var(--cal-accent-subtle)) 50.5%);
+  }
+
+  /* Checkin-only — range boundary: accent-subtle fill + refined ring */
+  .cal-day--checkin-only.cal-day--range-start,
+  .cal-day--checkin-only.cal-day--range-end,
+  .cal-day--checkin-only.cal-day--selected {
+    background: linear-gradient(135deg,
+      hsl(var(--cal-accent-subtle)) 49.5%,
+      var(--half-day-color-in, hsl(var(--cal-booking-blue-bg))) 50.5%);
+    color: hsl(var(--cal-fg));
+    box-shadow: inset 0 0 0 1.5px hsl(var(--cal-accent) / 0.3);
+  }
+
+  /* Checkin-only — in range: accent-subtle fill */
+  .cal-day--checkin-only.cal-day--in-range {
+    background: linear-gradient(135deg,
+      hsl(var(--cal-accent-subtle)) 49.5%,
+      var(--half-day-color-in, hsl(var(--cal-booking-blue-bg))) 50.5%);
+  }
+
+  /* Half-day in range — accent-subtle stripe between booking triangles */
+  .cal-day--half-day.cal-day--in-range {
+    background: linear-gradient(135deg,
+      var(--half-day-color-out, hsl(var(--cal-booking-blue-bg))) 49.5%,
+      hsl(var(--cal-accent-subtle)) 49.5%, hsl(var(--cal-accent-subtle)) 50.5%,
+      var(--half-day-color-in, hsl(var(--cal-booking-green-bg))) 50.5%);
+  }
+
+  /* Invalid range preview (crosses a booking) */
+  .cal-day--invalid-range {
+    background: hsl(var(--cal-booking-red-bg));
+    border-radius: 0;
+  }
+
+  /* Booked/half-day/diagonal cells stay opaque even when disabled */
+  .cal-day--disabled.cal-day--booked,
+  .cal-day--disabled.cal-day--half-day,
+  .cal-day--disabled.cal-day--checkout-only,
+  .cal-day--disabled.cal-day--checkin-only {
+    opacity: 1;
+  }
+
+  /* Sublabel spans */
+  .cal-day__number {
+    font-size: 13px;
+    font-weight: 500;
+    line-height: 1;
+  }
+
+  .cal-day__label {
+    font-size: 9px;
+    font-weight: 500;
+    line-height: 1;
+    opacity: 0.8;
+  }
+
+  .cal-day--with-label {
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  /* CSS Tooltip */
+  .cal-day[data-booking-label] {
+    overflow: visible;
+  }
+
+  .cal-day[data-booking-label]:hover::after {
+    content: attr(data-booking-label);
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 4px 8px;
+    font-size: 11px;
+    font-weight: 500;
+    white-space: nowrap;
+    color: hsl(var(--cal-accent-fg));
+    background: hsl(var(--cal-accent));
+    border-radius: 4px;
+    pointer-events: none;
+    z-index: 10;
+  }
+
+  .cal-day[data-booking-label]:hover::before {
+    content: '';
+    position: absolute;
+    bottom: calc(100% + 2px);
+    left: 50%;
+    transform: translateX(-50%);
+    border: 4px solid transparent;
+    border-top-color: hsl(var(--cal-accent));
+    pointer-events: none;
+    z-index: 10;
+  }
+`, Q = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M10 12L6 8l4-4"/></svg>', Z = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M6 4l4 4-4 4"/></svg>';
+function q({ year: s, month: e, onPrev: a, onNext: t, onTitleClick: n }) {
+  const r = document.createElement("div");
+  r.classList.add("cal-nav");
+  const o = document.createElement("button");
+  o.classList.add("cal-nav__btn", "cal-nav__btn--prev"), o.innerHTML = Q, o.setAttribute("aria-label", "Previous month"), o.addEventListener("click", a);
+  const l = n ? "button" : "div", i = document.createElement(l);
+  i.classList.add("cal-nav__title"), n && (i.classList.add("cal-nav__title--interactive"), i.setAttribute("aria-label", `Select month and year, currently ${I[e]} ${s}`), i.addEventListener("click", n)), i.setAttribute("aria-live", "polite"), i.textContent = `${I[e]} ${s}`;
+  const g = document.createElement("button");
+  return g.classList.add("cal-nav__btn", "cal-nav__btn--next"), g.innerHTML = Z, g.setAttribute("aria-label", "Next month"), g.addEventListener("click", t), r.appendChild(o), r.appendChild(i), r.appendChild(g), r;
+}
+const me = `
+  .cal-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4px;
+    margin-bottom: 8px;
+  }
+
+  .cal-nav__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: var(--cal-radius-sm);
+    color: hsl(var(--cal-fg));
+    transition: background var(--cal-transition);
+  }
+
+  .cal-nav__btn:hover {
+    background: hsl(var(--cal-hover));
+  }
+
+  .cal-nav__title {
+    font-size: 14px;
+    font-weight: 600;
+    color: hsl(var(--cal-fg));
+    user-select: none;
+  }
+
+  .cal-nav__title--interactive {
+    cursor: pointer;
+    padding: 2px 8px;
+    border-radius: var(--cal-radius-sm);
+    transition: background var(--cal-transition);
+  }
+
+  .cal-nav__title--interactive:hover {
+    background: hsl(var(--cal-hover));
+  }
+`, ke = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec"
+];
+function _e({
+  pickerYear: s,
+  viewMonth: e,
+  viewYear: a,
+  onMonthSelect: t,
+  onYearPrev: n,
+  onYearNext: r,
+  onClose: o
+}) {
+  const l = document.createElement("div");
+  l.classList.add("cal-myp", "cal-animate-fade");
+  const i = document.createElement("div");
+  i.classList.add("cal-myp__year-nav");
+  const g = document.createElement("button");
+  g.classList.add("cal-nav__btn"), g.innerHTML = Q, g.setAttribute("aria-label", "Previous year"), g.addEventListener("click", n);
+  const h = document.createElement("div");
+  h.classList.add("cal-myp__year-label"), h.textContent = s;
+  const u = document.createElement("button");
+  u.classList.add("cal-nav__btn"), u.innerHTML = Z, u.setAttribute("aria-label", "Next year"), u.addEventListener("click", r), i.appendChild(g), i.appendChild(h), i.appendChild(u), l.appendChild(i);
+  const d = document.createElement("div");
+  d.classList.add("cal-myp__grid");
+  const b = /* @__PURE__ */ new Date(), p = b.getMonth(), C = b.getFullYear();
+  for (let k = 0; k < 12; k++) {
+    const w = document.createElement("button");
+    w.classList.add("cal-myp__cell"), w.textContent = ke[k], k === e && s === a && w.classList.add("cal-myp__cell--active"), k === p && s === C && w.classList.add("cal-myp__cell--today"), w.addEventListener("click", () => t(k, s)), d.appendChild(w);
+  }
+  return l.appendChild(d), l.addEventListener("keydown", (k) => {
+    k.key === "Escape" && (k.stopPropagation(), o());
+  }), l;
+}
+const xe = `
+  .cal-myp {
+    width: calc(7 * var(--cal-cell-size));
+  }
+
+  .cal-myp__year-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 4px;
+    margin-bottom: 8px;
+  }
+
+  .cal-myp__year-label {
+    font-size: 14px;
+    font-weight: 600;
+    color: hsl(var(--cal-fg));
+    user-select: none;
+  }
+
+  .cal-myp__grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 4px;
+  }
+
+  .cal-myp__cell {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(var(--cal-cell-size) * 1.5);
+    font-size: 13px;
+    font-weight: 500;
+    color: hsl(var(--cal-fg));
+    border-radius: var(--cal-radius-sm);
+    cursor: pointer;
+    transition: background var(--cal-transition);
+    user-select: none;
+  }
+
+  .cal-myp__cell:hover {
+    background: hsl(var(--cal-hover));
+  }
+
+  .cal-myp__cell--active {
+    background: hsl(var(--cal-accent));
+    color: hsl(var(--cal-accent-fg));
+    font-weight: 600;
+  }
+
+  .cal-myp__cell--active:hover {
+    background: hsl(var(--cal-accent));
+  }
+
+  .cal-myp__cell--today:not(.cal-myp__cell--active) {
+    border: 1px solid hsl(var(--cal-border));
+    font-weight: 600;
+  }
+`;
+function we() {
+  return [
+    {
+      key: "today",
+      label: "Today",
+      resolve() {
+        const s = K();
+        return { start: s, end: s };
+      }
+    },
+    {
+      key: "this-week",
+      label: "This Week",
+      resolve() {
+        const s = /* @__PURE__ */ new Date(), e = s.getDay(), a = new Date(s);
+        a.setDate(s.getDate() - e);
+        const t = new Date(a);
+        return t.setDate(a.getDate() + 6), { start: m(a), end: m(t) };
+      }
+    },
+    {
+      key: "next-7",
+      label: "Next 7 Days",
+      resolve() {
+        const s = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
+        return e.setDate(s.getDate() + 6), { start: m(s), end: m(e) };
+      }
+    },
+    {
+      key: "next-30",
+      label: "Next 30 Days",
+      resolve() {
+        const s = /* @__PURE__ */ new Date(), e = /* @__PURE__ */ new Date();
+        return e.setDate(s.getDate() + 29), { start: m(s), end: m(e) };
+      }
+    }
+  ];
+}
+function De({ presetKeys: s, onSelect: e }) {
+  const a = document.createElement("div");
+  a.classList.add("cal-presets");
+  const t = we(), n = s.map((r) => t.find((o) => o.key === r)).filter(Boolean);
+  for (const r of n) {
+    const o = document.createElement("button");
+    o.classList.add("cal-preset"), o.textContent = r.label, o.addEventListener("click", () => {
+      e == null || e(r.resolve());
+    }), a.appendChild(o);
+  }
+  return a;
+}
+const Le = `
+  .cal-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 8px 4px;
+    border-top: 1px solid hsl(var(--cal-border));
+    margin-top: 8px;
+  }
+
+  .cal-preset {
+    display: inline-flex;
+    align-items: center;
+    height: 28px;
+    padding: 0 10px;
+    font-size: 12px;
+    font-weight: 500;
+    border-radius: 999px;
+    background: hsl(var(--cal-bg-muted));
+    color: hsl(var(--cal-fg));
+    transition: background var(--cal-transition);
+  }
+
+  .cal-preset:hover {
+    background: hsl(var(--cal-hover));
+  }
+`;
+function Se({ trigger: s, content: e, onClose: a }) {
+  const t = document.createElement("div");
+  t.classList.add("cal-popover"), t.setAttribute("role", "dialog"), t.setAttribute("aria-modal", "false"), t.style.display = "none", t.appendChild(e);
+  let n = !1;
+  function r() {
+    t.classList.remove("cal-popover--above");
+    const u = s.getBoundingClientRect(), d = t.offsetHeight, b = window.innerHeight - u.bottom, p = u.top;
+    b < d + 8 && p > b ? (t.classList.add("cal-popover--above"), t.style.top = "auto", t.style.bottom = "100%", t.style.marginBottom = "4px", t.style.marginTop = "0") : (t.style.top = "100%", t.style.bottom = "auto", t.style.marginTop = "4px", t.style.marginBottom = "0");
+  }
+  function o() {
+    n || (n = !0, t.style.display = "", t.classList.add("cal-animate-slide-up"), requestAnimationFrame(() => r()), document.addEventListener("click", i, !0), document.addEventListener("keydown", g, !0));
+  }
+  function l() {
+    n && (n = !1, t.style.display = "none", t.classList.remove("cal-animate-slide-up"), document.removeEventListener("click", i, !0), document.removeEventListener("keydown", g, !0), a == null || a());
+  }
+  function i(u) {
+    var b;
+    const d = (b = s.getRootNode()) == null ? void 0 : b.host;
+    d && !d.contains(u.target) && u.target !== d && l();
+  }
+  function g(u) {
+    u.key === "Escape" && (u.stopPropagation(), l());
+  }
+  function h() {
+    n && (n = !1, t.style.display = "none", t.classList.remove("cal-animate-slide-up")), document.removeEventListener("click", i, !0), document.removeEventListener("keydown", g, !0);
+  }
+  return { panel: t, open: o, close: l, destroy: h, get isOpen() {
+    return n;
+  } };
+}
+const Ee = `
+  .cal-popover-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .cal-popover {
+    position: absolute;
+    left: 0;
+    z-index: 50;
+    background: hsl(var(--cal-bg));
+    border: 1px solid hsl(var(--cal-border));
+    border-radius: var(--cal-radius);
+    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
+    padding: 12px;
+  }
+
+  .cal-trigger {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    height: 36px;
+    padding: 0 12px;
+    font-size: 14px;
+    border: 1px solid hsl(var(--cal-border));
+    border-radius: var(--cal-radius-sm);
+    background: hsl(var(--cal-bg));
+    color: hsl(var(--cal-fg));
+    cursor: pointer;
+    transition: border-color var(--cal-transition);
+    white-space: nowrap;
+  }
+
+  .cal-trigger:hover {
+    border-color: hsl(var(--cal-fg-muted));
+  }
+
+  .cal-trigger--placeholder {
+    color: hsl(var(--cal-fg-muted));
+  }
+
+  .cal-trigger__icon {
+    display: flex;
+    color: hsl(var(--cal-fg-muted));
+  }
+`;
+function Me({ rows: s = 5 } = {}) {
+  const e = document.createElement("div");
+  e.setAttribute("role", "status"), e.setAttribute("aria-label", "Loading..."), e.classList.add("cal-skeleton-calendar-grid");
+  for (let t = 0; t < 7; t++) {
+    const n = document.createElement("div");
+    n.classList.add("cal-skeleton", "cal-skeleton-calendar-grid__header"), e.appendChild(n);
+  }
+  const a = 7 * s;
+  for (let t = 0; t < a; t++) {
+    const n = document.createElement("div");
+    n.classList.add("cal-skeleton", "cal-skeleton-calendar-grid__day"), e.appendChild(n);
+  }
+  return e;
+}
+const Ce = `
+  .cal-skeleton-time-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    gap: 6px;
+    padding: 4px;
+  }
+
+  .cal-skeleton-time-grid--duration {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
+  .cal-skeleton-time-grid .cal-skeleton {
+    height: 40px;
+  }
+
+  .cal-skeleton-calendar-grid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 2px;
+    padding: 4px;
+  }
+
+  .cal-skeleton-calendar-grid__header {
+    height: 20px;
+    margin-bottom: 4px;
+  }
+
+  .cal-skeleton-calendar-grid__day {
+    height: var(--cal-cell-size, 36px);
+    aspect-ratio: 1;
+    border-radius: var(--cal-radius-sm) !important;
+  }
+`, U = {
+  error: '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="7" cy="7" r="6"/><path d="M7 4v3M7 9.5v.01"/></svg>',
+  warning: '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M7 1.5L1 12.5h12L7 1.5zM7 6v2.5M7 10.5v.01"/></svg>',
+  info: '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="7" cy="7" r="6"/><path d="M7 6.5V10M7 4.5v.01"/></svg>',
+  success: '<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><circle cx="7" cy="7" r="6"/><path d="M4.5 7l2 2L9.5 5"/></svg>'
+};
+function Ae({ type: s = "info", message: e, dismissible: a = !0, onDismiss: t }) {
+  const n = document.createElement("div");
+  n.classList.add("cal-status", `cal-status--${s}`, "cal-animate-slide-up"), n.setAttribute("role", s === "error" ? "alert" : "status"), n.setAttribute("aria-live", s === "error" ? "assertive" : "polite");
+  const r = document.createElement("span");
+  r.classList.add("cal-status__icon"), r.innerHTML = U[s] || U.info, n.appendChild(r);
+  const o = document.createElement("span");
+  if (o.classList.add("cal-status__text"), o.textContent = e, n.appendChild(o), a) {
+    const l = document.createElement("button");
+    l.classList.add("cal-status__close"), l.setAttribute("aria-label", "Dismiss"), l.innerHTML = '<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><path d="M3 3l6 6M9 3l-6 6"/></svg>', l.addEventListener("click", () => t == null ? void 0 : t()), n.appendChild(l);
+  }
+  return n;
+}
+const Te = `
+  .cal-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    border-radius: var(--cal-radius-sm);
+    font-size: 12px;
+    line-height: 1.4;
+    margin-bottom: 8px;
+  }
+
+  .cal-status__icon {
+    flex-shrink: 0;
+    display: flex;
+  }
+
+  .cal-status__text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .cal-status__close {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border-radius: 4px;
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity var(--cal-transition);
+  }
+
+  .cal-status__close:hover {
+    opacity: 1;
+  }
+
+  .cal-status--error {
+    background: hsl(var(--cal-status-error-bg));
+    color: hsl(var(--cal-status-error-fg));
+    border: 1px solid hsl(var(--cal-status-error-border));
+  }
+
+  .cal-status--warning {
+    background: hsl(var(--cal-status-warning-bg));
+    color: hsl(var(--cal-status-warning-fg));
+    border: 1px solid hsl(var(--cal-status-warning-border));
+  }
+
+  .cal-status--info {
+    background: hsl(var(--cal-status-info-bg));
+    color: hsl(var(--cal-status-info-fg));
+    border: 1px solid hsl(var(--cal-status-info-border));
+  }
+
+  .cal-status--success {
+    background: hsl(var(--cal-status-success-bg));
+    color: hsl(var(--cal-status-success-fg));
+    border: 1px solid hsl(var(--cal-status-success-border));
+  }
+`, Ye = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="12" height="11" rx="2"/><path d="M5 1v3M11 1v3M2 7h12"/></svg>', Be = `
+  .cal-picker {
+    background: hsl(var(--cal-bg));
+    border-radius: var(--cal-radius);
+    user-select: none;
+  }
+
+  :host([display="inline"]) .cal-picker {
+    border: 1px solid hsl(var(--cal-border));
+    padding: 12px;
+  }
+
+  .cal-months {
+    display: flex;
+    gap: 16px;
+  }
+
+  .cal-month {
+    flex: 0 0 auto;
+  }
+`;
+class ze extends ne {
+  static get styles() {
+    return [de, ge, ue, ye, me, xe, Le, Ee, Ce, Te, Be];
+  }
+  static get observedAttributes() {
+    return ["mode", "display", "theme", "value", "min-date", "max-date", "disabled-dates", "first-day", "locale", "presets", "placeholder", "loading"];
+  }
+  constructor() {
+    super();
+    const e = /* @__PURE__ */ new Date();
+    this._store = se({
+      viewYear: e.getFullYear(),
+      viewMonth: e.getMonth(),
+      selectedDates: [],
+      rangeStart: null,
+      rangeEnd: null,
+      hoverDate: null,
+      isOpen: !1,
+      focusedDate: K(),
+      navDirection: null,
+      pickingMonth: !1,
+      pickerYear: e.getFullYear(),
+      statusType: null,
+      statusMessage: null,
+      statusDismissible: !0
+    }), this._popover = null, this._unsubscribe = null, this._rendering = !1;
+  }
+  // -- Attribute getters --
+  get mode() {
+    return this.getAttribute("mode") || "single";
+  }
+  get display() {
+    return this.getAttribute("display") || "inline";
+  }
+  get placeholder() {
+    return this.getAttribute("placeholder") || "Select date";
+  }
+  get firstDay() {
+    return parseInt(this.getAttribute("first-day") || "0", 10);
+  }
+  get minDate() {
+    return this.getAttribute("min-date") || null;
+  }
+  get maxDate() {
+    return this.getAttribute("max-date") || null;
+  }
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  set loading(e) {
+    e ? this.setAttribute("loading", "") : this.removeAttribute("loading");
+  }
+  get disabledDates() {
+    const e = this.getAttribute("disabled-dates");
+    return e ? e.split(",").map((a) => a.trim()) : [];
+  }
+  get presetKeys() {
+    const e = this.getAttribute("presets");
+    return e ? e.split(",").map((a) => a.trim()) : [];
+  }
+  // -- Value property --
+  get value() {
+    const e = this._store.getState();
+    return this.mode === "range" ? e.rangeStart && e.rangeEnd ? { start: e.rangeStart, end: e.rangeEnd } : null : this.mode === "multi" ? [...e.selectedDates] : e.selectedDates[0] || null;
+  }
+  set value(e) {
+    if (this.mode === "range" && e && typeof e == "object") {
+      const a = typeof e.start == "string" ? e.start : m(e.start), t = typeof e.end == "string" ? e.end : m(e.end);
+      this._store.set({
+        rangeStart: a,
+        rangeEnd: t,
+        selectedDates: [a, t]
+      }), this._navigateToDate(a);
+    } else this.mode === "multi" && Array.isArray(e) ? (this._store.set({ selectedDates: e }), e.length && this._navigateToDate(e[0])) : typeof e == "string" ? (this._store.set({ selectedDates: [e], rangeStart: null, rangeEnd: null }), this._navigateToDate(e)) : this._store.set({ selectedDates: [], rangeStart: null, rangeEnd: null });
+  }
+  _navigateToDate(e) {
+    const a = L(e);
+    a && this._store.set({ viewYear: a.getFullYear(), viewMonth: a.getMonth() });
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._unsubscribe = this._store.subscribe((a, t) => {
+      if (this._rendering) return;
+      a.hoverDate !== t.hoverDate && a.viewYear === t.viewYear && a.viewMonth === t.viewMonth && a.selectedDates === t.selectedDates && a.rangeStart === t.rangeStart && a.rangeEnd === t.rangeEnd && a.isOpen === t.isOpen && a.navDirection === t.navDirection && a.pickingMonth === t.pickingMonth && a.pickerYear === t.pickerYear ? this._updateGridHighlight(a) : this.render();
+    });
+    const e = this.getAttribute("value");
+    if (e)
+      if (this.mode === "range" && e.includes("/")) {
+        const [a, t] = e.split("/");
+        this.value = { start: a, end: t };
+      } else this.mode === "multi" && e.includes(",") ? this.value = e.split(",").map((a) => a.trim()) : this.value = e;
+  }
+  disconnectedCallback() {
+    var e, a;
+    (e = this._unsubscribe) == null || e.call(this), (a = this._popover) == null || a.destroy(), clearTimeout(this._statusTimer);
+  }
+  attributeChangedCallback(e, a, t) {
+    if (a !== t) {
+      if (e === "value" && this._initialized)
+        if (this.mode === "range" && t && t.includes("/")) {
+          const [n, r] = t.split("/");
+          this.value = { start: n, end: r };
+        } else this.mode === "multi" && t && t.includes(",") ? this.value = t.split(",").map((n) => n.trim()) : this.value = t;
+      this._initialized && this.render();
+    }
+  }
+  // -- Selection logic --
+  _handleSelect(e) {
+    const a = this._store.getState();
+    if (this.mode === "single")
+      this._store.set({
+        selectedDates: [e],
+        focusedDate: e
+      }), this.emit("cal:change", { value: e }), this.display === "popover" && this.close();
+    else if (this.mode === "range")
+      if (!a.rangeStart || a.rangeEnd)
+        this._store.set({
+          rangeStart: e,
+          rangeEnd: null,
+          selectedDates: [e],
+          focusedDate: e
+        });
+      else {
+        let t = a.rangeStart, n = e;
+        t > n && ([t, n] = [n, t]), this._store.set({
+          rangeStart: t,
+          rangeEnd: n,
+          selectedDates: [t, n],
+          hoverDate: null,
+          focusedDate: n
+        }), this.emit("cal:change", { value: { start: t, end: n } }), this.display === "popover" && this.close();
+      }
+    else if (this.mode === "multi") {
+      const t = [...a.selectedDates], n = t.findIndex((r) => M(r, e));
+      n >= 0 ? t.splice(n, 1) : t.push(e), t.sort(), this._store.set({ selectedDates: t, focusedDate: e }), this.emit("cal:change", { value: t });
+    }
+  }
+  _handleHover(e) {
+    this.mode === "range" && this._store.set({ hoverDate: e });
+  }
+  _handlePresetSelect({ start: e, end: a }) {
+    this._store.set({
+      rangeStart: e,
+      rangeEnd: a,
+      selectedDates: [e, a],
+      hoverDate: null
+    }), this._navigateToDate(e), this.emit("cal:change", { value: { start: e, end: a } }), this.display === "popover" && this.close();
+  }
+  // -- Navigation --
+  _prevMonth() {
+    const { viewYear: e, viewMonth: a } = this._store.getState(), { year: t, month: n } = z(e, a, -1);
+    this._store.set({ viewYear: t, viewMonth: n, navDirection: "prev" }), this.emit("cal:month-change", { year: t, month: n });
+  }
+  _nextMonth() {
+    const { viewYear: e, viewMonth: a } = this._store.getState(), { year: t, month: n } = z(e, a, 1);
+    this._store.set({ viewYear: t, viewMonth: n, navDirection: "next" }), this.emit("cal:month-change", { year: t, month: n });
+  }
+  // -- Month picker --
+  _toggleMonthPicker() {
+    const e = this._store.getState();
+    this._store.set({
+      pickingMonth: !e.pickingMonth,
+      pickerYear: e.viewYear
+    });
+  }
+  _selectMonthFromPicker(e, a) {
+    this._store.set({
+      viewYear: a,
+      viewMonth: e,
+      pickingMonth: !1
+    }), this.emit("cal:month-change", { year: a, month: e });
+  }
+  // -- Keyboard --
+  _handleKeydown(e) {
+    if (e.key === "Escape" && this._store.get("pickingMonth")) {
+      e.stopPropagation(), this._store.set({ pickingMonth: !1 });
+      return;
+    }
+    const a = this._store.getState(), t = L(a.focusedDate);
+    if (!t) return;
+    let n = null;
+    switch (e.key) {
+      case "ArrowLeft":
+        n = new Date(t), n.setDate(t.getDate() - 1);
+        break;
+      case "ArrowRight":
+        n = new Date(t), n.setDate(t.getDate() + 1);
+        break;
+      case "ArrowUp":
+        n = new Date(t), n.setDate(t.getDate() - 7);
+        break;
+      case "ArrowDown":
+        n = new Date(t), n.setDate(t.getDate() + 7);
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault(), this._handleSelect(a.focusedDate);
+        return;
+      case "Escape":
+        this.display === "popover" && this.close();
+        return;
+      default:
+        return;
+    }
+    if (n) {
+      e.preventDefault();
+      const r = m(n);
+      n.getMonth() !== a.viewMonth || n.getFullYear() !== a.viewYear ? this._store.set({
+        viewYear: n.getFullYear(),
+        viewMonth: n.getMonth(),
+        focusedDate: r,
+        navDirection: n > t ? "next" : "prev"
+      }) : this._store.set({ focusedDate: r }), requestAnimationFrame(() => {
+        const o = this.$(`[data-date="${r}"]`);
+        o == null || o.focus();
+      });
+    }
+  }
+  // -- Lightweight hover highlight (no DOM rebuild) --
+  _updateGridHighlight(e) {
+    const a = this.$$(".cal-day"), { rangeStart: t, hoverDate: n } = e, r = t && !e.rangeEnd && n ? n : e.rangeEnd;
+    for (const o of a) {
+      const l = o.dataset.date;
+      if (!l || o.classList.contains("cal-day--disabled")) continue;
+      const i = l === t, g = l === r;
+      let h = !1;
+      if (t && r) {
+        const u = t < r ? t : r, d = t < r ? r : t;
+        h = l >= u && l <= d && !i && !g;
+      }
+      o.classList.toggle("cal-day--range-start", i && !!r), o.classList.toggle("cal-day--range-end", g && !!r), o.classList.toggle("cal-day--in-range", h);
+    }
+  }
+  // -- Public API --
+  open() {
+    this._popover && (this._popover.open(), this._store.set({ isOpen: !0 }), this.emit("cal:open"));
+  }
+  close() {
+    this._popover && (this._popover.close(), this._store.set({ isOpen: !1 }), this.emit("cal:close"));
+  }
+  goToMonth(e, a) {
+    this._store.set({ viewYear: a, viewMonth: e });
+  }
+  // -- Render --
+  _renderCalendarContent() {
+    const e = this._store.getState(), a = document.createElement("div");
+    if (a.classList.add("cal-picker"), e.statusType && e.statusMessage && a.appendChild(Ae({
+      type: e.statusType,
+      message: e.statusMessage,
+      dismissible: e.statusDismissible,
+      onDismiss: () => this.clearStatus()
+    })), this.loading) {
+      const o = document.createElement("div");
+      o.classList.add("cal-months");
+      const l = document.createElement("div");
+      return l.classList.add("cal-month"), l.appendChild(Me()), o.appendChild(l), a.appendChild(o), a.addEventListener("keydown", (i) => this._handleKeydown(i)), a;
+    }
+    const t = document.createElement("div");
+    t.classList.add("cal-months");
+    const n = this.mode === "range" && this.hasAttribute("dual"), r = n ? 2 : 1;
+    for (let o = 0; o < r; o++) {
+      const { year: l, month: i } = o === 0 ? { year: e.viewYear, month: e.viewMonth } : z(e.viewYear, e.viewMonth, 1), g = document.createElement("div");
+      if (g.classList.add("cal-month"), o === 0 && g.appendChild(q({
+        year: l,
+        month: i,
+        onPrev: e.pickingMonth ? () => {
+        } : () => this._prevMonth(),
+        onNext: e.pickingMonth ? () => {
+        } : () => {
+          n || this._nextMonth();
+        },
+        onTitleClick: () => this._toggleMonthPicker()
+      })), o === 1 && g.appendChild(q({
+        year: l,
+        month: i,
+        onPrev: () => {
+        },
+        onNext: () => this._nextMonth()
+      })), e.pickingMonth && o === 0) {
+        const h = _e({
+          pickerYear: e.pickerYear,
+          viewMonth: e.viewMonth,
+          viewYear: e.viewYear,
+          onMonthSelect: (u, d) => this._selectMonthFromPicker(u, d),
+          onYearPrev: () => this._store.set({ pickerYear: e.pickerYear - 1 }),
+          onYearNext: () => this._store.set({ pickerYear: e.pickerYear + 1 }),
+          onClose: () => this._store.set({ pickingMonth: !1 })
+        });
+        g.appendChild(h);
+      } else {
+        const h = e.navDirection === "next" ? "cal-animate-slide-left" : e.navDirection === "prev" ? "cal-animate-slide-right" : "", u = fe({
+          year: l,
+          month: i,
+          firstDay: this.firstDay,
+          selectedDates: e.selectedDates,
+          rangeStart: e.rangeStart,
+          rangeEnd: e.rangeEnd,
+          hoverDate: e.hoverDate,
+          minDate: this.minDate,
+          maxDate: this.maxDate,
+          disabledDates: this.disabledDates,
+          mode: this.mode,
+          focusedDate: e.focusedDate,
+          onSelect: (d) => this._handleSelect(d),
+          onHover: (d) => this._handleHover(d)
+        });
+        h && u.classList.add(h), g.appendChild(u);
+      }
+      t.appendChild(g);
+    }
+    return a.appendChild(t), this.mode === "range" && this.presetKeys.length && a.appendChild(De({
+      presetKeys: this.presetKeys,
+      onSelect: (o) => this._handlePresetSelect(o)
+    })), a.addEventListener("keydown", (o) => this._handleKeydown(o)), a;
+  }
+  _formatTriggerText() {
+    const e = this._store.getState();
+    return this.mode === "range" && e.rangeStart && e.rangeEnd ? `${this._formatShortDate(e.rangeStart)} – ${this._formatShortDate(e.rangeEnd)}` : e.selectedDates.length ? this.mode === "multi" ? `${e.selectedDates.length} dates selected` : this._formatShortDate(e.selectedDates[0]) : null;
+  }
+  _formatShortDate(e) {
+    const a = L(e);
+    return a ? `${I[a.getMonth()].slice(0, 3)} ${a.getDate()}, ${a.getFullYear()}` : e;
+  }
+  render() {
+    var t;
+    if (this._rendering) return;
+    this._rendering = !0;
+    const e = this.shadowRoot, a = [...e.childNodes];
+    for (const n of a)
+      n.nodeName !== "STYLE" && !(n instanceof CSSStyleSheet) && e.removeChild(n);
+    if ((t = this._popover) == null || t.destroy(), this._popover = null, this.display === "popover") {
+      const n = document.createElement("div");
+      n.classList.add("cal-popover-wrapper");
+      const r = document.createElement("button");
+      r.classList.add("cal-trigger");
+      const o = document.createElement("span");
+      o.classList.add("cal-trigger__icon"), o.innerHTML = Ye, r.appendChild(o);
+      const l = this._formatTriggerText(), i = document.createElement("span");
+      l ? i.textContent = l : (i.textContent = this.placeholder, i.classList.add("cal-trigger--placeholder")), r.appendChild(i), n.appendChild(r);
+      const g = this._renderCalendarContent(), h = Se({
+        trigger: r,
+        content: g,
+        onClose: () => {
+          this._store.set({ isOpen: !1 }), this.emit("cal:close");
+        }
+      });
+      n.appendChild(h.panel), e.appendChild(n), r.addEventListener("click", (u) => {
+        u.stopPropagation(), h.isOpen ? this.close() : this.open();
+      }), this._popover = h, this._store.get("isOpen") && h.open();
+    } else
+      e.appendChild(this._renderCalendarContent());
+    this._store.set({ navDirection: null }), this._rendering = !1;
+  }
+}
+customElements.get("cal-datepicker") || customElements.define("cal-datepicker", ze);
+export {
+  ze as CalDatepicker
+};
+//# sourceMappingURL=datepicker.es.js.map