@pine-ds/core 4.2.0 → 4.4.0

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

@@ -0,0 +1,96 @@
+import { addDays, addMonths, isOutOfRange, parseIsoDate } from "./date-utils";
+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.
+ */
+export 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.
+ */
+export 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. */
+export 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`. */
+export function presetInRange(preset, min, max) {
+    return !isOutOfRange(preset.start, min, max) && !isOutOfRange(preset.end, min, max);
+}

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

@@ -0,0 +1,195 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+
+export default {
+  args: {
+    autoApply: false,
+    clearable: false,
+    disabled: false,
+    errorMessage: null,
+    firstDayOfWeek: null,
+    format: 'YYYY-MM-DD',
+    fullWidth: false,
+    helperMessage: null,
+    hideLabel: false,
+    invalid: false,
+    locale: null,
+    max: null,
+    min: null,
+    minuteIncrement: 1,
+    name: null,
+    presets: null,
+    range: false,
+    placeholder: null,
+    placement: 'bottom-start',
+    readonly: false,
+    required: false,
+    showDropdowns: false,
+    timePicker: false,
+    value: null,
+  },
+  argTypes: {
+    placement: {
+      control: 'select',
+      options: ['bottom-start', 'bottom', 'bottom-end', 'top-start', 'top', 'top-end'],
+    },
+    presets: {
+      control: 'text',
+    },
+    pdsDatepickerChange: {
+      action: 'pdsDatepickerChange',
+    },
+  },
+  component: 'pds-datepicker',
+  parameters: {
+    actions: {
+      handles: ['pdsDatepickerChange'],
+    },
+  },
+  title: 'components/Datepicker',
+};
+
+const BaseTemplate = (args) => html`<pds-datepicker
+  ?auto-apply=${args.autoApply}
+  ?clearable=${args.clearable}
+  component-id="${args.componentId}"
+  ?disabled=${args.disabled}
+  error-message=${ifDefined(args.errorMessage ?? undefined)}
+  first-day-of-week=${ifDefined(args.firstDayOfWeek ?? undefined)}
+  format=${ifDefined(args.format ?? undefined)}
+  ?full-width=${args.fullWidth}
+  helper-message=${ifDefined(args.helperMessage ?? undefined)}
+  ?hide-label=${args.hideLabel}
+  ?invalid=${args.invalid}
+  label="${args.label}"
+  locale=${ifDefined(args.locale ?? undefined)}
+  max=${ifDefined(args.max ?? undefined)}
+  min=${ifDefined(args.min ?? undefined)}
+  minute-increment=${ifDefined(args.minuteIncrement ?? undefined)}
+  name=${ifDefined(args.name ?? undefined)}
+  placeholder=${ifDefined(args.placeholder ?? undefined)}
+  placement=${ifDefined(args.placement ?? undefined)}
+  presets=${ifDefined(args.presets ?? undefined)}
+  ?range=${args.range}
+  ?readonly=${args.readonly}
+  ?required=${args.required}
+  ?show-dropdowns=${args.showDropdowns}
+  ?time-picker=${args.timePicker}
+  value=${ifDefined(args.value ?? undefined)}>
+</pds-datepicker>`;
+
+export const Default = BaseTemplate.bind({});
+Default.args = {
+  componentId: 'pds-datepicker-default-example',
+  label: 'Due date',
+};
+
+export const WithValue = BaseTemplate.bind({});
+WithValue.args = {
+  componentId: 'pds-datepicker-value-example',
+  label: 'Due date',
+  value: '2026-10-13',
+};
+
+export const MinAndMax = BaseTemplate.bind({});
+MinAndMax.args = {
+  componentId: 'pds-datepicker-range-example',
+  helperMessage: 'Pick a day between October 5 and November 20.',
+  label: 'Delivery date',
+  max: '2026-11-20',
+  min: '2026-10-05',
+  value: '2026-10-13',
+};
+
+export const Locale = BaseTemplate.bind({});
+Locale.args = {
+  componentId: 'pds-datepicker-locale-example',
+  label: "Date d'échéance",
+  locale: 'fr',
+  value: '2026-10-13',
+};
+
+export const Invalid = BaseTemplate.bind({});
+Invalid.args = {
+  componentId: 'pds-datepicker-invalid-example',
+  errorMessage: 'Choose a date after today.',
+  invalid: true,
+  label: 'Due date',
+  value: '2026-10-13',
+};
+
+export const Disabled = BaseTemplate.bind({});
+Disabled.args = {
+  componentId: 'pds-datepicker-disabled-example',
+  disabled: true,
+  label: 'Due date',
+  value: '2026-10-13',
+};
+
+export const Range = BaseTemplate.bind({});
+Range.args = {
+  componentId: 'pds-datepicker-range-mode-example',
+  label: 'Period',
+  range: true,
+};
+
+export const RangeWithPresets = BaseTemplate.bind({});
+RangeWithPresets.args = {
+  componentId: 'pds-datepicker-range-presets-example',
+  hideLabel: true,
+  label: 'Period',
+  presets: 'today,last-7-days,last-30-days,last-month,this-month,last-quarter,this-quarter,this-year,last-12-months,year-to-date',
+  range: true,
+};
+
+export const RangeWithTimes = BaseTemplate.bind({});
+RangeWithTimes.args = {
+  componentId: 'pds-datepicker-range-times-example',
+  label: 'Event',
+  minuteIncrement: 15,
+  range: true,
+  timePicker: true,
+  value: '2026-10-13T14:00/2026-10-14T22:00',
+};
+
+export const MonthAndYearDropdowns = BaseTemplate.bind({});
+MonthAndYearDropdowns.args = {
+  componentId: 'pds-datepicker-dropdowns-example',
+  label: 'Birthday',
+  max: '2026-10-13',
+  min: '1901-01-01',
+  showDropdowns: true,
+};
+
+export const InitiallyEmptyWithClear = BaseTemplate.bind({});
+InitiallyEmptyWithClear.args = {
+  clearable: true,
+  componentId: 'pds-datepicker-clearable-example',
+  label: 'Created',
+  range: true,
+};
+
+export const Format = BaseTemplate.bind({});
+Format.args = {
+  componentId: 'pds-datepicker-format-example',
+  format: 'MM/DD/YYYY',
+  label: 'Due date',
+  value: '2026-10-13',
+};
+
+export const RangeAutoApply = BaseTemplate.bind({});
+RangeAutoApply.args = {
+  autoApply: true,
+  componentId: 'pds-datepicker-auto-apply-example',
+  label: 'Period',
+  presets: 'today,last-7-days,last-30-days',
+  range: true,
+};
+
+export const Clearable = BaseTemplate.bind({});
+Clearable.args = {
+  clearable: true,
+  componentId: 'pds-datepicker-clearable-single-example',
+  label: 'Due date',
+  value: '2026-10-13',
+};

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

@@ -0,0 +1,238 @@
+import { parseIsoDate, 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) {
+    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;
+}
+export 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.
+ */
+export 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. */
+export 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.
+ */
+export 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. */
+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);
+}
+/**
+ * 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.
+ */
+export 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;
+}
+export 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. */
+export 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. */
+export function toFieldText(value, format, locale = 'en-US') {
+    return formatWith(value, format !== null && format !== void 0 ? format : fieldFormat(DEFAULT_FORMAT, !!value.time), locale);
+}
+export const RANGE_SEPARATOR = ' – ';
+/** Hour and minute numbers from `HH:mm`. */
+export function splitTime(time) {
+    const [hours, minutes] = time.split(':').map(Number);
+    return [hours || 0, minutes || 0];
+}
+export 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. */
+export 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' };
+}

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

@@ -29,7 +29,7 @@ export class PdsDivider {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'c6f887ca1f68c8e572bd518c43d88f052f6d9dd1', id: this.componentId }, this.hasLabel ? (h("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, h("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (h("hr", { class: this.classNames() }))));
+        return (h(Host, { key: '072cc8552bd33c4a00d216f15a5a848cfc97fd92', id: this.componentId }, this.hasLabel ? (h("div", { class: this.classNames(), role: "separator", "aria-label": this.label }, h("span", { class: "pds-divider__label", part: "label", "aria-hidden": "true" }, this.label))) : (h("hr", { class: this.classNames() }))));
     }
     static get is() { return "pds-divider"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,7 +12,7 @@ export class PdsDrawerContent {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
     }
     render() {
-        return (h("div", { key: '432db626c93ab42365ec1af83562eec7ae1c4674', class: "pds-drawer-content" }, h("slot", { key: '901ab074f31726023add709a4953bddb43842de2' })));
+        return (h("div", { key: 'b4b41258eccaae8e0a9df90a75fb30d65a7ac9c4', class: "pds-drawer-content" }, h("slot", { key: 'ef90ed5b3f84b51a2938e1d8fd021b971c1c0de9' })));
     }
     static get is() { return "pds-drawer-content"; }
     static get originalStyleUrls() {

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

@@ -6,7 +6,7 @@ export class PdsDrawerFooter {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
     }
     render() {
-        return (h("footer", { key: '71cb35f7b1ccba9e4187eb8942771741f13510dc', class: "pds-drawer__footer" }, h("slot", { key: '28927c76ee8194c44f416ee5d4e9ea2e0376bf5a' })));
+        return (h("footer", { key: '383f7cb7a95a71bd03b2e328cd4b41117e17c631', class: "pds-drawer__footer" }, h("slot", { key: 'e9e9b6c7fef502c8004223bc8611e8d798ecb966' })));
     }
     static get is() { return "pds-drawer-footer"; }
     static get originalStyleUrls() {

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

@@ -6,7 +6,7 @@ export class PdsDrawerHeader {
         unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
     }
     render() {
-        return (h("header", { key: '48d0585e0e20c9d3142635f0fc0184c0803413b8', class: "pds-drawer__header" }, h("slot", { key: '14d9d0bde0116c81892140b22a2b6e9a2b1d969f' })));
+        return (h("header", { key: '5524b12af7c07d322ebd6726bd1a28320a838e77', class: "pds-drawer__header" }, h("slot", { key: '8212060c5c48a53d05d320bb625ce2b6dce7c6c3' })));
     }
     static get is() { return "pds-drawer-header"; }
     static get originalStyleUrls() {

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

@@ -9,6 +9,10 @@
   }
 }
 
+.pds-drawer__modal > .pds-modal__backdrop[aria-modal]::before {
+  content: none;
+}
+
 .pds-drawer__modal > .pds-modal__backdrop > .pds-modal {
   border-radius: 0;
   height: 100%;

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { closest, containsComposed } from "../../utils/closest";
 import { unwrapReconnectedContent } from "../../utils/reconnected-content";
 // Known selectors for content Pine components portal to document.body rather
 // than rendering in place — pds-popover, pds-tooltip, pds-combobox's dropdown.
@@ -115,6 +116,12 @@ export class PdsDrawer {
             return;
         if (target.closest(PORTALED_OVERLAY_SELECTOR))
             return;
+        // A datepicker's portaled calendar counts as inside only when its datepicker is in the drawer,
+        // or in an overlay portaled from it (a pds-popover in the drawer puts its content on the body).
+        const calendar = target.closest('.pds-datepicker-calendar-portal');
+        const owner = calendar === null || calendar === void 0 ? void 0 : calendar.pdsDatepicker;
+        if (owner && (containsComposed(this.el, owner) || closest(PORTALED_OVERLAY_SELECTOR, owner)))
+            return;
         // A sibling pds-modal — e.g. a confirm dialog opened from inside the
         // drawer but mounted at the document root rather than nested in our own
         // content — is neither a descendant of the drawer nor on the portaled
@@ -126,11 +133,11 @@ export class PdsDrawer {
         this.open = false;
     }
     render() {
-        return (h(Host, { key: '66e16ca7704243e8bb98002f042fa073ec43c38b', class: {
+        return (h(Host, { key: '0ca6f9e5c49323c0b72c6338ecd172262afdd999', class: {
                 'pds-drawer': true,
                 [`pds-drawer--${this.side}`]: true,
                 [`pds-drawer--${this.size}`]: true,
-            } }, h("pds-modal", { key: 'b52b8cb1892d52113920ab27344d9a969e6365b6', class: "pds-drawer__modal", ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: true, backdropDismiss: this.lightDismiss, disableInitialFocus: this.initialFocus === 'none' }, h("slot", { key: 'c9ce43ca12a06c550bd130a0fa7572dec22c9c92' }))));
+            } }, h("pds-modal", { key: '5b87fdc3aaedaa7cc7efe43482314dae8621d8c6', class: "pds-drawer__modal", ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: true, backdropDismiss: this.lightDismiss, disableInitialFocus: this.initialFocus === 'none' }, h("slot", { key: 'dde3adec14308881defd57f75df9393bf9f9f48f' }))));
     }
     static get is() { return "pds-drawer"; }
     static get originalStyleUrls() {

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

@@ -72,7 +72,7 @@ export class PdsDropdownMenuItem {
             }, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
     }
     render() {
-        return (h(Host, { key: '2fd3c925ba2f1ead6d0a23c44ac87449e8dad521', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+        return (h(Host, { key: 'cf22f97df3869d59820ba0deff9a21bfee2628b8', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
     }
     static get is() { return "pds-dropdown-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.js

@@ -8,7 +8,7 @@ export class PdsDropdownMenuSeparator {
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: 'f55fc3b23a6ccb94a7ce865189e5d65abdd97d8c', id: this.componentId }, h("hr", { key: '784a1480881a27aec69c0a2b0afd06f103912544' })));
+        return (h(Host, { key: '63bd5fd3112b1030d1e86b331a659ab3a92dd387', id: this.componentId }, h("hr", { key: '0a8504d34a9b91db03abdddd86ce918c00534410' })));
     }
     static get is() { return "pds-dropdown-menu-separator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js

@@ -93,7 +93,9 @@ export class PdsDropdownMenu {
             // Reset focus index
             this.currentFocusIndex = -1;
             // Return focus to trigger
-            this.triggerEl.focus();
+            if (this.isFocusInMenu()) {
+                this.triggerEl.focus();
+            }
         };
         // Handle click on the trigger element
         this.handleClick = () => {
@@ -111,6 +113,11 @@ export class PdsDropdownMenu {
             this.cleanupAutoUpdate = null;
         }
     }
+    // Outside clicks and scripted closes leave focus where it is; only focus in the menu or on its trigger returns.
+    isFocusInMenu() {
+        const focused = this.host.getRootNode().activeElement;
+        return focused != null && this.host.contains(focused);
+    }
     // Check if a menu item is disabled (handles both component and raw elements)
     isItemDisabled(item) {
         const tagName = item.tagName.toLowerCase();
@@ -306,7 +313,7 @@ export class PdsDropdownMenu {
         }
     }
     render() {
-        return (h(Host, { key: '7907da6a04530d01bbbd0256f0b609fa53e0a774', id: this.componentId }, h("slot", { key: '2bf060c4dec082d4175a7cde759221fd4b20d706', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '0d81eddee58fda631eb6a39cba0e7ad0d69c02d8', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, h("slot", { key: '831485d66af711edc9491078827455762795bb64', onSlotchange: this.handleSlotChange }))));
+        return (h(Host, { key: 'a49d859ea4b881c025620b3bad3157af8ceceb36', id: this.componentId }, h("slot", { key: '2669398c6b6f0ad4037ba34695b0880afa4c69b9', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: 'e2a6d7892bfe4ead980df8f702e5387e62d6bd05', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", role: "menu", "aria-orientation": "vertical", part: "menu-panel" }, h("slot", { key: '70fa9b2ac96f528ae0ebd28486b5a934fb705413', onSlotchange: this.handleSlotChange }))));
     }
     static get is() { return "pds-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }