@pine-ds/core 4.10.0 → 4.12.0

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

@@ -54,12 +54,35 @@ export 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. */
+export 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.
  */
 export function resolvePresets(presets, now) {
+    var _a;
     const entries = typeof presets === 'string'
         ? presets
             .split(',')
@@ -73,14 +96,26 @@ export 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;
 }

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

@@ -17,6 +17,7 @@ export default {
     max: null,
     min: null,
     minuteIncrement: 1,
+    monthDay: false,
     name: null,
     presets: null,
     range: false,
@@ -66,6 +67,7 @@ const BaseTemplate = (args) => html`<pds-datepicker
   max=${ifDefined(args.max ?? undefined)}
   min=${ifDefined(args.min ?? undefined)}
   minute-increment=${ifDefined(args.minuteIncrement ?? undefined)}
+  ?month-day=${args.monthDay}
   name=${ifDefined(args.name ?? undefined)}
   placeholder=${ifDefined(args.placeholder ?? undefined)}
   placement=${ifDefined(args.placement ?? undefined)}
@@ -161,6 +163,15 @@ MonthAndYearDropdowns.args = {
   showDropdowns: true,
 };
 
+export const MonthDay = BaseTemplate.bind({});
+MonthDay.args = {
+  componentId: 'pds-datepicker-month-day-example',
+  format: null,
+  label: 'Birthday',
+  monthDay: true,
+  value: '--11-07',
+};
+
 export const InitiallyEmptyWithClear = BaseTemplate.bind({});
 InitiallyEmptyWithClear.args = {
   clearable: true,

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

@@ -1,4 +1,4 @@
-import { parseIsoDate, toIsoDate } from "./date-utils";
+import { MONTH_DAY_YEAR, dateFormatter, inMonthDayYear, parseIsoDate, parseMonthDay, toIsoDate } from "./date-utils";
 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`. */
 export function parseDateTime(text) {
@@ -47,32 +47,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. */
 export 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()),
@@ -94,17 +112,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.
  */
-export function parseWith(text, format, locale = 'en-US') {
+export 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})',
@@ -151,7 +175,7 @@ export 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)
@@ -159,12 +183,12 @@ export 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;
@@ -186,6 +210,40 @@ export 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`.
+ */
+export 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.
+ */
+export 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

package/dist/collection/components/pds-drawer/pds-drawer-content/pds-drawer-content.js

@@ -1,10 +1,7 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 /**
- * Fills the drawer panel's height by default — unlike `pds-modal-content`,
- * which caps itself against the viewport for a centered, possibly-shorter
- * modal, a drawer panel is already edge-to-edge, so its content can simply
- * flex to fill whatever space the header and footer leave.
+ * Fills the space between the drawer header and footer.
  * @lightDom renders-markup
  */
 export class PdsDrawerContent {
@@ -13,7 +10,7 @@ export class PdsDrawerContent {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
     }
     render() {
-        return (h("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, h("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
+        return (h("div", { key: '0d59724de849bc2364d88c4460f70f8b1efa5d1b', class: "pds-drawer-content" }, h("slot", { key: '83782b9b4ad99f8075809c9e63d8351fa6109b11' })));
     }
     static get is() { return "pds-drawer-content"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-drawer/pds-drawer-footer/pds-drawer-footer.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 /**
+ * Holds the drawer's actions in a padded row aligned to the end, with a divider above.
  * @lightDom renders-markup
  */
 export class PdsDrawerFooter {
@@ -9,7 +10,7 @@ export class PdsDrawerFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
     }
     render() {
-        return (h("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, h("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
+        return (h("footer", { key: '1345b87580b1931d7c541fac71c0dff33b6cfbf9', class: "pds-drawer__footer" }, h("slot", { key: '638fa6bd14d28e814e0e40b02efb1b74f89f51dd' })));
     }
     static get is() { return "pds-drawer-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/pds-drawer/pds-drawer-header/pds-drawer-header.js

@@ -1,6 +1,7 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../../utils/reconnected-content";
 /**
+ * Holds the drawer's title and close control in a padded row, spaced apart, with a divider below.
  * @lightDom renders-markup
  */
 export class PdsDrawerHeader {
@@ -9,7 +10,7 @@ export class PdsDrawerHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
     }
     render() {
-        return (h("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, h("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
+        return (h("header", { key: '6354f36d59e608a85c3cb75d1e5cf04c48dd7045', class: "pds-drawer__header" }, h("slot", { key: '2c9d8a405c8850588377553f3d9a19790828cba7' })));
     }
     static get is() { return "pds-drawer-header"; }
     static get originalStyleUrls() {

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

@@ -12,7 +12,7 @@ const PORTALED_OVERLAY_SELECTOR = '.pds-popover, .pds-tooltip, .pds-combobox-dro
  * A side panel composed from `pds-modal`, non-modal by default.
  *
  * By default, unlike `pds-modal`, the page stays interactive while a drawer
- * is open: no dimming, no blur, no scroll lock, no click blocking.
+ * is open: no dimming, no blur, no click blocking.
  * `pds-drawer` renders a `pds-modal` internally with `disableTopLayer` on and
  * its backdrop suppressed, and adds the edge, width and dismiss behavior a
  * side panel needs on top. With `modal`, it opens that `pds-modal` in the top
@@ -28,8 +28,8 @@ export class PdsDrawer {
          */
         this.open = false;
         /**
-         * Which edge of the viewport the drawer is docked to. Logical, so this is
-         * free under RTL — `end` is the inline-end edge regardless of direction.
+         * Which edge of the viewport the drawer is docked to. Logical: `end` is the
+         * inline-end edge, so an `end` drawer docks on the left in right-to-left layouts.
          * @default 'end'
          */
         this.side = 'end';
@@ -55,9 +55,7 @@ export class PdsDrawer {
         /**
          * Whether the drawer can be dismissed with a pointerdown outside it (in a
          * `modal` drawer, a click on its backdrop).
-         * Replaces `pds-modal`'s `backdropDismiss`.
-         * This also gates Escape, matching how `backdropDismiss` gates Escape on
-         * `pds-modal` today: setting this to `false` means the close button is the
+         * Setting it to `false` also turns off Escape, so the close button is the
          * only way out.
          *
          * A trigger outside the drawer should only ever set `open` to `true` and
@@ -148,11 +146,11 @@ export class PdsDrawer {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '7cf13256457914e48e8fde422832a2a52ee0c13b', class: {
+        return (h(Host, { key: 'dda3f1dc3013f28a3fc8d1894609dd4b14d227ee', class: {
                 'pds-drawer': true,
                 [`pds-drawer--${this.side}`]: true,
                 [`pds-drawer--${this.size}`]: true,
-            } }, h("pds-modal", { key: 'd4ceb5b4c0b03930aa3d001ae1bbbfbf449bde33', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, h("slot", { key: '41bfdea76282b333ca6950048999cb9d94e69438' }))));
+            } }, h("pds-modal", { key: '3188b99ffb9b3ecb3eeb42fd3ba808d71c652b4f', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, h("slot", { key: 'ca4cd34297b4580d554edb45bfbec5b44d7d1fb0' }))));
     }
     static get is() { return "pds-drawer"; }
     static get originalStyleUrls() {
@@ -224,7 +222,7 @@ export class PdsDrawer {
                             "name": "default",
                             "text": "'end'"
                         }],
-                    "text": "Which edge of the viewport the drawer is docked to. Logical, so this is\nfree under RTL \u2014 `end` is the inline-end edge regardless of direction."
+                    "text": "Which edge of the viewport the drawer is docked to. Logical: `end` is the\ninline-end edge, so an `end` drawer docks on the left in right-to-left layouts."
                 },
                 "getter": false,
                 "setter": false,
@@ -316,7 +314,7 @@ export class PdsDrawer {
                             "name": "default",
                             "text": "true"
                         }],
-                    "text": "Whether the drawer can be dismissed with a pointerdown outside it (in a\n`modal` drawer, a click on its backdrop).\nReplaces `pds-modal`'s `backdropDismiss`.\nThis also gates Escape, matching how `backdropDismiss` gates Escape on\n`pds-modal` today: setting this to `false` means the close button is the\nonly way out.\n\nA trigger outside the drawer should only ever set `open` to `true` and\nleave closing to the drawer itself. A toggle-style trigger (`open =\n!open`) fights light dismiss: clicking it while open closes the drawer\non `pointerdown`, then the trigger's own click handler re-opens it."
+                    "text": "Whether the drawer can be dismissed with a pointerdown outside it (in a\n`modal` drawer, a click on its backdrop).\nSetting it to `false` also turns off Escape, so the close button is the\nonly way out.\n\nA trigger outside the drawer should only ever set `open` to `true` and\nleave closing to the drawer itself. A toggle-style trigger (`open =\n!open`) fights light dismiss: clicking it while open closes the drawer\non `pointerdown`, then the trigger's own click handler re-opens it."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.css

@@ -34,14 +34,19 @@
   background-color: var(--pine-color-background-muted);
   color: var(--pine-color-text-hover);
 }
-.pds-dropdown-menu-item__content {
-  /* Focus styles applied via class + browser focus */
-}
-.pds-dropdown-menu-item__content:focus, .pds-dropdown-menu-item__content:focus-visible, .pds-dropdown-menu-item__content.has-focus {
+.pds-dropdown-menu-item__content:focus-visible {
   outline: var(--pine-outline-focus);
   outline-offset: var(--pine-border-width);
 }
 
+.pds-dropdown-menu-item__start {
+  display: inline-flex;
+  flex-shrink: 0;
+}
+.pds-dropdown-menu-item__start--empty {
+  display: none;
+}
+
 :host(.is-informational) {
   cursor: default;
 }
@@ -60,17 +65,21 @@
   background-color: var(--pine-color-danger-disabled);
   color: var(--pine-color-danger-hover);
 }
-:host(.destructive) .pds-dropdown-menu-item__content:focus, :host(.destructive) .pds-dropdown-menu-item__content:focus-visible, :host(.destructive) .pds-dropdown-menu-item__content.has-focus {
+:host(.destructive) .pds-dropdown-menu-item__content:focus-visible {
   background-color: var(--pine-color-danger-disabled);
   outline: var(--pine-outline-focus-danger);
   outline-offset: var(--pine-border-width);
 }
+:host(.destructive) pds-link::part(link):focus-visible {
+  background-color: var(--pine-color-danger-disabled);
+  outline: var(--pine-outline-focus-danger);
+}
 
-/* Remove outline on contained links using the custom property */
-pds-link::part(link):focus,
 pds-link::part(link):focus-visible {
+  border-radius: var(--pine-dimension-xs);
   box-shadow: none;
-  outline: none;
+  outline: var(--pine-outline-focus);
+  outline-offset: var(--pine-border-width);
 }
 
 pds-link::part(link) {