calkit 0.1.0 → 0.2.0

package/dist/booking.es.js

@@ -1,4 +1,4 @@
-class ce extends HTMLElement {
+class ge extends HTMLElement {
   constructor() {
     super(), this.attachShadow({ mode: "open" }), this._initialized = !1;
   }
@@ -27,6 +27,9 @@ class ce extends HTMLElement {
   /** Subclasses override to update Shadow DOM. */
   render() {
   }
+  /** Reset selection state. Subclasses should override with specific logic. */
+  clear() {
+  }
   /** Dispatch a composed, bubbling custom event. */
   emit(e, a = {}) {
     this.dispatchEvent(
@@ -36,8 +39,8 @@ class ce extends HTMLElement {
   /** Show an inline status banner. */
   showStatus(e, a, t = {}) {
     if (!this._store) return;
-    const { autoDismiss: n, dismissible: i = !0 } = t;
-    clearTimeout(this._statusTimer), this._store.set({ statusType: e, statusMessage: a, statusDismissible: i }), this.emit("cal:status", { type: e, message: a }), n && n > 0 && (this._statusTimer = setTimeout(() => this.clearStatus(), n));
+    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() {
@@ -51,7 +54,7 @@ class ce extends HTMLElement {
     return this.shadowRoot.querySelectorAll(e);
   }
 }
-function de(s) {
+function he(s) {
   let e = { ...s };
   const a = /* @__PURE__ */ new Set();
   return {
@@ -61,14 +64,14 @@ function de(s) {
     set(t) {
       const n = e;
       e = { ...e, ...t };
-      let i = !1;
-      for (const r of Object.keys(t))
-        if (n[r] !== e[r]) {
-          i = !0;
+      let r = !1;
+      for (const i of Object.keys(t))
+        if (n[i] !== e[i]) {
+          r = !0;
           break;
         }
-      if (i)
-        for (const r of a) r(e, n);
+      if (r)
+        for (const i of a) i(e, n);
     },
     getState() {
       return e;
@@ -78,7 +81,7 @@ function de(s) {
     }
   };
 }
-const J = [
+const Q = [
   "January",
   "February",
   "March",
@@ -91,17 +94,78 @@ const J = [
   "October",
   "November",
   "December"
-], ue = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-function ge(s = 0) {
-  const e = [];
-  for (let a = 0; a < 7; a++)
-    e.push(ue[(s + a) % 7]);
-  return e;
+], be = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
+function me(s) {
+  if (!s) return Q;
+  try {
+    const e = new Intl.DateTimeFormat(s, { month: "long" });
+    return Array.from({ length: 12 }, (a, t) => {
+      const n = e.format(new Date(2024, t, 1));
+      return n.charAt(0).toUpperCase() + n.slice(1);
+    });
+  } catch {
+    return Q;
+  }
+}
+function se(s) {
+  if (!s)
+    return [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ];
+  try {
+    const e = new Intl.DateTimeFormat(s, { month: "short" });
+    return Array.from({ length: 12 }, (a, t) => {
+      const n = e.format(new Date(2024, t, 1));
+      return n.charAt(0).toUpperCase() + n.slice(1);
+    });
+  } catch {
+    return [
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec"
+    ];
+  }
 }
-function V(s, e) {
+function fe(s = 0, e) {
+  if (e)
+    try {
+      const t = new Intl.DateTimeFormat(e, { weekday: "short" }), n = [];
+      for (let r = 0; r < 7; r++) {
+        const i = new Date(2024, 0, 7 + (s + r) % 7), o = t.format(i);
+        n.push(o.charAt(0).toUpperCase() + o.slice(1));
+      }
+      return n;
+    } catch {
+    }
+  const a = [];
+  for (let t = 0; t < 7; t++)
+    a.push(be[(s + t) % 7]);
+  return a;
+}
+function Z(s, e) {
   return new Date(s, e + 1, 0).getDate();
 }
-function he(s, e) {
+function pe(s, e) {
   return new Date(s, e, 1).getDay();
 }
 function T(s) {
@@ -109,7 +173,7 @@ function T(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 M(s) {
+function D(s) {
   if (!s) return null;
   if (s instanceof Date) return s;
   if (typeof s == "string") {
@@ -118,55 +182,55 @@ function M(s) {
   }
   return null;
 }
-function Y(s, e) {
+function z(s, e) {
   if (!s || !e) return !1;
-  const a = M(s), t = M(e);
+  const a = D(s), t = D(e);
   return !a || !t ? !1 : a.getFullYear() === t.getFullYear() && a.getMonth() === t.getMonth() && a.getDate() === t.getDate();
 }
-function be(s, e, a) {
+function ve(s, e, a) {
   if (!s || !e || !a) return !1;
-  const t = M(s), n = M(e), i = M(a);
-  if (!t || !n || !i) return !1;
-  const r = t.getTime(), o = Math.min(n.getTime(), i.getTime()), l = Math.max(n.getTime(), i.getTime());
-  return r >= o && r <= l;
+  const t = D(s), n = D(e), r = D(a);
+  if (!t || !n || !r) return !1;
+  const i = t.getTime(), o = Math.min(n.getTime(), r.getTime()), l = Math.max(n.getTime(), r.getTime());
+  return i >= o && i <= l;
 }
-function ae() {
+function re() {
   return T(/* @__PURE__ */ new Date());
 }
-function B(s, e, a) {
+function O(s, e, a) {
   const t = new Date(s, e + a, 1);
   return { year: t.getFullYear(), month: t.getMonth() };
 }
-function me(s, e, a = 0) {
-  const t = V(s, e), i = (he(s, e) - a + 7) % 7, r = [], o = ae(), l = B(s, e, -1), u = V(l.year, l.month);
-  for (let c = i - 1; c >= 0; c--) {
-    const d = u - c, b = T({ year: l.year, month: l.month, day: d });
-    r.push({ year: l.year, month: l.month, day: d, dateString: b, isCurrentMonth: !1, isToday: b === o });
+function ye(s, e, a = 0) {
+  const t = Z(s, e), r = (pe(s, e) - a + 7) % 7, i = [], o = re(), l = O(s, e, -1), g = Z(l.year, l.month);
+  for (let c = r - 1; c >= 0; c--) {
+    const u = g - c, m = T({ year: l.year, month: l.month, day: u });
+    i.push({ year: l.year, month: l.month, day: u, dateString: m, isCurrentMonth: !1, isToday: m === o });
   }
   for (let c = 1; c <= t; c++) {
-    const d = T({ year: s, month: e, day: c });
-    r.push({ year: s, month: e, day: c, dateString: d, isCurrentMonth: !0, isToday: d === o });
+    const u = T({ year: s, month: e, day: c });
+    i.push({ year: s, month: e, day: c, dateString: u, isCurrentMonth: !0, isToday: u === o });
   }
-  const m = B(s, e, 1);
-  let g = 1;
-  for (; r.length < 42; ) {
-    const c = T({ year: m.year, month: m.month, day: g });
-    r.push({ year: m.year, month: m.month, day: g, dateString: c, isCurrentMonth: !1, isToday: c === o }), g++;
+  const h = O(s, e, 1);
+  let d = 1;
+  for (; i.length < 42; ) {
+    const c = T({ year: h.year, month: h.month, day: d });
+    i.push({ year: h.year, month: h.month, day: d, dateString: c, isCurrentMonth: !1, isToday: c === o }), d++;
   }
-  return r;
+  return i;
 }
-function N(s) {
+function U(s) {
   if (!s || typeof s != "string") return null;
   const e = s.trim().toUpperCase(), a = e.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/);
   if (a) {
     let n = parseInt(a[1], 10);
-    const i = parseInt(a[2], 10), r = a[3];
-    return r === "AM" && n === 12 && (n = 0), r === "PM" && n !== 12 && (n += 12), { hours: n, minutes: i };
+    const r = parseInt(a[2], 10), i = a[3];
+    return i === "AM" && n === 12 && (n = 0), i === "PM" && n !== 12 && (n += 12), { hours: n, minutes: r };
   }
   const t = e.match(/^(\d{1,2}):(\d{2})$/);
   return t ? { hours: parseInt(t[1], 10), minutes: parseInt(t[2], 10) } : null;
 }
-function K(s, e, a = "24h") {
+function X(s, e, a = "24h") {
   const t = String(e).padStart(2, "0");
   if (a === "12h") {
     const n = s >= 12 ? "PM" : "AM";
@@ -175,32 +239,36 @@ function K(s, e, a = "24h") {
   return `${String(s).padStart(2, "0")}:${t}`;
 }
 function A(s) {
-  const e = N(s);
+  const e = U(s);
   return e ? e.hours * 60 + e.minutes : 0;
 }
-function X(s) {
+function q(s) {
   const e = Math.floor(s / 60) % 24, a = s % 60;
   return `${String(e).padStart(2, "0")}:${String(a).padStart(2, "0")}`;
 }
-function pe(s, e, a) {
-  const t = [], n = A(s), i = A(e);
-  for (let r = n; r <= i; r += a)
-    t.push(X(r));
+function ke(s, e, a) {
+  const t = [], n = A(s);
+  let r = A(e);
+  r <= n && (r += 1440);
+  for (let i = n; i <= r; i += a)
+    t.push(q(i % 1440));
   return t;
 }
-function fe(s, e, a, t = "24h") {
-  const n = [], i = A(s), r = A(e);
-  for (let o = i; o <= r; o += a) {
-    const l = X(o), u = o + a, m = X(Math.min(u, r + a)), g = N(l), c = N(m), d = g ? K(g.hours, g.minutes, t) : l, b = c ? K(c.hours, c.minutes, t) : m;
-    n.push({ time: l, displayText: `${d}–${b}` });
+function _e(s, e, a, t = "24h") {
+  const n = [], r = A(s);
+  let i = A(e);
+  i <= r && (i += 1440);
+  for (let o = r; o <= i; o += a) {
+    const l = q(o % 1440), g = o + a, h = q(Math.min(g, i + a) % 1440), d = U(l), c = U(h), u = d ? X(d.hours, d.minutes, t) : l, m = c ? X(c.hours, c.minutes, t) : h;
+    n.push({ time: l, displayText: `${u}–${m}` });
   }
   return n;
 }
-function Q(s, e, a) {
-  const t = A(s), n = A(e), i = A(a), r = Math.min(n, i), o = Math.max(n, i);
-  return t >= r && t <= o;
+function ee(s, e, a) {
+  const t = A(s), n = A(e), r = A(a);
+  return r >= n ? t >= n && t <= r : t >= n || t <= r;
 }
-const ve = `
+const we = `
   :host {
     /* Light theme (default) */
     --cal-bg: 0 0% 100%;
@@ -368,7 +436,7 @@ const ve = `
       --cal-status-success-border: 152 40% 28%;
     }
   }
-`, ye = `
+`, xe = `
   :host {
     display: inline-block;
     font-family: inherit;
@@ -409,7 +477,7 @@ const ve = `
   [hidden] {
     display: none !important;
   }
-`, ke = `
+`, Se = `
   @keyframes cal-fade-in {
     from { opacity: 0; }
     to { opacity: 1; }
@@ -473,18 +541,18 @@ const ve = `
   .cal-skeleton--rect {
     border-radius: var(--cal-radius-sm);
   }
-`, ne = '<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>', se = '<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 Z({ year: s, month: e, onPrev: a, onNext: t, onTitleClick: n }) {
+`, ie = '<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>', oe = '<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 te({ year: s, month: e, onPrev: a, onNext: t, onTitleClick: n, locale: r }) {
   const i = document.createElement("div");
   i.classList.add("cal-nav");
-  const r = document.createElement("button");
-  r.classList.add("cal-nav__btn", "cal-nav__btn--prev"), r.innerHTML = ne, r.setAttribute("aria-label", "Previous month"), r.addEventListener("click", a);
-  const o = n ? "button" : "div", l = document.createElement(o);
-  l.classList.add("cal-nav__title"), n && (l.classList.add("cal-nav__title--interactive"), l.setAttribute("aria-label", `Select month and year, currently ${J[e]} ${s}`), l.addEventListener("click", n)), l.setAttribute("aria-live", "polite"), l.textContent = `${J[e]} ${s}`;
-  const u = document.createElement("button");
-  return u.classList.add("cal-nav__btn", "cal-nav__btn--next"), u.innerHTML = se, u.setAttribute("aria-label", "Next month"), u.addEventListener("click", t), i.appendChild(r), i.appendChild(l), i.appendChild(u), i;
+  const o = document.createElement("button");
+  o.classList.add("cal-nav__btn", "cal-nav__btn--prev"), o.innerHTML = ie, o.setAttribute("aria-label", "Previous month"), o.addEventListener("click", a);
+  const l = me(r), g = n ? "button" : "div", h = document.createElement(g);
+  h.classList.add("cal-nav__title"), n && (h.classList.add("cal-nav__title--interactive"), h.setAttribute("aria-label", `Select month and year, currently ${l[e]} ${s}`), h.addEventListener("click", n)), h.setAttribute("aria-live", "polite"), h.textContent = `${l[e]} ${s}`;
+  const d = document.createElement("button");
+  return d.classList.add("cal-nav__btn", "cal-nav__btn--next"), d.innerHTML = oe, d.setAttribute("aria-label", "Next month"), d.addEventListener("click", t), i.appendChild(o), i.appendChild(h), i.appendChild(d), i;
 }
-const _e = `
+const Le = `
   .cal-nav {
     display: flex;
     align-items: center;
@@ -525,51 +593,39 @@ const _e = `
   .cal-nav__title--interactive:hover {
     background: hsl(var(--cal-hover));
   }
-`, xe = [
-  "Jan",
-  "Feb",
-  "Mar",
-  "Apr",
-  "May",
-  "Jun",
-  "Jul",
-  "Aug",
-  "Sep",
-  "Oct",
-  "Nov",
-  "Dec"
-];
-function we({
+`;
+function De({
   pickerYear: s,
   viewMonth: e,
   viewYear: a,
   onMonthSelect: t,
   onYearPrev: n,
-  onYearNext: i,
-  onClose: r
+  onYearNext: r,
+  onClose: i,
+  locale: o
 }) {
-  const o = document.createElement("div");
-  o.classList.add("cal-myp", "cal-animate-fade");
   const l = document.createElement("div");
-  l.classList.add("cal-myp__year-nav");
-  const u = document.createElement("button");
-  u.classList.add("cal-nav__btn"), u.innerHTML = ne, u.setAttribute("aria-label", "Previous year"), u.addEventListener("click", n);
-  const m = document.createElement("div");
-  m.classList.add("cal-myp__year-label"), m.textContent = s;
-  const g = document.createElement("button");
-  g.classList.add("cal-nav__btn"), g.innerHTML = se, g.setAttribute("aria-label", "Next year"), g.addEventListener("click", i), l.appendChild(u), l.appendChild(m), l.appendChild(g), o.appendChild(l);
-  const c = document.createElement("div");
-  c.classList.add("cal-myp__grid");
-  const d = /* @__PURE__ */ new Date(), b = d.getMonth(), E = d.getFullYear();
-  for (let v = 0; v < 12; v++) {
-    const x = document.createElement("button");
-    x.classList.add("cal-myp__cell"), x.textContent = xe[v], v === e && s === a && x.classList.add("cal-myp__cell--active"), v === b && s === E && x.classList.add("cal-myp__cell--today"), x.addEventListener("click", () => t(v, s)), c.appendChild(x);
-  }
-  return o.appendChild(c), o.addEventListener("keydown", (v) => {
-    v.key === "Escape" && (v.stopPropagation(), r());
-  }), o;
+  l.classList.add("cal-myp", "cal-animate-fade");
+  const g = document.createElement("div");
+  g.classList.add("cal-myp__year-nav");
+  const h = document.createElement("button");
+  h.classList.add("cal-nav__btn"), h.innerHTML = ie, h.setAttribute("aria-label", "Previous year"), h.addEventListener("click", n);
+  const d = document.createElement("div");
+  d.classList.add("cal-myp__year-label"), d.textContent = s;
+  const c = document.createElement("button");
+  c.classList.add("cal-nav__btn"), c.innerHTML = oe, c.setAttribute("aria-label", "Next year"), c.addEventListener("click", r), g.appendChild(h), g.appendChild(d), g.appendChild(c), l.appendChild(g);
+  const u = document.createElement("div");
+  u.classList.add("cal-myp__grid");
+  const m = se(o), f = /* @__PURE__ */ new Date(), E = f.getMonth(), P = f.getFullYear();
+  for (let w = 0; w < 12; w++) {
+    const v = document.createElement("button");
+    v.classList.add("cal-myp__cell"), v.textContent = m[w], w === e && s === a && v.classList.add("cal-myp__cell--active"), w === E && s === P && v.classList.add("cal-myp__cell--today"), v.addEventListener("click", () => t(w, s)), u.appendChild(v);
+  }
+  return l.appendChild(u), l.addEventListener("keydown", (w) => {
+    w.key === "Escape" && (w.stopPropagation(), i());
+  }), l;
 }
-const Se = `
+const Ee = `
   .cal-myp {
     width: calc(7 * var(--cal-cell-size));
   }
@@ -628,37 +684,37 @@ const Se = `
     font-weight: 600;
   }
 `;
-function Le({ trigger: s, content: e, onClose: a }) {
+function Me({ 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 i() {
+  function r() {
     t.classList.remove("cal-popover--above");
-    const g = s.getBoundingClientRect(), c = t.offsetHeight, d = window.innerHeight - g.bottom, b = g.top;
-    d < c + 8 && b > d ? (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");
+    const d = s.getBoundingClientRect(), c = t.offsetHeight, u = window.innerHeight - d.bottom, m = d.top;
+    u < c + 8 && m > u ? (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 r() {
-    n || (n = !0, t.style.display = "", t.classList.add("cal-animate-slide-up"), requestAnimationFrame(() => i()), document.addEventListener("click", l, !0), document.addEventListener("keydown", u, !0));
+  function i() {
+    n || (n = !0, t.style.display = "", t.classList.add("cal-animate-slide-up"), requestAnimationFrame(() => r()), document.addEventListener("click", l, !0), document.addEventListener("keydown", g, !0));
   }
   function o() {
-    n && (n = !1, t.style.display = "none", t.classList.remove("cal-animate-slide-up"), document.removeEventListener("click", l, !0), document.removeEventListener("keydown", u, !0), a == null || a());
+    n && (n = !1, t.style.display = "none", t.classList.remove("cal-animate-slide-up"), document.removeEventListener("click", l, !0), document.removeEventListener("keydown", g, !0), a == null || a());
   }
-  function l(g) {
-    var d;
-    const c = (d = s.getRootNode()) == null ? void 0 : d.host;
-    c && !c.contains(g.target) && g.target !== c && o();
+  function l(d) {
+    var u;
+    const c = (u = s.getRootNode()) == null ? void 0 : u.host;
+    c && !c.contains(d.target) && d.target !== c && o();
   }
-  function u(g) {
-    g.key === "Escape" && (g.stopPropagation(), o());
+  function g(d) {
+    d.key === "Escape" && (d.stopPropagation(), o());
   }
-  function m() {
-    n && (n = !1, t.style.display = "none", t.classList.remove("cal-animate-slide-up")), document.removeEventListener("click", l, !0), document.removeEventListener("keydown", u, !0);
+  function h() {
+    n && (n = !1, t.style.display = "none", t.classList.remove("cal-animate-slide-up")), document.removeEventListener("click", l, !0), document.removeEventListener("keydown", g, !0);
   }
-  return { panel: t, open: r, close: o, destroy: m, get isOpen() {
+  return { panel: t, open: i, close: o, destroy: h, get isOpen() {
     return n;
   } };
 }
-const Ee = `
+const Ce = `
   .cal-popover-wrapper {
     position: relative;
     display: inline-block;
@@ -703,124 +759,137 @@ const Ee = `
     display: flex;
     color: hsl(var(--cal-fg-muted));
   }
-`, ee = {
+`, ae = {
   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)" }
-}, z = "blue";
-function P(s) {
-  return ee[s] || ee[z];
+}, Y = "blue";
+function F(s, e) {
+  return e && e[s] ? e[s] : ae[s] || ae[Y];
 }
-function De(s, e = [], a = {}, t = null) {
-  const n = e.find((b) => b.end === s), i = e.find((b) => b.start === s), r = e.find(
-    (b) => b.start < s && b.end > s
+function Te(s) {
+  if (!Array.isArray(s) || !s.length) return null;
+  const e = {};
+  for (const a of s)
+    !a.name || !a.bg || !a.fg || (e[a.name] = {
+      bg: a.bg,
+      fg: a.fg,
+      hover: a.hover || a.bg
+    });
+  return Object.keys(e).length ? e : null;
+}
+function Ae(s, e = [], a = {}, t = null, n = null) {
+  const r = e.find((f) => f.end === s), i = e.find((f) => f.start === s), o = e.find(
+    (f) => f.start < s && f.end > s
   );
-  let o = "available", l = null, u = !1, m = null, g = null, c = null;
-  n && i ? (o = "half-day", u = !0, m = P(n.color || z), g = P(i.color || z)) : r ? (o = "booked", c = P(r.color || z)) : i && !n ? (o = "checkin-only", g = P(i.color || z)) : n && !i && (o = "checkout-only", m = P(n.color || z));
-  const d = a[s];
-  if (d && (d.status && (o = d.status), d.label !== void 0 && (l = d.label)), t) {
-    const b = t(s);
-    b && (b.status && (o = b.status), b.label !== void 0 && (l = b.label));
-  }
-  return { status: o, label: l, checkoutBooking: n, checkinBooking: i, halfDay: u, colorOut: m, colorIn: g, colorFull: c };
+  let l = "available", g = null, h = !1, d = null, c = null, u = null;
+  r && i ? (l = "half-day", h = !0, d = F(r.color || Y, n), c = F(i.color || Y, n)) : o ? (l = "booked", u = F(o.color || Y, n)) : i && !r ? (l = "checkin-only", c = F(i.color || Y, n)) : r && !i && (l = "checkout-only", d = F(r.color || Y, n));
+  const m = a[s];
+  if (m && (m.status && (l = m.status), m.label !== void 0 && (g = m.label)), t) {
+    const f = t(s);
+    f && (f.status && (l = f.status), f.label !== void 0 && (g = f.label));
+  }
+  return { status: l, label: g, checkoutBooking: r, checkinBooking: i, halfDay: h, colorOut: d, colorIn: c, colorFull: u };
 }
-function ie(s, e, a = []) {
+function le(s, e, a = []) {
   if (!s || !e) return !0;
   const t = s < e ? s : e, n = s < e ? e : s;
-  for (const i of a)
-    if (t < i.end && n > i.start)
+  for (const r of a)
+    if (t < r.end && n > r.start)
       return !1;
   return !0;
 }
-function Me(s, e, a = []) {
-  return !s || !e ? !1 : !ie(s, e, a);
+function Pe(s, e, a = []) {
+  return !s || !e ? !1 : !le(s, e, a);
 }
-function Ce(s) {
+function $e(s) {
   const {
     year: e,
     month: a,
     firstDay: t = 0,
     selectedDates: n = [],
-    rangeStart: i,
-    rangeEnd: r,
+    rangeStart: r,
+    rangeEnd: i,
     hoverDate: o,
     minDate: l,
-    maxDate: u,
-    disabledDates: m = [],
-    mode: g = "single",
+    maxDate: g,
+    disabledDates: h = [],
+    mode: d = "single",
     focusedDate: c,
-    onSelect: d,
-    onHover: b,
+    onSelect: u,
+    onHover: m,
     // Booking-specific params
-    bookings: E = null,
-    dayData: v = null,
-    labelFormula: x = null,
-    showLabelsOnHover: q = !1
-  } = s, y = E !== null, _ = document.createElement("div");
-  _.setAttribute("role", "grid"), _.classList.add("cal-grid");
-  const S = document.createElement("div");
-  S.setAttribute("role", "row"), S.classList.add("cal-weekdays");
-  for (const w of ge(t)) {
+    bookings: f = null,
+    dayData: E = null,
+    labelFormula: P = null,
+    showLabelsOnHover: w = !1,
+    locale: v,
+    customColors: M = null
+  } = s, k = f !== null, $ = document.createElement("div");
+  $.setAttribute("role", "grid"), $.classList.add("cal-grid");
+  const I = document.createElement("div");
+  I.setAttribute("role", "row"), I.classList.add("cal-weekdays");
+  for (const x of fe(t, v)) {
     const C = document.createElement("div");
-    C.setAttribute("role", "columnheader"), C.setAttribute("aria-label", w), C.classList.add("cal-weekday"), C.textContent = w, S.appendChild(C);
-  }
-  _.appendChild(S);
-  const re = me(e, a, t), G = g === "range" && i && !r && o || y && i && !r && o ? o : r, oe = y ? Me(i, o, E) : !1;
-  let $;
-  return re.forEach((w, C) => {
-    C % 7 === 0 && ($ = document.createElement("div"), $.setAttribute("role", "row"), $.classList.add("cal-row"), _.appendChild($));
-    const h = document.createElement("button");
-    h.setAttribute("role", "gridcell"), h.setAttribute("part", "day"), h.classList.add("cal-day");
-    const p = w.dateString;
-    h.dataset.date = p;
-    const le = new Date(w.year, w.month, w.day);
-    h.setAttribute("aria-label", le.toLocaleDateString("en-US", {
+    C.setAttribute("role", "columnheader"), C.setAttribute("aria-label", x), C.classList.add("cal-weekday"), C.textContent = x, I.appendChild(C);
+  }
+  $.appendChild(I);
+  const ce = ye(e, a, t), K = d === "range" && r && !i && o || k && r && !i && o ? o : i, de = k ? Pe(r, o, f) : !1;
+  let B;
+  return ce.forEach((x, C) => {
+    C % 7 === 0 && (B = document.createElement("div"), B.setAttribute("role", "row"), B.classList.add("cal-row"), $.appendChild(B));
+    const b = document.createElement("button");
+    b.setAttribute("role", "gridcell"), b.setAttribute("part", "day"), b.classList.add("cal-day");
+    const p = x.dateString;
+    b.dataset.date = p;
+    const ue = new Date(x.year, x.month, x.day);
+    b.setAttribute("aria-label", ue.toLocaleDateString("en-US", {
       weekday: "long",
       year: "numeric",
       month: "long",
       day: "numeric"
-    })), w.isCurrentMonth || h.classList.add("cal-day--outside"), w.isToday && h.classList.add("cal-day--today");
-    let k = null, O = !1;
-    if (y) {
-      k = De(p, E, v || {}, x);
-      const { status: f, label: L, halfDay: F, colorOut: R, colorIn: I, colorFull: H } = k;
-      if (f === "booked" && (h.classList.add("cal-day--booked"), H && (h.style.setProperty("--booking-bg", `hsl(${H.bg})`), h.style.setProperty("--booking-fg", `hsl(${H.fg})`), h.style.setProperty("--booking-hover", `hsl(${H.hover})`)), O = !0), f === "blocked" && (h.classList.add("cal-day--blocked"), O = !0), F && (h.classList.add("cal-day--half-day"), R && h.style.setProperty("--half-day-color-out", `hsl(${R.bg})`), I && h.style.setProperty("--half-day-color-in", `hsl(${I.bg})`), O = !0), f === "checkout-only" && (h.classList.add("cal-day--checkout-only"), R && h.style.setProperty("--half-day-color-out", `hsl(${R.bg})`)), f === "checkin-only" && (h.classList.add("cal-day--checkin-only"), I && h.style.setProperty("--half-day-color-in", `hsl(${I.bg})`)), q) {
-        let D = null;
-        if (F && k.checkoutBooking && k.checkinBooking)
-          D = `${k.checkoutBooking.label || ""} / ${k.checkinBooking.label || ""}`;
-        else if (f === "booked") {
-          const j = E.find((W) => W.start <= p && W.end > p);
-          j && (D = j.label);
-        } else f === "checkout-only" && k.checkoutBooking ? D = k.checkoutBooking.label : f === "checkin-only" && k.checkinBooking && (D = k.checkinBooking.label);
-        D && h.setAttribute("data-booking-label", D);
+    })), x.isCurrentMonth || b.classList.add("cal-day--outside"), x.isToday && b.classList.add("cal-day--today");
+    let _ = null, R = !1;
+    if (k) {
+      _ = Ae(p, f, E || {}, P, M);
+      const { status: y, label: S, halfDay: j, colorOut: H, colorIn: N, colorFull: G } = _;
+      if (y === "booked" && (b.classList.add("cal-day--booked"), G && (b.style.setProperty("--booking-bg", `hsl(${G.bg})`), b.style.setProperty("--booking-fg", `hsl(${G.fg})`), b.style.setProperty("--booking-hover", `hsl(${G.hover})`)), R = !0), y === "blocked" && (b.classList.add("cal-day--blocked"), R = !0), j && (b.classList.add("cal-day--half-day"), H && b.style.setProperty("--half-day-color-out", `hsl(${H.bg})`), N && b.style.setProperty("--half-day-color-in", `hsl(${N.bg})`), R = !0), y === "checkout-only" && (b.classList.add("cal-day--checkout-only"), H && b.style.setProperty("--half-day-color-out", `hsl(${H.bg})`)), y === "checkin-only" && (b.classList.add("cal-day--checkin-only"), N && b.style.setProperty("--half-day-color-in", `hsl(${N.bg})`)), w) {
+        let L = null;
+        if (j && _.checkoutBooking && _.checkinBooking)
+          L = `${_.checkoutBooking.label || ""} / ${_.checkinBooking.label || ""}`;
+        else if (y === "booked") {
+          const J = f.find((V) => V.start <= p && V.end > p);
+          J && (L = J.label);
+        } else y === "checkout-only" && _.checkoutBooking ? L = _.checkoutBooking.label : y === "checkin-only" && _.checkinBooking && (L = _.checkinBooking.label);
+        L && b.setAttribute("data-booking-label", L);
       }
-      if (oe && i && !r && o) {
-        const D = i < o ? i : o, j = i < o ? o : i;
-        p >= D && p <= j && h.classList.add("cal-day--invalid-range");
+      if (de && r && !i && o) {
+        const L = r < o ? r : o, J = r < o ? o : r;
+        p >= L && p <= J && b.classList.add("cal-day--invalid-range");
       }
     }
-    if (y ? i && r && (Y(p, i) || Y(p, r)) ? (h.classList.add("cal-day--selected"), h.setAttribute("aria-selected", "true")) : h.setAttribute("aria-selected", "false") : n.some((L) => Y(L, p)) ? (h.classList.add("cal-day--selected"), h.setAttribute("aria-selected", "true")) : h.setAttribute("aria-selected", "false"), (g === "range" || y) && i && G) {
-      const f = Y(p, i), L = Y(p, G), F = be(p, i, G);
-      f && h.classList.add("cal-day--range-start"), L && h.classList.add("cal-day--range-end"), F && !f && !L && h.classList.add("cal-day--in-range");
+    if (k ? r && i && (z(p, r) || z(p, i)) ? (b.classList.add("cal-day--selected"), b.setAttribute("aria-selected", "true")) : b.setAttribute("aria-selected", "false") : n.some((S) => z(S, p)) ? (b.classList.add("cal-day--selected"), b.setAttribute("aria-selected", "true")) : b.setAttribute("aria-selected", "false"), (d === "range" || k) && r && K) {
+      const y = z(p, r), S = z(p, K), j = ve(p, r, K);
+      y && b.classList.add("cal-day--range-start"), S && b.classList.add("cal-day--range-end"), j && !y && !S && b.classList.add("cal-day--in-range");
     }
-    const U = Te(p, l, u, m) || O;
-    if (U && (h.classList.add("cal-day--disabled"), h.disabled = !0, h.setAttribute("aria-disabled", "true")), c && Y(p, c) ? h.setAttribute("tabindex", "0") : h.setAttribute("tabindex", "-1"), y && k && k.label != null) {
-      h.classList.add("cal-day--with-label");
-      const f = document.createElement("span");
-      f.classList.add("cal-day__number"), f.textContent = w.day, h.appendChild(f);
-      const L = document.createElement("span");
-      L.classList.add("cal-day__label"), L.textContent = k.label, h.appendChild(L);
+    const W = ze(p, l, g, h) || R;
+    if (W && (b.classList.add("cal-day--disabled"), b.disabled = !0, b.setAttribute("aria-disabled", "true")), c && z(p, c) ? b.setAttribute("tabindex", "0") : b.setAttribute("tabindex", "-1"), k && _ && _.label != null) {
+      b.classList.add("cal-day--with-label");
+      const y = document.createElement("span");
+      y.classList.add("cal-day__number"), y.textContent = x.day, b.appendChild(y);
+      const S = document.createElement("span");
+      S.classList.add("cal-day__label"), S.textContent = _.label, b.appendChild(S);
     } else
-      h.textContent = w.day;
-    U ? y && h.addEventListener("mouseenter", () => b == null ? void 0 : b(p)) : (h.addEventListener("click", () => d == null ? void 0 : d(p)), h.addEventListener("mouseenter", () => b == null ? void 0 : b(p))), $.appendChild(h);
-  }), _.addEventListener("mouseleave", () => b == null ? void 0 : b(null)), _;
+      b.textContent = x.day;
+    W ? k && b.addEventListener("mouseenter", () => m == null ? void 0 : m(p)) : (b.addEventListener("click", () => u == null ? void 0 : u(p)), b.addEventListener("mouseenter", () => m == null ? void 0 : m(p))), B.appendChild(b);
+  }), $.addEventListener("mouseleave", () => m == null ? void 0 : m(null)), $;
 }
-function Te(s, e, a, t) {
+function ze(s, e, a, t) {
   return !!(t.includes(s) || e && s < e || a && s > a);
 }
-const Ae = `
+const Ye = `
   .cal-grid {
     display: flex;
     flex-direction: column;
@@ -1079,47 +1148,47 @@ const Ae = `
     z-index: 10;
   }
 `;
-function Ye(s) {
+function Be(s) {
   const {
     slots: e = [],
     mode: a = "single",
     format: t = "24h",
     selected: n,
-    hoverTime: i,
-    rangeStart: r,
+    hoverTime: r,
+    rangeStart: i,
     unavailableTimes: o = [],
     onSelect: l,
-    onHover: u,
-    durationLabels: m = !1
-  } = s, g = document.createElement("div");
-  g.classList.add("cal-time-grid"), m && g.classList.add("cal-time-grid--duration"), g.setAttribute("role", "listbox"), a === "multi" && g.setAttribute("aria-multiselectable", "true");
+    onHover: g,
+    durationLabels: h = !1
+  } = s, d = document.createElement("div");
+  d.classList.add("cal-time-grid"), h && d.classList.add("cal-time-grid--duration"), d.setAttribute("role", "listbox"), a === "multi" && d.setAttribute("aria-multiselectable", "true");
   for (const c of e) {
-    const d = document.createElement("button");
-    d.classList.add("cal-time-slot"), d.setAttribute("role", "option"), d.dataset.time = c.time;
-    const b = N(c.time), E = c.displayText ? c.displayText : b ? K(b.hours, b.minutes, t) : c.time, v = document.createElement("span");
-    if (v.classList.add("cal-time-slot__time"), v.textContent = E, d.appendChild(v), c.label) {
-      const y = document.createElement("span");
-      y.classList.add("cal-time-slot__label"), y.textContent = c.label, d.appendChild(y);
+    const u = document.createElement("button");
+    u.classList.add("cal-time-slot"), u.setAttribute("role", "option"), u.dataset.time = c.time;
+    const m = U(c.time), f = c.displayText ? c.displayText : m ? X(m.hours, m.minutes, t) : c.time, E = document.createElement("span");
+    if (E.classList.add("cal-time-slot__time"), E.textContent = f, u.appendChild(E), c.label) {
+      const v = document.createElement("span");
+      v.classList.add("cal-time-slot__label"), v.textContent = c.label, u.appendChild(v);
     }
-    const x = c.available === !1 || o.includes(c.time);
-    if (x && (d.classList.add("cal-time-slot--unavailable"), d.disabled = !0, d.setAttribute("aria-disabled", "true")), ze(c.time, n, a) ? (d.classList.add("cal-time-slot--selected"), d.setAttribute("aria-selected", "true")) : d.setAttribute("aria-selected", "false"), a === "range" && r && !$e(n) && i) {
-      const y = Q(c.time, r, i), _ = c.time === r, S = c.time === i;
-      y && !_ && !S && d.classList.add("cal-time-slot--in-range"), _ && d.classList.add("cal-time-slot--range-start"), S && d.classList.add("cal-time-slot--range-end");
+    const P = c.available === !1 || o.includes(c.time);
+    if (P && (u.classList.add("cal-time-slot--unavailable"), u.disabled = !0, u.setAttribute("aria-disabled", "true")), Fe(c.time, n, a) ? (u.classList.add("cal-time-slot--selected"), u.setAttribute("aria-selected", "true")) : u.setAttribute("aria-selected", "false"), a === "range" && i && !Oe(n) && r) {
+      const v = ee(c.time, i, r), M = c.time === i, k = c.time === r;
+      v && !M && !k && u.classList.add("cal-time-slot--in-range"), M && u.classList.add("cal-time-slot--range-start"), k && u.classList.add("cal-time-slot--range-end");
     } else if (a === "range" && n && typeof n == "object" && n.start && n.end) {
-      const y = Q(c.time, n.start, n.end), _ = c.time === n.start, S = c.time === n.end;
-      _ && d.classList.add("cal-time-slot--range-start", "cal-time-slot--selected"), S && d.classList.add("cal-time-slot--range-end", "cal-time-slot--selected"), y && !_ && !S && d.classList.add("cal-time-slot--in-range");
+      const v = ee(c.time, n.start, n.end), M = c.time === n.start, k = c.time === n.end;
+      M && u.classList.add("cal-time-slot--range-start", "cal-time-slot--selected"), k && u.classList.add("cal-time-slot--range-end", "cal-time-slot--selected"), v && !M && !k && u.classList.add("cal-time-slot--in-range");
     }
-    x || (d.addEventListener("click", () => l == null ? void 0 : l(c.time)), d.addEventListener("mouseenter", () => u == null ? void 0 : u(c.time))), g.appendChild(d);
+    P || (u.addEventListener("click", () => l == null ? void 0 : l(c.time)), u.addEventListener("mouseenter", () => g == null ? void 0 : g(c.time))), d.appendChild(u);
   }
-  return g.addEventListener("mouseleave", () => u == null ? void 0 : u(null)), g;
+  return d.addEventListener("mouseleave", () => g == null ? void 0 : g(null)), d;
 }
-function ze(s, e, a) {
+function Fe(s, e, a) {
   return e ? a === "single" ? e === s : a === "multi" ? Array.isArray(e) && e.includes(s) : a === "range" && typeof e == "object" && e.start && e.end ? e.start === s || e.end === s : !1 : !1;
 }
-function $e(s) {
+function Oe(s) {
   return s && typeof s == "object" && s.start && s.end;
 }
-const Pe = `
+const Ie = `
   .cal-time-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
@@ -1202,17 +1271,17 @@ const Pe = `
     font-size: 12px;
   }
 `;
-function Be({ columns: s = 3, rows: e = 4, durationLabels: a = !1 } = {}) {
+function Re({ columns: s = 3, rows: e = 4, durationLabels: a = !1 } = {}) {
   const t = document.createElement("div");
   t.setAttribute("role", "status"), t.setAttribute("aria-label", "Loading..."), t.classList.add("cal-skeleton-time-grid"), a && t.classList.add("cal-skeleton-time-grid--duration");
   const n = s * e;
-  for (let i = 0; i < n; i++) {
-    const r = document.createElement("div");
-    r.classList.add("cal-skeleton"), t.appendChild(r);
+  for (let r = 0; r < n; r++) {
+    const i = document.createElement("div");
+    i.classList.add("cal-skeleton"), t.appendChild(i);
   }
   return t;
 }
-function Oe({ rows: s = 5 } = {}) {
+function je({ 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++) {
@@ -1226,7 +1295,7 @@ function Oe({ rows: s = 5 } = {}) {
   }
   return e;
 }
-const Fe = `
+const He = `
   .cal-skeleton-time-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
@@ -1259,25 +1328,25 @@ const Fe = `
     aspect-ratio: 1;
     border-radius: var(--cal-radius-sm) !important;
   }
-`, te = {
+`, ne = {
   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 Re({ type: s = "info", message: e, dismissible: a = !0, onDismiss: t }) {
+function Ne({ 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 i = document.createElement("span");
-  i.classList.add("cal-status__icon"), i.innerHTML = te[s] || te.info, n.appendChild(i);
   const r = document.createElement("span");
-  if (r.classList.add("cal-status__text"), r.textContent = e, n.appendChild(r), a) {
+  r.classList.add("cal-status__icon"), r.innerHTML = ne[s] || ne.info, n.appendChild(r);
+  const i = document.createElement("span");
+  if (i.classList.add("cal-status__text"), i.textContent = e, n.appendChild(i), a) {
     const o = document.createElement("button");
     o.classList.add("cal-status__close"), o.setAttribute("aria-label", "Dismiss"), o.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>', o.addEventListener("click", () => t == null ? void 0 : t()), n.appendChild(o);
   }
   return n;
 }
-const Ie = `
+const Ge = `
   .cal-status {
     display: flex;
     align-items: center;
@@ -1339,7 +1408,7 @@ const Ie = `
     color: hsl(var(--cal-status-success-fg));
     border: 1px solid hsl(var(--cal-status-success-border));
   }
-`, He = '<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>', je = `
+`, Je = '<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>', Ue = `
   .cal-picker {
     background: hsl(var(--cal-bg));
     border-radius: var(--cal-radius);
@@ -1374,9 +1443,9 @@ const Ie = `
     margin-bottom: 8px;
   }
 `;
-class Ne extends ce {
+class Ke extends ge {
   static get styles() {
-    return [ve, ye, ke, Ae, Pe, _e, Se, Ee, Fe, Ie, je];
+    return [we, xe, Se, Ye, Ie, Le, Ee, Ce, He, Ge, Ue];
   }
   static get observedAttributes() {
     return [
@@ -1385,6 +1454,7 @@ class Ne extends ce {
       "min-date",
       "max-date",
       "first-day",
+      "locale",
       "placeholder",
       "dual",
       "show-labels-on-hover",
@@ -1400,14 +1470,14 @@ class Ne extends ce {
   constructor() {
     super();
     const e = /* @__PURE__ */ new Date();
-    this._store = de({
+    this._store = he({
       viewYear: e.getFullYear(),
       viewMonth: e.getMonth(),
       rangeStart: null,
       rangeEnd: null,
       hoverDate: null,
       isOpen: !1,
-      focusedDate: ae(),
+      focusedDate: re(),
       navDirection: null,
       pickingMonth: !1,
       pickerYear: e.getFullYear(),
@@ -1420,7 +1490,7 @@ class Ne extends ce {
       statusType: null,
       statusMessage: null,
       statusDismissible: !0
-    }), this._bookings = [], this._dayData = {}, this._labelFormula = null, this._timeSlots = null, this._popover = null, this._unsubscribe = null, this._rendering = !1;
+    }), this._bookings = [], this._dayData = {}, this._labelFormula = null, this._colors = null, this._customColorMap = null, this._timeSlots = null, this._popover = null, this._unsubscribe = null, this._rendering = !1;
   }
   // -- Attribute getters --
   get display() {
@@ -1438,6 +1508,9 @@ class Ne extends ce {
   get maxDate() {
     return this.getAttribute("max-date") || null;
   }
+  get locale() {
+    return this.getAttribute("locale") || void 0;
+  }
   get showLabelsOnHover() {
     return this.hasAttribute("show-labels-on-hover");
   }
@@ -1490,6 +1563,15 @@ class Ne extends ce {
   set timeSlots(e) {
     this._timeSlots = Array.isArray(e) ? e : null, this._initialized && this.render();
   }
+  get colors() {
+    return this._colors;
+  }
+  set colors(e) {
+    if (this._colors = Array.isArray(e) ? e : null, this._customColorMap = Te(this._colors), this._customColorMap)
+      for (const [a, t] of Object.entries(this._customColorMap))
+        this.style.setProperty(`--cal-booking-${a}-bg`, t.bg), this.style.setProperty(`--cal-booking-${a}-fg`, t.fg), this.style.setProperty(`--cal-booking-${a}-hover`, t.hover);
+    this._initialized && this.render();
+  }
   get value() {
     const e = this._store.getState();
     if (!e.rangeStart || !e.rangeEnd) return null;
@@ -1510,7 +1592,7 @@ class Ne extends ce {
       });
   }
   _navigateToDate(e) {
-    const a = M(e);
+    const a = D(e);
     a && this._store.set({ viewYear: a.getFullYear(), viewMonth: a.getMonth() });
   }
   connectedCallback() {
@@ -1547,7 +1629,7 @@ class Ne extends ce {
       });
     else {
       let t = a.rangeStart, n = e;
-      if (t > n && ([t, n] = [n, t]), !ie(t, n, this._bookings)) {
+      if (t > n && ([t, n] = [n, t]), !le(t, n, this._bookings)) {
         this.emit("cal:selection-invalid", { start: t, end: n }), this._store.set({
           rangeStart: null,
           rangeEnd: null,
@@ -1592,39 +1674,39 @@ class Ne extends ce {
   }
   // -- Lightweight hover highlight --
   _updateGridHighlight(e) {
-    const a = this.$$(".cal-day"), { rangeStart: t, hoverDate: n } = e, i = t && !e.rangeEnd && n ? n : e.rangeEnd;
-    let r = !1;
+    const a = this.$$(".cal-day"), { rangeStart: t, hoverDate: n } = e, r = t && !e.rangeEnd && n ? n : e.rangeEnd;
+    let i = !1;
     if (t && !e.rangeEnd && n) {
       const o = t < n ? t : n, l = t < n ? n : t;
-      for (const u of this._bookings)
-        if (o < u.end && l > u.start) {
-          r = !0;
+      for (const g of this._bookings)
+        if (o < g.end && l > g.start) {
+          i = !0;
           break;
         }
     }
     for (const o of a) {
       const l = o.dataset.date;
       if (!l) continue;
-      const u = l === t && !!i, m = l === i && !!i;
-      let g = !1;
-      if (t && i) {
-        const d = t < i ? t : i, b = t < i ? i : t;
-        g = l >= d && l <= b && !u && !m;
+      const g = l === t && !!r, h = l === r && !!r;
+      let d = !1;
+      if (t && r) {
+        const u = t < r ? t : r, m = t < r ? r : t;
+        d = l >= u && l <= m && !g && !h;
       }
-      const c = r && t && !e.rangeEnd && n && (() => {
-        const d = t < n ? t : n, b = t < n ? n : t;
-        return l >= d && l <= b;
+      const c = i && t && !e.rangeEnd && n && (() => {
+        const u = t < n ? t : n, m = t < n ? n : t;
+        return l >= u && l <= m;
       })();
-      o.classList.toggle("cal-day--range-start", u), o.classList.toggle("cal-day--range-end", m), o.classList.toggle("cal-day--in-range", g), o.classList.toggle("cal-day--invalid-range", !!c);
+      o.classList.toggle("cal-day--range-start", g), o.classList.toggle("cal-day--range-end", h), o.classList.toggle("cal-day--in-range", d), o.classList.toggle("cal-day--invalid-range", !!c);
     }
   }
   // -- Navigation --
   _prevMonth() {
-    const { viewYear: e, viewMonth: a } = this._store.getState(), { year: t, month: n } = B(e, a, -1);
+    const { viewYear: e, viewMonth: a } = this._store.getState(), { year: t, month: n } = O(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 } = B(e, a, 1);
+    const { viewYear: e, viewMonth: a } = this._store.getState(), { year: t, month: n } = O(e, a, 1);
     this._store.set({ viewYear: t, viewMonth: n, navDirection: "next" }), this.emit("cal:month-change", { year: t, month: n });
   }
   // -- Month picker --
@@ -1648,7 +1730,7 @@ class Ne extends ce {
       e.stopPropagation(), this._store.set({ pickingMonth: !1 });
       return;
     }
-    const a = this._store.getState(), t = M(a.focusedDate);
+    const a = this._store.getState(), t = D(a.focusedDate);
     if (!t) return;
     let n = null;
     switch (e.key) {
@@ -1676,15 +1758,15 @@ class Ne extends ce {
     }
     if (n) {
       e.preventDefault();
-      const i = T(n);
+      const r = T(n);
       n.getMonth() !== a.viewMonth || n.getFullYear() !== a.viewYear ? this._store.set({
         viewYear: n.getFullYear(),
         viewMonth: n.getMonth(),
-        focusedDate: i,
+        focusedDate: r,
         navDirection: n > t ? "next" : "prev"
-      }) : this._store.set({ focusedDate: i }), requestAnimationFrame(() => {
-        const r = this.$(`[data-date="${i}"]`);
-        r == null || r.focus();
+      }) : this._store.set({ focusedDate: r }), requestAnimationFrame(() => {
+        const i = this.$(`[data-date="${r}"]`);
+        i == null || i.focus();
       });
     }
   }
@@ -1698,34 +1780,44 @@ class Ne extends ce {
   goToMonth(e, a) {
     this._store.set({ viewYear: a, viewMonth: e });
   }
+  clear() {
+    this._store.set({
+      rangeStart: null,
+      rangeEnd: null,
+      hoverDate: null,
+      startTime: null,
+      endTime: null,
+      timeSelectPhase: null
+    }), this.emit("cal:change", { value: null });
+  }
   // -- Time slots generation --
   _getTimeSlotArray() {
-    return this._timeSlots ? this._timeSlots : this.durationLabels ? fe(this.timeStartTime, this.timeEndTime, this.timeInterval, this.timeFormat).map((a) => ({ ...a, available: !0 })) : pe(this.timeStartTime, this.timeEndTime, this.timeInterval).map((a) => ({ time: a, available: !0 }));
+    return this._timeSlots ? this._timeSlots : this.durationLabels ? _e(this.timeStartTime, this.timeEndTime, this.timeInterval, this.timeFormat).map((a) => ({ ...a, available: !0 })) : ke(this.timeStartTime, this.timeEndTime, this.timeInterval).map((a) => ({ time: a, available: !0 }));
   }
   // -- Render --
   _renderCalendarContent() {
     const e = this._store.getState(), a = document.createElement("div");
-    if (a.classList.add("cal-picker"), e.statusType && e.statusMessage && a.appendChild(Re({
+    if (a.classList.add("cal-picker"), e.statusType && e.statusMessage && a.appendChild(Ne({
       type: e.statusType,
       message: e.statusMessage,
       dismissible: e.statusDismissible,
       onDismiss: () => this.clearStatus()
     })), this.loading) {
-      const r = document.createElement("div");
-      r.classList.add("cal-months");
+      const i = document.createElement("div");
+      i.classList.add("cal-months");
       const o = document.createElement("div");
-      if (o.classList.add("cal-month"), o.appendChild(Oe()), r.appendChild(o), a.appendChild(r), this.timeSlotsEnabled) {
+      if (o.classList.add("cal-month"), o.appendChild(je()), i.appendChild(o), a.appendChild(i), this.timeSlotsEnabled) {
         const l = document.createElement("div");
-        l.classList.add("cal-booking-time-section"), l.appendChild(Be({ durationLabels: this.durationLabels })), a.appendChild(l);
+        l.classList.add("cal-booking-time-section"), l.appendChild(Re({ durationLabels: this.durationLabels })), a.appendChild(l);
       }
       return a.addEventListener("keydown", (l) => this._handleKeydown(l)), a;
     }
     const t = document.createElement("div");
     t.classList.add("cal-months");
-    const n = this.hasAttribute("dual"), i = n ? 2 : 1;
-    for (let r = 0; r < i; r++) {
-      const { year: o, month: l } = r === 0 ? { year: e.viewYear, month: e.viewMonth } : B(e.viewYear, e.viewMonth, 1), u = document.createElement("div");
-      if (u.classList.add("cal-month"), r === 0 && u.appendChild(Z({
+    const n = this.hasAttribute("dual"), r = n ? 2 : 1;
+    for (let i = 0; i < r; i++) {
+      const { year: o, month: l } = i === 0 ? { year: e.viewYear, month: e.viewMonth } : O(e.viewYear, e.viewMonth, 1), g = document.createElement("div");
+      if (g.classList.add("cal-month"), i === 0 && g.appendChild(te({
         year: o,
         month: l,
         onPrev: e.pickingMonth ? () => {
@@ -1734,26 +1826,29 @@ class Ne extends ce {
         } : () => {
           n || this._nextMonth();
         },
-        onTitleClick: () => this._toggleMonthPicker()
-      })), r === 1 && u.appendChild(Z({
+        onTitleClick: () => this._toggleMonthPicker(),
+        locale: this.locale
+      })), i === 1 && g.appendChild(te({
         year: o,
         month: l,
         onPrev: () => {
         },
-        onNext: () => this._nextMonth()
-      })), e.pickingMonth && r === 0) {
-        const m = we({
+        onNext: () => this._nextMonth(),
+        locale: this.locale
+      })), e.pickingMonth && i === 0) {
+        const h = De({
           pickerYear: e.pickerYear,
           viewMonth: e.viewMonth,
           viewYear: e.viewYear,
-          onMonthSelect: (g, c) => this._selectMonthFromPicker(g, c),
+          onMonthSelect: (d, c) => this._selectMonthFromPicker(d, c),
           onYearPrev: () => this._store.set({ pickerYear: e.pickerYear - 1 }),
           onYearNext: () => this._store.set({ pickerYear: e.pickerYear + 1 }),
-          onClose: () => this._store.set({ pickingMonth: !1 })
+          onClose: () => this._store.set({ pickingMonth: !1 }),
+          locale: this.locale
         });
-        u.appendChild(m);
+        g.appendChild(h);
       } else {
-        const m = e.navDirection === "next" ? "cal-animate-slide-left" : e.navDirection === "prev" ? "cal-animate-slide-right" : "", g = Ce({
+        const h = e.navDirection === "next" ? "cal-animate-slide-left" : e.navDirection === "prev" ? "cal-animate-slide-right" : "", d = $e({
           year: o,
           month: l,
           firstDay: this.firstDay,
@@ -1770,30 +1865,32 @@ class Ne extends ce {
           bookings: this._bookings,
           dayData: this._dayData,
           labelFormula: this._labelFormula,
-          showLabelsOnHover: this.showLabelsOnHover
+          showLabelsOnHover: this.showLabelsOnHover,
+          locale: this.locale,
+          customColors: this._customColorMap
         });
-        m && g.classList.add(m), u.appendChild(g);
+        h && d.classList.add(h), g.appendChild(d);
       }
-      t.appendChild(u);
+      t.appendChild(g);
     }
     if (a.appendChild(t), this.timeSlotsEnabled && e.timeSelectPhase && !e.pickingMonth) {
-      const r = document.createElement("div");
-      r.classList.add("cal-booking-time-section");
+      const i = document.createElement("div");
+      i.classList.add("cal-booking-time-section");
       const o = document.createElement("div");
-      o.classList.add("cal-booking-time-header"), o.textContent = e.timeSelectPhase === "start" ? "Select check-in time" : "Select check-out time", r.appendChild(o);
-      const l = this._getTimeSlotArray(), u = Ye({
+      o.classList.add("cal-booking-time-header"), o.textContent = e.timeSelectPhase === "start" ? "Select check-in time" : "Select check-out time", i.appendChild(o);
+      const l = this._getTimeSlotArray(), g = Be({
         slots: l,
         mode: "single",
         format: this.timeFormat,
         selected: e.timeSelectPhase === "end" ? e.startTime : null,
-        onSelect: (m) => this._handleTimeSelect(m),
+        onSelect: (h) => this._handleTimeSelect(h),
         onHover: () => {
         },
         durationLabels: this.durationLabels
       });
-      r.appendChild(u), a.appendChild(r);
+      i.appendChild(g), a.appendChild(i);
     }
-    return a.addEventListener("keydown", (r) => this._handleKeydown(r)), a;
+    return a.addEventListener("keydown", (i) => this._handleKeydown(i)), a;
   }
   _formatTriggerText() {
     const e = this._store.getState();
@@ -1804,8 +1901,14 @@ class Ne extends ce {
     return null;
   }
   _formatShortDate(e) {
-    const a = M(e);
-    return a ? `${J[a.getMonth()].slice(0, 3)} ${a.getDate()}, ${a.getFullYear()}` : e;
+    const a = D(e);
+    if (!a) return e;
+    if (this.locale)
+      try {
+        return new Intl.DateTimeFormat(this.locale, { month: "short", day: "numeric", year: "numeric" }).format(a);
+      } catch {
+      }
+    return `${se(this.locale)[a.getMonth()]} ${a.getDate()}, ${a.getFullYear()}`;
   }
   render() {
     var t;
@@ -1817,29 +1920,29 @@ class Ne extends ce {
     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 i = document.createElement("button");
-      i.classList.add("cal-trigger");
-      const r = document.createElement("span");
-      r.classList.add("cal-trigger__icon"), r.innerHTML = He, i.appendChild(r);
+      const r = document.createElement("button");
+      r.classList.add("cal-trigger");
+      const i = document.createElement("span");
+      i.classList.add("cal-trigger__icon"), i.innerHTML = Je, r.appendChild(i);
       const o = this._formatTriggerText(), l = document.createElement("span");
-      o ? l.textContent = o : (l.textContent = this.placeholder, l.classList.add("cal-trigger--placeholder")), i.appendChild(l), n.appendChild(i);
-      const u = this._renderCalendarContent(), m = Le({
-        trigger: i,
-        content: u,
+      o ? l.textContent = o : (l.textContent = this.placeholder, l.classList.add("cal-trigger--placeholder")), r.appendChild(l), n.appendChild(r);
+      const g = this._renderCalendarContent(), h = Me({
+        trigger: r,
+        content: g,
         onClose: () => {
           this._store.set({ isOpen: !1 }), this.emit("cal:close");
         }
       });
-      n.appendChild(m.panel), e.appendChild(n), i.addEventListener("click", (g) => {
-        g.stopPropagation(), m.isOpen ? this.close() : this.open();
-      }), this._popover = m, this._store.get("isOpen") && m.open();
+      n.appendChild(h.panel), e.appendChild(n), r.addEventListener("click", (d) => {
+        d.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-booking") || customElements.define("cal-booking", Ne);
+customElements.get("cal-booking") || customElements.define("cal-booking", Ke);
 export {
-  Ne as CalBooking
+  Ke as CalBooking
 };
 //# sourceMappingURL=booking.es.js.map