@vonage/vivid 4.16.2 → 4.18.0

package/shared/{presentationDate.js → calendar-picker.template.js}

@@ -1,21 +1,11 @@
+import { o as observable, v as volatile, D as DOM, a as attr, h as html } from './vivid-element.js';
+import { D as Divider } from './definition23.js';
 import { B as Button } from './definition11.js';
-import { P as Popup } from './definition63.js';
-import { T as TextField } from './text-field2.js';
-import { D as Divider } from './definition22.js';
-import { h as html, V as VividElement, O as Observable, i as defaultExecutionContext, D as DOM, a as attr, o as observable, v as volatile } from './vivid-element.js';
-import { r as ref } from './ref.js';
-import { s as slotted } from './slotted.js';
 import { r as repeat } from './repeat.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
-import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { F as FormAssociated } from './form-associated.js';
-import { T as TrappedFocus } from './trapped-focus.js';
-import { a as FormElementHelperText } from './form-elements.js';
-import { L as Localized } from './localized.js';
 
-const styles = ":host{display:inline-block}.base{display:inline-block;inline-size:100%}.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column;padding:12px;gap:12px}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;gap:8px}.segments{display:flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
+const calendarStyles = ".segments{display:inline-flex;gap:24px}.segment{display:flex;flex-direction:column;gap:12px}.segment .header{display:flex;align-items:center;padding-block:8px}.segment .title{display:flex;flex-grow:1;justify-content:center}.segment .title-action{border-radius:8px;block-size:24px;font:var(--vvd-typography-base-extended);padding-inline:8px}.calendar{display:flex;flex-direction:column;margin-top:8px;gap:4px}.calendar .calendar-separator{margin-inline:10px}.calendar .calendar-weekdays{display:flex;justify-content:center}.calendar .calendar-weekday{display:inline-flex;align-items:center;justify-content:center;block-size:16px;font:var(--vvd-typography-base-condensed);inline-size:40px}.calendar .calendar-week{display:flex;justify-content:center}.calendar .calendar-day{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:28px;font:var(--vvd-typography-base);margin-inline:6px;--focus-inset: -2px}.calendar .calendar-day.start,.calendar .calendar-day.end{border:2px solid var(--vvd-color-cta-50);background-color:var(--vvd-color-cta-200)}.calendar .calendar-day:before,.calendar .calendar-day:after{position:absolute;z-index:-1;display:block;width:20px;height:28px}.calendar .calendar-day:before{right:50%}.calendar .calendar-day:after{left:50%}.calendar .calendar-day.range:before,.calendar .calendar-day.range:after{background-color:var(--vvd-color-cta-50)}.calendar .calendar-day.range:not(.start):before,.calendar .calendar-day.range:not(.end):after{content:\"\"}.calendar .calendar-day.outside-month,.calendar .calendar-day:disabled{color:var(--vvd-color-neutral-400)}.months-separator{margin-inline:-12px}.month-grid{display:flex;flex-direction:column;gap:34px}.month-grid .months-row{display:flex;justify-content:center;gap:29px}.month-grid .month{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;aspect-ratio:1/1;block-size:48px;font:var(--vvd-typography-base-extended);text-transform:uppercase}.month-grid .month:disabled{color:var(--vvd-color-neutral-400)}.button{--_connotation-color-primary: var(--vvd-date-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-date-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-date-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-date-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-date-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-date-picker-accent-pale, var(--vvd-color-neutral-300))}.button{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.button:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.button:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.button:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}.button{position:relative;padding:0;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer}.button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));color:var(--vvd-color-canvas-text)}.button.current{border:1px solid var(--vvd-color-neutral-200)}.button:disabled{cursor:not-allowed}";
 
 /**
  * @name toDate
@@ -1537,8 +1527,6 @@ const lightFormatters = {
 };
 
 const dayPeriodEnum = {
-  am: "am",
-  pm: "pm",
   midnight: "midnight",
   noon: "noon",
   morning: "morning",
@@ -5478,7 +5466,7 @@ function cleanEscapedString(input) {
   return input.match(escapedStringRegExp)[1].replace(doubleQuoteRegExp, "'");
 }
 
-const formatDateStr = (date) => formatISO(date, { representation: "date" });
+const formatDateStr = (date) => formatISO(date, { });
 const currentDateStr = (now = /* @__PURE__ */ new Date()) => formatDateStr(now);
 const parseDateStr = (dateStr) => {
   const [year, month, day] = dateStr.split("-");
@@ -5505,6 +5493,15 @@ const isValidDateStr = (string) => {
   return hasThreeComponents(components) && allComponentsAreNumbers(components) && isValidDate(components);
 };
 
+const formatPresentationDate = (dateStr, locale) => {
+  const date = parseDateStr(dateStr);
+  return format(date, locale.dateFormat);
+};
+const parsePresentationDate = (presentationDate, locale) => {
+  const date = parse(presentationDate, locale.dateFormat, /* @__PURE__ */ new Date());
+  return formatDateStr(date);
+};
+
 const getCurrentMonth = (now = /* @__PURE__ */ new Date()) => ({
   month: now.getMonth(),
   year: now.getFullYear()
@@ -5522,36 +5519,564 @@ const compareMonths = (a, b) => a.year === b.year ? a.month - b.month : a.year -
 const areMonthsEqual = (a, b) => compareMonths(a, b) === 0;
 const monthToStr = ({ month, year }) => `${year.toString().padStart(4, "0")}-${(month + 1).toString().padStart(2, "0")}`;
 
+const yearOfDate = (dateStr) => {
+  const date = parseDateStr(dateStr);
+  return date.getFullYear();
+};
+
+const MonthsPerRow = 4;
+const buildMonthPickerGrid = (year, locale) => {
+  const grid = [];
+  let row = [];
+  for (let i = 0; i < 12; i++) {
+    const month = { month: i, year };
+    row.push({
+      label: locale.months.shorthand[i],
+      monthName: locale.months.name[i],
+      month
+    });
+    if (row.length === MonthsPerRow) {
+      grid.push(row);
+      row = [];
+    }
+  }
+  return grid;
+};
+
+const getWeekdays = (locale) => {
+  const firstDayOfWeek = locale.firstDayOfWeek;
+  const localeWeekdayToNative = (day) => (day + firstDayOfWeek) % 7;
+  const days = [];
+  for (let i = 0; i < 7; i++) {
+    days.push({
+      name: locale.weekdays.name[localeWeekdayToNative(i)],
+      shortName: locale.weekdays.shorthand[localeWeekdayToNative(i)]
+    });
+  }
+  return days;
+};
+const gridDate = (date, isOutsideMonth2) => ({
+  date: formatDateStr(date),
+  label: `${date.getDate()}`,
+  isOutsideMonth: isOutsideMonth2
+});
+function isOutsideMonth(dayIndexInMonth, daysInMonth) {
+  return dayIndexInMonth < 0 || dayIndexInMonth >= daysInMonth;
+}
+const buildDateGrid = ({ month, year }, getDay) => {
+  const grid = [];
+  const firstDay = new Date(year, month, 1);
+  const lastDay = new Date(year, month + 1, 0);
+  const firstDayInWeek = getDay(firstDay);
+  const daysInMonth = lastDay.getDate();
+  const daysOutsideMonthInLastWeek = 7 - getDay(lastDay);
+  const totalDaysInCalendar = daysInMonth + firstDayInWeek + daysOutsideMonthInLastWeek;
+  let week = [];
+  for (let i = 0; i < totalDaysInCalendar; i++) {
+    const dayIndexInMonth = i - firstDayInWeek;
+    week.push(
+      gridDate(
+        addDays$1(firstDay, dayIndexInMonth),
+        isOutsideMonth(dayIndexInMonth, daysInMonth)
+      )
+    );
+    if (week.length === 7) {
+      grid.push(week);
+      week = [];
+    }
+  }
+  return grid;
+};
+const buildCalendarGrid = (month, locale) => {
+  const { firstDayOfWeek } = locale;
+  const getShiftedDay = (date) => (date.getDay() - firstDayOfWeek + 7) % 7;
+  return {
+    weekdays: getWeekdays(locale),
+    grid: buildDateGrid(month, getShiftedDay)
+  };
+};
+
+var __defProp$1 = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp$1(target, key, result);
+  return result;
+};
+const CalendarPicker = (Base) => {
+  class CalendarPickerElement extends Base {
+    // --- Core ---
+    constructor(...args) {
+      super(...args);
+      this._selectedMonth = getCurrentMonth();
+      /**
+       * Today's date.
+       * @internal
+       */
+      this._currentDate = currentDateStr();
+      /**
+       * Today's month.
+       * @internal
+       */
+      this._currentMonth = getCurrentMonth();
+      this._numCalendars = 1;
+      // --- Date picker ---
+      /**
+       * @internal
+       */
+      this._hideDatesOutsideMonth = false;
+      this._lastFocussedDate = null;
+      this._monthPickerYear = null;
+      this._lastFocussedMonth = null;
+      this.value = "";
+    }
+    /**
+     * @internal
+     */
+    _adjustSelectedMonthToEnsureVisibilityOf(date) {
+      const month = monthOfDate(date);
+      const firstDisplayedMonth = this._selectedMonth;
+      const lastDisplayedMonth = addMonths(
+        this._selectedMonth,
+        this._numCalendars - 1
+      );
+      if (compareMonths(month, firstDisplayedMonth) < 0) {
+        this._selectedMonth = month;
+        return true;
+      } else if (compareMonths(month, lastDisplayedMonth) > 0) {
+        this._selectedMonth = addMonths(month, 1 - this._numCalendars);
+        return true;
+      }
+      return false;
+    }
+    /**
+     * @internal
+     */
+    _isDateInValidRange(date) {
+      return (!this._resolvedMinDate || compareDateStr(date, this._resolvedMinDate) >= 0) && (!this._resolvedMaxDate || compareDateStr(date, this._resolvedMaxDate) <= 0);
+    }
+    #isMonthAfterValidRange(month) {
+      return this._resolvedMaxDate && compareMonths(month, monthOfDate(this._resolvedMaxDate)) > 0;
+    }
+    #isMonthBeforeValidRange(month) {
+      return this._resolvedMinDate && compareMonths(month, monthOfDate(this._resolvedMinDate)) < 0;
+    }
+    /**
+     * @internal
+     */
+    _isMonthInValidRange(month) {
+      return !(this.#isMonthBeforeValidRange(month) || this.#isMonthAfterValidRange(month));
+    }
+    /**
+     * @internal
+     */
+    _closePopup(restoreFocusToTextField = true) {
+      super._closePopup(restoreFocusToTextField);
+      this._monthPickerYear = null;
+    }
+    /**
+     * @internal
+     */
+    _onPickerButtonClick() {
+      super._onPickerButtonClick();
+      if (this._popupOpen) {
+        DOM.processUpdates();
+        const tabbableDate = this._tabbableDate;
+        if (tabbableDate)
+          this.shadowRoot.querySelector(
+            `[data-date="${tabbableDate}"]`
+          ).focus();
+      }
+    }
+    // --- Calendar header ---
+    /**
+     * @internal
+     */
+    _onTitleActionClick() {
+      if (this._inMonthPicker) {
+        this._monthPickerYear = null;
+      } else {
+        this._monthPickerYear = this._selectedMonth.year;
+      }
+    }
+    get _isPrevYearDisabled() {
+      const currentYear = this._inMonthPicker ? this._monthPickerYear : this._selectedMonth.year;
+      const prevYear = currentYear - 1;
+      return this._resolvedMinDate && prevYear < yearOfDate(this._resolvedMinDate);
+    }
+    /**
+     * @internal
+     */
+    _onPrevYearClick() {
+      if (this._inMonthPicker) {
+        this._monthPickerYear = this._monthPickerYear - 1;
+      } else {
+        this._selectedMonth = {
+          year: this._selectedMonth.year - 1,
+          month: this._selectedMonth.month
+        };
+      }
+    }
+    get _isNextYearDisabled() {
+      const currentYear = this._inMonthPicker ? this._monthPickerYear : this._selectedMonth.year;
+      const nextYear = currentYear + 1;
+      return this._resolvedMaxDate && nextYear > yearOfDate(this._resolvedMaxDate);
+    }
+    /**
+     * @internal
+     */
+    _onNextYearClick() {
+      if (this._inMonthPicker) {
+        this._monthPickerYear = this._monthPickerYear + 1;
+      } else {
+        this._selectedMonth = {
+          year: this._selectedMonth.year + 1,
+          month: this._selectedMonth.month
+        };
+      }
+    }
+    /**
+     * @internal
+     */
+    get _isPrevMonthDisabled() {
+      return this.#isMonthBeforeValidRange(addMonths(this._selectedMonth, -1));
+    }
+    /**
+     * @internal
+     */
+    _onPrevMonthClick() {
+      this._selectedMonth = addMonths(this._selectedMonth, -1);
+    }
+    /**
+     * @internal
+     */
+    get _isNextMonthDisabled() {
+      return this.#isMonthAfterValidRange(addMonths(this._selectedMonth, 1));
+    }
+    /**
+     * @internal
+     */
+    _onNextMonthClick() {
+      this._selectedMonth = addMonths(this._selectedMonth, 1);
+    }
+    /**
+     * @internal
+     */
+    get _segments() {
+      const segments = [];
+      if (this._inMonthPicker) {
+        segments.push({
+          id: 0,
+          type: "month-picker",
+          title: `${this._monthPickerYear}`,
+          titleClickable: true,
+          prevYearButton: true,
+          nextYearButton: true,
+          months: buildMonthPickerGrid(
+            this._monthPickerYear,
+            this.locale.calendarPicker
+          )
+        });
+      } else {
+        for (let i = 0; i < this._numCalendars; i++) {
+          const month = addMonths(this._selectedMonth, i);
+          const isSingle = this._numCalendars === 1;
+          const isFirst = i === 0;
+          const isLast = i === this._numCalendars - 1;
+          segments.push({
+            id: i,
+            type: "calendar",
+            title: `${this.locale.calendarPicker.months.name[month.month]} ${month.year}`,
+            titleClickable: isSingle,
+            prevYearButton: isFirst && isSingle,
+            prevMonthButton: isFirst,
+            nextMonthButton: isLast,
+            nextYearButton: isLast && isSingle,
+            calendar: buildCalendarGrid(month, this.locale.calendarPicker)
+          });
+        }
+      }
+      return segments;
+    }
+    /**
+     * @internal
+     */
+    _isDateSelected(_) {
+      return false;
+    }
+    /**
+     * @internal
+     * @private
+     */
+    _isDateInSelectedRange(_) {
+      return false;
+    }
+    /**
+     * @internal
+     */
+    _isDateRangeStart(_) {
+      return false;
+    }
+    /**
+     * @internal
+     */
+    _isDateRangeEnd(_) {
+      return false;
+    }
+    /**
+     * @internal
+     */
+    _onDateMouseEnter(_) {
+    }
+    /**
+     * @internal
+     */
+    _onDateMouseLeave(_) {
+    }
+    /**
+     * Handle keydown on a date in the calendar.
+     * @internal
+     */
+    _onDateKeydown(date, event) {
+      let newDate = null;
+      if (event.key === "ArrowUp") {
+        newDate = addDays(date, -7);
+      } else if (event.key === "ArrowDown") {
+        newDate = addDays(date, 7);
+      } else if (event.key === "ArrowLeft") {
+        newDate = addDays(date, -1);
+      } else if (event.key === "ArrowRight") {
+        newDate = addDays(date, 1);
+      }
+      if (newDate && this._isDateInValidRange(newDate)) {
+        if (this._adjustSelectedMonthToEnsureVisibilityOf(newDate)) {
+          DOM.processUpdates();
+        }
+        this._dialogEl.querySelector(
+          `[data-date="${newDate}"]`
+        ).focus();
+        return false;
+      }
+      return true;
+    }
+    /**
+     * @internal
+     */
+    _onDateFocus(date) {
+      this._lastFocussedDate = date;
+    }
+    get _tabbableDate() {
+      const datesInSegments = this._segments.filter(
+        (segment) => segment.type === "calendar"
+      ).flatMap((segment) => segment.calendar.grid.flat().map((d) => d.date));
+      const candidates = [
+        this._lastFocussedDate,
+        ...this._getSelectedDates(),
+        currentDateStr(),
+        ...datesInSegments
+      ];
+      const firstVisibleMonth = this._selectedMonth;
+      const lastVisibleMonth = addMonths(
+        this._selectedMonth,
+        this._numCalendars - 1
+      );
+      return candidates.find(
+        (date) => date && compareMonths(monthOfDate(date), firstVisibleMonth) >= 0 && compareMonths(monthOfDate(date), lastVisibleMonth) <= 0 && this._isDateInValidRange(date)
+      ) ?? null;
+    }
+    /**
+     * @internal
+     */
+    get _inMonthPicker() {
+      return this._monthPickerYear !== null;
+    }
+    /**
+     * Handle month selected in the month picker.
+     * @internal
+     */
+    _onMonthClick(month) {
+      this._selectedMonth = month;
+      this._monthPickerYear = null;
+    }
+    /**
+     * Handle keydown on a month in the month picker.
+     * @internal
+     */
+    _onMonthKeydown(month, event) {
+      let newMonth = null;
+      if (event.key === "ArrowUp") {
+        newMonth = addMonths(month, -4);
+      } else if (event.key === "ArrowDown") {
+        newMonth = addMonths(month, MonthsPerRow);
+      } else if (event.key === "ArrowLeft") {
+        newMonth = addMonths(month, -1);
+      } else if (event.key === "ArrowRight") {
+        newMonth = addMonths(month, 1);
+      }
+      if (newMonth && this._isMonthInValidRange(newMonth)) {
+        if (newMonth.year !== this._monthPickerYear) {
+          this._monthPickerYear = newMonth.year;
+          DOM.processUpdates();
+        }
+        this._dialogEl.querySelector(
+          `[data-month="${monthToStr(newMonth)}"]`
+        ).focus();
+        return false;
+      }
+      return true;
+    }
+    /**
+     * @internal
+     */
+    _onMonthFocus(month) {
+      this._lastFocussedMonth = month;
+    }
+    get _tabbableMonth() {
+      const monthsInSegments = this._segments.filter(
+        (segments) => segments.type === "month-picker"
+      ).flatMap((segment) => segment.months.flat().map((c) => c.month));
+      const candidates = [
+        this._lastFocussedMonth,
+        this._selectedMonth,
+        getCurrentMonth(),
+        ...monthsInSegments
+      ];
+      return candidates.find(
+        (month) => month && month.year === this._monthPickerYear && this._isMonthInValidRange(month)
+      ) ?? null;
+    }
+  }
+  __decorateClass$1([
+    observable
+  ], CalendarPickerElement.prototype, "_selectedMonth", 2);
+  __decorateClass$1([
+    volatile
+  ], CalendarPickerElement.prototype, "_isPrevYearDisabled", 1);
+  __decorateClass$1([
+    volatile
+  ], CalendarPickerElement.prototype, "_isNextYearDisabled", 1);
+  __decorateClass$1([
+    observable
+  ], CalendarPickerElement.prototype, "_numCalendars", 2);
+  __decorateClass$1([
+    observable
+  ], CalendarPickerElement.prototype, "_lastFocussedDate", 2);
+  __decorateClass$1([
+    volatile
+  ], CalendarPickerElement.prototype, "_tabbableDate", 1);
+  __decorateClass$1([
+    observable
+  ], CalendarPickerElement.prototype, "_monthPickerYear", 2);
+  __decorateClass$1([
+    observable
+  ], CalendarPickerElement.prototype, "_lastFocussedMonth", 2);
+  __decorateClass$1([
+    volatile
+  ], CalendarPickerElement.prototype, "_tabbableMonth", 1);
+  return CalendarPickerElement;
+};
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const ValidDateFilter = {
+  fromView: (value) => {
+    if (value && isValidDateStr(value)) {
+      return value;
+    }
+    return "";
+  },
+  toView(value) {
+    return value;
+  }
+};
+const MinMaxCalendarPicker = (SuperClass) => {
+  class MinMaxDatePickerElement extends SuperClass {
+    /**
+     * @internal
+     */
+    minChanged(_, newMin) {
+      if (this.proxy instanceof HTMLInputElement) {
+        this.proxy.min = newMin;
+        this.validate();
+      }
+    }
+    /**
+     * @internal
+     */
+    get _resolvedMinDate() {
+      return this.min;
+    }
+    /**
+     * @internal
+     */
+    maxChanged(_, newMax) {
+      if (this.proxy instanceof HTMLInputElement) {
+        this.proxy.max = newMax;
+        this.validate();
+      }
+    }
+    /**
+     * The latest accepted date.
+     * @internal
+     */
+    get _resolvedMaxDate() {
+      return this.max;
+    }
+    constructor(...args) {
+      super(...args);
+      this.min = "";
+      this.max = "";
+    }
+  }
+  __decorateClass([
+    attr({ converter: ValidDateFilter })
+  ], MinMaxDatePickerElement.prototype, "min");
+  __decorateClass([
+    attr({ converter: ValidDateFilter })
+  ], MinMaxDatePickerElement.prototype, "max");
+  return MinMaxDatePickerElement;
+};
+
 function renderDialogHeader(context) {
   const buttonTag = context.tagFor(Button);
-  return html`<div class="header">
+  return html` <div class="header">
 		${when(
     (x) => x.prevYearButton,
     html`
 					<${buttonTag}
-						tabindex="1"
-						class="vwc-button"
-						size="super-condensed"
-						icon="${(_, c) => c.parent._inMonthPicker ? "chevron-left-line" : "double-chevron-left-line"}"
-						aria-label="${(_, c) => c.parent.locale.datePicker.prevYearLabel}"
-						?disabled="${(_, c) => c.parent._isPrevYearDisabled}"
-						@click="${(_, c) => c.parent._onPrevYearClick()}"
+						tabindex='1'
+						class='vwc-button'
+						size='super-condensed'
+						icon='${(_, c) => c.parent._inMonthPicker ? "chevron-left-line" : "double-chevron-left-line"}'
+						aria-label='${(_, c) => c.parent.locale.calendarPicker.prevYearLabel}'
+						?disabled='${(_, c) => c.parent._isPrevYearDisabled}'
+						@click='${(_, c) => c.parent._onPrevYearClick()}'
 					></${buttonTag}>
-		`
+				`
   )}
 		${when(
     (x) => x.prevMonthButton,
     html`
 					<${buttonTag}
-						tabindex="1"
-						class="vwc-button"
-						size="super-condensed"
-						icon="chevron-left-line"
-						aria-label="${(_, c) => c.parent.locale.datePicker.prevMonthLabel}"
-						?disabled="${(_, c) => c.parent._isPrevMonthDisabled}"
-						@click="${(_, c) => c.parent._onPrevMonthClick()}"
+						tabindex='1'
+						class='vwc-button'
+						size='super-condensed'
+						icon='chevron-left-line'
+						aria-label='${(_, c) => c.parent.locale.calendarPicker.prevMonthLabel}'
+						?disabled='${(_, c) => c.parent._isPrevMonthDisabled}'
+						@click='${(_, c) => c.parent._onPrevMonthClick()}'
 					></${buttonTag}>
-		`
+				`
   )}
 		<div class="title">
 			${when(
@@ -5585,70 +6110,71 @@ function renderDialogHeader(context) {
 		${when(
     (x) => x.nextMonthButton,
     html`
-				<${buttonTag}
-					tabindex="1"
-					class="vwc-button"
-					size="super-condensed"
-					icon="chevron-right-line"
-					aria-label="${(_, c) => c.parent.locale.datePicker.nextMonthLabel}"
-					?disabled="${(_, c) => c.parent._isNextMonthDisabled}"
-					@click="${(_, c) => c.parent._onNextMonthClick()}"
-				></${buttonTag}>
-			`
+					<${buttonTag}
+						tabindex='1'
+						class='vwc-button'
+						size='super-condensed'
+						icon='chevron-right-line'
+						aria-label='${(_, c) => c.parent.locale.calendarPicker.nextMonthLabel}'
+						?disabled='${(_, c) => c.parent._isNextMonthDisabled}'
+						@click='${(_, c) => c.parent._onNextMonthClick()}'
+					></${buttonTag}>
+				`
   )}
 		${when(
     (x) => x.nextYearButton,
     html`
-				<${buttonTag}
-					tabindex="1"
-					class="vwc-button"
-					size="super-condensed"
-					icon="${(_, c) => c.parent._inMonthPicker ? "chevron-right-line" : "double-chevron-right-line"}"
-					aria-label="${(_, c) => c.parent.locale.datePicker.nextYearLabel}"
-					?disabled="${(_, c) => c.parent._isNextYearDisabled}"
-					@click="${(_, c) => c.parent._onNextYearClick()}"
-				></${buttonTag}>
-			`
+					<${buttonTag}
+						tabindex='1'
+						class='vwc-button'
+						size='super-condensed'
+						icon='${(_, c) => c.parent._inMonthPicker ? "chevron-right-line" : "double-chevron-right-line"}'
+						aria-label='${(_, c) => c.parent.locale.calendarPicker.nextYearLabel}'
+						?disabled='${(_, c) => c.parent._isNextYearDisabled}'
+						@click='${(_, c) => c.parent._onNextYearClick()}'
+					></${buttonTag}>
+				`
   )}
 	</div>`;
 }
 function renderCalendarGrid(context) {
   const dividerTag = context.tagFor(Divider);
-  return html`<div
-		class="calendar"
-		role="grid"
-		aria-labelledby="${(x) => `grid-label-${x.id}`}"
-	>
-		<div class="calendar-weekdays" role="row">
-			${repeat(
+  return html`
+		<div
+			class='calendar'
+			role='grid'
+			aria-labelledby='${(x) => `grid-label-${x.id}`}'
+		>
+			<div class='calendar-weekdays' role='row'>
+				${repeat(
     (x) => x.calendar.weekdays,
     html`
-					<div
-						class="calendar-weekday"
-						role="columnheader"
-						aria-label="${(x) => x.name}"
-					>
-						${(x) => x.shortName}
-					</div>
-				`
+						<div
+							class="calendar-weekday"
+							role="columnheader"
+							aria-label="${(x) => x.name}"
+						>
+							${(x) => x.shortName}
+						</div>
+					`
   )}
-		</div>
-		<${dividerTag} class="calendar-separator" role="presentation"></${dividerTag}>
-		${repeat(
+			</div>
+			<${dividerTag} class='calendar-separator' role='presentation'></${dividerTag}>
+			${repeat(
     (x) => x.calendar.grid,
     html` <div class="calendar-week" role="row">
-				${repeat(
+					${repeat(
       (x) => x,
       html`
-			${when(
+								${when(
         (x, c) => c.parentContext.parentContext.parent._hideDatesOutsideMonth && x.isOutsideMonth,
         html`<div class="calendar-day"></div>`
       )}
-			${when(
+								${when(
         (x, c) => !c.parentContext.parentContext.parent._hideDatesOutsideMonth || !x.isOutsideMonth,
         html` <span role="gridcell">
-					<button
-						class="${(x, c) => classNames(
+										<button
+											class="${(x, c) => classNames(
           "calendar-day",
           "button",
           [
@@ -5657,7 +6183,9 @@ function renderCalendarGrid(context) {
           ],
           [
             "selected",
-            c.parentContext.parentContext.parent._isDateSelected(x.date)
+            c.parentContext.parentContext.parent._isDateSelected(
+              x.date
+            )
           ],
           [
             "range",
@@ -5673,57 +6201,69 @@ function renderCalendarGrid(context) {
           ],
           [
             "end",
-            c.parentContext.parentContext.parent._isDateRangeEnd(x.date)
+            c.parentContext.parentContext.parent._isDateRangeEnd(
+              x.date
+            )
           ],
           ["outside-month", x.isOutsideMonth]
         )}"
-						?disabled="${(x, c) => !c.parentContext.parentContext.parent._isDateInValidRange(
+											?disabled="${(x, c) => !c.parentContext.parentContext.parent._isDateInValidRange(
+          x.date
+        )}"
+											tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
+											aria-selected="${(x, c) => c.parentContext.parentContext.parent._isDateAriaSelected(
+          x.date
+        )}"
+											data-date="${(x) => x.date}"
+											@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(
           x.date
         )}"
-						tabindex="${(x, c) => x.date === c.parentContext.parentContext.parent._tabbableDate ? 2 : -1}"
-						aria-selected="${(x, c) => c.parentContext.parentContext.parent._isDateAriaSelected(x.date)}"
-						data-date="${(x) => x.date}"
-						@click="${(x, c) => c.parentContext.parentContext.parent._onDateClick(x.date)}"
-						@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(x.date)}"
-						@mouseenter="${(x, c) => c.parentContext.parentContext.parent._onDateMouseEnter(x.date)}"
-						@mouseleave="${(x, c) => c.parentContext.parentContext.parent._onDateMouseLeave(x.date)}"
-						@keydown="${(x, c) => c.parentContext.parentContext.parent._onDateKeydown(
+											@focus="${(x, c) => c.parentContext.parentContext.parent._onDateFocus(
+          x.date
+        )}"
+											@mouseenter="${(x, c) => c.parentContext.parentContext.parent._onDateMouseEnter(
+          x.date
+        )}"
+											@mouseleave="${(x, c) => c.parentContext.parentContext.parent._onDateMouseLeave(
+          x.date
+        )}"
+											@keydown="${(x, c) => c.parentContext.parentContext.parent._onDateKeydown(
           x.date,
           c.event
         )}"
-					>
-						${(x) => x.label}
-					</button>
-				</span>`
+										>
+											${(x) => x.label}
+										</button>
+									</span>`
       )}
-				</div>
-			`
+								</div>
+							`
     )}
-			</div>`
+				</div>`
   )}`;
 }
 function renderMonthPickerGrid(context) {
   const dividerTag = context.tagFor(Divider);
   return html`
 		<${dividerTag}
-			class="months-separator"
-			role="presentation"
+			class='months-separator'
+			role='presentation'
 		></${dividerTag}>
 		<div
-		class="month-grid"
-		role="grid"
-		aria-labelledby="grid-label"
-	>
-		${repeat(
+			class='month-grid'
+			role='grid'
+			aria-labelledby='grid-label'
+		>
+			${repeat(
     (x) => x.months,
     html`
-				<div class="months-row" role="row">
-					${repeat(
+					<div class="months-row" role="row">
+						${repeat(
       (x) => x,
       html`
-							<span role="gridcell">
-								<button
-									class="${(x, c) => classNames(
+								<span role="gridcell">
+									<button
+										class="${(x, c) => classNames(
         "month",
         "button",
         [
@@ -5741,774 +6281,59 @@ function renderMonthPickerGrid(context) {
           )
         ]
       )}"
-									tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(
+										tabindex="${(x, c) => c.parentContext.parentContext.parent._tabbableMonth && areMonthsEqual(
         x.month,
         c.parentContext.parentContext.parent._tabbableMonth
       ) ? 2 : -1}"
-									aria-label="${(x) => x.monthName}"
-									aria-selected="${(x, c) => areMonthsEqual(
+										aria-label="${(x) => x.monthName}"
+										aria-selected="${(x, c) => areMonthsEqual(
         x.month,
         c.parentContext.parentContext.parent._selectedMonth
       )}"
-									data-month="${(x) => monthToStr(x.month)}"
-									?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(
+										data-month="${(x) => monthToStr(x.month)}"
+										?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(
         x.month
       )}"
-									@click="${(x, c) => c.parentContext.parentContext.parent._onMonthClick(
+										@click="${(x, c) => c.parentContext.parentContext.parent._onMonthClick(
         x.month
       )}"
-									@focus="${(x, c) => c.parentContext.parentContext.parent._onMonthFocus(
+										@focus="${(x, c) => c.parentContext.parentContext.parent._onMonthFocus(
         x.month
       )}"
-									@keydown="${(x, c) => c.parentContext.parentContext.parent._onMonthKeydown(
+										@keydown="${(x, c) => c.parentContext.parentContext.parent._onMonthKeydown(
         x.month,
         c.event
       )}"
-								>
-									${(x) => x.label}
-								</button>
-							</span>
-						`
+									>
+										${(x) => x.label}
+									</button>
+								</span>
+							`
     )}
-				</div>
-			`
+					</div>
+				`
   )}
-	</div>`;
+		</div>`;
 }
-const DatePickerBaseTemplate = (context) => {
-  const popupTag = context.tagFor(Popup);
-  const textFieldTag = context.tagFor(TextField);
-  const buttonTag = context.tagFor(Button);
-  return html`<div class="base" @keydown="${(x, { event }) => x._onBaseKeyDown(event)}">
-		<${textFieldTag} id="text-field"
-										 ${ref("_textFieldEl")}
-										 class="control"
-										 label="${(x) => x.label}"
-										 helper-text="${(x) => x.helperText}"
-										 error-text="${(x) => x.errorValidationMessage}"
-										 placeholder="${(x) => x._textFieldPlaceholder}"
-										 size="${(x) => x._textFieldSize}"
-										 current-value="${(x) => x._presentationValue}"
-										 ?disabled="${(x) => x.disabled}"
-										 ?readonly="${(x) => x.readOnly}"
-										 @input="${(x, c) => x._onTextFieldInput(c.event)}"
-										 @change="${(x) => x._onTextFieldChange()}"
-		>
-			<slot
-				slot="${(x) => x._helperTextSlottedContent?.length ? "helper-text" : void 0}"
-				name="helper-text"
-				${slotted("_helperTextSlottedContent")}
-			></slot>
-			<${buttonTag}
-				id="calendar-button"
-				${ref("_calendarButtonEl")}
-				slot="action-items"
-				size="condensed"
-				icon="calendar-line"
-				appearance="ghost"
-				?disabled="${(x) => x.disabled || x.readOnly}"
-				aria-label="${(x) => x._calendarButtonLabel}"
-				@click="${(x) => x._onCalendarButtonClick()}"
-			></${buttonTag}>
-		</${textFieldTag}>
-		<${popupTag}
-					?open="${(x) => x._popupOpen}"
-					:anchor="${(x) => x._textFieldEl}"
-					placement="bottom-start"
-					class="popup">
-			<div class="dialog" role="dialog" ${ref(
-    "_dialogEl"
-  )} aria-modal="true" aria-label="${(x) => x.locale.datePicker.chooseDateLabel}">
-				<div class="segments">
-					${repeat(
+const CalendarPickerTemplate = (context) => {
+  return html`
+		<div class="segments">
+			${repeat(
     (x) => x._segments,
     html` <div class="segment">
-							${renderDialogHeader(context)}
-							${when(
+					${renderDialogHeader(context)}
+					${when(
       (x) => x.type === "month-picker",
       html`${renderMonthPickerGrid(context)}`
     )}
-							${when(
+					${when(
       (x) => x.type === "calendar",
       html`${renderCalendarGrid(context)}`
     )}
-						</div>`
+				</div>`
   )}
-				</div>
-				<div class="footer">
-					<${buttonTag}
-						tabindex="3"
-						class="vwc-button"
-						size="condensed"
-						label="${(x) => x.locale.datePicker.clearLabel}"
-						@click="${(x) => x._onClearClick()},
-										${(x) => x.$emit("clear-click")}"
-					></${buttonTag}>
-					<${buttonTag}
-						tabindex="3"
-						class="vwc-button"
-						size="condensed"
-						appearance="filled"
-						label="${(x) => x.locale.datePicker.okLabel}"
-						@click="${(x) => x._onOkClick()}"
-					></${buttonTag}>
-				</div>
-			</div>
-		</${popupTag}>
-	</div>`;
-};
-
-const getWeekdays = (locale) => {
-  const firstDayOfWeek = locale.firstDayOfWeek;
-  const localeWeekdayToNative = (day) => (day + firstDayOfWeek) % 7;
-  const days = [];
-  for (let i = 0; i < 7; i++) {
-    days.push({
-      name: locale.weekdays.name[localeWeekdayToNative(i)],
-      shortName: locale.weekdays.shorthand[localeWeekdayToNative(i)]
-    });
-  }
-  return days;
-};
-const gridDate = (date, isOutsideMonth2) => ({
-  date: formatDateStr(date),
-  label: `${date.getDate()}`,
-  isOutsideMonth: isOutsideMonth2
-});
-function isOutsideMonth(dayIndexInMonth, daysInMonth) {
-  return dayIndexInMonth < 0 || dayIndexInMonth >= daysInMonth;
-}
-const buildDateGrid = ({ month, year }, getDay) => {
-  const grid = [];
-  const firstDay = new Date(year, month, 1);
-  const lastDay = new Date(year, month + 1, 0);
-  const firstDayInWeek = getDay(firstDay);
-  const daysInMonth = lastDay.getDate();
-  const daysOutsideMonthInLastWeek = 7 - getDay(lastDay);
-  const totalDaysInCalendar = daysInMonth + firstDayInWeek + daysOutsideMonthInLastWeek;
-  let week = [];
-  for (let i = 0; i < totalDaysInCalendar; i++) {
-    const dayIndexInMonth = i - firstDayInWeek;
-    week.push(
-      gridDate(
-        addDays$1(firstDay, dayIndexInMonth),
-        isOutsideMonth(dayIndexInMonth, daysInMonth)
-      )
-    );
-    if (week.length === 7) {
-      grid.push(week);
-      week = [];
-    }
-  }
-  return grid;
-};
-const buildCalendarGrid = (month, locale) => {
-  const { firstDayOfWeek } = locale;
-  const getShiftedDay = (date) => (date.getDay() - firstDayOfWeek + 7) % 7;
-  return {
-    weekdays: getWeekdays(locale),
-    grid: buildDateGrid(month, getShiftedDay)
-  };
-};
-
-const MonthsPerRow = 4;
-const buildMonthPickerGrid = (year, locale) => {
-  const grid = [];
-  let row = [];
-  for (let i = 0; i < 12; i++) {
-    const month = { month: i, year };
-    row.push({
-      label: locale.months.shorthand[i],
-      monthName: locale.months.name[i],
-      month
-    });
-    if (row.length === MonthsPerRow) {
-      grid.push(row);
-      row = [];
-    }
-  }
-  return grid;
-};
-
-const yearOfDate = (dateStr) => {
-  const date = parseDateStr(dateStr);
-  return date.getFullYear();
-};
-
-class _DatePickerBase extends VividElement {
-}
-class FormAssociatedDatePickerBase extends FormAssociated(
-  _DatePickerBase
-) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const ValidDateFilter = {
-  fromView: (value) => {
-    if (value && isValidDateStr(value)) {
-      return value;
-    }
-    return "";
-  },
-  toView(value) {
-    return value;
-  }
-};
-class DatePickerBase extends FormAssociatedDatePickerBase {
-  // --- Core ---
-  constructor() {
-    super();
-    this.readOnly = false;
-    this._selectedMonth = getCurrentMonth();
-    /**
-     * Today's date.
-     * @internal
-     */
-    this._currentDate = currentDateStr();
-    /**
-     * Today's month.
-     * @internal
-     */
-    this._currentMonth = getCurrentMonth();
-    this.#onFocusIn = () => {
-      this.$emit("focus", void 0, { bubbles: false });
-    };
-    this.#onFocusOut = () => {
-      this.$emit("blur", void 0, { bubbles: false });
-    };
-    // Reformat the presentation value when the locale changes
-    this.#localeChangeHandler = {
-      handleChange: () => {
-        this._updatePresentationValue();
-      }
-    };
-    this._popupOpen = false;
-    this.#dismissOnClickOutside = (event) => {
-      if (!this._popupOpen) {
-        return;
-      }
-      const path = event.composedPath();
-      const elementsToIgnoreClicksOn = [this._dialogEl, this._calendarButtonEl];
-      if (!elementsToIgnoreClicksOn.some((element) => path.includes(element))) {
-        this._closePopup(false);
-      }
-    };
-    this._presentationValue = "";
-    this._numCalendars = 1;
-    /**
-     * @internal
-     */
-    this._hideDatesOutsideMonth = false;
-    this._lastFocussedDate = null;
-    this._monthPickerYear = null;
-    this._lastFocussedMonth = null;
-    this.value = "";
-    this.min = "";
-    this.max = "";
-  }
-  /**
-   * @internal
-   */
-  minChanged(_, newMin) {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.min = newMin;
-      this.validate();
-    }
-  }
-  /**
-   * @internal
-   */
-  maxChanged(_, newMax) {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.max = newMax;
-      this.validate();
-    }
-  }
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-      this.validate();
-    }
-  }
-  _adjustSelectedMonthToEnsureVisibilityOf(date) {
-    const month = monthOfDate(date);
-    const firstDisplayedMonth = this._selectedMonth;
-    const lastDisplayedMonth = addMonths(
-      this._selectedMonth,
-      this._numCalendars - 1
-    );
-    if (compareMonths(month, firstDisplayedMonth) < 0) {
-      this._selectedMonth = month;
-      return true;
-    } else if (compareMonths(month, lastDisplayedMonth) > 0) {
-      this._selectedMonth = addMonths(month, 1 - this._numCalendars);
-      return true;
-    }
-    return false;
-  }
-  /**
-   * @internal
-   */
-  _isDateInValidRange(date) {
-    return (!this.min || compareDateStr(date, this.min) >= 0) && (!this.max || compareDateStr(date, this.max) <= 0);
-  }
-  #isMonthAfterValidRange(month) {
-    return this.max && compareMonths(month, monthOfDate(this.max)) > 0;
-  }
-  #isMonthBeforeValidRange(month) {
-    return this.min && compareMonths(month, monthOfDate(this.min)) < 0;
-  }
-  /**
-   * @internal
-   */
-  _isMonthInValidRange(month) {
-    return !(this.#isMonthBeforeValidRange(month) || this.#isMonthAfterValidRange(month));
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    document.addEventListener("click", this.#dismissOnClickOutside);
-    this.addEventListener("focusin", this.#onFocusIn);
-    this.addEventListener("focusout", this.#onFocusOut);
-    this.#localeChangeObserver = Observable.binding(
-      () => this.locale,
-      this.#localeChangeHandler
-    );
-    this.#localeChangeObserver.observe(this, defaultExecutionContext);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("click", this.#dismissOnClickOutside);
-    this.removeEventListener("focusin", this.#onFocusIn);
-    this.removeEventListener("focusout", this.#onFocusOut);
-    this.#localeChangeObserver.disconnect();
-  }
-  #onFocusIn;
-  #onFocusOut;
-  /**
-   * @internal
-   */
-  validate() {
-    if (this.proxy) {
-      this.proxy.setCustomValidity(this._getCustomValidationError() ?? "");
-    }
-    super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
-  }
-  #localeChangeHandler;
-  #localeChangeObserver;
-  #dismissOnClickOutside;
-  #openPopupIfPossible() {
-    if (!this.readOnly) {
-      this._popupOpen = true;
-    }
-  }
-  /**
-   * @internal
-   */
-  _closePopup(restoreFocusToTextField = true) {
-    this._popupOpen = false;
-    this._monthPickerYear = null;
-    if (restoreFocusToTextField) {
-      this._textFieldEl.focus();
-    }
-  }
-  /**
-   * On keydown anywhere in the date picker.
-   * @internal
-   */
-  _onBaseKeyDown(event) {
-    if (this._popupOpen && handleEscapeKeyAndStopPropogation(event)) {
-      this._closePopup();
-      return false;
-    }
-    if (this._trappedFocus(
-      event,
-      () => this.shadowRoot.querySelectorAll(`
-				.dialog .button:not(:disabled),
-				.dialog .vwc-button:not(:disabled)
-			`)
-    )) {
-      return false;
-    }
-    return true;
-  }
-  /**
-   * @internal
-   */
-  _presentationValueChanged() {
-    this.dirtyValue = true;
-    this.validate();
-  }
-  /**
-   * @internal
-   */
-  _onTextFieldInput(event) {
-    const textField = event.currentTarget;
-    this._presentationValue = textField.value;
-  }
-  /**
-   * @internal
-   */
-  _onCalendarButtonClick() {
-    if (this._popupOpen) {
-      this._closePopup();
-    } else {
-      this.#openPopupIfPossible();
-      DOM.processUpdates();
-      const tabbableDate = this._tabbableDate;
-      if (tabbableDate)
-        this.shadowRoot.querySelector(
-          `[data-date="${tabbableDate}"]`
-        ).focus();
-    }
-  }
-  // --- Dialog header ---
-  /**
-   * @internal
-   */
-  _onTitleActionClick() {
-    if (this._inMonthPicker) {
-      this._monthPickerYear = null;
-    } else {
-      this._monthPickerYear = this._selectedMonth.year;
-    }
-  }
-  get _isPrevYearDisabled() {
-    const currentYear = this._inMonthPicker ? this._monthPickerYear : this._selectedMonth.year;
-    const prevYear = currentYear - 1;
-    return this.min && prevYear < yearOfDate(this.min);
-  }
-  /**
-   * @internal
-   */
-  _onPrevYearClick() {
-    if (this._inMonthPicker) {
-      this._monthPickerYear = this._monthPickerYear - 1;
-    } else {
-      this._selectedMonth = {
-        year: this._selectedMonth.year - 1,
-        month: this._selectedMonth.month
-      };
-    }
-  }
-  get _isNextYearDisabled() {
-    const currentYear = this._inMonthPicker ? this._monthPickerYear : this._selectedMonth.year;
-    const nextYear = currentYear + 1;
-    return this.max && nextYear > yearOfDate(this.max);
-  }
-  /**
-   * @internal
-   */
-  _onNextYearClick() {
-    if (this._inMonthPicker) {
-      this._monthPickerYear = this._monthPickerYear + 1;
-    } else {
-      this._selectedMonth = {
-        year: this._selectedMonth.year + 1,
-        month: this._selectedMonth.month
-      };
-    }
-  }
-  /**
-   * @internal
-   */
-  get _isPrevMonthDisabled() {
-    return this.#isMonthBeforeValidRange(addMonths(this._selectedMonth, -1));
-  }
-  /**
-   * @internal
-   */
-  _onPrevMonthClick() {
-    this._selectedMonth = addMonths(this._selectedMonth, -1);
-  }
-  /**
-   * @internal
-   */
-  get _isNextMonthDisabled() {
-    return this.#isMonthAfterValidRange(addMonths(this._selectedMonth, 1));
-  }
-  /**
-   * @internal
-   */
-  _onNextMonthClick() {
-    this._selectedMonth = addMonths(this._selectedMonth, 1);
-  }
-  /**
-   * @internal
-   */
-  get _segments() {
-    const segments = [];
-    if (this._inMonthPicker) {
-      segments.push({
-        id: 0,
-        type: "month-picker",
-        title: `${this._monthPickerYear}`,
-        titleClickable: true,
-        prevYearButton: true,
-        nextYearButton: true,
-        months: buildMonthPickerGrid(
-          this._monthPickerYear,
-          this.locale.datePicker
-        )
-      });
-    } else {
-      for (let i = 0; i < this._numCalendars; i++) {
-        const month = addMonths(this._selectedMonth, i);
-        const isSingle = this._numCalendars === 1;
-        const isFirst = i === 0;
-        const isLast = i === this._numCalendars - 1;
-        segments.push({
-          id: i,
-          type: "calendar",
-          title: `${this.locale.datePicker.months.name[month.month]} ${month.year}`,
-          titleClickable: isSingle,
-          prevYearButton: isFirst && isSingle,
-          prevMonthButton: isFirst,
-          nextMonthButton: isLast,
-          nextYearButton: isLast && isSingle,
-          calendar: buildCalendarGrid(month, this.locale.datePicker)
-        });
-      }
-    }
-    return segments;
-  }
-  /**
-   * @internal
-   */
-  _isDateSelected(_) {
-    return false;
-  }
-  /**
-   * @internal
-   */
-  _isDateInSelectedRange(_) {
-    return false;
-  }
-  /**
-   * @internal
-   */
-  _isDateRangeStart(_) {
-    return false;
-  }
-  /**
-   * @internal
-   */
-  _isDateRangeEnd(_) {
-    return false;
-  }
-  /**
-   * @internal
-   */
-  _onDateMouseEnter(_) {
-  }
-  /**
-   * @internal
-   */
-  _onDateMouseLeave(_) {
-  }
-  /**
-   * Handle keydown on a date in the calendar.
-   * @internal
-   */
-  _onDateKeydown(date, event) {
-    let newDate = null;
-    if (event.key === "ArrowUp") {
-      newDate = addDays(date, -7);
-    } else if (event.key === "ArrowDown") {
-      newDate = addDays(date, 7);
-    } else if (event.key === "ArrowLeft") {
-      newDate = addDays(date, -1);
-    } else if (event.key === "ArrowRight") {
-      newDate = addDays(date, 1);
-    }
-    if (newDate && this._isDateInValidRange(newDate)) {
-      if (this._adjustSelectedMonthToEnsureVisibilityOf(newDate)) {
-        DOM.processUpdates();
-      }
-      this._dialogEl.querySelector(
-        `[data-date="${newDate}"]`
-      ).focus();
-      return false;
-    }
-    return true;
-  }
-  /**
-   * @internal
-   */
-  _onDateFocus(date) {
-    this._lastFocussedDate = date;
-  }
-  get _tabbableDate() {
-    const datesInSegments = this._segments.filter(
-      (segment) => segment.type === "calendar"
-    ).flatMap((segment) => segment.calendar.grid.flat().map((d) => d.date));
-    const candidates = [
-      this._lastFocussedDate,
-      ...this._getSelectedDates(),
-      currentDateStr(),
-      ...datesInSegments
-    ];
-    const firstVisibleMonth = this._selectedMonth;
-    const lastVisibleMonth = addMonths(
-      this._selectedMonth,
-      this._numCalendars - 1
-    );
-    return candidates.find(
-      (date) => date && compareMonths(monthOfDate(date), firstVisibleMonth) >= 0 && compareMonths(monthOfDate(date), lastVisibleMonth) <= 0 && this._isDateInValidRange(date)
-    ) ?? null;
-  }
-  /**
-   * @internal
-   */
-  get _inMonthPicker() {
-    return this._monthPickerYear !== null;
-  }
-  /**
-   * Handle month selected in the month picker.
-   * @internal
-   */
-  _onMonthClick(month) {
-    this._selectedMonth = month;
-    this._monthPickerYear = null;
-  }
-  /**
-   * Handle keydown on a month in the month picker.
-   * @internal
-   */
-  _onMonthKeydown(month, event) {
-    let newMonth = null;
-    if (event.key === "ArrowUp") {
-      newMonth = addMonths(month, -MonthsPerRow);
-    } else if (event.key === "ArrowDown") {
-      newMonth = addMonths(month, MonthsPerRow);
-    } else if (event.key === "ArrowLeft") {
-      newMonth = addMonths(month, -1);
-    } else if (event.key === "ArrowRight") {
-      newMonth = addMonths(month, 1);
-    }
-    if (newMonth && this._isMonthInValidRange(newMonth)) {
-      if (newMonth.year !== this._monthPickerYear) {
-        this._monthPickerYear = newMonth.year;
-        DOM.processUpdates();
-      }
-      this._dialogEl.querySelector(
-        `[data-month="${monthToStr(newMonth)}"]`
-      ).focus();
-      return false;
-    }
-    return true;
-  }
-  /**
-   * @internal
-   */
-  _onMonthFocus(month) {
-    this._lastFocussedMonth = month;
-  }
-  get _tabbableMonth() {
-    const monthsInSegments = this._segments.filter(
-      (segments) => segments.type === "month-picker"
-    ).flatMap((segment) => segment.months.flat().map((c) => c.month));
-    const candidates = [
-      this._lastFocussedMonth,
-      this._selectedMonth,
-      getCurrentMonth(),
-      ...monthsInSegments
-    ];
-    return candidates.find(
-      (month) => month && month.year === this._monthPickerYear && this._isMonthInValidRange(month)
-    ) ?? null;
-  }
-  // --- Dialog footer ---
-  /**
-   * @internal
-   */
-  _onOkClick() {
-    this._closePopup();
-  }
-  /**
-   * @internal
-   */
-  _onClearClick() {
-    this._closePopup();
-  }
-}
-__decorateClass([
-  attr({ converter: ValidDateFilter })
-], DatePickerBase.prototype, "min", 2);
-__decorateClass([
-  attr({ converter: ValidDateFilter })
-], DatePickerBase.prototype, "max", 2);
-__decorateClass([
-  attr({ attribute: "value" })
-], DatePickerBase.prototype, "initialValue", 2);
-__decorateClass([
-  attr({ attribute: "current-value" })
-], DatePickerBase.prototype, "currentValue", 2);
-__decorateClass([
-  attr({ attribute: "readonly", mode: "boolean" })
-], DatePickerBase.prototype, "readOnly", 2);
-__decorateClass([
-  observable
-], DatePickerBase.prototype, "_selectedMonth", 2);
-__decorateClass([
-  observable
-], DatePickerBase.prototype, "_popupOpen", 2);
-__decorateClass([
-  observable
-], DatePickerBase.prototype, "_presentationValue", 2);
-__decorateClass([
-  volatile
-], DatePickerBase.prototype, "_isPrevYearDisabled", 1);
-__decorateClass([
-  volatile
-], DatePickerBase.prototype, "_isNextYearDisabled", 1);
-__decorateClass([
-  observable
-], DatePickerBase.prototype, "_numCalendars", 2);
-__decorateClass([
-  observable
-], DatePickerBase.prototype, "_lastFocussedDate", 2);
-__decorateClass([
-  volatile
-], DatePickerBase.prototype, "_tabbableDate", 1);
-__decorateClass([
-  observable
-], DatePickerBase.prototype, "_monthPickerYear", 2);
-__decorateClass([
-  observable
-], DatePickerBase.prototype, "_lastFocussedMonth", 2);
-__decorateClass([
-  volatile
-], DatePickerBase.prototype, "_tabbableMonth", 1);
-applyMixinsWithObservables(
-  DatePickerBase,
-  Localized,
-  FormElementHelperText,
-  TrappedFocus
-);
-
-const formatPresentationDate = (dateStr, locale) => {
-  const date = parseDateStr(dateStr);
-  return format(date, locale.dateFormat);
-};
-const parsePresentationDate = (presentationDate, locale) => {
-  const date = parse(presentationDate, locale.dateFormat, /* @__PURE__ */ new Date());
-  return formatDateStr(date);
+		</div>
+	`;
 };
 
-export { DatePickerBase as D, DatePickerBaseTemplate as a, compareDateStr as c, formatPresentationDate as f, isValidDateStr as i, parsePresentationDate as p, styles as s };
+export { CalendarPicker as C, MinMaxCalendarPicker as M, ValidDateFilter as V, CalendarPickerTemplate as a, compareDateStr as b, calendarStyles as c, currentDateStr as d, formatPresentationDate as f, isValidDateStr as i, parsePresentationDate as p };