calkit 0.1.0

package/dist/timepicker.es.js

@@ -0,0 +1,962 @@
+class C 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((s) => {
+          if (s instanceof CSSStyleSheet) return s;
+          const t = new CSSStyleSheet();
+          return t.replaceSync(s), t;
+        });
+      else
+        for (const s of e) {
+          const t = document.createElement("style");
+          t.textContent = s instanceof CSSStyleSheet ? "" : s, this.shadowRoot.prepend(t);
+        }
+  }
+  /** Subclasses override to update Shadow DOM. */
+  render() {
+  }
+  /** Dispatch a composed, bubbling custom event. */
+  emit(e, s = {}) {
+    this.dispatchEvent(
+      new CustomEvent(e, { detail: s, bubbles: !0, composed: !0 })
+    );
+  }
+  /** Show an inline status banner. */
+  showStatus(e, s, 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));
+  }
+  /** 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 A(r) {
+  let e = { ...r };
+  const s = /* @__PURE__ */ new Set();
+  return {
+    get(t) {
+      return e[t];
+    },
+    set(t) {
+      const a = e;
+      e = { ...e, ...t };
+      let i = !1;
+      for (const l of Object.keys(t))
+        if (a[l] !== e[l]) {
+          i = !0;
+          break;
+        }
+      if (i)
+        for (const l of s) l(e, a);
+    },
+    getState() {
+      return e;
+    },
+    subscribe(t) {
+      return s.add(t), () => s.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 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") {
+  const t = String(e).padStart(2, "0");
+  if (s === "12h") {
+    const a = r >= 12 ? "PM" : "AM";
+    return `${r % 12 || 12}:${t} ${a}`;
+  }
+  return `${String(r).padStart(2, "0")}:${t}`;
+}
+function g(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")}`;
+}
+function E(r, e, s) {
+  const t = [], a = g(r), i = g(e);
+  for (let l = a; l <= i; l += s)
+    t.push(_(l));
+  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 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;
+}
+const z = `
+  :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%;
+    }
+  }
+`, $ = `
+  :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;
+  }
+`, B = `
+  @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);
+  }
+`;
+function O({ trigger: r, content: e, onClose: s }) {
+  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;
+  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));
+  }
+  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());
+  }
+  function u(d) {
+    var o;
+    const n = (o = r.getRootNode()) == null ? void 0 : o.host;
+    n && !n.contains(d.target) && d.target !== n && c();
+  }
+  function h(d) {
+    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);
+  }
+  return { panel: t, open: l, close: c, destroy: m, get isOpen() {
+    return a;
+  } };
+}
+const R = `
+  .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 j(r) {
+  const {
+    slots: e = [],
+    mode: s = "single",
+    format: t = "24h",
+    selected: a,
+    hoverTime: i,
+    rangeStart: l,
+    unavailableTimes: c = [],
+    onSelect: u,
+    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");
+  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;
+    const p = k(n.time), L = n.displayText ? n.displayText : p ? x(p.hours, p.minutes, t) : n.time, y = document.createElement("span");
+    if (y.classList.add("cal-time-slot__time"), y.textContent = L, o.appendChild(y), n.label) {
+      const b = document.createElement("span");
+      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) {
+      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;
+      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);
+  }
+  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 I(r) {
+  return r && typeof r == "object" && r.start && r.end;
+}
+const P = `
+  .cal-time-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    gap: 6px;
+    max-height: 280px;
+    overflow-y: auto;
+    padding: 4px;
+  }
+
+  .cal-time-grid::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .cal-time-grid::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .cal-time-grid::-webkit-scrollbar-thumb {
+    background: hsl(var(--cal-border));
+    border-radius: 3px;
+  }
+
+  .cal-time-slot {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 40px;
+    padding: 0 8px;
+    border-radius: 999px;
+    font-size: 13px;
+    background: hsl(var(--cal-bg-muted));
+    color: hsl(var(--cal-fg));
+    transition: background var(--cal-transition), color var(--cal-transition);
+    gap: 1px;
+  }
+
+  .cal-time-slot:not(.cal-time-slot--unavailable):not(.cal-time-slot--selected):hover {
+    background: hsl(var(--cal-hover));
+  }
+
+  .cal-time-slot__time {
+    font-weight: 500;
+    line-height: 1;
+  }
+
+  .cal-time-slot__label {
+    font-size: 9px;
+    opacity: 0.7;
+    line-height: 1;
+  }
+
+  .cal-time-slot--selected {
+    background: hsl(var(--cal-accent));
+    color: hsl(var(--cal-accent-fg));
+    font-weight: 600;
+  }
+
+  .cal-time-slot--in-range {
+    background: hsl(var(--cal-accent-subtle));
+  }
+
+  .cal-time-slot--range-start,
+  .cal-time-slot--range-end {
+    background: hsl(var(--cal-accent));
+    color: hsl(var(--cal-accent-fg));
+    font-weight: 600;
+  }
+
+  .cal-time-slot--unavailable {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .cal-time-grid--duration {
+    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+  }
+
+  .cal-time-grid--duration .cal-time-slot {
+    font-size: 12px;
+  }
+`;
+function D({ columns: r = 3, rows: e = 4, durationLabels: s = !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++) {
+    const l = document.createElement("div");
+    l.classList.add("cal-skeleton"), t.appendChild(l);
+  }
+  return t;
+}
+const X = `
+  .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;
+  }
+`, w = {
+  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 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");
+  const i = document.createElement("span");
+  i.classList.add("cal-status__icon"), i.innerHTML = w[r] || w.info, a.appendChild(i);
+  const l = document.createElement("span");
+  if (l.classList.add("cal-status__text"), l.textContent = e, a.appendChild(l), s) {
+    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);
+  }
+  return a;
+}
+const G = `
+  .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));
+  }
+`, N = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="6"/><path d="M8 4.5V8l2.5 1.5"/></svg>', Y = `
+  .cal-timepicker {
+    background: hsl(var(--cal-bg));
+    border-radius: var(--cal-radius);
+    user-select: none;
+    min-width: 200px;
+  }
+
+  :host([display="inline"]) .cal-timepicker {
+    border: 1px solid hsl(var(--cal-border));
+    padding: 12px;
+  }
+
+  .cal-timepicker__header {
+    font-size: 14px;
+    font-weight: 600;
+    color: hsl(var(--cal-fg));
+    margin-bottom: 8px;
+    padding: 0 4px;
+  }
+`;
+class U extends C {
+  static get styles() {
+    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"];
+  }
+  constructor() {
+    super(), this._store = A({
+      selected: null,
+      // string | string[] | {start, end}
+      rangeStart: null,
+      // for range mode in-progress
+      hoverTime: null,
+      isOpen: !1,
+      statusType: null,
+      statusMessage: null,
+      statusDismissible: !0
+    }), this._slots = null, this._unavailableTimes = [], 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 time";
+  }
+  get startTime() {
+    return this.getAttribute("start-time") || "09:00";
+  }
+  get endTime() {
+    return this.getAttribute("end-time") || "17:00";
+  }
+  get interval() {
+    return parseInt(this.getAttribute("interval") || "30", 10);
+  }
+  get format() {
+    return this.getAttribute("format") || "24h";
+  }
+  get durationLabels() {
+    return this.hasAttribute("duration-labels");
+  }
+  get loading() {
+    return this.hasAttribute("loading");
+  }
+  set loading(e) {
+    e ? this.setAttribute("loading", "") : this.removeAttribute("loading");
+  }
+  // -- Properties --
+  get slots() {
+    return this._slots;
+  }
+  set slots(e) {
+    this._slots = Array.isArray(e) ? e : null, this._initialized && this.render();
+  }
+  get unavailableTimes() {
+    return this._unavailableTimes;
+  }
+  set unavailableTimes(e) {
+    this._unavailableTimes = Array.isArray(e) ? e : [], this._initialized && this.render();
+  }
+  get value() {
+    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 });
+  }
+  _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) => ({
+      time: s,
+      available: !this._unavailableTimes.includes(s)
+    }));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._unsubscribe = this._store.subscribe((s, 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();
+    });
+    const e = this.getAttribute("value");
+    if (e)
+      if (this.mode === "multi" && e.includes(","))
+        this.value = e.split(",").map((s) => s.trim());
+      else if (this.mode === "range" && e.includes("/")) {
+        const [s, t] = e.split("/");
+        this.value = { start: s.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);
+  }
+  attributeChangedCallback(e, s, t) {
+    if (s !== t) {
+      if (e === "value" && this._initialized)
+        if (this.mode === "multi" && t && t.includes(","))
+          this.value = t.split(",").map((a) => a.trim());
+        else if (this.mode === "range" && t && t.includes("/")) {
+          const [a, i] = t.split("/");
+          this.value = { start: a.trim(), end: i.trim() };
+        } else
+          this.value = t;
+      this._initialized && this.render();
+    }
+  }
+  // -- Selection --
+  _handleSelect(e) {
+    const s = 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 });
+    } else if (this.mode === "range")
+      if (!s.rangeStart || s.selected && typeof s.selected == "object" && s.selected.start && s.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 };
+        this._store.set({ selected: i, rangeStart: null, hoverTime: null }), this.emit("cal:time-change", { value: i }), this.display === "popover" && this.close();
+      }
+  }
+  _handleHover(e) {
+    this.mode === "range" && this._store.set({ hoverTime: e });
+  }
+  // -- 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;
+          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");
+    }
+  }
+  // -- 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"));
+  }
+  // -- Render --
+  _renderTimepickerContent() {
+    const e = this._store.getState(), s = document.createElement("div");
+    s.classList.add("cal-timepicker"), e.statusType && e.statusMessage && s.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 }));
+    else {
+      const a = this._getEffectiveSlots(), i = j({
+        slots: a,
+        mode: this.mode,
+        format: this.format,
+        selected: e.selected,
+        hoverTime: e.hoverTime,
+        rangeStart: e.rangeStart,
+        unavailableTimes: this._unavailableTimes,
+        onSelect: (l) => this._handleSelect(l),
+        onHover: (l) => this._handleHover(l),
+        durationLabels: this.durationLabels
+      });
+      s.appendChild(i);
+    }
+    return s;
+  }
+  _formatTriggerText() {
+    const e = this._store.getState();
+    return e.selected ? this.mode === "single" && typeof e.selected == "string" ? e.selected : this.mode === "multi" && Array.isArray(e.selected) && e.selected.length ? `${e.selected.length} time${e.selected.length > 1 ? "s" : ""} selected` : this.mode === "range" && typeof e.selected == "object" && e.selected.start ? `${e.selected.start} – ${e.selected.end}` : null : null;
+  }
+  render() {
+    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);
+    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 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 h = this._renderTimepickerContent(), m = O({
+        trigger: i,
+        content: h,
+        onClose: () => {
+          this._store.set({ isOpen: !1 }), this.emit("cal:close");
+        }
+      });
+      a.appendChild(m.panel), e.appendChild(a), i.addEventListener("click", (d) => {
+        d.stopPropagation(), m.isOpen ? this.close() : this.open();
+      }), this._popover = m, this._store.get("isOpen") && m.open();
+    } else
+      e.appendChild(this._renderTimepickerContent());
+    this._rendering = !1;
+  }
+}
+customElements.get("cal-timepicker") || customElements.define("cal-timepicker", U);
+export {
+  U as CalTimepicker
+};
+//# sourceMappingURL=timepicker.es.js.map