@watermarkinsights/ripple 5.7.0-6 → 5.7.0-8

package/dist/cjs/{wm-modal.cjs.entry.js → wm-modal_3.cjs.entry.js}

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-788526f5.js');
 const functions = require('./functions-5ac8a62f.js');
+const intl = require('./intl-57d1cfd1.js');
 
 const wmModalCss = "wm-modal{--wmcolor-modal-background:var(--wmcolor-background);--wmcolor-modal-border:var(--wmcolor-border);--wmcolor-modal-heading:var(--wmcolor-text);--wmcolor-modal-overlay:var(--wmcolor-overlay)}wm-modal *{-webkit-box-sizing:border-box;box-sizing:border-box}wm-modal dialog{color:inherit;padding:0;width:80vw;max-width:750px;max-height:80vh;-webkit-border-radius:5px 5px 5px 5px;-moz-border-radius:5px 5px 5px 5px;-ms-border-radius:5px 5px 5px 5px;border-radius:5px 5px 5px 5px;border:none;background:var(--wmcolor-modal-background)}wm-modal dialog>:not(wm-modal-header):not(wm-modal-footer){max-height:calc(80vh - 166px)}wm-modal dialog::-webkit-backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog::-ms-backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog::backdrop{background:rgba(25, 25, 25, 0.4)}wm-modal dialog[open]{-webkit-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);-moz-box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14);box-shadow:0px 11px 15px 0px rgba(0, 0, 0, 0.2), 0px 9px 46px 8px rgba(0, 0, 0, 0.12), 0px 24px 38px 3px rgba(0, 0, 0, 0.14)}wm-modal dialog.wm-modal>wm-modal-header{border-bottom:1px solid var(--wmcolor-modal-border)}wm-modal dialog.wm-modal>wm-modal-footer{border-top:1px solid var(--wmcolor-modal-border)}@media only screen and (max-width: 768px){wm-modal dialog.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal dialog.wm-modal>*{max-width:none;width:100vw}wm-modal dialog.wm-modal>*:not(wm-modal-header):not(wm-modal-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal dialog.wm-dialog>:not(wm-modal-header):not(wm-modal-footer):not(.wm-tooltip){padding:0 1.875rem 1.25rem 1.875rem;font-size:0.875rem;border:none}wm-modal wm-modal-header,wm-modal wm-modal-footer{padding:1.25rem 1.875rem;width:100%}wm-modal .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important;top:0;left:0}";
 const WmModalStyle0 = wmModalCss;
@@ -137,4 +138,78 @@ const Modal = class {
 };
 Modal.style = WmModalStyle0;
 
