@pine-ds/core 4.2.0 → 4.4.0

package/dist/cjs/pds-datepicker.cjs.entry.js

@@ -0,0 +1,1962 @@
+'use strict';
+
+var index = require('./index-Bl5KnQay.js');
+var floatingUi_dom = require('./floating-ui.dom-Dc8Anyel.js');
+var index$1 = require('./index-D-QQKB0y.js');
+var form = require('./form-MhwfKTuo.js');
+var i18nFormat = require('./i18n-format-BD0PmYzT.js');
+var closest = require('./closest-D0qyYtJ3.js');
+
+/**
+ * Date-only helpers for pds-datepicker. Dates are `YYYY-MM-DD` strings and all arithmetic runs in
+ * UTC, so a date never shifts by a day with the viewer's time zone or a daylight-saving change.
+ */
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+/** Parses a `YYYY-MM-DD` string to a UTC `Date`, or `null` when it isn't a real calendar date. */
+function parseIsoDate(value) {
+    const match = ISO_DATE.exec((value !== null && value !== void 0 ? value : '').trim());
+    if (!match)
+        return null;
+    const [, year, month, day] = match.map(Number);
+    const date = new Date(Date.UTC(year, month - 1, day));
+    // Rejects dates like 2026-02-30, which Date.UTC would roll into March.
+    return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day ? date : null;
+}
+function toIsoDate(date) {
+    return date.toISOString().slice(0, 10);
+}
+/** Today in the viewer's time zone, as a UTC date. */
+function today() {
+    const now = new Date();
+    return new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
+}
+function addDays(date, days) {
+    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + days));
+}
+/** Moves by whole months, keeping the day where it exists (Jan 31 + 1 month is Feb 28 or 29). */
+function addMonths(date, months) {
+    const first = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + months, 1));
+    const lastDay = daysInMonth(first.getUTCFullYear(), first.getUTCMonth());
+    return new Date(Date.UTC(first.getUTCFullYear(), first.getUTCMonth(), Math.min(date.getUTCDate(), lastDay)));
+}
+function daysInMonth(year, month) {
+    return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+}
+function isSameDay(a, b) {
+    return !!a && !!b && a.getTime() === b.getTime();
+}
+/** Clamps a date into the `[min, max]` range; either bound may be missing. */
+function clampDate(date, min, max) {
+    if (min && date < min)
+        return min;
+    if (max && date > max)
+        return max;
+    return date;
+}
+function isOutOfRange(date, min, max) {
+    return (!!min && date < min) || (!!max && date > max);
+}
+/** The column (0–6) a date falls in, for a week starting on `firstDayOfWeek` (0 = Sunday). */
+function weekdayColumn(date, firstDayOfWeek) {
+    return (date.getUTCDay() - firstDayOfWeek + 7) % 7;
+}
+/**
+ * The month's weeks, each seven cells long. Days from the neighbouring months are `null`, so the
+ * grid only offers dates in the month on view.
+ */
+function monthWeeks(year, month, firstDayOfWeek) {
+    const first = new Date(Date.UTC(year, month, 1));
+    const cells = Array(weekdayColumn(first, firstDayOfWeek)).fill(null);
+    for (let day = 1; day <= daysInMonth(year, month); day++) {
+        cells.push(new Date(Date.UTC(year, month, day)));
+    }
+    while (cells.length % 7 !== 0)
+        cells.push(null);
+    const weeks = [];
+    for (let i = 0; i < cells.length; i += 7)
+        weeks.push(cells.slice(i, i + 7));
+    return weeks;
+}
+/**
+ * The locale's first day of the week (0 = Sunday), from `Intl.Locale` week info where the browser
+ * has it. Falls back to Sunday.
+ */
+function localeFirstDayOfWeek(locale) {
+    var _a, _b, _c;
+    // Intl.Locale is newer than the library's ES2017 typings.
+    const IntlLocale = Intl.Locale;
+    if (!IntlLocale)
+        return 0;
+    try {
+        const intlLocale = new IntlLocale(locale);
+        const firstDay = (_b = (_a = intlLocale.getWeekInfo) === null || _a === void 0 ? void 0 : _a.call(intlLocale).firstDay) !== null && _b !== void 0 ? _b : (_c = intlLocale.weekInfo) === null || _c === void 0 ? void 0 : _c.firstDay;
+        // Intl numbers the days 1 (Monday) to 7 (Sunday).
+        return typeof firstDay === 'number' ? firstDay % 7 : 0;
+    }
+    catch (_d) {
+        return 0;
+    }
+}
+/**
+ * Weekday names, starting from `firstDayOfWeek`: a short form for the column heading and the long
+ * form for assistive tech. Latin-script names shorten to two letters (Su Mo, lu ma, Mo Di), as the
+ * admin date picker does, while the seven stay distinct; other scripts keep the locale's short form,
+ * which is already compact.
+ */
+function weekdayNames(locale, firstDayOfWeek) {
+    const shortFormat = dateFormatter(locale, { weekday: 'short' });
+    const longFormat = dateFormatter(locale, { weekday: 'long' });
+    // 2023-01-01 was a Sunday.
+    const days = Array.from({ length: 7 }, (_, i) => new Date(Date.UTC(2023, 0, 1 + ((firstDayOfWeek + i) % 7))));
+    const shorts = days.map((date) => shortFormat.format(date).replace(/\.$/, ''));
+    const latin = shorts.every((name) => /^[A-Za-z\u00C0-\u024F]+$/.test(name));
+    const twoLetters = shorts.map((name) => name.slice(0, 2));
+    const useTwoLetters = latin && new Set(twoLetters.map((name) => name.toLowerCase())).size === 7;
+    return days.map((date, i) => ({
+        short: useTwoLetters ? twoLetters[i] : shortFormat.format(date),
+        long: longFormat.format(date),
+    }));
+}
+/** The locale if the browser supports it, otherwise `en-US`, so a bad tag never throws while rendering. */
+function supportedLocale(locale) {
+    var _a;
+    try {
+        return (_a = Intl.DateTimeFormat.supportedLocalesOf(locale)[0]) !== null && _a !== void 0 ? _a : 'en-US';
+    }
+    catch (_b) {
+        return 'en-US';
+    }
+}
+/**
+ * A formatter for the UTC dates these helpers return. Build it once per render, not per day.
+ * Always on the Gregorian calendar the grid is laid out in, while keeping the locale's language and
+ * digits: some locales default to another calendar (Persian for `fa`, Buddhist for `th`).
+ */
+function dateFormatter(locale, options) {
+    // `calendar` is newer than the library's ES2017 typings.
+    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, options), { timeZone: 'UTC', calendar: 'gregory' }));
+}
+function formatDate(date, locale, options) {
+    return dateFormatter(locale, options).format(date);
+}
+
+/**
+ * Where the open calendar lives: a `div` in `document.body`, or in the nearest `<dialog>` so it
+ * shares a modal's top layer, outside any `overflow: hidden` or transformed ancestor that would
+ * clip or misplace a fixed-position popup. The portal has its own shadow root carrying the
+ * datepicker's styles, so the calendar looks the same there without any global CSS.
+ */
+class CalendarPortal {
+    constructor(datepicker) {
+        this.datepicker = datepicker;
+        /** The custom properties copyContext set on the host, cleared before it copies again. */
+        this.copiedProperties = [];
+        this.host = document.createElement('div');
+        this.host.className = CalendarPortal.className;
+        // So an overlay can tell whether a click in this calendar belongs to a datepicker inside it.
+        this.host.pdsDatepicker = datepicker;
+        // The shared stylesheet's `:host` rules match this div too; keep it out of layout, so it never
+        // adds a line to the page, while it still passes `dir`, `lang` and the theme down.
+        this.host.style.display = 'contents';
+        this.root = this.host.attachShadow({ mode: 'open' });
+    }
+    /**
+     * Moves the calendar into the portal, mounting the portal first. Context is copied when the portal
+     * is attached or the locale changes, not on every render while it's open (in range mode, every
+     * hovered day). A theme set on an ancestor while the calendar is open applies when it next opens.
+     */
+    mount(calendar, locale) {
+        if (!this.host.isConnected) {
+            findPortalTarget(this.datepicker).appendChild(this.host);
+            this.copyContext(locale);
+        }
+        else if (locale !== this.locale) {
+            this.copyContext(locale);
+        }
+        if (calendar.parentNode !== this.root)
+            this.root.appendChild(calendar);
+    }
+    remove() {
+        this.host.remove();
+    }
+    /** Whether a node is the portal or inside it, as a focus or pointer target. */
+    contains(node) {
+        return !!node && (node === this.host || this.root.contains(node));
+    }
+    /**
+     * Carries over what the calendar would otherwise inherit from the datepicker: its styles, the
+     * reading direction and language, a theme set on an ancestor, and size overrides.
+     */
+    copyContext(locale) {
+        var _a, _b;
+        this.locale = locale;
+        const source = this.datepicker.shadowRoot;
+        if (source) {
+            if ((_a = source.adoptedStyleSheets) === null || _a === void 0 ? void 0 : _a.length) {
+                this.root.adoptedStyleSheets = source.adoptedStyleSheets;
+            }
+            else if (!this.root.querySelector('style')) {
+                source.querySelectorAll('style').forEach((style) => this.root.appendChild(style.cloneNode(true)));
+            }
+        }
+        const computed = getComputedStyle(this.datepicker);
+        this.host.dir = computed.direction || 'ltr';
+        // So assistive tech reads the month and day names in the calendar's own language.
+        this.host.lang = locale;
+        this.copyCustomProperties(computed);
+        // Across shadow boundaries: a theme set above an enclosing component still applies.
+        const theme = (_b = (closest.closest('[data-theme]', this.datepicker) || null)) === null || _b === void 0 ? void 0 : _b.getAttribute('data-theme');
+        if (theme) {
+            this.host.setAttribute('data-theme', theme);
+        }
+        else {
+            this.host.removeAttribute('data-theme');
+        }
+    }
+    /**
+     * Custom properties set on an ancestor of the datepicker that isn't an ancestor of the portal,
+     * as a token override on a card or panel, or the datepicker's own size properties: each one whose
+     * value at the datepicker differs from where the portal mounts is set on the portal host.
+     */
+    copyCustomProperties(computed) {
+        for (const property of this.copiedProperties)
+            this.host.style.removeProperty(property);
+        this.copiedProperties = [];
+        const parent = this.host.parentElement;
+        const outside = parent ? getComputedStyle(parent) : null;
+        for (let i = 0; i < computed.length; i++) {
+            const property = computed[i];
+            if (!property.startsWith('--'))
+                continue;
+            const value = computed.getPropertyValue(property);
+            if (outside && value === outside.getPropertyValue(property))
+                continue;
+            this.host.style.setProperty(property, value.trim());
+            this.copiedProperties.push(property);
+        }
+    }
+}
+CalendarPortal.className = 'pds-datepicker-calendar-portal';
+/**
+ * The native `<dialog>` or open `popover` (as pds-filter's) the datepicker sits in, so the
+ * calendar shares its top layer and a click in it isn't outside it; otherwise `document.body`.
+ * `closest()` stops at shadow boundaries and misses one that only wraps slotted content, so this
+ * walks assigned slots and shadow hosts, as pds-combobox does.
+ */
+function findPortalTarget(from) {
+    const seen = new Set();
+    let current = from;
+    while (current && !seen.has(current)) {
+        seen.add(current);
+        if (current.nodeType === Node.ELEMENT_NODE && isTopLayerHost(current)) {
+            return current;
+        }
+        const assigned = current.nodeType === Node.ELEMENT_NODE ? current.assignedSlot : null;
+        if (assigned) {
+            current = assigned;
+            continue;
+        }
+        const parent = current.parentNode;
+        current = parent instanceof ShadowRoot ? parent.host : parent;
+    }
+    return document.body;
+}
+function isTopLayerHost(el) {
+    // Only an open dialog: inside a closed one, the calendar would be hidden with it.
+    if (el.localName === 'dialog')
+        return el.open;
+    if (!el.hasAttribute('popover'))
+        return false;
+    try {
+        return el.matches(':popover-open');
+    }
+    catch (_a) {
+        // A browser without the Popover API: no top layer to share.
+        return false;
+    }
+}
+
+const DEFAULT_LABELS = {
+    'today': 'Today',
+    'yesterday': 'Yesterday',
+    'last-7-days': 'Last 7 days',
+    'last-30-days': 'Last 30 days',
+    'last-90-days': 'Last 90 days',
+    'this-month': 'This month',
+    'last-month': 'Last month',
+    'this-quarter': 'This quarter',
+    'last-quarter': 'Last quarter',
+    'this-year': 'This year',
+    'last-year': 'Last year',
+    'year-to-date': 'Year to date',
+    'last-12-months': 'Last 12 months',
+};
+const utc = (year, month, day) => new Date(Date.UTC(year, month, day));
+/**
+ * The range a built-in preset covers on the given day, or `null` for an unknown key. "Last N days"
+ * is N days ending today; "this" and "last" periods are whole periods; "to date" ends today.
+ */
+function builtInPresetRange(key, now) {
+    const year = now.getUTCFullYear();
+    const month = now.getUTCMonth();
+    const quarterStart = month - (month % 3);
+    switch (key) {
+        case 'today':
+            return [now, now];
+        case 'yesterday':
+            return [addDays(now, -1), addDays(now, -1)];
+        case 'last-7-days':
+            return [addDays(now, -6), now];
+        case 'last-30-days':
+            return [addDays(now, -29), now];
+        case 'last-90-days':
+            return [addDays(now, -89), now];
+        case 'this-month':
+            return [utc(year, month, 1), utc(year, month + 1, 0)];
+        case 'last-month':
+            return [utc(year, month - 1, 1), utc(year, month, 0)];
+        case 'this-quarter':
+            return [utc(year, quarterStart, 1), utc(year, quarterStart + 3, 0)];
+        case 'last-quarter':
+            return [utc(year, quarterStart - 3, 1), utc(year, quarterStart, 0)];
+        case 'this-year':
+            return [utc(year, 0, 1), utc(year, 11, 31)];
+        case 'last-year':
+            return [utc(year - 1, 0, 1), utc(year - 1, 11, 31)];
+        case 'year-to-date':
+            return [utc(year, 0, 1), now];
+        case 'last-12-months':
+            return [addMonths(now, -12), now];
+        default:
+            return null;
+    }
+}
+/**
+ * Normalizes the `presets` prop: a comma-separated list of built-in keys, or an array of presets
+ * that may relabel a built-in (for translation) or give their own `start` and `end`. Entries that
+ * resolve to no range are dropped.
+ */
+function resolvePresets(presets, now) {
+    const entries = typeof presets === 'string'
+        ? presets
+            .split(',')
+            .map((key) => key.trim())
+            .filter(Boolean)
+            .map((key) => ({ key }))
+        : Array.isArray(presets)
+            ? presets
+            : [];
+    const resolved = [];
+    for (const preset of entries) {
+        // Presets often come from parsed JSON, so check types at runtime: a non-string label would
+        // otherwise reach the render as an object, which Stencil can turn into nodes.
+        if (!preset || typeof preset.key !== 'string')
+            continue;
+        const start = typeof preset.start === 'string' ? parseIsoDate(preset.start) : null;
+        const end = typeof preset.end === 'string' ? parseIsoDate(preset.end) : null;
+        const range = start && end && start <= end ? [start, end] : builtInPresetRange(preset.key, now);
+        const label = typeof preset.label === 'string' ? preset.label : DEFAULT_LABELS[preset.key];
+        if (range && label)
+            resolved.push({ key: preset.key, label, start: range[0], end: range[1] });
+    }
+    return resolved;
+}
+/** The first preset covering exactly this range. */
+function matchPreset(presets, start, end) {
+    if (!start || !end)
+        return undefined;
+    return presets.find((preset) => preset.start.getTime() === start.getTime() && preset.end.getTime() === end.getTime());
+}
+/** Whether a preset's whole range can be picked within `min` and `max`. */
+function presetInRange(preset, min, max) {
+    return !isOutOfRange(preset.start, min, max) && !isOutOfRange(preset.end, min, max);
+}
+
+const DATE_TIME = /^(\d{4}-\d{2}-\d{2})(?:[T ](\d{2}):(\d{2}))?$/;
+/** Parses `YYYY-MM-DD`, `YYYY-MM-DDTHH:mm` or `YYYY-MM-DD HH:mm`. */
+function parseDateTime(text) {
+    const match = DATE_TIME.exec((text !== null && text !== void 0 ? text : '').trim());
+    if (!match)
+        return null;
+    const date = parseIsoDate(match[1]);
+    if (!date)
+        return null;
+    if (match[2] === undefined)
+        return { date, time: null };
+    const hours = Number(match[2]);
+    const minutes = Number(match[3]);
+    return hours < 24 && minutes < 60 ? { date, time: `${match[2]}:${match[3]}` } : null;
+}
+const DEFAULT_FORMAT = 'YYYY-MM-DD';
+/**
+ * A format's parts: `[text]` is literal text, and the tokens are `YYYY`, `MMMM` (month name),
+ * `MMM` (short month name), `MM`/`M` (month), `DD`/`D` (day), `HH`/`H` (24-hour), `hh`/`h`
+ * (12-hour), `mm` (minutes) and `A`/`a` (AM/PM). Longest tokens first, so `MM` isn't read as two
+ * `M`s. Anything else is copied as is.
+ */
+const FORMAT_PARTS = /\[([^\]]*)\]|YYYY|MMMM|MMM|MM|M|DD|D|HH|H|hh|h|mm|A|a/g;
+const HOUR_TOKEN = /HH|H|hh|h/;
+const TWELVE_HOUR_TOKEN = /hh|h/;
+const PERIOD_TOKEN = /A|a/;
+/** Without its `[literal]` parts, to test which tokens a format uses. */
+const tokensOnly = (format) => format.replace(/\[[^\]]*\]/g, '');
+/**
+ * The field's format: the date format, with a time added when the time picker is on and it has
+ * none, on the same clock as the time picker. A 12-hour format gets AM/PM if it has none, as
+ * `1:30` alone can't say which.
+ */
+function fieldFormat(format, timePicker, hour12 = false) {
+    const date = (format === null || format === void 0 ? void 0 : format.trim()) || DEFAULT_FORMAT;
+    const tokens = tokensOnly(date);
+    if (TWELVE_HOUR_TOKEN.test(tokens) && !PERIOD_TOKEN.test(tokens))
+        return `${date} A`;
+    if (!timePicker || HOUR_TOKEN.test(tokens))
+        return date;
+    return `${date} ${hour12 ? 'h:mm A' : 'HH:mm'}`;
+}
+const pad = (n, width = 2) => String(n).padStart(width, '0');
+const wordsCache = new Map();
+/** Month names and AM/PM words in the locale, on the Gregorian calendar. */
+function localeWords(locale) {
+    let words = wordsCache.get(locale);
+    if (!words) {
+        const month = (style) => {
+            const format = new Intl.DateTimeFormat(locale, {
+                month: style,
+                timeZone: 'UTC',
+                calendar: 'gregory',
+            });
+            return Array.from({ length: 12 }, (_, m) => format.format(new Date(Date.UTC(2023, m, 1))));
+        };
+        const clock = clockFor(locale);
+        words = { months: month('long'), shortMonths: month('short'), am: clock.am, pm: clock.pm };
+        wordsCache.set(locale, words);
+    }
+    return words;
+}
+/** Writes a date in a format of tokens (see `FORMAT_PARTS`), with month names and AM/PM in the locale. */
+function formatWith(value, format, locale = 'en-US') {
+    var _a;
+    const words = localeWords(locale);
+    const [hours, minutes] = splitTime((_a = value.time) !== null && _a !== void 0 ? _a : '00:00');
+    const hour12 = hours % 12 || 12;
+    const month = value.date.getUTCMonth();
+    const period = hours < 12 ? words.am : words.pm;
+    const parts = {
+        YYYY: pad(value.date.getUTCFullYear(), 4),
+        MMMM: words.months[month],
+        MMM: words.shortMonths[month],
+        MM: pad(month + 1),
+        M: String(month + 1),
+        DD: pad(value.date.getUTCDate()),
+        D: String(value.date.getUTCDate()),
+        HH: pad(hours),
+        H: String(hours),
+        hh: pad(hour12),
+        h: String(hour12),
+        mm: pad(minutes),
+        A: period,
+        a: period.toLowerCase(),
+    };
+    return format.replace(FORMAT_PARTS, (token, literal) => literal !== null && literal !== void 0 ? literal : parts[token]);
+}
+const escapeRegExp = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+/** Escapes a format's literal text for a pattern, letting its spaces match any run of spaces. */
+const literalPattern = (literal) => escapeRegExp(literal).replace(/\s+/g, '\\s*');
+const alternatives = (words) => `(${words.map(escapeRegExp).join('|')})`;
+/**
+ * Reads typed text in a format of tokens, as written by `formatWith`. Leading zeros are optional,
+ * spaces are loose, and month names and AM/PM are matched without regard to case, in the locale or
+ * in English. Returns `null` for anything that isn't a real date and time in that format.
+ */
+function parseWith(text, format, locale = 'en-US') {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const words = localeWords(locale);
+    const english = localeWords('en-US');
+    const periods = [words.am, words.pm, english.am, english.pm];
+    const patterns = {
+        YYYY: '(\\d{4})',
+        MMMM: alternatives([...words.months, ...english.months]),
+        MMM: alternatives([...words.shortMonths, ...english.shortMonths]),
+        MM: '(\\d{1,2})',
+        M: '(\\d{1,2})',
+        DD: '(\\d{1,2})',
+        D: '(\\d{1,2})',
+        HH: '(\\d{1,2})',
+        H: '(\\d{1,2})',
+        hh: '(\\d{1,2})',
+        h: '(\\d{1,2})',
+        mm: '(\\d{2})',
+        A: alternatives(periods),
+        a: alternatives(periods),
+    };
+    const tokens = [];
+    const build = () => {
+        tokens.length = 0;
+        let pattern = '';
+        let last = 0;
+        format.replace(FORMAT_PARTS, (token, literal, offset) => {
+            pattern += literalPattern(format.slice(last, offset));
+            if (literal !== undefined) {
+                pattern += literalPattern(literal);
+            }
+            else {
+                pattern += patterns[token];
+                tokens.push(token);
+            }
+            last = offset + token.length;
+            return token;
+        });
+        return new RegExp(`^\\s*${pattern}${literalPattern(format.slice(last))}\\s*$`, 'i');
+    };
+    // Two-digit minutes first, so a format with no separator, as `HHmm`, still reads `930` as 9:30;
+    // then one digit, as leading zeros are optional.
+    let match = build().exec(text !== null && text !== void 0 ? text : '');
+    if (!match) {
+        patterns.mm = '(\\d{1,2})';
+        match = build().exec(text !== null && text !== void 0 ? text : '');
+    }
+    if (!match)
+        return null;
+    const found = match;
+    const read = {};
+    tokens.forEach((token, i) => (read[token] = found[i + 1]));
+    const monthIndex = (name, long) => {
+        if (name === undefined)
+            return undefined;
+        const lists = long ? [words.months, english.months] : [words.shortMonths, english.shortMonths];
+        for (const list of lists) {
+            const index = list.findIndex((candidate) => candidate.toLowerCase() === name.toLowerCase());
+            if (index >= 0)
+                return index + 1;
+        }
+        return undefined;
+    };
+    const year = Number(read.YYYY);
+    const month = (_b = (_a = monthIndex(read.MMMM, true)) !== null && _a !== void 0 ? _a : monthIndex(read.MMM, false)) !== null && _b !== void 0 ? _b : Number((_c = read.MM) !== null && _c !== void 0 ? _c : read.M);
+    const day = Number((_d = read.DD) !== null && _d !== void 0 ? _d : read.D);
+    if (!read.YYYY || !month || !day)
+        return null;
+    const date = parseIsoDate(`${pad(year, 4)}-${pad(month)}-${pad(day)}`);
+    if (!date)
+        return null;
+    const hourText = (_g = (_f = (_e = read.HH) !== null && _e !== void 0 ? _e : read.H) !== null && _f !== void 0 ? _f : read.hh) !== null && _g !== void 0 ? _g : read.h;
+    if (hourText === undefined)
+        return { date, time: null };
+    let hours = Number(hourText);
+    const minutes = Number((_h = read.mm) !== null && _h !== void 0 ? _h : 0);
+    const period = (_k = ((_j = read.A) !== null && _j !== void 0 ? _j : read.a)) === null || _k === void 0 ? void 0 : _k.toLowerCase();
+    if (read.hh !== undefined || read.h !== undefined) {
+        if (hours < 1 || hours > 12)
+            return null;
+        const pm = period === words.pm.toLowerCase() || period === english.pm.toLowerCase();
+        hours = (hours % 12) + (pm ? 12 : 0);
+    }
+    return hours < 24 && minutes < 60 ? { date, time: joinTime(hours, minutes) } : null;
+}
+/** Reads one typed date in the format, falling back to ISO, which is always accepted. */
+function parseFieldText(text, format = DEFAULT_FORMAT, locale = 'en-US') {
+    var _a;
+    return (_a = parseWith(text, format, locale)) !== null && _a !== void 0 ? _a : parseDateTime(text);
+}
+/**
+ * Parses a typed range: two dates (with times, optionally) joined by a dash or `to` with spaces
+ * around it, as `2026-09-13 – 2026-10-13`, or by `/` when the format doesn't use slashes. The
+ * split is tried at each separator until both halves read as dates, so a format that itself has a
+ * spaced dash, as `D - M - YYYY`, still works.
+ */
+function parseRangeText(text, format = DEFAULT_FORMAT, locale = 'en-US') {
+    const trimmed = (text !== null && text !== void 0 ? text : '').trim();
+    const separators = new RegExp(`${escapeRegExp(RANGE_SEPARATOR)}|\\s+(?:–|—|-|to)\\s+${format.includes('/') ? '' : '|\\s*/\\s*'}`, 'gi');
+    let found;
+    while ((found = separators.exec(trimmed)) !== null) {
+        const start = parseFieldText(trimmed.slice(0, found.index), format, locale);
+        const end = parseFieldText(trimmed.slice(found.index + found[0].length), format, locale);
+        if (start && end)
+            return compareDateTime(start, end) <= 0 ? [start, end] : null;
+    }
+    return null;
+}
+function compareDateTime(a, b) {
+    var _a, _b;
+    const byDay = a.date.getTime() - b.date.getTime();
+    if (byDay !== 0)
+        return byDay;
+    return ((_a = a.time) !== null && _a !== void 0 ? _a : '00:00').localeCompare((_b = b.time) !== null && _b !== void 0 ? _b : '00:00');
+}
+/** The value form: `YYYY-MM-DD`, or `YYYY-MM-DDTHH:mm` with a time. */
+function toValueString(value) {
+    return value.time ? `${toIsoDate(value.date)}T${value.time}` : toIsoDate(value.date);
+}
+/** The field form in a format, or by default `YYYY-MM-DD`, with ` HH:mm` when it has a time. */
+function toFieldText(value, format, locale = 'en-US') {
+    return formatWith(value, format !== null && format !== void 0 ? format : fieldFormat(DEFAULT_FORMAT, !!value.time), locale);
+}
+const RANGE_SEPARATOR = ' – ';
+/** Hour and minute numbers from `HH:mm`. */
+function splitTime(time) {
+    const [hours, minutes] = time.split(':').map(Number);
+    return [hours || 0, minutes || 0];
+}
+function joinTime(hours, minutes) {
+    return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
+}
+/** Whether the locale writes times on a 12-hour clock, and its AM and PM words. */
+function clockFor(locale) {
+    var _a, _b;
+    const format = new Intl.DateTimeFormat(locale, { hour: 'numeric', timeZone: 'UTC' });
+    const hour12 = !!format.resolvedOptions().hour12;
+    const period = (hour) => { var _a; return (_a = format.formatToParts(new Date(Date.UTC(2023, 0, 1, hour))).find((part) => part.type === 'dayPeriod')) === null || _a === void 0 ? void 0 : _a.value; };
+    return { hour12, am: (_a = period(1)) !== null && _a !== void 0 ? _a : 'AM', pm: (_b = period(13)) !== null && _b !== void 0 ? _b : 'PM' };
+}
+
+const pdsDatepickerCss = () => `:host{--pds-datepicker-day-size:var(--pine-dimension-500);--pds-datepicker-presets-width:200px;display:inline-block}:host([full-width]){display:block}pds-input{display:block}:host(.pds-datepicker--time) pds-input{min-width:220px}:host(.pds-datepicker--range) pds-input{min-width:260px}:host(.pds-datepicker--range.pds-datepicker--time) pds-input{min-width:min(380px, 100%)}.pds-datepicker__trigger,.pds-datepicker__clear{-ms-flex-align:center;align-items:center;background:transparent;border:0;border-radius:var(--pine-border-radius-sm);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-2xs)}.pds-datepicker__trigger:hover:not(:disabled),.pds-datepicker__clear:hover:not(:disabled){background:var(--pine-color-background-muted);color:var(--pine-color-text-strong)}.pds-datepicker__trigger:focus-visible,.pds-datepicker__clear:focus-visible{outline:var(--pine-outline-focus)}.pds-datepicker__trigger:disabled,.pds-datepicker__clear:disabled{color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-datepicker__clear{-webkit-margin-end:var(--pine-dimension-2xs);margin-inline-end:var(--pine-dimension-2xs)}.pds-datepicker__nav{-ms-flex-align:center;align-items:center;background:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;height:var(--pine-dimension-400);-ms-flex-pack:center;justify-content:center;padding:0;width:var(--pine-dimension-400)}.pds-datepicker__nav:hover:not(:disabled){background:var(--pine-color-secondary-hover);border-color:var(--pine-color-border-hover)}.pds-datepicker__nav:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-datepicker__nav:disabled{border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-secondary-disabled);cursor:not-allowed}.pds-datepicker__nav:dir(rtl) pds-icon{-webkit-transform:scaleX(-1);transform:scaleX(-1)}.pds-datepicker__dialog:focus{outline:none}.pds-datepicker__dialog{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-150);-webkit-box-shadow:var(--pine-box-shadow-200);box-shadow:var(--pine-box-shadow-200);-webkit-box-sizing:border-box;box-sizing:border-box;left:0;max-height:calc(100vh - var(--pine-dimension-sm));max-height:calc(100dvh - var(--pine-dimension-sm));max-width:calc(100vw - var(--pine-dimension-sm));overflow:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding:var(--pine-dimension-sm);pointer-events:auto;position:fixed;top:0;visibility:hidden;z-index:var(--pine-z-index-priority)}:host-context([data-theme=dark]) .pds-datepicker__dialog{border:var(--pine-border)}.pds-datepicker__header{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-after:var(--pine-dimension-sm);margin-block-end:var(--pine-dimension-sm)}.pds-datepicker__nav-spacer{-ms-flex:none;flex:none;width:var(--pine-dimension-400)}.pds-datepicker__heading{color:var(--pine-color-text);font:var(--pine-typography-heading-5);font-weight:var(--pine-font-weight-semi-bold)}.pds-datepicker__grid{border-collapse:collapse;border-spacing:0}.pds-datepicker__weekday{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm);height:var(--pds-datepicker-day-size);padding:0;text-align:center;width:var(--pds-datepicker-day-size)}.pds-datepicker__day{border-radius:var(--pine-border-radius-full);color:var(--pine-color-text-secondary);cursor:pointer;font:var(--pine-typography-body);height:var(--pds-datepicker-day-size);padding:0;position:relative;text-align:center;-webkit-transition:background var(--pine-motion-duration-fast) var(--pine-motion-easing-in);transition:background var(--pine-motion-duration-fast) var(--pine-motion-easing-in);width:var(--pds-datepicker-day-size)}.pds-datepicker__day:hover{background:var(--pine-color-background-muted)}.pds-datepicker__day:focus-visible{outline:var(--pine-outline-focus);outline-offset:calc(var(--pine-border-width-thick) * -1)}.pds-datepicker__day--empty{cursor:default;pointer-events:none}.pds-datepicker__day--today::after{background:var(--pine-color-primary);border-radius:var(--pine-border-radius-full);content:"";height:var(--pine-dimension-050);inset-block-end:var(--pine-dimension-050);inset-inline-start:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:var(--pine-dimension-050)}.pds-datepicker__day--selected,.pds-datepicker__day--selected:hover{background:var(--pine-color-primary);border-radius:var(--pine-border-radius-full);color:var(--pine-color-text-primary)}.pds-datepicker__day--selected:focus-visible{outline-offset:var(--pine-border-width)}.pds-datepicker__day--range-start{border-end-end-radius:0;border-start-end-radius:0}.pds-datepicker__day--range-end{border-end-start-radius:0;border-start-start-radius:0}.pds-datepicker__day--range-start.pds-datepicker__day--row-end{border-end-end-radius:var(--pine-border-radius-full);border-start-end-radius:var(--pine-border-radius-full)}.pds-datepicker__day--range-end.pds-datepicker__day--row-start{border-end-start-radius:var(--pine-border-radius-full);border-start-start-radius:var(--pine-border-radius-full)}.pds-datepicker__day--selected.pds-datepicker__day--today::after{background:var(--pine-color-text-primary)}.pds-datepicker__day--in-range,.pds-datepicker__day--in-range:hover{background:var(--pine-color-background-muted);border-radius:0;color:var(--pine-color-text-secondary)}.pds-datepicker__day--row-start{border-end-start-radius:var(--pine-border-radius-full);border-start-start-radius:var(--pine-border-radius-full)}.pds-datepicker__day--row-end{border-end-end-radius:var(--pine-border-radius-full);border-start-end-radius:var(--pine-border-radius-full)}.pds-datepicker__day--disabled,.pds-datepicker__day--disabled:hover{background:transparent;color:var(--pine-color-text-disabled);cursor:not-allowed;text-decoration:line-through}.pds-datepicker__day--in-range:hover{background:var(--pine-color-background-inset)}.pds-datepicker__dialog--range{display:-ms-flexbox;display:flex;padding:0}.pds-datepicker__panel{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;min-width:0}.pds-datepicker__dialog--range .pds-datepicker__panel{padding:var(--pine-dimension-sm)}.pds-datepicker__months{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-lg)}.pds-datepicker__presets-column{-webkit-border-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-inline-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);-ms-flex:none;flex:none;position:relative;width:var(--pds-datepicker-presets-width)}.pds-datepicker__presets{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:var(--pine-dimension-2xs);inset:0;list-style:none;margin:0;overflow-y:auto;padding:var(--pine-dimension-150);position:absolute}.pds-datepicker__preset{-ms-flex-align:center;align-items:center;background:transparent;border:0;border-radius:var(--pine-border-radius-md);color:var(--pine-color-text-secondary);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;padding:var(--pine-dimension-xs) var(--pine-dimension-sm);text-align:start;-webkit-transition:background var(--pine-motion-duration-fast) var(--pine-motion-easing-in);transition:background var(--pine-motion-duration-fast) var(--pine-motion-easing-in);width:100%}.pds-datepicker__preset:hover:not(:disabled){background:var(--pine-color-background-muted)}.pds-datepicker__preset:focus-visible{outline:var(--pine-outline-focus)}.pds-datepicker__preset:disabled{color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-datepicker__preset--selected{background:var(--pine-color-background-muted);color:var(--pine-color-text-active)}.pds-datepicker__footer{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-overlay);-webkit-border-before:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-start:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-xs);inset-block-end:calc(var(--pine-dimension-sm) * -1);-ms-flex-pack:end;justify-content:flex-end;margin-block:var(--pine-dimension-sm) calc(var(--pine-dimension-sm) * -1);padding-block:var(--pine-dimension-sm);position:-webkit-sticky;position:sticky}.pds-datepicker__selection{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);-webkit-margin-end:auto;margin-inline-end:auto}.pds-datepicker__dropdowns{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-datepicker__select-wrap{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-datepicker__heading-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-md);color:var(--pine-color-text);cursor:pointer;field-sizing:content;font:var(--pine-typography-heading-5);font-weight:var(--pine-font-weight-semi-bold);padding-block:var(--pine-dimension-2xs);padding-inline:var(--pine-dimension-xs) calc(var(--pine-dimension-xs) + var(--pine-dimension-sm))}.pds-datepicker__heading-select:hover{background:var(--pine-color-background-muted)}.pds-datepicker__heading-select:focus-visible{outline:var(--pine-outline-focus)}.pds-datepicker__select-caret{color:var(--pine-color-text-secondary);inset-inline-end:var(--pine-dimension-xs);pointer-events:none;position:absolute}.pds-datepicker__time{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;-webkit-margin-before:var(--pine-dimension-sm);margin-block-start:var(--pine-dimension-sm);padding-inline:var(--pine-dimension-xs)}.pds-datepicker__time-label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium)}.pds-datepicker__time-field{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-border-radius-md);display:-ms-inline-flexbox;display:inline-flex;min-height:var(--pine-dimension-400);padding-inline:var(--pine-dimension-2xs)}.pds-datepicker__time-field:hover{border-color:var(--pine-color-border-hover)}.pds-datepicker__time-field:focus-within{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-datepicker__time-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-border-radius-sm);color:var(--pine-color-text-strong);cursor:pointer;font:var(--pine-typography-body);font-variant-numeric:tabular-nums;padding:var(--pine-dimension-2xs);text-align:center}.pds-datepicker__time-select:focus-visible{background:var(--pine-color-background-muted);outline:none}.pds-datepicker__time-select--period{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs)}.pds-datepicker__time-separator{color:var(--pine-color-text-secondary)}:host-context([data-theme=dark]) select{color-scheme:dark}.pds-datepicker__action{background:var(--pine-color-secondary);border:var(--pine-border);border-radius:var(--pine-border-radius-full);color:var(--pine-color-text-secondary);cursor:pointer;font:var(--pine-typography-body-medium);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-datepicker__action:hover:not(:disabled){background:var(--pine-color-secondary-hover);border-color:var(--pine-color-border-hover)}.pds-datepicker__action:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-datepicker__action:disabled{background:var(--pine-color-secondary-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-secondary-disabled);cursor:not-allowed}.pds-datepicker__action--primary{background:var(--pine-color-primary);border-color:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-datepicker__action--primary:hover:not(:disabled){background:var(--pine-color-primary-hover);border-color:var(--pine-color-primary-hover)}.pds-datepicker__action--primary:disabled{background:var(--pine-color-primary-disabled);border-color:var(--pine-color-primary-disabled);color:var(--pine-color-text-primary-disabled)}@media (max-width: 600px){.pds-datepicker__dialog--range{-ms-flex-direction:column;flex-direction:column}.pds-datepicker__presets-column{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);-webkit-border-end:0;border-inline-end:0;width:auto}.pds-datepicker__presets{-ms-flex-direction:row;flex-direction:row;overflow-x:auto;position:static}.pds-datepicker__preset{white-space:nowrap}.pds-datepicker__selection{-ms-flex-preferred-size:100%;flex-basis:100%}}.pds-datepicker__trigger,.pds-datepicker__clear,.pds-datepicker__nav,.pds-datepicker__weekday,.pds-datepicker__day,.pds-datepicker__preset,.pds-datepicker__action{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media (forced-colors: active){.pds-datepicker__day--selected,.pds-datepicker__day--selected:hover{background:Highlight;color:HighlightText;forced-color-adjust:none}.pds-datepicker__day--in-range,.pds-datepicker__day--in-range:hover{border-block:var(--pine-border-width-thin) solid Highlight}.pds-datepicker__day--today::after{background:CanvasText;forced-color-adjust:none}.pds-datepicker__day--selected.pds-datepicker__day--today::after{background:HighlightText}.pds-datepicker__day--disabled{color:GrayText}}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+
+const FULL_DATE = { weekday: 'long', year: 'numeric', 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); };
+const PdsDatepicker = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pdsDatepickerChange = index.createEvent(this, "pdsDatepickerChange");
+        this.pdsBlur = index.createEvent(this, "pdsBlur");
+        this.pdsFocus = index.createEvent(this, "pdsFocus");
+        /** 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`), whatever the format. Typed ISO dates are always
+         * accepted too.
+         */
+        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';
+        /**
+         * 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`. 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.timePicker) {
+                // 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.range ? 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.range && 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';
+            const column = 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':
+                    next = addDays(active, 6 - column);
+                    break;
+                case 'PageUp':
+                    next = addMonths(active, event.shiftKey ? -12 : -1);
+                    break;
+                case 'PageDown':
+                    next = 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(next, this.minDate, this.maxDate);
+            this.showDate(target);
+            if (this.range)
+                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.range || !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 = '';
+        this.updateFormValue();
+        if (!this.isOpen)
+            return;
+        const parts = this.parsedValue();
+        this.loadDraft(parts);
+        const day = (_a = (parts && parts[parts.length - 1].date)) !== null && _a !== void 0 ? _a : today();
+        this.showDate(clampDate(day, this.minDate, this.maxDate), true);
+    }
+    requiredChanged() {
+        this.updateFormValue();
+    }
+    componentWillLoad() {
+        this.text = this.fieldText();
+    }
+    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 || i18nFormat.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 parseIsoDate(this.min);
+    }
+    get maxDate() {
+        return parseIsoDate(this.max);
+    }
+    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.range && !narrow ? 2 : 1;
+    }
+    /** Whether picks apply at once, without the footer: `auto-apply` in range mode, without times. */
+    get appliesOnPick() {
+        return this.range && this.autoApply && !this.timePicker;
+    }
+    /** Whether picks wait for Apply: for a range, unless it auto-applies, and for a date with a time. */
+    get hasFooter() {
+        return (this.range || this.timePicker) && !this.appliesOnPick;
+    }
+    get resolvedPresets() {
+        return this.range ? resolvePresets(this.presets, today()) : [];
+    }
+    /** The committed value, parsed: one date, or a range's start and end. */
+    parsedValue(value = this.value) {
+        if (this.range) {
+            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;
+        }
+        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() {
+        return fieldFormat(this.format, this.timePicker, this.timePicker && 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.timePicker ? ((_a = value.time) !== null && _a !== void 0 ? _a : fallback) : null };
+    }
+    get fieldPlaceholder() {
+        if (this.placeholder)
+            return this.placeholder;
+        const one = this.resolvedFormat;
+        return this.range ? `${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.range && 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 : today();
+        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(date, reset = false) {
+        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.range) {
+            this.pickRangeDay(date);
+        }
+        else if (this.timePicker) {
+            this.draftStart = toIsoDate(date);
+            this.activeDate = this.draftStart;
+        }
+        else {
+            this.commitValue(toIsoDate(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.range) {
+            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.range)
+            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 = floatingUi_dom.autoUpdate(reference, floating, () => {
+            floatingUi_dom.computePosition(reference, floating, {
+                placement: this.placement,
+                strategy: 'fixed',
+                middleware: [
+                    floatingUi_dom.offset(4),
+                    floatingUi_dom.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.
+                    floatingUi_dom.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`,
+                            });
+                        },
+                    }),
+                    floatingUi_dom.shift({ padding: VIEWPORT_PADDING, crossAxis: true }),
+                    floatingUi_dom.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.range ? 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 : today();
+        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 : today();
+        const active = (_b = parseIsoDate(this.activeDate)) !== null && _b !== void 0 ? _b : today();
+        this.viewMonth = toIsoDate(addMonths(view, direction));
+        this.activeDate = toIsoDate(clampDate(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 (form.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 i18nFormat.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, 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.range)
+            return null;
+        return parseIsoDate(this.draftStart);
+    }
+    renderMonthHeading(view, index$2, locale, headingId) {
+        const heading = formatDate(view, locale, { month: 'long', year: 'numeric' });
+        // Only the first month announces itself as it changes; two months move together.
+        const live = index$2 === 0 ? 'polite' : null;
+        if (!this.showDropdowns) {
+            return (index.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 (index.h("div", { class: "pds-datepicker__dropdowns" }, index.h("span", { class: "visually-hidden", id: headingId, "aria-live": live }, heading), index.h("span", { class: "pds-datepicker__select-wrap" }, index.h("select", { class: "pds-datepicker__heading-select", "aria-label": this.monthLabel, onChange: (event) => this.jumpTo(index$2, 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 (index.h("option", { value: String(m), selected: m === month, disabled: outside }, monthName.format(new Date(Date.UTC(year, m, 1)))));
+        })), index.h("pds-icon", { class: "pds-datepicker__select-caret", icon: index$1.caretDown, size: "small", "aria-hidden": "true" })), index.h("span", { class: "pds-datepicker__select-wrap" }, index.h("select", { class: "pds-datepicker__heading-select", "aria-label": this.yearLabel, onChange: (event) => this.jumpTo(index$2, 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 (index.h("option", { value: String(y), selected: y === year }, yearName.format(new Date(Date.UTC(y, 0, 1)))));
+        })), index.h("pds-icon", { class: "pds-datepicker__select-caret", icon: index$1.caretDown, size: "small", "aria-hidden": "true" }))));
+    }
+    renderMonth(view, index$2, 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.range ? this.highlightedRange() : [null, null];
+        const now = today();
+        const fullDate = dateFormatter(locale, FULL_DATE);
+        const dayNumber = dateFormatter(locale, { day: 'numeric' });
+        const headingId = `${this.baseId}-calendar-heading-${index$2}`;
+        const isFirst = index$2 === 0;
+        const isLast = index$2 === this.monthCount - 1;
+        return (index.h("div", { class: "pds-datepicker__month" }, index.h("div", { class: "pds-datepicker__header" }, isFirst ? (index.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) }, index.h("pds-icon", { icon: index$1.caretLeft, "aria-hidden": "true" }))) : (index.h("span", { class: "pds-datepicker__nav-spacer" })), this.renderMonthHeading(view, index$2, locale, headingId), isLast ? (index.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) }, index.h("pds-icon", { icon: index$1.caretRight, "aria-hidden": "true" }))) : (index.h("span", { class: "pds-datepicker__nav-spacer" }))), index.h("table", { class: "pds-datepicker__grid", role: "grid", "aria-labelledby": headingId, "aria-multiselectable": this.range ? 'true' : null, onKeyDown: this.onGridKeyDown, onClick: this.onGridClick, onPointerOver: this.onGridPointerOver }, index.h("thead", null, index.h("tr", null, weekdayNames(locale, this.weekStart).map((name) => (index.h("th", { scope: "col", class: "pds-datepicker__weekday" }, index.h("span", { "aria-hidden": "true" }, name.short), index.h("span", { class: "visually-hidden" }, name.long)))))), index.h("tbody", null, monthWeeks(year, month, this.weekStart).map((week) => (index.h("tr", null, week.map((date, column) => {
+            if (!date)
+                return index.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 (index.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.timePicker && this.timesUnderMonth(index$2).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.range)
+            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.range ? 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 (index.h("div", { class: "pds-datepicker__time", role: "group", "aria-labelledby": labelId }, index.h("span", { class: "pds-datepicker__time-label", id: labelId }, groupLabel), index.h("span", { class: "pds-datepicker__time-field" }, index.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) => (index.h("option", { value: String(hour), selected: hour === shownHour }, clock.hour12 ? String(hour) : String(hour).padStart(2, '0'))))), index.h("span", { class: "pds-datepicker__time-separator", "aria-hidden": "true" }, ":"), index.h("select", { class: "pds-datepicker__time-select", "aria-label": this.minuteLabel, onChange: (event) => setTime(hours, Number(event.target.value)) }, minuteOptions.map((m) => (index.h("option", { value: String(m), selected: m === minutes }, String(m).padStart(2, '0'))))), clock.hour12 && (index.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);
+            } }, index.h("option", { value: "am", selected: !isPm }, clock.am), index.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 (index.h("div", { class: "pds-datepicker__presets-column" }, index.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 (index.h("li", { role: "none" }, index.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) }, index.h("span", null, preset.label), isCurrent && index.h("pds-icon", { icon: index$1.check, "aria-hidden": "true" }))));
+        }), index.h("li", { role: "none" }, index.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 }, index.h("span", null, this.customRangeLabel), isCustom && index.h("pds-icon", { icon: index$1.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.range && !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 (index.h("div", { class: "pds-datepicker__footer" }, index.h("span", { class: "pds-datepicker__selection", "aria-live": "polite" }, selection), index.h("button", { type: "button", class: "pds-datepicker__action", onClick: this.onCancel }, this.clearable ? this.clearLabel : this.cancelLabel), index.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 : today();
+        const months = Array.from({ length: this.monthCount }, (_, i) => addMonths(view, i));
+        return (index.h("div", { class: { 'pds-datepicker__dialog': true, 'pds-datepicker__dialog--range': this.range }, 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.range ? null : `${this.baseId}-calendar-heading-0`, "aria-label": this.range ? this.label || this.triggerLabel : null, part: "calendar", ref: (el) => (this.dialogEl = el), onKeyDown: this.onDialogKeyDown, onFocusin: this.onCalendarFocusIn, onFocusout: this.onCalendarFocusOut }, this.range && this.renderPresets(), index.h("div", { class: "pds-datepicker__panel" }, index.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.
+        index.h("span", { class: "visually-hidden", "aria-live": "polite" }, this.selectionText())))));
+    }
+    render() {
+        const locale = this.resolvedLocale;
+        return (index.h(index.Host, { key: 'a761f0ca6eeedcac3e4bd90760aa9781cd37dcdc', class: { 'pds-datepicker--range': this.range, 'pds-datepicker--time': this.timePicker }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, index.h("pds-input", { key: '2eb04f9fd4e2f7a2437145d250c629c2cc8a0bf6', 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 && (index.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
+        }, index.h("pds-icon", { key: '98c325fbba8ea78b2d409bc77099db3206738508', icon: index$1.remove, "aria-hidden": "true" }))), index.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 }, index.h("pds-icon", { key: 'cb8483febe1b485058b7bb4271b749981a7747a1', icon: index$1.calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "valueChanged": 0
+            }],
+        "format": [{
+                "contextChanged": 0
+            }],
+        "locale": [{
+                "contextChanged": 0
+            }],
+        "timePicker": [{
+                "contextChanged": 0
+            }],
+        "range": [{
+                "contextChanged": 0
+            }],
+        "min": [{
+                "contextChanged": 0
+            }],
+        "max": [{
+                "contextChanged": 0
+            }],
+        "placement": [{
+                "placementChanged": 0
+            }],
+        "required": [{
+                "requiredChanged": 0
+            }],
+        "disabled": [{
+                "interactivityChanged": 0
+            }],
+        "readonly": [{
+                "interactivityChanged": 0
+            }]
+    }; }
+};
+PdsDatepicker.style = pdsDatepickerCss();
+
+exports.pds_datepicker = PdsDatepicker;