@pine-ds/core 4.10.0 → 4.12.0

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

@@ -141,6 +141,48 @@ function dateFormatter(locale, options) {
 function formatDate(date, locale, options) {
     return dateFormatter(locale, options).format(date);
 }
+/**
+ * Month-day mode's year. A leap year, so February has its 29th; every date the mode holds is in it,
+ * and the value drops it (`--MM-DD`).
+ */
+const MONTH_DAY_YEAR = 2000;
+const MONTH_DAY = /^--(\d{2})-(\d{2})$/;
+/** The same month and day in month-day mode's year. */
+function inMonthDayYear(date) {
+    return new Date(Date.UTC(MONTH_DAY_YEAR, date.getUTCMonth(), date.getUTCDate()));
+}
+/**
+ * Parses a month and day, `--MM-DD` (ISO 8601 without a year), to a date in month-day mode's year.
+ * A full `YYYY-MM-DD` reads as its month and day. `null` when it isn't a real month and day.
+ */
+function parseMonthDay(value) {
+    const text = (value !== null && value !== void 0 ? value : '').trim();
+    const match = MONTH_DAY.exec(text);
+    if (match)
+        return parseIsoDate(`${MONTH_DAY_YEAR}-${match[1]}-${match[2]}`);
+    const date = parseIsoDate(text);
+    return date && inMonthDayYear(date);
+}
+/** A date's month and day as `--MM-DD`. */
+function toMonthDay(date) {
+    return `-${toIsoDate(date).slice(4)}`;
+}
+/**
+ * A month's days for month-day mode, which has no weekdays: rows of seven from the 1st, with the
+ * last row filled out with `null`.
+ */
+function monthDayRows(month) {
+    const cells = [];
+    for (let day = 1; day <= daysInMonth(MONTH_DAY_YEAR, month); day++) {
+        cells.push(new Date(Date.UTC(MONTH_DAY_YEAR, month, day)));
+    }
+    while (cells.length % 7 !== 0)
+        cells.push(null);
+    const rows = [];
+    for (let i = 0; i < cells.length; i += 7)
+        rows.push(cells.slice(i, i + 7));
+    return rows;
+}
 
 /**
  * Where the open calendar lives: a `div` in `document.body`, or in the nearest `<dialog>` so it
@@ -295,12 +337,35 @@ function builtInPresetRange(key, now) {
             return null;
     }
 }
+const isWholeNumber = (value) => typeof value === 'number' && Number.isInteger(value);
+/** A preset's offset range: whole days from today, a missing or `null` one being today. `null` if unusable. */
+function offsetPresetRange(preset, now) {
+    const { startOffset, endOffset } = preset;
+    // Checked at runtime, as offsets often come from JSON, where a missing one is often written `null`.
+    if (startOffset == null && endOffset == null)
+        return null;
+    if (startOffset != null && !isWholeNumber(startOffset))
+        return null;
+    if (endOffset != null && !isWholeNumber(endOffset))
+        return null;
+    const start = addDays(now, startOffset !== null && startOffset !== void 0 ? startOffset : 0);
+    const end = addDays(now, endOffset !== null && endOffset !== void 0 ? endOffset : 0);
+    return start <= end ? [start, end] : null;
+}
+// The list is re-resolved on every read, so each warning is said once.
+const warned = new Set();
+function warnOnce(message) {
+    if (warned.has(message))
+        return;
+    warned.add(message);
+    console.warn(`PDS Datepicker: ${message}`);
+}
 /**
  * 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.
+ * that may relabel a built-in or give their own range. Unusable entries are dropped with a warning.
  */
 function resolvePresets(presets, now) {
+    var _a;
     const entries = typeof presets === 'string'
         ? presets
             .split(',')
@@ -314,14 +379,26 @@ function resolvePresets(presets, now) {
     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')
+        if (!preset || typeof preset.key !== 'string') {
+            warnOnce('a preset with no string key was left out.');
             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] });
+        // Fixed days, then offsets, then the built-in range.
+        const fixed = start !== null && end !== null && start <= end ? [start, end] : null;
+        const range = (_a = fixed !== null && fixed !== void 0 ? fixed : offsetPresetRange(preset, now)) !== null && _a !== void 0 ? _a : builtInPresetRange(preset.key, now);
+        // A blank label would leave the button unnamed.
+        const label = typeof preset.label === 'string' && preset.label.trim() !== '' ? preset.label : DEFAULT_LABELS[preset.key];
+        if (range === null) {
+            warnOnce(`preset "${preset.key}" has no usable range and was left out. Give it whole-day startOffset/endOffset or YYYY-MM-DD start/end, start first.`);
+            continue;
+        }
+        if (label === undefined) {
+            warnOnce(`preset "${preset.key}" has no label and was left out.`);
+            continue;
+        }
+        resolved.push({ key: preset.key, label, start: range[0], end: range[1] });
     }
     return resolved;
 }
