kalendly 0.1.7 → 0.2.1

package/dist/{vanilla/index.umd.js → index.umd.js}

@@ -18,34 +18,11 @@ var Kalendly = (() => {
   };
   var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-  // src/vanilla/index.ts
-  var index_exports = {};
-  __export(index_exports, {
-    CalendarEngine: () => CalendarEngine,
-    DAYS: () => DAYS,
-    DEFAULT_CATEGORY_COLORS: () => DEFAULT_CATEGORY_COLORS,
-    MONTHS: () => MONTHS,
-    MONTHS_FULL: () => MONTHS_FULL,
-    VanillaCalendar: () => VanillaCalendar,
-    createCalendar: () => createCalendar,
-    formatAttendees: () => formatAttendees,
-    formatDateForDisplay: () => formatDateForDisplay,
-    formatTimeRange: () => formatTimeRange,
-    generateCalendarDates: () => generateCalendarDates,
-    generateYears: () => generateYears,
-    getCategoryColor: () => getCategoryColor,
-    getCellClasses: () => getCellClasses,
-    getDefaultEventColor: () => getDefaultEventColor,
-    getEventsForDate: () => getEventsForDate,
-    getMonthYearText: () => getMonthYearText,
-    getPopupPositionClass: () => getPopupPositionClass,
-    hasEvents: () => hasEvents,
-    isSameDay: () => isSameDay,
-    isToday: () => isToday,
-    isValidHexColor: () => isValidHexColor,
-    mergeCategoryColors: () => mergeCategoryColors,
-    normalizeDate: () => normalizeDate,
-    sortEventsByTime: () => sortEventsByTime
+  // src/web-components/CalendarElement.ts
+  var CalendarElement_exports = {};
+  __export(CalendarElement_exports, {
+    CalendarElement: () => CalendarElement,
+    defineCalendarElement: () => defineCalendarElement
   });
 
   // src/core/utils.ts
@@ -108,9 +85,6 @@ var Kalendly = (() => {
       return eventDate.getTime() === normalizedTargetDate.getTime();
     });
   }
-  function hasEvents(events, date) {
-    return getEventsForDate(events, date).length > 0;
-  }
   function generateCalendarDates(year, month, events = [], weekStartsOn = 0) {
     const firstDay = new Date(year, month, 1);
     const lastDay = new Date(year, month + 1, 0);
@@ -212,16 +186,6 @@ var Kalendly = (() => {
     if (attendees.length === 2) return attendees.join(" and ");
     return `${attendees.slice(0, -1).join(", ")}, and ${attendees[attendees.length - 1]}`;
   }
-  function sortEventsByTime(events) {
-    return [...events].sort((a, b) => {
-      const aAllDay = a.allDay || !a.startTime && !a.endTime;
-      const bAllDay = b.allDay || !b.startTime && !b.endTime;
-      if (aAllDay && !bAllDay) return -1;
-      if (!aAllDay && bAllDay) return 1;
-      if (!a.startTime || !b.startTime) return 0;
-      return a.startTime.localeCompare(b.startTime);
-    });
-  }
   var DEFAULT_CATEGORY_COLORS = {
     work: "#3b82f6",
     personal: "#8b5cf6",
@@ -230,13 +194,6 @@ var Kalendly = (() => {
     appointment: "#f59e0b",
     other: "#6b7280"
   };
-  function getDefaultEventColor(category, customColors) {
-    const colorMap = customColors || DEFAULT_CATEGORY_COLORS;
-    if (category && colorMap[category]) {
-      return colorMap[category];
-    }
-    return "#fc8917";
-  }
   function mergeCategoryColors(customColors) {
     return {
       ...DEFAULT_CATEGORY_COLORS,
@@ -480,83 +437,204 @@ var Kalendly = (() => {
     }
   };
 
-  // src/vanilla/Calendar.ts
-  var VanillaCalendar = class {
-    constructor(props) {
+  // src/web-components/CalendarElement.ts
+  var isSameDay2 = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  var CalendarElement = class extends HTMLElement {
+    constructor() {
+      super(...arguments);
+      this.engine = null;
       this.unsubscribe = null;
+      this.actions = null;
       this.pickerOpen = false;
       this.yearInput = "";
       this.yearInputValid = true;
+      this.listenersAttached = false;
       this.clickOutsideHandler = null;
       this.delegatedClickHandler = null;
       this.delegatedInputHandler = null;
       this.delegatedBlurHandler = null;
       this.delegatedKeydownHandler = null;
-      this.listenersAttached = false;
-      this.props = props;
-      if (typeof props.container === "string") {
-        const element = document.querySelector(props.container);
-        if (!element) {
-          throw new Error(`Container element "${props.container}" not found`);
-        }
-        this.container = element;
-      } else {
-        this.container = props.container;
+      // Rich property backing fields
+      this._events = [];
+      this._theme = null;
+      this._categoryColors = null;
+      this._renderEvent = null;
+      this._renderNoEvents = null;
+      // Selection state (availability mode — range)
+      this._rangeStart = null;
+      this._rangeEnd = null;
+      this._timeRangeDate = null;
+      this._timeRangeStart = null;
+      this._timeRangeEnd = null;
+      this._timeRangeComplete = false;
+    }
+    get events() {
+      return this._events;
+    }
+    set events(val) {
+      this._events = val;
+      if (this.engine) {
+        this.engine.updateEvents(val);
       }
-      this.engine = new CalendarEngine({
-        events: props.events,
-        initialDate: props.initialDate,
-        minYear: props.minYear,
-        maxYear: props.maxYear,
-        weekStartsOn: props.weekStartsOn
-      });
-      this.actions = this.engine.getActions();
+    }
+    set theme(val) {
+      this._theme = val;
       this.applyTheme();
-      this.init();
     }
-    applyTheme() {
-      if (this.props.theme) {
-        const root = document.documentElement;
-        const theme = this.props.theme;
-        if (theme.primary)
-          root.style.setProperty("--calendar-primary-color", theme.primary);
-        if (theme.secondary)
-          root.style.setProperty("--calendar-secondary-color", theme.secondary);
-        if (theme.tertiary)
-          root.style.setProperty("--calendar-tertiary-color", theme.tertiary);
-        if (theme.textColor)
-          root.style.setProperty("--calendar-text-color", theme.textColor);
-        if (theme.textLight)
-          root.style.setProperty("--calendar-text-light", theme.textLight);
-        if (theme.background)
-          root.style.setProperty("--calendar-background", theme.background);
-        if (theme.cellHover)
-          root.style.setProperty("--calendar-cell-hover", theme.cellHover);
-        if (theme.borderColor)
-          root.style.setProperty("--calendar-border-color", theme.borderColor);
-        if (theme.todayOutline)
-          root.style.setProperty("--calendar-today-outline", theme.todayOutline);
-        if (theme.selectedBg)
-          root.style.setProperty("--calendar-selected-bg", theme.selectedBg);
-        if (theme.eventIndicator)
-          root.style.setProperty(
-            "--calendar-event-indicator",
-            theme.eventIndicator
-          );
+    set categoryColors(val) {
+      this._categoryColors = val;
+      if (this.engine) {
+        this.engine.updateCategoryColors(val);
       }
     }
-    init() {
-      this.container.classList.add("kalendly-calendar");
-      if (this.props.className) {
-        this.container.classList.add(this.props.className);
+    set renderEvent(val) {
+      this._renderEvent = val;
+      if (this.engine) this.render();
+    }
+    set renderNoEvents(val) {
+      this._renderNoEvents = val;
+      if (this.engine) this.render();
+    }
+    get loading() {
+      return this.hasAttribute("loading");
+    }
+    set loading(val) {
+      if (val) this.setAttribute("loading", "");
+      else this.removeAttribute("loading");
+    }
+    connectedCallback() {
+      this.classList.add("kalendly-calendar");
+      this.initEngine();
+      this.render();
+    }
+    disconnectedCallback() {
+      this.cleanup();
+      this.classList.remove("kalendly-calendar");
+      this.innerHTML = "";
+    }
+    attributeChangedCallback(name, oldVal, newVal) {
+      if (oldVal === newVal) return;
+      if (name === "loading") {
+        this.render();
+        return;
+      }
+      if (name === "selectable" && newVal === null) {
+        this._rangeStart = null;
+        this._rangeEnd = null;
+        this._timeRangeDate = null;
+        this._timeRangeStart = null;
+        this._timeRangeEnd = null;
+        this._timeRangeComplete = false;
       }
+      this.reinit();
+    }
+    get minYear() {
+      const val = this.getAttribute("min-year");
+      return val ? parseInt(val, 10) : (/* @__PURE__ */ new Date()).getFullYear() - 30;
+    }
+    get maxYear() {
+      const val = this.getAttribute("max-year");
+      return val ? parseInt(val, 10) : (/* @__PURE__ */ new Date()).getFullYear() + 10;
+    }
+    initEngine() {
+      const initialDateAttr = this.getAttribute("initial-date");
+      const initialDate = initialDateAttr ? new Date(initialDateAttr) : void 0;
+      const weekStartsOnAttr = this.getAttribute("week-starts-on");
+      const weekStartsOn = weekStartsOnAttr === "1" ? 1 : 0;
+      this.engine = new CalendarEngine({
+        events: this._events,
+        initialDate,
+        minYear: this.minYear,
+        maxYear: this.maxYear,
+        weekStartsOn,
+        categoryColors: this._categoryColors ?? void 0
+      });
+      this.actions = this.engine.getActions();
+      this.applyTheme();
       this.unsubscribe = this.engine.subscribe(() => {
         this.render();
       });
+    }
+    reinit() {
+      if (!this.engine) return;
+      this.cleanup();
+      this.initEngine();
       this.render();
     }
+    cleanup() {
+      if (this.unsubscribe) {
+        this.unsubscribe();
+        this.unsubscribe = null;
+      }
+      if (this.delegatedClickHandler) {
+        this.removeEventListener("click", this.delegatedClickHandler);
+        this.delegatedClickHandler = null;
+      }
+      if (this.delegatedInputHandler) {
+        this.removeEventListener("input", this.delegatedInputHandler);
+        this.delegatedInputHandler = null;
+      }
+      if (this.delegatedBlurHandler) {
+        this.removeEventListener("blur", this.delegatedBlurHandler, true);
+        this.delegatedBlurHandler = null;
+      }
+      if (this.delegatedKeydownHandler) {
+        this.removeEventListener("keydown", this.delegatedKeydownHandler);
+        this.delegatedKeydownHandler = null;
+      }
+      if (this.clickOutsideHandler) {
+        document.removeEventListener("click", this.clickOutsideHandler);
+        this.clickOutsideHandler = null;
+      }
+      this.listenersAttached = false;
+      if (this.engine) {
+        this.engine.destroy();
+        this.engine = null;
+      }
+      this.actions = null;
+    }
+    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);
+    }
     render() {
+      if (!this.engine) return;
       const viewModel = this.engine.getViewModel();
+      const useShortMonths = this.hasAttribute("use-short-month-names");
+      const title = this.getAttribute("title");
+      const minYear = this.minYear;
+      const maxYear = this.maxYear;
+      const availabilityMode = this.getAttribute("availability-mode");
+      const selectable = this.hasAttribute("selectable");
+      const isLoading = this.loading;
+      const today = /* @__PURE__ */ new Date();
+      const todayMonth = today.getMonth();
+      const todayYear = today.getFullYear();
+      const isCurrentMonth = viewModel.currentYear === todayYear && viewModel.currentMonth === todayMonth;
+      const showScrollHint = viewModel.tasks.length > 3;
       const defaultRenderEvent = (event) => {
         const timeRange = formatTimeRange(event);
         const attendeesList = formatAttendees(event.attendees);
@@ -602,46 +680,46 @@ var Kalendly = (() => {
               ${event.status && event.status !== "scheduled" ? `<span class="badge status-${event.status}">${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>
           </div>
           ` : ""}
-          
+
           ${event.description ? `
           <div class="event-description">${event.description}</div>
           ` : ""}
-          
+
           ${event.location ? `
           <div class="event-time">
             <span class="event-time-label">Location:</span>
             <span class="event-time-value">${event.location}</span>
           </div>
           ` : ""}
-          
+
           ${attendeesList ? `
           <div class="event-time">
             <span class="event-time-label">Attendees:</span>
             <span class="event-time-value">${attendeesList}</span>
           </div>
           ` : ""}
-          
+
           ${event.organizer ? `
           <div class="event-time">
             <span class="event-time-label">Organizer:</span>
             <span class="event-time-value">${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>
           </div>
           ` : ""}
-          
+
           ${event.url ? `
           <div class="event-time">
             <a href="${event.url}" target="_blank" rel="noopener noreferrer" class="event-link">
@@ -649,7 +727,7 @@ var Kalendly = (() => {
             </a>
           </div>
           ` : ""}
-          
+
           ${event.tags && event.tags.length > 0 ? `
           <div class="event-tags">
             ${event.tags.map((tag) => `<span class="event-tag">${tag}</span>`).join("")}
@@ -659,25 +737,48 @@ var Kalendly = (() => {
       `;
       };
       const defaultRenderNoEvents = () => '<div class="no-events-message">No events scheduled for this day.</div>';
-      const renderEvent = this.props.renderEvent || defaultRenderEvent;
-      const renderNoEvents = this.props.renderNoEvents || defaultRenderNoEvents;
-      const showScrollHint = viewModel.tasks.length > 3;
-      const today = /* @__PURE__ */ new Date();
-      const todayMonth = today.getMonth();
-      const todayYear = today.getFullYear();
-      const minYear = this.props.minYear ?? todayYear - 30;
-      const maxYear = this.props.maxYear ?? todayYear + 10;
-      const isCurrentMonth = viewModel.currentYear === todayYear && viewModel.currentMonth === todayMonth;
+      const renderEvent = this._renderEvent || defaultRenderEvent;
+      const renderNoEvents = this._renderNoEvents || defaultRenderNoEvents;
+      const renderTimeGrid = (events, date) => {
+        const isHourBooked = (hour) => events.some((event) => {
+          if (!event.startTime || !event.endTime) return true;
+          const [startH] = event.startTime.split(":").map(Number);
+          const [endH] = event.endTime.split(":").map(Number);
+          return hour >= startH && hour < endH;
+        });
+        const slots = Array.from({ length: 24 }, (_, hour) => {
+          const startTime = `${String(hour).padStart(2, "0")}:00`;
+          const endTime = `${String(hour + 1).padStart(2, "0")}:00`;
+          const booked = isHourBooked(hour);
+          const inTimeRange = !booked && selectable && this._timeRangeStart !== null && this._timeRangeEnd !== null && isSameDay2(this._timeRangeDate, date) && startTime >= this._timeRangeStart && endTime <= this._timeRangeEnd;
+          const isRangeStart = inTimeRange && startTime === this._timeRangeStart;
+          const isRangeEnd = inTimeRange && endTime === this._timeRangeEnd;
+          const isInRange = inTimeRange && !isRangeStart && !isRangeEnd;
+          const slotClasses = [
+            "time-grid__slot",
+            booked ? "time-grid__slot--booked" : "time-grid__slot--free",
+            isRangeStart ? "time-grid__slot--range-start" : "",
+            isRangeEnd ? "time-grid__slot--range-end" : "",
+            isInRange ? "time-grid__slot--in-range" : ""
+          ].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>
+          </div>`;
+        });
+        return `<div class="time-grid">${slots.join("")}</div>`;
+      };
       const html = `
-      ${this.props.title ? `
-        <div class="page--title">
-          <h1>${this.props.title}</h1>
-        </div>
+      ${title ? `
+      <div class="page--title">
+        <h1>${title}</h1>
+      </div>
       ` : ""}
 
       <div class="calendar--content">
         <div class="calendar--card">
-          <!-- Navigation Header -->
           <div class="calendar--nav-header">
             <button type="button" class="calendar--nav-arrow" data-action="previous" aria-label="Previous month">
               &#8249;
@@ -691,7 +792,7 @@ var Kalendly = (() => {
                 aria-expanded="${this.pickerOpen ? "true" : "false"}"
                 aria-haspopup="true"
               >
-                ${this.props.useShortMonthNames ? `${MONTHS[viewModel.currentMonth]} ${viewModel.currentYear}` : viewModel.monthAndYearText}
+                ${useShortMonths ? `${MONTHS[viewModel.currentMonth]} ${viewModel.currentYear}` : viewModel.monthAndYearText}
                 <span class="calendar--picker-chevron">&#9662;</span>
               </button>
 
@@ -722,7 +823,7 @@ var Kalendly = (() => {
                   </div>
 
                   <div class="calendar--picker-months">
-                    ${(this.props.useShortMonthNames ? MONTHS : MONTHS_FULL).map((month, index) => {
+                    ${(useShortMonths ? MONTHS : MONTHS_FULL).map((month, index) => {
         const isSelected = index === viewModel.currentMonth;
         const isCurrent = index === todayMonth && viewModel.currentYear === todayYear;
         return `
@@ -758,30 +859,52 @@ var Kalendly = (() => {
               </tr>
             </thead>
             <tbody data-calendar-body>
-              ${viewModel.calendarDates.map(
+              ${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) => {
+                    <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>
-                    `;
+                          <td
+                            class="${classes.join(" ")}"
+                            data-date="${dateString}"
+                            data-day-index="${dayIndex}"
+                            data-clickable="true"
+                          >
+                            ${calendarDate.date.getDate()}
+                          </td>
+                        `;
         }).join("")}
-                </tr>
-              `
+                    </tr>
+                  `
       ).join("")}
             </tbody>
           </table>
 
-          ${viewModel.selectedDate ? `
+          ${!isLoading && availabilityMode !== "day" && viewModel.selectedDate ? `
             <div class="date-popup ${viewModel.popupPositionClass}">
               <div class="popup-header">
                 <h2>${viewModel.scheduleDay}</h2>
@@ -795,26 +918,21 @@ var Kalendly = (() => {
               ` : ""}
 
               <div class="events-container">
-                ${viewModel.tasks.length > 0 ? `
-                  ${viewModel.tasks.map((event) => renderEvent(event)).join("")}
-                ` : renderNoEvents()}
+                ${availabilityMode === "time" ? renderTimeGrid(viewModel.tasks, viewModel.selectedDate) : viewModel.tasks.length > 0 ? viewModel.tasks.map((event) => renderEvent(event)).join("") : renderNoEvents()}
               </div>
             </div>
           ` : ""}
         </div>
       </div>
     `;
-      this.container.innerHTML = html;
+      this.innerHTML = html;
       this.attachEventListeners();
     }
     attachEventListeners() {
       if (this.listenersAttached) return;
       this.listenersAttached = true;
-      const today = /* @__PURE__ */ new Date();
-      const todayYear = today.getFullYear();
-      const todayMonth = today.getMonth();
-      const minYear = this.props.minYear ?? todayYear - 30;
-      const maxYear = this.props.maxYear ?? todayYear + 10;
+      const minYear = this.minYear;
+      const maxYear = this.maxYear;
       this.delegatedClickHandler = (e) => {
         const target = e.target;
         const cell = target.closest('td[data-clickable="true"]');
@@ -822,9 +940,66 @@ var Kalendly = (() => {
           e.stopPropagation();
           const date = new Date(cell.dataset.date);
           const dayIndex = parseInt(cell.dataset.dayIndex || "0");
+          const availMode = this.getAttribute("availability-mode");
+          const isSelectable = this.hasAttribute("selectable");
+          if (availMode === "day" && isSelectable) {
+            const isBooked = cell.classList.contains("availability--booked");
+            if (!isBooked) {
+              let startDate;
+              let endDate;
+              if (this._rangeEnd !== null) {
+                this._rangeStart = date;
+                this._rangeEnd = null;
+                startDate = date;
+                endDate = date;
+              } else if (this._rangeStart === null) {
+                this._rangeStart = date;
+                startDate = date;
+                endDate = date;
+              } else {
+                const [s, e2] = this._rangeStart <= date ? [this._rangeStart, date] : [date, this._rangeStart];
+                const cursor = new Date(s);
+                cursor.setDate(cursor.getDate() + 1);
+                let blocked = false;
+                while (cursor < e2) {
+                  if (this.engine.getEventsForDate(cursor).length > 0) {
+                    blocked = true;
+                    break;
+                  }
+                  cursor.setDate(cursor.getDate() + 1);
+                }
+                if (blocked) {
+                  this._rangeStart = date;
+                  this._rangeEnd = null;
+                } else {
+                  this._rangeStart = s;
+                  this._rangeEnd = e2;
+                }
+                startDate = this._rangeStart;
+                endDate = this._rangeEnd ?? this._rangeStart;
+              }
+              this.dispatchEvent(
+                new CustomEvent("cal-availability-select", {
+                  bubbles: true,
+                  composed: true,
+                  detail: { startDate, endDate }
+                })
+              );
+            }
+          }
+          if (availMode === "time") {
+            this._timeRangeDate = null;
+            this._timeRangeStart = null;
+            this._timeRangeEnd = null;
+            this._timeRangeComplete = false;
+          }
           this.engine.handleDateClick(date, dayIndex);
-          this.container.dispatchEvent(
-            new CustomEvent("dateSelect", { detail: { date, dayIndex } })
+          this.dispatchEvent(
+            new CustomEvent("cal-date-select", {
+              bubbles: true,
+              composed: true,
+              detail: { date, events: this.engine.getEventsForDate(date) }
+            })
           );
           return;
         }
@@ -833,23 +1008,29 @@ var Kalendly = (() => {
         const action = actionEl.dataset.action;
         e.stopPropagation();
         switch (action) {
-          case "previous":
+          case "previous": {
+            const vm = this.engine.getViewModel();
+            const tMonth = vm.currentMonth === 0 ? 11 : vm.currentMonth - 1;
+            const tYear = vm.currentMonth === 0 ? vm.currentYear - 1 : vm.currentYear;
+            this.dispatchMonthChange(tYear, tMonth);
             this.actions.previous();
-            this.dispatchMonthChange();
             break;
-          case "next":
+          }
+          case "next": {
+            const vm = this.engine.getViewModel();
+            const tMonth = vm.currentMonth === 11 ? 0 : vm.currentMonth + 1;
+            const tYear = vm.currentMonth === 11 ? vm.currentYear + 1 : vm.currentYear;
+            this.dispatchMonthChange(tYear, tMonth);
             this.actions.next();
-            this.dispatchMonthChange();
             break;
-          case "today":
+          }
+          case "today": {
+            const t = /* @__PURE__ */ new Date();
+            this.dispatchMonthChange(t.getFullYear(), t.getMonth());
             this.actions.goToToday();
             this.pickerOpen = false;
-            this.container.dispatchEvent(
-              new CustomEvent("monthChange", {
-                detail: { year: todayYear, month: todayMonth }
-              })
-            );
             break;
+          }
           case "toggle-picker":
             this.pickerOpen = !this.pickerOpen;
             if (this.pickerOpen) {
@@ -864,8 +1045,8 @@ var Kalendly = (() => {
               const newYear = vm.currentYear - 1;
               this.yearInput = String(newYear);
               this.updatePickerYear(newYear);
+              this.dispatchMonthChange(newYear, vm.currentMonth);
               this.actions.jump(newYear, vm.currentMonth);
-              this.dispatchMonthChange();
             }
             break;
           }
@@ -875,21 +1056,60 @@ var Kalendly = (() => {
               const newYear = vm.currentYear + 1;
               this.yearInput = String(newYear);
               this.updatePickerYear(newYear);
+              this.dispatchMonthChange(newYear, vm.currentMonth);
               this.actions.jump(newYear, vm.currentMonth);
-              this.dispatchMonthChange();
             }
             break;
           }
           case "select-month": {
             const month = parseInt(actionEl.dataset.month || "0", 10);
-            this.actions.jump(this.engine.getViewModel().currentYear, month);
+            const year = this.engine.getViewModel().currentYear;
+            this.dispatchMonthChange(year, month);
+            this.actions.jump(year, month);
             this.pickerOpen = false;
-            this.dispatchMonthChange();
             break;
           }
           case "close-popup":
+            this._timeRangeDate = null;
+            this._timeRangeStart = null;
+            this._timeRangeEnd = null;
+            this._timeRangeComplete = false;
             this.engine.clearSelection();
             break;
+          case "select-slot": {
+            const slotStart = actionEl.dataset.startTime;
+            const slotEnd = actionEl.dataset.endTime;
+            const slotDate = new Date(actionEl.dataset.date);
+            if (this._timeRangeComplete) {
+              this._timeRangeDate = slotDate;
+              this._timeRangeStart = slotStart;
+              this._timeRangeEnd = slotEnd;
+              this._timeRangeComplete = false;
+            } else if (this._timeRangeStart === null) {
+              this._timeRangeDate = slotDate;
+              this._timeRangeStart = slotStart;
+              this._timeRangeEnd = slotEnd;
+            } else {
+              const newStart = slotStart < this._timeRangeStart ? slotStart : this._timeRangeStart;
+              const newEnd = slotEnd > this._timeRangeEnd ? slotEnd : this._timeRangeEnd;
+              this._timeRangeStart = newStart;
+              this._timeRangeEnd = newEnd;
+              this._timeRangeComplete = true;
+            }
+            this.render();
+            this.dispatchEvent(
+              new CustomEvent("cal-availability-select", {
+                bubbles: true,
+                composed: true,
+                detail: {
+                  date: this._timeRangeDate,
+                  startTime: this._timeRangeStart,
+                  endTime: this._timeRangeEnd
+                }
+              })
+            );
+            break;
+          }
         }
       };
       this.delegatedInputHandler = (e) => {
@@ -914,125 +1134,99 @@ var Kalendly = (() => {
           target.value = this.yearInput;
           target.classList.remove("invalid");
         } else if (year !== vm.currentYear) {
+          this.dispatchMonthChange(year, vm.currentMonth);
           this.actions.jump(year, vm.currentMonth);
-          this.dispatchMonthChange();
         }
       };
       this.delegatedKeydownHandler = (e) => {
         const target = e.target;
         if (!target.matches("[data-year-input]")) return;
-        if (e.key === "Enter") {
-          target.blur();
-        }
+        if (e.key === "Enter") target.blur();
       };
-      this.container.addEventListener("click", this.delegatedClickHandler);
-      this.container.addEventListener("input", this.delegatedInputHandler);
-      this.container.addEventListener("blur", this.delegatedBlurHandler, true);
-      this.container.addEventListener("keydown", this.delegatedKeydownHandler);
+      this.addEventListener("click", this.delegatedClickHandler);
+      this.addEventListener("input", this.delegatedInputHandler);
+      this.addEventListener("blur", this.delegatedBlurHandler, true);
+      this.addEventListener("keydown", this.delegatedKeydownHandler);
       this.clickOutsideHandler = (e) => {
         const target = e.target;
-        if (this.container.contains(target)) return;
+        if (this.contains(target)) return;
         if (this.pickerOpen) {
           this.pickerOpen = false;
           this.render();
           return;
         }
-        const popup = this.container.querySelector(".date-popup");
+        const popup = this.querySelector(".date-popup");
         if (popup) {
           this.engine.clearSelection();
         }
       };
       document.addEventListener("click", this.clickOutsideHandler);
     }
-    // Targeted update for picker year - avoids full DOM rebuild
     updatePickerYear(year) {
-      const input = this.container.querySelector(
-        "[data-year-input]"
-      );
-      if (input) {
-        input.value = String(year);
-      }
-      const today = /* @__PURE__ */ new Date();
-      const todayYear = today.getFullYear();
-      const minYear = this.props.minYear ?? todayYear - 30;
-      const maxYear = this.props.maxYear ?? todayYear + 10;
-      const prevBtn = this.container.querySelector(
+      const input = this.querySelector("[data-year-input]");
+      if (input) input.value = String(year);
+      const prevBtn = this.querySelector(
         '[data-action="year-prev"]'
       );
-      const nextBtn = this.container.querySelector(
+      const nextBtn = this.querySelector(
         '[data-action="year-next"]'
       );
-      if (prevBtn) prevBtn.disabled = year <= minYear;
-      if (nextBtn) nextBtn.disabled = year >= maxYear;
+      if (prevBtn) prevBtn.disabled = year <= this.minYear;
+      if (nextBtn) nextBtn.disabled = year >= this.maxYear;
     }
-    dispatchMonthChange() {
+    dispatchMonthChange(year, month) {
+      if (!this.engine) return;
       const vm = this.engine.getViewModel();
-      this.container.dispatchEvent(
-        new CustomEvent("monthChange", {
-          detail: { year: vm.currentYear, month: vm.currentMonth }
+      this.dispatchEvent(
+        new CustomEvent("cal-month-change", {
+          bubbles: true,
+          composed: true,
+          detail: {
+            year: year ?? vm.currentYear,
+            month: month ?? vm.currentMonth
+          }
         })
       );
     }
+    // Public API
     updateEvents(events) {
-      this.engine.updateEvents(events);
+      this.events = events;
     }
     updateTheme(theme) {
-      this.props.theme = theme;
-      this.applyTheme();
+      this.theme = theme;
     }
     getCurrentDate() {
-      return this.engine.getViewModel().selectedDate;
+      return this.engine?.getViewModel().selectedDate ?? null;
     }
     goToDate(date) {
-      this.actions.jump(date.getFullYear(), date.getMonth());
+      const year = date.getFullYear();
+      const month = date.getMonth();
+      this.dispatchMonthChange(year, month);
+      this.actions?.jump(year, month);
     }
     getEngine() {
+      if (!this.engine)
+        throw new Error("CalendarElement is not connected to the DOM");
       return this.engine;
     }
-    destroy() {
-      if (this.unsubscribe) {
-        this.unsubscribe();
-        this.unsubscribe = null;
-      }
-      if (this.delegatedClickHandler) {
-        this.container.removeEventListener("click", this.delegatedClickHandler);
-        this.delegatedClickHandler = null;
-      }
-      if (this.delegatedInputHandler) {
-        this.container.removeEventListener("input", this.delegatedInputHandler);
-        this.delegatedInputHandler = null;
-      }
-      if (this.delegatedBlurHandler) {
-        this.container.removeEventListener(
-          "blur",
-          this.delegatedBlurHandler,
-          true
-        );
-        this.delegatedBlurHandler = null;
-      }
-      if (this.delegatedKeydownHandler) {
-        this.container.removeEventListener(
-          "keydown",
-          this.delegatedKeydownHandler
-        );
-        this.delegatedKeydownHandler = null;
-      }
-      if (this.clickOutsideHandler) {
-        document.removeEventListener("click", this.clickOutsideHandler);
-        this.clickOutsideHandler = null;
-      }
-      this.listenersAttached = false;
-      this.engine.destroy();
-      this.container.innerHTML = "";
-      this.container.classList.remove("kalendly-calendar");
-      if (this.props.className) {
-        this.container.classList.remove(this.props.className);
-      }
-    }
   };
-  function createCalendar(props) {
-    return new VanillaCalendar(props);
+  CalendarElement.observedAttributes = [
+    "initial-date",
+    "min-year",
+    "max-year",
+    "week-starts-on",
+    "title",
+    "use-short-month-names",
+    "availability-mode",
+    "selectable",
+    "loading"
+  ];
+  function defineCalendarElement(tagName = "kal-calendar") {
+    if (typeof customElements !== "undefined" && !customElements.get(tagName)) {
+      customElements.define(tagName, CalendarElement);
+    }
   }
-  return __toCommonJS(index_exports);
+  return __toCommonJS(CalendarElement_exports);
 })();
+if (typeof customElements !== 'undefined' && !customElements.get('kal-calendar')) { customElements.define('kal-calendar', Kalendly.CalendarElement); }
 //# sourceMappingURL=index.umd.js.map