@vonage/vivid 4.17.0 → 4.18.0

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

@@ -1,23 +1,13 @@
 'use strict';
 
-const definition$1 = require('./definition11.cjs');
-const definition = require('./definition64.cjs');
-const textField = require('./text-field.cjs');
-const definition$2 = require('./definition22.cjs');
-const ref = require('./ref.cjs');
-const slotted = require('./slotted.cjs');
+const vividElement = require('./vivid-element.cjs');
+const definition$1 = require('./definition23.cjs');
+const definition = require('./definition11.cjs');
 const repeat = require('./repeat.cjs');
 const when = require('./when.cjs');
-const vividElement = require('./vivid-element.cjs');
 const classNames = require('./class-names.cjs');
-const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
-const index = require('./index.cjs');
-const formAssociated = require('./form-associated.cjs');
-const trappedFocus = require('./trapped-focus.cjs');
-const formElements = require('./form-elements.cjs');
-const localized = require('./localized.cjs');
 
-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
@@ -5505,6 +5495,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,340 +5521,28 @@ 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")}`;
 
-function renderDialogHeader(context) {
-  const buttonTag = context.tagFor(definition$1.Button);
-  return vividElement.html`<div class="header">
-		${when.when(
-    (x) => x.prevYearButton,
-    vividElement.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()}"
-					></${buttonTag}>
-		`
-  )}
-		${when.when(
-    (x) => x.prevMonthButton,
-    vividElement.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()}"
-					></${buttonTag}>
-		`
-  )}
-		<div class="title">
-			${when.when(
-    (x) => x.titleClickable,
-    vividElement.html`
-					<button
-						tabindex="1"
-						id="${(x) => `grid-label-${x.id}`}"
-						class="title-action button"
-						aria-live="polite"
-						@click="${(_, c) => c.parent._onTitleActionClick()}"
-					>
-						${(x) => x.title}
-					</button>
-				`
-  )}
-			${when.when(
-    (x) => !x.titleClickable,
-    vividElement.html`
-					<div
-						id="${(x) => `grid-label-${x.id}`}"
-						class="title-action"
-						aria-live="polite"
-					>
-						${(x) => x.title}
-					</div>
-				`
-  )}
-		</div>
+const yearOfDate = (dateStr) => {
+  const date = parseDateStr(dateStr);
+  return date.getFullYear();
+};
 
-		${when.when(
-    (x) => x.nextMonthButton,
-    vividElement.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}>
-			`
-  )}
-		${when.when(
-    (x) => x.nextYearButton,
-    vividElement.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}>
-			`
-  )}
-	</div>`;
-}
-function renderCalendarGrid(context) {
-  const dividerTag = context.tagFor(definition$2.Divider);
-  return vividElement.html`<div
-		class="calendar"
-		role="grid"
-		aria-labelledby="${(x) => `grid-label-${x.id}`}"
-	>
-		<div class="calendar-weekdays" role="row">
-			${repeat.repeat(
-    (x) => x.calendar.weekdays,
-    vividElement.html`
-					<div
-						class="calendar-weekday"
-						role="columnheader"
-						aria-label="${(x) => x.name}"
-					>
-						${(x) => x.shortName}
-					</div>
-				`
-  )}
-		</div>
-		<${dividerTag} class="calendar-separator" role="presentation"></${dividerTag}>
-		${repeat.repeat(
-    (x) => x.calendar.grid,
-    vividElement.html` <div class="calendar-week" role="row">
-				${repeat.repeat(
-      (x) => x,
-      vividElement.html`
-			${when.when(
-        (x, c) => c.parentContext.parentContext.parent._hideDatesOutsideMonth && x.isOutsideMonth,
-        vividElement.html`<div class="calendar-day"></div>`
-      )}
-			${when.when(
-        (x, c) => !c.parentContext.parentContext.parent._hideDatesOutsideMonth || !x.isOutsideMonth,
-        vividElement.html` <span role="gridcell">
-					<button
-						class="${(x, c) => classNames.classNames(
-          "calendar-day",
-          "button",
-          [
-            "current",
-            x.date === c.parentContext.parentContext.parent._currentDate
-          ],
-          [
-            "selected",
-            c.parentContext.parentContext.parent._isDateSelected(x.date)
-          ],
-          [
-            "range",
-            c.parentContext.parentContext.parent._isDateInSelectedRange(
-              x.date
-            )
-          ],
-          [
-            "start",
-            c.parentContext.parentContext.parent._isDateRangeStart(
-              x.date
-            )
-          ],
-          [
-            "end",
-            c.parentContext.parentContext.parent._isDateRangeEnd(x.date)
-          ],
-          ["outside-month", x.isOutsideMonth]
-        )}"
-						?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)}"
-						@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>`
-      )}
-				</div>
-			`
-    )}
-			</div>`
-  )}`;
-}
-function renderMonthPickerGrid(context) {
-  const dividerTag = context.tagFor(definition$2.Divider);
-  return vividElement.html`
-		<${dividerTag}
-			class="months-separator"
-			role="presentation"
-		></${dividerTag}>
-		<div
-		class="month-grid"
-		role="grid"
-		aria-labelledby="grid-label"
-	>
-		${repeat.repeat(
-    (x) => x.months,
-    vividElement.html`
-				<div class="months-row" role="row">
-					${repeat.repeat(
-      (x) => x,
-      vividElement.html`
-							<span role="gridcell">
-								<button
-									class="${(x, c) => classNames.classNames(
-        "month",
-        "button",
-        [
-          "current",
-          areMonthsEqual(
-            x.month,
-            c.parentContext.parentContext.parent._currentMonth
-          )
-        ],
-        [
-          "selected",
-          areMonthsEqual(
-            x.month,
-            c.parentContext.parentContext.parent._selectedMonth
-          )
-        ]
-      )}"
-									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(
-        x.month,
-        c.parentContext.parentContext.parent._selectedMonth
-      )}"
-									data-month="${(x) => monthToStr(x.month)}"
-									?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(
-        x.month
-      )}"
-									@click="${(x, c) => c.parentContext.parentContext.parent._onMonthClick(
-        x.month
-      )}"
-									@focus="${(x, c) => c.parentContext.parentContext.parent._onMonthFocus(
-        x.month
-      )}"
-									@keydown="${(x, c) => c.parentContext.parentContext.parent._onMonthKeydown(
-        x.month,
-        c.event
-      )}"
-								>
-									${(x) => x.label}
-								</button>
-							</span>
-						`
-    )}
-				</div>
-			`
-  )}
-	</div>`;
-}
-const DatePickerBaseTemplate = (context) => {
-  const popupTag = context.tagFor(definition.Popup);
-  const textFieldTag = context.tagFor(textField.TextField);
-  const buttonTag = context.tagFor(definition$1.Button);
-  return vividElement.html`<div class="base" @keydown="${(x, { event }) => x._onBaseKeyDown(event)}">
-		<${textFieldTag} id="text-field"
-										 ${ref.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.slotted("_helperTextSlottedContent")}
-			></slot>
-			<${buttonTag}
-				id="calendar-button"
-				${ref.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.ref(
-    "_dialogEl"
-  )} aria-modal="true" aria-label="${(x) => x.locale.datePicker.chooseDateLabel}">
-				<div class="segments">
-					${repeat.repeat(
-    (x) => x._segments,
-    vividElement.html` <div class="segment">
-							${renderDialogHeader(context)}
-							${when.when(
-      (x) => x.type === "month-picker",
-      vividElement.html`${renderMonthPickerGrid(context)}`
-    )}
-							${when.when(
-      (x) => x.type === "calendar",
-      vividElement.html`${renderCalendarGrid(context)}`
-    )}
-						</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 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) => {
@@ -5911,610 +5598,753 @@ const buildCalendarGrid = (month, locale) => {
   };
 };
 
