@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/collection/components/pds-datepicker/pds-datepicker.js

@@ -0,0 +1,2505 @@
+import { h, Host } from "@stencil/core";
+import { autoUpdate, computePosition, flip, hide, offset, shift, size } from "@floating-ui/dom";
+import { calendarSimple, caretDown, caretLeft, caretRight, check, remove } from "@pine-ds/icons/icons";
+import { isSpecTest } from "../../utils/form";
+import { formatMessage, resolveLocale } from "../../i18n";
+import { addDays, addMonths, clampDate, dateFormatter, daysInMonth, formatDate, isOutOfRange, isSameDay, localeFirstDayOfWeek, inMonthDayYear, monthDayRows, monthWeeks, parseIsoDate, parseMonthDay, supportedLocale, toIsoDate, toMonthDay, today, weekdayColumn, weekdayNames, } from "./date-utils";
+import { CalendarPortal } from "./calendar-portal";
+import { matchPreset, presetInRange, resolvePresets } from "./presets";
+import { RANGE_SEPARATOR, clockFor, compareDateTime, fieldFormat, joinTime, monthDayFormat, parseDateTime, parseFieldText, parseMonthDayText, parseRangeText, splitTime, formatWith, toFieldText, toValueString, } from "./value";
+const FULL_DATE = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+/** A day in month-day mode, which has no year and so no weekday. */
+const MONTH_AND_DAY = { month: 'long', day: 'numeric' };
+const DEFAULT_START_TIME = '00:00';
+const DEFAULT_END_TIME = '23:59';
+/** Ids for datepickers without a `component-id`, so their calendars' ids stay unique. */
+let fallbackIds = 0;
+/** Below this window width, range mode shows one month rather than two side by side. */
+const TWO_MONTHS_MIN_WIDTH = 640;
+/** The least height the calendar keeps when there's little room beside its field; it may cover the field then. */
+const CALENDAR_MIN_HEIGHT = 480;
+/** The calendar's gap to the window's edges. */
+const VIEWPORT_PADDING = 8;
+/** How many years either side of today the year dropdown offers without `min` or `max`. */
+const DROPDOWN_YEARS = 100;
+/** Swallows the next click anywhere, or none if it doesn't come soon, as after a drag. */
+function swallowNextClick() {
+    const swallow = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+    };
+    document.addEventListener('click', swallow, { capture: true, once: true });
+    window.setTimeout(() => document.removeEventListener('click', swallow, { capture: true }), 500);
+}
+const firstOfMonth = (date) => new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), 1));
+/** Just the day's number, in the locale's digits: Japanese and Chinese add 日 to a formatted day. */
+const dayNumberText = (formatter, date) => { var _a, _b; return (_b = (_a = formatter.formatToParts(date).find((part) => part.type === 'day')) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : formatter.format(date); };
+/**
+ * A field for one date, or in range mode a start and end date, with a calendar to pick from.
+ * The value is `YYYY-MM-DD`, or `YYYY-MM-DD/YYYY-MM-DD` for a range; with the time picker, each
+ * date carries a time, as `YYYY-MM-DDTHH:mm`. In month-day mode, for a date that comes round every
+ * year such as a birthday, it's a month and day with no year, as `--MM-DD`.
+ *
+ * @part calendar - The open calendar. It's portaled out of the datepicker, so style it with `.pds-datepicker-calendar-portal::part(calendar)`.
+ * @part presets - The list of preset ranges in the calendar, styled with `.pds-datepicker-calendar-portal::part(presets)`.
+ */
+export class PdsDatepicker {
+    constructor() {
+        /** Set when the active day should take focus on the next render. */
+        this.focusActiveDay = false;
+        this.fallbackId = `pds-datepicker-${++fallbackIds}`;
+        /** Set by a click on the label, whose forwarded click on the input shouldn't open the calendar. */
+        this.skipForwardedClick = false;
+        /** Set while an arrow key selects a preset, which auto-apply doesn't apply. */
+        this.presetByArrow = false;
+        /** The value when the calendar opened, or as last set from outside, which Cancel (without `clearable`) and Escape go back to. */
+        this.valueAtOpen = '';
+        /** Set while the datepicker commits a value itself, as opposed to one set from outside. */
+        this.committing = false;
+        /** Whether focus is in the datepicker or its calendar, for pdsFocus and pdsBlur. */
+        this.hasFocus = false;
+        /**
+         * Accessible label for the button that applies the chosen dates.
+         */
+        this.applyLabel = 'Apply';
+        /**
+         * In range mode, applies the range as soon as its end or a preset is picked, without the Apply and
+         * Cancel buttons. Has no effect with the time picker, whose times still need Apply.
+         */
+        this.autoApply = false;
+        /**
+         * Accessible label for the button that closes the calendar without changing the dates.
+         */
+        this.cancelLabel = 'Cancel';
+        /**
+         * Adds a button in the field that empties it, shown while there's a value. Where Apply and Cancel
+         * buttons show, Clear also takes the place of Cancel.
+         */
+        this.clearable = false;
+        /**
+         * Accessible label for the button that empties the field, when `clearable` is set.
+         */
+        this.clearLabel = 'Clear';
+        /**
+         * The label of the presets entry that stands for a range of your own. Range mode with presets only.
+         */
+        this.customRangeLabel = 'Custom range';
+        /**
+         * Accessible label for the end time, in range mode with the time picker.
+         */
+        this.endTimeLabel = 'End time';
+        /**
+         * How the field shows dates and reads typed ones, as tokens: `YYYY`, `MMMM` or `MMM` (month name,
+         * in the locale), `MM` or `M` (month), `DD` or `D` (day), and with the time picker `HH` or `H`
+         * (24-hour), `hh` or `h` (12-hour), `mm` and `A` (AM/PM, in the locale), as `MM/DD/YYYY`,
+         * `MMM D, YYYY` or `D.M.YYYY h:mm A`. Put literal text in brackets, as `[Due] D/M/YYYY`. The value
+         * and the change event stay ISO (`YYYY-MM-DD`; `--MM-DD` with `month-day`), whatever the format.
+         * Typed ISO dates are always accepted too. With `month-day`, a format without `YYYY` is taken as a
+         * month-and-day format and used as given, rather than reordered for the locale; leave it unset to
+         * follow the locale instead.
+         */
+        this.format = 'YYYY-MM-DD';
+        /**
+         * Accessible label for the hour in the time picker.
+         */
+        this.hourLabel = 'Hour';
+        /**
+         * The validation message the form reports when the typed text isn't a date that can be picked.
+         */
+        this.invalidDateMessage = 'Enter a date in the format shown.';
+        /**
+         * The validation message the form reports for a date after `max`. `{date}` is replaced by the
+         * latest date, in the field's format.
+         */
+        this.maxDateMessage = 'Choose {date} or earlier.';
+        /**
+         * The validation message the form reports for a date before `min`. `{date}` is replaced by the
+         * earliest date, in the field's format.
+         */
+        this.minDateMessage = 'Choose {date} or later.';
+        /**
+         * The minutes the time picker steps by, such as `15` or `30`.
+         */
+        this.minuteIncrement = 1;
+        /**
+         * Accessible label for the minute in the time picker.
+         */
+        this.minuteLabel = 'Minute';
+        /**
+         * Accessible label for the month dropdown, when `show-dropdowns` is set.
+         */
+        this.monthLabel = 'Month';
+        /**
+         * Picks a month and day with no year, for a date that comes round every year, such as a birthday.
+         * The value is `--MM-DD` (ISO 8601 without a year), the field shows the date as the locale writes
+         * a month and day, and the calendar shows each month without a year or weekdays, with February
+         * always having its 29th. Turns off `range`, `time-picker`, `show-dropdowns`, `min` and `max`, and
+         * has no effect with `auto-apply`, `presets`, `first-day-of-week`, `min-date-message` or
+         * `max-date-message`, which all depend on them.
+         */
+        this.monthDay = false;
+        /**
+         * Accessible label for the button that shows the next month.
+         */
+        this.nextMonthLabel = 'Next month';
+        /**
+         * Accessible label for the AM or PM choice in the time picker, in locales with a 12-hour clock.
+         */
+        this.periodLabel = 'AM or PM';
+        /**
+         * The placement of the calendar relative to the field.
+         */
+        this.placement = 'bottom-start';
+        /**
+         * Accessible label for the list of presets, in range mode.
+         */
+        this.presetsLabel = 'Presets';
+        /**
+         * Accessible label for the button that shows the previous month.
+         */
+        this.previousMonthLabel = 'Previous month';
+        /**
+         * Picks a range: a start and an end date, from two months side by side, applied with the Apply
+         * button. The value is `YYYY-MM-DD/YYYY-MM-DD`.
+         */
+        this.range = false;
+        /**
+         * Shows month and year dropdowns in place of the month heading, for jumping far, as to a birth year.
+         */
+        this.showDropdowns = false;
+        /**
+         * Accessible label for the start time, in range mode with the time picker.
+         */
+        this.startTimeLabel = 'Start time';
+        /**
+         * Adds hour and minute pickers below the calendar, and the value carries the time as
+         * `YYYY-MM-DDTHH:mm`. The dates are applied with the Apply button.
+         */
+        this.timePicker = false;
+        /**
+         * Accessible label for the time, with the time picker and a single date.
+         */
+        this.timeLabel = 'Time';
+        /**
+         * Accessible label for the button that opens the calendar. The selected date is added to it.
+         */
+        this.triggerLabel = 'Choose date';
+        /**
+         * The selected date as `YYYY-MM-DD`, or in range mode the range as `YYYY-MM-DD/YYYY-MM-DD`; with
+         * the time picker, each date as `YYYY-MM-DDTHH:mm`; with `month-day`, the month and day with no
+         * year, as `--MM-DD` (a full date is read too, as that month and day, and rewritten to it). An
+         * empty string when nothing is selected.
+         */
+        this.value = '';
+        /**
+         * Accessible label for the year dropdown, when `show-dropdowns` is set.
+         */
+        this.yearLabel = 'Year';
+        this.isOpen = false;
+        /** The text in the field, which may not be a valid date yet. */
+        this.text = '';
+        /** Why the typed text wasn't committed: it isn't a date, or it's before `min` or after `max`. */
+        this.textError = '';
+        /** The day the keyboard is on in the calendar, as `YYYY-MM-DD`. */
+        this.activeDate = '';
+        /** The first month on view, as the first of the month, `YYYY-MM-DD`. */
+        this.viewMonth = '';
+        /**
+         * The dates being chosen, before Apply: range mode's start and end, or the time picker's date.
+         * The end is empty while it's being picked.
+         */
+        this.draftStart = '';
+        this.draftEnd = '';
+        /** The time picker's times, as `HH:mm`. */
+        this.startTime = DEFAULT_START_TIME;
+        this.endTime = DEFAULT_END_TIME;
+        /** Range mode: the day under the pointer or keyboard, previewing the end of the range. */
+        this.previewDate = '';
+        this.onApply = () => {
+            const parts = this.draftParts();
+            if (!parts)
+                return;
+            this.commitParts(parts);
+            this.closeCalendar(true);
+        };
+        /** Cancel empties the field with `clearable`, and otherwise leaves the dates as they were. */
+        this.onCancel = () => {
+            if (this.clearable) {
+                this.commitValue('');
+            }
+            else {
+                this.restoreValueAtOpen();
+            }
+            this.closeCalendar(true);
+        };
+        this.onPresetClick = (event, preset) => {
+            this.draftStart = toIsoDate(preset.start);
+            this.draftEnd = toIsoDate(preset.end);
+            this.previewDate = '';
+            if (this.appliesOnPick && !this.presetByArrow) {
+                this.onApply();
+                return;
+            }
+            this.showDate(preset.end, true);
+            // Safari doesn't focus a clicked button; keep focus in the dialog for Escape and the Tab trap.
+            event.currentTarget.focus();
+        };
+        /** Arrow keys move between the presets, picking each, as in a radio group. Custom range only takes focus. */
+        this.onPresetsKeyDown = (event) => {
+            const step = { ArrowDown: 1, ArrowRight: 1, ArrowUp: -1, ArrowLeft: -1 }[event.key];
+            const toEdge = { Home: 'first', End: 'last' }[event.key];
+            if (!step && !toEdge)
+                return;
+            const radios = Array.from(event.currentTarget.querySelectorAll('[role="radio"]:not([disabled])'));
+            const at = radios.indexOf(event.target);
+            const next = toEdge === 'first' ? radios[0] : toEdge === 'last' ? radios[radios.length - 1] : radios[(at + step + radios.length) % radios.length];
+            if (!next)
+                return;
+            event.preventDefault();
+            next.focus();
+            if (next.classList.contains('pds-datepicker__preset') && next !== radios[radios.length - 1]) {
+                // Arrows select a preset without applying it, even with auto-apply, so every preset and
+                // Custom range stay reachable; Enter or Space applies it.
+                this.presetByArrow = true;
+                next.click();
+                this.presetByArrow = false;
+            }
+        };
+        /**
+         * Keeps a press on the clear button, by mouse or touch, from blurring the field, so the text
+         * typed in it isn't committed before the click empties it.
+         */
+        this.onClearMouseDown = (event) => {
+            event.preventDefault();
+        };
+        /** The field's clear button: empties the field and returns focus to it. */
+        this.onClearClick = () => {
+            var _a;
+            this.commitValue('');
+            this.closeCalendar(false);
+            void ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setFocus());
+        };
+        /** "Custom range" points to the calendar, where a range of your own is picked. */
+        this.onCustomRangeClick = () => {
+            var _a, _b;
+            (_b = (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.querySelector('[data-date][tabindex="0"]')) === null || _b === void 0 ? void 0 : _b.focus();
+        };
+        this.onDocumentPointerDown = (event) => {
+            var _a;
+            const path = event.composedPath();
+            if (path.includes(this.el) || (this.portal && path.includes(this.portal.host)))
+                return;
+            this.closeCalendar(false);
+            // A press on a modal's backdrop lands on its <dialog>. That press dismisses the calendar, the
+            // top layer; swallow the click it makes, so the modal under it stays open.
+            if (((_a = path[0]) === null || _a === void 0 ? void 0 : _a.localName) === 'dialog')
+                swallowNextClick();
+        };
+        /**
+         * Reports focus arriving from outside. Focus moving within the datepicker never reaches the host:
+         * once retargeted, its target and related target are both the host, so the browser skips it.
+         */
+        this.onHostFocusIn = (event) => {
+            this.focusEntered(event);
+        };
+        /**
+         * The calendar is a modal dialog while focus is in it. Opened by a click in the field, focus stays
+         * in the field and the calendar is a plain popup beside it. Set on the element rather than through
+         * state: focus often moves in from `componentDidRender`, where a state change doesn't re-render.
+         */
+        this.onCalendarFocusIn = (event) => {
+            var _a, _b;
+            this.focusEntered(event);
+            (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-modal', 'true');
+            // The dialog itself takes focus only from a click on a part that can't, as the month heading.
+            // Pass it to the active day, so Tab, Shift+Tab and the arrow keys keep working.
+            if (event.target === this.dialogEl) {
+                (_b = this.dialogEl.querySelector(`[data-date="${this.activeDate}"]`)) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll: true });
+            }
+        };
+        /**
+         * The portaled calendar is outside the datepicker, so the host never hears focus leave it: close
+         * and report blur from here when focus goes from the calendar to the rest of the page. Checked
+         * once focus has settled, with `:focus-within`, rather than from `relatedTarget`, which is
+         * retargeted past the datepicker when it sits in another component's shadow root.
+         */
+        this.onCalendarFocusOut = (event) => {
+            var _a, _b;
+            const next = event.relatedTarget;
+            if (!next || !((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.contains(next)))
+                (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.removeAttribute('aria-modal');
+            // Not gated on the calendar still being open: a press outside closes it on pointerdown, before
+            // this focusout, and focus has still left the datepicker.
+            this.checkFocusLeft(event, next !== null);
+        };
+        /** Closes the calendar and reports blur when focus leaves the datepicker, as when tabbing out. */
+        this.onHostFocusOut = (event) => {
+            const next = event.relatedTarget;
+            if (next && this.isInside(next))
+                return;
+            this.checkFocusLeft(event, next !== null);
+        };
+        // Inner pds-input events stay inside: the datepicker reports its own change, as a date.
+        this.stopInnerEvent = (event) => event.stopPropagation();
+        /** A click in the field opens the calendar beside it; the button inside toggles it on its own. */
+        this.onFieldClick = (event) => {
+            var _a, _b;
+            // The calendar and clear buttons sit in the field but act on their own.
+            const path = event.composedPath();
+            if ((this.triggerEl && path.includes(this.triggerEl)) || (this.clearEl && path.includes(this.clearEl)))
+                return;
+            // A click on the label is forwarded to the input as a second click; skip that one too.
+            const label = (_b = (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('label');
+            if (label && path.includes(label)) {
+                this.skipForwardedClick = true;
+                window.setTimeout(() => (this.skipForwardedClick = false));
+                return;
+            }
+            if (this.skipForwardedClick) {
+                this.skipForwardedClick = false;
+                return;
+            }
+            // Only the field's box: not its helper or error message.
+            const field = this.fieldReference();
+            if (field && field !== this.inputEl && !path.includes(field))
+                return;
+            this.openCalendar(false);
+        };
+        /** Typing a date or range the calendar can show moves the open calendar to it. */
+        this.onTextInput = (event) => {
+            var _a, _b;
+            event.stopPropagation();
+            this.text = String((_a = event.detail.value) !== null && _a !== void 0 ? _a : '');
+            if (!this.isOpen)
+                return;
+            const parts = this.parseText(this.text);
+            if (!parts)
+                return;
+            const [startTime, endTime] = [this.startTime, this.endTime];
+            // The times before the typed text changed them, for a pick in the calendar to go back to.
+            (_b = this.timesBeforeTyping) !== null && _b !== void 0 ? _b : (this.timesBeforeTyping = [startTime, endTime]);
+            this.loadDraft(parts);
+            if (this.hasTime) {
+                // A time picked in the calendar survives typing that doesn't change the time: text with no
+                // time, as a date part-way typed, or with the time as committed.
+                const format = this.resolvedFormat;
+                const locale = this.resolvedLocale;
+                const typed = this.isRange ? parseRangeText(this.text, format, locale) : [parseFieldText(this.text, format, locale)];
+                const committed = this.parsedValue();
+                const keeps = (i) => { var _a, _b, _c; return !((_a = typed === null || typed === void 0 ? void 0 : typed[i]) === null || _a === void 0 ? void 0 : _a.time) || ((_b = typed[i]) === null || _b === void 0 ? void 0 : _b.time) === ((_c = committed === null || committed === void 0 ? void 0 : committed[i]) === null || _c === void 0 ? void 0 : _c.time); };
+                if (keeps(0))
+                    this.startTime = startTime;
+                if (this.isRange && keeps(1))
+                    this.endTime = endTime;
+            }
+            this.showDate(parts[parts.length - 1].date);
+        };
+        this.onTextChange = (event) => {
+            event.stopPropagation();
+            if (!this.isOpen || !this.hasFooter) {
+                this.commitText();
+                return;
+            }
+            // With Apply showing, typed text is pending in the draft while focus stays in the datepicker
+            // (the calendar button, or the calendar): Apply commits it, Cancel or Escape drops it, and
+            // closing any other way commits it. Checked once focus settles.
+            window.setTimeout(() => {
+                var _a;
+                if (this.isOpen && (this.el.matches(':focus-within') || ((_a = this.portal) === null || _a === void 0 ? void 0 : _a.host.matches(':focus-within'))))
+                    return;
+                this.commitPendingText();
+            });
+        };
+        this.onTextKeyDown = (event) => {
+            event.stopPropagation();
+            const key = event.detail;
+            if (key.altKey && key.key === 'ArrowDown') {
+                key.preventDefault();
+                if (this.isOpen) {
+                    this.focusActiveDay = true;
+                    this.flushActiveDayFocus();
+                }
+                else {
+                    this.openCalendar(true);
+                }
+            }
+            else if (key.key === 'Enter' && this.isOpen) {
+                // Enter commits and closes. With Apply showing it does what Apply does, committing the
+                // pending selection, typed or picked in the calendar. Typed text that isn't a date stays,
+                // marked invalid.
+                if (!this.hasFooter || (this.text !== this.fieldText() && !this.parseText(this.text))) {
+                    this.commitText();
+                }
+                else {
+                    const parts = this.draftParts();
+                    if (parts)
+                        this.commitParts(parts);
+                }
+                if (!this.textError)
+                    this.closeCalendar(false);
+            }
+            else if (key.key === 'Escape' && this.isOpen) {
+                // Stop the field's own keydown, or a modal, popover or filter around the datepicker closes
+                // too. pdsKeyDown is emitted during that keydown, so it can still be stopped here.
+                key.preventDefault();
+                key.stopPropagation();
+                // Escape dismisses what was typed too, so the next blur doesn't commit it.
+                this.restoreValueAtOpen();
+                this.closeCalendar(false);
+            }
+        };
+        /**
+         * The calendar button's keys. Escape closes an open calendar, as in the field and the calendar,
+         * and is stopped there, so a modal or popover around the datepicker stays open. Tab goes into a
+         * calendar a click in the field opened: it's portaled to the end of the page, so Tab would
+         * otherwise skip past it.
+         */
+        this.onTriggerKeyDown = (event) => {
+            var _a;
+            if (!this.isOpen)
+                return;
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                this.restoreValueAtOpen();
+                this.closeCalendar(false);
+                return;
+            }
+            // A calendar that isn't placed and shown, as when the field is scrolled out of view, can't take
+            // focus; let Tab move on from the trigger as usual.
+            if (event.key !== 'Tab' || event.shiftKey || ((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.style.visibility) !== 'visible')
+                return;
+            event.preventDefault();
+            this.focusActiveDay = true;
+            this.flushActiveDayFocus();
+        };
+        this.onTriggerClick = () => {
+            if (this.isOpen) {
+                this.closeCalendar(true);
+            }
+            else {
+                this.openCalendar(true);
+            }
+        };
+        this.onDialogKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                event.stopPropagation();
+                // As Cancel: the dates go back to how they were when the calendar opened.
+                this.restoreValueAtOpen();
+                this.closeCalendar(true);
+            }
+            else if (event.key === 'Tab') {
+                this.trapTab(event);
+            }
+        };
+        this.onGridKeyDown = (event) => {
+            const active = parseIsoDate(this.activeDate);
+            if (!active)
+                return;
+            const rtl = getComputedStyle(this.el).direction === 'rtl';
+            // Month-day mode's rows start on the 1st, not on a weekday.
+            const column = this.monthDay ? (active.getUTCDate() - 1) % 7 : weekdayColumn(active, this.weekStart);
+            let next = null;
+            switch (event.key) {
+                case 'ArrowLeft':
+                    next = addDays(active, rtl ? 1 : -1);
+                    break;
+                case 'ArrowRight':
+                    next = addDays(active, rtl ? -1 : 1);
+                    break;
+                case 'ArrowUp':
+                    next = addDays(active, -7);
+                    break;
+                case 'ArrowDown':
+                    next = addDays(active, 7);
+                    break;
+                case 'Home':
+                    next = addDays(active, -column);
+                    break;
+                case 'End': {
+                    // Month-day mode's rows don't carry into the next month, so End stops at the month's last day.
+                    const lastColumn = this.monthDay
+                        ? Math.min(6, daysInMonth(active.getUTCFullYear(), active.getUTCMonth()) - active.getUTCDate() + column)
+                        : 6;
+                    next = addDays(active, lastColumn - column);
+                    break;
+                }
+                case 'PageUp':
+                    // Month-day mode has no year to jump by, so Shift+PageUp stays put rather than passing
+                    // through a real, possibly non-leap year and clamping Feb 29 to the 28th.
+                    next = event.shiftKey && this.monthDay ? active : addMonths(active, event.shiftKey ? -12 : -1);
+                    break;
+                case 'PageDown':
+                    next = event.shiftKey && this.monthDay ? active : addMonths(active, event.shiftKey ? 12 : 1);
+                    break;
+                case 'Enter':
+                case ' ':
+                    event.preventDefault();
+                    this.pickDate(active);
+                    if (this.hasFooter)
+                        this.focusActiveDay = true;
+                    return;
+                default:
+                    return;
+            }
+            event.preventDefault();
+            const target = clampDate(this.inView(next), this.minDate, this.maxDate);
+            this.showDate(target);
+            if (this.isRange)
+                this.previewDate = toIsoDate(target);
+            this.focusActiveDay = true;
+        };
+        // One handler per grid rather than per day, so hovering doesn't rebuild 84 closures each render.
+        this.onGridClick = (event) => {
+            const date = this.dayFromEvent(event);
+            if (date)
+                this.pickDate(date);
+        };
+        this.onGridPointerOver = (event) => {
+            if (!this.isRange || !this.draftStart || this.draftEnd)
+                return;
+            const date = this.dayFromEvent(event);
+            const iso = date && toIsoDate(date);
+            if (iso && iso !== this.previewDate)
+                this.previewDate = iso;
+        };
+    }
+    /**
+     * Opens the calendar and moves focus to the selected day, or today.
+     */
+    async open() {
+        this.openCalendar(true);
+    }
+    /**
+     * Closes the calendar.
+     */
+    async close() {
+        this.closeCalendar(false);
+    }
+    /**
+     * Sets focus on the datepicker's text field.
+     */
+    async setFocus() {
+        var _a;
+        await ((_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.setFocus());
+    }
+    valueChanged() {
+        var _a;
+        // A value set from outside while the calendar is open is what Cancel keeps.
+        if (!this.committing)
+            this.valueAtOpen = (_a = this.value) !== null && _a !== void 0 ? _a : '';
+        this.refreshFromValue();
+    }
+    /**
+     * Props that change how the value reads or what can be picked: refresh the field, and an open
+     * calendar, as when a framework sets them after the datepicker loads.
+     */
+    contextChanged() {
+        this.refreshFromValue();
+    }
+    placementChanged() {
+        // Restarted on the next render, from the new placement.
+        this.stopPositioning();
+    }
+    refreshFromValue() {
+        var _a;
+        this.text = this.fieldText();
+        this.textError = '';
+        const parts = this.parsedValue();
+        // A full date reads as its month and day; keep what's submitted in step with what's shown,
+        // rather than passing through whichever spelling was set until the next pick rewrites it.
+        if (this.monthDay && parts) {
+            const normalized = this.dayValue(parts[0].date);
+            if (this.value !== normalized)
+                this.value = normalized;
+        }
+        this.updateFormValue();
+        if (!this.isOpen)
+            return;
+        this.loadDraft(parts);
+        const day = (_a = (parts && parts[parts.length - 1].date)) !== null && _a !== void 0 ? _a : this.now;
+        this.showDate(clampDate(day, this.minDate, this.maxDate), true);
+    }
+    requiredChanged() {
+        this.updateFormValue();
+    }
+    componentWillLoad() {
+        // Through the same path a later value/context change takes, so an initial full date in
+        // month-day mode submits normalized too, not only after the first pick rewrites it.
+        this.refreshFromValue();
+    }
+    connectedCallback() {
+        if (this.el.attachInternals && !this.internals) {
+            this.internals = this.el.attachInternals();
+        }
+    }
+    componentDidLoad() {
+        this.updateFormValue();
+    }
+    disconnectedCallback() {
+        var _a;
+        this.closeCalendar(false);
+        (_a = this.portal) === null || _a === void 0 ? void 0 : _a.remove();
+    }
+    componentDidRender() {
+        var _a, _b;
+        if (!this.isOpen || !this.dialogEl) {
+            (_a = this.portal) === null || _a === void 0 ? void 0 : _a.remove();
+            return;
+        }
+        // Rendered here, then moved to the portal. Stencil keeps patching it by reference.
+        (_b = this.portal) !== null && _b !== void 0 ? _b : (this.portal = new CalendarPortal(this.el));
+        this.portal.mount(this.dialogEl, this.resolvedLocale);
+        if (!this.cleanupAutoUpdate)
+            this.startPositioning();
+        this.flushActiveDayFocus();
+    }
+    /** Focuses the active day once the calendar is placed: a hidden calendar can't take focus. */
+    flushActiveDayFocus() {
+        var _a, _b;
+        if (!this.focusActiveDay || ((_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.style.visibility) !== 'visible')
+            return;
+        this.focusActiveDay = false;
+        (_b = this.dialogEl.querySelector(`[data-date="${this.activeDate}"]`)) === null || _b === void 0 ? void 0 : _b.focus();
+    }
+    /** The id the datepicker's parts are named from: `component-id`, or a generated one. */
+    get baseId() {
+        return this.componentId || this.fallbackId;
+    }
+    get resolvedLocale() {
+        return supportedLocale(this.locale || resolveLocale(this.el));
+    }
+    get weekStart() {
+        const day = this.firstDayOfWeek;
+        if (typeof day === 'number' && Number.isInteger(day) && day >= 0 && day <= 6)
+            return day;
+        return localeFirstDayOfWeek(this.resolvedLocale);
+    }
+    get minDate() {
+        return this.monthDay ? null : parseIsoDate(this.min);
+    }
+    get maxDate() {
+        return this.monthDay ? null : parseIsoDate(this.max);
+    }
+    /** Range mode, which month-day mode turns off. */
+    get isRange() {
+        return this.range && !this.monthDay;
+    }
+    /** The time picker, which month-day mode turns off. */
+    get hasTime() {
+        return this.timePicker && !this.monthDay;
+    }
+    /** Today, or in month-day mode today's month and day. */
+    get now() {
+        return this.monthDay ? inMonthDayYear(today()) : today();
+    }
+    /** In month-day mode, a date moved to the mode's year, as when the calendar wraps past December. */
+    inView(date) {
+        return this.monthDay ? inMonthDayYear(date) : date;
+    }
+    /** One day as the value holds it: `YYYY-MM-DD`, or `--MM-DD` in month-day mode. */
+    dayValue(date) {
+        return this.monthDay ? toMonthDay(date) : toIsoDate(date);
+    }
+    get isInteractive() {
+        return !this.disabled && !this.readonly;
+    }
+    /** How many months the calendar shows side by side. */
+    get monthCount() {
+        const narrow = typeof window !== 'undefined' && window.innerWidth < TWO_MONTHS_MIN_WIDTH;
+        return this.isRange && !narrow ? 2 : 1;
+    }
+    /** Whether picks apply at once, without the footer: `auto-apply` in range mode, without times. */
+    get appliesOnPick() {
+        return this.isRange && this.autoApply && !this.hasTime;
+    }
+    /** Whether picks wait for Apply: for a range, unless it auto-applies, and for a date with a time. */
+    get hasFooter() {
+        return (this.isRange || this.hasTime) && !this.appliesOnPick;
+    }
+    get resolvedPresets() {
+        return this.isRange ? resolvePresets(this.presets, today()) : [];
+    }
+    /** The committed value, parsed: one date, or a range's start and end. */
+    parsedValue(value = this.value) {
+        if (this.isRange) {
+            const [start, end, extra] = (value !== null && value !== void 0 ? value : '').split('/');
+            const startValue = parseDateTime(start);
+            const endValue = parseDateTime(end);
+            return extra === undefined && startValue && endValue && compareDateTime(startValue, endValue) <= 0
+                ? [startValue, endValue]
+                : null;
+        }
+        if (this.monthDay) {
+            const date = parseMonthDay(value);
+            return date ? [{ date, time: null }] : null;
+        }
+        const single = parseDateTime(value);
+        return single ? [single] : null;
+    }
+    /** The format the field shows and reads, with a time when the time picker is on. */
+    get resolvedFormat() {
+        var _a, _b;
+        if (this.monthDay) {
+            // A format with a year is the default, or one for full dates: use the locale's month and day.
+            const format = (_b = (_a = this.format) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+            return format !== '' && !/YYYY/.test(format.replace(/\[[^\]]*\]/g, '')) ? format : monthDayFormat(this.resolvedLocale);
+        }
+        return fieldFormat(this.format, this.hasTime, this.hasTime && clockFor(this.resolvedLocale).hour12);
+    }
+    /** What the field shows for the committed value. */
+    fieldText() {
+        var _a;
+        const parsed = this.parsedValue();
+        // A value that isn't a date (or range) shows as it is, and the form reports it invalid.
+        if (!parsed)
+            return (_a = this.value) !== null && _a !== void 0 ? _a : '';
+        return parsed
+            .map((part) => toFieldText(this.withTimePicker(part), this.resolvedFormat, this.resolvedLocale))
+            .join(RANGE_SEPARATOR);
+    }
+    /** Drops a time the time picker doesn't show, or adds the default one it does. */
+    withTimePicker(value, fallback = DEFAULT_START_TIME) {
+        var _a;
+        return { date: value.date, time: this.hasTime ? ((_a = value.time) !== null && _a !== void 0 ? _a : fallback) : null };
+    }
+    get fieldPlaceholder() {
+        if (this.placeholder)
+            return this.placeholder;
+        // Month-day tokens, as `MMMM D`, don't read as a hint; an example date does.
+        if (this.monthDay) {
+            return formatWith({ date: parseMonthDay('--12-31'), time: null }, this.resolvedFormat, this.resolvedLocale);
+        }
+        const one = this.resolvedFormat;
+        return this.isRange ? `${one}${RANGE_SEPARATOR}${one}` : one;
+    }
+    /** Loads the committed value into the draft the calendar edits. */
+    loadDraft(parts) {
+        var _a, _b;
+        const [start, end] = parts !== null && parts !== void 0 ? parts : [];
+        this.draftStart = start ? toIsoDate(start.date) : '';
+        this.draftEnd = this.isRange && end ? toIsoDate(end.date) : '';
+        this.startTime = (_a = start === null || start === void 0 ? void 0 : start.time) !== null && _a !== void 0 ? _a : DEFAULT_START_TIME;
+        this.endTime = (_b = end === null || end === void 0 ? void 0 : end.time) !== null && _b !== void 0 ? _b : DEFAULT_END_TIME;
+        this.previewDate = '';
+    }
+    /**
+     * Opens the calendar. From the button or the keyboard, focus moves to the active day; from a
+     * click in the field, it stays there so typing keeps working.
+     */
+    openCalendar(focusDay) {
+        var _a, _b;
+        if (!this.isInteractive || this.isOpen)
+            return;
+        const parts = this.parsedValue();
+        this.loadDraft(parts);
+        this.valueAtOpen = (_a = this.value) !== null && _a !== void 0 ? _a : '';
+        const start = (_b = (parts && parts[parts.length - 1].date)) !== null && _b !== void 0 ? _b : this.now;
+        this.showDate(clampDate(start, this.minDate, this.maxDate), true);
+        this.focusActiveDay = focusDay;
+        this.isOpen = true;
+        document.addEventListener('pointerdown', this.onDocumentPointerDown, true);
+    }
+    closeCalendar(returnFocus) {
+        var _a;
+        if (!this.isOpen)
+            return;
+        this.commitPendingText();
+        this.timesBeforeTyping = undefined;
+        this.isOpen = false;
+        this.stopPositioning();
+        document.removeEventListener('pointerdown', this.onDocumentPointerDown, true);
+        if (returnFocus)
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    /**
+     * Makes a day the active one and brings it into view. With two months, a day already on view
+     * doesn't move the view; `reset` lines the view up so the day is in the last month shown.
+     */
+    showDate(day, reset = false) {
+        const date = this.inView(day);
+        const first = firstOfMonth(date);
+        const view = parseIsoDate(this.viewMonth);
+        const lastView = view && addMonths(view, this.monthCount - 1);
+        if (reset || !view || first < view) {
+            this.viewMonth = toIsoDate(reset ? addMonths(first, 1 - this.monthCount) : first);
+        }
+        else if (lastView && first > lastView) {
+            this.viewMonth = toIsoDate(addMonths(first, 1 - this.monthCount));
+        }
+        this.activeDate = toIsoDate(date);
+    }
+    pickDate(date) {
+        if (isOutOfRange(date, this.minDate, this.maxDate))
+            return;
+        // A pick in the calendar takes over from typed text, so dismissing afterwards commits nothing,
+        // as when nothing was typed.
+        this.dropTypedText();
+        if (this.isRange) {
+            this.pickRangeDay(date);
+        }
+        else if (this.hasTime) {
+            this.draftStart = toIsoDate(date);
+            this.activeDate = this.draftStart;
+        }
+        else {
+            this.commitValue(this.dayValue(date));
+            this.closeCalendar(true);
+        }
+    }
+    /**
+     * The first pick starts a range and the second ends it. A day before the start moves the start,
+     * and a pick after a finished range starts a new one.
+     */
+    pickRangeDay(date) {
+        const start = parseIsoDate(this.draftStart);
+        const iso = toIsoDate(date);
+        if (!start || this.draftEnd) {
+            this.draftStart = iso;
+            this.draftEnd = '';
+        }
+        else if (date < start) {
+            this.draftStart = iso;
+        }
+        else {
+            this.draftEnd = iso;
+        }
+        this.previewDate = '';
+        this.activeDate = iso;
+        if (this.draftEnd && this.appliesOnPick)
+            this.onApply();
+    }
+    /** Sets the value from the user, emitting the change event when it differs. */
+    commitValue(next, detail = {}) {
+        var _a;
+        const changed = next !== ((_a = this.value) !== null && _a !== void 0 ? _a : '');
+        this.timesBeforeTyping = undefined;
+        this.committing = true;
+        this.value = next;
+        this.committing = false;
+        this.text = this.fieldText();
+        this.textError = '';
+        // Always, not only when the value changes: fixing a typo back to the same value has to clear
+        // the invalid state the form holds, and the value watcher won't fire for an unchanged value.
+        this.updateFormValue();
+        if (changed)
+            this.pdsDatepickerChange.emit(Object.assign({ value: next }, detail));
+    }
+    /** Commits one date, or a range with its start, end and matching preset. */
+    commitParts(parts) {
+        if (this.monthDay) {
+            this.commitValue(toMonthDay(parts[0].date));
+            return;
+        }
+        if (!this.isRange) {
+            this.commitValue(toValueString(parts[0]));
+            return;
+        }
+        const [start, end] = parts;
+        const preset = matchPreset(this.resolvedPresets, start.date, end.date);
+        this.commitValue(`${toValueString(start)}/${toValueString(end)}`, Object.assign({ start: toValueString(start), end: toValueString(end) }, (preset ? { preset: preset.key } : {})));
+    }
+    /** The draft as values, or `null` before a start is picked. A lone start is a one-day range. */
+    draftParts() {
+        var _a;
+        const startDate = parseIsoDate(this.draftStart);
+        if (!startDate)
+            return null;
+        const start = this.withTimePicker({ date: startDate, time: this.startTime });
+        if (!this.isRange)
+            return [start];
+        const end = this.withTimePicker({ date: (_a = parseIsoDate(this.draftEnd)) !== null && _a !== void 0 ? _a : startDate, time: this.endTime });
+        // An end time before the start time on the same day ends at the start.
+        return [start, compareDateTime(end, start) < 0 ? Object.assign(Object.assign({}, end), { time: start.time }) : end];
+    }
+    /**
+     * Goes back to the value from when the calendar opened, as Cancel and Escape do, and drops any
+     * typed text still pending. With Apply showing, typed text isn't committed while focus stays in
+     * the datepicker, so usually there's only text to drop; without a footer, text typed in the
+     * field is committed when it loses focus, so that commit is undone here.
+     */
+    restoreValueAtOpen() {
+        var _a;
+        if (this.valueAtOpen === ((_a = this.value) !== null && _a !== void 0 ? _a : '')) {
+            // Nothing was committed, so nothing to emit.
+            this.dropTypedText();
+            return;
+        }
+        const parts = this.parsedValue(this.valueAtOpen);
+        if (parts)
+            this.commitParts(parts);
+        else
+            this.commitValue(this.valueAtOpen);
+    }
+    /** Whether a node is the datepicker, inside it, or in its portaled calendar. */
+    isInside(node) {
+        var _a, _b;
+        if (!node)
+            return false;
+        return (node === this.el || this.el.contains(node) || !!((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(node)) || !!((_b = this.portal) === null || _b === void 0 ? void 0 : _b.contains(node)));
+    }
+    /**
+     * Focus arriving in the datepicker or its portaled calendar from outside emits pdsFocus, once.
+     * Tracked with a flag rather than `relatedTarget`, which is null or retargeted once the calendar
+     * is portaled out of the datepicker.
+     */
+    focusEntered(event) {
+        if (this.hasFocus)
+            return;
+        this.hasFocus = true;
+        this.pdsFocus.emit(event);
+    }
+    /**
+     * Once focus settles, whether it left both the datepicker and its calendar: then pdsBlur, once,
+     * and the calendar closes if focus went to another control. Focus that fell to the page, as on a
+     * click on a blank area or when a focused control is disabled, leaves the calendar open.
+     */
+    checkFocusLeft(event, toControl) {
+        window.setTimeout(() => {
+            var _a;
+            if (this.el.matches(':focus-within') || ((_a = this.portal) === null || _a === void 0 ? void 0 : _a.host.matches(':focus-within')))
+                return;
+            if (toControl)
+                this.closeCalendar(false);
+            if (!this.hasFocus)
+                return;
+            this.hasFocus = false;
+            this.pdsBlur.emit(event);
+        });
+    }
+    startPositioning() {
+        const reference = this.fieldReference();
+        const floating = this.dialogEl;
+        if (!reference || !floating)
+            return;
+        this.cleanupAutoUpdate = autoUpdate(reference, floating, () => {
+            computePosition(reference, floating, {
+                placement: this.placement,
+                strategy: 'fixed',
+                middleware: [
+                    offset(4),
+                    flip({ padding: VIEWPORT_PADDING }),
+                    // Never larger than the window: the calendar scrolls instead, with its footer pinned. With
+                    // little room on either side it keeps a usable height and may cover its own field.
+                    size({
+                        padding: VIEWPORT_PADDING,
+                        apply({ availableWidth, availableHeight, elements }) {
+                            const windowHeight = window.innerHeight - VIEWPORT_PADDING * 2;
+                            const height = Math.max(availableHeight, Math.min(windowHeight, CALENDAR_MIN_HEIGHT));
+                            Object.assign(elements.floating.style, {
+                                maxHeight: `${Math.max(0, height)}px`,
+                                maxWidth: `${Math.max(0, availableWidth)}px`,
+                            });
+                        },
+                    }),
+                    shift({ padding: VIEWPORT_PADDING, crossAxis: true }),
+                    hide(),
+                ],
+            }).then(({ x, y, middlewareData }) => {
+                var _a;
+                // Hidden once the field scrolls out of view, as behind a modal's header, rather than floating free.
+                const hidden = !!((_a = middlewareData.hide) === null || _a === void 0 ? void 0 : _a.referenceHidden);
+                Object.assign(floating.style, { left: `${x}px`, top: `${y}px`, visibility: hidden ? 'hidden' : 'visible' });
+                this.flushActiveDayFocus();
+            });
+        });
+    }
+    stopPositioning() {
+        var _a;
+        (_a = this.cleanupAutoUpdate) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.cleanupAutoUpdate = undefined;
+    }
+    /** The field's box, so the calendar lines up with it rather than with the label or messages. */
+    fieldReference() {
+        var _a, _b, _c;
+        return (_c = (_b = (_a = this.inputEl) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.pds-input__field-wrapper')) !== null && _c !== void 0 ? _c : this.inputEl;
+    }
+    /**
+     * Commits text typed while the calendar was open, when it closes without Apply or Cancel. A
+     * valid date or range commits the draft, which also holds a time picked in the calendar; text
+     * that isn't one is read as typed, so the field shows its error.
+     */
+    commitPendingText() {
+        if (this.text === this.fieldText())
+            return;
+        const parts = this.parseText(this.text) ? this.draftParts() : null;
+        if (parts)
+            this.commitParts(parts);
+        else
+            this.commitText();
+    }
+    /** The typed text as a date or range, or `null` if it isn't one; it may be outside `min` and `max`. */
+    readText(text) {
+        const format = this.resolvedFormat;
+        const locale = this.resolvedLocale;
+        const parts = this.monthDay
+            ? [parseMonthDayText(text, format, locale)]
+            : this.isRange
+                ? parseRangeText(text, format, locale)
+                : [parseFieldText(text, format, locale)];
+        if (!parts || parts.some((part) => !part))
+            return null;
+        return parts.map((part, i) => this.withTimePicker(part, i === 1 ? DEFAULT_END_TIME : DEFAULT_START_TIME));
+    }
+    /** The typed text as a date or range that can be picked, or `null`. */
+    parseText(text) {
+        const parts = this.readText(text);
+        return parts && !this.rangeError(parts) ? parts : null;
+    }
+    /** Whether any of these dates is before `min` or after `max`. */
+    rangeError(parts) {
+        if (this.minDate && parts.some((part) => part.date < this.minDate))
+            return 'min';
+        if (this.maxDate && parts.some((part) => part.date > this.maxDate))
+            return 'max';
+        return '';
+    }
+    /** What's wrong with the committed value, as one set in code: not a date, or out of range. */
+    valueError() {
+        if (!this.value)
+            return '';
+        const parts = this.parsedValue();
+        return parts ? this.rangeError(parts) : 'format';
+    }
+    commitText() {
+        const text = this.text.trim();
+        if (text === '') {
+            this.commitValue('');
+            return;
+        }
+        const parts = this.readText(text);
+        const error = parts ? this.rangeError(parts) : 'format';
+        if (parts && !error) {
+            this.commitParts(parts);
+        }
+        else {
+            this.textError = error;
+            this.updateFormValue();
+        }
+    }
+    /** Whether the month before (`-1`) or after (`1`) the ones on view has a day in range. */
+    canShowMonth(direction) {
+        var _a;
+        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
+        if (direction < 0)
+            return !this.minDate || addDays(view, -1) >= this.minDate;
+        return !this.maxDate || addMonths(view, this.monthCount) <= this.maxDate;
+    }
+    showMonth(event, direction) {
+        var _a, _b;
+        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
+        const active = (_b = parseIsoDate(this.activeDate)) !== null && _b !== void 0 ? _b : this.now;
+        this.viewMonth = toIsoDate(this.inView(addMonths(view, direction)));
+        this.activeDate = toIsoDate(clampDate(this.inView(addMonths(active, direction)), this.minDate, this.maxDate));
+        if (this.canShowMonth(direction)) {
+            // Safari doesn't focus a clicked button; without this, focus falls to the page and Escape and
+            // the Tab trap stop working.
+            event.currentTarget.focus();
+        }
+        else {
+            // The button is about to be disabled, which would drop focus.
+            this.focusActiveDay = true;
+        }
+    }
+    /** Shows the chosen month in the calendar at `index`, from the month or year dropdown. */
+    jumpTo(index, year, month) {
+        var _a;
+        const target = clampDate(new Date(Date.UTC(year, month, 1)), this.minDate, this.maxDate);
+        this.viewMonth = toIsoDate(addMonths(firstOfMonth(target), -index));
+        const active = (_a = parseIsoDate(this.activeDate)) !== null && _a !== void 0 ? _a : target;
+        const day = Math.min(active.getUTCDate(), new Date(Date.UTC(year, month + 1, 0)).getUTCDate());
+        this.activeDate = toIsoDate(clampDate(new Date(Date.UTC(year, month, day)), this.minDate, this.maxDate));
+    }
+    /**
+     * Drops text typed in the field and not committed, showing the committed value again. pds-input
+     * is set directly: when typing and this land in one frame, the rendered text never changed.
+     */
+    dropTypedText() {
+        // Typed text may have set the times too; they go back with it.
+        if (this.timesBeforeTyping)
+            [this.startTime, this.endTime] = this.timesBeforeTyping;
+        this.timesBeforeTyping = undefined;
+        if (this.text === this.fieldText() && !this.textError)
+            return;
+        this.text = this.fieldText();
+        if (this.inputEl)
+            this.inputEl.value = this.text;
+        this.textError = '';
+        this.updateFormValue();
+    }
+    /** Keeps Tab within the calendar while it's open, as in a modal dialog. */
+    trapTab(event) {
+        var _a, _b, _c, _d;
+        const focusable = Array.from((_b = (_a = this.dialogEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('button:not([disabled]):not([tabindex="-1"]), select:not([disabled]), [data-date][tabindex="0"]')) !== null && _b !== void 0 ? _b : []);
+        if (focusable.length === 0)
+            return;
+        // The calendar may be in the portal's shadow root, so ask its own root what has focus.
+        const current = (_d = (_c = this.dialogEl) === null || _c === void 0 ? void 0 : _c.getRootNode()) === null || _d === void 0 ? void 0 : _d.activeElement;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (event.shiftKey && current === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && current === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    /** The day under an event in a grid, from its cell. */
+    dayFromEvent(event) {
+        var _a, _b;
+        const cell = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '[data-date]');
+        return parseIsoDate(cell === null || cell === void 0 ? void 0 : cell.dataset.date);
+    }
+    /**
+     * Submits the value and reports validity to the form, as pds-input does: `required` with no
+     * value, or typed text that isn't a date, blocks submission.
+     */
+    updateFormValue() {
+        var _a, _b, _c, _d;
+        if (isSpecTest() || !((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue))
+            return;
+        this.internals.setFormValue(this.value || null);
+        if (!this.internals.setValidity)
+            return;
+        const anchor = (_d = (_c = (_b = this.inputEl) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('input')) !== null && _d !== void 0 ? _d : undefined;
+        const error = this.textError || this.valueError();
+        if (error === 'format') {
+            this.internals.setValidity({ badInput: true }, this.invalidDateMessage, anchor);
+        }
+        else if (error === 'min') {
+            this.internals.setValidity({ rangeUnderflow: true }, this.boundMessage(this.minDateMessage, this.minDate), anchor);
+        }
+        else if (error === 'max') {
+            this.internals.setValidity({ rangeOverflow: true }, this.boundMessage(this.maxDateMessage, this.maxDate), anchor);
+        }
+        else if (this.required && !this.value) {
+            this.internals.setValidity({ valueMissing: true }, (anchor === null || anchor === void 0 ? void 0 : anchor.validationMessage) || this.invalidDateMessage, anchor);
+        }
+        else {
+            this.internals.setValidity({});
+        }
+    }
+    /** A min or max message with its date, in the field's format. */
+    boundMessage(template, bound) {
+        const date = bound ? toFieldText({ date: bound, time: null }, this.format || undefined, this.resolvedLocale) : '';
+        return formatMessage(template, { date });
+    }
+    formResetCallback() {
+        this.value = '';
+        // The value may already be empty, so its watcher wouldn't clear typed text.
+        this.text = '';
+        this.textError = '';
+        this.closeCalendar(false);
+        this.updateFormValue();
+    }
+    /** Disabling the datepicker, or making it read-only, while the calendar is open closes it. */
+    interactivityChanged() {
+        if (!this.isInteractive)
+            this.closeCalendar(false);
+    }
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+        if (disabled)
+            this.closeCalendar(false);
+    }
+    formStateRestoreCallback(state) {
+        if (typeof state === 'string')
+            this.value = state;
+    }
+    triggerAccessibleName(locale) {
+        const parts = this.parsedValue();
+        if (!parts)
+            return this.triggerLabel;
+        const dates = parts.map((part) => formatDate(part.date, locale, this.monthDay ? MONTH_AND_DAY : FULL_DATE));
+        return `${this.triggerLabel}, ${dates.join(RANGE_SEPARATOR)}`;
+    }
+    /** The range to highlight: the chosen one, or the start to the previewed day while picking the end. */
+    highlightedRange() {
+        const start = parseIsoDate(this.draftStart);
+        const end = parseIsoDate(this.draftEnd);
+        if (!start || end)
+            return [start, end];
+        const preview = parseIsoDate(this.previewDate);
+        return [start, preview && preview > start ? preview : null];
+    }
+    /** The day shown as selected: the draft, which opens as the committed day and follows typing. */
+    selectedDay() {
+        if (this.isRange)
+            return null;
+        return parseIsoDate(this.draftStart);
+    }
+    renderMonthHeading(view, index, locale, headingId) {
+        const heading = formatDate(view, locale, this.monthDay ? { month: 'long' } : { month: 'long', year: 'numeric' });
+        // Only the first month announces itself as it changes; two months move together.
+        const live = index === 0 ? 'polite' : null;
+        if (!this.showDropdowns || this.monthDay) {
+            return (h("div", { class: "pds-datepicker__heading", id: headingId, "aria-live": live }, heading));
+        }
+        const year = view.getUTCFullYear();
+        const month = view.getUTCMonth();
+        const min = this.minDate;
+        const max = this.maxDate;
+        const thisYear = today().getUTCFullYear();
+        const firstYear = min ? min.getUTCFullYear() : thisYear - DROPDOWN_YEARS;
+        const lastYear = max ? max.getUTCFullYear() : thisYear + DROPDOWN_YEARS;
+        const monthName = dateFormatter(locale, { month: 'long' });
+        const yearName = dateFormatter(locale, { year: 'numeric' });
+        return (h("div", { class: "pds-datepicker__dropdowns" }, h("span", { class: "visually-hidden", id: headingId, "aria-live": live }, heading), h("span", { class: "pds-datepicker__select-wrap" }, h("select", { class: "pds-datepicker__heading-select", "aria-label": this.monthLabel, onChange: (event) => this.jumpTo(index, year, Number(event.target.value)) }, Array.from({ length: 12 }, (_, m) => {
+            const outside = (!!min && new Date(Date.UTC(year, m + 1, 0)) < min) || (!!max && new Date(Date.UTC(year, m, 1)) > max);
+            return (h("option", { value: String(m), selected: m === month, disabled: outside }, monthName.format(new Date(Date.UTC(year, m, 1)))));
+        })), h("pds-icon", { class: "pds-datepicker__select-caret", icon: caretDown, size: "small", "aria-hidden": "true" })), h("span", { class: "pds-datepicker__select-wrap" }, h("select", { class: "pds-datepicker__heading-select", "aria-label": this.yearLabel, onChange: (event) => this.jumpTo(index, Number(event.target.value), month) }, Array.from({ length: Math.max(lastYear, year) - Math.min(firstYear, year) + 1 }, (_, i) => {
+            const y = Math.min(firstYear, year) + i;
+            return (h("option", { value: String(y), selected: y === year }, yearName.format(new Date(Date.UTC(y, 0, 1)))));
+        })), h("pds-icon", { class: "pds-datepicker__select-caret", icon: caretDown, size: "small", "aria-hidden": "true" }))));
+    }
+    renderMonth(view, index, locale) {
+        const year = view.getUTCFullYear();
+        const month = view.getUTCMonth();
+        const min = this.minDate;
+        const max = this.maxDate;
+        const selected = this.selectedDay();
+        const [rangeStart, rangeEnd] = this.isRange ? this.highlightedRange() : [null, null];
+        const now = this.now;
+        const fullDate = dateFormatter(locale, this.monthDay ? MONTH_AND_DAY : FULL_DATE);
+        const dayNumber = dateFormatter(locale, { day: 'numeric' });
+        const headingId = `${this.baseId}-calendar-heading-${index}`;
+        const isFirst = index === 0;
+        const isLast = index === this.monthCount - 1;
+        return (h("div", { class: "pds-datepicker__month" }, h("div", { class: "pds-datepicker__header" }, isFirst ? (h("button", { type: "button", class: "pds-datepicker__nav pds-datepicker__nav--previous", "aria-label": this.previousMonthLabel, disabled: !this.canShowMonth(-1), onClick: (event) => this.showMonth(event, -1) }, h("pds-icon", { icon: caretLeft, "aria-hidden": "true" }))) : (h("span", { class: "pds-datepicker__nav-spacer" })), this.renderMonthHeading(view, index, locale, headingId), isLast ? (h("button", { type: "button", class: "pds-datepicker__nav pds-datepicker__nav--next", "aria-label": this.nextMonthLabel, disabled: !this.canShowMonth(1), onClick: (event) => this.showMonth(event, 1) }, h("pds-icon", { icon: caretRight, "aria-hidden": "true" }))) : (h("span", { class: "pds-datepicker__nav-spacer" }))), h("table", { class: "pds-datepicker__grid", role: "grid", "aria-labelledby": headingId, "aria-multiselectable": this.isRange ? 'true' : null, onKeyDown: this.onGridKeyDown, onClick: this.onGridClick, onPointerOver: this.onGridPointerOver }, !this.monthDay && (h("thead", null, h("tr", null, weekdayNames(locale, this.weekStart).map((name) => (h("th", { scope: "col", class: "pds-datepicker__weekday" }, h("span", { "aria-hidden": "true" }, name.short), h("span", { class: "visually-hidden" }, name.long))))))), h("tbody", null, (this.monthDay ? monthDayRows(month) : monthWeeks(year, month, this.weekStart)).map((week) => (h("tr", null, week.map((date, column) => {
+            if (!date)
+                return h("td", { class: "pds-datepicker__day pds-datepicker__day--empty" });
+            const iso = toIsoDate(date);
+            const unavailable = isOutOfRange(date, min, max);
+            const isEndpoint = isSameDay(date, rangeStart) || isSameDay(date, rangeEnd);
+            // A range's ends are capped on their outer side; a lone day stays round.
+            const spansDays = !!rangeStart && !!rangeEnd && !isSameDay(rangeStart, rangeEnd);
+            const inRange = !!rangeStart && !!rangeEnd && date >= rangeStart && date <= rangeEnd;
+            const isSelected = isSameDay(date, selected) || isEndpoint || inRange;
+            const isToday = isSameDay(date, now);
+            return (h("td", { class: {
+                    'pds-datepicker__day': true,
+                    'pds-datepicker__day--selected': isSameDay(date, selected) || isEndpoint,
+                    'pds-datepicker__day--in-range': inRange && !isEndpoint,
+                    'pds-datepicker__day--range-start': spansDays && isSameDay(date, rangeStart),
+                    'pds-datepicker__day--range-end': spansDays && isSameDay(date, rangeEnd),
+                    'pds-datepicker__day--row-start': inRange && column === 0,
+                    'pds-datepicker__day--row-end': inRange && column === 6,
+                    'pds-datepicker__day--today': isToday,
+                    'pds-datepicker__day--disabled': unavailable,
+                }, "data-date": iso, tabindex: iso === this.activeDate ? '0' : '-1', "aria-label": fullDate.format(date), "aria-selected": isSelected ? 'true' : null, "aria-current": isToday ? 'date' : null, "aria-disabled": unavailable ? 'true' : null }, dayNumberText(dayNumber, date)));
+        })))))), this.hasTime && this.timesUnderMonth(index).map((which) => this.renderTime(which, locale))));
+    }
+    /**
+     * The time pickers under a month: the start time under the first and the end time under the
+     * second, or both under the one month a narrow range shows.
+     */
+    timesUnderMonth(index) {
+        if (!this.isRange)
+            return ['start'];
+        if (this.monthCount === 1)
+            return ['start', 'end'];
+        return [index === 0 ? 'start' : 'end'];
+    }
+    /** Hour, minute and (on a 12-hour clock) AM/PM pickers for the start or end time. */
+    renderTime(which, locale) {
+        var _a, _b, _c;
+        // The end shows the time Apply saves: on one day, an end before the start ends at the start.
+        const time = which === 'start' ? this.startTime : (_c = (_b = (_a = this.draftParts()) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.time) !== null && _c !== void 0 ? _c : this.endTime;
+        const [hours, minutes] = splitTime(time);
+        const clock = clockFor(locale);
+        const step = Math.max(1, Math.min(60, Math.floor(this.minuteIncrement) || 1));
+        // Not `h`: that's the JSX factory.
+        const setTime = (hour, minute) => {
+            const time = joinTime(hour, minute);
+            if (which === 'start')
+                this.startTime = time;
+            else
+                this.endTime = time;
+            // A time chosen here after typing stays when a pick later drops the typed text.
+            if (this.timesBeforeTyping)
+                this.timesBeforeTyping[which === 'start' ? 0 : 1] = time;
+        };
+        const groupLabel = !this.isRange ? this.timeLabel : which === 'start' ? this.startTimeLabel : this.endTimeLabel;
+        const isPm = hours >= 12;
+        const hourOptions = clock.hour12 ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
+        const shownHour = clock.hour12 ? hours % 12 || 12 : hours;
+        const minuteOptions = Array.from({ length: Math.ceil(60 / step) }, (_, i) => i * step);
+        // A time off the step stays listed, so the select never shows a different minute than the value.
+        if (!minuteOptions.includes(minutes))
+            minuteOptions.push(minutes);
+        minuteOptions.sort((a, b) => a - b);
+        const labelId = `${this.baseId}-time-${which}`;
+        return (h("div", { class: "pds-datepicker__time", role: "group", "aria-labelledby": labelId }, h("span", { class: "pds-datepicker__time-label", id: labelId }, groupLabel), h("span", { class: "pds-datepicker__time-field" }, h("select", { class: "pds-datepicker__time-select", "aria-label": this.hourLabel, onChange: (event) => {
+                const picked = Number(event.target.value);
+                setTime(clock.hour12 ? (picked % 12) + (isPm ? 12 : 0) : picked, minutes);
+            } }, hourOptions.map((hour) => (h("option", { value: String(hour), selected: hour === shownHour }, clock.hour12 ? String(hour) : String(hour).padStart(2, '0'))))), h("span", { class: "pds-datepicker__time-separator", "aria-hidden": "true" }, ":"), h("select", { class: "pds-datepicker__time-select", "aria-label": this.minuteLabel, onChange: (event) => setTime(hours, Number(event.target.value)) }, minuteOptions.map((m) => (h("option", { value: String(m), selected: m === minutes }, String(m).padStart(2, '0'))))), clock.hour12 && (h("select", { class: "pds-datepicker__time-select pds-datepicker__time-select--period", "aria-label": this.periodLabel, onChange: (event) => {
+                const pm = event.target.value === 'pm';
+                setTime((hours % 12) + (pm ? 12 : 0), minutes);
+            } }, h("option", { value: "am", selected: !isPm }, clock.am), h("option", { value: "pm", selected: isPm }, clock.pm))))));
+    }
+    renderPresets() {
+        var _a;
+        const presets = this.resolvedPresets;
+        if (presets.length === 0)
+            return null;
+        const current = matchPreset(presets, parseIsoDate(this.draftStart), parseIsoDate(this.draftEnd));
+        const isCustom = !current && !!this.draftStart;
+        // One choice of range: a radio group, with one Tab stop on the checked choice and arrows between.
+        // A disabled preset can't take focus, so the stop moves to the first one that can, or Custom range.
+        const canPick = (preset) => presetInRange(preset, this.minDate, this.maxDate);
+        const tabStop = current && canPick(current) ? current : isCustom ? 'custom' : (_a = presets.find(canPick)) !== null && _a !== void 0 ? _a : 'custom';
+        return (h("div", { class: "pds-datepicker__presets-column" }, h("ul", { class: "pds-datepicker__presets", part: "presets", role: "radiogroup", "aria-label": this.presetsLabel, onKeyDown: this.onPresetsKeyDown }, presets.map((preset) => {
+            const isCurrent = preset === current;
+            return (h("li", { role: "none" }, h("button", { type: "button", role: "radio", class: { 'pds-datepicker__preset': true, 'pds-datepicker__preset--selected': isCurrent }, "aria-checked": isCurrent ? 'true' : 'false', tabindex: preset === tabStop ? '0' : '-1', disabled: !presetInRange(preset, this.minDate, this.maxDate), onClick: (event) => this.onPresetClick(event, preset) }, h("span", null, preset.label), isCurrent && h("pds-icon", { icon: check, "aria-hidden": "true" }))));
+        }), h("li", { role: "none" }, h("button", { type: "button", role: "radio", class: { 'pds-datepicker__preset': true, 'pds-datepicker__preset--selected': isCustom }, "aria-checked": isCustom ? 'true' : 'false', tabindex: tabStop === 'custom' ? '0' : '-1', onClick: this.onCustomRangeClick }, h("span", null, this.customRangeLabel), isCustom && h("pds-icon", { icon: check, "aria-hidden": "true" }))))));
+    }
+    /** What Apply would set, in the field's format: shown in the footer, and announced as it changes. */
+    selectionText() {
+        const parts = this.draftParts();
+        if (!parts)
+            return '';
+        const format = this.resolvedFormat;
+        const locale = this.resolvedLocale;
+        if (this.isRange && !this.draftEnd)
+            return `${toFieldText(parts[0], format, locale)}${RANGE_SEPARATOR}`;
+        return parts.map((part) => toFieldText(part, format, locale)).join(RANGE_SEPARATOR);
+    }
+    renderFooter() {
+        const parts = this.draftParts();
+        const selection = this.selectionText();
+        return (h("div", { class: "pds-datepicker__footer" }, h("span", { class: "pds-datepicker__selection", "aria-live": "polite" }, selection), h("button", { type: "button", class: "pds-datepicker__action", onClick: this.onCancel }, this.clearable ? this.clearLabel : this.cancelLabel), h("button", { type: "button", class: "pds-datepicker__action pds-datepicker__action--primary", disabled: !parts, onClick: this.onApply }, this.applyLabel)));
+    }
+    renderCalendar(locale) {
+        var _a;
+        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
+        const months = Array.from({ length: this.monthCount }, (_, i) => addMonths(view, i));
+        return (h("div", { class: { 'pds-datepicker__dialog': true, 'pds-datepicker__dialog--range': this.isRange }, id: `${this.baseId}-calendar`, role: "dialog",
+            // A click on a part that can't take focus, as the month heading, focuses the dialog
+            // rather than dropping focus to the page, which would report blur mid-selection.
+            tabindex: "-1", "aria-labelledby": this.isRange ? null : `${this.baseId}-calendar-heading-0`, "aria-label": this.isRange ? this.label || this.triggerLabel : null, part: "calendar", ref: (el) => (this.dialogEl = el), onKeyDown: this.onDialogKeyDown, onFocusin: this.onCalendarFocusIn, onFocusout: this.onCalendarFocusOut }, this.isRange && this.renderPresets(), h("div", { class: "pds-datepicker__panel" }, h("div", { class: "pds-datepicker__months" }, months.map((month, index) => this.renderMonth(month, index, locale))), this.hasFooter && this.renderFooter(), this.appliesOnPick && (
+        // With no footer, still announce the start once it's picked, so it's clear an end comes next.
+        h("span", { class: "visually-hidden", "aria-live": "polite" }, this.selectionText())))));
+    }
+    render() {
+        const locale = this.resolvedLocale;
+        return (h(Host, { key: 'd40bce6136eca084b23d38d995010592bfd702bd', class: { 'pds-datepicker--range': this.isRange, 'pds-datepicker--time': this.hasTime }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, h("pds-input", { key: 'a047df90ca3e013a2eeb1f88e8fb033b24754f0d', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (h("button", {
+            // Keyed, as is the calendar button: when Clear appears after a pick, the focused
+            // calendar button must stay that button rather than be reused as Clear.
+            key: "clear", slot: "suffix", type: "button", class: "pds-datepicker__clear", ref: (el) => (this.clearEl = el), "aria-label": this.label ? `${this.clearLabel} ${this.label}` : this.clearLabel,
+            // Out of the tab order, as a native search field's clear button is: Tab from a field
+            // just emptied would land on it as the change removes it, dropping focus to the page.
+            tabindex: "-1", onMouseDown: this.onClearMouseDown, onClick: this.onClearClick
+        }, h("pds-icon", { key: '934fc6303da1dca04cb073c5875a0f9fc286fdd1', icon: remove, "aria-hidden": "true" }))), h("button", { key: "trigger", slot: "suffix", type: "button", class: "pds-datepicker__trigger", ref: (el) => (this.triggerEl = el), "aria-label": this.triggerAccessibleName(locale), "aria-haspopup": "dialog", "aria-expanded": this.isOpen ? 'true' : 'false', disabled: !this.isInteractive, onClick: this.onTriggerClick, onKeyDown: this.onTriggerKeyDown }, h("pds-icon", { key: '75ab4fc79ce9f95e7ee6555763166d800a2f1135', icon: calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
+    }
+    static get is() { return "pds-datepicker"; }
+    static get encapsulation() { return "shadow"; }
+    static get formAssociated() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pds-datepicker.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pds-datepicker.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "applyLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the button that applies the chosen dates."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "apply-label",
+                "defaultValue": "'Apply'"
+            },
+            "autoApply": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "In range mode, applies the range as soon as its end or a preset is picked, without the Apply and\nCancel buttons. Has no effect with the time picker, whose times still need Apply."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-apply",
+                "defaultValue": "false"
+            },
+            "cancelLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the button that closes the calendar without changing the dates."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "cancel-label",
+                "defaultValue": "'Cancel'"
+            },
+            "clearable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds a button in the field that empties it, shown while there's a value. Where Apply and Cancel\nbuttons show, Clear also takes the place of Cancel."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clearable",
+                "defaultValue": "false"
+            },
+            "clearLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the button that empties the field, when `clearable` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-label",
+                "defaultValue": "'Clear'"
+            },
+            "componentId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "A unique identifier used for the underlying component `id` attribute."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "component-id"
+            },
+            "customRangeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the presets entry that stands for a range of your own. Range mode with presets only."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "custom-range-label",
+                "defaultValue": "'Custom range'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether or not the datepicker is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled"
+            },
+            "endTimeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the end time, in range mode with the time picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "end-time-label",
+                "defaultValue": "'End time'"
+            },
+            "errorMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the error message and provides an error-themed treatment to the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "error-message"
+            },
+            "firstDayOfWeek": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The first day of the week in the calendar, from `0` (Sunday) to `6` (Saturday). Defaults to the\nlocale's first day where the browser reports it, otherwise Sunday."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first-day-of-week"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "How the field shows dates and reads typed ones, as tokens: `YYYY`, `MMMM` or `MMM` (month name,\nin the locale), `MM` or `M` (month), `DD` or `D` (day), and with the time picker `HH` or `H`\n(24-hour), `hh` or `h` (12-hour), `mm` and `A` (AM/PM, in the locale), as `MM/DD/YYYY`,\n`MMM D, YYYY` or `D.M.YYYY h:mm A`. Put literal text in brackets, as `[Due] D/M/YYYY`. The value\nand the change event stay ISO (`YYYY-MM-DD`; `--MM-DD` with `month-day`), whatever the format.\nTyped ISO dates are always accepted too. With `month-day`, a format without `YYYY` is taken as a\nmonth-and-day format and used as given, rather than reordered for the locale; leave it unset to\nfollow the locale instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "format",
+                "defaultValue": "'YYYY-MM-DD'"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether or not the datepicker takes full width of its container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "full-width"
+            },
+            "helperMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Displays a message or hint below the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "helper-message"
+            },
+            "hideLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visually hides the label text for instances where only the field should be displayed. Label remains accessible to assistive technology such as screen readers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hide-label"
+            },
+            "hourLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the hour in the time picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hour-label",
+                "defaultValue": "'Hour'"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether or not the datepicker is invalid or throws an error."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid"
+            },
+            "invalidDateMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The validation message the form reports when the typed text isn't a date that can be picked."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "invalid-date-message",
+                "defaultValue": "'Enter a date in the format shown.'"
+            },
+            "maxDateMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The validation message the form reports for a date after `max`. `{date}` is replaced by the\nlatest date, in the field's format."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-date-message",
+                "defaultValue": "'Choose {date} or earlier.'"
+            },
+            "minDateMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The validation message the form reports for a date before `min`. `{date}` is replaced by the\nearliest date, in the field's format."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-date-message",
+                "defaultValue": "'Choose {date} or later.'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text to be displayed as the datepicker label."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The locale used for month and weekday names, as a BCP 47 language tag such as `en-US` or `fr`.\nDefaults to the nearest `lang` attribute, then the page's `<html lang>`, then `en`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale"
+            },
+            "max": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The latest date that can be picked, as `YYYY-MM-DD`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max"
+            },
+            "min": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The earliest date that can be picked, as `YYYY-MM-DD`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min"
+            },
+            "minuteIncrement": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The minutes the time picker steps by, such as `15` or `30`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minute-increment",
+                "defaultValue": "1"
+            },
+            "minuteLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the minute in the time picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "minute-label",
+                "defaultValue": "'Minute'"
+            },
+            "monthLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the month dropdown, when `show-dropdowns` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "month-label",
+                "defaultValue": "'Month'"
+            },
+            "monthDay": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Picks a month and day with no year, for a date that comes round every year, such as a birthday.\nThe value is `--MM-DD` (ISO 8601 without a year), the field shows the date as the locale writes\na month and day, and the calendar shows each month without a year or weekdays, with February\nalways having its 29th. Turns off `range`, `time-picker`, `show-dropdowns`, `min` and `max`, and\nhas no effect with `auto-apply`, `presets`, `first-day-of-week`, `min-date-message` or\n`max-date-message`, which all depend on them."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "month-day",
+                "defaultValue": "false"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the name. Submitted with the form name/value pair."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "nextMonthLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the button that shows the next month."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "next-month-label",
+                "defaultValue": "'Next month'"
+            },
+            "periodLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the AM or PM choice in the time picker, in locales with a 12-hour clock."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "period-label",
+                "defaultValue": "'AM or PM'"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies a short hint that describes the expected value of the field. Defaults to the format\nthe field takes, such as `YYYY-MM-DD`; with `month-day`, to an example date instead, such as\n`December 31`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder"
+            },
+            "placement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PlacementType",
+                    "resolved": "\"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+                    "references": {
+                        "PlacementType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::PlacementType",
+                            "referenceLocation": "PlacementType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The placement of the calendar relative to the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placement",
+                "defaultValue": "'bottom-start'"
+            },
+            "presets": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | DatepickerPreset[]",
+                    "resolved": "DatepickerPreset[] | string",
+                    "references": {
+                        "DatepickerPreset": {
+                            "location": "import",
+                            "path": "./datepicker-interface",
+                            "id": "src/components/pds-datepicker/datepicker-interface.ts::DatepickerPreset",
+                            "referenceLocation": "DatepickerPreset"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Ranges listed beside the calendar in range mode. A comma-separated list of built-in keys\n(`today`, `yesterday`, `last-7-days`, `last-30-days`, `last-90-days`, `this-month`,\n`last-month`, `this-quarter`, `last-quarter`, `this-year`, `last-year`, `year-to-date`,\n`last-12-months`), or an array of `{ key, label?, startOffset?, endOffset?, start?, end? }` to\nrelabel built-ins or add your own: `startOffset` and `endOffset` follow today, `start` and `end`\nare fixed days."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "presets"
+            },
+            "presetsLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the list of presets, in range mode."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "presets-label",
+                "defaultValue": "'Presets'"
+            },
+            "previousMonthLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the button that shows the previous month."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "previous-month-label",
+                "defaultValue": "'Previous month'"
+            },
+            "range": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Picks a range: a start and an end date, from two months side by side, applied with the Apply\nbutton. The value is `YYYY-MM-DD/YYYY-MM-DD`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "range",
+                "defaultValue": "false"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether or not the datepicker is readonly."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether or not the datepicker is required."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "required"
+            },
+            "showDropdowns": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows month and year dropdowns in place of the month heading, for jumping far, as to a birth year."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-dropdowns",
+                "defaultValue": "false"
+            },
+            "startTimeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the start time, in range mode with the time picker."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "start-time-label",
+                "defaultValue": "'Start time'"
+            },
+            "timePicker": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds hour and minute pickers below the calendar, and the value carries the time as\n`YYYY-MM-DDTHH:mm`. The dates are applied with the Apply button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "time-picker",
+                "defaultValue": "false"
+            },
+            "timeLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the time, with the time picker and a single date."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "time-label",
+                "defaultValue": "'Time'"
+            },
+            "triggerLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the button that opens the calendar. The selected date is added to it."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "trigger-label",
+                "defaultValue": "'Choose date'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The selected date as `YYYY-MM-DD`, or in range mode the range as `YYYY-MM-DD/YYYY-MM-DD`; with\nthe time picker, each date as `YYYY-MM-DDTHH:mm`; with `month-day`, the month and day with no\nyear, as `--MM-DD` (a full date is read too, as that month and day, and rewritten to it). An\nempty string when nothing is selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "yearLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the year dropdown, when `show-dropdowns` is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "year-label",
+                "defaultValue": "'Year'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {},
+            "text": {},
+            "textError": {},
+            "activeDate": {},
+            "viewMonth": {},
+            "draftStart": {},
+            "draftEnd": {},
+            "startTime": {},
+            "endTime": {},
+            "previewDate": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "pdsDatepickerChange",
+                "name": "pdsDatepickerChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the value changes.\n\nThis event will not emit when programmatically setting the `value` property."
+                },
+                "complexType": {
+                    "original": "DatepickerChangeEventDetail",
+                    "resolved": "DatepickerChangeEventDetail",
+                    "references": {
+                        "DatepickerChangeEventDetail": {
+                            "location": "import",
+                            "path": "./datepicker-interface",
+                            "id": "src/components/pds-datepicker/datepicker-interface.ts::DatepickerChangeEventDetail",
+                            "referenceLocation": "DatepickerChangeEventDetail"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsBlur",
+                "name": "pdsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the datepicker loses focus: when focus leaves the field and the calendar."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "pdsFocus",
+                "name": "pdsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the datepicker gains focus: when focus moves into the field or the calendar from outside."
+                },
+                "complexType": {
+                    "original": "FocusEvent",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "FocusEvent": {
+                            "location": "global",
+                            "id": "global::FocusEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Opens the calendar and moves focus to the selected day, or today.",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Closes the calendar.",
+                    "tags": []
+                }
+            },
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets focus on the datepicker's text field.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "format",
+                "methodName": "contextChanged"
+            }, {
+                "propName": "locale",
+                "methodName": "contextChanged"
+            }, {
+                "propName": "timePicker",
+                "methodName": "contextChanged"
+            }, {
+                "propName": "range",
+                "methodName": "contextChanged"
+            }, {
+                "propName": "monthDay",
+                "methodName": "contextChanged"
+            }, {
+                "propName": "min",
+                "methodName": "contextChanged"
+            }, {
+                "propName": "max",
+                "methodName": "contextChanged"
+            }, {
+                "propName": "placement",
+                "methodName": "placementChanged"
+            }, {
+                "propName": "required",
+                "methodName": "requiredChanged"
+            }, {
+                "propName": "disabled",
+                "methodName": "interactivityChanged"
+            }, {
+                "propName": "readonly",
+                "methodName": "interactivityChanged"
+            }];
+    }
+}