kalendly 0.3.4 → 0.3.5

package/dist/index.umd.js

@@ -206,13 +206,13 @@ var Kalendly = (() => {
   function getCellClasses(calendarDate) {
     const classes = [];
     if (!calendarDate.isCurrentMonth) {
-      classes.push("calendar-cell-other-month");
+      classes.push("kalendly-cell-other-month");
     }
     if (calendarDate.isToday) {
-      classes.push("calendar-cell-today");
+      classes.push("kalendly-cell-today");
     }
     if (calendarDate.hasEvents) {
-      classes.push("calendar-cell-has-event");
+      classes.push("kalendly-cell-has-event");
     }
     return classes;
   }
@@ -683,13 +683,25 @@ var Kalendly = (() => {
     reaction(run) {
       try {
         run();
+        this._initError = null;
       } catch (error) {
         this._initError = error;
+        this.renderError(error);
         throw error;
       }
     }
+    // A thrown configuration error otherwise leaves an empty element, and the
+    // reason only in a console nobody is watching. Say what is wrong where the
+    // calendar should be.
+    renderError(error) {
+      const message = error.message.replace(/^<kal-calendar>\s*/, "");
+      this.innerHTML = `
+      <div class="kalendly-error" role="alert">
+        <strong>kalendly</strong> ${escapeHtml(message)}
+      </div>`;
+    }
     connectedCallback() {
-      this.classList.add("kalendly-calendar");
+      this.classList.add("kalendly");
       this.reaction(() => {
         this.initEngine();
         this.render();
@@ -697,7 +709,7 @@ var Kalendly = (() => {
     }
     disconnectedCallback() {
       this.cleanup();
-      this.classList.remove("kalendly-calendar");
+      this.classList.remove("kalendly");
       this.innerHTML = "";
     }
     attributeChangedCallback(name, oldVal, newVal) {
@@ -714,19 +726,10 @@ var Kalendly = (() => {
         this._timeRangeEnd = null;
         this._timeRangeComplete = false;
       }
-      this.reinit();
+      this.reaction(() => 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;
+      return this.getAttribute("heading");
     }
     get slotDuration() {
       const raw = this.getAttribute("slot-duration");
@@ -735,10 +738,9 @@ var Kalendly = (() => {
       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}.`
+      throw new Error(
+        `<kal-calendar> slot-duration="${raw}" must be a positive whole number of minutes that divides ${MINUTES_PER_DAY}.`
       );
-      return DEFAULT_SLOT_DURATION;
     }
     warnMissingEndTime(events) {
       for (const event of events) {
@@ -752,17 +754,37 @@ var Kalendly = (() => {
       }
     }
     get monthCount() {
-      const requested = Number(this.getAttribute("months") ?? 1);
-      if (!Number.isInteger(requested) || requested < 1) return 1;
-      return Math.min(requested, 2);
+      const raw = this.getAttribute("months");
+      if (raw === null) return 1;
+      const requested = Number(raw);
+      if (!Number.isInteger(requested) || requested < 1) {
+        throw new Error(
+          `<kal-calendar> months="${raw}" must be a whole number of 1 or more.`
+        );
+      }
+      if (requested > _CalendarElement.MAX_MONTHS) {
+        throw new Error(
+          `<kal-calendar> months="${raw}" exceeds the maximum of ${_CalendarElement.MAX_MONTHS}.`
+        );
+      }
+      return requested;
+    }
+    boundaryYear(attr, fallback) {
+      const raw = this.getAttribute(attr);
+      if (raw === null || raw === "") return fallback;
+      const year = Number(raw);
+      if (!Number.isInteger(year)) {
+        throw new Error(
+          `<kal-calendar> ${attr}="${raw}" must be a whole number.`
+        );
+      }
+      return year;
     }
     get minYear() {
-      const val = this.getAttribute("min-year");
-      return val ? parseInt(val, 10) : (/* @__PURE__ */ new Date()).getFullYear() - 30;
+      return this.boundaryYear("min-year", (/* @__PURE__ */ new Date()).getFullYear() - 30);
     }
     get maxYear() {
-      const val = this.getAttribute("max-year");
-      return val ? parseInt(val, 10) : (/* @__PURE__ */ new Date()).getFullYear() + 10;
+      return this.boundaryYear("max-year", (/* @__PURE__ */ new Date()).getFullYear() + 10);
     }
     boundaryDate(attr) {
       const val = this.getAttribute(attr);
@@ -820,7 +842,7 @@ var Kalendly = (() => {
       });
     }
     reinit() {
-      if (!this.engine) return;
+      if (!this.isConnected) return;
       this.cleanup();
       this.initEngine();
       this.scheduleRender();
@@ -872,7 +894,8 @@ var Kalendly = (() => {
       ];
     }
     get updateComplete() {
-      return this.pendingUpdate ?? Promise.resolve();
+      if (this.pendingUpdate) return this.pendingUpdate;
+      return this._initError ? Promise.reject(this._initError) : Promise.resolve();
     }
     scheduleRender() {
       if (this.pendingUpdate) return;
@@ -880,8 +903,10 @@ var Kalendly = (() => {
         this.pendingUpdate = null;
         try {
           this.render();
+          this._initError = null;
         } catch (error) {
           this._initError = error;
+          this.renderError(error);
           throw error;
         }
       });
@@ -958,6 +983,7 @@ var Kalendly = (() => {
       }
       this.boundaryDate("min-date");
       this.boundaryDate("max-date");
+      void this.slotDuration;
       void this.availableDays;
       void this.availableHours;
       this.assertHorizonOrdered();
@@ -1002,72 +1028,72 @@ var Kalendly = (() => {
           return status ? labels[status] || status.toUpperCase() : "";
         };
         return `
-        <div class="event-card" style="border-left-color: ${borderColor}">
-          <div class="event-header">
-            ${event.name ? `<div class="event-title">${escapeHtml(event.name)}</div>` : ""}
-            <div class="event-badges">
-              ${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 class="kalendly-event-card" style="border-left-color: ${borderColor}">
+          <div class="kalendly-event-header">
+            ${event.name ? `<div class="kalendly-event-title">${escapeHtml(event.name)}</div>` : ""}
+            <div class="kalendly-event-badges">
+              ${event.category ? `<span class="kalendly-badge kalendly-category-${slugifyToken(event.category)}">${escapeHtml(getCategoryLabel(event.category))}</span>` : ""}
+              ${event.priority ? `<span class="kalendly-badge kalendly-priority-${slugifyToken(event.priority)}">${escapeHtml(getPriorityLabel(event.priority))}</span>` : ""}
+              ${event.status && event.status !== "scheduled" ? `<span class="kalendly-badge kalendly-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">${escapeHtml(timeRange)}</span>
+          <div class="kalendly-event-time">
+            <span class="kalendly-event-time-label">Time:</span>
+            <span class="kalendly-event-time-value">${escapeHtml(timeRange)}</span>
           </div>
           ` : ""}
 
           ${event.description ? `
-          <div class="event-description">${escapeHtml(event.description)}</div>
+          <div class="kalendly-event-description">${escapeHtml(event.description)}</div>
           ` : ""}
 
           ${event.location ? `
-          <div class="event-time">
-            <span class="event-time-label">Location:</span>
-            <span class="event-time-value">${escapeHtml(event.location)}</span>
+          <div class="kalendly-event-time">
+            <span class="kalendly-event-time-label">Location:</span>
+            <span class="kalendly-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">${escapeHtml(attendeesList)}</span>
+          <div class="kalendly-event-time">
+            <span class="kalendly-event-time-label">Attendees:</span>
+            <span class="kalendly-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">${escapeHtml(event.organizer)}</span>
+          <div class="kalendly-event-time">
+            <span class="kalendly-event-time-label">Organizer:</span>
+            <span class="kalendly-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">${escapeHtml(event.notes)}</span>
+          <div class="kalendly-event-time">
+            <span class="kalendly-event-time-label">Notes:</span>
+            <span class="kalendly-event-time-value">${escapeHtml(event.notes)}</span>
           </div>
           ` : ""}
 
           ${event.url ? `
-          <div class="event-time">
-            <a href="${escapeHtml(safeUrl(event.url))}" target="_blank" rel="noopener noreferrer" class="event-link">
+          <div class="kalendly-event-time">
+            <a href="${escapeHtml(safeUrl(event.url))}" target="_blank" rel="noopener noreferrer" class="kalendly-event-link">
               View Details \u2192
             </a>
           </div>
           ` : ""}
 
           ${event.tags && event.tags.length > 0 ? `
-          <div class="event-tags">
-            ${event.tags.map((tag) => `<span class="event-tag">${escapeHtml(tag)}</span>`).join("")}
+          <div class="kalendly-event-tags">
+            ${event.tags.map((tag) => `<span class="kalendly-event-tag">${escapeHtml(tag)}</span>`).join("")}
           </div>
           ` : ""}
         </div>
       `;
       };
-      const defaultRenderNoEvents = () => '<div class="no-events-message">No events scheduled for this day.</div>';
+      const defaultRenderNoEvents = () => '<div class="kalendly-no-events-message">No events scheduled for this day.</div>';
       const renderEvent = this._renderEvent || defaultRenderEvent;
       const renderNoEvents = this._renderNoEvents || defaultRenderNoEvents;
       const renderTimeGrid = (date) => {
@@ -1092,29 +1118,29 @@ var Kalendly = (() => {
           const isRangeEnd = inTimeRange && endTime === this._timeRangeEnd;
           const isInRange = inTimeRange && !isRangeStart && !isRangeEnd;
           const slotClasses = [
-            "time-grid-slot",
-            offered ? "" : "time-grid-slot-out-of-range",
-            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" : ""
+            "kalendly-time-grid-slot",
+            offered ? "" : "kalendly-time-grid-slot-out-of-range",
+            isBooked ? "kalendly-time-grid-slot-blocked" : "kalendly-time-grid-slot-open",
+            isRangeStart ? "kalendly-time-grid-slot-range-start" : "",
+            isRangeEnd ? "kalendly-time-grid-slot-range-end" : "",
+            isInRange ? "kalendly-time-grid-slot-in-range" : ""
           ].filter(Boolean).join(" ");
           const slotAttrs = `${offered ? 'data-action="select-slot" ' : ""}data-start-time="${startTime}" data-end-time="${endTime}" data-date="${date.toISOString()}" data-booked="${isBooked}"`;
           const status = !offered ? "Closed" : isBooked ? "Booked" : "Available";
           return `
           <div class="${slotClasses}" ${slotAttrs}>
-            <span class="time-grid-label">${startTime}</span>
-            <span class="time-grid-status">${status}</span>
+            <span class="kalendly-time-grid-label">${startTime}</span>
+            <span class="kalendly-time-grid-status">${status}</span>
           </div>`;
         });
-        const gridClasses = selectable ? "time-grid time-grid-selectable" : "time-grid";
+        const gridClasses = selectable ? "kalendly-time-grid kalendly-time-grid-selectable" : "kalendly-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">
+        <div class="kalendly-pane">
+          ${multiMonth ? `<div class="kalendly-pane-caption">${escapeHtml(pane.monthAndYearText)}</div>` : ""}
+            <table class="kalendly-table kalendly-table-bordered">
               <thead>
                 <tr>
                   ${viewModel.days.map((day) => `<th>${day.slice(0, 3)}</th>`).join("")}
@@ -1125,7 +1151,7 @@ var Kalendly = (() => {
         { length: 6 },
         () => `<tr>${Array.from(
           { length: 7 },
-          () => `<td class="calendar-skeleton" aria-hidden="true"></td>`
+          () => `<td class="kalendly-skeleton" aria-hidden="true"></td>`
         ).join("")}</tr>`
       ).join("") : pane.calendarDates.map(
         (week) => `
@@ -1137,7 +1163,7 @@ var Kalendly = (() => {
             calendarDate.date,
             viewModel.selectedDate
           )) {
-            classes.push("calendar-cell-selected");
+            classes.push("kalendly-cell-selected");
           }
           if (availabilityMode) {
             const bucket = this.resolveBucket(
@@ -1145,16 +1171,16 @@ var Kalendly = (() => {
             );
             const custom = (this._availabilityColors ?? {})[bucket];
             classes.push(
-              `availability-${slugifyToken(bucket)}`
+              `kalendly-availability-${slugifyToken(bucket)}`
             );
             if (custom) {
-              classes.push("availability-status");
+              classes.push("kalendly-availability-status");
               cellAttrs.push(
-                `style="--availability-color: ${escapeHtml(safeColor(custom))}"`
+                `style="--kalendly-availability-color: ${escapeHtml(safeColor(custom))}"`
               );
             }
             if (!this.isDateSelectable(calendarDate.date)) {
-              classes.push("availability-unselectable");
+              classes.push("kalendly-availability-unselectable");
             }
             cellAttrs.push(
               `aria-label="${escapeHtml(bucket)}"`
@@ -1163,12 +1189,12 @@ var Kalendly = (() => {
           if (availabilityMode === "day" && selectable) {
             const d = calendarDate.date;
             if (this._rangeStart && isSameDay2(d, this._rangeStart))
-              classes.push("availability-range-start");
+              classes.push("kalendly-availability-range-start");
             if (this._rangeEnd && isSameDay2(d, this._rangeEnd))
-              classes.push("availability-range-end");
+              classes.push("kalendly-availability-range-end");
             if (this._rangeStart && this._rangeEnd) {
               if (d > this._rangeStart && d < this._rangeEnd)
-                classes.push("availability-in-range");
+                classes.push("kalendly-availability-in-range");
             }
           }
           const dateString = calendarDate.date.toISOString();
@@ -1176,7 +1202,7 @@ var Kalendly = (() => {
             calendarDate.date
           );
           if (!offered) {
-            classes.push("calendar-cell-out-of-range");
+            classes.push("kalendly-cell-out-of-range");
           }
           return `
                             <td
@@ -1199,64 +1225,64 @@ var Kalendly = (() => {
       `;
       const html = `
       ${title ? `
-      <div class="calendar-title">
+      <div class="kalendly-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="kalendly-content">
+        <div class="kalendly-card">
+          <div class="kalendly-nav-header">
+            <button type="button" class="kalendly-nav-arrow" data-action="previous" aria-label="Previous month">
               &#8249;
             </button>
 
-            <div class="calendar-picker-container" data-picker-container>
+            <div class="kalendly-picker-container" data-picker-container>
               <button
                 type="button"
-                class="calendar-picker-btn"
+                class="kalendly-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="kalendly-picker-chevron">&#9662;</span>
               </button>
 
               ${this.pickerOpen ? `
-                <div class="calendar-picker-dropdown">
-                  <div class="calendar-picker-year-row">
+                <div class="kalendly-picker-dropdown">
+                  <div class="kalendly-picker-year-row">
                     <button
                       type="button"
-                      class="calendar-picker-year-arrow"
+                      class="kalendly-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" : ""}"
+                      class="kalendly-picker-year-input${!this.yearInputValid ? " kalendly-invalid" : ""}"
                       value="${escapeHtml(this.yearInput || viewModel.currentYear)}"
                       data-year-input
                       aria-label="Year"
                     />
                     <button
                       type="button"
-                      class="calendar-picker-year-arrow"
+                      class="kalendly-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="kalendly-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="kalendly-picker-month${isSelected ? " kalendly-selected" : ""}${isCurrent ? " kalendly-current-month" : ""}"
                           data-action="select-month"
                           data-month="${index}"
                         >${month}</button>
@@ -1269,34 +1295,34 @@ var Kalendly = (() => {
 
             <button
               type="button"
-              class="calendar-today-btn"
+              class="kalendly-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="kalendly-nav-arrow" data-action="next" aria-label="Next month">
               &#8250;
             </button>
           </div>
 
-          <div class="calendar-panes">
+          <div class="kalendly-panes">
             ${viewModel.panes.map(renderPane).join("")}
           </div>
 
           ${!isLoading && availabilityMode !== "day" && viewModel.selectedDate ? `
-            <div class="date-popup">
-              <div class="popup-header">
+            <div class="kalendly-popup">
+              <div class="kalendly-popup-header">
                 <h2>${viewModel.scheduleDay}</h2>
-                <button type="button" class="popup-close" data-action="close-popup" aria-label="Close">\u2715</button>
+                <button type="button" class="kalendly-popup-close" data-action="close-popup" aria-label="Close">\u2715</button>
               </div>
 
               ${showScrollHint ? `
-              <div class="scroll-hint">
+              <div class="kalendly-scroll-hint">
                 \u2193 Scroll to see more events \u2193
               </div>
               ` : ""}
 
-              <div class="events-container">
+              <div class="kalendly-events-container">
                 ${availabilityMode === "time" ? renderTimeGrid(viewModel.selectedDate) : viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
               </div>
             </div>
@@ -1512,7 +1538,7 @@ var Kalendly = (() => {
           this.yearInput = value;
           const year = parseInt(value, 10);
           this.yearInputValid = value === "" || year >= minYear && year <= maxYear;
-          target.classList.toggle("invalid", !this.yearInputValid);
+          target.classList.toggle("kalendly-invalid", !this.yearInputValid);
         }
       };
       this.delegatedBlurHandler = (e) => {
@@ -1524,7 +1550,7 @@ var Kalendly = (() => {
           this.yearInput = String(vm.currentYear);
           this.yearInputValid = true;
           target.value = this.yearInput;
-          target.classList.remove("invalid");
+          target.classList.remove("kalendly-invalid");
         } else if (year !== vm.currentYear) {
           this.dispatchMonthChange(year, vm.currentMonth);
           this.actions.jump(year, vm.currentMonth);
@@ -1547,7 +1573,7 @@ var Kalendly = (() => {
           this.render();
           return;
         }
-        const popup = this.querySelector(".date-popup");
+        const popup = this.querySelector(".kalendly-popup");
         if (popup) {
           this.engine.clearSelection();
         }
@@ -1617,72 +1643,71 @@ var Kalendly = (() => {
     "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",
-    outOfRangeBg: "--calendar-out-of-range-bg",
-    outOfRangeFg: "--calendar-out-of-range-fg",
-    navArrowFg: "--calendar-nav-arrow-fg",
-    navArrowBg: "--calendar-nav-arrow-bg",
-    navArrowBorder: "--calendar-nav-arrow-border",
-    navArrowHoverFg: "--calendar-nav-arrow-hover-fg",
-    navArrowHoverBg: "--calendar-nav-arrow-hover-bg",
-    inputInvalidBg: "--calendar-input-invalid-bg",
-    popupHeaderFg: "--calendar-popup-header-fg",
-    popupCloseFg: "--calendar-popup-close-fg",
-    popupCloseBg: "--calendar-popup-close-bg",
-    popupCloseHoverBg: "--calendar-popup-close-hover-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"
+    primary: "--kalendly-primary-color",
+    secondary: "--kalendly-secondary-color",
+    tertiary: "--kalendly-tertiary-color",
+    textColor: "--kalendly-text-color",
+    textLight: "--kalendly-text-light",
+    background: "--kalendly-background",
+    cellHover: "--kalendly-cell-hover",
+    borderColor: "--kalendly-border-color",
+    todayOutline: "--kalendly-today-outline",
+    selectedBg: "--kalendly-selected-bg",
+    outOfRangeBg: "--kalendly-out-of-range-bg",
+    outOfRangeFg: "--kalendly-out-of-range-fg",
+    navArrowFg: "--kalendly-nav-arrow-fg",
+    navArrowBg: "--kalendly-nav-arrow-bg",
+    navArrowBorder: "--kalendly-nav-arrow-border",
+    navArrowHoverFg: "--kalendly-nav-arrow-hover-fg",
+    navArrowHoverBg: "--kalendly-nav-arrow-hover-bg",
+    inputInvalidBg: "--kalendly-input-invalid-bg",
+    popupHeaderFg: "--kalendly-popup-header-fg",
+    popupCloseFg: "--kalendly-popup-close-fg",
+    popupCloseBg: "--kalendly-popup-close-bg",
+    popupCloseHoverBg: "--kalendly-popup-close-hover-bg",
+    headerBg: "--kalendly-header-bg",
+    popupBg: "--kalendly-popup-bg",
+    pickerBg: "--kalendly-picker-bg",
+    pickerShadow: "--kalendly-picker-shadow",
+    eventIndicator: "--kalendly-event-indicator",
+    onAccent: "--kalendly-on-accent",
+    link: "--kalendly-link",
+    openBg: "--kalendly-open-bg",
+    openFg: "--kalendly-open-fg",
+    conditionalBg: "--kalendly-conditional-bg",
+    conditionalFg: "--kalendly-conditional-fg",
+    blockedBg: "--kalendly-blocked-bg",
+    blockedFg: "--kalendly-blocked-fg",
+    rangeBg: "--kalendly-range-bg",
+    rangeOutline: "--kalendly-range-outline",
+    inRangeBg: "--kalendly-in-range-bg",
+    inRangeOutline: "--kalendly-in-range-outline",
+    badgeBg: "--kalendly-badge-bg",
+    badgeText: "--kalendly-badge-text",
+    badgeSuccessBg: "--kalendly-badge-success-bg",
+    badgeSuccessText: "--kalendly-badge-success-text",
+    badgeInfoBg: "--kalendly-badge-info-bg",
+    badgeInfoText: "--kalendly-badge-info-text",
+    badgeWarningBg: "--kalendly-badge-warning-bg",
+    badgeWarningText: "--kalendly-badge-warning-text",
+    badgeDangerBg: "--kalendly-badge-danger-bg",
+    badgeDangerText: "--kalendly-badge-danger-text",
+    badgeNeutralBg: "--kalendly-badge-neutral-bg",
+    badgeNeutralText: "--kalendly-badge-neutral-text",
+    badgePositiveBg: "--kalendly-badge-positive-bg",
+    badgePositiveText: "--kalendly-badge-positive-text",
+    badgeTentativeBg: "--kalendly-badge-tentative-bg",
+    badgeTentativeText: "--kalendly-badge-tentative-text"
   };
   _CalendarElement.warnedMissingEnd = /* @__PURE__ */ new Set();
+  _CalendarElement.MAX_MONTHS = 2;
   _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)) {