-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.VividElement {
-}
-class FormAssociatedDatePickerBase extends formAssociated.FormAssociated(
-  _DatePickerBase
-) {
-  constructor() {
-    super(...arguments);
-    this.proxy = document.createElement("input");
-  }
-}
-
-var __defProp = Object.defineProperty;
+var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+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(target, key, result);
+  if (kind && result) __defProp$1(target, key, result);
   return result;
 };
-const ValidDateFilter = {
-  fromView: (value) => {
-    if (value && isValidDateStr(value)) {
-      return value;
+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 = "";
     }
-    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();
+    _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;
+    }
     /**
-     * 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();
+    _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) {
+        vividElement.DOM.processUpdates();
+        const tabbableDate = this._tabbableDate;
+        if (tabbableDate)
+          this.shadowRoot.querySelector(
+            `[data-date="${tabbableDate}"]`
+          ).focus();
       }
-    };
-    this._popupOpen = false;
-    this.#dismissOnClickOutside = (event) => {
-      if (!this._popupOpen) {
-        return;
+    }
+    // --- Calendar header ---
+    /**
+     * @internal
+     */
+    _onTitleActionClick() {
+      if (this._inMonthPicker) {
+        this._monthPickerYear = null;
+      } else {
+        this._monthPickerYear = this._selectedMonth.year;
       }
-      const path = event.composedPath();
-      const elementsToIgnoreClicksOn = [this._dialogEl, this._calendarButtonEl];
-      if (!elementsToIgnoreClicksOn.some((element) => path.includes(element))) {
-        this._closePopup(false);
+    }
+    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
+        };
       }
