@pine-ds/core 3.27.0 → 3.28.0

package/hydrate/index.mjs

@@ -5650,6 +5650,12 @@ class PdsAlert {
          * @defaultValue 'default'
          */
         this.variant = 'default';
+        /**
+         * Accessible label for the dismiss button. Pass a translated string to
+         * localize it; defaults to English.
+         * @defaultValue 'Dismiss alert'
+         */
+        this.dismissLabel = 'Dismiss alert';
         this.hasActionsContent = false;
         this.handleCloseClick = () => {
             this.pdsAlertDismissClick.emit();
@@ -5680,7 +5686,7 @@ class PdsAlert {
         };
         // Get the icon name based on the current variant
         const iconName = iconMap[this.variant] || iconMap.default;
-        return (hAsync(Host, { key: 'fb36c6626a4b775971032936f3cc876d2471fc71', class: "pds-alert", id: this.componentId, variant: this.variant }, hAsync("pds-box", { key: '5f80f68bfce168e11b9e83760b4a8d08b4a73b6b', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, hAsync("pds-box", { key: '905b10e7132f0af4a37c4302f3a36fa48a6bcd68', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, !this.hideIcon && (hAsync("pds-icon", { key: '278a614c942b76d923624c8df102e0138f39b142', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)" })), hAsync("pds-box", { key: '48b11184d688ebe68248b0d9198d491d42bb51c4', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (hAsync("pds-text", { key: '53930d08b766a91f8db5ef349d5bb7ac70e0a5cd', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (hAsync("button", { key: '95f4cd20c9e0fa9e652ebe7c9015aa73dad233d0', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": "Dismiss alert", onClick: this.handleCloseClick }, hAsync("pds-icon", { key: '3a8e7d24d602839c7250033f06899c1dc46467ce', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
+        return (hAsync(Host, { key: 'b143df0c24c077e412894f5f77f1bd7c0ced1c92', class: "pds-alert", id: this.componentId, variant: this.variant }, hAsync("pds-box", { key: '928e3852507a1776069ee80906443ef650607ce7', class: `pds-alert__container pds-alert__container--${this.variant}`, "background-color": "var(--pds-alert-background)", "border-color": "var(--pds-alert-border-color)", "border-radius": "md", border: true, display: "block" }, hAsync("pds-box", { key: '778046ab1c651a57e910e45fe00944a74a3c32f7', gap: "sm", display: "flex", "align-items": this.small ? "center" : undefined }, !this.hideIcon && (hAsync("pds-icon", { key: '0199ef3e12a8dc9da20006fc8c4e133f83f4caf4', class: `pds-alert__icon ${this.small ? 'pds-alert__icon--small' : ''}`, color: "var(--pds-alert-color-icon)", icon: iconName, size: "var(--pds-alert-icon-size)" })), hAsync("pds-box", { key: 'b7b973c0c6154d72f90a585a116ea76ac48cc6e4', class: "pds-alert__content-wrapper", direction: "column", gap: "xs", flex: "grow" }, this.heading && !this.small && (hAsync("pds-text", { key: 'c969f9a7eabdc31bc2faca247033e89cc15caea0', class: "pds-alert__heading", color: "var(--pds-alert-color-text)", size: "h5", tag: "h3", weight: "medium" }, this.heading)), this.renderContent()), this.dismissible && (hAsync("button", { key: '168c21de5a0112a65b73a854add4393fea9ede6f', class: "pds-alert__dismiss", type: "button", part: "dismiss", "aria-label": this.dismissLabel, onClick: this.handleCloseClick }, hAsync("pds-icon", { key: 'f8e9311a4934c1b8458879cd6244a99e3a730be2', icon: "remove", size: "var(--pds-alert-icon-size)", "aria-hidden": "true", color: "var(--pds-alert-color-dismiss)" })))))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsAlertTokensCss() + pdsAlertCss(); }
@@ -5694,6 +5700,7 @@ class PdsAlert {
             "dismissible": [4],
             "hideIcon": [4, "hide-icon"],
             "variant": [1],
+            "dismissLabel": [1, "dismiss-label"],
             "hasActionsContent": [32]
         },
         "$listeners$": undefined,
@@ -5747,6 +5754,12 @@ class PdsAvatar {
          * @defaultValue customer
          */
         this.variant = 'customer';
+        /**
+         * Accessible label for the dropdown trigger button. Pass a translated string
+         * to localize it; defaults to English.
+         * @defaultValue 'Avatar dropdown trigger'
+         */
+        this.triggerLabel = 'Avatar dropdown trigger';
         this.renderAssetWrapper = () => {
             const style = {
                 height: this.avatarSize(),
@@ -5757,7 +5770,7 @@ class PdsAvatar {
         this.renderAvatar = () => {
             return (this.dropdown
                 ?
-                    hAsync("button", { class: "pds-avatar__button", type: "button", part: "button", "aria-label": "Avatar dropdown trigger" }, this.renderAssetWrapper())
+                    hAsync("button", { class: "pds-avatar__button", type: "button", part: "button", "aria-label": this.triggerLabel }, this.renderAssetWrapper())
                 :
                     this.renderAssetWrapper());
         };
@@ -5801,7 +5814,7 @@ class PdsAvatar {
         }
     }
     render() {
-        return (hAsync(Host, { key: '7bdd177a6b7064ed12cabeb21d96b0a0cc6071ae', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
+        return (hAsync(Host, { key: 'd8c417ed6fca497bac5bb51a184b1f7d0077bc03', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
     }
     static get style() { return pdsAvatarCss(); }
     static get cmpMeta() { return {
@@ -5815,7 +5828,8 @@ class PdsAvatar {
             "image": [1],
             "initials": [1],
             "size": [513],
-            "variant": [513]
+            "variant": [513],
+            "triggerLabel": [1, "trigger-label"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -6695,6 +6709,11 @@ class PdsChip {
          * @defaultValue 'text'
          */
         this.variant = 'text';
+        /**
+         * Accessible label for the remove button. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Remove'
+         */
+        this.dismissLabel = 'Remove';
         this.handleCloseClick = () => {
             this.pdsTagCloseClick.emit();
         };
@@ -6748,7 +6767,7 @@ class PdsChip {
                 const linkAttrs = {
                     class: 'pds-chip__close',
                     href: this.removeUrl,
-                    'aria-label': 'Remove',
+                    'aria-label': this.dismissLabel,
                 };
                 // Add target if specified
                 if (this.removeTarget) {
@@ -6779,13 +6798,13 @@ class PdsChip {
             return {
                 class: 'pds-chip__close',
                 type: 'button',
-                'aria-label': 'Remove',
+                'aria-label': this.dismissLabel,
             };
         };
         return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize })));
     }
     render() {
-        return (hAsync(Host, { key: '1d75f8ea7583f53191467b568352664ea0313c79', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
+        return (hAsync(Host, { key: 'ff02e96839049b313681389308faba50c5989842', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
     static get style() { return pdsChipTokensCss() + pdsChipCss(); }
     static get cmpMeta() { return {
@@ -6801,7 +6820,8 @@ class PdsChip {
             "variant": [1],
             "removeUrl": [1, "remove-url"],
             "removeHttpMethod": [1, "remove-http-method"],
-            "removeTarget": [1, "remove-target"]
+            "removeTarget": [1, "remove-target"],
+            "dismissLabel": [1, "dismiss-label"]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -14365,6 +14385,66 @@ class PdsModalHeader {
     }; }
 }
 
+/**
+ * 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. */
+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'`. */
+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`.
+ */
+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));
+}
+
 const pdsMultiselectCss = () => `:host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);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:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}`;
 
 /**
@@ -14383,14 +14463,65 @@ class PdsMultiselect {
         this.pdsMultiselectCreate = createEvent(this, "pdsMultiselectCreate");
         this.pdsMultiselectDismiss = createEvent(this, "pdsMultiselectDismiss");
         /**
-         * Placeholder text for the input field.
+         * Placeholder text for the input field. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Select...'
          */
         this.placeholder = 'Select...';
         /**
-         * Placeholder text for the search input inside the dropdown panel.
-         * @default 'Find...'
+         * Placeholder text for the search input inside the dropdown panel. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Find...'
          */
         this.searchPlaceholder = 'Find...';
+        /**
+         * Accessible label for the search input. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Search options'
+         */
+        this.searchOptionsLabel = 'Search options';
+        /**
+         * Accessible label for the selected-items region. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Selected items'
+         */
+        this.selectedItemsLabel = 'Selected items';
+        /**
+         * Accessible label for the options listbox (falls back to this when `label` is unset). Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Options'
+         */
+        this.optionsLabel = 'Options';
+        /**
+         * Text shown when no options match the search. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'No options found'
+         */
+        this.noOptionsFoundLabel = 'No options found';
+        /**
+         * Visible label for the create-new-option row. Pass a translated string to localize it; `{text}` is interpolated.
+         * @defaultValue 'Add "{text}"'
+         */
+        this.createOptionLabel = 'Add "{text}"';
+        /**
+         * Accessible label for the create-new-option row. Pass a translated string to localize it; `{text}` is interpolated.
+         * @defaultValue 'Create new tag: {text}'
+         */
+        this.createOptionAriaLabel = 'Create new tag: {text}';
+        /**
+         * Screen-reader announcement when an item is removed. Pass a translated string to localize it; `{item}` is interpolated.
+         * @defaultValue '{item} removed'
+         */
+        this.itemRemovedLabel = '{item} removed';
+        /**
+         * Accessible label for the remove button on each selected-item pill. Pass a translated string to localize it; defaults to English.
+         * @defaultValue 'Remove'
+         */
+        this.pillRemoveLabel = 'Remove';
+        /**
+         * Singular form of the selected-count trigger text. Pass a translated string to localize it; `{count}` is interpolated.
+         * @defaultValue '{count} item'
+         */
+        this.selectedCountLabelOne = '{count} item';
+        /**
+         * Plural (and fallback) form of the selected-count trigger text — used for English and any locale whose selected plural category isn't supplied via `selectedCountLabels`. Pass a translated string to localize it; `{count}` is interpolated.
+         * @defaultValue '{count} items'
+         */
+        this.selectedCountLabelOther = '{count} items';
         /**
          * Whether to close the panel after an option is selected.
          * Defaults to `false` (panel stays open for multi-select).
@@ -14629,7 +14760,7 @@ class PdsMultiselect {
             this.pdsMultiselectChange.emit({ values: this.value, items: this.selectedItems });
             // Clear first so screen readers re-announce even when the same item is removed twice
             this.removalAnnouncement = '';
-            queueMicrotask(() => { this.removalAnnouncement = `${item.text} removed`; });
+            queueMicrotask(() => { this.removalAnnouncement = formatMessage(this.itemRemovedLabel, { item: item.text }); });
             this.isClosingViaSelection = true;
             if (this.isOpen) {
                 (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
@@ -15266,7 +15397,7 @@ class PdsMultiselect {
                 'pds-multiselect__option--selected': isSelected,
                 'pds-multiselect__option--create': isCreateOption,
                 'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
-            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? `Create new tag: ${option.text}` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small" }), hAsync("pds-text", null, "Add \"", option.text, "\""))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }))));
+            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small" }), hAsync("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }))));
     }
     renderSelectedItemsList() {
         if (this.hideSelectedItems || this.selectedItems.length === 0)
@@ -15280,7 +15411,7 @@ class PdsMultiselect {
         const valueArray = this.ensureValueArray();
         const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
         const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
-        return (hAsync("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, hAsync("div", { class: "pds-multiselect__search" }, hAsync("pds-icon", { name: "search", size: "small" }), hAsync("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": "Search options", "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), hAsync("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || 'Options', id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (hAsync("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (hAsync("slot", { name: "loading" })) : (hAsync("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (hAsync("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (hAsync("slot", { name: "empty" })) : (hAsync("span", null, "No options found")))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
+        return (hAsync("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, hAsync("div", { class: "pds-multiselect__search" }, hAsync("pds-icon", { name: "search", size: "small" }), hAsync("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), hAsync("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (hAsync("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (hAsync("slot", { name: "loading" })) : (hAsync("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (hAsync("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (hAsync("slot", { name: "empty" })) : (hAsync("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
             if (item.type === 'group') {
                 return (hAsync("li", { key: `group-${itemIndex}`, role: "group", "aria-label": item.group, class: "pds-multiselect__group" }, hAsync("span", { class: "pds-multiselect__group-header", "aria-hidden": "true" }, item.group), hAsync("ul", { class: "pds-multiselect__group-list", role: "presentation" }, item.options.map(({ option, index }) => this.renderOption(option, index, valueArray)))));
             }
@@ -15295,27 +15426,54 @@ class PdsMultiselect {
         const variant = this.disabled ? 'text' : 'tag';
         const visibleItems = this.selectedItems.slice(0, Math.max(1, this.maxInlinePills));
         const overflowCount = this.selectedItems.length - visibleItems.length;
-        return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--inline", "aria-label": "Selected items" }, visibleItems.map(item => (hAsync("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "sm", sentiment: "neutral", onPdsTagCloseClick: this.handlePillRemove(item) }, item.text))), overflowCount > 0 && (hAsync("span", { class: "pds-multiselect__pill-overflow" }, "+", overflowCount))));
+        return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--inline", "aria-label": this.selectedItemsLabel }, visibleItems.map(item => (hAsync("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "sm", sentiment: "neutral", "dismiss-label": this.pillRemoveLabel, onPdsTagCloseClick: this.handlePillRemove(item) }, item.text))), overflowCount > 0 && (hAsync("span", { class: "pds-multiselect__pill-overflow" }, "+", overflowCount))));
     }
     renderBelowPills() {
         if (this.selectedItems.length === 0)
             return null;
         const variant = this.disabled ? 'text' : 'tag';
-        return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--below", "aria-label": "Selected items" }, this.selectedItems.map(item => (hAsync("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "md", sentiment: "neutral", onPdsTagCloseClick: this.handlePillRemove(item) }, item.text)))));
+        return (hAsync("div", { class: "pds-multiselect__pill-list pds-multiselect__pill-list--below", "aria-label": this.selectedItemsLabel }, this.selectedItems.map(item => (hAsync("pds-chip", { key: String(item.id), "component-id": `${this.componentId}-pill-${item.id}`, variant: variant, size: "md", sentiment: "neutral", "dismiss-label": this.pillRemoveLabel, onPdsTagCloseClick: this.handlePillRemove(item) }, item.text)))));
     }
     getTriggerText() {
         const count = this.selectedItems.length;
         if (count === 0 || (this.selectedDisplay === 'pill' && this.pillPosition === 'below')) {
+            // Fall back to a non-empty string: the trigger's accessible name comes from
+            // this text, so an empty/undefined placeholder must never leave it nameless
+            // (WCAG 4.1.2). The prop is localizable; this last-resort default is not.
             return this.placeholder || 'Select...';
         }
-        return `${count} item${count === 1 ? '' : 's'}`;
+        return pluralize(this.el, count, this.resolveCountForms());
+    }
+    /**
+     * The `one`/`other` props are the ergonomic English defaults; `selectedCountLabels`
+     * (object or JSON-string attribute) layers full CLDR forms on top for locales
+     * that need `few`/`many`/`two`/`zero`. Malformed JSON degrades to the defaults.
+     */
+    resolveCountForms() {
+        const base = {
+            one: this.selectedCountLabelOne,
+            other: this.selectedCountLabelOther,
+        };
+        const extra = this.selectedCountLabels;
+        if (!extra)
+            return base;
+        if (typeof extra === 'string') {
+            try {
+                const parsed = JSON.parse(extra);
+                return parsed && typeof parsed === 'object' ? Object.assign(Object.assign({}, base), parsed) : base;
+            }
+            catch (_a) {
+                return base; // not valid JSON → fall back to the English-shape defaults
+            }
+        }
+        return Object.assign(Object.assign({}, base), extra);
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (hAsync(Host, { key: '086b6d2d199b35110e64ba1da3c12f1a81360581', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: 'c2faf217a97de056a9111a78e7077025e4ab5ee1', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: '0aff86a3a0054aef256bac5c0204dd914a9bd3ae', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (hAsync(Host, { key: '4a54a778522d0a1d2f45c32928e7a663f19c0189', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '3593eb4fa1a0ae575b1c0ed03f0763dcea04c9e6', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'f91a680ae3c3021bac6bd99368d3ef6ad6438898', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), hAsync("div", { key: '3b92119871dc32bb3c9a559be816bdece2fc30a6', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), hAsync("div", { key: 'de2899f19057b8cd19cf3467251d03c1b43b73f5', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
@@ -15331,7 +15489,7 @@ class PdsMultiselect {
             }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.errorMessage || this.helperMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, hAsync("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '07d6a6bf9ccc2fe8bfcf9502a1cd4b7abf5c5e6f', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: 'a94bb6f31805d31ec3cd5b5f2ca8b1984f4d41d1', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: '15afc6b9313e1fe22bd56b00eee1ebcf9e085c2e', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '452814577b14ca8f891b101903bd1a7a7e5d8bb1', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: 'd8ce787886e666303759cd2654c78b44269a40ff', style: { display: 'none' } }, hAsync("slot", { key: '8295376fb03b23d44c5baeca9bc967514e433e0f' })))));
+            } }, this.getTriggerText()), hAsync("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '973443f9eb29dcf7fb1bde3f9101ac02967a8fd9', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '568aab2b278abb7f4426d84ee926b4883375fb11', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'daddf192efd47df8c15267b9896913b926e02544', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'd0c72ab75a8e02e61c09e980ae817790804a776a', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '0453db2fca10b3573b1dd244875f90c856c8887b', style: { display: 'none' } }, hAsync("slot", { key: 'a612741afc9545e5e50c47d27c3c27c1d7cade3c' })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -15358,6 +15516,17 @@ class PdsMultiselect {
             "label": [1],
             "placeholder": [1],
             "searchPlaceholder": [1, "search-placeholder"],
+            "searchOptionsLabel": [1, "search-options-label"],
+            "selectedItemsLabel": [1, "selected-items-label"],
+            "optionsLabel": [1, "options-label"],
+            "noOptionsFoundLabel": [1, "no-options-found-label"],
+            "createOptionLabel": [1, "create-option-label"],
+            "createOptionAriaLabel": [1, "create-option-aria-label"],
+            "itemRemovedLabel": [1, "item-removed-label"],
+            "pillRemoveLabel": [1, "pill-remove-label"],
+            "selectedCountLabelOne": [1, "selected-count-label-one"],
+            "selectedCountLabelOther": [1, "selected-count-label-other"],
+            "selectedCountLabels": [1, "selected-count-labels"],
             "closePanelOnSelect": [4, "close-panel-on-select"],
             "name": [1],
             "value": [1040],
@@ -20918,6 +21087,12 @@ class PdsTextarea {
          * If true, the textarea has action content in the label area
          */
         this.hasAction = false;
+        /**
+         * Template for the character-counter's accessible label. Pass a translated
+         * string to localize it; `{current}` and `{max}` are interpolated.
+         * @defaultValue '{current} of {max} characters'
+         */
+        this.characterCountLabel = '{current} of {max} characters';
         this.onBlur = (ev) => {
             this.hasFocus = false;
             if (this.focusedValue !== this.value) {
@@ -21115,7 +21290,7 @@ class PdsTextarea {
             return null;
         }
         const currentLength = this.getValue().length;
-        return (hAsync("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label": `${currentLength} of ${this.maxLength} characters` }, currentLength, " / ", this.maxLength));
+        return (hAsync("div", { class: "pds-textarea__character-counter", ref: (el) => this.characterCounter = el, role: "status", "aria-live": "polite", "aria-label": formatMessage(this.characterCountLabel, { current: currentLength, max: this.maxLength }) }, currentLength, " / ", this.maxLength));
     }
     renderAction() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
@@ -21169,10 +21344,10 @@ class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (hAsync(Host, { key: '09726ef6454fe84a5c8d0ea25c6e8a7a6da128f9', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '6244104f11d26b25a908fbaf13a815988a3c33d9', class: "pds-textarea" }, this.label &&
-            hAsync("div", { key: '5dd7f6caedd7ebf5ecaacf8d111ec5e2426e84ae', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: 'd19f62cd28612423abf0d5696ff1cd88f39d32fe', htmlFor: this.componentId }, hAsync("span", { key: '37f4e9e34ae3205bafa5f1bc8574a98d3a90060d', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '4c3c8fadc5596630485ee1775f5d87d77c11d95b', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: 'a60be5f3d362cb9bcd2ecf5af16ffc467fc8322a', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            hAsync("p", { key: 'ae03337ef85ac2a3995e967fe671e0ad2c352710', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            hAsync("p", { key: 'a2bda9a477e7d2b81862833da43158a626d8cc6f', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '5ac785e8012aeb49dd0b1c5823233671531b0a7a', icon: danger, size: "small" }), this.errorMessage))));
+        return (hAsync(Host, { key: '838d12ba686fb041996c44522d3fd30e1b56c610', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: 'bd3eef138a5c8f2cd4e48c007561bb1b12f4e575', class: "pds-textarea" }, this.label &&
+            hAsync("div", { key: 'f83f23b17cd157d48bb5c0c5067ca5f611d73529', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '896b7b495ad6f7deb8d4738e623f0676f0a98c1f', htmlFor: this.componentId }, hAsync("span", { key: '02b06db969467f6c4e83e0f713bee0be76f8dfff', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: '15c5964576e73db36cee4a9ca868c28571250a27', class: "pds-textarea__field-wrapper" }, hAsync("textarea", Object.assign({ key: '74713a5d438fc01103ca99f0c77abd84b7d2d16a', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            hAsync("p", { key: 'e42f174f4153363ce745db264fd3a9ee46178a03', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            hAsync("p", { key: '44189515611ff9fa51d2815a7066626b6ba5df2c', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '64d275da09cdf1c2cc27d4c0a780dd414c265534', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -21209,6 +21384,7 @@ class PdsTextarea {
             "maxLength": [514, "max-length"],
             "highlight": [516],
             "value": [1025],
+            "characterCountLabel": [1, "character-count-label"],
             "hasFocus": [32],
             "hasAction": [32],
             "setFocus": [64]
@@ -21250,6 +21426,12 @@ 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.
          */
@@ -21339,13 +21521,13 @@ class PdsToast {
         return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
     }
     render() {
-        return (hAsync(Host, { key: '7768cbf398d4592b774734abdf5e9f1f4d4fb7e8', hidden: !this.isVisible }, hAsync("div", { key: 'c17b00c76bd42d1040b8ef08a354e10346a79aa4', class: {
+        return (hAsync(Host, { key: 'a1ec97158a6665aa25b58b1954b4b5c622590615', hidden: !this.isVisible }, hAsync("div", { key: 'd9b01164364c76512852a260cede50000b73a563', class: {
                 'pds-toast': true,
                 [`pds-toast--${this.type}`]: this.type !== 'default',
                 'pds-toast--animating-out': this.isAnimatingOut
-            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: 'cb7066fd49ae8674d5de80ecde21e63eecbcdf29', class: "pds-toast__message" }, hAsync("slot", { key: '5c08d8b5cc54e02bed2906c2d52b894301fdca5d' })), this.dismissible && (hAsync("button", { key: '4edd83a8521f76a2abddfe64caaac932962745ff', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
+            }, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: '1f581c7c29ea3fc795dfca061d3575c5a9895b3c', class: "pds-toast__message" }, hAsync("slot", { key: '645b31eae3be23de63ab2562234caf0be2510645' })), this.dismissible && (hAsync("button", { key: '44a62b304468c0fca0b8d490ad9c8b5932176ac9', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": "Dismiss message" }, hAsync("pds-icon", { key: 'c5cf65f889bfcd85e3fdab437539e7ee3f6e0465', name: "remove" }))))));
+            }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'fde63f279f696d9f02875cc1beee3542c97f0c7e', name: "remove" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -21363,6 +21545,7 @@ class PdsToast {
             "duration": [2],
             "icon": [1],
             "type": [1],
+            "dismissLabel": [1, "dismiss-label"],
             "isVisible": [32],
             "isAnimatingOut": [32],
             "dismiss": [64]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pine-ds/core",
-  "version": "3.27.0",
+  "version": "3.28.0",
   "type": "module",
   "license": "MIT",
   "description": "Base components for Pine Design System",
@@ -62,6 +62,7 @@
     "lint": "run-p lint.*",
     "lint.eslint": "eslint src",
     "lint.styles": "stylelint \"./src/**/*.*css\"",
+    "i18n.audit": "node lint-rules/i18n-audit.cjs",
     "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx}\"",
     "prestart": "npm run build",
     "start": "run-p start.*",
@@ -85,7 +86,7 @@
     "@babel/preset-env": "^7.22.10",
     "@chromatic-com/storybook": "^4.1.3",
     "@mdx-js/rollup": "^3.1.1",
-    "@pine-ds/doc-components": "^3.27.0",
+    "@pine-ds/doc-components": "^3.28.0",
     "@stencil-community/eslint-plugin": "^0.8.0",
     "@stencil/react-output-target": "^0.5.3",
     "@stencil/sass": "^3.2.0",

package/dist/pine-core/p-190ba1df.entry.js

@@ -1 +0,0 @@
-import{r as i,c as e,h as t,H as s,a as o}from"./p-CaRgVPt7.js";import{a as n,c as r,o as l,f as a,s as d,b as p}from"./p-DDtwbwIl.js";import{d as h}from"./p-tJa4KYNO.js";import{i as c,a as u,m}from"./p-C3xDZBme.js";import{e as b,b as g}from"./p-D4ys0pep.js";const v=class{constructor(t){i(this,t),this.pdsMultiselectChange=e(this,"pdsMultiselectChange"),this.pdsMultiselectSearch=e(this,"pdsMultiselectSearch"),this.pdsMultiselectLoadOptions=e(this,"pdsMultiselectLoadOptions"),this.pdsMultiselectCreate=e(this,"pdsMultiselectCreate"),this.pdsMultiselectDismiss=e(this,"pdsMultiselectDismiss"),this.placeholder="Select...",this.searchPlaceholder="Find...",this.closePanelOnSelect=!1,this.value=[],this.disabled=!1,this.asyncMethod="GET",this.debounce=300,this.fetchTimeout=3e4,this.maxHeight="300px",this.triggerWidth="100%",this.minWidth="250px",this.hideLabel=!1,this.hideSelectedItems=!1,this.selectedDisplay="count",this.pillPosition="inline",this.maxInlinePills=3,this.required=!1,this.loading=!1,this.csrfHeaderName="X-CSRF-Token",this.isOpen=!1,this.searchQuery="",this.highlightedIndex=-1,this.internalOptions=[],this.selectedItems=[],this.currentPage=1,this.hasMore=!1,this.creating=!1,this.removalAnnouncement="",this.isOpening=!1,this.isClosingViaSelection=!1,this.initialAsyncFetchTriggered=!1,this.pendingUnresolvedFetch=!1,this.handleTriggerClick=i=>{if(!this.disabled){if(i&&"pill"===this.selectedDisplay&&"inline"===this.pillPosition&&i.composedPath().some((i=>{var e;return"pds-chip"===(null===(e=i.tagName)||void 0===e?void 0:e.toLowerCase())})))return;this.isOpen?this.closeDropdown():this.openDropdown()}},this.handleTriggerKeyDown=i=>{if(i.target===this.triggerEl)switch(i.key){case"ArrowDown":case"ArrowUp":case"Enter":case" ":i.preventDefault(),this.isOpen||this.openDropdown()}},this.handleSearchInputChange=i=>{this.searchQuery=i.target.value,this.highlightedIndex=-1,this.pdsMultiselectSearch.emit({query:this.searchQuery}),this.asyncUrl&&this.debouncedFetchAsyncOptions(this.searchQuery,1)},this.handleSearchInputKeyDown=i=>{var e,t,s;const o=this.getFilteredOptions();switch(i.key){case"ArrowDown":{i.preventDefault();let t=this.highlightedIndex+1;for(;t<o.length&&(null===(e=o[t])||void 0===e?void 0:e.disabled);)t++;t<o.length&&(this.highlightedIndex=t,this.scrollOptionIntoView());break}case"ArrowUp":{i.preventDefault();let e=Math.max(this.highlightedIndex-1,0);for(;e>0&&(null===(t=o[e])||void 0===t?void 0:t.disabled);)e--;(null===(s=o[e])||void 0===s?void 0:s.disabled)||(this.highlightedIndex=e,this.scrollOptionIntoView());break}case"Enter":if(i.preventDefault(),this.highlightedIndex>=0){const i=o[this.highlightedIndex];i&&this.selectOption(i)}break;case"Tab":this.closeDropdown()}},this.handleContainerFocusOut=()=>{setTimeout((()=>{var i;if(!this.isOpen||this.isOpening||this.isClosingViaSelection)return;const e=document.activeElement;(null===(i=this.el.shadowRoot)||void 0===i?void 0:i.contains(e))||e===this.el||(this.pdsMultiselectDismiss.emit(),this.closeDropdown())}),0)},this.handleOptionMouseDown=i=>e=>{e.preventDefault(),this.toggleOption(i)},this.handleOptionMouseEnter=(i,e)=>()=>{e.disabled||(this.highlightedIndex=i)},this.handleScroll=i=>{if(!this.asyncUrl||!this.hasMore||this.loading)return;const e=i.target;e.scrollHeight-e.scrollTop-e.clientHeight<50&&(this.pdsMultiselectLoadOptions.emit({query:this.searchQuery,page:this.currentPage+1}),this.debouncedFetchAsyncOptions(this.searchQuery,this.currentPage+1))},this.handlePillRemove=i=>()=>{var e,t;if(this.disabled)return;const s=String(i.id);this.value=this.value.filter((i=>i!==s)),this.syncSelectedItems(),this.pdsMultiselectChange.emit({values:this.value,items:this.selectedItems}),this.removalAnnouncement="",queueMicrotask((()=>{this.removalAnnouncement=`${i.text} removed`})),this.isClosingViaSelection=!0,this.isOpen?null===(e=this.searchInputEl)||void 0===e||e.focus():null===(t=this.triggerEl)||void 0===t||t.focus(),setTimeout((()=>{this.isClosingViaSelection=!1}),0)}}connectedCallback(){this.el.attachInternals&&!this.internals&&(this.internals=this.el.attachInternals())}componentWillLoad(){this.originalSearchEmitter=this.pdsMultiselectSearch,this.syncSelectedItems()}componentDidLoad(){this.setupDebounce(),this.setupMutationObserver(),this.setupSlotChangeListener(),this.updateFormValue(),requestAnimationFrame((()=>{this.updateOptionsFromSlot(),this.syncSelectedItems()})),this.asyncUrl&&this.ensureValueArray().length>0&&(this.initialAsyncFetchTriggered=!0,this.fetchOptions("",1))}setupSlotChangeListener(){var i;const e=null===(i=this.el.shadowRoot)||void 0===i?void 0:i.querySelector("slot:not([name])");e&&(e.addEventListener("slotchange",(()=>{this.updateOptionsFromSlot(),this.syncSelectedItems()})),this.updateOptionsFromSlot())}disconnectedCallback(){var i,e;null===(i=this.observer)||void 0===i||i.disconnect(),null===(e=this.cleanupAutoUpdate)||void 0===e||e.call(this),this.clearAsyncFetchState()}setupDebounce(){const{pdsMultiselectSearch:i,debounce:e,originalSearchEmitter:t}=this;this.pdsMultiselectSearch=void 0===e?null!=t?t:i:h(i,e)}valueChanged(i){if("string"==typeof i)try{const e=JSON.parse(i);if(Array.isArray(e))return void(this.value=e)}catch(e){return void(this.value=i?[i]:[])}if(this.syncSelectedItems(),this.updateFormValue(),this.asyncUrl){const i=this.ensureValueArray();i.length>0&&this.selectedItems.length<i.length&&(this.loading?this.pendingUnresolvedFetch=!0:this.fetchOptions("",1))}}optionsChanged(){this.options&&(this.internalOptions=[...this.options])}internalOptionsChanged(){this.syncSelectedItems()}async setFocus(){var i;null===(i=this.triggerEl)||void 0===i||i.focus()}async clear(){const i=this.value.length>0||""!==this.searchQuery;this.value=[],this.searchQuery="",this.syncSelectedItems(),this.updateFormValue(),i&&this.pdsMultiselectChange.emit({values:[],items:[]})}handleWindowKeyDown(i){var e;this.isOpen&&"Escape"===i.key&&(i.preventDefault(),this.pdsMultiselectDismiss.emit(),this.closeDropdown(),null===(e=this.triggerEl)||void 0===e||e.focus())}setupMutationObserver(){this.observer=new MutationObserver((()=>{this.updateOptionsFromSlot()})),this.observer.observe(this.el,{childList:!0,subtree:!0})}updateOptionsFromSlot(){var i;const e=null===(i=this.el.shadowRoot)||void 0===i?void 0:i.querySelector("slot:not([name])");if(!e)return;const t=[];e.assignedElements({flatten:!0}).forEach((i=>{var e;if("OPTGROUP"===i.tagName){const e=i.label,s=i.disabled;i.querySelectorAll("option").forEach((i=>{var o;const n={id:i.value,text:(null===(o=i.textContent)||void 0===o?void 0:o.trim())||i.value,disabled:i.disabled||s||void 0};e&&(n.group=e),t.push(n)}))}else if("OPTION"===i.tagName){const s=i;t.push({id:s.value,text:(null===(e=s.textContent)||void 0===e?void 0:e.trim())||s.value,disabled:s.disabled||void 0})}})),t.length>0&&!this.asyncUrl&&!this.options&&(this.internalOptions=t)}clearAsyncFetchState(){var i;void 0!==this.fetchDebounceTimer&&(window.clearTimeout(this.fetchDebounceTimer),this.fetchDebounceTimer=void 0),void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),null===(i=this.abortController)||void 0===i||i.abort(),this.abortController=void 0}debouncedFetchAsyncOptions(i,e=1){var t;if(!this.asyncUrl)return;void 0!==this.fetchDebounceTimer&&window.clearTimeout(this.fetchDebounceTimer);const s=Math.max(0,null!==(t=this.debounce)&&void 0!==t?t:0);this.fetchDebounceTimer=window.setTimeout((()=>{this.fetchDebounceTimer=void 0,this.fetchOptions(i,e)}),s)}syncSelectedItems(){const i=this.ensureValueArray(),e=this.getAllOptions(),t=[],s=new Map(this.selectedItems.map((i=>[String(i.id),i])));i.forEach((i=>{const o=e.find((e=>String(e.id)===String(i)));o?t.push(o):s.has(String(i))&&t.push(s.get(String(i)))})),this.selectedItems=t}ensureValueArray(){if("string"==typeof this.value)try{const i=JSON.parse(this.value);if(Array.isArray(i))return this.value=i,i}catch(i){const e=this.value;return this.value=e?[e]:[],this.value}return Array.isArray(this.value)?this.value:[]}getAllOptions(){return this.options||this.internalOptions}getFilteredOptions(){const i=this.getAllOptions(),e=this.searchQuery.toLowerCase(),t=i.filter((i=>!e||i.text.toLowerCase().includes(e)));return this.createUrl&&this.searchQuery.trim()&&0===t.length?[{id:"__create__",text:this.searchQuery.trim(),isCreateOption:!0}]:t}updateFormValue(){var i;if(!c()&&(null===(i=this.internals)||void 0===i?void 0:i.setFormValue)){const i=this.ensureValueArray(),e=new FormData;i.forEach((i=>{this.name&&e.append(this.name,i)})),this.internals.setFormValue(e),this.required&&0===i.length?this.internals.setValidity({valueMissing:!0},"Please select at least one option.",this.triggerEl):this.internals.setValidity({})}}getCsrfToken(){if(this.csrfToken)return this.csrfToken;const i=document.querySelector('meta[name="csrf-token"]');return(null==i?void 0:i.content)||null}async fetchOptions(i,e=1){var t;if(this.asyncUrl){null===(t=this.abortController)||void 0===t||t.abort(),void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),this.abortController=new AbortController,this.loading=!0,this.fetchTimeoutTimer=window.setTimeout((()=>{var i;null===(i=this.abortController)||void 0===i||i.abort(),this.fetchTimeoutTimer=void 0}),this.fetchTimeout);try{let t;try{t=new URL(this.asyncUrl,window.location.origin)}catch(i){throw new TypeError(`Invalid asyncUrl: ${this.asyncUrl}`)}"GET"===this.asyncMethod&&(t.searchParams.set("search",i),t.searchParams.set("page",String(e)));const s=this.getCsrfToken(),o={"Content-Type":"application/json",Accept:"application/json"};s&&(o[this.csrfHeaderName||"X-CSRF-Token"]=s);const n=await fetch(t.toString(),Object.assign({method:this.asyncMethod,signal:this.abortController.signal,headers:o},"POST"===this.asyncMethod&&{body:JSON.stringify({search:i,page:e})}));if(void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),!n.ok)throw new Error("Failed to fetch options");const r=await n.json(),l=r.results.map((i=>this.formatResult?this.formatResult(i):"object"==typeof i&&null!==i?Object.assign({id:i.id,text:i.text},i):{id:String(i),text:String(i)}));this.internalOptions=1===e?l:[...this.internalOptions,...l],this.hasMore=!!r.totalCount&&this.internalOptions.length<r.totalCount,this.currentPage=e}catch(i){void 0!==this.fetchTimeoutTimer&&(window.clearTimeout(this.fetchTimeoutTimer),this.fetchTimeoutTimer=void 0),"AbortError"!==i.name&&console.error("PdsMultiselect: Failed to fetch options",i)}finally{if(this.loading=!1,this.pendingUnresolvedFetch){this.pendingUnresolvedFetch=!1;const i=this.ensureValueArray();i.length>0&&this.selectedItems.length<i.length&&this.fetchOptions("",1)}}}}async createOption(i){if(this.createUrl&&i.trim()&&!this.creating){this.creating=!0;try{const e=new URL(this.createUrl,window.location.origin),t=this.getCsrfToken(),s={"Content-Type":"application/json",Accept:"application/json"};t&&(s[this.csrfHeaderName||"X-CSRF-Token"]=t);const o=await fetch(e.toString(),{method:"POST",headers:s,body:JSON.stringify({text:i.trim()})});if(!o.ok)throw new Error("Failed to create option");const n=await o.json(),r=Object.assign({id:n.id,text:n.text},n);this.internalOptions=[...this.internalOptions,r],this.value=[...this.value,String(r.id)],this.syncSelectedItems(),this.pdsMultiselectCreate.emit({query:i.trim(),newOption:r}),this.pdsMultiselectChange.emit({values:this.value,items:this.selectedItems}),this.searchQuery="",this.highlightedIndex=-1,requestAnimationFrame((()=>{var i;null===(i=this.searchInputEl)||void 0===i||i.focus()}))}catch(i){console.error("PdsMultiselect: Failed to create option",i)}finally{this.creating=!1}}}openDropdown(){this.disabled||(this.isOpening=!0,this.isOpen=!0,this.highlightedIndex=-1,this.asyncUrl&&0===this.internalOptions.length&&!this.initialAsyncFetchTriggered&&this.debouncedFetchAsyncOptions(this.searchQuery,1),this.initialAsyncFetchTriggered=!1,requestAnimationFrame((()=>{var i;this.positionDropdown(),null===(i=this.searchInputEl)||void 0===i||i.focus(),setTimeout((()=>{this.isOpening=!1}),50)})))}closeDropdown(){this.isOpen=!1,this.highlightedIndex=-1,this.searchQuery="",this.isClosingViaSelection&&setTimeout((()=>{this.isClosingViaSelection=!1}),0),this.cleanupAutoUpdate&&(this.cleanupAutoUpdate(),this.cleanupAutoUpdate=void 0)}positionDropdown(){if(!this.containerEl||!this.panelEl)return;const i=this.pillInlineTriggerEl||this.triggerEl||this.containerEl,{minWidth:e,panelWidth:t}=this,s=()=>{r(i,this.panelEl,{placement:"bottom-start",strategy:"absolute",middleware:[l(12),a(),d({padding:8}),p({apply:({rects:i,elements:s})=>{Object.assign(s.floating.style,{width:null!=t?t:`${i.reference.width}px`,minWidth:e})}})]}).then((({x:i,y:e})=>{this.panelEl&&(this.panelEl.style.left=`${i}px`,this.panelEl.style.top=`${e}px`)}))};s();const o=n(i,this.panelEl,s);this.cleanupAutoUpdate=()=>{o(),this.clearAsyncFetchState()}}scrollOptionIntoView(){requestAnimationFrame((()=>{var i;const e=null===(i=this.listboxEl)||void 0===i?void 0:i.querySelector(`[data-index="${this.highlightedIndex}"]`);null==e||e.scrollIntoView({block:"nearest",behavior:"smooth"})}))}toggleOption(i){var e,t;if(i.disabled)return;if(i.isCreateOption)return void(this.creating||this.createOption(this.searchQuery));const s=String(i.id);if(this.value.includes(s))this.value=this.value.filter((i=>i!==s));else{if(this.maxSelections&&this.value.length>=this.maxSelections)return;this.value=[...this.value,s]}this.syncSelectedItems(),this.pdsMultiselectChange.emit({values:this.value,items:this.selectedItems}),this.closePanelOnSelect?(this.isClosingViaSelection=!0,this.closeDropdown(),null===(e=this.triggerEl)||void 0===e||e.focus()):null===(t=this.searchInputEl)||void 0===t||t.focus()}selectOption(i){this.toggleOption(i)}getGroupedRenderItems(i){const e=[];let t=null;return i.forEach(((i,s)=>{const o=i.group;void 0!==o?(t&&t.group===o||(t={type:"group",group:o,options:[]},e.push(t)),t.options.push({option:i,index:s})):(t=null,e.push({type:"option",option:i,index:s}))})),e}renderOption(i,e,s){const o=s.includes(String(i.id)),n=i.isCreateOption,r=i.disabled,l=e===this.highlightedIndex&&!n,a=`${this.componentId}-option-${e}`,d=n&&this.creating;return t("li",{key:String(i.id),id:a,class:{"pds-multiselect__option":!0,"pds-multiselect__option--highlighted":l,"pds-multiselect__option--selected":o,"pds-multiselect__option--create":n,"pds-multiselect__option--disabled":r||d},role:"option","aria-selected":o?"true":"false","aria-disabled":r||d?"true":void 0,"aria-label":n?`Create new tag: ${i.text}`:void 0,"data-index":e,onMouseDown:this.handleOptionMouseDown(i),onMouseEnter:this.handleOptionMouseEnter(e,i)},n?t("pds-box",{class:"pds-multiselect__create-option","align-items":"center",gap:"xs"},t("pds-icon",{name:"add",size:"small"}),t("pds-text",null,'Add "',i.text,'"')):t("pds-checkbox",{componentId:`${this.componentId}-checkbox-${e}`,checked:o,label:i.text,disabled:r,style:{pointerEvents:"none"}}))}renderSelectedItemsList(){return this.hideSelectedItems||0===this.selectedItems.length?null:t("div",{class:"pds-multiselect__selected-section"},t("ul",{class:"pds-multiselect__selected-list",role:"list"},this.selectedItems.map((i=>t("li",{key:String(i.id),class:"pds-multiselect__selected-item"},i.text)))))}renderDropdown(){if(!this.isOpen)return null;const i=this.getFilteredOptions(),e=this.ensureValueArray(),s=!!this.el.querySelector('[slot="empty"]'),o=!!this.el.querySelector('[slot="loading"]');return t("div",{class:"pds-multiselect__panel",ref:i=>this.panelEl=i,style:{minWidth:this.minWidth}},t("div",{class:"pds-multiselect__search"},t("pds-icon",{name:"search",size:"small"}),t("input",{ref:i=>this.searchInputEl=i,type:"text",class:"pds-multiselect__search-input",placeholder:this.searchPlaceholder,value:this.searchQuery,"aria-label":"Search options","aria-controls":`${this.componentId}-listbox`,"aria-activedescendant":this.highlightedIndex>=0?`${this.componentId}-option-${this.highlightedIndex}`:void 0,role:"combobox","aria-haspopup":"listbox","aria-expanded":"true","aria-autocomplete":"list",autocomplete:"off",onInput:this.handleSearchInputChange,onKeyDown:this.handleSearchInputKeyDown})),this.renderSelectedItemsList(),t("ul",{class:"pds-multiselect__listbox",role:"listbox","aria-multiselectable":"true","aria-label":this.label||"Options",id:`${this.componentId}-listbox`,ref:i=>this.listboxEl=i,style:{maxHeight:this.maxHeight},onScroll:this.handleScroll},this.loading&&t("li",{class:"pds-multiselect__loading",role:"presentation"},o?t("slot",{name:"loading"}):t("pds-loader",{size:"small"})),!this.loading&&0===i.length&&t("li",{class:"pds-multiselect__empty",role:"presentation"},s?t("slot",{name:"empty"}):t("span",null,"No options found")),this.getGroupedRenderItems(i).map(((i,s)=>"group"===i.type?t("li",{key:`group-${s}`,role:"group","aria-label":i.group,class:"pds-multiselect__group"},t("span",{class:"pds-multiselect__group-header","aria-hidden":"true"},i.group),t("ul",{class:"pds-multiselect__group-list",role:"presentation"},i.options.map((({option:i,index:t})=>this.renderOption(i,t,e))))):this.renderOption(i.option,i.index,e))),this.hasMore&&!this.loading&&t("li",{class:"pds-multiselect__load-more",role:"presentation"},t("pds-loader",{size:"small"}))))}renderInlinePills(){if(!(this.selectedItems.length>0))return t("span",{class:"pds-multiselect__trigger-text pds-multiselect__trigger-text--placeholder"},this.placeholder||"Select...");const i=this.disabled?"text":"tag",e=this.selectedItems.slice(0,Math.max(1,this.maxInlinePills)),s=this.selectedItems.length-e.length;return t("div",{class:"pds-multiselect__pill-list pds-multiselect__pill-list--inline","aria-label":"Selected items"},e.map((e=>t("pds-chip",{key:String(e.id),"component-id":`${this.componentId}-pill-${e.id}`,variant:i,size:"sm",sentiment:"neutral",onPdsTagCloseClick:this.handlePillRemove(e)},e.text))),s>0&&t("span",{class:"pds-multiselect__pill-overflow"},"+",s))}renderBelowPills(){if(0===this.selectedItems.length)return null;const i=this.disabled?"text":"tag";return t("div",{class:"pds-multiselect__pill-list pds-multiselect__pill-list--below","aria-label":"Selected items"},this.selectedItems.map((e=>t("pds-chip",{key:String(e.id),"component-id":`${this.componentId}-pill-${e.id}`,variant:i,size:"md",sentiment:"neutral",onPdsTagCloseClick:this.handlePillRemove(e)},e.text))))}getTriggerText(){const i=this.selectedItems.length;return 0===i||"pill"===this.selectedDisplay&&"below"===this.pillPosition?this.placeholder||"Select...":`${i} item${1===i?"":"s"}`}render(){const i=this.selectedItems.length>0;return t(s,{key:"086b6d2d199b35110e64ba1da3c12f1a81360581","aria-disabled":this.disabled?"true":null},t("div",{key:"c2faf217a97de056a9111a78e7077025e4ab5ee1",class:"pds-multiselect",onFocusout:this.handleContainerFocusOut},this.label&&t("label",{key:"0aff86a3a0054aef256bac5c0204dd914a9bd3ae",id:`${this.componentId}-label`,htmlFor:this.componentId,class:{"pds-multiselect__label":!0,"visually-hidden":this.hideLabel}},this.label),t("div",{key:"3b92119871dc32bb3c9a559be816bdece2fc30a6",class:"pds-multiselect__wrapper",ref:i=>this.containerEl=i,style:{width:this.triggerWidth}},"pill"===this.selectedDisplay&&"inline"===this.pillPosition?t("div",{ref:i=>this.pillInlineTriggerEl=i||void 0,part:"trigger",class:{"pds-multiselect__trigger":!0,"pds-multiselect__trigger--open":this.isOpen,"pds-multiselect__trigger--disabled":this.disabled,"pds-multiselect__trigger--invalid":this.invalid||!!this.errorMessage,"pds-multiselect__trigger--has-value":i,"pds-multiselect__trigger--pill-inline":!0},onClick:this.handleTriggerClick},this.renderInlinePills(),t("button",{ref:i=>this.triggerEl=i,type:"button",id:this.componentId,part:"pill-toggle",class:"pds-multiselect__pill-toggle",disabled:this.disabled,"aria-expanded":this.isOpen?"true":"false","aria-haspopup":"listbox","aria-labelledby":this.label?`${this.componentId}-label`:void 0,"aria-required":this.required?"true":void 0,"aria-describedby":u(this.componentId,this.invalid||!!this.errorMessage,this.errorMessage||this.helperMessage),"aria-invalid":this.invalid||this.errorMessage?"true":void 0,onKeyDown:this.handleTriggerKeyDown},t("pds-icon",{class:"pds-multiselect__icon",icon:b}))):t("button",{ref:i=>this.triggerEl=i,type:"button",part:"trigger",class:{"pds-multiselect__trigger":!0,"pds-multiselect__trigger--open":this.isOpen,"pds-multiselect__trigger--disabled":this.disabled,"pds-multiselect__trigger--invalid":this.invalid||!!this.errorMessage,"pds-multiselect__trigger--has-value":i},id:this.componentId,disabled:this.disabled,"aria-required":this.required?"true":void 0,"aria-expanded":this.isOpen?"true":"false","aria-haspopup":"listbox","aria-describedby":u(this.componentId,this.invalid||!!this.errorMessage,this.errorMessage||this.helperMessage),"aria-invalid":this.invalid||this.errorMessage?"true":void 0,onClick:this.handleTriggerClick,onKeyDown:this.handleTriggerKeyDown},t("span",{class:{"pds-multiselect__trigger-text":!0,"pds-multiselect__trigger-text--placeholder":!i||"pill"===this.selectedDisplay&&"below"===this.pillPosition}},this.getTriggerText()),t("pds-icon",{class:"pds-multiselect__icon",icon:b})),this.renderDropdown()),"pill"===this.selectedDisplay&&"below"===this.pillPosition&&this.renderBelowPills(),t("span",{key:"07d6a6bf9ccc2fe8bfcf9502a1cd4b7abf5c5e6f",class:"visually-hidden","aria-live":"polite","aria-atomic":"true"},this.removalAnnouncement),this.helperMessage&&!(this.errorMessage&&this.errorMessage.length>0)&&t("p",{key:"a94bb6f31805d31ec3cd5b5f2ca8b1984f4d41d1",class:"pds-multiselect__helper",id:m(this.componentId,"helper")},this.helperMessage),this.errorMessage&&t("p",{key:"15afc6b9313e1fe22bd56b00eee1ebcf9e085c2e",class:"pds-multiselect__error",id:m(this.componentId,"error")},t("pds-icon",{key:"452814577b14ca8f891b101903bd1a7a7e5d8bb1",icon:g,size:"small"}),this.errorMessage),t("div",{key:"d8ce787886e666303759cd2654c78b44269a40ff",style:{display:"none"}},t("slot",{key:"8295376fb03b23d44c5baeca9bc967514e433e0f"}))))}static get formAssociated(){return!0}get el(){return o(this)}static get watchers(){return{debounce:[{setupDebounce:0}],value:[{valueChanged:0}],options:[{optionsChanged:0}],internalOptions:[{internalOptionsChanged:0}]}}};v.style=":host{display:block}:host([aria-disabled=true]) .pds-multiselect__trigger{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}:host([aria-disabled=true]) .pds-multiselect__icon{color:var(--pine-color-text-disabled)}.pds-multiselect{position:relative}.pds-multiselect__label{color:var(--pine-color-text-label);display:block;font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing);-webkit-margin-after:var(--pine-dimension-2xs);margin-block-end:var(--pine-dimension-2xs)}.pds-multiselect__wrapper{position:relative}.pds-multiselect__trigger{-ms-flex-align:center;align-items:center;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-125);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);-ms-flex-pack:justify;justify-content:space-between;letter-spacing:var(--pine-letter-spacing);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-xs) var(--pine-dimension-sm);position:relative;text-align:start;-webkit-transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease;transition:border-color var(--pine-motion-duration-base) ease, box-shadow var(--pine-motion-duration-base) ease, -webkit-box-shadow var(--pine-motion-duration-base) ease;width:100%}.pds-multiselect__trigger:hover:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-hover)}.pds-multiselect__trigger:focus:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid{background-color:var(--pine-color-red-050);border-color:var(--pine-color-border-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--invalid:focus{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__trigger.pds-multiselect__trigger--disabled{background:var(--pine-color-background-container-disabled);border-color:var(--pine-color-border-disabled);color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-multiselect__trigger-text{color:var(--pine-color-text-strong);-ms-flex:1;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__trigger-text.pds-multiselect__trigger-text--placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__trigger--disabled .pds-multiselect__trigger-text{color:var(--pine-color-text-disabled)}.pds-multiselect__icon{color:var(--pine-color-icon);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__pill-list{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs)}.pds-multiselect__pill-list--inline{-ms-flex:1;flex:1;min-width:0}.pds-multiselect__pill-list--below{-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs)}.pds-multiselect__pill-overflow{color:var(--pine-color-text-muted);font:var(--pine-typography-body-sm-medium);white-space:nowrap}.pds-multiselect__trigger--pill-inline{-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-2xs);min-height:var(--pine-dimension-450);padding:var(--pine-dimension-2xs) var(--pine-dimension-sm)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--open{border-color:var(--pine-color-border-active)}.pds-multiselect__trigger--pill-inline:focus-within:not(.pds-multiselect__trigger--disabled){border-color:var(--pine-color-border-active);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-multiselect__trigger--pill-inline.pds-multiselect__trigger--invalid:focus-within{outline-color:var(--pine-color-focus-ring-danger)}.pds-multiselect__pill-toggle{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border-width:0;cursor:pointer;display:-ms-flexbox;display:flex;padding:0}.pds-multiselect__pill-toggle:focus{outline:3px solid transparent}.pds-multiselect__trigger--disabled .pds-multiselect__pill-toggle{cursor:not-allowed;pointer-events:none}.pds-multiselect__panel{background:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-125);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:absolute;z-index:var(--pine-z-index-raised)}.pds-multiselect__search{-ms-flex-align:center;align-items:center;-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-multiselect__search pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__search-input{background:transparent;border:var(--pine-dimension-none);color:var(--pine-color-text-strong);-ms-flex:1;flex:1;font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);min-width:var(--pine-dimension-none);outline:none}.pds-multiselect__search-input::-webkit-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-moz-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input:-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::-ms-input-placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__search-input::placeholder{color:var(--pine-color-text-placeholder)}.pds-multiselect__selected-section{-webkit-border-after:var(--pine-border);border-block-end:var(--pine-border);border-block-end-color:var(--pine-color-border-subtle);padding:var(--pine-dimension-xs)}.pds-multiselect__selected-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__selected-item{color:var(--pine-color-text-strong);font:var(--pine-typography-body);letter-spacing:var(--pine-letter-spacing);overflow:hidden;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);text-overflow:ellipsis;white-space:nowrap}.pds-multiselect__listbox{background:transparent;border:var(--pine-dimension-none);-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none;margin:var(--pine-dimension-none);overflow-y:auto;padding:var(--pine-dimension-xs)}.pds-multiselect__group-header{color:var(--pine-color-text-muted);display:block;font:var(--pine-typography-body-sm-medium);letter-spacing:var(--pine-letter-spacing);padding:var(--pine-dimension-sm) var(--pine-dimension-xs) var(--pine-dimension-2xs);text-transform:uppercase}.pds-multiselect__listbox>li:first-child>.pds-multiselect__group-header{-webkit-padding-before:var(--pine-dimension-xs);padding-block-start:var(--pine-dimension-xs)}.pds-multiselect__group-list{list-style:none;margin:var(--pine-dimension-none);padding:var(--pine-dimension-none)}.pds-multiselect__option{-ms-flex-align:center;align-items:center;background:transparent;border-radius:var(--pine-dimension-xs);cursor:pointer;display:-ms-flexbox;display:flex;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs);-webkit-transition:background 0.15s;transition:background 0.15s}.pds-multiselect__option pds-checkbox{pointer-events:none;width:100%}.pds-multiselect__option:hover:not(.pds-multiselect__option--disabled),.pds-multiselect__option.pds-multiselect__option--highlighted:not(.pds-multiselect__option--disabled){background:var(--pine-color-background-muted)}.pds-multiselect__option.pds-multiselect__option--disabled{cursor:not-allowed;opacity:0.5}.pds-multiselect__option:focus-visible{outline:var(--pine-dimension-none)}.pds-multiselect__create-option{color:var(--pine-color-text-strong);width:100%}.pds-multiselect__create-option pds-icon{color:var(--pine-color-text-muted);-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none)}.pds-multiselect__empty,.pds-multiselect__loading{-ms-flex-align:center;align-items:center;color:var(--pine-color-text-muted);display:-ms-flexbox;display:flex;font:var(--pine-typography-body);-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-sm)}.pds-multiselect__load-more{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:var(--pine-dimension-xs)}.pds-multiselect__helper{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error{-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text-message-danger);display:-ms-flexbox;display:flex;font:var(--pine-typography-body-sm);gap:var(--pine-dimension-2xs);-webkit-margin-before:var(--pine-dimension-2xs);margin-block-start:var(--pine-dimension-2xs);-webkit-margin-start:var(--pine-dimension-none);margin-inline-start:var(--pine-dimension-none)}.pds-multiselect__error pds-icon{-ms-flex-negative:var(--pine-dimension-none);flex-shrink:var(--pine-dimension-none);-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}.visually-hidden{border:var(--pine-dimension-none);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:var(--pine-dimension-none);position:absolute;white-space:nowrap;width:1px}";export{v as pds_multiselect}