@uplynk/lynk-design 1.18.1 → 1.19.0

package/dist/chunks/chunk.BH7VVSMP.js

@@ -1,831 +0,0 @@
-import {
-  Locale,
-  addUnit,
-  getDaysInMonth,
-  isAfter,
-  isBefore,
-  isToday,
-  toSegment,
-  utcFormat,
-  utcParse
-} from "./chunk.E4AXJBLQ.js";
-import {
-  calendar_styles_default
-} from "./chunk.7E7CGYTS.js";
-import {
-  LynkElement
-} from "./chunk.K4BFCDFI.js";
-import {
-  component_styles_default
-} from "./chunk.Y7724W4D.js";
-import {
-  __decorateClass
-} from "./chunk.Q44EX5TP.js";
-
-// src/components/calendar/calendar.component.ts
-import { html, nothing } from "lit";
-import { property, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
-import { repeat } from "lit/directives/repeat.js";
-var LynkCalendar = class extends LynkElement {
-  constructor() {
-    super();
-    this.currentDate = /* @__PURE__ */ new Date();
-    this.focusedDate = null;
-    this.hoverDate = null;
-    this.viewMode = "calendar";
-    this.type = "date";
-    this._value = "";
-    this.months = 1;
-    this.showOutsideDays = false;
-    this.showWeekNumbers = false;
-    this.disableNavigation = false;
-    this.firstDayOfWeek = 1;
-    this.readonly = false;
-    this.weekNumberFormatter = (weekNumber) => `${weekNumber}`;
-    this.captionLayout = "none";
-    try {
-      this.localeFormatter = Locale.fromOptions({ weekday: "short" }, this.locale || navigator.language);
-    } catch (e) {
-      this.localeFormatter = Locale.fromOptions({ weekday: "short" }, "en-US");
-    }
-  }
-  get value() {
-    return this._value;
-  }
-  set value(val) {
-    const oldValue = this._value;
-    this._value = val;
-    this.requestUpdate("value", oldValue);
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    if (changedProperties.has("value") || changedProperties.has("type")) {
-      let newFocusedDate = null;
-      let newCurrentDate = null;
-      if (this.value) {
-        let parsedValueDate;
-        if (this.type === "range") {
-          const [start] = this.value.split("/");
-          parsedValueDate = start ? utcParse(start) : null;
-        } else if (this.type === "multi") {
-          const [firstDate] = this.value.split(/[, ]+/).filter(Boolean);
-          parsedValueDate = firstDate ? utcParse(firstDate) : null;
-        } else {
-          parsedValueDate = utcParse(this.value);
-        }
-        if (parsedValueDate && !Number.isNaN(parsedValueDate.getTime())) {
-          newFocusedDate = parsedValueDate;
-          newCurrentDate = utcParse({
-            year: parsedValueDate.getUTCFullYear(),
-            month: parsedValueDate.getUTCMonth(),
-            day: 1
-          });
-        }
-      }
-      if (newCurrentDate && (newCurrentDate.getUTCFullYear() !== this.currentDate.getUTCFullYear() || newCurrentDate.getUTCMonth() !== this.currentDate.getUTCMonth())) {
-        this.currentDate = newCurrentDate;
-      } else if (!newCurrentDate && this.value === "") {
-      }
-      this.focusedDate = newFocusedDate || utcParse({ year: this.currentDate.getUTCFullYear(), month: this.currentDate.getUTCMonth(), day: 1 });
-    }
-    if (changedProperties.has("locale")) {
-      try {
-        this.localeFormatter = Locale.fromOptions({ weekday: "short" }, this.locale || navigator.language);
-      } catch (e) {
-        this.localeFormatter = Locale.fromOptions({ weekday: "short" }, "en-US");
-      }
-      this.requestUpdate();
-    }
-  }
-  /**
-   * Gets the localized month names based on the current locale
-   * @returns Array of month names in the current locale
-   */
-  get localizedMonthNames() {
-    try {
-      const monthFormatter = Locale.fromOptions({ month: "long" }, this.locale || navigator.language);
-      return monthFormatter.monthNames.map((month) => month.name.charAt(0).toUpperCase() + month.name.slice(1));
-    } catch (e) {
-      const monthFormatter = Locale.fromOptions({ month: "long" }, "en-US");
-      return monthFormatter.monthNames.map((month) => month.name.charAt(0).toUpperCase() + month.name.slice(1));
-    }
-  }
-  /**
-   * Gets the localized weekday names based on the current locale and first day of week
-   * @returns Array of weekday names in the current locale
-   */
-  get localizedWeekDays() {
-    const weekdays = this.localeFormatter.weekdayNames;
-    const firstDay = this.firstDayOfWeek;
-    return [...weekdays.slice(firstDay), ...weekdays.slice(0, firstDay)].map(
-      (day) => day.name.charAt(0).toUpperCase() + day.name.slice(1)
-    );
-  }
-  /**
-   * Gets the weekdays for the calendar
-   * @returns Array of weekday names
-   */
-  getWeekDays() {
-    return this.localizedWeekDays;
-  }
-  /**
-   * Gets all days for a given month, including padding days if showOutsideDays is true
-   * @param year - The year to get days for
-   * @param month - The month to get days for (0-11)
-   * @returns Array of dates or null for padding days
-   */
-  getMonthDays(year, month) {
-    const daysInMonth = getDaysInMonth(year, month);
-    const firstDay = utcParse({ year, month, day: 1 });
-    const lastDay = utcParse({ year, month, day: daysInMonth });
-    const firstDayOfWeek = this.firstDayOfWeek;
-    const firstDayOfMonth = firstDay.getUTCDay();
-    const offset = (firstDayOfMonth - firstDayOfWeek + 7) % 7;
-    const lastDayOfWeek = (lastDay.getUTCDay() - firstDayOfWeek + 7) % 7;
-    const days = [];
-    if (this.showOutsideDays) {
-      const prevMonth = month === 0 ? 11 : month - 1;
-      const prevMonthYear = month === 0 ? year - 1 : year;
-      const prevMonthDays = getDaysInMonth(prevMonthYear, prevMonth);
-      for (let i = offset - 1; i >= 0; i--) {
-        days.push(utcParse({ year: prevMonthYear, month: prevMonth, day: prevMonthDays - i }));
-      }
-    } else {
-      for (let i = 0; i < offset; i++) {
-        days.push(null);
-      }
-    }
-    for (let i = 1; i <= daysInMonth; i++) {
-      days.push(utcParse({ year, month, day: i }));
-    }
-    if (this.showOutsideDays) {
-      const nextMonth = month === 11 ? 0 : month + 1;
-      const nextMonthYear = month === 11 ? year + 1 : year;
-      for (let i = 1; i <= 6 - lastDayOfWeek; i++) {
-        days.push(utcParse({ year: nextMonthYear, month: nextMonth, day: i }));
-      }
-    } else {
-      for (let i = 0; i < 6 - lastDayOfWeek; i++) {
-        days.push(null);
-      }
-    }
-    return days;
-  }
-  /**
-   * Calculates the week number for a given date
-   * @param date - The date to calculate the week number for
-   * @returns The week number (1-53)
-   */
-  getWeekNumber(date) {
-    const segment = toSegment(date);
-    const firstDayOfYear = utcParse({ year: segment.year, month: 0, day: 1 });
-    const pastDaysOfYear = (date.getTime() - firstDayOfYear.getTime()) / 864e5;
-    return Math.ceil((pastDaysOfYear + firstDayOfYear.getUTCDay() + 1) / 7);
-  }
-  /**
-   * Checks if a date should be disabled based on min, max, readonly, and isDateDisallowed
-   * @param date - The date to check
-   * @returns True if the date should be disabled
-   */
-  isDateDisabled(date) {
-    var _a;
-    if (this.readonly) return true;
-    if (this.min && date < new Date(this.min)) return true;
-    if (this.max && date > new Date(this.max)) return true;
-    if ((_a = this.isDateDisallowed) == null ? void 0 : _a.call(this, date)) return true;
-    return false;
-  }
-  isDateOutsideMonth(date, month) {
-    return date.getUTCMonth() !== month;
-  }
-  isDateToday(date) {
-    return isToday(utcFormat(date));
-  }
-  isSameDay(a, b) {
-    if (Number.isNaN(a.getTime()) || Number.isNaN(b.getTime())) return false;
-    return utcFormat(a) === utcFormat(b);
-  }
-  isDateSelected(date) {
-    switch (this.type) {
-      case "date": {
-        if (!this.value) return false;
-        const selected = utcParse(this.value);
-        if (Number.isNaN(selected.getTime())) return false;
-        return this.isSameDay(date, selected);
-      }
-      case "multi": {
-        if (!this.value) return false;
-        const selectedDates = this.value.split(/[, ]+/).filter(Boolean).map((d) => utcParse(d));
-        return selectedDates.some((selected) => !Number.isNaN(selected.getTime()) && this.isSameDay(date, selected));
-      }
-      case "range": {
-        const start = this.startDate;
-        const end = this.endDate;
-        if (!start || !end) return false;
-        const dateStr = utcFormat(date);
-        return !isAfter(dateStr, utcFormat(end)) && !isBefore(dateStr, utcFormat(start));
-      }
-      default:
-        return false;
-    }
-  }
-  get startDate() {
-    if (this.type !== "range" || !this.value) return null;
-    const [start] = this.value.split("/");
-    return start ? utcParse(start) : null;
-  }
-  get endDate() {
-    if (this.type !== "range" || !this.value) return null;
-    const [, end] = this.value.split("/");
-    return end ? utcParse(end) : null;
-  }
-  /**
-   * Checks if a date is the start of a range selection
-   * @param date - The date to check
-   * @returns True if the date is the start of a range
-   */
-  isRangeStart(date) {
-    if (this.type !== "range") return false;
-    if (this.startDate && !this.endDate && this.hoverDate) {
-      const effectiveStart = this.startDate < this.hoverDate ? this.startDate : this.hoverDate;
-      return this.isSameDay(date, effectiveStart);
-    }
-    const start = this.startDate;
-    if (!start) return false;
-    return this.isSameDay(date, start);
-  }
-  /**
-   * Checks if a date is the end of a range selection
-   * @param date - The date to check
-   * @returns True if the date is the end of a range
-   */
-  isRangeEnd(date) {
-    if (this.type !== "range") return false;
-    if (this.startDate && !this.endDate && this.hoverDate) {
-      const effectiveEnd = this.startDate > this.hoverDate ? this.startDate : this.hoverDate;
-      return this.isSameDay(date, effectiveEnd);
-    }
-    const end = this.endDate || this.hoverDate;
-    if (!end) return false;
-    return this.isSameDay(date, end);
-  }
-  /**
-   * Checks if a date is within a selected range (including hover preview)
-   * @param date - The date to check
-   * @returns True if the date is within the range
-   */
-  isDateInRange(date) {
-    if (this.type !== "range") return false;
-    let start = this.startDate;
-    let end = this.endDate;
-    if (start && !end && this.hoverDate) {
-      const provisionalStart = start < this.hoverDate ? start : this.hoverDate;
-      const provisionalEnd = start > this.hoverDate ? start : this.hoverDate;
-      start = provisionalStart;
-      end = provisionalEnd;
-    }
-    if (!start || !end) return false;
-    const dateStr = utcFormat(date);
-    const startStr = utcFormat(start);
-    const endStr = utcFormat(end);
-    return dateStr > startStr && dateStr < endStr;
-  }
-  /**
-   * Handles mouse hover over a date for range selection
-   */
-  handleDateHover(date) {
-    if (this.type !== "range" || !this.startDate || this.endDate) return;
-    this.hoverDate = date;
-  }
-  /**
-   * Handles mouse leave from a date for range selection
-   */
-  handleDateLeave() {
-    if (this.type !== "range") return;
-    this.hoverDate = null;
-  }
-  /**
-   * Handles keyboard navigation for date selection
-   * @param e - The keyboard event
-   * @param date - The current focused date (the one with tabindex=0)
-   */
-  async handleKeyDown(e, date) {
-    var _a;
-    let newDate;
-    const dateStr = utcFormat(date);
-    switch (e.key) {
-      case "ArrowRight":
-        newDate = utcParse(addUnit(dateStr, "day", 1));
-        break;
-      case "ArrowLeft":
-        newDate = utcParse(addUnit(dateStr, "day", -1));
-        break;
-      case "ArrowDown":
-        newDate = utcParse(addUnit(dateStr, "day", 7));
-        break;
-      case "ArrowUp":
-        newDate = utcParse(addUnit(dateStr, "day", -7));
-        break;
-      case "PageUp":
-        newDate = utcParse(addUnit(dateStr, e.shiftKey ? "year" : "month", -1));
-        break;
-      case "PageDown":
-        newDate = utcParse(addUnit(dateStr, e.shiftKey ? "year" : "month", 1));
-        break;
-      case "Home":
-        newDate = utcParse({ year: this.currentDate.getUTCFullYear(), month: this.currentDate.getUTCMonth(), day: 1 });
-        break;
-      case "End":
-        newDate = utcParse({
-          year: this.currentDate.getUTCFullYear(),
-          month: this.currentDate.getUTCMonth() + this.months,
-          day: 0
-        });
-        break;
-      case "Enter":
-      case " ":
-        if (!this.readonly && !this.isDateDisabled(date)) {
-          this.handleDateClick(date);
-        }
-        e.preventDefault();
-        return;
-      default:
-        return;
-    }
-    const cleanedNewDate = new Date(newDate.getUTCFullYear(), newDate.getUTCMonth(), newDate.getUTCDate());
-    if (!this.isDateDisabled(cleanedNewDate)) {
-      this.focusedDate = cleanedNewDate;
-      if (this.type === "range" && this.startDate && !this.endDate) {
-        this.hoverDate = cleanedNewDate;
-      }
-      const firstDisplayedMonthStart = utcParse({
-        year: this.currentDate.getUTCFullYear(),
-        month: this.currentDate.getUTCMonth(),
-        day: 1
-      });
-      const lastDisplayedMonthEnd = utcParse({
-        year: this.currentDate.getUTCFullYear(),
-        month: this.currentDate.getUTCMonth() + this.months,
-        day: 0
-      });
-      const isNewDateBeforeFirstDisplayed = cleanedNewDate < firstDisplayedMonthStart;
-      const isNewDateAfterLastDisplayed = cleanedNewDate > lastDisplayedMonthEnd;
-      if (isNewDateBeforeFirstDisplayed || isNewDateAfterLastDisplayed) {
-        this.currentDate = utcParse({
-          year: cleanedNewDate.getUTCFullYear(),
-          month: cleanedNewDate.getUTCMonth(),
-          day: 1
-        });
-      }
-    }
-    this.requestUpdate();
-    await this.updateComplete;
-    const newlyFocusedButton = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector('button[tabindex="0"]');
-    if (newlyFocusedButton) {
-      newlyFocusedButton.focus();
-    }
-    e.preventDefault();
-  }
-  /**
-   * Handles date selection based on the calendar type
-   * @param date - The selected date
-   */
-  handleDateClick(date) {
-    if (this.isDateDisabled(date)) return;
-    this.focusedDate = new Date(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
-    switch (this.type) {
-      case "date": {
-        this.value = utcFormat(date);
-        break;
-      }
-      case "multi": {
-        const iso = utcFormat(date);
-        const selectedDates = this.value.split(/[, ]+/).filter(Boolean);
-        const index = selectedDates.indexOf(iso);
-        if (index > -1) {
-          selectedDates.splice(index, 1);
-        } else {
-          selectedDates.push(iso);
-        }
-        this.value = selectedDates.join(" ");
-        break;
-      }
-      case "range": {
-        const iso = utcFormat(date);
-        const start = this.startDate;
-        const end = this.endDate;
-        if (!start || start && end) {
-          this.value = `${iso}/`;
-          this.hoverDate = null;
-        } else if (start && !end) {
-          if (isBefore(iso, utcFormat(start))) {
-            this.value = `${iso}/${utcFormat(start)}`;
-          } else {
-            this.value = `${utcFormat(start)}/${iso}`;
-          }
-          this.hoverDate = null;
-        }
-        break;
-      }
-    }
-    this.requestUpdate();
-    this.emit("ev-change");
-  }
-  /**
-   * Navigates to the previous month(s)
-   */
-  handlePreviousMonth() {
-    if (this.disableNavigation) return;
-    const currentDateStr = utcFormat(this.currentDate);
-    const newCurrentDate = utcParse(addUnit(currentDateStr, "month", -this.months));
-    this.currentDate = newCurrentDate;
-    this.focusedDate = utcParse({ year: newCurrentDate.getUTCFullYear(), month: newCurrentDate.getUTCMonth(), day: 1 });
-  }
-  /**
-   * Navigates to the next month(s)
-   */
-  handleNextMonth() {
-    if (this.disableNavigation) return;
-    const currentDateStr = utcFormat(this.currentDate);
-    const newCurrentDate = utcParse(addUnit(currentDateStr, "month", this.months));
-    this.currentDate = newCurrentDate;
-    this.focusedDate = utcParse({ year: newCurrentDate.getUTCFullYear(), month: newCurrentDate.getUTCMonth(), day: 1 });
-  }
-  /**
-   * Renders a single month view
-   * @param year - The year to render
-   * @param month - The month to render (0-11)
-   * @returns The rendered month template
-   */
-  renderMonth(year, month) {
-    const days = this.getMonthDays(year, month);
-    const weekDays = this.localizedWeekDays;
-    const weeks = [];
-    let currentWeek = [];
-    days.forEach((date) => {
-      currentWeek.push(date);
-      if (currentWeek.length === 7) {
-        weeks.push(currentWeek);
-        currentWeek = [];
-      }
-    });
-    if (currentWeek.length > 0) {
-      weeks.push(currentWeek);
-    }
-    return html`
-      <div class="calendar-month">
-        <div class="calendar-grid">
-          <table class="calendar-table">
-            <thead>
-              <tr>
-                ${this.showWeekNumbers ? html`<th class="weeknumber" part="weeknumber-header"></th>` : nothing}
-                ${repeat(
-      weekDays,
-      (day) => day,
-      (day) => html`<th part="weekday">${day}</th>`
-    )}
-              </tr>
-            </thead>
-            <tbody>
-              ${repeat(
-      weeks,
-      (week) => week[0] ? utcFormat(week[0]) : String(Math.random()),
-      (week) => {
-        var _a;
-        return html`
-                  <tr>
-                    ${this.showWeekNumbers ? html`
-                            <td class="weeknumber" part="weeknumber">
-                              ${((_a = week.find((d) => d)) == null ? void 0 : _a.getUTCDate()) ? (
-          /* biome-ignore lint/style/noNonNullAssertion: We know that at least one date exists in the week */
-          this.weekNumberFormatter(this.getWeekNumber(week.find((d) => d)))
-        ) : ""}
-                            </td>
-                          ` : nothing}
-                    ${repeat(
-          week,
-          (date) => date ? utcFormat(date) : String(Math.random()),
-          (date) => {
-            var _a2;
-            return date ? html`
-                              <td>
-                                <button
-                                  class=${classMap({
-              outside: this.isDateOutsideMonth(date, month),
-              disabled: this.isDateDisabled(date),
-              selected: this.isDateSelected(date),
-              "in-range": this.isDateInRange(date),
-              today: this.isDateToday(date),
-              "range-start": this.isRangeStart(date),
-              "range-end": this.isRangeEnd(date)
-            })}
-                                  part=${[
-              "day",
-              this.isDateToday(date) ? "today" : "",
-              this.isDateSelected(date) ? "selected" : "",
-              this.isRangeStart(date) ? "range-start" : "",
-              this.isRangeEnd(date) ? "range-end" : "",
-              this.isDateInRange(date) ? "in-range" : "",
-              this.isDateOutsideMonth(date, month) ? "outside" : "",
-              this.isDateDisabled(date) ? "disabled" : "",
-              ((_a2 = this.isDateDisallowed) == null ? void 0 : _a2.call(this, date)) ? "disallowed" : ""
-            ].filter(Boolean).join(" ")}
-                                  ?disabled=${this.isDateDisabled(date)}
-                                  ?aria-disabled=${this.isDateDisabled(date) ? "true" : void 0}
-                                  ?aria-pressed=${this.isDateSelected(date) ? "true" : void 0}
-                                  aria-current=${this.isDateToday(date) ? "date" : void 0}
-                                  aria-label=${`${this.localizedMonthNames[date.getUTCMonth()]} ${date.getUTCDate()}`}
-                                  tabindex=${this.focusedDate && this.isSameDay(date, this.focusedDate) ? 0 : -1}
-                                  @click=${() => this.handleDateClick(date)}
-                                  @keydown=${(e) => this.handleKeyDown(e, date)}
-                                  @mouseenter=${() => this.handleDateHover(date)}
-                                  @mouseleave=${() => this.handleDateLeave()}
-                                >
-                                  ${date.getUTCDate()}
-                                </button>
-                              </td>
-                            ` : html`<td></td>`;
-          }
-        )}
-                  </tr>
-                `;
-      }
-    )}
-            </tbody>
-          </table>
-        </div>
-      </div>
-    `;
-  }
-  handleMonthYearClick() {
-    if (this.captionLayout === "none") return;
-    this.viewMode = "month";
-  }
-  handleYearClick() {
-    if (this.captionLayout === "none") return;
-    this.viewMode = "year";
-  }
-  // Modified handlers to accept a date if coming from a specific month's header
-  handleMonthSelect(month) {
-    this.currentDate = utcParse({ year: this.currentDate.getUTCFullYear(), month, day: 1 });
-    this.viewMode = "calendar";
-  }
-  // Modified handlers to accept a date if coming from a specific month's header
-  handleYearSelect(year) {
-    this.currentDate = utcParse({ year, month: this.currentDate.getUTCMonth(), day: 1 });
-    this.viewMode = "calendar";
-  }
-  handlePreviousYear() {
-    this.currentDate = utcParse({
-      year: this.currentDate.getUTCFullYear() - 1,
-      month: this.currentDate.getUTCMonth(),
-      day: 1
-    });
-  }
-  handleNextYear() {
-    this.currentDate = utcParse({
-      year: this.currentDate.getUTCFullYear() + 1,
-      month: this.currentDate.getUTCMonth(),
-      day: 1
-    });
-  }
-  handlePreviousYearRange() {
-    const currentYear = this.currentDate.getUTCFullYear();
-    this.currentDate = utcParse({ year: currentYear - 12, month: this.currentDate.getUTCMonth(), day: 1 });
-  }
-  handleNextYearRange() {
-    const currentYear = this.currentDate.getUTCFullYear();
-    this.currentDate = utcParse({ year: currentYear + 12, month: this.currentDate.getUTCMonth(), day: 1 });
-  }
-  /**
-   * Renders the calendar component
-   * @returns The rendered calendar template
-   */
-  render() {
-    switch (this.viewMode) {
-      case "month":
-        return this.renderMonthSelection();
-      case "year":
-        return this.renderYearSelection();
-      default:
-        return this.renderCalendarView();
-    }
-  }
-  renderMonthSelection() {
-    const months = this.localizedMonthNames;
-    const currentMonth = this.currentDate.getUTCMonth();
-    const currentYear = this.currentDate.getUTCFullYear();
-    return html`
-      <div class="month-selection">
-        <div class="header">
-          <span class="current-year">${currentYear}</span>
-          <div class="navigation">
-            <button @click=${() => this.handlePreviousYear()}>
-              <lynk-icon name="chevron-left" library="system"></lynk-icon>
-            </button>
-            <button @click=${() => this.handleNextYear()}>
-              <lynk-icon name="chevron-right" library="system"></lynk-icon>
-            </button>
-          </div>
-        </div>
-        <div class="months-grid">
-          ${months.map(
-      (m, index) => html`
-              <button
-                class=${classMap({
-        "month-button": true,
-        selected: index === currentMonth
-      })}
-                @click=${() => this.handleMonthSelect(index)}
-              >
-                ${m}
-              </button>
-            `
-    )}
-        </div>
-      </div>
-    `;
-  }
-  renderYearSelection() {
-    const currentYear = this.currentDate.getUTCFullYear();
-    const startYear = currentYear - 5;
-    const years = Array.from({ length: 12 }, (_, i) => startYear + i);
-    return html`
-      <div class="year-selection">
-        <div class="header">
-          <span class="year-range">${startYear}-${startYear + 11}</span>
-          <div class="navigation">
-            <button @click=${() => this.handlePreviousYearRange()}>
-              <lynk-icon name="chevron-left" library="system"></lynk-icon>
-            </button>
-            <button @click=${() => this.handleNextYearRange()}>
-              <lynk-icon name="chevron-right" library="system"></lynk-icon>
-            </button>
-          </div>
-        </div>
-        <div class="years-grid">
-          ${years.map(
-      (year) => html`
-              <button
-                class=${classMap({
-        "year-button": true,
-        selected: year === currentYear
-      })}
-                @click=${() => this.handleYearSelect(year)}
-              >
-                ${year}
-              </button>
-            `
-    )}
-        </div>
-      </div>
-    `;
-  }
-  renderCalendarView() {
-    const year = this.currentDate.getUTCFullYear();
-    const month = this.currentDate.getUTCMonth();
-    const monthsArray = Array.from({ length: this.months }, (_, i) => utcParse({ year, month: month + i, day: 1 }));
-    let mainHeaderCenterContent;
-    if (this.months === 1) {
-      switch (this.captionLayout) {
-        case "buttons":
-          mainHeaderCenterContent = html`
-            <div class="calendar-heading">
-              <button @click=${this.handleMonthYearClick}>${this.localizedMonthNames[month]}</button>
-              <button @click=${this.handleYearClick}>${year}</button>
-            </div>
-          `;
-          break;
-        case "dropdown":
-          mainHeaderCenterContent = html`
-            <div class="calendar-heading">
-              <select @change=${(e) => this.handleMonthSelect(Number(e.target.value))}>
-                ${this.localizedMonthNames.map(
-            (name, index) => html`<option value=${index} ?selected=${index === month}>${name}</option>`
-          )}
-              </select>
-              <select @change=${(e) => this.handleYearSelect(Number(e.target.value))}>
-                ${Array.from({ length: 12 }, (_, i) => year - 5 + i).map(
-            (y) => html`<option value=${y} ?selected=${y === year}>${y}</option>`
-          )}
-              </select>
-            </div>
-          `;
-          break;
-        default:
-          mainHeaderCenterContent = html`
-            <div class="calendar-heading">${this.localizedMonthNames[month]} ${year}</div>
-          `;
-      }
-    } else {
-      const firstMonthDisplayed = monthsArray[0];
-      const lastMonthDisplayed = monthsArray[monthsArray.length - 1];
-      mainHeaderCenterContent = html`
-        <div part="heading" class="calendar-heading main-heading">
-          ${this.localizedMonthNames[firstMonthDisplayed.getUTCMonth()]} ${firstMonthDisplayed.getUTCFullYear()} –
-          ${this.localizedMonthNames[lastMonthDisplayed.getUTCMonth()]} ${lastMonthDisplayed.getUTCFullYear()}
-        </div>
-      `;
-    }
-    return html`
-      <div class="calendar">
-        <div class="calendar-header">
-          ${!this.disableNavigation ? html`
-                  <button
-                    part="button previous"
-                    class="navigation-button"
-                    @click=${this.handlePreviousMonth}
-                    aria-label="Previous month"
-                  >
-                    <lynk-icon name="chevron-left" library="system"></lynk-icon>
-                  </button>
-                ` : nothing}
-          ${mainHeaderCenterContent}
-          ${!this.disableNavigation ? html`
-                  <button
-                    part="button next"
-                    class="navigation-button"
-                    @click=${this.handleNextMonth}
-                    aria-label="Next month"
-                  >
-                    <lynk-icon name="chevron-right" library="system"></lynk-icon>
-                  </button>
-                ` : nothing}
-        </div>
-        <div class="calendar-months-row" style="display: flex; gap: 2em;">
-          ${monthsArray.map(
-      (date) => html`
-              <div class="calendar-month-container">${this.renderMonth(date.getUTCFullYear(), date.getUTCMonth())}</div>
-            `
-    )}
-        </div>
-      </div>
-    `;
-  }
-};
-LynkCalendar.styles = [component_styles_default, calendar_styles_default];
-__decorateClass([
-  state()
-], LynkCalendar.prototype, "currentDate", 2);
-__decorateClass([
-  state()
-], LynkCalendar.prototype, "focusedDate", 2);
-__decorateClass([
-  state()
-], LynkCalendar.prototype, "localeFormatter", 2);
-__decorateClass([
-  state()
-], LynkCalendar.prototype, "hoverDate", 2);
-__decorateClass([
-  state()
-], LynkCalendar.prototype, "viewMode", 2);
-__decorateClass([
-  property({ reflect: true })
-], LynkCalendar.prototype, "type", 2);
-__decorateClass([
-  property()
-], LynkCalendar.prototype, "value", 1);
-__decorateClass([
-  property({ type: Number })
-], LynkCalendar.prototype, "months", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "show-outside-days" })
-], LynkCalendar.prototype, "showOutsideDays", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "show-week-numbers" })
-], LynkCalendar.prototype, "showWeekNumbers", 2);
-__decorateClass([
-  property({ type: Boolean, attribute: "disable-navigation" })
-], LynkCalendar.prototype, "disableNavigation", 2);
-__decorateClass([
-  property({ type: Number, attribute: "first-day-of-week" })
-], LynkCalendar.prototype, "firstDayOfWeek", 2);
-__decorateClass([
-  property()
-], LynkCalendar.prototype, "min", 2);
-__decorateClass([
-  property()
-], LynkCalendar.prototype, "max", 2);
-__decorateClass([
-  property()
-], LynkCalendar.prototype, "locale", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], LynkCalendar.prototype, "readonly", 2);
-__decorateClass([
-  property({ attribute: false })
-], LynkCalendar.prototype, "isDateDisallowed", 2);
-__decorateClass([
-  property({ attribute: false })
-], LynkCalendar.prototype, "weekNumberFormatter", 2);
-__decorateClass([
-  property({ attribute: "caption-layout" })
-], LynkCalendar.prototype, "captionLayout", 2);
-
-export {
-  LynkCalendar
-};