@watermarkinsights/ripple 5.12.0-11 → 5.12.0-13

package/dist/collection/components/datepickers/wm-datepicker.js

@@ -212,23 +212,23 @@ export class DatePicker {
         this.liveRegionEl.textContent = message;
     }
     render() {
-        return (h(Host, { "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { "aria-hidden": "true", class: "required" }, "*"))))), h("div", null, h("div", { class: "single-wrapper input" }, h("input", { disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { class: "container", id: "wm-container" }, h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
+        return (h(Host, { key: '85687dcb3b87ff6b660797b7e8ceef84a9710deb', "aria-busy": "false", class: `${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'c64159f0ecc1ce84fda38106b54d7fa49a79fc65', ref: (d) => (this.dpWrapperEl = d), class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '43bed05cd8ddf12279fd007fac3be60ce20864f8', class: "label-wrapper", ref: (e) => (this.labelWrapperEl = e) }, this.labelPosition !== "none" && (h("label", { key: '9acaee7a5ed8a29971813a06a5051c2838c13065', id: "datepickerLabel", htmlFor: "date-input", class: "label", title: `${this.label} (${this.dateFormat})` }, this.label, this.requiredField && (h("span", { key: 'f3e1f8719fcc6ead12968215e2731d95b2603956', "aria-hidden": "true", class: "required" }, "*"))))), h("div", { key: '0c041afacda26e06e15275eb92f430f7d9a16520' }, h("div", { key: '25af5c4db0a4efa3310c039046541651c2f58a25', class: "single-wrapper input" }, h("input", { key: 'ba297de98ddb0c85ddac0b20f5f177b186956ded', disabled: this.isDisabled, type: "text", id: "single-date-input", class: "date-input", name: "date", placeholder: this.dateFormat, value: this.value, onFocus: () => this.handleInputFocus(), onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleInputBlur(), onChange: () => this.handleInputChange(), ref: (input) => (this.inputEl = input), "aria-describedby": "error", "aria-label": this.label, "aria-required": this.requiredField ? "true" : null }), h("div", { key: 'd4c145ebda9243d464b077a250ea272090e1e9bd', class: "container", id: "wm-container" }, h("button", { key: '630191453f20cbe48e919a91928c2120ca41f66e', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-label": intl.formatMessage({
                 id: "date.selectDate",
                 defaultMessage: "Select date",
                 description: "Button text for screen readers.",
-            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "svg-icon svg-date" }), h("span", { class: "calendar", title: intl.formatMessage({
+            }), "aria-describedby": "single-date-input", ref: (el) => (this.toggleEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: '8d418c81d6dcb4ab2155729be5634ee7a2566048', class: "svg-icon svg-date" }), h("span", { key: '5100cad9f4ed307d753499710853de95e81c04e8', class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })), h("div", { class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, h("div", { tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { id: "month-title", class: "sr-only" }, intl.formatMessage({
+            }) })), h("div", { key: '36d24aeb7e59ae59284596ad362eb5459a9ad1de', class: `popup-wrapper ${this.calEl && this.calEl.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup-wrapper", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true) }, h("div", { key: '52e0c98a890204e111f6c508177181bf69c5af28', tabIndex: 0, onFocus: () => this.calEl.focusLastFocusable() }), h("priv-calendar", { key: '12ed17f4c034aff9be9421046d52ffc4e745c929', ref: (el) => (this.calEl = el), startDate: this.calendarDate, focusDate: this.calendarDate, class: "inside" }), h("div", { key: 'c4b913e51442e1e57805934fd9071cc8796ca551', tabIndex: 0, onFocus: () => this.calEl.focusFirstFocusable() })), h("div", { key: '4194d3665db2426ea6600f01f014735c6f49c7c4', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '538a624beb90096a1368873b8f044b0ff32bf125', id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { key: '37b0366f3742eff0d38993c60e132759683cfc18', id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })))), h("div", { id: "error", class: "error" }, this.errorMessage), h("div", { ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
+        })))), h("div", { key: 'b21dcace67f1f10949bfa1ed0238ddbff738a2f5', id: "error", class: "error" }, this.errorMessage), h("div", { key: 'cf362caa31e7a5951365a3e3a63d119d58f746f5', ref: (el) => (this.liveRegionEl = el), class: "sr-only", "aria-live": "polite", "aria-atomic": "true" })))));
     }
     static get is() { return "wm-datepicker"; }
     static get encapsulation() { return "shadow"; }
