@watermarkinsights/ripple 3.12.0 → 3.13.0-9

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

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement, f as forceUpdate } from './index-7603f98e.js';
-import { i as intl, g as generateId, l as shouldOpenUp, q as getTextDir } from './functions-61c7bb1f.js';
+import { i as intl, d as debounce, g as generateId, l as shouldOpenUp, q as getTextDir } from './functions-036af8dc.js';
 
-const wmOptionCss = ":host(:not(:last-child)),wm-option:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host,wm-option{display:block;cursor:pointer;position:relative;padding:1.25rem;background:#fff;font-family:inherit;list-style:none;color:#4a4a4a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host:focus,:host.focus,wm-option:focus,wm-option.focus{outline:none;background:#f4f4f4}:host.icon,wm-option.icon{color:#575195}.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;margin-right:0.25rem;color:#575195}:host([aria-selected=true]),wm-option[aria-selected=true]{background:rgba(46, 27, 70, 0.05);font-weight:500}:host([aria-selected=true]) .checkbox:before,wm-option[aria-selected=true] .checkbox:before{content:\"\\f132\"}:host([aria-disabled=true]),wm-option[aria-disabled=true]{font-style:italic;color:#6b6b6b;cursor:default}:host([aria-disabled=true]) .checkbox:before,wm-option[aria-disabled=true] .checkbox:before{color:#6b6b6b}:host(.multi-option),wm-option.multi-option{background:unset}:host(.hassubinfo),wm-option.hassubinfo{display:-ms-flexbox;display:flex}:host(.hassubinfo) .option-wrapper,wm-option.hassubinfo .option-wrapper{-ms-flex:1;flex:1}:host(.hassubinfo) .subinfo,wm-option.hassubinfo .subinfo{-ms-flex:none;flex:none}.subinfo{font-style:italic}.option-wrapper{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),wm-option:focus{outline:none;background:#f4f4f4}:host(:hover){background:#f4f4f4;outline:none}";
+const wmOptionCss = ":host(:not(:last-child)),wm-option:not(:last-child){border-bottom:2px solid rgba(46, 27, 70, 0.05)}:host,wm-option{display:block;cursor:pointer;position:relative;padding:1.25rem;background:#fff;font-family:inherit;list-style:none;color:#4a4a4a;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}:host:focus,:host.focus,wm-option:focus,wm-option.focus{outline:none;background:#f4f4f4}:host.icon,wm-option.icon{color:#575195}.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;margin-right:0.25rem;color:#575195}:host([aria-selected=true]),wm-option[aria-selected=true]{background:rgba(46, 27, 70, 0.05);font-weight:500}:host([aria-selected=true]) .checkbox:before,wm-option[aria-selected=true] .checkbox:before{content:\"\\f132\"}:host([aria-disabled=true]),wm-option[aria-disabled=true]{font-style:italic;color:#6b6b6b;cursor:default}:host([aria-disabled=true]) .checkbox:before,wm-option[aria-disabled=true] .checkbox:before{color:#6b6b6b}:host(.multi-option),wm-option.multi-option{background:unset}:host(.hidden),wm-option.hidden,:host(.filtered-out),wm-option.filtered-out{display:none}:host(.duplicate.last),wm-option.duplicate.last{border-bottom:12px solid rgba(46, 27, 70, 0.05)}:host(.hassubinfo),wm-option.hassubinfo{display:-ms-flexbox;display:flex}:host(.hassubinfo) .option-wrapper,wm-option.hassubinfo .option-wrapper{-ms-flex:1;flex:1}:host(.hassubinfo) .subinfo,wm-option.hassubinfo .subinfo{-ms-flex:none;flex:none}.subinfo{font-style:italic}.option-wrapper{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),wm-option:focus{outline:none;background:#f4f4f4}:host(:hover){background:#f4f4f4;outline:none}";
 
 let Option = class {
   constructor(hostRef) {
@@ -12,7 +12,6 @@ let Option = class {
     this.wmEscKeyPressed = createEvent(this, "wmEscKeyPressed", 7);
     this.wmHomeKeyPressed = createEvent(this, "wmHomeKeyPressed", 7);
     this.wmEndKeyPressed = createEvent(this, "wmEndKeyPressed", 7);
-    this.wmTabKeyPressed = createEvent(this, "wmTabKeyPressed", 7);
     this.wmEnterKeyPressed = createEvent(this, "wmEnterKeyPressed", 7);
     this.wmLetterPressed = createEvent(this, "wmLetterPressed", 7);
     this.wmOptionBlurred = createEvent(this, "wmOptionBlurred", 7);
@@ -20,16 +19,32 @@ let Option = class {
     this.disabled = false;
     this.selected = false;
     this.focused = false;
+    this.searchTerm = "";
   }
-  get isMultiChild() {
+  get hostClasses() {
+    let classes = [];
+    if (this.subinfo) {
+      classes.push("hassubinfo");
+    }
+    if (this.parentSelectEl.multiple) {
+      classes.push("multi-option");
+    }
+    if (!this.el.textContent.toLowerCase().includes(this.searchTerm)) {
+      classes.push("filtered-out");
+    }
+    return classes.join(" ");
+  }
+  get parentSelectEl() {
     var _a;
-    return (_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.multiple;
+    return ((_a = this.el.parentElement) === null || _a === void 0 ? void 0 : _a.nodeName) !== "WM-SELECT"
+      ? this.el.getRootNode().host
+      : this.el.parentElement;
   }
   handleKeydown(ev) {
     switch (ev.key) {
       case "ArrowUp":
         ev.preventDefault();
-        this.wmKeyUpPressed.emit();
+        this.wmKeyUpPressed.emit(this.el);
         break;
       case "ArrowDown":
         ev.preventDefault();
@@ -59,16 +74,13 @@ let Option = class {
         ev.preventDefault();
         this.wmEndKeyPressed.emit();
         break;
-      case "Tab":
-        this.wmTabKeyPressed.emit();
-        break;
       default:
         this.wmLetterPressed.emit(ev.key);
     }
   }
   handleSelection() {
     if (!this.disabled) {
-      this.wmOptionSelected.emit();
+      this.wmOptionSelected.emit(this.el);
       // the parent wm-select is in charge of the actual selection
     }
   }
@@ -96,13 +108,21 @@ let Option = class {
       this.el.onclick = this.onClickFunc;
     }
   }
+  handleSearch(ev) {
+    // filter is case-insensitive, so
+    this.searchTerm = ev.detail.searchTerm.toLowerCase();
+    const regexp = new RegExp(`${this.searchTerm}`, "gi");
+    const boldedText = this.el.textContent.replace(regexp, (match) => `<b>${match}</b>`);
+    this.textEl.innerHTML = `<span>${boldedText}</span>`;
+  }
   componentWillLoad() {
     this.syncAriaSelected();
     this.syncAriaDisabled();
     this.updateDisabledOnClick();
+    this.parentSelectEl.addEventListener("wmSelectSearchChanged", (ev) => this.handleSearch(ev));
   }
   render() {
-    return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: `${this.subinfo ? "hassubinfo" : ""} ${this.isMultiChild ? "multi-option" : ""}` }, h("div", { class: `option-wrapper ${this.isMultiChild ? "checkbox" : ""}` }, h("slot", null)), h("div", { class: "subinfo" }, this.subinfo)));
+    return (h(Host, { role: "option", tabindex: this.focused ? 0 : -1, class: this.hostClasses }, h("div", { class: `option-wrapper ${this.parentSelectEl.multiple ? "checkbox" : ""}`, ref: (el) => (this.textEl = el) }, h("slot", null)), h("div", { class: "subinfo" }, this.subinfo)));
   }
   get el() { return getElement(this); }
   static get watchers() { return {
@@ -113,7 +133,7 @@ let Option = class {
 };
 Option.style = wmOptionCss;
 
-const wmSelectCss = ":host{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:#c0392b}.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:#c0392b}.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 .dropdown{position:relative;-ms-flex:1;flex:1;font-size:1.125rem;color:#575195;min-width:8.75rem}.wrapper .dropdown .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:transparent;width:100%;border:solid 1px rgba(35, 35, 35, 0.6);padding:0 1.875rem 0 0.9375rem;cursor:pointer;height:2.5rem;line-height:normal;font-family:inherit;color:#575195;font-weight:400;font-size:0.875rem;text-transform:none;text-align:left}@media only screen and (max-width: 768px){.wrapper .dropdown .displayedoption{height:2.75rem}}.wrapper .dropdown .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}.wrapper .dropdown .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:transparent;text-decoration:none}.wrapper .dropdown .displayedoption:active{-ms-transform:scale(1, 1) !important;-webkit-transform:scale(1, 1) !important;transform:scale(1, 1) !important}.wrapper .dropdown .displayedoption:focus{outline:none}.wrapper .dropdown .displayedoption::-moz-focus-inner{border:0}.wrapper .dropdown .displayedoption.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}.wrapper .dropdown .displayedoption.user-is-tabbing:focus::-moz-focus-inner{border:0}.wrapper .dropdown .displayedoption .overflowcontrol{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-ms-flex:1;flex:1}.wrapper .dropdown .displayedoption .overflowcontrol.hassubinfo{display:-ms-flexbox;display:flex}.wrapper .dropdown .displayedoption .overflowcontrol.hassubinfo .button-text{-ms-flex:1;flex:1;text-overflow:ellipsis;overflow:hidden;min-width:0}.wrapper .dropdown .displayedoption .overflowcontrol.hassubinfo .subinfo{-ms-flex:none;flex:none;font-style:italic}.wrapper .dropdown .displayedoption .overflow-counter{font-weight:bold;margin-left:0.5rem}.wrapper .dropdown>.displayedoption[disabled]{color:#6b6b6b;border-color:#8a8a8a;background:#f0f0f0;cursor:default}.wrapper .dropdown>.options{-webkit-overflow-scrolling:touch;overflow:auto;max-height:12.5rem;-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:#fff;z-index:100;width:100%;font-size:0.875rem}.wrapper .dropdown>.options.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 .dropdown>.options.hidden{visibility:hidden}.wrapper .dropdown>.options.open{-ms-transform:scale(1, 1);-webkit-transform:scale(1, 1);-moz-transform:scale(1, 1);transform:scale(1, 1)}.wrapper.invalid .dropdown .displayedoption{-webkit-box-shadow:0 0 0 1px #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}.wrapper .error-message{color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:0.25rem;display:block;top:100%;left:0;font-style:italic}.rtl>.options{-ms-transform-origin:left top;-webkit-transform-origin:left top;-moz-transform-origin:left top;transform-origin:left top;left:0;right:auto}.rtl>.options .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{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:#c0392b}.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:#c0392b}.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:#575195;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:transparent;width:100%;border:solid 1px rgba(35, 35, 35, 0.6);padding:0 1.875rem 0 0.9375rem;cursor:pointer;height:2.5rem;line-height:normal;font-family:inherit;color:#575195;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}.wrapper .button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised){background:transparent;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.user-is-tabbing:focus{-webkit-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;-moz-box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e;box-shadow:0 2px 2px 0 rgba(244, 243, 246, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 0 4px 3px #61279e}.wrapper .button-wrapper .displayedoption.user-is-tabbing:focus::-moz-focus-inner{border:0}.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;overflow:auto;max-height:12.5rem;-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:#fff;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 #c0392b;-moz-box-shadow:0 0 0 1px #c0392b;box-shadow:0 0 0 1px #c0392b;border-color:#c0392b}.wrapper .error-message{color:#c0392b;font-size:0.875rem;margin-top:0.25rem;margin-bottom:0.25rem;display:block;top:100%;left:0;font-style:italic}.search{-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:2px solid rgba(46, 27, 70, 0.05);padding:1.25rem}.search .searchfield-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:2.75rem;width:100%;padding:0 0.75rem;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px;border:1px solid #4a4a4a}.search .searchfield-wrapper:focus,.search .searchfield-wrapper.focus{-webkit-box-shadow:0 0 0 1px #20cbd4;-moz-box-shadow:0 0 0 1px #20cbd4;box-shadow:0 0 0 1px #20cbd4;outline:none;border-color:#20cbd4}.search .searchfield{width:100%;border:none;outline:none;font-family:inherit;font-size:0.875rem;margin-left:0.25rem}.search .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:\"\\f349\";color:#6b6b6b;font-size:0.875rem}.search-results-message{padding:1.25rem;color:#4a4a4a;font-size:0.875rem;font-style:italic}.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}";
 
 let Select = class {
   constructor(hostRef) {
@@ -121,17 +141,24 @@ let Select = class {
     this.wmSelectDidLoad = createEvent(this, "wmSelectDidLoad", 7);
     this.wmSelectBlurred = createEvent(this, "wmSelectBlurred", 7);
     this.wmComponentBlurred = createEvent(this, "wmComponentBlurred", 7);
+    this.wmSelectSearchChanged = createEvent(this, "wmSelectSearchChanged", 7);
     this.disabled = false;
     this.invalid = false;
     this.labelPosition = "top";
     this.requiredField = false;
     this.errorMessage = "";
     this.multiple = false;
+    this.search = false;
     this.placeholder = intl.formatMessage({
       id: "select.multiPlaceholder",
       defaultMessage: "Make a selection",
       description: "Placeholder text. Use imperative",
     });
+    this.searchPlaceholder = intl.formatMessage({
+      id: "select.searchPlaceholder",
+      defaultMessage: "Search",
+      description: "Placeholder text. Use imperative",
+    });
     this.allSelectedMessage = intl.formatMessage({
       id: "select.allSelected",
       defaultMessage: "All selected",
@@ -143,21 +170,68 @@ let Select = class {
     });
     this.isTabbing = false;
     this.isExpanded = false;
+    this.announcement = "";
     this.keysSoFar = "";
     this.searchIndex = 0;
     this.keyClear = null;
     this.openUp = false;
+    //////////////////////////////////////
+    //////////////////////////////////////
     // for multiselect button text
     this.overflowCount = 0;
-    this.displayedItems = [];
-    this.allSelected = false;
+    this.displayedOptions = [];
+    this.debouncedSearch = debounce(() => {
+      this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });
+      if (this.filteredOptions.length) {
+        this.announce(this.resultsFoundMessage);
+      }
+      else {
+        this.announce(this.noResultsFoundMessage);
+      }
+    }, 150);
   }
-  get childItems() {
+  get childOptions() {
     return Array.from(this.el.querySelectorAll("wm-option"));
   }
-  get selectedItems() {
+  get duplicateOptions() {
+    return Array.from(this.el.shadowRoot.querySelectorAll("wm-option"));
+  }
+  get allOptionEls() {
+    // this includes both slotted wm-options and internally created wm-options
+    return this.duplicateOptions.concat(this.childOptions);
+  }
+  get visibleOptionEls() {
+    return this.allOptionEls.filter((option) => !option.classList.contains("hidden") && !option.classList.contains("filtered-out"));
+  }
+  //////////////////////////////////////
+  // for search variants
+  get searchTerm() {
+    return this.searchFieldEl ? this.searchFieldEl.value : "";
+  }
+  get filteredOptions() {
+    return this.childOptions.filter((option) => { var _a; return (_a = option.textContent) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(this.searchTerm); });
+  }
+  get selectedOptions() {
     return Array.from(this.el.querySelectorAll("wm-option")).filter((x) => x.selected);
   }
+  get allSelected() {
+    return this.childOptions.filter((option) => option.selected).length === this.childOptions.length;
+  }
+  //////////////////////////////////////
+  get resultsFoundMessage() {
+    return intl.formatMessage({
+      id: "select.searchResultsFound",
+      defaultMessage: "{numResults, plural, one {1 option found} other {# options found}}",
+      description: "The message read by the screen reader, indicating how many results a search returned",
+    }, { numResults: this.filteredOptions.length });
+  }
+  get noResultsFoundMessage() {
+    return intl.formatMessage({
+      id: "select.noSearchResults",
+      defaultMessage: "No results found. Please try your search again.",
+      description: "The message displayed when no options pass the search filter",
+    });
+  }
   toggleTabbingOn() {
     this.isTabbing = true;
   }
@@ -166,14 +240,11 @@ let Select = class {
   }
   handleOptionSelection(ev) {
     if (!this.multiple) {
-      // ensure only one option is selected at a time
-      this.childItems
-        // remove selected on any other option
-        .filter((option) => option != ev.target && !!option.selected)
-        .map((option) => (option.selected = false));
-    }
-    this.focusItem(ev.target);
-    this.selectItem(ev.target);
+      // ensure only one option is selected at a time, unselect all other options
+      this.childOptions.forEach((option) => (option.selected = option === ev.detail));
+    }
+    this.focusOption(ev.detail);
+    this.selectOption(ev.detail);
     if (!this.multiple) {
       this.close();
     }
@@ -183,28 +254,24 @@ let Select = class {
     this.close();
   }
   handleChildUp(ev) {
-    this.moveUp(ev.target);
+    this.moveUp(ev.detail);
   }
   handleChildDown(ev) {
-    this.moveDown(ev.target);
+    this.moveDown(ev.detail);
   }
-  moveToFirstItem() {
-    this.focusItem(this.childItems[0]);
+  moveToFirstOption() {
+    this.focusOption(this.visibleOptionEls[0]);
   }
-  moveToLastItem() {
-    this.focusItem(this.childItems[this.childItems.length - 1]);
-  }
-  handleTabKey() {
-    this.close(false);
+  moveToLastOption() {
+    this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
   }
   closePopupOnEscape() {
     this.close();
   }
   handleOptionBlur(ev) {
-    const toElOrChild = ev.detail.relatedTarget === this.el || this.el.contains(ev.detail.relatedTarget);
     // if the Option is blurred to something other than the component emit a blur event with the appropriate relatedTarget
     // keeps our component's blur events accurate, and closes when focusing browser address bar
-    if (!toElOrChild) {
+    if (!this.isElOrChild(ev.detail.relatedTarget)) {
       const event = new CustomEvent("blur");
       // @ts-ignore
       event.relatedTarget = ev.detail.relatedTarget;
@@ -212,18 +279,23 @@ let Select = class {
     }
   }
   handleClick(ev) {
-    const isElOrChild = ev.target === this.el || this.el.contains(ev.target);
-    if (!isElOrChild && this.isExpanded) {
+    if (!this.isElOrChild(ev.target)) {
       this.close();
     }
   }
   handleButtonBlur(ev) {
-    const toElOrChild = ev.relatedTarget === this.el || this.el.contains(ev.relatedTarget);
-    if (toElOrChild) {
+    if (this.isElOrChild(ev.relatedTarget)) {
       // do not emit a blur event when opening the dropdown and focusing the Options
       ev.stopPropagation();
     }
   }
+  handleSearchFieldBlur(ev) {
+    this.searchFieldWrapperEl.classList.remove("focus");
+    if (this.isElOrChild(ev.relatedTarget)) {
+      // do not emit a blur event when moving from searchfield to options
+      ev.stopPropagation();
+    }
+  }
   handleKey(ev) {
     switch (ev.key) {
       case "ArrowDown":
@@ -253,137 +325,236 @@ let Select = class {
     if (document.body.classList.contains("wmcl-user-is-tabbing")) {
       this.toggleTabbingOn();
     }
+    // set initial selections
+    if (this.selectedOptions.length > 0) {
+      this.selectedOptions.forEach((x) => {
+        this.displayedOptions.push(x);
+      });
+      // single Select only, pre-select if no default option from dev
+    }
+    else if (!this.multiple) {
+      this.selectOption(this.allOptionEls[0]);
+    }
   }
   componentDidLoad() {
     this.wmSelectDidLoad.emit();
-    if (!this.childItems.length) {
-      throw new Error("wm-select should have wm-option elements as children.");
-    }
-    if (this.multiple && this.childItems.filter((x) => x.subinfo).length > 0) {
+    if (this.multiple && this.allOptionEls.filter((x) => x.subinfo).length > 0) {
       throw new Error("wm-select with the multiple prop cannot have subinfo options");
     }
     if (this.multiple && !this.placeholder) {
       throw new Error("wm-select with the multiple prop needs to also use the placeholder prop.");
     }
-    // set initial selections / button text
-    if (this.selectedItems.length > 0) {
-      this.selectedItems.forEach((x) => this.displayedItems.push(x));
-      this.setButtonText();
-      // single Select only, pre-select if no default option from dev
-    }
-    else if (!this.multiple) {
-      this.selectItem(this.childItems[0]);
-    }
-    this.optionsEl.classList.add("hidden");
+    this.dropdownEl.classList.add("hidden");
     forceUpdate(this.el);
     // Dev can overwrite the max-height rule set in the Sass file
     if (this.maxHeight) {
-      this.optionsEl.style.maxHeight = this.maxHeight;
+      this.dropdownEl.style.maxHeight = this.maxHeight;
+    }
+    const mutationObserver = new MutationObserver(() => this.handleSelectedMutation());
+    mutationObserver.observe(this.el, {
+      attributes: true,
+      attributeFilter: ["selected"],
+      subtree: true,
+    });
+    if (this.multiple) {
+      this.updateOptionVisibility();
+    }
+    this.setButtonText();
+  }
+  componentWillUpdate() {
+    if (this.multiple) {
+      // find last visible duplicate option and apply .last class
+      const visibleDuplicateOptions = this.visibleOptionEls.filter((option) => option.classList.contains("duplicate"));
+      visibleDuplicateOptions.forEach((option, idx) => {
+        if (idx === visibleDuplicateOptions.length - 1) {
+          option.classList.add("last");
+        }
+        else {
+          option.classList.remove("last");
+        }
+      });
     }
   }
+  handleSelectedMutation() {
+    // dispatch change event after selected options change
+    // mutation observer prevents emitting event when an already selected option is selected again
+    const event = new CustomEvent("change");
+    // @ts-ignore
+    this.el.dispatchEvent(event);
+  }
   moveUp(el) {
-    const prevEl = el.previousElementSibling;
+    const prevEl = this.visibleOptionEls[this.visibleOptionEls.indexOf(el) - 1];
     if (prevEl) {
       // scroll option to top of dropdown if partially obscured / out of view
-      if (prevEl.getBoundingClientRect().top < this.optionsEl.getBoundingClientRect().top) {
-        this.optionsEl.scrollTop =
-          prevEl.getBoundingClientRect().top - this.optionsEl.getBoundingClientRect().top + this.optionsEl.scrollTop;
+      if (prevEl.getBoundingClientRect().top < this.dropdownEl.getBoundingClientRect().top) {
+        this.scrollOptionToTop(prevEl);
       }
-      this.focusItem(prevEl);
+      this.focusOption(prevEl);
+    }
+    else if (this.search) {
+      // if top of list and search variant, focus search field
+      this.searchFieldEl.focus();
     }
     else {
-      this.focusItem(this.childItems[this.childItems.length - 1]);
+      // if top of list, focus last element
+      this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
     }
   }
   moveDown(el) {
-    const nextEl = el.nextElementSibling;
-    if (nextEl && nextEl.tagName !== "INPUT") {
+    const nextEl = this.visibleOptionEls[this.visibleOptionEls.indexOf(el) + 1];
+    if (nextEl) {
       // scroll option to bottom of dropdown if partially obscured / out of view
-      if (nextEl.getBoundingClientRect().bottom > this.optionsEl.getBoundingClientRect().bottom) {
-        this.optionsEl.scrollTop =
-          nextEl.getBoundingClientRect().bottom -
-            this.optionsEl.getBoundingClientRect().top +
-            this.optionsEl.scrollTop -
-            this.optionsEl.offsetHeight;
+      if (nextEl.getBoundingClientRect().bottom > this.dropdownEl.getBoundingClientRect().bottom) {
+        this.scrollOptionToBottom(nextEl);
       }
-      this.focusItem(nextEl);
+      this.focusOption(nextEl);
     }
     else {
-      this.focusItem(this.childItems[0]);
+      // if end of list, focus first option in all variants
+      this.focusOption(this.visibleOptionEls[0]);
     }
   }
-  open(itemToSelect) {
+  scrollOptionToTop(option) {
+    this.dropdownEl.scrollTop =
+      option.getBoundingClientRect().top - this.dropdownEl.getBoundingClientRect().top + this.dropdownEl.scrollTop;
+  }
+  scrollOptionToBottom(option) {
+    this.dropdownEl.scrollTop =
+      option.getBoundingClientRect().bottom -
+        this.dropdownEl.getBoundingClientRect().top +
+        this.dropdownEl.scrollTop -
+        this.dropdownEl.offsetHeight;
+  }
+  open(optionToSelect) {
     if (!this.disabled) {
       const elHeight = this.el.clientHeight;
       const buttonHeight = this.buttonEl.clientHeight;
-      this.openUp = shouldOpenUp(this.el, this.optionsEl, 
+      this.openUp = shouldOpenUp(this.el, this.dropdownEl, 
       // when opening up, dropdown covers both label and button
       elHeight, 
       // when opening down, dropdown covers only the button
       buttonHeight);
       this.isExpanded = true;
-      this.optionsEl.classList.remove("hidden");
+      this.dropdownEl.classList.remove("hidden");
       window.requestAnimationFrame(() => {
-        if (this.selectedItems.length > 0) {
-          if (itemToSelect === "next") {
-            this.moveDown(this.selectedItems[this.selectedItems.length - 1]);
-          }
-          else if (itemToSelect === "previous") {
-            this.moveUp(this.selectedItems[0]);
-          }
-          else {
-            this.focusItem(this.selectedItems[0]);
-          }
-        }
-        else {
-          this.focusItem(this.childItems[0]);
+        switch (optionToSelect) {
+          case "next":
+            // search variant focuses search field
+            // all others focus option "after" last selected option  (this can be the first option)
+            if (this.search) {
+              this.searchFieldEl.focus();
+              this.dropdownEl.scrollTop = 0;
+            }
+            else {
+              this.moveDown(this.visibleOptionEls.filter((x) => x.selected).slice(-1)[0]);
+            }
+            break;
+          case "previous":
+            // search variant focuses last option
+            // all others focus option "above" first selected option (this can be the last option)
+            if (this.search) {
+              this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
+            }
+            else {
+              this.moveUp(this.visibleOptionEls.filter((x) => x.selected)[0]);
+            }
+            break;
+          default:
+            // search variant focuses search field
+            // all others focus the selected option
+            // if no option is selected (empty multiselect), focuses first option
+            if (this.search) {
+              this.searchFieldEl.focus();
+              this.dropdownEl.scrollTop = 0;
+            }
+            else if (this.selectedOptions.length > 0) {
+              this.focusOption(this.visibleOptionEls.filter((x) => x.selected)[0]);
+            }
+            else {
+              this.focusOption(this.visibleOptionEls[0]);
+            }
+            break;
         }
       });
     }
   }
   close(returnFocus = true) {
-    this.isExpanded = false;
-    this.childItems.map((i) => (i.focused = false));
-    window.setTimeout(() => {
-      this.optionsEl.classList.add("hidden");
-      // Returns focus to button after popup closes (no need if user is tabbing)
-      // Delay is necessary for screenreader to get new expanded state before focus
-      // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
-      // also UX wise, it makes sense for the button to only be focused after the animation is complete
-      if (returnFocus) {
-        this.el.focus();
+    if (this.isExpanded) {
+      this.isExpanded = false;
+      this.allOptionEls.map((i) => (i.focused = false));
+      window.setTimeout(() => {
+        this.dropdownEl.classList.add("hidden");
+        if (this.multiple) {
+          this.updateOptionVisibility();
+        }
+        // clear search field, reset filtered / bolded state of wm-options
+        if (this.search) {
+          this.searchFieldEl.value = "";
+          this.wmSelectSearchChanged.emit({ searchTerm: this.searchTerm });
+        }
+        // Returns focus to button after popup closes (no need if user is tabbing)
+        // Delay is necessary for screenreader to get new expanded state before focus
+        // window.requestAnimationFrame is probably enough, but since we are already using setTimeout it may as well be here
+        // also UX wise, it makes sense for the button to only be focused after the animation is complete
+        if (returnFocus) {
+          this.el.focus();
+        }
+      }, 150);
+    }
+  }
+  updateOptionVisibility() {
+    // this runs for search multiselects, where selected options are rendered at the top of the dropdown list
+    // slotted wm-options are hidden if selected, and duplicate wm-options are made visible if selected
+    this.childOptions.forEach((option, idx) => {
+      const duplicateOption = this.duplicateOptions[idx];
+      if (option.selected) {
+        option.classList.add("hidden");
+        duplicateOption.classList.remove("hidden");
       }
-    }, 150);
+      else {
+        option.classList.remove("hidden");
+        duplicateOption.classList.add("hidden");
+      }
+    });
   }
-  focusItem(item) {
-    this.childItems.forEach((i) => (i.focused = i === item));
+  focusOption(option) {
+    this.allOptionEls.forEach((i) => (i.focused = i === option));
+    option.focus();
   }
-  selectItem(item) {
-    if (this.multiple) {
-      item.selected = !item.selected;
+  selectOption(option) {
+    // this function does not necessarily change an options selected property to true
+    // in cases of multiselect, it toggles the selected property
+    if (option.classList.contains("duplicate")) {
+      // if clicking on a duplicate option, toggle selected property of real one, then rerender
+      const correspondingOption = this.findCorrespondingOption(option);
+      correspondingOption.selected = !correspondingOption.selected;
+      forceUpdate(this.el);
+    }
+    else if (this.multiple) {
+      option.selected = !option.selected;
     }
     else {
-      this.childItems.forEach((i) => (i.selected = i === item));
+      this.allOptionEls.forEach((x) => (x.selected = x === option));
     }
     this.setButtonText();
   }
-  findAndFocusItem(ev) {
+  findAndFocusOption(ev) {
     const character = ev.detail.toUpperCase();
     if (!this.keysSoFar) {
-      for (var i = 0; i < this.childItems.length; i++) {
-        if (this.childItems[i].focused) {
+      for (var i = 0; i < this.allOptionEls.length; i++) {
+        if (this.allOptionEls[i].focused) {
           this.searchIndex = i;
         }
       }
     }
     this.keysSoFar += character;
     this.clearKeysSoFarAfterDelay();
-    var nextMatch = this.findMatchInRange(this.childItems, this.searchIndex + 1, this.childItems.length);
+    var nextMatch = this.findMatchInRange(this.allOptionEls, this.searchIndex + 1, this.allOptionEls.length);
     if (!nextMatch) {
-      nextMatch = this.findMatchInRange(this.childItems, 0, this.searchIndex);
+      nextMatch = this.findMatchInRange(this.allOptionEls, 0, this.searchIndex);
     }
     if (nextMatch) {
-      this.focusItem(nextMatch);
+      this.focusOption(nextMatch);
     }
   }
   clearKeysSoFarAfterDelay() {
@@ -397,8 +568,8 @@ let Select = class {
     }.bind(this), 500);
   }
   findMatchInRange(list, startIndex, endIndex) {
-    // Find the first item starting with the keysSoFar substring, searching in
-    // the specified range of items
+    // Find the first option starting with the keysSoFar substring, searching in
+    // the specified range of options
     for (var n = startIndex; n < endIndex; n++) {
       var label = list[n].textContent;
       if (label && label.toUpperCase().indexOf(this.keysSoFar) === 0) {
@@ -407,6 +578,19 @@ let Select = class {
     }
     return null;
   }
+  findCorrespondingOption(el) {
+    // if duplicate, returns the child wm-option
+    // if child wm-option, returns duplicate
+    const isDuplicate = el.classList.contains("duplicate");
+    return isDuplicate
+      ? this.childOptions[this.duplicateOptions.indexOf(el)]
+      : this.duplicateOptions[this.childOptions.indexOf(el)];
+  }
+  isElOrChild(el) {
+    var _a;
+    // determines whether or not the element is the component, a child of the component, or exists within the component's shadowroot
+    return el === this.el || this.el.contains(el) || ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.contains(el));
+  }
   exposeErrors() {
     // When the error changes, a new id is set for the error container and the button's aria-describedby attribute is updated accordingly. This is to make sure the screen reader announces teh updated errors in Firefox. See this longstanding bug: https://bugzilla.mozilla.org/show_bug.cgi?id=493683
     const newId = generateId();
@@ -424,9 +608,30 @@ let Select = class {
       this.wmComponentBlurred.emit(); // deprecated
     }
   }
+  handleSearchFieldKeyDown(ev) {
+    switch (ev.key) {
+      case "ArrowDown":
+        ev.preventDefault();
+        if (this.visibleOptionEls.length) {
+          this.focusOption(this.visibleOptionEls[0]);
+        }
+        break;
+      case "ArrowUp":
+        ev.preventDefault();
+        if (this.visibleOptionEls.length) {
+          this.focusOption(this.visibleOptionEls[this.visibleOptionEls.length - 1]);
+        }
+        break;
+      case "Escape":
+        ev.preventDefault();
+        this.close();
+        break;
+    }
+  }
   setButtonText() {
-    this.displayedItems = this.childItems.filter((x) => x.selected);
-    this.allSelected = this.displayedItems.length === this.childItems.length;
+    this.displayedOptions = this.childOptions
+      .filter((x) => x.selected)
+      .map((y) => (!y.classList.contains("hidden") ? y : this.findCorrespondingOption(y)));
     // handle overflow + counter for multiselect
     if (this.multiple) {
       // this is a fixed measurement accounting for the max width of a 3 character overflow counter
@@ -436,32 +641,39 @@ let Select = class {
       const paddingLeft = parseInt(computedStyle.getPropertyValue("padding-left").slice(0, -2));
       const paddingRight = parseInt(computedStyle.getPropertyValue("padding-right").slice(0, -2));
       const availableSpace = this.buttonEl.clientWidth - paddingLeft - paddingRight - overflowCounterWidth;
-      let optionsWidths = this.displayedItems.map((x) => x.shadowRoot.querySelector(".option-wrapper").clientWidth);
+      let optionsWidths = this.displayedOptions.map((x) => x.shadowRoot.querySelector(".option-wrapper").clientWidth);
       let optionsTotalWidth = optionsWidths.reduce((acc, x) => acc + x, 0);
       this.overflowCount = 0;
-      while (optionsTotalWidth > availableSpace && this.displayedItems.length > 1) {
+      while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
         this.overflowCount++;
         optionsTotalWidth -= optionsWidths[optionsWidths.length - 1];
         optionsWidths.pop();
-        this.displayedItems.pop();
+        this.displayedOptions.pop();
       }
     }
   }
+  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.multiple && this.displayedItems.length < 1) {
+    if (this.multiple && this.displayedOptions.length < 1) {
       return h("span", null, this.placeholder);
     }
     else if (this.multiple && this.allSelected && this.overflowCount > 0) {
       return this.allSelectedMessage;
     }
     else {
-      return this.displayedItems.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
+      return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
     }
   }
   renderSubinfo() {
     // multiselects cannot have subinfo for options
-    if (!this.multiple && this.selectedItems.length > 0 && this.selectedItems[0].subinfo) {
-      return h("span", { class: "subinfo" }, this.selectedItems[0].subinfo);
+    if (!this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo) {
+      return h("span", { class: "subinfo" }, this.selectedOptions[0].subinfo);
     }
   }
   renderOverflowCount() {
@@ -469,6 +681,17 @@ let Select = class {
       return (h("span", null, h("span", { class: "overflow-counter" }, "+", this.overflowCount)));
     }
   }
+  renderSearchField() {
+    return (h("div", { class: "search" }, h("div", { class: "searchfield-wrapper", ref: (el) => (this.searchFieldWrapperEl = el) }, h("div", { class: "icon" }), h("input", { ref: (el) => (this.searchFieldEl = el), class: "searchfield", role: "combobox", "aria-controls": `list-${this.uid}`, "aria-expanded": this.isExpanded ? "true" : "false", onKeyDown: (ev) => this.handleSearchFieldKeyDown(ev), onFocus: () => this.searchFieldWrapperEl.classList.add("focus"), onBlur: (ev) => this.handleSearchFieldBlur(ev), onInput: () => this.debouncedSearch(), placeholder: this.searchPlaceholder }))));
+  }
+  renderSearchFailedMessage() {
+    return h("div", { class: "search-results-message" }, this.noResultsFoundMessage);
+  }
+  renderDuplicateOptions() {
+    return Array.from(this.el.children).map((option) => {
+      return (h("wm-option", { class: "duplicate", selected: option.selected }, option.textContent));
+    });
+  }
   render() {
     const buttonProps = {
       id: `selectbtn-${this.uid}`,
@@ -481,9 +704,9 @@ let Select = class {
     };
     return (h(Host, { onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.invalid || this.errorMessage ? "invalid" : ""}` }, h("div", { class: "label-wrapper" }, h("label", { class: "label", id: `label-${this.uid}`, htmlFor: `selectbtn-${this.uid}` }, 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" }, this.requiredMessage), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "dropdown" }, h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isTabbing ? "user-is-tabbing" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { class: this.selectedItems.length > 0 && this.selectedItems.filter((x) => x.subinfo).length > 0
+    this.requiredField ? (h("span", { class: "required" }, h("span", { class: "sr-only" }, this.requiredMessage), h("span", { "aria-hidden": "true" }, "*"))) : (""))), h("div", { class: "button-wrapper" }, h("button", Object.assign({}, buttonProps, { class: `displayedoption ${this.isTabbing ? "user-is-tabbing" : ""}`, ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev), onFocus: () => this.close() }), h("span", { class: this.selectedOptions.length > 0 && this.selectedOptions.filter((x) => x.subinfo).length > 0
         ? "overflowcontrol hassubinfo"
-        : "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText()), this.renderSubinfo()), this.renderOverflowCount()), h("div", { class: `options ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, id: `list-${this.uid}`, tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": `label-${this.uid}`, ref: (el) => (this.optionsEl = el) }, h("slot", null)), this.renderErrorContainer()))));
+        : "overflowcontrol" }, h("span", { class: "button-text" }, this.renderButtonText()), this.renderSubinfo()), this.renderOverflowCount()), h("div", { class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, this.search && this.renderSearchField(), h("div", { id: `list-${this.uid}`, tabindex: -1, role: "listbox", "aria-multiselectable": this.multiple ? "true" : null, "aria-labelledby": `label-${this.uid}` }, this.search && this.filteredOptions.length === 0 && this.renderSearchFailedMessage(), this.multiple && this.renderDuplicateOptions(), h("slot", null))), this.renderErrorContainer(), h("div", { "aria-live": "polite", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {