@watermarkinsights/ripple 5.31.1 → 5.32.0-alpha.2

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 (176) hide show
  1. package/dist/cjs/{app-globals-18338066.js → app-globals-773bf504.js} +1 -1
  2. package/dist/cjs/loader.cjs.js +2 -2
  3. package/dist/cjs/priv-navigator-button.cjs.entry.js +1 -1
  4. package/dist/cjs/priv-navigator-item.cjs.entry.js +1 -1
  5. package/dist/cjs/ripple.cjs.js +2 -2
  6. package/dist/cjs/wm-action-menu_2.cjs.entry.js +44 -8
  7. package/dist/cjs/wm-button.cjs.entry.js +2 -2
  8. package/dist/cjs/wm-file-list.cjs.entry.js +1 -1
  9. package/dist/cjs/wm-file.cjs.entry.js +1 -1
  10. package/dist/cjs/wm-flyout.cjs.entry.js +1 -1
  11. package/dist/cjs/wm-input.cjs.entry.js +1 -1
  12. package/dist/cjs/wm-modal-pss_3.cjs.entry.js +4 -4
  13. package/dist/cjs/wm-modal_3.cjs.entry.js +4 -4
  14. package/dist/cjs/wm-navigation_3.cjs.entry.js +4 -4
  15. package/dist/cjs/wm-nested-select.cjs.entry.js +7 -5
  16. package/dist/cjs/wm-option_2.cjs.entry.js +7 -5
  17. package/dist/cjs/wm-pagination.cjs.entry.js +1 -1
  18. package/dist/cjs/wm-search.cjs.entry.js +2 -2
  19. package/dist/cjs/wm-snackbar.cjs.entry.js +2 -2
  20. package/dist/cjs/wm-tab-item_3.cjs.entry.js +6 -6
  21. package/dist/cjs/wm-tag-input.cjs.entry.js +2 -2
  22. package/dist/cjs/wm-textarea.cjs.entry.js +1 -1
  23. package/dist/cjs/wm-timepicker.cjs.entry.js +2 -2
  24. package/dist/cjs/wm-toggletip.cjs.entry.js +3 -3
  25. package/dist/cjs/wm-uploader.cjs.entry.js +3 -3
  26. package/dist/collection/components/selects/wm-nested-select/wm-nested-select.js +7 -5
  27. package/dist/collection/components/selects/wm-select/wm-select.js +7 -5
  28. package/dist/collection/components/wm-action-menu/wm-action-menu.css +6 -3
  29. package/dist/collection/components/wm-action-menu/wm-action-menu.js +186 -6
  30. package/dist/collection/components/wm-button/wm-button.css +4 -2
  31. package/dist/collection/components/wm-button/wm-button.js +2 -2
  32. package/dist/collection/components/wm-file/wm-file.js +1 -1
  33. package/dist/collection/components/wm-file-list/wm-file-list.js +1 -1
  34. package/dist/collection/components/wm-flyout/wm-flyout.js +1 -1
  35. package/dist/collection/components/wm-input/wm-input.js +1 -1
  36. package/dist/collection/components/wm-menuitem/wm-menuitem.js +1 -1
  37. package/dist/collection/components/wm-modal/wm-modal-footer.js +1 -1
  38. package/dist/collection/components/wm-modal/wm-modal-header.js +1 -1
  39. package/dist/collection/components/wm-modal/wm-modal.js +2 -2
  40. package/dist/collection/components/wm-modal-pss/wm-modal-pss-footer.js +1 -1
  41. package/dist/collection/components/wm-modal-pss/wm-modal-pss-header.js +1 -1
  42. package/dist/collection/components/wm-modal-pss/wm-modal-pss.js +2 -2
  43. package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js +1 -1
  44. package/dist/collection/components/wm-navigation/wm-navigation-item.js +1 -1
  45. package/dist/collection/components/wm-navigation/wm-navigation.js +2 -2
  46. package/dist/collection/components/wm-navigator/priv-navigator-button/priv-navigator-button.js +1 -1
  47. package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js +1 -1
  48. package/dist/collection/components/wm-pagination/wm-pagination.js +1 -1
  49. package/dist/collection/components/wm-search/wm-search.js +2 -2
  50. package/dist/collection/components/wm-snackbar/wm-snackbar.js +2 -2
  51. package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js +2 -2
  52. package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js +3 -3
  53. package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js +1 -1
  54. package/dist/collection/components/wm-tag-input/wm-tag-input.js +2 -2
  55. package/dist/collection/components/wm-textarea/wm-textarea.js +1 -1
  56. package/dist/collection/components/wm-timepicker/wm-timepicker.js +2 -2
  57. package/dist/collection/components/wm-toggletip/wm-toggletip.js +3 -3
  58. package/dist/collection/components/wm-uploader/wm-uploader.css +4 -2
  59. package/dist/collection/components/wm-uploader/wm-uploader.js +2 -2
  60. package/dist/docs/docs.json +183 -3
  61. package/dist/docs/props-reference.json +31 -0
  62. package/dist/docs/skill/wm-action-menu.md +17 -8
  63. package/dist/docs/skill/wm-button.md +2 -1
  64. package/dist/esm/{app-globals-404ba075.js → app-globals-c7b000c8.js} +1 -1
  65. package/dist/esm/loader.js +2 -2
  66. package/dist/esm/priv-navigator-button.entry.js +1 -1
  67. package/dist/esm/priv-navigator-item.entry.js +1 -1
  68. package/dist/esm/ripple.js +2 -2
  69. package/dist/esm/wm-action-menu_2.entry.js +44 -8
  70. package/dist/esm/wm-button.entry.js +2 -2
  71. package/dist/esm/wm-file-list.entry.js +1 -1
  72. package/dist/esm/wm-file.entry.js +1 -1
  73. package/dist/esm/wm-flyout.entry.js +1 -1
  74. package/dist/esm/wm-input.entry.js +1 -1
  75. package/dist/esm/wm-modal-pss_3.entry.js +4 -4
  76. package/dist/esm/wm-modal_3.entry.js +4 -4
  77. package/dist/esm/wm-navigation_3.entry.js +4 -4
  78. package/dist/esm/wm-nested-select.entry.js +7 -5
  79. package/dist/esm/wm-option_2.entry.js +7 -5
  80. package/dist/esm/wm-pagination.entry.js +1 -1
  81. package/dist/esm/wm-search.entry.js +2 -2
  82. package/dist/esm/wm-snackbar.entry.js +2 -2
  83. package/dist/esm/wm-tab-item_3.entry.js +6 -6
  84. package/dist/esm/wm-tag-input.entry.js +2 -2
  85. package/dist/esm/wm-textarea.entry.js +1 -1
  86. package/dist/esm/wm-timepicker.entry.js +2 -2
  87. package/dist/esm/wm-toggletip.entry.js +3 -3
  88. package/dist/esm/wm-uploader.entry.js +3 -3
  89. package/dist/esm-es5/app-globals-c7b000c8.js +1 -0
  90. package/dist/esm-es5/loader.js +1 -1
  91. package/dist/esm-es5/priv-navigator-button.entry.js +1 -1
  92. package/dist/esm-es5/priv-navigator-item.entry.js +1 -1
  93. package/dist/esm-es5/ripple.js +1 -1
  94. package/dist/esm-es5/wm-action-menu_2.entry.js +1 -1
  95. package/dist/esm-es5/wm-button.entry.js +1 -1
  96. package/dist/esm-es5/wm-file-list.entry.js +1 -1
  97. package/dist/esm-es5/wm-file.entry.js +1 -1
  98. package/dist/esm-es5/wm-flyout.entry.js +1 -1
  99. package/dist/esm-es5/wm-input.entry.js +1 -1
  100. package/dist/esm-es5/wm-modal-pss_3.entry.js +1 -1
  101. package/dist/esm-es5/wm-modal_3.entry.js +1 -1
  102. package/dist/esm-es5/wm-navigation_3.entry.js +1 -1
  103. package/dist/esm-es5/wm-nested-select.entry.js +1 -1
  104. package/dist/esm-es5/wm-option_2.entry.js +1 -1
  105. package/dist/esm-es5/wm-pagination.entry.js +1 -1
  106. package/dist/esm-es5/wm-search.entry.js +1 -1
  107. package/dist/esm-es5/wm-snackbar.entry.js +1 -1
  108. package/dist/esm-es5/wm-tab-item_3.entry.js +1 -1
  109. package/dist/esm-es5/wm-tag-input.entry.js +1 -1
  110. package/dist/esm-es5/wm-textarea.entry.js +1 -1
  111. package/dist/esm-es5/wm-timepicker.entry.js +1 -1
  112. package/dist/esm-es5/wm-toggletip.entry.js +1 -1
  113. package/dist/esm-es5/wm-uploader.entry.js +1 -1
  114. package/dist/ripple/{p-c75d5af1.system.entry.js → p-1ae5ff31.system.entry.js} +1 -1
  115. package/dist/ripple/{p-d6ee031f.entry.js → p-1e61f428.entry.js} +1 -1
  116. package/dist/ripple/{p-5400030d.system.entry.js → p-1f94b206.system.entry.js} +1 -1
  117. package/dist/ripple/{p-9d985e27.system.entry.js → p-2176e8fd.system.entry.js} +1 -1
  118. package/dist/ripple/{p-7911d421.system.entry.js → p-2178f227.system.entry.js} +1 -1
  119. package/dist/ripple/{p-9a287dfd.entry.js → p-24edf8cf.entry.js} +1 -1
  120. package/dist/ripple/{p-af2df599.system.entry.js → p-27537e1c.system.entry.js} +1 -1
  121. package/dist/ripple/{p-e4670975.entry.js → p-319b9b38.entry.js} +1 -1
  122. package/dist/ripple/p-3c26dcf2.js +1 -0
  123. package/dist/ripple/{p-ca3630fb.system.entry.js → p-45a8ce04.system.entry.js} +1 -1
  124. package/dist/ripple/p-4adccf9b.entry.js +1 -0
  125. package/dist/ripple/p-4c5d0502.entry.js +1 -0
  126. package/dist/ripple/{p-3cb61d2e.entry.js → p-4cca044a.entry.js} +1 -1
  127. package/dist/ripple/{p-bc4ffa23.entry.js → p-53433e48.entry.js} +1 -1
  128. package/dist/ripple/p-5bbf6b18.system.entry.js +1 -0
  129. package/dist/ripple/{p-5a274707.entry.js → p-64d5a281.entry.js} +1 -1
  130. package/dist/ripple/{p-9deec7b8.system.entry.js → p-67497029.system.entry.js} +1 -1
  131. package/dist/ripple/{p-5f907857.entry.js → p-6f4822c7.entry.js} +1 -1
  132. package/dist/ripple/{p-2591f07f.entry.js → p-712684c7.entry.js} +1 -1
  133. package/dist/ripple/{p-cb519e85.entry.js → p-7aba5fcd.entry.js} +1 -1
  134. package/dist/ripple/{p-facd927d.system.entry.js → p-82650151.system.entry.js} +1 -1
  135. package/dist/ripple/p-83ee6ad0.system.js +1 -0
  136. package/dist/ripple/p-842236ea.entry.js +1 -0
  137. package/dist/ripple/{p-f73d50ee.system.entry.js → p-88f5a3d4.system.entry.js} +1 -1
  138. package/dist/ripple/{p-9e48d58b.system.entry.js → p-90286c9f.system.entry.js} +1 -1
  139. package/dist/ripple/{p-fb2607cb.entry.js → p-9af426d5.entry.js} +1 -1
  140. package/dist/ripple/{p-113926eb.entry.js → p-a040364d.entry.js} +1 -1
  141. package/dist/ripple/{p-a27f305f.entry.js → p-aa86963b.entry.js} +1 -1
  142. package/dist/ripple/p-abb6fd0e.system.entry.js +1 -0
  143. package/dist/ripple/{p-b3c68d4a.system.entry.js → p-b252fb1b.system.entry.js} +1 -1
  144. package/dist/ripple/{p-3ca113f7.system.entry.js → p-b43cc26c.system.entry.js} +1 -1
  145. package/dist/ripple/{p-c4285af5.system.entry.js → p-bdad55a5.system.entry.js} +1 -1
  146. package/dist/ripple/{p-d4c18268.entry.js → p-caae008c.entry.js} +1 -1
  147. package/dist/ripple/{p-b269d181.entry.js → p-d2fa7cde.entry.js} +1 -1
  148. package/dist/ripple/{p-e7e4e532.entry.js → p-d5dd3550.entry.js} +1 -1
  149. package/dist/ripple/p-d7681d5c.entry.js +1 -0
  150. package/dist/ripple/{p-a83561fb.system.entry.js → p-d96d80a5.system.entry.js} +1 -1
  151. package/dist/ripple/{p-62911dec.system.entry.js → p-dc4c69b5.system.entry.js} +1 -1
  152. package/dist/ripple/{p-f57d13cb.system.entry.js → p-de58531e.system.entry.js} +1 -1
  153. package/dist/ripple/{p-1065318f.entry.js → p-ed03d492.entry.js} +1 -1
  154. package/dist/ripple/{p-59db03c4.system.entry.js → p-ed2a676c.system.entry.js} +1 -1
  155. package/dist/ripple/{p-c895a1f9.entry.js → p-ed8f92d5.entry.js} +1 -1
  156. package/dist/ripple/{p-00e385ef.system.js → p-eecae818.system.js} +1 -1
  157. package/dist/ripple/{p-a1fa8314.system.entry.js → p-f18aef8d.system.entry.js} +1 -1
  158. package/dist/ripple/p-f5be8dbb.system.entry.js +1 -0
  159. package/dist/ripple/{p-d4ee4a88.system.entry.js → p-fb594105.system.entry.js} +1 -1
  160. package/dist/ripple/{p-4c8b6b15.entry.js → p-fbc9bfd2.entry.js} +1 -1
  161. package/dist/ripple/ripple.esm.js +1 -1
  162. package/dist/ripple/ripple.js +1 -1
  163. package/dist/types/components/wm-action-menu/wm-action-menu.d.ts +64 -0
  164. package/dist/types/components/wm-button/wm-button.d.ts +2 -1
  165. package/dist/types/components.d.ts +170 -2
  166. package/package.json +2 -2
  167. package/dist/esm-es5/app-globals-404ba075.js +0 -1
  168. package/dist/ripple/p-330068df.system.js +0 -1
  169. package/dist/ripple/p-4bc07b48.system.entry.js +0 -1
  170. package/dist/ripple/p-6c0e98ec.entry.js +0 -1
  171. package/dist/ripple/p-8011a8f9.entry.js +0 -1
  172. package/dist/ripple/p-8fa5551f.js +0 -1
  173. package/dist/ripple/p-9bbe78c8.system.entry.js +0 -1
  174. package/dist/ripple/p-db74df09.entry.js +0 -1
  175. package/dist/ripple/p-e38cfdb1.entry.js +0 -1
  176. package/dist/ripple/p-fa6c377a.system.entry.js +0 -1