@@ -384,32 +461,50 @@ const wordsCache = new Map();
 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',
+        const month = (style, withDay) => {
+            const format = new Intl.DateTimeFormat(locale, Object.assign(Object.assign({ month: style }, (withDay ? { day: 'numeric' } : {})), { timeZone: 'UTC', calendar: 'gregory' }));
+            return Array.from({ length: 12 }, (_, m) => {
+                const date = new Date(Date.UTC(2023, m, 1));
+                if (!withDay)
+                    return format.format(date);
+                const parts = format.formatToParts(date);
+                const index = parts.findIndex((part) => part.type === 'month');
+                if (index === -1)
+                    return format.format(date);
+                // CJK locales split a counter word, as Japanese `月`, into its own literal right after the
+                // month; a literal with no space is that word, not the separator before the day.
+                const suffix = parts[index + 1];
+                return (suffix === null || suffix === void 0 ? void 0 : suffix.type) === 'literal' && !/\s/.test(suffix.value) ? parts[index].value + suffix.value : parts[index].value;
             });
-            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 };
+        words = {
+            months: month('long', false),
+            shortMonths: month('short', false),
+            monthsWithDay: month('long', true),
+            shortMonthsWithDay: month('short', true),
+            am: clock.am,
+            pm: clock.pm,
+        };
         wordsCache.set(locale, words);
     }
     return words;
 }
+/** Whether a format's tokens (see `tokensOnly`) have a day, so a month name should inflect for one. */
+const hasDayToken = (tokens) => /D/.test(tokens);
 /** 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 withDay = hasDayToken(tokensOnly(format));
     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],
+        MMMM: withDay ? words.monthsWithDay[month] : words.months[month],
+        MMM: withDay ? words.shortMonthsWithDay[month] : words.shortMonths[month],
         MM: pad(month + 1),
         M: String(month + 1),
         DD: pad(value.date.getUTCDate()),
@@ -431,17 +526,23 @@ 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.
+ * in English. A format without `YYYY` reads into `year`, and without `year` it reads nothing.
+ * Returns `null` for anything that isn't a real date and time in that format.
  */
-function parseWith(text, format, locale = 'en-US') {
+function parseWith(text, format, locale = 'en-US', year) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const words = localeWords(locale);
     const english = localeWords('en-US');
+    const withDay = hasDayToken(tokensOnly(format));
+    const months = withDay ? words.monthsWithDay : words.months;
+    const shortMonths = withDay ? words.shortMonthsWithDay : words.shortMonths;
+    const englishMonths = withDay ? english.monthsWithDay : english.months;
+    const englishShortMonths = withDay ? english.shortMonthsWithDay : english.shortMonths;
     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]),
+        MMMM: alternatives([...months, ...englishMonths]),
+        MMM: alternatives([...shortMonths, ...englishShortMonths]),
         MM: '(\\d{1,2})',
         M: '(\\d{1,2})',
         DD: '(\\d{1,2})',
