@watermarkinsights/ripple 5.7.0-0 → 5.7.0-10

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

@@ -6,7 +6,7 @@ const index = require('./index-e86c28b6.js');
 const functions = require('./functions-e24249e6.js');
 const intl = require('./intl-5aeba788.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 Option = class {
     constructor(hostRef) {
@@ -175,7 +175,7 @@ const Option = class {
 };
 Option.style = wmOptionCss;
 
-const wmSelectCss = ":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}: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}.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}.wrapper .button-wrapper{position:relative;-ms-flex:1;flex:1;font-size:1.125rem;color:var(--wmcolor-select-text);min-width:8.75rem}.wrapper .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){.wrapper .button-wrapper .displayedoption{height:2.75rem}}.wrapper .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}.wrapper .button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:var(--wmcolor-select-background);text-decoration:none}.wrapper .button-wrapper .displayedoption:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}.wrapper .button-wrapper .displayedoption:focus{outline:none}.wrapper .button-wrapper .displayedoption::-moz-focus-inner{border:0}.wrapper .button-wrapper .displayedoption:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:2px}.wrapper .button-wrapper .displayedoption .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-ms-flex:1;flex:1}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo{display:-ms-flexbox;display:flex}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text{-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;min-width:0}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo{-ms-flex:none;flex:none;font-style:italic}.wrapper .button-wrapper .displayedoption .overflow-counter{font-weight:bold;margin-left:0.5rem}.wrapper .button-wrapper>.displayedoption[disabled]{color:#6b6b6b;border-color:#8a8a8a;background:#f0f0f0;cursor:default}.wrapper .button-wrapper>.dropdown{-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;-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: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:0;right:0;background:var(--wmcolor-select-option-background);z-index:100;width:100%;font-size:0.875rem}.wrapper .button-wrapper>.dropdown.upwards{top:unset;bottom:calc(100% - 2.5rem);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.wrapper .button-wrapper>.dropdown.hidden{visibility:hidden}.wrapper .button-wrapper>.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}.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}.options-wrapper{max-height:12.5rem;overflow:auto}.measurement-area{position:absolute;visibility:hidden;height:0px;pointer-events:none}.rtl>.dropdown{-ms-transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;transform-origin:left top;left:0;right:auto}.rtl>.dropdown .option{padding-left:3rem;padding-right:1.25rem}.rtl>.displayedoption{padding:0 0.9375rem 0 1.875rem;text-align:right}.rtl>.displayedoption:before{right:auto;left:0.5625rem}";
+const wmSelectCss = ":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}: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}.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}.wrapper .button-wrapper{position:relative;-ms-flex:1;flex:1;font-size:1.125rem;color:var(--wmcolor-select-text);min-width:8.75rem}.wrapper .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){.wrapper .button-wrapper .displayedoption{height:2.75rem}}.wrapper .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}.wrapper .button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:var(--wmcolor-select-background);text-decoration:none}.wrapper .button-wrapper .displayedoption:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}.wrapper .button-wrapper .displayedoption:focus{outline:none}.wrapper .button-wrapper .displayedoption::-moz-focus-inner{border:0}.wrapper .button-wrapper .displayedoption:focus-visible{outline:3px solid var(--wmcolor-interactive-focus);outline-offset:2px}.wrapper .button-wrapper .displayedoption .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-ms-flex:1;flex:1}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo{display:-ms-flexbox;display:flex}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text{-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;min-width:0}.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo{-ms-flex:none;flex:none;font-style:italic}.wrapper .button-wrapper .displayedoption .overflow-counter{font-weight:bold;margin-left:0.5rem}.wrapper .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 .button-wrapper>.dropdown{-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;-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: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:0;right:0;background:var(--wmcolor-select-option-background);z-index:100;width:100%;font-size:0.875rem;max-height:var(--max-height);overflow-y:auto}.wrapper .button-wrapper>.dropdown.upwards{top:unset;bottom:calc(100% - 2.5rem);-ms-transform-origin:center bottom;-webkit-transform-origin:center bottom;-moz-transform-origin:center bottom;transform-origin:center bottom}.wrapper .button-wrapper>.dropdown.hidden{visibility:hidden}.wrapper .button-wrapper>.dropdown.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}.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}.measurement-area{position:absolute;visibility:hidden;height:0px;pointer-events:none}.rtl>.dropdown{-ms-transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;transform-origin:left top;left:0;right:auto}.rtl>.dropdown .option{padding-left:3rem;padding-right:1.25rem}.rtl>.displayedoption{padding:0 0.9375rem 0 1.875rem;text-align:right}.rtl>.displayedoption:before{right:auto;left:0.5625rem}";
 
 const Select = class {
     constructor(hostRef) {
@@ -190,7 +190,7 @@ const Select = class {
         this.overflowCount = 0;
         this.displayedOptions = [];
         this.disabled = false;
-        this.maxHeight = undefined;
+        this.maxHeight = "200px";
         this.label = undefined;
         this.labelPosition = "top";
         this.requiredField = false;
@@ -287,7 +287,7 @@ const Select = class {
             console.error("wm-select should have one initial option selected");
         }
         functions.handleDisabledAttribute(this.el, this.isDisabled);
-        const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((mutationRecord) => this.handleChildChange(mutationRecord)));
+        const mutationObserver = new MutationObserver((mutationRecordList) => mutationRecordList.forEach((_mutationRecord) => this.handleChildChange()));
         mutationObserver.observe(this.el, {
             childList: true,
             attributes: true,
@@ -295,21 +295,19 @@ const Select = class {
             attributeFilter: ["selected"],
         });
     }
-    handleChildChange(_) {
+    handleChildChange() {
         // on update of children or children selected state, reset button text and rerender
         this.setButtonText();
-        this.optionListEl.handleChildChange(_);
         index.forceUpdate(this.el);
+        if (this.multiple) {
+            // update state of clone options
+            this.optionListEl.handleChildChange();
+        }
     }
     componentDidLoad() {
         this.wmSelectDidLoad.emit();
         this.dropdownEl.classList.add("hidden");
         index.forceUpdate(this.el);
-        // Dev can overwrite the max-height rule set in the Sass file
-        if (this.maxHeight) {
-            // this.listboxEl.style.maxHeight = this.maxHeight;
-            this.dropdownEl.style.maxHeight = this.maxHeight;
-        }
         this.setButtonText();
     }
     open(optionToSelect) {
@@ -424,7 +422,7 @@ const Select = class {
         };
         return (index.h(index.Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, index.h("div", { class: `wrapper ${functions.getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, index.h("div", { class: "label-wrapper" }, index.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 ? (index.h("span", { class: "required" }, index.h("span", { class: "sr-only" }, intl.globalMessages.requiredField), index.h("span", { "aria-hidden": "true" }, "*"))) : (""))), index.h("div", { class: "button-wrapper" }, index.h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), index.h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, index.h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && index.h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount(), index.h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, index.h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, index.h("slot", null))), index.h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), index.h("div", { id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        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", { class: "button-wrapper" }, index.h("button", Object.assign({}, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), index.h("span", { class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, index.h("span", { class: "button-text" }, this.renderButtonText()), showSubinfo && index.h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo)), this.renderOverflowCount(), index.h("div", { ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), index.h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, index.h("priv-option-list", { ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => this.close(), onOptionListAllSelected: () => this.wmSelectAllSelected.emit(), onOptionListAllDeselected: () => this.wmSelectAllDeselected.emit() }, index.h("slot", null))), index.h("div", { id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), index.h("div", { id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     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/priv-option-list/priv-option-list.css

@@ -31,8 +31,6 @@
    -------------------------------------- */
 .search {
   box-sizing: border-box;
-  border-bottom: 2px solid;
-  border-color: var(--wmcolor-select-option-border);
   padding: 1.25rem;
 }
 .search .searchfield-wrapper {
@@ -86,10 +84,7 @@
   width: 100%;
   cursor: pointer;
   padding: 1.25rem;
-  border: none;
   margin: 0;
-  border-bottom: 2px solid;
-  border-color: var(--wmcolor-select-option-border);
   background: var(--wmcolor-select-option-background);
   font-family: inherit;
   font-size: inherit;
@@ -110,12 +105,32 @@
   background: var(--wmcolor-select-option-background-focus);
 }
 
+.return-btn,
+.select-all,
+.search {
+  border: none;
+}
+.return-btn:not(:last-child),
+.select-all:not(:last-child),
+.search:not(:last-child) {
+  border-bottom: 2px solid;
+  border-color: var(--wmcolor-select-option-border);
+}
+
+.options-wrapper {
+  overflow-y: auto;
+  max-height: var(--max-height);
+}
+
+.non-options-wrapper {
+  border-bottom: 1px solid var(--wmcolor-border-dark);
+}
+
 .return-btn {
   display: flex;
   align-items: center;
   font-weight: 600;
   font-size: 0.875rem;
-  border-bottom: 1px solid #4a4a4a;
 }
 .return-btn:before {
   display: inline-block;
@@ -127,5 +142,6 @@
   -moz-osx-font-smoothing: grayscale;
   content: "\f141";
   pointer-events: none;
+  padding-right: 0.5rem;
   font-size: 1.28rem;
 }

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

@@ -37,8 +37,9 @@ export class PrivOptionList {
         this.search = false;
         this.selectAll = false;
         this.searchPlaceholder = undefined;
-        this.maxHeight = undefined;
         this.optgroupLabel = undefined;
+        this.maxHeight = undefined;
+        this.upwardsHeightLimit = null;
         this.announcement = "";
         this.searchTerm = "";
     }
@@ -52,6 +53,9 @@ export class PrivOptionList {
         // this includes both slotted wm-options and internally created wm-options
         return this.cloneOptions.concat(this.childOptions);
     }
+    get isInNestedSelect() {
+        return !!this.optgroupLabel;
+    }
     get visibleOptionEls() {
         return this.allOptionEls.filter((option) => !option.classList.contains("hidden") && !option.classList.contains("filtered-out"));
     }
@@ -87,6 +91,16 @@ export class PrivOptionList {
             description: "The message displayed when no options pass the search filter",
         });
     }
+    get effectiveMaxHeight() {
+        let result = this.maxHeight;
+        if (this.upwardsHeightLimit && this.el.parentElement.clientHeight > this.upwardsHeightLimit) {
+            result = `${this.upwardsHeightLimit -
+                (this.isInNestedSelect ? this.returnBtnEl.clientHeight : 0) -
+                (this.selectAll ? this.selectAllEl.clientHeight : 0) -
+                (this.search ? this.searchFieldWrapperEl.clientHeight : 0)}px`;
+        }
+        return result;
+    }
     findAndFocusOption(ev) {
         const letterPressed = ev.detail.letter.toLowerCase();
         const optionPressed = ev.detail.optionEl;
@@ -139,17 +153,10 @@ export class PrivOptionList {
         if (this.multiple) {
             this.updateOptionVisibility();
         }
-        // Dev can overwrite the max-height rule set in the Sass file
-        if (this.maxHeight) {
-            // this.listboxEl.style.maxHeight = this.maxHeight;
-            this.listboxEl.style.maxHeight = this.maxHeight;
-        }
     }
-    async handleChildChange(_) {
-        if (this.multiple) {
-            // on update of wm-options selected state, rerender to update clones state
-            forceUpdate(this.el);
-        }
+    async handleChildChange() {
+        // on update of wm-options selected state, rerender to update clones state
+        forceUpdate(this.el);
     }
     async clearSearch() {
         if (this.search) {
@@ -253,8 +260,7 @@ export class PrivOptionList {
                 this.moveUp(ev.target);
                 break;
             case "ArrowLeft":
-                // if an optgroupLabel was passed, we are within a Nested Select
-                if (!!this.optgroupLabel) {
+                if (this.isInNestedSelect && el != this.searchFieldEl) {
                     ev.preventDefault();
                     this.wmKeyLeftPressed.emit();
                 }
@@ -279,6 +285,7 @@ export class PrivOptionList {
         }
     }
     close() {
+        this.listboxEl.scrollTop = 0;
         if (this.multiple) {
             this.updateOptionVisibility();
         }
@@ -303,8 +310,7 @@ export class PrivOptionList {
         if (this.searchFieldEl) {
             focusableEls.unshift(this.searchFieldEl);
         }
-        // if an optgroupLabel was passed, we are is within a Nested Select
-        if (!!this.optgroupLabel) {
+        if (this.isInNestedSelect) {
             focusableEls.unshift(this.returnBtnEl);
         }
         const prevEl = focusableEls[focusableEls.indexOf(el) - 1] || focusableEls[focusableEls.length - 1];
@@ -320,8 +326,7 @@ export class PrivOptionList {
         if (this.searchFieldEl) {
             focusableEls.unshift(this.searchFieldEl);
         }
-        // if an optgroupLabel was passed, we are is within a Nested Select
-        if (!!this.optgroupLabel) {
+        if (this.isInNestedSelect) {
             focusableEls.unshift(this.returnBtnEl);
         }
         const nextEl = focusableEls[focusableEls.indexOf(el) + 1] || focusableEls[0];
@@ -386,8 +391,11 @@ export class PrivOptionList {
             return (h("wm-option", { class: "clone", subinfo: option.subinfo, selected: option.selected }, option.textContent));
         });
     }
+    renderNonOptions() {
+        return (h("div", { class: "non-options-wrapper" }, this.isInNestedSelect && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton()));
+    }
     render() {
-        return (h("div", { class: "list-wrapper" }, !!this.optgroupLabel && this.renderReturnBtn(), this.search && this.renderSearchField(), this.visibleSelectAllButton && this.renderSelectAllButton(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el) }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null)), h("div", { id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
+        return (h("div", { class: "list-wrapper" }, (this.isInNestedSelect || this.search || this.visibleSelectAllButton) && this.renderNonOptions(), h("div", { id: "list", class: "options-wrapper", tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": "label", ref: (el) => (this.listboxEl = el), style: { "--max-height": this.effectiveMaxHeight } }, this.searchTerm && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderCloneOptions(), h("slot", null)), h("div", { id: "optionlist-announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)));
     }
     static get is() { return "priv-option-list"; }
     static get originalStyleUrls() {
@@ -473,7 +481,7 @@ export class PrivOptionList {
                 "attribute": "search-placeholder",
                 "reflect": false
             },
-            "maxHeight": {
+            "optgroupLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -487,25 +495,43 @@ export class PrivOptionList {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "max-height",
+                "attribute": "optgroup-label",
                 "reflect": false
             },
-            "optgroupLabel": {
+            "maxHeight": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
-                    "resolved": "string | undefined",
+                    "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "optgroup-label",
+                "attribute": "max-height",
                 "reflect": false
+            },
+            "upwardsHeightLimit": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number | null",
+                    "resolved": "null | number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "upwards-height-limit",
+                "reflect": false,
+                "defaultValue": "null"
             }
         };
     }
@@ -617,19 +643,12 @@ export class PrivOptionList {
         return {
             "handleChildChange": {
                 "complexType": {
-                    "signature": "(_: MutationRecord) => Promise<void>",
-                    "parameters": [{
-                            "tags": [],
-                            "text": ""
-                        }],
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
                     "references": {
                         "Promise": {
                             "location": "global",
                             "id": "global::Promise"
-                        },
-                        "MutationRecord": {
-                            "location": "global",
-                            "id": "global::MutationRecord"
                         }
                     },
                     "return": "Promise<void>"

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

@@ -218,9 +218,9 @@
   margin-left: 0.5rem;
 }
 .button-wrapper > .displayedoption[disabled] {
-  color: #6b6b6b;
-  border-color: #8a8a8a;
-  background: #f0f0f0;
+  color: var(--wmcolor-select-option-text-disabled);
+  border-color: var(--wmcolor-border-dark);
+  background: var(--wmcolor-select-option-background-disabled);
   cursor: default;
 }
 
@@ -305,9 +305,13 @@
   width: 100%;
   display: flex;
   flex-direction: column;
+  max-height: var(--max-height);
+  overflow-y: auto;
 }
 .menu.hidden {
   position: absolute;
+  max-height: 100%;
+  overflow: hidden;
 }
 .menu .menuitem {
   display: flex;
@@ -327,11 +331,33 @@
   border-bottom: 2px solid;
   border-color: var(--wmcolor-select-option-border);
 }
-.menu :focus {
+.menu .menuitem.disabled {
+  color: var(--wmcolor-select-option-text-disabled);
+  cursor: auto;
+}
+.menu .menuitem.clear-selection {
+  color: var(--wmcolor-select-text);
+  justify-content: start;
+  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 :hover {
+.menu .menuitem:hover {
   background: var(--wmcolor-select-option-background-hover);
   outline: none;
 }
@@ -350,13 +376,21 @@
   pointer-events: none;
   font-size: 1.12rem;
 }
+.group-btn.disabled {
+  background: var(--wmcolor-select-option-background-disabled);
+}
 
-.selection-count {
-  margin-right: 20px;
+.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%;
@@ -367,6 +401,8 @@
   transform: translateX(100%);
   position: absolute;
   top: 0px;
+  max-height: 100%;
+  overflow-y: hidden;
 }
 
 .measurement-area {