@pine-ds/core 3.27.0 → 3.29.0

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

@@ -26,6 +26,12 @@ export class PdsToast {
          * @default 'default'
          */
         this.type = 'default';
+        /**
+         * Accessible label for the dismiss button. Pass a translated string to
+         * localize it; defaults to English.
+         * @defaultValue 'Dismiss message'
+         */
+        this.dismissLabel = 'Dismiss message';
         /**
          * Whether the toast is currently visible.
          */
@@ -115,13 +121,13 @@ export class PdsToast {
         return this.icon && h("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (h(Host, { key: '7768cbf398d4592b774734abdf5e9f1f4d4fb7e8', hidden: !this.isVisible }, h("div", { key: 'c17b00c76bd42d1040b8ef08a354e10346a79aa4', class: {
+        return (h(Host, { key: '87c9b15656a2765eb9e722c85dba5c5edbe07c42', hidden: !this.isVisible }, h("div", { key: 'bd8b26ef0c33b96603313bce74505953d8fe7410', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: 'cb7066fd49ae8674d5de80ecde21e63eecbcdf29', class: "pds-toast__message" }, h("slot", { key: '5c08d8b5cc54e02bed2906c2d52b894301fdca5d' })), this.dismissible && (h("button", { key: '4edd83a8521f76a2abddfe64caaac932962745ff', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: '5f7fd6b70fe130d8b0915da07640bec01b3b2bcb', class: "pds-toast__message" }, h("slot", { key: '4aa0cf737b420ae51297126b423b44d2a8610226' })), this.dismissible && (h("button", { key: 'a8b8e5e9ba956b2d9cca284d114afa37b80570cf', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": "Dismiss message" }, h("pds-icon", { key: 'c5cf65f889bfcd85e3fdab437539e7ee3f6e0465', name: "remove" }))))));
+            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: 'dac8f2099b2ab8a68d208aac288d48019df6d7e7', name: "remove" }))))));
     }
     static get is() { return "pds-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -243,6 +249,29 @@ export class PdsToast {
                 "reflect": false,
                 "attribute": "type",
                 "defaultValue": "'default'"
+            },
+            "dismissLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'Dismiss message'"
+                        }],
+                    "text": "Accessible label for the dismiss button. Pass a translated string to\nlocalize it; defaults to English."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismiss-label",
+                "defaultValue": "'Dismiss message'"
             }
         };
     }

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

@@ -312,9 +312,9 @@ export class PdsTooltip {
     }
     render() {
         const hostId = this.componentId || undefined;
-        return (h(Host, { key: '4e6188e03c2f1d33e571b96a3006a585840716bd', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '0b82d180295421c32548577fb2038422b8ebd3be', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
+        return (h(Host, { key: '6af9c969e0dae4f3969cba2153797a1bccfc6d21', id: hostId, class: { 'pds-tooltip--is-open': this.opened } }, h("span", { key: '97c48a8b8d626ee913412bd55aefb17f36fad401', class: "pds-tooltip__trigger", onMouseEnter: this.handleShow, onMouseLeave: this.handleHide,
             /* focusin/out bubble; ensure keyboard users see tooltips */
-            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '661014ee46b11bcc906e7b64ef8c8a5739d459f0' })), h("div", { key: '1861ce9b260f5f7d2eb0a1f337dadd63a0dfee97', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '963fb263c72fba432c2b672a2c3e85ca524f2b67', name: "content" }))));
+            onFocusin: this.handleShow, onFocusout: this.handleHide, ref: el => this.triggerEl = el }, h("slot", { key: '37715fc0bf525695a62af1944ff853228080302a' })), h("div", { key: 'a9a925b1de9ea45d2f6b9f39ec5e386537313217', class: "pds-tooltip__content-slot-wrapper", hidden: true }, h("slot", { key: '1486b30af21dc69758d7dc9890cbaf227bafffc7', name: "content" }))));
     }
     static get is() { return "pds-tooltip"; }
     static get originalStyleUrls() {

package/dist/collection/i18n/i18n-format.js

@@ -0,0 +1,59 @@
+/**
+ * i18n formatting helpers for Pine components.
+ *
+ * Pine stays string-agnostic: user-facing text is supplied by the consumer as
+ * props (English-defaulted). These helpers only handle the two things a prop
+ * value can't express on its own — interpolating live component state into a
+ * translated template, and picking the right plural form. No stored strings, no
+ * locale registry; the locale is read from the DOM (`lang`), the web-standard
+ * signal a consumer already sets.
+ *
+ * Two limitations of DOM-`lang` locale resolution, both inherent to inferring
+ * locale from the DOM rather than being told it:
+ *
+ * 1. Not reactive. `resolveLocale` is read during render; Stencil has no
+ *    reactive dependency on a DOM attribute, so changing `lang` at runtime
+ *    (`document.documentElement.lang = 'pl'`) does NOT re-render mounted
+ *    components — the plural form stays stale until unrelated state forces a
+ *    render. Fine when locale changes via full-page navigation; a consumer that
+ *    switches locale client-side should pass the already-formatted/pluralized
+ *    string as the prop instead.
+ * 2. Does not cross shadow boundaries. `el.closest('[lang]')` stops at the host's
+ *    shadow root. A Pine component nested inside another custom element whose
+ *    `lang` sits on that outer host will not see it and falls back to
+ *    `document.documentElement.lang`. Set `lang` on (or above) the Pine element
+ *    in the same tree, or pass a pre-formatted string, when that matters.
+ */
+/** Replace `{token}` placeholders with `vars`; unknown tokens stay literal. */
+export function formatMessage(template, vars) {
+    if (!vars)
+        return template;
+    return template.replace(/\{(\w+)\}/g, (_match, key) => key in vars ? String(vars[key]) : `{${key}}`);
+}
+/** Nearest `[lang]` ancestor, then `<html lang>`, then `'en'`. */
+export function resolveLocale(el) {
+    var _a;
+    const fromEl = el && typeof el.closest === 'function' ? (_a = el.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.getAttribute('lang') : null;
+    const fromDoc = typeof document !== 'undefined' ? document.documentElement.lang : '';
+    return fromEl || fromDoc || 'en';
+}
+/**
+ * Pick the CLDR plural form for `count` in the element's locale (via the
+ * platform `Intl.PluralRules`) and interpolate `{count}`. `forms` come from the
+ * caller — component props, English-defaulted — and fall back to `other`.
+ */
+export function pluralize(el, count, forms, vars) {
+    let category = 'other';
+    try {
+        category = new Intl.PluralRules(resolveLocale(el)).select(count);
+    }
+    catch (_a) {
+        /* invalid locale tag → fall back to 'other' */
+    }
+    // Prefer the selected category, then the required `other`, then `one`; never
+    // return empty. `||` (not `??`) so an empty-string form is skipped too, not
+    // treated as present — a bare `{count}` still shows the number rather than
+    // leaving the trigger with no accessible name.
+    const template = forms[category] || forms.other || forms.one || '{count}';
+    return formatMessage(template, Object.assign({ count }, vars));
+}

package/dist/collection/i18n/index.js

@@ -0,0 +1 @@
+export { formatMessage, pluralize, resolveLocale } from './i18n-format';