+const wmModalFooterCss = "wm-modal-footer{display:block;-webkit-border-radius:0px 0px 5px 5px;-moz-border-radius:0px 0px 5px 5px;-ms-border-radius:0px 0px 5px 5px;border-radius:0px 0px 5px 5px}wm-modal-footer .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}@media only screen and (max-width: 650px){wm-modal-footer .wm-wrapper.footer-text{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}}wm-modal-footer .wm-wrapper wm-button+wm-button{margin-left:1rem}wm-modal-footer .wm-wrapper .wm-info{font-size:0.875rem;font-style:italic}@media only screen and (max-width: 650px){wm-modal-footer .wm-wrapper .wm-info{padding-bottom:0.625rem}}wm-modal-footer .wm-wrapper .wm-info:focus{outline:none}";
+const WmModalFooterStyle0 = wmModalFooterCss;
+
+const ModalFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.secondaryText = "";
+        this.primaryText = "";
+        this.infoText = "";
+        this.primaryActionDisabled = false;
+        this.deleteStyle = false;
+    }
+    componentWillLoad() {
+        const parentModal = this.el.closest("wm-modal");
+        this.uid = parentModal.uid;
+        // Trap focus when user shift+tabs past first element in modal
+        // NB @Listen doesn't allow to listen on a specific element (the parent modal)
+        // if we listen to the whole doc each modal on the page reacts to every event
+        parentModal.addEventListener("focusLastElement", () => {
+            this.lastElement.focus();
+        });
+    }
+    emitParentPrimaryEvent() {
+        const parentModal = this.el.closest("wm-modal");
+        if (parentModal) {
+            parentModal.emitPrimaryEvent();
+        }
+    }
+    emitParentSecondaryEvent() {
+        const parentModal = this.el.closest("wm-modal");
+        if (parentModal) {
+            parentModal.emitSecondaryEvent();
+        }
+    }
+    render() {
+        return (index.h("div", { key: '38b6b1759d4bdb628259acbf229a1d634df2dbf5', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, index.h("div", { key: '4259692e664739723e3895e8ec8d00ef00ef79f0', class: "wm-info", "aria-live": "polite" }, this.infoText), index.h("div", { key: '6ffea66fdfd257e754a9012e9471848037e92a52', class: "wm-button-collection" }, this.secondaryText && (index.h("wm-button", { key: '679eef458298304564cd365f15c8253796158ed8', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), index.h("wm-button", { key: 'a6e02b671dbfbacba79aa483b8d6ab8dc9232166', "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))));
+    }
+    get el() { return index.getElement(this); }
+};
+ModalFooter.style = WmModalFooterStyle0;
+
+const wmModalHeaderCss = "wm-modal-header{display:block;-webkit-border-radius:5px 5px 0 0px;-moz-border-radius:5px 5px 0 0px;-ms-border-radius:5px 5px 0 0px;border-radius:5px 5px 0 0px}wm-modal-header .wm-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}wm-modal-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:var(--wmcolor-modal-heading);line-height:normal}wm-modal-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-header .wm-wrapper .title:focus{outline:none}";
+const WmModalHeaderStyle0 = wmModalHeaderCss;
+
+const ModalHeader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.heading = "";
+        this.subheading = "";
+    }
+    componentWillLoad() {
+        const parentModal = this.el.closest("wm-modal");
+        this.uid = parentModal.uid;
+        // Trap focus when user tabs past last element in modal
+        // NB @Listen doesn't allow to listen on a specific element (the parent modal)
+        // if we listen to the whole doc each modal on the page reacts to every event
+        parentModal.addEventListener("focusFirstElement", () => {
+            this.closeButtonEl.focus();
+        });
+    }
+    emitParentCloseEvent() {
+        const parentModal = this.el.closest("wm-modal");
+        //@ts-ignore
+        parentModal.emitCloseEvent();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'f178a3e4b95a12286b3364efbebe22b3a389f24c' }, index.h("div", { key: '8a6589a653e28aa5eb926f50695fe129c57548d6', class: "wm-wrapper" }, index.h("div", { key: '33ca649393f628c8ab5160c5e11e208812dad450' }, index.h("h2", { key: 'e171bcaa0424e97401db3002bbc3ebaf9c66458d', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, index.h("span", { key: 'aacf128010d3416ca788d2110240991dcf36fd17', class: "subtitle" }, this.subheading))), index.h("wm-button", { key: '1a7342cd0ed7aa024b52af067ec9ed33c7a63b04', "button-type": "navigational", icon: "f156", tooltip: intl.globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+    }
+    get el() { return index.getElement(this); }
+};
+ModalHeader.style = WmModalHeaderStyle0;
+
 exports.wm_modal = Modal;
+exports.wm_modal_footer = ModalFooter;
+exports.wm_modal_header = ModalHeader;

package/dist/cjs/wm-navigation_3.cjs.entry.js

@@ -106,9 +106,9 @@ const Navigation = class {
             } }));
     }
     render() {
-        return (index.h(index.Host, { key: 'b8fa3d19d2d5c3bbc1d10b36012567be01955f4e', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (index.h("div", { key: '8661122685c09698703f7037d2f73676c13a930f', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), index.h("div", { key: '6d9f020d21e9c05bcc0a439f2939869267318d9d', class: "tray" }, index.h("div", { key: 'c497fd99f9ec90b352405f562d1c7d492d8af6f5', class: "toggle-wrapper" }, index.h("wm-button", { key: '5544c0479873097961737a85dda7c9f03f60edd0', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? intl.globalMessages.close : intl.globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (index.h(index.Host, { key: '4b46f2057cf47f6f2857a8c2fbd0113fbaa3d71b', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (index.h("div", { key: 'fe2e1586827cdbc1d0de1813ca15e5dbd42d99c0', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), index.h("div", { key: 'a65d6897042cadf2a43d99535c18ec314b6e1c54', class: "tray" }, index.h("div", { key: 'ff0242631c40b374c750e6377449d751ccc88d4c', class: "toggle-wrapper" }, index.h("wm-button", { key: 'e76ca281e2df25b9ab4169ff0aa9689ca3f71cae', ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "icon-size": "2rem", tooltip: this.open ? intl.globalMessages.close : intl.globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
                 this.open = !this.open;
-            } })), index.h("ul", { key: '921967fa3b818a6487b311d1413801caa936817b', class: "navlist" }, index.h("slot", { key: 'c71b593320116c6bad5091e6ad4c6247f28084b5' }))), this.isCollapsible && (index.h("div", { key: 'c8f0cb0b0649546939a31ce9ffebd8b6a5452e8d', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), index.h("ul", { key: 'd056d10575ad4aa3deb5cf00011d3469860625e0', class: "navlist" }, index.h("slot", { key: '5b4be146205fec5ffbd44970e60d7aa4e00c7fc1' }))), this.isCollapsible && (index.h("div", { key: 'dbba46d2e9e1c70a65cc968560197a56097775fe', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -157,7 +157,7 @@ const NavigationHamburger = class {
         this.wmNavigationHamburgerClicked.emit();
     }
     render() {
-        return (index.h(index.Host, { key: 'fc402d0497dde80e6cf677a1d68a6be907581d87', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, index.h("button", { key: '98f00ce032096525b6a8bc657ebf74ad0b9de422', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => functions.showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => this.isTabbing && functions.showTooltip("right", this.el, this.showNavMessage), onBlur: () => functions.hideTooltip(), onClick: () => this.handleClick() }, index.h("span", { key: 'b7a05af3f723c2d19c2dcf58d5e10660bd461382', class: "icon" }))));
+        return (index.h(index.Host, { key: '64106288d26853ec6dced8c379e308910d0fc241', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, index.h("button", { key: 'f874ff163e409ae233521d4c089d8f28911fe051', "aria-expanded": this.open, "aria-label": this.showNavMessage, onMouseEnter: () => functions.showTooltip("right", this.el, this.showNavMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => this.isTabbing && functions.showTooltip("right", this.el, this.showNavMessage), onBlur: () => functions.hideTooltip(), onClick: () => this.handleClick() }, index.h("span", { key: 'd85220650c6728633ca27259b5a370bbc7d47e02', class: "icon" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -176,7 +176,7 @@ const NavigationItem = class {
         this.active = undefined;
     }
     render() {
-        return (index.h(index.Host, { key: '8f21a176308fc0052df4c37e6ce10a56ce36714a', role: "listitem" }, index.h("a", { key: 'e0bc653ff770e9e5c7b8c05931ef59ae866ef5b0', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, index.h("div", { key: 'ee3b371175474cefdc4d3aa0dd78221807f8d36e', class: "icon", "aria-hidden": "true" }, index.h("slot", { key: 'a35caf3cc9befad2e9a7cf6b52612c11708ab93b' })), index.h("div", { key: 'c8ca711e000f7ea73ace37e8bf173b2fca94406a', class: "text" }, this.text))));
+        return (index.h(index.Host, { key: 'c4420b1e4396ac065b3674f52b124c0d25359435', role: "listitem" }, index.h("a", { key: 'ffd82c5f726e982e4418c8bd335c3c151ac1fbfd', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, index.h("div", { key: 'fe1a4418452356a9811359ded2aac74694f9a3d2', class: "icon", "aria-hidden": "true" }, index.h("slot", { key: '9690f8cbfb21a229493b9b7585ccdb3e90691aa1' })), index.h("div", { key: 'e134a8b4ca4df635c460b87e7a87cb3909737903', class: "text" }, this.text))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-nested-select.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-788526f5.js');
 const functions = require('./functions-5ac8a62f.js');
 const intl = require('./intl-57d1cfd1.js');
 
-const wmNestedSelectCss = ":host{--wmcolor-select-background:var(--wmcolor-background);--wmcolor-select-border:var(--wmcolor-input-border);--wmcolor-select-option-background-disabled:var(--wmcolor-option-background-disabled);--wmcolor-select-option-background-focus:var(--wmcolor-option-background-focus);--wmcolor-select-option-background-hover:var(--wmcolor-option-background-hover);--wmcolor-select-option-background-selected:var(--wmcolor-option-background-selected);--wmcolor-select-option-background:var(--wmcolor-option-background);--wmcolor-select-option-border:var(--wmcolor-option-border);--wmcolor-select-option-text-disabled:var(--wmcolor-option-text-disabled);--wmcolor-select-option-text:var(--wmcolor-option-text);--wmcolor-select-search-border:var(--wmcolor-input-border);--wmcolor-select-search-icon:var(--wmcolor-icon-accent);--wmcolor-select-searchresults-text:var(--wmcolor-text);--wmcolor-select-selectall-background:var(--wmcolor-select-option-background);--wmcolor-select-selectall-border:var(--wmcolor-select-option-border);--wmcolor-select-selectall-text:var(--wmcolor-interactive);--wmcolor-select-text:var(--wmcolor-interactive);position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}.wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}.wrapper .label .required{color:var(--wmcolor-text-required)}.wrapper.label-left{-ms-flex-direction:row;flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}.wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.wrapper.invalid .label{color:var(--wmcolor-text-error)}.wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}.wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}.button-wrapper{position:relative;-ms-flex:1;flex:1;font-size:1.125rem;color:var(--wmcolor-select-text);min-width:8.75rem}.button-wrapper .displayedoption{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background:var(--wmcolor-select-background);width:100%;border:solid 1px;border-color:var(--wmcolor-select-border);padding:0 1.875rem 0 0.9375rem;cursor:pointer;height:2.5rem;line-height:normal;font-family:inherit;color:var(--wmcolor-select-text);font-weight:400;font-size:0.875rem;text-transform:none;text-align:left}@media only screen and (max-width: 768px){.button-wrapper .displayedoption{height:2.75rem}}.button-wrapper .displayedoption:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f140\";position:absolute;right:0.5625rem;pointer-events:none;font-size:1.12rem}.button-wrapper .displayedoption.expanded:before{content:\"\\f143\"}.button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:var(--wmcolor-select-background);text-decoration:none}.button-wrapper .displayedoption:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}.button-wrapper .displayedoption:focus{outline:none}.button-wrapper .displayedoption::-moz-focus-inner{border:0}.button-wrapper .displayedoption:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:2px}.button-wrapper .displayedoption .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-ms-flex:1;flex:1}.button-wrapper .displayedoption .overflowcontrol.hassubinfo{display:-ms-flexbox;display:flex}.button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text{-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;min-width:0}.button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo{-ms-flex:none;flex:none;font-style:italic}.button-wrapper .displayedoption .overflow-counter{font-weight:bold;margin-left:0.5rem}.button-wrapper>.displayedoption[disabled]{color:#6b6b6b;border-color:#8a8a8a;background:#f0f0f0;cursor:default}.wrapper.invalid .button-wrapper .displayedoption{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}.wrapper .error-message{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-bottom:0.25rem;top:100%;left:0}.wrapper .error-message:not(:empty){margin-top:0.25rem}.dropdown{overflow-x:hidden;overflow-y:auto;-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;transform:scale(1, 0);-webkit-overflow-scrolling:touch;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;transition:transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:40;right:0;background:var(--wmcolor-select-option-background);z-index:100;width:100%;font-size:0.875rem}.dropdown.upwards{top:unset;bottom:100%;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.dropdown.hidden{visibility:hidden}.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}.menu{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:var(--max-height);overflow-y:auto}.menu.hidden{position:absolute;max-height:100%;overflow:hidden}.menu .menuitem{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;position:relative;padding:1.25rem;background:var(--wmcolor-select-option-background);font-family:inherit;list-style:none;color:var(--wmcolor-select-option-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;font-weight:600}.menu .menuitem:not(:last-child){border-bottom:2px solid;border-color:var(--wmcolor-select-option-border)}.menu .menuitem.disabled{color:var(--wmcolor-select-option-text-disabled);cursor:auto}.menu .menuitem.clear-selection{color:var(--wmcolor-select-text);-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center}.menu .menuitem.clear-selection:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f156\";pointer-events:none;padding-right:0.5rem;font-size:1.12rem}.menu :focus{outline:none;background:var(--wmcolor-interactive-background-focus)}.menu :hover{background:var(--wmcolor-select-option-background-hover);outline:none}.group-btn:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f142\";position:absolute;right:1.25rem;pointer-events:none;font-size:1.12rem}.group-btn.disabled{background:var(--wmcolor-select-option-background-disabled)}.selection-count,.disabled-indication{margin-right:40px;font-weight:400;font-style:italic}.disabled-indication{color:var(--wmcolor-interactive-disabled)}.option-list-wrapper{background:white;width:100%;-webkit-transform:translateX(0%);transform:translateX(0%);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.04, 0, 0.2, 1);transition:-webkit-transform 0.2s cubic-bezier(0.04, 0, 0.2, 1);transition:transform 0.2s cubic-bezier(0.04, 0, 0.2, 1);transition:transform 0.2s cubic-bezier(0.04, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.04, 0, 0.2, 1)}.option-list-wrapper.hidden{-webkit-transform:translateX(100%);transform:translateX(100%);position:absolute;top:0px;max-height:100%;overflow-y:hidden}.measurement-area{position:absolute;visibility:hidden;height:0px;pointer-events:none}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
+const wmNestedSelectCss = ":host{--wmcolor-select-background:var(--wmcolor-background);--wmcolor-select-border:var(--wmcolor-input-border);--wmcolor-select-option-background-disabled:var(--wmcolor-option-background-disabled);--wmcolor-select-option-background-focus:var(--wmcolor-option-background-focus);--wmcolor-select-option-background-hover:var(--wmcolor-option-background-hover);--wmcolor-select-option-background-selected:var(--wmcolor-option-background-selected);--wmcolor-select-option-background:var(--wmcolor-option-background);--wmcolor-select-option-border:var(--wmcolor-option-border);--wmcolor-select-option-text-disabled:var(--wmcolor-option-text-disabled);--wmcolor-select-option-text:var(--wmcolor-option-text);--wmcolor-select-search-border:var(--wmcolor-input-border);--wmcolor-select-search-icon:var(--wmcolor-icon-accent);--wmcolor-select-searchresults-text:var(--wmcolor-text);--wmcolor-select-selectall-background:var(--wmcolor-select-option-background);--wmcolor-select-selectall-border:var(--wmcolor-select-option-border);--wmcolor-select-selectall-text:var(--wmcolor-interactive);--wmcolor-select-text:var(--wmcolor-interactive);position:relative;display:block;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit}.wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;font-size:0.875rem}.wrapper .label{display:block;line-height:normal;font-weight:600;white-space:nowrap;margin-bottom:0.25rem}.wrapper .label .required{color:var(--wmcolor-text-required)}.wrapper.label-left{-ms-flex-direction:row;flex-direction:row}.wrapper.label-left .label-wrapper{line-height:2.5rem}.wrapper.label-left .label-wrapper .label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;min-height:2.5rem;white-space:normal;margin-bottom:0;margin-right:0.75rem}.wrapper.label-none label{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.wrapper.invalid .label{color:var(--wmcolor-text-error)}.wrapper.invalid .label:after{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f026\";margin-left:0.3125rem}[dir=RTL] .wrapper.invalid .label:after{margin-left:0;margin-right:0.3125rem}.wrapper.rtl.label-left .label{margin-right:0;margin-left:0.75rem}.button-wrapper{position:relative;-ms-flex:1;flex:1;font-size:1.125rem;color:var(--wmcolor-select-text);min-width:8.75rem}.button-wrapper .displayedoption{-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;background:var(--wmcolor-select-background);width:100%;border:solid 1px;border-color:var(--wmcolor-select-border);padding:0 1.875rem 0 0.9375rem;cursor:pointer;height:2.5rem;line-height:normal;font-family:inherit;color:var(--wmcolor-select-text);font-weight:400;font-size:0.875rem;text-transform:none;text-align:left}@media only screen and (max-width: 768px){.button-wrapper .displayedoption{height:2.75rem}}.button-wrapper .displayedoption:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f140\";position:absolute;right:0.5625rem;pointer-events:none;font-size:1.12rem}.button-wrapper .displayedoption.expanded:before{content:\"\\f143\"}.button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:var(--wmcolor-select-background);text-decoration:none}.button-wrapper .displayedoption:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}.button-wrapper .displayedoption:focus{outline:none}.button-wrapper .displayedoption::-moz-focus-inner{border:0}.button-wrapper .displayedoption:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:2px}.button-wrapper .displayedoption .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-ms-flex:1;flex:1}.button-wrapper .displayedoption .overflowcontrol.hassubinfo{display:-ms-flexbox;display:flex}.button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text{-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;min-width:0}.button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo{-ms-flex:none;flex:none;font-style:italic}.button-wrapper .displayedoption .overflow-counter{font-weight:bold;margin-left:0.5rem}.button-wrapper>.displayedoption[disabled]{color:#6b6b6b;border-color:#8a8a8a;background:#f0f0f0;cursor:default}.wrapper.invalid .button-wrapper .displayedoption{-webkit-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);-moz-box-shadow:0 0 0 1px var(--wmcolor-input-border-error);box-shadow:0 0 0 1px var(--wmcolor-input-border-error);border-color:var(--wmcolor-input-border-error)}.wrapper .error-message{display:block;font-style:italic;color:var(--wmcolor-text-error);font-size:0.875rem;margin-bottom:0.25rem;top:100%;left:0}.wrapper .error-message:not(:empty){margin-top:0.25rem}.dropdown{overflow-x:hidden;overflow-y:auto;-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;-webkit-transition:-webkit-transform 0.25s ease;transition:-webkit-transform 0.25s ease;transition:transform 0.25s ease;transition:transform 0.25s ease, -webkit-transform 0.25s ease;-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;transform:scale(1, 0);-webkit-overflow-scrolling:touch;-webkit-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-moz-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.2);-ms-transition:transform 0.25s ease;-webkit-transition:transform 0.25s ease;-moz-transition:transform 0.25s ease;transition:transform 0.25s ease;-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0);-ms-transform-origin:center top;-webkit-transform-origin:center top;-moz-transform-origin:center top;transform-origin:center top;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;position:absolute;top:40;right:0;background:var(--wmcolor-select-option-background);z-index:100;width:100%;font-size:0.875rem}.dropdown.upwards{top:unset;bottom:100%;-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.dropdown.hidden{visibility:hidden}.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}.menu{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;max-height:var(--max-height);overflow-y:auto}.menu.hidden{position:absolute;max-height:100%;overflow:hidden}.menu .menuitem{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;position:relative;padding:1.25rem;background:var(--wmcolor-select-option-background);font-family:inherit;list-style:none;color:var(--wmcolor-select-option-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;font-weight:600}.menu .menuitem:not(:last-child){border-bottom:2px solid;border-color:var(--wmcolor-select-option-border)}.menu .menuitem.disabled{color:var(--wmcolor-select-option-text-disabled);cursor:auto}.menu .menuitem.clear-selection{color:var(--wmcolor-select-text);-ms-flex-pack:start;justify-content:start;-ms-flex-align:center;align-items:center}.menu .menuitem.clear-selection:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f156\";pointer-events:none;padding-right:0.5rem;font-size:1.12rem}.menu :focus-visible{outline:none;background:var(--wmcolor-interactive-background-focus)}.menu :hover{background:var(--wmcolor-select-option-background-hover);outline:none}.group-btn:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f142\";position:absolute;right:1.25rem;pointer-events:none;font-size:1.12rem}.group-btn.disabled{background:var(--wmcolor-select-option-background-disabled)}.selection-count,.disabled-indication{margin-right:40px;font-weight:400;font-style:italic}.disabled-indication{color:var(--wmcolor-interactive-disabled)}.option-list-wrapper{background:white;width:100%;-webkit-transform:translateX(0%);transform:translateX(0%);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.04, 0, 0.2, 1);transition:-webkit-transform 0.2s cubic-bezier(0.04, 0, 0.2, 1);transition:transform 0.2s cubic-bezier(0.04, 0, 0.2, 1);transition:transform 0.2s cubic-bezier(0.04, 0, 0.2, 1), -webkit-transform 0.2s cubic-bezier(0.04, 0, 0.2, 1)}.option-list-wrapper.hidden{-webkit-transform:translateX(100%);transform:translateX(100%);position:absolute;top:0px;max-height:100%;overflow-y:hidden}.measurement-area{position:absolute;visibility:hidden;height:0px;pointer-events:none}.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}";
 const WmNestedSelectStyle0 = wmNestedSelectCss;
 
 const NestedSelect = class {
@@ -133,6 +133,28 @@ const NestedSelect = class {
     closePopupOnEscape() {
         this.close();
     }
+    handleKeyDown(ev) {
+        // when shift tabbing but component is still in focus, close dropdown
+        switch (ev.key) {
+            case "Tab":
+                if (ev.shiftKey) {
+                    this.close();
+                }
+                break;
+            case "ArrowDown":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.open();
+                }
+                break;
+            case "ArrowUp":
+                if (this.isExpanded === false) {
+                    ev.preventDefault();
+                    this.open(true);
+                }
+                break;
+        }
+    }
     close(returnFocus = true) {
         if (this.isExpanded) {
             this.isExpanded = false;
@@ -145,7 +167,7 @@ const NestedSelect = class {
             }, 150);
         }
     }
-    open() {
+    open(focusLast = false) {
         if (!this.isDisabled) {
             this.showClearSelectionButton = this.childOptions.some((o) => o.selected);
             this.isExpanded = true;
@@ -165,14 +187,16 @@ const NestedSelect = class {
                     ? spaceAbove
                     : null;
             });
-            window.requestAnimationFrame(() => {
-                this.focusFirstMenuitem();
-            });
-        }
-    }
-    focusFirstMenuitem() {
-        if (this.menuitemEls.length > 0) {
-            this.menuitemEls[0].focus();
+            // scrollIntoView does not work when the container of the element it's called on is not rendered to the page (in our case the dropdown is still closed and has transform: scaleY(0))
+            // when opening the dropdown, scrollIntoView must be delayed to a point where the browser recognizes content within it as able to be scrolled to
+            // in Safari in particular, the soonest this seems to happen is 20ms. The longest we can wait before any jumping in the open dropdown is noticeable is 60ms
+            window.setTimeout(() => {
+                if (this.menuitemEls.length > 0) {
+                    const menuitemToFocus = this.menuitemEls[focusLast ? this.menuitemEls.length - 1 : 0];
+                    menuitemToFocus.scrollIntoView({ block: "nearest" });
+                    menuitemToFocus.focus();
+                }
+            }, 60);
         }
     }
     moveDown(menuitemEl) {
@@ -302,16 +326,16 @@ const NestedSelect = class {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (index.h(index.Host, { key: 'ed7b96e7d65c756fbbade7dfb2a8ae03da9d3277', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: 'a2783684ed70b347fd5081b9679cad00c4c73af9', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'dc6f0249ebbcd84df9108fdd2af2e3a7778c2a5a', class: "label-wrapper" }, index.h("label", { key: '6139f82a9c0a4c9ea569b0d6c74e694ca4924932', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (index.h(index.Host, { key: '854bfbccf53069ca95a2c7e3beb60ec7cef4fe52', onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { key: 'db844c36c341b311a1178899c3dd6f75b3cde901', class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '57b77d879d3065c2fd6e51c86a4cf9589d2b69dd', class: "label-wrapper" }, index.h("label", { key: 'd175fa9541a93c22be70143a10b77a087913087e', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // we can't use aria-required or required attributes because it's invalid on the elements we're using (button controlling a listbox)
-        this.requiredField ? (index.h("span", { class: "required" }, index.h("span", { class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { "aria-hidden": "true" }, "*"))) : (""))), index.h("div", { key: '3198a4409abb6d880330ffadd64022835ee94ba6', class: "button-wrapper" }, index.h("button", Object.assign({ key: '112c79d84e039c8a9044fc86c2d360a3c88acfec' }, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), index.h("span", { key: 'ab91af492aac319d84cb48dccdb127e5649b658b', class: "overflowcontrol" }, index.h("span", { key: 'fb0370d92612ee4ae365634e8e7f845ef0d6194a', class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), index.h("div", { key: 'e61b2f40ed449bbb679bd4792197eeb34f23d5f9', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: '1490530463cfcdb5d010f722b7f3078e0e036ce0', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, index.h("div", { key: '072c737865ad17a47ff9b70f9ee681542b766674', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight } }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
+        this.requiredField ? (index.h("span", { class: "required" }, index.h("span", { class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { "aria-hidden": "true" }, "*"))) : (""))), index.h("div", { key: '1e100f81edc7d1dd9c6e1224cd1d5cfeb68e37a7', class: "button-wrapper" }, index.h("button", Object.assign({ key: 'e8e68bc84666875a5a478aae79d04cc57d231f4b' }, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), index.h("span", { key: 'e0dc1adac5cdcb76da590a065b8fc80cead8df69', class: "overflowcontrol" }, index.h("span", { key: '36427c454c08d30402f50424772c4c3fe6d764e3', class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), index.h("div", { key: '2725d1b3b564a3d6a879e598ef5b0bf192dcd1d6', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { key: '54b75659619de70978e10ab8e3739938686084f8', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, index.h("div", { key: 'a6894d7f78c6eb4a155c2b55f88f43a47377ce7d', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight } }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
             return (index.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;
                         index.forceUpdate(this.el);
                     }
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, index.h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && index.h("div", { class: "disabled-indication" }, "Disabled")));
-        })), index.h("div", { key: '8e57555b287fb08eb92eac959ddd7259d560e33a', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, index.h("slot", { key: 'c22278aca4bd47298fdffeeb148896180e12da1e' }))), index.h("div", { key: '3180921d3e8e6a9dc7c7c34b5077e17f3da9ef88', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
+        })), index.h("div", { key: '52fd5904572fe4691cbae1422ccaf285f4a408dd', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, index.h("slot", { key: '7e3cf958381b7035914cc7f40bd386b923b1ef31' }))), index.h("div", { key: '0b4dfb9684d0f61cef7781d3b20d87d0ce7771ee', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-option_2.cjs.entry.js

@@ -6,7 +6,7 @@ const index = require('./index-788526f5.js');
 const functions = require('./functions-5ac8a62f.js');
 const intl = require('./intl-57d1cfd1.js');
 
-const wmOptionCss = ":host(:not(:last-child)){border-bottom:2px solid;border-color:var(--wmcolor-select-option-border)}:host{display:block;cursor:pointer;position:relative;padding:1.25rem;background:var(--wmcolor-select-option-background);font-family:inherit;list-style:none;color:var(--wmcolor-select-option-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host:focus,:host.focus{outline:none;background:var(--wmcolor-select-option-background-focus)}:host.icon{color:var(--wmcolor-interactive)}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.checkbox:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f131\";display:inline-block;margin-right:0.25rem;color:var(--wmcolor-interactive)}:host([aria-selected=true]){background:var(--wmcolor-select-option-background-selected);font-weight:500}:host([aria-selected=true]) .checkbox:before{content:\"\\f132\"}:host([aria-disabled=true]){color:var(--wmcolor-select-option-text-disabled);background:var(--wmcolor-select-option-background-disabled);cursor:default}:host([aria-disabled=true]) .checkbox:before{color:var(--wmcolor-select-option-text-disabled)}:host([aria-disabled=true]) .subinfo{color:var(--wmcolor-select-option-text-disabled)}:host(.multi-option){background:unset}:host(.clone.last){border-bottom:12px solid;border-color:var(--wmcolor-select-option-border)}:host(.hassubinfo){display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;gap:16px}:host(.hidden),:host(.filtered-out){display:none}.subinfo{font-style:italic}.option-wrapper{display:-ms-flexbox;display:flex}.option-text{display:inline-block}::slotted{font-family:inherit}::slotted(i){font-size:0.875rem}::slotted(i):before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;margin-right:0.625rem;pointer-events:none}:host(:focus){outline:none;background:var(--wmcolor-select-option-background-focus)}:host(:hover){background:var(--wmcolor-select-option-background-hover);outline:none}";
+const wmOptionCss = ":host(:not(:last-child)){border-bottom:2px solid;border-color:var(--wmcolor-select-option-border)}:host{display:block;cursor:pointer;position:relative;padding:1.25rem;background:var(--wmcolor-select-option-background);font-family:inherit;list-style:none;color:var(--wmcolor-select-option-text);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host:focus,:host.focus{outline:none;background:var(--wmcolor-select-option-background-focus)}:host.icon{color:var(--wmcolor-interactive)}:host .sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;border:0 !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;-webkit-clip-path:inset(50%) !important;clip-path:inset(50%) !important;white-space:nowrap !important;margin:-1px !important}.checkbox:before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\f131\";display:inline-block;margin-right:0.25rem;color:var(--wmcolor-interactive)}:host([aria-selected=true]){background:var(--wmcolor-select-option-background-selected);font-weight:500}:host([aria-selected=true]) .checkbox:before{content:\"\\f132\"}:host([aria-disabled=true]){color:var(--wmcolor-select-option-text-disabled);background:var(--wmcolor-select-option-background-disabled);cursor:default}:host([aria-disabled=true]) .checkbox:before{color:var(--wmcolor-select-option-text-disabled)}:host([aria-disabled=true]) .subinfo{color:var(--wmcolor-select-option-text-disabled)}:host(.multi-option){background:unset}:host(.clone.last){border-bottom:12px solid;border-color:var(--wmcolor-select-option-border)}:host(.hassubinfo){display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;gap:16px}:host(.hidden),:host(.filtered-out){display:none}.subinfo{font-style:italic}.option-wrapper{display:-ms-flexbox;display:flex}.option-text{display:inline-block}::slotted{font-family:inherit}::slotted(i){font-size:0.875rem}::slotted(i):before{display:inline-block;font:normal normal normal 24px/1 \"Material Design Icons\";font-size:inherit;text-rendering:auto;line-height:inherit;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:inline-block;margin-right:0.625rem;pointer-events:none}:host(:focus-visible){outline:none;background:var(--wmcolor-select-option-background-focus)}:host(:hover){background:var(--wmcolor-select-option-background-hover);outline:none}";
 const WmOptionStyle0 = wmOptionCss;
 
 const Option = class {

package/dist/cjs/wm-pagination.cjs.entry.js

@@ -162,7 +162,7 @@ const Pagination = class {
     render() {
         return (
         // do not render the component if there's only one page
-        this.totalItems > this.itemsPerPage && (index.h("nav", { key: '5598c56f54538470610f0419794e6e86f9fa9075', "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), index.h("div", { key: '931fe5f130389e998837fd3f98d0311d2a147095', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
+        this.totalItems > this.itemsPerPage && (index.h("nav", { key: 'ed11c99e89b41b3f6e9565525eb4a7e542355612', "aria-label": `Pagination Navigation. ${this.getCurrentPagesInView()}. Current page, ${this.currentPage}.` }, this.isLargeSize ? this.renderLarge() : this.renderSmall(), index.h("div", { key: '7e0cd5a74588a0e64c44874552dbcfcb2a66f2a1', id: "status", class: "sr-only", "aria-live": "polite", "aria-relevant": "text", "aria-atomic": "true" }, this.srAnnouncement))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-search.cjs.entry.js

@@ -177,10 +177,10 @@ const Search = class {
      * End search and find render helpers
      */
     render() {
-        return (index.h(index.Host, { key: '2c251f4f12069241343caacc2127c8c06260fc65' }, index.h("div", { key: '0a30850044b4707b06e671db14963dc98077af83', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, index.h("input", { key: '3f22650a996906a42a2dbf11029ee96fbd2458aa', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${functions.intl.formatMessage({
+        return (index.h(index.Host, { key: 'e8fadea4ee156b4a7271c8713669e189adf32d34' }, index.h("div", { key: '6d4290bd32864cc38c4b12e57f3baeb08819f049', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, index.h("input", { key: '2e2ef180f33db89d3aba91719b3db6ea454cfc6f', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${functions.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 }), index.h("span", { key: 'aabc53d0a664b5b69432670a8a4f7bdddeaa08b7', class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), index.h("div", { key: '8c622ee7546f24e9c0b7e8cc024b50badb5adb2b', 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 }), index.h("span", { key: '986eb365407500b246627f493a7e7e02361ceb23', class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), index.h("div", { key: '7b5d9a8c230e0a5c5138190ca845bd478b75d891', 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 delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-snackbar.cjs.entry.js

@@ -161,11 +161,11 @@ const Snackbar = class {
             }, onKeyDown: (ev) => ev.key === "Enter" && this.snackLinkClicked(notification) }, index.h("span", { "aria-hidden": "true" }, notification.link)))), index.h("button", { id: `close-button-${notification.id}`, "aria-label": "Close this notification", class: "closesnack", tabindex: notification.link ? 0 : -1, onClick: () => this.snackDismissed(notification), onMouseEnter: (ev) => functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onMouseLeave: () => functions.hideTooltip(), onFocus: (ev) => this.isTabbing && functions.showTooltip("bottom", ev.target, intl.globalMessages.close), onBlur: () => functions.hideTooltip() })), index.h("div", { class: "sr-only", tabindex: notification.link ? 0 : -1, onFocus: () => notification.link && this.snackDismissed(notification) })))));
     }
     render() {
-        return (index.h(index.Host, { key: 'f011ca2167934ad38a3b92e494e5405255c7c0d2' }, index.h("div", { key: 'd9f8242623624809a0b55cc58fa71eaea19c09a2', ref: (el) => (this.snackAreaEl = el), class: {
+        return (index.h(index.Host, { key: '33c5774f24dcedb900c37712612fe410faed84ab' }, index.h("div", { key: 'ffa02798ded28138c9bbe7a6c2f571f30bba1475', ref: (el) => (this.snackAreaEl = el), class: {
                 "list-wrapper": true,
                 "user-is-tabbing": this.isTabbing,
                 empty: this.parsedNotifications.length == 0,
-            } }, this.renderSnackbars()), index.h("div", { key: '94a065228d53362a9e401bef3998c2509c2a9466', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+            } }, this.renderSnackbars()), index.h("div", { key: '93adbefa63a40797446084f6ceb109b0fe896436', class: "sr-only", "aria-live": "polite", "aria-atomic": "false", id: `wm-live-region-${this.uid}`, ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/wm-tab-item_3.cjs.entry.js

@@ -53,7 +53,7 @@ const TabItem = class {
                 "background-size": `calc(100% - ${bkgSize}${units}) 3px`,
             };
         }
-        return (index.h(index.Host, { key: '1b5e2a436f666efdb4832313e9744f0cec64fd06', role: "presentation" }, index.h("li", { key: '1d976f2d8e997c35f850a1d3f81287e8a05cf6c5', class: "tab-item", role: "presentation" }, index.h("a", { key: 'a7b9d235329558637bce4e3d281b0fdd4acc012b', class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, index.h("slot", { key: '20b2a2a40de1935499717243115c6c7abd174a15' })))));
+        return (index.h(index.Host, { key: '95738f3913118c776e26a990cb63e41f22e7f352', role: "presentation" }, index.h("li", { key: 'a57605c203990a0dcc23d8dcba547f294cafe8ee', class: "tab-item", role: "presentation" }, index.h("a", { key: 'd299ee8e5d94f0aa5e9aea031f32ccab98a88bf9', class: `tab ${classes}`, style: styles, role: "tab", ref: (el) => (this.linkEl = el), onClick: this.tabClicked, id: `tab-link-${this.tabId}`, onKeyDown: (ev) => this.tabPressed(ev), "aria-selected": this.selected ? "true" : "false", tabindex: this.selected ? 0 : -1 }, index.h("slot", { key: '85a2b7d56187a7ca6d7e99efd3214cd2f9cad09d' })))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -220,7 +220,7 @@ const TabList = class {
             } }, t.textContent)));
     }
     render() {
-        return index.h(index.Host, { key: 'b5d5af9934cc164eaee24486d742fc84d0938cc4', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
+        return index.h(index.Host, { key: '9b1573d576177c3eeb42fd811118567743ee0c23', class: this.menuLayout ? "menu" : "" }, this.renderMenuOrTabs());
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }
@@ -247,7 +247,7 @@ const TabPanel = class {
         this.tabPanelLoaded.emit({ tabId: this.tabId });
     }
     render() {
-        return index.h(index.Host, { key: '360eaf2a3b7ff884dc965da4858c81db5deb9fac', role: "tabpanel", class: { "tab-hidden": !this.active } });
+        return index.h(index.Host, { key: 'dac02ce55774d3d4520999a92766d4488f36cf39', role: "tabpanel", class: { "tab-hidden": !this.active } });
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/wm-tag-input.cjs.entry.js

@@ -868,12 +868,12 @@ const TagInput = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'b309b4df4697e0403b40896eda41d68b65b3155b', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'dfba80379dcb6db4a3ffc49ad01153e3407b704c', class: "label-wrapper" }, index.h("label", { key: 'cfa0c452b41a258defc49ea9957bf2ba8d3b05d8', class: "label", htmlFor: "input" }, this.label, this.requiredField && (index.h("span", { key: '8a23dec0adcbc0589fe849a6533586c25d57421b', class: "required", "aria-hidden": "true" }, "*")))), index.h("div", { key: '6f8d837fba73454d6859f4dbdf2c25e351b691bc', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, index.h("div", { key: 'c36525991a3214b9ede94473f8d7b43f776bb3d3', class: "upper-row" }, index.h("div", { key: '122cb5fec9c3c4135fcf38d39ead53a1295793a1', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, index.h("ul", { key: '08c2bd6159ce137734d499fa4fc0231c994d5591', 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-label": `${this.label} ${this.tagAreaInstructions}`, tabindex: this._tagEls.length > 0 ? 0 : -1, "aria-describedby": `info max-tags`, onFocus: (ev) => this.handleTagAreaFocus(ev), onBlur: (ev) => {
+        return (index.h("div", { key: '2aeb57973cca66667e40249f1853b0532e039972', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'dca159804772027ce49a3f6d6c68e841a9b320c2', class: "label-wrapper" }, index.h("label", { key: '897e559fbb81a0ede815f45a226d8d8f67990b1b', class: "label", htmlFor: "input" }, this.label, this.requiredField && (index.h("span", { key: 'cdf63bc1dd5cf072f91d94746056675a5aed04d6', class: "required", "aria-hidden": "true" }, "*")))), index.h("div", { key: '9370a03b002e7ccb4ff6ebfe47b9bfeaf9f262f6', class: `field-wrapper ${this.el.shadowRoot.activeElement === this.inputEl ? "focused" : ""} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.fieldWrapperEl = el) }, index.h("div", { key: '81d03e7ea3116818dc234ec49f21a7ac24aca7b7', class: "upper-row" }, index.h("div", { key: 'c156c15343943a3be5e2267dfe956049da564c5e', class: `tags-and-input-wrapper ${this.inModal ? "in-modal" : ""}` }, index.h("ul", { key: '3a66fab9e68db26b13f9500771c875315665afdb', 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-label": `${this.label} ${this.tagAreaInstructions}`, 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()), index.h("input", { key: 'd40758c985a40ff517416ab1b06859ddae17fc6f', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? intl.globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
+            }, onKeyDown: (ev) => this.handleTagAreaKeyDown(ev) }, this.renderTags()), index.h("input", { key: 'dc8c31e93a6cb229320eeeaa68cf38f11c568498', id: "input", class: "input", role: "combobox", ref: (el) => (this.inputEl = el), autocomplete: "off", "aria-required": this.requiredField ? "true" : null, "aria-controls": this.tagInputType, "aria-describedby": `help-text${this.errorMessage ? " error " : ""} max-tags`, "aria-label": `${this.label} ${this.isDropdown ? intl.globalMessages.getCharacterLimit(this.characterLimit) : ""}`, "aria-expanded": this.isDropdown ? this.isExpanded.toString() : null, "aria-activedescendant": this.inputActiveDescendantId, placeholder: this.placeholder, maxLength: this.isDropdown ? this.characterLimit : undefined, onInput: (ev) => this.handleInputChanged(ev), onBlur: (ev) => {
                 this.handleBlur(ev);
-            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (index.h("div", { key: 'a40fa254989586242f1f4caaedc45c6f0a9c06b8', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (index.h("div", { key: '06f9aefd2182a3fee81b7ae37072593ca6f3f7f6', id: "info", class: "info-text" }, this.info)), index.h("div", { key: '8cea9a190c92e37924819ca1086762ca8e0298be', id: "error" }, this.errorMessage), index.h("div", { key: '43ccc1abb56e1c98962cfa345f89f65d5f352f33', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
+            }, onFocus: () => this.handleInputFocus(), onKeyDown: (ev) => this.handleInputKeyDown(ev) })), this.isDropdown && (index.h("div", { key: '3984d2faaeff36f5f2a3a6bd09be94ff4122e373', class: "character-count" }, this.charCount, "/", this.characterLimit))), this.renderTagCounter(), this.isDropdown && this.renderDropdown()), this.info && (index.h("div", { key: 'ddf352301e9d9c90f7766d2f9ad3d6368d03c179', id: "info", class: "info-text" }, this.info)), index.h("div", { key: 'f24b06ad36ee1577dbac2b5e6ccfa488533bcdf3', id: "error" }, this.errorMessage), index.h("div", { key: 'ff7aafe467e6ba49e3ce4b066619d8c577b3a304', class: "sr-only", "aria-live": "polite", ref: (el) => (this.liveRegionEl = el), "aria-atomic": "true" }, this.liveRegionMessage), this.isTable && this.renderTable()));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-textarea.cjs.entry.js

@@ -75,7 +75,7 @@ const Textarea = class {
         this.announcement = message;
     }
     render() {
-        return (index.h("div", { key: '5963390ed89f6ee8ff44fc80f92e2f0cfdfccd4a', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: 'fadf8f236da33a546ce0f69b443eec24f45cba62', class: "label-wrapper" }, index.h("label", { key: 'bbfb68383d2bb386a9b47618ef656839ff995937', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (index.h("span", { key: '3853f22c7d743c8445b89deb8b8586c1aa69a0ac', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (index.h("span", { key: 'b7dcd67f1f1127bb87ed33ecfa055453f408e8ea', class: "required", "aria-hidden": "true" }, "*")))), index.h("div", { key: 'f6c424bf2c62f2919b149c7cc2822276a5a234de', class: "inner-wrapper" }, index.h("div", { key: 'cc0291740374560f67a7421bb1d5a06ab1c0bc24', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, index.h("textarea", { key: '0c5e8a59627837930badbb00eaf5b92c95c3b4cd', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (index.h("div", { key: '542379c9da8a8b149090e7506aee6323f8cff191', id: "info", class: "info" }, this.info)), index.h("div", { key: '6b9e201401dc9d4c70a64b1582fd778b773e308f', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: '51dd3c3fb3159605ea226acbb6d895ea5ec6ba51', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (index.h("div", { key: 'f2771c26fe46e837b4ff57ea9f922c1ded455901', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { key: '97219e918f72ba4b439fe97b1ffe1ad4b05344b0', class: "label-wrapper" }, index.h("label", { key: '3682c7ec2bcf6060b230f69f6815a7fbcb1631bb', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (index.h("span", { key: 'ac07a0a0946a53f8947a388c44757109c70ea77e', class: "sr-only" }, " ", intl.globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (index.h("span", { key: 'beb4e904098a3691983a2ad4d1f539611ce8688d', class: "required", "aria-hidden": "true" }, "*")))), index.h("div", { key: 'f9d914ad58aca33fa3626fc8f19e0854762a1e9a', class: "inner-wrapper" }, index.h("div", { key: '241c56641abb90c00ec7d220f732835f107ff9ce', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, index.h("textarea", { key: 'affce2792cec06d20290995d0cf9631ef6943358', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (index.h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (index.h("div", { key: 'ecb77aa2f1ec8bf0adc46ee68bf04d517a673bb6', id: "info", class: "info" }, this.info)), index.h("div", { key: 'a3e9ef2cc8d20a29411887b72aa3e1a6c9538bc9', id: "error", class: "error-message" }, this.errorMessage), index.h("div", { key: '86cef4053bdc750a5cd3e272bbfe50ace94aca03', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/wm-timepicker.cjs.entry.js

@@ -286,13 +286,13 @@ const Timepicker = class {
         return this.times.map((time, index$1) => (index.h("li", { id: `option${index$1 + 1}`, "data-time": time, role: "option", onClick: () => this.handleOptionClick(time) }, this.reformatTimeInternal("12", time))));
     }
     render() {
-        return (index.h(index.Host, { key: '5c8f9748f8a901a11cc20a1dae82fde6ec194e2e', onBlur: () => this.close(false) }, index.h("div", { key: '5140bc789915dcde7ea687d4f2c776313d37c0c4', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, index.h("div", { key: 'ba0646d03ff3fe372a543dc037602589d69542ab', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: '35cefe7af8160f9cff853081d09e0f2ed2ec0818', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (index.h("span", { key: '796d6688c9613a5937d1a25f0a90abd01b9b608d', class: "required", "aria-hidden": "true" }, "*"))))), index.h("div", { key: '40a6067268b07d070a79ef32b9417e2a13ae934d' }, index.h("div", { key: '4a4fe825d9dbc2239541a36235675ed0f7116791', class: "inner-wrapper" }, index.h("input", { key: 'b8db0b9d23f4889306027e1c1c8e174a2b14dfb9', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), index.h("button", { key: '6edc54612e7c50e29e8189bd96fdeb4f25b4ed22', 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 (index.h(index.Host, { key: '6bc7678c9d7ebdb700cb285cf84e06bab254cf30', onBlur: () => this.close(false) }, index.h("div", { key: 'e65c6b8869ab2c45ffa7d763971e315f989c6cbc', class: `wrapper label-${this.labelPosition} ${!!this.errorMessage ? "invalid" : ""}`, ref: (t) => (this.tpWrapper = t) }, index.h("div", { key: '7aab143d7bc8078e873bdcb0d65a43e059b1fc6b', class: "label-wrapper" }, this.labelPosition !== "none" && (index.h("label", { key: '18ad9a6109f0a79ac64fe14f0b2b62d58d41ce1a', id: "label", class: "label", htmlFor: "time-input" }, this.label, this.requiredField && (index.h("span", { key: '7d41c7ea552094b3ec38e8ea16c17efdcb18ffca', class: "required", "aria-hidden": "true" }, "*"))))), index.h("div", { key: 'aed930cc20ce7199f6bbfa833608183173ffe29f' }, index.h("div", { key: 'c9d9e20b0241ef6e2c89d15fcaa29318839a9e46', class: "inner-wrapper" }, index.h("input", { key: 'f3d3140ff49fb9d125993c9c8aeae1f27103846e', id: "time-input", "aria-label": this.label, "aria-describedby": "error", ref: (el) => (this.inputEl = el), onBlur: () => this.handleInputBlur(), onInput: () => (this.value = this.inputEl.value), disabled: this.isDisabled, "aria-required": this.requiredField ? "true" : null, placeholder: this.timeFormat, autocomplete: "off", value: this.value, onFocus: () => this.tpWrapper.classList.add("focus") }), index.h("button", { key: '7d201c36f8dc9aded13eb38ff1646edb3bf3573c', 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();
-            } }, index.h("span", { key: 'd00fb627c3ffbe5a2d7459ea7f50a77af9c3de5a', class: "clock" })), index.h("ul", { key: '48af13c75b0776df9f77d585b4a20051cd66d96e', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), index.h("div", { key: '6bf8d7d5991dad08ebd3c4b524a6cb0ecf0218c8', id: "error", class: "error" }, this.errorMessage)), index.h("div", { key: '79ffebc4a0f3b987bd45c68453175ad33bdbdebc', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
+            } }, index.h("span", { key: '895dd2c39f5b8e6503f56aa9987bc254992aca23', class: "clock" })), index.h("ul", { key: 'c908487a11edac0b973209922f969d5c2d6aa016', class: `options ${this.isExpanded ? "open" : ""}  ${this.openUp ? "upwards" : ""}`, id: "list", role: "listbox", "aria-labelledby": "label", "aria-describedby": this.isExpanded ? "collapsed" : null, tabindex: -1, ref: (el) => (this.optionsEl = el) }, this.renderOptions())), index.h("div", { key: '4924844ae5eebf2e06672014d418bd52cfdbbbf8', id: "error", class: "error" }, this.errorMessage)), index.h("div", { key: '7db7953b34467bb276c6b606415e988a230841b4', id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-toggletip.cjs.entry.js

@@ -106,9 +106,9 @@ const Toggletip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '58ff678917d75890b31e5f9d509f5d4a6325d137', class: `size-${this.targetSize}` }, index.h("button", { key: 'e015f73d4c4687f9e2d304da3a70e3ec73feeff5', class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
+        return (index.h(index.Host, { key: '3649c97b6ed097b840c0fbfaca36233f5c153e98', class: `size-${this.targetSize}` }, index.h("button", { key: '7245bb050268a782fe5ba7dbe5a72b57c5fbb4e8', class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
             // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
-            onMouseEnter: () => functions.showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => functions.showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), index.h("div", { key: 'c2b790944b02e405f344d2044ff8ec709138877a', ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), index.h("div", { key: '90025118489a397a87b185f09109b817d308e9bd', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onMouseEnter: () => functions.showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => functions.hideTooltip(), onFocus: () => functions.showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), index.h("div", { key: '6617109efb830c025bdf8af64144c47e48d851ac', ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), index.h("div", { key: '305954841b7f92772c778c02907b4740bafdc4d1', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/wm-uploader.cjs.entry.js

@@ -206,9 +206,9 @@ const Uploader = class {
         return (index.h("div", { class: `wrapper ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { id: "label", class: `label` }, this.label, this.requiredField && (index.h("span", { class: "required", "aria-hidden": "true" }, "*")))));
     }
     render() {
-        return (index.h(index.Host, { key: 'd95df838970c9e94e3ffd6676ebbd38c3d516057' }, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.h("div", { key: '938bce832e6579487ab05b22cfcd98114e57c245', 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 (index.h(index.Host, { key: 'd058c5c04f6a22125c54fa4cf076c23bc358b36e' }, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), index.h("div", { key: 'efa1a3c0b1a6258121356a41975b3599b6b575f9', 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" }), index.h("div", { key: 'd4ae7a43d016b7ed25d42a1167c79d48ef12583e', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), index.h("div", { key: 'c601d1a1a22c4cc77eb0d7af79dda540f8f14940', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get delegatesFocus() { return true; }
     get el() { return index.getElement(this); }

package/dist/collection/collection-manifest.json

@@ -24,6 +24,9 @@
     "components/wm-modal/wm-modal-footer.js",
     "components/wm-modal/wm-modal-header.js",
     "components/wm-modal/wm-modal.js",
+    "components/wm-modal-pss/wm-modal-pss-footer.js",
+    "components/wm-modal-pss/wm-modal-pss-header.js",
+    "components/wm-modal-pss/wm-modal-pss.js",
     "components/wm-navigation/wm-navigation-hamburger.js",
     "components/wm-navigation/wm-navigation-item.js",
     "components/wm-navigation/wm-navigation.js",
@@ -81,11 +84,6 @@
         "wm-input"
       ]
     },
-    {
-      "components": [
-        "wm-modal"
-      ]
-    },
     {
       "components": [
         "wm-navigator"
@@ -153,6 +151,20 @@
         "wm-select"
       ]
     },
+    {
+      "components": [
+        "wm-modal",
+        "wm-modal-footer",
+        "wm-modal-header"
+      ]
+    },
+    {
+      "components": [
+        "wm-modal-pss",
+        "wm-modal-pss-footer",
+        "wm-modal-pss-header"
+      ]
+    },
     {
       "components": [
         "wm-navigation",

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

@@ -353,7 +353,7 @@
   padding-right: 0.5rem;
   font-size: 1.12rem;
 }
-.menu :focus {
+.menu :focus-visible {
   outline: none;
   background: var(--wmcolor-interactive-background-focus);
 }