@pine-ds/core 3.27.0 → 3.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (79) hide show
  1. package/components/i18n-format.js +1 -0
  2. package/components/pds-alert.js +1 -1
  3. package/components/pds-avatar.js +1 -1
  4. package/components/pds-chip2.js +1 -1
  5. package/components/pds-multiselect.js +1 -1
  6. package/components/pds-textarea.js +1 -1
  7. package/components/pds-toast.js +1 -1
  8. package/dist/cjs/i18n-format-CrpIhahc.js +64 -0
  9. package/dist/cjs/loader.cjs.js +1 -1
  10. package/dist/cjs/pds-alert.cjs.entry.js +7 -1
  11. package/dist/cjs/pds-avatar.cjs.entry.js +8 -2
  12. package/dist/cjs/pds-chip.cjs.entry.js +8 -3
  13. package/dist/cjs/pds-multiselect.cjs.entry.js +91 -12
  14. package/dist/cjs/pds-textarea.cjs.entry.js +12 -5
  15. package/dist/cjs/pds-toast.cjs.entry.js +9 -3
  16. package/dist/cjs/pine-core.cjs.js +1 -1
  17. package/dist/collection/components/pds-alert/pds-alert.js +30 -1
  18. package/dist/collection/components/pds-avatar/pds-avatar.js +31 -2
  19. package/dist/collection/components/pds-chip/pds-chip.js +31 -3
  20. package/dist/collection/components/pds-multiselect/pds-multiselect.js +358 -17
  21. package/dist/collection/components/pds-textarea/pds-textarea.js +35 -5
  22. package/dist/collection/components/pds-toast/pds-toast.js +32 -3
  23. package/dist/collection/i18n/i18n-format.js +59 -0
  24. package/dist/collection/i18n/index.js +1 -0
  25. package/dist/docs.json +505 -6
  26. package/dist/esm/i18n-format-BKsJZTyn.js +61 -0
  27. package/dist/esm/loader.js +1 -1
  28. package/dist/esm/pds-alert.entry.js +7 -1
  29. package/dist/esm/pds-avatar.entry.js +8 -2
  30. package/dist/esm/pds-chip.entry.js +8 -3
  31. package/dist/esm/pds-multiselect.entry.js +91 -12
  32. package/dist/esm/pds-textarea.entry.js +12 -5
  33. package/dist/esm/pds-toast.entry.js +9 -3
  34. package/dist/esm/pine-core.js +1 -1
  35. package/dist/esm-es5/i18n-format-BKsJZTyn.js +1 -0
  36. package/dist/esm-es5/loader.js +1 -1
  37. package/dist/esm-es5/pds-alert.entry.js +1 -1
  38. package/dist/esm-es5/pds-avatar.entry.js +1 -1
  39. package/dist/esm-es5/pds-chip.entry.js +1 -1
  40. package/dist/esm-es5/pds-multiselect.entry.js +1 -1
  41. package/dist/esm-es5/pds-textarea.entry.js +1 -1
  42. package/dist/esm-es5/pds-toast.entry.js +1 -1
  43. package/dist/esm-es5/pine-core.js +1 -1
  44. package/dist/pine-core/p-041243ee.system.entry.js +1 -0
  45. package/dist/pine-core/{p-7b71f1bf.system.entry.js → p-1f4910b0.system.entry.js} +1 -1
  46. package/dist/pine-core/p-25f8690f.entry.js +1 -0
  47. package/dist/pine-core/p-2af1d1d3.system.entry.js +1 -0
  48. package/dist/pine-core/p-2cc1ec4c.entry.js +1 -0
  49. package/dist/pine-core/{p-1e1804ed.system.entry.js → p-5f36fafa.system.entry.js} +1 -1
  50. package/dist/pine-core/p-621fdce1.entry.js +1 -0
  51. package/dist/pine-core/{p-b0b6acdb.system.entry.js → p-8a00e32b.system.entry.js} +1 -1
  52. package/dist/pine-core/p-BKsJZTyn.js +1 -0
  53. package/dist/pine-core/p-C61CFP22.system.js +1 -1
  54. package/dist/pine-core/p-Cr7-rJtJ.system.js +1 -0
  55. package/dist/pine-core/p-af48e6ae.entry.js +1 -0
  56. package/dist/pine-core/{p-cce6dcf0.system.entry.js → p-c7c17fe3.system.entry.js} +1 -1
  57. package/dist/pine-core/p-e48161a5.entry.js +1 -0
  58. package/dist/pine-core/p-fda3f3c6.entry.js +1 -0
  59. package/dist/pine-core/pine-core.esm.js +1 -1
  60. package/dist/types/components/pds-alert/pds-alert.d.ts +6 -0
  61. package/dist/types/components/pds-avatar/pds-avatar.d.ts +6 -0
  62. package/dist/types/components/pds-chip/pds-chip.d.ts +5 -0
  63. package/dist/types/components/pds-multiselect/pds-multiselect.d.ts +67 -4
  64. package/dist/types/components/pds-textarea/pds-textarea.d.ts +6 -0
  65. package/dist/types/components/pds-toast/pds-toast.d.ts +6 -0
  66. package/dist/types/components.d.ts +187 -9
  67. package/dist/types/i18n/i18n-format.d.ts +38 -0
  68. package/dist/types/i18n/index.d.ts +2 -0
  69. package/hydrate/index.js +211 -28
  70. package/hydrate/index.mjs +211 -28
  71. package/package.json +3 -2
  72. package/dist/pine-core/p-190ba1df.entry.js +0 -1
  73. package/dist/pine-core/p-638e9cb3.entry.js +0 -1
  74. package/dist/pine-core/p-68121613.system.entry.js +0 -1
  75. package/dist/pine-core/p-829c52dc.entry.js +0 -1
  76. package/dist/pine-core/p-a739bdfa.entry.js +0 -1
  77. package/dist/pine-core/p-b88be8be.entry.js +0 -1
  78. package/dist/pine-core/p-f2315f2a.entry.js +0 -1
  79. package/dist/pine-core/p-f928817f.system.entry.js +0 -1