@@ -433,14 +433,17 @@ export class DatePicker {
                 "complexType": {
                     "signature": "(inputFormat: string, outputFormat: string, date?: string) => Promise<string>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "inputFormat",
+                            "type": "string",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "outputFormat",
+                            "type": "string",
+                            "docs": ""
                         }, {
-                            "tags": [],
-                            "text": ""
+                            "name": "date",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -459,8 +462,9 @@ export class DatePicker {
                 "complexType": {
                     "signature": "(input?: string) => Promise<boolean>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "input",
+                            "type": "string | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/selects/priv-option-list/priv-option-list.js

@@ -1,33 +1,18 @@
 import { h, forceUpdate } from "@stencil/core";
-import { intl, debounce, isElOrChild } from "../../../global/functions";
+import { debounce, isElOrChild } from "../../../global/functions";
+import { selectMessages } from "../../../global/intl";
 export class PrivOptionList {
     constructor() {
         this.searchIndex = 0;
         this.keysSoFar = "";
-        this.selectAllMessage = intl.formatMessage({
-            id: "select.selectAll",
-            defaultMessage: "Select All",
-        });
-        this.deselectAllMessage = intl.formatMessage({
-            id: "select.deselectAll",
-            defaultMessage: "Deselect All",
-        });
-        this.allOptionsSelectedMessage = intl.formatMessage({
-            id: "select.allOptionsSelected",
-            defaultMessage: "All options selected",
-        });
-        this.allOptionsDeselectedMessage = intl.formatMessage({
-            id: "select.allOptionsDeselected",
-            defaultMessage: "All options deselected",
-        });
         this.debouncedSearch = debounce(() => {
             this.searchTerm = this.searchFieldEl.value;
             this.optionListSearchChanged.emit({ searchTerm: this.searchTerm });
             if (this.filteredOptions.length) {
-                this.announce(this.resultsFoundMessage);
+                this.announce(selectMessages.getSearchResultsFound(this.filteredOptions.length));
             }
             else {
-                this.announce(this.noResultsFoundMessage);
+                this.announce(selectMessages.noSearchResults);
             }
         }, 150);
         this.debouncedClearKeysSoFar = debounce(() => {
@@ -77,20 +62,6 @@ export class PrivOptionList {
         return this.childOptions.every((option) => option.selected);
     }
     //////////////////////////////////////
-    get resultsFoundMessage() {
-        return intl.formatMessage({
-            id: "select.searchResultsFound",
-            defaultMessage: "{numResults, plural, one {1 option found} other {# options found}}",
-            description: "The message read by the screen reader, indicating how many results a search returned",
-        }, { numResults: this.filteredOptions.length });
-    }
-    get noResultsFoundMessage() {
-        return intl.formatMessage({
-            id: "select.noSearchResults",
-            defaultMessage: "No results found. Please try your search again.",
-            description: "The message displayed when no options pass the search filter",
-        });
-    }
     get effectiveMaxHeight() {
         let result = this.maxHeight;
         if (this.upwardsHeightLimit && this.el.parentElement.clientHeight > this.upwardsHeightLimit) {
@@ -295,11 +266,11 @@ export class PrivOptionList {
         this.allSelected ? this.deselectAllOptions() : this.selectAllOptions();
     }
     selectAllOptions() {
-        this.announce(this.allOptionsSelectedMessage);
+        this.announce(selectMessages.allOptionsSelectedMessage);
         this.optionListAllSelected.emit();
     }
     deselectAllOptions() {
-        this.announce(this.allOptionsDeselectedMessage);
+        this.announce(selectMessages.allOptionsDeselectedMessage);
         this.optionListAllDeselected.emit();
     }
     moveUp(el) {
@@ -370,20 +341,12 @@ export class PrivOptionList {
     }
     renderReturnBtn() {
         const selectionCount = this.childOptions.filter((o) => o.selected).length;
-        const singleSelectionCountMessage = intl.formatMessage({
-            id: "select.optgroupSingleSelectionCount",
-            defaultMessage: "Item Selected",
-            description: "Text indicating number of selected in a group, where only a single selection is possible.",
-        }, { numSelected: selectionCount });
-        const multipleSelectionCountMessage = intl.formatMessage({
-            id: "select.optgroupMultipleSelectionCount",
-            defaultMessage: "{numSelected} Selected",
-            description: "Text indicating number of selected in a group, where multiple selections are possible.",
-        }, { numSelected: selectionCount });
         return (h("button", { ref: (el) => (this.returnBtnEl = el), id: "return-btn", class: "return-btn", onKeyDown: (ev) => this.handleKeyDown(ev), onClick: () => {
                 //@ts-ignore -- Check out this one weird trick TypeScript doesn't want you to know about
                 this.el.getRootNode().host.isExpanded = false;
-            } }, h("div", { class: "svg-icon svg-previous" }), h("div", { class: "return-btn-label" }, this.optgroupLabel, selectionCount > 0 && (h("span", { class: "selection-count" }, this.multiple ? multipleSelectionCountMessage : singleSelectionCountMessage)))));
+            } }, h("div", { class: "svg-icon svg-previous" }), h("div", { class: "return-btn-label" }, this.optgroupLabel, selectionCount > 0 && (h("span", { class: "selection-count" }, this.multiple
+            ? selectMessages.getOptgroupMultipleSelectionCount(selectionCount)
+            : selectMessages.optgroupSingleSelectionCount)))));
     }
     renderSearchField() {
         return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "svg-icon svg-search" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": "list",
@@ -391,10 +354,10 @@ export class PrivOptionList {
             onKeyDown: (ev) => this.handleKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
     }
     renderSearchFailedMessage() {
-        return h("div", { class: "search-results-message" }, this.noResultsFoundMessage);
+        return h("div", { class: "search-results-message" }, selectMessages.noSearchResults);
     }
     renderSelectAllButton() {
-        return (h("button", { ref: (el) => (this.selectAllEl = el), class: "select-all", onClick: () => this.handleSelectAllClick(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: "-1" }, this.allSelected ? this.deselectAllMessage : this.selectAllMessage));
+        return (h("button", { ref: (el) => (this.selectAllEl = el), class: "select-all", onClick: () => this.handleSelectAllClick(), onKeyDown: (ev) => this.handleKeyDown(ev), tabindex: "-1" }, this.allSelected ? selectMessages.deselectAllMessage : selectMessages.selectAllMessage));
     }
     renderCloneOptions() {
         return Array.from(this.childOptions).map((o) => {
@@ -406,7 +369,7 @@ export class PrivOptionList {
         return (h("div", { class: "non-options-wrapper" }, this.isInNestedSelect && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton()));
     }
     render() {
-        return (h("div", { class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null)), h("div", { id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        return (h("div", { key: '9bff5e1fd9c47e6a53a08771b7828006df908d65', class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { key: '9064ef7a435327acd64c8789fd17fdd68c915892', id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", { key: '42862b03eebe938669c91532d6bf5802912be520' })), h("div", { key: 'e74fd4a6d036b8eeade85b7048530b664147ccc3', id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "priv-option-list"; }
     static get originalStyleUrls() {
@@ -690,8 +653,9 @@ export class PrivOptionList {
                 "complexType": {
                     "signature": "(option: HTMLElement) => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "option",
+                            "type": "HTMLElement",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {
@@ -714,8 +678,9 @@ export class PrivOptionList {
                 "complexType": {
                     "signature": "(optionToSelect?: \"next\" | \"previous\") => Promise<void>",
                     "parameters": [{
-                            "tags": [],
-                            "text": ""
+                            "name": "optionToSelect",
+                            "type": "\"next\" | \"previous\" | undefined",
+                            "docs": ""
                         }],
                     "references": {
                         "Promise": {

package/dist/collection/components/selects/wm-nested-select/wm-nested-select.js

@@ -1,22 +1,14 @@
 import { h, Host, forceUpdate } from "@stencil/core";
-import { getContextMeasurements, getTextDir, intl, isElOrChild, shouldOpenUp, toBool } from "../../../global/functions";
-import { globalMessages } from "../../../global/intl";
+import { getContextMeasurements, getTextDir, isElOrChild, shouldOpenUp, toBool } from "../../../global/functions";
+import { globalMessages, selectMessages } from "../../../global/intl";
 export class NestedSelect {
     constructor() {
         this.openUp = false;
         this.overflowCount = 0;
         this.displayedOptions = [];
         this.clearSelectionMessage = this.multiple
-            ? intl.formatMessage({
-                id: "select.multiClearSelection",
-                defaultMessage: "Clear all Selections",
-                description: "Button text to clear selection. Use imperative",
-            })
-            : intl.formatMessage({
-                id: "select.singleClearSelection",
-                defaultMessage: "Clear Selection",
-                description: "Button text to clear selection. Use imperative",
-            });
+            ? selectMessages.multiClearSelection
+            : selectMessages.singleClearSelection;
         this.disabled = false;
         this.maxHeight = "200px";
         this.label = undefined;
@@ -26,27 +18,9 @@ export class NestedSelect {
         this.multiple = false;
         this.search = false;
         this.selectAll = false;
-        this.placeholder = this.multiple
-            ? intl.formatMessage({
-                id: "select.multiPlaceholder",
-                defaultMessage: "Make a selection",
-                description: "Placeholder text for multiple select. Use imperative",
-            })
-            : intl.formatMessage({
-                id: "select.singlePlaceholder",
-                defaultMessage: "Select an Option",
-                description: "Placeholder text for single select. Use imperative",
-            });
-        this.searchPlaceholder = intl.formatMessage({
-            id: "select.searchPlaceholder",
-            defaultMessage: "Search",
-            description: "Placeholder text. Use imperative",
-        });
-        this.allSelectedMessage = intl.formatMessage({
-            id: "select.allSelected",
-            defaultMessage: "All selected",
-            description: "Text displayed when all options are selected",
-        });
+        this.placeholder = this.multiple ? selectMessages.multiPlaceholder : selectMessages.singlePlaceholder;
+        this.searchPlaceholder = selectMessages.searchPlaceholder;
+        this.allSelectedMessage = selectMessages.allSelected;
         this.isExpanded = false;
         this.showClearSelectionButton = false;
         this.announcement = "";
@@ -282,12 +256,7 @@ export class NestedSelect {
     }
     handleClearSelection() {
         this.optgroupEls.forEach((optgroupEl) => optgroupEl.emitDeselection());
-        const selectionClearedAnnouncement = intl.formatMessage({
-            id: "select.selectionCleared",
-            defaultMessage: "Selection cleared",
-            description: "Screen reader announcement alerting the user they have cleared their selection",
-        });
-        this.announce(selectionClearedAnnouncement);
+        this.announce(selectMessages.selectionCleared);
         if (!this.multiple) {
             this.close();
         }
@@ -300,17 +269,9 @@ export class NestedSelect {
     renderSelectionCount(optgroupEl) {
         const selectionCount = this.countOptgroupSelected(optgroupEl);
         if (selectionCount) {
-            const singleSelectionCountMessage = intl.formatMessage({
-                id: "select.optgroupSingleSelectionCount",
-                defaultMessage: "Item Selected",
-                description: "Text indicating number of selected in a group, where only a single selection is possible.",
-            }, { numSelected: selectionCount });
-            const multipleSelectionCountMessage = intl.formatMessage({
-                id: "select.optgroupMultipleSelectionCount",
-                defaultMessage: "{numSelected} Selected",
-                description: "Text indicating number of selected in a group, where multiple selections are possible.",
-            }, { numSelected: selectionCount });
-            return (h("div", { class: "selection-count" }, h("span", null, this.multiple ? multipleSelectionCountMessage : singleSelectionCountMessage)));
+            return (h("div", { class: "selection-count" }, h("span", null, this.multiple
+                ? selectMessages.getOptgroupMultipleSelectionCount(selectionCount)
+                : selectMessages.optgroupSingleSelectionCount)));
         }
     }
     render() {
@@ -325,16 +286,16 @@ export class NestedSelect {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { key: '35b5a920424ccf73ba6c0f8b073660bc55f11d13', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '4a6083fd7d7a37484a11f76e23b09b38c45c5efc', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'f04741975bfc4f279c599fce8c75d388b8c4cd1b', class: "label-wrapper" }, h("label", { key: 'a736b71a96766ddbc7a9117edc93a9c4f726cadc', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { class: "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText())), h("div", { class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '3b7e545c988aa5632f6642724c014833626cab84', class: "button-wrapper" }, h("button", Object.assign({ key: '25b334f4ca5c404caa0c0247bf55b4f5b413095d' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'c4d56e83b6b4c89dc0e104593fa92b9ba2a8c21f', class: "overflowcontrol" }, h("span", { key: 'b760eef949e5253468f13baff83667ee434d1951', class: "button-text" }, this.renderButtonText())), h("div", { key: 'db5f385e8000f44b7b9766a64d5cee7705f454f0', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '25e7af8324bd62bad0e695a607ed250979c16b4a', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '7934c8d583cd0d55c71e2c48178e6068f3493717', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: 'aab0cff0d97a087612183e537d440f723fa227cc', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
             return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
                     if (!optgroupEl.disabled) {
                         optgroupEl.isExpanded = !optgroupEl.isExpanded;
                         forceUpdate(this.el);
                     }
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled"), h("div", { class: "svg-icon svg-next" })));
-        })), h("div", { ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        })), h("div", { key: 'e232b3658388254d67f422d7c61cf5dd76b78b01', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: '21c9e76ac62b193033df6865b12554db5d6eecc9' }))), h("div", { key: '5f8031fb45f9db031883834330717dc59ef21720', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { key: '102c6d80ad7424b8d306125f06632b4316101533', id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-nested-select"; }
     static get encapsulation() { return "shadow"; }
@@ -527,7 +488,7 @@ export class NestedSelect {
                 },
                 "attribute": "placeholder",
                 "reflect": false,
-                "defaultValue": "this.multiple\n    ? intl.formatMessage({\n        id: \"select.multiPlaceholder\",\n        defaultMessage: \"Make a selection\",\n        description: \"Placeholder text for multiple select. Use imperative\",\n      })\n    : intl.formatMessage({\n        id: \"select.singlePlaceholder\",\n        defaultMessage: \"Select an Option\",\n        description: \"Placeholder text for single select. Use imperative\",\n      })"
+                "defaultValue": "this.multiple ? selectMessages.multiPlaceholder : selectMessages.singlePlaceholder"
             },
             "searchPlaceholder": {
                 "type": "string",
@@ -545,7 +506,7 @@ export class NestedSelect {
                 },
                 "attribute": "search-placeholder",
                 "reflect": false,
-                "defaultValue": "intl.formatMessage({\n    id: \"select.searchPlaceholder\",\n    defaultMessage: \"Search\",\n    description: \"Placeholder text. Use imperative\",\n  })"
+                "defaultValue": "selectMessages.searchPlaceholder"
             },
             "allSelectedMessage": {
                 "type": "string",
@@ -563,7 +524,7 @@ export class NestedSelect {
                 },
                 "attribute": "all-selected-message",
                 "reflect": false,
-                "defaultValue": "intl.formatMessage({\n    id: \"select.allSelected\",\n    defaultMessage: \"All selected\",\n    description: \"Text displayed when all options are selected\",\n  })"
+                "defaultValue": "selectMessages.allSelected"
             },
             "constrainedMaxHeight": {
                 "type": "string",

package/dist/collection/components/selects/wm-optgroup/wm-optgroup.js

@@ -48,7 +48,7 @@ export class Optgroup {
         handleDisabledAttribute(this.el, this.isDisabled);
     }
     render() {
-        return (h(Host, null, h("div", { class: `list-wrapper` }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", null)))));
+        return (h(Host, { key: 'bba30132f0e662bcfc6f9a4280558aa4426673f4' }, h("div", { key: '757e663ad18a9a451169f994f54faf8f9182e1d9', class: `list-wrapper` }, h("priv-option-list", { key: '1bfda628a518f2508084a2382cc7a2f19754859e', ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", { key: 'd584feb13518107132003e262c5bcc818b677c5c' })))));
     }
     static get is() { return "wm-optgroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selects/wm-option/wm-option.js

@@ -143,7 +143,7 @@ export class Option {
         this.parentOptionList.addEventListener("optionListSearchChanged", (ev) => this.handleSearch(ev));
     }
     render() {
-        return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { class: "sr-only" }, this.el.textContent)), h("div", { class: "subinfo" }, this.subinfo)));
+        return (h(Host, { key: '613fb3ff6678fbe5793a432817705b46c502ae06', role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { key: '8f9e3e8a88bf839e6b5801f01e6b451d297bce55', class: `option-wrapper ${this.parentOptionList.multiple ? "checkbox" : ""}` }, this.parentOptionList.multiple && (h("div", { key: '82c0706404571fda0937308433b9def82f021666', class: `checkbox svg-icon ${this.selected ? "svg-checkbox-selected" : "svg-checkbox-blank"}` })), h("span", { key: '8c657048302620555e49630a4adc94171894b0a3', class: "option-text", "aria-hidden": "true", ref: (el) => (this.textEl = el) }, this.el.textContent), h("span", { key: '879fad664edef7a7188a8dfac862b29d7f78af42', class: "sr-only" }, this.el.textContent)), h("div", { key: 'bf5a1372a0daf05ef3cf8af196eddcaacd7ee049', class: "subinfo" }, this.subinfo)));
     }
     static get is() { return "wm-option"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/selects/wm-select/wm-select.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { forceUpdate } from "@stencil/core";
-import { getTextDir, shouldOpenUp, intl, isElOrChild, toBool, handleDisabledAttribute, } from "../../../global/functions";
-import { globalMessages } from "../../../global/intl";
+import { getTextDir, shouldOpenUp, isElOrChild, toBool, handleDisabledAttribute } from "../../../global/functions";
+import { globalMessages, selectMessages } from "../../../global/intl";
 export class Select {
     constructor() {
         this.openUp = false;
@@ -18,21 +18,9 @@ export class Select {
         this.multiple = false;
         this.search = false;
         this.selectAll = false;
-        this.placeholder = intl.formatMessage({
-            id: "select.multiPlaceholder",
-            defaultMessage: "Make a selection",
-            description: "Placeholder text. Use imperative",
-        });
-        this.searchPlaceholder = intl.formatMessage({
-            id: "select.searchPlaceholder",
-            defaultMessage: "Search",
-            description: "Placeholder text. Use imperative",
-        });
-        this.allSelectedMessage = intl.formatMessage({
-            id: "select.allSelected",
-            defaultMessage: "All selected",
-            description: "Text displayed when all options are selected",
-        });
+        this.placeholder = selectMessages.multiPlaceholder;
+        this.searchPlaceholder = selectMessages.searchPlaceholder;
+        this.allSelectedMessage = selectMessages.allSelected;
         this.isExpanded = false;
         this.announcement = "";
     }
@@ -240,9 +228,9 @@ export class Select {
             ["aria-expanded"]: this.isExpanded ? "true" : "false",
             onClick: () => (this.isExpanded ? this.close() : this.open()),
         };
-        return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { key: 'e37a1ce52a903991570fbf06cad2b17ccae703de', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '973d0197afb6fef37768c0ea86002b9be4a4e50e', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '7632bd4f20bc49fbfc3b4e7a9c8ed63d7a7a6f44', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: '20caf14eab2111ba2b8f86519e2ba99be2eee496', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: 'a527d782f81eeeb771164cc0b7449b696f34196d', class: "button-wrapper" }, h("button", Object.assign({ key: '39ed454cbff5e73d98d36eefd6fb79320f0dc517' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '658551325b10ae492b13018e57a7871497972f8f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: '425e8afaf12ee7921219e5b2076156459570fc72', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'c6bfe3c261ece6a4dfd6489fae77dd91b7730629', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'f9d3c5405c82d7724b074a197ca9c6f17acc1042', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '8452deceae0ecbcbf96a64c2d406aea66023b6ef', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'e5beb9e541348fe6127a058e60c4a292cbabb264', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '2ff10a32e89a597176a96ac852dd6e1fe118fc74', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, h("slot", { key: '947c0114cae3a41d14f5d0ecfaf72a6e4c61f411' }))), h("div", { key: '50b156927292a726eac80a6035db6185483cdf35', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: 'de0b2e27d65056a691182397405c6eec7cb38fcf', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get is() { return "wm-select"; }
     static get encapsulation() { return "shadow"; }
@@ -435,7 +423,7 @@ export class Select {
                 },
                 "attribute": "placeholder",
                 "reflect": false,
-                "defaultValue": "intl.formatMessage({\n    id: \"select.multiPlaceholder\",\n    defaultMessage: \"Make a selection\",\n    description: \"Placeholder text. Use imperative\",\n  })"
+                "defaultValue": "selectMessages.multiPlaceholder"
             },
             "searchPlaceholder": {
                 "type": "string",
@@ -453,7 +441,7 @@ export class Select {
                 },
                 "attribute": "search-placeholder",
                 "reflect": false,
-                "defaultValue": "intl.formatMessage({\n    id: \"select.searchPlaceholder\",\n    defaultMessage: \"Search\",\n    description: \"Placeholder text. Use imperative\",\n  })"
+                "defaultValue": "selectMessages.searchPlaceholder"
             },
             "allSelectedMessage": {
                 "type": "string",
@@ -471,7 +459,7 @@ export class Select {
                 },
                 "attribute": "all-selected-message",
                 "reflect": false,
-                "defaultValue": "intl.formatMessage({\n    id: \"select.allSelected\",\n    defaultMessage: \"All selected\",\n    description: \"Text displayed when all options are selected\",\n  })"
+                "defaultValue": "selectMessages.allSelected"
             }
         };
     }

package/dist/collection/components/wm-action-menu/wm-action-menu.js

@@ -190,7 +190,7 @@ export class ActionMenu {
         return null;
     }
     render() {
-        return (h(Host, { onBlur: () => this.close(false) }, h("div", { class: getTextDir() }, h("wm-button", { "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "#more-options" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", null)))));
+        return (h(Host, { key: 'c6dfb14c3fe2e1a65238554ca585e94c7a5e8ed8', onBlur: () => this.close(false) }, h("div", { key: 'ae43b9b2e4da167c035ab018620f55f06cfdf17d', class: getTextDir() }, h("wm-button", { key: '22fbc47fb5e2430e2607bce4e820066906959ab7', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "#more-options" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { key: '90dd3b0691b50a06eb8cc4c27d2f7febdc6a00a4', class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", { key: '5c6eeb1aa8b90c2b679d593d81f90cde7d10ff79' })))));
     }
     static get is() { return "wm-action-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-button/wm-button.js

@@ -183,7 +183,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && this.renderIcon(), h("span", { class: "button-text" }, h("slot", null)), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { class: "selector-icon svg-icon svg-expand-more" })))));
+        return (h(Host, { key: 'ae038ae6dddcd3220b1c3d027390d743e85ff3bc', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: 'e10a7276c46e73fc93b2e26b6f2f81b37625d08e', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && this.renderIcon(), h("span", { key: '3dbdd426484b9265107fe994c160af6f2bbd6958', class: "button-text" }, h("slot", { key: 'f5e28ec3acb64b330185f9b65d0f221fd95f1399' })), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'c2b16a69daf975cf6996aa365756574d1f74920f', class: "selector-icon svg-icon svg-expand-more" })))));
     }
     static get is() { return "wm-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-file/wm-file.js

@@ -171,7 +171,7 @@ export class File {
         return (h("div", { class: `file-wrapper` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}  ${this.isCondensed ? "condensed" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: "right-group" }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText)), this.progress == 100 && h("span", { class: "svg-icon svg-success" })), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return h(Host, { role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { key: '534c481a5423a9f1a1ec811ec6b736e462a981ea', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get is() { return "wm-file"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-file-list/wm-file-list.js

@@ -4,7 +4,7 @@ export class FileList {
         this.showInfo = "last-updated";
     }
     render() {
-        return (h("div", { role: "list", class: "list-wrapper" }, h("slot", null)));
+        return (h("div", { key: '69e557483f15721fc39315353da4cc1db7b6405d', role: "list", class: "list-wrapper" }, h("slot", { key: '1f00bd3aa0961aa99298eacb90b65717e8a5fd87' })));
     }
     static get is() { return "wm-file-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-input/wm-input.js

@@ -101,7 +101,7 @@ export class Input {
             : `info error`;
     }
     render() {
-        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { class: "label-wrapper" }, h("label", { htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: "inner-wrapper" }, h("div", { class: "text-after-wrapper" }, h("div", { class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { 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 && (h("span", { class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { id: "info", class: "info" }, this.info)), h("div", { id: "error", class: "error-message" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: '62f9860ec2c3ab8b8889a3cb16782cd751c785fb', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: '5ee7f338762c085696e47d58e8f75f93bf4d4a6f', class: "label-wrapper" }, h("label", { key: '65f22de9893c6f5edb02a60229a8b45869ff0807', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '43577e74f14b26a0f41d77d326cd88d3d171e6b7', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '440bf0ce343f6735ab26a4b3926da12353bf855f', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: 'ab920b6710d5a7d1aeb4a118d64da53c74e1edae', class: "inner-wrapper" }, h("div", { key: '9cb24ca5e904bbbbf3df16efe6b09ea2cacfd44c', class: "text-after-wrapper" }, h("div", { key: '78fa02386934097655347c80ce4e7b76e1531900', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: 'a34b2dd76159a2662bf4f0c693a2ff3a76483b32', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '361b681383669fd62399818fde3010bc67a484e2', 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 && (h("span", { key: 'dcb784ead7dc9e468f260b3821957fe85c47fc0d', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: 'd133d5ae885d18c52fba9e09b54918eef2005fba', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: 'e2ff90b30e75517d3aa96ad2a80af2a1875f4ba8', id: "info", class: "info" }, this.info)), h("div", { key: '68f36477a50cce27e642b47e49448e8f2502b275', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '8b86d3977cad2208e5428226ed83245b5747049d', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-input"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-menuitem/wm-menuitem.js

@@ -98,7 +98,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, this.icon && this.renderIcon(), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: '16c2fc6ddfd8439be81e11534f9a7303c121c6f8', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '138d8175228c5de3132e2b8c491baf5ea4ffeaaf', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, this.icon && this.renderIcon(), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
     }
     static get is() { return "wm-menuitem"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-modal/wm-modal-footer.js

@@ -30,7 +30,7 @@ export class ModalFooter {
         }
     }
     render() {
-        return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { "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))));
+        return (h("div", { key: '10a9f1254c1b643ba9f89ac1ee0fae7858de6c9a', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '0952172dfbf984b1bade03bd46961ea87dcbf0fb', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'cadbb6b7d1049d8569622d942a8ef729b7e3a433', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'd200b5ab6bf7345416584317b472644107beb221', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: 'a549abb82c93025ad46f15efd73e0e064819d00c', "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))));
     }
     static get is() { return "wm-modal-footer"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal/wm-modal-header.js

@@ -21,7 +21,7 @@ export class ModalHeader {
         parentModal.emitCloseEvent();
     }
     render() {
-        return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, { key: 'b47b9c7312835b262a989a6767e22cb8989e11fa' }, h("div", { key: 'f630fc530287907277206152fd5f136464dfd4c1', class: "wm-wrapper" }, h("div", { key: '1905201146dc1822f4f94a8b6cfa555d8e8b48e4' }, h("h2", { key: '48c5208a4901e205fa75a97090ff94834cea72b2', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'b446719f776cad720d022078d7638f96541f24d1', class: "subtitle" }, this.subheading))), h("wm-button", { key: '7d7e003f445142544a26c80005801cdb7bd44d4f', "button-type": "navigational", icon: "#close", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     static get is() { return "wm-modal-header"; }
     static get originalStyleUrls() {

package/dist/collection/components/wm-modal/wm-modal.js

@@ -108,11 +108,11 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { key: '180b70af975b675f000a254775207ed546b77568', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'e56f1ec368d2b1adf786c3621e25a7d4854dbb59', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 const focusedFromCloseButton = ev.relatedTarget && ev.relatedTarget == this.closeButtonEl;
                 // no related target means we're coming from outside the page (browser chrome), and first element should be focused instead
                 focusedFromCloseButton ? this.focusLastElement.emit() : this.focusFirstElement.emit();
-            } }), !this.hasBrowserPopoverSupport && h("div", { class: "wm-tooltip" }), h("slot", null), h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: 'ab6538a71ffbdafb09b8921e69f5cfc6ebec2f43', class: "wm-tooltip" }), h("slot", { key: '4de24a0170c9ad81ec726f2fc899f10dedc81142' }), h("div", { key: 'acfccf69bdc7c9b57f77f5fb4fc47907921030c7', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }