kalendly 0.2.2 → 0.3.1

package/dist/index.umd.js

@@ -78,12 +78,28 @@ var Kalendly = (() => {
     const max = maxYear ?? currentYear + 10;
     return Array.from({ length: max - min + 1 }, (_, i) => min + i);
   }
+  function eventCoversDate(event, date) {
+    const start = normalizeDate(new Date(event.date)).getTime();
+    const target = normalizeDate(date).getTime();
+    if (Number.isNaN(start)) return false;
+    if (event.endDate === void 0 || event.endDate === null) {
+      return start === target;
+    }
+    const end = normalizeDate(new Date(event.endDate)).getTime();
+    if (Number.isNaN(end)) {
+      throw new Error(
+        `<kal-calendar> event ${event.id} has an unreadable endDate: ${String(event.endDate)}.`
+      );
+    }
+    if (end < start) {
+      throw new Error(
+        `<kal-calendar> event ${event.id} has an endDate before its date: ${String(event.endDate)} < ${String(event.date)}.`
+      );
+    }
+    return target >= start && target <= end;
+  }
   function getEventsForDate(events, date) {
-    const normalizedTargetDate = normalizeDate(date);
-    return events.filter((event) => {
-      const eventDate = normalizeDate(new Date(event.date));
-      return eventDate.getTime() === normalizedTargetDate.getTime();
-    });
+    return events.filter((event) => eventCoversDate(event, date));
   }
   function generateCalendarDates(year, month, events = [], weekStartsOn = 0) {
     const firstDay = new Date(year, month, 1);
@@ -139,26 +155,16 @@ var Kalendly = (() => {
     }
     return dates;
   }
-  function getPopupPositionClass(selectedDayIndex) {
-    if (selectedDayIndex === null) return "popup-center-bottom";
-    if (selectedDayIndex < 3) {
-      return "popup-right";
-    } else if (selectedDayIndex > 4) {
-      return "popup-left";
-    } else {
-      return "popup-center-bottom";
-    }
-  }
   function getCellClasses(calendarDate) {
     const classes = [];
     if (!calendarDate.isCurrentMonth) {
-      classes.push("other-month");
+      classes.push("calendar-cell-other-month");
     }
     if (calendarDate.isToday) {
-      classes.push("schedule--current--exam");
+      classes.push("calendar-cell-today");
     }
     if (calendarDate.hasEvents) {
-      classes.push("has--event");
+      classes.push("calendar-cell-has-event");
     }
     return classes;
   }
@@ -208,6 +214,92 @@ var Kalendly = (() => {
     const color = colorMap[category] || colorMap.other || "#fc8917";
     return isValidHexColor(color) ? color : "#fc8917";
   }
+  var HTML_ESCAPES = {
+    "&": "&amp;",
+    "<": "&lt;",
+    ">": "&gt;",
+    '"': "&quot;",
+    "'": "&#39;"
+  };
+  function escapeHtml(value) {
+    if (value === null || value === void 0) return "";
+    return String(value).replace(/[&<>"']/g, (char) => HTML_ESCAPES[char]);
+  }
+  function slugifyToken(value) {
+    return String(value).toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  }
+  function safeUrl(value) {
+    const normalized = String(value).split("").filter((char) => char.charCodeAt(0) > 32).join("");
+    if (/^(?:https?:|mailto:)/i.test(normalized)) return normalized;
+    const schemeless = !/^[^/?#]*:/.test(normalized);
+    return schemeless ? normalized : "#";
+  }
+  function safeColor(value) {
+    const trimmed = String(value).trim();
+    return isValidHexColor(trimmed) || /^[a-z]+$/i.test(trimmed) ? trimmed : "#3b82f6";
+  }
+  var MINUTES_PER_DAY = 1440;
+  var DEFAULT_SLOT_DURATION = 60;
+  function parseTimeToMinutes(time) {
+    if (typeof time !== "string") return null;
+    const match = /^(\d{1,2}):(\d{2})$/.exec(time.trim());
+    if (!match) return null;
+    const hours = Number(match[1]);
+    const mins = Number(match[2]);
+    if (hours > 24 || mins > 59 || hours === 24 && mins > 0) return null;
+    return hours * 60 + mins;
+  }
+  function formatMinutes(total) {
+    const hours = Math.floor(total / 60);
+    const mins = total % 60;
+    return `${String(hours).padStart(2, "0")}:${String(mins).padStart(2, "0")}`;
+  }
+  function eventInterval(event, slotDuration, onDay) {
+    const day = normalizeDate(onDay).getTime();
+    if (Number.isNaN(day)) return null;
+    const base = day / 6e4;
+    const wholeDay = [base, base + MINUTES_PER_DAY];
+    if (event.allDay || !event.startTime) return wholeDay;
+    const from = parseTimeToMinutes(event.startTime);
+    if (from === null) return wholeDay;
+    if (event.endTime === void 0 || event.endTime === null) {
+      return [base + from, base + from + slotDuration];
+    }
+    const to = parseTimeToMinutes(event.endTime);
+    if (to === null) return wholeDay;
+    return [base + from, base + (to <= from ? to + MINUTES_PER_DAY : to)];
+  }
+  function mergeIntervals(intervals) {
+    const sorted = [...intervals].sort((a, b) => a[0] - b[0]);
+    return sorted.reduce((merged, [start, end]) => {
+      const last = merged[merged.length - 1];
+      if (last && start <= last[1]) last[1] = Math.max(last[1], end);
+      else merged.push([start, end]);
+      return merged;
+    }, []);
+  }
+  function bookedSlots(events, date, slotDuration = DEFAULT_SLOT_DURATION) {
+    const base = normalizeDate(date).getTime() / 6e4;
+    const previousDay = new Date(date);
+    previousDay.setDate(previousDay.getDate() - 1);
+    const intervals = [];
+    for (const event of new Set(events)) {
+      for (const day of [previousDay, date]) {
+        if (!eventCoversDate(event, day)) continue;
+        const interval = eventInterval(event, slotDuration, day);
+        if (interval) intervals.push(interval);
+      }
+    }
+    const merged = mergeIntervals(intervals);
+    return Array.from(
+      { length: Math.floor(MINUTES_PER_DAY / slotDuration) },
+      (_, index) => {
+        const start = base + index * slotDuration;
+        const end = start + slotDuration;
+        return merged.some(([from, to]) => start < to && end > from);
+      }
+    );
+  }
 
   // src/core/calendar-engine.ts
   var CalendarEngine = class {
@@ -248,24 +340,38 @@ var Kalendly = (() => {
      * Get view model with computed properties
      */
     getViewModel() {
-      const calendarDates = generateCalendarDates(
-        this.state.currentYear,
-        this.state.currentMonth,
-        this.config.events,
-        this.config.weekStartsOn
+      const panes = Array.from(
+        { length: Math.max(1, this.config.monthCount ?? 1) },
+        (_, offset) => {
+          const anchor = new Date(
+            this.state.currentYear,
+            this.state.currentMonth + offset,
+            1
+          );
+          const year = anchor.getFullYear();
+          const month = anchor.getMonth();
+          return {
+            year,
+            month,
+            monthAndYearText: getMonthYearText(year, month),
+            calendarDates: generateCalendarDates(
+              year,
+              month,
+              this.config.events,
+              this.config.weekStartsOn
+            )
+          };
+        }
       );
       return {
         ...this.state,
         months: MONTHS,
         days: DAYS,
         years: generateYears(this.config.minYear, this.config.maxYear),
-        monthAndYearText: getMonthYearText(
-          this.state.currentYear,
-          this.state.currentMonth
-        ),
+        monthAndYearText: panes[0].monthAndYearText,
         scheduleDay: this.state.selectedDate ? formatDateForDisplay(this.state.selectedDate) : "",
-        calendarDates,
-        popupPositionClass: getPopupPositionClass(this.state.selectedDayIndex)
+        panes,
+        calendarDates: panes[0].calendarDates
       };
     }
     /**
@@ -439,7 +545,7 @@ var Kalendly = (() => {
 
   // src/web-components/CalendarElement.ts
   var isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-  var CalendarElement = class extends HTMLElement {
+  var _CalendarElement = class _CalendarElement extends HTMLElement {
     constructor() {
       super(...arguments);
       this.engine = null;
@@ -460,6 +566,10 @@ var Kalendly = (() => {
       this._categoryColors = null;
       this._renderEvent = null;
       this._renderNoEvents = null;
+      this._availabilityColors = null;
+      this._selectableStatuses = null;
+      this._initError = null;
+      this.pendingUpdate = null;
       // Selection state (availability mode — range)
       this._rangeStart = null;
       this._rangeEnd = null;
@@ -472,6 +582,7 @@ var Kalendly = (() => {
       return this._events;
     }
     set events(val) {
+      this._initError = null;
       this._events = val;
       if (this.engine) {
         this.engine.updateEvents(val);
@@ -487,13 +598,28 @@ var Kalendly = (() => {
         this.engine.updateCategoryColors(val);
       }
     }
+    get availabilityColors() {
+      return this._availabilityColors ?? {};
+    }
+    set availabilityColors(val) {
+      this._initError = null;
+      this._availabilityColors = val;
+      if (this.engine) this.scheduleRender();
+    }
+    get selectableStatuses() {
+      return this._selectableStatuses ?? [];
+    }
+    set selectableStatuses(val) {
+      this._selectableStatuses = val;
+      if (this.engine) this.scheduleRender();
+    }
     set renderEvent(val) {
       this._renderEvent = val;
-      if (this.engine) this.render();
+      if (this.engine) this.scheduleRender();
     }
     set renderNoEvents(val) {
       this._renderNoEvents = val;
-      if (this.engine) this.render();
+      if (this.engine) this.scheduleRender();
     }
     get loading() {
       return this.hasAttribute("loading");
@@ -502,10 +628,22 @@ var Kalendly = (() => {
       if (val) this.setAttribute("loading", "");
       else this.removeAttribute("loading");
     }
+    // Custom element reactions report rather than propagate, so a failure here
+    // is kept and resurfaced at the next call the integrator makes
+    reaction(run) {
+      try {
+        run();
+      } catch (error) {
+        this._initError = error;
+        throw error;
+      }
+    }
     connectedCallback() {
       this.classList.add("kalendly-calendar");
-      this.initEngine();
-      this.render();
+      this.reaction(() => {
+        this.initEngine();
+        this.render();
+      });
     }
     disconnectedCallback() {
       this.cleanup();
@@ -515,7 +653,7 @@ var Kalendly = (() => {
     attributeChangedCallback(name, oldVal, newVal) {
       if (oldVal === newVal) return;
       if (name === "loading") {
-        this.render();
+        this.scheduleRender();
         return;
       }
       if (name === "selectable" && newVal === null) {
@@ -528,6 +666,46 @@ var Kalendly = (() => {
       }
       this.reinit();
     }
+    get headingText() {
+      const heading = this.getAttribute("heading");
+      if (heading !== null) return heading;
+      const title = this.getAttribute("title");
+      if (title !== null && !_CalendarElement.titleDeprecationWarned) {
+        _CalendarElement.titleDeprecationWarned = true;
+        console.warn(
+          `<kal-calendar> the title attribute is deprecated and will be removed in a future release \u2014 use heading instead. title is a global HTML attribute, so the browser also renders it as a tooltip over the whole calendar.`
+        );
+      }
+      return title;
+    }
+    get slotDuration() {
+      const raw = this.getAttribute("slot-duration");
+      if (raw === null) return DEFAULT_SLOT_DURATION;
+      const minutes = Number(raw);
+      if (Number.isInteger(minutes) && minutes > 0 && MINUTES_PER_DAY % minutes === 0) {
+        return minutes;
+      }
+      console.warn(
+        `<kal-calendar> slot-duration="${raw}" must be a positive whole number of minutes that divides ${MINUTES_PER_DAY} \u2014 falling back to ${DEFAULT_SLOT_DURATION}.`
+      );
+      return DEFAULT_SLOT_DURATION;
+    }
+    warnMissingEndTime(events) {
+      for (const event of events) {
+        if (!event.startTime || event.endTime) continue;
+        const key = String(event.id);
+        if (_CalendarElement.warnedMissingEnd.has(key)) continue;
+        _CalendarElement.warnedMissingEnd.add(key);
+        console.warn(
+          `<kal-calendar> event ${key} has startTime but no endTime \u2014 occupying one ${this.slotDuration}-minute slot. Send an endTime to say how long it runs.`
+        );
+      }
+    }
+    get monthCount() {
+      const requested = Number(this.getAttribute("months") ?? 1);
+      if (!Number.isInteger(requested) || requested < 1) return 1;
+      return Math.min(requested, 2);
+    }
     get minYear() {
       const val = this.getAttribute("min-year");
       return val ? parseInt(val, 10) : (/* @__PURE__ */ new Date()).getFullYear() - 30;
@@ -547,19 +725,20 @@ var Kalendly = (() => {
         minYear: this.minYear,
         maxYear: this.maxYear,
         weekStartsOn,
-        categoryColors: this._categoryColors ?? void 0
+        categoryColors: this._categoryColors ?? void 0,
+        monthCount: this.monthCount
       });
       this.actions = this.engine.getActions();
       this.applyTheme();
       this.unsubscribe = this.engine.subscribe(() => {
-        this.render();
+        this.scheduleRender();
       });
     }
     reinit() {
       if (!this.engine) return;
       this.cleanup();
       this.initEngine();
-      this.render();
+      this.scheduleRender();
     }
     cleanup() {
       if (this.unsubscribe) {
@@ -596,42 +775,84 @@ var Kalendly = (() => {
     applyTheme() {
       if (!this._theme) return;
       const root = document.documentElement;
-      const t = this._theme;
-      if (t.primary)
-        root.style.setProperty("--calendar-primary-color", t.primary);
-      if (t.secondary)
-        root.style.setProperty("--calendar-secondary-color", t.secondary);
-      if (t.tertiary)
-        root.style.setProperty("--calendar-tertiary-color", t.tertiary);
-      if (t.textColor)
-        root.style.setProperty("--calendar-text-color", t.textColor);
-      if (t.textLight)
-        root.style.setProperty("--calendar-text-light", t.textLight);
-      if (t.background)
-        root.style.setProperty("--calendar-background", t.background);
-      if (t.cellHover)
-        root.style.setProperty("--calendar-cell-hover", t.cellHover);
-      if (t.borderColor)
-        root.style.setProperty("--calendar-border-color", t.borderColor);
-      if (t.todayOutline)
-        root.style.setProperty("--calendar-today-outline", t.todayOutline);
-      if (t.selectedBg)
-        root.style.setProperty("--calendar-selected-bg", t.selectedBg);
-      if (t.headerBg) root.style.setProperty("--calendar-header-bg", t.headerBg);
-      if (t.popupBg) root.style.setProperty("--calendar-popup-bg", t.popupBg);
-      if (t.eventIndicator)
-        root.style.setProperty("--calendar-event-indicator", t.eventIndicator);
+      for (const key of Object.keys(_CalendarElement.themeMap)) {
+        const value = this._theme[key];
+        if (value) root.style.setProperty(_CalendarElement.themeMap[key], value);
+      }
+    }
+    get knownBuckets() {
+      return [
+        ..._CalendarElement.BUILT_IN_BUCKETS,
+        ...Object.keys(this._availabilityColors ?? {})
+      ];
+    }
+    get updateComplete() {
+      return this.pendingUpdate ?? Promise.resolve();
+    }
+    scheduleRender() {
+      if (this.pendingUpdate) return;
+      this.pendingUpdate = Promise.resolve().then(() => {
+        this.pendingUpdate = null;
+        try {
+          this.render();
+        } catch (error) {
+          this._initError = error;
+          throw error;
+        }
+      });
+    }
+    rethrowInitError() {
+      if (this._initError) throw this._initError;
+    }
+    assertStatusesDeclared() {
+      if (!this.getAttribute("availability-mode")) return;
+      const missing = this._events.filter(
+        (event) => typeof event.availabilityStatus !== "string" || event.availabilityStatus === ""
+      ).map((event) => String(event.id));
+      if (missing.length) {
+        throw new Error(
+          `<kal-calendar> availability-mode requires availabilityStatus on every event. Missing on: ${missing.join(", ")}.`
+        );
+      }
+    }
+    assertStatusesKnown() {
+      const known = new Set(this.knownBuckets);
+      const unknown = this._events.filter((event) => !known.has(event.availabilityStatus)).map((event) => `${event.id} (${event.availabilityStatus})`);
+      if (unknown.length) {
+        throw new Error(
+          `<kal-calendar> availabilityStatus must name a built-in bucket (${_CalendarElement.BUILT_IN_BUCKETS.join(", ")}) or a key of availabilityColors. Unrecognised on: ${unknown.join(", ")}.`
+        );
+      }
+    }
+    resolveBucket(date) {
+      if (!this.engine) return "open";
+      const declared = new Set(
+        this.engine.getEventsForDate(date).map((event) => event.availabilityStatus)
+      );
+      if (declared.size === 0) return "open";
+      return this.knownBuckets.find((bucket) => declared.has(bucket));
+    }
+    isDateSelectable(date) {
+      if (!this.engine) return false;
+      if (this._selectableStatuses) {
+        return this._selectableStatuses.includes(this.resolveBucket(date));
+      }
+      return this.engine.getEventsForDate(date).length === 0;
     }
     render() {
       if (!this.engine) return;
       const viewModel = this.engine.getViewModel();
       const useShortMonths = this.hasAttribute("use-short-month-names");
-      const title = this.getAttribute("title");
+      const title = this.headingText;
       const minYear = this.minYear;
       const maxYear = this.maxYear;
       const availabilityMode = this.getAttribute("availability-mode");
       const selectable = this.hasAttribute("selectable");
       const isLoading = this.loading;
+      if (availabilityMode) {
+        this.assertStatusesDeclared();
+        this.assertStatusesKnown();
+      }
       const today = /* @__PURE__ */ new Date();
       const todayMonth = today.getMonth();
       const todayYear = today.getFullYear();
@@ -640,7 +861,7 @@ var Kalendly = (() => {
       const defaultRenderEvent = (event) => {
         const timeRange = formatTimeRange(event);
         const attendeesList = formatAttendees(event.attendees);
-        let borderColor = event.color || "#3b82f6";
+        let borderColor = safeColor(event.color || "#3b82f6");
         if (event.category) {
           borderColor = this.engine.getCategoryColor(event.category);
         }
@@ -675,56 +896,56 @@ var Kalendly = (() => {
         return `
         <div class="event-card" style="border-left-color: ${borderColor}">
           <div class="event-header">
-            <div class="event-title">${event.name}</div>
+            <div class="event-title">${escapeHtml(event.name)}</div>
             <div class="event-badges">
-              ${event.category ? `<span class="badge category-${event.category}">${getCategoryLabel(event.category)}</span>` : ""}
-              ${event.priority ? `<span class="badge priority-${event.priority}">${getPriorityLabel(event.priority)}</span>` : ""}
-              ${event.status && event.status !== "scheduled" ? `<span class="badge status-${event.status}">${getStatusLabel(event.status)}</span>` : ""}
+              ${event.category ? `<span class="badge category category-${slugifyToken(event.category)}">${escapeHtml(getCategoryLabel(event.category))}</span>` : ""}
+              ${event.priority ? `<span class="badge priority priority-${slugifyToken(event.priority)}">${escapeHtml(getPriorityLabel(event.priority))}</span>` : ""}
+              ${event.status && event.status !== "scheduled" ? `<span class="badge status status-${slugifyToken(event.status)}">${escapeHtml(getStatusLabel(event.status))}</span>` : ""}
             </div>
           </div>
 
           ${timeRange ? `
           <div class="event-time">
             <span class="event-time-label">Time:</span>
-            <span class="event-time-value">${timeRange}</span>
+            <span class="event-time-value">${escapeHtml(timeRange)}</span>
           </div>
           ` : ""}
 
           ${event.description ? `
-          <div class="event-description">${event.description}</div>
+          <div class="event-description">${escapeHtml(event.description)}</div>
           ` : ""}
 
           ${event.location ? `
           <div class="event-time">
             <span class="event-time-label">Location:</span>
-            <span class="event-time-value">${event.location}</span>
+            <span class="event-time-value">${escapeHtml(event.location)}</span>
           </div>
           ` : ""}
 
           ${attendeesList ? `
           <div class="event-time">
             <span class="event-time-label">Attendees:</span>
-            <span class="event-time-value">${attendeesList}</span>
+            <span class="event-time-value">${escapeHtml(attendeesList)}</span>
           </div>
           ` : ""}
 
           ${event.organizer ? `
           <div class="event-time">
             <span class="event-time-label">Organizer:</span>
-            <span class="event-time-value">${event.organizer}</span>
+            <span class="event-time-value">${escapeHtml(event.organizer)}</span>
           </div>
           ` : ""}
 
           ${event.notes ? `
           <div class="event-time">
             <span class="event-time-label">Notes:</span>
-            <span class="event-time-value">${event.notes}</span>
+            <span class="event-time-value">${escapeHtml(event.notes)}</span>
           </div>
           ` : ""}
 
           ${event.url ? `
           <div class="event-time">
-            <a href="${event.url}" target="_blank" rel="noopener noreferrer" class="event-link">
+            <a href="${escapeHtml(safeUrl(event.url))}" target="_blank" rel="noopener noreferrer" class="event-link">
               View Details \u2192
             </a>
           </div>
@@ -732,7 +953,7 @@ var Kalendly = (() => {
 
           ${event.tags && event.tags.length > 0 ? `
           <div class="event-tags">
-            ${event.tags.map((tag) => `<span class="event-tag">${tag}</span>`).join("")}
+            ${event.tags.map((tag) => `<span class="event-tag">${escapeHtml(tag)}</span>`).join("")}
           </div>
           ` : ""}
         </div>
@@ -741,97 +962,181 @@ var Kalendly = (() => {
       const defaultRenderNoEvents = () => '<div class="no-events-message">No events scheduled for this day.</div>';
       const renderEvent = this._renderEvent || defaultRenderEvent;
       const renderNoEvents = this._renderNoEvents || defaultRenderNoEvents;
-      const renderTimeGrid = (events, date) => {
-        const isHourBooked = (hour) => events.some((event) => {
-          if (!event.startTime || !event.endTime) return true;
-          const [startH] = event.startTime.split(":").map(Number);
-          const [endH] = event.endTime.split(":").map(Number);
-          return hour >= startH && hour < endH;
-        });
-        const slots = Array.from({ length: 24 }, (_, hour) => {
-          const startTime = `${String(hour).padStart(2, "0")}:00`;
-          const endTime = `${String(hour + 1).padStart(2, "0")}:00`;
-          const booked = isHourBooked(hour);
-          const inTimeRange = !booked && selectable && this._timeRangeStart !== null && this._timeRangeEnd !== null && isSameDay2(this._timeRangeDate, date) && startTime >= this._timeRangeStart && endTime <= this._timeRangeEnd;
+      const renderTimeGrid = (date) => {
+        const slotDuration = this.slotDuration;
+        const previousDay = new Date(date);
+        previousDay.setDate(previousDay.getDate() - 1);
+        const events = [
+          ...this.engine.getEventsForDate(previousDay),
+          ...this.engine.getEventsForDate(date)
+        ];
+        this.warnMissingEndTime(events);
+        const booked = bookedSlots(events, date, slotDuration);
+        const slots = booked.map((isBooked, index) => {
+          const startTime = formatMinutes(index * slotDuration);
+          const endTime = formatMinutes((index + 1) * slotDuration);
+          const inTimeRange = !isBooked && selectable && this._timeRangeStart !== null && this._timeRangeEnd !== null && isSameDay2(this._timeRangeDate, date) && startTime >= this._timeRangeStart && endTime <= this._timeRangeEnd;
           const isRangeStart = inTimeRange && startTime === this._timeRangeStart;
           const isRangeEnd = inTimeRange && endTime === this._timeRangeEnd;
           const isInRange = inTimeRange && !isRangeStart && !isRangeEnd;
           const slotClasses = [
-            "time-grid__slot",
-            booked ? "time-grid__slot--booked" : "time-grid__slot--free",
-            isRangeStart ? "time-grid__slot--range-start" : "",
-            isRangeEnd ? "time-grid__slot--range-end" : "",
-            isInRange ? "time-grid__slot--in-range" : ""
+            "time-grid-slot",
+            isBooked ? "time-grid-slot-blocked" : "time-grid-slot-open",
+            isRangeStart ? "time-grid-slot-range-start" : "",
+            isRangeEnd ? "time-grid-slot-range-end" : "",
+            isInRange ? "time-grid-slot-in-range" : ""
           ].filter(Boolean).join(" ");
-          const slotAttrs = !booked && selectable ? `data-action="select-slot" data-start-time="${startTime}" data-end-time="${endTime}" data-date="${date.toISOString()}"` : "";
+          const slotAttrs = `data-action="select-slot" data-start-time="${startTime}" data-end-time="${endTime}" data-date="${date.toISOString()}" data-booked="${isBooked}"`;
           return `
           <div class="${slotClasses}" ${slotAttrs}>
-            <span class="time-grid__label">${startTime}</span>
-            <span class="time-grid__status">${booked ? "Booked" : "Available"}</span>
+            <span class="time-grid-label">${startTime}</span>
+            <span class="time-grid-status">${isBooked ? "Booked" : "Available"}</span>
           </div>`;
         });
-        return `<div class="time-grid">${slots.join("")}</div>`;
+        const gridClasses = selectable ? "time-grid time-grid-selectable" : "time-grid";
+        return `<div class="${gridClasses}">${slots.join("")}</div>`;
       };
+      const multiMonth = viewModel.panes.length > 1;
+      const renderPane = (pane) => `
+        <div class="calendar-pane">
+          ${multiMonth ? `<div class="calendar-pane-caption">${escapeHtml(pane.monthAndYearText)}</div>` : ""}
+            <table class="calendar-table calendar-table-bordered">
+              <thead>
+                <tr>
+                  ${viewModel.days.map((day) => `<th>${day.slice(0, 3)}</th>`).join("")}
+                </tr>
+              </thead>
+              <tbody data-calendar-body>
+                ${isLoading ? Array.from(
+        { length: 6 },
+        () => `<tr>${Array.from(
+          { length: 7 },
+          () => `<td class="calendar-skeleton" aria-hidden="true"></td>`
+        ).join("")}</tr>`
+      ).join("") : pane.calendarDates.map(
+        (week) => `
+                      <tr>
+                        ${week.map((calendarDate, dayIndex) => {
+          const classes = getCellClasses(calendarDate);
+          const cellAttrs = [];
+          if (viewModel.selectedDate && isSameDay2(
+            calendarDate.date,
+            viewModel.selectedDate
+          )) {
+            classes.push("calendar-cell-selected");
+          }
+          if (availabilityMode && calendarDate.isCurrentMonth) {
+            const bucket = this.resolveBucket(
+              calendarDate.date
+            );
+            const custom = (this._availabilityColors ?? {})[bucket];
+            classes.push(
+              `availability-${slugifyToken(bucket)}`
+            );
+            if (custom) {
+              classes.push("availability-status");
+              cellAttrs.push(
+                `style="--availability-color: ${escapeHtml(safeColor(custom))}"`
+              );
+            }
+            if (!this.isDateSelectable(calendarDate.date)) {
+              classes.push("availability-unselectable");
+            }
+            cellAttrs.push(
+              `aria-label="${escapeHtml(bucket)}"`
+            );
+          }
+          if (availabilityMode === "day" && selectable && calendarDate.isCurrentMonth) {
+            const d = calendarDate.date;
+            if (this._rangeStart && isSameDay2(d, this._rangeStart))
+              classes.push("availability-range-start");
+            if (this._rangeEnd && isSameDay2(d, this._rangeEnd))
+              classes.push("availability-range-end");
+            if (this._rangeStart && this._rangeEnd) {
+              if (d > this._rangeStart && d < this._rangeEnd)
+                classes.push("availability-in-range");
+            }
+          }
+          const dateString = calendarDate.date.toISOString();
+          return `
+                            <td
+                              class="${classes.join(" ")}"
+                              data-date="${dateString}"
+                              data-day-index="${dayIndex}"
+                              data-clickable="true"
+                              ${cellAttrs.join(" ")}
+                            >
+                              ${calendarDate.date.getDate()}
+                            </td>
+                          `;
+        }).join("")}
+                      </tr>
+                    `
+      ).join("")}
+              </tbody>
+            </table>
+        </div>
+      `;
       const html = `
       ${title ? `
-      <div class="page--title">
-        <h1>${title}</h1>
+      <div class="calendar-title">
+        <h1>${escapeHtml(title)}</h1>
       </div>
       ` : ""}
 
-      <div class="calendar--content">
-        <div class="calendar--card">
-          <div class="calendar--nav-header">
-            <button type="button" class="calendar--nav-arrow" data-action="previous" aria-label="Previous month">
+      <div class="calendar-content">
+        <div class="calendar-card">
+          <div class="calendar-nav-header">
+            <button type="button" class="calendar-nav-arrow" data-action="previous" aria-label="Previous month">
               &#8249;
             </button>
 
-            <div class="calendar--picker-container" data-picker-container>
+            <div class="calendar-picker-container" data-picker-container>
               <button
                 type="button"
-                class="calendar--picker-btn"
+                class="calendar-picker-btn"
                 data-action="toggle-picker"
                 aria-expanded="${this.pickerOpen ? "true" : "false"}"
                 aria-haspopup="true"
               >
                 ${useShortMonths ? `${MONTHS[viewModel.currentMonth]} ${viewModel.currentYear}` : viewModel.monthAndYearText}
-                <span class="calendar--picker-chevron">&#9662;</span>
+                <span class="calendar-picker-chevron">&#9662;</span>
               </button>
 
               ${this.pickerOpen ? `
-                <div class="calendar--picker-dropdown">
-                  <div class="calendar--picker-year-row">
+                <div class="calendar-picker-dropdown">
+                  <div class="calendar-picker-year-row">
                     <button
                       type="button"
-                      class="calendar--picker-year-arrow"
+                      class="calendar-picker-year-arrow"
                       data-action="year-prev"
                       ${viewModel.currentYear <= minYear ? "disabled" : ""}
                       aria-label="Previous year"
                     >&#8249;</button>
                     <input
                       type="text"
-                      class="calendar--picker-year-input${!this.yearInputValid ? " invalid" : ""}"
-                      value="${this.yearInput || viewModel.currentYear}"
+                      class="calendar-picker-year-input${!this.yearInputValid ? " invalid" : ""}"
+                      value="${escapeHtml(this.yearInput || viewModel.currentYear)}"
                       data-year-input
                       aria-label="Year"
                     />
                     <button
                       type="button"
-                      class="calendar--picker-year-arrow"
+                      class="calendar-picker-year-arrow"
                       data-action="year-next"
                       ${viewModel.currentYear >= maxYear ? "disabled" : ""}
                       aria-label="Next year"
                     >&#8250;</button>
                   </div>
 
-                  <div class="calendar--picker-months">
+                  <div class="calendar-picker-months">
                     ${(useShortMonths ? MONTHS : MONTHS_FULL).map((month, index) => {
         const isSelected = index === viewModel.currentMonth;
         const isCurrent = index === todayMonth && viewModel.currentYear === todayYear;
         return `
                         <button
                           type="button"
-                          class="calendar--picker-month${isSelected ? " selected" : ""}${isCurrent ? " current-month" : ""}"
+                          class="calendar-picker-month${isSelected ? " selected" : ""}${isCurrent ? " current-month" : ""}"
                           data-action="select-month"
                           data-month="${index}"
                         >${month}</button>
@@ -844,70 +1149,22 @@ var Kalendly = (() => {
 
             <button
               type="button"
-              class="calendar--today-btn"
+              class="calendar-today-btn"
               data-action="today"
               ${isCurrentMonth ? "disabled" : ""}
             >Today</button>
 
-            <button type="button" class="calendar--nav-arrow" data-action="next" aria-label="Next month">
+            <button type="button" class="calendar-nav-arrow" data-action="next" aria-label="Next month">
               &#8250;
             </button>
           </div>
 
-          <table class="calendar--table calendar--table--bordered">
-            <thead>
-              <tr>
-                ${viewModel.days.map((day) => `<th>${day.slice(0, 3)}</th>`).join("")}
-              </tr>
-            </thead>
-            <tbody data-calendar-body>
-              ${isLoading ? Array.from(
-        { length: 6 },
-        () => `<tr>${Array.from(
-          { length: 7 },
-          () => `<td class="calendar--skeleton" aria-hidden="true"></td>`
-        ).join("")}</tr>`
-      ).join("") : viewModel.calendarDates.map(
-        (week) => `
-                    <tr>
-                      ${week.map((calendarDate, dayIndex) => {
-          const classes = getCellClasses(calendarDate);
-          if (availabilityMode && calendarDate.isCurrentMonth) {
-            classes.push(
-              calendarDate.hasEvents ? "availability--booked" : "availability--free"
-            );
-          }
-          if (availabilityMode === "day" && selectable && calendarDate.isCurrentMonth) {
-            const d = calendarDate.date;
-            if (this._rangeStart && isSameDay2(d, this._rangeStart))
-              classes.push("availability--range-start");
-            if (this._rangeEnd && isSameDay2(d, this._rangeEnd))
-              classes.push("availability--range-end");
-            if (this._rangeStart && this._rangeEnd) {
-              if (d > this._rangeStart && d < this._rangeEnd)
-                classes.push("availability--in-range");
-            }
-          }
-          const dateString = calendarDate.date.toISOString();
-          return `
-                          <td
-                            class="${classes.join(" ")}"
-                            data-date="${dateString}"
-                            data-day-index="${dayIndex}"
-                            data-clickable="true"
-                          >
-                            ${calendarDate.date.getDate()}
-                          </td>
-                        `;
-        }).join("")}
-                    </tr>
-                  `
-      ).join("")}
-            </tbody>
-          </table>
+          <div class="calendar-panes">
+            ${viewModel.panes.map(renderPane).join("")}
+          </div>
 
           ${!isLoading && availabilityMode !== "day" && viewModel.selectedDate ? `
-            <div class="date-popup ${viewModel.popupPositionClass}">
+            <div class="date-popup">
               <div class="popup-header">
                 <h2>${viewModel.scheduleDay}</h2>
                 <button type="button" class="popup-close" data-action="close-popup" aria-label="Close">\u2715</button>
@@ -920,7 +1177,7 @@ var Kalendly = (() => {
               ` : ""}
 
               <div class="events-container">
-                ${availabilityMode === "time" ? renderTimeGrid(viewModel.tasks, viewModel.selectedDate) : viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
+                ${availabilityMode === "time" ? renderTimeGrid(viewModel.selectedDate) : viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
               </div>
             </div>
           ` : ""}
@@ -945,8 +1202,7 @@ var Kalendly = (() => {
           const availMode = this.getAttribute("availability-mode");
           const isSelectable = this.hasAttribute("selectable");
           if (availMode === "day" && isSelectable) {
-            const isBooked = cell.classList.contains("availability--booked");
-            if (!isBooked) {
+            if (this.isDateSelectable(date)) {
               let startDate;
               let endDate;
               if (this._rangeEnd !== null) {
@@ -964,7 +1220,7 @@ var Kalendly = (() => {
                 cursor.setDate(cursor.getDate() + 1);
                 let blocked = false;
                 while (cursor < e2) {
-                  if (this.engine.getEventsForDate(cursor).length > 0) {
+                  if (!this.isDateSelectable(cursor)) {
                     blocked = true;
                     break;
                   }
@@ -1082,6 +1338,20 @@ var Kalendly = (() => {
             const slotStart = actionEl.dataset.startTime;
             const slotEnd = actionEl.dataset.endTime;
             const slotDate = new Date(actionEl.dataset.date);
+            const slotBooked = actionEl.dataset.booked === "true";
+            this.dispatchEvent(
+              new CustomEvent("cal-slot-select", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  date: slotDate,
+                  startTime: slotStart,
+                  endTime: slotEnd,
+                  booked: slotBooked
+                }
+              })
+            );
+            if (slotBooked || !this.hasAttribute("selectable")) break;
             if (this._timeRangeComplete) {
               this._timeRangeDate = slotDate;
               this._timeRangeStart = slotStart;
@@ -1198,31 +1468,86 @@ var Kalendly = (() => {
       this.theme = theme;
     }
     getCurrentDate() {
+      this.rethrowInitError();
       return this.engine?.getViewModel().selectedDate ?? null;
     }
     goToDate(date) {
+      this.rethrowInitError();
       const year = date.getFullYear();
       const month = date.getMonth();
       this.dispatchMonthChange(year, month);
       this.actions?.jump(year, month);
     }
     getEngine() {
+      this.rethrowInitError();
       if (!this.engine)
         throw new Error("CalendarElement is not connected to the DOM");
       return this.engine;
     }
   };
-  CalendarElement.observedAttributes = [
+  _CalendarElement.observedAttributes = [
     "initial-date",
     "min-year",
     "max-year",
     "week-starts-on",
+    "heading",
+    "months",
+    "slot-duration",
     "title",
     "use-short-month-names",
     "availability-mode",
     "selectable",
     "loading"
   ];
+  _CalendarElement.themeMap = {
+    primary: "--calendar-primary-color",
+    secondary: "--calendar-secondary-color",
+    tertiary: "--calendar-tertiary-color",
+    textColor: "--calendar-text-color",
+    textLight: "--calendar-text-light",
+    background: "--calendar-background",
+    cellHover: "--calendar-cell-hover",
+    borderColor: "--calendar-border-color",
+    todayOutline: "--calendar-today-outline",
+    selectedBg: "--calendar-selected-bg",
+    headerBg: "--calendar-header-bg",
+    popupBg: "--calendar-popup-bg",
+    pickerBg: "--calendar-picker-bg",
+    pickerShadow: "--calendar-picker-shadow",
+    eventIndicator: "--calendar-event-indicator",
+    onAccent: "--calendar-on-accent",
+    link: "--calendar-link",
+    openBg: "--calendar-open-bg",
+    openFg: "--calendar-open-fg",
+    conditionalBg: "--calendar-conditional-bg",
+    conditionalFg: "--calendar-conditional-fg",
+    blockedBg: "--calendar-blocked-bg",
+    blockedFg: "--calendar-blocked-fg",
+    rangeBg: "--calendar-range-bg",
+    rangeOutline: "--calendar-range-outline",
+    inRangeBg: "--calendar-in-range-bg",
+    inRangeOutline: "--calendar-in-range-outline",
+    badgeBg: "--calendar-badge-bg",
+    badgeText: "--calendar-badge-text",
+    badgeSuccessBg: "--calendar-badge-success-bg",
+    badgeSuccessText: "--calendar-badge-success-text",
+    badgeInfoBg: "--calendar-badge-info-bg",
+    badgeInfoText: "--calendar-badge-info-text",
+    badgeWarningBg: "--calendar-badge-warning-bg",
+    badgeWarningText: "--calendar-badge-warning-text",
+    badgeDangerBg: "--calendar-badge-danger-bg",
+    badgeDangerText: "--calendar-badge-danger-text",
+    badgeNeutralBg: "--calendar-badge-neutral-bg",
+    badgeNeutralText: "--calendar-badge-neutral-text",
+    badgePositiveBg: "--calendar-badge-positive-bg",
+    badgePositiveText: "--calendar-badge-positive-text",
+    badgeTentativeBg: "--calendar-badge-tentative-bg",
+    badgeTentativeText: "--calendar-badge-tentative-text"
+  };
+  _CalendarElement.warnedMissingEnd = /* @__PURE__ */ new Set();
+  _CalendarElement.BUILT_IN_BUCKETS = ["blocked", "conditional", "open"];
+  _CalendarElement.titleDeprecationWarned = false;
+  var CalendarElement = _CalendarElement;
   function defineCalendarElement(tagName = "kal-calendar") {
     if (typeof customElements !== "undefined" && !customElements.get(tagName)) {
       customElements.define(tagName, CalendarElement);