-    };
-    this._presentationValue = "";
-    this._numCalendars = 1;
+    }
+    get _isNextYearDisabled() {
+      const currentYear = this._inMonthPicker ? this._monthPickerYear : this._selectedMonth.year;
+      const nextYear = currentYear + 1;
+      return this._resolvedMaxDate && nextYear > yearOfDate(this._resolvedMaxDate);
+    }
     /**
      * @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();
+    _onNextYearClick() {
+      if (this._inMonthPicker) {
+        this._monthPickerYear = this._monthPickerYear + 1;
+      } else {
+        this._selectedMonth = {
+          year: this._selectedMonth.year + 1,
+          month: this._selectedMonth.month
+        };
+      }
     }
-  }
-  /**
-   * @internal
-   */
-  maxChanged(_, newMax) {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.max = newMax;
-      this.validate();
+    /**
+     * @internal
+     */
+    get _isPrevMonthDisabled() {
+      return this.#isMonthBeforeValidRange(addMonths(this._selectedMonth, -1));
     }
-  }
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    if (this.proxy instanceof HTMLInputElement) {
-      this.proxy.readOnly = this.readOnly;
-      this.validate();
+    /**
+     * @internal
+     */
+    _onPrevMonthClick() {
+      this._selectedMonth = addMonths(this._selectedMonth, -1);
     }
-  }
-  _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;
+    /**
+     * @internal
+     */
+    get _isNextMonthDisabled() {
+      return this.#isMonthAfterValidRange(addMonths(this._selectedMonth, 1));
     }
-    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 = vividElement.Observable.binding(
-      () => this.locale,
-      this.#localeChangeHandler
-    );
-    this.#localeChangeObserver.observe(this, vividElement.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() ?? "");
+    /**
+     * @internal
+     */
+    _onNextMonthClick() {
+      this._selectedMonth = addMonths(this._selectedMonth, 1);
     }