package/hydrate/index.js CHANGED
@@ -5652,6 +5652,12 @@ class PdsAlert {
5652
5652
  * @defaultValue 'default'
5653
5653
  */
5654
5654
  this.variant = 'default';
5655
+ /**
5656
+ * Accessible label for the dismiss button. Pass a translated string to
5657
+ * localize it; defaults to English.
5658
+ * @defaultValue 'Dismiss alert'
5659
+ */
5660
+ this.dismissLabel = 'Dismiss alert';
5655
5661
  this.hasActionsContent = false;
5656
5662
  this.handleCloseClick = () => {
5657
5663
  this.pdsAlertDismissClick.emit();
@@ -5682,7 +5688,7 @@ class PdsAlert {
5682
5688
  };
5683
5689
  // Get the icon name based on the current variant
5684
5690
  const iconName = iconMap[this.variant] || iconMap.default;
5685
- 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)" })))))));
5691
+ 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)" })))))));
5686
5692
  }
5687
5693
  get el() { return getElement(this); }
5688
5694
  static get style() { return pdsAlertTokensCss() + pdsAlertCss(); }
@@ -5696,6 +5702,7 @@ class PdsAlert {
5696
5702
  "dismissible": [4],
5697
5703
  "hideIcon": [4, "hide-icon"],
5698
5704
  "variant": [1],
5705
+ "dismissLabel": [1, "dismiss-label"],
5699
5706
  "hasActionsContent": [32]
5700
5707
  },
5701
5708
  "$listeners$": undefined,
