@watermarkinsights/ripple 6.0.0-alpha.2 → 6.0.0-alpha.4

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

@@ -302,7 +302,7 @@ export class Flyout {
         }
     }
     render() {
-        return (h(Host, { key: 'de4b5f597cc2e9fa94f0385df1d3b3b8d886f50d' }, h("dialog", { key: 'e89892a086afa301a9939bf1c5c8abda987f910f', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'c0714dbbf4c6365be710b6705f30ca81d009fd53', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: 'ca6b64011bd3993a80db682e8a913c8a0392f3a9', class: "flyout-content" }, h("slot", { key: 'ec4f277c68885adfbe6b5379117ba8b6bfee0891' })), this.renderFooter(), h("div", { key: '27c997321b543179b24bfe6759c29a877685932f', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
+        return (h(Host, { key: '74d075c418782ae1eeda065b40f1baef27fe2cc3' }, h("dialog", { key: '07d790041f7c4b176e071737ce72947b610215df', ref: (el) => (this.dialogEl = el), class: "flyout", "aria-labelledby": "heading", onClose: () => this.wmFlyoutCloseTriggered.emit(), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '3356e65c6a461d09c381ef00f40741396afbb097', tabindex: "0", class: "focus-trap", onFocus: () => this.lastFocusableEl.focus(), "aria-hidden": "true" }), this.renderHeader(), h("div", { key: 'd1ab12f7e2b95578ba145288aba8cc095c068fa6', class: "flyout-content" }, h("slot", { key: '04f92b2bae9ba1e3a148ca32e2a1f0c92f704c2e' })), this.renderFooter(), h("div", { key: '5997163c52691b6eb366b7b37a25a3f0ee4a81a9', tabindex: "0", class: "focus-trap", onFocus: () => this.handleEndBookendFocus(), "aria-hidden": "true" }))));
     }
     static get is() { return "wm-flyout"; }
     static get encapsulation() { return "shadow"; }

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

@@ -224,7 +224,7 @@ export class Input {
             : `info error`;
     }
     render() {
-        return (h("div", { key: 'c95455fb6668414ec09dbf301323f11fc7270e47', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: 'de0ada2ec3c43c411924417df348ebe34a477e8e', class: "label-wrapper" }, h("label", { key: '04884ea505a88026aa311a38e30cbdf049b390c3', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '1eedd2faffbfcc670ad3b87298465ab16328a1d3', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '51224587e46ef0132891dee01536d5cf07ea54f6', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'ed40b31ab7ab588f6165cc0af2ec52bb8d86509b', class: "inner-wrapper" }, h("div", { key: '67a06543806995e8b95db4186a4ea053d4d33b45', class: "text-after-wrapper" }, h("div", { key: '78ad09bd7849f5f7c422d36a6f01e156c9c6db5e', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '19a85ba9d2d9d17d634ac78179dbd90b378b2b7b', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: 'f8a4b6d837abf040d9ca1237297836d066cd3f71', 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: '105dec7aa348f910b25db38b86eec650c943ef40', 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: '2ea643f3a9bc736bb33200d5cf87600e14aa2f18', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: '07e341cfc2b91a6bcf4880158aa735fd06ea51ea', id: "info", class: "info" }, this.info)), h("div", { key: '41f5fe8184dd6d15e868a9212c61f2a70dcdb9a9', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '860193d77a6576a5aec0c133f43bffe72a853e57', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: '6880486dfbb2093dc12b7d2f7045d2080267c920', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: '979121599d6dd225602f189b31bca9f4e01ff20e', class: "label-wrapper" }, h("label", { key: '182870d93bbf0ed17ca19cdce68156b6a58c7536', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '71c7cb67ae5eac36ae3e47305472abc657b50ca4', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '928f41d54e2979d21ceceef43dff40de28c11257', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'da92fa2e5c47394abed77a5583a7e836e5a49148', class: "inner-wrapper" }, h("div", { key: 'abc0f95de8a803fff4e3b1176a7ee904b8123d10', class: "text-after-wrapper" }, h("div", { key: '1ef4bdeaf4c741d7cd2a7914f6c6954f454a6435', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: 'ed614d73101b7b69ac9c657d57c2e93bea3821f8', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '397f8e692de681897ac597d0b707f9de741890d4', 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: '16bdf60913e15323bae60ee13bf77d219d5444ef', 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: 'd497e23192033910468c1241fa2df5969fce0751', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: 'f0375b971d0d3709322578ed0e9ac2df052fd610', id: "info", class: "info" }, this.info)), h("div", { key: '135c3949561baaddf6eb45a9a1748e8d705c508f', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '1c4bd55e3c57039bdfa969e6c07d59fb99c9473c', 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

@@ -159,7 +159,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { key: '17634e9132f3ed4e37b52ea200d46ba15b734d91', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'a5a21c6a0feb8bf58a8a4de9a0cefe620522abe3', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: 'd4302f14e6211ef9cad2486834523d43012ec428', class: "main-text" }, this.icon && this.renderIcon(), this.el.textContent), this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { key: '31b586e4a8f2b156c07cbf93d5445aaaaf25aa6c', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '919d1615f3ed3f0e6decf0454f2aa06707f277f1', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '7c7bf80eff9211f8044b3232b7babc57e606cd8d', class: "main-text" }, 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

@@ -85,7 +85,7 @@ export class ModalFooter {
         }
     }
     render() {
-        return (h("div", { key: '01d9675f5ae7e80960cb1c3d966a7f662f24bd7d', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '066e6efe2c39d9873db4a9796e0666985583e99e', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '37ca1d537a4871193488abcbd625172db21da0b1', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '1f8fa5963369b94c7e3dee94339772e155667913', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '2eb0f06c4f1849b6e08eed2fa2a85952ae9cdc5f', "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: 'ee99f67919ab52eda8ac8df4bc2188dbc15dccc8', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'a5464448621079d71fdd1352b0a386a1ed0d6df9', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'b5d98e57ae5c637639063d2f2f08ed71b209efa3', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '83db118555b12043f436d4706dddc3efa2c322aa', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { key: '5dcb3f0bbfaeeb916b8937043338e36700bf7938', "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

@@ -52,7 +52,7 @@ export class ModalHeader {
         parentModal.emitCloseEvent();
     }
     render() {
-        return (h(Host, { key: '9aa6f7ffd57907e412fb42f3ecc5fcb65ea37a48' }, h("div", { key: 'a404673f2172d71e1de498265d59abc37ecca16c', class: "wm-wrapper" }, h("div", { key: 'fdfd2a2d4b31effdd4742f520f2d00f6eb028b6b' }, h("h2", { key: 'b748ccfe42ccd233a918578251527fe78b112e41', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'a09334a14fc61bc8756122e62741ed0d5e445820', class: "subtitle" }, this.subheading))), h("wm-button", { key: 'a89ca51890891a0534e97174fd841e13eb9dec68', "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: '1d6f92f8d0f90f132ffcad250340e827d6f6bf46' }, h("div", { key: '6d68501b1b7e61cd15b1af427e8789a49dd4ae60', class: "wm-wrapper" }, h("div", { key: '87d9bb8d30bffa3082cc10ce504037af3abbd916' }, h("h2", { key: '6f2d3a89c6427761da6163b72ad18a3930b80015', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '4c4ec555e035a3b65c6740003f66722df167ce8a', class: "subtitle" }, this.subheading))), h("wm-button", { key: '2d578d7e66acb69abb471e1c596510b664ea3135', "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

@@ -247,11 +247,11 @@ export class Modal {
         }
     }
     render() {
-        return (h("dialog", { key: '995c3ed868be28431fd16f59f42842676fb866dc', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: 'b70bd7e83d7b89c7878dc8eccb2f6c3744c354b6', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { key: 'ddb98281c3c4670a5bff5cb949d737983c45ed44', class: `${"wm-" + this.modalType}`, "aria-labelledby": `wm-modal-heading-text-${this.uid}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '695fa76250e2af36fd3c0a4cd10553a90aa8cfa9', 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", { key: '8153ea292a5d2e92c94bc4851a9558d0e4c15dbe', class: "wm-tooltip" }), h("slot", { key: '1056abeca733388eb293562a213221a8d0434b1a' }), h("div", { key: '961af64369b5a2f4645c472dcde9b4b590593972', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { key: 'c85ce4f05e858c3a98d46db7f0023f2f25f82837', class: "wm-tooltip" }), h("slot", { key: '9227091b31d2c2f158adde0c31ab4ba88c4fe371' }), h("div", { key: 'cf6f02fa35067b2892270b25e83d4700d9d97200', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }

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

@@ -31,7 +31,7 @@ export class ModalPssFooter {
         parentModal.emitSecondaryEvent();
     }
     render() {
-        return (h("div", { key: '1fb457cc2cff44efb8abaa10575737b01ce70b20', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '62f807be71bdbac9c20569adf0a014de28d9df12', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '93437b4c93b2dc035f8d7d9b5533bed6093c6a5f', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '1887d3cba0c762475837694f18c5804cb855d178', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: 'fe845d00a730f19f5f522b14a36dd397328d57d0', "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))));
+        return (h("div", { key: '5150cb1e158616df9ee93a525183867f21f28c15', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: 'dbe658f3db126d12e7f3ae669ea74b5693d5eb09', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '91934f637e4a9ff8e39d68ea1f38a6c603795afb', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'ad00b3be67fef9c8bf7f36df5dd85ea7289deb71', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: 'f438d3e6bace08ac8bf54a2d86fb51ed082f2e25', "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))));
     }
     static get is() { return "wm-modal-pss-footer"; }
     static get originalStyleUrls() {

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

@@ -29,7 +29,7 @@ export class ModalPssHeader {
     //   this.headingElement.focus();
     // }
     render() {
-        return (h(Host, { key: 'a3498139a3ec2cff1e40daeffaca7634cf5a484b' }, h("div", { key: '2380923b35880883b85ffce8ee58c887d23fe886', class: "wm-wrapper" }, h("div", { key: '7978d304ec86bd8df64c9d1e639216e5ff1edba4' }, h("h2", { key: 'e462040e5af094836cc38ec064faef408402fabf', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '1d5baad88628e7830c20983f40cf8de50b5b5f06', class: "subtitle" }, this.subheading))), h("wm-button", { key: 'e55d981a3e1dc49d3079b8b15661bdde227ff5e8', "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, { key: '9525d4b0a46c7cc0490f31be7c0e440272db5cbc' }, h("div", { key: '1577d51259d123a8daa577c3f694a999fdc24b8d', class: "wm-wrapper" }, h("div", { key: 'efee550b4bbf877e9968b09b1504d7cf5cc9d992' }, h("h2", { key: '717613135925ee4398615338e4eb7ee58b87f8e4', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '9ad3785d585d32b86a842811213aef4df3e699d1', class: "subtitle" }, this.subheading))), h("wm-button", { key: '8561a42b3aa861af5756ebc14e2e4653b82f195a', "button-type": "navigational", icon: "f156", 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-pss-header"; }
     static get originalStyleUrls() {

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

@@ -118,9 +118,9 @@ export class ModalPss {
         }
     }
     render() {
-        return (h(Host, { key: '5670d26d529d69cacf36c8755b5d328fb40c8938', 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: () => {
+        return (h(Host, { key: '020d67b9cdaf30f070c9dd26bc3ca7c01866b876', 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: () => {
                 this.focusLastElement.emit();
-            } }, h("div", { key: 'ca8956c8d821b6d12c501d8867a08d683a4bbb6a', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: 'fc2c63dc1264a0a29b3b049f76d363c1b2e6c8dc', class: "sr-only", tabIndex: 0, onFocus: () => {
+            } }, h("div", { key: '4e310a0756b71e6a58901e6bb1f1a1259dc1851b', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: 'a0cf9655750143e753ecc06a75680bbad97caa37', class: "sr-only", tabIndex: 0, onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }

package/dist/collection/components/wm-navigation/wm-navigation-hamburger.js

@@ -81,7 +81,7 @@ export class NavigationHamburger {
         this.wmNavigationHamburgerClicked.emit();
     }
     render() {
-        return (h(Host, { key: '6f135919a43b55f7c4fca79d79e9a5c201d84fdd', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: '8d930f77ea878a4f7757084fe45178004cc8a74e', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { key: '798de550cd68d4d3b2ce78036206175e3901e1c0', class: "svg-icon svg-menu" }))));
+        return (h(Host, { key: '05c34939410bd6142120c1bd996bd5a3e2db8460', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'e253bc1658f8b1be8f8f7196f21497ab86a49f34', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => hideTooltip(), onFocus: () => this.isTabbing && showTooltip("right", this.el, this.showNavMessage), onBlur: () => hideTooltip(), onClick: () => this.handleClick() }, h("span", { key: '69374ba02fd7cc53d2ed3b90ef1f67b99b519766', class: "svg-icon svg-menu" }))));
     }
     static get is() { return "wm-navigation-hamburger"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigation/wm-navigation-item.js

@@ -47,7 +47,7 @@ import { h, Host } from "@stencil/core";
  */
 export class NavigationItem {
     render() {
-        return (h(Host, { key: 'a2c17059914ed4b1cd0d16e6606b6f8b6c454859', role: "listitem" }, h("a", { key: '13160395a00d19bb4f3ee7594ec07b96fcae8d30', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: 'c59d91d587889392d9e6ae606f9e65c5b23a1a36', class: "icon", "aria-hidden": "true" }, h("slot", { key: '285f7f5ff313d06d7d54e4b8a00f2032cf19b277' })), h("div", { key: 'fc018d86863191d6f72dea99a5b8addbb9c596f7', class: "text" }, this.text))));
+        return (h(Host, { key: '383207b6224b490fde90cda642f5212967adf66e', role: "listitem" }, h("a", { key: '3fc134d431e35710fdfd34937658172d462eefc9', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: '7b1ff7f52eceb305d4f5299db0b333f971e52579', class: "icon", "aria-hidden": "true" }, h("slot", { key: '1f98b5c1c61233c5b5ea6d392aa711c0c4a4974a' })), h("div", { key: '65f51aaf12296e479decf9ef18a579be31b0c552', class: "text" }, this.text))));
     }
     static get is() { return "wm-navigation-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -242,9 +242,9 @@ export class Navigation {
             } }));
     }
     render() {
-        return (h(Host, { key: 'a15b95ca5769e6a996542f3fb0f1edf8928ed4ea', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'add1bb58939e3d076c7890aa1cb3efd932f977dc', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '98491d3d97807417a13b677894ee452e89e9cea8', class: "tray" }, h("div", { key: 'cf058b8b33a07598f19318977e26e652304faf4f', class: "toggle-wrapper" }, h("wm-button", { key: '7e8d936e3fdc9c718bf9442b6840464a6caddcab', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (h(Host, { key: '88184793ed2434651265c18f7d813663d4a5b43e', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'f37b89b12f4bbc3dabf48bbb2d1c5d3f2d3bfcff', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: '267647e94dfca2b6f42c884b2f0bbce3e9f21e24', class: "tray" }, h("div", { key: '3b0af4de5628f6ae0405036208b286c1e8c51012', class: "toggle-wrapper" }, h("wm-button", { key: 'c014baca43ba0c4f981d1fc15c39402fb83ea151', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "#close" : "#menu", "icon-size": "2rem", tooltip: this.open ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
                 this.open = !this.open;
-            } })), h("ul", { key: 'e90219ba02e6a2330095e12ee4793ac82100fc5d', class: "navlist" }, h("slot", { key: '83e672cf048480abbef358f8249cb1622e2fad3c' }))), this.isCollapsible && (h("div", { key: '3c16362bebb241d693aa6aa8fd7226a34039901d', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { key: '91eaa57e47ea5f7e5866c7d6b74616bfdfabf4dd', class: "navlist" }, h("slot", { key: '10571c5d330c6f9c607ce70240d6f48ad6e7a4f1' }))), this.isCollapsible && (h("div", { key: 'fb9a059ad6255c3b9180f718daa1fd4c8a95411a', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get is() { return "wm-navigation"; }
     static get encapsulation() { return "shadow"; }

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

@@ -13,7 +13,7 @@ export class PrivNavigatorButton {
     }
     render() {
         const { handleClick, altText } = this;
-        return (h("button", { key: 'dc162bf12e5dec1ceb7cf071b55d4d9da4deabe7', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
+        return (h("button", { key: 'e94ea53c3c92950534b1c2bb50d1b7aaf4ee374e', "aria-expanded": this.expanded.toString(), class: "navigator", onClick: handleClick.bind(this), "aria-label": altText }));
     }
     static get is() { return "priv-navigator-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-navigator/priv-navigator-item/priv-navigator-item.js

@@ -20,7 +20,7 @@ export class PrivNavigatorItem {
     render() {
         const selectedClass = this.selected ? "selected" : "";
         const focusedClass = this.focused ? "focused" : "";
-        return (h("div", { key: '90260a3dbfafec72c507d40e29a5f1d5e02149be', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: 'c91b33f6c5fc8e563b69c1661b1c6f41d5c53225' })));
+        return (h("div", { key: 'ae1ff14218642ee2f851bcb8632ae5bbe8c353f7', class: `navoption ${selectedClass} ${focusedClass}` }, h("slot", { key: 'c40c892bf198745bcccde83a8988770fe53ead61' })));
     }
     static get is() { return "priv-navigator-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -304,7 +304,7 @@ export class Pagination {
     render() {
         return (
         // do not render the component if there's only one page
-        this.totalItems > this.itemsPerPage && (h("nav", { key: 'ac9b363e6e57b508da5e770b16722211cb12a3a6', "aria-label": `${this.label || this.defaultLabel}. ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: '8ef644f9db01b19406911ab834df6384b05f974e', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (h("nav", { key: '4afbaef0fabbc6ddf87e75952b8d70275bf8396c', "aria-label": `${this.label || this.defaultLabel}. ${this.getCurrentPagesInView()}. ${this.currentPageAnnouncement(this.currentPage)}` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), h("div", { key: 'a55642c58b7ca6e5089bf5ef43c9e2166b4c3097', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
     }
     static get is() { return "wm-pagination"; }
     static get encapsulation() { return "shadow"; }

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

@@ -331,10 +331,10 @@ export class Search {
      * End search and find render helpers
      */
     render() {
-        return (h(Host, { key: '17f77ed996d830b331078d35172485ddd1b3815a' }, h("div", { key: 'eaa5da92ed2154b3660fb0c888e43f0853f5bd0d', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '8c25d6adae20a36ce5ae73ae79d114555f608d8a', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
+        return (h(Host, { key: '50e57cb718442ce8b328b92806007e64fb2d1ffb' }, h("div", { key: '597266464fa8d48f5d1dc82233661ae3c87e50fd', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '096a2ce5dd3ecdd8ca84fc476ab861faa6eefe36', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
                 id: "search.typeToFilterResults",
                 defaultMessage: "Type to filter the results",
-            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: 'bc41a6fe9a84996ebca49f2a6fc87d45703ef89c', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '0c7f0fb0d7b887b3e9abd6a0eb06076e626aea28', 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()));
+            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: '9ccf709b459941a4067da8b69debdb40e659449b', class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '880f8b8b8a8dbb588e2d3f81df7db65aa68cbabc', 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()));
     }
     static get is() { return "wm-search"; }
     static get encapsulation() { return "shadow"; }

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

@@ -239,11 +239,11 @@ export class Snackbar {
             }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, h("span", { "aria-hidden": "true" }, notification.link), notification.newWindow && h("div", { class: "svg-icon svg-open-in-new" }))), (!notification.link && notification.action) && (h("button", { id: `action-${notification.id}`, class: "link", onClick: () => this.snackLinkClicked(notification), onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, notification.action))), 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) => showTooltip("bottom", ev.target, globalMessages.close), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.isTabbing && showTooltip("bottom", ev.target, globalMessages.close), onBlur: () => hideTooltip() }, h("div", { class: "svg-icon svg-close" }))), h("div", { class: "sr-only", tabindex: notification.link || notification.action ? 0 : -1, onFocus: () => (notification.link || notification.action) && this.snackDismissed(notification) })))));
     }
     render() {
-        return (h(Host, { key: '0e70d242a282e93aa784082ad24b2d46a7360b8e' }, h("div", { key: 'c18bb81ad201151cd17bf0cbd6a4ed905ed05704', ref: (el) => (this.snackAreaEl = el), class: {
+        return (h(Host, { key: '0f0c3c47e0c9be8b13680fdb67d9b9e26100acda' }, h("div", { key: '99fe2b4a7be787a54462dd7646d249181f54f3b2', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), h("div", { key: '015af84cc94a71126be63ed28f015db03f7bad05', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+            } }, this.renderSnackbars()), h("div", { key: '91f99c2ddfc28ea834d256ff215d641e8a660afe', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "wm-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-item/wm-tab-item.js

@@ -67,9 +67,9 @@ export class TabItem {
     }
     render() {
         const isDark = this.parentTabList && this.parentTabList.customBackground == "dark";
-        return (h(Host, { key: 'a8e065d96a7bc5011f4e917ab366e7ffe5fdb107', role: "presentation" }, h("li", { key: '8f0bb0a9f8eae4c57354a28a9208eb9b16ec323f', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, h("a", { key: 'faf848ccae28ca88e096a6f3c38c2f5a93b9dcc4', 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: () => {
+        return (h(Host, { key: 'af15ab2697feb9781a2cec31aeebd390bdf238d2', role: "presentation" }, h("li", { key: '40562a1cb2e22c12149d31c35a1d250fb4514b21', class: `tab-item ${isDark ? "dark" : ""}`, role: "presentation" }, h("a", { key: '6df1a904ce47240afb5aaae879c3534999bc1fbc', 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: () => {
                 this.wmIntTabFocused.emit({ tabItem: this.el });
-            } }, h("slot", { key: 'bfe3a33eefd7194aa0dc578180c44e41bbaa25cb' })))));
+            } }, h("slot", { key: '311cc30fa8652f0f3efd6ca2f7d052c8e97e1f70' })))));
     }
     static get is() { return "wm-tab-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-list/wm-tab-list.js

@@ -350,15 +350,15 @@ export class TabList {
         this.announcement = message;
     }
     render() {
-        return (h(Host, { key: 'b34f190a0538716e48cc8901fb12f8b7387d939d' }, h("div", { key: 'a9ed320e437a8a969c40fcd2afdc5e06479eeb70', class: "component-wrapper" }, h("wm-button", { key: '98336c6dc7e2f193ff115d45d492a42b965222c9', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
+        return (h(Host, { key: '928ac68e33e7dc7366827861fb292718fb073073' }, h("div", { key: '0332308afe93eba6c98f83409dfa71b37e85dc86', class: "component-wrapper" }, h("wm-button", { key: '4e94b265632eae80cec8523ee53519db98673582', class: `left-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#previous", tooltip: intl.formatMessage({
                 id: "tabs.showPreviousTabs",
                 defaultMessage: "Show previous tabs",
                 description: "Tooltip for button scrolling tab group.",
-            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: '5933d57d73e5d1e7a596a07410fde0cfc53a5645', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, h("slot", { key: 'e65139b007343fba8a65b7fb6004c184b897a653' })), h("wm-button", { key: '0843c9308b5d343d91beebd3eab0ed24ff513137', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
+            }), onClick: (ev) => this.handleLeftArrowClick(ev) }), h("ul", { key: 'ec5a691bed6e619702ba3717d72bb4af2293ca08', id: "tablist", ref: (el) => (this.tabContainerEl = el), class: `tabcontainer ${this.customBackground || ""} ${this.containerFadeLeft ? "fade-left" : ""} ${this.containerFadeRight ? "fade-right" : ""}`, role: "tablist", tabIndex: -1 }, h("slot", { key: '60760c69b079e39b8b21b9cb8a60b741cc68f5f9' })), h("wm-button", { key: 'e0bd33b5df7bb1788e8e2cccbdd558edd79c72e4', class: `right-arrow ${this.scrollArrowsVisible ? "visible" : ""}`, "aria-controls": "tablist", customBackground: this.customBackground, buttonType: "navigational", icon: "#next", tooltip: intl.formatMessage({
                 id: "tabs.showNextTabs",
                 defaultMessage: "Show next tabs",
                 description: "Tooltip for button scrolling tab group.",
-            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: 'd5823a4cd725c4508d1b16ee123c60bee625efba', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+            }), onClick: (ev) => this.handleRightArrowClick(ev) }), h("span", { key: '834d5a7f3cf4b552fea1394a4111730f39f9e4e2', "aria-live": "assertive", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-tab-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-tabs/wm-tab-panel/wm-tab-panel.js

@@ -47,7 +47,7 @@ export class TabPanel {
         this.tabPanelLoaded.emit({ tabId: this.tabId });
     }
     render() {
-        return h(Host, { key: '65dbbac2bcf9bec58421c54c67d0fd0510d209b5', role: "tabpanel", tabIndex: "-1", class: { "tab-hidden": !this.active } });
+        return h(Host, { key: 'eaea007fdcc009b91c81d4b0d00e74e909b71f24', role: "tabpanel", tabIndex: "-1", class: { "tab-hidden": !this.active } });
     }
     static get is() { return "wm-tab-panel"; }
     static get originalStyleUrls() {

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

@@ -1118,10 +1118,10 @@ export class TagInput {
         }
     }
     render() {
-        return (h("div", { key: '0c966c7f6ead3509e226e39cd2f3141dacb263f9', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '0da899e7915d1997cf9073e547f8b5233117df9d', class: "label-wrapper" }, h("label", { key: 'b94d08551a442da279075c3ebef79a12b4f29dcc', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'ed8cae918190c3ae26c88746b842d32c29cf58ea', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '14d0d77c3ddcfdfec7874afd7d769558103f489e', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'ff0bf9fe6d4d25416913f71b24ad065f602f0420', class: "upper-row" }, h("div", { key: 'cc8cd697fd0d7a39cd86cee2d71b4714568f0a20', class: "svg-icon svg-search" }), h("div", { key: 'bcac8abec240cebc66be3f997ce711a40556ff1f', class: `tags-and-input-wrapper` }, h("ul", { key: 'b4af49affad3f4e764be424d766b55ef534270a0', 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) => {
+        return (h("div", { key: '0167a52545ae41fa12d9eea6322ee851560c8ec2', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '68053c9c92acc1898eb3f366be84f1975aff1e1f', class: "label-wrapper" }, h("label", { key: 'f379f5b7b0f1bd8a96d82fe58b33cd6292bad813', class: "label", htmlFor: "input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), this.labelPosition !== "none" && this.requiredField && (h("div", { key: '60230c0e2cd7a1418450ff18c9721ffa6802a742', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: '70c86e152690ef41f31999f8da647c72020398b4', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, h("div", { key: 'c93f5bb99a818b58118fea853e14a0f12a581fad', class: "upper-row" }, h("div", { key: '311587b73133fd689583cf553a6766847a33e5b1', class: "svg-icon svg-search" }), h("div", { key: '8170d939a61a06d58c892c9727ad522d8a8961fb', class: `tags-and-input-wrapper` }, h("ul", { key: '519de11c51fcaa1db5d0cd650adeff190999ea3d', 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) => {
                 this.focusedTagIndex = undefined;
                 this.handleBlur(ev);
-            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: '759d545c76fa7b18ab188d005227f9f78a7edc1d', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: '8476922bf846e4d889d026dad144e5b6eda20196', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'b1db1d494d71da36c250cbd26d2dbb2f1de33919', id: "info", class: "info-text" }, this.info)), h("div", { key: 'e7de6d755edfd7c5a05afddc5dfb717f26bba136', id: "error" }, this.errorMessage), h("div", { key: 'de0c6f5ce55492275d7f7e9fddb52952dac9c746', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), h("div", { key: 'bf5848a2e0c64b2686ce36ebf57e7d252fa09a8e', class: "sr-only", id: "sr-instructions" }, this.label, ". ", this.tagAreaInstructions), this.isDropdown && this.renderDropdownInput(), this.isTable && this.renderTableInput()), this.isDropdown && (h("div", { key: 'e67ade3dcf023d0536845e335baff752989c0b4f', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (h("div", { key: 'd07613c6be4118acbfe7760681986a0c6a5447a4', id: "info", class: "info-text" }, this.info)), h("div", { key: '298f7cec7bc58f0c0cb9fa0e3b96025676277e89', id: "error" }, this.errorMessage), h("div", { key: '2c727320987caf8cbe6290752a9d27fad277276c', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get is() { return "wm-tag-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -142,7 +142,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: 'dcedd229ad3e262c92cc369d5f0a597f0d67f529', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'f2b0db3d98b06af6330366071d097eda6438a331', class: "label-wrapper" }, h("label", { key: '6307eb9dc125d860a3059fedf4f6a404fcb0ae22', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: 'b32122dda37e3adab27b8333e6c2d2ff5207004a', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("span", { key: '864be330760cd3d6396462fc8e191b731a4906ee', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'cb04bd7ee99a025ede0781d8011467373f2517c5', class: "inner-wrapper" }, h("div", { key: 'eca53f48452099cecf60a3f853f6a021d6d1277e', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: 'd855cdf9c8a55c46404c322b329efbe0344059b1', 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" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: '549bd207bd19b5b0de6e0d4bf5d208249e1833f7', id: "info", class: "info" }, this.info)), h("div", { key: '0bd0a4f5b22e1775c5aad031b9433db7cd77c13e', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'f7b51879d3d30fbe33e43d2a7f84db0a9d1385b4', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { key: 'b5d978a6b24378069cf512d35d71ebbb9e6b81b0', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '7ccb4664c7ae0f207e8e35fc09379bdca3140c95', class: "label-wrapper" }, h("label", { key: 'd1d4eebbed82e7cff1bb5b63c2f8064cfdf63422', htmlFor: "inputfield", class: "label", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label, this.characterLimit && (h("span", { key: '7b96f691b9ee85f4c927e062e999837212b3e5fb', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit)))), this.labelPosition !== "none" && this.requiredField && (h("span", { key: 'aff0d09821e737e68067eca775fbac996992e6a7', class: "required", "aria-hidden": "true" }, "*"))), h("div", { key: 'bc991db1f74435efe06dd8082d4e7f0b00599768', class: "inner-wrapper" }, h("div", { key: '1326ceaac01235330f08dee4a1b8a44800809ac3', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '4470eb6bf23f8adbc0d37bfce754f5557ff9de3a', 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" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: 'e42d7dcc9fb25d36b27d63f3f8417197a615b96d', id: "info", class: "info" }, this.info)), h("div", { key: 'b47a1f979362df5abbab9d68e6287730a24fe244', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '3b2705a7eafe5bba4fd8bade8d17d15c394702b7', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -410,13 +410,13 @@ export class Timepicker {
         return this.times.map((time, index) => (h("li", { id: `option${index + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (h(Host, { key: '465a66ad7ca35812ed08210a1314e9045ce9d132', onBlur: () => this.close(false) }, h("div", { key: 'd47ce73ca7efcfd7f23b0db03b4a451a2dac4446', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '9f28f2d4604301c40a1546c972e8063c6d8d3866', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '302946f368394139d04de0837cc0f5a9dc9f5d01', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'a13ad11e096383e3f54fe4e9c058a72f4f1f23d8', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: 'e2505ced2cd45326f1d66de36aceebf177a1a159' }, h("div", { key: '838fa98f05e0fa033f10fec973eba5cbb64cfb84', class: "inner-wrapper" }, h("input", { key: '6e11818266217669281b105b38a746cee3add730', 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") }), h("button", { key: '4be47c23c8929847bd36289b103d14a52893e8ff', 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()),
+        return (h(Host, { key: 'c7416008a2b74ce5cbe39715b88aea8bcd719da8', onBlur: () => this.close(false) }, h("div", { key: '25507a9130e2dc8637342709f1e6b57dc3e28d0a', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, h("div", { key: '44def4907601a6ef8ad909c21edaf764a8ce0d72', class: "label-wrapper" }, this.labelPosition !== "none" && (h("label", { key: '14b59b7983425c4e8b8b51831dfe98e3db94fa0e', id: "label", class: "label", htmlFor: "time-input", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label)), this.labelPosition !== "none" && this.requiredField && (h("div", { key: 'de2b38b8d703f14192cff29f1cd548e76fce193d', "aria-hidden": "true", class: "required" }, "*"))), h("div", { key: 'fceb670c0d1f46138d341a823062c9833053488e' }, h("div", { key: '3f695b6a8e38ec22b5204fd1389a3f9c4bc96148', class: "inner-wrapper" }, h("input", { key: '71a0e829110bc6b3c64e902adea49f2c60876e95', 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") }), h("button", { key: 'cc227a7033f6f76d112c8fb9f9eaf06f69118e48', 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()),
             // This addresses an issue in Safari, where clicking buttons does not focus them
             // if the button does not receive focus when clicked, Timepicker incorrectly emits a blur event
             onMouseDown: (ev) => {
                 ev.preventDefault();
                 this.buttonEl.focus();
-            } }, h("span", { key: '584530b0cd9714d70fbfcaa4ea8e2eece6b35492', class: "svg-icon svg-time" })), h("ul", { key: 'de8dece352fe83eb8107d5f98af3f6e9a4085e88', 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())), h("div", { key: '951d548bdc145d5902b8ec30dbf5342207408bec', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '820b447b0fa475bce5ed5a5d661e19d8ed9203d8', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, h("span", { key: '7046bb3fbe7c7731357f4dd50ff018458bbe7247', class: "svg-icon svg-time" })), h("ul", { key: '4cad61e9145cb861a2cfe1831b5be0addc76729d', 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())), h("div", { key: '3f46ccf9f491685645e0fcfbca62d0d0c581378c', id: "error", class: "error" }, this.errorMessage)), h("div", { key: '72f309c6674c965d61b05955bfa5510f9e52fc05', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get is() { return "wm-timepicker"; }
     static get encapsulation() { return "shadow"; }

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

@@ -291,11 +291,11 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { key: 'e54ccaf2ac1e22ddc9c98f9d5ac5d83186c4e93e', class: `size-${this.targetSize}` }, h("button", { key: 'ba74011ce4d673e7fdd3efcd18fe7e8ed4022bd0', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => !this.isOpen && this.open(),
+        return (h(Host, { key: '7d5804fa5b97d56353a8cc684df29b58ba31914e', class: `size-${this.targetSize}` }, h("button", { key: '9e7904bca9387d59e288231b9a2cdc1b801f7e3e', ref: (el) => (this.buttonEl = el), class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => !this.isOpen && this.open(),
             // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
-            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: 'f2cddb9107e8c79807413900a78ea3fc1f0c5755', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
+            onMouseEnter: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => !this.isOpen && showTooltip(this.toggletipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, this.renderIcon()), h("div", { key: 'd0199b0878d4ac5c352348f66df8270357b5172b', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.targetSize} ${this.isHidden ? "hidden" : ""}`, id: "toggletip",
             // @ts-ignore - despite what Typescript says, this is a valid event for popover elements
-            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: 'e11bbe1e3ab9d7d6a14eca63ef32ffd938158fa0', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onToggle: (ev) => this.handlePopoverToggle(ev) }, this.tooltip), h("div", { key: 'b7f2bbe046db18d9274117005414ba67c85bc0d4', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }

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

@@ -413,9 +413,9 @@ export class Uploader {
         return (h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, h("span", { class: "upload-arrow" }), h("span", null, "Drop to Upload")))));
     }
     render() {
-        return (h(Host, { key: '10b9229c1b4c9c33c5ac26f2632cef8a3bb7725f', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'ed105d34fbd49f62a7e2aadc0514a4d2243b6e5a', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (h(Host, { key: 'e945ea71838e42987ea6da7ced301348b2581346', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: '98dffa1b478372df347177973888a95bd774a85d', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), h("div", { key: '1ec637c9bdbefecde3f229db946b3701dc271d06', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { key: '991eb30875a90140f1fad4c8cc4b33bdf4c5ffaa', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-uploader"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/dev/date-range.js

@@ -1,7 +1,47 @@
 document.querySelectorAll("wm-date-range").forEach((dateRange) => {
-  dateRange.addEventListener("wmRangeSelection", (ev) => {
-    dateRange.valueStart = ev.detail.startDate.us;
-    dateRange.valueEnd = ev.detail.endDate.us;
+  // this is flexible to test for many types of date formats, but this is typically uniform across instances
+  const dateFormat = dateRange.getAttribute("date-format");
+  const dateFormatUnit =
+    dateFormat === "MM/DD/YYYY" || dateFormat === null ? "US" : dateFormat === "DD/MM/YYYY" ? "INT" : "ISO";
+
+  const updateErrorMessage = (message) => {
+    dateRange.errorMessage = dateRange.invalidStart || dateRange.invalidEnd ? message || dateRange.errorMessage : "";
+  };
+
+  const validate = async (field) => {
+    const value = field === "start" ? dateRange.valueStart : dateRange.valueEnd;
+    const invalidProp = field === "start" ? "invalidStart" : "invalidEnd";
+    let message = "";
+
+    if (!value) {
+      dateRange[invalidProp] = dateRange.requiredField;
+      message = "A date is required";
+    } else {
+      const isoDate = await dateRange.reformatDate(dateFormatUnit, "ISO", value);
+      if (await dateRange.isValidISO(isoDate)) {
+        // if valid date, clean up formatting and set properties
+        const displayDate = await dateRange.reformatDate("ISO", dateFormatUnit, isoDate);
+        if (field === "start") dateRange.valueStart = displayDate;
+        else dateRange.valueEnd = displayDate;
+        dateRange[invalidProp] = false;
+      } else {
+        // if invalid date, leave value and display error
+        dateRange[invalidProp] = true;
+        message = `Please enter a valid date in the format ${dateFormat ? dateFormat : "MM/DD/YYYY"}`;
+      }
+    }
+    updateErrorMessage(message);
+  };
+
+  dateRange.addEventListener("wmStartInputBlur", () => validate("start"));
+  dateRange.addEventListener("wmEndInputBlur", () => validate("end"));
+
+  dateRange.addEventListener("wmRangeSelection", async (ev) => {
+    dateRange.valueStart = await dateRange.reformatDate("ISO", dateFormatUnit, ev.detail.startDate.iso);
+    dateRange.valueEnd = await dateRange.reformatDate("ISO", dateFormatUnit, ev.detail.endDate.iso);
+    dateRange.invalidStart = false;
+    dateRange.invalidEnd = false;
+    dateRange.errorMessage = "";
   });
 });