kalendly 0.3.3 → 0.3.5

package/dist/index.mjs

@@ -162,13 +162,13 @@ function generateCalendarDates(year, month, events = [], weekStartsOn = 0) {
 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;
 }
@@ -732,13 +732,25 @@ var init_CalendarElement = __esm({
       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();
@@ -746,7 +758,7 @@ var init_CalendarElement = __esm({
       }
       disconnectedCallback() {
         this.cleanup();
-        this.classList.remove("kalendly-calendar");
+        this.classList.remove("kalendly");
         this.innerHTML = "";
       }
       attributeChangedCallback(name, oldVal, newVal) {
@@ -763,19 +775,10 @@ var init_CalendarElement = __esm({
           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");
@@ -784,10 +787,9 @@ var init_CalendarElement = __esm({
         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) {
@@ -801,17 +803,37 @@ var init_CalendarElement = __esm({
         }
       }
       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);
@@ -869,7 +891,7 @@ var init_CalendarElement = __esm({
         });
       }
       reinit() {
-        if (!this.engine) return;
+        if (!this.isConnected) return;
         this.cleanup();
         this.initEngine();
         this.scheduleRender();
@@ -921,7 +943,8 @@ var init_CalendarElement = __esm({
         ];
       }
       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;
@@ -929,8 +952,10 @@ var init_CalendarElement = __esm({
           this.pendingUpdate = null;
           try {
             this.render();
+            this._initError = null;
           } catch (error) {
             this._initError = error;
+            this.renderError(error);
             throw error;
           }
         });
@@ -1007,6 +1032,7 @@ var init_CalendarElement = __esm({
         }
         this.boundaryDate("min-date");
         this.boundaryDate("max-date");
+        void this.slotDuration;
         void this.availableDays;
         void this.availableHours;
         this.assertHorizonOrdered();
@@ -1051,72 +1077,72 @@ var init_CalendarElement = __esm({
             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) => {
@@ -1141,29 +1167,29 @@ var init_CalendarElement = __esm({
             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("")}
@@ -1174,7 +1200,7 @@ var init_CalendarElement = __esm({
           { 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) => `
@@ -1186,7 +1212,7 @@ var init_CalendarElement = __esm({
               calendarDate.date,
               viewModel.selectedDate
             )) {
-              classes.push("calendar-cell-selected");
+              classes.push("kalendly-cell-selected");
             }
             if (availabilityMode) {
               const bucket = this.resolveBucket(
@@ -1194,16 +1220,16 @@ var init_CalendarElement = __esm({
               );
               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)}"`
@@ -1212,12 +1238,12 @@ var init_CalendarElement = __esm({
             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();
@@ -1225,7 +1251,7 @@ var init_CalendarElement = __esm({
               calendarDate.date
             );
             if (!offered) {
-              classes.push("calendar-cell-out-of-range");
+              classes.push("kalendly-cell-out-of-range");
             }
             return `
                             <td
@@ -1248,64 +1274,64 @@ var init_CalendarElement = __esm({
       `;
         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>
@@ -1318,34 +1344,34 @@ var init_CalendarElement = __esm({
 
             <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>
@@ -1561,7 +1587,7 @@ var init_CalendarElement = __esm({
             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) => {
@@ -1573,7 +1599,7 @@ var init_CalendarElement = __esm({
             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);
@@ -1596,7 +1622,7 @@ var init_CalendarElement = __esm({
             this.render();
             return;
           }
-          const popup = this.querySelector(".date-popup");
+          const popup = this.querySelector(".kalendly-popup");
           if (popup) {
             this.engine.clearSelection();
           }
@@ -1666,72 +1692,71 @@ var init_CalendarElement = __esm({
       "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;
     CalendarElement = _CalendarElement;
   }
 });