kalendly 0.2.1 → 0.3.0

package/dist/index.js

@@ -107,26 +107,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;
 }
@@ -185,7 +175,24 @@ 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";
+}
+var MONTHS, MONTHS_FULL, DAYS, DEFAULT_CATEGORY_COLORS, HTML_ESCAPES;
 var init_utils = __esm({
   "src/core/utils.ts"() {
     "use strict";
@@ -234,6 +241,13 @@ var init_utils = __esm({
       appointment: "#f59e0b",
       other: "#6b7280"
     };
+    HTML_ESCAPES = {
+      "&": "&amp;",
+      "<": "&lt;",
+      ">": "&gt;",
+      '"': "&quot;",
+      "'": "&#39;"
+    };
   }
 });
 
@@ -281,24 +295,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
         };
       }
       /**
@@ -494,13 +522,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;
@@ -521,6 +549,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;
@@ -533,6 +565,7 @@ var init_CalendarElement = __esm({
         return this._events;
       }
       set events(val) {
+        this._initError = null;
         this._events = val;
         if (this.engine) {
           this.engine.updateEvents(val);
@@ -548,13 +581,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");
@@ -563,10 +611,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();
@@ -576,7 +636,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) {
@@ -589,6 +649,23 @@ 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 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;
@@ -608,19 +685,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) {
@@ -657,40 +735,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.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();
@@ -699,7 +821,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);
           }
@@ -734,56 +856,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>
@@ -791,7 +913,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>
@@ -801,11 +923,17 @@ var init_CalendarElement = __esm({
         const renderEvent = this._renderEvent || defaultRenderEvent;
         const renderNoEvents = this._renderNoEvents || defaultRenderNoEvents;
         const renderTimeGrid = (events, date) => {
+          const startHour = (time) => {
+            if (typeof time !== "string") return null;
+            const hour = Number(time.split(":")[0]);
+            return Number.isInteger(hour) && hour >= 0 && hour <= 24 ? hour : null;
+          };
           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;
+            if (!event.startTime) return true;
+            const from = startHour(event.startTime);
+            const to = event.endTime ? startHour(event.endTime) : 24;
+            if (from === null || to === null) return true;
+            return hour >= from && hour < to;
           });
           const slots = Array.from({ length: 24 }, (_, hour) => {
             const startTime = `${String(hour).padStart(2, "0")}:00`;
@@ -816,81 +944,156 @@ var init_CalendarElement = __esm({
             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",
+              booked ? "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()}"` : "";
             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">${booked ? "Booked" : "Available"}</span>
           </div>`;
           });
           return `<div class="time-grid">${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 (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>
@@ -903,70 +1106,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>
@@ -1004,8 +1159,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) {
@@ -1023,7 +1177,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;
                     }
@@ -1257,31 +1411,84 @@ 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",
       "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.BUILT_IN_BUCKETS = ["blocked", "conditional", "open"];
+    _CalendarElement.titleDeprecationWarned = false;
+    CalendarElement = _CalendarElement;
   }
 });
 
@@ -1295,6 +1502,7 @@ __export(web_components_exports, {
   MONTHS: () => MONTHS,
   MONTHS_FULL: () => MONTHS_FULL,
   defineCalendarElement: () => defineCalendarElement,
+  escapeHtml: () => escapeHtml,
   formatAttendees: () => formatAttendees,
   formatDateForDisplay: () => formatDateForDisplay,
   formatTimeRange: () => formatTimeRange,
@@ -1305,13 +1513,15 @@ __export(web_components_exports, {
   getDefaultEventColor: () => getDefaultEventColor,
   getEventsForDate: () => getEventsForDate,
   getMonthYearText: () => getMonthYearText,
-  getPopupPositionClass: () => getPopupPositionClass,
   hasEvents: () => hasEvents,
   isSameDay: () => isSameDay,
   isToday: () => isToday,
   isValidHexColor: () => isValidHexColor,
   mergeCategoryColors: () => mergeCategoryColors,
   normalizeDate: () => normalizeDate,
+  safeColor: () => safeColor,
+  safeUrl: () => safeUrl,
+  slugifyToken: () => slugifyToken,
   sortEventsByTime: () => sortEventsByTime
 });
 module.exports = __toCommonJS(web_components_exports);
@@ -1333,6 +1543,7 @@ if (typeof customElements !== "undefined" && !customElements.get("kal-calendar")
   MONTHS,
   MONTHS_FULL,
   defineCalendarElement,
+  escapeHtml,
   formatAttendees,
   formatDateForDisplay,
   formatTimeRange,
@@ -1343,13 +1554,15 @@ if (typeof customElements !== "undefined" && !customElements.get("kal-calendar")
   getDefaultEventColor,
   getEventsForDate,
   getMonthYearText,
-  getPopupPositionClass,
   hasEvents,
   isSameDay,
   isToday,
   isValidHexColor,
   mergeCategoryColors,
   normalizeDate,
+  safeColor,
+  safeUrl,
+  slugifyToken,
   sortEventsByTime
 });
 //# sourceMappingURL=index.js.map