@pine-ds/core 4.3.0 → 4.4.0

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

@@ -11,6 +11,9 @@ export default {
     dropdownMount: 'host',
     dropdownWidth: '236px',
     errorMessage: null,
+    flyoutMaxWidth: '380px',
+    flyoutMinWidth: '280px',
+    groupDisplay: 'inline',
     helperMessage: null,
     hideLabel: false,
     invalid: false,
@@ -378,6 +381,243 @@ OptionGroupsOptgroup.args = {
   maxHeight: '280px',
 };
 
+export const OptionGroupsWithIcons = (args) => html`
+<pds-combobox
+  component-id="combobox-optgroup-icons"
+  label=${args.label}
+  placeholder=${args.placeholder}
+  trigger=${args.trigger}
+  mode=${args.mode}
+  trigger-width=${args.triggerWidth}
+  dropdown-width=${args.dropdownWidth}
+>
+  <optgroup label="Tag" data-icon="hashtag">
+    <option value="tag-add">Add a tag</option>
+    <option value="tag-remove">Remove a tag</option>
+  </optgroup>
+  <optgroup label="Email" data-icon="mail">
+    <option value="email-send">Send an email</option>
+  </optgroup>
+  <optgroup label="Coupon" data-icon="coupon">
+    <option value="coupon-send">Send a coupon</option>
+  </optgroup>
+</pds-combobox>`;
+
+OptionGroupsWithIcons.args = {
+  label: 'Action',
+  placeholder: 'Select an action',
+  trigger: 'button',
+  mode: 'select-only',
+  triggerWidth: '280px',
+  dropdownWidth: '280px',
+};
+
+export const OptionGroupsFromOptions = (args) => html`
+<pds-combobox
+  component-id="combobox-grouped-options"
+  label=${args.label}
+  placeholder=${args.placeholder}
+  trigger=${args.trigger}
+  mode=${args.mode}
+  trigger-width=${args.triggerWidth}
+  dropdown-width=${args.dropdownWidth}
+  .options=${args.options}
+></pds-combobox>`;
+
+OptionGroupsFromOptions.args = {
+  label: 'Action',
+  placeholder: 'Select an action',
+  trigger: 'button',
+  mode: 'select-only',
+  triggerWidth: '280px',
+  dropdownWidth: '280px',
+  // Tag's options are split by Email on purpose: each group still renders together.
+  options: [
+    { id: 'tag-add', text: 'Add a tag', group: 'Tag', groupIcon: 'hashtag' },
+    { id: 'email-send', text: 'Send an email', group: 'Email', groupIcon: 'mail' },
+    { id: 'tag-remove', text: 'Remove a tag', group: 'Tag' },
+    { id: 'coupon-send', text: 'Send a coupon', group: 'Coupon', groupIcon: 'coupon' },
+  ],
+};
+
+export const GroupDisplayFlyout = (args) => html`
+<div style="min-height: 420px;">
+  <pds-combobox
+    component-id="combobox-group-flyout"
+    label=${args.label}
+    placeholder=${args.placeholder}
+    trigger=${args.trigger}
+    mode=${args.mode}
+    group-display="flyout"
+    trigger-width=${args.triggerWidth}
+    dropdown-width=${args.dropdownWidth}
+    flyout-min-width=${args.flyoutMinWidth}
+    flyout-max-width=${args.flyoutMaxWidth}
+    .options=${args.options}
+  ></pds-combobox>
+</div>`;
+
+GroupDisplayFlyout.args = {
+  label: 'Action',
+  placeholder: 'Select an action',
+  trigger: 'input',
+  mode: 'filter',
+  // Narrower than the old 408px default (matches Action Catalog's trigger/dropdown width),
+  // leaving more room for the flyout on typical viewports. This alone doesn't guarantee a flyout
+  // on a cramped canvas (e.g. Storybook with the Controls panel docked): the room check compares
+  // available space against flyout-min-width (280px), not dropdown-width, so a narrow enough
+  // canvas still falls back to drill-in — correctly, there's genuinely no room for both.
+  triggerWidth: '280px',
+  dropdownWidth: '280px',
+  flyoutMinWidth: '280px',
+  flyoutMaxWidth: '380px',
+  options: [
+    { id: 'offer-grant', text: 'Grant an offer', group: 'Offer', groupIcon: 'grant-offer' },
+    { id: 'offer-revoke', text: 'Revoke an offer', group: 'Offer' },
+    { id: 'tag-add', text: 'Add a tag', group: 'Tag', groupIcon: 'hashtag' },
+    { id: 'tag-remove', text: 'Remove a tag', group: 'Tag' },
+    { id: 'email-send', text: 'Send an email', group: 'Email', groupIcon: 'mail' },
+    { id: 'coupon-send', text: 'Send a coupon', group: 'Coupon', groupIcon: 'coupon' },
+  ],
+};
+
+export const GroupDisplayDrillInWithPanelSearch = (args) => html`
+<div style="min-height: 360px;">
+  <pds-combobox
+    component-id="combobox-group-drill-in"
+    label=${args.label}
+    placeholder=${args.placeholder}
+    trigger="button"
+    mode="select-only"
+    group-display="drill-in"
+    ?panel-search=${args.panelSearch}
+    search-placeholder=${args.searchPlaceholder}
+    search-options-label=${args.searchOptionsLabel}
+    drill-in-back-label=${args.drillInBackLabel}
+    trigger-width=${args.triggerWidth}
+    dropdown-width=${args.dropdownWidth}
+    .options=${args.options}
+  ></pds-combobox>
+</div>`;
+
+GroupDisplayDrillInWithPanelSearch.args = {
+  panelSearch: true,
+  label: 'Filter',
+  placeholder: 'Choose a filter',
+  searchPlaceholder: 'Search filters',
+  searchOptionsLabel: 'Search filters',
+  drillInBackLabel: 'Back',
+  triggerWidth: '320px',
+  dropdownWidth: '320px',
+  options: [
+    { id: 'email-status', text: 'Marketing status', group: 'Email', groupIcon: 'mail' },
+    { id: 'email-activity', text: 'Email activity', group: 'Email' },
+    { id: 'email-broadcasts', text: 'Broadcasts', group: 'Email' },
+    { id: 'contact-added', text: 'Was added', group: 'Contact', groupIcon: 'hashtag' },
+    { id: 'contact-hidden', text: 'Is hidden', group: 'Contact' },
+  ],
+};
+
+// A large action catalog: many groups, a button trigger and panel search. The narrower widths
+// leave room for the flyout beside the dropdown on a narrow canvas.
+export const GroupDisplayActionCatalog = (args) => html`
+<div style="min-height: 520px;">
+  <pds-combobox
+    component-id="combobox-action-catalog"
+    label=${args.label}
+    placeholder=${args.placeholder}
+    trigger="button"
+    mode="select-only"
+    group-display=${args.groupDisplay}
+    ?panel-search=${args.panelSearch}
+    search-placeholder=${args.searchPlaceholder}
+    search-options-label=${args.searchOptionsLabel}
+    drill-in-back-label=${args.drillInBackLabel}
+    trigger-width=${args.triggerWidth}
+    dropdown-width=${args.dropdownWidth}
+    .options=${args.options}
+  ></pds-combobox>
+</div>`;
+
+GroupDisplayActionCatalog.args = {
+  panelSearch: true,
+  label: 'Action',
+  placeholder: 'Choose an action',
+  groupDisplay: 'flyout',
+  searchPlaceholder: 'Search actions',
+  searchOptionsLabel: 'Search actions',
+  drillInBackLabel: 'Back',
+  triggerWidth: '280px',
+  dropdownWidth: '280px',
+  options: [
+    { id: 'contact_tag_add', text: 'Add a tag', group: 'Contact', groupIcon: 'contact' },
+    { id: 'contact_tag_remove', text: 'Remove a tag', group: 'Contact' },
+    { id: 'enroll_in_workflow', text: 'Enroll in an automation', group: 'Contact' },
+    { id: 'email_send', text: 'Send an email', group: 'Communication', groupIcon: 'mail' },
+    { id: 'email_sequence_subscribe', text: 'Subscribe to a sequence', group: 'Communication' },
+    { id: 'email_sequence_unsubscribe', text: 'Unsubscribe from a sequence', group: 'Communication' },
+    { id: 'sms_send', text: 'Send a text message', group: 'Communication' },
+    { id: 'offer_send', text: 'Send an offer', group: 'Communication' },
+    { id: 'event_register', text: 'Register for an event', group: 'Communication' },
+    { id: 'event_deregister', text: 'Deregister from an event', group: 'Communication' },
+    { id: 'offer_grant', text: 'Grant an offer', group: 'Membership', groupIcon: 'product' },
+    { id: 'offer_revoke', text: 'Revoke an offer', group: 'Membership' },
+    { id: 'offer_cancel_payment_and_access', text: 'Cancel payment and access', group: 'Membership' },
+    { id: 'coupon_send', text: 'Send a coupon', group: 'Membership' },
+    { id: 'certificate_send', text: 'Send a certificate', group: 'Membership' },
+    { id: 'community_channel_member_add', text: 'Add to a channel', group: 'Communities', groupIcon: 'users' },
+    { id: 'community_channel_member_remove', text: 'Remove from a channel', group: 'Communities' },
+    { id: 'community_post_to_channel', text: 'Post to a channel', group: 'Communities' },
+    { id: 'community_send_dm', text: 'Send a community message', group: 'Communities' },
+    { id: 'coaching_invoice_reminder', text: 'Send an invoice reminder', group: 'Coaching', groupIcon: 'one-off-session' },
+    { id: 'coaching_sessions_cancel', text: 'Cancel sessions', group: 'Coaching' },
+    { id: 'coaching_sessions_remove', text: 'Remove sessions', group: 'Coaching' },
+    { id: 'instagram_direct_message', text: 'Send an Instagram message', group: 'Instagram', groupIcon: 'logo-instagram' },
+    { id: 'instagram_reply', text: 'Reply to an Instagram comment', group: 'Instagram' },
+    { id: 'facebook_direct_message', text: 'Send a Facebook message', group: 'Facebook', groupIcon: 'logo-facebook' },
+    { id: 'facebook_reply', text: 'Reply to a Facebook comment', group: 'Facebook' },
+  ],
+};
+
+GroupDisplayActionCatalog.argTypes = {
+  groupDisplay: { control: 'inline-radio', options: ['inline', 'flyout', 'drill-in'] },
+};
+
+export const DisabledOptions = (args) => html`
+<div style="min-height: 320px;">
+  <pds-combobox
+    component-id="combobox-disabled-options"
+    label=${args.label}
+    placeholder=${args.placeholder}
+    helper-message=${args.helperMessage}
+    trigger="button"
+    mode="select-only"
+    group-display=${args.groupDisplay}
+    trigger-width="280px"
+    dropdown-width="280px"
+    .options=${args.options}
+  ></pds-combobox>
+</div>`;
+
+DisabledOptions.args = {
+  label: 'Action',
+  placeholder: 'Choose an action',
+  helperMessage: 'Text messages and coaching actions need the Pro plan.',
+  groupDisplay: 'flyout',
+  options: [
+    { id: 'contact_tag_add', text: 'Add a tag', group: 'Contact', groupIcon: 'contact' },
+    { id: 'contact_tag_remove', text: 'Remove a tag', group: 'Contact' },
+    { id: 'email_send', text: 'Send an email', group: 'Communication', groupIcon: 'mail' },
+    { id: 'sms_send', text: 'Send a text message', group: 'Communication', disabled: true },
+    { id: 'coaching_invoice_reminder', text: 'Send an invoice reminder', group: 'Coaching', groupIcon: 'one-off-session', disabled: true },
+    { id: 'coaching_sessions_cancel', text: 'Cancel sessions', group: 'Coaching', disabled: true },
+  ],
+};
+
+DisabledOptions.argTypes = {
+  groupDisplay: { control: 'inline-radio', options: ['inline', 'flyout', 'drill-in'] },
+};
+
 export const OptionGroupsPdsText = (args) => html`
 <pds-combobox
   component-id="combobox-pds-text-groups"

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

@@ -25,7 +25,7 @@ export class PdsContainer {
             hostStyle['--pine-container-max-width'] = customSize;
         if (!this.centered)
             hostStyle['margin-inline'] = '0';
-        return (h(Host, { key: 'b8055b9add2e9abfeaf61f233a0f22e559829eb2', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, h(Tag, { key: '8aac62d1a6639063d10b8c51539ca0bc3ca0bae4', part: "container" }, h("slot", { key: '747e55553b7660159ee9d0192ccb8ed29a99f0b0' }))));
+        return (h(Host, { key: '8a01369c4d1817dd083b1ac714ff7c02920f817e', class: { [`pds-container--${this.size}`]: isNamed }, style: Object.keys(hostStyle).length ? hostStyle : undefined }, h(Tag, { key: '7428cb0040896dc11004065cf91ae9d3c3a99c49', part: "container" }, h("slot", { key: '5a5b5bbc87c03afc23f1c9a0523fced8c0795efb' }))));
     }
     static get is() { return "pds-container"; }
     static get encapsulation() { return "shadow"; }

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

@@ -90,7 +90,7 @@ export class PdsCopytext {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: '6e3ff4eb0dc42e57156a162196a06a675cac6f91', class: this.classNames(), id: this.componentId }, h("pds-button", { key: '749a8dde35eb3c70941229d11dc6477aaf717ed1', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: '7f457a164f3ae76a37814d37d7b5e3fce86bd803', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '0ff6dad44148c23ee9d693e82880598b91b0630e', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
+        return (h(Host, { key: '5a72c4f71f1d5573b6e708a8a0e0e003a7915935', class: this.classNames(), id: this.componentId }, h("pds-button", { key: 'eb14f7f0137a9ba13d4ce8f54edda0f5aedd1be0', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: 'aaa00e1272559dc2b808757b6323753ff45574b0', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '4c383f7f4b7d696bda724989c6462d0c8aafcbc1', "aria-hidden": "true", icon: copyIcon, size: "16px" }))));
     }
     static get is() { return "pds-copytext"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,136 @@
+import { closest } from "../../utils/closest";
+/**
+ * Where the open calendar lives: a `div` in `document.body`, or in the nearest `<dialog>` so it
+ * shares a modal's top layer, outside any `overflow: hidden` or transformed ancestor that would
+ * clip or misplace a fixed-position popup. The portal has its own shadow root carrying the
+ * datepicker's styles, so the calendar looks the same there without any global CSS.
+ */
+export class CalendarPortal {
+    constructor(datepicker) {
+        this.datepicker = datepicker;
+        /** The custom properties copyContext set on the host, cleared before it copies again. */
+        this.copiedProperties = [];
+        this.host = document.createElement('div');
+        this.host.className = CalendarPortal.className;
+        // So an overlay can tell whether a click in this calendar belongs to a datepicker inside it.
+        this.host.pdsDatepicker = datepicker;
+        // The shared stylesheet's `:host` rules match this div too; keep it out of layout, so it never
+        // adds a line to the page, while it still passes `dir`, `lang` and the theme down.
+        this.host.style.display = 'contents';
+        this.root = this.host.attachShadow({ mode: 'open' });
+    }
+    /**
+     * Moves the calendar into the portal, mounting the portal first. Context is copied when the portal
+     * is attached or the locale changes, not on every render while it's open (in range mode, every
+     * hovered day). A theme set on an ancestor while the calendar is open applies when it next opens.
+     */
+    mount(calendar, locale) {
+        if (!this.host.isConnected) {
+            findPortalTarget(this.datepicker).appendChild(this.host);
+            this.copyContext(locale);
+        }
+        else if (locale !== this.locale) {
+            this.copyContext(locale);
+        }
+        if (calendar.parentNode !== this.root)
+            this.root.appendChild(calendar);
+    }
+    remove() {
+        this.host.remove();
+    }
+    /** Whether a node is the portal or inside it, as a focus or pointer target. */
+    contains(node) {
+        return !!node && (node === this.host || this.root.contains(node));
+    }
+    /**
+     * Carries over what the calendar would otherwise inherit from the datepicker: its styles, the
+     * reading direction and language, a theme set on an ancestor, and size overrides.
+     */
+    copyContext(locale) {
+        var _a, _b;
+        this.locale = locale;
+        const source = this.datepicker.shadowRoot;
+        if (source) {
+            if ((_a = source.adoptedStyleSheets) === null || _a === void 0 ? void 0 : _a.length) {
+                this.root.adoptedStyleSheets = source.adoptedStyleSheets;
+            }
+            else if (!this.root.querySelector('style')) {
+                source.querySelectorAll('style').forEach((style) => this.root.appendChild(style.cloneNode(true)));
+            }
+        }
+        const computed = getComputedStyle(this.datepicker);
+        this.host.dir = computed.direction || 'ltr';
+        // So assistive tech reads the month and day names in the calendar's own language.
+        this.host.lang = locale;
+        this.copyCustomProperties(computed);
+        // Across shadow boundaries: a theme set above an enclosing component still applies.
+        const theme = (_b = (closest('[data-theme]', this.datepicker) || null)) === null || _b === void 0 ? void 0 : _b.getAttribute('data-theme');
+        if (theme) {
+            this.host.setAttribute('data-theme', theme);
+        }
+        else {
+            this.host.removeAttribute('data-theme');
+        }
+    }
+    /**
+     * Custom properties set on an ancestor of the datepicker that isn't an ancestor of the portal,
+     * as a token override on a card or panel, or the datepicker's own size properties: each one whose
+     * value at the datepicker differs from where the portal mounts is set on the portal host.
+     */
+    copyCustomProperties(computed) {
+        for (const property of this.copiedProperties)
+            this.host.style.removeProperty(property);
+        this.copiedProperties = [];
+        const parent = this.host.parentElement;
+        const outside = parent ? getComputedStyle(parent) : null;
+        for (let i = 0; i < computed.length; i++) {
+            const property = computed[i];
+            if (!property.startsWith('--'))
+                continue;
+            const value = computed.getPropertyValue(property);
+            if (outside && value === outside.getPropertyValue(property))
+                continue;
+            this.host.style.setProperty(property, value.trim());
+            this.copiedProperties.push(property);
+        }
+    }
+}
+CalendarPortal.className = 'pds-datepicker-calendar-portal';
+/**
+ * The native `<dialog>` or open `popover` (as pds-filter's) the datepicker sits in, so the
+ * calendar shares its top layer and a click in it isn't outside it; otherwise `document.body`.
+ * `closest()` stops at shadow boundaries and misses one that only wraps slotted content, so this
+ * walks assigned slots and shadow hosts, as pds-combobox does.
+ */
+export function findPortalTarget(from) {
+    const seen = new Set();
+    let current = from;
+    while (current && !seen.has(current)) {
+        seen.add(current);
+        if (current.nodeType === Node.ELEMENT_NODE && isTopLayerHost(current)) {
+            return current;
+        }
+        const assigned = current.nodeType === Node.ELEMENT_NODE ? current.assignedSlot : null;
+        if (assigned) {
+            current = assigned;
+            continue;
+        }
+        const parent = current.parentNode;
+        current = parent instanceof ShadowRoot ? parent.host : parent;
+    }
+    return document.body;
+}
+function isTopLayerHost(el) {
+    // Only an open dialog: inside a closed one, the calendar would be hidden with it.
+    if (el.localName === 'dialog')
+        return el.open;
+    if (!el.hasAttribute('popover'))
+        return false;
+    try {
+        return el.matches(':popover-open');
+    }
+    catch (_a) {
+        // A browser without the Popover API: no top layer to share.
+        return false;
+    }
+}

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

@@ -0,0 +1,132 @@
+/**
+ * Date-only helpers for pds-datepicker. Dates are `YYYY-MM-DD` strings and all arithmetic runs in
+ * UTC, so a date never shifts by a day with the viewer's time zone or a daylight-saving change.
+ */
+const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+/** Parses a `YYYY-MM-DD` string to a UTC `Date`, or `null` when it isn't a real calendar date. */
+export function parseIsoDate(value) {
+    const match = ISO_DATE.exec((value !== null && value !== void 0 ? value : '').trim());
+    if (!match)
+        return null;
+    const [, year, month, day] = match.map(Number);
+    const date = new Date(Date.UTC(year, month - 1, day));
+    // Rejects dates like 2026-02-30, which Date.UTC would roll into March.
+    return date.getUTCFullYear() === year && date.getUTCMonth() === month - 1 && date.getUTCDate() === day ? date : null;
+}
+export function toIsoDate(date) {
+    return date.toISOString().slice(0, 10);
+}
+/** Today in the viewer's time zone, as a UTC date. */
+export function today() {
+    const now = new Date();
+    return new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate()));
+}
+export function addDays(date, days) {
+    return new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate() + days));
+}
+/** Moves by whole months, keeping the day where it exists (Jan 31 + 1 month is Feb 28 or 29). */
+export function addMonths(date, months) {
+    const first = new Date(Date.UTC(date.getUTCFullYear(), date.getUTCMonth() + months, 1));
+    const lastDay = daysInMonth(first.getUTCFullYear(), first.getUTCMonth());
+    return new Date(Date.UTC(first.getUTCFullYear(), first.getUTCMonth(), Math.min(date.getUTCDate(), lastDay)));
+}
+export function daysInMonth(year, month) {
+    return new Date(Date.UTC(year, month + 1, 0)).getUTCDate();
+}
+export function isSameDay(a, b) {
+    return !!a && !!b && a.getTime() === b.getTime();
+}
+/** Clamps a date into the `[min, max]` range; either bound may be missing. */
+export function clampDate(date, min, max) {
+    if (min && date < min)
+        return min;
+    if (max && date > max)
+        return max;
+    return date;
+}
+export function isOutOfRange(date, min, max) {
+    return (!!min && date < min) || (!!max && date > max);
+}
+/** The column (0–6) a date falls in, for a week starting on `firstDayOfWeek` (0 = Sunday). */
+export function weekdayColumn(date, firstDayOfWeek) {
+    return (date.getUTCDay() - firstDayOfWeek + 7) % 7;
+}
+/**
+ * The month's weeks, each seven cells long. Days from the neighbouring months are `null`, so the
+ * grid only offers dates in the month on view.
+ */
+export function monthWeeks(year, month, firstDayOfWeek) {
+    const first = new Date(Date.UTC(year, month, 1));
+    const cells = Array(weekdayColumn(first, firstDayOfWeek)).fill(null);
+    for (let day = 1; day <= daysInMonth(year, month); day++) {
+        cells.push(new Date(Date.UTC(year, month, day)));
+    }
+    while (cells.length % 7 !== 0)
+        cells.push(null);
+    const weeks = [];
+    for (let i = 0; i < cells.length; i += 7)
+        weeks.push(cells.slice(i, i + 7));
+    return weeks;
+}
+/**
+ * The locale's first day of the week (0 = Sunday), from `Intl.Locale` week info where the browser
+ * has it. Falls back to Sunday.
+ */
+export function localeFirstDayOfWeek(locale) {
+    var _a, _b, _c;
+    // Intl.Locale is newer than the library's ES2017 typings.
+    const IntlLocale = Intl.Locale;
+    if (!IntlLocale)
+        return 0;
+    try {
+        const intlLocale = new IntlLocale(locale);
+        const firstDay = (_b = (_a = intlLocale.getWeekInfo) === null || _a === void 0 ? void 0 : _a.call(intlLocale).firstDay) !== null && _b !== void 0 ? _b : (_c = intlLocale.weekInfo) === null || _c === void 0 ? void 0 : _c.firstDay;
+        // Intl numbers the days 1 (Monday) to 7 (Sunday).
+        return typeof firstDay === 'number' ? firstDay % 7 : 0;
+    }
+    catch (_d) {
+        return 0;
+    }
+}
+/**
+ * Weekday names, starting from `firstDayOfWeek`: a short form for the column heading and the long
+ * form for assistive tech. Latin-script names shorten to two letters (Su Mo, lu ma, Mo Di), as the
+ * admin date picker does, while the seven stay distinct; other scripts keep the locale's short form,
+ * which is already compact.
+ */
+export function weekdayNames(locale, firstDayOfWeek) {
+    const shortFormat = dateFormatter(locale, { weekday: 'short' });
+    const longFormat = dateFormatter(locale, { weekday: 'long' });
+    // 2023-01-01 was a Sunday.
+    const days = Array.from({ length: 7 }, (_, i) => new Date(Date.UTC(2023, 0, 1 + ((firstDayOfWeek + i) % 7))));
+    const shorts = days.map((date) => shortFormat.format(date).replace(/\.$/, ''));
+    const latin = shorts.every((name) => /^[A-Za-z\u00C0-\u024F]+$/.test(name));
+    const twoLetters = shorts.map((name) => name.slice(0, 2));
+    const useTwoLetters = latin && new Set(twoLetters.map((name) => name.toLowerCase())).size === 7;
+    return days.map((date, i) => ({
+        short: useTwoLetters ? twoLetters[i] : shortFormat.format(date),
+        long: longFormat.format(date),
+    }));
+}
+/** The locale if the browser supports it, otherwise `en-US`, so a bad tag never throws while rendering. */
+export function supportedLocale(locale) {
+    var _a;
+    try {
+        return (_a = Intl.DateTimeFormat.supportedLocalesOf(locale || [])[0]) !== null && _a !== void 0 ? _a : 'en-US';
+    }
+    catch (_b) {
+        return 'en-US';
+    }
+}
+/**
+ * A formatter for the UTC dates these helpers return. Build it once per render, not per day.
+ * Always on the Gregorian calendar the grid is laid out in, while keeping the locale's language and
+ * digits: some locales default to another calendar (Persian for `fa`, Buddhist for `th`).
+ */
+export function dateFormatter(locale, options) {
+    // `calendar` is newer than the library's ES2017 typings.
+    return new Intl.DateTimeFormat(locale, Object.assign(Object.assign({}, options), { timeZone: 'UTC', calendar: 'gregory' }));
+}
+export function formatDate(date, locale, options) {
+    return dateFormatter(locale, options).format(date);
+}

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

@@ -0,0 +1 @@
+export {};