@@ -488,7 +589,7 @@ function parseWith(text, format, locale = 'en-US') {
     const monthIndex = (name, long) => {
         if (name === undefined)
             return undefined;
-        const lists = long ? [words.months, english.months] : [words.shortMonths, english.shortMonths];
+        const lists = long ? [months, englishMonths] : [shortMonths, englishShortMonths];
         for (const list of lists) {
             const index = list.findIndex((candidate) => candidate.toLowerCase() === name.toLowerCase());
             if (index >= 0)
@@ -496,12 +597,12 @@ function parseWith(text, format, locale = 'en-US') {
         }
         return undefined;
     };
-    const year = Number(read.YYYY);
+    const readYear = read.YYYY ? Number(read.YYYY) : year;
     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)
+    if (readYear === undefined || !month || !day)
         return null;
-    const date = parseIsoDate(`${pad(year, 4)}-${pad(month)}-${pad(day)}`);
+    const date = parseIsoDate(`${pad(readYear, 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;
@@ -523,6 +624,40 @@ function parseFieldText(text, format = DEFAULT_FORMAT, locale = 'en-US') {
     var _a;
     return (_a = parseWith(text, format, locale)) !== null && _a !== void 0 ? _a : parseDateTime(text);
 }
+/**
+ * The locale's way of writing a month and day, as a format of tokens: `MMMM D` in English, `D MMMM`
+ * in French, `M月D日` in Japanese, or with `numeric`, `M/D` and `D/M`.
+ */
+function monthDayFormat(locale = 'en-US', month = 'long') {
+    const parts = dateFormatter(locale, { month, day: 'numeric' }).formatToParts(new Date(Date.UTC(MONTH_DAY_YEAR, 11, 31)));
+    return parts
+        .map((part) => {
+        // Some locales write even the long month in digits, as Japanese `12月31日`.
+        if (part.type === 'month')
+            return /^\d+$/.test(part.value) ? 'M' : 'MMMM';
+        if (part.type === 'day')
+            return 'D';
+        // Bracketed, spaces included, only when it has letters a token could be read from, as
+        // Spanish `D[ de ]MMMM`.
+        return /[A-Za-z]/.test(part.value) ? `[${part.value}]` : part.value;
+    })
+        .join('');
+}
+/**
+ * Reads a typed month and day, into month-day mode's year: in the format, then as the locale writes
+ * it with a month name or in numbers, with the English order too, then as `--MM-DD` or a full ISO
+ * date, whose year is dropped.
+ */
+function parseMonthDayText(text, format, locale = 'en-US') {
+    const formats = [format, monthDayFormat(locale), monthDayFormat(locale, 'numeric'), 'MMMM D', 'D MMMM', 'MMM D', 'D MMM'];
+    for (const candidate of formats) {
+        const read = parseWith(text, candidate, locale, MONTH_DAY_YEAR);
+        if (read)
+            return { date: inMonthDayYear(read.date), time: null };
+    }
+    const date = parseMonthDay(text);
+    return date ? { date, time: null } : null;
+}
 /**
  * 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
@@ -577,6 +712,8 @@ function clockFor(locale) {
 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);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{border-radius:0}.pds-datepicker__day--in-range,.pds-datepicker__day--in-range:hover{background:var(--pine-color-background-muted);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' };
+/** A day in month-day mode, which has no year and so no weekday. */
+const MONTH_AND_DAY = { month: 'long', day: 'numeric' };
 const DEFAULT_START_TIME = '00:00';
 const DEFAULT_END_TIME = '23:59';
 /** Ids for datepickers without a `component-id`, so their calendars' ids stay unique. */
@@ -655,8 +792,10 @@ const PdsDatepicker = class {
          * 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.
+         * and the change event stay ISO (`YYYY-MM-DD`; `--MM-DD` with `month-day`), whatever the format.
+         * Typed ISO dates are always accepted too. With `month-day`, a format without `YYYY` is taken as a
+         * month-and-day format and used as given, rather than reordered for the locale; leave it unset to
+         * follow the locale instead.
          */
         this.format = 'YYYY-MM-DD';
         /**
@@ -689,6 +828,15 @@ const PdsDatepicker = class {
          * Accessible label for the month dropdown, when `show-dropdowns` is set.
          */
         this.monthLabel = 'Month';
+        /**
+         * Picks a month and day with no year, for a date that comes round every year, such as a birthday.
+         * The value is `--MM-DD` (ISO 8601 without a year), the field shows the date as the locale writes
+         * a month and day, and the calendar shows each month without a year or weekdays, with February
+         * always having its 29th. Turns off `range`, `time-picker`, `show-dropdowns`, `min` and `max`, and
+         * has no effect with `auto-apply`, `presets`, `first-day-of-week`, `min-date-message` or
+         * `max-date-message`, which all depend on them.
+         */
+        this.monthDay = false;
         /**
          * Accessible label for the button that shows the next month.
          */
@@ -737,7 +885,9 @@ const PdsDatepicker = class {
         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.
+         * the time picker, each date as `YYYY-MM-DDTHH:mm`; with `month-day`, the month and day with no
+         * year, as `--MM-DD` (a full date is read too, as that month and day, and rewritten to it). An
+         * empty string when nothing is selected.
          */
         this.value = '';
         /**
@@ -928,17 +1078,17 @@ const PdsDatepicker = class {
             // 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) {
+            if (this.hasTime) {
                 // A time picked in the calendar survives typing that doesn't change the time: text with no
                 // time, as a date part-way typed, or with the time as committed.
                 const format = this.resolvedFormat;
                 const locale = this.resolvedLocale;
-                const typed = this.range ? parseRangeText(this.text, format, locale) : [parseFieldText(this.text, format, locale)];
+                const typed = this.isRange ? parseRangeText(this.text, format, locale) : [parseFieldText(this.text, format, locale)];
                 const committed = this.parsedValue();
                 const keeps = (i) => { var _a, _b, _c; return !((_a = typed === null || typed === void 0 ? void 0 : typed[i]) === null || _a === void 0 ? void 0 : _a.time) || ((_b = typed[i]) === null || _b === void 0 ? void 0 : _b.time) === ((_c = committed === null || committed === void 0 ? void 0 : committed[i]) === null || _c === void 0 ? void 0 : _c.time); };
                 if (keeps(0))
                     this.startTime = startTime;
-                if (this.range && keeps(1))
+                if (this.isRange && keeps(1))
                     this.endTime = endTime;
             }
             this.showDate(parts[parts.length - 1].date);
@@ -1047,7 +1197,8 @@ const PdsDatepicker = class {
             if (!active)
                 return;
             const rtl = getComputedStyle(this.el).direction === 'rtl';
-            const column = weekdayColumn(active, this.weekStart);
+            // Month-day mode's rows start on the 1st, not on a weekday.
+            const column = this.monthDay ? (active.getUTCDate() - 1) % 7 : weekdayColumn(active, this.weekStart);
             let next = null;
             switch (event.key) {
                 case 'ArrowLeft':
@@ -1065,14 +1216,21 @@ const PdsDatepicker = class {
                 case 'Home':
                     next = addDays(active, -column);
                     break;
-                case 'End':
-                    next = addDays(active, 6 - column);
+                case 'End': {
+                    // Month-day mode's rows don't carry into the next month, so End stops at the month's last day.
+                    const lastColumn = this.monthDay
+                        ? Math.min(6, daysInMonth(active.getUTCFullYear(), active.getUTCMonth()) - active.getUTCDate() + column)
+                        : 6;
+                    next = addDays(active, lastColumn - column);
                     break;
+                }
                 case 'PageUp':
-                    next = addMonths(active, event.shiftKey ? -12 : -1);
+                    // Month-day mode has no year to jump by, so Shift+PageUp stays put rather than passing
+                    // through a real, possibly non-leap year and clamping Feb 29 to the 28th.
+                    next = event.shiftKey && this.monthDay ? active : addMonths(active, event.shiftKey ? -12 : -1);
                     break;
                 case 'PageDown':
-                    next = addMonths(active, event.shiftKey ? 12 : 1);
+                    next = event.shiftKey && this.monthDay ? active : addMonths(active, event.shiftKey ? 12 : 1);
                     break;
                 case 'Enter':
                 case ' ':
@@ -1085,9 +1243,9 @@ const PdsDatepicker = class {
                     return;
             }
             event.preventDefault();
-            const target = clampDate(next, this.minDate, this.maxDate);
+            const target = clampDate(this.inView(next), this.minDate, this.maxDate);
             this.showDate(target);
-            if (this.range)
+            if (this.isRange)
                 this.previewDate = toIsoDate(target);
             this.focusActiveDay = true;
         };
@@ -1098,7 +1256,7 @@ const PdsDatepicker = class {
                 this.pickDate(date);
         };
         this.onGridPointerOver = (event) => {
-            if (!this.range || !this.draftStart || this.draftEnd)
+            if (!this.isRange || !this.draftStart || this.draftEnd)
                 return;
             const date = this.dayFromEvent(event);
             const iso = date && toIsoDate(date);
@@ -1147,19 +1305,28 @@ const PdsDatepicker = class {
         var _a;
         this.text = this.fieldText();
         this.textError = '';
+        const parts = this.parsedValue();
+        // A full date reads as its month and day; keep what's submitted in step with what's shown,
+        // rather than passing through whichever spelling was set until the next pick rewrites it.
+        if (this.monthDay && parts) {
+            const normalized = this.dayValue(parts[0].date);
+            if (this.value !== normalized)
+                this.value = normalized;
+        }
         this.updateFormValue();
         if (!this.isOpen)
             return;
-        const parts = this.parsedValue();
         this.loadDraft(parts);
-        const day = (_a = (parts && parts[parts.length - 1].date)) !== null && _a !== void 0 ? _a : today();
+        const day = (_a = (parts && parts[parts.length - 1].date)) !== null && _a !== void 0 ? _a : this.now;
         this.showDate(clampDate(day, this.minDate, this.maxDate), true);
     }
     requiredChanged() {
         this.updateFormValue();
     }
     componentWillLoad() {
-        this.text = this.fieldText();
+        // Through the same path a later value/context change takes, so an initial full date in
+        // month-day mode submits normalized too, not only after the first pick rewrites it.
+        this.refreshFromValue();
     }
     connectedCallback() {
         if (this.el.attachInternals && !this.internals) {
@@ -1209,10 +1376,30 @@ const PdsDatepicker = class {
         return localeFirstDayOfWeek(this.resolvedLocale);
     }
     get minDate() {
-        return parseIsoDate(this.min);
+        return this.monthDay ? null : parseIsoDate(this.min);
     }
     get maxDate() {
-        return parseIsoDate(this.max);
+        return this.monthDay ? null : parseIsoDate(this.max);
+    }
+    /** Range mode, which month-day mode turns off. */
+    get isRange() {
+        return this.range && !this.monthDay;
+    }
+    /** The time picker, which month-day mode turns off. */
+    get hasTime() {
+        return this.timePicker && !this.monthDay;
+    }
+    /** Today, or in month-day mode today's month and day. */
+    get now() {
+        return this.monthDay ? inMonthDayYear(today()) : today();
+    }
+    /** In month-day mode, a date moved to the mode's year, as when the calendar wraps past December. */
+    inView(date) {
+        return this.monthDay ? inMonthDayYear(date) : date;
+    }
+    /** One day as the value holds it: `YYYY-MM-DD`, or `--MM-DD` in month-day mode. */
+    dayValue(date) {
+        return this.monthDay ? toMonthDay(date) : toIsoDate(date);
     }
     get isInteractive() {
         return !this.disabled && !this.readonly;
@@ -1220,22 +1407,22 @@ const PdsDatepicker = class {
     /** 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;
+        return this.isRange && !narrow ? 2 : 1;
     }
     /** Whether picks apply at once, without the footer: `auto-apply` in range mode, without times. */
     get appliesOnPick() {
-        return this.range && this.autoApply && !this.timePicker;
+        return this.isRange && this.autoApply && !this.hasTime;
     }
     /** Whether picks wait for Apply: for a range, unless it auto-applies, and for a date with a time. */
     get hasFooter() {
-        return (this.range || this.timePicker) && !this.appliesOnPick;
+        return (this.isRange || this.hasTime) && !this.appliesOnPick;
     }
     get resolvedPresets() {
-        return this.range ? resolvePresets(this.presets, today()) : [];
+        return this.isRange ? resolvePresets(this.presets, today()) : [];
     }
     /** The committed value, parsed: one date, or a range's start and end. */
     parsedValue(value = this.value) {
-        if (this.range) {
+        if (this.isRange) {
             const [start, end, extra] = (value !== null && value !== void 0 ? value : '').split('/');
             const startValue = parseDateTime(start);
             const endValue = parseDateTime(end);
@@ -1243,12 +1430,22 @@ const PdsDatepicker = class {
                 ? [startValue, endValue]
                 : null;
         }
+        if (this.monthDay) {
+            const date = parseMonthDay(value);
+            return date ? [{ date, time: null }] : null;
+        }
         const single = parseDateTime(value);
         return single ? [single] : null;
     }
     /** The format the field shows and reads, with a time when the time picker is on. */
     get resolvedFormat() {
-        return fieldFormat(this.format, this.timePicker, this.timePicker && clockFor(this.resolvedLocale).hour12);
+        var _a, _b;
+        if (this.monthDay) {
+            // A format with a year is the default, or one for full dates: use the locale's month and day.
+            const format = (_b = (_a = this.format) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '';
+            return format !== '' && !/YYYY/.test(format.replace(/\[[^\]]*\]/g, '')) ? format : monthDayFormat(this.resolvedLocale);
+        }
+        return fieldFormat(this.format, this.hasTime, this.hasTime && clockFor(this.resolvedLocale).hour12);
     }
     /** What the field shows for the committed value. */
     fieldText() {
@@ -1264,20 +1461,24 @@ const PdsDatepicker = class {
     /** 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 };
+        return { date: value.date, time: this.hasTime ? ((_a = value.time) !== null && _a !== void 0 ? _a : fallback) : null };
     }
     get fieldPlaceholder() {
         if (this.placeholder)
             return this.placeholder;
+        // Month-day tokens, as `MMMM D`, don't read as a hint; an example date does.
+        if (this.monthDay) {
+            return formatWith({ date: parseMonthDay('--12-31'), time: null }, this.resolvedFormat, this.resolvedLocale);
+        }
         const one = this.resolvedFormat;
-        return this.range ? `${one}${RANGE_SEPARATOR}${one}` : one;
+        return this.isRange ? `${one}${RANGE_SEPARATOR}${one}` : one;
     }
     /** Loads the committed value into the draft the calendar edits. */
     loadDraft(parts) {
         var _a, _b;
         const [start, end] = parts !== null && parts !== void 0 ? parts : [];
         this.draftStart = start ? toIsoDate(start.date) : '';
-        this.draftEnd = this.range && end ? toIsoDate(end.date) : '';
+        this.draftEnd = this.isRange && end ? toIsoDate(end.date) : '';
         this.startTime = (_a = start === null || start === void 0 ? void 0 : start.time) !== null && _a !== void 0 ? _a : DEFAULT_START_TIME;
         this.endTime = (_b = end === null || end === void 0 ? void 0 : end.time) !== null && _b !== void 0 ? _b : DEFAULT_END_TIME;
         this.previewDate = '';
@@ -1293,7 +1494,7 @@ const PdsDatepicker = class {
         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();
+        const start = (_b = (parts && parts[parts.length - 1].date)) !== null && _b !== void 0 ? _b : this.now;
         this.showDate(clampDate(start, this.minDate, this.maxDate), true);
         this.focusActiveDay = focusDay;
         this.isOpen = true;
@@ -1315,7 +1516,8 @@ const PdsDatepicker = class {
      * 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) {
+    showDate(day, reset = false) {
+        const date = this.inView(day);
         const first = firstOfMonth(date);
         const view = parseIsoDate(this.viewMonth);
         const lastView = view && addMonths(view, this.monthCount - 1);
@@ -1333,15 +1535,15 @@ const PdsDatepicker = class {
         // 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) {
+        if (this.isRange) {
             this.pickRangeDay(date);
         }
-        else if (this.timePicker) {
+        else if (this.hasTime) {
             this.draftStart = toIsoDate(date);
             this.activeDate = this.draftStart;
         }
         else {
-            this.commitValue(toIsoDate(date));
+            this.commitValue(this.dayValue(date));
             this.closeCalendar(true);
         }
     }
@@ -1385,7 +1587,11 @@ const PdsDatepicker = class {
     }
     /** Commits one date, or a range with its start, end and matching preset. */
     commitParts(parts) {
-        if (!this.range) {
+        if (this.monthDay) {
+            this.commitValue(toMonthDay(parts[0].date));
+            return;
+        }
+        if (!this.isRange) {
             this.commitValue(toValueString(parts[0]));
             return;
         }
@@ -1400,7 +1606,7 @@ const PdsDatepicker = class {
         if (!startDate)
             return null;
         const start = this.withTimePicker({ date: startDate, time: this.startTime });
-        if (!this.range)
+        if (!this.isRange)
             return [start];
         const end = this.withTimePicker({ date: (_a = parseIsoDate(this.draftEnd)) !== null && _a !== void 0 ? _a : startDate, time: this.endTime });
         // An end time before the start time on the same day ends at the start.
@@ -1526,7 +1732,11 @@ const PdsDatepicker = class {
     readText(text) {
         const format = this.resolvedFormat;
         const locale = this.resolvedLocale;
-        const parts = this.range ? parseRangeText(text, format, locale) : [parseFieldText(text, format, locale)];
+        const parts = this.monthDay
+            ? [parseMonthDayText(text, format, locale)]
+            : this.isRange
+                ? parseRangeText(text, format, locale)
+                : [parseFieldText(text, format, locale)];
         if (!parts || parts.some((part) => !part))
             return null;
         return parts.map((part, i) => this.withTimePicker(part, i === 1 ? DEFAULT_END_TIME : DEFAULT_START_TIME));
@@ -1570,17 +1780,17 @@ const PdsDatepicker = class {
     /** 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();
+        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
         if (direction < 0)
             return !this.minDate || addDays(view, -1) >= this.minDate;
         return !this.maxDate || addMonths(view, this.monthCount) <= this.maxDate;
     }
     showMonth(event, direction) {
         var _a, _b;
-        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : 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));
+        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
+        const active = (_b = parseIsoDate(this.activeDate)) !== null && _b !== void 0 ? _b : this.now;
+        this.viewMonth = toIsoDate(this.inView(addMonths(view, direction)));
+        this.activeDate = toIsoDate(clampDate(this.inView(addMonths(active, direction)), this.minDate, this.maxDate));
         if (this.canShowMonth(direction)) {
             // Safari doesn't focus a clicked button; without this, focus falls to the page and Escape and
             // the Tab trap stop working.
@@ -1702,7 +1912,7 @@ const PdsDatepicker = class {
         const parts = this.parsedValue();
         if (!parts)
             return this.triggerLabel;
-        const dates = parts.map((part) => formatDate(part.date, locale, FULL_DATE));
+        const dates = parts.map((part) => formatDate(part.date, locale, this.monthDay ? MONTH_AND_DAY : FULL_DATE));
         return `${this.triggerLabel}, ${dates.join(RANGE_SEPARATOR)}`;
     }
     /** The range to highlight: the chosen one, or the start to the previewed day while picking the end. */
@@ -1716,15 +1926,15 @@ const PdsDatepicker = class {
     }
     /** The day shown as selected: the draft, which opens as the committed day and follows typing. */
     selectedDay() {
-        if (this.range)
+        if (this.isRange)
             return null;
         return parseIsoDate(this.draftStart);
     }
     renderMonthHeading(view, index$2, locale, headingId) {
-        const heading = formatDate(view, locale, { month: 'long', year: 'numeric' });
+        const heading = formatDate(view, locale, this.monthDay ? { month: 'long' } : { month: 'long', year: 'numeric' });
         // Only the first month announces itself as it changes; two months move together.
         const live = index$2 === 0 ? 'polite' : null;
-        if (!this.showDropdowns) {
+        if (!this.showDropdowns || this.monthDay) {
             return (index.h("div", { class: "pds-datepicker__heading", id: headingId, "aria-live": live }, heading));
         }
         const year = view.getUTCFullYear();
@@ -1750,14 +1960,14 @@ const PdsDatepicker = class {
         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 [rangeStart, rangeEnd] = this.isRange ? this.highlightedRange() : [null, null];
+        const now = this.now;
+        const fullDate = dateFormatter(locale, this.monthDay ? MONTH_AND_DAY : FULL_DATE);
         const dayNumber = dateFormatter(locale, { day: 'numeric' });
         const headingId = `${this.baseId}-calendar-heading-${index$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) => {
+        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.isRange ? 'true' : null, onKeyDown: this.onGridKeyDown, onClick: this.onGridClick, onPointerOver: this.onGridPointerOver }, !this.monthDay && (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, (this.monthDay ? monthDayRows(month) : 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);
@@ -1779,14 +1989,14 @@ const PdsDatepicker = class {
                     '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))));
+        })))))), this.hasTime && 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)
+        if (!this.isRange)
             return ['start'];
         if (this.monthCount === 1)
             return ['start', 'end'];
