kalendly 0.2.2 → 0.3.1

package/dist/index.mjs

@@ -31,12 +31,28 @@ function generateYears(minYear, maxYear) {
   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 hasEvents(events, date) {
   return getEventsForDate(events, date).length > 0;
@@ -95,26 +111,16 @@ function generateCalendarDates(year, month, events = [], weekStartsOn = 0) {
   }
   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;
 }
@@ -173,7 +179,84 @@ function getCategoryColor(category, customColors) {
   const color = colorMap[category] || colorMap.other || "#fc8917";
   return isValidHexColor(color) ? color : "#fc8917";
 }
-var MONTHS, MONTHS_FULL, DAYS, DEFAULT_CATEGORY_COLORS;
+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";
+}
+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);
+    }
+  );
+}
+var MONTHS, MONTHS_FULL, DAYS, DEFAULT_CATEGORY_COLORS, HTML_ESCAPES, MINUTES_PER_DAY, DEFAULT_SLOT_DURATION;
 var init_utils = __esm({
   "src/core/utils.ts"() {
     "use strict";
@@ -222,6 +305,15 @@ var init_utils = __esm({
       appointment: "#f59e0b",
       other: "#6b7280"
     };
+    HTML_ESCAPES = {
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;"
+    };
+    MINUTES_PER_DAY = 1440;
+    DEFAULT_SLOT_DURATION = 60;
   }
 });
 
@@ -269,24 +361,38 @@ var init_calendar_engine = __esm({
        * 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
         };
       }
       /**
@@ -482,13 +588,13 @@ function defineCalendarElement(tagName = "kal-calendar") {
     customElements.define(tagName, CalendarElement);
   }
 }
-var isSameDay2, CalendarElement;
+var isSameDay2, _CalendarElement, CalendarElement;
 var init_CalendarElement = __esm({
   "src/web-components/CalendarElement.ts"() {
     "use strict";
     init_core();
     isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-    CalendarElement = class extends HTMLElement {
+    _CalendarElement = class _CalendarElement extends HTMLElement {
       constructor() {
         super(...arguments);
         this.engine = null;
@@ -509,6 +615,10 @@ var init_CalendarElement = __esm({
         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;
@@ -521,6 +631,7 @@ var init_CalendarElement = __esm({
         return this._events;
       }
       set events(val) {
+        this._initError = null;
         this._events = val;
         if (this.engine) {
           this.engine.updateEvents(val);
@@ -536,13 +647,28 @@ var init_CalendarElement = __esm({
           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");
@@ -551,10 +677,22 @@ var init_CalendarElement = __esm({
         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();
@@ -564,7 +702,7 @@ var init_CalendarElement = __esm({
       attributeChangedCallback(name, oldVal, newVal) {
         if (oldVal === newVal) return;
         if (name === "loading") {
-          this.render();
+          this.scheduleRender();
           return;
         }
         if (name === "selectable" && newVal === null) {
@@ -577,6 +715,46 @@ var init_CalendarElement = __esm({
         }
         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;
@@ -596,19 +774,20 @@ var init_CalendarElement = __esm({
           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) {
@@ -645,42 +824,84 @@ var init_CalendarElement = __esm({
       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();
@@ -689,7 +910,7 @@ var init_CalendarElement = __esm({
         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);
           }
@@ -724,56 +945,56 @@ var init_CalendarElement = __esm({
           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>
@@ -781,7 +1002,7 @@ var init_CalendarElement = __esm({
 
           ${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>
@@ -790,97 +1011,181 @@ var init_CalendarElement = __esm({
         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>
@@ -893,70 +1198,22 @@ var init_CalendarElement = __esm({
 
             <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>
@@ -969,7 +1226,7 @@ var init_CalendarElement = __esm({
               ` : ""}
 
               <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>
           ` : ""}
@@ -994,8 +1251,7 @@ var init_CalendarElement = __esm({
             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) {
@@ -1013,7 +1269,7 @@ var init_CalendarElement = __esm({
                   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;
                     }
@@ -1131,6 +1387,20 @@ var init_CalendarElement = __esm({
               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;
@@ -1247,31 +1517,86 @@ var init_CalendarElement = __esm({
         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;
+    CalendarElement = _CalendarElement;
   }
 });
 
@@ -1290,11 +1615,18 @@ export {
   CalendarEngine,
   DAYS,
   DEFAULT_CATEGORY_COLORS,
+  DEFAULT_SLOT_DURATION,
+  MINUTES_PER_DAY,
   MONTHS,
   MONTHS_FULL,
+  bookedSlots,
   defineCalendarElement,
+  escapeHtml,
+  eventCoversDate,
+  eventInterval,
   formatAttendees,
   formatDateForDisplay,
+  formatMinutes,
   formatTimeRange,
   generateCalendarDates,
   generateYears,
@@ -1303,13 +1635,17 @@ export {
   getDefaultEventColor,
   getEventsForDate,
   getMonthYearText,
-  getPopupPositionClass,
   hasEvents,
   isSameDay,
   isToday,
   isValidHexColor,
   mergeCategoryColors,
+  mergeIntervals,
   normalizeDate,
+  parseTimeToMinutes,
+  safeColor,
+  safeUrl,
+  slugifyToken,
   sortEventsByTime
 };
 //# sourceMappingURL=index.mjs.map