@@ -117,7 +117,7 @@ const Input = class {
117
117
  : `info error`;
118
118
  }
119
119
  render() {
120
- return (index.h("div", { key: 'c931367a155c4eae1bd0d2439db88121b0e3a0cd', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, index.h("div", { key: '3490e7036c092caa470ca5e351977ada8e671a84', class: "label-wrapper" }, index.h("label", { key: 'e9dbae2b803356bb1e478848fbe4b9ccb375ad40', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label, this.characterLimit && (index.h("span", { key: '3fecb988224ef8fb83152c0b7064bbb597dab56f', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: 'a9189aede977f6e11dd073f5a1c60d18af2a1ac5', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: '33094bd5cef0c9a20951fc3967886b92d0ebab3a', class: "inner-wrapper" }, index.h("div", { key: '3984b4b8f0d940271c51809c25cfdf01aeb66629', class: "text-after-wrapper" }, index.h("div", { key: '11f8193e69a9e360bca130ace6cfe96b271378ea', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (index.h("span", { key: '35914e1eb9ac4bc78f70fcea0fe1f33ccca46575', class: "symbol", id: "symbol-before" }, this.symbolBefore)), index.h("input", { key: 'c0ba715d0ea2107da78cbce2cb04a493fd02faeb', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (index.h("span", { key: '88550206453f0549d023c03478d9afbc70e81f5c', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (index.h("span", { key: '30e206e3705468e79fd3e0492ed27ad631565d58', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (index.h("div", { key: '2c723e71a6ae0d74c82292d49989f91920fea1ab', id: "info", class: "info" }, this.info)), index.h("div", { key: '8e099e1bf7bb4be52dedd07c14bd8359e088e3bb', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: 'ae05153805380b57f130e3265646c1f838228f91', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
120
+ return (index.h("div", { key: 'f029cb482e12e2106647ce317bdaea70ccbc5deb', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, index.h("div", { key: '0730cb26065750f4e1e84dab1b799399855f4558', class: "label-wrapper" }, index.h("label", { key: '9b872282962f7686ce34858d6402409636a4533d', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label, this.characterLimit && (index.h("span", { key: '9455bc28a96b71082c3b0fadc58127407df8eeb2', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: 'd4894b2ed26c65893ae093ad96aae7affd6dd31e', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: '19a2693dec4ad1ac01cfb00460a5c5f0609607b7', class: "inner-wrapper" }, index.h("div", { key: '11acb3166e172b531db731f1f68dedb73c7af24c', class: "text-after-wrapper" }, index.h("div", { key: '232c94414b26198402c83d1e9d9cc76ddf668aeb', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (index.h("span", { key: '0d04dff7f1e7a57b447cee21ad8162b52eb9402f', class: "symbol", id: "symbol-before" }, this.symbolBefore)), index.h("input", { key: '268f601a76ae701036bc1749c19b401e1206ee6b', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (index.h("span", { key: '9bea655ebf141ff85838d4bbf57011670f466ea8', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (index.h("span", { key: '95be3668a4d55c3c27ac2f8cfc422d8ec794012e', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (index.h("div", { key: 'dfee1b0ae9b42403e58dfc67dd2f4aaf535c7f0f', id: "info", class: "info" }, this.info)), index.h("div", { key: '2918e12db2c5c0371bb0145fe2d7a30b321767fc', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: '7e317a16d0fc0e475e52541085f7a86c2f29280d', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
121
121
  }
122
122
  static get delegatesFocus() { return true; }
123
123
  get el() { return index.getElement(this); }
@@ -129,9 +129,9 @@ const ModalPss = class {
129
129
  }
130
130
  }
131
131
  render() {
132
- return (index.h(index.Host, { key: '58b1d2295b177cde87614bd9dba46d816fac2e22', class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
132
+ return (index.h(index.Host, { key: 'b3635bc8cde0f9a320a51a1aa96537a7c9f47529', class: `${this.open ? "" : "hide "}${"wm-" + this.modalType}`, role: "dialog", "aria-describedby": `wm-modal-heading-text-${this.uid}`, "aria-modal": "true", tabindex: this.open ? 0 : null, onFocus: () => {
133
133
  this.focusLastElement.emit();
134
- } }, index.h("div", { key: '56198ea82f7be20c80853a93c6d4fed3396c2baf', class: "overlay", ref: (el) => (this.overlayEl = el) }), index.h("div", { key: '3b31f7ec36f12909b8d2e3462589998ff3119cd1', class: "sr-only", tabIndex: 0, onFocus: () => {
134
+ } }, index.h("div", { key: 'ddeaa0e69de0bb03a944551463d89d16ac2e1f37', class: "overlay", ref: (el) => (this.overlayEl = el) }), index.h("div", { key: 'b7a246888e73b7e04cd4c378ea9582d159d99d1e', class: "sr-only", tabIndex: 0, onFocus: () => {
135
135
  this.focusFirstElement.emit();
136
136
  } })));
137
137
  }
@@ -174,7 +174,7 @@ const ModalPssFooter = class {
174
174
  parentModal.emitSecondaryEvent();
175
175
  }
176
176
  render() {
177
- return (index.h("div", { key: '6428149a4963fd04f4deb0380988b443d871d75c', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { key: 'daea7ee16641e4b981fe34941f0d91aff85c6dde', class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { key: '4bc033fba7210f02fc8cfaf170db5ce196d4393a', class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { key: '8df6a38a5693fc86594764dd865532776dea4f08', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), index.h("wm-button", { key: '40a2e21e749ef5190512413a6fbd29f2b2b0c429', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
177
+ return (index.h("div", { key: 'f592a059ae4aaad7571752f92087f7b9719a951f', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { key: 'f543fc5dac24255f0708d18e8470979af6574e17', class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { key: '6a14d3340b463dd09830d51c1a60a1fd94bcc92e', class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { key: '67df9f0e567f5a92f164ef646921b2dd9bd87fec', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), index.h("wm-button", { key: '18f10246fec291061df3c6d22e11593dbf3faaf5', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
178
178
  }
179
179
  get el() { return index.getElement(this); }
180
180
  };
@@ -209,7 +209,7 @@ const ModalPssHeader = class {
209
209
  // this.headingElement.focus();
210
210
  // }
211
211
  render() {
212
- return (index.h(index.Host, { key: 'b45894c5864c446f35335eb0d31d1c9973982183' }, index.h("div", { key: '381f7a6174df2cc06bb75e8169eb230b5b608632', class: "wm-wrapper" }, index.h("div", { key: '2b36c6ca3beafe5caccc07d1b8af4fce10b984a9' }, index.h("h2", { key: '544df129fe4eac346d6f3a54d2ff0aabcbca89fe', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { key: 'da4038aa35d9690f921da30b8e3f6a141685dddb', class: "subtitle" }, this.subheading))), index.h("wm-button", { key: '7edc9dcc9158cf8369da12ed00a89a457c904b5c', "button-type": "navigational", icon: "f156", tooltip: intl.globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
212
+ return (index.h(index.Host, { key: 'a037746103bf701d915b0c5d5b9c39cbc747a3d0' }, index.h("div", { key: '74d6b2b03eb350dca3aeb12a39ba40fa133e4b86', class: "wm-wrapper" }, index.h("div", { key: '7ed4dd3ddbd37280a260b5bd187d53b16c4595dd' }, index.h("h2", { key: '7c2cf37829985cc2f1308c6541a9d51d16d96321', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { key: '3ea6d08a5bc628cf81fee42d99194f0a8baaf75e', class: "subtitle" }, this.subheading))), index.h("wm-button", { key: '9ff2985d762a9be75b65f5d8a91d54321fd95cf2', "button-type": "navigational", icon: "f156", tooltip: intl.globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
213
213
  }
214
214
  get el() { return index.getElement(this); }
215
215
  };
@@ -144,11 +144,11 @@ const Modal = class {
144
144
  }
145
145
  }
146
146
  render() {
147
- return (index.h("dialog", { key: 'b12938af955f8e449f1016a0e37e40f74256d146', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("div", { key: '09ffe7cf312d3fdd0e1a1201a6a70ebfd811e7ca', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
147
+ return (index.h("dialog", { key: 'dd607f6c4ee356688f4f9ea164a2659d6cc6d2c1', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("div", { key: 'b9aabc158532745be3d646a234826c554e0e9c13', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
148
148
  const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
149
149
  // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
150
150
  focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
151
- } }), !this.hasBrowserPopoverSupport && index.h("div", { key: '6ba58b80667b11e9444d81f54d7d6cc7218cd6fc', class: "wm-tooltip" }), index.h("slot", { key: '127d606ae9ec8867e1cb8b8a2e213dd551ba5acf' }), index.h("div", { key: 'a523ca42ecfac9e4776b0e694efe0c5843169d6f', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
151
+ } }), !this.hasBrowserPopoverSupport && index.h("div", { key: '9b0b3f500a85ee46e9dda69faad6707312a40ae5', class: "wm-tooltip" }), index.h("slot", { key: '7ae0b5fdc1c03e0e7c078dcdecafc01976da1afa' }), index.h("div", { key: '842538086c834f6f339625d4a90bf142f9812b84', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
152
152
  this.focusFirstElement.emit();
153
153
  } })));
154
154
  }
@@ -195,7 +195,7 @@ const ModalFooter = class {
195
195
  }
196
196
  }
197
197
  render() {
198
- return (index.h("div", { key: '87d7243df7bc7f378745e244ec0aa7aff9b39e6e', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { key: '2c61acfbb073add2f98429b8b10bf7b3c282fa5a', class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { key: 'dea38f80193dc130ee3fefc097fd8a3da8a6542a', class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { key: 'ece0847d5a267b49daf8ffe39c9ce30f17b2d83c', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), index.h("wm-button", { key: 'a113b1e908ecd8d8b79efa6023fe480073cdfeca', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
198
+ return (index.h("div", { key: '9a16f00bdebb569aeed87a3b2b73d35af8c0a4bf', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { key: '0a2ba72826a1dc91e46ee4074c2cc112683c1254', class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { key: '345faea938db4b562c62fc522cae7841c1fb4e7e', class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { key: '46b1506ffca5d53e2658b605c34c3a2cb276666d', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), index.h("wm-button", { key: '65ce625134906a1b346fe5ae429530468a3cb681', "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
199
199
  }
200
200
  get el() { return index.getElement(this); }
201
201
  };
@@ -227,7 +227,7 @@ const ModalHeader = class {
227
227
  parentModal.emitCloseEvent();
228
228
  }
229
229
  render() {
230
- return (index.h(index.Host, { key: 'd9d72742f8783ffbd7203e31c5f9f108cb6cf2e1' }, index.h("div", { key: 'd40949a6e0292e8c5d28a2281a1f4714e2ca71c6', class: "wm-wrapper" }, index.h("div", { key: '7068a4d59289893a61eab7a4edfedf00d3a492e1' }, index.h("h2", { key: 'f5a411c46d678c1f2451aaa447a013db7345fc2d', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { key: 'f19829eeb07d5a06b9d167303e8bfbf3d695d447', class: "subtitle" }, this.subheading))), index.h("wm-button", { key: 'adb8c479ad9bfcd32f69f3db3de60bbeb91a1722', "button-type": "navigational", icon: "#close", tooltip: intl.globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
230
+ return (index.h(index.Host, { key: '7c9fd190efac76681c9a6ed9f6d10a3804d8af1c' }, index.h("div", { key: 'e42f9acad1959adad33bde5a2704e011a28e9b64', class: "wm-wrapper" }, index.h("div", { key: 'bd28712f251564d5ef3e054589015ca78b901ccd' }, index.h("h2", { key: '4d96710920f024b5329d739c46828e1179639d05', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { key: 'b9708984ef35708bb21114c19e9aae81c078729a', class: "subtitle" }, this.subheading))), index.h("wm-button", { key: '7d068016adb5873599da0f5e992dae0e0d370099', "button-type": "navigational", icon: "#close", tooltip: intl.globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
231
231
  }
232
232
  get el() { return index.getElement(this); }
233
233
  };
@@ -106,9 +106,9 @@ const Navigation = class {
106
106
  } }));
107
107
  }
108
108
  render() {
109
- return (index.h(index.Host, { key: '5b40d806975f417dee23aa78167627fc9a3f9d72', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (index.h("div", { key: 'bddd615e02d9874de3558210690ca8ac7b6ccf2d', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), index.h("div", { key: 'ee1408c8b9c3f5862bdab3dcaeb180fd167b7757', class: "tray" }, index.h("div", { key: '3a73a566af0da9d1b4f0224dd6952d3bef8fd352', class: "toggle-wrapper" }, index.h("wm-button", { key: '52b7bc99a664068bb619eb1054c992a2aa0107d3', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? intl.globalMessages.close : intl.globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
109
+ return (index.h(index.Host, { key: '8cb63fea2d7ac7e289acc8cb5794c8d05accc04c', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (index.h("div", { key: 'ac43c2473770b7432879ecb2f41a230e33e47b66', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), index.h("div", { key: '21e340e569e54067f6f635cd727ba574146eecdf', class: "tray" }, index.h("div", { key: '8d34ce5075c8f20d3de1d744df3dc939dcd3ce0c', class: "toggle-wrapper" }, index.h("wm-button", { key: 'de889f09b05c7241f640f325baefece78effc65a', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? intl.globalMessages.close : intl.globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
110
110
  this.open = !this.open;
111
- } })), index.h("ul", { key: '8804fdcf84efd7fcf6036527ab205533ce5f9ebc', class: "navlist" }, index.h("slot", { key: '276c2f3133776d91e2a05b5f7ec21a491b18363e' }))), this.isCollapsible && (index.h("div", { key: '492fbb7e7867529027176b8fb1418cf7f8d23cae', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
111
+ } })), index.h("ul", { key: 'da2c93f95f2b7bcabf16b754eb4a58b04b0e31d5', class: "navlist" }, index.h("slot", { key: '371cf565bae21d8e6918dc7cf62ba14b262d0283' }))), this.isCollapsible && (index.h("div", { key: '85237dab461ca52da501fccf7e34fff75d3e6c92', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
112
112
  }
113
113
  static get delegatesFocus() { return true; }
114
114
  get el() { return index.getElement(this); }
@@ -157,7 +157,7 @@ const NavigationHamburger = class {
157
157
  this.wmNavigationHamburgerClicked.emit();
158
158
  }
159
159
  render() {
160
- return (index.h(index.Host, { key: '2bb380d47bd0f49fb2611b10893903bb2945123d', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, index.h("button", { key: '41011c62a4ec97eb84bc6d630f5104973cf04ecb', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => functions.showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => this.isTabbing && functions.showTooltip("right", this.el, this.showNavMessage), onBlur: () => functions.hideTooltip(), onClick: () => this.handleClick() }, index.h("span", { key: 'df730048a83cc47366e24c7739f074b9f04ce245', class: "svg-icon svg-menu" }))));
160
+ return (index.h(index.Host, { key: '5d1beb47f712da876a5e6f166379c5ecbc190af1', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, index.h("button", { key: '4ea1b9448e8ef8182c4d9ad361bad8fc443ba8af', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => functions.showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => this.isTabbing && functions.showTooltip("right", this.el, this.showNavMessage), onBlur: () => functions.hideTooltip(), onClick: () => this.handleClick() }, index.h("span", { key: '1dc4ccebf80908aaf8dec0a7f0368b5bc035971c', class: "svg-icon svg-menu" }))));
161
161
  }
162
162
  static get delegatesFocus() { return true; }
163
163
  get el() { return index.getElement(this); }
@@ -176,7 +176,7 @@ const NavigationItem = class {
176
176
  this.active = undefined;
177
177
  }
178
178
  render() {
179
- return (index.h(index.Host, { key: '896eba521c8245df3e4e80188fa5d1cabe86d7f4', role: "listitem" }, index.h("a", { key: '8d180bbc189fde8666f0fabf2ad141b6c3be6714', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, index.h("div", { key: 'd190bffa8959e804dbd6da3a86addb48efa69187', class: "icon", "aria-hidden": "true" }, index.h("slot", { key: 'a0a06a351f6c2d39fb326b49cc20de6486554e2a' })), index.h("div", { key: 'ab842b2f46167a0a84807cc1b09e45cce0306c5a', class: "text" }, this.text))));
179
+ return (index.h(index.Host, { key: '665a361e913c5d5de049e448cb765dd66c5623e5', role: "listitem" }, index.h("a", { key: '17a4be1e44536ebb7aac8b58210013707cf8bad4', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, index.h("div", { key: '0e85384f0c29f72734a359302813c58a2dc202b3', class: "icon", "aria-hidden": "true" }, index.h("slot", { key: '67182d94f0d811d944075a0f26a490ea2e050715' })), index.h("div", { key: 'af5417bf3424da1df90cf208d332e58c60208394', class: "text" }, this.text))));
180
180
  }
181
181
  static get delegatesFocus() { return true; }
182
182
  get el() { return index.getElement(this); }
@@ -290,27 +290,29 @@ const NestedSelect = class {
290
290
  }
291
291
  }
292
292
  render() {
293
+ const showRequired = this.labelPosition !== "none" && this.requiredField;
293
294
  const buttonProps = {
294
295
  id: "selectbtn",
295
296
  ["disabled"]: this.isDisabled,
296
297
  ["aria-controls"]: "menu",
297
- ["aria-labelledby"]: "label selectbtn",
298
+ ["aria-labelledby"]: showRequired ? "label required selectbtn" : "label selectbtn",
298
299
  ["aria-describedby"]: "error",
299
300
  ["aria-expanded"]: this.isExpanded ? "true" : "false",
300
301
  onClick: () => {
301
302
  this.isExpanded ? this.close() : this.open();
302
303
  },
303
304
  };
304
- return (index.h(index.Host, { key: '28721d29f87913f39180ad0e72d68297e167aabd', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: '66bab6ee6ce7680e8795d7e51c942acf80e645fe', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '69a4693fc5b72bf30b2c4a36586f4e7f4481cc94', class: "label-wrapper" }, index.h("label", { key: '94e6e622fdb67ea8d1837d02717f96ce34dad927', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label),
305
- // we can't use aria-required because the listbox is in a sub-component and it is not announced
306
- this.labelPosition !== "none" && this.requiredField && (index.h("span", { key: '720f3d0e616acc6714f15b34648ade9fb8748bfe', class: "required" }, index.h("span", { key: 'a9f2ceb1e4b3a526f3b8568bd64ec3f07f072412', class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { key: 'b6845e93bddce7f1c4c17af38696812d59610040', "aria-hidden": "true" }, "*")))), index.h("div", { key: '3e52b56e33d917800929bc8bf5fd9e3afd2ae914', class: "button-wrapper" }, index.h("button", Object.assign({ key: '218ee825e9bce6b7105948c7ba6b84578389e4b8' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), index.h("span", { key: 'b9cb961706c6aa1234554ec3e4cd004b541bb50a', class: "overflowcontrol" }, index.h("span", { key: '4493aaa530ba9eb98eca6637f08c1194898ccaa3', class: "button-text" }, this.renderButtonText())), index.h("div", { key: '44877d1b10769a4129f512882c9aab5d250d42a0', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), index.h("div", { key: '8e43fa450da8d49640b8b2939a33375b4111d07f', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: 'ebd32788eed91b24e3cfa5170f38451f6f5dcf07', class: `dropdown ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), index.h("div", { key: 'a26fd5c0ca91f13eefb112e16eab701ee72cd2e7', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", class: this.isGroupExpanded ? "hidden" : "", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.optgroupEls.map((optgroupEl) => {
305
+ return (index.h(index.Host, { key: 'a68883c4b91d5657bf4205e5e4eea583f7b27da7', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: '208fe8e9504e1f5ac3c02b889b55690c16fd5579', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'ae05c832f67ae6fb126cc0a1d0e8c8b4e3e50fda', class: "label-wrapper" }, index.h("label", { key: '7251caee0c1dd0575b64746e3ca9bc8702796be2', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label),
306
+ // we can't use aria-required because the listbox is in a sub-component and it is not announced;
307
+ // instead the sr-only text is included in the button's aria-labelledby above
308
+ showRequired && (index.h("span", { key: 'e2a5d5a08880f83d0280df8527b46c60fc8f9db6', class: "required" }, index.h("span", { key: 'eccbd981c72ac77b46b0810f9652b5156eb6340c', class: "sr-only", id: "required" }, intl.globalMessages.requiredField), index.h("span", { key: '5ed448d3ef22f085bcff6cd70d2e9091ef2ffdb5', "aria-hidden": "true" }, "*")))), index.h("div", { key: '68c8510b8f441c3b2d3fb607332230d2ae8d6b81', class: "button-wrapper" }, index.h("button", Object.assign({ key: '996ee1b67e4e6b08ffffc97b47e0fafae2442298' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), index.h("span", { key: '3efb4b2135bdf475cc1c802264e2d1ce58c54700', class: "overflowcontrol" }, index.h("span", { key: 'ae40108a455f58eccc927c5e6dd7c81fca2ca588', class: "button-text" }, this.renderButtonText())), index.h("div", { key: 'e9db75cdde3506248394b20b49e70355e44318fa', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), index.h("div", { key: '2467344271355d03712b5a1d182cc78590e9e9b3', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: '4d90abd5757a5c76de2d7d0e3cecf16977806ba7', class: `dropdown ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.renderClearSelectionButton(), index.h("div", { key: '549d7d18a18d175e23e50d4978f0f53a1eb16d27', ref: (el) => (this.menuEl = el), id: "menu", role: "menu", class: this.isGroupExpanded ? "hidden" : "", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.optgroupEls.map((optgroupEl) => {
307
309
  return (index.h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
308
310
  if (!optgroupEl.disabled) {
309
311
  optgroupEl.isExpanded = !optgroupEl.isExpanded;
310
312
  index.forceUpdate(this.el);
311
313
  }
312
314
  }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, index.h("div", { class: "option-text" }, index.h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && index.h("div", { class: "disabled-indication" }, "Disabled")), index.h("div", { class: "svg-icon svg-next" })));
313
- })), index.h("div", { key: '9eaf77661f0a01d3baf83e5561758d7e72ad8ae0', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, index.h("slot", { key: 'fb8d468ebe73213c6bd9718a94bbb1c16867594c' }))), index.h("div", { key: '0f8c4ec2f26078d8c7acd94ec1dd1722eb26c073', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), index.h("div", { key: 'c06e2cef4a352f362363afb1129d439e62466672', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
315
+ })), index.h("div", { key: '016cecd76a346cada56d6c78e67f69e9a9e3c3f4', class: `option-list-wrapper ${this.isGroupExpanded ? "" : "hidden"}` }, index.h("slot", { key: 'dacc4ad67dee6da1495c927bf6640017b53be05f' }))), index.h("div", { key: '4fe7d19ef2b4ff86b6a8efbb7314af8ed3d7ddca', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), index.h("div", { key: '8eef1af6ecb84d46a52ead6573ccf119e00314b5', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
314
316
  }
315
317
  static get delegatesFocus() { return true; }
316
318
  get el() { return index.getElement(this); }
@@ -505,14 +505,16 @@ const Select = class {
505
505
  }
506
506
  render() {
507
507
  const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
508
- return (index.h(index.Host, { key: '4ea10bc4736006950d863a513f50a2a73366aa1e', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: '99363aab312b88e0847350e96b46d38049f5f489', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '60e13625d9336385f2179381f95af487bd050a02', class: "label-wrapper" }, index.h("label", { key: '197b112ab9956dbc672107a5c3e4d141d5e5cedf', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label),
509
- // we can't use aria-required because the listbox is in a sub-component and it is not announced
510
- this.labelPosition !== "none" && this.requiredField && (index.h("span", { key: 'fa40e8edbd624c23ef97237a44e9685b37d07bb6', class: "required" }, index.h("span", { key: 'fa1243a9724976c902a9779b989fc418da2de95c', class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { key: '33ba6df202208fe8436b9b6d8d9f91a160227626', "aria-hidden": "true" }, "*")))), index.h("div", { key: '053feab1a3b1d86c1de08ee3e75a80a6d32cee85', class: "button-wrapper" }, index.h("button", { key: 'd4d7f7e8546fa4af9e3a312f33d5a11b1f7b5000', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "info error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, index.h("span", { key: '8b52d96e728bb9b00c937f60850604e53b4a5dc7', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, index.h("span", { key: '09b96adf9c0c4d448e0986a533851d1ada9ffb65', class: "button-text" }, this.setButtonText()), showSubinfo && index.h("span", { key: '2ed26a53748db89f8cb9b275f9ff6a5f4595f890', class: "subinfo" }, this.selectedOptions[0].subinfo)), index.h("div", { key: '121c570df9bd3c76c49b67b1a21d013119919204', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), index.h("div", { key: '2eaadace0dc571cc37274ff0c64f8c2c2eaf6769', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: '4d832c2c7e867fef03f487f77c69f785e5c139d8',
508
+ const showRequired = this.labelPosition !== "none" && this.requiredField;
509
+ return (index.h(index.Host, { key: 'ced255b4952cb355e64a37c53d744f66dbb607fe', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: '7c29004c77f5982d459b476099108b9b152db617', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'fd4d15e1018687905a1849b2cce19f7b761467ec', class: "label-wrapper" }, index.h("label", { key: 'bfb1e40ea7b2c8045bf2d150ce19760ce02b34c6', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label),
510
+ // we can't use aria-required because the listbox is in a sub-component and it is not announced;
511
+ // instead the sr-only text is included in the button's aria-labelledby below
512
+ showRequired && (index.h("span", { key: '6738406a9664e94ff9c14ada164510515b7883c1', class: "required" }, index.h("span", { key: '9f80585f26399f3671ce0ec9d31d18865deb383c', class: "sr-only", id: "required" }, intl.globalMessages.requiredField), index.h("span", { key: '7265acc26874688ee8fd9cd39d9ba5dd6a13bbf1', "aria-hidden": "true" }, "*")))), index.h("div", { key: 'b4a0e36333f41f5b95da51423a5283e1a1311ad0', class: "button-wrapper" }, index.h("button", { key: 'ae8b2f9b05dba3bfc4c22887f779b3f764b8ac80', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": showRequired ? "label required selectbtn" : "label selectbtn", "aria-describedby": "info error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, index.h("span", { key: 'cc6aa528875619ffa66466c898c1615606f7e77a', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, index.h("span", { key: 'c0d399e401e2addd03956f97c17c025b30b59cb7', class: "button-text" }, this.setButtonText()), showSubinfo && index.h("span", { key: '2f59d1b2831538f79f20a7dbde8d5e51d1de481f', class: "subinfo" }, this.selectedOptions[0].subinfo)), index.h("div", { key: '807823299998d2a579081796b616be0e1914303b', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), index.h("div", { key: '8e02c61601f988efb3bb4946805465e29b52fd0d', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: '30e094628dd40cf00a7f596daa78ab08441cd474',
511
513
  // is-open is for the CSS transition in modern browsers
512
514
  // hidden is to wait for position calculations in Firefox
513
515
  class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.openUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
514
516
  // @ts-ignore -- don't tell typescript but we're in the future
515
- onToggle: (ev) => this.handleToggle(ev) }, index.h("priv-option-list", { key: 'f0dec6d41d9b7a57de96f1ee82f2456844dae69b', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
517
+ onToggle: (ev) => this.handleToggle(ev) }, index.h("priv-option-list", { key: 'f677d7abe768197d9a8b4062c58b3ff4771116a9', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
516
518
  this.dropdownEl.hidePopover();
517
519
  }, onOptionListAllSelected: () => {
518
520
  this.returnFocus = true;
@@ -520,7 +522,7 @@ const Select = class {
520
522
  }, onOptionListAllDeselected: () => {
521
523
  this.returnFocus = true;
522
524
  this.wmSelectAllDeselected.emit();
523
- } }, index.h("slot", { key: '06319b2201dc2e96e9f574380c6acebf0cd5b4bc' }))), this.info && (index.h("div", { key: 'e61705c1dcbbb5353a19b015753aaf91f8f25624', class: "info" }, this.info)), index.h("div", { key: 'd9baaf31ca16482e3fd973224bad33f11d93724a', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), index.h("div", { key: '6652f9df5408430cc6c88000aa407c45816698ca', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
525
+ } }, index.h("slot", { key: '4fba591bed450efbf8d242d9520399bb23613d61' }))), this.info && (index.h("div", { key: 'fe092e92f1f7bd54c205a314070bac19b47d7303', class: "info" }, this.info)), index.h("div", { key: 'efa10dc248cb71f8efe4570c7e872e939ca3e95d', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), index.h("div", { key: 'ebd8421a2140d1f15e7c12a026cc3587a0b6f222', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
524
526
  }
525
527
  static get delegatesFocus() { return true; }
526
528
  get el() { return index.getElement(this); }
@@ -215,7 +215,7 @@ const Pagination = class {
215
215
  render() {
216
216
  return (
217
217
  // do not render the component if there's only one page
218
- this.totalItems > this.itemsPerPage && (index.h("nav", { key: '8197306b3977ca7f6544aa790088cca8f6709bba', "aria-label": `${this.label || this.defaultLabel}. ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), index.h("div", { key: '9a62b67f0c0f6e2ae1b0d1d08d8c03cd383786d5', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
218
+ this.totalItems > this.itemsPerPage && (index.h("nav", { key: 'e301a9a346d7a6885027326af173a5a6cfbdca1f', "aria-label": `${this.label || this.defaultLabel}. ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), index.h("div", { key: '25fa0b35838d2dbd51d6e0716aeee38e8301294b', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
219
219
  }
220
220
  static get delegatesFocus() { return true; }
221
221
  get el() { return index.getElement(this); }
@@ -179,10 +179,10 @@ const Search = class {
179
179
  * End search and find render helpers
180
180
  */
181
181
  render() {
182
- return (index.h(index.Host, { key: '488f87868b91065f77fe107626494ec67b996c91' }, index.h("div", { key: '6347f94af6cb45632d68c5161f3308414077f1c0', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, index.h("input", { key: '7bdf47b77124ac8d4f3f7b26bc91adf4fb515d6c', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${functions.intl.formatMessage({
182
+ return (index.h(index.Host, { key: 'c0febdd688ee45668d2b3ba7967b0638691a79af' }, index.h("div", { key: '19ffc4058c251ce78d73e9d2c7fb5822287e557d', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, index.h("input", { key: 'c20b0676387be90dee092f49ceabf2b710e032f6', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${functions.intl.formatMessage({
183
183
  id: "search.typeToFilterResults",
184
184
  defaultMessage: "Type to filter the results",
185
- })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), index.h("span", { key: '759003335e1ebf23125dfd8ebcde4130b0b64389', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), index.h("div", { key: 'c776f2ea0291221d1dea69a339e6dd6340f70c3e', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
185
+ })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), index.h("span", { key: '3670d562d836b1541aac89679535e5b4b4f4d7ef', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), index.h("div", { key: 'a18efbe6ebbff2c54c9bb6c02bcc35fd40d75e18', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
186
186
  }
187
187
  static get delegatesFocus() { return true; }
188
188
  get el() { return index.getElement(this); }
@@ -160,11 +160,11 @@ const Snackbar = class {
160
160
  }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, index.h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && index.h("div", { class: "svg-icon svg-open-in-new" }))), (!notification.link && notification.action) && (index.h("button", { id: `action-${notification.id}`, class: "link", onClick: () => this.snackLinkClicked(notification), onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, notification.action))), index.h("button", { id: `close-button-${notification.id}`, "aria-label": this.closeSnackMessage, class: "closesnack", tabindex: notification.link || notification.action ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onMouseLeave: () => functions.hideTooltip(), onFocus: (ev) => this.isTabbing && functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onBlur: () => functions.hideTooltip() }, index.h("div", { class: "svg-icon svg-close" }))), index.h("div", { class: "sr-only", tabindex: notification.link || notification.action ? 0 : -1, onFocus: () => (notification.link || notification.action) && this.snackDismissed(notification) })))));
161
161
  }
162
162
  render() {
163
- return (index.h(index.Host, { key: '01e620368efc9d0fc854a5b539dcfa695b6c5e5d' }, index.h("div", { key: '156973ac3ea2f3e3034e4517b4852357c81b9af3', ref: (el) => (this.snackAreaEl = el), class: {
163
+ return (index.h(index.Host, { key: 'f78ea7809df466e6a34f1b1fafaa6729fb9a8dcf' }, index.h("div", { key: '27ecea571e660d3de9280d56594e2bef26b451a7', ref: (el) => (this.snackAreaEl = el), class: {
164
164
  "list-wrapper": true,
165
165
  "user-is-tabbing": this.isTabbing,
166
166
  empty: this.parsedNotifications.length == 0,
167
- } }, this.renderSnackbars()), index.h("div", { key: '3f674c9094ef2a400452ec03c571da42287374d3', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
167
+ } }, this.renderSnackbars()), index.h("div", { key: 'ba10259a8a04a8006a22bdec6317871c6f8fa569', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
168
168
  }
169
169
  get el() { return index.getElement(this); }
170
170
  static get watchers() { return {
@@ -41,9 +41,9 @@ const TabItem = class {
41
41
  }
42
42
  render() {
43
43
  const isDark = this.parentTabList && this.parentTabList.customBackground == "dark";
44
- return (index.h(index.Host, { key: '6f20f986a33ca8c78166874c6e6150931b293c33', role: "presentation" }, index.h("li", { key: '39e5f0e8b30e9b6e43757685a973b83260e95d23', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, index.h("a", { key: 'bffa53dc07bbdabf6e553c1bd045da3193c8e049', class: `tab`, role: "tab", ref: (el) => (this.linkEl = el), id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1, onClick: this.tabClicked, onFocus: () => {
44
+ return (index.h(index.Host, { key: '3618b1f157b1ba203f0a7c6d833bc1cffc1cdb29', role: "presentation" }, index.h("li", { key: 'e39008c432e624d081f809e194972ef1b22faf8e', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, index.h("a", { key: 'aaa29b9cb2d05b63c01d70fbd4d46270619068f1', class: `tab`, role: "tab", ref: (el) => (this.linkEl = el), id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1, onClick: this.tabClicked, onFocus: () => {
45
45
  this.wmIntTabFocused.emit({ tabItem: this.el });
46
- } }, index.h("slot", { key: 'cf5d8ed8e74286563f5ecccd04bd8c1f5a3f7ea2' })))));
46
+ } }, index.h("slot", { key: '9aa2edb5576a2a552e447cc0f006669875c85114' })))));
47
47
  }
48
48
  static get delegatesFocus() { return true; }
49
49
  get el() { return index.getElement(this); }
@@ -311,15 +311,15 @@ const TabList = class {
311
311
  this.announcement = message;
312
312
  }
313
313
  render() {
314
- return (index.h(index.Host, { key: '6b04fe63825c1f6296240039531cb4825a4073d0' }, index.h("div", { key: 'd03390499fe7b2da2788dad9f9d2504eb373ab73', class: "component-wrapper" }, index.h("wm-button", { key: '52b02bf3142d7f2807409f75094a3e49ef85d31b', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: functions.intl.formatMessage({
314
+ return (index.h(index.Host, { key: '993fd37ad7196da597d0dc6c434b8c21300d8514' }, index.h("div", { key: 'bd81750389b2df6a8b9aa53908937460cbb50ab1', class: "component-wrapper" }, index.h("wm-button", { key: 'd1ce3d5c58d9ff54c139456e5aa5eb92bacb3f1d', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: functions.intl.formatMessage({
315
315
  id: "tabs.showPreviousTabs",
316
316
  defaultMessage: "Show previous tabs",
317
317
  description: "Tooltip for button scrolling tab group.",
318
- }), onClick: (ev) => this.handleLeftArrowClick(ev) }), index.h("ul", { key: 'c93f0456d5ccb062fbdfabaef4b057caddfc032d', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, index.h("slot", { key: '0c0f64bb1866f4764c9a9e2e6f504a2a1e10d2bf' })), index.h("wm-button", { key: '6562a34d69b9cf7a90da7759b12d92940c9c081b', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: functions.intl.formatMessage({
318
+ }), onClick: (ev) => this.handleLeftArrowClick(ev) }), index.h("ul", { key: 'c46aa8946e82fdc7e3a28c45f9eec8c468ba7439', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, index.h("slot", { key: '5a7fc1409af3fb2aa19428bbfca0d5a4e52316ba' })), index.h("wm-button", { key: '6c689fd91c790e9d0cab08082b185385cfbce67b', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: functions.intl.formatMessage({
319
319
  id: "tabs.showNextTabs",
320
320
  defaultMessage: "Show next tabs",
321
321
  description: "Tooltip for button scrolling tab group.",
322
- }), onClick: (ev) => this.handleRightArrowClick(ev) }), index.h("span", { key: '4839d0fbdd5c5aeb7ba8f918d973af5c54cc01fd', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
322
+ }), onClick: (ev) => this.handleRightArrowClick(ev) }), index.h("span", { key: 'dfc8bc859e7928f0b65f44419d9f649d14c763f4', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
323
323
  }
324
324
  static get delegatesFocus() { return true; }
325
325
  get el() { return index.getElement(this); }
@@ -346,7 +346,7 @@ const TabPanel = class {
346
346
  this.tabPanelLoaded.emit({ tabId: this.tabId });
347
347
  }
348
348
  render() {
349
- return index.h(index.Host, { key: 'aa6da7f526aefe3a900afb883c3d2dd2af421a0d', role: "tabpanel", tabIndex: "-1", class: { "tab-hidden": !this.active } });
349
+ return index.h(index.Host, { key: '64fa712a43e184155bb8b43a644bc5c13c7669ce', role: "tabpanel", tabIndex: "-1", class: { "tab-hidden": !this.active } });
350
350
  }
351
351
  get el() { return index.getElement(this); }
352
352
  };
@@ -943,10 +943,10 @@ const TagInput = class {
943
943
  }
944
944
  }
945
945
  render() {
946
- return (index.h("div", { key: 'bbca01cbc44e1da702756083252564862966c255', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '9d43d1747cbfbc997166162f28a5d4a4ec2f47ec', class: "label-wrapper" }, index.h("label", { key: '43da61c5e02264bbd3c0d8a11a3b8bc722ce6deb', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '89ad60b2987a505a4c09d5e02d3845007319c272', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: '5eefb03180e2becd90c7161e5b56888f3a3e303d', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, index.h("div", { key: '1126555b4620df53fd03713f926bd9778ce97e52', class: "upper-row" }, index.h("div", { key: '6f9959e5b959455381f9339e8ba9747f6df0aa5e', class: "svg-icon svg-search" }), index.h("div", { key: 'd52aabc7cc61db1c467004530885fe57fec192d4', class: `tags-and-input-wrapper` }, index.h("ul", { key: '0ecbbc94e609d200a917704ac71d742da8310d93', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
946
+ return (index.h("div", { key: '640a70ccebab0056bc389299d01d84e3cd8f10ae', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'ac971e515ca1e9db1d240909f902b34e9e984c7e', class: "label-wrapper" }, index.h("label", { key: '46fe662e59425fbd3b85be57d211c5990a715e60', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: '638047c3443ff5991bdb4eac506ed8e9e5f3eb8e', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: '0e2d1f9a7b4c4427caf8d1a095a758b868316135', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, index.h("div", { key: '092ee2d218336d52c4126d6c986950da99aab8e5', class: "upper-row" }, index.h("div", { key: 'da6c1eadfd1125716a2fdf2a4b9dbabb201d30c2', class: "svg-icon svg-search" }), index.h("div", { key: '953c175c6ddccb4f1a745edbf4fb67a78bdf4b73', class: `tags-and-input-wrapper` }, index.h("ul", { key: '47750731e93832464c2cf2715307a962ca06a8b9', ref: (el) => (this.tagAreaEl = el), class: `tag-area ${this.taggedOptions.length === 0 && "empty"} ${this.isKeying ? "user-is-keying" : ""}`, role: "listbox", "aria-activedescendant": this.focusedTag ? this.focusedTag.id : null, "aria-orientation": "horizontal", "aria-labelledby": "sr-instructions", tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
947
947
  this.focusedTagIndex = undefined;
948
948
  this.handleBlur(ev);
949
- }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), index.h("div", { key: '2f23e0833ea6d08321062a9a09a7230de5d24eca', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (index.h("div", { key: 'e292ac2e0790ba252e27968b8e108af86f9010a5', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (index.h("div", { key: 'fde186687d41ba64eb463ab33ddcc8a8da86ed8f', id: "info", class: "info-text" }, this.info)), index.h("div", { key: '380930f929407090f129b2a88c5f3821c53a29ac', id: "error" }, this.errorMessage), index.h("div", { key: 'ab3402d6883008861ac0c524b8c27c2d688f2df1', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
949
+ }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), index.h("div", { key: 'c570397e9cbdc1233d3727d23a8838444baa3259', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (index.h("div", { key: 'c7d60ecb6dbef20d1f001e8838a4b44fe87e99e6', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (index.h("div", { key: '73f39cc351095ce6f135406d772129d2bb7fc876', id: "info", class: "info-text" }, this.info)), index.h("div", { key: '83717816d5d9885550ada0b2711460f472b2db72', id: "error" }, this.errorMessage), index.h("div", { key: 'b357dd0b58cfd2c62af27717d32f1b9eba1ed092', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
950
950
  }
951
951
  static get delegatesFocus() { return true; }
952
952
  get el() { return index.getElement(this); }
@@ -81,7 +81,7 @@ const Textarea = class {
81
81
  this.announcement = message;
82
82
  }
83
83
  render() {
84
- return (index.h("div", { key: 'cec7802d05a18e1d8f2d50e1d668a9a1b76451fe', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'e5ff3f72c1db7521369bf3ae25b2cdc4d3a4634b', class: "label-wrapper" }, index.h("label", { key: 'dd8260b287f8f7737e274b811afbce56126e8762', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label, this.characterLimit && (index.h("span", { key: '92426b4052d1e3788211048e5713c0906d35d6de', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (index.h("span", { key: 'fc6a6f91ccd8548d1ccbd18467165f5538c99e1b', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: 'fd95965c0861809b15196651c4e315d28eeb3a91', class: "inner-wrapper" }, index.h("div", { key: 'e3887e5013ed9ae38605e8031378b8b1d560cff2', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, index.h("textarea", { key: 'ad6da06248c0200c372f4ccb6a12d10829141e61', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (index.h("div", { key: 'd58ba69caa849d2046178fe4ef6f52f2dad9cadd', id: "info", class: "info" }, this.info)), index.h("div", { key: 'd072da4faddf105cf8a0692e9e3b24ffb2c6dfb4', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: '5ab6146e581e1c4ff2f65bd258862f9fb420a4c4', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
84
+ return (index.h("div", { key: 'eb4d219f171a22824422c743631b0543fcb3e88d', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '1f3c97d11cdebc8e027557a45b7e24e3aa5a8786', class: "label-wrapper" }, index.h("label", { key: '4779c1ccdca666484405938d66ed4211ba8276da', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label, this.characterLimit && (index.h("span", { key: '4b99f85729a23f39589e9b4910daaa09d6e229af', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (index.h("span", { key: '824e6c762505edae20fcce0fa3c790633d929f0d', class: "required", "aria-hidden": "true" }, "*"))), index.h("div", { key: '92814c32245d9ae69d3b8631236c3c7ddcc8552f', class: "inner-wrapper" }, index.h("div", { key: 'b838697433aa0fbfa7814d87f00cf06a41d1f489', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, index.h("textarea", { key: 'b2998ed48399e44f8eec90a47a7fbd2c3523884c', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (index.h("div", { key: '9328ab50ac29585c0337fa3070685d57ff587754', id: "info", class: "info" }, this.info)), index.h("div", { key: '340b8b46519c2c1a50ed2eb85d9f1f198f5d8be9', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: '26bf56597d4ac27be5127861021dace5ff1ca548', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
85
85
  }
86
86
  get el() { return index.getElement(this); }
87
87
  static get watchers() { return {
@@ -304,13 +304,13 @@ const Timepicker = class {
304
304
  return this.times.map((time, index$1) => (index.h("li", { id: `option${index$1 + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
305
305
  }
306
306
  render() {
307
- return (index.h(index.Host, { key: 'b40d08bcc3ed45ce20097cb93b686980d5fc8bf8', onBlur: () => this.close(false) }, index.h("div", { key: 'ffdfde0f4bdc7f1919cc53b7de00d37b05008d09', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, index.h("div", { key: '9b578bbf269e763fb9c442d7ae5919918cba33e2', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: '2ffea32a87695ec10bc65732dcc48670a4f67c2d', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: 'b18abce3643946bb4351211f810b6a4b3d6ff7ec', "aria-hidden": "true", class: "required" }, "*"))), index.h("div", { key: '24ef6cb1056aec34e083cfdc31856eb3aba9d7a8' }, index.h("div", { key: '3e7a215fc35fe9a7cd90761a9299fcf107e931d5', class: "inner-wrapper" }, index.h("input", { key: 'a44f2dd6bd136e898f240bd7a5e21bdeaac535b0', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), index.h("button", { key: '167735fc61727d9b6f068881732fcf7e2ff0c167', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
307
+ return (index.h(index.Host, { key: '016a1f00b245ba172f3f169dd2a5fe5506efefd3', onBlur: () => this.close(false) }, index.h("div", { key: 'e831d564c3f40c550c64232315c70abe9f18d2b5', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, index.h("div", { key: 'afcbacb671fe9e6cf92c16ab8152c2ff42114fba', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: '607dc37f7571ea67e5cf7163cc3d58d7e4fdd2b2', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => functions.hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (index.h("div", { key: 'fd5a00ab8125419c3a046cc7d1dacc3ea84595d5', "aria-hidden": "true", class: "required" }, "*"))), index.h("div", { key: 'cd371331471f604571197a0f5b560f84533dbdc5' }, index.h("div", { key: 'e99fb3f0ad4432f42292c4263c5953d54bd43b20', class: "inner-wrapper" }, index.h("input", { key: '4d98f9bdd05127f9f62849f06c18ebbe363f4d09', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), index.h("button", { key: '0f239c4fbaa9882c1e7195fbf21e28b304f08d85', id: "btn", ref: (el) => (this.buttonEl = el), disabled: this.isDisabled, "aria-controls": "list", "aria-expanded": this.isExpanded ? "true" : "false", "aria-label": this.buttonAriaLabel, "aria-describedby": "time-input", onClick: () => (this.isExpanded ? this.close() : this.open()),
308
308
  // This addresses an issue in Safari, where clicking buttons does not focus them
309
309
  // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
310
310
  onMouseDown: (ev) => {
311
311
  ev.preventDefault();
312
312
  this.buttonEl.focus();
313
- } }, index.h("span", { key: 'c1f5954ccd548070d23e87eb612f60530193d7b1', class: "svg-icon svg-time" })), index.h("ul", { key: '766906f94f132aaa6448558fa07d19c08881f188', class: `options ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), index.h("div", { key: 'fc20e9078d5f1a309e0e16c49704c73415cf291c', id: "error", class: "error" }, this.errorMessage)), index.h("div", { key: 'ad8120274f5f3a671c92d4b1a7663f51338db2cf', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
313
+ } }, index.h("span", { key: '526bb1be8422122744f54b89eac5b165ba21093d', class: "svg-icon svg-time" })), index.h("ul", { key: '463c60e7e63ebb96b6235b6e70c684f8e16bf286', class: `options ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), index.h("div", { key: '953f663fc062c4ed512d34b86b462c879de715c9', id: "error", class: "error" }, this.errorMessage)), index.h("div", { key: 'f213fc5946d1dff54582211ec45b9ab970f95c40', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
314
314
  }
315
315
  static get delegatesFocus() { return true; }
316
316
  get el() { return index.getElement(this); }
@@ -238,11 +238,11 @@ const Toggletip = class {
238
238
  }
239
239
  }
240
240
  render() {
241
- return (index.h(index.Host, { key: '321d03ab95c9e77b4e2b23fd833231e6fa03c64e', class: `size-${this.targetSize}` }, index.h("button", { key: '4d529ff8aa85c7802dbeca145ee0b82d6880d6db', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => !this.isOpen && this.open(),
241
+ return (index.h(index.Host, { key: 'f345461d843619f11ea783e6918968e4e5867720', class: `size-${this.targetSize}` }, index.h("button", { key: '8439741b61569e3ca58016982679f8157f28e0c2', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => !this.isOpen && this.open(),
242
242
  // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
243
- onMouseEnter: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: 'ccc4a3a9dfa81a1b0dd8fb4ecbca7976f2aff6dc', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
243
+ onMouseEnter: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => !this.isOpen && functions.showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), index.h("div", { key: '38c98942ca1bd5101e3155a3c48a2571a7523388', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
244
244
  // @ts-ignore - despite what Typescript says, this is a valid event for popover elements
245
- onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), index.h("div", { key: '9dbfd9cf354be99641757f5a3495725b0e9c5485', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
245
+ onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), index.h("div", { key: '2869c2962e8f77e62b923dd05995f9cf7133ad75', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
246
246
  }
247
247
  static get delegatesFocus() { return true; }
248
248
  get el() { return index.getElement(this); }