@@ -1811,7 +2021,7 @@ const PdsDatepicker = class {
             if (this.timesBeforeTyping)
                 this.timesBeforeTyping[which === 'start' ? 0 : 1] = time;
         };
-        const groupLabel = !this.range ? this.timeLabel : which === 'start' ? this.startTimeLabel : this.endTimeLabel;
+        const groupLabel = !this.isRange ? this.timeLabel : which === 'start' ? this.startTimeLabel : this.endTimeLabel;
         const isPm = hours >= 12;
         const hourOptions = clock.hour12 ? Array.from({ length: 12 }, (_, i) => i + 1) : Array.from({ length: 24 }, (_, i) => i);
         const shownHour = clock.hour12 ? hours % 12 || 12 : hours;
@@ -1852,7 +2062,7 @@ const PdsDatepicker = class {
             return '';
         const format = this.resolvedFormat;
         const locale = this.resolvedLocale;
-        if (this.range && !this.draftEnd)
+        if (this.isRange && !this.draftEnd)
             return `${toFieldText(parts[0], format, locale)}${RANGE_SEPARATOR}`;
         return parts.map((part) => toFieldText(part, format, locale)).join(RANGE_SEPARATOR);
     }
@@ -1863,25 +2073,25 @@ const PdsDatepicker = class {
     }
     renderCalendar(locale) {
         var _a;
-        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : today();
+        const view = (_a = parseIsoDate(this.viewMonth)) !== null && _a !== void 0 ? _a : this.now;
         const months = Array.from({ length: this.monthCount }, (_, i) => addMonths(view, i));
-        return (index.h("div", { class: { 'pds-datepicker__dialog': true, 'pds-datepicker__dialog--range': this.range }, id: `${this.baseId}-calendar`, role: "dialog",
+        return (index.h("div", { class: { 'pds-datepicker__dialog': true, 'pds-datepicker__dialog--range': this.isRange }, id: `${this.baseId}-calendar`, role: "dialog",
             // A click on a part that can't take focus, as the month heading, focuses the dialog
             // rather than dropping focus to the page, which would report blur mid-selection.
-            tabindex: "-1", "aria-labelledby": this.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 && (
+            tabindex: "-1", "aria-labelledby": this.isRange ? null : `${this.baseId}-calendar-heading-0`, "aria-label": this.isRange ? this.label || this.triggerLabel : null, part: "calendar", ref: (el) => (this.dialogEl = el), onKeyDown: this.onDialogKeyDown, onFocusin: this.onCalendarFocusIn, onFocusout: this.onCalendarFocusOut }, this.isRange && this.renderPresets(), 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", {
+        return (index.h(index.Host, { key: 'd40bce6136eca084b23d38d995010592bfd702bd', class: { 'pds-datepicker--range': this.isRange, 'pds-datepicker--time': this.hasTime }, "full-width": this.fullWidth ? 'true' : null, onFocusin: this.onHostFocusIn, onFocusout: this.onHostFocusOut }, index.h("pds-input", { key: 'a047df90ca3e013a2eeb1f88e8fb033b24754f0d', ref: (el) => (this.inputEl = el), componentId: this.baseId, label: this.label, hideLabel: this.hideLabel, helperMessage: this.helperMessage, errorMessage: this.errorMessage, invalid: this.invalid || !!this.textError || !!this.valueError(), disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.fieldPlaceholder, fullWidth: this.fullWidth, autocomplete: "off", value: this.text, onClick: this.onFieldClick, onPdsInput: this.onTextInput, onPdsChange: this.onTextChange, onPdsKeyDown: this.onTextKeyDown, onPdsFocus: this.stopInnerEvent, onPdsBlur: this.stopInnerEvent }, this.clearable && !!this.value && this.isInteractive && (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)));
+        }, index.h("pds-icon", { key: '934fc6303da1dca04cb073c5875a0f9fc286fdd1', 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: '75ab4fc79ce9f95e7ee6555763166d800a2f1135', icon: index$1.calendarSimple, "aria-hidden": "true" }))), this.isOpen && this.renderCalendar(locale)));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -1901,6 +2111,9 @@ const PdsDatepicker = class {
         "range": [{
                 "contextChanged": 0
             }],
+        "monthDay": [{
+                "contextChanged": 0
+            }],
         "min": [{
                 "contextChanged": 0
             }],