calkit 0.1.0 → 0.2.0

package/dist/timepicker.es.js

@@ -13,31 +13,34 @@ class C extends HTMLElement {
     const e = this.constructor.styles;
     if (e.length)
       if ("adoptedStyleSheets" in this.shadowRoot)
-        this.shadowRoot.adoptedStyleSheets = e.map((s) => {
-          if (s instanceof CSSStyleSheet) return s;
+        this.shadowRoot.adoptedStyleSheets = e.map((a) => {
+          if (a instanceof CSSStyleSheet) return a;
           const t = new CSSStyleSheet();
-          return t.replaceSync(s), t;
+          return t.replaceSync(a), t;
         });
       else
-        for (const s of e) {
+        for (const a of e) {
           const t = document.createElement("style");
-          t.textContent = s instanceof CSSStyleSheet ? "" : s, this.shadowRoot.prepend(t);
+          t.textContent = a instanceof CSSStyleSheet ? "" : a, this.shadowRoot.prepend(t);
         }
   }
   /** 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, s = {}) {
+  emit(e, a = {}) {
     this.dispatchEvent(
-      new CustomEvent(e, { detail: s, bubbles: !0, composed: !0 })
+      new CustomEvent(e, { detail: a, bubbles: !0, composed: !0 })
     );
   }
   /** Show an inline status banner. */
-  showStatus(e, s, t = {}) {
+  showStatus(e, a, t = {}) {
     if (!this._store) return;
-    const { autoDismiss: a, dismissible: i = !0 } = t;
-    clearTimeout(this._statusTimer), this._store.set({ statusType: e, statusMessage: s, statusDismissible: i }), this.emit("cal:status", { type: e, message: s }), a && a > 0 && (this._statusTimer = setTimeout(() => this.clearStatus(), a));
+    const { autoDismiss: s, dismissible: i = !0 } = t;
+    clearTimeout(this._statusTimer), this._store.set({ statusType: e, statusMessage: a, statusDismissible: i }), this.emit("cal:status", { type: e, message: a }), s && s > 0 && (this._statusTimer = setTimeout(() => this.clearStatus(), s));
   }
   /** Clear the status banner. */
   clearStatus() {
@@ -53,75 +56,79 @@ class C extends HTMLElement {
 }
 function A(r) {
   let e = { ...r };
-  const s = /* @__PURE__ */ new Set();
+  const a = /* @__PURE__ */ new Set();
   return {
     get(t) {
       return e[t];
     },
     set(t) {
-      const a = e;
+      const s = e;
       e = { ...e, ...t };
       let i = !1;
       for (const l of Object.keys(t))
-        if (a[l] !== e[l]) {
+        if (s[l] !== e[l]) {
           i = !0;
           break;
         }
       if (i)
-        for (const l of s) l(e, a);
+        for (const l of a) l(e, s);
     },
     getState() {
       return e;
     },
     subscribe(t) {
-      return s.add(t), () => s.delete(t);
+      return a.add(t), () => a.delete(t);
     }
   };
 }
 function k(r) {
   if (!r || typeof r != "string") return null;
-  const e = r.trim().toUpperCase(), s = e.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/);
-  if (s) {
-    let a = parseInt(s[1], 10);
-    const i = parseInt(s[2], 10), l = s[3];
-    return l === "AM" && a === 12 && (a = 0), l === "PM" && a !== 12 && (a += 12), { hours: a, minutes: i };
+  const e = r.trim().toUpperCase(), a = e.match(/^(\d{1,2}):(\d{2})\s*(AM|PM)$/);
+  if (a) {
+    let s = parseInt(a[1], 10);
+    const i = parseInt(a[2], 10), l = a[3];
+    return l === "AM" && s === 12 && (s = 0), l === "PM" && s !== 12 && (s += 12), { hours: s, minutes: i };
   }
   const t = e.match(/^(\d{1,2}):(\d{2})$/);
   return t ? { hours: parseInt(t[1], 10), minutes: parseInt(t[2], 10) } : null;
 }
-function x(r, e, s = "24h") {
+function x(r, e, a = "24h") {
   const t = String(e).padStart(2, "0");
-  if (s === "12h") {
-    const a = r >= 12 ? "PM" : "AM";
-    return `${r % 12 || 12}:${t} ${a}`;
+  if (a === "12h") {
+    const s = r >= 12 ? "PM" : "AM";
+    return `${r % 12 || 12}:${t} ${s}`;
   }
   return `${String(r).padStart(2, "0")}:${t}`;
 }
-function g(r) {
+function u(r) {
   const e = k(r);
   return e ? e.hours * 60 + e.minutes : 0;
 }
 function _(r) {
-  const e = Math.floor(r / 60) % 24, s = r % 60;
-  return `${String(e).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
+  const e = Math.floor(r / 60) % 24, a = r % 60;
+  return `${String(e).padStart(2, "0")}:${String(a).padStart(2, "0")}`;
 }
-function E(r, e, s) {
-  const t = [], a = g(r), i = g(e);
-  for (let l = a; l <= i; l += s)
-    t.push(_(l));
+function E(r, e, a) {
+  const t = [], s = u(r);
+  let i = u(e);
+  i <= s && (i += 1440);
+  for (let l = s; l <= i; l += a)
+    t.push(_(l % 1440));
   return t;
 }
-function M(r, e, s, t = "24h") {
-  const a = [], i = g(r), l = g(e);
-  for (let c = i; c <= l; c += s) {
-    const u = _(c), h = c + s, m = _(Math.min(h, l + s)), d = k(u), n = k(m), o = d ? x(d.hours, d.minutes, t) : u, p = n ? x(n.hours, n.minutes, t) : m;
-    a.push({ time: u, displayText: `${o}–${p}` });
-  }
-  return a;
+function M(r, e, a, t = "24h") {
+  const s = [], i = u(r);
+  let l = u(e);
+  l <= i && (l += 1440);
+  for (let c = i; c <= l; c += a) {
+    const g = _(c % 1440), h = c + a, m = _(Math.min(h, l + a) % 1440), d = k(g), n = k(m), o = d ? x(d.hours, d.minutes, t) : g, p = n ? x(n.hours, n.minutes, t) : m;
+    s.push({ time: g, displayText: `${o}–${p}` });
+  }
+  return s;
 }
-function T(r, e, s) {
-  const t = g(r), a = g(e), i = g(s), l = Math.min(a, i), c = Math.max(a, i);
-  return t >= l && t <= c;
+function T(r, e, a) {
+  const t = u(r), s = u(e), i = u(a);
+  return i >= s ? t >= s && t <= i : t >= s || t <= i;
 }
 const z = `
   :host {
@@ -397,22 +404,22 @@ const z = `
     border-radius: var(--cal-radius-sm);
   }
 `;
-function O({ trigger: r, content: e, onClose: s }) {
+function O({ trigger: r, 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 a = !1;
+  let s = !1;
   function i() {
     t.classList.remove("cal-popover--above");
     const d = r.getBoundingClientRect(), n = t.offsetHeight, o = window.innerHeight - d.bottom, p = d.top;
     o < n + 8 && p > o ? (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 l() {
-    a || (a = !0, t.style.display = "", t.classList.add("cal-animate-slide-up"), requestAnimationFrame(() => i()), document.addEventListener("click", u, !0), document.addEventListener("keydown", h, !0));
+    s || (s = !0, t.style.display = "", t.classList.add("cal-animate-slide-up"), requestAnimationFrame(() => i()), document.addEventListener("click", g, !0), document.addEventListener("keydown", h, !0));
   }
   function c() {
-    a && (a = !1, t.style.display = "none", t.classList.remove("cal-animate-slide-up"), document.removeEventListener("click", u, !0), document.removeEventListener("keydown", h, !0), s == null || s());
+    s && (s = !1, t.style.display = "none", t.classList.remove("cal-animate-slide-up"), document.removeEventListener("click", g, !0), document.removeEventListener("keydown", h, !0), a == null || a());
   }
-  function u(d) {
+  function g(d) {
     var o;
     const n = (o = r.getRootNode()) == null ? void 0 : o.host;
     n && !n.contains(d.target) && d.target !== n && c();
@@ -421,10 +428,10 @@ function O({ trigger: r, content: e, onClose: s }) {
     d.key === "Escape" && (d.stopPropagation(), c());
   }
   function m() {
-    a && (a = !1, t.style.display = "none", t.classList.remove("cal-animate-slide-up")), document.removeEventListener("click", u, !0), document.removeEventListener("keydown", h, !0);
+    s && (s = !1, t.style.display = "none", t.classList.remove("cal-animate-slide-up")), document.removeEventListener("click", g, !0), document.removeEventListener("keydown", h, !0);
   }
   return { panel: t, open: l, close: c, destroy: m, get isOpen() {
-    return a;
+    return s;
   } };
 }
 const R = `
@@ -476,17 +483,17 @@ const R = `
 function j(r) {
   const {
     slots: e = [],
-    mode: s = "single",
+    mode: a = "single",
     format: t = "24h",
-    selected: a,
+    selected: s,
     hoverTime: i,
     rangeStart: l,
     unavailableTimes: c = [],
-    onSelect: u,
+    onSelect: g,
     onHover: h,
     durationLabels: m = !1
   } = r, d = document.createElement("div");
-  d.classList.add("cal-time-grid"), m && d.classList.add("cal-time-grid--duration"), d.setAttribute("role", "listbox"), s === "multi" && d.setAttribute("aria-multiselectable", "true");
+  d.classList.add("cal-time-grid"), m && d.classList.add("cal-time-grid--duration"), d.setAttribute("role", "listbox"), a === "multi" && d.setAttribute("aria-multiselectable", "true");
   for (const n of e) {
     const o = document.createElement("button");
     o.classList.add("cal-time-slot"), o.setAttribute("role", "option"), o.dataset.time = n.time;
@@ -496,19 +503,19 @@ function j(r) {
       b.classList.add("cal-time-slot__label"), b.textContent = n.label, o.appendChild(b);
     }
     const S = n.available === !1 || c.includes(n.time);
-    if (S && (o.classList.add("cal-time-slot--unavailable"), o.disabled = !0, o.setAttribute("aria-disabled", "true")), H(n.time, a, s) ? (o.classList.add("cal-time-slot--selected"), o.setAttribute("aria-selected", "true")) : o.setAttribute("aria-selected", "false"), s === "range" && l && !I(a) && i) {
+    if (S && (o.classList.add("cal-time-slot--unavailable"), o.disabled = !0, o.setAttribute("aria-disabled", "true")), H(n.time, s, a) ? (o.classList.add("cal-time-slot--selected"), o.setAttribute("aria-selected", "true")) : o.setAttribute("aria-selected", "false"), a === "range" && l && !I(s) && i) {
       const b = T(n.time, l, i), f = n.time === l, v = n.time === i;
       b && !f && !v && o.classList.add("cal-time-slot--in-range"), f && o.classList.add("cal-time-slot--range-start"), v && o.classList.add("cal-time-slot--range-end");
-    } else if (s === "range" && a && typeof a == "object" && a.start && a.end) {
-      const b = T(n.time, a.start, a.end), f = n.time === a.start, v = n.time === a.end;
+    } else if (a === "range" && s && typeof s == "object" && s.start && s.end) {
+      const b = T(n.time, s.start, s.end), f = n.time === s.start, v = n.time === s.end;
       f && o.classList.add("cal-time-slot--range-start", "cal-time-slot--selected"), v && o.classList.add("cal-time-slot--range-end", "cal-time-slot--selected"), b && !f && !v && o.classList.add("cal-time-slot--in-range");
     }
-    S || (o.addEventListener("click", () => u == null ? void 0 : u(n.time)), o.addEventListener("mouseenter", () => h == null ? void 0 : h(n.time))), d.appendChild(o);
+    S || (o.addEventListener("click", () => g == null ? void 0 : g(n.time)), o.addEventListener("mouseenter", () => h == null ? void 0 : h(n.time))), d.appendChild(o);
   }
   return d.addEventListener("mouseleave", () => h == null ? void 0 : h(null)), d;
 }
-function H(r, e, s) {
-  return e ? s === "single" ? e === r : s === "multi" ? Array.isArray(e) && e.includes(r) : s === "range" && typeof e == "object" && e.start && e.end ? e.start === r || e.end === r : !1 : !1;
+function H(r, e, a) {
+  return e ? a === "single" ? e === r : a === "multi" ? Array.isArray(e) && e.includes(r) : a === "range" && typeof e == "object" && e.start && e.end ? e.start === r || e.end === r : !1 : !1;
 }
 function I(r) {
   return r && typeof r == "object" && r.start && r.end;
@@ -596,11 +603,11 @@ const P = `
     font-size: 12px;
   }
 `;
-function D({ columns: r = 3, rows: e = 4, durationLabels: s = !1 } = {}) {
+function D({ columns: r = 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"), s && t.classList.add("cal-skeleton-time-grid--duration");
-  const a = r * e;
-  for (let i = 0; i < a; i++) {
+  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 s = r * e;
+  for (let i = 0; i < s; i++) {
     const l = document.createElement("div");
     l.classList.add("cal-skeleton"), t.appendChild(l);
   }
@@ -645,17 +652,17 @@ const X = `
   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 q({ type: r = "info", message: e, dismissible: s = !0, onDismiss: t }) {
-  const a = document.createElement("div");
-  a.classList.add("cal-status", `cal-status--${r}`, "cal-animate-slide-up"), a.setAttribute("role", r === "error" ? "alert" : "status"), a.setAttribute("aria-live", r === "error" ? "assertive" : "polite");
+function q({ type: r = "info", message: e, dismissible: a = !0, onDismiss: t }) {
+  const s = document.createElement("div");
+  s.classList.add("cal-status", `cal-status--${r}`, "cal-animate-slide-up"), s.setAttribute("role", r === "error" ? "alert" : "status"), s.setAttribute("aria-live", r === "error" ? "assertive" : "polite");
   const i = document.createElement("span");
-  i.classList.add("cal-status__icon"), i.innerHTML = w[r] || w.info, a.appendChild(i);
+  i.classList.add("cal-status__icon"), i.innerHTML = w[r] || w.info, s.appendChild(i);
   const l = document.createElement("span");
-  if (l.classList.add("cal-status__text"), l.textContent = e, a.appendChild(l), s) {
+  if (l.classList.add("cal-status__text"), l.textContent = e, s.appendChild(l), a) {
     const c = document.createElement("button");
-    c.classList.add("cal-status__close"), c.setAttribute("aria-label", "Dismiss"), c.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>', c.addEventListener("click", () => t == null ? void 0 : t()), a.appendChild(c);
+    c.classList.add("cal-status__close"), c.setAttribute("aria-label", "Dismiss"), c.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>', c.addEventListener("click", () => t == null ? void 0 : t()), s.appendChild(c);
   }
-  return a;
+  return s;
 }
 const G = `
   .cal-status {
@@ -745,7 +752,7 @@ class U extends C {
     return [z, $, B, P, R, X, G, Y];
   }
   static get observedAttributes() {
-    return ["mode", "display", "theme", "start-time", "end-time", "interval", "format", "placeholder", "value", "duration-labels", "loading"];
+    return ["mode", "display", "theme", "start-time", "end-time", "interval", "format", "placeholder", "value", "duration-labels", "loading", "locale", "min-time"];
   }
   constructor() {
     super(), this._store = A({
@@ -791,6 +798,12 @@ class U extends C {
   set loading(e) {
     e ? this.setAttribute("loading", "") : this.removeAttribute("loading");
   }
+  get locale() {
+    return this.getAttribute("locale") || void 0;
+  }
+  get minTime() {
+    return this.getAttribute("min-time") || null;
+  }
   // -- Properties --
   get slots() {
     return this._slots;
@@ -808,44 +821,54 @@ class U extends C {
     return this._store.getState().selected;
   }
   set value(e) {
-    this.mode === "single" && typeof e == "string" ? this._store.set({ selected: e, rangeStart: null }) : this.mode === "multi" && Array.isArray(e) ? this._store.set({ selected: [...e].sort((s, t) => g(s) - g(t)), rangeStart: null }) : this.mode === "range" && e && typeof e == "object" ? this._store.set({ selected: { start: e.start, end: e.end }, rangeStart: null }) : this._store.set({ selected: null, rangeStart: null });
+    this.mode === "single" && typeof e == "string" ? this._store.set({ selected: e, rangeStart: null }) : this.mode === "multi" && Array.isArray(e) ? this._store.set({ selected: [...e].sort((a, t) => u(a) - u(t)), rangeStart: null }) : this.mode === "range" && e && typeof e == "object" ? this._store.set({ selected: { start: e.start, end: e.end }, rangeStart: null }) : this._store.set({ selected: null, rangeStart: null });
   }
   _getEffectiveSlots() {
-    return this._slots ? this._slots : this.durationLabels ? M(this.startTime, this.endTime, this.interval, this.format).map((t) => ({
-      ...t,
-      available: !this._unavailableTimes.includes(t.time)
-    })) : E(this.startTime, this.endTime, this.interval).map((s) => ({
+    let e;
+    this._slots ? e = this._slots : this.durationLabels ? e = M(this.startTime, this.endTime, this.interval, this.format).map((s) => ({
+      ...s,
+      available: !this._unavailableTimes.includes(s.time)
+    })) : e = E(this.startTime, this.endTime, this.interval).map((s) => ({
       time: s,
       available: !this._unavailableTimes.includes(s)
     }));
+    const a = this.minTime;
+    if (a) {
+      const t = u(a);
+      e = e.map((s) => {
+        const i = typeof s == "string" ? s : s.time;
+        return u(i) < t ? typeof s == "string" ? { time: s, available: !1 } : { ...s, available: !1 } : s;
+      });
+    }
+    return e;
   }
   connectedCallback() {
-    super.connectedCallback(), this._unsubscribe = this._store.subscribe((s, t) => {
+    super.connectedCallback(), this._unsubscribe = this._store.subscribe((a, t) => {
       if (this._rendering) return;
-      s.hoverTime !== t.hoverTime && s.selected === t.selected && s.rangeStart === t.rangeStart && s.isOpen === t.isOpen ? this._updateSlotHighlight(s) : this.render();
+      a.hoverTime !== t.hoverTime && a.selected === t.selected && a.rangeStart === t.rangeStart && a.isOpen === t.isOpen ? this._updateSlotHighlight(a) : this.render();
     });
     const e = this.getAttribute("value");
     if (e)
       if (this.mode === "multi" && e.includes(","))
-        this.value = e.split(",").map((s) => s.trim());
+        this.value = e.split(",").map((a) => a.trim());
       else if (this.mode === "range" && e.includes("/")) {
-        const [s, t] = e.split("/");
-        this.value = { start: s.trim(), end: t.trim() };
+        const [a, t] = e.split("/");
+        this.value = { start: a.trim(), end: t.trim() };
       } else
         this.value = e;
   }
   disconnectedCallback() {
-    var e, s;
-    (e = this._unsubscribe) == null || e.call(this), (s = this._popover) == null || s.destroy(), clearTimeout(this._statusTimer);
+    var e, a;
+    (e = this._unsubscribe) == null || e.call(this), (a = this._popover) == null || a.destroy(), clearTimeout(this._statusTimer);
   }
-  attributeChangedCallback(e, s, t) {
-    if (s !== t) {
+  attributeChangedCallback(e, a, t) {
+    if (a !== t) {
       if (e === "value" && this._initialized)
         if (this.mode === "multi" && t && t.includes(","))
-          this.value = t.split(",").map((a) => a.trim());
+          this.value = t.split(",").map((s) => s.trim());
         else if (this.mode === "range" && t && t.includes("/")) {
-          const [a, i] = t.split("/");
-          this.value = { start: a.trim(), end: i.trim() };
+          const [s, i] = t.split("/");
+          this.value = { start: s.trim(), end: i.trim() };
         } else
           this.value = t;
       this._initialized && this.render();
@@ -853,19 +876,19 @@ class U extends C {
   }
   // -- Selection --
   _handleSelect(e) {
-    const s = this._store.getState();
+    const a = this._store.getState();
     if (this.mode === "single")
       this._store.set({ selected: e }), this.emit("cal:time-change", { value: e }), this.display === "popover" && this.close();
     else if (this.mode === "multi") {
-      const t = Array.isArray(s.selected) ? [...s.selected] : [], a = t.indexOf(e);
-      a >= 0 ? t.splice(a, 1) : t.push(e), t.sort((i, l) => g(i) - g(l)), this._store.set({ selected: t }), this.emit("cal:time-change", { value: t });
+      const t = Array.isArray(a.selected) ? [...a.selected] : [], s = t.indexOf(e);
+      s >= 0 ? t.splice(s, 1) : t.push(e), t.sort((i, l) => u(i) - u(l)), this._store.set({ selected: t }), this.emit("cal:time-change", { value: t });
     } else if (this.mode === "range")
-      if (!s.rangeStart || s.selected && typeof s.selected == "object" && s.selected.start && s.selected.end)
+      if (!a.rangeStart || a.selected && typeof a.selected == "object" && a.selected.start && a.selected.end)
         this._store.set({ rangeStart: e, selected: null, hoverTime: null });
       else {
-        let t = s.rangeStart, a = e;
-        g(t) > g(a) && ([t, a] = [a, t]);
-        const i = { start: t, end: a };
+        let t = a.rangeStart, s = e;
+        u(t) > u(s) && ([t, s] = [s, t]);
+        const i = { start: t, end: s };
         this._store.set({ selected: i, rangeStart: null, hoverTime: null }), this.emit("cal:time-change", { value: i }), this.display === "popover" && this.close();
       }
   }
@@ -874,12 +897,12 @@ class U extends C {
   }
   // -- Lightweight hover highlight --
   _updateSlotHighlight(e) {
-    const s = this.$$(".cal-time-slot"), { rangeStart: t, hoverTime: a, selected: i } = e, l = i && typeof i == "object" && i.start && i.end;
-    for (const c of s) {
-      const u = c.dataset.time;
-      if (!(!u || c.disabled))
-        if (t && !l && a) {
-          const h = g(t) < g(a) ? t : a, m = g(t) < g(a) ? a : t, d = g(u), n = d > g(h) && d < g(m), o = u === t, p = u === a;
+    const a = this.$$(".cal-time-slot"), { rangeStart: t, hoverTime: s, selected: i } = e, l = i && typeof i == "object" && i.start && i.end;
+    for (const c of a) {
+      const g = c.dataset.time;
+      if (!(!g || c.disabled))
+        if (t && !l && s) {
+          const h = u(t) < u(s) ? t : s, m = u(t) < u(s) ? s : t, d = u(g), n = d > u(h) && d < u(m), o = g === t, p = g === s;
           c.classList.toggle("cal-time-slot--range-start", o), c.classList.toggle("cal-time-slot--range-end", p), c.classList.toggle("cal-time-slot--in-range", n);
         } else t || c.classList.remove("cal-time-slot--range-start", "cal-time-slot--range-end", "cal-time-slot--in-range");
     }
@@ -891,21 +914,28 @@ class U extends C {
   close() {
     this._popover && (this._popover.close(), this._store.set({ isOpen: !1 }), this.emit("cal:close"));
   }
+  clear() {
+    this._store.set({
+      selected: null,
+      rangeStart: null,
+      hoverTime: null
+    }), this.emit("cal:time-change", { value: null });
+  }
   // -- Render --
   _renderTimepickerContent() {
-    const e = this._store.getState(), s = document.createElement("div");
-    s.classList.add("cal-timepicker"), e.statusType && e.statusMessage && s.appendChild(q({
+    const e = this._store.getState(), a = document.createElement("div");
+    a.classList.add("cal-timepicker"), e.statusType && e.statusMessage && a.appendChild(q({
       type: e.statusType,
       message: e.statusMessage,
       dismissible: e.statusDismissible,
       onDismiss: () => this.clearStatus()
     }));
     const t = document.createElement("div");
-    if (t.classList.add("cal-timepicker__header"), t.textContent = "Select Time", s.appendChild(t), this.loading)
-      s.appendChild(D({ durationLabels: this.durationLabels }));
+    if (t.classList.add("cal-timepicker__header"), t.textContent = "Select Time", a.appendChild(t), this.loading)
+      a.appendChild(D({ durationLabels: this.durationLabels }));
     else {
-      const a = this._getEffectiveSlots(), i = j({
-        slots: a,
+      const s = this._getEffectiveSlots(), i = j({
+        slots: s,
         mode: this.mode,
         format: this.format,
         selected: e.selected,
@@ -916,9 +946,9 @@ class U extends C {
         onHover: (l) => this._handleHover(l),
         durationLabels: this.durationLabels
       });
-      s.appendChild(i);
+      a.appendChild(i);
     }
-    return s;
+    return a;
   }
   _formatTriggerText() {
     const e = this._store.getState();
@@ -928,18 +958,18 @@ class U extends C {
     var t;
     if (this._rendering) return;
     this._rendering = !0;
-    const e = this.shadowRoot, s = [...e.childNodes];
-    for (const a of s)
-      a.nodeName !== "STYLE" && !(a instanceof CSSStyleSheet) && e.removeChild(a);
+    const e = this.shadowRoot, a = [...e.childNodes];
+    for (const s of a)
+      s.nodeName !== "STYLE" && !(s instanceof CSSStyleSheet) && e.removeChild(s);
     if ((t = this._popover) == null || t.destroy(), this._popover = null, this.display === "popover") {
-      const a = document.createElement("div");
-      a.classList.add("cal-popover-wrapper");
+      const s = document.createElement("div");
+      s.classList.add("cal-popover-wrapper");
       const i = document.createElement("button");
       i.classList.add("cal-trigger");
       const l = document.createElement("span");
       l.classList.add("cal-trigger__icon"), l.innerHTML = N, i.appendChild(l);
-      const c = this._formatTriggerText(), u = document.createElement("span");
-      c ? u.textContent = c : (u.textContent = this.placeholder, u.classList.add("cal-trigger--placeholder")), i.appendChild(u), a.appendChild(i);
+      const c = this._formatTriggerText(), g = document.createElement("span");
+      c ? g.textContent = c : (g.textContent = this.placeholder, g.classList.add("cal-trigger--placeholder")), i.appendChild(g), s.appendChild(i);
       const h = this._renderTimepickerContent(), m = O({
         trigger: i,
         content: h,
@@ -947,7 +977,7 @@ class U extends C {
           this._store.set({ isOpen: !1 }), this.emit("cal:close");
         }
       });
-      a.appendChild(m.panel), e.appendChild(a), i.addEventListener("click", (d) => {
+      s.appendChild(m.panel), e.appendChild(s), i.addEventListener("click", (d) => {
         d.stopPropagation(), m.isOpen ? this.close() : this.open();
       }), this._popover = m, this._store.get("isOpen") && m.open();
     } else