@watermarkinsights/ripple 5.19.1-alpha.2 → 5.19.2-alpha.0

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

@@ -878,10 +878,6 @@
   --wmcolor-select-selectall-border: var(--wmcolor-select-option-border);
   --wmcolor-select-selectall-text: var(--wmcolor-interactive);
   --wmcolor-select-text: var(--wmcolor-interactive);
-  --button-width: auto;
-  --dropdown-left: 0;
-  --dropdown-translate-y: 0;
-  --dropdown-max-height: none;
   position: relative;
   display: block;
   box-sizing: border-box;
@@ -979,16 +975,14 @@
   margin-left: 0.75rem;
 }
 
-.button-wrapper {
+.wrapper .button-wrapper {
   position: relative;
   flex: 1;
   font-size: 1.125rem;
   color: var(--wmcolor-select-text);
   min-width: 8.75rem;
 }
-
-.displayedoption {
-  anchor-name: --select-button;
+.wrapper .button-wrapper .displayedoption {
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   -ms-border-radius: 3px;
@@ -1015,124 +1009,118 @@
   text-align: left;
 }
 @media only screen and (max-width: 768px) {
-  .displayedoption {
+  .wrapper .button-wrapper .displayedoption {
     height: 2.75rem;
   }
 }
-.displayedoption .expand-icon {
+.wrapper .button-wrapper .displayedoption .expand-icon {
   --icon-size: 1.125rem;
   position: absolute;
   inset-inline-end: 0.5625rem;
 }
-.displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised) {
+.wrapper .button-wrapper .displayedoption:hover:not(:disabled):not(.-disabled):not(.-raised) {
   background: var(--wmcolor-select-background);
   text-decoration: none;
 }
-.displayedoption:active {
+.wrapper .button-wrapper .displayedoption:active {
   -ms-transform: initial;
   transform: initial;
 }
-.displayedoption:focus {
+.wrapper .button-wrapper .displayedoption:focus {
   outline: none;
 }
-.displayedoption::-moz-focus-inner {
+.wrapper .button-wrapper .displayedoption::-moz-focus-inner {
   border: 0;
 }
-.displayedoption:focus-visible {
+.wrapper .button-wrapper .displayedoption:focus-visible {
   outline: 3px solid var(--wmcolor-interactive-focus);
   outline-offset: 2px;
 }
-.displayedoption .overflowcontrol {
+.wrapper .button-wrapper .displayedoption .overflowcontrol {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   flex: 1;
 }
-.displayedoption .overflowcontrol.hassubinfo {
+.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo {
   display: flex;
 }
-.displayedoption .overflowcontrol.hassubinfo .button-text {
+.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .button-text {
   flex: 1;
   text-overflow: ellipsis;
   overflow: hidden;
   min-width: 0;
 }
-.displayedoption .overflowcontrol.hassubinfo .subinfo {
+.wrapper .button-wrapper .displayedoption .overflowcontrol.hassubinfo .subinfo {
   flex: none;
   font-style: italic;
 }
-.displayedoption .overflow-counter {
+.wrapper .button-wrapper .displayedoption .overflow-counter {
   font-weight: bold;
   margin-left: 0.5rem;
 }
-
-.displayedoption[disabled] {
+.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;
 }
-
-.dropdown {
-  margin: 0;
-  padding: 0;
-  width: unset;
+.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);
-  border: none;
+  -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;
-  -webkit-overflow-scrolling: touch;
+  position: absolute;
+  top: 40px;
+  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;
 }
-.dropdown.hidden {
+.wrapper .button-wrapper > .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;
+}
+.wrapper .button-wrapper > .dropdown.hidden {
   visibility: hidden;
 }
-
-@supports (top: anchor(bottom)) {
-  .dropdown:popover-open {
-    transform: scaleY(1);
-    transition: transform 0.25s ease;
-    position: absolute;
-    position-anchor: --select-button;
-    top: anchor(bottom);
-    left: anchor(left);
-    right: anchor(right);
-    position-try-fallbacks: --pop-downward, --pop-upward;
-    transform-origin: center top;
-  }
-  .dropdown:popover-open.upward {
-    transform-origin: center bottom;
-  }
-  @starting-style {
-    .dropdown:popover-open {
-      transform: scaleY(0);
-    }
-  }
-  @position-try --pop-downward {
-    bottom: unset;
-    top: anchor(bottom);
-  }
-  @position-try --pop-upward {
-    top: unset;
-    bottom: anchor(top);
-  }
+.wrapper .button-wrapper > .dropdown.open {
+  -ms-transform: scale(1, 1);
+  -webkit-transform: scale(1, 1);
+  -moz-transform: scale(1, 1);
+  transform: scale(1, 1);
 }
-.invalid .displayedoption {
+.wrapper.invalid .button-wrapper .displayedoption {
   -webkit-box-shadow: 0 0 0 1px var(--wmcolor-border-error);
   -moz-box-shadow: 0 0 0 1px var(--wmcolor-border-error);
   box-shadow: 0 0 0 1px var(--wmcolor-border-error);
   border-color: var(--wmcolor-border-error);
 }
-
-.error-message {
+.wrapper .error-message {
   display: block;
   font-style: italic;
   color: var(--wmcolor-text-error);
@@ -1141,7 +1129,7 @@
   top: 100%;
   left: 0;
 }
-.error-message:not(:empty) {
+.wrapper .error-message:not(:empty) {
   margin-top: 0.25rem;
 }
 
@@ -1171,20 +1159,4 @@
 .rtl > .displayedoption:before {
   right: auto;
   left: 0.5625rem;
-}
-
-@supports not (top: anchor(bottom)) {
-  .dropdown {
-    position: fixed !important;
-    z-index: 30;
-    inset: auto;
-    width: var(--button-width, auto) !important;
-    top: 0 !important;
-    left: var(--dropdown-left, 0) !important;
-    transform: translate(0, var(--dropdown-translate-y, 0)) !important;
-    max-height: var(--dropdown-max-height, none) !important;
-  }
-  .dropdown.hidden {
-    visibility: hidden;
-  }
 }

package/dist/collection/components/selects/wm-select/wm-select.js

@@ -1,34 +1,14 @@
 import { h, Host } from "@stencil/core";
 import { forceUpdate } from "@stencil/core";
-import { getTextDir, toBool, handleDisabledAttribute, showTooltip, hideTooltip, debounce, findAllScrollableParents, } from "../../../global/functions";
+import { getTextDir, shouldOpenUp, isElOrChild, toBool, handleDisabledAttribute, showTooltip, hideTooltip } from "../../../global/functions";
 import { globalMessages, selectMessages } from "../../../global/intl";
 export class Select {
     constructor() {
-        this.scrollableParents = [];
-        this.returnFocus = false;
-        this.hasAnchor = CSS.supports("top", "anchor(bottom)"); // for FF polyfill
+        this.openUp = false;
         //////////////////////////////////////
         // for multiselect button text
         this.overflowCount = 0;
         this.displayedOptions = [];
-        this.previousDisplayedOptions = [];
-        this.debouncedScroll = debounce(() => {
-            if (this.hasAnchor) {
-                const popoverRect = this.dropdownEl.getBoundingClientRect();
-                const anchorRect = this.buttonEl.getBoundingClientRect();
-                // Heuristic: Popover is ABOVE the anchor (it opened upwards)
-                this.isUp = popoverRect.bottom < anchorRect.top;
-                this.isExpanded = true;
-                this.optionListEl.handleInitialFocus(this.elToFocus);
-                this.elToFocus = undefined;
-            }
-            else {
-                this.dropdownPosition();
-            }
-        }, 100);
-        this.debouncedResize = debounce(() => {
-            this.dropdownPosition();
-        }, 100);
         this.disabled = false;
         this.maxHeight = "200px";
         this.label = undefined;
@@ -42,8 +22,6 @@ export class Select {
         this.searchPlaceholder = selectMessages.searchPlaceholder;
         this.allSelectedMessage = selectMessages.allSelected;
         this.isExpanded = false;
-        this.isUp = false;
-        this.isHidden = false;
         this.announcement = "";
     }
     get childOptions() {
@@ -62,149 +40,58 @@ export class Select {
     //////////////////////////////////////
     handleOptionSelection() {
         if (!this.multiple) {
-            this.returnFocus = true;
-            this.dropdownEl.hidePopover();
+            this.close();
         }
     }
     handleChildEnter() {
         // only occurs for multiselects. handle the click, then close
-        this.returnFocus = true;
-        this.dropdownEl.hidePopover();
-    }
-    closeDropdownOnEscape() {
-        this.returnFocus = true;
-        this.dropdownEl.hidePopover();
-    }
-    handleBeforeToggle() {
-        if (!this.hasAnchor) {
-            // Start hidden to prevent flash during positioning calculation
-            this.isHidden = true;
-        }
-    }
-    handleToggle(ev) {
-        ev.newState === "open" ? this.open() : this.close();
-    }
-    dropdownPosition() {
-        // polyfill for opening up or down + positioning according to screen
-        // (must recalculate on scroll, resize)
-        // Using transform for better performance - only affects composite layer, no layout recalculation
-        const buttonElRect = this.buttonEl.getBoundingClientRect();
-        const spaceAbove = buttonElRect.top;
-        const spaceBelow = document.documentElement.clientHeight - buttonElRect.bottom;
-        const dropdownHeight = this.dropdownEl.clientHeight;
-        // Clear any previously set positioning properties
-        this.el.style.removeProperty("--dropdown-translate-y");
-        this.el.style.removeProperty("--dropdown-max-height");
-        this.el.style.removeProperty("--dropdown-left");
-        // Set horizontal position and width to match button
-        this.el.style.setProperty("--dropdown-left", buttonElRect.left + "px");
-        this.el.style.setProperty("--button-width", buttonElRect.width + "px");
-        if (dropdownHeight <= spaceBelow) {
-            // Case 1: Enough space below - position dropdown below the button
-            this.el.style.setProperty("--dropdown-translate-y", buttonElRect.bottom + "px");
-        }
-        else if (dropdownHeight <= spaceAbove) {
-            // Case 2: Not enough space below, but enough above - position dropdown above the button
-            this.el.style.setProperty("--dropdown-translate-y", buttonElRect.top - dropdownHeight + "px");
-        }
-        else {
-            // Case 3: Not enough space in either direction - use the larger available space and constrain height
-            if (spaceBelow >= spaceAbove) {
-                // Use space below and constrain dropdown height
-                this.el.style.setProperty("--dropdown-translate-y", buttonElRect.bottom + "px");
-                this.el.style.setProperty("--dropdown-max-height", spaceBelow + "px");
-            }
-            else {
-                // Use space above and constrain dropdown height
-                this.el.style.setProperty("--dropdown-translate-y", "0px");
-                this.el.style.setProperty("--dropdown-max-height", spaceAbove + "px");
-            }
+        this.close();
+    }
+    closePopupOnEscape() {
+        this.close();
+    }
+    handleOptionBlur(ev) {
+        // 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 (!isElOrChild(this.el, ev.detail.relatedTarget)) {
+            const event = new CustomEvent("blur");
+            // @ts-ignore
+            event.relatedTarget = ev.detail.relatedTarget;
+            this.el.dispatchEvent(event);
         }
-        this.isHidden = false;
     }
-    open() {
-        if (!this.isExpanded && !this.isDisabled) {
-            // polyfill for browsers without anchor() support (FF)
-            if (!this.hasAnchor) {
-                this.dropdownPosition();
-            }
-            requestAnimationFrame(() => {
-                const popoverRect = this.dropdownEl.getBoundingClientRect();
-                const anchorRect = this.buttonEl.getBoundingClientRect();
-                // Heuristic: Popover is ABOVE the anchor (it opened upwards)
-                this.isUp = popoverRect.top < anchorRect.top;
-                this.isExpanded = true;
-                this.optionListEl.handleInitialFocus(this.elToFocus);
-                this.elToFocus = undefined;
-            });
+    handleClick(ev) {
+        if (!isElOrChild(this.el, ev.target)) {
+            this.close();
         }
     }
-    close() {
-        if (this.isExpanded) {
-            this.isExpanded = false;
-            this.optionListEl.unfocusAll();
-            window.setTimeout(() => {
-                if (!this.hasAnchor) {
-                    this.isHidden = true;
-                }
-                if (this.optionListEl.multiple) {
-                    this.optionListEl.updateOptionVisibility();
-                }
-                // clear search field, reset filtered / bolded state of wm-options
-                if (this.search) {
-                    this.optionListEl.clearSearch();
-                }
-            }, 150);
-            if (this.returnFocus) {
-                requestAnimationFrame(() => {
-                    this.buttonEl.focus();
-                    this.returnFocus = false;
-                });
-            }
+    handleButtonBlur(ev) {
+        if (isElOrChild(this.el, ev.relatedTarget)) {
+            // do not emit a blur event when opening the dropdown and focusing the Options
+            ev.stopPropagation();
         }
     }
     handleKey(ev) {
         switch (ev.key) {
             case "Tab":
                 // if tabbing backwards, close and return focus to button. Otherwise, close but do not redirect focus.
-                if (this.isExpanded && ev.shiftKey) {
-                    this.returnFocus = true;
-                }
-                this.dropdownEl.hidePopover();
+                this.close(ev.shiftKey ? true : false);
                 break;
             case "ArrowDown":
                 if (this.isExpanded === false) {
                     ev.preventDefault();
-                    this.elToFocus = "next";
-                    this.dropdownEl.showPopover();
+                    this.open("next");
                 }
                 break;
             case "ArrowUp":
                 if (this.isExpanded === false) {
                     ev.preventDefault();
-                    this.elToFocus = "previous";
-                    this.dropdownEl.showPopover();
+                    this.open("previous");
                 }
                 break;
         }
     }
-    handleResize() {
-        if (!this.hasAnchor && this.isExpanded) {
-            this.isHidden = true;
-            this.debouncedResize();
-        }
-    }
-    handleScroll() {
-        if (this.isExpanded) {
-            this.isHidden = true;
-            this.debouncedScroll();
-        }
-    }
     componentWillLoad() {
-        if (!this.hasAnchor) {
-            // Start hidden to prevent flash on first load
-            this.isHidden = true;
-        }
         if (!this.label) {
             console.error("For accessibility purposes, this component requires a label (even if `label-position` is set to `none`).");
         }
@@ -221,6 +108,8 @@ export class Select {
         });
     }
     handleChildChange() {
+        // on update of children or children selected state, reset button text and rerender
+        this.setButtonText();
         forceUpdate(this.el);
         if (this.multiple) {
             // update state of clone options
@@ -229,19 +118,43 @@ export class Select {
     }
     componentDidLoad() {
         this.wmSelectDidLoad.emit();
-        if (!this.hasAnchor) {
-            this.scrollableParents = findAllScrollableParents(this.el);
-            // Add scroll listeners to all scrollable parents
-            this.scrollableParents.forEach((parent) => {
-                if (parent === document.documentElement) {
-                    // For document element, listen to window scroll event
-                    window.addEventListener("scroll", () => this.handleScroll());
+        this.dropdownEl.classList.add("hidden");
+        forceUpdate(this.el);
+        this.setButtonText();
+    }
+    open(optionToSelect) {
+        if (!this.isDisabled) {
+            this.openUp = shouldOpenUp(this.el, this.dropdownEl.clientHeight, this.labelEl.clientHeight);
+            this.isExpanded = true;
+            this.dropdownEl.classList.add("open");
+            this.dropdownEl.classList.remove("hidden");
+            window.requestAnimationFrame(() => {
+                this.optionListEl.handleInitialFocus(optionToSelect);
+            });
+        }
+    }
+    close(returnFocus = true) {
+        if (this.isExpanded) {
+            this.isExpanded = false;
+            this.optionListEl.unfocusAll();
+            this.dropdownEl.classList.remove("open");
+            window.setTimeout(() => {
+                this.dropdownEl.classList.add("hidden");
+                if (this.optionListEl.multiple) {
+                    this.optionListEl.updateOptionVisibility();
                 }
-                else {
-                    // For regular elements, listen to their scroll event
-                    parent.addEventListener("scroll", () => this.handleScroll());
+                // clear search field, reset filtered / bolded state of wm-options
+                if (this.search) {
+                    this.optionListEl.clearSearch();
                 }
-            });
+                // 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.buttonEl.focus();
+                }
+            }, 150);
         }
     }
     announceError() {
@@ -255,6 +168,7 @@ export class Select {
     handleComponentBlur(ev) {
         // Do not close or emit custom blur event when blurring to an element inside (wm-option)
         if (!this.el.contains(ev.relatedTarget)) {
+            this.close(false);
             this.wmSelectBlurred.emit();
         }
     }
@@ -264,6 +178,28 @@ export class Select {
             showTooltip("right", ev.target, this.label);
         }
     }
+    setButtonText() {
+        this.displayedOptions = this.childOptions.filter((x) => x.selected);
+        // handle overflow + counter for multiselect
+        if (this.multiple) {
+            // this is a fixed measurement accounting for the max width of a 3 character overflow counter
+            const overflowCounterWidth = 38;
+            const computedStyle = window.getComputedStyle(this.buttonEl);
+            // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
+            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;
+            this.overflowCount = 0;
+            this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+            let optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
+                this.overflowCount++;
+                this.displayedOptions.pop();
+                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
+                optionsTotalWidth = this.measurementAreaEl.clientWidth;
+            }
+        }
+    }
     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) {
@@ -272,7 +208,6 @@ export class Select {
         this.announcement = message;
     }
     renderButtonText() {
-        this.displayedOptions = this.childOptions.filter((x) => x.selected);
         if (this.multiple && this.displayedOptions.length < 1) {
             return h("span", null, this.placeholder);
         }
@@ -280,28 +215,6 @@ export class Select {
             return this.allSelectedMessage;
         }
         else {
-            // handle overflow + counter for multiselect
-            // only bother if things have changed
-            const hasChanged = this.displayedOptions !== this.previousDisplayedOptions;
-            if (this.multiple && hasChanged) {
-                // this is a fixed measurement accounting for the max width of a 3 character overflow counter
-                const overflowCounterWidth = 38;
-                const computedStyle = window.getComputedStyle(this.buttonEl);
-                // there seems to be no quick way to get an elements width without padding, except for subtracting padding manually
-                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;
-                this.overflowCount = 0;
-                this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-                let optionsTotalWidth = this.measurementAreaEl.clientWidth;
-                while (optionsTotalWidth > availableSpace && this.displayedOptions.length > 1) {
-                    this.overflowCount++;
-                    this.displayedOptions.pop();
-                    this.measurementAreaEl.textContent = this.displayedOptions.map((x) => x.textContent).join(", ");
-                    optionsTotalWidth = this.measurementAreaEl.clientWidth;
-                }
-                this.previousDisplayedOptions = this.displayedOptions;
-            }
             return this.displayedOptions.map((x, idx) => (h("span", null, idx > 0 ? ", " : "", x.textContent)));
         }
     }
@@ -312,22 +225,18 @@ export class Select {
     }
     render() {
         const showSubinfo = !this.multiple && this.selectedOptions.length > 0 && this.selectedOptions[0].subinfo;
-        return (h(Host, { key: 'f73046e3e0d19f90e1de9f6c104b186159e08551', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '78f69feb04ef0436bb3b7f0bdeb08c67c69aa025', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'a3a54f3c4b01271bb472a2dcaeff653ae37191b8', class: "label-wrapper" }, h("label", { key: 'fac48d7e7a6ee92a6c28bcc6d76aa9b0358cb2fa', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
+        const buttonProps = {
+            id: "selectbtn",
+            ["disabled"]: this.isDisabled,
+            ["aria-controls"]: "list",
+            ["aria-labelledby"]: "label selectbtn",
+            ["aria-describedby"]: "error",
+            ["aria-expanded"]: this.isExpanded ? "true" : "false",
+            onClick: () => (this.isExpanded ? this.close() : this.open()),
+        };
+        return (h(Host, { key: '27f57d30b836eac8dc27ae98a425015d86a0948b', onBlur: (ev) => this.handleComponentBlur(ev) }, h("div", { key: '8f48d8e8d616244350e61d6e81f350640131bbf0', class: `wrapper ${getTextDir()} label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: '39d3bcec9b67d671a6bdbb6a3ee738832189ea51', ref: (el) => (this.labelEl = el), class: "label-wrapper" }, h("label", { key: 'b0bb90a215ac20de94afa8dba56e839bdc590dc1', class: "label", id: "label", htmlFor: "selectbtn", onMouseEnter: (ev) => this.handleLabelMouseEnter(ev), onMouseLeave: () => hideTooltip() }, this.label), 
         // we can't use aria-required because the listbox is in a sub-component and it is not announced
-        this.requiredField && (h("span", { key: 'a78da94fc8742122542de24709dae541058aeab1', class: "required" }, h("span", { key: '055fb76d88b0680ede31d3c700a640b5c1cb498f', class: "sr-only" }, globalMessages.requiredField), h("span", { key: 'e1db2d800c6b5789d8a50ce73b02899b4c8cf105', "aria-hidden": "true" }, "*")))), h("div", { key: '9a1b34ee65e711a6bfd55149af12ed03899294cc', class: "button-wrapper" }, h("button", { key: 'b7c86d83006cb532787d3f1df0c9c9f3b54470e7', id: "selectbtn", disabled: this.isDisabled, "aria-labelledby": "label selectbtn", "aria-describedby": "error", popoverTarget: "dropdown", popoverTargetAction: "toggle", class: "displayedoption", ref: (el) => (this.buttonEl = el) }, h("span", { key: 'ed2cc72a353f2bae29fdd5d8ea3f5b5dedc85c6b', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'cd68f6e2d0200649a57bb8f8c9c7ad423c551848', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: '2501335ceaa6612cd720c71b0ea3c6efb68fa698', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: 'dacf8d5e2223a9700854ef4fac3ecabf1c8702a2', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '161a40394450b4bac8ac91435a2b03ef9a0f8277', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: 'ed6cdbdfe2d290440b1bd33938b4cee31a70047e',
-            // is-open is for the CSS transition in modern browsers
-            // hidden is to wait for position calculations in Firefox
-            class: `dropdown ${this.isExpanded ? "is-open" : ""} ${this.isHidden ? "hidden" : ""} ${this.isUp ? "upward" : ""}`, id: "dropdown", popover: "auto", ref: (el) => (this.dropdownEl = el),
-            // @ts-ignore -- don't tell typescript but we're in the future
-            onToggle: (ev) => this.handleToggle(ev) }, h("priv-option-list", { key: '14ab958ca5cb5a3ac3fa970ed138ec5b47089779', ref: (el) => (this.optionListEl = el), multiple: this.multiple, search: this.search, selectAll: this.selectAll, maxHeight: this.maxHeight, searchPlaceholder: this.searchPlaceholder, onOptionListCloseRequested: () => {
-                this.dropdownEl.hidePopover();
-            }, onOptionListAllSelected: () => {
-                this.returnFocus = true;
-                this.wmSelectAllSelected.emit();
-            }, onOptionListAllDeselected: () => {
-                this.returnFocus = true;
-                this.wmSelectAllDeselected.emit();
-            } }, h("slot", { key: '98699fb0f36674cbae13f226fa923d6228fdad97' }))), h("div", { key: '69a49e6a2fe618bf9ce1a7e08527630a2d48cb8b', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '374538b9eb797924abfe74049fec191a41ae7501', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
+        this.requiredField && (h("span", { key: '4a5648503a023ff1eba34db936d49709e14da9f1', class: "required" }, h("span", { key: '3fe783c7174d3d827b20589cad412d32fa4cd978', class: "sr-only" }, globalMessages.requiredField), h("span", { key: '85ac4ca35f1077ade1bdda403b8888cc206ff28e', "aria-hidden": "true" }, "*")))), h("div", { key: 'c2e70d87db2d533713ac9c5a877ddba98a9a9a2f', class: "button-wrapper" }, h("button", Object.assign({ key: '460c6ac5cde8637b0098201966ca4268301ac2b7' }, buttonProps, { class: "displayedoption", ref: (el) => (this.buttonEl = el), onBlur: (ev) => this.handleButtonBlur(ev) }), h("span", { key: '3af3357f45ceacc5689e90e2bdc6459cab591c2f', class: `overflowcontrol ${showSubinfo ? "hassubinfo" : ""}` }, h("span", { key: 'bd9869db1146e54cc47c2965ebe2776873e2a18e', class: "button-text" }, this.renderButtonText()), showSubinfo && h("span", { key: 'b22d952625e93fab98ebb1b688101fd8891a4af7', class: "subinfo" }, this.selectedOptions[0].subinfo)), h("div", { key: '1f6448ee167d1847eff8fb5bc7a30e0a964e6efe', class: `expand-icon svg-icon ${this.isExpanded ? "svg-expand-less" : "svg-expand-more"}` }), this.renderOverflowCount(), h("div", { key: '0d550b97a3e08e9b708f2f4c3d91f9cac76ba5d8', ref: (el) => (this.measurementAreaEl = el), class: "measurement-area", "aria-hidden": "true" })), h("div", { key: '59cc7fcfa25d9d3eab8e4d70cdcd365e36e160ad', class: `dropdown ${this.isExpanded ? "open" : ""} ${this.openUp ? "upwards" : ""}`, ref: (el) => (this.dropdownEl = el) }, h("priv-option-list", { key: '9fb7d0396527bc18bb8f5d00d64c858470d0698d', 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() }, h("slot", { key: '4c307bca5104ec962ca050b46adf882fb78bb74a' }))), h("div", { key: '06f11b61b475cc6cd78c2a8278b8455a79405e17', id: "error", class: this.errorMessage ? "error-message" : "" }, this.errorMessage), h("div", { key: '86cf865fbb7fd0e2c88290fe92e6062ada7d9ab6', id: "announcement", "aria-live": "polite", "aria-atomic": "true", class: "sr-only", ref: (el) => (this.liveRegionEl = el) }, this.announcement)))));
     }
     static get is() { return "wm-select"; }
     static get encapsulation() { return "shadow"; }
@@ -563,8 +472,6 @@ export class Select {
     static get states() {
         return {
             "isExpanded": {},
-            "isUp": {},
-            "isHidden": {},
             "announcement": {}
         };
     }
@@ -656,22 +563,28 @@ export class Select {
                 "passive": false
             }, {
                 "name": "wmEscKeyPressed",
-                "method": "closeDropdownOnEscape",
+                "method": "closePopupOnEscape",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
-                "name": "keydown",
-                "method": "handleKey",
+                "name": "wmOptionBlurred",
+                "method": "handleOptionBlur",
                 "target": undefined,
                 "capture": false,
                 "passive": false
             }, {
-                "name": "resize",
-                "method": "handleResize",
-                "target": "window",
+                "name": "click",
+                "method": "handleClick",
+                "target": "document",
+                "capture": true,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "handleKey",
+                "target": undefined,
                 "capture": false,
-                "passive": true
+                "passive": false
             }];
     }
 }