@watermarkinsights/ripple 5.7.0-8 → 5.7.0

package/dist/esm/wm-modal-pss_3.entry.js

@@ -1,9 +1,10 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-130e07bb.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-558b5a82.js';
+import { g as generateId, c as checkForActiveElInShadow } from './functions-8800c690.js';
+import { g as globalMessages } from './intl-b110ca8d.js';
 
-const wmModalPssCss = "wm-modal-pss{--wmcolor-modal-background:var(--wmcolor-background);--wmcolor-modal-border:var(--wmcolor-border);--wmcolor-modal-heading:var(--wmcolor-text);--wmcolor-modal-overlay:var(--wmcolor-overlay);display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:2001;width:80vw;max-width:750px;max-height:80vh;-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);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-pss *{-webkit-box-sizing:border-box;box-sizing:border-box}wm-modal-pss>*{width:80vw;max-width:750px;background:var(--wmcolor-modal-background)}wm-modal-pss>*:focus{outline:none}wm-modal-pss wm-modal-pss-header,wm-modal-pss wm-modal-pss-footer{padding:20px 30px}wm-modal-pss wm-modal-pss-header{z-index:2003}wm-modal-pss wm-modal-pss-footer{z-index:2003}wm-modal-pss>:not(wm-modal-pss-header):not(wm-modal-pss-footer){max-height:calc(80vh - 166px);z-index:2002}wm-modal-pss.wm-modal wm-modal-pss-header{border-bottom:1px solid var(--wmcolor-modal-border)}wm-modal-pss.wm-modal wm-modal-pss-footer{border-top:1px solid var(--wmcolor-modal-border)}@media only screen and (max-width: 768px){wm-modal-pss.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal-pss.wm-modal>*{max-width:none;width:100vw}wm-modal-pss.wm-modal>*:not(wm-modal-pss-header):not(wm-modal-pss-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal-pss.wm-dialog>:not(wm-modal-pss-header):not(wm-modal-pss-footer){padding:0 30px 20px 30px;font-size:0.875rem;border:none}wm-modal-pss .overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:-1;bottom:1;left:-1;right:1;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:var(--wmcolor-modal-overlay);-webkit-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;z-index:2000}wm-modal-pss.hide{visibility:hidden}wm-modal-pss .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 WmModalPssStyle0 = wmModalPssCss;
+const wmModalPssCss = "wm-modal-pss{--wmcolor-modal-background:var(--wmcolor-background);--wmcolor-modal-border:var(--wmcolor-border);--wmcolor-modal-heading:var(--wmcolor-text);--wmcolor-modal-overlay:var(--wmcolor-overlay);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-ms-flex-direction:column;flex-direction:column;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);z-index:2001;width:80vw;max-width:750px;max-height:80vh;-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-pss *{-webkit-box-sizing:border-box;box-sizing:border-box}wm-modal-pss>*{width:80vw;max-width:750px;background:var(--wmcolor-modal-background)}wm-modal-pss>*:focus{outline:none}wm-modal-pss wm-modal-pss-header,wm-modal-pss wm-modal-pss-footer{padding:1.25rem 1.875rem}wm-modal-pss wm-modal-pss-header{z-index:2003}wm-modal-pss wm-modal-pss-footer{z-index:2003}wm-modal-pss>:not(wm-modal-pss-header):not(wm-modal-pss-footer){max-height:calc(80vh - 166px);z-index:2002}wm-modal-pss.wm-modal wm-modal-pss-header{border-bottom:1px solid var(--wmcolor-modal-border)}wm-modal-pss.wm-modal wm-modal-pss-footer{border-top:1px solid var(--wmcolor-modal-border)}@media only screen and (max-width: 768px){wm-modal-pss.wm-modal{height:100%;max-height:none;max-width:none;width:100vw}wm-modal-pss.wm-modal>*{max-width:none;width:100vw}wm-modal-pss.wm-modal>*:not(wm-modal-pss-header):not(wm-modal-pss-footer){max-height:none;height:calc(100vh - 166px)}}wm-modal-pss.wm-dialog>:not(wm-modal-pss-header):not(wm-modal-pss-footer){padding:0 1.875rem 1.25rem 1.875rem;font-size:0.875rem;border:none}wm-modal-pss .overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:-1;bottom:1;left:-1;right:1;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:var(--wmcolor-modal-overlay);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out;z-index:2000}wm-modal-pss.hide{visibility:hidden}wm-modal-pss .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 Modal = class {
+const ModalPss = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.focusLastElement = createEvent(this, "focusLastElement", 3);
@@ -34,6 +35,12 @@ const Modal = class {
     toggleModal() {
         this.open ? this.showModal() : this.hideModal();
     }
+    //The below not implemented in light of the fact that the app does often need to keep track of the modal's state itself so that it can update the data displayed in the body:
+    //App can also open modal by emitting wmShowModal event. Event needs to include the modal's unique id as the event detail, or else all modals on the page will open when wmShowModal event is dispatched.
+    // @Listen("wmShowModal", { target: "window" })
+    // doesEventMatchId(ev: CustomEvent) {
+    //   ev.detail === this.uid && this.showModal();
+    // }
     handleClick(ev) {
         this.open && ev.target === this.overlayEl && this.focusOnOpenEl.focus();
     }
@@ -68,14 +75,13 @@ const Modal = class {
     componentWillLoad() {
         if (this.elementToFocus === "primary" || this.elementToFocus === "secondary") {
             if (!this.el.id) {
-                console.error("For accessibility purposes, you need to set the modal content wrapper's id to 'content-[id of wm-modal-pss]'.");
+                console.error("You are telling the modal to focus an element in the footer when it opens. That's fine! But when you do that, you also need to give the wm-modal-wrapper an ID and set the ID of the modal body to 'content-[id of wm-modal-wrapper]. This is for accessibility purposes.");
             }
         }
         this.el.focus = () => {
             this.focusOnOpenEl.focus();
         };
-        const generatedId = "wmcl-" + Math.random().toString(36).substr(2, 10);
-        this.uid = this.el.id ? this.el.id : generatedId;
+        this.uid = this.el.id ? this.el.id : generateId();
     }
     componentDidLoad() {
         if (this.open) {
@@ -106,13 +112,7 @@ const Modal = class {
             this.focusOnCloseEl = elToFocus.parentElement;
         }
         else {
-            let el;
-            while (elToFocus && elToFocus.shadowRoot) {
-                el = elToFocus.shadowRoot.activeElement;
-            }
-            if (el) {
-                this.focusOnCloseEl = el;
-            }
+            this.focusOnCloseEl = checkForActiveElInShadow(elToFocus);
         }
     }
     redirectFocusFromBody() {
@@ -121,9 +121,9 @@ const Modal = class {
         }
     }
     render() {
-        return (h(Host, { key: '85e48c3a6876e546014d2100b5cf575ae0aa4eb8', 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, { 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: 'cf58003fbfc9ea4a013c3689aa93f45dca5a0358', class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { key: '59504e363659c2393c6b7f4a10f512485291b253', class: "sr-only", tabIndex: 0, onFocus: () => {
+            } }, h("div", { class: "overlay", ref: (el) => (this.overlayEl = el) }), h("div", { class: "sr-only", tabIndex: 0, onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }
@@ -132,12 +132,11 @@ const Modal = class {
         "open": ["toggleModal"]
     }; }
 };
-Modal.style = WmModalPssStyle0;
+ModalPss.style = wmModalPssCss;
 
-const wmModalPssFooterCss = "wm-modal-pss-footer{border-radius:0px 0px 5px 5px;margin-top:-1px}wm-modal-pss-footer .wm-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}@media only screen and (max-width: 650px){wm-modal-pss-footer .wm-wrapper.footer-text{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}}wm-modal-pss-footer .wm-wrapper wm-button+wm-button{margin-left:1rem}wm-modal-pss-footer .wm-wrapper .wm-info{font-size:0.875rem;font-style:italic}@media only screen and (max-width: 650px){wm-modal-pss-footer .wm-wrapper .wm-info{padding-bottom:0.625rem}}wm-modal-pss-footer .wm-wrapper .wm-info:focus{outline:none}";
-const WmModalPssFooterStyle0 = wmModalPssFooterCss;
+const wmModalPssFooterCss = "wm-modal-pss-footer{-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;margin-top:-1px}wm-modal-pss-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-pss-footer .wm-wrapper.footer-text{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}}wm-modal-pss-footer .wm-wrapper wm-button+wm-button{margin-left:1rem}wm-modal-pss-footer .wm-wrapper .wm-info{font-size:0.875rem;font-style:italic}@media only screen and (max-width: 650px){wm-modal-pss-footer .wm-wrapper .wm-info{padding-bottom:0.625rem}}wm-modal-pss-footer .wm-wrapper .wm-info:focus{outline:none}";
 
-const ModalFooter = class {
+const ModalPssFooter = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.secondaryText = "";
@@ -166,16 +165,15 @@ const ModalFooter = class {
         parentModal.emitSecondaryEvent();
     }
     render() {
-        return (h("div", { key: '51a2d057d08fee9eb7cb20610b44b5bd9d3300a1', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '18b9805744abd577708add4f5c1d6bc0149927fb', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: 'a449547065cb247a50f859ca5a4a82f070c06399', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: 'd1733ed5fe143f2e65433a667a40694fd5dbad43', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { key: '2177e7af952bd16fa6cb4cf23dbf2acf18445ebc', "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", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.secondaryText)), h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : null) }, this.primaryText))));
     }
     get el() { return getElement(this); }
 };
-ModalFooter.style = WmModalPssFooterStyle0;
+ModalPssFooter.style = wmModalPssFooterCss;
 
-const wmModalPssHeaderCss = "wm-modal-pss-header{border-radius:5px 5px 0 0px;margin-bottom:-1px}wm-modal-pss-header .wm-wrapper{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center}wm-modal-pss-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:var(--wmcolor-modal-heading);line-height:normal}wm-modal-pss-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-pss-header .wm-wrapper .title:focus{outline:none}";
-const WmModalPssHeaderStyle0 = wmModalPssHeaderCss;
+const wmModalPssHeaderCss = "wm-modal-pss-header{-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;margin-bottom:-1px}wm-modal-pss-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-pss-header .wm-wrapper .title{margin:0;font-weight:600;font-size:1.125rem;color:var(--wmcolor-modal-heading);line-height:normal}wm-modal-pss-header .wm-wrapper .title .subtitle{display:block;font-size:0.875rem;font-weight:normal}wm-modal-pss-header .wm-wrapper .title:focus{outline:none}";
 
-const ModalHeader = class {
+const ModalPssHeader = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.heading = "";
@@ -201,10 +199,10 @@ const ModalHeader = class {
     //   this.headingElement.focus();
     // }
     render() {
-        return (h(Host, { key: '2b2dda4dcd73e99ead055334998d5ef97ea60df4' }, h("div", { key: '8a1f05da81b4663558e962f7b540fac35e2bbfa3', class: "wm-wrapper" }, h("div", { key: '2948adf911680be5ba5a4beb317ddd57303a9a15' }, h("h2", { key: 'f1068bac6d9692a6368f5662bbcde1aad83c3317', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: '9452c69404d41425a2bce3fbe15e457fc773a640', class: "subtitle" }, this.subheading))), h("wm-button", { key: '1961750a256f7ad40f8d06345994479b0e3ed541', "button-type": "navigational", icon: "f156", tooltip: "Close", "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
+        return (h(Host, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     get el() { return getElement(this); }
 };
-ModalHeader.style = WmModalPssHeaderStyle0;
+ModalPssHeader.style = wmModalPssHeaderCss;
 
-export { Modal as wm_modal_pss, ModalFooter as wm_modal_pss_footer, ModalHeader as wm_modal_pss_header };
+export { ModalPss as wm_modal_pss, ModalPssFooter as wm_modal_pss_footer, ModalPssHeader as wm_modal_pss_header };

package/dist/esm/wm-modal_3.entry.js

@@ -1,9 +1,8 @@
-import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-130e07bb.js';
-import { g as generateId } from './functions-03966124.js';
-import { g as globalMessages } from './intl-2fa0087c.js';
+import { r as registerInstance, c as createEvent, h, g as getElement, H as Host } from './index-558b5a82.js';
+import { g as generateId } from './functions-8800c690.js';
+import { g as globalMessages } from './intl-b110ca8d.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;
 
 const Modal = class {
     constructor(hostRef) {
@@ -119,11 +118,11 @@ const Modal = class {
         }
     }
     render() {
-        return (h("dialog", { key: '013cab28a1dba3a63ab8c350bfac543520254e63', class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { key: '0bedae272d1154b61fbd7ebac59020d6c5b6b3b9', class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
+        return (h("dialog", { class: `${"wm-" + this.modalType}`, ref: (el) => (this.dialogEl = el), onKeyDown: (ev) => this.handleKeyDown(ev) }, h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: (ev) => {
                 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: '732a9e8edb3302a2d17dd9af6c8bf65ce73fc5d1', class: "wm-tooltip" }), h("slot", { key: '0ee3e5372886db1eb3f814d3f72d422771bbce27' }), h("div", { key: '197477a1dd69b1f5d2cb910fd01e1b3b247bafda', class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
+            } }), !this.hasBrowserPopoverSupport && h("div", { class: "wm-tooltip" }), h("slot", null), h("div", { class: "tabtrap sr-only", tabindex: "0", onFocus: () => {
                 this.focusFirstElement.emit();
             } })));
     }
@@ -132,10 +131,9 @@ const Modal = class {
         "open": ["toggleModal"]
     }; }
 };
-Modal.style = WmModalStyle0;
+Modal.style = wmModalCss;
 
 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) {
@@ -169,14 +167,13 @@ const ModalFooter = class {
         }
     }
     render() {
-        return (h("div", { key: '38b6b1759d4bdb628259acbf229a1d634df2dbf5', class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { key: '4259692e664739723e3895e8ec8d00ef00ef79f0', class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { key: '6ffea66fdfd257e754a9012e9471848037e92a52', class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { key: '679eef458298304564cd365f15c8253796158ed8', onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), 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))));
+        return (h("div", { class: `wm-wrapper ${this.infoText ? " footer-text" : ""}` }, h("div", { class: "wm-info", "aria-live": "polite" }, this.infoText), h("div", { class: "wm-button-collection" }, this.secondaryText && (h("wm-button", { onClick: () => this.emitParentSecondaryEvent(), id: `wm-secondary-${this.uid}`, ref: (el) => (this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.secondaryText)), h("wm-button", { "button-type": this.deleteStyle ? "secondary" : "primary", "permanently-delete": this.deleteStyle, onClick: () => this.emitParentPrimaryEvent(), disabled: this.primaryActionDisabled, id: `wm-primary-${this.uid}`, ref: (el) => (!this.primaryActionDisabled ? (this.lastElement = el) : undefined) }, this.primaryText))));
     }
     get el() { return getElement(this); }
 };
-ModalFooter.style = WmModalFooterStyle0;
+ModalFooter.style = wmModalFooterCss;
 
 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) {
@@ -200,10 +197,10 @@ const ModalHeader = class {
         parentModal.emitCloseEvent();
     }
     render() {
-        return (h(Host, { key: 'f178a3e4b95a12286b3364efbebe22b3a389f24c' }, h("div", { key: '8a6589a653e28aa5eb926f50695fe129c57548d6', class: "wm-wrapper" }, h("div", { key: '33ca649393f628c8ab5160c5e11e208812dad450' }, h("h2", { key: 'e171bcaa0424e97401db3002bbc3ebaf9c66458d', class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { key: 'aacf128010d3416ca788d2110240991dcf36fd17', class: "subtitle" }, this.subheading))), h("wm-button", { key: '1a7342cd0ed7aa024b52af067ec9ed33c7a63b04', "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, null, h("div", { class: "wm-wrapper" }, h("div", null, h("h2", { class: "title", id: `wm-modal-heading-text-${this.uid}` }, this.heading, h("span", { class: "subtitle" }, this.subheading))), h("wm-button", { "button-type": "navigational", icon: "f156", tooltip: globalMessages.close, "tooltip-position": "left", id: `wm-modal-close-${this.uid}`, ref: (el) => (this.closeButtonEl = el), onClick: () => this.emitParentCloseEvent() }))));
     }
     get el() { return getElement(this); }
 };
-ModalHeader.style = WmModalHeaderStyle0;
+ModalHeader.style = wmModalHeaderCss;
 
 export { Modal as wm_modal, ModalFooter as wm_modal_footer, ModalHeader as wm_modal_header };

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

@@ -1,9 +1,8 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-130e07bb.js';
-import { i as intl, A as throttle, h as hideTooltip, s as showTooltip } from './functions-03966124.js';
-import { g as globalMessages } from './intl-2fa0087c.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-558b5a82.js';
+import { i as intl, A as throttle, h as hideTooltip, s as showTooltip } from './functions-8800c690.js';
+import { g as globalMessages } from './intl-b110ca8d.js';
 
 const wmNavigationCss = ":host{--wmcolor-navigation-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-navigation-background-selected:var(--wmcolor-interactive-background-selected);--wmcolor-navigation-background:var(--wmcolor-background);--wmcolor-navigation-border-selected:var(--wmcolor-interactive);--wmcolor-navigation-focus:var(--wmcolor-interactive-focus);--wmcolor-navigation-icon-selected:var(--wmcolor-interactive);--wmcolor-navigation-icon:var(--wmcolor-icon);--wmcolor-navigation-text-selected:var(--wmcolor-interactive);z-index:10}:host([aria-expanded=true]){z-index:5000}.tray{-webkit-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);-moz-box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);box-shadow:0 0 14px 0 rgba(0, 0, 0, 0.14);display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:7.5625rem;background-color:var(--wmcolor-navigation-background);overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;font-size:0.875rem;height:100%}.navlist{margin:0;padding:0}.toggle-wrapper{display:none}@media screen and (max-width: 1023px){.tray{-ms-transition:transform 0.33s ease;-webkit-transition:transform 0.33s ease;-moz-transition:transform 0.33s ease;-webkit-transition:-webkit-transform 0.33s ease;transition:-webkit-transform 0.33s ease;transition:transform 0.33s ease;transition:transform 0.33s ease, -webkit-transform 0.33s ease;position:fixed;top:0;bottom:0;left:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.tray ul{visibility:hidden}.tray .toggle-wrapper{display:inline-block;min-height:5rem;width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}:host([aria-expanded=true]) .tray{-webkit-transform:translateX(0);transform:translateX(0)}:host([aria-expanded=true]) .tray ul{visibility:visible}.overlay{width:100vw;height:100vh;max-width:none;max-height:none;position:fixed !important;top:0;bottom:0;left:0;right:0;-webkit-transform:translate(0%, 0%);transform:translate(0%, 0%);background-color:rgba(25, 25, 25, 0.4);-ms-transition:opacity 0.5s ease-out;-webkit-transition:opacity 0.5s ease-out;-moz-transition:opacity 0.5s ease-out;transition:opacity 0.5s ease-out}}";
-const WmNavigationStyle0 = wmNavigationCss;
 
 const Navigation = class {
     constructor(hostRef) {
@@ -102,9 +101,9 @@ const Navigation = class {
             } }));
     }
     render() {
-        return (h(Host, { key: '4b46f2057cf47f6f2857a8c2fbd0113fbaa3d71b', role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { key: 'fe2e1586827cdbc1d0de1813ca15e5dbd42d99c0', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { key: 'a65d6897042cadf2a43d99535c18ec314b6e1c54', class: "tray" }, h("div", { key: 'ff0242631c40b374c750e6377449d751ccc88d4c', class: "toggle-wrapper" }, 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 ? globalMessages.close : globalMessages.open, "tooltip-position": "right", tabIndex: this.open ? undefined : -1, onClick: () => {
+        return (h(Host, { role: "navigation", "aria-expanded": this.ariaExpanded, "aria-label": this.mainNavigationMessage }, this.open ? this.renderOverlay() : "", this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.focusLastItem() })), h("div", { class: "tray" }, h("div", { class: "toggle-wrapper" }, h("wm-button", { ref: (el) => (this.toggleEl = el), class: "toggle", "button-type": "navigational", icon: this.open ? "f156" : "f35c", "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: 'd056d10575ad4aa3deb5cf00011d3469860625e0', class: "navlist" }, h("slot", { key: '5b4be146205fec5ffbd44970e60d7aa4e00c7fc1' }))), this.isCollapsible && (h("div", { key: 'dbba46d2e9e1c70a65cc968560197a56097775fe', class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
+            } })), h("ul", { class: "navlist" }, h("slot", null))), this.isCollapsible && (h("div", { class: "trapfocus", tabindex: this.open ? 0 : undefined, onFocus: () => this.toggleEl.focus() }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -112,10 +111,9 @@ const Navigation = class {
         "open": ["handleStateChange"]
     }; }
 };
-Navigation.style = WmNavigationStyle0;
+Navigation.style = wmNavigationCss;
 
 const wmNavigationHamburgerCss = "button{--wmcolor-navigation-hamburger-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-navigation-hamburger-icon:var(--wmcolor-interactive);display:none;width:100%;height:100%;border:none;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);transition:background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);background-color:transparent;outline:none;padding:0}button:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:0}button:hover{background-color:var(--wmcolor-navigation-hamburger-background-hover)}.icon: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:\"\\f35c\";font-size:1.5rem;color:var(--wmcolor-navigation-hamburger-icon)}@media screen and (max-width: 1023px){:host{width:3.75rem;height:3.75rem}button{display:initial}}";
-const WmNavigationHamburgerStyle0 = wmNavigationHamburgerCss;
 
 const NavigationHamburger = class {
     constructor(hostRef) {
@@ -153,15 +151,14 @@ const NavigationHamburger = class {
         this.wmNavigationHamburgerClicked.emit();
     }
     render() {
-        return (h(Host, { key: '64106288d26853ec6dced8c379e308910d0fc241', class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { key: 'f874ff163e409ae233521d4c089d8f28911fe051', "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: 'd85220650c6728633ca27259b5a370bbc7d47e02', class: "icon" }))));
+        return (h(Host, { class: `hamburger ${this.open ? "nav-open" : "nav-closed"}` }, h("button", { "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", { class: "icon" }))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
 };
-NavigationHamburger.style = WmNavigationHamburgerStyle0;
+NavigationHamburger.style = wmNavigationHamburgerCss;
 
 const wmNavigationItemCss = ".link{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;color:inherit;text-decoration:none;min-height:4.5rem;text-align:center;padding:1.25rem 0.5rem;font-weight:500;outline:none;position:relative;background:var(--wmcolor-navigation-background)}.link:hover{background-color:var(--wmcolor-navigation-background-hover)}.link .icon{font-size:1.375rem;color:var(--wmcolor-navigation-icon)}.link .text{font-size:0.875rem}.link:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:-3px}.link.active{background-color:var(--wmcolor-navigation-background-selected)}.link.active:before{content:\"\";background-color:var(--wmcolor-navigation-border-selected);position:absolute;height:100%;width:5px;left:0}.link.active .text{color:var(--wmcolor-navigation-text-selected)}.link.active .icon{color:var(--wmcolor-navigation-icon-selected)}";
-const WmNavigationItemStyle0 = wmNavigationItemCss;
 
 const NavigationItem = class {
     constructor(hostRef) {
@@ -172,11 +169,11 @@ const NavigationItem = class {
         this.active = undefined;
     }
     render() {
-        return (h(Host, { key: 'c4420b1e4396ac065b3674f52b124c0d25359435', role: "listitem" }, h("a", { key: 'ffd82c5f726e982e4418c8bd335c3c151ac1fbfd', class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { key: 'fe1a4418452356a9811359ded2aac74694f9a3d2', class: "icon", "aria-hidden": "true" }, h("slot", { key: '9690f8cbfb21a229493b9b7585ccdb3e90691aa1' })), h("div", { key: 'e134a8b4ca4df635c460b87e7a87cb3909737903', class: "text" }, this.text))));
+        return (h(Host, { role: "listitem" }, h("a", { class: `link ${this.active ? "active" : ""}`, href: this.href, onClick: () => this.wmNavigationItemClicked.emit() }, h("div", { class: "icon", "aria-hidden": "true" }, h("slot", null)), h("div", { class: "text" }, this.text))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
 };
-NavigationItem.style = WmNavigationItemStyle0;
+NavigationItem.style = wmNavigationItemCss;
 
 export { Navigation as wm_navigation, NavigationHamburger as wm_navigation_hamburger, NavigationItem as wm_navigation_item };

package/dist/esm/wm-navigator.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-130e07bb.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-558b5a82.js';
 import { a as getWmMode } from './interfaces-cc5b177f.js';
-import { n as snakeCaseToCamelCase, o as getNewIndexToFocus, i as intl } from './functions-03966124.js';
+import { n as snakeCaseToCamelCase, o as getNewIndexToFocus, i as intl } from './functions-8800c690.js';
 
 const getRequest = async (url) => {
     const response = await fetch(url);
@@ -13,7 +13,6 @@ const getRequest = async (url) => {
 };
 
 const wmNavigatorCss = ":host{--wmcolor-navigator-background:var(--wmcolor-background);--wmcolor-navigator-header-background:var(--wmcolor-brand-dark);--wmcolor-navigator-header-text:var(--wmcolor-text-ondark);--wmcolor-navigator-item-background-selected:var(--wmcolor-interactive-background-selected);--wmcolor-navigator-item-background-focus:var(--wmcolor-interactive-background-focus);--wmcolor-navigator-item-background-hover:var(--wmcolor-interactive-background-hover);--wmcolor-navigator-item-background:var(--wmcolor-background);--wmcolor-navigator-item-border:var(--wmcolor-border);--wmcolor-navigator-item-text:var(--wmcolor-text);--wmcolor-navigator-user-background:var(--wmcolor-background-readonly);min-width:0;position:relative;display:inline-block}:host .wrapper{overflow:auto;font-size:1.125rem;min-width:13.125rem;width:auto;max-height:80vh;text-align:left;position:absolute;z-index:50;top:100%;right:20px;left:auto;background:var(--wmcolor-navigator-background);letter-spacing:normal;-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;-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;-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}:host .wrapper .user{background:var(--wmcolor-navigator-user-background);padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper .user p{margin:0}:host .wrapper .user p:first-child{font-weight:700;text-transform:capitalize}:host .wrapper h2{background:var(--wmcolor-navigator-header-background);color:var(--wmcolor-navigator-header-text);font-weight:700;margin:0;padding:0.625rem 1.25rem;font-size:0.875rem}:host .wrapper [role=listbox]{list-style:none;margin:0;padding-left:0}:host .wrapper.hide{-ms-transform:scale(1, 0);-webkit-transform:scale(1, 0);-moz-transform:scale(1, 0);transform:scale(1, 0)}:host .wrapper.right{right:auto;left:20px}:host img{-webkit-transform:scale(0.8);transform:scale(0.8);-webkit-transform-origin:left center;transform-origin:left center;display:block}:host .logout{text-align:center;text-transform:capitalize}priv-navigator-item:focus{outline:none}";
-const WmNavigatorStyle0 = wmNavigatorCss;
 
 const Navigator = class {
     constructor(hostRef) {
@@ -318,6 +317,6 @@ const Navigator = class {
         "products": ["parseData"]
     }; }
 };
-Navigator.style = WmNavigatorStyle0;
+Navigator.style = wmNavigatorCss;
 
 export { Navigator as wm_navigator };

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

@@ -1,9 +1,8 @@
-import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-130e07bb.js';
-import { i as intl, t as toBool, k as shouldOpenUp, B as getContextMeasurements, z as isElOrChild, y as getTextDir } from './functions-03966124.js';
-import { g as globalMessages } from './intl-2fa0087c.js';
+import { r as registerInstance, c as createEvent, f as forceUpdate, h, H as Host, g as getElement } from './index-558b5a82.js';
+import { i as intl, t as toBool, k as shouldOpenUp, B as getContextMeasurements, z as isElOrChild, y as getTextDir } from './functions-8800c690.js';
+import { g as globalMessages } from './intl-b110ca8d.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-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 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:var(--wmcolor-select-option-text-disabled);border-color:var(--wmcolor-border-dark);background:var(--wmcolor-select-option-background-disabled);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 .menuitem:focus-visible{outline:none;background:var(--wmcolor-interactive-background-focus)}.menu .menuitem: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 NestedSelect = class {
     constructor(hostRef) {
@@ -55,6 +54,7 @@ const NestedSelect = class {
         });
         this.isExpanded = false;
         this.showClearSelectionButton = false;
+        this.announcement = "";
         this.constrainedMaxHeight = this.maxHeight;
     }
     get isDisabled() {
@@ -166,6 +166,7 @@ const NestedSelect = class {
     open(focusLast = false) {
         if (!this.isDisabled) {
             this.showClearSelectionButton = this.childOptions.some((o) => o.selected);
+            this.dropdownEl.scrollTop = 0;
             this.isExpanded = true;
             this.dropdownEl.classList.add("open");
             const elHeight = this.el.clientHeight;
@@ -197,21 +198,15 @@ const NestedSelect = class {
     }
     moveDown(menuitemEl) {
         const currentIndex = this.menuitemEls.indexOf(menuitemEl);
-        if (currentIndex == this.menuitemEls.length - 1) {
-            this.menuitemEls[0].focus();
-        }
-        else {
-            this.menuitemEls[currentIndex + 1].focus();
-        }
+        const menuitemToFocus = this.menuitemEls[currentIndex == this.menuitemEls.length - 1 ? 0 : currentIndex + 1];
+        menuitemToFocus.scrollIntoView({ block: "nearest" });
+        menuitemToFocus.focus();
     }
     moveUp(menuitemEl) {
         const currentIndex = this.menuitemEls.indexOf(menuitemEl);
-        if (currentIndex == 0) {
-            this.menuitemEls[this.menuitemEls.length - 1].focus();
-        }
-        else {
-            this.menuitemEls[currentIndex - 1].focus();
-        }
+        const menuitemToFocus = this.menuitemEls[currentIndex == 0 ? this.menuitemEls.length - 1 : currentIndex - 1];
+        menuitemToFocus.scrollIntoView({ block: "nearest" });
+        menuitemToFocus.focus();
     }
     handleButtonBlur(ev) {
         if (isElOrChild(this.el, ev.relatedTarget)) {
@@ -267,6 +262,13 @@ const NestedSelect = class {
         const elToFocus = this.el.shadowRoot.querySelector(`button[data-label=${ev.detail}]`);
         elToFocus.focus();
     }
+    announce(message) {
+        // \u00A0 is a non-breaking space character, which causes the message to be read as a new one
+        if (this.liveRegionEl.textContent === message) {
+            message += "\u00A0";
+        }
+        this.announcement = message;
+    }
     renderButtonText() {
         if (this.displayedOptions.length < 1) {
             return h("span", null, this.placeholder);
@@ -285,6 +287,12 @@ const NestedSelect = class {
     }
     handleClearSelection() {
         this.optgroupEls.forEach((optgroupEl) => optgroupEl.emitDeselection());
+        const selectionClearedAnnouncement = intl.formatMessage({
+            id: "select.selectionCleared",
+            defaultMessage: "Selection cleared",
+            description: "Screen reader announcement alerting the user they have cleared their selection",
+        });
+        this.announce(selectionClearedAnnouncement);
         if (!this.multiple) {
             this.close();
         }
@@ -322,20 +330,20 @@ const NestedSelect = class {
                 this.isExpanded ? this.close() : this.open();
             },
         };
-        return (h(Host, { key: '854bfbccf53069ca95a2c7e3beb60ec7cef4fe52', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: 'db844c36c341b311a1178899c3dd6f75b3cde901', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '57b77d879d3065c2fd6e51c86a4cf9589d2b69dd', class: "label-wrapper" }, h("label", { key: 'd175fa9541a93c22be70143a10b77a087913087e', class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
+        return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: "label", htmlFor: "selectbtn" }, this.label, 
         // 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 ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { key: '1e100f81edc7d1dd9c6e1224cd1d5cfeb68e37a7', class: "button-wrapper" }, h("button", Object.assign({ key: 'e8e68bc84666875a5a478aae79d04cc57d231f4b' }, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: 'e0dc1adac5cdcb76da590a065b8fc80cead8df69', class: "overflowcontrol" }, h("span", { key: '36427c454c08d30402f50424772c4c3fe6d764e3', class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), h("div", { key: '2725d1b3b564a3d6a879e598ef5b0bf192dcd1d6', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '54b75659619de70978e10ab8e3739938686084f8', class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { key: 'a6894d7f78c6eb4a155c2b55f88f43a47377ce7d', ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight } }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
+        this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, globalMessages.requiredField), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isExpanded ? "expanded" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { class: "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText())), this.renderOverflowCount(), h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { class: `dropdown  ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("div", { ref: (el) => (this.menuEl = el), class: "menu", style: { "--max-height": this.constrainedMaxHeight }, tabIndex: -1 }, this.renderClearSelectionButton(), this.optgroupEls.map((optgroupEl) => {
             return (h("button", { class: `menuitem group-btn ${optgroupEl.disabled ? "disabled" : ""}`, role: "menuitem", "data-label": optgroupEl.label, tabindex: -1, "aria-disabled": optgroupEl.disabled, onClick: () => {
                     if (!optgroupEl.disabled) {
                         optgroupEl.isExpanded = !optgroupEl.isExpanded;
                         forceUpdate(this.el);
                     }
                 }, onKeyDown: (ev) => this.handleMenuitemKeydown(ev) }, h("span", null, optgroupEl.label), this.renderSelectionCount(optgroupEl), optgroupEl.disabled && h("div", { class: "disabled-indication" }, "Disabled")));
-        })), h("div", { key: '52fd5904572fe4691cbae1422ccaf285f4a408dd', ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", { key: '7e3cf958381b7035914cc7f40bd386b923b1ef31' }))), h("div", { key: '0b4dfb9684d0f61cef7781d3b20d87d0ce7771ee', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage)))));
+        })), h("div", { ref: (el) => (this.optListWrapperEl = el), class: "option-list-wrapper hidden" }, h("slot", null))), h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage))), h("div", { id: "nestedselect-announcement", "aria-live": "assertive", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
 };
-NestedSelect.style = WmNestedSelectStyle0;
+NestedSelect.style = wmNestedSelectCss;
 
 export { NestedSelect as wm_nested_select };

package/dist/esm/wm-optgroup.entry.js

@@ -1,8 +1,7 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-130e07bb.js';
-import { t as toBool, a as handleDisabledAttribute } from './functions-03966124.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-558b5a82.js';
+import { t as toBool, a as handleDisabledAttribute } from './functions-8800c690.js';
 
 const wmOptgroupCss = ":host{width:100%;display:none}: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}:host(.visible){display:unset}";
-const WmOptgroupStyle0 = wmOptgroupCss;
 
 const Optgroup = class {
     constructor(hostRef) {
@@ -57,7 +56,7 @@ const Optgroup = class {
         handleDisabledAttribute(this.el, this.isDisabled);
     }
     render() {
-        return (h(Host, { key: '1db6713870fdb7ed53744c5ea7a04f767e404c34' }, h("div", { key: '504d6788ecbe82ac24ab4b7a0231b10be1435d3c', class: `list-wrapper` }, h("priv-option-list", { key: 'f435b5664196850ba254cab7868c9e55eee7be33', ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", { key: '583dd769b16ba249c6c68618d5431b7b359f69e8' })))));
+        return (h(Host, null, h("div", { class: `list-wrapper` }, h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.parentNestedSelect.multiple, search: this.parentNestedSelect.search, maxHeight: this.parentNestedSelect.constrainedMaxHeight, searchPlaceholder: this.parentNestedSelect.searchPlaceholder, optgroupLabel: this.label, selectAll: this.parentNestedSelect.selectAll, onOptionListAllSelected: () => this.wmOptgroupAllSelected.emit(), onOptionListAllDeselected: () => this.wmOptgroupAllDeselected.emit() }, h("slot", null)))));
     }
     static get delegatesFocus() { return true; }
     get el() { return getElement(this); }
@@ -65,6 +64,6 @@ const Optgroup = class {
         "isExpanded": ["isExpandedChanged"]
     }; }
 };
-Optgroup.style = WmOptgroupStyle0;
+Optgroup.style = wmOptgroupCss;
 
 export { Optgroup as wm_optgroup };