@@ -5749,6 +5756,12 @@ class PdsAvatar {
5749
5756
  * @defaultValue customer
5750
5757
  */
5751
5758
  this.variant = 'customer';
5759
+ /**
5760
+ * Accessible label for the dropdown trigger button. Pass a translated string
5761
+ * to localize it; defaults to English.
5762
+ * @defaultValue 'Avatar dropdown trigger'
5763
+ */
5764
+ this.triggerLabel = 'Avatar dropdown trigger';
5752
5765
  this.renderAssetWrapper = () => {
5753
5766
  const style = {
5754
5767
  height: this.avatarSize(),
@@ -5759,7 +5772,7 @@ class PdsAvatar {
5759
5772
  this.renderAvatar = () => {
5760
5773
  return (this.dropdown
5761
5774
  ?
5762
- hAsync("button", { class: "pds-avatar__button", type: "button", part: "button", "aria-label": "Avatar dropdown trigger" }, this.renderAssetWrapper())
5775
+ hAsync("button", { class: "pds-avatar__button", type: "button", part: "button", "aria-label": this.triggerLabel }, this.renderAssetWrapper())
5763
5776
  :
5764
5777
  this.renderAssetWrapper());
5765
5778
  };
@@ -5803,7 +5816,7 @@ class PdsAvatar {
5803
5816
  }
5804
5817
  }
5805
5818
  render() {
5806
- return (hAsync(Host, { key: '7bdd177a6b7064ed12cabeb21d96b0a0cc6071ae', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
5819
+ return (hAsync(Host, { key: 'd8c417ed6fca497bac5bb51a184b1f7d0077bc03', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
5807
5820
  }
5808
5821
  static get style() { return pdsAvatarCss(); }
5809
5822
  static get cmpMeta() { return {
@@ -5817,7 +5830,8 @@ class PdsAvatar {
5817
5830
  "image": [1],
5818
5831
  "initials": [1],
5819
5832
  "size": [513],
5820
- "variant": [513]
5833
+ "variant": [513],
5834
+ "triggerLabel": [1, "trigger-label"]
5821
5835
  },
5822
5836
  "$listeners$": undefined,
5823
5837
  "$lazyBundleId$": "-",
@@ -6697,6 +6711,11 @@ class PdsChip {
6697
6711
  * @defaultValue 'text'
6698
6712
  */
6699
6713
  this.variant = 'text';
6714
+ /**
6715
+ * Accessible label for the remove button. Pass a translated string to localize it; defaults to English.
6716
+ * @defaultValue 'Remove'
6717
+ */
6718
+ this.dismissLabel = 'Remove';
6700
6719
  this.handleCloseClick = () => {
6701
6720
  this.pdsTagCloseClick.emit();
6702
6721
  };
@@ -6750,7 +6769,7 @@ class PdsChip {
6750
6769
  const linkAttrs = {
6751
6770
  class: 'pds-chip__close',
6752
6771
  href: this.removeUrl,
6753
- 'aria-label': 'Remove',
6772
+ 'aria-label': this.dismissLabel,
6754
6773
  };
6755
6774
  // Add target if specified
6756
6775
  if (this.removeTarget) {
@@ -6781,13 +6800,13 @@ class PdsChip {
6781
6800
  return {
6782
6801
  class: 'pds-chip__close',
6783
6802
  type: 'button',
6784
- 'aria-label': 'Remove',
6803
+ 'aria-label': this.dismissLabel,
6785
6804
  };
6786
6805
  };
6787
6806
  return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize })));
6788
6807
  }
6789
6808
  render() {
6790
- return (hAsync(Host, { key: '1d75f8ea7583f53191467b568352664ea0313c79', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
6809
+ return (hAsync(Host, { key: 'ff02e96839049b313681389308faba50c5989842', class: this.classNames(), id: this.componentId }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
6791
6810
  }
6792
6811
  static get style() { return pdsChipTokensCss() + pdsChipCss(); }
6793
6812
  static get cmpMeta() { return {
@@ -6803,7 +6822,8 @@ class PdsChip {
6803
6822
  "variant": [1],
6804
6823
  "removeUrl": [1, "remove-url"],
6805
6824
  "removeHttpMethod": [1, "remove-http-method"],
6806
- "removeTarget": [1, "remove-target"]
6825
+ "removeTarget": [1, "remove-target"],
6826
+ "dismissLabel": [1, "dismiss-label"]
6807
6827
  },
6808
6828
  "$listeners$": undefined,
6809
6829
  "$lazyBundleId$": "-",
@@ -14367,6 +14387,66 @@ class PdsModalHeader {
14367
14387
  }; }
14368
14388
  }
14369
14389
 
14390
+ /**
14391
+ * i18n formatting helpers for Pine components.
14392
+ *
14393
+ * Pine stays string-agnostic: user-facing text is supplied by the consumer as
14394
+ * props (English-defaulted). These helpers only handle the two things a prop
14395
+ * value can't express on its own — interpolating live component state into a
14396
+ * translated template, and picking the right plural form. No stored strings, no
14397
+ * locale registry; the locale is read from the DOM (`lang`), the web-standard
14398
+ * signal a consumer already sets.
14399
+ *
14400
+ * Two limitations of DOM-`lang` locale resolution, both inherent to inferring
14401
+ * locale from the DOM rather than being told it:
14402
+ *
14403
+ * 1. Not reactive. `resolveLocale` is read during render; Stencil has no
14404
+ * reactive dependency on a DOM attribute, so changing `lang` at runtime
14405
+ * (`document.documentElement.lang = 'pl'`) does NOT re-render mounted
14406
+ * components — the plural form stays stale until unrelated state forces a
14407
+ * render. Fine when locale changes via full-page navigation; a consumer that
14408
+ * switches locale client-side should pass the already-formatted/pluralized
14409
+ * string as the prop instead.
14410
+ * 2. Does not cross shadow boundaries. `el.closest('[lang]')` stops at the host's
14411
+ * shadow root. A Pine component nested inside another custom element whose
14412
+ * `lang` sits on that outer host will not see it and falls back to
14413
+ * `document.documentElement.lang`. Set `lang` on (or above) the Pine element
14414
+ * in the same tree, or pass a pre-formatted string, when that matters.
14415
+ */
14416
+ /** Replace `{token}` placeholders with `vars`; unknown tokens stay literal. */
14417
+ function formatMessage(template, vars) {
14418
+ if (!vars)
14419
+ return template;
14420
+ return template.replace(/\{(\w+)\}/g, (_match, key) => key in vars ? String(vars[key]) : `{${key}}`);
14421
+ }
14422
+ /** Nearest `[lang]` ancestor, then `<html lang>`, then `'en'`. */
14423
+ function resolveLocale(el) {
14424
+ var _a;
14425
+ const fromEl = el && typeof el.closest === 'function' ? (_a = el.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.getAttribute('lang') : null;
14426
+ const fromDoc = typeof document !== 'undefined' ? document.documentElement.lang : '';
14427
+ return fromEl || fromDoc || 'en';
14428
+ }
14429
+ /**
14430
+ * Pick the CLDR plural form for `count` in the element's locale (via the
14431
+ * platform `Intl.PluralRules`) and interpolate `{count}`. `forms` come from the
14432
+ * caller — component props, English-defaulted — and fall back to `other`.
14433
+ */
14434
+ function pluralize(el, count, forms, vars) {
14435
+ let category = 'other';
14436
+ try {
14437
+ category = new Intl.PluralRules(resolveLocale(el)).select(count);
14438
+ }
14439
+ catch (_a) {
14440
+ /* invalid locale tag → fall back to 'other' */
14441
+ }
14442
+ // Prefer the selected category, then the required `other`, then `one`; never
14443
+ // return empty. `||` (not `??`) so an empty-string form is skipped too, not
14444
+ // treated as present — a bare `{count}` still shows the number rather than
14445
+ // leaving the trigger with no accessible name.
14446
+ const template = forms[category] || forms.other || forms.one || '{count}';
14447
+ return formatMessage(template, Object.assign({ count }, vars));
14448
+ }
14449
+
14370
14450
  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}`;
14371
14451
 
14372
14452
  /**
@@ -14385,14 +14465,65 @@ class PdsMultiselect {
14385
14465
  this.pdsMultiselectCreate = createEvent(this, "pdsMultiselectCreate");
14386
14466
  this.pdsMultiselectDismiss = createEvent(this, "pdsMultiselectDismiss");
14387
14467
  /**
14388
- * Placeholder text for the input field.
14468
+ * Placeholder text for the input field. Pass a translated string to localize it; defaults to English.
14469
+ * @defaultValue 'Select...'
14389
14470
  */
14390
14471
  this.placeholder = 'Select...';
14391
14472
  /**
14392
- * Placeholder text for the search input inside the dropdown panel.
14393
- * @default 'Find...'
14473
+ * Placeholder text for the search input inside the dropdown panel. Pass a translated string to localize it; defaults to English.
14474
+ * @defaultValue 'Find...'
14394
14475
  */
14395
14476
  this.searchPlaceholder = 'Find...';
14477
+ /**
14478
+ * Accessible label for the search input. Pass a translated string to localize it; defaults to English.
14479
+ * @defaultValue 'Search options'
14480
+ */
14481
+ this.searchOptionsLabel = 'Search options';
14482
+ /**
14483
+ * Accessible label for the selected-items region. Pass a translated string to localize it; defaults to English.
14484
+ * @defaultValue 'Selected items'
14485
+ */
14486
+ this.selectedItemsLabel = 'Selected items';
14487
+ /**
14488
+ * Accessible label for the options listbox (falls back to this when `label` is unset). Pass a translated string to localize it; defaults to English.
14489
+ * @defaultValue 'Options'
14490
+ */
14491
+ this.optionsLabel = 'Options';
14492
+ /**
14493
+ * Text shown when no options match the search. Pass a translated string to localize it; defaults to English.
14494
+ * @defaultValue 'No options found'
14495
+ */
14496
+ this.noOptionsFoundLabel = 'No options found';
14497
+ /**
14498
+ * Visible label for the create-new-option row. Pass a translated string to localize it; `{text}` is interpolated.
14499
+ * @defaultValue 'Add "{text}"'
14500
+ */
14501
+ this.createOptionLabel = 'Add "{text}"';
14502
+ /**
14503
+ * Accessible label for the create-new-option row. Pass a translated string to localize it; `{text}` is interpolated.
14504
+ * @defaultValue 'Create new tag: {text}'
14505
+ */
14506
+ this.createOptionAriaLabel = 'Create new tag: {text}';
14507
+ /**
14508
+ * Screen-reader announcement when an item is removed. Pass a translated string to localize it; `{item}` is interpolated.
14509
+ * @defaultValue '{item} removed'
14510
+ */
14511
+ this.itemRemovedLabel = '{item} removed';
14512
+ /**
14513
+ * Accessible label for the remove button on each selected-item pill. Pass a translated string to localize it; defaults to English.
14514
+ * @defaultValue 'Remove'
14515
+ */
14516
+ this.pillRemoveLabel = 'Remove';
14517
+ /**
14518
+ * Singular form of the selected-count trigger text. Pass a translated string to localize it; `{count}` is interpolated.
14519
+ * @defaultValue '{count} item'
14520
+ */
14521
+ this.selectedCountLabelOne = '{count} item';
14522
+ /**
14523
+ * 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.
14524
+ * @defaultValue '{count} items'
14525
+ */
14526
+ this.selectedCountLabelOther = '{count} items';
14396
14527
  /**
14397
14528
  * Whether to close the panel after an option is selected.
14398
14529
  * Defaults to `false` (panel stays open for multi-select).
@@ -14631,7 +14762,7 @@ class PdsMultiselect {
14631
14762
  this.pdsMultiselectChange.emit({ values: this.value, items: this.selectedItems });
14632
14763
  // Clear first so screen readers re-announce even when the same item is removed twice
14633
14764
  this.removalAnnouncement = '';
14634
- queueMicrotask(() => { this.removalAnnouncement = `${item.text} removed`; });
14765
+ queueMicrotask(() => { this.removalAnnouncement = formatMessage(this.itemRemovedLabel, { item: item.text }); });
14635
14766
  this.isClosingViaSelection = true;
14636
14767
  if (this.isOpen) {
14637
14768
  (_a = this.searchInputEl) === null || _a === void 0 ? void 0 : _a.focus();
@@ -15268,7 +15399,7 @@ class PdsMultiselect {
15268
15399
  'pds-multiselect__option--selected': isSelected,
15269
15400
  'pds-multiselect__option--create': isCreateOption,
15270
15401
  'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
15271
- }, 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' } }))));
15402
+ }, 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' } }))));
15272
15403
  }
15273
15404
  renderSelectedItemsList() {
15274
15405
  if (this.hideSelectedItems || this.selectedItems.length === 0)
@@ -15282,7 +15413,7 @@ class PdsMultiselect {
15282
15413
  const valueArray = this.ensureValueArray();
15283
15414
  const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
15284
15415
  const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
15285
- 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) => {
15416
+ 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) => {
15286
15417
  if (item.type === 'group') {
15287
15418
  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)))));
15288
15419
  }
@@ -15297,27 +15428,54 @@ class PdsMultiselect {
15297
15428
  const variant = this.disabled ? 'text' : 'tag';
15298
15429
  const visibleItems = this.selectedItems.slice(0, Math.max(1, this.maxInlinePills));
15299
15430
  const overflowCount = this.selectedItems.length - visibleItems.length;
15300
- 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))));
15431
+ 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))));
15301
15432
  }
15302
15433
  renderBelowPills() {
15303
15434
  if (this.selectedItems.length === 0)
15304
15435
  return null;
15305
15436
  const variant = this.disabled ? 'text' : 'tag';
15306
- 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)))));
15437
+ 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)))));
15307
15438
  }
15308
15439
  getTriggerText() {
15309
15440
  const count = this.selectedItems.length;
15310
15441
  if (count === 0 || (this.selectedDisplay === 'pill' && this.pillPosition === 'below')) {
15442
+ // Fall back to a non-empty string: the trigger's accessible name comes from
15443
+ // this text, so an empty/undefined placeholder must never leave it nameless
15444
+ // (WCAG 4.1.2). The prop is localizable; this last-resort default is not.
15311
15445
  return this.placeholder || 'Select...';
15312
15446
  }
15313
- return `${count} item${count === 1 ? '' : 's'}`;
15447
+ return pluralize(this.el, count, this.resolveCountForms());
15448
+ }
15449
+ /**
15450
+ * The `one`/`other` props are the ergonomic English defaults; `selectedCountLabels`
15451
+ * (object or JSON-string attribute) layers full CLDR forms on top for locales
15452
+ * that need `few`/`many`/`two`/`zero`. Malformed JSON degrades to the defaults.
15453
+ */
15454
+ resolveCountForms() {
15455
+ const base = {
15456
+ one: this.selectedCountLabelOne,
15457
+ other: this.selectedCountLabelOther,
15458
+ };
15459
+ const extra = this.selectedCountLabels;
15460
+ if (!extra)
15461
+ return base;
15462
+ if (typeof extra === 'string') {
15463
+ try {
15464
+ const parsed = JSON.parse(extra);
15465
+ return parsed && typeof parsed === 'object' ? Object.assign(Object.assign({}, base), parsed) : base;
15466
+ }
15467
+ catch (_a) {
15468
+ return base; // not valid JSON → fall back to the English-shape defaults
15469
+ }
15470
+ }
15471
+ return Object.assign(Object.assign({}, base), extra);
15314
15472
  }
15315
15473
  render() {
15316
15474
  const hasSelections = this.selectedItems.length > 0;
15317
- 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: {
15475
+ 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: {
15318
15476
  'pds-multiselect__label': true,
15319
15477
  'visually-hidden': this.hideLabel,
15320
- } }, 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: {
15478
+ } }, 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: {
15321
15479
  'pds-multiselect__trigger': true,
15322
15480
  'pds-multiselect__trigger--open': this.isOpen,
15323
15481
  'pds-multiselect__trigger--disabled': this.disabled,
@@ -15333,7 +15491,7 @@ class PdsMultiselect {
15333
15491
  }, 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: {
15334
15492
  'pds-multiselect__trigger-text': true,
15335
15493
  'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
15336
- } }, 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' })))));
15494
+ } }, 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' })))));
15337
15495
  }
15338
15496
  static get formAssociated() { return true; }
15339
15497
  get el() { return getElement(this); }
@@ -15360,6 +15518,17 @@ class PdsMultiselect {
15360
15518
  "label": [1],
15361
15519
  "placeholder": [1],
15362
15520
  "searchPlaceholder": [1, "search-placeholder"],
15521
+ "searchOptionsLabel": [1, "search-options-label"],
15522
+ "selectedItemsLabel": [1, "selected-items-label"],
15523
+ "optionsLabel": [1, "options-label"],
15524
+ "noOptionsFoundLabel": [1, "no-options-found-label"],
15525
+ "createOptionLabel": [1, "create-option-label"],
15526
+ "createOptionAriaLabel": [1, "create-option-aria-label"],
15527
+ "itemRemovedLabel": [1, "item-removed-label"],
15528
+ "pillRemoveLabel": [1, "pill-remove-label"],
15529
+ "selectedCountLabelOne": [1, "selected-count-label-one"],
15530
+ "selectedCountLabelOther": [1, "selected-count-label-other"],
15531
+ "selectedCountLabels": [1, "selected-count-labels"],
15363
15532
  "closePanelOnSelect": [4, "close-panel-on-select"],
15364
15533
  "name": [1],
15365
15534
  "value": [1040],
@@ -20920,6 +21089,12 @@ class PdsTextarea {
20920
21089
  * If true, the textarea has action content in the label area
20921
21090
  */
20922
21091
  this.hasAction = false;
21092
+ /**
21093
+ * Template for the character-counter's accessible label. Pass a translated
21094
+ * string to localize it; `{current}` and `{max}` are interpolated.
21095
+ * @defaultValue '{current} of {max} characters'
21096
+ */
21097
+ this.characterCountLabel = '{current} of {max} characters';
20923
21098
  this.onBlur = (ev) => {
20924
21099
  this.hasFocus = false;
20925
21100
  if (this.focusedValue !== this.value) {
@@ -21117,7 +21292,7 @@ class PdsTextarea {
21117
21292
  return null;
21118
21293
  }
21119
21294
  const currentLength = this.getValue().length;
21120
- 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));
21295
+ 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));
21121
21296
  }
21122
21297
  renderAction() {
21123
21298
  const hasAction = this.el.querySelector('[slot="action"]') !== null;
@@ -21171,10 +21346,10 @@ class PdsTextarea {
21171
21346
  }
21172
21347
  render() {
21173
21348
  const value = this.getValue();
21174
- 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 &&
21175
- 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 &&
21176
- hAsync("p", { key: 'ae03337ef85ac2a3995e967fe671e0ad2c352710', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
21177
- 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))));
21349
+ 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 &&
21350
+ 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 &&
21351
+ hAsync("p", { key: 'e42f174f4153363ce745db264fd3a9ee46178a03', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
21352
+ 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))));
21178
21353
  }
21179
21354
  static get formAssociated() { return true; }
21180
21355
  get el() { return getElement(this); }
@@ -21211,6 +21386,7 @@ class PdsTextarea {
21211
21386
  "maxLength": [514, "max-length"],
21212
21387
  "highlight": [516],
21213
21388
  "value": [1025],
21389
+ "characterCountLabel": [1, "character-count-label"],
21214
21390
  "hasFocus": [32],
21215
21391
  "hasAction": [32],
21216
21392
  "setFocus": [64]
@@ -21252,6 +21428,12 @@ class PdsToast {
21252
21428
  * @default 'default'
21253
21429
  */
21254
21430
  this.type = 'default';
21431
+ /**
21432
+ * Accessible label for the dismiss button. Pass a translated string to
21433
+ * localize it; defaults to English.
21434
+ * @defaultValue 'Dismiss message'
21435
+ */
21436
+ this.dismissLabel = 'Dismiss message';
21255
21437
  /**
21256
21438
  * Whether the toast is currently visible.
21257
21439
  */
@@ -21341,13 +21523,13 @@ class PdsToast {
21341
21523
  return this.icon && hAsync("pds-icon", { name: this.icon, class: "pds-toast__icon" });
21342
21524
  }
21343
21525
  render() {
21344
- return (hAsync(Host, { key: '7768cbf398d4592b774734abdf5e9f1f4d4fb7e8', hidden: !this.isVisible }, hAsync("div", { key: 'c17b00c76bd42d1040b8ef08a354e10346a79aa4', class: {
21526
+ return (hAsync(Host, { key: 'a1ec97158a6665aa25b58b1954b4b5c622590615', hidden: !this.isVisible }, hAsync("div", { key: 'd9b01164364c76512852a260cede50000b73a563', class: {
21345
21527
  'pds-toast': true,
21346
21528
  [`pds-toast--${this.type}`]: this.type !== 'default',
21347
21529
  'pds-toast--animating-out': this.isAnimatingOut
21348
- }, 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: () => {
21530
+ }, 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: () => {
21349
21531
  this.dismiss();
21350
- }, "aria-label": "Dismiss message" }, hAsync("pds-icon", { key: 'c5cf65f889bfcd85e3fdab437539e7ee3f6e0465', name: "remove" }))))));
21532
+ }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: 'fde63f279f696d9f02875cc1beee3542c97f0c7e', name: "remove" }))))));
21351
21533
  }
21352
21534
  get el() { return getElement(this); }
21353
21535
  static get watchers() { return {
@@ -21365,6 +21547,7 @@ class PdsToast {
21365
21547
  "duration": [2],
21366
21548
  "icon": [1],
21367
21549
  "type": [1],
21550
+ "dismissLabel": [1, "dismiss-label"],
21368
21551
  "isVisible": [32],
21369
21552
  "isAnimatingOut": [32],
21370
21553
  "dismiss": [64]