-    super.validate(this._textFieldEl?.querySelector("input") ?? void 0);
-  }
-  #localeChangeHandler;
-  #localeChangeObserver;
-  #dismissOnClickOutside;
-  #openPopupIfPossible() {
-    if (!this.readOnly) {
-      this._popupOpen = true;
+    /**
+     * @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
-   */
-  _closePopup(restoreFocusToTextField = true) {
-    this._popupOpen = false;
-    this._monthPickerYear = null;
-    if (restoreFocusToTextField) {
-      this._textFieldEl.focus();
+    /**
+     * @internal
+     */
+    _isDateSelected(_) {
+      return false;
     }
-  }
-  /**
-   * On keydown anywhere in the date picker.
-   * @internal
-   */
-  _onBaseKeyDown(event) {
-    if (this._popupOpen && index.handleEscapeKeyAndStopPropogation(event)) {
-      this._closePopup();
+    /**
+     * @internal
+     * @private
+     */
+    _isDateInSelectedRange(_) {
       return false;
     }
-    if (this._trappedFocus(
-      event,
-      () => this.shadowRoot.querySelectorAll(`
-				.dialog .button:not(:disabled),
-				.dialog .vwc-button:not(:disabled)
-			`)
-    )) {
+    /**
+     * @internal
+     */
+    _isDateRangeStart(_) {
       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();
-      vividElement.DOM.processUpdates();
-      const tabbableDate = this._tabbableDate;
-      if (tabbableDate)
-        this.shadowRoot.querySelector(
-          `[data-date="${tabbableDate}"]`
+    /**
+     * @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)) {
+          vividElement.DOM.processUpdates();
+        }
+        this._dialogEl.querySelector(
+          `[data-date="${newDate}"]`
         ).focus();
+        return false;
+      }
+      return true;
     }
-  }
-  // --- Dialog header ---
-  /**
-   * @internal
-   */
-  _onTitleActionClick() {
-    if (this._inMonthPicker) {
+    /**
+     * @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;
-    } 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
-      };
+    /**
+     * 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;
+          vividElement.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;
     }
   }
-  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
-      };
+  __decorateClass$1([
+    vividElement.observable
+  ], CalendarPickerElement.prototype, "_selectedMonth", 2);
+  __decorateClass$1([
+    vividElement.volatile
+  ], CalendarPickerElement.prototype, "_isPrevYearDisabled", 1);
+  __decorateClass$1([
+    vividElement.volatile
+  ], CalendarPickerElement.prototype, "_isNextYearDisabled", 1);
+  __decorateClass$1([
+    vividElement.observable
+  ], CalendarPickerElement.prototype, "_numCalendars", 2);
+  __decorateClass$1([
+    vividElement.observable
+  ], CalendarPickerElement.prototype, "_lastFocussedDate", 2);
+  __decorateClass$1([
+    vividElement.volatile
+  ], CalendarPickerElement.prototype, "_tabbableDate", 1);
+  __decorateClass$1([
+    vividElement.observable
+  ], CalendarPickerElement.prototype, "_monthPickerYear", 2);
+  __decorateClass$1([
+    vividElement.observable
+  ], CalendarPickerElement.prototype, "_lastFocussedMonth", 2);
+  __decorateClass$1([
+    vividElement.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;
   }
-  /**
-   * @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)
-        });
+};
+const MinMaxCalendarPicker = (SuperClass) => {
+  class MinMaxDatePickerElement extends SuperClass {
+    /**
+     * @internal
+     */
+    minChanged(_, newMin) {
+      if (this.proxy instanceof HTMLInputElement) {
+        this.proxy.min = newMin;
+        this.validate();
       }
     }
-    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);
+    /**
+     * @internal
+     */
+    get _resolvedMinDate() {
+      return this.min;
     }
-    if (newDate && this._isDateInValidRange(newDate)) {
-      if (this._adjustSelectedMonthToEnsureVisibilityOf(newDate)) {
-        vividElement.DOM.processUpdates();
+    /**
+     * @internal
+     */
+    maxChanged(_, newMax) {
+      if (this.proxy instanceof HTMLInputElement) {
+        this.proxy.max = newMax;
+        this.validate();
       }
-      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);
+    /**
+     * The latest accepted date.
+     * @internal
+     */
+    get _resolvedMaxDate() {
+      return this.max;
     }
-    if (newMonth && this._isMonthInValidRange(newMonth)) {
-      if (newMonth.year !== this._monthPickerYear) {
-        this._monthPickerYear = newMonth.year;
-        vividElement.DOM.processUpdates();
-      }
-      this._dialogEl.querySelector(
-        `[data-month="${monthToStr(newMonth)}"]`
-      ).focus();
-      return false;
+    constructor(...args) {
+      super(...args);
+      this.min = "";
+      this.max = "";
     }
-    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([
-  vividElement.attr({ converter: ValidDateFilter })
-], DatePickerBase.prototype, "min", 2);
-__decorateClass([
-  vividElement.attr({ converter: ValidDateFilter })
-], DatePickerBase.prototype, "max", 2);
-__decorateClass([
-  vividElement.attr({ attribute: "value" })
-], DatePickerBase.prototype, "initialValue", 2);
-__decorateClass([
-  vividElement.attr({ attribute: "current-value" })
-], DatePickerBase.prototype, "currentValue", 2);
-__decorateClass([
-  vividElement.attr({ attribute: "readonly", mode: "boolean" })
-], DatePickerBase.prototype, "readOnly", 2);
-__decorateClass([
-  vividElement.observable
-], DatePickerBase.prototype, "_selectedMonth", 2);
-__decorateClass([
-  vividElement.observable
-], DatePickerBase.prototype, "_popupOpen", 2);
-__decorateClass([
-  vividElement.observable
-], DatePickerBase.prototype, "_presentationValue", 2);
-__decorateClass([
-  vividElement.volatile
-], DatePickerBase.prototype, "_isPrevYearDisabled", 1);
-__decorateClass([
-  vividElement.volatile
-], DatePickerBase.prototype, "_isNextYearDisabled", 1);
-__decorateClass([
-  vividElement.observable
-], DatePickerBase.prototype, "_numCalendars", 2);
-__decorateClass([
-  vividElement.observable
-], DatePickerBase.prototype, "_lastFocussedDate", 2);
-__decorateClass([
-  vividElement.volatile
-], DatePickerBase.prototype, "_tabbableDate", 1);
-__decorateClass([
-  vividElement.observable
-], DatePickerBase.prototype, "_monthPickerYear", 2);
-__decorateClass([
-  vividElement.observable
-], DatePickerBase.prototype, "_lastFocussedMonth", 2);
-__decorateClass([
-  vividElement.volatile
-], DatePickerBase.prototype, "_tabbableMonth", 1);
-applyMixinsWithObservables.applyMixinsWithObservables(
-  DatePickerBase,
-  localized.Localized,
-  formElements.FormElementHelperText,
-  trappedFocus.TrappedFocus
-);
-
-const formatPresentationDate = (dateStr, locale) => {
-  const date = parseDateStr(dateStr);
-  return format(date, locale.dateFormat);
+  __decorateClass([
+    vividElement.attr({ converter: ValidDateFilter })
+  ], MinMaxDatePickerElement.prototype, "min");
+  __decorateClass([
+    vividElement.attr({ converter: ValidDateFilter })
+  ], MinMaxDatePickerElement.prototype, "max");
+  return MinMaxDatePickerElement;
 };
-const parsePresentationDate = (presentationDate, locale) => {
-  const date = parse(presentationDate, locale.dateFormat, /* @__PURE__ */ new Date());
-  return formatDateStr(date);
+
+function renderDialogHeader(context) {
+  const buttonTag = context.tagFor(definition.Button);
+  return vividElement.html` <div class="header">
+		${when.when(
+    (x) => x.prevYearButton,
+    vividElement.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.calendarPicker.prevYearLabel}'
+						?disabled='${(_, c) => c.parent._isPrevYearDisabled}'
+						@click='${(_, c) => c.parent._onPrevYearClick()}'
+					></${buttonTag}>
+				`
+  )}
+		${when.when(
+    (x) => x.prevMonthButton,
+    vividElement.html`
+					<${buttonTag}
+						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.when(
+    (x) => x.titleClickable,
+    vividElement.html`
+					<button
+						tabindex="1"
+						id="${(x) => `grid-label-${x.id}`}"
+						class="title-action button"
+						aria-live="polite"
+						@click="${(_, c) => c.parent._onTitleActionClick()}"
+					>
+						${(x) => x.title}
+					</button>
+				`
+  )}
+			${when.when(
+    (x) => !x.titleClickable,
+    vividElement.html`
+					<div
+						id="${(x) => `grid-label-${x.id}`}"
+						class="title-action"
+						aria-live="polite"
+					>
+						${(x) => x.title}
+					</div>
+				`
+  )}
+		</div>
+
+		${when.when(
+    (x) => x.nextMonthButton,
+    vividElement.html`
+					<${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.when(
+    (x) => x.nextYearButton,
+    vividElement.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.calendarPicker.nextYearLabel}'
+						?disabled='${(_, c) => c.parent._isNextYearDisabled}'
+						@click='${(_, c) => c.parent._onNextYearClick()}'
+					></${buttonTag}>
+				`
+  )}
+	</div>`;
+}
+function renderCalendarGrid(context) {
+  const dividerTag = context.tagFor(definition$1.Divider);
+  return vividElement.html`
+		<div
+			class='calendar'
+			role='grid'
+			aria-labelledby='${(x) => `grid-label-${x.id}`}'
+		>
+			<div class='calendar-weekdays' role='row'>
+				${repeat.repeat(
+    (x) => x.calendar.weekdays,
+    vividElement.html`
+						<div
+							class="calendar-weekday"
+							role="columnheader"
+							aria-label="${(x) => x.name}"
+						>
+							${(x) => x.shortName}
+						</div>
+					`
+  )}
+			</div>
+			<${dividerTag} class='calendar-separator' role='presentation'></${dividerTag}>
+			${repeat.repeat(
+    (x) => x.calendar.grid,
+    vividElement.html` <div class="calendar-week" role="row">
+					${repeat.repeat(
+      (x) => x,
+      vividElement.html`
+								${when.when(
+        (x, c) => c.parentContext.parentContext.parent._hideDatesOutsideMonth && x.isOutsideMonth,
+        vividElement.html`<div class="calendar-day"></div>`
+      )}
+								${when.when(
+        (x, c) => !c.parentContext.parentContext.parent._hideDatesOutsideMonth || !x.isOutsideMonth,
+        vividElement.html` <span role="gridcell">
+										<button
+											class="${(x, c) => classNames.classNames(
+          "calendar-day",
+          "button",
+          [
+            "current",
+            x.date === c.parentContext.parentContext.parent._currentDate
+          ],
+          [
+            "selected",
+            c.parentContext.parentContext.parent._isDateSelected(
+              x.date
+            )
+          ],
+          [
+            "range",
+            c.parentContext.parentContext.parent._isDateInSelectedRange(
+              x.date
+            )
+          ],
+          [
+            "start",
+            c.parentContext.parentContext.parent._isDateRangeStart(
+              x.date
+            )
+          ],
+          [
+            "end",
+            c.parentContext.parentContext.parent._isDateRangeEnd(
+              x.date
+            )
+          ],
+          ["outside-month", x.isOutsideMonth]
+        )}"
+											?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
+        )}"
+											@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>`
+      )}
+								</div>
+							`
+    )}
+				</div>`
+  )}`;
+}
+function renderMonthPickerGrid(context) {
+  const dividerTag = context.tagFor(definition$1.Divider);
+  return vividElement.html`
+		<${dividerTag}
+			class='months-separator'
+			role='presentation'
+		></${dividerTag}>
+		<div
+			class='month-grid'
+			role='grid'
+			aria-labelledby='grid-label'
+		>
+			${repeat.repeat(
+    (x) => x.months,
+    vividElement.html`
+					<div class="months-row" role="row">
+						${repeat.repeat(
+      (x) => x,
+      vividElement.html`
+								<span role="gridcell">
+									<button
+										class="${(x, c) => classNames.classNames(
+        "month",
+        "button",
+        [
+          "current",
+          areMonthsEqual(
+            x.month,
+            c.parentContext.parentContext.parent._currentMonth
+          )
+        ],
+        [
+          "selected",
+          areMonthsEqual(
+            x.month,
+            c.parentContext.parentContext.parent._selectedMonth
+          )
+        ]
+      )}"
+										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(
+        x.month,
+        c.parentContext.parentContext.parent._selectedMonth
+      )}"
+										data-month="${(x) => monthToStr(x.month)}"
+										?disabled="${(x, c) => !c.parentContext.parentContext.parent._isMonthInValidRange(
+        x.month
+      )}"
+										@click="${(x, c) => c.parentContext.parentContext.parent._onMonthClick(
+        x.month
+      )}"
+										@focus="${(x, c) => c.parentContext.parentContext.parent._onMonthFocus(
+        x.month
+      )}"
+										@keydown="${(x, c) => c.parentContext.parentContext.parent._onMonthKeydown(
+        x.month,
+        c.event
+      )}"
+									>
+										${(x) => x.label}
+									</button>
+								</span>
+							`
+    )}
+					</div>
+				`
+  )}
+		</div>`;
+}
+const CalendarPickerTemplate = (context) => {
+  return vividElement.html`
+		<div class="segments">
+			${repeat.repeat(
+    (x) => x._segments,
+    vividElement.html` <div class="segment">
+					${renderDialogHeader(context)}
+					${when.when(
+      (x) => x.type === "month-picker",
+      vividElement.html`${renderMonthPickerGrid(context)}`
+    )}
+					${when.when(
+      (x) => x.type === "calendar",
+      vividElement.html`${renderCalendarGrid(context)}`
+    )}
+				</div>`
+  )}
+		</div>
+	`;
 };
 
-exports.DatePickerBase = DatePickerBase;
-exports.DatePickerBaseTemplate = DatePickerBaseTemplate;
+exports.CalendarPicker = CalendarPicker;
+exports.CalendarPickerTemplate = CalendarPickerTemplate;
+exports.MinMaxCalendarPicker = MinMaxCalendarPicker;
+exports.ValidDateFilter = ValidDateFilter;
+exports.calendarStyles = calendarStyles;
 exports.compareDateStr = compareDateStr;
+exports.currentDateStr = currentDateStr;
 exports.formatPresentationDate = formatPresentationDate;
 exports.isValidDateStr = isValidDateStr;
 exports.parsePresentationDate = parsePresentationDate;
-exports.styles = styles;